域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：

1、幻燈片式玩法

以下這個(gè)特斯拉的例子相信很多人都看過，精美的圖片設(shè)計(jì)+簡(jiǎn)單的翻頁效果，在我的印象中大概3、4月份看到特斯拉這個(gè)H5的時(shí)候，大家還不知道原來微信營(yíng)銷可以這么玩，記得那時(shí)候我們看到之后就在一周內(nèi)做了一個(gè)類似的H5，用于STC的品牌展示。當(dāng)然，在這之后H5就千樹萬樹梨花開了。

這是H5最早期也是最典型的玩法，因?yàn)楹?jiǎn)單、實(shí)用，所以至今還很流行。其效果就是簡(jiǎn)單的圖片展示&翻頁交互，最終整體的表現(xiàn)很像幻燈片展示。

其實(shí)幻燈片式的H5現(xiàn)在已經(jīng)出現(xiàn)了很多在線制作軟件供大家使用，所以制作成本在現(xiàn)在看來幾乎是等于零的，而在之前這樣一個(gè)應(yīng)用的開發(fā)可能要將近一萬（再一次見證了互聯(lián)網(wǎng)思維的破壞力）。當(dāng)然啦，這對(duì)于品牌主來說是一個(gè)好事，因?yàn)楹芏鄷r(shí)候這種簡(jiǎn)單的展示已經(jīng)能滿足需求了，不需要花不必要的錢。

★ 應(yīng)用場(chǎng)景

由于制作簡(jiǎn)單，周期短，這種H5展現(xiàn)形式適用于頻繁、小型的需求。用在線編輯器的話，不需要任何開發(fā)，你只需要要配備一名設(shè)計(jì)和文案。

總結(jié)得不全，幻燈片式H5可能有以下的應(yīng)用場(chǎng)景：

1、定期發(fā)布的內(nèi)容，幾乎零預(yù)算。這些內(nèi)容相對(duì)而言比較常規(guī)，但是有時(shí)微信圖文又無法達(dá)到理想的效果，通過H5的形式會(huì)更易于傳播，當(dāng)然前提是要有好的設(shè)計(jì)。比如數(shù)據(jù)報(bào)告、頻繁上線的新產(chǎn)品或功能、小型線下活動(dòng)邀請(qǐng)、活動(dòng)相冊(cè)等等。

2、結(jié)合熱點(diǎn)的營(yíng)銷，周期極短。這種情況下，時(shí)效性是非常重要的，如果開發(fā)一個(gè)H5用了半個(gè)月，熱點(diǎn)想必也結(jié)冰了。所以，應(yīng)該以最快的速度推出才是明智的選擇，而這時(shí)候引起廣泛傳播的關(guān)鍵就在于文案和設(shè)計(jì)。

此外，大家不要輕視這種短頻快的傳播，有時(shí)候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點(diǎn)，所以一次大投入的傳播不一定就能出效果，但是多次熱點(diǎn)傳播出效果的概率從統(tǒng)計(jì)學(xué)的角度也要高一些。如上文所述，我們可以實(shí)現(xiàn)用戶在H5中所有交互行為的監(jiān)測(cè)，因此，如果短頻快的傳播能配合有效的數(shù)據(jù)監(jiān)測(cè)，便可以進(jìn)行持續(xù)優(yōu)化，降低不確定性。

2、交互式動(dòng)畫

可口可樂這個(gè)案例在之前的風(fēng)云榜中推薦過，是運(yùn)用H5繪圖功能的典型例子。當(dāng)然這里面的交互還是比較簡(jiǎn)單的，只不過它基本體現(xiàn)了交互式動(dòng)畫的感覺。整個(gè)可口可樂的時(shí)間軸是隨著用戶向上滑動(dòng)頁面「繪制」出來的。

其實(shí)除了這種敘事型的H5動(dòng)畫，我們能看到的大多數(shù)H5游戲也都都屬于這一類，比如神經(jīng)貓、打企鵝、2048等等。最近也有一個(gè)比較火的H5游戲叫「財(cái)務(wù)包子鋪」，在這個(gè)游戲中用戶扮演包子鋪的創(chuàng)業(yè)老板，在事業(yè)發(fā)展的不同階段做出經(jīng)營(yíng)決策，最終登上人生巔峰。雖然游戲中植入了*裸的產(chǎn)品推廣（知乎的一本新書），但最后還是取得了3天破300萬PV的成績(jī)。

