组件 选项卡

选项卡

选项卡可以方便地在不同视图间浏览和切换。

选项卡可以在一个很高的层次上来组织内容,例如在应用的视图、数据集或功能之间切换。

选项卡是显示在相关内容上方的单行元素。选项卡标签应简明扼要地描述其中的内容。

因为滑动手势被用于切换选项卡,所以不要在内容页使用手势,以免产生冲突。

类型

固定的
滚动的

选项卡标签

选项卡标签可以是纯图标或纯文本。

颜色

在文本和指示器上使用应用的强调色或对比色。 使用应用的强调色、或和文本对比度较高的颜色。

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

选项卡为分组内容提供了可见性。选项卡标签简明扼要的描述了相关页面的内容。

手机端选项卡

默认应用栏和固定选项卡栏

展开的应用栏和固定选项卡栏

在滚动内容时选项卡固定在页面顶部

内嵌搜索,应用栏和固定选项卡栏

默认应用栏和滚动选项卡栏

文本和指示器颜色相同

默认应用栏和含图标的固定选项卡

图标和指示器颜色相同

桌面端选项卡

默认应用栏和选项卡栏

含下拉菜单的选项卡栏

已打开下拉菜单的选项卡

已从下拉菜单中选中了 Books 的选项卡

含翻页的选项卡

带翻页的选项卡滚动后

居中的选项卡

何时使用

使用选项卡在高层次上来组织内容,例如,显示报纸的不同部分。不要把选项卡用于轮播图或内容分页。这些用例涉及查看内容,而不是在内容组之间导航。

有关选项卡在高级视图间的导航,请参考导航 - 模式

不要在支持滑动手势的内容页上使用选项卡,因为对于休选项卡来说,滑动手势是用来导航的。例如,避免在地图中使用选项卡,也不要在带有滑动删除的列表中使用。

固定选项卡中的选项卡数量有限,并且为了用户的肌肉记忆,应当保持固定的顺序。可滚动选项卡用于有大量选项卡或数量可变的情况。

选项卡在同等权重的内容之间切换

选项卡在含不同权重的内容之间切换

选项卡特征

选项卡的内容控件是连续显示的。

格式规范:

  • 选项卡应显示为单行。必要时把选项标签可以换行到第二行,其余部分截断。
  • 不要互相嵌套选项卡。
  • 根据展示的内容高亮对应的选项卡。
  • 分层组合选项卡,将一组选项卡与其内容相连。
  • 保持选项卡与其内容相邻,来展示两者的关系。

选项卡显示为单行

选项卡没有显示为单行

使用内容层次分组,使选项卡与当前显示的内容相关

选项卡不能嵌套

内容 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

不同选项卡之间的内容可以有很大的不同。例如,选项卡可以显示不同年份的艺术作品集,也可以显示不同类型的设置项。

选项卡的内容分组应当按照高层次的组织方式(如背景或方向),选项卡之间的内容互相独立。

选项卡标签应当能够逻辑上推断出分组的内容。

选项卡标签可以都是图标,也可以都是文字。当使用文字标签时,应该使用短标题。

避免跨选项卡进行内容比较。需要进行跨选项卡内容比较时,说明使用不同的内容组织或展示方式可能更合适。

超过选项卡最大长度的长标签,可以将截断前的内容换行到第二行

不要调整单行标签的大小。如果标签太长,请将文本跨两行或使用可滚动选项卡

过早截断标签会妨碍理解,应当先换行之后在截断

不要把文本标签和图标混合使用。全部使用文本标签、或全部使用图标标签

选项卡类型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

根据平台和使用情境,选项卡内容可以分为固定选项卡或滚动选项卡。

固定选项卡

固定选项卡同时显示所有的选项卡,适用于需要在固定选项卡间快速切换,例如在切换地图的的交通工具。

固定选项卡中的选项卡宽度都相同,宽度可以用视图宽度除以选项卡数量得出,也可以统一使用标签最长的选项卡的宽度。要在固定选项卡之间导航,可以轻触选项卡或者在内容区域左右滑动。

手机上的固定选项卡

手机上的固定选项卡

滚动选项卡

