H5開發(fā)制作流程是什么？

在一個(gè)完整的H5開發(fā)項(xiàng)目中，主要包含以下4個(gè)角色：

項(xiàng)目經(jīng)理、策劃、設(shè)計(jì)、開發(fā)。

△ H5制作角色及分工

那么在實(shí)際項(xiàng)目中該如何扮演好這些角色呢？

一、項(xiàng)目經(jīng)理

1. 對(duì)接需求，把控項(xiàng)目進(jìn)度

項(xiàng)目經(jīng)理是一個(gè)統(tǒng)籌全局的角色，當(dāng)有制作需求時(shí)，項(xiàng)目經(jīng)理會(huì)負(fù)責(zé)溝通對(duì)接。然后將需求傳達(dá)給負(fù)責(zé)項(xiàng)目的成員，同時(shí)把控整體項(xiàng)目進(jìn)度。首先從拆分需求講起，我們可以從 5WH 的維度拆分需求：

△ 5WH拆分需求

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

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

二、策劃

1. 構(gòu)思創(chuàng)意方案，產(chǎn)出交互原型

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

2. 工具

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

△ H5策劃常用工具

PPT

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

Keynote

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

Axure

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

墨刀

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

Word

可繪制原型，無(wú)法做鏈接跳轉(zhuǎn)，大多展示以文字為主。

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

△ 利用PPT進(jìn)行原型圖繪制

三、設(shè)計(jì)

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

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

• 認(rèn)真看完策劃，理清跳轉(zhuǎn)邏輯及需要設(shè)計(jì)的內(nèi)容，有問(wèn)題可分條列出發(fā)給項(xiàng)目經(jīng)理和策劃溝通并確認(rèn)具體內(nèi)容；

• 確認(rèn)設(shè)計(jì)風(fēng)格方向，在策劃出方案的時(shí)候，有些策劃會(huì)提供明確的視覺風(fēng)格方向，有些則是比較模糊的，如果是比較模糊，可以根據(jù)策劃提供適合的風(fēng)格方向供大家選擇，確認(rèn)后再開始動(dòng)手做設(shè)計(jì)。

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

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

同時(shí)很多同學(xué)對(duì) H5 設(shè)計(jì)尺寸還抱有疑惑，首先給大家看看這一年多我自己作圖尺寸的變化。

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

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

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

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

• 視覺還原度。

• 音效、動(dòng)效配合及實(shí)現(xiàn)。

• 體驗(yàn)是否流暢。

這是一個(gè)反復(fù)確認(rèn)的過(guò)程，當(dāng)一切準(zhǔn)備完畢，H5 就完成了，就可以靜靜等待上線。

不過(guò)，上線了就結(jié)束了嗎？

當(dāng)然不是，費(fèi)了這么大力氣做的 H5 上線就是結(jié)束，那豈不是太可惜。這個(gè)時(shí)候就要回到我之前提到的 5WH 中的 WHY：想要解決什么問(wèn)題，平臺(tái)導(dǎo)流或品牌營(yíng)銷？

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

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

通過(guò)對(duì)項(xiàng)目經(jīng)理、策劃、設(shè)計(jì)、開發(fā)四個(gè)角色進(jìn)行分析，我們可以得到下列圖表：

△ H5制作工作流程

看到這里，相信你對(duì) H5 的制作流程已經(jīng)有一定的了解，具體的工作流程和職能劃分也可結(jié)合自己的實(shí)際情況進(jìn)行調(diào)整。但是萬(wàn)變不離其宗，做任何項(xiàng)目都需要理清制作需求、把控好項(xiàng)目進(jìn)度、積極溝通反饋，更要學(xué)會(huì)總結(jié)復(fù)盤，對(duì)項(xiàng)目進(jìn)行回顧反思，總結(jié)經(jīng)驗(yàn)。

△ 摘自陳中《復(fù)盤》

一個(gè) H5 完整的制作流程講到這里就結(jié)束了，希望你看后能夠有所收獲。如果你是負(fù)責(zé)自家的產(chǎn)品，則需要在一開始就策劃好整個(gè)推廣流程。比如是單獨(dú)推 H5 還是結(jié)合活動(dòng)進(jìn)行推廣、什么時(shí)間推、推廣渠道等等，這些就需要更加詳細(xì)的策劃方案。

關(guān)于我們：

Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(wú)錫、廈門、重慶、西安等大中型城市及地區(qū)    為您提供：H5開發(fā)，小程序開發(fā)，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網(wǎng)站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設(shè)計(jì)、APP開發(fā)外包，UI設(shè)計(jì)，SEO優(yōu)化，視頻后期制作等優(yōu)質(zhì)服務(wù)