網(wǎng)站建設讓人過(guò)目不忘的H5頁(yè)面發(fā)布者：本站     時(shí)間：2022-03-24 09:03:31

從引爆朋友圈的H5小游戲《圍住神經(jīng)貓》，到顛覆傳統廣告的大眾點(diǎn)評H5專(zhuān)題頁(yè)《我們之間只有一個(gè)字》，從2014下半年起，各種H5游戲和專(zhuān)題頁(yè)紛紛嶄露頭角?！癏5”，這個(gè)由HTML5簡(jiǎn)化而來(lái)的詞匯，借由微信這個(gè)移動(dòng)社交平臺，正在走進(jìn)更多人的視野。本文聚焦于基于微信傳播的H5頁(yè)面的視覺(jué)設計，通過(guò)一些案例分析來(lái)談?wù)勗O計思路與方法，希望與大家進(jìn)行交流探討。

功能與目標
首先從功能與設計目標來(lái)看， H5專(zhuān)題頁(yè)主要有以下4大類(lèi)型：

1.活動(dòng)運營(yíng)型
為活動(dòng)推廣運營(yíng)而打造的H5頁(yè)面是最常見(jiàn)的類(lèi)型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡(jiǎn)單的靜態(tài)廣告圖片傳播不同，如今的H5活動(dòng)運營(yíng)頁(yè)需要有更強的互動(dòng)、更高質(zhì)量、更具話(huà)題性的設計來(lái)促成用戶(hù)分享傳播。從進(jìn)入微信H5頁(yè)面到最后落地到品牌App內部，如何設計一套合適的引流路線(xiàn)也頗為重要。

大眾點(diǎn)評為電影《狂怒》設計的推廣頁(yè)便深諳此道。復古擬物風(fēng)格的視覺(jué)設計讓人眼前一亮，富有質(zhì)感的舊票根、忽閃的霓虹燈，配以幽默的動(dòng)畫(huà)與音效，恨不得每個(gè)選項都點(diǎn)一遍。圍繞“選擇”這個(gè)品牌關(guān)鍵詞，用引人入勝的測試題讓用戶(hù)把人生當作大片來(lái)選擇，選到最后一題引出“大眾點(diǎn)評選座看電影”，一鍵直達App購票頁(yè)面。即使明知是軟文也忍不住帶著(zhù)“矮油不錯，這個(gè)頁(yè)面有點(diǎn)diao噢”的心情點(diǎn)擊了分享。

讓人過(guò)目不忘的H5頁(yè)面

2.品牌宣傳型
不同于講究時(shí)效性的活動(dòng)運營(yíng)頁(yè)，品牌宣傳型H5頁(yè)面等同于一個(gè)品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶(hù)傳達品牌的精神態(tài)度。在設計上需要運用符合品牌氣質(zhì)的視覺(jué)語(yǔ)言，讓用戶(hù)對品牌留下深刻印象。

伴隨著(zhù)浪漫的鋼琴旋律，《首草先生的情書(shū)》以一位男士的口吻娓娓道來(lái)在成長(cháng)歷程中對妻子的愛(ài)與愧疚，最后引出“首草——滋陰圣品，愛(ài)妻首選”的宣傳語(yǔ)。設計上采用回憶般的黑白色調，簡(jiǎn)單的照片加文字，配以花瓣掉落、水面漣漪等輕動(dòng)畫(huà)，渲染出唯美優(yōu)雅的氣氛?！笆撞荨边@個(gè)全新的高端養生草藥品牌，用H5打出了一副走心的情感牌，讓用戶(hù)記住了“半生只為你”的愛(ài)妻品牌形象。

讓人過(guò)目不忘的H5頁(yè)面

3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹，運用H5的互動(dòng)技術(shù)優(yōu)勢盡情展示產(chǎn)品特性，吸引用戶(hù)買(mǎi)買(mǎi)買(mǎi)。

