H5 現(xiàn)在已經(jīng)成了企業(yè)的常用微信營(yíng)銷方式。我們能在各種微信朋友圈廣告植入、各路商家的促銷優(yōu)惠，甚至是公司的宣傳文案中看到H5作品的出現(xiàn)。H5由于動(dòng)畫(huà)效果豐富，非常適合電腦屏幕操作，因此受到很多人關(guān)注。

早期的H5作品制作成本非常高昂，一些廣告主的優(yōu)秀H5作品動(dòng)輒百萬(wàn)的制作費(fèi)用，如今則由于一些第三方平臺(tái)的出現(xiàn)，制作變得越來(lái)越簡(jiǎn)單，今天就跟大家分享下H5頁(yè)面的制作一些經(jīng)驗(yàn)。

首先大家要有一個(gè)概念，那就是H5更多的是為微信制作網(wǎng)頁(yè)，設(shè)計(jì)師只需要考慮怎么為手機(jī)屏幕進(jìn)行頁(yè)面設(shè)計(jì)，而不需要考慮桌面端打開(kāi)的效果。所以對(duì)于H5作品而言，網(wǎng)頁(yè)足夠細(xì)致、足夠小、讓人印象深刻，反而對(duì)傳播更有利。那么常見(jiàn)的H5制作流程包括下面幾個(gè)方向：

1、了解需求并確定表現(xiàn)形式

企業(yè)不論做產(chǎn)品宣傳，還是為客戶提供服務(wù)，一定要先搞清楚為什么要做這個(gè)H5。因?yàn)槊總€(gè)項(xiàng)目追求的目的都不同。

比如有的是為了新品發(fā)布，也有的是為了品牌傳播。這里更多的是策劃層面上的話題，但一個(gè)H5能否成功，了解項(xiàng)目的真實(shí)需求是最重要的一步。

當(dāng)我們了解的需求后，剩下的就是確定H5的表現(xiàn)形式，比如采用什么樣的動(dòng)效，是否需要結(jié)合人臉融合、重力感應(yīng)等高大上的功能等等。

因此這個(gè)環(huán)節(jié)更多的需要策劃人員和技術(shù)人員多溝通交流，也需要更多的頭腦風(fēng)暴，所以這里是PPT大神以及腦圖工具的主場(chǎng)。

2、確定設(shè)計(jì)表現(xiàn)

當(dāng)我們做了一個(gè)華麗的PPT并且有細(xì)分的腦圖細(xì)節(jié)后，還需要進(jìn)一步細(xì)化，并制定執(zhí)行計(jì)劃，設(shè)計(jì)活動(dòng)流程。因此，接下來(lái)將進(jìn)入產(chǎn)品原型設(shè)計(jì)環(huán)節(jié)，最重要的就是確定美術(shù)風(fēng)格。

例如我們想做一個(gè)仿朋友圈的形式，那么就需要還原微信內(nèi)部的UI細(xì)節(jié)，如果是要做個(gè)走心故事，那么插畫(huà)型的風(fēng)格是最合適的。除了美術(shù)風(fēng)格外，設(shè)計(jì)師還需要確定什么樣的主題故事，尋找什么樣合適的配樂(lè)和聲效，搭配何種設(shè)計(jì)元素等等

在這個(gè)環(huán)節(jié)就需要設(shè)計(jì)師及團(tuán)隊(duì)成員使用大量的工具來(lái)完成工作。

①首先，需要跟產(chǎn)品去溝通活動(dòng)頁(yè)面，為了讓產(chǎn)品理解自己的需求，需要撰寫(xiě)文檔然后設(shè)計(jì)原型。

②下面就是進(jìn)行字體設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、創(chuàng)意設(shè)計(jì)、文案設(shè)計(jì)、畫(huà)面設(shè)計(jì)等等細(xì)節(jié)。

3、開(kāi)發(fā)執(zhí)行

前端后端：撰寫(xiě)JavaScript／CSS／HTML代碼

后端代碼：PHP、Node.JS等

這么一來(lái)，一個(gè)標(biāo)準(zhǔn)的H5頁(yè)面制作流程就完成了，剩下的就是簡(jiǎn)單的頁(yè)面測(cè)試，確保內(nèi)容沒(méi)有BUG。

4、H5制作中的注意事項(xiàng)

1、前期跟前端設(shè)計(jì)師進(jìn)行溝通，討論頁(yè)面中元素的動(dòng)效呈現(xiàn)。例如一些元素的位移，旋轉(zhuǎn)，翻轉(zhuǎn)，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。

2 、背景動(dòng)效其實(shí)比較推薦緩動(dòng)效果，如“京東管培生招聘”的例子里星空中一閃而過(guò)的流星，間歇性出現(xiàn)不搶主角風(fēng)頭再好不過(guò)了.

3、復(fù)雜多變的動(dòng)效不一定是好的，要考慮到加載速度等用戶體驗(yàn)問(wèn)題。

4、考慮到用戶使用場(chǎng)景的多樣性，那種介紹類的如果要加背景音樂(lè)，盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)好，給用戶留時(shí)間在騷擾別人之前可以關(guān)閉。

或者可以在開(kāi)始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁(yè)面的時(shí)候，音樂(lè)可以沒(méi)有關(guān)閉開(kāi)啟按鈕，因?yàn)橛脩魧?duì)接下來(lái)發(fā)生的事是有預(yù)知的。

5、考慮每一頁(yè)音樂(lè)按鈕放置的明顯性。如果能用其他頁(yè)面元素去替代音樂(lè)符號(hào)作為按鈕也是極好的。

6、給前端設(shè)計(jì)師的音樂(lè)文件：格式為mp3等 ，單軌，好30秒以內(nèi) 。為了加載速度，文件大小盡量控制在：100k以內(nèi)好，可以用Adobe Audition等軟件來(lái)壓縮。作為無(wú)限循環(huán)的背景音樂(lè)，截取時(shí)一定要注意頭尾得連接得上。

創(chuàng)新互聯(lián)是成都創(chuàng)新互聯(lián)科技有限公司的簡(jiǎn)稱，它區(qū)別于單一服務(wù)類型公司，兼具策略咨詢與數(shù)字化服務(wù)于一體，分別從企業(yè)戰(zhàn)略層、業(yè)務(wù)層、數(shù)據(jù)層、運(yùn)營(yíng)層、以及系統(tǒng)架構(gòu)層入手，幫助企業(yè)制定出符合自身發(fā)展的數(shù)字化轉(zhuǎn)型方案。

在定制化服務(wù)方面，創(chuàng)新互聯(lián)定制化平臺(tái)實(shí)施能力，能夠滿足客戶多終端、多系統(tǒng)平臺(tái)的定制需求。除此之外，創(chuàng)新互聯(lián)還為客戶提供業(yè)務(wù)調(diào)研，實(shí)施服務(wù)，項(xiàng)目管理服務(wù)，安全測(cè)試等全鏈條的服務(wù)。服務(wù)過(guò)程中，輕咨詢能力，幫助企業(yè)在業(yè)務(wù)搭建過(guò)程中發(fā)現(xiàn)建設(shè)障礙，專業(yè)技術(shù)服務(wù)能力，有效保證項(xiàng)目落地，降低企業(yè)的投資風(fēng)險(xiǎn)。

分享題目：創(chuàng)新互聯(lián)：H5頁(yè)面制作經(jīng)驗(yàn)分享
當(dāng)前URL：http://jinyejixie.com/news/215192.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)