H5原本是一種制作萬維網頁面的標準計算機語言，由HTML5簡化而來的詞匯，HTML5的設計目的是為了在移(yi)動設備(bei)上支持(chi)多媒(mei)體(ti)。由于微信(xin)迅速(su)的(de)崛起，H5語(yu)言編(bian)寫的(de)界面和(he)微信(xin)瀏覽器比較兼容，借由微信(xin)移(yi)動社交(jiao)平(ping)臺，走進大家的(de)視野(ye)，也(ye)開始越來越火。

首先從(cong)功能與設計目(mu)標來看， H5專(zhuan)題頁(ye)面主要有以類型：活(huo)動運營型、品牌(pai)宣傳型、產品介(jie)紹型、總結報告型、賀卡邀請函型、職(zhi)位招聘(pin)型、故事講述(shu)型、教學教程型。

為活動(dong)(dong)推廣運(yun)營(ying)而打造的(de)(de)(de)(de)H5頁面(mian)是最常見的(de)(de)(de)(de)類型，形(xing)式多變，包括(kuo)游戲、邀請函、賀卡、測(ce)試題等形(xing)式。與以往簡單的(de)(de)(de)(de)靜態廣告圖(tu)片傳播(bo)不同(tong)，如今(jin)的(de)(de)(de)(de)H5活動(dong)(dong)運(yun)營(ying)頁需要有更(geng)(geng)強的(de)(de)(de)(de)互動(dong)(dong)、更(geng)(geng)高(gao)質(zhi)量、更(geng)(geng)具話題性的(de)(de)(de)(de)設計來促(cu)成用戶(hu)分享傳播(bo)。從進(jin)入微信(xin)H5頁面(mian)到最后(hou)落地(di)到品牌App內部(bu)，如何設計一套合(he)適的(de)(de)(de)(de)引流路線(xian)也頗為重要。

大眾點(dian)評(ping)為電影《狂怒(nu)》設計(ji)的(de)推廣頁便深諳此道。復古(gu)擬(ni)物(wu)風(feng)格的(de)視覺設計(ji)讓(rang)人眼前一(yi)(yi)亮，富有質感的(de)舊票根、忽閃(shan)的(de)霓虹(hong)燈，配(pei)以幽默的(de)動畫(hua)與(yu)音效，恨不(bu)(bu)(bu)得每(mei)個(ge)選(xuan)項都點(dian)一(yi)(yi)遍。圍繞“選(xuan)擇(ze)”這個(ge)品牌關鍵(jian)詞，用引人入勝的(de)測(ce)試題讓(rang)用戶把人生(sheng)當作大片來選(xuan)擇(ze)，選(xuan)到最后一(yi)(yi)題引出“大眾點(dian)評(ping)選(xuan)座(zuo)看電影”，一(yi)(yi)鍵(jian)直達App購票頁面(mian)。即(ji)使(shi)明知是軟(ruan)文也忍不(bu)(bu)(bu)住(zhu)帶(dai)著“矮油不(bu)(bu)(bu)錯，這個(ge)頁面(mian)有點(dian)diao噢”的(de)心情點(dian)擊了分享(xiang)。

不同于講究時效性的(de)活動運(yun)營頁，品(pin)牌(pai)(pai)(pai)(pai)宣(xuan)傳型H5頁面等同于一個品(pin)牌(pai)(pai)(pai)(pai)的(de)微官(guan)網，更傾向于品(pin)牌(pai)(pai)(pai)(pai)形象塑造，向用(yong)戶(hu)(hu)傳達(da)品(pin)牌(pai)(pai)(pai)(pai)的(de)精神態度。在設計上需要運(yun)用(yong)符(fu)合品(pin)牌(pai)(pai)(pai)(pai)氣質的(de)視覺(jue)語(yu)言，讓用(yong)戶(hu)(hu)對品(pin)牌(pai)(pai)(pai)(pai)留下(xia)深刻印象。

伴隨著浪漫的鋼琴旋(xuan)律，《首草先(xian)生(sheng)的情書》以一(yi)位男士(shi)的口吻娓(wei)娓(wei)道(dao)來在(zai)成長歷程中對妻子的愛(ai)與愧疚，最(zui)后(hou)引出(chu)“首草——滋陰圣(sheng)品，愛(ai)妻首選”的宣傳語。設計上采用回憶般(ban)的黑白(bai)色調，簡(jian)單的照(zhao)片(pian)加文字(zi)，配以花瓣掉落、水(shui)面漣漪(yi)等輕動畫，渲染出(chu)唯美優雅的氣氛(fen)。“首草”這個全新的高端養(yang)生(sheng)草藥(yao)品牌(pai)(pai)，用H5打出(chu)了一(yi)副走心的情感(gan)牌(pai)(pai)，讓用戶記住了“半生(sheng)只為你”的愛(ai)妻品牌(pai)(pai)形象。

