13989464132
H5原本是一種制作萬(wàn)維網(wǎng)頁(yè)面的標(biāo)準(zhǔn)計(jì)算機(jī)語(yǔ)言，由HTML5簡(jiǎn)化而來(lái)的詞匯，HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。由于微信迅速的崛起，H5語(yǔ)言編寫的界面和微信瀏覽器比較兼容，借由微信移動(dòng)社交平臺(tái)，走進(jìn)大家的視野，也開(kāi)始越來(lái)越火。
H5頁(yè)面
首先從功能與設(shè)計(jì)目標(biāo)來(lái)看， H5專題頁(yè)面主要有以類型：活動(dòng)運(yùn)營(yíng)型、品牌宣傳型、產(chǎn)品介紹型、總結(jié)報(bào)告型、賀卡邀請(qǐng)函型、職位招聘型、故事講述型、教學(xué)教程型。
1
活動(dòng)運(yùn)營(yíng)型
為活動(dòng)推廣運(yùn)營(yíng)而打造的H5頁(yè)面是最常見(jiàn)的類型，形式多變，包括游戲、邀請(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)格的視覺(jué)設(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ì)的視覺(jué)語(yǔ)言，讓用戶對(duì)品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來(lái)在成長(zhǎng)歷程中對(duì)妻子的愛(ài)與愧疚，最后引出“首草——滋陰圣品，愛(ài)妻首選”的宣傳語(yǔ)。設(shè)計(jì)上采用回憶般的黑白色調(diào)，簡(jiǎn)單的照片加文字，配以花瓣掉落、水面漣漪等輕動(dòng)畫，渲染出唯美優(yōu)雅的氣氛。“首草”這個(gè)全新的高端養(yǎng)生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛(ài)妻品牌形象。
3
產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹，運(yùn)用H5的互動(dòng)技術(shù)優(yōu)勢(shì)盡情展示產(chǎn)品特性，吸引用戶買買買。
這一類型的H5頁(yè)面多見(jiàn)于汽車品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細(xì)膩的光效營(yíng)造出酷炫的視覺(jué)風(fēng)格。用手指跟隨光的軌跡切割畫面揭開(kāi)序幕，通過(guò)合理優(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è)面講述了京東在前幾年十大成就，視覺(jué)設(shè)計(jì)上采用簡(jiǎn)潔的扁平風(fēng)插畫，加入紙面質(zhì)感形成復(fù)古卡片拼貼感。不同頁(yè)面間通過(guò)手指滑動(dòng)實(shí)現(xiàn)流暢的視差滾動(dòng)效果，最后還有劉總這個(gè)小彩蛋。
5
賀卡邀請(qǐng)函型
每個(gè)人都喜歡收到賀卡或邀請(qǐng)的感覺(jué)，抓住這一心理，品牌推出了各種H5頁(yè)面形式的禮物、賀卡、邀請(qǐng)函，通過(guò)提升用戶好感度來(lái)潛移默化地達(dá)到品牌宣傳的目的，在邀請(qǐng)的同時(shí)也展示了自己的產(chǎn)品與品牌，可以一舉多得！
6
職位招聘型
為了展現(xiàn)自己獨(dú)特的企業(yè)文化，招聘型H5已然成為企業(yè)應(yīng)該好好利用的擴(kuò)音器。快速分享QQ，微信，微博等，求職者一鍵報(bào)名，效果數(shù)據(jù)隨時(shí)監(jiān)控。（講故事、員工代言、簡(jiǎn)單直白）
7
故事講述型
講個(gè)好故事，引發(fā)情感共鳴，不論H5頁(yè)面的形式如何多變，有價(jià)值的內(nèi)容始終是第一位的。在有限的篇幅里，學(xué)會(huì)講故事，引發(fā)用戶的情感共鳴，將對(duì)內(nèi)容的傳播形成極大的推動(dòng)。
8
教學(xué)教程型
H5的翻頁(yè)形式，特別適合步驟式的教程表現(xiàn)。一步一頁(yè)，通過(guò)滑動(dòng)這種交互形式，可以加深對(duì)于步驟的理解和認(rèn)識(shí)，有著出人意料的學(xué)習(xí)效果。