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

首先從功能與設計目標來看， H5專(zhuan)題頁面主要有以(yi)類型(xing)(xing)(xing)：活動(dong)運營型(xing)(xing)(xing)、品牌宣(xuan)傳型(xing)(xing)(xing)、產品介紹型(xing)(xing)(xing)、總(zong)結報(bao)告型(xing)(xing)(xing)、賀(he)卡邀請函型(xing)(xing)(xing)、職位(wei)招(zhao)聘型(xing)(xing)(xing)、故事講述型(xing)(xing)(xing)、教學教程型(xing)(xing)(xing)。

為活動(dong)(dong)推(tui)廣運營而打(da)造的(de)(de)H5頁(ye)(ye)面(mian)是(shi)最(zui)常見(jian)的(de)(de)類型，形式(shi)多變(bian)，包括游戲(xi)、邀(yao)請函、賀卡(ka)、測試題等形式(shi)。與以往簡單的(de)(de)靜態廣告圖片傳(chuan)播(bo)不同，如今的(de)(de)H5活動(dong)(dong)運營頁(ye)(ye)需要(yao)有更(geng)強(qiang)的(de)(de)互動(dong)(dong)、更(geng)高質量、更(geng)具話題性的(de)(de)設(she)(she)計來促成用戶(hu)分享(xiang)傳(chuan)播(bo)。從(cong)進(jin)入微(wei)信H5頁(ye)(ye)面(mian)到最(zui)后落地到品牌App內(nei)部，如何設(she)(she)計一套(tao)合適的(de)(de)引流路線也頗為重要(yao)。

大(da)眾(zhong)點(dian)(dian)評為(wei)電(dian)影《狂怒(nu)》設(she)(she)計的推廣頁便深諳此道。復(fu)古擬(ni)物風格的視覺設(she)(she)計讓(rang)人(ren)眼前(qian)一亮(liang)，富有(you)質感的舊票(piao)根、忽(hu)閃的霓(ni)虹燈，配(pei)以幽默的動畫與音效，恨(hen)不(bu)(bu)得每個選(xuan)(xuan)項都點(dian)(dian)一遍。圍繞(rao)“選(xuan)(xuan)擇”這個品牌關(guan)鍵詞，用(yong)引人(ren)入勝的測試題(ti)讓(rang)用(yong)戶把人(ren)生當作大(da)片來選(xuan)(xuan)擇，選(xuan)(xuan)到最后一題(ti)引出(chu)“大(da)眾(zhong)點(dian)(dian)評選(xuan)(xuan)座看電(dian)影”，一鍵直達App購票(piao)頁面(mian)。即使(shi)明知(zhi)是軟文也忍不(bu)(bu)住帶著“矮油不(bu)(bu)錯(cuo)，這個頁面(mian)有(you)點(dian)(dian)diao噢”的心情點(dian)(dian)擊了分享(xiang)。

不(bu)同(tong)于(yu)講究時效(xiao)性的(de)(de)(de)活動運(yun)營頁，品(pin)牌宣(xuan)傳型(xing)H5頁面(mian)等同(tong)于(yu)一個品(pin)牌的(de)(de)(de)微官網，更(geng)傾向于(yu)品(pin)牌形(xing)象塑(su)造，向用戶傳達品(pin)牌的(de)(de)(de)精(jing)神態度。在設計上(shang)需要運(yun)用符合品(pin)牌氣質的(de)(de)(de)視覺語言，讓用戶對(dui)品(pin)牌留下深刻印象。

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

聚焦(jiao)于產(chan)品(pin)功能(neng)介紹，運用(yong)H5的(de)互動技術優勢(shi)盡(jin)情(qing)展示產(chan)品(pin)特性，吸引用(yong)戶買買買。

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

自從的十年賬單引(yin)發熱議后，各大企業(ye)的年終(zhong)總(zong)結(jie)現也熱衷(zhong)于(yu)用H5技術實現，優秀的互動體(ti)驗(yan)令原本乏味的總(zong)結(jie)報告有(you)趣(qu)生動了起來。

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

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

為了展現自己獨特的芒(mang)果视频下(xia)载，招(zhao)聘型(xing)H5已然成(cheng)為企業應該(gai)好(hao)(hao)好(hao)(hao)利用的擴音器。快速分享QQ，微信，微博等，求職(zhi)者一鍵報名，效果數據隨時監(jian)控。（講(jiang)故(gu)事、員工代言、簡單(dan)直白(bai)）

