從引爆朋友圈的H5小游戲《圍住神經(jīng)貓》，到顛覆傳統(tǒng)廣告的大眾點(diǎn)評(píng)H5專題頁(yè)《我們之間只有一個(gè)字》，從2014下半年起，各種H5游戲和專題頁(yè)紛紛嶄露頭角?！癏5”，這個(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)行交流探討。

功能與目標(biāo)

首先從功能與設(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年京東都干了哪些大事。

網(wǎng)站標(biāo)題：那些過目不忘的H5頁(yè)面
網(wǎng)站網(wǎng)址：http://jinyejixie.com/news/216901.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、虛擬主機(jī)、品牌網(wǎng)站制作、網(wǎng)站營(yíng)銷、微信公眾號(hào)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)