如何给儿童做设计？腾讯这个实战案例太赞了！

编者按：如何让活泼好动，注意力跳脱的孩子也能专心学习？腾讯这个实战案例，告诉你这些设计技巧！

把生动有趣的学习内容，用一条穿越时空的路径慢慢展现出来，腾讯的 ABCmouse 让孩子在游玩的过程中学到英语知识，得到有效的学习成长，让他们喜欢成为学习路径上的主角。

一、分析

1. 静止的场景

学习路径是把课程的内容在模拟的场景中按照循序渐进的方式呈现出来。在梳理原本的场景过程中，发现主要是由场景、人物、课程点（路径）、导航四个要素组成，在每个的路径点上都会承载这个 Level 的课程内容，发现原本学习路径存在3个困境：

• 场景：画面少，没有先后顺序。在300多节课程内容上，场景重复使用。
• 交互UI：课程点小，操作增加了困难，课程点过多，学习的过程中产生压力。
• 人物：单一，在场景中的扮演没有结合场景。

对在整个的场景的分析，找出利弊的突出点。在往后的再设计过程中，对延续有利的优点和改善突出弊端提供更好的帮助。

利：

• 场景的写实，接近真实
• 内容多，展示全
• 颜色丰富多彩

弊：

• 入口多，干扰了主路径的学习操作
• 课程点的已学和未学的区分不清晰
• 人物上的学习活动气泡对课程点的叠加造成操作干扰

2. 路上的期望

家长在选择学习产品的时候，首先是考虑对小孩是有效的。

我们在设计产品时，更多需要考虑，小孩在实际的使用中也是有效的，不仅对课程本身的考验，也是对界面引导操作上的考验，让小孩更容易得到学习的内容知识。

对原场景的使用和分析，在学习路径场景重新设计前，对自身提出了问题：什么对孩子是最重要的？场景设计的目标是什么？

孩子在使用产品的过程中能得到有效的学习，语言能力得到一定的进步和成长，无疑是家长们最期望的效果。

3. 设计目标

对于3-8岁的孩子来说，太多的吸引点会分散他们的注意力，为了孩子把注意力多停留在课程的活动内容上，设计上需要做减法。把场景内容的主次排序了优先级，提高路径的清晰度，减少其他界面的入口，不被其他干扰。

最终的目的是以学习路径的课程为主，路径上能延续承载海量的学习内容，让孩子在使用的过程都关注在路径课程上，让孩子能够得到有效的学习成果。

二、理念

1. 重新设定

构思

创新需要打破原有的框架，重新定义和规范。创意来源于中国的长卷轴画，在一条整体的画卷会有不同的场景，打破了原有场景之间的独立性，让学习之路更具有连贯性，体验更自然。

元素

人物：在路径的升级中，角色设计也符合场景变化

时间：模拟生命进化和历史发展

空间：根据不同的时间阶段来展现不同的时代环境

脚本

根据构思设计了场景的脚本，不管是生命起源、地形地貌还是乐园星球的概念，都围绕时间维度和空间的维度进行设计，保证在场景设计上符合需求也能适应未来场景的灵活扩展。

风格

作为一款儿童教育产品，主要的使用者是儿童，因而设计风格上会更着重在趣味性和品质上，满足吸引儿童玩乐的同时也提高儿童的审美。在画面风格上减少场景元素的过度复杂，元素设计更为扁平化，让画面更为清新和明亮，整体的元素都是圆润可爱的。

时间+空间，故事线扩展从「生命的起源」、「文明古国」、「特色地貌」、「现代城市首都」、「科学博物馆」到「太空宇宙」。并且对场景规范了设计原则，这也将会帮助我们在后期延展时保证设计的统一，提高了设计和开发的效率，避免再次磨合，而增加不必的无形成本。

三、成果

1. 全新的世界

