久久精品国产亚洲AV高清y?w,99九九99九九精彩视频,69精品视频在线看影院,欧美精品系列产品

最新案例推薦
點(diǎn)擊查看
掃一掃查看
最新行業(yè)案例

刷爆朋友圈的H5是怎么做出來的？

發(fā)表于：2016-07-29

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



（非特殊說明，本文版權(quán)歸原作者所有，轉(zhuǎn)載請(qǐng)注明出處 ）
標(biāo)簽： 上海網(wǎng)站建設(shè)、上海網(wǎng)站制作、高端網(wǎng)站設(shè)計(jì)、邁若網(wǎng)絡(luò)


邁若微信公眾號(hào)_上海網(wǎng)站建設(shè)公司

手機(jī)隨時(shí)獲取邁若動(dòng)態(tài)，掃描左側(cè)二維碼
添加邁若微信公眾號(hào)【manro_since2005】