2014~2016 刷屏H5最強總結，全球H5發(fā)展…
POST TIME:2021-08-20
總結一下2014~2016年的刷屏H5案例，大致歸為三個類別，入選標準為以下條件之一：
1、訪問量過千萬
2、創(chuàng)意新穎
3、交互/視覺獨特
刷屏類型一：交互視頻
這是今年最火的H5案例類型，以視頻作為核心內(nèi)容。
之所以如此受歡迎，大概有兩個原因：相對一般的H5，視頻承載的信息量更大，發(fā)揮空間也更大，而且對于很多廣告公司，做一個視頻比用代碼做動畫來得簡單；此外，相對于傳統(tǒng)的視頻，H5交互性和傳播力更強。
以下提供一些設計思路供參考：
1、結構一般是圖片和視頻的順序切換，簡單來說就是圖片和視頻輪流展示，只不過作為 交互轉場的圖片 要跟視頻的第一幀或者最后一幀相同。以《穿越故宮來看你為例》：
當然，這個案例比較簡單，其實還有很多交互形式，具體可以看下文交互視頻案例集里面的《好奇心之旅》《我畫的小怪獸從紙上逃跑了》這兩個，一個通過長按屏幕控制視頻，一個通過豐富的滑動交互控制視頻。
2、視覺“驚喜”。移動端的閱讀時間短、碎片化，壞處是很容易失焦跳出，好處是用戶的“分享行為”會在短時間被激發(fā)并執(zhí)行，這也是為什么移動端的H5動不動就一小時破百萬的原因所在。
“分享沖動”會在不斷的視覺驚喜中短時間急劇強化，瞬間引發(fā)分享行為。
3、熱點。吳亦凡、寶馬、故宮，這三個案例同樣的形式換成其他題材估計都能很難傳起來，因為打開率低，沒有引起群眾圍觀的“中心詞”，就好比同樣的歌，同樣的水準，你唱和劉德華唱肯定是不一樣的。
刷屏類型二：H5動畫
動畫，H5的基本玩法。相對于“交互視頻”，H5動畫制作難度大，對代碼的技術要求高。這種類型制作成本較高，考慮到大多數(shù)人應該不太有耐心，錢也不多，這里介紹一個比較簡單粗暴的方法：序列幀。
以寶馬100周年慶的案例為例，整個H5都是用序列幀做的。簡單來說就是一堆連續(xù)畫面順序播放，大概的效果如下：
案例交互非常密集，基本每個幾秒就有滑動、點擊甚至手勢交互的節(jié)點，所以如果用視頻做的話，一是需要大量的視頻片段，二是整個案例估計會非常龐大。另外用序列幀做動畫，基本是萬能的，什么動畫都能用這種辦法，只是相對于代碼繪圖，執(zhí)行效率較低。
刷屏類型三：創(chuàng)意互動
除了動畫，H5作為廣告形式的另一個核心就是互動。上圖案例集列出了八個典型的創(chuàng)意互動類型案例：冒險劇情、密室逃脫、新聞DIY、虛擬場館、視差全景、音樂合成、微信模擬、3D展示，可以體驗一下。
為什么是H5？
從以上幾類案例可以看到，H5作為廣告載體有不可替代的優(yōu)勢：多媒體、強交互、易分享?；叵胍幌拢贖5出現(xiàn)之前，你可曾聽說過一個品牌廣告能在兩天內(nèi)達到千萬人以上的訪問？
事實上，H5不是憑空出來的技術，從立項到定稿經(jīng)歷將近8年的時間，而H5誕生的其中一個使命，就是干掉Flash。
2005 年寬帶普及，原來只能瀏覽圖文網(wǎng)頁的互聯(lián)網(wǎng)用戶渴望更豐富的媒體形式，其中視頻和網(wǎng)頁游戲是兩大核心，F(xiàn)lash由于對流媒體視頻播放和游戲的支持，以插 件的形式幾乎稱霸了整個互聯(lián)網(wǎng)行業(yè)，Google由于收購了以Flash為根基的YouTube，每年給Adobe繳納大量費用。
注：Adobe 2005年收購Flash，Google 2006年收購YouTube。
2007年，Google聯(lián)合同樣視Flash為毒瘤的Apple，以及極力反對Flash封閉標準的W3C，啟動了HTML5。
2008年，喬布斯發(fā)布了光芒萬丈的iPhone。移動互聯(lián)網(wǎng)從此一發(fā)不可收，連接線上線下的移動終端成了互聯(lián)網(wǎng)新的入口。
但是！iOS是Apple的，Android是Google的。因此，手機一開始就不能運行Flash。而HTML5，天然就是為移動互聯(lián)網(wǎng)而生，易分享、跨平臺、連接線下場景、多媒體交互的獨特優(yōu)勢迅速捕獲了企業(yè)的芳心。
一直到，2014年，W3C宣布HTML5最終完成。Flash 退出歷史舞臺成定局。
所以H5刷屏的背后，反映的其實是兩個事實：
1、Flash已死。
2、H5作為廣告形式有更強的爆發(fā)力。
WPP集團下數(shù)字廣告代理公司雅酷（AKQA）的董事總經(jīng)理表示，“原來公司80%的網(wǎng)絡廣告都依靠Flash支持。而現(xiàn)在，所有這類廣告都是用H5制作。”
Adobe公司則承認，“H5將取代Flash，成為今后網(wǎng)絡廣告的主要引擎。只不過行業(yè)為了實現(xiàn)這一步，還需要獲得一些幫助?！?
不僅是中國，目前國際大型廣告公司和Adobe公司都表達了H5即將稱霸互聯(lián)網(wǎng)廣告的絕對肯定。Google（干掉Flash的元兇）也在2015年9月宣布Chrome不再支持Flash廣告播放。
另外，移動廣告在全球范圍內(nèi)的發(fā)展也在推動H5的廣泛應用，以下是幾個最新的數(shù)據(jù)：
2016年中國移動端廣告支出將達249.9億美元，占總體數(shù)字廣告支出的62.9%。（來源：2014~2019 Mobile Internet Ad Spending in China ，eMarketer）
76%的企業(yè)認為移動營銷非常重要。而三年前這個數(shù)字只有24%。移動廣告形式的選擇中，前三位的為：視頻貼片，Banner廣告、HTML5廣告。（來源：2016年廣告主移動營銷研究報告，Admaster）
76%的廣告主認為“利于社交傳播”是移動營銷與PC端營銷的一大優(yōu)勢，另外，利于深入互動，利于聯(lián)結線下場景也是移動營銷的獨特優(yōu)勢。（來源：2016年廣告主移動營銷研究報告，Admaster）
H5除了廣告，還能做什么？
隨著手機性能和移動網(wǎng)絡速度的提升，H5在打敗Flash之后的另一個任務，就是打敗APP。
谷 歌早在幾年前就推出了一款筆記本電腦Chromebook，這款電腦只裝了一個軟件——瀏覽器，電腦所有的“應用”都運行在云端，通過瀏覽器訪問，而這些 “應用”就是基于H5的。此時，你安裝一個“應用”的方式，就是將一個網(wǎng)頁簡單地添加到收藏夾，而不是傳統(tǒng)方式中繁瑣的下載和安裝。
事實上，微信公眾號目前已經(jīng)有了添加到桌面的功能，而張小龍之前也宣布了應用號即將推出的消息。你會發(fā)現(xiàn)微信大部分內(nèi)容和服務都是基于H5的，在這個層面，其實微信跟谷歌的Chromebook可謂殊途同歸。
下面列舉幾種正在發(fā)生的H5應用化方向：
1、游戲
最典型的，是3D效果的 H5游戲。這里有一個簡單的游戲案例——3D版俄羅斯方塊，你要考慮3維的變換和組合，高智商游戲。
PC游戲，請在PC端打開
http://cee2a4eeac65.ih5.cn/idea/zRFRyhs
2、線下大屏交互
傳統(tǒng)的大屏交互要安裝龐大的軟件系統(tǒng)，而且內(nèi)容無法實時更新，H5則能完美解決這兩個問題，一是無需安裝，二是內(nèi)容可隨時更新，最重要的是制作周期極短，成本相對于傳統(tǒng)模式節(jié)省90%以上費用。以下是用iH5工具做的多人多點觸摸的大屏交互案例：
視頻請復制鏈接打開
http://dwz.cn/3UR6Lv
3、企業(yè)級應用
H5方便傳播和信息收集的特性，天然適合與企業(yè)CRM系統(tǒng)對接。
視頻請復制鏈接打開
https://v.qq.com/iframe/preview.html?vid=b0313zg5x9x&
用iH5搭建的簡版CRM工具，只需3天
4、視頻購物
H5實現(xiàn)視頻交互，用戶點擊畫面具體區(qū)域彈出商品信息，完成內(nèi)容到購買的完整流程。
PC案例，請在PC端訪問
http://bea649d961f8.ih5.cn/idea/FKKEJZE
H5占領互聯(lián)網(wǎng)，你準備好了嗎？
無論是各大國際公司對“H5取代Flash”的絕對肯定，還是H5的應用化發(fā)展，都在導向一個結論：
H5占領互聯(lián)網(wǎng)已是大勢所趨。
Flash原本代表的網(wǎng)絡廣告市場，注定了H5的發(fā)展要帶著濃濃的商業(yè)氣息，不過也正是高達千億美元的廣告市場支撐了H5如今在世界范圍內(nèi)的發(fā)展勢頭。
另一方面，H5的應用化趨勢也在悄悄進行，與此帶來的則是原本傳統(tǒng)軟件需求的轉移。標簽：新鄉(xiāng)
肇慶
中山
錫林郭勒盟
南昌
南充
云浮
三亞
