儿童产品中的布局使用(上)

用户头像
北京/UI设计师/5年前/4553浏览
儿童产品中的布局使用(上)
用户头像
焱小玖

儿童产品不能只是披着儿童外衣的成人产品,二者从不布局方式就有明显的不同~

自从2015年App Store设立儿童专区以来,儿童已经成为移动应用的重要群体,产品数量增加让越来越多的UI设计师开始了儿童产品的设计。


但刚接触儿童产品的设计师,会习惯性套用自己面向成年人的设计经验,甚至认为儿童产品只是在成人产品的基础上,使用更多鲜艳色彩和可爱图形来包装。这样的设计,只是披着儿童外衣的成人产品,其实并不适用于儿童。

比如成人产品中常见的布局方式有列表式、瀑布流、手风琴布局、宫格式、仪表式、卡片式、Gallery等,其中很多放到儿童产品中就并不适用。


如瀑布流式布局,对于成年人来说,瀑布流的错落让视线任意流动以缓解视觉疲劳,无限加载模式能获得更多的内容;但对于儿童来说,错落的排列容易扰乱视线,使其无法很好的集中和适应。刷新加载带来的内容变化,也不利于儿童的记忆与查找信息。


手风琴式布局,对成年人来说是在承载较多信息的同时保持界面简洁,减少跳转。但对于儿童来说,这种信息的收纳隐藏,并不利于他们理解和记忆,甚至是会造成困扰。


儿童不管从生理、心理、认知、行为等各方面,都与成年人有着极大的不同。比如行为操控的不精准需要更多容错并使用其容易完成的交互;比如对注意力无法集中,需要更多的指引以及信息筛选,干扰排除;比如需要更多的正向激励与陪伴……


这些不同,决定了儿童产品不能只是成人产品的“外表幼化”,而需要对其进行更专业深入的分析和系统认知,才能做出真正适于儿童使用的设计。



因此儿童产品中,针对儿童的自身能力和使用习惯,发展出了一些特有的布局方式,如跳板式、地图式、转盘式、路径式等,它们更适于儿童用户,也都有各自的特点和适用场景。


下文开始对儿童产品中布局的使用进行分析总结。全文分上下两部分,上部内容总体介绍特点,下部则是类型盘点,结合案例逐一分析其特性、优缺点。从做儿童产品设计开始,通过一点点地学习和积累,也希望以后可以从更多角度与大家交流讨论~


儿童产品的布局的特点可以从内容组织、交互操作视觉情感三个层面来分析。



· 内容组织

简洁、聚焦、控制信息量


内容组织层面,由于儿童处于无意注意到有意注意的过渡期,其注意力、支配知觉能力都与成人有一定的差距,还不能很好地掌控。所以在进行布局设计的时候,要尽量保持内容的简洁和聚焦,控制信息量,减少因过多内容给孩子带来的认知和操作上的阻碍。


有研究表明,页面中信息数量不宜过多,内容信息应占页面整体约40%-60%的比例为合理。该比例下,人们接收和处理信息的过程相对轻松。当内容较多、信息量较大的情况下,则应考虑分屏显示,以简化每屏内容,控制信息量;若都集中于一个页面,则会给用户的浏览和使用增加视觉处理上的困难。


人们的浏览习惯是自左而右,自上而下的,对不同界面区域投入的注意力也不同。页面的中心区域属于人们视觉的聚焦区,且根据视觉生理特征,聚焦区域的水平范围大于垂直范围,也就是说,人们的聚焦区整体呈长方形。有意识的利用聚焦区,能弥补儿童注意力的欠缺,更好的帮助其完成视觉筛选,聚焦重点内容。



如下图VIPKID的页面就相对合理。内容集中于视觉聚焦区,且通过星球的大小和透明度的变化,进一步突出当前重点。并控制当前页面信息量,每屏不过多展示,而是以滑动分屏显示更多内容。

