創(chuàng)新互聯(lián)：H5頁面制作經(jīng)驗分享

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前端后端：撰寫JavaScript／CSS／HTML代碼

后端代碼：PHP、Node.JS等

這么一來，一個標(biāo)準的H5頁面制作流程就完成了，剩下的就是簡單的頁面測試，確保內(nèi)容沒有BUG。

4、H5制作中的注意事項

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

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

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

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

或者可以在開始時是關(guān)閉狀態(tài)。但做游戲h5頁面的時候，音樂可以沒有關(guān)閉開啟按鈕，因為用戶對接下來發(fā)生的事是有預(yù)知的。

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

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

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

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

分享題目：創(chuàng)新互聯(lián)：H5頁面制作經(jīng)驗分享
文章URL：http://www.bm7419.com/news42/215192.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、用戶體驗、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、微信公眾號

廣告

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