近幾年，H5 快速普及，應用于節(jié)日和一些品牌活動營銷場景。為什么大家會選擇使用 H5 作為營銷傳播方式呢？

• 在線互動，提高品牌曝光率，為在線平臺或專題活動導流。
• 樹立品牌形象，提高用戶粘性和關注度。
• 搭建跨平臺系統(tǒng)，打破 android 和 iOS 的系統(tǒng)壁壘，快速傳播。

如果你或你的公司也想做一個 H5，該如何下手呢？

今天九九將從角色分工的角度帶你了解 H5 制作的制作流程。

在一個完整的H5制作項目中，主要包含以下4個角色：

項目經理、策劃、設計、開發(fā)。

△ H5制作角色及分工

那么在實際項目中該如何扮演好這些角色呢？

一、項目經理

1. 對接需求，把控項目進度

項目經理是一個統(tǒng)籌全局的角色，當有制作需求時，項目經理會負責溝通對接。然后將需求傳達給負責項目的成員，同時把控整體項目進度。首先從拆分需求講起，我們可以從 5WH 的維度拆分需求：

△ 5WH拆分需求

2. 該維度同時適用于策劃、設計、開發(fā)

通過這6個維度，項目經理在此基礎上了解到具體需求，同時規(guī)劃好項目周期，安排好時間節(jié)點，對項目進行把控。在項目的過程中，項目經理應積極與策劃、設計、開發(fā)溝通，協(xié)調好上下游，推動項目的進度、做好項目管理、完成項目目標。

二、策劃

1. 構思創(chuàng)意方案，產出交互原型

項目經理溝通好需求后會傳達給策劃，策劃即可根據(jù)需求，開始進行方案制作。常規(guī)項目中，策劃可先提供幾個方向供大家選擇。選定一個方向后，策劃再對方案進行細化。

2. 工具

策劃在制作的過程中，常使用下列工具：

△ H5策劃常用工具

PPT

windows 最常用的演示軟件，可利用矩形、線條等工具繪制基礎原型。同時利用文本工具進行標注，超鏈接和動畫進行動畫演示。但是交互說明大多以文字的形式呈現(xiàn)，制作 H5 觸發(fā)跳轉動畫不方便。

Keynote

Mac 系統(tǒng)的演示軟件，和 PPT 類似，但是兼容是雞肋，僅支持 MAC 系統(tǒng)。

Axure

專業(yè)的原型繪制工具，可進行原型繪制，建立 H5 交互，同時可以共享演示。但是不便于其他成員批注及修改，對于新手有一定的學習成本。

墨刀

在線原型設計與協(xié)同工具，共享演示便利，同樣和 axure 一樣有一定的學習成本。

Word

可繪制原型，無法做鏈接跳轉，大多展示以文字為主。

在常規(guī)的制作中，H5 策劃更多的是以 PPT 作為工具進行繪制原型，因為 H5 對原型圖的需求并不高，而 PPT 上手簡單、便于演示和修改。但是當 H5 設計邏輯較為復雜對原型圖要求較高時，可優(yōu)先考慮使用 axure、墨刀進行繪制，方便與設計及開發(fā)演示溝通。還有一些 H5 是純動畫展示，就需要策劃出分鏡腳本，這時候就需要和設計配合輸出方案，不過如果要求不高，也可以找一些相關的圖進行替代，重要還是闡述清楚想表達的思路。策劃在創(chuàng)意輸出的時候，需要和設計、開發(fā)積極溝通，比如場景如何構思展示，技術上是否能夠實現(xiàn)，這樣才能夠確保后續(xù)方案的落地。

△ 利用PPT進行原型圖繪制

三、設計

1. 根據(jù)方案，進行視覺實現(xiàn)

當方案確認后，就是設計開始執(zhí)行。一般 H5 設計根據(jù)需求來大致分為插畫、真人合成、視頻、3D 四個方向（個人分類，僅供參考）。但是很多人接到需求就不知道如何下手了，那么你需要先做2點：

• 認真看完策劃，理清跳轉邏輯及需要設計的內容，有問題可分條列出發(fā)給項目經理和策劃溝通并確認具體內容；
• 確認設計風格方向，在策劃出方案的時候，有些策劃會提供明確的視覺風格方向，有些則是比較模糊的，如果是比較模糊，可以根據(jù)策劃提供適合的風格方向供大家選擇，確認后再開始動手做設計。

