Material Design 组件图鉴 —— Tabs

Tabs make it easy to explore and switch between different views.

  • 因为 tabs 之间本身就支持滑动手势进行切换,所以 tabs 之下的内容不可以也支持滑动操作。

使用

Tabs 的使用为用户对内容的分类提供可供性。Tabs 的文字要足够简要地描述所属内容的类型。

如果是白色底的话,除了 indicator 的颜色,文字的颜色也考虑变化为 accent color 的颜色。

何时使用

Tabs 用于以较高的高度对重要内容进行分组分类,例如不同主题的新闻。Tabs 不适合用于装载带有 pagination 的内容。

不要与定义了有横划手势的内容同时使用。(谷歌地图内选择出行方式使用了不可横划的 tab,但地图依然可以缩放)

固定类 tab 要维持一致性,而 tab 过多则要使用可以滚动的 tab。

Tabs 是横向排列的。

格式要求:

  • 文字单行展示,如文字太多,可以双行展示并且删节,原则是做到尽量多现实文字。
  • tab 之下不可以有 tab。
  • tab 有选中色。
  • 有组织有顺序地排列 tab。
  • tab 与 tab 之间的等级是平等的,tab 与内容要有紧密联系。


内容

很多类型的内容分好维度后都可以以 tab 进行组织(维度要保持一致性)。小至曲风的分类,大至功能板块的分类。

维度一定要是一致的。

Tab 的 label 要足够清晰明了足够精简。

Tab label 可以包含文字与 icon,文字要大写。

分类要行之有效,两个 tab 之内的内容不能近似。


Tabs 的种类

Tabs 分类可滚动和不可滚动两种,可滚动内又包含了 overflow menu 展现更多 tab 内容的样式。

不可滚动的 Tabs

一次性将所有的 tab 扔出来。

Tab 平均分配宽度空间,或以 最宽的 tab 来定义每个 tab 的宽度。

可滚动的 Tabs

Tab 数目太多无法一次性就展示完的话使用可以滚动的 tabs,滚动 tabs 不会切换内容。

以最宽的 tab 来定义每个 tab 的宽度。


尺寸

不可滚动 Tabs

固定尺寸的 tabs 均分屏幕宽度或以最宽的 tab 来定义每个 tab 的宽度。

假如 tab 的 margin 少于 16dp,使用 full-width 的方法来定义 tab 的宽度。

纯文字:

  • 最大宽度:264dp

  • 最小宽度:160dp/72dp

  • 高度:48dp

  • 文字左右最小间距:12dp

  • 文字底部间距:单行20dp/双行12dp

  • 小屏幕 full-width 对齐/大屏幕居中对齐

  • indicator颜色:accent color/#fff

  • 字:14sp Roboto Medium/文字太多12sp

  • 全大写

  • 水平垂直居中

  • 选中色:#fff/accent color

  • 未选中:70% #fff

文字与icon

  • 高度:72dp
  • icon:24 x 24dp
  • icon 与文字垂直居中
  • icon 与文字间距:10dp
  • 文字于底部间距:16dp

只有 icon

  • 高度:48dp
  • icon:24 x 24dp
  • 垂直水平居中
  • 底部间距:12dp

可滚动 tabs

可滚动 tabs 的 tab 宽度可以不一致,排列方式与不可滚动 tabs 不一样,详见图片。 不存在带 icon 又可滚动的 tabs。

  • 最大宽度:264dp/或是视图最大宽度减去 56dp。

  • 最小宽度:160dp/72dp

  • 高度:48dp

  • 文字左右最小间距:12dp

  • 文字底部间距:单行20dp/双行12dp