编者按:本文来自微信微信官方账号“网易H5”，由36Kr授权发布。
作者|久其焦士武
编辑|久其
这两天，很多人在朋友圈晒出了“人生要做的100件事”。
自2月21日下午6点以来，这个H5话题已经达到了2300万次点击，同名微博的话题也被2400万人阅读。
"生命短暂，所以你应该把它花在有意义的事情上。"
忙碌的生活让人忘记了时间的流逝，繁琐低效的生活很容易让人失去热情。
这个H5点燃了每个人对生活的热情，他们对自己的生活有了新的期望。
网易再次证明了:
H5仍然是一把锋利的刷子。
我们采访了大大的策划同事，完整还原了H5这次爆炸的一切。相信能给你很多启发。
01.H5的创作理念
当初网易决定选择H5作为“榜单”内容，打算做一个大家都可以参与和分享的H5。
按照这个思路，我们会找到能够覆盖更多人的话题，与每个人的生活都有很强的关联性，所以我们会把思路提炼为“生活清单”。
接下来要验证所选话题是否有讨论度。
在寻找的过程中，大大的团队看到了很多关于“人生必看的100本好书”、“人生必看的100部高分电影”、“100个遗愿清单”、“情侣必做的100件小事”的话题。
清单的内容被框定为100件事，比简单的“人生清单”更具体，能产生更明显的数字差异，所以最后的主题是“人生要做的100件事”。
有些人总以为自己还年轻，做什么都为时过早，却不知道时间只是在流逝。
现在，《人生必须做的100件事》提醒你:还有很多事你没做。
有人说这个H5限制了我们的生活，但事实并非如此。
人生无止境。哒哒团队只是把每个人对生活的体验和憧憬单独拿出来，总结成一个“可供参考的人生”。
当你在观察别人的生活时，你也在回忆自己的生活。
你会后悔错过了一场校园恋爱；我也会想起我喜欢的人带着耳机听歌时的脸红心跳。
你认为平淡的生活其实挺有意义的。
2.内容筛选
100件事的筛选可以说是整个H5规划中最难的一步。
网易的策划团队在各种网站上筛选了大量信息，调查更多人认为“人生必须做的事”是什么。
然后再重复内部投票，让大家选出“最想做的事”、“最后悔的事”、“最没感觉的事”。
花了很多时间反复筛选。
影响，和用户有很强的相关性。
因为是“人生要做的100件事”，太小太个性化自然不行。这些选项应该覆盖更多的普通人，有很多人经历过，向往过，后悔过的事情。
其他的比较常见，比如戴隐形眼镜，打耳洞等。虽然很多人都经历过，但毫无意义，无法与任何情绪或记忆联系在一起。
所以这种选择也是过关的。
而与我们大多数人相关的，容易影响我们情绪的事情，大多与家庭、爱情、友情、梦想有关。
于是就有了“拍全家福”、“遇见让你兴奋的人”、“和朋友彻夜畅谈”......
有网友戏称，“人生必做的100件事”都需要钱来完成。
如果真的什么事情都需要强大的经济实力，那不如称之为“人生不能做的100件事”。
“用第一份工资给爸妈买个礼物”“给未来的自己写封信”“告诉家人我爱你”......
这些都是普通人生活中的小幸运，没有任何门槛，却意义非凡。
而且有些事情只发生在特定的年龄段。一旦错过，就再也回不去了。
“谈一场校园恋情”，“邀请亲朋好友参加毕业典礼”......这些都没有做到，看到会觉得遗憾。
遗憾、回忆、感受、启发，这些小小的感受牵扯着我们的内心，也让每个人对这个H5产生了不同的感受，更愿意通过分享来表达自己。
放松参与度
考虑到H5的可玩性，我们不能把一切都做得太难完成，也不能把一切都做得太容易完成。
为了防止大家对活动选项有不同的理解，文案会落下一些东西，尽可能放宽参与要求，让大家得到更多的满足。
比如“和宠物一起生活”。
如果只是“养宠物”，那么一些以前养宠物，现在不养宠物的人可能会忽略这个选项。
而《曾经和宠物一起生活》会唤起很多小时候养过宠物的人的童年回忆。
一些本该被忽略、以为自己没做过的事情，通过放松具体的描述，可以让很多人想起“啊，我以前也做过这样的事”，可以影响到每个人的回忆。
3.视觉设计
整体绘画风格
图案、色彩、文字呈现给用户良好的视觉印象，很容易抓住用户的注意力。
“你一生中必须做的100件事”打开时是醒目的黄色。
饱和度高的黄色代表活泼和活力，整个H5色彩鲜艳，传达出丰富多彩的感觉，给人带来运动和张力的视觉感受。
平面插画风格高级但不幼稚，大面积色块简洁直观，彰显现代时尚感。
为了确定整个H5的设计风格，设计师尝试了几种不同风格的插画，每幅插画都及时与策划人沟通。
确认每张图片的展示内容和画面构图后，进行下一张图。
「团队希望用精致的绘画语言来表达必须要做的事情。画人物时，线条柔和，抽象但有节奏。两位设计师加班一个多星期，完成了100幅插画的最终设计。
上线前，由于封面的动画效果，H5加载渲染大概需要5秒钟。但为了让参与者能立即打开H5，最终网络版中减少了H5封面的动画渲染，让H5能在1秒内打开。
结果页面元素
H5结果页面，让用户可以一目了然地记住主题。在分享朋友圈，精致的结果页面不会失去力度，更容易吸引用户的注意力。
最近大家总觉得朋友圈不够用。希望朋友们能多交朋友，给无聊的自己找点乐子。
这个时候，把一张美丽的图片分享到朋友圈，是一个收获赞的好方法。
考虑到100个东西的数量，如果只是简单的用文字排列组合成一张海报，会有些枯燥，很难形成强烈的视觉冲击。
所以，哒哒把100样东西做成图片。
用户在选择自己要做的事情时，脑海中会不自觉地陷入当时的回忆，对自己要做的事情有一个心理预期。
当他们看到必做的图片版时，也会产生熟悉的视觉感，引起情感共鸣。
在成绩页面中，最吸引人眼球的地方是那个巨大的数字:完成量。
丰富的图片给用户视觉上的美感，而数字可以直观的刺激用户的心理。
放大数字突出完成数量，具有很强的社交属性，产生用户窥探、羡慕、攀比的情绪。
4.交互式设计
“傻子”互动游戏比复杂酷炫又不知道从何下手的互动设计更讨喜。
①这次还是采用简单的交互手势，保证大家都能快速上手，操作体验更流畅。
更何况细节和用户体验总是被严格控制，交互中隐藏着各种心思。
放弃列表单击，改用弧形滑动。
与列表中排列的旗帜不同，H5大胆设计了滑动点击，选择页面可以像转盘一样360°自由滑动。
考虑到100件事情的数量，列表式排版很可能让人眼花缭乱，看不完。即使他们对题目感兴趣，也不一定能耐心看完。
圆形排列，每组不超过5个选项在用户屏幕上滑动，总共滑动20次左右，以确保用户可以看清一切，不会感到烦躁。
配合清新的音乐节奏，将原本众多的物品拆分成流星，整体感觉很治愈。
调整事件的顺序
在选择页面中，用户单击的顺序对应于显示结果页面的位置。用户选择做的越多，海报就越长。
如果用户想要提前点击稍后选项，用户可以在H5右上角的收藏夹中拖动该选项的位置。
据观察，很多用户选择困难，有机会也总是犹豫不决。
每个用户在选择他必须做的事情时有不同的标准。很有可能是他当时大脑选择了一个选项，然后开始后悔自己手太快了。
考虑到用户会有反复修改选项的需求，H5可以从用户体验出发，改变事件发生的地点，并给予用户极大的DIY权限，以获得自己个性化的结果。
自定义名称
有一个最容易被忽略的小细节。
为了方便用户使用，许多H5用户经常自动获得他们的微信头像和名字。
这种“授权通话”的行为，其实隐藏了很多尴尬。
海报分享给朋友的时候，用沙雕的网名或者一串没人看得懂的文字/符号来完成人生必须做的100件事，总觉得力不从心。
为了避免尴尬，这个H5选择只读头像，名字由用户自定义。
任何刷屏作品的背后，都是对生活和情感的深刻洞察。
希望《人生100件要做的事》能再次唤起人们对生活的期待，在疫情转好的时候，我们能真正走出家门，完成这些“要做的事”。