在做的過程中一定不要盲目做也不要一次性做完全部的頁面，正確的做法是先溝通確認需求，然后出 demo 確認風格再進行下一步，這樣可提高整體的工作效率。demo 可以選擇首頁或較為重要的頁面優(yōu)先進行視覺設計。設計風格上要契合產品調性和受眾喜好，同時也需要考慮公司品牌文化展示的一些需求。

除了視覺的展示，一個優(yōu)秀的 H5 還包含動效和音樂。動效部分如果非視頻植入，建議繪制逐幀給到開發(fā)實現(xiàn)，繪制也需和開發(fā)提前溝通實現(xiàn)效果。如果頁面動畫的呈現(xiàn)是由設計師自己把控，那么在設計結束后，建議撰寫動畫頁面展示效果說明，一起交給開發(fā)，避免反復的溝通。

同時很多同學對 H5 設計尺寸還抱有疑惑，首先給大家看看這一年多我自己作圖尺寸的變化。

最開始我的制作尺寸是640*1008PX，后來為了適應全面屏設計尺寸改為640*1240PX，安全高度為1040PX，安全高度之外的畫僅為主體畫面的延伸。很多人會想問 UI 一般不是按照iPhone6設計尺寸（750*1334PX）來進行設計嗎？是的，你也可以使用該尺寸。其實對于尺寸沒有定論，很多公司也用 iPhone6 或 X 的尺寸進行設計，這些可以和開發(fā)溝通根據(jù)實際情況進行設計。

隨著科技不斷發(fā)展，智能設備不斷更新，設計尺寸還是會變的，所以需要與時俱進。

四、開發(fā)、測試、上線、數(shù)據(jù)監(jiān)控反饋

設計稿確認后就需要交付給技術進行開發(fā)，開發(fā)過程這里不作過多描述。當制作完成，大家可以一起進行測試。測試維度主要是以下三個方面：

• 視覺還原度。
• 音效、動效配合及實現(xiàn)。
• 體驗是否流暢。

這是一個反復確認的過程，當一切準備完畢，H5 就完成了，就可以靜靜等待上線。

不過，上線了就結束了嗎？

當然不是，費了這么大力氣做的 H5 上線就是結束，那豈不是太可惜。這個時候就要回到我之前提到的 5WH 中的 WHY：想要解決什么問題，平臺導流或品牌營銷？

所以上線后還需要對 H5 數(shù)據(jù)監(jiān)測，了解該 H5 的打開率、轉換率等，對用戶的行為數(shù)據(jù)進行一個分析。 在開發(fā)時需要對 H5 埋點，一般可以選擇 CNZZ友盟、神策等在線工具。當整個活動結束后，可對數(shù)據(jù)進行分析復盤是否達到最開始我們提到的 why，是否達到最開始策劃的預期。

△ 友盟平臺數(shù)據(jù)分析截圖

通過對項目經理、策劃、設計、開發(fā)四個角色進行分析，我們可以得到下列圖表：

△ H5制作工作流程

看到這里，相信你對 H5 的制作流程已經有一定的了解，具體的工作流程和職能劃分也可結合自己的實際情況進行調整。但是萬變不離其宗，做任何項目都需要理清制作需求、把控好項目進度、積極溝通反饋，更要學會總結復盤，對項目進行回顧反思，總結經驗。

△ 摘自陳中《復盤》

一個 H5 完整的制作流程講到這里就結束了，希望你看后能夠有所收獲。如果你是負責自家的產品，則需要在一開始就策劃好整個推廣流程。比如是單獨推 H5 還是結合活動進行推廣、什么時間推、推廣渠道等等，這些就需要更加詳細的策劃方案。而今天九九講述的只是針對在 H5 制作這個部分的流程，希望你看后能夠有所收獲。

「H5設計好文」

• 《H5玩法知多少？騰訊超多實戰(zhàn)案例讓你大開眼界！》
• 《新人想要入場視頻類H5 設計？你需要了解這些》
• 《讓H5不止于自嗨！打造一款百萬級傳播HTML 5的技巧（附案例）》