这两天，很多人都在朋友圈晒出了《人生必做的 100 件事》。

从 2 月 21 日晚上 6 点至今，这个H5 点击量达到 2300 万，同名微博话题也有 2400 万阅读。

“一辈子很短，要把时间花在有意义的事上。”

忙碌的生活让人们忘记时间的流逝，繁琐低效的生活很容易让人们丧失热情。

而这支H5，点燃了大家对生活的热情，对自己的人生有了新的期待。

网易哒哒也再一次证明：

H5 依旧是刷屏利器。

我们采访了哒哒的策划同事，全面还原这支爆款H5 的一切，相信可以带给你不少启发。

一开始，网易哒哒就把H5 的选题方向定在“清单”类内容，打算做一个让大家都能参与进来、并且都愿意分享的H5。

按照这个思路去找能覆盖更多人、与大家生活强相关的选题，于是又将思路细化为“人生清单”。

接下来需要对选题是否具有讨论度进行验证。

在搜索的过程中，哒哒团队看到很多关于“人生必看的 100 本好书”、“人生必看的 100 部高分电影”、“ 100 条遗愿清单”、“ 100 件情侣必做的小事”这类完成事项的选题热度颇高。

把清单内容框定为 100 件事，比单纯的“人生清单”更加具体，又能在数字上产生更明显的差异化，所以最后就将主题定为《人生必做的 100 件事》。

总有人认为，自己还年轻，什么事都还早，殊不知时间就是这样一点点在流逝。

现在，《人生必做的 100 件事》来提醒你：你还有很多事没做过。

有的人说，这支H5 是在给我们的人生设限，其实不然。

人生并没有限制，哒哒团队只是把大家对人生的经历和憧憬单独拿出来，汇总成“可供参考的人生”。

当你在观看别人的人生时，也是在回忆自己的生活。

你会因为想到，自己曾错过一场校园恋爱而遗憾;也会想起和喜欢的人用一个耳机听歌时的脸红心跳。

你以为的平淡生活，其实挺有意义。

100 件事的筛选，可以说是整个H5 策划中最艰难的一步。

网易哒哒的策划团队，在各种网站上筛选了大量的资料，调研更多人认为的“人生必做的事”。

然后是内部反复投票，让大家选出“最想做的”、“最遗憾的”、“最没感觉的”。

一遍遍的筛选，花费了不少时间。

| 牵动情感，用户强相关

由于是“人生必做的 100 件事”，过于小众和个性化自然不行，这些选项应该上覆盖更多普通人，有很多人经历过、憧憬过、遗憾过的事。

还有一些事相对而言比较普通，比如带隐形眼镜、打耳洞等，虽然很多人经历过，但是没什么意义，不能联系到什么情感和回忆。

所以这类选项也pass掉。

而跟我们绝大多数人相关的，容易牵动我们情感的事情，大多与亲情、爱情、友情、梦想有关。

于是就有了“拍一次全家福”、“遇到过令你心动的人”、“与朋友彻夜谈心”......

有网友开玩笑说，这“人生必做的 100 件事”都是需要钱来完成。

如果真是事事都要雄厚的经济实力，那不如叫“人生做不到的 100 件事”好了。

“用第一笔工资给父母买礼物”、“给未来的自己写封信”、“ 对家人说我爱你”...... 

这些都是再普通不过的人生活中的小确幸，没有任何门槛，但又意义非凡。

而还有一些事，是只有在特定的年龄段才会发生，一旦错过，就再也回不去了。

“谈一场校园恋爱”、“邀请亲友参加毕业典礼”......这些没做过，看到就会觉得遗憾。

遗憾 、回忆、感动、启发，这些小小的情感牵扯着我们的心，也让大家对这支H5 抱有了别样的感情，也更愿意通过分享它来表达自己。

| 放宽参与程度

考虑到H5 的可玩性，不能把事情都设定的太难完成，也不能都太容易完成。

为了防止大家对事件选项的理解不同，文案上会具体落到某件事，也会尽量的放宽参与要求，让大家能够获得更多的满足感。

比如“(曾经/正在)和宠物一同生活”这一条。

如果只是“养一只宠物”，那么一些曾经养过宠物、现在没有养宠物的人可能就会忽略这个选项。

而“曾经和宠物一同生活”，则会唤起很多小时候养过宠物的人的童年回忆。

一些本该被忽略、以为自己没做过的事情，通过放宽的具体描述，可以让很多人想起“啊我原来是做过这样的事的”，能够牵动大家的回忆。

