首页 体育 教育 财经 社会 娱乐 军事 国内 科技 互联网 房产 国际 女人 汽车 游戏

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

2019-12-29

流利说 少儿英语是流利说 为 3-8 岁儿童定制的一款英语启蒙类产品,本次邀请到 UI 规划师 kelly,从视觉规划与输出的视点,具体地介绍该产品游戏题型的规划进程。

流利说 少儿英语,方针是帮忙该年龄段的用户树立发音自傲,而且能对英语学习发生持续的爱好。依据儿童贪玩的天分,自然而然咱们会想到运用游戏化的规划,将单调的英语学习进程变得更风趣。

△ 搜集糖块

△ 差人抓小偷

△ 切生果

△ 消除细菌

游戏为辅,教育为主。

关于视觉规划而言,游戏题型规划的首要有以下 2 个难点:

接下来我将从视觉表达、视觉层级、反应这三点共享我的一些考虑和经历。

在开端规划前,咱们对 3-8 岁儿童进行了调研,发现处于该年龄段的用户,大多有以下特性:

依据以上几点,咱们便总结出以下几点规划办法。

以拼图题为例,此题的方针是检测孩子拼写单词的才能。假如仅将单词挖空再让用户挑选,那么孩子会觉得这道题既不会玩,也不好玩。但假如在视觉体现上选用孩子比较了解的拼图,就能够便利孩子更好的了解标题的意思,从而引导孩子的操作。

「游戏」完毕后有一个和故事设定相关的完毕画面,接受前面的操作,让整个「游戏」进程能呈现出相对比较完好的体会,以增强小朋友在「游戏」进程中的沉溺感。

△ 游戏操作:切生果

△ 游戏结束:切生果榨果汁

由于儿童缺少成年人所具有的视觉挑选才能,他们往往很难分辩出界面中的重要元素和非必须元素。尤其是 3-5 岁的孩子,他们会习气性地去点击界面上一切招引他们的东西。因而咱们需求为不同层级的元素设置激烈的视觉区别,清晰告知他们哪些元素是能够点击的,需求被重视的,哪些元素是不行互动的。

游戏题型的规划办法通常是运用游戏的方式去包装惯例的教育题型,让小朋友感觉是在玩游戏,而不是在做题。因而咱们需求规划适可而止的游戏容器去承载教育内容,使其兼具教育内容的识别性又不会影响「游戏」体会。此处咱们测验去摆开游戏元素和教育内容的视觉距离──在画面中的视觉焦点处摆放教育内容,而游戏元素仅作为布景或许容器,用于烘托教育内容,而且尽量选取不易和教育内容发生冲突的方式。此外,为统筹游戏画面的丰富性和多样性,容器的规划需求有必定的适配性。

△ 适配文字

△ 适配图片

△ 适配文字和图片

关于看文本读单词的题型,游戏容器则以烘托文字为首要方针。在该场景下,游戏容器的视觉规划要点在于外形的描写,简化内部细节,以此将孩子的视觉要点聚集在文本,而非容器自身。此外,为平衡字符段不同所带来的显现差异,咱们对文字的巨细也进行了适配。

△ 1-12 个字符──文字巨细 88

△ 13-25 个字符──文字巨细 76

△ 26-45 个字符──文字巨细 62

在游戏题型中,有不少故事性强,空间延续性高的设定。为加强画面的运动感和空间感,视觉输出时,咱们额定添加了远景层,运用远景图片打造视差作用,以增强整个布景的层次感。

远景图片的设置,一起也能处理适配不同屏幕尺度时,布景区域显现差异所带来的视觉问题。

纵向运动的情况下,两边的图形假如设置在布景里,当适配到短屏幕的时分就无法呈现出来。

而独自设置成远景图,则能够灵敏地适配不同屏幕份额的机型。

用研时,咱们发现孩子们简单被色彩夺目的东西所招引,但假如一个页面上过度运用亮堂的色彩,则会大大涣散孩子们的注意力,色彩过载所导致的视觉信息复杂性会添加孩子们的运用难度。

