爆款团队内部复盘公开：关于《人生必做100件事》H5的一切
来源：网易H5
这两天，很多人都在朋友圈晒出了《人生必做的100件事》。
从2月21日晚上6点至今，这个H5点击量达到2300万，同名微博话题也有2400万阅读。
“一辈子很短，要把时间花在有意义的事上。” 忙碌的生活让人们忘记时间的流逝，繁琐低效的生活很容易让人们丧失热情。 而这支H5，点燃了大家对生活的热情，对自己的人生有了新的期待。 网易哒哒也再一次证明： H5依旧是刷屏利器。
我们采访了哒哒的策划同事，全面还原这支爆款H5的一切，相信可以带给你不少启发。
01
H5的创意思路
一开始，网易哒哒就把H5的选题方向定在“清单”类内容，打算做一个让大家都能参与进来、并且都愿意分享的H5。 按照这个思路去找能覆盖更多人、与大家生活强相关的选题，于是又将思路细化为“人生清单”。
接下来需要对选题是否具有讨论度进行验证。 在搜索的过程中，哒哒团队看到很多关于“人生必看的100本好书”、“人生必看的100部高分电影”、“100条遗愿清单”、“100件情侣必做的小事”这类完成事项的选题热度颇高。
把清单内容框定为100件事，比单纯的“人生清单”更加具体，又能在数字上产生更明显的差异化，所以最后就将主题定为《人生必做的100件事》。 总有人认为，自己还年轻，什么事都还早，殊不知时间就是这样一点点在流逝。 现在，《人生必做的100件事》来提醒你：你还有很多事没做过。
有的人说，这支H5是在给我们的人生设限，其实不然。 人生并没有限制，哒哒团队只是把大家对人生的经历和憧憬单独拿出来，汇总成“可供参考的人生”。 当你在观看别人的人生时，也是在回忆自己的生活。
你会因为想到，自己曾错过一场校园恋爱而遗憾；也会想起和喜欢的人用一个耳机听歌时的脸红心跳。 你以为的平淡生活，其实挺有意义。
02
内容筛选
100件事的筛选，可以说是整个H5策划中最艰难的一步。 网易哒哒的策划团队，在各种网站上筛选了大量的资料，调研更多人认为的“人生必做的事”。 然后是内部反复投票，让大家选出“最想做的”、“最遗憾的”、“最没感觉的”。 一遍遍的筛选，花费了不少时间。
牵动情感，用户强相关
由于是“人生必做的100件事”，过于小众和个性化自然不行，这些选项应该上覆盖更多普通人，有很多人经历过、憧憬过、遗憾过的事。 还有一些事相对而言比较普通，比如带隐形眼镜、打耳洞等，虽然很多人经历过，但是没什么意义，不能联系到什么情感和回忆。 所以这类选项也pass掉。
而跟我们绝大多数人相关的，容易牵动我们情感的事情，大多与亲情、爱情、友情、梦想有关。 于是就有了“拍一次全家福”、“遇到过令你心动的人”、“与朋友彻夜谈心”...... 有网友开玩笑说，这“人生必做的100件事”都是需要钱来完成。 如果真是事事都要雄厚的经济实力，那不如叫“人生做不到的100件事”好了。 “用第一笔工资给父母买礼物”、“给未来的自己写封信”、“ 对家人说我爱你”...... 这些都是再普通不过的人生活中的小确幸，没有任何门槛，但又意义非凡。
而还有一些事，是只有在特定的年龄段才会发生，一旦错过，就再也回不去了。 “谈一场校园恋爱”、“邀请亲友参加毕业典礼”......这些没做过，看到就会觉得遗憾。 遗憾 、回忆、感动、启发，这些小小的情感牵扯着我们的心，也让大家对这支H5抱有了别样的感情，也更愿意通过分享它来表达自己。
放宽参与程度
考虑到H5的可玩性，不能把事情都设定的太难完成，也不能都太容易完成。为了防止大家对事件选项的理解不同，文案上会具体落到某件事，也会尽量的放宽参与要求，让大家能够获得更多的满足感。
比如“（曾经/正在）和宠物一同生活”这一条。 如果只是“养一只宠物”，那么一些曾经养过宠物、现在没有养宠物的人可能就会忽略这个选项。 而“曾经和宠物一同生活”，则会唤起很多小时候养过宠物的人的童年回忆。
一些本该被忽略、以为自己没做过的事情，通过放宽的具体描述，可以让很多人想起“啊我原来是做过这样的事的”，能够牵动大家的回忆。
03
视觉设计
整体画风
图案、颜色、文字所呈现给用户良好的视觉印象，能够轻松抓住用户的注意力。 《人生必做的100件事》开屏即是醒目的哒哒黄。 高饱和度的黄色代表着活泼与生机，整支H5色彩鲜艳，传达出的感情丰富多彩，带给人视觉上的动感与张力。
扁平化的插画画风高级但不幼稚，大面积的色块简约直观，尽显摩登与时尚感。 为了确定整支H5的设计风格，设计师多次尝试不同风格的插画，每张插画都与策划及时沟通。
在确认每张画的呈现内容和画面构图之后，再进行下一步的绘制。 哒哒团队希望用精美的图画语言来表现必做之事，所绘制人物时线条柔和，抽象但有韵律，两位设计师加班加点绘制了一周多，才完成100张插画的最终设计。
在上线前，由于封面动画效果，H5加载渲染时间需要约5秒，但为了让参与者立即打开H5，最终上线版本还是减掉了H5封面的动画渲染，保证1秒内可以打开H5。
结果页要素
H5的结果页，要能让用户一眼就牢记主题。分享在朋友圈中，精致的结果页也不会失了逼格，更容易吸引用户的目光。最近，大家总是觉得朋友圈不够刷，希望好友们多发朋友圈，给无聊的自己找到一些乐趣。 这时，分享一张好看的图片到朋友圈，更是收获点赞的好方法。 考虑到100件事的数量，如果单纯地用文字来排列组合成一张海报，未免会有些乏味，视觉上也很难构成强烈的冲击。
因此，哒哒把100件事做成图画。 用户在选择必做之事时，脑海中会不自觉陷入当时的回忆中，对自己的必做之事有一个心理预期。当他们看到图画版的必做之事时，也会有一种熟悉的既视感，唤起情绪共鸣。
结果页中，最亮眼的地方就超大的数字：已完成的数量。 丰富的图画给予用户视觉上的美感，而数字则能直观地刺激到用户心理。 放大的数字突出完成的数量，具有强烈的社交属性，用户的窥探、羡慕和比较情绪由此而生。
04
交互设计
“傻瓜”式的交互玩法， 比起复杂炫酷、不知道从哪下手的交互设计更讨人欢心。 哒哒这次依然使用了简单的交互手势，以保证每个人迅速上手，操作体验更加流畅。 不止如此，一贯严格把控细节和用户体验的哒哒，在交互上还隐藏着种种小心思。
抛弃列表点选，改用弧形滑选
不同于列表排列的flag，H5大胆进行了滑动点选的设计，选择页面就像转盘一样可以360°自由滑动。
考虑到100件事的数量，清单选择型的文字排版很有可能让人看得眼花缭乱，划不到底，即使对主题感兴趣，也不一定能够耐心看完。而环状的排列方式，每组滑到用户屏幕中的选项不超过5个，一共滑动20次左右，保证用户能够看清每件事，并且不会感到烦躁。 搭配清新的音乐节奏，将原本繁多的事项拆分成流星一般，整体感觉十分治愈。
调整事件顺序
在选择页面中，用户点击的顺序对应结果页呈现的位置。用户选择的必做之事越多，海报也会越长。 如果用户想将点击靠后的选项提前，用户可以在H5的右上角处的“收藏夹”里，拖动该选项的位置。
哒哒观察到，很多用户都有着选择困难症，机会在手时总会犹豫不决。 而每位用户在选择必做之事时标准不同，很有可能当时脑子灵光选择的某个选项，之后又开始后悔自己的手太快。 考虑到用户会有反复修改选项的需求，H5从用户体验出发，可以更改事件的位置，给予用户极大的DIY权利，以得到专属自己的个性化结果。
自定义姓名
还有一个最容易被忽略的小细节。 很多H5为了方便用户使用，常会出现自动调取微信头像、名称的情况。 这种“授权调取”的行为，其实藏着很多尴尬。 当海报分享到朋友圈时，如果顶着沙雕网名，或者一串谁都看不懂的文字/符号，去完成人生必做的100件事，总感觉不够应景。 为了避免尴尬，哒哒这支H5选择只读取头像，名字由用户自定义。
05
任何刷屏作品背后，都是对生活和情感的深刻洞察。希望《人生必做的100件事》能够重新唤起大家对生活的期待，等到疫情转好之后，我们才能真正的走出家门，去完成这些“必做的事”。
经授权转载至数英，转载请遵守规范
作者公众号：网易H5（ID: wangyih5）
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（11条）