從(cóng)引爆朋友圈的H5小(xiǎo)遊戲《圍住神經貓》，到(dào)颠覆傳統廣告的大(dà)衆點評H5專題頁《我們之間隻有一個字》，從(cóng)2014下(xià)半年起，各種H5遊戲和(hé)專題頁紛紛嶄露頭角。“H5”，這(zhè)個由HTML5簡化而來(lái)的詞彙，借由微信這(zhè)個移動社交平台，正在走進更多人的視(shì)野。本文(wén)聚焦于基于微信傳播的H5頁面的視(shì)覺設計(jì)，通過一些(xiē)案例分析來(lái)談談設計(jì)思路與方法，希望與大(dà)家進行交流探讨。
一、功能(néng)與目标
首先從(cóng)功能(néng)與設計(jì)目标來(lái)看(kàn)， H5專題頁主要有以下(xià)4大(dà)類型：
1.活動運營型
爲活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括遊戲、邀請(qǐng)函、賀卡、測試題等形式。與以往簡單的靜态廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高(gāo)質量、更具話(huà)題性的設計(jì)來(lái)促成用(yòng)戶分享傳播。從(cóng)進入微信H5頁面到(dào)最後落地到(dào)品牌App内部，如何設計(jì)一套合适的引流路線也(yě)頗爲重要。
大(dà)衆點評爲電影《狂怒》設計(jì)的推廣頁便深谙此道(dào)。複古拟物風(fēng)格的視(shì)覺設計(jì)讓人眼前一亮(liàng)，富有質感的舊票根、忽閃的霓虹燈，配以幽默的動畫(huà)與音(yīn)效，恨不得每個選項都點一遍。圍繞“選擇”這(zhè)個品牌關鍵詞，用(yòng)引人入勝的測試題讓用(yòng)戶把人生當作(zuò)大(dà)片來(lái)選擇，選到(dào)最後一題引出“大(dà)衆點評選座看(kàn)電影”，一鍵直達App購票頁面。即使明(míng)知(zhī)是軟文(wén)也(yě)忍不住帶着“矮油不錯，這(zhè)個頁面有點diao噢”的心情點擊了(le)分享。
2.品牌宣傳型
不同于講究時(shí)效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網，更傾向于品牌形象塑造，向用(yòng)戶傳達品牌的精神态度。在設計(jì)上(shàng)需要運用(yòng)符合品牌氣質的視(shì)覺語言，讓用(yòng)戶對(duì)品牌留下(xià)深刻印象。
伴随着浪漫的鋼琴旋律，《首草先生的情書》以一位男(nán)士的口吻娓娓道(dào)來(lái)在成長曆程中對(duì)妻子的愛與愧疚，最後引出“首草——滋陰聖品，愛妻首選”的宣傳語。設計(jì)上(shàng)采用(yòng)回憶般的黑白(bái)色調，簡單的照片加文(wén)字，配以花(huā)瓣掉落、水(shuǐ)面漣漪等輕動畫(huà)，渲染出唯美(měi)優雅的氣氛。“首草”這(zhè)個全新的高(gāo)端養生草藥品牌，用(yòng)H5打出了(le)一副走心的情感牌，讓用(yòng)戶記住了(le)“半生隻爲你(nǐ)”的愛妻品牌形象。
3.産品介紹型
聚焦于産品功能(néng)介紹，運用(yòng)H5的互動技術優勢盡情展示産品特性，吸引用(yòng)戶買買買。
這(zhè)一類型的H5頁面多見于汽車品牌，LEXUS
NX是其中的優秀代表案例。精緻和(hé)極富質感的建模、細膩的光效營造出酷炫的視(shì)覺風(fēng)格。用(yòng)手指跟随光的軌迹切割畫(huà)面揭開(kāi)序幕，通過合理(lǐ)優雅的觸碰、摩擦、滑動等互動形式帶領用(yòng)戶一同探索産品的7大(dà)特性，宏觀和(hé)微觀都照顧周全。
4.總結報(bào)告型
自(zì)從(cóng)支付寶的十年賬單引發熱議(yì)後，各大(dà)企業的年終總結現(xiàn)也(yě)熱衷于用(yòng)H5技術實現(xiàn)，優秀的互動體驗令原本乏味的總結報(bào)告有趣生動了(le)起來(lái)。
《京東的十大(dà)任性》用(yòng)10張橫屏頁面講述了(le)京東在2014年的十大(dà)成就，視(shì)覺設計(jì)上(shàng)采用(yòng)簡潔的扁平風(fēng)插畫(huà)，加入紙(zhǐ)面質感形成複古卡片拼貼感。不同頁面間通過手指滑動實現(xiàn)流暢的視(shì)差滾動效果，最後還有劉總這(zhè)個小(xiǎo)彩蛋。一口氣看(kàn)完後大(dà)概就了(le)解2014年京東都幹了(le)哪些(xiē)大(dà)事(shì)。
那些(xiē)過目不忘的H5頁面
二.形式爲功能(néng)服務
在确定了(le)專題頁的功能(néng)目标之後，接下(xià)來(lái)就是關鍵的設計(jì)階段了(le)。如何有的放(fàng)矢地進行設計(jì)，需要考慮到(dào)具體的應用(yòng)場景和(hé)傳播對(duì)象，從(cóng)用(yòng)戶角度出發去思考什(shén)麽樣的頁面是用(yòng)戶最想看(kàn)的最會(huì)去分享的。以下(xià)列舉幾種常見的H5專題頁表現(xiàn)形式：
1.簡單圖文(wén)
簡單圖文(wén)是早期最典型的H5專題頁形式。“圖”的形式千變萬化，可以是照片、插畫(huà)、GIF等。通過翻頁等簡單的交互操作(zuò)，起到(dào)類似幻燈片的傳播效果。考驗的是高(gāo)質量的内容本身和(hé)講故事(shì)的能(néng)力。
滴滴打車這(zhè)個案例就是典型的簡單圖文(wén)型H5專題頁，用(yòng)幾張照片故事(shì)串起了(le)整套頁面。視(shì)覺簡潔有力，采用(yòng)整屏黑白(bái)照片，點綴以滴滴的品牌橙色。每切換一張圖片，文(wén)字就漸隐浮現(xiàn)，沒有其他(tā)互動形式，讓觀衆聚焦于内容，通過陌生人之間的真情聯系來(lái)塑造品牌的正能(néng)量形象。
也(yě)有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅(hóng)包的時(shí)刻，微信推出了(le)《從(cóng)此看(kàn)盡中國人的名與利》這(zhè)樣一個專題頁。第一眼就被鎮住了(le)，好(hǎo)親切的RMB~每個頁面都是一張人民币風(fēng)景局部放(fàng)大(dà)圖，創作(zuò)者加入巧妙的創意元素與微動态進行細膩刻畫(huà)，帶觀衆走進了(le)人民币的微觀世界。每一張鈔票圖案配合發人深省的文(wén)案，在推廣微信紅(hóng)包的同時(shí)呼籲人們重新審視(shì)人情與名利的奧義。
2.禮物/賀卡/邀請(qǐng)函
每個人都喜歡收到(dào)禮物的感覺，抓住這(zhè)一心理(lǐ)，品牌推出了(le)各種H5形式的禮物、賀卡、邀請(qǐng)函，通過提升用(yòng)戶好(hǎo)感度來(lái)潛移默化地達到(dào)品牌宣傳的目的。既然是禮物，那創意和(hé)制作(zuò)便是重要的加分項。
AKQA創意營銷公司在聖誕之際獻上(shàng)了(le)一份厚禮——夢幻水(shuǐ)晶球。通過移動手機，鏡頭從(cóng)水(shuǐ)晶球外(wài)不斷搖晃推近，漸漸走進水(shuǐ)晶球的微觀世界裏。通過手機環顧四周，可以360度欣賞水(shuǐ)晶球裏的全景，搖一搖雪花(huā)便漫天飄灑。寫下(xià)你(nǐ)的祝福并分享給朋友，相信一定會(huì)驚豔到(dào)對(duì)方。這(zhè)個H5頁面使用(yòng)了(le)重力感應、3D等技術，文(wén)字與BGM的使用(yòng)也(yě)十分講究，給用(yòng)戶帶來(lái)了(le)完美(měi)的互動體驗，值得細細品味。
Evernote在過年期間也(yě)别出心裁地推出語音(yīn)賀卡，通過公衆号引導用(yòng)戶對(duì)其發送一條語音(yīn)消息，然後把這(zhè)條祝福語音(yīn)結合中國風(fēng)動畫(huà)做成一張獨一無二的語音(yīn)賀卡發送給朋友。整體色調也(yě)是以Evernote品牌色爲主，同時(shí)蘊含着一絲優雅的年味，十分讨巧。
3.問答(dá)/評分/測試
問答(dá)形式的H5頁面也(yě)屢見不鮮了(le)，利用(yòng)用(yòng)戶的求知(zhī)欲和(hé)探索欲，一路選選選，看(kàn)最後到(dào)底是什(shén)麽成績。一條清晰的線索是必要的，最後到(dào)達的結果頁也(yě)需要合理(lǐ)不突兀，如果能(néng)輔以出彩的視(shì)覺和(hé)文(wén)案，弱化答(dá)題的枯燥感那就再好(hǎo)不過了(le)。
與本文(wén)開(kāi)頭一樣也(yě)是大(dà)衆點評的項目，這(zhè)次是爲姜文(wén)的電影《一步之遙》做持續推廣，讓用(yòng)戶爲姜文(wén)的代表作(zuò)評分。視(shì)覺設計(jì)依舊出彩，開(kāi)腦(nǎo)洞的創意和(hé)動畫(huà)設計(jì)令人叫絕(一定要掃一掃體驗下(xià)!)。延續了(le)懷舊大(dà)字報(bào)風(fēng)格，字體、文(wén)案、裝飾元素等細節處理(lǐ)也(yě)十分用(yòng)心。問答(dá)形式的H5頁面能(néng)做到(dào)這(zhè)個份上(shàng)也(yě)是蠻拼的。
4.遊戲
從(cóng)“圍住神經貓”、“看(kàn)你(nǐ)有多色”等單純小(xiǎo)遊戲再到(dào)杜蕾斯“一夜N次郎”(即山寨版“别踩白(bái)塊兒”)等品牌植入式小(xiǎo)遊戲，H5遊戲因爲操作(zuò)簡單、競技性強，一度風(fēng)靡朋友圈，但(dàn)創意缺乏和(hé)同質化現(xiàn)象導緻用(yòng)戶對(duì)無腦(nǎo)小(xiǎo)遊戲逐漸産生了(le)厭(yàn)倦。品牌要在遊戲上(shàng)做到(dào)成功傳播，需要在玩(wán)法和(hé)設計(jì)上(shàng)多下(xià)點功夫。
Same在聖誕節推出了(le)一款名爲《聖誕老(lǎo)人拯救計(jì)劃》的H5小(xiǎo)遊戲，操作(zuò)非常簡單，隻需用(yòng)手指交替上(shàng)滑，把角色的脖子向上(shàng)拉到(dào)無限長，遊戲會(huì)記錄你(nǐ)拉的最高(gāo)距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫(huà)風(fēng)一緻，遊戲角色也(yě)是Same的品牌角色，通過幽默惡搞的遊戲向用(yòng)戶傳達Same獨到(dào)有趣的産品文(wén)化。
三.爲設計(jì)加分的4個要點
一個H5頁面設計(jì)品質的出衆與否，會(huì)直接影響其傳播效果，甚至影響到(dào)用(yòng)戶對(duì)品牌形象的認知(zhī)。在這(zhè)裏總結出以下(xià)的設計(jì)要點：
1.細節與統一
要成就高(gāo)品質的用(yòng)戶體驗，必須考慮到(dào)細節與整體的統一性。複古拟物的視(shì)覺風(fēng)格，那字體就不能(néng)過于現(xiàn)代;幽默調侃的調調，那文(wén)案措辭就不能(néng)過于嚴肅;打情感内容牌的，動效就不能(néng)過于花(huā)哨。
大(dà)衆點評姜文(wén)電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了(le)這(zhè)一點。從(cóng)二維碼入口到(dào)性感的loading頁，再到(dào)最後分享提示的設計(jì)，包括文(wén)案措辭和(hé)背景音(yīn)效，無不與整體的戲虐風(fēng)保持一緻，給到(dào)用(yòng)戶一個完整統一的互動體驗。
尤其關注“分享提示”這(zhè)個細節設計(jì)，比起一個簡單的箭頭和(hé)一句冷冰冰的“點這(zhè)裏分享”，用(yòng)心的細節設計(jì)帶來(lái)的高(gāo)品質和(hé)好(hǎo)感度是顯而易見的。再貼幾個精彩案例：
2.緊跟熱點，利用(yòng)話(huà)題效應
想要你(nǐ)的H5專題頁一夜爆紅(hóng)，第一時(shí)間抓住熱點并火速上(shàng)線，借機進行品牌宣傳也(yě)不失爲一條捷徑。
天天P圖抓住武則天熱播的契機推出了(le)風(fēng)靡海内外(wài)的媚娘妝，同時(shí)《全民COS武媚娘》的H5互動頁也(yě)第一時(shí)間上(shàng)線，操作(zuò)簡單易上(shàng)手，一鍵上(shàng)傳照片就能(néng)立刻完成媚娘妝，與萬千媚娘們進行PK，娛樂了(le)大(dà)衆又推廣了(le)産品。
網易娛樂在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上(shàng)推出了(le)名爲《神還原武媚娘被剪胸真相》的H5專題頁，放(fàng)下(xià)節操用(yòng)極富想象力的粗曠草圖風(fēng)向廣大(dà)觀衆“還原”了(le)真相。一時(shí)間被瘋狂轉發，網易娛樂也(yě)算(suàn)是順勢自(zì)我宣傳了(le)一把。
3.講個好(hǎo)故事(shì)，引發情感共鳴
不論H5的形式如何多變，有價值的内容始終是第一位的。在有限的篇幅裏，學會(huì)講故事(shì)，引發用(yòng)戶的情感共鳴，将對(duì)内容的傳播形成極大(dà)的推動。
LEVI’S新年優惠活動專題頁以第一人稱的口吻，用(yòng)小(xiǎo)時(shí)候簡樸卻熱鬧的新年與長大(dà)後富足卻乏味的新年做對(duì)比，用(yòng)手繪風(fēng)渲染出親切的懷舊氛圍。最後引出“這(zhè)個新年，把壓力和(hé)束縛打包扔掉，用(yòng)新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強的故事(shì)無疑是驅動分享的源動力。
4.合理(lǐ)運用(yòng)技術，打造流暢的互動體驗
随着技術的發展，如今的HTML5擁有衆多出彩的特性，讓我們能(néng)輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應、擦除、3D視(shì)圖等互動效果。(有興趣的話(huà)可以點擊這(zhè)個網站(zhàn)
http://fff.cmiscm.com/幾乎有所有H5動态效果的展示)。相較于塞入各種不同種類的動效導緻頁面混亂臃腫，我們更提倡的是合理(lǐ)運用(yòng)技術，用(yòng)心專注于爲用(yòng)戶提供流暢的互動體驗。
典型的案例是淘寶在雙12推出的預售推廣H5專題頁。在浏覽過程中我隻使用(yòng)了(le)一種向上(shàng)滑動的手勢，而頁面呈現(xiàn)出來(lái)的效果卻猶如一個流暢的動态GIF。設計(jì)師巧妙利用(yòng)圖形設計(jì)與組合，在滑動過程中營造出一種豐富的視(shì)差滾動效果，單個圖形元素的遮罩、旋轉與整體頁面的動勢配合極爲默契。
結語随着手機硬件的升級、HTML5技術的發展以及微信平台的開(kāi)放(fàng)，HTML5的跨平台、低(dī)成本、快(kuài)叠代等優勢被進一步凸顯，這(zhè)對(duì)身處于移動互聯網大(dà)潮的企業主、品牌、設計(jì)師和(hé)開(kāi)發者來(lái)說，都将是一個最好(hǎo)的時(shí)代。未來(lái)必将湧現(xiàn)更多優秀的H5頁面，讓我們拭目以待。
