微信公眾平臺H5杭州網(wǎng)頁設計頁面解析---從引爆朋友圈的H5小游戲《圍住神經(jīng)貓》,到顛覆傳統(tǒng)廣告的大眾點評H5專題頁《我們之間只有一個字》,從2014下半年起,各種H5游戲和專題頁紛紛嶄露頭角?!癏5”,這個由HTML5簡化而來的詞匯,借由微信這個移動社交平臺,正在走進更多人的視野。蒙特也為很多客戶設計了很多精美的H5頁面,所以今天基于微信傳播的H5頁面的視覺設計,通過一些案例分析來談談設計思路與方法,希望能給想要做H5頁面的客戶一點幫助。
首先從功能與設計目標來看, H5專題頁主要有以下4大類型:
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型,形式多變,包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態(tài)廣告圖片傳播不同,如今的H5活動運營頁需要有更強的互動、更高質(zhì)量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最后落地到品牌App內(nèi)部,如何設計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同于講究時效性的活動運營頁,品牌宣傳型H5頁面等同于一個品牌的微官網(wǎng),更傾向于品牌形象塑造,向用戶傳達品牌的精神態(tài)度。在網(wǎng)站設計上需要運用符合品牌氣質(zhì)的視覺語言,讓用戶對品牌留下深刻印象。
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹,運用H5的互動技術優(yōu)勢盡情展示產(chǎn)品特性,吸引用戶買買買。
4.總結報告型
自從支付寶的十年賬單引發(fā)熱議后,各大企業(yè)的年終總結現(xiàn)也熱衷于用H5技術實現(xiàn),優(yōu)秀的互動體驗令原本乏味的總結報告有趣生動了起來。
二.形式為功能服務
在確定了專題頁的功能目標之后,接下來就是關鍵的設計階段了。如何有的放矢地進行設計,需要考慮到具體的應用場景和傳播對象,從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會去分享的。以下列舉幾種常見的H5專題頁表現(xiàn)形式:
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變?nèi)f化,可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作,起到類似幻燈片的傳播效果??简灥氖歉哔|(zhì)量的內(nèi)容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺,抓住這一心理,品牌推出了各種H5形式的禮物、賀卡、邀請函,通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物,那創(chuàng)意和制作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了,微網(wǎng)站建設利用用戶的求知欲和探索欲,一路選選選,看最后到底是什么成績。一條清晰的線索是必要的,最后到達的結果頁也需要合理不突兀,如果能輔以出彩的視覺和文案,弱化答題的枯燥感那就再好不過了。
4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到 “別踩白塊兒”等品牌植入式小游戲,H5游戲因為操作簡單、競技性強,一度風靡朋友圈,但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播,需要在玩法和設計上多下點功夫。
隨著手機硬件的升級、HTML5技術的發(fā)展以及微信公眾平臺開放,HTML5的跨平臺、低成本、快迭代等優(yōu)勢被進一步凸顯,這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設計師和開發(fā)者來說,都將是一個最好的時代。未來蒙特也必將涌現(xiàn)更多優(yōu)秀的H5頁面,讓我們拭目以待。
©2000-2022 杭州蒙特信息技術有限公司版權所有
Mountor、蒙特是Mountor Corp.的注冊商標。