前言：

“H5 不行了!” “H5 已經被做地爛大街了!”

唱衰H5 的論調在它誕生(shēng)的兩年(nián)後便不斷浮現。

但質疑反而催化著(zhe)它的爆發。全景沉浸、一(yī)鏡到(dào)底、交互動效......一(yī)次次的驚喜讓營銷人欲罷不能(néng)，竭盡全力去探索新的可能(néng)性。

2014 年(nián)到(dào) 2018 年(nián)，從(cóng)“H5 是什麽”到(dào)“什麽都要做個(gè)H5”。H5 仿佛長(cháng)在朋友(yǒu)圈裡(lǐ)的莊稼，一(yī)茬又(yòu)一(yī)茬地收割著(zhe)流量紅(hóng)利。

本文将帶你回顧H5 自(zì)誕生(shēng)以來的發展曆史，為(wèi)你梳理哪些元素被繼承并不斷優化，哪些元素被無情淘汰。

大浪淘沙，留下(xià)的才是精華。騰訊 2013 年(nián)财報(bào)顯示，微信月(yuè)活躍用戶達3. 55 億，飛(fēi)速趕超新浪微博，直逼QQ積蓄了十幾年(nián)才達到(dào)的用戶數。真實的用戶、精準的信息、低(dī)獲客成本，微信成為(wèi)當時新的流量窪地。

但封閉、私密的産品特性，讓帶著(zhe)“公共”性質，追求“覆蓋”的營銷推廣，看(kàn)起來略顯尴尬。“營銷掘金者”們隻能(néng)被圈禁在“搖一(yī)搖”“漂流瓶”“公衆号”等地方，始終無法走進用戶的社交圈。

圖文成為(wèi)攻入用戶朋友(yǒu)圈的唯一(yī)方式。但靜(jìng)态圖片和文字在吸引用戶目光(guāng)上(shàng)存在天然缺陷，大量同質的、毫無新意的圖文内容也對用戶造成嚴重打擾，被用戶判定為(wèi)“垃圾”直接過濾掉。

圖文之外，是否有其他适合朋友(yǒu)圈展示的方式?當時，微信4. 0 版本已經開(kāi)放(fàng)了第三方接口，外部APP的内容可以接入微信平台，富媒體展示成為(wèi)一(yī)個(gè)全新的值得探索的方向。

但第三方接入步驟繁瑣，且面臨著(zhe)适配問題。在解決這些問題的過程中，人們發現了一(yī)個(gè)完美契合手機(jī)端、輕量卻能(néng)展示豐富效果的形式——H5。自(zì)此，開(kāi)啓了一(yī)個(gè)全新的微信營銷時代。

 

2014 萌芽

攻克“注意”和“社交”兩個(gè)底層壁壘

2014 年(nián)，萌芽期

面對微信用戶被大量同質信息淹沒、倍感疲乏、抵觸營銷信息的境遇，H5 用了一(yī)年(nián)的時間破局。在這期間，H5 攻克了“注意”和“社交”兩個(gè)底層壁壘。

上(shàng)半年(nián)，讓内容“動”起來，從(cóng)“單頁翻動”到(dào)“元素聯動”到(dào)“與你互動”，用戶的注意力在一(yī)次次地動态升級中被不斷聚焦。

下(xià)半年(nián)，H5 小(xiǎo)遊戲不僅讓互動升級，還(hái)有了反饋，遊戲戰績成了平淡生(shēng)活中的炫耀資本，“營銷”悄然化身“社交”的一(yī)部分。

2014 年(nián)上(shàng)

“能(néng)幫我做個(gè)會(huì)動的PPT嗎(ma)?”

作為(wèi)最早登錄朋友(yǒu)圈的一(yī)批作品，特斯拉的這支H5 保留了H5 最初的模樣：精美圖片+簡單的翻頁動效，最終的呈現效果卻超越了當時人們對微信營銷的想象：原來還(hái)可以這樣玩!

然而你可能(néng)不知道：雖然現在我們有無數個(gè)在線網站，可以快速生(shēng)成這樣的H5，成本基本為(wèi)0，但在 4 年(nián)前，開(kāi)發一(yī)個(gè)這樣的頁面卻需要将近 10000 元。

接下(xià)來的 5 月(yuè)份，可口可樂推出的《分享快樂 128 年(nián)》，将這種“動”又(yòu)向前推進了一(yī)步。

這支H5 頁面上(shàng)的每個(gè)元素都可以動。而且相(xiàng)較于原本的單頁翻動，更注重跨頁連接，一(yī)根貫穿畫(huà)面始終的“紅(hóng)線”，讓畫(huà)面在視覺上(shàng)更加流暢和統一(yī)。

同期，還(hái)有一(yī)支H5 的動效不容忽視——Burberry 的《從(cóng)倫敦到(dào)上(shàng)海的旅程》。這支H5 是當時交互體驗的集大成者。

“搖一(yī)搖”，進入H5 頁面;

“點一(yī)點”，探索油畫(huà)般的倫敦清晨;

