一、H5是什么意思

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

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

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

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

二、H5的應用

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

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

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

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

三、H5頁面的優(yōu)點

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

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

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

4、h5對用戶來說具有參與感和形式感，這都是現(xiàn)代人非常重視的點。比如結婚邀請、趣味測試、拼團、投票等等經(jīng)典H5無一不是抓住人們情感、心理進行營銷宣傳。

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

6、H5營銷互動性很強，能積極調(diào)動起用戶的消費參與之心，甚至還能容用戶主動拉其他人進入。

四、H5頁面的缺點

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

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

2、時效性短

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

3、瀏覽速度慢

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

4、同質(zhì)化嚴重

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

五、H5頁面制作

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

1、代碼開發(fā)：

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

2、工具制作H5：

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

1、易企秀

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

體驗地址：www.eqxiu.com

2、兔展

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

體驗地址：www.rabbitpre.com

3、MaKa

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

體驗地址：www.maka.im

4、人人秀

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

體驗地址：www.rrx.cn

5、百度H5

總體來說，還算是比較傻瓜式的操作，支持直接導入PSD文件，不過想要做好一個H5頁面不簡單，要求擁有一定的PS作圖能力，把圖片做好以后導進去，然后進行文字和動畫編輯即可。

體驗地址：https://h5.bce.baidu.com

六、H5頁面制作流程

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

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

2、文案擬定

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

3、視覺設計

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

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

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

5、H5發(fā)布

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

七、H5制作的注意事項

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

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

3、復雜多變的動效不一定是好的，要考慮到加載速度等用戶體驗問題。

4、考慮到用戶使用場景的多樣性，那種介紹類的如果要加背景音樂，盡量不要太粗暴。有一點循序漸進最好，給用戶留時間在騷擾別人之前可以關閉。或者可以在開始時是關閉狀態(tài)。但做游戲h5頁面的時候，音樂可以沒有關閉開啟按鈕，因為用戶對接下來發(fā)生的事是有預知的。

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

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

總結

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

參考鏈接：

h5是什么意思？ - 知乎

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

h5是什么，要怎么制作H5？-36氪企服點評

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

修改于2023-09-05