信息创造价值。在信息创造的诸多价值中，传播知识尤其是向大众传播知识具有最深远的意义。

抖音宣布启动“DOU 知计划”，树立科学思想，崇尚科学精神，助力全民科学素质提升。我们也与抖音一起为此次活动制作了一支预热 H5，这是一支充满“彩蛋”的 H5。

• 客户：抖音
• 团队：TREEDOM 青木
• PM：UU
• 创意：老王 Brain 浩航
• 总监：小柒 Joe01
• 插画+设计：小柒 开志 稊米 Timi 伟培 杰豪
• 动画：Young 小俊
• 三维：Doyz 党振
• 剪辑：小闷
• 音乐音效：小闷
• 开发：锦伟

创意诞生

一开始接到 brief，客户希望通过这支 H5 吸引更多理工科硕博生、科普工作者参加抖音科普大赛。结合目标用户的喜好，我们决定制作一支只有高知人群才能通关的解谜类 H5，客户也十分赞同我们的想法。

但“知识的普惠”是活动的核心，客户内部最终决定让更多普罗大众也共同参与进来。所以我们将题目及玩法的难度降低，同时客户要求问题的设置要基于自然科学领域，而且需要从抖音科普大 v 发布的科普视频中进行筛选。
于是我们开始下一步工作——观看抖音短视频！在眼睛奋战几个小时后，我们在几百个视频中发现了很多有趣好玩的知识点，经过重重筛选，将选中的知识点设置成以下四道题。

交互逻辑

为了让客户和内部伙伴更直观的看到我们创意概念的内容，我们把创意整理转换成分镜交互图的方式，把想要展现的内容和重要的交互逻辑表达出来。每次执行项目的时候，我们会十分重视前期的这个步骤，前期需要通过这份交互稿与客户达成预期的执行效果。

主星球二维绘制

知识是无穷无尽的，就如浩瀚宇宙般，同时借势近期大热的科幻题材，我们决定采宇宙星球作为 H5 主体元素，整体风格以科技未来感为主。，顺着这个方向做出了第一稿设计方向，而这部分的设定会直接影响到后续的平面稿绘制，因此在动手之前找出相应的参考方向，需要达到的绘制质量，配色以及背景的氛围烘托。

第一稿的设定方向基本被飞了，与客户沟通后得到的反馈是因为最初的这几个星球设定，

1. 上面的细节过于繁复，机械材质感太强需要削弱
2. 星球相同的材质结构太过于相似，需要拉开
3. 生物和化学星球上的纹理复杂不利于用户理解
4. 不同星球的性格颜色需要拉开

下面整理的截图是二维设定定稿的方向。我们将生物学、天文学、物理学、化学分别设计成四个不同的星球，为了更好的区分，采用具有代表性的图标和色调作为识别符号，同时也对每个星球进行命名。每个星球内都是不同的场景设定，而且场景内充满了细节元素及小彩蛋，让用户在体验时获得惊喜感。

主星球三维动画预演

在这个项目中其中一个困难的坏节是制作主星球打开后分离出五颗星球的坏节，这一模块星球的透视会随着镜头的移动而改变，所以需要运用到三维建模的方式搭建这一场景。在前期设定稿的推进和经验丰富的后期团队顺利完成这困难的部分。

搭建三维模型

三维动画预演

为了让五颗精灵球能够准确与大球合，需要用三维搭建场景模拟画面，通过单独控制摄像机和大球打开的方式输出交给后去合成。庆幸公司坐拥后期的几位大大对每个球体细节和动作转场的一遍遍修改优化，最后达到超出预期的效果。

星球场景设计

我们将生物学、天文学、物理学、化学分别设计成四个不同的星球，为了更好的区分，采用具有代表性的图标作为识别符号，同时也对每个星球进行命名。每个星球内都是不同的场景设定，而且场景内充满了细节元素及小彩蛋，让用户在体验时获得惊喜感。（以下内容涉及通关攻略，体验完 H5 后观看更佳哦）

远祖星球

第一个关卡比较简单，用户需要在场景中找出人类的祖先，也就是皮卡虫。我们也在场景中融入其他生物进行混淆视听，而且根据每个生物的特点设计了不同的交互动画。如在设计猛犸象的动画时，我们将保护动物的倡导融入其中，设计猛犸象长出珍贵的象牙，同时发出倡导“没有买卖，就没有伤害”。