這一類(lèi)型的H5頁(yè)面多見(jiàn)于汽車(chē)品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細膩的光效營(yíng)造出酷炫的視覺(jué)風(fēng)格。用手指跟隨光的軌跡切割畫(huà)面揭開(kāi)序幕，通過(guò)合理優(yōu)雅的觸碰、摩擦、滑動(dòng)等互動(dòng)形式帶領(lǐng)用戶(hù)一同探索產(chǎn)品的7大特性，宏觀(guān)和微觀(guān)都照顧周全。

讓人過(guò)目不忘的H5頁(yè)面

4.總結報告型
自從支付寶的十年賬單引發(fā)熱議后，各大企業(yè)的年終總結現也熱衷于用H5技術(shù)實(shí)現，優(yōu)秀的互動(dòng)體驗令原本乏味的總結報告有趣生動(dòng)了起來(lái)。

《京東的十大任性》用10張橫屏頁(yè)面講述了京東在2014年的十大成就，視覺(jué)設計上采用簡(jiǎn)潔的扁平風(fēng)插畫(huà)，加入紙面質(zhì)感形成復古卡片拼貼感。不同頁(yè)面間通過(guò)手指滑動(dòng)實(shí)現流暢的視差滾動(dòng)效果，最后還有劉總這個(gè)小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。

讓人過(guò)目不忘的H5頁(yè)面

二．形式為功能服務(wù) 
在確定了專(zhuān)題頁(yè)的功能目標之后，接下來(lái)就是關(guān)鍵的設計階段了。如何有的放矢地進(jìn)行設計，需要考慮到具體的應用場(chǎng)景和傳播對象，從用戶(hù)角度出發(fā)去思考什么樣的頁(yè)面是用戶(hù)最想看的最會(huì )去分享的。以下列舉幾種常見(jiàn)的H5專(zhuān)題頁(yè)表現形式：

1.簡(jiǎn)單圖文
簡(jiǎn)單圖文是早期最典型的H5專(zhuān)題頁(yè)形式?！皥D”的形式千變萬(wàn)化，可以是照片、插畫(huà)、GIF等。通過(guò)翻頁(yè)等簡(jiǎn)單的交互操作，起到類(lèi)似幻燈片的傳播效果?？简灥氖歉哔|(zhì)量的內容本身和講故事的能力。

滴滴打車(chē)這個(gè)案例就是典型的簡(jiǎn)單圖文型H5專(zhuān)題頁(yè)，用幾張照片故事串起了整套頁(yè)面。視覺(jué)簡(jiǎn)潔有力，采用整屏黑白照片，點(diǎn)綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現，沒(méi)有其他互動(dòng)形式，讓觀(guān)眾聚焦于內容，通過(guò)陌生人之間的真情聯(lián)系來(lái)塑造品牌的正能量形象。

讓人過(guò)目不忘的H5頁(yè)面

也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時(shí)刻，微信推出了《從此看盡中國人的名與利》這樣一個(gè)專(zhuān)題頁(yè)。第一眼就被鎮住了，好親切的RMB~每個(gè)頁(yè)面都是一張人民幣風(fēng)景局部放大圖，創(chuàng )作者加入巧妙的創(chuàng )意元素與微動(dòng)態(tài)進(jìn)行細膩刻畫(huà)，帶觀(guān)眾走進(jìn)了人民幣的微觀(guān)世界。每一張鈔票圖案配合發(fā)人深省的文案，在推廣微信紅包的同時(shí)呼吁人們重新審視人情與名利的奧義。

讓人過(guò)目不忘的H5頁(yè)面

2.禮物/賀卡/邀請函
每個(gè)人都喜歡收到禮物的感覺(jué)，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過(guò)提升用戶(hù)好感度來(lái)潛移默化地達到品牌宣傳的目的。既然是禮物，那創(chuàng )意和制作便是重要的加分項。

