TOP導讀：H5如此多嬌，引無數品牌競折腰。
對於H5這個名詞想必大家已經很熟悉了，就在2014年，一項本來還不太成熟的技術在微信的社交舞臺下大放異彩，讓我們見識了「移動+社交」爆發的巨大能量。然而這不是偶然，而是趨勢。
在具體介紹H5營銷之前，我想和大家分享一份eMarketer的數據，其中顯示了2012年-2018年品牌在不同媒體渠道的預算比重：
相比電視、雜誌、戶外廣告等傳統媒體呈逐年下降的趨勢，品牌營銷在數字和移動方面的投入在逐年上升。而且，在所有渠道預算中移動技術的投入增長最快，遠遠高於其他渠道的增長。當然，這樣的結論你應該不會感到驚訝，因為我們早已習慣了24小時手機陪伴的生活，而品牌最關注的就是消費者「在哪」的問題。
據美國的調查數據顯示，我們每天要查看手機150次，44%的人睡覺都把手機放在身邊，9%的美國人承認他們在嘿咻時使用手機……毫無疑問，手機是有史以來最強大的媒介，從早上醒來到臨睡前的一秒，這個幾英寸的屏幕都在和我們「交流」。
顯然，移動營銷已是大勢所趨，我們可以看到已經廣泛應用的籤到、二維碼技術，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的H5技術。文章有點長，可能需要費些時間閱讀，全文包括：H5技術簡介及其特性，怎麼實現、有哪些應用場景，以及如何推廣等內容。
經常有朋友找我諮詢H5的問題，但是在和他們溝通的過程中，我發現很多人對H5的理解都是停留在用戶層面，邀請函、小遊戲、品牌展示、抽獎等等。其實如果上升到營銷層面的話，僅在用戶層面去思考是遠遠不夠的，因為任何傳播都要考慮有效性的問題，如果100w pv帶來的只是刷屏效果，而對品牌帶不來任何有效轉化，這樣的傳播顯然是不成功的。
對於事物的理解，如果不能從多個角度去分析，我們很難跳出原有的思考框架去看問題。因此，這篇文章我想以更原始的角度，從H5這項技術本身為出發點去闡述；事實上網際網路技術的發展本質上也是需求驅動的，程序語言其實是高於應用層面的產品。以下的內容希望不會太晦澀，也希望能對你有所啟發。
簡單來說，H5就是一種高級網頁技術，我們平時看到那些邀請函、小遊戲都是H5網頁，確切來說叫HTML 5（國外目前沒有H5的叫法），它跟我們平時上網看到的那些網頁本質上沒有任何區別，只不過大家普遍接受的那個網頁技術版本是HTML4，而這個版本是在1997年發布的。
什麼是HTML，我這裡簡單解釋一下——想像一下兩個計算機在溝通的場景，A如果要把一個圖文信息傳給B的時候，交流過程中B肯定會產生這樣的問題：你給了我那麼多信息，哪些是網頁標題、哪些是正文、哪些又是圖片呢？於是，A和B商量了一個辦法，用一些符號來標記不同類型的內容，而這些標記的一整套規範就是HTML。
比如當A要把圖文的標題傳給B的時候，最終給B的表達是這樣的：品牌H5營銷完全實戰指南
如果設計HTML語言的人是中國人，那表達就會是這樣的：品牌H5營銷完全實戰指南
所以大家可以看到，HTML其實是一項非常人性化的發明。關於HTML技術的詳解有興趣的讀者可以自行查閱，這裡我主要跟大家介紹幾個營銷人應該關注的H5特性，它能讓你對H5能做成什麼樣有個根本的認識。
這是H5一個非常重要的特性，你在很多H5中看到的動畫效果就是用H5的繪圖功能做的，比較典型的例子是STC風雲榜分享的可口可樂的例子，有興趣可以點擊最後的「閱讀原文」看一下。
為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區別是，Flash做出來的動畫無法在移動端的瀏覽器中瀏覽，因為Adobe早已在2012年就停止了對移動端flash的開發。毫無疑問，未來的移動網頁遊戲和動畫會是H5的天下。
從技術實現的角度，H5配合JS（一種程序語言）可以做出任何二維動畫，並且因為是網頁元素，所有元素均可以監測到用戶點擊的數據，也就是說你可以知道用戶在H5動畫網頁中的所有交互行為。但是，具體到實際應用，我們就要考慮周期、成本，和用戶體驗的問題，複雜的動畫相應的製作周期和成本會提高，同時也有可能影響加載速度等用戶體驗相關的問題。
以下這個網站是H5繪圖功能的典型例子，非常強大。你可以選擇不同型號的毛筆、筆觸半徑以及墨水的顏色，整個繪圖過程非常順暢，而且還有一個模擬手握毛筆的人性化設計。
H5的華麗效果離不開一種叫CSS的技術，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當於word界面上方的格式工具欄，如果沒有CSS我們看到的H5網頁就只能以「素顏」見人了。如果你熟悉網際網路技術的命名規則你應該能知道CSS3就是CSS的升級版本。
在CSS3中有個非常酷的功能是三維渲染，也就說H5中能做出3D動畫甚至3D遊戲。目前我們看到的H5中CSS3 3D的應用較少，這個也許會是下一個營銷類H5應用的熱點，建議大家持續關注。
下面這兩個網頁遊戲就是用H5+CSS3 3D做的，第一個是俄羅斯方塊的3D版，想像一下在三維的空間裡玩俄羅斯方塊是什麼感覺，喜歡挑戰空間想像力的朋友可以試一下；第二個遊戲是3D版坦克大戰，非常精緻耐玩的遊戲，一句話評價就是「根本停不下來」。
PS：以上提到這些網站都需要在PC瀏覽器中打開，雖然麻煩一些，但絕對是值得的。
H5的另一個重要特性就是離線存儲，它能將用戶的資源文件保存在本地，這樣在頁面加載的時候網頁能使用本地資源，從而實現離線狀態下訪問網頁應用。舉個例子，通過離線存儲，你可以在沒有網絡的情況下閱讀公眾號的文章（當然這只是技術上可行，微信目前沒有此功能）。
當然離線存儲能容納的數據量是有限制，跟瀏覽器有關，目前Chrome支持5M。大家或多或少都知道cookie這個東西，它也是記錄用戶瀏覽數據的，比如百度那些根據你的搜索習慣給你推薦的廣告就是這種技術實現的，不過它的容量是4k。
技術細節大家可以忽略，但是關於離線存儲這個功能，大家可以發揮想像——假設離線存儲的容量是100個G甚至更多，瀏覽器就變成了一個超級應用入口，所有網頁應用都具備離線存儲和在線瀏覽的功能，這時候在線Office、在線記事本甚至在線PhotoShop都可以實現，我們的電腦只需要裝一個程序——瀏覽器。在這個假設中，瀏覽器將幹掉Windows，一切用戶操作都在雲端進行！稍微有點難理解，大家可以仔細體會。
以下是運用離線存儲的一個例子，這個提供在線便籤功能的網站無論有沒有網絡都可以訪問，並且你記錄的所有便籤都會保存下來，很實用的網站，有興趣可以試一下。
科普先告一段落，雖然H5有很多特性，但因為篇幅有限，本文只能介紹跟營銷有關的內容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫一篇具體介紹。
在了解完H5的一些基礎知識後，相信大家最關心的還是應用層面的問題——H5能做什麼，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：
以下這個特斯拉的例子相信很多人都看過，精美的圖片設計+簡單的翻頁效果，在我的印象中大概3、4月份看到特斯拉這個H5的時候，大家還不知道原來微信營銷可以這麼玩，記得那時候我們看到之後就在一周內做了一個類似的H5，用於STC的品牌展示。當然，在這之後H5就千樹萬樹梨花開了。
這是H5最早期也是最典型的玩法，因為簡單、實用，所以至今還很流行。其效果就是簡單的圖片展示&翻頁交互，最終整體的表現很像幻燈片展示。
其實幻燈片式的H5現在已經出現了很多在線製作軟體供大家使用，所以製作成本在現在看來幾乎是等於零的，而在之前這樣一個應用的開發可能要將近一萬（再一次見證了網際網路思維的破壞力）。當然啦，這對於品牌主來說是一個好事，因為很多時候這種簡單的展示已經能滿足需求了，不需要花不必要的錢。
★ 應用場景
由於製作簡單，周期短，這種H5展現形式適用於頻繁、小型的需求。用在線編輯器的話，不需要任何開發，你只需要要配備一名設計和文案。
總結得不全，幻燈片式H5可能有以下的應用場景：
1、定期發布的內容，幾乎零預算。這些內容相對而言比較常規，但是有時微信圖文又無法達到理想的效果，通過H5的形式會更易於傳播，當然前提是要有好的設計。比如數據報告、頻繁上線的新產品或功能、小型線下活動邀請、活動相冊等等。
2、結合熱點的營銷，周期極短。這種情況下，時效性是非常重要的，如果開發一個H5用了半個月，熱點想必也結冰了。所以，應該以最快的速度推出才是明智的選擇，而這時候引起廣泛傳播的關鍵就在於文案和設計。
此外，大家不要輕視這種短頻快的傳播，有時候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點，所以一次大投入的傳播不一定就能出效果，但是多次熱點傳播出效果的概率從統計學的角度也要高一些。如上文所述，我們可以實現用戶在H5中所有交互行為的監測，因此，如果短頻快的傳播能配合有效的數據監測，便可以進行持續優化，降低不確定性。
可口可樂這個案例在之前的風雲榜中推薦過，是運用H5繪圖功能的典型例子。當然這裡面的交互還是比較簡單的，只不過它基本體現了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面「繪製」出來的。
其實除了這種敘事型的H5動畫，我們能看到的大多數H5遊戲也都都屬於這一類，比如神經貓、打企鵝、2048等等。最近也有一個比較火的H5遊戲叫「財務包子鋪」，在這個遊戲中用戶扮演包子鋪的創業老闆，在事業發展的不同階段做出經營決策，最終登上人生巔峰。雖然遊戲中植入了赤裸裸的產品推廣（知乎的一本新書），但最後還是取得了3天破300萬PV的成績。
這些類型各異的H5應用，本質上都是基於H5的動畫技術做的。它們所涉及的相關動畫技術主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的動畫效果還是用JS實現的，實現的效果類似PPT中的動畫功能，只能實現元素的平移、旋轉、隱現等等。事實上通過JS+Canvas/SVG+CSS3可以實現非常複雜的交互式動畫，最直觀的就是H5遊戲，比如神經貓，還有上文提到的3D版坦克大戰。
那麼，H5到底能實現什麼樣的動畫效果呢？我想這應該是大家在做H5時最頭疼的問題，因為不知道能做成什麼樣，你也就不知道從何下手。所以下面我給大家介紹一個網站：http://fff.cmiscm.com/，在這個網站中，你幾乎能看到所有H5能夠實現的動畫效果，下次如果需要做H5的時候就可以跟開發說「你看，就是這個效果」。
以下是該網站上幾個示例的截圖：
抓綿羊：你可以在奔跑的羊群中隨意抓取並放到任意位置
種樹：在屏幕任意地方點擊都會在相應的地方種一顆樹，你可以看到樹的生長過程。
3D罐頭：CSS3 3D的完美展示，你可以看到三維罐頭的任意角度
照片處理：你可以把照片藝術化，圖示為處理過程截圖
★ 應用場景
交互式動畫類型的H5製作周期和成本比較高，需要提前規劃。除了創意、文案、設計這些以外，開發周期較長，優質的H5大約在兩周到4周左右，也有可能更長。
這種類型的H5要找靠譜的供應商，因為複雜交互做出來的效果，在用戶看來只有完美和垃圾兩種層次，所以慎重。當然如果你自己要花血本自建團隊也不是不行——產品經理、設計師、前端工程師、PHP工程師（涉及表單、登錄、評論等元素的時候需要），各一枚就夠了。
以下是總結的應用場景：
1、中小型活動/品牌事件的傳播，預算不多、周期較短。這種情況一般就是某些新品發布、企業招聘、公關事件、中型會議等的傳播。此時你需要權衡周期和成本的因素。
一般來說一周以內的時間不太可能做出優質的H5，這時候你可能要考慮幻燈片式的簡易開發或者參考已有的作品，然後著重從設計和文案上下功夫。如果有一到兩周的時間可以嘗試做一些輕交互的H5，除了常見的那些平移、縮放、淡入淡出的動效以外，在這裡我比較建議大家嘗試一下CSS3 3D的效果，這是一個趨勢，當然成本也會相應的上升一個量級。
2、大型活動/品牌事件的傳播，預算充足、計劃性強、周期較長。一般大家看到的那些美輪美奐並且極具傳播性的H5基本上都屬於這一類，比如上文提到的可口可樂「分享快樂128年」，以及我們之前分享過的潘婷「一封來自1947年的明信片」。像這一類在美學、交互和故事性上都表現突出的案例，都不是一兩周的功夫能做出來的，不計算創意、設計和文案的時間，光是開發和調試也要小一個月。
因此大家看到好的作品要理性看待，不能覺得很牛或者老闆說好就想著也做一個，其實像這種交互與故事一體的應用，如果時間不夠只完成一半，整個H5基本是沒法用的，也就是所有之前的投入都是無用功。這也是為什麼有很多供應商無法在指定時間交付的原因，可能一開始就在做一個完不成的任務。
看一下以下的兩個例子，第一個是百度針對地鐵漲價做的H5，它可以計算你每天坐地鐵要多少錢並且實時顯示大家的評論；第二個是STC的社交移動風雲榜，很簡單，就是精品H5的展示：
這兩個H5都有一個特點，除了針對受眾的熱點內容傳播以外，它們很像一個「供用戶重複使用」的產品，這就是所謂的功能型H5。其實大家看到風雲榜可能會覺得它只是一個再簡單不過的網頁，但如果從它滿足用戶需求並產生重複「使用」行為的角度，它其實是一個產品，事實上我們從一開始就是把它當產品來運營的，關注Social Talent的朋友可能會有所感受——每周更新、定期群發推薦H5的圖文、欄目更新通知等等。
功能型H5的獨特價值在於，除了具備傳播性以外，它通過用戶的重複使用行為使得H5的傳播是一個持續不斷的過程，這一點是一般的H5所不具備的。風雲榜首次發布時轉發6w+多，目前每月的訪問量都在10w左右，不算多，但是給我們帶來的流量轉化都是精準的，關注我們的大多還是從事營銷相關職業的朋友。
個人覺得web應用肯定是未來發展的方向，就像上文所說的，很有可能未來的作業系統將被瀏覽器所取代，服務和應用將進入完全的雲世界。當然距離這種假設還比較遠，但唯一大家可以放心遵守的原則，就是聚焦於用戶需求。
我所說的功能型H5，是同時聚焦於用戶需求並且注重傳播性的H5輕應用，也就是在設計H5的時候除了考慮傳播的問題以外，也要思考如何把它變成一個持續運營的產品。這裡面其實是思考角度的問題，從「我要傳播什麼」到「我希望用戶傳播什麼」的轉變。
★ 應用場景
輕交互重功能的功能型H5製作周期較短、成本也不高，成功的關鍵不在於酷炫的交互，而在於用戶需求的把握以及後續的運營。
因此，這一類H5需要的是一名高水平的的產品經理，而以設計、開發為輔。功能型H5目前沒有太多成熟的例子，不過我認為離線存儲的技術可能會是功能型H5的應用重點，大家可以關注一下。
以下是總結的應用場景：
1、品牌帳號的粉絲運營。功能型H5由於具備一定的產品特性，其最大的價值就是提高粉絲活躍度和忠誠度。我們需要根據本身品牌的形象定位以及受眾的特性設計功能型H5，要將品牌或產品的功能性特徵抽象到生活方式或者精神追求的層次。
舉個例子，賣洗手液的可以抽象為健康生活方式，設計一個改善生活健康狀態的功能型H5；服裝品牌可以抽象為追求時尚前沿，設計一個定期更新時尚潮流資訊的功能型H5。事實上，以粉絲需求為中心的功能型H5將潛移默化的提升品牌影響力，在提升忠誠度的同時帶來持續的口碑傳播。
2、結合熱點內容的品牌傳播。這種類型的傳播是最常見的，但是往往很多結合熱點的H5傳播都是一次性娛樂消費，大家看過就忘了。其實如果能從用戶需求挖掘和產品運營的角度去思考，許多針對熱點的H5傳播都有很大提升的空間。
近來大家都喜歡報導習大大和彭麻麻的「私生活」或者非正式領導會晤之類的，如果有人能做一個類似微博「學習粉絲團」那樣，定期更新「學習資訊」的功能型H5，想來必火。
實際上H5可以推廣的渠道有限，不像App的推廣有各類應用商店的流量。關於這個問題可以說的不多，我僅針對性的提出幾點建議：
1、從用戶角度挖掘H5的價值點，寫一篇軟文。通過圖文群發來推廣H5無疑是最重要的方式，但是如果只是簡單硬性推廣，比如宣布今天我們上線了一個高大上云云的H5，然後就讓用戶點擊「閱讀原文」自己看，顯然這種新聞通稿式的推廣不會有太好的效果。
一個好的H5一定具備打動用戶的價值點，從一個角度切入寫一篇軟文，無論通過投稿的方式還是大號轉發都能給你帶來意想不到的傳播效果。投入再大再精彩的H5，如果沒有好的推廣就只能孤芳自賞，所以哪怕是留點推廣預算也是值得的。
2、盡你所能利用所有能推廣H5的渠道。目前比較常用的方式：通過公眾號的圖文群發推廣、微信群推廣、線下二維碼推廣，以及前面提到的KOL轉發和投稿等。這裡主要說一下有關微信群的幾點建議。
首先，你需要列出所有你能用到的資源，並發動內部人員轉發，當然前提是H5做得很棒。值得注意的一點是，每個微信群其實都有自己的定位——工作、生活或者閒聊扯淡，所以為了提升打開率可以適當的為不同的微信群定製轉發的文案，比如以上文的STC風雲榜為例，對於工作學習為主的群可以是「品牌H5做成這樣也是蠻拼的！」，如果是更加生活化的群就可以是「史上最好玩的H5應用，根本停不下來」之類的，但是如果H5的調性實在和微信群的定位不搭，建議不要造成打擾。
3、充分利用「閱讀原文」和自定義菜單。由於微信的限制，圖文中唯一能跳轉的連結就是「閱讀原文」。關於如何利用好「閱讀原文」有三點小tips：
不要浪費每一篇圖文的「閱讀原文」，可能的話對於每一篇圖文用不同的文案引導點擊；
如果你的目的是推廣H5，不要在閱讀原文的提示之後或者閱讀原文引導和正文之間插播公眾號的廣告；
通過字體或者顏色的視覺跳躍引起讀者的注意，而且不要長期使用同一個格式，因為當用戶習慣了固定的格式之後會不自覺的忽略這些內容。
此外，自定義菜單也是需要充分利用的功能，一般來說新增粉絲都會瀏覽一遍公眾號的菜單，根據我們的數據監測，平均每個菜單項會有20%的新增粉絲點擊。假如你的帳號每天能有500個粉絲增長，就會有100個人以上點擊了菜單的某一項，因為這是持續進行的主動行為，由此為H5帶來的瀏覽量可能比圖文群發還要高。
(Social Talent )