那些過目不忘的HTML5頁面

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

功能與目標(biāo)

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

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

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

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

2.品牌宣傳型

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

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