聚焦于產品功能(neng)介紹，運用H5的(de)互動技術優(you)勢盡情展(zhan)示產品特性，吸引用戶買(mai)買(mai)買(mai)。

這一類型的(de)H5頁面(mian)多見(jian)于汽車(che)品牌，LEXUS NX是其中的(de)優秀(xiu)代表(biao)案(an)例(li)。精致(zhi)和極(ji)富質感的(de)建(jian)模、細膩的(de)光效營造出酷(ku)炫的(de)視覺風格。用(yong)手指跟隨光的(de)軌跡切割畫面(mian)揭開(kai)序幕(mu)，通(tong)過合理優雅的(de)觸碰、摩擦(ca)、滑動(dong)等(deng)互動(dong)形式帶領用(yong)戶一同(tong)探索(suo)產(chan)品的(de)7大特性(xing)，宏觀和微(wei)觀都照顧周全(quan)。

自從(cong)的(de)十年賬單(dan)引發熱(re)議后(hou)，各大企業的(de)年終總(zong)結現(xian)也熱(re)衷于用H5技術(shu)實(shi)現(xian)，優秀的(de)互動體驗令原本乏(fa)味的(de)總(zong)結報告(gao)有趣生動了起來。

《京東的(de)(de)十(shi)大(da)任性》用(yong)10張橫屏頁面講(jiang)述了京東在2014年的(de)(de)十(shi)大(da)成(cheng)就，視(shi)覺設計上采用(yong)簡(jian)潔的(de)(de)扁平風插畫，加(jia)入(ru)紙面質感(gan)形成(cheng)復古卡片拼貼感(gan)。不同頁面間通過手指滑動(dong)實(shi)現流暢的(de)(de)視(shi)差滾動(dong)效(xiao)果，最后(hou)還有劉(liu)總這個小(xiao)彩蛋。一口氣看完后(hou)大(da)概就了解2014年京東都干了哪些大(da)事。

每個人(ren)都喜歡(huan)收到(dao)(dao)賀卡(ka)或邀請(qing)的(de)感(gan)覺，抓住這(zhe)一(yi)心理，品(pin)(pin)牌(pai)(pai)推出了各種H5頁面形式的(de)禮物(wu)、賀卡(ka)、邀請(qing)函，通(tong)過提升用戶好感(gan)度來潛移(yi)默化地達到(dao)(dao)品(pin)(pin)牌(pai)(pai)宣傳的(de)目的(de)，在邀請(qing)的(de)同時也展示(shi)了自己的(de)產品(pin)(pin)與(yu)品(pin)(pin)牌(pai)(pai)，可以一(yi)舉多得！

為了展現自己獨特的芒果视频下载，招聘型H5已然成為企業應該(gai)好好利(li)用(yong)的擴音器。快速(su)分享QQ，微(wei)信，微(wei)博等，求(qiu)職者(zhe)一鍵報名，效果數據隨時(shi)監控(kong)。（講故事、員(yuan)工代言、簡單直(zhi)白）

講個好故(gu)事(shi)，引(yin)發(fa)情(qing)(qing)感共(gong)鳴，不(bu)論(lun)H5頁面的(de)形(xing)式如何多變，有價值的(de)內容(rong)始終是第一位的(de)。在有限的(de)篇幅里(li)，學會講故(gu)事(shi)，引(yin)發(fa)用戶的(de)情(qing)(qing)感共(gong)鳴，將對內容(rong)的(de)傳(chuan)播(bo)形(xing)成極大的(de)推動。

H5的(de)(de)(de)翻頁形式，特別適合步驟式的(de)(de)(de)教程(cheng)表現。一步一頁，通過滑動這種交互形式，可以加深對于(yu)步驟的(de)(de)(de)理解和認識，有(you)著出人意料的(de)(de)(de)學習效(xiao)果。

在確定了專題(ti)頁(ye)的(de)功能(neng)目標(biao)之后(hou)，接下(xia)來就是(shi)關鍵的(de)設計(ji)階段(duan)了。如何有的(de)放矢地(di)進行設計(ji)，需要考慮到(dao)具體的(de)應用場景和傳播對象(xiang)，從用戶角度出發(fa)去思考什(shen)么樣的(de)頁(ye)面是(shi)用戶最想看的(de)最會(hui)去分享的(de)。以(yi)下(xia)列舉(ju)幾種(zhong)常見的(de)H5專題(ti)頁(ye)表現形式(shi)：

