那些過目不忘的H5頁面 | 人人都是產品經理

從引爆朋友圈的H5小遊戲《圍住神經貓》，到顛覆傳統廣告的大眾點評H5專題頁《我們之間只有一個字》，從2014下半年起，各種H5遊戲和專題頁紛紛嶄露頭角。「H5」，這個由HTML5簡化而來的辭彙，藉由微信這個移動社交平台，正在走進更多人的視野。本文聚焦於基於微信傳播的H5頁面的視覺設計，通過一些案例分析來談談設計思路與方法，希望與大家進行交流探討。

首先從功能與設計目標來看， H5專題頁主要有以下4大類型：

為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括遊戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。

大眾點評為電影《狂怒》設計的推廣頁便深諳此道。復古擬物風格的視覺設計讓人眼前一亮，富有質感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點一遍。圍繞「選擇」這個品牌關鍵詞，用引人入勝的測試題讓用戶把人生當作大片來選擇，選到最後一題引出「大眾點評選座看電影」，一鍵直達App購票頁面。即使明知是軟文也忍不住帶著「矮油不錯，這個頁面有點diao噢」的心情點擊了分享。

2.品牌宣傳型

不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。

伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長曆程中對妻子的愛與愧疚，最後引出「首草——滋陰聖品，愛妻首選」的宣傳語。設計上採用回憶般的黑白色調，簡單的照片加文字，配以花瓣掉落、水面漣漪等輕動畫，渲染出唯美優雅的氣氛。「首草」這個全新的高端養生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了「半生只為你」的愛妻品牌形象。

3.產品介紹型

聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。

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

4.總結報告型

自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設計上採用簡潔的扁平風插畫，加入紙面質感形成復古卡片拼貼感。不同頁面間通過手指滑動實現流暢的視差滾動效果，最後還有劉總這個小彩蛋。一口氣看完後大概就了解2014年京東都幹了哪些大事。

二．形式為功能服務

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

簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。

滴滴打車這個案例就是典型的簡單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡潔有力，採用整屏黑白照片，點綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現，沒有其他互動形式，讓觀眾聚焦於內容，通過陌生人之間的真情聯繫來塑造品牌的正能量形象。

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

2.禮物/賀卡/邀請函

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

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

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

3.問答/評分/測試

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

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

4.遊戲

從 「圍住神經貓」、「看你有多色」等單純小遊戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小遊戲，H5遊戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小遊戲逐漸產生了厭倦。品牌要在遊戲上做到成功傳播，需要在玩法和設計上多下點功夫。

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

三．為設計加分的4個要點

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

1.細節與統一

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

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

尤其關注「分享提示」這個細節設計，比起一個簡單的箭頭和一句冷冰冰的「點這裡分享」，用心的細節設計帶來的高品質和好感度是顯而易見的。再貼幾個精彩案例：

2.緊跟熱點，利用話題效應

想要你的H5專題頁一夜爆紅，第一時間抓住熱點併火速上線，藉機進行品牌宣傳也不失為一條捷徑。

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

網易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節操用極富想像力的粗曠草圖風向廣大觀眾「還原」了真相。一時間被瘋狂轉發，網易娛樂也算是順勢自我宣傳了一把。

3.講個好故事，引發情感共鳴

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

LEVI』S新年優惠活動專題頁以第一人稱的口吻，用小時候簡樸卻熱鬧的新年與長大後富足卻乏味的新年做對比，用手繪風渲染出親切的懷舊氛圍。最後引出「這個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣」的品牌推廣slogan，代入感極強的故事無疑是驅動分享的源動力。

4.合理運用技術，打造流暢的互動體驗

隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕鬆實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。（有興趣的話可以點擊這個網站http://fff.cmiscm.com/幾乎有所有H5動態效果的展示）。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專註於為用戶提供流暢的互動體驗。

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

結語

隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。未來必將湧現更多優秀的H5頁面，讓我們拭目以待。

作者：魚小干

來源：騰訊ISUX

原文地址：http://isux.tencent.com/great-mobile-h5-pages.html