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

文章上篇内容着重对儿童产品布局的特点进行了分析,可概括为内容组织层面需简洁、聚焦、控制信息;交互操作上需注意简单、防误触和可拓展性;视觉情感则需考虑易懂、有趣和亲和力。

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

根据这些特点,下篇内容将整理儿童产品中常见典型的布局类型,从内容量、易操作、趣味性、拓展性四个方面,结合案例逐一分析其特性和优缺点。

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

下文中讲到的布局类型有:跳板式、地图式、路径式、转盘式、宫格卡片式、整屏内容式。

跳板式

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

跳板式常用于一级页面,是主要功能和内容的入口聚合,以图文展示,形式简单直接,让孩子能够快速选择感兴趣的内容并进入,滑动查看更多内容,但会对后续内容模块的曝光度产生一定影响,作为入口聚合,虽然布局方式上不受限制,可以无限增加,但也不适宜过多内容的展示,需要注意控制精简。

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

相比于宫格式,跳板式形式更加灵活多变,尺寸与形状可以灵活调整,比如选择更大尺寸来支持主推内容等。

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

当然也可以根据不同功能内容,设计相应的视觉效果,为设计师提供更大的发挥空间,让页面更加生动有趣,以图形辅助孩子理解。如爱奇艺奇巴布,绘本的板块使用了绘本的外形,听力的版块是唱片的形式。

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

地图式

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

地图式通常与场景故事、背景设定等相关联,是比较拟物化、场景化的一种布局方式,有利于儿童理解,特别是对与年龄较小的孩子来说,地图式亲切有趣的视觉效果很具吸引力。

如ABCmouse的产品首页,以英语乐园的形式,地图上的建筑代表不同功能,除了主陆地,还有连接的小岛,以支持后续拓展。

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

但地图式的拓展性是有一定局限的,不宜承载需要经常变动、数量不稳定的内容,适合较为固定的内容。在使用地图式布局时,最好能有较为长期、整体的规划,以保证页面结构一段时间内都可以不用做出大幅调整或是改动。

比如实际工作中产品规划往往都超前于设计和开发,线上页面可能只有5个功能模块,但后续版本还会有3个模块增加。这种情况下,我们在一开始就可以以8个模块来考虑设计,预留出位置,后续开发只需增加、开放内容即可,页面无需有大的调整。若开始只规划了5个功能模块,没有预留内容区,后续还需要扩充地图与位置,对于开发来说则需要较大的调整和改动,工期也随之增长。

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

路径式

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

路径式常用于学习内容、课程的页面,以路径和节点图形化表达学习过程与课程内容,可视化当前学习进度,帮助孩子理解。根据内容,可配置不同主题场景插画,让页面更加多变有趣。

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

拓展性良好,设计时可提供S+N1、N2+E的适配方案,做到随意增减变化,适合内容数量多、数量阈值大的内容。S(Start)指路径开始,N为路径中间段(一般设计2-3段,根据所需数量循环使用即可),E(End)为路径结束。若内容增加,只需向后直接延长增加,不会因为课程数量的变化影响页面结构。

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

需注意的是内容较多的情况下,要为用户提供起点与当前进度的快捷跳转方式,避免因长路径带来的操作不便。

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

转盘式

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

转盘式布局分转盘区和内容区,转盘区通常以图标或文字的形式,显示当前所选及内容图标以提供预览。内容区通常面积较大或满屏显示,有较强的视觉表现力。

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

通过左右滑动切换,一般会采用page形式,也就是每滑动一次则切换一页,而不是无限滑动。这种形式下设计师可以为场景适当增加一些有趣动效,让当前内容更生动呈现,增加页面的吸引力。

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

转盘式布局常用于大类目的分类、入口页等,为页面带来整体场景的塑造,烘托主题气氛。需注意的是数量不宜太多,如分类控制在2-7个较为合理。若分类过多,则切换效率太低,且不利于用户记忆。

宫格卡片式

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

宫格卡片式常用于内容的展示页,宫格卡片可以较好的承载图文信息,相比于纯文字列表,更直观更能吸引孩子注意力。除了常规的圆角矩形卡片形式,儿童产品中也经常打破单调,发挥创意让卡片拥有更多有趣形式。

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

此外,每屏展示的卡片数不宜过多,数量控制为4-9是儿童较为理想的接受范围。

整屏内容式

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

整屏内容式,顾名思义是屏幕为一个整体的内容和操作区域,适用于内容、操作目的较为集中的页面,用整体场景给孩子带来强烈的沉浸式体验视觉冲击,交互形式与场景结合,多变自由,常用于内容页。

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

因为内容的整体性,这种布局需要格外注意页面适配,确保场景能满足与多机型尺寸的需要,以及内容操作区的完整显示。

比如产品主要设备为pad和PC,通常设计输出稿的尺寸有iOS1024*768、安卓1280*800、PC1366*768、1920*1080(同比例最大适配尺寸)。则可以选择1024*768为原始设计尺寸,内容区域960*620,延展至1280*800、1366*768(其他布局涉及到整屏背景的处理也可参考以上尺寸)。

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

横屏VS竖屏

通过分析市面上现有产品,可以发现相比于成人产品常用的竖屏结构,儿童产品更多都选择使用横屏,其中原因主要有3方面:

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

内容

儿童产品常见的类型如课程学习类、绘本读物类、语言学习类、认知百科类等,其中很多都会涉及视频内容,视频多为横版,因此使用横版设计可以减少屏幕旋转和pad的移动,为孩子提供一个较为稳定的使用环境。

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

视觉

人们视觉聚焦区域的水平范围大于垂直范围,呈横版长方形。因此横屏与视觉聚焦区更加贴合,能够充分利用聚焦区让内容更好的展示。

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

设备

手机应用竖屏居多,pad应用则横屏居多。而儿童产品中更主流设备为pad,相应的横屏应用也更多。手机的屏幕尺寸小,操作要求精准,pad的大尺寸不仅保证了内容的清晰呈现,操作热区加大也降低了对操作精度的要求,减少误操作可能。

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

参考引文

《儿童心理学手册》第六版

《APP导航设计模式与信息布局设计模式》

《基于用户体验的儿童教育类APP交互设计研究》

《基于视知觉理论的3-6岁儿童教育类型应用软件UI分析与设计》

《艺术与视知觉》

相关阅读:

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

本文由 新媒体之家 作者:海盐社 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
0

发表评论