有了故事脚本、场景规范，落地的插画才是我们在视觉设计上的重点。我们设计了 Level 1-Level 6 的场景，把儿童的学习之路渲染出一个全新的世界。150个课程点包装在30个不同场景中，从概念、路线、人物、画风、动画上给人耳目一新的感觉，人物也是跟随场景的变化而换装，保持不同场景人物的新鲜感，也加强了场景的带入感。

一路学习一路成长，从生命的起源开始，领着宝宝去探索和感受生命进化、时代变迁的过程。深入充满生机的海底和鱼儿珊瑚一起游玩，穿着恐龙外衣和恐龙一起奔跑在侏罗纪世界，装扮成原始人生活在猿人时代。整个场景的递进和课程级别的提高也是相符合的，世界的发展、学习能力的提升让孩子在学习中得到真正的成长。

从细节可以看到儿童的穿着和场景的变化是相呼应的。（埃及 / 中国 / 太空月球）

2. 让场景活起来

景深：

每个场景的固定规范是优先路径的干净和清晰，干净是减少干扰，清晰是提高识别。在这个前提下，把场景划分出前景、中景、后景，而主要的路径是保持在中景的中心位置，在内容的呈现和使用上也是最集中的范围，剩下前景和后景则是作为画面移动或转场时加入视觉差的效果，让画面更为生动，更接近真实场景。

动画：

不同的场景让路径风景更精彩，而动画则是让场景「活」起来的重要环节。在场景中将前、中、后景的元素做了主次的区分，来定义动画的轨迹。

中景是路径的主要内容，人物的动作需要配合路径上的课程点来做交互上的动画，人物在除了常规位移的动作外，还设计了在人物停留时结合角色的闲暇动作，如沙漠中的喝水，湖面上的钓鱼等，而在前景和后景中的动植物则是次要场景，在动画的设定是微动画的规范，能在场景中「活」起来，又不抢主路径上的风头。

人物：

不同场景让孩子看到不同的人物角色，这个在我们设计的过程中考虑到的融入感，同时也根据场景的设定给孩子带上和场景主题相符的配件，如：在空旷草原上挥动着赶羊鞭的牧童；开启头灯进入洞穴探险的冒险家；站在平衡车上穿梭在现代科技实验室；背着喷气式背包飞行在天空中等等。这些设计都融入在主题和人物身上，宝宝学习的同时也是开阔了视野。

把不断进步的世界场景用生动有趣的方法铺出一条引人入胜的路径，真正的边玩边学，让宝宝能在自我学习同时也能在手上就认识了这个多姿多彩的世界。

△ABCmouse 学习路径，查看视频。

四、体会

不一样的路

每个人都有不同的思维逻辑，在设计的过程中需要在不同的环节中梳理不同的工作步骤，让不同能力背景的人共同参与完成一条新的学习路径，这本身就是一条艰巨的路程。

ABCmouse 是儿童类产品，儿童是我们的用户，也是一种「不可控制」的用户，产品使用上需要考虑更多无逻辑的行为，更多不可预见的情况。在学习路径的需求上注定是一个不寻常的思路，它即要时刻新鲜地吸引孩子的注意，又像一个诚恳导师一样引导孩子去自助学习。

新的场景从需求开始到实现的过程中，每个环节都需要围绕孩子的角度去思考，这也是设计师需要重新去学习儿童的行为知识，把自己变回小时候，到图书馆去看儿童书，观察其他孩子的学习方法和爱好兴趣。

在 ABCmouse 的项目中，学习路径让我们学会了在不同层面上的沟通，学会了把自己变回儿童时期，学会了一个又一个的软件工具，学会了塑造从 Level 到 Level6 的游学世界。

再此之后，学习路径会继续扩展和迭代，我们也将会创作更多的场景空间，让宝宝在这学习世界中无限畅游。

「为儿童设计的技巧」

• 《如何设计一套品牌故事？来看这个案例！》
• 《为儿童设计！有哪些能帮你搞定儿童设计的方法技巧？》
• 《关于六一儿童节页面设计，你早就该换个思路了！》