相比電視怔昨、雜志、戶外廣告等傳統(tǒng)媒體呈逐年下降的趨勢宿稀，品牌營銷在數(shù)字和移動方面的投入在逐年上升趁舀，而且，在所有渠道預(yù)算中移動技術(shù)的投入增長最快祝沸，遠(yuǎn)遠(yuǎn)高于其他渠道的增長矮烹。
移動營銷已是大勢所趨。
H5突然火了
通過微信和朋友圈的快速發(fā)展奋隶，H5靠著無需下載擂送、即點(diǎn)即用的屬性迅速上位，一躍變成炙手可熱的小鮮肉唯欣。
那么嘹吨，H5是什么？
H5境氢，是HTML5的簡稱蟀拷，它就是一種高級網(wǎng)頁技術(shù)萍聊。
只不過大家普遍接受的那個(gè)網(wǎng)頁技術(shù)版本是HTML4问芬，而這個(gè)版本是在1997年發(fā)布的。相比H4寿桨，H5有更多的交互和功能此衅，最大的優(yōu)點(diǎn)之一是在移動設(shè)備上支持多媒體。
還是沒聽懂亭螟？
這么說吧挡鞍，我們平時(shí)看到那些邀請函、幻燈片预烙、小游戲……都是H5網(wǎng)頁墨微，它跟我們平時(shí)上網(wǎng)看到的那些網(wǎng)頁本質(zhì)上沒有任何區(qū)別。
H5能做什么?
這邊我大致做了三個(gè)分類：
1扁掸、品牌傳播：形式一般為品牌發(fā)布翘县、總結(jié)報(bào)告最域、公益?zhèn)鬟f、人事招聘锈麸；
2镀脂、活動推廣：形式一般為賀卡邀請、游戲互動忘伞、答題有獎狗热；
3、產(chǎn)品展示：形式一般為故事講述虑省、性能展示匿刮。
下面跟大家談?wù)勥@3種類型的H5頁面
品牌傳播型H5——等同于一個(gè)品牌的微官網(wǎng)，更傾向于品牌形象塑造探颈，向用戶傳達(dá)品牌的精神態(tài)度熟丸。在內(nèi)容上倡導(dǎo)一種態(tài)度、一個(gè)主旨伪节，在設(shè)計(jì)上則需要運(yùn)用符合品牌氣質(zhì)的視覺語言光羞，讓用戶對品牌留下深刻印象。比如怀大，品牌傳播之品牌發(fā)布型纱兑、品牌傳播之總結(jié)報(bào)告型、品牌傳播之公益?zhèn)鬟f型化借、品牌傳播之人事招募型等
如何設(shè)計(jì)品牌傳播型H5頁面潜慎？
關(guān)于內(nèi)容
適當(dāng)借力——尋找共鳴
熱點(diǎn)結(jié)合——業(yè)務(wù)板塊完美融合
關(guān)于視覺
整體——氛圍渲染
細(xì)節(jié)刻畫——人物、元素配合
舉例：
品牌傳播之品牌發(fā)布型
騰訊——生命之下蓖康，想象之上
活動推廣型H5——活動運(yùn)營頁需要有更強(qiáng)的互動铐炫、更高質(zhì)量、更具話題性的設(shè)計(jì)來促成用戶分享傳播蒜焊，行成爆炸式的傳播效應(yīng)倒信。活動推廣之賀卡邀請型泳梆、活動推廣之游戲互動型鳖悠、活動推廣之答題有禮型等
如何設(shè)計(jì)活動推廣型H5頁面？
關(guān)于內(nèi)容
標(biāo)題黨——做個(gè)妥妥的標(biāo)題黨优妙，先到碗里來再說
參與感——門檻低易參與乘综，內(nèi)容引發(fā)共鳴，利益驅(qū)使轉(zhuǎn)發(fā)
關(guān)于視覺
細(xì)節(jié)與統(tǒng)一——復(fù)古擬物的視覺風(fēng)格鳞溉，那字體就不能過于現(xiàn)代瘾带；幽默調(diào)侃的調(diào)調(diào)鼠哥，那文案措辭就不能過于嚴(yán)肅熟菲；打情感內(nèi)容牌的看政，動效就不能過于花哨。
沖擊性——最好閃瞎你的鈦金狗眼抄罕，讓用戶忍不住帶著“矮油不錯(cuò)允蚣，這個(gè)頁面有點(diǎn)diao噢”的心情點(diǎn)擊分享
舉例：
活動推廣之答題有禮型
途風(fēng)旅游網(wǎng)：時(shí)光倒回9年，你會選擇怎樣人生呆贿？
產(chǎn)品展示型H5——聚焦于產(chǎn)品功能介紹嚷兔，運(yùn)用H5的互動技術(shù)優(yōu)勢盡情展示產(chǎn)品特性，吸引用戶買買買做入。比如冒晰，產(chǎn)品展示之故事講述型、產(chǎn)品展示之性能展示型等
如何設(shè)計(jì)產(chǎn)品展示型H5頁面竟块？
關(guān)于內(nèi)容
講個(gè)好故事——引起共鳴
差異化展示——尋找產(chǎn)品個(gè)性和調(diào)性
關(guān)于視覺
整體——清晰壶运、簡潔
細(xì)節(jié)刻畫——產(chǎn)品為主，性能刻畫
舉例：
產(chǎn)品展示之故事講述型
一封來自1947年的明信片
H5頁面從形式上和內(nèi)容上如何設(shè)計(jì)走入人心浪秘？
形式上——
1蒋情、幻燈片式：適用于頻繁、小型的需求耸携。 例如：定期發(fā)布的內(nèi)容棵癣，幾乎零預(yù)算；結(jié)合熱點(diǎn)的營銷夺衍，周期極短狈谊。
2、交互式動畫：制作周期和成本比較高沟沙，需要提前規(guī)劃的畴。優(yōu)質(zhì)的H5大約在兩周到4周左右，也有可能更長尝胆。適用于例如： 中小型活動/品牌事件的傳播丧裁；大型活動/品牌事件的傳播。
3含衔、功能型：輕交互重功能的功能型H5制作周期較短煎娇、成本也不高，成功的關(guān)鍵不在于酷炫的交互贪染，而在于用戶需求的把握以及后續(xù)的運(yùn)營缓呛。適用于例如： 品牌賬號的粉絲運(yùn)營。
4杭隙、H5能在你心中留多久哟绊？
根據(jù)騰訊今年發(fā)布的《移動頁面用戶行為報(bào)告》提出的幾個(gè)數(shù)據(jù)，可以給到大家一些參考：
H5頁面熱度一般只能持續(xù)兩天 痰憎；
加載超過5秒就會有74%的用戶離開頁面票髓；
中午12點(diǎn)和晚上10點(diǎn)是頁面訪問的高峰期攀涵；
用戶大部分（89.9%）喜歡上下滑動或右點(diǎn)擊，只有10.1%會左點(diǎn)擊洽沟；
層級越深流失越多以故，在第五頁的時(shí)候只剩下一半不到（48.2%）；
平均分享率12.68%裆操。
怎樣和H5保持熱戀關(guān)系怒详？
內(nèi)容上——
1、故事化：不論H5的形式如何多變踪区，有價(jià)值的內(nèi)容始終是第一位的昆烁。在有限的篇幅里，學(xué)會講故事缎岗，引發(fā)用戶的情感共鳴善玫，將對內(nèi)容的傳播形成極大的推動。
2密强、場景化：H5的設(shè)置中茅郎，融入如寫字樓、地鐵站這些場景或渤，一是讓用戶能在參與中系冗，找到熟悉感以更容易的接受里面的信息，二是也是最重要的薪鹦，場景承載的品牌信息掌敬，能在用戶過后在某個(gè)特定場所里，喚起他們的認(rèn)知池磁，從而加深用戶對品牌的印象。
3地熄、強(qiáng)互動：加入互動機(jī)制，能讓用戶進(jìn)一步感知體驗(yàn)H5宣傳的品牌產(chǎn)品，提高對產(chǎn)品的購買欲望。
4提岔、參與感：結(jié)合產(chǎn)品本身的特性以及用戶的喜好進(jìn)行參與機(jī)制的設(shè)置捅儒。
5鞭莽、社交性：要讓品牌能傳播得更遠(yuǎn)還需在H5上融入社交性阶牍，借助用戶的社交關(guān)系鏈傳播。社交需求是用戶存在社交媒體的核心，通常用戶會通過談資、幫助、比 較、炫耀南吮、窺視.....
與好友維持或促進(jìn)社交關(guān)系露乏。因此碧浊，在H5設(shè)計(jì)中，應(yīng)融入了這些能讓用戶分享的動機(jī)瘟仿。
說了這么多H5頁面種類箱锐，那么怎樣制作H5頁面？
現(xiàn)在制作H5頁面其實(shí)已經(jīng)很簡單了劳较，不懂技術(shù)的也能制作驹止，可以利用在線的H5制作網(wǎng)站，比如應(yīng)用之星網(wǎng)站观蜗。
在制作之前臊恋，先要確認(rèn)一下H5頁面的主題目標(biāo)，你是想制作活動運(yùn)營型H5頁面墓捻？還是想制作品牌宣傳型H5頁面抖仅？是想制作產(chǎn)品介紹型H5頁面？還是想制作總結(jié)報(bào)告型H5頁面砖第？
當(dāng)確認(rèn)好主題后撤卢，就是準(zhǔn)備素材，包括圖片梧兼，音樂凸丸，文案等。當(dāng)素材準(zhǔn)備好后袱院，就可以開始制作H5頁面了屎慢。
然而一個(gè)H5頁面設(shè)計(jì)品質(zhì)的出眾與否，會直接影響其傳播效果忽洛，甚至影響到用戶對品牌形象的認(rèn)知腻惠。
在這里總結(jié)出以下的設(shè)計(jì)要點(diǎn)：
1、緊跟熱點(diǎn)欲虚，利用話題效應(yīng)
想要你的H5專題頁一夜爆紅咏瑟，第一時(shí)間抓住熱點(diǎn)并火速上線牧抵，借機(jī)進(jìn)行品牌宣傳也不失為一條捷徑弧蝇。
2歼秽、講個(gè)好故事，引發(fā)情感共鳴
不論H5的形式如何多變梯找，有價(jià)值的內(nèi)容始終是第一位的唆阿。在有限的篇幅里，學(xué)會講故事锈锤，引發(fā)用戶的情感共鳴驯鳖，將對內(nèi)容的傳播形成極大的推動闲询。
3、細(xì)節(jié)與統(tǒng)一
要成就高品質(zhì)的用戶體驗(yàn)浅辙，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性扭弧。復(fù)古擬物的視覺風(fēng)格，那字體就不能過于現(xiàn)代记舆；幽默調(diào)侃的調(diào)調(diào)鸽捻，那文案措辭就不能過于嚴(yán)肅；打情感內(nèi)容牌的泽腮，動效就不能過于花哨御蒲。
4、合理運(yùn)用技術(shù)盛正，打造流暢的互動體驗(yàn)
隨著技術(shù)的發(fā)展删咱，如今的HTML5擁有眾多出彩的特性屑埋，讓我們能輕松實(shí)現(xiàn)繪圖豪筝、擦除、搖一搖摘能、重力感應(yīng)续崖、擦除、3D視圖等互動效果团搞。（有興趣的話可以點(diǎn)擊這個(gè)網(wǎng)站 http://www.appstar.com.cn/幾乎有所有 H5 動態(tài)效果的展示）严望。相較于塞入各種不同種類的動效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運(yùn)用技術(shù) 逻恐，用心專注于為用戶提供流暢的互動體驗(yàn)像吻。具體的制作教程，請看：最好用的H5制作平臺-H5頁面制作教程分享复隆。
結(jié)語
隨著手機(jī)硬件的升級拨匆、HTML5技術(shù)的發(fā)展以及微信平臺的開放，HTML5的跨平臺挽拂、低成本惭每、快迭代等優(yōu)勢被進(jìn)一步凸顯，這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主亏栈、品牌台腥、設(shè)計(jì)師和開發(fā)者來說，都將是一個(gè)最好的時(shí)代绒北。未來必將涌現(xiàn)更多優(yōu)秀的H5頁面黎侈，讓我們拭目以待。