AKQA創(chuàng )意營(yíng)銷(xiāo)公司在圣誕之際獻上了一份厚禮——夢(mèng)幻水晶球。通過(guò)移動(dòng)手機，鏡頭從水晶球外不斷搖晃推近，漸漸走進(jìn)水晶球的微觀(guān)世界里。通過(guò)手機環(huán)顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫(xiě)下你的祝福并分享給朋友，相信一定會(huì )驚艷到對方。這個(gè)H5頁(yè)面使用了重力感應、3D等技術(shù)，文字與BGM的使用也十分講究，給用戶(hù)帶來(lái)了完美的互動(dòng)體驗，值得細細品味。

讓人過(guò)目不忘的H5頁(yè)面

Evernote在過(guò)年期間也別出心裁地推出語(yǔ)音賀卡，通過(guò)公眾號引導用戶(hù)對其發(fā)送一條語(yǔ)音消息，然后把這條祝福語(yǔ)音結合中國風(fēng)動(dòng)畫(huà)做成一張獨一無(wú)二的語(yǔ)音賀卡發(fā)送給朋友。整體色調也是以Evernote品牌色為主，同時(shí)蘊含著(zhù)一絲優(yōu)雅的年味，十分討巧。

讓人過(guò)目不忘的H5頁(yè)面

3.問(wèn)答/評分/測試
問(wèn)答形式的H5頁(yè)面也屢見(jiàn)不鮮了，利用用戶(hù)的求知欲和探索欲，一路選選選，看最后到底是什么成績(jì)。一條清晰的線(xiàn)索是必要的，最后到達的結果頁(yè)也需要合理不突兀，如果能輔以出彩的視覺(jué)和文案，弱化答題的枯燥感那就再好不過(guò)了。

與本文開(kāi)頭一樣也是大眾點(diǎn)評的項目，這次是為姜文的電影《一步之遙》做持續推廣，讓用戶(hù)為姜文的代表作評分。視覺(jué)設計依舊出彩，開(kāi)腦洞的創(chuàng )意和動(dòng)畫(huà)設計令人叫絕（一定要掃一掃體驗下?。?。延續了懷舊大字報風(fēng)格，字體、文案、裝飾元素等細節處理也十分用心。問(wèn)答形式的H5頁(yè)面能做到這個(gè)份上也是蠻拼的。

讓人過(guò)目不忘的H5頁(yè)面

4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因為操作簡(jiǎn)單、競技性強，一度風(fēng)靡朋友圈，但創(chuàng )意缺乏和同質(zhì)化現象導致用戶(hù)對無(wú)腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點(diǎn)功夫。

Same在圣誕節推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡(jiǎn)單，只需用手指交替上滑，把角色的脖子向上拉到無(wú)限長(cháng)，游戲會(huì )記錄你拉的最高距離，跟朋友比一比誰(shuí)比較長(cháng)。界面清新可愛(ài)，與Same的招牌畫(huà)風(fēng)一致，游戲角色也是Same的品牌角色，通過(guò)幽默惡搞的游戲向用戶(hù)傳達Same獨到有趣的產(chǎn)品文化。

讓人過(guò)目不忘的H5頁(yè)面

三．為設計加分的4個(gè)要點(diǎn)
一個(gè)H5頁(yè)面設計品質(zhì)的出眾與否，會(huì )直接影響其傳播效果，甚至影響到用戶(hù)對品牌形象的認知。在這里總結出以下的設計要點(diǎn)：

1.細節與統一
要成就高品質(zhì)的用戶(hù)體驗，必須考慮到細節與整體的統一性。復古擬物的視覺(jué)風(fēng)格，那字體就不能過(guò)于現代；幽默調侃的調調，那文案措辭就不能過(guò)于嚴肅；打情感內容牌的，動(dòng)效就不能過(guò)于花哨。

