2022-11-06 分類: 網(wǎng)站建設
從引爆朋友圈的H5小游戲《圍住神經(jīng)貓》,到顛覆傳統(tǒng)廣告的大眾點評H5專題頁《我們之間只有一個字》,從2014下半年起,各種H5游戲和專題頁紛紛嶄露頭角?!癏5”,這個由HTML5簡化而來的詞匯,借由微信這個移動社交平臺,正在走進更多人的視野。本文聚焦于基于微信傳播的H5頁面的視覺設計,通過一些案例分析來談談設計思路與方法,希望與大家進行交流探討。
功能與目標
首先從功能與設計目標來看, H5專題頁主要有以下4大類型:
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型,形式多變,包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態(tài)廣告圖片傳播不同,如今的H5活動運營頁需要有更強的互動、更高質(zhì)量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最后落地到品牌App內(nèi)部,如何設計一套合適的引流路線也頗為重要。
大眾點評為電影《狂怒》設計的推廣頁便深諳此道。復古擬物風格的視覺設計讓人眼前一亮,富有質(zhì)感的舊票根、忽閃的霓虹燈,配以幽默的動畫與音效,恨不得每個選項都點一遍。圍繞“選擇”這個品牌關鍵詞,用引人入勝的測試題讓用戶把人生當作大片來選擇,選到最后一題引出“大眾點評選座看電影”,一鍵直達App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯,這個頁面有點diao噢”的心情點擊了分享。
選擇吧,人生!
2.品牌宣傳型
不同于講究時效性的活動運營頁,品牌宣傳型H5頁面等同于一個品牌的微官網(wǎng),更傾向于品牌形象塑造,向用戶傳達品牌的精神態(tài)度。在設計上需要運用符合品牌氣質(zhì)的視覺語言,讓用戶對品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律,《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚,最后引出“首草——滋陰圣品,愛妻選”的宣傳語。設計上采用回憶般的黑白色調(diào),簡單的照片加文字,配以花瓣掉落、水面漣漪等輕動畫,渲染出唯美優(yōu)雅的氣氛。“首草”這個全新的高端養(yǎng)生草藥品牌,用H5打出了一副走心的情感牌,讓用戶記住了“半生只為你”的愛妻品牌形象。
首草先生的情書
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹,運用H5的互動技術優(yōu)勢盡情展示產(chǎn)品特性,吸引用戶買買買。
這一類型的H5頁面多見于汽車品牌,LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕,通過合理優(yōu)雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產(chǎn)品的7大特性,宏觀和微觀都照顧周全。
lexus
4.總結(jié)報告型
自從支付寶的十年賬單引發(fā)熱議后,各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術實現(xiàn),優(yōu)秀的互動體驗令原本乏味的總結(jié)報告有趣生動了起來。
《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就,視覺設計上采用簡潔的扁平風插畫,加入紙面質(zhì)感形成復古卡片拼貼感。不同頁面間通過手指滑動實現(xiàn)流暢的視差滾動效果,最后還有劉總這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。
京東的十大任性
二.形式為功能服務
在確定了專題頁的功能目標之后,接下來就是關鍵的設計階段了。如何有的放矢地進行設計,需要考慮到具體的應用場景和傳播對象,從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會去分享的。以下列舉幾種常見的H5專題頁表現(xiàn)形式:
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式?!皥D”的形式千變?nèi)f化,可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作,起到類似幻燈片的傳播效果。考驗的是高質(zhì)量的內(nèi)容本身和講故事的能力。
滴滴打車這個案例就是典型的簡單圖文型H5專題頁,用幾張照片故事串起了整套頁面。視覺簡潔有力,采用整屏黑白照片,點綴以滴滴的品牌橙色。每切換一張圖片,文字就漸隱浮現(xiàn),沒有其他互動形式,讓觀眾聚焦于內(nèi)容,通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。
嘀嘀打車
也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻,微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮(zhèn)住了,好親切的RMB~每個頁面都是一張人民幣風景局部放大圖,創(chuàng)作者加入巧妙的創(chuàng)意元素與微動態(tài)進行細膩刻畫,帶觀眾走進了人民幣的微觀世界。每一張鈔票圖案配合發(fā)人深省的文案,在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。
從此看盡中國人的名與利
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺,抓住這一心理,品牌推出了各種H5形式的禮物、賀卡、邀請函,通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物,那創(chuàng)意和制作便是重要的加分項。
AKQA創(chuàng)意營銷公司在圣誕之際獻上了一份厚禮——夢幻水晶球。通過移動手機,鏡頭從水晶球外不斷搖晃推近,漸漸走進水晶球的微觀世界里。通過手機環(huán)顧四周,可以360度欣賞水晶球里的全景,搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友,相信一定會驚艷到對方。這個H5頁面使用了重力感應、3D等技術,文字與BGM的使用也十分講究,給用戶帶來了好的互動體驗,值得細細品味。
AKQA
Evernote在過年期間也別出心裁地推出語音賀卡,通過公眾號引導用戶對其發(fā)送一條語音消息,然后把這條祝福語音結(jié)合中國風動畫做成一張獨一無二的語音賀卡發(fā)送給朋友。整體色調(diào)也是以Evernote品牌色為主,同時蘊含著一絲優(yōu)雅的年味,十分討巧。
evernote
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了,利用用戶的求知欲和探索欲,一路選選選,看最后到底是什么成績。一條清晰的線索是必要的,最后到達的結(jié)果頁也需要合理不突兀,如果能輔以出彩的視覺和文案,弱化答題的枯燥感那就再好不過了。
與本文開頭一樣也是大眾點評的項目,這次是為姜文的電影《一步之遙》做持續(xù)推廣,讓用戶為姜文的代表作評分。視覺設計依舊出彩,開腦洞的創(chuàng)意和動畫設計令人叫絕(一定要掃一掃體驗下?。Q永m(xù)了懷舊大字報風格,字體、文案、裝飾元素等細節(jié)處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。
評什么愛姜文
4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”(即山寨版“別踩白塊兒”)等品牌植入式小游戲,H5游戲因為操作簡單、競技性強,一度風靡朋友圈,但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播,需要在玩法和設計上多下點功夫。
Same在圣誕節(jié)推出了一款名為《圣誕老人拯救計劃》的H5小游戲,操作非常簡單,只需用手指交替上滑,把角色的脖子向上拉到無限長,游戲會記錄你拉的最高距離,跟朋友比一比誰比較長。界面清新可愛,與Same的招牌畫風一致,游戲角色也是Same的品牌角色,通過幽默惡搞的游戲向用戶傳達Same獨到有趣的產(chǎn)品文化。
same
三.為設計加分的4個要點
一個H5頁面設計品質(zhì)的出眾與否,會直接影響其傳播效果,甚至影響到用戶對品牌形象的認知。在這里總結(jié)出以下的設計要點:
1.細節(jié)與統(tǒng)一
要成就高品質(zhì)的用戶體驗,必須考慮到細節(jié)與整體的統(tǒng)一性。復古擬物的視覺風格,那字體就不能過于現(xiàn)代;幽默調(diào)侃的調(diào)調(diào),那文案措辭就不能過于嚴肅;打情感內(nèi)容牌的,動效就不能過于花哨。
大眾點評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點。從二維碼入口到性感的loading頁,再到最后分享提示的設計,包括文案措辭和背景音效,無不與整體的戲虐風保持一致,給到用戶一個完整統(tǒng)一的互動體驗。
九步之遙
尤其關注“分享提示”這個細節(jié)設計,比起一個簡單的箭頭和一句冷冰冰的“點這里分享”,用心的細節(jié)設計帶來的高品質(zhì)和好感度是顯而易見的。再貼幾個精彩案例:
分享提示
2.緊跟熱點,利用話題效應
想要你的H5專題頁一夜爆紅,第一時間抓住熱點并火速上線,借機進行品牌宣傳也不失為一條捷徑。
天天P圖抓住武則天熱播的契機推出了風靡海內(nèi)外的媚娘妝,同時《全民COS武媚娘》的H5互動頁也第一時間上線,操作簡單易上手,一鍵上傳照片就能立刻完成媚娘妝,與萬千媚娘們進行PK,娛樂了大眾又推廣了產(chǎn)品。
天天P圖全民COS武媚娘
網(wǎng)易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁,放下節(jié)操用極富想象力的粗曠草圖風向廣大觀眾“還原”了真相。一時間被瘋狂轉(zhuǎn)發(fā),網(wǎng)易娛樂也算是順勢自我宣傳了一把。
神還原武媚娘被剪胸真相
3.講個好故事,引發(fā)情感共鳴
不論H5的形式如何多變,有價值的內(nèi)容始終是第一位的。在有限的篇幅里,學會講故事,引發(fā)用戶的情感共鳴,將對內(nèi)容的傳播形成極大的推動。
LEVI’S新年優(yōu)惠活動專題頁以第一人稱的口吻,用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比,用手繪風渲染出親切的懷舊氛圍。最后引出“這個新年,把壓力和束縛打包扔掉,用新鮮的眼光感受生活,一起活出趣”的品牌推廣slogan,代入感極強的故事無疑是驅(qū)動分享的源動力。
levis新年活出趣
4.合理運用技術,打造流暢的互動體驗
隨著技術的發(fā)展,如今的HTML5擁有眾多出彩的特性,讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。(有興趣的話可以點擊這個網(wǎng)站 http://fff.cmiscm.com/幾乎有所有H5動態(tài)效果的展示)。相較于塞入各種不同種類的動效導致頁面混亂臃腫,我們更提倡的是合理運用技術,用心專注于為用戶提供流暢的互動體驗。
典型的案例是淘寶在雙12推出的預售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢,而頁面呈現(xiàn)出來的效果卻猶如一個流暢的動態(tài)GIF。設計師巧妙利用圖形設計與組合,在滑動過程中營造出一種豐富的視差滾動效果,單個圖形元素的遮罩、旋轉(zhuǎn)與整體頁面的動勢配合極為默契。
20秒,告訴你淘寶到底有多萬能
結(jié)語
隨著手機硬件的升級、HTML5技術的發(fā)展以及微信平臺的開放,HTML5的跨平臺、低成本、快迭代等優(yōu)勢被進一步凸顯,這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設計師和開發(fā)者來說,都將是一個好的時代。未來必將涌現(xiàn)更多優(yōu)秀的H5頁面,讓我們拭目以待。
網(wǎng)頁題目:H5專題頁面的4大類型
分享鏈接:http://m.rwnh.cn/news6/210956.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供微信公眾號、外貿(mào)網(wǎng)站建設、網(wǎng)頁設計公司、定制網(wǎng)站、域名注冊、云服務器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容