品牌H5營銷完全實戰指南

　　那些百萬PV的H5都是怎麼做的?精心打造的H5要如何推廣?H5技術將如何發展?本文一一為你解答 >>>

　　作者微信號，歡迎關注：Social Talent

　　對於H5這個名詞想必大家已經很熟悉了，就在2014年，一項本來還不太成熟的技術在微信的社交舞台下大放異彩，讓我們見識了“移動+社交”爆發的巨大能量。

　　然而這不是偶然，而是趨勢。在具體介紹H5營銷之前，我想和大家分享一份eMarketer的數據，其中顯示了2012年-2018年品牌在不同媒體渠道的預算比重：

　　相比電視、雜志、戶外廣告等傳統媒體呈逐年下降的趨勢，品牌營銷在數字和移動方面的投入在逐年上升。而且，在所有渠道預算中移動技術的投入增長最快，遠遠高於其他渠道的增長。當然，這樣的結論你應該不會感到驚訝，因為我們早已習慣了24小時手機陪伴的生活，而品牌最關注的就是消費者“在哪”的問題。

　　據美國的調查數據顯示，我們每天要查看手機150次，44%的人睡覺都把手機放在身邊，9%的美國人承認他們在嘿咻時使用手機……毫無疑問，手機是有史以來最強大的媒介，從早上醒來到臨睡前的一秒，這個幾英寸的屏幕都在和我們“交流”。

　　顯然，移動營銷已是大勢所趨，我們可以看到已經廣泛應用的簽到、二維碼技術，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的H5技術。文章有點長，可能需要費些時間閱讀，全文包括：H5技術簡介及其特性，怎麼實現、有哪些應用場景，以及如何推廣等內容。

　　什麼是H5？

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

　　對於事物的理解，如果不能從多個角度去分析，我們很難跳出原有的思考框架去看問題。因此，這篇文章我想以更原始的角度，從H5這項技術本身為出發點去闡述;事實上互聯網技術的發展本質上也是需求驅動的，程序語言其實是高於應用層面的產品。以下的內容希望不會太晦澀，也希望能對你有所啟發。

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

　　什麼是HTML，我這裡簡單解釋一下——想象一下兩個計算機在溝通的場景，A如果要把一個圖文信息傳給B的時候，交流過程中B肯定會產生這樣的問題：你給了我那麼多信息，哪些是網頁標題、哪些是正文、哪些又是圖片呢?於是，A和B商量了一個辦法，用一些符號來標記不同類型的內容，而這些標記的一整套規范就是HTML。

　　比如當A要把圖文的標題傳給B的時候，最終給B的表達是這樣的：

　　<title>品牌H5營銷完全實戰指南</titile>

　　如果設計HTML語言的人是中國人，那表達就會是這樣的：

　　<標題> 始品牌H5營銷完全實戰指南<標題 終>

　　所以大家可以看到，HTML其實是一項非常人性化的發明。關於HTML技術的詳解有興趣的讀者可以自行查閱，這裡我主要跟大家介紹幾個營銷人應該關注的H5特性，它能讓你對H5能做成什麼樣有個根本的認識。

　　No.1 繪圖功能（Canvas、SVG）

　　這是H5一個非常重要的特性，你在很多H5中看到的動畫效果就是用H5的繪圖功能做的，比較典型的例子是STC風雲榜分享的可口可樂的例子。

　　為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區別是，Flash做出來的動畫無法在移動端的浏覽器中浏覽，因為Adobe早已在2012年就停止了對移動端flash的開發。毫無疑問，未來的移動網頁游戲和動畫會是H5的天下。

　　從技術實現的角度，H5配合JS(一種程序語言)可以做出任何二維動畫，並且因為是網頁元素，所有元素均可以監測到用戶點擊的數據，也就是說你可以知道用戶在H5動畫網頁中的所有交互行為。但是，具體到實際應用，我們就要考慮周期、成本，和用戶體驗的問題，復雜的動畫相應的制作周期和成本會提高，同時也有可能影響加載速度等用戶體驗相關的問題。

　　以下這個網站是H5繪圖功能的典型例子，非常強大。你可以選擇不同型號的毛筆、筆觸半徑以及墨水的顏色，整個繪圖過程非常順暢，而且還有一個模擬手握毛筆的人性化設計。

　　Theshodo

　　No.2 三維效果（CSS3、3D）

　　H5的華麗效果離不開一種叫CSS的技術，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當於word界面上方的格式工具欄，如果沒有CSS我們看到的H5網頁就只能以“素顏”見人了。如果你熟悉互聯網技術的命名規則你應該能知道CSS3就是CSS的升級版本。

　　在CSS3中有個非常酷的功能是三維渲染，也就說H5中能做出3D動畫甚至3D游戲。目前我們看到的H5中CSS3 3D的應用較少，這個也許會是下一個營銷類H5應用的熱點，建議大家持續關注。

　　下面這兩個網頁游戲就是用H5+CSS3 3D做的，第一個是俄羅斯方塊的3D版，想象一下在三維的空間裡玩俄羅斯方塊是什麼感覺，喜歡挑戰空間想象力的朋友可以試一下;第二個游戲是3D版坦克大戰，非常精致耐玩的游戲，一句話評價就是“根本停不下來”。

　　PS：以上提到這些網站都需要在PC浏覽器中打開，雖然麻煩一些，但絕對是值得的。(建議谷歌/火狐)

　　Alteredqualia

　　No.3 離線存儲（HTML5 Web Storage）

　　H5的另一個重要特性就是離線存儲，它能將用戶的資源文件保存在本地，這樣在頁面加載的時候網頁能使用本地資源，從而實現離線狀態下訪問網頁應用。舉個例子，通過離線存儲，你可以在沒有網絡的情況下閱讀公眾號的文章(當然這只是技術上可行，微信目前沒有此功能)。

　　當然離線存儲能容納的數據量是有限制，跟浏覽器有關，目前Chrome支持5M。大家或多或少都知道Cookie這個東西，它也是記錄用戶浏覽數據的，比如百度那些根據你的搜索習慣給你推薦的廣告就是這種技術實現的，不過它的容量是4k。

　　技術細節大家可以忽略，但是關於離線存儲這個功能，大家可以發揮想象——假設離線存儲的容量是100個G甚至更多，浏覽器就變成了一個超級應用入口，所有網頁應用都具備離線存儲和在線浏覽的功能，這時候在線Office、在線記事本甚至在線PhotoShop都可以實現，我們的電腦只需要裝一個程序——浏覽器。在這個假設中，浏覽器將干掉Windows，一切用戶操作都在雲端進行!稍微有點難理解，大家可以仔細體會。

　　以下是運用離線存儲的一個例子，這個提供在線便簽功能的網站無論有沒有網絡都可以訪問，並且你記錄的所有便簽都會保存下來，很實用的網站，有興趣可以試一下。

　　Webkit

　　科普先告一段落，雖然H5有很多特性，但因為篇幅有限，本文只能介紹跟營銷有關的內容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫一篇具體介紹。

　　Part 2 H5能怎麼玩？

　　在了解完H5的一些基礎知識後，相信大家最關心的還是應用層面的問題——H5能做什麼，有哪些玩法?接下來我將列舉一些典型的例子和大家探討：

　　1. 幻燈片式玩法

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

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

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

　　★