【作者】你丫才美工

【來(lái)源】青瓜傳媒

【編輯】善小布

又到了

漲知識(shí)的時(shí)間啦

前幾天

一條H5廣告

猶如龍卷風(fēng)般

刮入了小花的朋友圈里

沒(méi)看過(guò)的朋友

↓↓↓

反正做人呢

最重要的是想開(kāi)點(diǎn)啦

對(duì)自己好一點(diǎn)~

這周還有另外一個(gè)H5也刷屏了朋友圈

點(diǎn)開(kāi)觀看以后

每一步的發(fā)展方向小花都心里有數(shù)

直到最后

才深覺(jué)滿滿的套路

上面兩個(gè)本周火爆H5

都是傳播性比較明顯的

能吸引發(fā)用戶的

好奇、窺探等心理來(lái)傳播

不管是形式上的還是內(nèi)容上

還是風(fēng)格上的都是很有創(chuàng)意的

同樣，還有一個(gè)互動(dòng)性的H5

人民日?qǐng)?bào)結(jié)合當(dāng)時(shí)的《戰(zhàn)狼2》的熱點(diǎn)

推出了一款互動(dòng)性H5

通過(guò)上傳照片更換軍裝的形式

勾起了人們窺探自己穿軍裝照片的欲望

然后大家紛紛轉(zhuǎn)發(fā)朋友圈

緊跟愛(ài)國(guó)主題背景下的風(fēng)潮

一個(gè)火爆的H5

它的設(shè)計(jì)流程非常重要

那么今天我們告訴大家

設(shè)計(jì)一個(gè)H5需要的

設(shè)計(jì)要點(diǎn)是哪些？

目前H5在設(shè)計(jì)方法上

可以籠統(tǒng)地劃分為三大類型

互動(dòng)廣告派

互聯(lián)網(wǎng)設(shè)計(jì)派

工具執(zhí)行派

H5的設(shè)計(jì)部分

只是整個(gè)流程中的其中一環(huán)

作為設(shè)計(jì)師的我們

需要了解整個(gè)流程，貫穿始終

作為一個(gè)好的H5會(huì)告訴你

它都經(jīng)歷了哪些環(huán)節(jié)？

涉及到哪些因素？

一、了解需求，選好方向

每一個(gè)H5的設(shè)計(jì)都是建立在具體需求之上的，當(dāng)你拿到需求是，需要先搞清楚做這個(gè)網(wǎng)站的目的是什么？每個(gè)項(xiàng)目追求的目的都不同。

騰訊通過(guò)“穿越故宮來(lái)看你”這個(gè)主題，出品了一支帶有調(diào)侃和穿越特征的古裝說(shuō)唱類H5。最初的項(xiàng)目訴求才是最后決定作品面貌的關(guān)鍵因素。

二、確定表現(xiàn)形式

H5的表現(xiàn)形式目前已經(jīng)非常多了，并且還在不斷創(chuàng)新，我們究竟選什么樣的表現(xiàn)形式好呢？

講故事賣(mài)情懷？

強(qiáng)調(diào)功能陳述內(nèi)容？

小游戲？

這是之前刷爆過(guò)朋友圈的吳亦凡系列H5作品，當(dāng)預(yù)算充足時(shí)，項(xiàng)目有需要借助明星效應(yīng)，我們可以采用拍攝視頻并且制作特效合成的方式來(lái)執(zhí)行項(xiàng)目。

三、設(shè)計(jì)風(fēng)格、表現(xiàn)形式

比如，你選擇了偽裝朋友圈的形式的話，那么你就要去研究怎么做出更像朋友圈的頁(yè)面，去研究微信內(nèi)部的UI細(xì)節(jié)，特別強(qiáng)調(diào)臨摹和還原。

從原型繪制、內(nèi)容表達(dá)、版式設(shè)計(jì)、文字設(shè)計(jì)、到最后的動(dòng)效聲效設(shè)計(jì)，一個(gè)完整的H5不是單純的視覺(jué)表現(xiàn)，還結(jié)合了聽(tīng)覺(jué)、交互這兩大類。需要我們跳出傳統(tǒng)式固有的設(shè)計(jì)框架，理解全新的媒介和方法。

四、開(kāi)發(fā)實(shí)現(xiàn)效果圖

很多人對(duì)H5制作望而卻步，大多數(shù)都是因?yàn)榭ㄔ谶@一步，不清楚H5怎么生成的。其實(shí)，主要的方法有兩種：

1、有代碼實(shí)現(xiàn)：設(shè)計(jì)文件打包–>前端工程師開(kāi)發(fā)–>作品上傳服務(wù)-上線。

2、無(wú)代碼實(shí)現(xiàn)：設(shè)計(jì)文件打包–>上傳-H5設(shè)計(jì)工具網(wǎng)站–>作品同步在工具服務(wù)器的上線。

不管是上面哪一種，都需要設(shè)計(jì)師清楚，想要做出的頁(yè)面效果，前段工程師才能確定是否能夠?qū)崿F(xiàn)出來(lái)。因此，這一步，溝通最重要。

五、數(shù)據(jù)成績(jī)單反映設(shè)計(jì)效果

你設(shè)計(jì)的創(chuàng)意和作品的表現(xiàn)形式好不好，推廣到不到位，時(shí)間點(diǎn)掌握得恰當(dāng)不恰當(dāng)…數(shù)據(jù)的成績(jī)單很快就能夠引導(dǎo)你接下來(lái)應(yīng)該怎么調(diào)整戰(zhàn)略和打法。

上面是騰訊出品的H5移動(dòng)頁(yè)面用戶報(bào)告，案例中詳細(xì)歸納了目前H5網(wǎng)站在數(shù)據(jù)方面的特征。

以上就是做好一個(gè)H5的5招，希望產(chǎn)品運(yùn)營(yíng)可以做出爆款H5（手動(dòng)微笑）