一、H5是什么意思

H5在有兩種含義，一種是使用了html5技術(shù)的多媒體廣告頁(yè)面，一種是指Html5,是一種構(gòu)建Web內(nèi)容的語(yǔ)言。

1、H5是一種互動(dòng)形式的多媒體廣告頁(yè)面，又稱為H5頁(yè)面。廣泛用在微信傳播，是企業(yè)進(jìn)行品牌傳播的一種手段和工具。凡是使用了H5技術(shù)的網(wǎng)頁(yè)都可以被稱為H5。這種H5頁(yè)面已經(jīng)不局限于單純的HTML5技術(shù)，涵蓋了HTML5、CSS3、Javascript等一系列前端技術(shù)。

2、H5是一種構(gòu)建Web內(nèi)容的語(yǔ)言，是HTML5的簡(jiǎn)略寫法。HTML又是英文中的"超文本標(biāo)記語(yǔ)言"的縮寫，HTML5也就是第五代超文本標(biāo)記語(yǔ)言。由于HTML5本身已經(jīng)是一個(gè)縮寫，實(shí)際上將HTML5進(jìn)一步縮寫成H5在英語(yǔ)語(yǔ)法中是錯(cuò)誤的，因此只有在國(guó)內(nèi)H5才會(huì)被當(dāng)做HTML5的縮寫，以英語(yǔ)為母語(yǔ)的人群反而并不能理解H5的意思。

下面的內(nèi)容主要介紹H5頁(yè)面，我們一起來(lái)詳細(xì)看看吧。

二、H5的應(yīng)用

H5作為廣告的一種形式，在不同應(yīng)用場(chǎng)景是有一定區(qū)別的，可從創(chuàng)意形式、行業(yè)、場(chǎng)景三個(gè)維度來(lái)劃分目前H5的實(shí)際應(yīng)用：

創(chuàng)意形式：視頻H5、一鏡到底、全景VR、快閃、答題測(cè)試、合成海報(bào)、游戲、擬態(tài)類、數(shù)據(jù)表單、橫屏H5、長(zhǎng)頁(yè)面。

行業(yè)：互聯(lián)網(wǎng)/IT、汽車、地產(chǎn)/酒店、金融/銀行、文化/娛樂(lè)、服飾/時(shí)尚、電商/商業(yè)、教育/培訓(xùn)、媒體/政府、旅游/會(huì)展。

場(chǎng)景：邀請(qǐng)函、招聘、品牌推廣、產(chǎn)品宣傳、婚禮慶典、活動(dòng)營(yíng)銷、節(jié)日主題、數(shù)據(jù)報(bào)告、微雜志、微官網(wǎng)、年會(huì)。

三、H5頁(yè)面的優(yōu)點(diǎn)

1、H5頁(yè)面最大的優(yōu)勢(shì)是跨平臺(tái)，開發(fā)者無(wú)需太多的適配工作，用戶無(wú)需下載，打開一個(gè)網(wǎng)址即可，就能訪問(wèn)了。

2、H5頁(yè)面開發(fā)簡(jiǎn)單，現(xiàn)在市面上有大量的h5頁(yè)面制作軟件，不需要敲代碼就可以制作h5頁(yè)面。大大節(jié)省開發(fā)時(shí)間。

3、H5頁(yè)面推廣成本降低，推廣的只是一個(gè)URL鏈接，二維碼，不需要幾十兆，幾百兆的安裝包去推廣。

4、h5對(duì)用戶來(lái)說(shuō)具有參與感和形式感，這都是現(xiàn)代人非常重視的點(diǎn)。比如結(jié)婚邀請(qǐng)、趣味測(cè)試、拼團(tuán)、投票等等經(jīng)典H5無(wú)一不是抓住人們情感、心理進(jìn)行營(yíng)銷宣傳。

5、傳播效果好，h5頁(yè)面最大的優(yōu)勢(shì)是傳播能力極強(qiáng)，有非常好的傳播效果，是企業(yè)商家做品牌曝光，產(chǎn)品宣傳的利器。

6、H5營(yíng)銷互動(dòng)性很強(qiáng)，能積極調(diào)動(dòng)起用戶的消費(fèi)參與之心，甚至還能容用戶主動(dòng)拉其他人進(jìn)入。

四、H5頁(yè)面的缺點(diǎn)

1、平臺(tái)規(guī)則限制

H5雖然可以跨平臺(tái)推廣，但是正是由于其不依附于任何平臺(tái)環(huán)境，導(dǎo)致平臺(tái)對(duì)其會(huì)有各種規(guī)則限制。尤其是微信，為了便于管理，避免流量被導(dǎo)流，對(duì)H5的限制越來(lái)越多，營(yíng)銷難度也進(jìn)一步提高。

