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