相比電視、雜誌、戶外廣告等傳統媒體呈逐年下降的趨勢，品牌營銷在數字和移動方面的投入在逐年上升，而且，在所有渠道預算中移動技術的投入增長最快，遠遠高於其他渠道的增長。
移動營銷已是大勢所趨。
H5突然火了
通過微信和朋友圈的快速發展，H5靠着無需下載、即點即用的屬性迅速上位，一躍變成炙手可熱的小鮮肉。
那麼，H5是什麼？
H5，是HTML5的簡稱，它就是一種高級網頁技術。
只不過大家普遍接受的那個網頁技術版本是HTML4，而這個版本是在1997年發佈的。相比H4，H5有更多的交互和功能，最大的優點之一是在移動設備上支持多媒體。
還是沒聽懂？
這麼說吧，我們平時看到那些邀請函、幻燈片、小遊戲……都是H5網頁，它跟我們平時上網看到的那些網頁本質上沒有任何區別。
H5能做什麼?
這邊我大致做了三個分類：
1、品牌傳播：形式一般爲品牌發佈、總結報告、公益傳遞、人事招聘；
2、活動推廣：形式一般爲賀卡邀請、遊戲互動、答題有獎；
3、產品展示：形式一般爲故事講述、性能展示。
下面跟大家談談這3種類型的H5頁面
品牌傳播型H5——等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在內容上倡導一種態度、一個主旨，在設計上則需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。比如，品牌傳播之品牌發佈型、品牌傳播之總結報告型、品牌傳播之公益傳遞型、品牌傳播之人事招募型等
如何設計品牌傳播型H5頁面？
關於內容
適當借力——尋找共鳴
熱點結合——業務板塊完美融合
關於視覺
整體——氛圍渲染
細節刻畫——人物、元素配合
舉例：
品牌傳播之品牌發佈型
騰訊——生命之下，想象之上
活動推廣型H5——活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播，行成爆炸式的傳播效應。活動推廣之賀卡邀請型、活動推廣之遊戲互動型、活動推廣之答題有禮型等
如何設計活動推廣型H5頁面？
關於內容
標題黨——做個妥妥的標題黨，先到碗裏來再說
參與感——門檻低易參與，內容引發共鳴，利益驅使轉發
關於視覺
細節與統一——復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
衝擊性——最好閃瞎你的鈦金狗眼，讓用戶忍不住帶着“矮油不錯，這個頁面有點diao噢”的心情點擊分享
舉例：
活動推廣之答題有禮型
途風旅遊網：時光倒回9年，你會選擇怎樣人生？
產品展示型H5——聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。比如，產品展示之故事講述型、產品展示之性能展示型等
如何設計產品展示型H5頁面？
關於內容
講個好故事——引起共鳴
差異化展示——尋找產品個性和調性
關於視覺
整體——清晰、簡潔
細節刻畫——產品爲主，性能刻畫
舉例：
產品展示之故事講述型
一封來自1947年的明信片
H5頁面從形式上和內容上如何設計走入人心？
形式上——
1、幻燈片式：適用於頻繁、小型的需求。 例如：定期發佈的內容，幾乎零預算；結合熱點的營銷，週期極短。
2、交互式動畫：製作週期和成本比較高，需要提前規劃。優質的H5大約在兩週到4周左右，也有可能更長。適用於例如： 中小型活動/品牌事件的傳播；大型活動/品牌事件的傳播。
3、功能型：輕交互重功能的功能型H5製作週期較短、成本也不高，成功的關鍵不在於酷炫的交互，而在於用戶需求的把握以及後續的運營。適用於例如： 品牌賬號的粉絲運營。
4、H5能在你心中留多久？
根據騰訊今年發佈的《移動頁面用戶行爲報告》提出的幾個數據，可以給到大家一些參考：
-
H5頁面熱度一般只能持續兩天 ；
-
加載超過5秒就會有74%的用戶離開頁面；
-
中午12點和晚上10點是頁面訪問的高峯期；
-
用戶大部分（89.9%）喜歡上下滑動或右點擊，只有10.1%會左點擊；
-
層級越深流失越多，在第五頁的時候只剩下一半不到（48.2%）；
-
平均分享率12.68%。
-
怎樣和H5保持熱戀關係？
內容上——
1、故事化：不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅裏，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
2、場景化：H5的設置中，融入如寫字樓、地鐵站這些場景，一是讓用戶能在參與中，找到熟悉感以更容易的接受裏面的信息，二是也是最重要的，場景承載的品牌信息，能在用戶過後在某個特定場所裏，喚起他們的認知，從而加深用戶對品牌的印象。
3、強互動：加入互動機制，能讓用戶進一步感知體驗H5宣傳的品牌產品，提高對產品的購買慾望。
4、參與感：結合產品本身的特性以及用戶的喜好進行參與機制的設置。
5、社交性：要讓品牌能傳播得更遠還需在H5上融入社交性，藉助用戶的社交關係鏈傳播。社交需求是用戶存在社交媒體的核心，通常用戶會通過談資、幫助、比 較、炫耀、窺視.....
與好友維持或促進社交關係。因此，在H5設計中，應融入了這些能讓用戶分享的動機。
說了這麼多H5頁面種類，那麼如何製作H5頁面？
現在製作H5頁面其實已經很簡單了，不懂技術的也能製作，可以利用在線的H5製作網站，比如應用之星網站。
在製作之前，先要確認一下H5頁面的主題目標，你是想製作活動運營型H5頁面？還是想製作品牌宣傳型H5頁面？是想製作產品介紹型H5頁面？還是想製作總結報告型H5頁面？
當確認好主題後，就是準備素材，包括圖片，音樂，文案等。當素材準備好後，就可以開始製作H5頁面了。
然而一個H5頁面設計品質的出衆與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。
在這裏總結出以下的設計要點：
1、緊跟熱點，利用話題效應
想要你的H5專題頁一夜爆紅，第一時間抓住熱點併火速上線，藉機進行品牌宣傳也不失爲一條捷徑。
2、講個好故事，引發情感共鳴
不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅裏，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
3、細節與統一
要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
4、合理運用技術，打造流暢的互動體驗
隨着技術的發展，如今的HTML5擁有衆多出彩的特性，讓我們能輕鬆實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。（有興趣的話可以點擊這個網站 http://www.appstar.com.cn/幾乎有所有 H5 動態效果的展示）。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術 ，用心專注於爲用戶提供流暢的互動體驗。具體的製作教程，請看：應用之星：最好用的H5製作平臺-H5頁面製作教程分享。
結語
隨着手機硬件的升級、HTML5技術的發展以及微信平臺的開放，HTML5的跨平臺、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。未來必將涌現更多優秀的H5頁面，讓我們拭目以待。