微信H5頁面制作流程，大家有哪些經(jīng)驗分享？
時間：2024-02-14 03:55:01 | 來源：網(wǎng)站運營
時間：2024-02-14 03:55:01 來源：網(wǎng)站運營
微信H5頁面制作流程，大家有哪些經(jīng)驗分享？：H5 現(xiàn)在已經(jīng)成了企業(yè)的常用微信營銷方式。我們能在各種微信朋友圈廣告植入、各路商家的促銷優(yōu)惠，甚至是公司的宣傳文案中看到H5作品的出現(xiàn)。
H5由于動畫效果豐富，非常適合電腦屏幕操作，因此受到很多人關注。
早期的H5作品制作成本非常高昂，一些廣告主的優(yōu)秀H5作品動輒百萬的制作費用，如今則由于一些第三方平臺的出現(xiàn)，制作變得越來越簡單，今天也主要跟大家分享下H5的制作流程。
首先大家要有一個概念，那就是H5更多的是為微信制作網(wǎng)頁，設計師只需要考慮怎么為手機屏幕進行頁面設計，而不需要考慮桌面端打開的效果。
所以對于H5作品而言，網(wǎng)頁足夠細致、足夠小、讓人印象深刻，反而對傳播更有利。
那么常見的H5制作流程包括下面幾個方向：
1、了解需求并確定表現(xiàn)形式不管是為自家企業(yè)做產(chǎn)品宣傳，還是為客戶制作H5，一定要先搞清楚為什么要做這個H5。因為每個項目追求的目的都不同。
比如有的是為了新品發(fā)布，也有的是為了品牌傳播。這里更多的是策劃層面上的話題，但一個H5能否成功，了解項目的真實需求是最重要的一步。
當我們了解的需求后，剩下的就是確定H5的表現(xiàn)形式，比如采用什么樣的動效，是否需要結合人臉融合、重力感應等高大上的功能等等。
因此這個環(huán)節(jié)更多的需要策劃人員和技術人員多溝通交流，也需要更多的頭腦風暴，所以這里是PPT大神以及腦圖工具的主場。
- MindManager
- 在線腦圖 百度腦圖
- 在線腦圖 MindPin
- freemind
2、確定設計表現(xiàn)恩，當你做了一個華麗的PPT并且有細分的腦圖細節(jié)后，會上你的方案讓甲方或者老板眼前一亮，領導決定這個作品交給你來執(zhí)行，這時候你需要進一步細化，并制定執(zhí)行計劃，設計活動流程。
接下來將進入產(chǎn)品原型設計環(huán)節(jié)，最重要的就是確定美術風格。
例如我們想做一個仿朋友圈的形式，那么就需要還原微信內部的UI細節(jié)，如果是要做個走心故事，那么插畫型的風格是最合適的。
除了美術風格外，設計師還需要確定什么樣的主題故事，尋找什么樣合適的配樂和聲效，搭配何種設計元素等等
在這個環(huán)節(jié)就需要設計師及團隊成員使用大量的工具來完成工作。
①首先，你需要跟產(chǎn)品去溝通活動頁面，為了讓產(chǎn)品理解自己的需求，你需要撰寫文檔然后設計原型。
- Axure
- Sketch
- 在線原型 墨刀
- 原型設計 摩客 mockplus
②下面就是進行字體設計、圖標設計、創(chuàng)意設計、文案設計、畫面設計等等細節(jié)。
創(chuàng)意設計網(wǎng)站
- 黃蜂網(wǎng)
- 愛果果
- 花瓣網(wǎng)
- 站酷
- UI設計網(wǎng)
字體
圖標
- Easyicon
- 阿里巴巴矢量圖標庫
- Findicons
畫面設計
Photoshop
Adobe Illustrator
人人秀
創(chuàng)客貼
圖好快：在線批量圖片壓縮
音效制作
Cubase
Pro Tools
Adobe Audition
FL STUDIO
動畫制作
草稿分鏡用 SAI
原畫用 PS 或者 SAI
逐幀繪畫用 PS 、SAI 或 Retas
藝術類電腦繪畫用 Painter
動背用 PS 、SAI 或者3D轉2D
后期合成用 AE
3、開發(fā)執(zhí)行前端后端：撰寫JavaScript／CSS／HTML代碼
后端代碼：PHP、Node.JS等
這么一來，一個標準的H5頁面制作流程就完成了，剩下的就是簡單的頁面測試，確保內容沒有BUG.
4、一鍵生成制作工具當然現(xiàn)在市場上還有很多第三方的H5制作工具，他們的原理和上述內容流程大同小異，區(qū)別只是 在于，網(wǎng)上生成的最終只是把這些步驟通過頁面自動幫你實現(xiàn)了。
包括人人秀、易企秀、MAKA、兔展等H5平臺都可以實現(xiàn)這些過程。
5、H5制作中的注意事項1、前期跟前端設計師進行溝通，討論頁面中元素的動效呈現(xiàn)。例如一些元素的位移，旋轉，翻轉，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。 (
http://fffNaNiscm.com 這個網(wǎng)站里有h5所能實現(xiàn)的效果)
2 、背景動效其實比較推薦緩動效果，如“京東管培生招聘”的例子里星空中一閃而過的流星，間歇性出現(xiàn)不搶主角風頭再好不過了.
3、復雜多變的動效不一定是好的，要考慮到加載速度等用戶體驗問題。
4、考慮到用戶使用場景的多樣性，那種介紹類的如果要加背景音樂，盡量不要太粗暴。有一點循序漸進最好，給用戶留時間在騷擾別人之前可以關閉。
或者可以在開始時是關閉狀態(tài)。但做游戲h5頁面的時候，音樂可以沒有關閉開啟按鈕，因為用戶對接下來發(fā)生的事是有預知的。
5、考慮每一頁音樂按鈕放置的明顯性。如果能用其他頁面元素去替代音樂符號作為按鈕也是極好的。
6、給前端設計師的音樂文件：格式為mp3等 ，單軌，最好30秒以內 。為了加載速度，文件大小盡量控制在：100k以內最佳，可以用Adobe Audition等軟件來壓縮。作為無限循環(huán)的背景音樂，截取時一定要注意頭尾得連接得上。
在線咨詢