如何做儿童类APP？来看英语流利说的实战经验总结！

流利®少儿英语流利® 3-8 岁儿童制的一款英语启蒙类产品，本次邀请到 UI 设师 kelly，从视觉设与输出的角度，详细介绍该产品游戏题型的设过程。

流利说®少儿英语，目标是帮助该年龄段用户立发音自信，并能英语学习生持续兴趣。基于儿童贪玩天性，自然而然我们会想到使用游戏化设计，将枯燥英语学习过程变更有趣。

△ 收糖

△ 警察抓小偷

△ 切

△ 消灭细菌

视觉设计

游戏辅，教育主。

对于视觉设言，游戏题型设的主以下 2 难点：

• 把握题趣味性与目标之间的平衡；
• 教学内找到合的游戏展示形式。

接来我将从视觉表达、视觉层级、反馈这点分享我的一些思考和经验。

1. 明确的视觉表达

在开始设计前，我们对 3-8 岁童进行了调研，发现处于该年龄的户，大多有特性：

• 不识字，且不能进行复逻辑操；
• 易被色彩艳且有效的对象吸引，并且会点击；
• 仅能理解自己活中接触过的事（比如玩具，食，游乐园）；
• 趣味性是调动他们持续学习要动力。

基于以几点，我们便总结出以下几点设方法。

视觉形式即题型玩法

以拼图题例，此题的目标检测孩子拼写单词的能力。如果仅将单词挖空再让用户选择，那么孩子会觉得这道题既不会玩，也不好玩。但如果视觉表采用孩子比较熟悉的拼图，就可以方便孩子好的理解题目的意思，引导孩子的操作。

场景故事要有视觉连贯性

「游戏」（此处的「游戏」代指游戏题）结束后有一个和故事设定相的结束画面，承接前面的操作，整个「游戏」过程呈现相对较整的体验，增强小友在「游戏」过程中的沉浸感。

△ 游戏操作：切水果

△ 游戏结尾：切水果榨果汁

2. 清晰的视觉层级

由于童缺乏成年人具备的视觉筛，他们往往很难分辨界面中的重要元素和次要元素。尤是 3-5 岁的孩子，他们会习惯性地点击界面上有吸引他们的东西。因此我们需要为同层级的元素设置强烈的视觉区分，明确告诉他们哪些元素是可点击的，需要被注的，哪些元素是可互的。

容易识别性

游戏题的设计方法通是使游戏的形式包规的题，小友感觉是在玩游戏，而是在做题。因此我们需要设计恰到好处的游戏容器承载容，使兼具容的识别性又会影响「游戏」体验。此处我们尝试拉开游戏元素和容的视觉差距──在画面中的视觉焦点处摆放容，而游戏元素仅作为背景或者容器，于衬托容，并且尽量取易和容发生冲突的形式。此外，为兼顾游戏画面的丰富性和多样性，容器的设计需要有一定的适配性。

△ 适配字

△ 适配图片

△ 适配字和图片

对于看文本读单词的题型，游戏器则以烘托文字主目标。该场景下，游戏器的视觉设重点于外形的刻画，简化内部细节，以此将孩子的视觉重点聚焦文本，非器本身。此外，平衡字符段不同所的显示差异，我们对文字的小也行了配。

△ 1-12 字符──文字小 88

△ 13-25 字符──文字小 76

△ 26-45 字符──文字小 62

背景画面的层级感

游戏题型中，不少故事性强，空间延续性高的设。加强画面的运动感空间感，视觉输出时，我们额外增加了景层，利用景图片打造视差效果，以增强整背景的层次感。

景图片的设置，同时也能解决配不同屏幕尺寸时，背景区域显示差异所的视觉问题。

纵运动情况下，两侧图形如设在背景里，适配到短屏幕时候法呈现出来。

而单独设成前景图，则可以灵活地适配不屏幕比例型。

克制使用过于明亮的色彩

用研时，我们发孩子们易被颜色醒目的东所吸引，但如果一页面过度使用明亮的色彩，则会分散孩子们的注意力，颜色过载所导致的视觉信息复杂性会增加孩子们的使用难度。

