又刷屏了，关于《人生必做100件事》H5的一切

编者按：本文来自微信公众号“网易H5”（ID:wangyih5），36氪经授权发布。

作者 | 玖柒&蕉十五

编辑 | 玖柒

这两天，很多人都在朋友圈晒出了《人生必做的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选择只读取头像，名字由用户自定义。

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

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