【Material Design视觉设计语言】UI组件设计（十四）：Tabs

作者：郭孝星
微博：郭孝星的新浪微博
邮箱：[email protected]
博客：http://blog.csdn.net/allenwells
Github：https://github.com/AllenWells

【Material Design视觉设计语言】章节列表

【Material Design视觉设计语言】开篇
【Material Design视觉设计语言】Material Design设计概述
【Material Design视觉设计语言】应用布局设计
【Material Design视觉设计语言】应用自适应布局
【Material Design视觉设计语言】应用样式设计
【Material Design视觉设计语言】应用动画设计
【Material Design视觉设计语言】UI组件设计（一）：按钮
【Material Design视觉设计语言】UI组件设计（二）：卡片
【Material Design视觉设计语言】UI组件设计（三）：纸片
【Material Design视觉设计语言】UI组件设计（四）：表格
【Material Design视觉设计语言】UI组件设计（五）：提示框
【Material Design视觉设计语言】UI组件设计（六）：分隔线
【Material Design视觉设计语言】UI组件设计（七）：网格
【Material Design视觉设计语言】UI组件设计（八）：列表
【Material Design视觉设计语言】UI组件设计（九）：菜单
【Material Design视觉设计语言】UI组件设计（十）：选择器
【Material Design视觉设计语言】UI组件设计（十一）：进度条
【Material Design视觉设计语言】UI组件设计（十二）：滑块
【Material Design视觉设计语言】UI组件设计（十三）：Toast
【Material Design视觉设计语言】UI组件设计（十四）：Tabs
【Material Design视觉设计语言】UI组件设计（十五）：文本框

Tabs是在在不同的视图和功能间探索和切换的一种组件。

一 Tabs设计原则

Tabs 应该显示在一行内。

Tabs 不应该被嵌套。也就是说，一个 tab 里的内容不应包含另一组 tabs。

一组 tabs 至少包含 2 个 tab 并且不多于 6 个 tab。

Tabs 控制的显示内容的定位要一致。

Tab 中当前可见内容要高亮显示。

Tabs 应该归类并且每组 tabs 中内容顺序相连。

保持 tabs 和他们的内容相邻，可以明确两者间的关系，距离太远会让人误解。

二 Tabs设计规格

2.1 固定Tabs

固定的 tabs 同时显示所有 tabs，最适合用于快速相互切换的 tabs （例如，在地图中切换线路的交通方式）。

视图的宽度限制了 tabs 的最大数量。在固定的 tabs 中每个 tab 宽度相等，都是最宽的 tab 标签的宽度。可以通过点击 tab 或者是在内容区域中左右滑动来在固定的 tabs 间进行导航。

Tab 宽度：屏幕的 1/3
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
文本在 tab 中居中
激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）
不可用的文字颜色：#fff 60%

2.2 可滚动Tabs

滚动的 tabs 用于显示 tabs 的子集，可以在任何时候使用，并且可以包含更长的 tab 标签和更多的 tabs 数量，最适合用于触摸操作的浏览环境并且用户不需要直接比较 tab 标签。

可以通过点击 tab 、在 tab 上左右滑动或者在内容区域中左右滑动来在滚动的 tabs 间进行导航。

Tab 宽度：12 dp + 文本宽度 + 12 dp
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）
不可用的文字颜色：#fff 60%

2.3 桌面/平板Tabs

Tab 宽度：24 dp + 文本宽度 + 24 dp
激活的Tab的指示器高度：2 dp
文本：平板 14 sp 桌面 13 sp Roboto Medium
激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）
不可用的文字颜色：#fff 60%