微信h5頁面應(yīng)用方案設(shè)計(jì)

　　篇一：用案例淺談微信傳播的H5頁面設(shè)計(jì)

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

　　功能與目標(biāo)

　　首先從功能與設(shè)計(jì)目標(biāo)來看， H5專題頁主要有以下4大類型：

　　1.活動(dòng)運(yùn)營型

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

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

　　2.品牌宣傳型

　　不同于講究時(shí)效性的活動(dòng)運(yùn)營頁，品牌宣傳型H5頁面等同于一個(gè)品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶傳達(dá)品牌的精神態(tài)度。在設(shè)計(jì)上需要運(yùn)用符合品牌氣質(zhì)的視覺語言，讓用戶對(duì)品牌留下深刻印象。

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

　　3.產(chǎn)品介紹型

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

　　篇二：如何制作一個(gè)微信H5頁面

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

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

　　工具/原料

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

　　方法/步驟：

　　登錄后臺(tái)后，點(diǎn)擊“創(chuàng)建傳單”，進(jìn)入模板選擇頁面

　　1．選擇空白樣板，自由創(chuàng)作；

　　2．選擇主題模板，快速創(chuàng)作。

　　選擇模板后，進(jìn)入制作頁面

　　預(yù)覽列表操作

　　1、長(zhǎng)按鼠標(biāo)左鍵移動(dòng)頁面調(diào)節(jié)順序

　　2、點(diǎn)擊頁面右側(cè)的三個(gè)選項(xiàng)可進(jìn)行添加、復(fù)制、刪除頁面的操作

　　功能—添加修改文字

　　1、添加文字：點(diǎn)擊頁面上方的`藝術(shù)字（或文本）選項(xiàng)/或點(diǎn)擊已有文本→在右側(cè)編輯欄會(huì)出現(xiàn)文字輸入框→單擊輸入

　　2、修改文字屬性：在右側(cè)編輯欄中修改選項(xiàng)，包括字體種類、大小、顏色、動(dòng)畫等等。

　　功能—添加修改圖片

　　1、上傳圖片：點(diǎn)擊模板圖片→右側(cè)更換圖片→上傳圖片

　　2、調(diào)節(jié)圖片：按住鼠標(biāo)左鍵拖動(dòng)圖片調(diào)節(jié)位置，拉動(dòng)圖片邊框調(diào)節(jié)大小

　　功能—添加修改圖冊(cè)

　　1、添加圖冊(cè)：點(diǎn)擊頁面正上方的控件→圖冊(cè)

　　2、修改圖冊(cè)：鼠標(biāo)停留在右側(cè)圖冊(cè)上→點(diǎn)擊更換圖片→上傳圖片

　　功能—修改動(dòng)畫效果

　　點(diǎn)擊元素→點(diǎn)擊右側(cè)的動(dòng)畫→選擇動(dòng)畫選項(xiàng)→調(diào)節(jié)動(dòng)畫速度、延遲

　　功能—添加視頻

　　1、找到控件—視頻，輸入視頻網(wǎng)址

　　功能—添加修改表單

　　1、添加：控件—表單→按加號(hào)可添加表單項(xiàng)

　　2、修改：點(diǎn)擊表單欄目→修改表單內(nèi)容、顏色、動(dòng)畫

　　功能—添加修改按鈕

　　1、添加：控件—按鈕

　　2、修改：點(diǎn)擊文本進(jìn)行修改→設(shè)置點(diǎn)擊跳轉(zhuǎn)到頁面、產(chǎn)品、鏈接、電話等

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

　　在微信H5頁面中，除了良好順暢的互動(dòng)體驗(yàn)之外，還需要一定的美感，也就是我們常說的視覺體驗(yàn)。今天，我們就來總結(jié)一下微信H5頁面設(shè)計(jì)中的五大視覺指引原則，幫助大家協(xié)調(diào)互動(dòng)與視覺之間的關(guān)系。

　　一、尊重視覺的主導(dǎo)地位

　　每個(gè)人首先都是視覺動(dòng)物，然后才是行為動(dòng)物，因此視覺才是H5頁面設(shè)計(jì)的主導(dǎo)，它能在不知不覺中影響著交互。另外，好的視覺設(shè)計(jì)能夠提升轉(zhuǎn)化率，激發(fā)用戶的購買欲。

　　二、提供清晰的操作指引

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

　　三、保證視覺統(tǒng)一

　　不只在視覺上，統(tǒng)一性在H5頁面設(shè)計(jì)中非常重要，它體現(xiàn)了頁面設(shè)計(jì)和排版的'邏輯性，也體現(xiàn)了色彩、元素的協(xié)調(diào)性，這樣都能讓用戶享受愉悅的視覺體驗(yàn)。

　　四、降低用戶學(xué)習(xí)成本

　　如今用戶對(duì)H5頁面設(shè)計(jì)模式已經(jīng)形成了一個(gè)熟悉的認(rèn)知，比如中心排版、翻轉(zhuǎn)動(dòng)畫、點(diǎn)擊跳轉(zhuǎn)等等，如果增加一些很陌生、另類的設(shè)計(jì)，就會(huì)增加用戶的學(xué)習(xí)成本，讓用戶的閱讀變得吃力。

　　五、通過風(fēng)格指南創(chuàng)造一致性

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

【微信h5頁面應(yīng)用方案設(shè)計(jì)】相關(guān)文章：

你知道微信頁面上為何站個(gè)孤獨(dú)的人嗎「圖」12-07

微信朋友圈活動(dòng)方案設(shè)計(jì)12-07

微課大賽的方案設(shè)計(jì)03-09

企業(yè)微博營銷方案設(shè)計(jì)論文12-09

我國橋梁進(jìn)行改造加固的方案設(shè)計(jì)和應(yīng)用論文11-21

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

母親節(jié)快樂頁面的制作步驟11-23

方案設(shè)計(jì)范文12-03

慰問方案設(shè)計(jì)11-30