簡單圖文是(shi)早期(qi)最典型(xing)的H5專(zhuan)題頁(ye)形式(shi)。“圖”的形式(shi)千變萬化，可以是(shi)照片、插畫、GIF等(deng)。通(tong)過翻頁(ye)等(deng)簡單的交互操作，起到類似幻(huan)燈片的傳播效果。考(kao)驗(yan)的是(shi)高(gao)質量的內容本身(shen)和講故事的能力。

滴(di)滴(di)打車這個案例就是典型(xing)的(de)簡單圖文(wen)型(xing)H5專題頁(ye)，用幾張(zhang)照片(pian)故事串起了整套頁(ye)面。視(shi)覺簡潔有力，采用整屏(ping)黑白(bai)照片(pian)，點綴以滴(di)滴(di)的(de)品(pin)牌橙色。每切(qie)換一張(zhang)圖片(pian)，文(wen)字(zi)就漸隱浮現，沒有其他(ta)互動形式，讓觀眾聚焦于內容，通過陌生人之間(jian)的(de)真情聯系來塑造品(pin)牌的(de)正能量形象。

也有不甘(gan)平淡的(de)(de)精彩案(an)例。在(zai)除夕夜全國(guo)人民(min)瘋狂搶紅包的(de)(de)時刻(ke)(ke)，微信推出了(le)《從此看盡中國(guo)人的(de)(de)名與利》這(zhe)樣一(yi)個專題頁。第一(yi)眼就被(bei)鎮住(zhu)了(le)，好親切的(de)(de)RMB~每(mei)個頁面都是一(yi)張人民(min)幣(bi)風景局部放大圖(tu)，創作者(zhe)加(jia)入巧妙的(de)(de)創意元素與微動態進行細(xi)膩(ni)刻(ke)(ke)畫，帶觀眾走進了(le)人民(min)幣(bi)的(de)(de)微觀世(shi)界。每(mei)一(yi)張鈔票圖(tu)案(an)配合發人深省的(de)(de)文(wen)案(an)，在(zai)推廣(guang)微信紅包的(de)(de)同時呼吁人們重新審視(shi)人情與名利的(de)(de)奧義。

每個人(ren)都喜歡收(shou)到(dao)禮物的感(gan)(gan)覺，抓住這一心理(li)，品(pin)牌推出了各(ge)種H5形式的禮物、賀卡、邀請函，通過提(ti)升(sheng)用戶好感(gan)(gan)度來潛移默化地(di)達到(dao)品(pin)牌宣傳的目的。既然是禮物，那創意和制(zhi)作(zuo)便是重要的加分項。

AKQA創意營銷(xiao)公司在圣誕(dan)之(zhi)際獻上了一(yi)份厚禮——夢幻水(shui)晶(jing)球(qiu)。通過移動手機(ji)，鏡(jing)頭從水(shui)晶(jing)球(qiu)外不(bu)斷搖晃推近，漸漸走進水(shui)晶(jing)球(qiu)的(de)微觀(guan)世(shi)界里(li)。通過手機(ji)環(huan)顧四周，可以360度欣賞水(shui)晶(jing)球(qiu)里(li)的(de)全(quan)景，搖一(yi)搖雪花(hua)便漫(man)天(tian)飄灑。寫(xie)下你的(de)祝福并分(fen)享(xiang)給朋(peng)友，相信一(yi)定會驚(jing)艷到對方(fang)。這個(ge)H5頁面使用了重力感應(ying)、3D等技術，文字(zi)與BGM的(de)使用也十分(fen)講究，給用戶帶來(lai)了完美的(de)互動體驗(yan)，值得細細品味。

Evernote在過(guo)(guo)年(nian)期(qi)間也別(bie)出心裁地推出語(yu)音(yin)(yin)賀卡，通過(guo)(guo)公眾號引(yin)導用戶對(dui)其發送一條(tiao)語(yu)音(yin)(yin)消息，然后(hou)把這條(tiao)祝福(fu)語(yu)音(yin)(yin)結(jie)合中(zhong)國風動畫(hua)做成(cheng)一張(zhang)獨一無二(er)的語(yu)音(yin)(yin)賀卡發送給朋友。整體色調也是以Evernote品牌色為主(zhu)，同時蘊含著一絲(si)優雅的年(nian)味，十(shi)分討巧。

