近幾年,H5快速普及,應(yīng)用于節(jié)日和一些品牌活動(dòng)營銷場景。為什么大家會(huì)選擇使用H5作為營銷傳播方式呢?
1 在線互動(dòng),提高品牌曝光率,為在線平臺(tái)或?qū)n}活動(dòng)導(dǎo)流
2 樹立品牌形象,提高用戶粘性和關(guān)注度
3 搭建跨平臺(tái)系統(tǒng),打破android和iOS的系統(tǒng)壁壘,快速傳播
如果你或你的公司也想做一個(gè)H5,該如何下手呢?
今天九九將從角色分工的角度帶你了解H5制作的制作流程
在一個(gè)完整的H5制作項(xiàng)目中,主要包含以下4個(gè)角色
項(xiàng)目經(jīng)理、策劃、設(shè)計(jì)、開發(fā)
△H5制作角色及分工
那么在實(shí)際項(xiàng)目中該如何扮演好這些角色呢?
一、項(xiàng)目經(jīng)理
對(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拆分需求
該維度同時(shí)適用于策劃、設(shè)計(jì)、開發(fā)
通過這6個(gè)維度,項(xiàng)目經(jīng)理在此基礎(chǔ)上了解到具體需求,同時(shí)規(guī)劃好項(xiàng)目周期,安排好時(shí)間節(jié)點(diǎn),對(duì)項(xiàng)目進(jìn)行把控。在項(xiàng)目的過程中,項(xiàng)目經(jīng)理應(yīng)積極與策劃、設(shè)計(jì)、開發(fā)溝通,協(xié)調(diào)好上下游,推動(dòng)項(xiàng)目的進(jìn)度、做好項(xiàng)目管理、完成項(xiàng)目目標(biāo)。
二、策劃
構(gòu)思創(chuàng)意方案,產(chǎn)出交互原型
項(xiàng)目經(jīng)理溝通好需求后會(huì)傳達(dá)給策劃,策劃即可根據(jù)需求,開始進(jìn)行方案制作。常規(guī)項(xiàng)目中,策劃可先提供幾個(gè)方向供大家選擇。選定一個(gè)方向后,策劃再對(duì)方案進(jìn)行細(xì)化。
策劃在制作的過程中,常使用下列工具:
△H5策劃常用工具
PPT
windows最常用的演示軟件,可進(jìn)行利用矩形、線條等工具繪制基礎(chǔ)原型。同時(shí)利用文本工具進(jìn)行標(biāo)注,超鏈接和動(dòng)畫進(jìn)行動(dòng)畫演示。但是交互說明大多以文字的形式呈現(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
可繪制原型,無法做鏈接跳轉(zhuǎn),大多展示以文字為主。
在常規(guī)的制作中,H5策劃更多的是以PPT作為工具進(jìn)行繪制原型,因?yàn)?strong>H5對(duì)原型圖的需求并不高,而PPT上手簡單、便于演示和修改。但是當(dāng)H5設(shè)計(jì)邏輯較為復(fù)雜對(duì)原型圖要求較高時(shí),可優(yōu)先考慮使用axure、墨刀進(jìn)行繪制,方便與設(shè)計(jì)及開發(fā)演示及溝通。還有一些H5是純動(dòng)畫展示,就需要策劃出分鏡腳本,這時(shí)候就需要和設(shè)計(jì)配合輸出方案,不過如果要求不高,也可以找一些相關(guān)的圖進(jìn)行替代,重要還是闡述清楚想表達(dá)的思路。策劃在創(chuàng)意輸出的時(shí)候,需要和設(shè)計(jì)、開發(fā)積極溝通,比如場景如何構(gòu)思展示,技術(shù)上是否能夠?qū)崿F(xiàn),這樣才能夠確保后續(xù)方案的落地。
△利用PPT進(jìn)行原型圖繪制
三、設(shè)計(jì)
根據(jù)方案,進(jìn)行視覺實(shí)現(xiàn)
當(dāng)方案確認(rèn)后,就是設(shè)計(jì)開始執(zhí)行。一般H5設(shè)計(jì)根據(jù)需求來大致分為插畫、真人合成、視頻、3D四個(gè)方向(個(gè)人分類,僅供參考)。但是很多人接到需求就不知道如何下手了,那么你需要先做2點(diǎn):
1 認(rèn)真看完策劃,理清跳轉(zhuǎn)邏輯及需要設(shè)計(jì)的內(nèi)容,有問題可分條列出發(fā)給項(xiàng)目經(jīng)理和策劃溝通并確認(rèn)具體內(nèi)容;
2 確認(rèn)設(shè)計(jì)風(fēng)格方向,在策劃出方案的時(shí)候,有些策劃會(huì)提供明確的視覺風(fēng)格方向,有些則是比較模糊的,如果是比較模糊,可以根據(jù)策劃提供適合的風(fēng)格方向供大家選擇,確認(rèn)后再開始動(dòng)手做設(shè)計(jì)。
在做的過程中一定不要盲目做也不要一次性做完全部的頁面,正確的做法是先溝通確認(rèn)需求,然后出demo確認(rèn)風(fēng)格再進(jìn)行下一步,這樣可提高整體的工作效率。demo可以選擇首頁或較為重要的頁面優(yōu)先進(jìn)行視覺設(shè)計(jì)。設(shè)計(jì)風(fēng)格上要契合產(chǎn)品調(diào)性和受眾喜好,同時(shí)也需要考慮公司品牌文化展示的一些需求。
除了視覺的展示,一個(gè)優(yōu)秀的H5還包含動(dòng)效和音樂。動(dòng)效部分如果非視頻植入,建議繪制逐幀給到開發(fā)實(shí)現(xiàn),繪制也需和開發(fā)提前溝通實(shí)現(xiàn)效果。如果頁面動(dòng)畫的呈現(xiàn)是由設(shè)計(jì)師自己把控,那么在設(shè)計(jì)結(jié)束后,建議撰寫動(dòng)畫頁面展示效果說明,一起交給開發(fā),避免反復(fù)的溝通。
同時(shí)很多同學(xué)對(duì)H5設(shè)計(jì)尺寸還抱有疑惑,首先給大家看看這一年多我自己作圖尺寸的變化。
最開始我的制作尺寸是640*1008PX,后來為了適應(yīng)全面屏設(shè)計(jì)尺寸改為640*1240PX,安全高度為1040PX,安全高度之外的畫僅為主體畫面的延伸。很多人會(huì)想問UI一般不是按照iPhone6設(shè)計(jì)尺寸(750*1334PX)來進(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ā)過程這里不作過多描述。當(dāng)制作完成,大家可以一起進(jìn)行測(cè)試。測(cè)試維度主要是以下三個(gè)方面:
1 視覺還原度
2 音效、動(dòng)效配合及實(shí)現(xiàn)
3 體驗(yàn)是否流暢
這是一個(gè)反復(fù)確認(rèn)的過程,當(dāng)一切準(zhǔn)備完畢,H5就完成了,就可以靜靜等待上線。
不過,上線了就結(jié)束了嗎?
當(dāng)然不是,費(fèi)了這么大力氣做的H5上線就是結(jié)束,那豈不是太可惜。這個(gè)時(shí)候就要回到我之前提到的5WH中的WHY:想要解決什么問題,平臺(tái)導(dǎo)流or品牌營銷?
所以上線后還需要對(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ù)分析截圖
通過對(duì)項(xiàng)目經(jīng)理、策劃、設(shè)計(jì)、開發(fā)
四個(gè)角色進(jìn)行分析,我們可以得到下列圖表:
△H5制作工作流程
看到這里,相信你對(duì)H5的制作流程已經(jīng)有一定的了解,具體的工作流程和職能劃分也可結(jié)合自己的實(shí)際情況進(jìn)行調(diào)整。但是萬變不離其宗,做任何項(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ì)的策劃方案。而今天九九講述的只是針對(duì)在H5制作這個(gè)部分的流程,希望你看后能夠有所收獲。
寫在后面:
寫這篇文章算是這一年多接觸的一些項(xiàng)目的總結(jié),最大的收獲是作為新人的我能夠接觸不同的項(xiàng)目,嘗試不同的風(fēng)格,同時(shí)也認(rèn)識(shí)了很多朋友。即使所產(chǎn)出的不夠好,但是還是希望能夠?qū)⒆约旱囊恍┙?jīng)驗(yàn)和一些思考分享給大家。也希望在以后的日子里,能夠不忘初心,好好努力。如果你是一位UI設(shè)計(jì)師,其實(shí)不難看出,這和我們負(fù)責(zé)的項(xiàng)目流程類似,所以工作其實(shí)就是一個(gè)舉一反三且不斷學(xué)習(xí)的過程,建立系統(tǒng)的流程、規(guī)范工作流程有助于你更好的推動(dòng)工作開展。
如果有文章中你有疑惑的地方,可以給我留言,如果有問題,請(qǐng)多指正。