起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識品牌H5營銷完全實戰(zhàn)指南
TOP導(dǎo)讀：H5如此多嬌，引無數(shù)品牌競折腰。
對于H5這個名詞想必大家已經(jīng)很熟悉了，就在2014年，一項本來還不太成熟的技術(shù)在微信的社交舞臺下大放異彩，讓我們見識了“移動+社交”爆發(fā)的巨大能量。然而這不是偶然，而是趨勢。
在具體介紹H5營銷之前，我想和大家分享一份eMarketer的數(shù)據(jù)，其中顯示了2012年-2018年品牌在不同媒體渠道的預(yù)算比重：
相比電視、雜志、戶外廣告等傳統(tǒng)媒體呈逐年下降的趨勢，品牌營銷在數(shù)字和移動方面的投入在逐年上升。而且，在所有渠道預(yù)算中移動技術(shù)的投入增長最快，遠遠高于其他渠道的增長。當(dāng)然，這樣的結(jié)論你應(yīng)該不會感到驚訝，因為我們早已習(xí)慣了24小時手機陪伴的生活，而品牌最關(guān)注的就是消費者“在哪”的問題。
據(jù)美國的調(diào)查數(shù)據(jù)顯示，我們每天要查看手機150次，44%的人睡覺都把手機放在身邊，9%的美國人承認他們在嘿咻時使用手機……毫無疑問，手機是有史以來最強大的媒介，從早上醒來到臨睡前的一秒，這個幾英寸的屏幕都在和我們“交流”。
顯然，移動營銷已是大勢所趨，我們可以看到已經(jīng)廣泛應(yīng)用的簽到、二維碼技術(shù)，正在興起的iBeacon、微信的Wifi連接，還有就是本文將與大家分享的H5技術(shù)。文章有點長，可能需要費些時間閱讀，全文包括：H5技術(shù)簡介及其特性，怎么實現(xiàn)、有哪些應(yīng)用場景，以及如何推廣等內(nèi)容。
什么是H5？
經(jīng)常有朋友找我咨詢H5的問題，但是在和他們溝通的過程中，我發(fā)現(xiàn)很多人對H5的理解都是停留在用戶層面，邀請函、小游戲、品牌展示、抽獎等等。其實如果上升到營銷層面的話，僅在用戶層面去思考是遠遠不夠的，因為任何傳播都要考慮有效性的問題，如果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，我這里簡單解釋一下——想象一下兩個計算機在溝通的場景，A如果要把一個圖文信息傳給B的時候，交流過程中B肯定會產(chǎn)生這樣的問題：你給了我那么多信息，哪些是網(wǎng)頁標(biāo)題、哪些是正文、哪些又是圖片呢？于是，A和B商量了一個辦法，用一些符號來標(biāo)記不同類型的內(nèi)容，而這些標(biāo)記的一整套規(guī)范就是HTML。
比如當(dāng)A要把圖文的標(biāo)題傳給B的時候，最終給B的表達是這樣的：品牌H5營銷完全實戰(zhàn)指南
如果設(shè)計HTML語言的人是中國人，那表達就會是這樣的：品牌H5營銷完全實戰(zhàn)指南
所以大家可以看到，HTML其實是一項非常人性化的發(fā)明。關(guān)于HTML技術(shù)的詳解有興趣的讀者可以自行查閱，這里我主要跟大家介紹幾個營銷人應(yīng)該關(guān)注的H5特性，它能讓你對H5能做成什么樣有個根本的認識。
No.1 繪圖功能（Canvas、SVG）
這是H5一個非常重要的特性，你在很多H5中看到的動畫效果就是用H5的繪圖功能做的，比較典型的例子是STC風(fēng)云榜分享的可口可樂的例子，有興趣可以點擊最后的“閱讀原文”看一下。
為了方便理解，你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來的動畫無法在移動端的瀏覽器中瀏覽，因為Adobe早已在2012年就停止了對移動端flash的開發(fā)。毫無疑問，未來的移動網(wǎng)頁游戲和動畫會是H5的天下。
從技術(shù)實現(xiàn)的角度，H5配合JS（一種程序語言）可以做出任何二維動畫，并且因為是網(wǎng)頁元素，所有元素均可以監(jiān)測到用戶點擊的數(shù)據(jù)，也就是說你可以知道用戶在H5動畫網(wǎng)頁中的所有交互行為。但是，具體到實際應(yīng)用，我們就要考慮周期、成本，和用戶體驗的問題，復(fù)雜的動畫相應(yīng)的制作周期和成本會提高，同時也有可能影響加載速度等用戶體驗相關(guān)的問題。
以下這個網(wǎng)站是H5繪圖功能的典型例子，非常強大。你可以選擇不同型號的毛筆、筆觸半徑以及墨水的顏色，整個繪圖過程非常順暢，而且還有一個模擬手握毛筆的人性化設(shè)計。
No.2 三維效果（CSS3 3D）
H5的華麗效果離不開一種叫CSS的技術(shù)，形象的說，如果把HTML5比作漫畫的素描稿，CSS就是上色用的，相當(dāng)于word界面上方的格式工具欄，如果沒有CSS我們看到的H5網(wǎng)頁就只能以“素顏”見人了。如果你熟悉互聯(lián)網(wǎng)技術(shù)的命名規(guī)則你應(yīng)該能知道CSS3就是CSS的升級版本。
在CSS3中有個非?？岬墓δ苁侨S渲染，也就說H5中能做出3D動畫甚至3D游戲。目前我們看到的H5中CSS3 3D的應(yīng)用較少，這個也許會是下一個營銷類H5應(yīng)用的熱點，建議大家持續(xù)關(guān)注。
下面這兩個網(wǎng)頁游戲就是用H5+CSS3 3D做的，第一個是俄羅斯方塊的3D版，想象一下在三維的空間里玩俄羅斯方塊是什么感覺，喜歡挑戰(zhàn)空間想象力的朋友可以試一下；第二個游戲是3D版坦克大戰(zhàn)，非常精致耐玩的游戲，一句話評價就是“根本停不下來”。
PS：以上提到這些網(wǎng)站都需要在PC瀏覽器中打開，雖然麻煩一些，但絕對是值得的。
No.3 離線存儲（HTML5 Web Storage）
H5的另一個重要特性就是離線存儲，它能將用戶的資源文件保存在本地，這樣在頁面加載的時候網(wǎng)頁能使用本地資源，從而實現(xiàn)離線狀態(tài)下訪問網(wǎng)頁應(yīng)用。舉個例子，通過離線存儲，你可以在沒有網(wǎng)絡(luò)的情況下閱讀公眾號的文章（當(dāng)然這只是技術(shù)上可行，微信目前沒有此功能）。
當(dāng)然離線存儲能容納的數(shù)據(jù)量是有限制，跟瀏覽器有關(guān)，目前Chrome支持5M。大家或多或少都知道cookie這個東西，它也是記錄用戶瀏覽數(shù)據(jù)的，比如百度那些根據(jù)你的搜索習(xí)慣給你推薦的廣告就是這種技術(shù)實現(xiàn)的，不過它的容量是4k。
技術(shù)細節(jié)大家可以忽略，但是關(guān)于離線存儲這個功能，大家可以發(fā)揮想象——假設(shè)離線存儲的容量是100個G甚至更多，瀏覽器就變成了一個超級應(yīng)用入口，所有網(wǎng)頁應(yīng)用都具備離線存儲和在線瀏覽的功能，這時候在線Office、在線記事本甚至在線PhotoShop都可以實現(xiàn)，我們的電腦只需要裝一個程序——瀏覽器。在這個假設(shè)中，瀏覽器將干掉Windows，一切用戶操作都在云端進行！稍微有點難理解，大家可以仔細體會。
以下是運用離線存儲的一個例子，這個提供在線便簽功能的網(wǎng)站無論有沒有網(wǎng)絡(luò)都可以訪問，并且你記錄的所有便簽都會保存下來，很實用的網(wǎng)站，有興趣可以試一下。
科普先告一段落，雖然H5有很多特性，但因為篇幅有限，本文只能介紹跟營銷有關(guān)的內(nèi)容，其他的特性很多是程序猿的事，如果大家反饋還要了解更多，我可以再寫一篇具體介紹。
H5能怎么玩？
在了解完H5的一些基礎(chǔ)知識后，相信大家最關(guān)心的還是應(yīng)用層面的問題——H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：
1 幻燈片式玩法
以下這個特斯拉的例子相信很多人都看過，精美的圖片設(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)能滿足需求了，不需要花不必要的錢。
★ 應(yīng)用場景
由于制作簡單，周期短，這種H5展現(xiàn)形式適用于頻繁、小型的需求。用在線編輯器的話，不需要任何開發(fā)，你只需要要配備一名設(shè)計和文案。
總結(jié)得不全，幻燈片式H5可能有以下的應(yīng)用場景：
1、定期發(fā)布的內(nèi)容，幾乎零預(yù)算。這些內(nèi)容相對而言比較常規(guī)，但是有時微信圖文又無法達到理想的效果，通過H5的形式會更易于傳播，當(dāng)然前提是要有好的設(shè)計。比如數(shù)據(jù)報告、頻繁上線的新產(chǎn)品或功能、小型線下活動邀請、活動相冊等等。
2、結(jié)合熱點的營銷，周期極短。這種情況下，時效性是非常重要的，如果開發(fā)一個H5用了半個月，熱點想必也結(jié)冰了。所以，應(yīng)該以最快的速度推出才是明智的選擇，而這時候引起廣泛傳播的關(guān)鍵就在于文案和設(shè)計。
此外，大家不要輕視這種短頻快的傳播，有時候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點，所以一次大投入的傳播不一定就能出效果，但是多次熱點傳播出效果的概率從統(tǒng)計學(xué)的角度也要高一些。如上文所述，我們可以實現(xiàn)用戶在H5中所有交互行為的監(jiān)測，因此，如果短頻快的傳播能配合有效的數(shù)據(jù)監(jiān)測，便可以進行持續(xù)優(yōu)化，降低不確定性。
2 交互式動畫
可口可樂這個案例在之前的風(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)。
那么，H5到底能實現(xiàn)什么樣的動畫效果呢？我想這應(yīng)該是大家在做H5時最頭疼的問題，因為不知道能做成什么樣，你也就不知道從何下手。所以下面我給大家介紹一個網(wǎng)站：http://fff.cmiscm.com/，在這個網(wǎng)站中，你幾乎能看到所有H5能夠?qū)崿F(xiàn)的動畫效果，下次如果需要做H5的時候就可以跟開發(fā)說“你看，就是這個效果”。
以下是該網(wǎng)站上幾個示例的截圖：
抓綿羊：你可以在奔跑的羊群中隨意抓取并放到任意位置
種樹：在屏幕任意地方點擊都會在相應(yīng)的地方種一顆樹，你可以看到樹的生長過程。
3D罐頭：CSS3 3D的完美展示，你可以看到三維罐頭的任意角度
照片處理：你可以把照片藝術(shù)化，圖示為處理過程截圖
★ 應(yīng)用場景
交互式動畫類型的H5制作周期和成本比較高，需要提前規(guī)劃。除了創(chuàng)意、文案、設(shè)計這些以外，開發(fā)周期較長，優(yōu)質(zhì)的H5大約在兩周到4周左右，也有可能更長。
這種類型的H5要找靠譜的供應(yīng)商，因為復(fù)雜交互做出來的效果，在用戶看來只有完美和垃圾兩種層次，所以慎重。當(dāng)然如果你自己要花血本自建團隊也不是不行——產(chǎn)品經(jīng)理、設(shè)計師、前端工程師、PHP工程師（涉及表單、登錄、評論等元素的時候需要），各一枚就夠了。
以下是總結(jié)的應(yīng)用場景：
1、中小型活動/品牌事件的傳播，預(yù)算不多、周期較短。這種情況一般就是某些新品發(fā)布、企業(yè)招聘、公關(guān)事件、中型會議等的傳播。此時你需要權(quán)衡周期和成本的因素。
一般來說一周以內(nèi)的時間不太可能做出優(yōu)質(zhì)的H5，這時候你可能要考慮幻燈片式的簡易開發(fā)或者參考已有的作品，然后著重從設(shè)計和文案上下功夫。如果有一到兩周的時間可以嘗試做一些輕交互的H5，除了常見的那些平移、縮放、淡入淡出的動效以外，在這里我比較建議大家嘗試一下CSS3 3D的效果，這是一個趨勢，當(dāng)然成本也會相應(yīng)的上升一個量級。
2、大型活動/品牌事件的傳播，預(yù)算充足、計劃性強、周期較長。一般大家看到的那些美輪美奐并且極具傳播性的H5基本上都屬于這一類，比如上文提到的可口可樂“分享快樂128年”，以及我們之前分享過的潘婷“一封來自1947年的明信片”。像這一類在美學(xué)、交互和故事性上都表現(xiàn)突出的案例，都不是一兩周的功夫能做出來的，不計算創(chuàng)意、設(shè)計和文案的時間，光是開發(fā)和調(diào)試也要小一個月。
因此大家看到好的作品要理性看待，不能覺得很?；蛘呃习逭f好就想著也做一個，其實像這種交互與故事一體的應(yīng)用，如果時間不夠只完成一半，整個H5基本是沒法用的，也就是所有之前的投入都是無用功。這也是為什么有很多供應(yīng)商無法在指定時間交付的原因，可能一開始就在做一個完不成的任務(wù)。
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è)的朋友。
個人覺得web應(yīng)用肯定是未來發(fā)展的方向，就像上文所說的，很有可能未來的操作系統(tǒng)將被瀏覽器所取代，服務(wù)和應(yīng)用將進入完全的云世界。當(dāng)然距離這種假設(shè)還比較遠，但唯一大家可以放心遵守的原則，就是聚焦于用戶需求。
我所說的功能型H5，是同時聚焦于用戶需求并且注重傳播性的H5輕應(yīng)用，也就是在設(shè)計H5的時候除了考慮傳播的問題以外，也要思考如何把它變成一個持續(xù)運營的產(chǎn)品。這里面其實是思考角度的問題，從“我要傳播什么”到“我希望用戶傳播什么”的轉(zhuǎn)變。
★ 應(yīng)用場景
輕交互重功能的功能型H5制作周期較短、成本也不高，成功的關(guān)鍵不在于酷炫的交互，而在于用戶需求的把握以及后續(xù)的運營。
因此，這一類H5需要的是一名高水平的的產(chǎn)品經(jīng)理，而以設(shè)計、開發(fā)為輔。功能型H5目前沒有太多成熟的例子，不過我認為離線存儲的技術(shù)可能會是功能型H5的應(yīng)用重點，大家可以關(guān)注一下。
以下是總結(jié)的應(yīng)用場景：
1、品牌賬號的粉絲運營。功能型H5由于具備一定的產(chǎn)品特性，其最大的價值就是提高粉絲活躍度和忠誠度。我們需要根據(jù)本身品牌的形象定位以及受眾的特性設(shè)計功能型H5，要將品牌或產(chǎn)品的功能性特征抽象到生活方式或者精神追求的層次。
舉個例子，賣洗手液的可以抽象為健康生活方式，設(shè)計一個改善生活健康狀態(tài)的功能型H5；服裝品牌可以抽象為追求時尚前沿，設(shè)計一個定期更新時尚潮流資訊的功能型H5。事實上，以粉絲需求為中心的功能型H5將潛移默化的提升品牌影響力，在提升忠誠度的同時帶來持續(xù)的口碑傳播。
2、結(jié)合熱點內(nèi)容的品牌傳播。這種類型的傳播是最常見的，但是往往很多結(jié)合熱點的H5傳播都是一次性娛樂消費，大家看過就忘了。其實如果能從用戶需求挖掘和產(chǎn)品運營的角度去思考，許多針對熱點的H5傳播都有很大提升的空間。
H5 如何推廣？
實際上H5可以推廣的渠道有限，不像App的推廣有各類應(yīng)用商店的流量。關(guān)于這個問題可以說的不多，我僅針對性的提出幾點建議：
1、從用戶角度挖掘H5的價值點，寫一篇軟文。通過圖文群發(fā)來推廣H5無疑是最重要的方式，但是如果只是簡單硬性推廣，比如宣布今天我們上線了一個高大上云云的H5，然后就讓用戶點擊“閱讀原文”自己看，顯然這種新聞通稿式的推廣不會有太好的效果。
一個好的H5一定具備打動用戶的價值點，從一個角度切入寫一篇軟文，無論通過投稿的方式還是大號轉(zhuǎn)發(fā)都能給你帶來意想不到的傳播效果。投入再大再精彩的H5，如果沒有好的推廣就只能孤芳自賞，所以哪怕是留點推廣預(yù)算也是值得的。
2、盡你所能利用所有能推廣H5的渠道。目前比較常用的方式：通過公眾號的圖文群發(fā)推廣、微信群推廣、線下二維碼推廣，以及前面提到的KOL轉(zhuǎn)發(fā)和投稿等。這里主要說一下有關(guān)微信群的幾點建議。
首先，你需要列出所有你能用到的資源，并發(fā)動內(nèi)部人員轉(zhuǎn)發(fā)，當(dāng)然前提是H5做得很棒。值得注意的一點是，每個微信群其實都有自己的定位——工作、生活或者閑聊扯淡，所以為了提升打開率可以適當(dāng)?shù)臑椴煌奈⑿湃憾ㄖ妻D(zhuǎn)發(fā)的文案，比如以上文的STC風(fēng)云榜為例，對于工作學(xué)習(xí)為主的群可以是“品牌H5做成這樣也是蠻拼的！”，如果是更加生活化的群就可以是“史上最好玩的H5應(yīng)用，根本停不下來”之類的，但是如果H5的調(diào)性實在和微信群的定位不搭，建議不要造成打擾。
3、充分利用“閱讀原文”和自定義菜單。由于微信的限制，圖文中唯一能跳轉(zhuǎn)的鏈接就是“閱讀原文”。關(guān)于如何利用好“閱讀原文”有三點小tips：
不要浪費每一篇圖文的“閱讀原文”，可能的話對于每一篇圖文用不同的文案引導(dǎo)點擊；
如果你的目的是推廣H5，不要在閱讀原文的提示之后或者閱讀原文引導(dǎo)和正文之間插播公眾號的廣告；
通過字體或者顏色的視覺跳躍引起讀者的注意，而且不要長期使用同一個格式，因為當(dāng)用戶習(xí)慣了固定的格式之后會不自覺的忽略這些內(nèi)容。
此外，自定義菜單也是需要充分利用的功能，一般來說新增粉絲都會瀏覽一遍公眾號的菜單，根據(jù)我們的數(shù)據(jù)監(jiān)測，平均每個菜單項會有20%的新增粉絲點擊。假如你的賬號每天能有500個粉絲增長，就會有100個人以上點擊了菜單的某一項，因為這是持續(xù)進行的主動行為，由此為H5帶來的瀏覽量可能比圖文群發(fā)還要高。
未來應(yīng)用不錯哦
這個公眾號搜不到呢