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

功能與目標(biāo)

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

1.運(yùn)動運(yùn)營型

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

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

2.品牌宣傳型

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

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