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

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

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

1、了解需求并確定表現形式

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

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

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

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

2、確定設計表現

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

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

在這個環節就需要設計師及團隊成員使用大量的工具來完成工作。

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

②下面就是進行字體設計、圖標設計、創意設計、文案設計、畫面設計等等細節。

3、開發執行

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

后端代碼：PHP、Node.JS等

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

4、H5制作中的注意事項

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

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

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

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

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

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

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

創新互聯是成都創新互聯科技有限公司的簡稱，它區別于單一服務類型公司，兼具策略咨詢與數字化服務于一體，分別從企業戰略層、業務層、數據層、運營層、以及系統架構層入手，幫助企業制定出符合自身發展的數字化轉型方案。

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

分享題目：創新互聯：H5頁面制作經驗分享
文章URL：http://m.newbst.com/news42/215192.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、用戶體驗、標簽優化、網站建設、手機網站建設、微信公眾號

廣告

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