儿童产品中的布局使用（下）-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

首页推荐

儿童产品中的布局使用（下）

0.0°

2020-05-25 原创文章 经验/观点 举报 7755 126 60 3

焱小玖关注

儿童产品有哪些典型布局，分别又都有什么特点，一起来看看吧~

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

上篇传送门《儿童产品中的布局使用-上》

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

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

跳板式

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

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

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

地图式

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

如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（其他布局涉及到整屏背景的处理也可参考以上尺寸）。