講個好故事(shi)，引發情(qing)感共鳴，不論H5頁面的(de)形式如何(he)多變(bian)，有價值的(de)內(nei)容(rong)始(shi)終是第一位的(de)。在有限的(de)篇(pian)幅里，學會(hui)講故事(shi)，引發用(yong)戶(hu)的(de)情(qing)感共鳴，將對(dui)內(nei)容(rong)的(de)傳播形成極大的(de)推(tui)動。

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

在確定了專(zhuan)題(ti)頁的(de)功能目標之后(hou)，接(jie)下(xia)來就(jiu)是(shi)關鍵的(de)設計階段了。如(ru)何有(you)的(de)放矢(shi)地進(jin)行設計，需要考(kao)慮(lv)到具體的(de)應用(yong)場景和傳(chuan)播對象，從(cong)用(yong)戶角(jiao)度出發去思考(kao)什(shen)么樣(yang)的(de)頁面是(shi)用(yong)戶最(zui)想看的(de)最(zui)會(hui)去分享的(de)。以下(xia)列舉幾種常見的(de)H5專(zhuan)題(ti)頁表現形式：

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

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

也有不甘平淡的(de)精彩案例。在除夕夜(ye)全國(guo)人(ren)(ren)民瘋(feng)狂搶紅包(bao)的(de)時刻，微(wei)信(xin)推(tui)出了(le)(le)《從(cong)此看盡中國(guo)人(ren)(ren)的(de)名(ming)與利(li)》這樣一個(ge)專題頁(ye)。第(di)一眼(yan)就被鎮住(zhu)了(le)(le)，好親切(qie)的(de)RMB~每個(ge)頁(ye)面都是一張人(ren)(ren)民幣(bi)風景(jing)局部放大圖，創作(zuo)者加入巧(qiao)妙的(de)創意元素與微(wei)動態進(jin)行細膩刻畫(hua)，帶觀眾走進(jin)了(le)(le)人(ren)(ren)民幣(bi)的(de)微(wei)觀世界。每一張鈔票圖案配合發人(ren)(ren)深省的(de)文案，在推(tui)廣微(wei)信(xin)紅包(bao)的(de)同時呼吁人(ren)(ren)們重新(xin)審視人(ren)(ren)情與名(ming)利(li)的(de)奧義。

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

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

Evernote在過(guo)年期間(jian)也(ye)別出(chu)心裁地推出(chu)語(yu)(yu)音(yin)(yin)賀(he)卡(ka)，通過(guo)公眾號引導(dao)用戶對(dui)其發送一(yi)條語(yu)(yu)音(yin)(yin)消息，然(ran)后把這條祝(zhu)福(fu)語(yu)(yu)音(yin)(yin)結合中(zhong)國風動畫(hua)做成(cheng)一(yi)張獨一(yi)無二的(de)語(yu)(yu)音(yin)(yin)賀(he)卡(ka)發送給朋友。整(zheng)體色調(diao)也(ye)是以Evernote品(pin)牌(pai)色為(wei)主(zhu)，同時蘊含著一(yi)絲(si)優雅(ya)的(de)年味(wei)，十分(fen)討(tao)巧。

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

與本文(wen)(wen)開頭一(yi)樣也(ye)是大眾(zhong)點評的(de)項目，這次是為姜(jiang)文(wen)(wen)的(de)電影《一(yi)步(bu)之遙(yao)》做持續(xu)推廣(guang)，讓(rang)用戶為姜(jiang)文(wen)(wen)的(de)代表作(zuo)評分。視覺設計(ji)依舊出彩，開腦洞的(de)創意和動畫設計(ji)令人叫絕(jue)（一(yi)定要掃(sao)一(yi)掃(sao)體(ti)驗(yan)下！）。延續(xu)了(le)懷(huai)舊大字報風格，字體(ti)、文(wen)(wen)案、裝(zhuang)飾元素等細節(jie)處理也(ye)十分用心。問答形式的(de)H5頁面能做到這個份上(shang)也(ye)是蠻拼的(de)。

