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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

后端代碼：PHP、Node.JS等

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

4、H5制作中的注意事項

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

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

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

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

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

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

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

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

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

網(wǎng)頁題目：創(chuàng)新互聯(lián)：H5頁面制作經(jīng)驗分享
網(wǎng)站地址：http://www.js-pz168.com/news42/215192.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)網(wǎng)站制作、網(wǎng)站設計、網(wǎng)站維護、品牌網(wǎng)站設計、ChatGPT

廣告

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