2、時(shí)效性短

H5營(yíng)銷容易在第一次傳播時(shí)產(chǎn)生巨大的熱度，但是二次甚至多次傳播較難，也就是爆發(fā)力強(qiáng)，但容易后勁不足。因?yàn)镠5不似小程序或者APP，可以隨時(shí)保留，隨查隨看，用戶容易用完一次就遺忘。同時(shí)由于H5屬于初級(jí)營(yíng)銷引流手段，用戶依賴性低，很難在H5頁(yè)面主動(dòng)輸入個(gè)人信息、注冊(cè)賬號(hào)等。

3、瀏覽速度慢

前面提到，H5是一種更有趣、可玩性更高的網(wǎng)頁(yè)。而網(wǎng)頁(yè)的打開速度受網(wǎng)絡(luò)信號(hào)的影響，瀏覽速度越慢，用戶多等一秒流失的可能性就越大。

4、同質(zhì)化嚴(yán)重

h5基本都是用差不多的軟件或者編輯器制作，想要?jiǎng)e出心裁不容易，市場(chǎng)上同質(zhì)化也有點(diǎn)高。

五、H5頁(yè)面制作

一般情況下，一個(gè)H5項(xiàng)目涵蓋策劃、創(chuàng)意、平面、動(dòng)畫交互、前后端的開發(fā)、推廣等方面，需要多人團(tuán)隊(duì)的配合，隨著互聯(lián)網(wǎng)的發(fā)展，H5技術(shù)的普及，對(duì)人力成本的控制和開發(fā)效率要求，萌生出一堆H5工具。

1、代碼開發(fā)：

最早的H5廣告是需要代碼開發(fā)，也只能依靠代碼開發(fā)，一方面是當(dāng)時(shí)沒(méi)有工具，第二方面是代碼可以做到更高的功能需求，安全、隱私數(shù)據(jù)可控，但缺點(diǎn)是成本高（程序員的薪酬高有木有）、周期長(zhǎng)、風(fēng)險(xiǎn)大（萬(wàn)一活動(dòng)節(jié)點(diǎn)耽誤，前面做的工作豈不是打水漂了）。

2、工具制作H5：

現(xiàn)在隨著互聯(lián)網(wǎng)的發(fā)展，H5技術(shù)的普及，對(duì)人力成本的控制和開發(fā)效率需求，萌生出一堆H5工具，下面介紹幾個(gè)工具供選擇：

1、易企秀

易企秀是比較早期發(fā)展起來(lái)的H5頁(yè)面制作工具，所以功能上還是比較齊全的。由于起步較早，易企秀儼然是目前國(guó)內(nèi)市面上使用最頻繁的H5微場(chǎng)景制作工具。不過(guò)由于適配的原因，做出來(lái)在手機(jī)上觀看兩邊會(huì)有留白。解決方法是將圖片變成背景。易企秀也是免費(fèi)，有多種動(dòng)態(tài)模板，可以簡(jiǎn)單、輕松制作基于HTML5的精美手機(jī)幻燈片頁(yè)面。

體驗(yàn)地址：www.eqxiu.com

2、兔展

兔展也是發(fā)展的比較成熟一款產(chǎn)品，一開始是本著"免費(fèi)、自由、簡(jiǎn)單"的理念發(fā)展的，不過(guò)慢慢發(fā)展壯大后，有許多功能是VIP才能使用的，比如說(shuō)特效或者更精密的模板之類的，兔展的使用頁(yè)面十分清新。

體驗(yàn)地址：www.rabbitpre.com

3、MaKa

MAKA這個(gè)平臺(tái)制作起來(lái)非常簡(jiǎn)單，靜態(tài)模板和動(dòng)態(tài)模板都有，模板樣式豐富，瀏覽體驗(yàn)不錯(cuò)。有多種動(dòng)態(tài)效果以及交互效果可供選擇，除收費(fèi)版外提供免費(fèi)版，不過(guò)免費(fèi)版不提供自定義動(dòng)效、支付、導(dǎo)航、預(yù)約等服務(wù)，也不能添加外鏈。

體驗(yàn)地址：www.maka.im

4、人人秀

