cover 視覺設(shè)計(jì)

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

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

1、活動(dòng)運(yùn)營(yíng)型

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

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

2、品牌宣傳型

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

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

3、產(chǎn)品介紹型

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

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

4、總結(jié)報(bào)告型

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

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

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

1.簡(jiǎn)單圖文

簡(jiǎn)單圖文是早期最典型的H5專題頁(yè)形式。“圖”的形式千變?nèi)f化，可以是照片、插畫、GIF等。通過翻頁(yè)等簡(jiǎn)單的交互操作，起到類似幻燈片的傳播效果。考驗(yàn)的是高質(zhì)量的內(nèi)容本身和講故事的能力。

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

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

2.禮物/賀卡/邀請(qǐng)函

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

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

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

3.問答/評(píng)分/測(cè)試

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

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

4.游戲

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

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

收藏

{{favCount}}

個(gè)人收藏