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

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

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

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

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

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

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

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

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

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

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

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

講(jiang)個好故(gu)事，引發情感共(gong)鳴，不論H5頁(ye)面的形(xing)(xing)式(shi)如(ru)何多變(bian)，有(you)價值的內(nei)容(rong)始終是第一位的。在有(you)限(xian)的篇幅里(li)，學會講(jiang)故(gu)事，引發用戶(hu)的情感共(gong)鳴，將對內(nei)容(rong)的傳播形(xing)(xing)成(cheng)極(ji)大的推動。

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

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

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

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

也(ye)有不甘平淡的(de)精彩案例。在除夕夜全(quan)國人民(min)瘋狂搶(qiang)紅(hong)包的(de)時刻(ke)(ke)，微(wei)(wei)信(xin)推(tui)出了《從此(ci)看盡中國人的(de)名與(yu)利》這(zhe)樣一個專題頁。第(di)一眼(yan)就(jiu)被鎮(zhen)住了，好親切(qie)的(de)RMB~每(mei)個頁面都(dou)是一張人民(min)幣風景局(ju)部(bu)放大圖，創(chuang)作者加入巧妙的(de)創(chuang)意元素(su)與(yu)微(wei)(wei)動態(tai)進(jin)行細膩刻(ke)(ke)畫(hua)，帶(dai)觀眾走進(jin)了人民(min)幣的(de)微(wei)(wei)觀世(shi)界。每(mei)一張鈔票(piao)圖案配合發人深省的(de)文(wen)案，在推(tui)廣微(wei)(wei)信(xin)紅(hong)包的(de)同時呼吁人們(men)重(zhong)新審視人情與(yu)名利的(de)奧義。

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

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

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

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

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

從 “圍住神經貓”、“看(kan)你有多(duo)色”等(deng)單(dan)純小(xiao)游(you)(you)戲(xi)(xi)再到(dao)杜蕾(lei)斯“一夜N次(ci)郎”（即山(shan)寨版“別踩白塊兒”）等(deng)品(pin)牌植入式小(xiao)游(you)(you)戲(xi)(xi)，H5游(you)(you)戲(xi)(xi)因為操作(zuo)簡單(dan)、競技(ji)性(xing)強，一度(du)風靡(mi)朋友圈(quan)，但創意(yi)缺(que)乏和(he)同(tong)質化(hua)現象導致(zhi)用(yong)戶對無腦小(xiao)游(you)(you)戲(xi)(xi)逐漸產(chan)生了(le)厭倦(juan)。品(pin)牌要在游(you)(you)戲(xi)(xi)上做到(dao)成功傳(chuan)播，需要在玩法和(he)設(she)計上多(duo)下點功夫。

Same在圣誕(dan)(dan)節推出(chu)了(le)一(yi)款(kuan)名為《圣誕(dan)(dan)老人拯(zheng)救計劃》的(de)(de)H5小游(you)戲，操作非(fei)常簡單，只需(xu)用(yong)手指(zhi)交替(ti)上滑，把(ba)角(jiao)色(se)(se)的(de)(de)脖子向(xiang)(xiang)上拉到無限(xian)長，游(you)戲會(hui)記(ji)錄(lu)你拉的(de)(de)最高距離，跟(gen)朋友比(bi)一(yi)比(bi)誰比(bi)較長。界面清(qing)新可愛，與Same的(de)(de)招牌(pai)畫風一(yi)致(zhi)，游(you)戲角(jiao)色(se)(se)也是(shi)Same的(de)(de)品牌(pai)角(jiao)色(se)(se)，通過幽默惡搞的(de)(de)游(you)戲向(xiang)(xiang)用(yong)戶(hu)傳達Same獨到有(you)趣的(de)(de)產(chan)品文化。

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

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

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

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

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

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

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

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

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

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

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