微信h5頁面應用方案設計

　　篇一：用案例淺談微信傳播的H5頁面設計

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

　　功能與目標

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

　　1.活動運營型

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

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

　　2.品牌宣傳型

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

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

　　3.產品介紹型

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

　　篇二：如何制作一個微信H5頁面

　　現在，微信用戶越來越多，微信信息的形式和數量也不斷增多，要吸引用戶的眼光并不容易。不過，大家可以利用目前很受歡迎的H5頁面來進行內容展示，那么，如

　　何使用凡科微傳單在線制作一個微信H5頁面，它可以令我們輕松制作出高大上的H5頁面。

　　工具/原料

　　H5頁面制作素材，包括圖片、背景音樂、文案等

　　方法/步驟：

　　登錄后臺后，點擊“創建傳單”，進入模板選擇頁面

　　1．選擇空白樣板，自由創作；

　　2．選擇主題模板，快速創作。

　　選擇模板后，進入制作頁面

　　預覽列表操作

　　1、長按鼠標左鍵移動頁面調節順序

　　2、點擊頁面右側的三個選項可進行添加、復制、刪除頁面的操作

　　功能—添加修改文字

　　1、添加文字：點擊頁面上方的`藝術字（或文本）選項/或點擊已有文本→在右側編輯欄會出現文字輸入框→單擊輸入

　　2、修改文字屬性：在右側編輯欄中修改選項，包括字體種類、大小、顏色、動畫等等。

　　功能—添加修改圖片

　　1、上傳圖片：點擊模板圖片→右側更換圖片→上傳圖片

　　2、調節圖片：按住鼠標左鍵拖動圖片調節位置，拉動圖片邊框調節大小

　　功能—添加修改圖冊

　　1、添加圖冊：點擊頁面正上方的控件→圖冊

　　2、修改圖冊：鼠標停留在右側圖冊上→點擊更換圖片→上傳圖片

　　功能—修改動畫效果

　　點擊元素→點擊右側的動畫→選擇動畫選項→調節動畫速度、延遲

　　功能—添加視頻

　　1、找到控件—視頻，輸入視頻網址

　　功能—添加修改表單

　　1、添加：控件—表單→按加號可添加表單項

　　2、修改：點擊表單欄目→修改表單內容、顏色、動畫

　　功能—添加修改按鈕

　　1、添加：控件—按鈕

　　2、修改：點擊文本進行修改→設置點擊跳轉到頁面、產品、鏈接、電話等

　　篇三：微信H5頁面的五大視覺體驗原則[凡科微傳單]

　　在微信H5頁面中，除了良好順暢的互動體驗之外，還需要一定的美感，也就是我們常說的視覺體驗。今天，我們就來總結一下微信H5頁面設計中的五大視覺指引原則，幫助大家協調互動與視覺之間的關系。

　　一、尊重視覺的主導地位

　　每個人首先都是視覺動物，然后才是行為動物，因此視覺才是H5頁面設計的主導，它能在不知不覺中影響著交互。另外，好的視覺設計能夠提升轉化率，激發用戶的購買欲。

　　二、提供清晰的操作指引

　　雖然對于一般的微信H5來說，每個頁面的切換都會有一個清晰的箭頭作為引導，但是如果是需要用戶做出額外的點擊、滑動才能跳到另一個頁面的話，就必須給出一個清晰的操作指引，完善用戶體驗。

　　三、保證視覺統一

　　不只在視覺上，統一性在H5頁面設計中非常重要，它體現了頁面設計和排版的'邏輯性，也體現了色彩、元素的協調性，這樣都能讓用戶享受愉悅的視覺體驗。

　　四、降低用戶學習成本

　　如今用戶對H5頁面設計模式已經形成了一個熟悉的認知，比如中心排版、翻轉動畫、點擊跳轉等等，如果增加一些很陌生、另類的設計，就會增加用戶的學習成本，讓用戶的閱讀變得吃力。

　　五、通過風格指南創造一致性

　　確定了H5頁面的風格之后，那么頁面中的元素、尺寸、字體、顏色等各個方面都可以先圍繞這個風格進行設計，最后再使用拼湊手法來將他們組合、搭配在一起，這樣可以保證頁面風格的一致性。

【微信h5頁面應用方案設計】相關文章：

你知道微信頁面上為何站個孤獨的人嗎「圖」12-07

微信朋友圈活動方案設計12-07

微課大賽的方案設計03-09

企業微博營銷方案設計論文12-09

我國橋梁進行改造加固的方案設計和應用論文11-21

頁面訪問緊急通知書03-10

母親節快樂頁面的制作步驟11-23

方案設計范文12-03

慰問方案設計11-30