“擦一(yī)擦”，使屏幕上(shàng)的晨霧散去;

點擊“河面”，河水(shuǐ)會(huì)随之泛起漣漪;最後點擊屏幕上(shàng)的白(bái)點，抵達終點上(shàng)海。

H5 的“交互”自(zì)此才有了和PPT不一(yī)樣的含義，所有的動效都是基于用戶操作，“為(wèi)你而動”，撩動用戶進行更深度的參與。

2014 年(nián)下(xià)

“給我做個(gè)神經貓那樣的小(xiǎo)遊戲!”

H5 雖然以驚人的速度在進化，但 2014 年(nián)上(shàng)半年(nián)始終沒有達成“刷屏”成就(jiù)。“社交”成為(wèi)H5 繼續發展必須突破的一(yī)個(gè)壁壘。

而這個(gè)壁壘，在 2014 年(nián) 7 月(yuè)被七個(gè)字輕松擊破——“簡單好玩能(néng)攀比”。這七個(gè)字來自(zì)小(xiǎo)遊戲《圍住神經貓》的制作團隊，是團隊為(wèi)神經貓小(xiǎo)遊戲定下(xià)的基調。上(shàng)線 48 小(xiǎo)時，PV達 1026 萬，即使放(fàng)在今天也是不俗的成績。

現在看(kàn)來如此簡單的七個(gè)字，卻為(wèi)當時苦苦無法進入社交圈的H5 成功地植入了“社交”基因，打通(tōng)了朋友(yǒu)圈的“分享鏈”。

滿屏的“我沒有圍住它，誰能(néng)幫個(gè)忙”和“我用X步圍住神經貓……你能(néng)超過我嗎(ma)”，撩撥地微信用戶欲罷不能(néng)。

其後，各大公司和品牌火速跟進，全網都開(kāi)始流行起做H5 小(xiǎo)遊戲。

“污妖王”杜蕾斯的《一(yī)夜N次郎》定制感最強，這個(gè)H5 山寨了經典遊戲“别踩白(bái)塊兒”，将黑(hēi)白(bái)塊替換為(wèi)五顔六色的杜蕾斯套套，操作可謂騷氣十足，從(cóng)題目到(dào)遊戲内容都賺足了眼球。

不像杜蕾斯這樣自(zì)帶流量怎麽辦?在一(yī)批模仿者中，我們還(hái)發現了一(yī)個(gè)給自(zì)己加成的獨特姿勢——蹭熱點。

8 月(yuè)份，正值柯震東“出演監獄風雲”(吸毒被捕事(shì)件(jiàn))，一(yī)款名為(wèi)《全民(mín)找祖名》的H5 小(xiǎo)遊戲借這個(gè)社會(huì)熱點脫穎而出。

“雖然柯少向龍叔保證不會(huì)帶壞房祖名，但龍叔實在不放(fàng)心，現在請求你幫忙在一(yī)群柯震東的頭像裡(lǐ)撈出唯一(yī)一(yī)個(gè)房祖名”。

然而，在快速更叠的移動互聯網時代，H5 小(xiǎo)遊戲的熱潮僅持續了不到(dào)半年(nián)，就(jiù)悄然退去。不過不用怕，H5 很快又(yòu)找到(dào)了挑逗消費(fèi)者的新姿勢。

10 月(yuè)份，可口可樂推出名為(wèi)《北(běi)極熊出沒，求合影!》的H5，提供了多(duō)個(gè)場景、多(duō)種動作供你選擇合影，成為(wèi)“曬照(zhào)片”流派的先行者。

 

11 月(yuè)份，H5 屆還(hái)刮起了收集“指紋”的風潮。

其中，央視春晚節目組發布的以“家和萬事(shì)興”為(wèi)主題的手印收集H5 最受矚目。

紮心的文案+簡單的操作，H5 上(shàng)線 24 小(xiǎo)時便收獲 322 萬網友(yǒu)的支持。這是央視春晚首次設置新媒體互動闆塊，堪稱傳統媒體和新媒體在對撞中融合的縮影。

 

在指定位置掃描指紋即可表示支持

12 月(yuè)份，出現了最早的年(nián)度總結H5——網易娛樂出品的《二零一(yī)四 娛樂圈畫(huà)傳》，收錄了文章姚笛出軌、韓劇《來自(zì)星星的你》爆火、柯震東吸毒被捕等 2014 年(nián)關注較高(gāo)的娛樂圈事(shì)件(jiàn)，辛辣的文案，潑辣的筆觸，别具一(yī)格的漫畫(huà)風令人耳目一(yī)新。

自(zì)此，每年(nián)的“娛樂圈畫(huà)傳”成了網易娛樂的年(nián)終保留項目。但由于在呈現形式上(shàng)并無突破， 2014 和 2015 年(nián)的娛樂圈畫(huà)傳都沒能(néng)爆火。

直到(dào) 2016 年(nián)，獨特的“畫(huà)中畫(huà)”形式才将這一(yī)項目打造成爆品。