恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

原创文章 分类: 经验/观点 版权: 举报
5245 105 49 3
2020-05-25
31.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(其他布局涉及到整屏背景的处理也可参考以上尺寸)。



横屏VS竖屏

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

· 内容

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


· 视觉

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


· 设备

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


更多儿童产品文章

《儿童产品中的布局使用-上》

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

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



参考引文

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

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

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

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

《艺术与视知觉》



Powered by Froala Editor

推荐人:

UI中国

焱小玖

念念不忘 必有回响

1562粉丝/50关注

老马识途小有名气首页达人叫兽收藏家lv.3
儿童产品中的布局使用(上)儿童产品中的色彩使用(下)

焱小玖

焱小玖

念念不忘 必有回响

老马识途小有名气首页达人叫兽收藏家lv.3

你确定要举报儿童产品中的布局使用(下)

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年05月25日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN