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

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

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

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

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

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

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

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

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

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

每個人都喜歡收(shou)到(dao)賀(he)卡或邀請的感覺，抓(zhua)住(zhu)這(zhe)一(yi)心(xin)理，品牌(pai)(pai)推出(chu)了各種H5頁面(mian)形(xing)式的禮(li)物、賀(he)卡、邀請函，通過提升用(yong)戶(hu)好感度來潛(qian)移(yi)默化地達到(dao)品牌(pai)(pai)宣傳的目的，在邀請的同時也展示了自己(ji)的產品與品牌(pai)(pai)，可(ke)以(yi)一(yi)舉(ju)多得！

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

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

H5的(de)翻頁形式，特(te)別適合步驟(zou)(zou)式的(de)教程表現(xian)。一步一頁，通過滑動這(zhe)種交互形式，可以(yi)加(jia)深對(dui)于步驟(zou)(zou)的(de)理(li)解和認識，有著出人意料(liao)的(de)學習效果。

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

簡單(dan)圖文(wen)是(shi)(shi)早期最典型的H5專題頁(ye)形式(shi)。“圖”的形式(shi)千(qian)變萬化，可(ke)以是(shi)(shi)照片(pian)、插畫(hua)、GIF等。通過(guo)翻(fan)頁(ye)等簡單(dan)的交(jiao)互操作，起到類似幻燈片(pian)的傳播效果。考驗的是(shi)(shi)高質(zhi)量的內容(rong)本(ben)身和(he)講故事的能力。

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

也有不甘(gan)平淡的(de)(de)(de)(de)精彩案例(li)。在除夕夜(ye)全國(guo)人(ren)民(min)瘋狂搶紅包的(de)(de)(de)(de)時(shi)刻，微信推(tui)出了(le)《從(cong)此(ci)看盡中國(guo)人(ren)的(de)(de)(de)(de)名與(yu)(yu)利》這樣(yang)一(yi)個專題頁(ye)。第一(yi)眼就(jiu)被鎮住了(le)，好親切的(de)(de)(de)(de)RMB~每個頁(ye)面都是一(yi)張人(ren)民(min)幣風景(jing)局部放(fang)大圖，創作者加入巧妙的(de)(de)(de)(de)創意(yi)元(yuan)素(su)與(yu)(yu)微動態(tai)進行(xing)細膩刻畫(hua)，帶(dai)觀(guan)眾走(zou)進了(le)人(ren)民(min)幣的(de)(de)(de)(de)微觀(guan)世界。每一(yi)張鈔票圖案配合發人(ren)深(shen)省的(de)(de)(de)(de)文案，在推(tui)廣微信紅包的(de)(de)(de)(de)同時(shi)呼(hu)吁人(ren)們重新審視人(ren)情(qing)與(yu)(yu)名利的(de)(de)(de)(de)奧義。

每個人都(dou)喜歡收到禮物的(de)感(gan)覺，抓住這(zhe)一心(xin)理，品牌推出了各種H5形式的(de)禮物、賀卡(ka)、邀請(qing)函，通過(guo)提升(sheng)用(yong)戶好感(gan)度來(lai)潛移默化地達到品牌宣傳的(de)目的(de)。既然(ran)是(shi)禮物，那創(chuang)意和制(zhi)作便(bian)是(shi)重要的(de)加分項。

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

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

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

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

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

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

一個H5頁面設(she)計品質的出眾(zhong)與否(fou)，會直接影響其(qi)傳播效果，甚至影響到用(yong)戶對品牌(pai)形象(xiang)的認(ren)知。在這里總結出以下(xia)的設(she)計要點：

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

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

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

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

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

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

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

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

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

典型的案例是在(zai)雙12推出的預(yu)售推廣(guang)H5專題頁。在(zai)瀏覽(lan)過程中(zhong)我(wo)只使用了一種向(xiang)上滑動的手勢(shi)，而頁面呈現出來的效(xiao)果卻(que)猶如(ru)一個(ge)流(liu)暢的動態GIF。設(she)計師(shi)巧妙(miao)利用圖(tu)形設(she)計與組合，在(zai)滑動過程中(zhong)營造出一種豐富的視差(cha)滾動效(xiao)果，單(dan)個(ge)圖(tu)形元素(su)的遮罩、旋轉與整體(ti)頁面的動勢(shi)配(pei)合極為默契。