網(wǎng)易噠噠自白：大片級(jí)《英雄》H5是如何誕生的
來(lái)源：網(wǎng)易噠噠
網(wǎng)易噠噠《英雄》H5剛上線(xiàn)，社群“H5行業(yè)情報(bào)群”迅速活躍起來(lái)：
“網(wǎng)易又出大片級(jí)H5了”
“這種是用什么軟件做的？交互感很強(qiáng)”
“想要請(qǐng)教一下，那個(gè)背景像水一樣流動(dòng)的效果是程序?qū)懙膯?？?/p>
……
距離新年簽刷屏過(guò)了3個(gè)月，我們又交出了一份答卷。無(wú)論是故事內(nèi)容、畫(huà)面設(shè)計(jì)，還是交互動(dòng)畫(huà)、滑動(dòng)轉(zhuǎn)場(chǎng)，《英雄》稱(chēng)得上“大片級(jí)”的H5。
這支H5從策劃到上線(xiàn)花了一個(gè)多月的時(shí)間，延遲多天才發(fā)布。
這段日子我們都干了那些事呢？每一天都沒(méi)有浪費(fèi)。
掃描二維碼，體驗(yàn)《英雄》！
（數(shù)英APP用戶(hù)需點(diǎn)擊放大二維碼，長(zhǎng)按識(shí)別）
一、為什么選擇環(huán)保主題
水深8000米以上的世界最深海溝淪為塑料碎片的垃圾場(chǎng)，海洋中的動(dòng)物體內(nèi)含有塑料微粒。
菲律賓南岸擱淺而亡的鯨魚(yú)腹中有80斤塑料垃圾，鯨魚(yú)死亡時(shí)想到的會(huì)不會(huì)是解脫？
去年刷屏的《自白》讓我們注意到了“保護(hù)動(dòng)物”沉重主題，依然適合H5。
《自白》剛一上線(xiàn)就受到用戶(hù)的認(rèn)可，大家很喜歡這種有意義有深度的話(huà)題，帶來(lái)的流量數(shù)據(jù)也讓我們十分欣慰。
甚至有人私信我們：什么時(shí)候出《自白2》？
《自白》上線(xiàn)在“世界動(dòng)物日”前后，而今年3月22日是“世界節(jié)水日”，3月30日是“地球一小時(shí)活動(dòng)”，我們想在這個(gè)時(shí)間節(jié)點(diǎn)做傳播。
于是有了《英雄》這個(gè)H5。
二、“反英雄式”套路
你以為的“英雄必勝”“主角光環(huán)”并不在這支H5中，我們用的是“英雄已死”的反套路。
用戶(hù)的反應(yīng)和我們預(yù)想的一樣，看到英雄死亡時(shí)，會(huì)期待英雄復(fù)活會(huì)有反轉(zhuǎn)，然而英雄就是“死了”，沒(méi)有一個(gè)英雄可以阻擋環(huán)境破壞對(duì)人類(lèi)的影響。
這次的“英雄”不是類(lèi)似外國(guó)的超級(jí)人類(lèi)，他會(huì)戰(zhàn)敗，會(huì)死亡，英雄是不存在的，反英雄主義才是我們的重點(diǎn)。
很多人是“個(gè)體無(wú)用論”的忠實(shí)粉絲，認(rèn)為自己勢(shì)單力薄，無(wú)論是破壞或是保護(hù)只會(huì)有很小的改變。
常推脫道：“我不扔，還有別人也會(huì)扔啊?！?/p>
“我做了，也沒(méi)什么用啊”。
就是這種毫無(wú)責(zé)任的發(fā)言，環(huán)境才會(huì)被不斷破壞。
我們希望《英雄》可以改變?nèi)藗兊乃季S，真正做一些實(shí)際行動(dòng)，團(tuán)結(jié)起來(lái)改變現(xiàn)狀，而不是空談方法論。
現(xiàn)在大家看到的版本是團(tuán)隊(duì)推翻重寫(xiě)，推翻再重寫(xiě)，最終呈現(xiàn)的第四版。我們產(chǎn)出的四版故事，沒(méi)有一個(gè)情節(jié)是相同的。
記憶中的英雄總是身披戰(zhàn)袍配上史詩(shī)級(jí)恢弘的背景音樂(lè)登場(chǎng)，我們也把場(chǎng)景打造的恢宏大氣，一看就是科幻大片的感覺(jué)。
英雄兩次發(fā)招，打出沖擊波對(duì)抗洪水來(lái)襲，發(fā)出的白色炫光在視覺(jué)上具有沖擊力。
三、《英雄》的制作過(guò)程
作為《自白》的兄弟，為何沒(méi)有選擇相同畫(huà)風(fēng)呢？
《自白》的成功可以借鑒但很難復(fù)制，同類(lèi)型的畫(huà)風(fēng)第二次出現(xiàn)，用戶(hù)的新鮮感會(huì)大大降低。
另外，我們想要挑戰(zhàn)自己，用更高的標(biāo)準(zhǔn)要求自己，而不是自我重復(fù)。
除了畫(huà)風(fēng)，文案、故事節(jié)奏、內(nèi)容走向等細(xì)節(jié)改了20多遍。
所以你現(xiàn)在看到的成果，其實(shí)是用加班和脫發(fā)換來(lái)的。
《英雄》的故事內(nèi)容分為兩個(gè)方面，第一部分是人類(lèi)和洪水的斗爭(zhēng)，第二部分是真實(shí)的新聞數(shù)據(jù)。
從篇幅來(lái)看，《英雄》比《自白》故事量更大，幾乎是《自白》的兩倍。
這支H5從策劃到上線(xiàn)一共花了一個(gè)月零一周的時(shí)間，終于推遲到4月3日上線(xiàn)，比預(yù)期上線(xiàn)時(shí)間晚了幾天。
盡管上線(xiàn)日期延后了，但是制作時(shí)間還是很緊張。
《英雄》的畫(huà)面精良度遠(yuǎn)高于《自白》，插畫(huà)、場(chǎng)景、人物更是《自白》的3倍之多。
然而《自白》做了2個(gè)月，《英雄》只有一半時(shí)間。
工期緊，要求高，《英雄》是噠噠團(tuán)隊(duì)有史以來(lái)做過(guò)的最難的項(xiàng)目。
為了趕進(jìn)度，我們?nèi)珕T幾乎是同步無(wú)縫對(duì)接工作。插畫(huà)師先出一部分圖畫(huà)交給動(dòng)效師，動(dòng)效師確定表現(xiàn)形式后立刻交給前端技術(shù)寫(xiě)代碼。
這里要說(shuō)一下團(tuán)隊(duì)人員構(gòu)成：2個(gè)創(chuàng)意策劃，2個(gè)設(shè)計(jì)，動(dòng)效師、插畫(huà)師、前端開(kāi)發(fā)、項(xiàng)目統(tǒng)籌各一個(gè)，一共8個(gè)人。
這次時(shí)間緊急，而英雄的動(dòng)作動(dòng)感十足具有爆發(fā)力，為了達(dá)到預(yù)期效果，我們親自上陣當(dāng)模特，擺拍幫助插畫(huà)師創(chuàng)作。
例如說(shuō)超人發(fā)射光波、跪地死亡，我們是真的像中二病患者一樣發(fā)大招、墊一張紙跪在地上。
設(shè)計(jì)和動(dòng)效制作是整個(gè)H5制作中的品質(zhì)把控階段，每一個(gè)細(xì)微之處，我們都力求做到極致。
《自白》中的畫(huà)面場(chǎng)景是設(shè)計(jì)師制作，人物的繪制由插畫(huà)師來(lái)完成。
有的時(shí)候插畫(huà)師在周末加班工作，策劃小伙伴也要開(kāi)著視頻在線(xiàn)擺動(dòng)作。
兩個(gè)策劃同學(xué)盯進(jìn)度、盯內(nèi)容，甚至還要客串一把演員。
我們就是在有限的碎片化時(shí)間里完成這支H5。
很多H5策劃最后呈現(xiàn)出來(lái)的效果會(huì)跟你預(yù)想的不一樣，根源在于項(xiàng)目團(tuán)隊(duì)缺乏溝通。
每個(gè)人腦子里想象的效果圖都是不一樣的，做每一步的時(shí)候都要積極交流反饋。
把你想要的效果和技術(shù)人員講清楚，讓隊(duì)友明白你的創(chuàng)作思路，判斷這種想法能否實(shí)現(xiàn)、能實(shí)現(xiàn)到什么程度。
當(dāng)然，為了溝通順暢、提出合理的建議，最好能懂一點(diǎn)設(shè)計(jì)和技術(shù)知識(shí)，不要求達(dá)到專(zhuān)家級(jí)別，但要有起碼的審美能力，對(duì)不同畫(huà)風(fēng)有一定的涉獵和感知力，對(duì)前端技術(shù)能實(shí)現(xiàn)到什么樣式有一定的了解。
四、《英雄》的具體細(xì)節(jié)
有一些細(xì)節(jié)不知道你們注意到了嗎：
開(kāi)場(chǎng)掉落的小女孩用到運(yùn)動(dòng)模糊設(shè)計(jì)；
洪水的鬼臉虛晃一下是動(dòng)效師的功勞；
隨著海浪上升的文字帶有水波紋；
畫(huà)面轉(zhuǎn)場(chǎng)用了畫(huà)中畫(huà)的形式，像海浪一樣層層切換。
我們注意到了用戶(hù)的視覺(jué)感受，安插細(xì)微的內(nèi)容設(shè)計(jì)增強(qiáng)用戶(hù)的沉浸感。
但是動(dòng)效有了，H5占的內(nèi)存也大了，我們發(fā)現(xiàn)了很多bug。
《英雄》和《自白》一樣，制作時(shí)都用的Canvas技術(shù)。
《自白》為了在蘋(píng)果和安卓系統(tǒng)上都能不卡頓，也為了實(shí)現(xiàn)單次播放、暫停、循環(huán)動(dòng)畫(huà)的效果，最后改用了更合適的前端實(shí)現(xiàn)形式，開(kāi)發(fā)時(shí)間用了2周多。
我們吸取制作《自白》的經(jīng)驗(yàn)，用同樣的玩法制作《英雄》。
接下來(lái)的測(cè)試階段主要是找出開(kāi)發(fā)中存在的bug，以及測(cè)試H5在不同機(jī)型上的適配度，發(fā)現(xiàn)問(wèn)題及時(shí)與技術(shù)人員溝通，不然可能會(huì)因bug導(dǎo)致傳播中斷。
IPhone 6和iPhone 6p是蘋(píng)果機(jī)型中的bug大戶(hù)，安卓機(jī)型卡頓的概率更高，主要會(huì)出現(xiàn)loading時(shí)間過(guò)長(zhǎng)、英雄發(fā)射光波時(shí)經(jīng)常會(huì)白屏、畫(huà)面突然卡頓刷不動(dòng)，或者閃退重新加載等問(wèn)題。
《英雄》上線(xiàn)前，我們測(cè)試了各種機(jī)型，然后匯總修復(fù)bug，保證上線(xiàn)后的觀看體驗(yàn)反饋好。
五、《英雄》復(fù)盤(pán)反思
有文章說(shuō)到“故事矛盾沖突弱，不像《自白》一樣會(huì)講故事”。
《英雄》和《自白》都是條漫型H5，難免會(huì)被拿來(lái)作比較。
《自白》火了，我們肯定有壓力，但是我們更想要超越自己。
雖然《英雄》沒(méi)能超越《自白》的流量，目前也到百萬(wàn)級(jí)，我們團(tuán)隊(duì)內(nèi)部也對(duì)此進(jìn)行了復(fù)盤(pán)。
根據(jù)我們的監(jiān)測(cè)數(shù)據(jù)顯示，H5前半部分的英雄故事基本沒(méi)有用戶(hù)流失，用戶(hù)流失較嚴(yán)重的地方有兩個(gè)：Loading加載頁(yè)面和環(huán)保新聞案例頁(yè)面。
因代碼包體量過(guò)大，較長(zhǎng)的Loading加載時(shí)長(zhǎng)使很多用戶(hù)在等待的過(guò)程中退出了H5，這一點(diǎn)很好解釋。
但為什么有大量用戶(hù)會(huì)選擇在英雄故事過(guò)渡到新聞案例的地方退出呢？我們推測(cè)原因有下面兩點(diǎn)：
一是枯燥的環(huán)保數(shù)據(jù)在吸引力上遠(yuǎn)遠(yuǎn)低于《自白》中活生生的動(dòng)物案例，部分用戶(hù)反饋像在看科普文，較為無(wú)感。
二是新聞案例數(shù)量太多，很多用戶(hù)在瀏覽過(guò)程中就因?qū)徝榔诙x擇退出H5。
“真實(shí)自有萬(wàn)鈞之力”，但在H5中，真實(shí)的新聞和數(shù)據(jù)或許也需要更多的呈現(xiàn)形式才能降低用戶(hù)的閱讀門(mén)檻，贏得他們的注意力。
勿以善小而不為，勿以惡小而為之。你的每一個(gè)舉動(dòng)都在改變世界。
一個(gè)人的力量很小，但是每個(gè)人都在嘗試改變的話(huà)，量變會(huì)變成質(zhì)變。
只有人類(lèi)自己才能拯救自己，你就是英雄。
如果你想有一些改變，就把這支H5轉(zhuǎn)發(fā)出去，讓更多的人看到它。
數(shù)英用戶(hù)原創(chuàng)，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（2條）