編者按：本文的亮點是結合了今年最熱的H5案例，且附上微信號供掃描體驗，@騰訊ISUX 將微信案例分門別類，通過它們深入淺出談談設計思路與方法 >>>

　　從引爆朋友圈的H5小游戲《圍住神經貓》，到顛覆傳統廣告的大眾點評H5專題頁《我們之間只有一個字》，從2014下半年起，各種H5游戲和專題頁紛紛嶄露頭角。“H5”，這個由HTML5簡化而來的詞匯，借由微信這個移動社交平臺，正在走進更多人的視野。本文聚焦于基于微信傳播的H5頁面的視覺設計，通過一些案例分析來談談設計思路與方法，希望與大家進行交流探討。

　　功能與目標

　　首先從功能與設計目標來看， H5專題頁主要有以下4大類型：

　　一、活動運營型

　　為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最后落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。

　　大眾點評為電影《狂怒》設計的推廣頁便深諳此道。復古擬物風格的視覺設計讓人眼前一亮，富有質感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點一遍。圍繞“選擇”這個品牌關鍵詞，用引人入勝的測試題讓用戶把人生當作大片來選擇，選到最后一題引出“大眾點評選座看電影”，一鍵直達App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯，這個頁面有點diao噢”的心情點擊了分享。

　　二、品牌宣傳型

　　不同于講究時效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網，更傾向于品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。

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

　　三、產品介紹型

　　聚焦于產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。

　　這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優秀代表案例。精致和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。

　　四、總結報告型

　　自從支付寶的十年賬單引發熱議后，各大企業的年終總結現也熱衷于用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。