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

首先從功能與設計(ji)目標來看(kan)， H5專題頁面主要有(you)以類型(xing)：活動運營型(xing)、品(pin)牌宣傳型(xing)、產品(pin)介(jie)紹型(xing)、總結報(bao)告型(xing)、賀卡邀請(qing)函型(xing)、職位招聘型(xing)、故事講(jiang)述型(xing)、教(jiao)學(xue)教(jiao)程型(xing)。

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

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

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

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

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

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

自從的十(shi)年賬(zhang)單引發熱(re)議后，各(ge)大企業(ye)的年終總(zong)結現(xian)也熱(re)衷于用(yong)H5技術實現(xian)，優(you)秀的互動體(ti)驗令原本乏味(wei)的總(zong)結報告有趣生動了(le)起來。

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

每個人都(dou)喜歡(huan)收到賀卡或邀(yao)(yao)請的感覺，抓住這一心理，品(pin)牌推出(chu)了(le)各種H5頁面(mian)形(xing)式的禮(li)物、賀卡、邀(yao)(yao)請函，通(tong)過提升用戶好感度來潛移默化地達(da)到品(pin)牌宣傳的目(mu)的，在邀(yao)(yao)請的同(tong)時也展示了(le)自己的產品(pin)與品(pin)牌，可以(yi)一舉多得！

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

講個好故事，引發情感共鳴(ming)，不論H5頁(ye)面的(de)(de)形式如何多變，有(you)價(jia)值的(de)(de)內容始終(zhong)是第(di)一位的(de)(de)。在有(you)限的(de)(de)篇幅里，學會講故事，引發用(yong)戶的(de)(de)情感共鳴(ming)，將對內容的(de)(de)傳播(bo)形成極(ji)大的(de)(de)推動(dong)。

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

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

簡(jian)單圖(tu)文是早期(qi)最典型的(de)H5專(zhuan)題頁形(xing)式(shi)。“圖(tu)”的(de)形(xing)式(shi)千(qian)變萬化(hua)，可(ke)以(yi)是照(zhao)片、插畫、GIF等。通過翻(fan)頁等簡(jian)單的(de)交互操作(zuo)，起到類似幻燈片的(de)傳播(bo)效(xiao)果。考驗的(de)是高(gao)質(zhi)量的(de)內(nei)容本身和講(jiang)故(gu)事的(de)能力。

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

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

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

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

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

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

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

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

Same在圣(sheng)誕節(jie)推(tui)出(chu)了(le)一款(kuan)名為《圣(sheng)誕老人拯救計劃》的H5小游(you)(you)戲(xi)，操作非常簡(jian)單，只需用(yong)手指交替(ti)上(shang)滑，把角(jiao)色(se)(se)的脖子向(xiang)上(shang)拉到無限長，游(you)(you)戲(xi)會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫風(feng)一致，游(you)(you)戲(xi)角(jiao)色(se)(se)也是Same的品牌角(jiao)色(se)(se)，通過(guo)幽(you)默(mo)惡(e)搞(gao)的游(you)(you)戲(xi)向(xiang)用(yong)戶傳達(da)Same獨(du)到有趣(qu)的產品文(wen)化。

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

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

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

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

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

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

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

不論H5的(de)(de)(de)形(xing)式如何多變(bian)，有(you)價(jia)值(zhi)的(de)(de)(de)內(nei)容始終是(shi)第一位的(de)(de)(de)。在(zai)有(you)限的(de)(de)(de)篇幅里，學(xue)會講故事，引發用(yong)戶的(de)(de)(de)情感共(gong)鳴(ming)，將對內(nei)容的(de)(de)(de)傳播形(xing)成極大的(de)(de)(de)推(tui)動。

LEVI’S新(xin)年(nian)(nian)優惠(hui)活動專題頁以第一(yi)人(ren)稱的口吻，用(yong)小時(shi)候簡樸卻(que)熱(re)鬧的新(xin)年(nian)(nian)與長大后富足(zu)卻(que)乏味的新(xin)年(nian)(nian)做對比，用(yong)手繪風渲(xuan)染出(chu)親(qin)切的懷舊氛圍。最(zui)后引出(chu)“這個(ge)新(xin)年(nian)(nian)，把壓力和束(shu)縛打包扔(reng)掉(diao)，用(yong)新(xin)鮮(xian)的眼光感受(shou)生活，一(yi)起活出(chu)趣”的品牌推廣slogan，代入感極(ji)強(qiang)的故(gu)事無疑(yi)是驅動分享的源動力。

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

典型的(de)案例是在(zai)雙(shuang)12推出的(de)預售(shou)推廣H5專(zhuan)題(ti)頁(ye)。在(zai)瀏(liu)覽過(guo)程中我只使用了一種向上滑動(dong)的(de)手勢，而頁(ye)面呈現出來的(de)效果卻猶如(ru)一個流暢(chang)的(de)動(dong)態GIF。設計師巧妙利(li)用圖(tu)形(xing)設計與組合，在(zai)滑動(dong)過(guo)程中營造出一種豐富的(de)視差滾動(dong)效果，單個圖(tu)形(xing)元素的(de)遮罩(zhao)、旋轉(zhuan)與整體頁(ye)面的(de)動(dong)勢配合極為(wei)默(mo)契。