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