合理的反应包含契合交互逻辑的及时反应和恰当的正负反应。在游戏规划中,规划师大多会经过酷炫的动效来做重要操作的点击反应,以添加游戏爽感。这套规律,在儿童国际也相同适用。

咱们在产品的反应规划中适时地添加一些风趣的微动画,给孩子们制造一些小彩蛋。这些小惊喜,不只能及时地拉回小朋友的注意力,给他们带来趣味性的一起,对他们而言也是一种鼓舞。

例如:当用户点击拼图题选项时,会呈现 IP 相关的卡通元素,这些元素既能加强趣味性,又能加强用户对品牌的认知。

大约从 4 岁开端,孩子们就会有输赢的概念,会由于赢而快乐,由于输而感到焦虑。──《数字年代儿童规划》

对孩子的正向反应宜喝彩、表彰性的动画为主,整个画面气氛可处理得热烈一点,这对孩子来说是一个很好的影响点,能让孩子有持续玩下去的愿望。

△ 正向反应1:IP 形象快乐地跳出

△ 正向反应2:IP 形象快乐地跳出 + 打分星星

△ 正向反应3:IP 形象拍手

考虑到孩子们会由于输而感到焦虑,因而在处理负面反应的时分,需求考虑他们此时的心态,动效规划应摆开与正向反应的不同且不能过于消沉,消沉的反应简单冲击孩子的积极性,发生挫折感,鼓舞性的反应为宜。

△ 负面反应:IP 形象合作鼓舞性语音做加油的姿态

反应动画的设置也需求考虑用户的可接受程度,慎用具有进犯性动效。如下图,过错反应时 IP 形象会遭到进犯而伤风,上线后发现孩子们对这种反应体现出了惧怕的心思。

以上 IP 动画由流利说 少儿英语规划团队倾情制造。

不会写代码的规划也是好开发。

视觉稿假如不能被很好的完结落地,那再好的规划稿也只能是概念,而不是一份有用的计划。在怎么更好的把控视觉完结程度这一问题上,咱们也走过不少弯路,和开发经过几轮的探究,终究构成了一份合适咱们团队的输出形式。

在整个开发环节,规划师首要承当一部分的动画开发作业。在和开发对接的进程中,咱们首要运用的软件是:

△ CocosCreator

△ SourceTree

开发建立完结构后,规划在 CocosCreator上,完结部分元素的动画,再用 SourceTree 向开发提交动画代码。开发最终经过代码将每个动画串联起来构成一个完好的动画。

△ CocosCreator 动画编辑器界面截图

题型动画连接且细节多,单靠视频 demo 是无法帮忙开发精准完结规划作用的。为了处理这个问题,咱们树立了对规划落地具有指导性含义的文档──适配标示文档和动画标示文档。

用户机型调查结果显现,运用 0.462、16:9、4:3 这三类屏幕份额的用户占比最大。为确保不同屏幕份额上的展现作用,咱们依据上述三种干流尺度,别离输出巨细为 780 360,640 360,480 360 的规划稿,并规则以 780 360 为规划基准,对别的两个尺度进行适配。

标示内容为三个主屏幕尺度下的缩放份额、巨细方位、特定动画的起始点或停止点方位等细节调整标示,便利开发在做适配的时分能精确复原规划稿的布局。

该文档首要是对动画和音效的具体阐明。每个题型的动画会被拆分,以最小可拆分动画为一个标示方针,对其标示时长、具体的动画作用以及运动曲线数值等,便利开发最大程度地复原 demo 的规划作用。具体的标示文档不只便利了开发,更为后续测验和视觉走查降低了不少交流本钱。

游戏化题型的规划,需求更多的从用户的视点动身去考虑和权衡游戏与教育的平衡性。关于儿童产品而言,规划服务于教育,愉悦和多变的体会是规划的方向,教育才是最底子的规划方针。

欢迎扫描下图二维码,下载「流利说-少儿英语」APP,更多游戏题型,等你来体会!

欢迎重视「流利说规划团队」大众号:

热门文章

随机推荐

推荐文章