H5如此多嬌，引無數(shù)品牌競折腰。最近25學(xué)堂的老譚同學(xué)開發(fā)了很多個品牌營銷的H5的案例。也打算從這期開始，伴隨一些喜歡H5的童鞋們來一起學(xué)習(xí)H5的魅力。

不知道大家還記得25學(xué)堂之前發(fā)表過一篇《五款優(yōu)秀的移動Html5場景頁面制作工具推薦》，這里跟大家推薦的工具都是不錯HTML5移動場景營銷利器。

第一方面：什么是H5？?

經(jīng)常有朋友找我咨詢H5的問題，但是在和他們溝通的過程中，我發(fā)現(xiàn)很多人對H5的理解都是停留在用戶層面，邀請函、小游戲、品牌展示、抽獎等等。其實如果上升到營銷層面的話，僅在用戶層面去思考是遠(yuǎn)遠(yuǎn)不夠的，因為任何傳播都要考慮有效性的問題，如果100w pv帶來的只是刷屏效果，而對品牌帶不來任何有效轉(zhuǎn)化，這樣的傳播顯然是不成功的。

對于事物的理解，如果不能從多個角度去分析，我們很難跳出原有的思考框架去看問題。因此，這篇文章我想以更原始的角度，從H5這項技術(shù)本身為出發(fā)點去闡述；事實上互聯(lián)網(wǎng)技術(shù)的發(fā)展本質(zhì)上也是需求驅(qū)動的，程序語言其實是高于應(yīng)用層面的產(chǎn)品。

以下的內(nèi)容希望不會太晦澀，也希望能對你有所啟發(fā)。

簡單來說，H5就是一種高級網(wǎng)頁技術(shù)，我們平時看到那些邀請函、小游戲都是H5網(wǎng)頁，確切來說叫HTML 5（國外目前沒有H5的叫法），它跟我們平時上網(wǎng)看到的那些網(wǎng)頁本質(zhì)上沒有任何區(qū)別，只不過大家普遍接受的那個網(wǎng)頁技術(shù)版本是HTML4，而這個版本是在1997年發(fā)布的。

什么是HTML，我這里簡單解釋一下——想象一下兩個計算機(jī)在溝通的場景，A如果要把一個圖文信息傳給B的時候，交流過程中B肯定會產(chǎn)生這樣的問題：你給了我那么多信息，哪些是網(wǎng)頁標(biāo)題、哪些是正文、哪些又是圖片呢？于是，A和B商量了一個辦法，用一些符號來標(biāo)記不同類型的內(nèi)容，而這些標(biāo)記的一整套規(guī)范就是HTML。

其實html5 又稱為web APP 1.0.

同時，在這里，25學(xué)堂的小編也要告訴大家一定要熟悉HTML5的新標(biāo)簽和妙用html5的八大特性來開發(fā)移動webAPP或是移動場景設(shè)計。

第二方面：H5能怎么玩？?

在了解完H5的一些基礎(chǔ)知識后，相信大家最關(guān)心的還是應(yīng)用層面的問題——H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：

1 、H5的幻燈片式玩法

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

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

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

2、 H5的交互式動畫玩法

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

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

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

在這里，25學(xué)堂跟大家推薦一個非?？犰诺腍5動畫網(wǎng)站：http://fff.cmiscm.com/

圍住神經(jīng)貓的酷站：http://www.niurenqushi.com/app/shenjingmao/

3、功能型H5的玩法

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

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

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

今天先跟大家聊到這里，主要讓大家認(rèn)識下H5的移動場景開發(fā)魅力！后面我們會繼續(xù)。。。