這些類型各異的H5應(yīng)用，本質(zhì)上都是基于H5的動(dòng)畫技術(shù)做的。它們所涉及的相關(guān)動(dòng)畫技術(shù)主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的動(dòng)畫效果還是用JS實(shí)現(xiàn)的，實(shí)現(xiàn)的效果類似PPT中的動(dòng)畫功能，只能實(shí)現(xiàn)元素的平移、旋轉(zhuǎn)、隱現(xiàn)等等。事實(shí)上通過JS+Canvas/SVG+CSS3可以實(shí)現(xiàn)非常復(fù)雜的交互式動(dòng)畫，最直觀的就是H5游戲，比如神經(jīng)貓，還有上文提到的3D版坦克大戰(zhàn)。

那么，H5到底能實(shí)現(xiàn)什么樣的動(dòng)畫效果呢？我想這應(yīng)該是大家在做H5時(shí)最頭疼的問題，因?yàn)椴恢滥茏龀墒裁礃?，你也就不知道從何下手。所以下面我給大家介紹一個(gè)網(wǎng)站：http://fff.cmiscm.com/，在這個(gè)網(wǎng)站中，你幾乎能看到所有H5能夠?qū)崿F(xiàn)的動(dòng)畫效果，下次如果需要做H5的時(shí)候就可以跟開發(fā)說「你看，就是這個(gè)效果」。

以下是該網(wǎng)站上幾個(gè)示例的截圖：

抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置。

種樹：在屏幕任意地方點(diǎn)擊都會(huì)在相應(yīng)的地方種一顆樹，你可以看到樹的生長(zhǎng)過程。

3D罐頭：CSS3 3D的完美展示，你可以看到三維罐頭的任意角度。

照片處理：你可以把照片藝術(shù)化，圖示為處理過程截圖。

★ 應(yīng)用場(chǎng)景

交互式動(dòng)畫類型的H5制作周期和成本比較高，需要提前規(guī)劃。除了創(chuàng)意、文案、設(shè)計(jì)這些以外，開發(fā)周期較長(zhǎng)，優(yōu)質(zhì)的H5大約在兩周到4周左右，也有可能更長(zhǎng)。

這種類型的H5要找靠譜的供應(yīng)商，因?yàn)閺?fù)雜交互做出來的效果，在用戶看來只有完美和垃圾兩種層次，所以慎重。當(dāng)然如果你自己要花血本自建團(tuán)隊(duì)也不是不行——產(chǎn)品經(jīng)理、設(shè)計(jì)師、前端工程師、PHP工程師（涉及表單、登錄、評(píng)論等元素的時(shí)候需要），各一枚就夠了。

以下是總結(jié)的應(yīng)用場(chǎng)景：

1、中小型活動(dòng)/品牌事件的傳播，預(yù)算不多、周期較短。這種情況一般就是某些新品發(fā)布、企業(yè)招聘、公關(guān)事件、中型會(huì)議等的傳播。此時(shí)你需要權(quán)衡周期和成本的因素。

一般來說一周以內(nèi)的時(shí)間不太可能做出優(yōu)質(zhì)的H5，這時(shí)候你可能要考慮幻燈片式的簡(jiǎn)易開發(fā)或者參考已有的作品，然后著重從設(shè)計(jì)和文案上下功夫。如果有一到兩周的時(shí)間可以嘗試做一些輕交互的H5，除了常見的那些平移、縮放、淡入淡出的動(dòng)效以外，在這里我比較建議大家嘗試一下CSS3 3D的效果，這是一個(gè)趨勢(shì)，當(dāng)然成本也會(huì)相應(yīng)的上升一個(gè)量級(jí)。

2、大型活動(dòng)/品牌事件的傳播，預(yù)算充足、計(jì)劃性強(qiáng)、周期較長(zhǎng)。一般大家看到的那些美輪美奐并且極具傳播性的H5基本上都屬于這一類，比如上文提到的可口可樂「分享快樂128年」，以及我們之前分享過的潘婷「一封來自1947年的明信片」。像這一類在美學(xué)、交互和故事性上都表現(xiàn)突出的案例，都不是一兩周的功夫能做出來的，不計(jì)算創(chuàng)意、設(shè)計(jì)和文案的時(shí)間，光是開發(fā)和調(diào)試也要小一個(gè)月。

因此大家看到好的作品要理性看待，不能覺得很牛或者老板說好就想著也做一個(gè)，其實(shí)像這種交互與故事一體的應(yīng)用，如果時(shí)間不夠只完成一半，整個(gè)H5基本是沒法用的，也就是所有之前的投入都是無用功。這也是為什么有很多供應(yīng)商無法在指定時(shí)間交付的原因，可能一開始就在做一個(gè)完不成的任務(wù)。

3、功能型H5

看一下以下的兩個(gè)例子，第一個(gè)是百度針對(duì)地鐵漲價(jià)做的H5，它可以計(jì)算你每天坐地鐵要多少錢并且實(shí)時(shí)顯示大家的評(píng)論；第二個(gè)是STC的社交移動(dòng)風(fēng)云榜，很簡(jiǎn)單，就是精品H5的展示：