問答形式的H5頁(ye)面(mian)也屢見不(bu)鮮了，利用用戶的求(qiu)知欲(yu)和探(tan)索(suo)欲(yu)，一路選(xuan)選(xuan)選(xuan)，看最后到底是(shi)什么成績。一條清晰的線索(suo)是(shi)必要的，最后到達的結(jie)果(guo)頁(ye)也需要合理不(bu)突兀，如(ru)果(guo)能(neng)輔以出彩的視覺和文案，弱(ruo)化答題(ti)的枯燥(zao)感那就再好不(bu)過了。

與(yu)本文開(kai)(kai)頭一(yi)樣(yang)也是大眾點評的(de)項目，這次是為(wei)姜(jiang)文的(de)電(dian)影(ying)《一(yi)步之遙(yao)》做持(chi)續推廣(guang)，讓用戶(hu)為(wei)姜(jiang)文的(de)代表作評分。視覺設計依舊出彩(cai)，開(kai)(kai)腦洞的(de)創意和動畫設計令(ling)人(ren)叫絕（一(yi)定要掃一(yi)掃體(ti)驗下(xia)！）。延續了懷舊大字報風格，字體(ti)、文案、裝(zhuang)飾元素(su)等細節處理也十分用心。問(wen)答(da)形式(shi)的(de)H5頁面能做到(dao)這個份(fen)上(shang)也是蠻拼的(de)。

從(cong) “圍住神經(jing)貓”、“看你有(you)多色(se)”等單(dan)純小游戲(xi)(xi)再到(dao)杜蕾斯(si)“一(yi)夜N次郎(lang)”（即(ji)山寨版“別(bie)踩白塊兒”）等品牌植入式小游戲(xi)(xi)，H5游戲(xi)(xi)因為操作簡單(dan)、競技性強(qiang)，一(yi)度(du)風靡朋友圈，但創意(yi)缺乏和(he)同質化現(xian)象(xiang)導致用戶對(dui)無腦小游戲(xi)(xi)逐漸產生了(le)厭(yan)倦。品牌要(yao)在游戲(xi)(xi)上做到(dao)成功傳播，需(xu)要(yao)在玩法和(he)設計上多下點功夫。

Same在圣(sheng)誕節推出了(le)一款名為《圣(sheng)誕老人(ren)拯救計劃》的(de)(de)H5小游戲(xi)，操(cao)作非常簡單，只需(xu)用(yong)手(shou)指交替上(shang)滑，把角色(se)(se)的(de)(de)脖子(zi)向(xiang)(xiang)上(shang)拉(la)到(dao)無限長，游戲(xi)會記錄你拉(la)的(de)(de)最高距離，跟(gen)朋友比(bi)(bi)一比(bi)(bi)誰比(bi)(bi)較長。界面清新可愛(ai)，與Same的(de)(de)招牌(pai)畫風(feng)一致，游戲(xi)角色(se)(se)也是Same的(de)(de)品(pin)牌(pai)角色(se)(se)，通過幽默惡搞的(de)(de)游戲(xi)向(xiang)(xiang)用(yong)戶(hu)傳(chuan)達Same獨到(dao)有趣(qu)的(de)(de)產品(pin)文(wen)化。

一個H5頁面設(she)計品(pin)質的(de)出眾與否，會直接影響(xiang)其傳播效(xiao)果，甚至影響(xiang)到用戶(hu)對品(pin)牌形象(xiang)的(de)認知(zhi)。在這里總結(jie)出以下的(de)設(she)計要點(dian)：

要成就(jiu)(jiu)高品質的用(yong)戶(hu)體驗，必須考慮(lv)到細節與(yu)整體的統一性(xing)。復(fu)古擬物的視覺(jue)風格，那(nei)字體就(jiu)(jiu)不能過于(yu)現代(dai)；幽(you)默調(diao)侃的調(diao)調(diao)，那(nei)文(wen)案措辭(ci)就(jiu)(jiu)不能過于(yu)嚴肅；打情感內(nei)容牌的，動效(xiao)就(jiu)(jiu)不能過于(yu)花哨。

大眾點(dian)評姜文電(dian)影推廣(guang)系列(lie)的《九(jiu)步之遙(yao)》H5專題頁便牢牢抓住(zhu)了這一(yi)(yi)點(dian)。從二維碼入口到性感的loading頁，再到最后分享提示(shi)的設計，包括文案措辭和(he)背景音效(xiao)，無不與整體的戲虐(nve)風(feng)保持一(yi)(yi)致，給(gei)到用戶一(yi)(yi)個(ge)完整統一(yi)(yi)的互動體驗。