对于孩子而言,分2次处理5个信息,要比1次完成10个信息的处理更简单,更易于完成。


· 交互操作

简单、防误触、可拓展性


交互操作层面,我们首先需要选择使用儿童可完成的、简单的交互操作。如单击、左右滑动、上下滑动都属于儿童容易完成的操作;而拖拽、长按、双击等,对于低龄儿童来说,则需要更多的学习和练习才能掌握。

除了交互手势的选择,还需注意的是孩子大脑与肢体间的协调度不如成年人,无法保持准确地操作精度。较拥挤的布局,容易造成不必要的误操作,因此为其提供更大的操作热区与间距,可以减少误操作的可能。

儿童产品的图标、按钮、间距等,相比于成人用户产品通常都有一定程度的放大,这也是在选择布局时,需要考虑到的。

再有就是需要考虑布局是拓展性,考虑当前形式是否能够很好地支持内容数量或状态上的改变,是否易拓展。由于内容层面对信息量的控制,拓展性也成为我们必须要考虑的方面。需根据内容数量的阈值来选择适合的布局。


内容数量多、变化大的功能选择拓展性强的布局来承载,内容数量少、较为固定的功能,则可降低对拓展性的要求。


比如路径式布局,若内容数量增加,只需往后延展增加路径和节点,对布局整体影响不大,拓展性好,适于需要展现多内容、多信息的场景。而地图式布局,若内容数量大量增加,则会给当前页面带来较大变化,内容多时应该避免使用,适于较为稳定的内容。


· 视觉情感

易懂、有趣、亲和力

 

视觉情感层面,人对事物的感受很大程度上源于视觉,而由于儿童的逻辑思维能力尙处于萌芽发展阶段,则更是倾向于直接依靠感观判断,视觉感受起到的作用也就越大。所以在内容清晰聚焦、交互简单易用的基础上,为孩子们提供易于识别理解的,有趣味性、有亲和力的视觉表达,有助于他们接受和喜爱产品,带来愉悦的产品体验。

 

爱玩是孩子的天性,在清晰直接之余,趣味性的加入是对孩子天性的满足,寓教于乐也是儿童产品的趋势。比如拟物化、场景化就是提升趣味性、增加亲和力的有效方式。把具体的事物或场景用于页面视觉,有助于创造更加丰富的体验,让孩子们更有代入感,提高对任务的兴趣,拉近与产品的距离。

易懂是指需要使用孩子们更容易接受和理解的布局方式,比如相比于纯文字的列表式,显然图文的卡片形式更利于孩子理解。对于孩子们来说,图形的信息表现更为直观,门槛更低,读图比解读文字更加简单,便于理解和记忆。图片更是有天然的吸引力优势,好看可爱的图片不仅能吸引其注意力,也带来情感上的愉悦。


以上是对儿童产品布局特点的分析,从三方面考虑,内容组织层面需简洁、聚焦、控制信息量,交互操作上需注意简单、防误触和可拓展性,视觉情感则需考虑易懂、有趣和亲和力。
下篇将盘点各类型布局,结合案例逐一分析其特性、优缺点,感兴趣的小伙伴可以关注一下哦~


更多儿童产品文章

《儿童产品中的色彩使用-上》

《儿童产品中的色彩使用-下》


98
举报
|
200
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】银行卡icon
智能家居中心 简约 UI设计组件库
我的钱包-UI界面设计-app
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
UI界面 组件
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
Security Camera UI kit
抽象液态渐变UI背景模版
【新年UI图标】钱包icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
钱包ui模板
新拟态风格 UI设计组件库
【新年UI图标】珠宝icon
新能源APP应用UIKit
盲盒APP UI设计
拟物风质感写实UI卡片合集源文件
科技医疗透明柜UI界面设计
手表表盘UI系列
UI通用设计素材1
【新年UI图标】30个图标
你可能喜欢
相关收藏夹
大家都在看
登录注册