| 整体画风

图案、颜色、文字所呈现给用户良好的视觉印象，能够轻松抓住用户的注意力。

《人生必做的 100 件事》开屏即是醒目的哒哒黄。

高饱和度的黄色代表着活泼与生机，整支H5 色彩鲜艳，传达出的感情丰富多彩，带给人视觉上的动感与张力。

扁平化的插画画风高级但不幼稚，大面积的色块简约直观，尽显摩登与时尚感。

为了确定整支H5 的设计风格，设计师多次尝试不同风格的插画，每张插画都与策划及时沟通。

在确认每张画的呈现内容和画面构图之后，再进行下一步的绘制。

哒哒团队希望用精美的图画语言来表现必做之事，所绘制人物时线条柔和，抽象但有韵律，两位设计师加班加点绘制了一周多，才完成 100 张插画的最终设计。

在上线前，由于封面动画效果，H5 加载渲染时间需要约 5 秒，但为了让参与者立即打开H5，最终上线版本还是减掉了H5 封面的动画渲染，保证 1 秒内可以打开H5。

| 结果页要素

H5 的结果页，要能让用户一眼就牢记主题。分享在朋友圈中，精致的结果页也不会失了逼格，更容易吸引用户的目光。

最近，大家总是觉得朋友圈不够刷，希望好友们多发朋友圈，给无聊的自己找到一些乐趣。

这时，分享一张好看的图片到朋友圈，更是收获点赞的好方法。

考虑到 100 件事的数量，如果单纯地用文字来排列组合成一张海报，未免会有些乏味，视觉上也很难构成强烈的冲击。

因此，哒哒把 100 件事做成图画。

用户在选择必做之事时，脑海中会不自觉陷入当时的回忆中，对自己的必做之事有一个心理预期。

当他们看到图画版的必做之事时，也会有一种熟悉的既视感，唤起情绪共鸣。

结果页中，最亮眼的地方就超大的数字：已完成的数量。

丰富的图画给予用户视觉上的美感，而数字则能直观地刺激到用户心理。

放大的数字突出完成的数量，具有强烈的社交属性，用户的窥探、羡慕和比较情绪由此而生。

“傻瓜”式的交互玩法， 比起复杂炫酷、不知道从哪下手的交互设计更讨人欢心。

哒哒这次依然使用了简单的交互手势，以保证每个人迅速上手，操作体验更加流畅。

不止如此，一贯严格把控细节和用户体验的哒哒，在交互上还隐藏着种种小心思。

| 抛弃列表点选，改用弧形滑选

不同于列表排列的flag，H5 大胆进行了滑动点选的设计，选择页面就像转盘一样可以360°自由滑动。

考虑到 100 件事的数量，清单选择型的文字排版很有可能让人看得眼花缭乱，划不到底，即使对主题感兴趣，也不一定能够耐心看完。

而环状的排列方式，每组滑到用户屏幕中的选项不超过 5 个，一共滑动 20 次左右，保证用户能够看清每件事，并且不会感到烦躁。

搭配清新的音乐节奏，将原本繁多的事项拆分成流星一般，整体感觉十分治愈。

| 调整事件顺序

在选择页面中，用户点击的顺序对应结果页呈现的位置。用户选择的必做之事越多，海报也会越长。

如果用户想将点击靠后的选项提前，用户可以在H5 的右上角处的“收藏夹”里，拖动该选项的位置。

哒哒观察到，很多用户都有着选择困难症，机会在手时总会犹豫不决。

而每位用户在选择必做之事时标准不同，很有可能当时脑子灵光选择的某个选项，之后又开始后悔自己的手太快。

考虑到用户会有反复修改选项的需求，H5 从用户体验出发，可以更改事件的位置，给予用户极大的DIY权利，以得到专属自己的个性化结果。

| 自定义姓名

还有一个最容易被忽略的小细节。

很多H5 为了方便用户使用，常会出现自动调取微信头像、名称的情况。

这种“授权调取”的行为，其实藏着很多尴尬。

当海报分享到朋友圈时，如果顶着沙雕网名，或者一串谁都看不懂的文字/符号，去完成人生必做的 100 件事，总感觉不够应景。

为了避免尴尬，哒哒这支H5 选择只读取头像，名字由用户自定义。

任何刷屏作品背后，都是对生活和情感的深刻洞察。

希望《人生必做的 100 件事》能够重新唤起大家对生活的期待，等到疫情转好之后，我们才能真正的走出家门，去完成这些“必做的事”。