UE Design | 精选干货·浅析儿童产品设计思路-京东云开发者社区

![](//img1.jcloudcs.com/developer.jdcloud.com/e91b2556-705a-4ec3-9389-757841483a7620210111172442.gif)
针对不同的受众我们会做不一样的设计，今天是针对儿童进行的产品设计思路的内容分享，面对儿童产品，我们需要从心理生理上的区别分析，进而推动内容、交互、视觉、动画等设计，一起来了解下吧～

------------

“小山上的风，
没有一个人知道，
没有一个人能告诉我；
风从什么地方来，
风到什么地方去。”
英国的诗人米尔恩在给孩子的诗歌《小山上的风》里如是写道。

在不同的年纪,这个世界带给我们的触动和感知都是不一样的。那么当我们为儿童进行设计时，该如何去呈现呢？让我们一起来探讨下吧。

# 01.他们与我们
近年来，儿童产品的市场是比较火热的，由于儿童的生长变化较快，他们在心理和生理上都与我们成人有较大不同，对于外界的信号，他们更喜欢得到视觉和听觉上的反馈。并且常常能够从挑战和冲突中获得快乐，他们不在意结果，目的性较弱，还有着非常强烈的好奇心，无法预见其行为会引发的后果，其模仿能力的强弱随着年龄成长呈曲线状呈现。当我们在设计时，应将儿童的这些特性考虑进去。

![](//img1.jcloudcs.com/developer.jdcloud.com/36cb6fae-02a1-428b-bcf6-d3d8537c1ac020210111172901.png)

# 02.任务旅程的设计

在某种程度上，儿童产品的客户形态有些类似我们的ToB/G产品的客户。使用产品的一线用户，并非最终具有购买权的客户。孩子的父母是儿童类产品最终具有购买权的客户，他们对早期教育、智力投资、内容是否健康积极等等都有较高要求。

因此我们在内容的设计上应更加的多元化，将任务完成后的数据量化体现，使父母便于了解孩子情况，同时也可以从侧面激励用户后续的付费行为。任务旅程有多种类型，在儿童品类的设计上，我们通常采用下面这4种任务类型去设计。
![](//img1.jcloudcs.com/developer.jdcloud.com/19f9d6d3-66d9-4a59-8588-eba5ae72324120210111172954.png)

# 03.交互界面

好的设计可以减少认知负担， 可以最大限度地减少理解功能交互所消耗的智力资源。在年幼的孩童时期，他们的记忆容量比成人小，我们需要关注到这一点，怎样的信息容量，交互层级和人机互动才能让他们更好的理解和认知产品界面。

比如LG有一款面向低龄儿童的手表，表盘上只有一个按钮和出声孔，并且在噪杂环境下，还考虑到家长的心情，非常贴心的设计了10秒自动接听的人机交互方式。

![](//img1.jcloudcs.com/developer.jdcloud.com/12e48140-3b36-4b1c-83c0-50b37e3be69f20210111173036.png)
图片来源 | 文章作者&Roobo设计团队

通常，我们成年人对交互体验，产品易用性都抱有较高的期望，我们期望产品能为我们带来效率的提升、便捷的操作、强烈的视觉冲击力等等。但是，儿童与成人在人机交互的互动上却有着天壤之别。当产品功能无法正常运行时，孩子们并不会像成年人一样感到失望。当设计不如他们所希望的那样时，虽然也会暂时感到沮丧，但他们在自己生命旅程的学习尝试中,也习惯了那些常常无法正常进行的任务。随着成长经验的增加，他们会逐渐熟悉了解世界的运行规则。

![](//img1.jcloudcs.com/developer.jdcloud.com/a84dee5f-e4e9-47b8-a2a9-01c7688ab9a620210111173132.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/429149cc-8ab9-495e-86d5-5e9616643b3e20210111173143.png)
<center>图片来源 | 文章作者&Roobo设计团队</center>

#  04.配色与图形

有研究表明，在对120名学前儿童(3—6岁)进行了12种颜色和12种图形的辨认实验中显示，实验刺激用速示器分三种速度(0.01秒、0.05秒、0.1秒)呈现。结果表明：呈现速度对辨认正确率有着明显的影响。3-6岁儿童对颜色和图形的辨认能力均随年龄增长而逐步提高。学前儿童对颜色的辨别,在三种呈现速度条件下,均以对黄、红、绿三色的辨认正确率为最高。
![](//img1.jcloudcs.com/developer.jdcloud.com/219254bf-666c-42ab-9690-503d8060b94f20210111173241.png)

图标icon的设计上，简约、块面化、造型避免抽象，例如3岁+的孩童已经可以理解向前、向后的箭头，有研究显示，在短时段内，儿童对图形的辨认在不同呈现速度条件下出现优势与劣势图形之分。优势图形的正确辨认率百分比较高,而劣势图形则较低。

![](//img1.jcloudcs.com/developer.jdcloud.com/6c4ff9c5-7f77-4157-923f-3ec77df3205a20210111173309.png)

# 05.硬件的配合运用

现在市场上有很多儿童品类的硬件，深受家长和孩子的喜爱，在软硬件的结合上，我们要善加运用，例如硬件自带的摄像头、触摸屏、声控等等。当硬件与产品内容相结合，可以碰撞出更加多种多样令人振奋的新的交互方式。
![](//img1.jcloudcs.com/developer.jdcloud.com/66c0ed9f-a194-4354-ab94-a78d2c79e2d520210111173341.png)
![](//img1.jcloudcs.com/developer.jdcloud.com/c8f27d2b-0ffa-492d-ac6a-fb361ab3fceb20210111173359.png)
<center>图片来源 | 文章作者&Roobo设计团队</center>

# 06.动画设计
在任务旅程中，内容合理优质的动画，广受家长及儿童的欢迎，但是动画频繁变换的画面容易引起视觉疲劳，大多数动画片每6秒会变换一次画面转场，超出了幼儿视觉神经的承受能力。在儿童不同的年龄段，注意力集中程度都是有所不同的，皮亚杰理论研究显示3-4岁的儿童注意力集中的平均时长为10分钟，4-6岁儿童注意力集中平均时长则可达15分钟。在我们为孩子们设计他们喜爱的动画时，要充分考虑到这些因素。运营类动画一般控制在1分半之内是较为合理的。
<center>https://v.qq.com/x/page/a3220khgi2w.html</center>
<center>👆大家点击观看哦～动画来源 | 文章作者&Roobo设计团队</center>

市场上很多AI儿童伴读机器人，是可以自动推送产品内容的，考虑到儿童的健康使用，推送动画的播放时间要善加利用，并减少观看所需的步骤，在家长端也需要设计对应控制内容的开关，并将音量的控制开关放在显眼易点的位置。
![](//img1.jcloudcs.com/developer.jdcloud.com/4a662dfa-83cb-45ca-98e6-024b355b2b4020210111173649.png)
<center>图片来源 | 文章作者&Roobo设计团队</center>
以上，
感谢带领我成长的设计团队。
仅以此文与大家一起共同探讨，在设计中去创新，去验证。欢迎大家关注我们，后续有更多的项目干货将与大家分享。
![](//img1.jcloudcs.com/developer.jdcloud.com/403b0d3e-8379-4c8e-acaa-e3b17378888920210111173730.jpg)
参考文献
《3-6岁儿童颜色及图形视觉辨认实验研究》
《3-6岁儿童对11种基本颜色命名和分类研究》
《基于儿童心理特征的动画创作》
https://uxkids.com/projects/
https://www.nngroup.com/
https://necromanov.wordpress.com/2010/11/23/quest_design_2/
https://necromanov.wordpress.com/2010/12/14/quest_design_04/
https://necromanov.wordpress.com/2010/12/03/quest_design_03/
鸣谢：Roobo设计团队
![](//img1.jcloudcs.com/developer.jdcloud.com/403b0d3e-8379-4c8e-acaa-e3b17378888920210111173730.jpg)
![](//img1.jcloudcs.com/developer.jdcloud.com/138abfbe-9e42-44d0-8b4d-766830f3f90220210111173811.jpg)
![](//img1.jcloudcs.com/developer.jdcloud.com/403b0d3e-8379-4c8e-acaa-e3b17378888920210111173730.jpg)
![](//img1.jcloudcs.com/developer.jdcloud.com/b08ba100-6e27-4a21-a1e1-c60d4a3d571520210111173835.png)