尤其關注“分享提示”這個(ge)細節設計(ji)，比(bi)起一(yi)個(ge)簡(jian)單的箭頭(tou)和一(yi)句冷冰(bing)冰(bing)的“點這里分享”，用心的細節設計(ji)帶(dai)來的高品質和好感度是顯而(er)易見的。再貼幾個(ge)精彩案例：

想要(yao)你的H5專題頁一夜(ye)爆紅，第一時間抓(zhua)住(zhu)熱點(dian)并火速(su)上線(xian)，借機進行品牌宣傳也不失為一條捷徑(jing)。

天(tian)天(tian)P圖(tu)抓住武(wu)則天(tian)熱播的(de)(de)契機推出了(le)風靡海內外的(de)(de)媚娘(niang)妝(zhuang)，同(tong)時《全民COS武(wu)媚娘(niang)》的(de)(de)H5互動頁也第一時間上線，操作簡單易上手(shou)，一鍵上傳照片就能(neng)立刻完成媚娘(niang)妝(zhuang)，與萬千媚娘(niang)們進行PK，娛樂了(le)大眾(zhong)又推廣了(le)產品。

網(wang)易娛樂在(zai)武媚娘剪(jian)胸(xiong)風波的風口浪尖上(shang)推出了(le)名(ming)為《神還(huan)原(yuan)武媚娘被剪(jian)胸(xiong)真相》的H5專題頁(ye)，放下節(jie)操用極富(fu)想象力的粗曠草圖風向廣(guang)大觀眾“還(huan)原(yuan)”了(le)真相。一時(shi)間被瘋(feng)狂轉(zhuan)發，網(wang)易娛樂也算是順勢自(zi)我(wo)宣傳了(le)一把。

不論H5的(de)(de)形式如何(he)多(duo)變，有價值的(de)(de)內容(rong)始終是第一位(wei)的(de)(de)。在有限(xian)的(de)(de)篇(pian)幅里(li)，學(xue)會(hui)講故(gu)事，引發用戶的(de)(de)情感共鳴(ming)，將對內容(rong)的(de)(de)傳播形成極(ji)大的(de)(de)推動。

LEVI’S新(xin)年優惠活動(dong)專題頁(ye)以第一人稱的(de)(de)口(kou)吻(wen)，用小時候簡樸卻(que)熱(re)鬧(nao)的(de)(de)新(xin)年與長大(da)后(hou)(hou)富(fu)足卻(que)乏味的(de)(de)新(xin)年做對比，用手繪風渲染(ran)出(chu)親切的(de)(de)懷舊氛圍。最后(hou)(hou)引出(chu)“這(zhe)個新(xin)年，把壓力和束縛打(da)包扔(reng)掉，用新(xin)鮮的(de)(de)眼光感受生活，一起活出(chu)趣”的(de)(de)品牌(pai)推廣slogan，代入感極強的(de)(de)故事(shi)無疑是驅動(dong)分享(xiang)的(de)(de)源動(dong)力。

隨著技術的(de)發(fa)展，如今的(de)HTML5擁有(you)眾(zhong)多出彩的(de)特性，讓我(wo)們(men)能輕松實(shi)現繪圖、擦除(chu)(chu)、搖(yao)一搖(yao)、重力(li)感(gan)應、擦除(chu)(chu)、3D視圖等互動(dong)(dong)效果。相較于塞入各(ge)種不同(tong)種類的(de)動(dong)(dong)效導致(zhi)頁(ye)面混亂臃腫，我(wo)們(men)更提倡(chang)的(de)是(shi)合(he)理(li)運用技術，用心專(zhuan)注于為用戶提供流暢的(de)互動(dong)(dong)體驗。

典型的(de)(de)案例是在雙12推(tui)出的(de)(de)預(yu)售推(tui)廣H5專題頁(ye)。在瀏(liu)覽(lan)過程(cheng)中我只使用了一種向上滑動(dong)的(de)(de)手(shou)勢，而頁(ye)面(mian)呈現出來的(de)(de)效果(guo)(guo)卻(que)猶如一個(ge)流暢的(de)(de)動(dong)態(tai)GIF。設計師巧妙利用圖形設計與組合，在滑動(dong)過程(cheng)中營造出一種豐富的(de)(de)視(shi)差(cha)滾動(dong)效果(guo)(guo)，單個(ge)圖形元(yuan)素的(de)(de)遮罩、旋(xuan)轉與整體頁(ye)面(mian)的(de)(de)動(dong)勢配合極為默契。