滚动选项卡在任何时候都只能展示其中的一部分。它可以包含更长的选项卡标签和更多数量的选项卡,适用于触控平台,当用户可以直接通过标签定位到内容,而不需要对比视图间的内容的时候。

轻触选项卡或在内容区域左右滑动,可以在选项卡之间切换。在选项卡上左右滑动可以滚动选项卡,而不切换视图。

手机端的滚动选项卡

滚动选项卡示例

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

固定选项卡

选项卡宽度可以用视图宽度除以选项卡数量得出,也可以统一使用标签最长的选项卡的宽度。

如果选项卡和视图的间距小于等于 16dp,使用全宽选项卡代替居中选项卡。

最小和最大宽度(包括边距)

  • 最大宽度:264dp
  • 最小宽度:在比较大的视图上为 160dp,比较小的视图上为 72dp

高度

  • 48dp

边距

  • 文本左右边距 12dp
  • 单行选项卡文本底部 20dp,双行选项卡文本底部 12dp

对齐

  • 较小的视图上全宽显示
  • 较大的视图上居中对齐

指示器

  • 高度:2dp
  • 颜色:#fff 或强调色

手机竖屏时,只有文本的固定选项卡

手机竖屏时,只有文本的固定选项卡

只有文本的选项卡

文本

  • 14sp Roboto Medium
  • 产生换行时为 12sp,最多两行
  • 全大写
  • 水平垂直居中
  • 激活状态颜色:#fff 或强调色
  • 未聚焦的选项卡颜色:#fff 70%

手机横屏时,左对齐到关键线的选项卡

手机横屏时,居中对齐的选项卡

含图标和文本的选项卡

高度

  • 72dp

图标

  • 24x24dp

对齐

  • 文本和图标在选项卡中垂直居中对齐

间距

  • 图标和文本间距 10dp
  • 文本下边距 16dp

手机上带图标和文本的固定选项卡

手机上带图标和文本的固定选项卡

只有图标的选项卡

高度

  • 48dp

图标

  • 24x24dp

对齐

  • 图标在选项卡中垂直居中对齐

间距

  • 图标下边距 12dp

手机上只有图标的固定选项卡

手机上只有图标的固定选项卡

滚动选项卡

最左侧的选项卡内容和关键线对齐。在横屏和竖屏时,对齐的关键线会不同。

每一个选项卡的宽度都是单独计算的。

最小宽度和最大宽度(包含边距)

  • 最大宽度(以较小者为准):264dp 或视图宽度减去 56dp
  • 最小宽度:较大的视图上为 160dp,较小的视图上为 72dp

高度

  • 48dp

间距

  • 文本左右边距 12dp
  • 单行选项卡文本下边距 20dp,两行选项卡为 12dp

指示器

  • 高度: 2dp
  • 颜色:#fff 或强调色

滚动选项卡

避免选项卡中出现上图那样的超长标签,滚动选项卡的最大宽度包含了换行的文本。

文本

  • 14sp Roboto Medium
  • 当有换行时为 12sp,最多两行
  • 全大写
  • 水平垂直居中
  • 激活的文本颜色:#fff 或强调色
  • 未聚焦的选项卡文本颜色:#fff 70%

避免选项卡中出现上图那样的超长标签,在手机横屏模式下,最大宽度的选项卡和左侧的关键线对齐。

桌面

最小宽度和最大宽度(包含边距)

  • 最大宽度(以较小者为准):264dp 或视图宽度减去 56dp
  • 最小宽度:在较大的视图上为 160dp,较小的视图上为 72dp

高度

  • 48dp

对齐

  • 居中对齐或和左侧关键线对齐

Text

  • 13sp Roboto Medium
  • 全大写
  • 水平垂直居中对齐
  • 换行最多两行
  • 激活状态颜色:#fff 或强调色
  • 未聚焦的选项卡文本颜色:#fff 70%

间距

  • 文本左右边距 24dp
  • 单行文本的下边距为 20dp,两行文本为 12dp
  • 第一个选项卡文本左边距:80dp

指示器

  • 高度: 2dp
  • 颜色:#fff 或强调色

桌面端的选项卡

轻触选项卡的动画

注意:该组件的实现可能因平台而异。根据平台的标准来实现,以便得到相关的改进。

触摸选项卡时的动画