网易哒哒自白：大片级《英雄》H5是如何诞生的
来源：网易哒哒
网易哒哒《英雄》H5刚上线，社群“H5行业情报群”迅速活跃起来：
“网易又出大片级H5了”
“这种是用什么软件做的？交互感很强”
“想要请教一下，那个背景像水一样流动的效果是程序写的吗？”
……
距离新年签刷屏过了3个月，我们又交出了一份答卷。无论是故事内容、画面设计，还是交互动画、滑动转场，《英雄》称得上“大片级”的H5。
这支H5从策划到上线花了一个多月的时间，延迟多天才发布。
这段日子我们都干了那些事呢？每一天都没有浪费。
扫描二维码，体验《英雄》！
（数英APP用户需点击放大二维码，长按识别）
一、为什么选择环保主题
水深8000米以上的世界最深海沟沦为塑料碎片的垃圾场，海洋中的动物体内含有塑料微粒。
菲律宾南岸搁浅而亡的鲸鱼腹中有80斤塑料垃圾，鲸鱼死亡时想到的会不会是解脱？
去年刷屏的《自白》让我们注意到了“保护动物”沉重主题，依然适合H5。
《自白》刚一上线就受到用户的认可，大家很喜欢这种有意义有深度的话题，带来的流量数据也让我们十分欣慰。
甚至有人私信我们：什么时候出《自白2》？
《自白》上线在“世界动物日”前后，而今年3月22日是“世界节水日”，3月30日是“地球一小时活动”，我们想在这个时间节点做传播。
于是有了《英雄》这个H5。
二、“反英雄式”套路
你以为的“英雄必胜”“主角光环”并不在这支H5中，我们用的是“英雄已死”的反套路。
用户的反应和我们预想的一样，看到英雄死亡时，会期待英雄复活会有反转，然而英雄就是“死了”，没有一个英雄可以阻挡环境破坏对人类的影响。
这次的“英雄”不是类似外国的超级人类，他会战败，会死亡，英雄是不存在的，反英雄主义才是我们的重点。
很多人是“个体无用论”的忠实粉丝，认为自己势单力薄，无论是破坏或是保护只会有很小的改变。
常推脱道：“我不扔，还有别人也会扔啊。”
“我做了，也没什么用啊”。
就是这种毫无责任的发言，环境才会被不断破坏。
我们希望《英雄》可以改变人们的思维，真正做一些实际行动，团结起来改变现状，而不是空谈方法论。
现在大家看到的版本是团队推翻重写，推翻再重写，最终呈现的第四版。我们产出的四版故事，没有一个情节是相同的。
记忆中的英雄总是身披战袍配上史诗级恢弘的背景音乐登场，我们也把场景打造的恢宏大气，一看就是科幻大片的感觉。
英雄两次发招，打出冲击波对抗洪水来袭，发出的白色炫光在视觉上具有冲击力。
三、《英雄》的制作过程
作为《自白》的兄弟，为何没有选择相同画风呢？
《自白》的成功可以借鉴但很难复制，同类型的画风第二次出现，用户的新鲜感会大大降低。
另外，我们想要挑战自己，用更高的标准要求自己，而不是自我重复。
除了画风，文案、故事节奏、内容走向等细节改了20多遍。
所以你现在看到的成果，其实是用加班和脱发换来的。
《英雄》的故事内容分为两个方面，第一部分是人类和洪水的斗争，第二部分是真实的新闻数据。
从篇幅来看，《英雄》比《自白》故事量更大，几乎是《自白》的两倍。
这支H5从策划到上线一共花了一个月零一周的时间，终于推迟到4月3日上线，比预期上线时间晚了几天。
尽管上线日期延后了，但是制作时间还是很紧张。
《英雄》的画面精良度远高于《自白》，插画、场景、人物更是《自白》的3倍之多。
然而《自白》做了2个月，《英雄》只有一半时间。
工期紧，要求高，《英雄》是哒哒团队有史以来做过的最难的项目。
为了赶进度，我们全员几乎是同步无缝对接工作。插画师先出一部分图画交给动效师，动效师确定表现形式后立刻交给前端技术写代码。
这里要说一下团队人员构成：2个创意策划，2个设计，动效师、插画师、前端开发、项目统筹各一个，一共8个人。
这次时间紧急，而英雄的动作动感十足具有爆发力，为了达到预期效果，我们亲自上阵当模特，摆拍帮助插画师创作。
例如说超人发射光波、跪地死亡，我们是真的像中二病患者一样发大招、垫一张纸跪在地上。
设计和动效制作是整个H5制作中的品质把控阶段，每一个细微之处，我们都力求做到极致。
《自白》中的画面场景是设计师制作，人物的绘制由插画师来完成。
有的时候插画师在周末加班工作，策划小伙伴也要开着视频在线摆动作。
两个策划同学盯进度、盯内容，甚至还要客串一把演员。
我们就是在有限的碎片化时间里完成这支H5。
很多H5策划最后呈现出来的效果会跟你预想的不一样，根源在于项目团队缺乏沟通。
每个人脑子里想象的效果图都是不一样的，做每一步的时候都要积极交流反馈。
把你想要的效果和技术人员讲清楚，让队友明白你的创作思路，判断这种想法能否实现、能实现到什么程度。
当然，为了沟通顺畅、提出合理的建议，最好能懂一点设计和技术知识，不要求达到专家级别，但要有起码的审美能力，对不同画风有一定的涉猎和感知力，对前端技术能实现到什么样式有一定的了解。
四、《英雄》的具体细节
有一些细节不知道你们注意到了吗：
开场掉落的小女孩用到运动模糊设计；
洪水的鬼脸虚晃一下是动效师的功劳；
随着海浪上升的文字带有水波纹；
画面转场用了画中画的形式，像海浪一样层层切换。
我们注意到了用户的视觉感受，安插细微的内容设计增强用户的沉浸感。
但是动效有了，H5占的内存也大了，我们发现了很多bug。
《英雄》和《自白》一样，制作时都用的Canvas技术。
《自白》为了在苹果和安卓系统上都能不卡顿，也为了实现单次播放、暂停、循环动画的效果，最后改用了更合适的前端实现形式，开发时间用了2周多。
我们吸取制作《自白》的经验，用同样的玩法制作《英雄》。
接下来的测试阶段主要是找出开发中存在的bug，以及测试H5在不同机型上的适配度，发现问题及时与技术人员沟通，不然可能会因bug导致传播中断。
IPhone 6和iPhone 6p是苹果机型中的bug大户，安卓机型卡顿的概率更高，主要会出现loading时间过长、英雄发射光波时经常会白屏、画面突然卡顿刷不动，或者闪退重新加载等问题。
《英雄》上线前，我们测试了各种机型，然后汇总修复bug，保证上线后的观看体验反馈好。
五、《英雄》复盘反思
有文章说到“故事矛盾冲突弱，不像《自白》一样会讲故事”。
《英雄》和《自白》都是条漫型H5，难免会被拿来作比较。
《自白》火了，我们肯定有压力，但是我们更想要超越自己。
虽然《英雄》没能超越《自白》的流量，目前也到百万级，我们团队内部也对此进行了复盘。
根据我们的监测数据显示，H5前半部分的英雄故事基本没有用户流失，用户流失较严重的地方有两个：Loading加载页面和环保新闻案例页面。
因代码包体量过大，较长的Loading加载时长使很多用户在等待的过程中退出了H5，这一点很好解释。
但为什么有大量用户会选择在英雄故事过渡到新闻案例的地方退出呢？我们推测原因有下面两点：
一是枯燥的环保数据在吸引力上远远低于《自白》中活生生的动物案例，部分用户反馈像在看科普文，较为无感。
二是新闻案例数量太多，很多用户在浏览过程中就因审美疲劳而选择退出H5。
“真实自有万钧之力”，但在H5中，真实的新闻和数据或许也需要更多的呈现形式才能降低用户的阅读门槛，赢得他们的注意力。
勿以善小而不为，勿以恶小而为之。你的每一个举动都在改变世界。
一个人的力量很小，但是每个人都在尝试改变的话，量变会变成质变。
只有人类自己才能拯救自己，你就是英雄。
如果你想有一些改变，就把这支H5转发出去，让更多的人看到它。
数英用户原创，转载请联系原作者
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（2条）