從 “圍住神(shen)經貓(mao)”、“看你有多色”等(deng)單純小游(you)戲(xi)再到(dao)杜蕾斯“一夜N次郎”（即山寨版“別踩白塊(kuai)兒”）等(deng)品牌植入式小游(you)戲(xi)，H5游(you)戲(xi)因為操作簡(jian)單、競技性強，一度風靡朋(peng)友圈，但創意缺乏(fa)和同(tong)質化現(xian)象導致用戶(hu)對無(wu)腦(nao)小游(you)戲(xi)逐漸產生了厭(yan)倦。品牌要在游(you)戲(xi)上做到(dao)成(cheng)功(gong)傳播，需要在玩法和設(she)計上多下點功(gong)夫。

Same在圣誕節推出(chu)了一(yi)款名為《圣誕老人(ren)拯救(jiu)計劃》的(de)H5小游(you)戲(xi)，操作(zuo)非常(chang)簡單，只需用手指(zhi)交替上滑(hua)，把角(jiao)色的(de)脖子向上拉(la)到(dao)無限長，游(you)戲(xi)會記錄你拉(la)的(de)最高距(ju)離，跟(gen)朋(peng)友比一(yi)比誰比較長。界面清新可愛，與Same的(de)招(zhao)牌(pai)畫(hua)風一(yi)致，游(you)戲(xi)角(jiao)色也是Same的(de)品牌(pai)角(jiao)色，通過幽(you)默(mo)惡搞的(de)游(you)戲(xi)向用戶(hu)傳達Same獨到(dao)有趣的(de)產品文化。

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

要成就(jiu)(jiu)高品質的用戶體(ti)驗，必須考慮到(dao)細節(jie)與整體(ti)的統一性。復(fu)古(gu)擬物的視覺風格，那字體(ti)就(jiu)(jiu)不能過于現代；幽默調(diao)侃的調(diao)調(diao)，那文案措(cuo)辭就(jiu)(jiu)不能過于嚴肅；打情感(gan)內容牌的，動效就(jiu)(jiu)不能過于花哨。

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

尤(you)其(qi)關注(zhu)“分(fen)享提示”這個(ge)細節(jie)設計，比起一個(ge)簡單的(de)(de)(de)箭頭和一句冷冰冰的(de)(de)(de)“點這里分(fen)享”，用心(xin)的(de)(de)(de)細節(jie)設計帶來的(de)(de)(de)高品質(zhi)和好感(gan)度是顯而易見的(de)(de)(de)。再貼幾個(ge)精(jing)彩案例(li)：

想要你的H5專題頁一(yi)夜(ye)爆(bao)紅(hong)，第一(yi)時(shi)間抓住熱點并火速上線，借機(ji)進(jin)行品牌宣(xuan)傳也(ye)不(bu)失為一(yi)條捷徑。

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

網(wang)易娛樂(le)在武(wu)媚(mei)娘剪(jian)胸(xiong)風(feng)波的風(feng)口浪尖上推出了(le)名(ming)為《神(shen)還原武(wu)媚(mei)娘被剪(jian)胸(xiong)真(zhen)相(xiang)》的H5專題頁，放(fang)下節操(cao)用(yong)極富想象力的粗曠草(cao)圖風(feng)向廣大觀眾“還原”了(le)真(zhen)相(xiang)。一(yi)時(shi)間(jian)被瘋狂轉發，網(wang)易娛樂(le)也算是順(shun)勢自我(wo)宣傳(chuan)了(le)一(yi)把(ba)。

不論H5的(de)(de)(de)形(xing)式如何(he)多變，有(you)價值的(de)(de)(de)內容始終(zhong)是第一位(wei)的(de)(de)(de)。在有(you)限的(de)(de)(de)篇幅里，學會講故事，引發用戶的(de)(de)(de)情感共鳴，將對內容的(de)(de)(de)傳(chuan)播形(xing)成極大的(de)(de)(de)推動(dong)。

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

隨(sui)著技術的發展，如今的HTML5擁(yong)有眾多出彩(cai)的特性，讓我們能輕松實現(xian)繪圖、擦(ca)除、搖一搖、重力感應、擦(ca)除、3D視(shi)圖等互(hu)(hu)動(dong)效果。相較(jiao)于塞入各種不同種類的動(dong)效導致頁(ye)面(mian)混亂臃腫，我們更提(ti)倡的是合理運用(yong)(yong)技術，用(yong)(yong)心專注于為用(yong)(yong)戶(hu)提(ti)供流暢的互(hu)(hu)動(dong)體(ti)驗。

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