3. 合理的反馈

合理的反馈包括符合交互逻辑的及时反馈当的负反馈。游戏设中，设师多会通过酷炫的动效重操作的点击反馈，以增加游戏爽感。这套法则，儿童世界也同样用。

及时反馈制造小惊喜

我们产品的反馈设中时增加一些趣的微动画，给孩子们制造一些小彩蛋。这些小惊喜，不仅能及时拉回小朋友的注意力，给他们趣性的同时，对他们言也一种鼓励。

例如：用户击拼图题选项时，会出现 IP 相关卡元素，这些元素既能加强趣味性，又能加强用户品认知。

适当的正负反馈

大约从 4 岁开始，孩子们就有输赢的概念，因为赢而喜悦，因为输而感到焦虑。──《数字时代儿童设计》

对孩子的正向反馈宜欢呼、表扬的动画为主，整个画面氛围处理得热闹一点，对孩子来说是一个很的刺激点，能让孩子有继续玩下去的欲望。

△ 正向反馈1：IP 形象高兴地跳出

△ 正向反馈2：IP 形象高兴地跳出 + 打分星星

△ 正向反馈3：IP 形象鼓掌

考虑到孩子们会因为输而感到焦虑，因而在处负面反馈的时候，需要考虑他们此刻的心态，效设计应拉开与正向反馈的差别且过于消极，消极的反馈容易打击孩子的积极性，产生挫败感，鼓励性的反馈为宜。

△ 负面反馈：IP 形象配合鼓励性语音做油的姿势

反馈动画的设置也需考虑用户的可接受程度，慎用具攻击性动效。如下图，错误反馈时 IP 形象会受到攻击感冒，线后发孩子们对这种反馈表出了害怕的理。

以 IP 动画由流利®少儿英语设团队倾制作。

视觉输出

会写代码的设计是好开发。

视觉稿如果被很好的实现落地，那再好的设计稿只是概念，而是一份有效的方案。在如何更好的把控视觉实现程这一问题上，我们走过弯路，和开发经过几轮的探索，最终形成了一份适合我们团队的输模式。

在整个开发环节，设计师要承担一分的画开发工作。在和开发对接的过程中，我们要使的软件是：

• CocosCreator：游戏开软件，内含动画编辑器。
• SourceTree：向开发交画代码。

△ CocosCreator

△ SourceTree

开搭建完框架，设计在 CocosCreator上，完成部分元素的动画，用 SourceTree 向开提动画代码。开最通代码将每个动画串联来形成一个完整的动画。

△ CocosCreator 动画编辑器界面截图

题画连贯且细节多，单靠视频 demo 是无法协助开发精准实现设计效果的。为了解决这个问题，我们建立了对设计落地具有指导性意义的档──适配标注档和画标注档。

1. 适配标注档

户机调查结果显示，使 0.462、16:9、4:3 这类屏幕例的户占最大。为保证同屏幕例上的展示效果，我们根据上述种流尺寸，分别输大小为 780×360，640×360，480×360 的设计稿，并规定 780×360 为设计基准，对另外两个尺寸进行适配。

标注内三主屏幕尺寸下的缩比例、小置、特动画的起始点或终止点置细节调整标注，方便发配的时候能准确还原设稿的布局。

2. 动画标注文档

该文档主对动画音效的详细明。每题型的动画会被拆分，以小可拆分动画一标注对象，对其标注时、具体的动画效果以及运动曲线数，方便发程度还原 demo 的设效果。详细的标注文档不仅方便了发，后续测试视觉走查降低了不少沟通本。

总结

游戏化题型的设，需多的从用户的角度出发去思考权衡游戏与教学的平衡性。对于儿童产品言，设服务于教育，愉悦多变的体验设的方向，教学根本的设目标。

欢迎扫描下图维码，下载「流利说-少儿英语」APP，更多游戏题型，等你来体验！

欢迎关注「流利说设计团队」公众号：