分析：“吳亦凡即將入伍”的H5技術(shù)到底是怎么實(shí)現(xiàn)的

分析：“吳亦凡即將入伍”的H5技術(shù)到底是怎么實(shí)現(xiàn)的？

對(duì)于這事，大叔看到自媒體朋友們迅速地分成了兩派。一派是挺吳派，從各種角度分析這個(gè)H5做得好啊，比如滿足了用戶的好奇心，明星效應(yīng)，標(biāo)題起的十分嚇人《史上最火H5是如何一夜爆紅的》等等；另一派是倒吳派，也從各種角度分析，認(rèn)為這個(gè)H5的戰(zhàn)略是錯(cuò)的，比如選錯(cuò)了代言人，沒有轉(zhuǎn)發(fā)動(dòng)機(jī)和下載游戲的轉(zhuǎn)化率。大叔認(rèn)為，上面兩派都是扯淡。理由很簡(jiǎn)單：1、這個(gè)H5火了，當(dāng)然符合用戶分享規(guī)律和傳播邏輯，轉(zhuǎn)發(fā)的人也不是傻子。2、尤其對(duì)吹毛求疵的人說一句，你先做一個(gè)原創(chuàng)的10萬+或能刷屏的H5出來給我們瞧瞧，再談轉(zhuǎn)化率。有點(diǎn)跑題了。回到上面的問題，“吳亦凡即將入伍”的H5到底是如何實(shí)現(xiàn)的？大叔認(rèn)為，所有的創(chuàng)意和驚喜需要在一點(diǎn)點(diǎn)把這個(gè)H5“解刨”之后，就能看得清清楚楚。這個(gè)可能是完全沒有任何技術(shù)背景的大叔和你更希望搞清楚的內(nèi)容。以下是大叔請(qǐng)教多位H5制作達(dá)人后，對(duì)此事的一個(gè)梳理。如有表述有誤，純屬是他們的問題，與大叔無關(guān)。一、“吳亦凡即將入伍”到底是一個(gè)H5，還是一個(gè)視頻(flash)？現(xiàn)在大家都知道這是一個(gè)H5，一出來的時(shí)候，有各種猜測(cè)，比如同樣的鏈接放在PC上，就變成了一個(gè)flash。還有人說這是一個(gè)完整的視頻，只不過連續(xù)放了三段，中間的銜接做得好。這種說法很快就被是否定了，因?yàn)榈谝豁摰奈淖质强梢詮?fù)制的，而不是一張圖片或視頻中的一幀畫面。還有第三種說法是這是一張張圖片累計(jì)做的GIF，顯然也不成立。因此，最終的結(jié)論是，這是一個(gè)H5。但和之前大家在朋友圈常見到的H5相比，要復(fù)雜得多。下面具體說，包括簡(jiǎn)單分析一下這個(gè)H5的代碼。二、這個(gè)H5的結(jié)構(gòu)是什么？“吳亦凡即將入伍”的H5分為5個(gè)部分。1、第一頁。這其實(shí)是一個(gè)H5頁面，包括文字+MP4視頻+圖片。為了讓這條“假頁面”顯得逼真，所以用了文字，包括正文、評(píng)論和相關(guān)新聞。中間的“照片”是一張照片的同時(shí)，其實(shí)是正在加載的視頻，對(duì)于這個(gè)自動(dòng)播放的技術(shù)，針對(duì)蘋果和安卓的機(jī)型，體驗(yàn)是不一樣的，大叔下面細(xì)說。2、第二頁。這一頁是整個(gè)H5的精華，給了用戶一個(gè)驚喜。其實(shí)就是一個(gè)全屏幕播放的視頻。但值得一提的是，用戶無法自動(dòng)暫停視頻，這其實(shí)是為了讓用戶觀看第一頁和第二頁的時(shí)候能夠流暢感受，如果停頓一點(diǎn)點(diǎn)，這個(gè)作品就失敗了。3、第三頁。這個(gè)好理解，H5頁面，頁面模仿微信的視頻聊天界面，連微信的背景音樂也不放過，“接聽”按鈕就是一個(gè)視頻播放的啟動(dòng)鍵。4、第四頁。接上面的，又一個(gè)全屏幕視頻。與第二也不同，第四頁的“聊天視頻”是可以暫停的，大叔猜測(cè)設(shè)計(jì)者是希望用戶可以重復(fù)觀看，因?yàn)檫@里是廣告部分。三、吳亦凡跳出新聞頁面是怎么做到的？大叔詳細(xì)說一下前兩頁。其實(shí)用戶再打開這個(gè)H5，看到騰訊新聞的頁面時(shí)，中間的那個(gè)圖片背后的視頻就在加載了，600多K，加載的時(shí)候，用戶正好可以看完全文。上文提到，蘋果和安卓用戶的體驗(yàn)是不一樣的。蘋果用戶是自動(dòng)播放的，這個(gè)體驗(yàn)十分順暢。而安卓用戶，可能由于系統(tǒng)本身的問題，是需要點(diǎn)擊那張小照片才能播放，好在幾乎所有人應(yīng)該往下翻看這條“新聞”，你的手指點(diǎn)在了圖片上，實(shí)際上就是啟動(dòng)了視頻。大叔認(rèn)為，這是整個(gè)H5的精華部分。小視頻播放完畢之后，全屏幕視頻緊接著自動(dòng)播放，由于全屏幕視頻開始的背景與新聞頁面類似，所以給用戶的錯(cuò)覺是，吳亦凡從新聞頁面中跳了出來，這種手法在魔術(shù)表演和國(guó)外創(chuàng)意剪輯視頻中其實(shí)是比較常見的，俗稱“障眼法”。四、這個(gè)H5技術(shù)復(fù)雜嗎？背后的技術(shù)團(tuán)隊(duì)制作是誰？上面說了那么多，這個(gè)H5到底是做的呢？其實(shí)打開這個(gè)H5的代碼，就能一目了然。制作者在代碼中間專門給自己做了一個(gè)廣告，包括設(shè)計(jì)是誰，重構(gòu)是誰，連制作團(tuán)隊(duì)的博客都有。各位可以在地址欄輸入“/”，沒錯(cuò)，這是騰訊游戲的官方設(shè)計(jì)團(tuán)隊(duì)做的。騰訊官方搞的，一定用了什么咱們普通老百姓不會(huì)的技術(shù)吧。其實(shí)沒有，這個(gè)H5用的技術(shù)是“JavaScrpt”。這個(gè)也能從代碼中看出。據(jù)說“JavaScrpt”是互聯(lián)網(wǎng)最流行的腳本語言，在PC時(shí)代很受用。按照百度百科的解釋，“JavaScrpt”一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。五、最后，附上騰訊互娛昨晚連夜出的一個(gè)官方“解密稿”(部分刪減)。什么人：為什么是吳亦凡？在這個(gè)H5刷爆朋友圈的同時(shí)，業(yè)內(nèi)也有一些質(zhì)疑的聲音。那么，作為一款男性用戶較多的游戲，《全民突擊》為什么選擇女粉較多的吳亦凡？似乎從策略層面上，這個(gè)選擇就有些南轅北轍，貽笑大方？這不，馬上就有“好事者”洋洋灑灑開始解讀評(píng)論，表示這里有大問題，那我們就來一起聊聊這里面的“小故事”?！度裢粨簟肥球v訊第一款上線的槍戰(zhàn)射擊類的手游?；诹己玫挠脩趔w驗(yàn)和相對(duì)不錯(cuò)的市場(chǎng)推動(dòng)，這款產(chǎn)品很快在同類產(chǎn)品中占據(jù)了絕大部分的市場(chǎng)份額，在IOS暢銷榜上，這款產(chǎn)品也表現(xiàn)出來不俗的成績(jī)，無論是用戶還是媒體對(duì)這款產(chǎn)品已經(jīng)有較多的認(rèn)知和了解，在這個(gè)節(jié)點(diǎn)上，擺在我們面前的問題就是是否有機(jī)會(huì)突破傳統(tǒng)意義的FPS或者射擊游戲玩家的范疇，進(jìn)一步擴(kuò)大這一類產(chǎn)品的用戶規(guī)模，也算是騰訊游戲在這個(gè)領(lǐng)域?yàn)闃I(yè)內(nèi)帶來的小小貢獻(xiàn)，因此在更廣泛的用戶中加強(qiáng)產(chǎn)品的認(rèn)知就成為此輪營(yíng)銷的重點(diǎn)課題。而與明星隊(duì)長(zhǎng)“吳亦凡”的合作營(yíng)銷就成了這里最優(yōu)選擇之一。首先，我們針對(duì)核心手游用戶——00后90后偶相觀的調(diào)研中，在未提供名單的情況下，藝人中吳亦凡、張杰和TFboys等都明顯擁有者海量的擁躉，而“吳亦凡”的粉絲的顯著特點(diǎn)是忠誠度極高。當(dāng)我們的明星隊(duì)長(zhǎng)明確與粉絲們分享這一優(yōu)秀產(chǎn)品的時(shí)候，擁躉們必然會(huì)紛紛加入到《全民突擊》中來感受到產(chǎn)品的樂趣。而另一方面，明星隊(duì)長(zhǎng)的粉絲中的女性能很好的協(xié)調(diào)和創(chuàng)造出優(yōu)質(zhì)的游戲社交氛圍，必然提升游戲現(xiàn)有玩家的活躍度，同時(shí)更好的擴(kuò)大射擊手游的整體用戶盤子。當(dāng)然，吳亦凡這位可愛的明星也正是《全民突擊》的深度玩家，選擇對(duì)游戲有高度認(rèn)同和興趣的明星，雙方溝通效率更高，雙方配合也會(huì)更好。什么事：“入伍”的點(diǎn)子是怎樣煉成的？確定了吳亦凡，但到底怎樣引起關(guān)注？明星代言的玩法和設(shè)計(jì)已經(jīng)是市場(chǎng)營(yíng)銷人共同的“痛”，除去前面已經(jīng)預(yù)埋過好些輪的引子，如何在公布“明星隊(duì)長(zhǎng)”吳亦凡加盟的當(dāng)天能更好的起到社會(huì)化的效應(yīng)，在發(fā)布形式的具體創(chuàng)意上我們經(jīng)歷過多輪的腦爆，也產(chǎn)生過好幾個(gè)方向。首先最直接的想到了采用明星與粉絲對(duì)話的形式，采用打電話+發(fā)微信的交互。但這一形式已經(jīng)不新鮮了，展示出來的效果會(huì)比較常規(guī)。而第二輪的腦爆的創(chuàng)意是希望利用美漫劇情H5，編一個(gè)引人入勝的故事，配合吳亦凡打電話，但實(shí)現(xiàn)上略有問題，同樣放棄。到了第三輪的時(shí)候，則準(zhǔn)備實(shí)拍，把吳亦凡置身戰(zhàn)火紛飛的“全民突擊”戰(zhàn)場(chǎng)，通過步話機(jī)對(duì)粉絲喊話。然而即將開工的時(shí)候，我們還是覺得沒有太大驚喜，放棄。那么，為什么會(huì)是“吳亦凡即將入伍”這個(gè)創(chuàng)意？實(shí)際上，這是一個(gè)為吳亦凡量身打造的一個(gè)創(chuàng)意。首先吳亦凡因?yàn)榕膽?，變成了圓寸的發(fā)型?！叭胛椤?，這點(diǎn)就一下子就蹦進(jìn)了團(tuán)隊(duì)的頭腦中。我們想著，吳亦凡早年在韓國(guó)發(fā)展，“入伍”是不少韓國(guó)男星必然面臨的事情，韓國(guó)男星入伍新聞每每成為粉絲關(guān)注的熱點(diǎn)。但已經(jīng)回到國(guó)內(nèi)發(fā)展的吳亦凡還有“入伍”問題？這個(gè)疑問和反差更能激起用戶的好奇。最終，“吳亦凡即將入伍”的創(chuàng)意，就這么確定下來。怎么說：不像“營(yíng)銷”的營(yíng)銷素材才是好“新聞”如今的社交媒體上，普通的“營(yíng)銷”素材已經(jīng)很難引發(fā)用戶的關(guān)注了。即便是手握一個(gè)高顏值、高粉絲量的明星，想要引起粉絲以外的更泛大眾用戶的傳播，對(duì)我們來說，也是一件很有壓力的事情。在確定“吳亦凡即將入伍”的創(chuàng)意之后，我們發(fā)現(xiàn)，咦，這個(gè)本身就是一條真假難辨的信息。如何強(qiáng)化這種在真假難辨的感覺？團(tuán)隊(duì)想到，索性就按照把它做成一條“新聞”去操作。具體實(shí)現(xiàn)上，H5的畫面完全按照手機(jī)新聞客戶端的閱讀界面去設(shè)計(jì)，并且“狡猾”的嵌套在“騰訊新聞”的頁面之下，總之，盡可能把“新聞”做得像條“新聞”。用一系列狂拽酷炫的技術(shù)無縫呈現(xiàn)，這才能戳中用戶G點(diǎn)1.吸睛的headline，以假亂真的新聞界面；2.男神從新聞頁面中跳出，撕下畫面；3.視頻來電等環(huán)節(jié)緊湊連接；4.最后吳的親身視頻告白；5.謎底揭曉，原來是入伍全民突擊，做明星隊(duì)長(zhǎng)。這個(gè)H5一氣呵成的創(chuàng)意模塊背后，其實(shí)更關(guān)鍵的還是執(zhí)行，做到比想到更重要。如何實(shí)現(xiàn)讓男神從網(wǎng)頁中跳出→將畫面撕下→再給粉絲視頻來電，這背后需要大量技術(shù)重構(gòu)來支持。為此，包括了視覺，前端，開發(fā)，創(chuàng)意，多媒體的小伙伴組成的創(chuàng)意團(tuán)隊(duì)也開始就執(zhí)行難點(diǎn)進(jìn)行評(píng)估。首先就是技術(shù)方面，這個(gè)H5的元素組成部分有：文字、圖片、MP4格式的視頻、MP3的音樂，如何保證這些元素?zé)o縫銜接？除此之外，新聞頁面中的男神突然出現(xiàn)的效果要如何達(dá)成？更不用說這個(gè)H5需要兼容的多平臺(tái)和渠道，比如手Q、微信、騰訊新聞、新浪微博等，每個(gè)渠道又有iOS和安卓的各種版本，在測(cè)試量和兼容性處理方面工作量巨大。當(dāng)然，酷炫技術(shù)只是表象，如何將內(nèi)容、對(duì)象以及要表達(dá)的主題通過一系列狂拽酷炫的技術(shù)無縫呈現(xiàn)，這才能戳中用戶G點(diǎn)。落在這個(gè)H5就是一些小的交互細(xì)節(jié)，比如：新聞頁打開多久后讓視頻自動(dòng)播放？整個(gè)體驗(yàn)過程如何能給用戶制造更多驚喜？用戶在PC端看到這個(gè)頁面，能否依然有互動(dòng)樂趣？最終素材的呈現(xiàn)，整個(gè)過程中也有外部伙伴積極配合藝人拍攝的協(xié)調(diào)和執(zhí)行，以及文案的最終潤(rùn)色。從0到1，用創(chuàng)意繼續(xù)玩轉(zhuǎn)移動(dòng)游戲營(yíng)銷從昨晚到今天，很多朋友都有留言問這樣的創(chuàng)意是誰想的，但其實(shí)，一夜之間刷屏的背后是整個(gè)騰訊游戲市場(chǎng)團(tuán)隊(duì)針對(duì)環(huán)境的變化，在思路和做法上不斷的創(chuàng)新的一個(gè)自然而然的結(jié)果，它不是一個(gè)偶然的創(chuàng)意，要知道，移動(dòng)互聯(lián)網(wǎng)時(shí)代，優(yōu)質(zhì)的傳播素材才是核心引爆點(diǎn)，創(chuàng)意與技術(shù)有效結(jié)合，就會(huì)有奇妙的化學(xué)反應(yīng)。事實(shí)上，在移動(dòng)游戲營(yíng)銷領(lǐng)域，請(qǐng)明星來做營(yíng)銷事件并不是很新鮮的事件，但是基于大眾熱點(diǎn)和粉絲需求的洞察，再用技術(shù)和創(chuàng)意來實(shí)現(xiàn)，就會(huì)有與眾不同的效果。當(dāng)然現(xiàn)在看來，這個(gè)素材也有一些缺憾，比如，我們是不是可以錄一段吳亦凡號(hào)召粉絲的話來增加用戶轉(zhuǎn)發(fā)的動(dòng)機(jī)，又比如，我們是不是可以在轉(zhuǎn)發(fā)語上面更增加一點(diǎn)病毒性？不過，從昨晚到現(xiàn)在，我們最開心的是，騰訊游戲能以這樣的形式和用戶進(jìn)行了如此的溝通，并且在移動(dòng)端互動(dòng)廣告的模式里拋出了一個(gè)石子兒，我們期待它能夠引起足夠大的漣漪，讓這個(gè)行業(yè)出現(xiàn)更多精彩的創(chuàng)意。六、最最后，大叔想再對(duì)“技術(shù)即傳播”這個(gè)理論做一個(gè)注解。1、每次出現(xiàn)一個(gè)酷炫的技術(shù)或新玩意，朋友圈就被引爆了，這是去中心化傳播模式的大背景使然。怎么說呢，在以微信為首的社交媒體時(shí)代，傳播者可能不再需要傳統(tǒng)的媒介渠道，比如大號(hào)或門戶，做一個(gè)H5直接“泄露”到朋友圈，只要它酷炫，就會(huì)引起關(guān)注。當(dāng)然，有好的渠道可以縮短引爆的時(shí)間。2、雖然只要有好的技術(shù)就會(huì)帶來大家傳播，但事實(shí)上，技術(shù)永遠(yuǎn)是工具，服務(wù)于創(chuàng)意，而創(chuàng)意才是傳播的本源。比如吳亦凡事件，技術(shù)手段只是實(shí)現(xiàn)了他跳出新聞框的創(chuàng)意。同樣的技術(shù)手段，甚至你使用的更高超，但如果劇情無法匹配，也無法引爆。這是本與末的問題，雖然道理都懂，但