从“英语流利说”来看看儿童APP应该怎么做

流利说®流利地说儿童英语®为3-8岁儿童定制的英语启蒙产品邀请UI设计师Kelly从视觉设计和输出的角度详细介绍产品游戏问题的设计过程。流利说®儿童英语的目标是帮助这个年龄段的用户建立发音信心，并对英语学习产生持续的兴趣。基于孩子们顽皮的天性，我们自然会想到使用游戏设计来使枯燥的英语学习过程更加有趣。△收集糖果△ 警察抓小偷△ 切水果△ 以消灭细菌视觉设计游戏为辅，以教育为主。对于视觉设计来说，游戏问题设计主要有以下两个难点：把握问题兴趣与教学目标之间的平衡；为教学内容找到最合适的游戏展示形式。接下来，我将从视觉表达、视觉层次和反馈三个方面分享我的一些思考和经验。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图像在错误反馈时会受到攻击和感冒，发现孩子们害怕这种反馈。以上IP动画流利®儿童英语设计团队倾情制作。不会写代码的视觉输出设计也很容易开发。如果视觉手稿不能很好地实现，无论设计手稿有多好，它都只能是一个概念，而不是一个有效的解决方案。在如何更好地控制视觉实现的程度上，我们也走了很多弯路，经过几轮探索和开发，最终形成了适合我们团队的输出模式。在整个开发过程中，设计师主要承担动画开发工作的一部分。在与开发对接的过程中，我们主要使用的软件是：CocosCreator：包含动画编辑器的游戏开发软件。SourceTree：将动画代码提交给开发。△ CocosCreator△ Sourcetreee开发构建框架后，设计在Cocoscreator上，完成部分元素的动画，然后用Sourcetreee向开发提交动画代码。最后，通过代码将每个动画串联起来，形成一个完整的动画。△ cocoscreator动画编辑器界面截图题型动画连贯，细节多，单靠视频demo无法帮助开发精准实现设计效果。为了解决这个问题，我们建立了指导设计实施的文档──适用于标注文档和动画标注文档。1.调查结果显示，使用0.462、16:9、4:这三种屏幕的用户比例最大。为了保证不同屏幕比例的显示效果，我们根据以上三个主流尺寸分别输出780×360，640×360，480×设计稿360，规定780×360是适应另外两个尺寸的设计基准。标记内容是三个主屏幕尺寸下的缩放比例、尺寸位置、特定动画的起点或终点位置，便于开发在适应时准确恢复设计草案的布局。2.动画标记文档本文档主要是对动画和音效的详细说明。每个问题类型的动画将被拆分，以最小可拆分动画为标记对象，方便开发和最大限度地恢复demo的设计效果，如标记时间、具体动画效果和运动曲线值。详细的标注文档不仅方便了开发，而且降低了后续测试和视觉检查的沟通成本。总结游戏题型的设计，需要从用户的角度思考和权衡游戏与教学的平衡。对儿童产品而言，设计服务于教育，愉悦多变的体验是设计的方向，教学是最基本的设计目标。