前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Human Interface Guidelines —— Tab Bars

Human Interface Guidelines —— Tab Bars

作者头像
霖酱
发布2018-05-17 10:45:22
1.4K0
发布2018-05-17 10:45:22
举报
文章被收录于专栏:Material Design组件

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Tab Bars

Human Interface Guidelines链接:Tab Bars

Tab Bars

Tab Bars出现在app屏幕的底部,并提供在app不同部分之间快速切换的能力。

Tab Bars是半透明的,可以具有背景色调,在所有屏幕方向上保持相同的高度,并且在显示键盘时隐藏。 Tab Bars可能包含任意数量的tabs,但可见tabs的数量因装置大小和方向而异。 如果由于水平空间有限而无法显示某些选项卡,则最后几个可见tab将变为“更多”tab,从而在单独的屏幕上显示列表中的其他tabs。

·通常,使用tab bar来组织app级别的信息

选项卡栏是一种平滑信息层次结构的方式,也能够同时对多个同等信息类别或模式进行访问。

·严格使用tab bar进行导航

 tab bar按钮不应该用于执行操作。如果您需要能够对当前视图中的元素起作用的控件,请改为使用toolbars。

·避免有太多标签

每个额外增加的tab都会减少选择tab时的可点击区域,并增加app的复杂性,从而使寻找信息变得更加困难。尽管“更多”tab可以显示额外的tabs,但这需要额外的taps,并且空间使用效率较差。仅包含基本tabs,并使用信息层次结构所需的最少tabs。

选项卡太少也可能成为问题,因为它可能会使您的界面看起来不连贯。一般来说,在iPhone上使用三到五个tabs。 iPad可以有更多。

·当其功能不可用时,不要删除或禁用tab

如果tab在某些情况下可用,但在其他情况下不可用,则您的app界面会变得不稳定并且不可预知。

确保始终启用所有tabs,并解释tab内容不可用的原因。例如,如果iOS设备上没有歌曲,则音乐app中的我的音乐tab将介绍如何下载歌曲。(空状态)

·始终只在对应视图中变换

为了让界面保持可预测性,选择一个tab将会直接影响这个tab对应的视图,而不是屏幕上其他视图。例如,选择左侧分割视图(split view)的tab不应导致分割视图的右侧突然更改。在popover中选择一个tab不应该导致弹出窗口后面的视图发生变化。

·确保tab bar图标在视觉上保持一致和平衡

系统为常见用例提供了一系列预定义的图标。

·使用badging低调沟通

您可以在选项卡上显示badge(包含白色文字、数字或感叹号的红色椭圆),以表明与该视图或模式相关的新信息。

TIP:理解 tab bar 和 toolbar 之间的区别很重要,因为这两种类型都出现在app屏幕的底部。 tab bar 可让用户在app的不同部分之间快速切换,例如时钟应用中的闹钟,秒表和计时器tab。Toolbar 包含用于执行与当前上下文相关的操作的按钮,如创建项目,删除项目,添加注释或拍摄照片。标签栏和工具栏永远不会同时出现在同一个视图中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Tab Bars
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档