关键词：细胞 生物 植物 单细胞生物 恐龙 科技 未来 进化 猴子 两栖生物 实验 试验标本 培养皿

时空星球

这道題目的诵关攻略就是拖动黑板擦，将黑板上的月球擦除。但我们在体验版进行测试后发现，由于第一道题的最终结果是点击操作，导致用户在此关卡也下意识进行点击，不知道进行拖动操作，所以我们基于用户体验第一的准则，在黑板擦上增加了箭头提示，降低难度。

场景内也埋着各种彩蛋，在 GEB 书中，夹着“42”的书签，这是宇宙最神奇的数字，也是科幻迷才懂的梗；点击钢琴，会出现一小段巴赫的平均律；望远镜中藏着外星人；黑板上有人类首次登月的标记及时间等等。

关键词：书本 时钟 黑洞 莫比乌斯环 GEB 数学公式 数据 信息图表 银河系 火箭 太空

原力星球

要让超导体悬浮于磁性轨道，就需要傾倒液氮，对超导体进行降温后，即可悬浮起来。同样在户体验测试后，我们在液氮元素上增加了冒烟动效进行凸显，降低通关难度。

我们也在场景中埋了各种彩蛋，薛定谔的猫；芝诺的乌龟；辉光管时钟；牛顿摆等等。

关键词：装置 超导体 实验室 器材 黄金分割 时钟 万有引力 黑洞 磁悬浮 机械 液氮 二极管

魔力星球

这道題我们一开始的设定是将答案隐藏在纸上，用户只要点燃酒精灯，即可过关。但为了可玩性更高一些，我们加大了一点难度，在点选时设置了先后顺序，需要先点击牛奶，冉点击酒精灯才能成功过关，你 get 到了吗？

为了混淆视听，我们在场景中加入了门捷列夫和居里夫人的肖像。贱兮兮地问一句，你们是不是一开始就选择了门捷列夫？（備笑 ing)这个场景也同样少不了有趣的交互动画，如门捷列夫调皮地拿出元素周期表，居里夫人将元素结构式戴在眼睛上。

关键词：H20 反应堆 基因 化学器皿 分子 丹药 元素周期表 门捷列夫 分子结构 放射性

DOU 知星球

这是整个 H5 的最后一道题，看似最难其实最简单，现在敲黑板划重点啦，不懂的同学集中精神！
“万物皆虚，万事皆允”源于游戏《刺客信条》，此格言达的是．世间万物无常，总不会维持同样的状态，因此不应过于被旧有的思想所控制；当身处困境时，要记住总会有另一条路。

所以这道题无论你输入什么答案，只要勇敢点击确认，即可通关，意不意外，惊不惊喜！同时，这句话也点明了整个 H5 主题，勇于冒险，多去尝试，世界万物的奇奥，只等我们去探索！

每个场景中还有其他有趣的小彩蛋，在这不多做介绍了，你们可以好好探索一下。为了让用户能成功通关，我们在每个场景中设置了提示，当用户在巧 s 后仍解答不出时，球上的图标会转变成 tips，可点击查看。

每道題过关后，我们也会对相应的知识点进行科晋。当时在做这个场景设计的时候，老板说了里面有一个细节部分，颠覆了我当时对这种结构设计的认知。意思是，在设计这种机械机构的时候，需要了解清楚其运转的原理，而不是看到某几张设计稿上的设计结构很帅很酷，把它们拆解直接组装到自己的设计稿上的。

交互设计

我们希望用户在打开 H5 后，从[oading 页可以玩起来，所以将这支 H5 的[oading 页设计成神秘的纵深空间，技术上运用了陀螺仪功能，当摆动手枧时，形成视觉差，纵深空间运动起来。

为了实现上面 G|F 里一层层关系透进去的效果，需要在 PS 里面单独把每一层的亮面、投影和黑色块，三块图层一次分出来，方便开发用最小的文件达到动画的效果。

为了让解谜交互的过程更加流畅，我们采用了 2D 游戏引擎进行代码编写。而且这次的素材文件多且大，我们也通过技术在保证素材质量的同时进行了极限压缩。