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