IOS 12设计规范(7-4)图标和图像:标签栏 (Tab Bars)

7.4      标签栏 (Tab Bars)

屏幕底部会显示一个标签栏,并提供在应用的不同部分之间快速切换的功能。标签栏是半透明的,可能具有背景⾊调,在所有屏幕⽅向上保持相同的高度, 并在显示键盘时隐藏。标签栏可以包含任意数量的选项,但可见选项的数量根据设备⼤小和⽅向而有所不同。如果某些选项由于⽔水平空间有限而无法显示, 那么最后一个可见选项将成为“更多”选项,显示列表中的其他选项卡。

IOS12设计规范

一般来说,使用标签栏来梳理 App 级别的信息: 标签栏是简化信息层次结构的一种很好的方法,可以一次访问多个对等信息类别或模式。

标签栏只用于导航,标签栏按钮不用于执行操作: 如果您需要提供对当前视图中元素的操作,请改用工具栏。请参阅 Toolbars 。

避免太多的标签:   每个附加标签都会减少可点击区域,并增加应用程序的复杂性,从⽽更难查找信息。虽然 “更多” 选项卡可以显示额外的选项卡,但这本身就需要额外的选项,而且空间不足。仅包含基本选项卡,并使用信息 层次结构所需的最小选项数。太少的标签也可能是一个问题,因为它会使界 面断开连接。一般来说,在 iPhone 上使用三到五个标签。 iPad 上可以再多 几个。

当其功能不可用时,不要删除或禁用选项卡:    如果选项卡在某些情况下可用, 但在其他情况下不可用,App 界面就会变得不稳定和不可预测。确保始终启用所有选项,并解释选项的内容不可用的原因。例如,如果iOS 设备上没有歌曲,“⾳乐” 应用中的 “我的⾳乐” 选项卡会解释如何下载歌曲。

始终在附件视图中切换上下⽂:   为了保持界面可预测,选项卡应直接附加到选项栏中,而不影响屏幕上其他位置的视图。例如,选择分割视图左侧的选项卡 不应导致分割视图的右侧突然更改。在 popover 中选择一个选项卡不应该导致弹出窗口后面的视图更改。

确保标签栏图标在视觉上保持一致和平衡: 该系统为常⻅用例提供了一系列列预定义的图标。请参阅 System Icons > Tab Bar Icons 。您也可以创建⾃⼰的图标。查看 Custom Icons 。

使用⻆角标这种不引人注目的提醒方式:您可以在选项卡上显示徽章 – 包含白⾊文本和数字或感叹号的红⾊椭圆,以指示新信息与该视图或模式相关联。开发者指南,请参阅 UITabBar 。

提示:了解标签栏和工具栏之间的区别很重要,因为这两种类型都显示在App 屏幕的底部。标签栏可让用户在应用程序的不同部分之间快速切换,例如,Clock   应用程序中的“闹钟”,“秒表”和“计时器器”选项卡。工具栏包含用于执行与当前上下⽂相关的操作按钮,例如创建项目,删除项目,添加注释或拍摄 照片。请参阅 Toolbars 。标签栏和工具栏从不会出现在同一个视图中。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(7-4)图标和图像:标签栏 (Tab Bars)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