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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

滴(di)(di)滴(di)(di)打車這(zhe)個案例就(jiu)(jiu)是(shi)典型(xing)的(de)簡單圖(tu)(tu)文型(xing)H5專題頁，用(yong)幾張照片(pian)(pian)故事串起了整套頁面(mian)。視覺簡潔有(you)力，采(cai)用(yong)整屏黑白照片(pian)(pian)，點綴以滴(di)(di)滴(di)(di)的(de)品牌橙(cheng)色。每(mei)切換(huan)一張圖(tu)(tu)片(pian)(pian)，文字就(jiu)(jiu)漸(jian)隱浮現，沒有(you)其他互動(dong)形式(shi)，讓觀(guan)眾(zhong)聚焦(jiao)于內容，通過(guo)陌生(sheng)人之間的(de)真情聯(lian)系來(lai)塑造品牌的(de)正能量形象。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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