這兩個(gè)H5都有一個(gè)特點(diǎn)，除了針對(duì)受眾的熱點(diǎn)內(nèi)容傳播以外，它們很像一個(gè)「供用戶重復(fù)使用」的產(chǎn)品，這就是所謂的功能型H5。其實(shí)大家看到風(fēng)云榜可能會(huì)覺得它只是一個(gè)再簡(jiǎn)單不過的網(wǎng)頁，但如果從它滿足用戶需求并產(chǎn)生重復(fù)「使用」行為的角度，它其實(shí)是一個(gè)產(chǎn)品，事實(shí)上我們從一開始就是把它當(dāng)產(chǎn)品來運(yùn)營(yíng)的，關(guān)注Social Talent的朋友可能會(huì)有所感受——每周更新、定期群發(fā)推薦H5的圖文、欄目更新通知等等。

功能型H5的獨(dú)特價(jià)值在于，除了具備傳播性以外，它通過用戶的重復(fù)使用行為使得H5的傳播是一個(gè)持續(xù)不斷的過程，這一點(diǎn)是一般的H5所不具備的。風(fēng)云榜首次發(fā)布時(shí)轉(zhuǎn)發(fā)6w+ 多，目前每月的訪問量都在10w左右，不算多，但是給我們帶來的流量轉(zhuǎn)化都是精準(zhǔn)的，關(guān)注我們的大多還是從事營(yíng)銷相關(guān)職業(yè)的朋友。

個(gè)人覺得web應(yīng)用肯定是未來發(fā)展的方向，就像上文所說的，很有可能未來的操作系統(tǒng)將被瀏覽器所取代，服務(wù)和應(yīng)用將進(jìn)入完全的云世界。當(dāng)然距離這種假設(shè)還比較遠(yuǎn)，但唯一大家可以放心遵守的原則，就是聚焦于用戶需求。

我所說的功能型H5，是同時(shí)聚焦于用戶需求并且注重傳播性的H5輕應(yīng)用，也就是在設(shè)計(jì)H5的時(shí)候除了考慮傳播的問題以外，也要思考如何把它變成一個(gè)持續(xù)運(yùn)營(yíng)的產(chǎn)品。這里面其實(shí)是思考角度的問題，從「我要傳播什么」到「我希望用戶傳播什么」的轉(zhuǎn)變。

★ 應(yīng)用場(chǎng)景

輕交互重功能的功能型H5制作周期較短、成本也不高，成功的關(guān)鍵不在于酷炫的交互，而在于用戶需求的把握以及后續(xù)的運(yùn)營(yíng)。

因此，這一類H5需要的是一名高水平的的產(chǎn)品經(jīng)理，而以設(shè)計(jì)、開發(fā)為輔。功能型H5目前沒有太多成熟的例子，不過我認(rèn)為離線存儲(chǔ)的技術(shù)可能會(huì)是功能型H5的應(yīng)用重點(diǎn)，大家可以關(guān)注一下。

以下是總結(jié)的應(yīng)用場(chǎng)景：

1、品牌賬號(hào)的粉絲運(yùn)營(yíng)。功能型H5由于具備一定的產(chǎn)品特性，其最大的價(jià)值就是提高粉絲活躍度和忠誠(chéng)度。我們需要根據(jù)本身品牌的形象定位以及受眾的特性設(shè)計(jì)功能型H5，要將品牌或產(chǎn)品的功能性特征抽象到生活方式或者精神追求的層次。

舉個(gè)例子，賣洗手液的可以抽象為健康生活方式，設(shè)計(jì)一個(gè)改善生活健康狀態(tài)的功能型H5；服裝品牌可以抽象為追求時(shí)尚前沿，設(shè)計(jì)一個(gè)定期更新時(shí)尚潮流資訊的功能型H5。事實(shí)上，以粉絲需求為中心的功能型H5將潛移默化的提升品牌影響力，在提升忠誠(chéng)度的同時(shí)帶來持續(xù)的口碑傳播。

2、結(jié)合熱點(diǎn)內(nèi)容的品牌傳播。這種類型的傳播是最常見的，但是往往很多結(jié)合熱點(diǎn)的H5傳播都是一次性娛樂消費(fèi)，大家看過就忘了。其實(shí)如果能從用戶需求挖掘和產(chǎn)品運(yùn)營(yíng)的角度去思考，許多針對(duì)熱點(diǎn)的H5傳播都有很大提升的空間。

想更多的了解 h5頁面推廣的相關(guān)信息，可以掃碼了解我們：

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！