人人秀有超過(guò)100000款活動(dòng)模板；超過(guò)40個(gè)H5頁(yè)面宣傳組件；超過(guò)200款互動(dòng)營(yíng)銷玩法；超過(guò)50+問(wèn)卷題型支持，正版商用素材；答題、投票、抽獎(jiǎng)、問(wèn)卷、表單、海報(bào)、游戲、電商、裂變、打卡簽到等覆蓋全行業(yè)、全場(chǎng)景營(yíng)銷。

體驗(yàn)地址：www.rrx.cn

5、百度H5

總體來(lái)說(shuō)，還算是比較傻瓜式的操作，支持直接導(dǎo)入PSD文件，不過(guò)想要做好一個(gè)H5頁(yè)面不簡(jiǎn)單，要求擁有一定的PS作圖能力，把圖片做好以后導(dǎo)進(jìn)去，然后進(jìn)行文字和動(dòng)畫編輯即可。

體驗(yàn)地址：https://h5.bce.baidu.com

六、H5頁(yè)面制作流程

1、了解需求并確定表現(xiàn)形式

了解H5制作背后的原因、目標(biāo)，以及大致想要表現(xiàn)形式，主要是確定創(chuàng)意和大體方向，由策劃人員進(jìn)行主導(dǎo)。

2、文案擬定

在形成初步設(shè)想之后，需要確定每個(gè)H5頁(yè)面的文案內(nèi)容，并且根據(jù)文案內(nèi)容初步形成與之對(duì)應(yīng)的表現(xiàn)風(fēng)格。

3、視覺(jué)設(shè)計(jì)

依據(jù)文案和確定風(fēng)格由設(shè)計(jì)師進(jìn)行視覺(jué)設(shè)計(jì)，然后雙方溝通，再次優(yōu)化，最終形成設(shè)計(jì)定稿。

4、代碼或工具實(shí)現(xiàn)

使用H5制作工具，選擇模板，修改元素可以簡(jiǎn)單實(shí)現(xiàn)，同時(shí)也可以上傳PSD文件覆蓋模板文件，自己創(chuàng)作。

5、H5發(fā)布

H5制作完成后，就是對(duì)H5進(jìn)行發(fā)布，H5發(fā)布后要注意數(shù)據(jù)監(jiān)測(cè)，隨時(shí)了解H5頁(yè)面的傳播情況。

七、H5制作的注意事項(xiàng)

1、前期跟前端設(shè)計(jì)師進(jìn)行溝通，討論頁(yè)面中元素的動(dòng)效呈現(xiàn)。例如一些元素的位移，旋轉(zhuǎn)，翻轉(zhuǎn)，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。

2 、背景動(dòng)效其實(shí)比較推薦緩動(dòng)效果，如"京東管培生招聘"的例子里星空中一閃而過(guò)的流星，間歇性出現(xiàn)不搶主角風(fēng)頭再好不過(guò)了。

3、復(fù)雜多變的動(dòng)效不一定是好的，要考慮到加載速度等用戶體驗(yàn)問(wèn)題。

4、考慮到用戶使用場(chǎng)景的多樣性，那種介紹類的如果要加背景音樂(lè)，盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)最好，給用戶留時(shí)間在騷擾別人之前可以關(guān)閉?；蛘呖梢栽陂_始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁(yè)面的時(shí)候，音樂(lè)可以沒(méi)有關(guān)閉開啟按鈕，因?yàn)橛脩魧?duì)接下來(lái)發(fā)生的事是有預(yù)知的。

5、考慮每一頁(yè)音樂(lè)按鈕放置的明顯性。如果能用其他頁(yè)面元素去替代音樂(lè)符號(hào)作為按鈕也是極好的。

6、給前端設(shè)計(jì)師的音樂(lè)文件：格式為mp3等 ，單軌，最好30秒以內(nèi) 。為了加載速度，文件大小盡量控制在：100k以內(nèi)最佳，可以用Adobe Audition等軟件來(lái)壓縮。作為無(wú)限循環(huán)的背景音樂(lè)，截取時(shí)一定要注意頭尾得連接得上。

總結(jié)

優(yōu)化猩SEO：H5幾乎成為了移動(dòng)端宣傳的主流方式，不管是商業(yè)活動(dòng)還是品牌推廣宣傳，大多都會(huì)選擇制作h5頁(yè)面來(lái)進(jìn)行相應(yīng)的宣傳工作，企業(yè)制作h5頁(yè)面進(jìn)行宣傳，也是順應(yīng)趨勢(shì)的發(fā)展。

參考鏈接：

h5是什么意思？ - 知乎

https://www.zhihu.com/question/53728210

h5是什么，要怎么制作H5？-36氪企服點(diǎn)評(píng)

https://www.36dianping.com/news/5012.html

修改于2023-09-05