大眾點(diǎn)評姜文電影推廣系列的《九步之遙》H5專(zhuān)題頁(yè)便牢牢抓住了這一點(diǎn)。從二維碼入口到性感的loading頁(yè)，再到最后分享提示的設計，包括文案措辭和背景音效，無(wú)不與整體的戲虐風(fēng)保持一致，給到用戶(hù)一個(gè)完整統一的互動(dòng)體驗。

讓人過(guò)目不忘的H5頁(yè)面

尤其關(guān)注“分享提示”這個(gè)細節設計，比起一個(gè)簡(jiǎn)單的箭頭和一句冷冰冰的“點(diǎn)這里分享”，用心的細節設計帶來(lái)的高品質(zhì)和好感度是顯而易見(jiàn)的。再貼幾個(gè)精彩案例：

讓人過(guò)目不忘的H5頁(yè)面

2.緊跟熱點(diǎn)，利用話(huà)題效應
想要你的H5專(zhuān)題頁(yè)一夜爆紅，第一時(shí)間抓住熱點(diǎn)并火速上線(xiàn)，借機進(jìn)行品牌宣傳也不失為一條捷徑。

天天P圖抓住武則天熱播的契機推出了風(fēng)靡海內外的媚娘妝，同時(shí)《全民COS武媚娘》的H5互動(dòng)頁(yè)也第一時(shí)間上線(xiàn)，操作簡(jiǎn)單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬(wàn)千媚娘們進(jìn)行PK，娛樂(lè )了大眾又推廣了產(chǎn)品。

讓人過(guò)目不忘的H5頁(yè)面

網(wǎng)易娛樂(lè )在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專(zhuān)題頁(yè)，放下節操用極富想象力的粗曠草圖風(fēng)向廣大觀(guān)眾“還原”了真相。一時(shí)間被瘋狂轉發(fā)，網(wǎng)易娛樂(lè )也算是順勢自我宣傳了一把。

讓人過(guò)目不忘的H5頁(yè)面

3.講個(gè)好故事，引發(fā)情感共鳴
不論H5的形式如何多變，有價(jià)值的內容始終是第一位的。在有限的篇幅里，學(xué)會(huì )講故事，引發(fā)用戶(hù)的情感共鳴，將對內容的傳播形成極大的推動(dòng)。

LEVI’S新年優(yōu)惠活動(dòng)專(zhuān)題頁(yè)以第一人稱(chēng)的口吻，用小時(shí)候簡(jiǎn)樸卻熱鬧的新年與長(cháng)大后富足卻乏味的新年做對比，用手繪風(fēng)渲染出親切的懷舊氛圍。最后引出“這個(gè)新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強的故事無(wú)疑是驅動(dòng)分享的源動(dòng)力。

讓人過(guò)目不忘的H5頁(yè)面

4.合理運用技術(shù)，打造流暢的互動(dòng)體驗
隨著(zhù)技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實(shí)現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動(dòng)效果。（有興趣的話(huà)可以點(diǎn)擊這個(gè)網(wǎng)站 http://fff.cmiscm.com/幾乎有所有H5動(dòng)態(tài)效果的展示）。相較于塞入各種不同種類(lèi)的動(dòng)效導致頁(yè)面混亂臃腫，我們更提倡的是合理運用技術(shù)，用心專(zhuān)注于為用戶(hù)提供流暢的互動(dòng)體驗。

典型的案例是淘寶在雙12推出的預售推廣H5專(zhuān)題頁(yè)。在瀏覽過(guò)程中我只使用了一種向上滑動(dòng)的手勢，而頁(yè)面呈現出來(lái)的效果卻猶如一個(gè)流暢的動(dòng)態(tài)GIF。設計師巧妙利用圖形設計與組合，在滑動(dòng)過(guò)程中營(yíng)造出一種豐富的視差滾動(dòng)效果，單個(gè)圖形元素的遮罩、旋轉與整體頁(yè)面的動(dòng)勢配合極為默契。

讓人過(guò)目不忘的H5頁(yè)面