Material Design——Tabs

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Tabs

选项卡通过不同的屏幕、数据集和其他交互来组织内容。

一、用法

选项卡组织和允许在与层次结构相关的内容组之间进行导航。

选项卡是一个系列的

每个选项卡应包含与集合中其他选项卡不同的内容，例如, 选项卡可以呈现不同的新闻节、不同的音乐流派或不同的文档主题。

Right：标签标签可以包括图标和文本，文本标签应该是短的；Wrong：不要使用制表符在需要按特定顺序读取的顺序内容中移动。 Right：将制表符作为其关联内容上方的一行显示；Wrong：避免使用选项卡来比较多个选项卡上的内容, 例如同一项的不同大小。

△ 原则

· 可伸缩  当选项卡可以水平滚动时, UI 可以有尽可能多的选项卡

· 信息  选项卡将内容组织到类别中, 以帮助用户轻松查找不同类型的信息

· 同一行  在同等重要的类别中, 制表符作为对等方彼此相邻显示

与其他组件的组合

选项卡可以与顶级应用程序栏等组件配对, 或者嵌套在诸如卡片和表单之类的组件中。

△ 同一行

固定选项卡

固定选项卡显示一个屏幕上的所有选项卡, 每个选项卡的宽度固定，每个选项卡的宽度由屏幕宽度除以制表符数来确定，选项卡集表示这是当前触发的选项卡。

可滚动选项卡

无固定宽度显示可滚动制表符，它们是可滚动的, 这样某些选项卡将保留在屏幕之外, 直到滚动。

二、分析

1.ContainerActive icon (Optional if there’s a label)；2.Active text label (Optional if there’s an icon)；3.Active tab indicator；4.Inactive icon (Optional if there’s a label)；5.Inactive text label (Optional if there’s an icon)；6.Tab item

△ 文本标签

文本标签应清楚和简明地描述它们所代表的选项卡的内容，选项卡内容应包含一组具有共同特征的项。

制表符标签显示在单行中，如果需要, 可以使用第二行, 并截断文本，或者, 您可以使用可滚动的选项卡允许更长的标题空间。

Caution：虽然标签文本可以换行到另一行, 但可滚动制表符将文本限制为单行；Wrong：不要调整文本标签的大小以适合一行，如果标签太长, 则将文本换到第二行或使用可滚动选项卡。 左：除非需要, 不要截断标签, 因为截断的文本会妨碍理解；右：不要混合只包含文本的选项卡, 只包含图标的选项卡，在所有标签上使用所有文本标签、所有图标标签或两者。

△ 图标

图标以简单、可识别的方式传达标签所代表的内容类型，但是, 它们在表达复杂内容时不像文本标签那样有效。

选项卡可以使用标签和图标的组合。 选项卡可以使用图标来传达内容。 不要只在某些选项卡上使用带有图标和文本标签的制表符，要统一在全部的tabs上使用图标。 当只用图标表示选项卡内容时请小心, 因为图标的含义在每个主题上可能都不清楚。

△ 活动选项卡指示器

若要将活动选项卡与非活动选项卡区分开来, 请对活动选项卡的文本和图标应用下划线和颜色更改。

下划线和颜色更改将活动选项卡与非活动标签区分开来。

三、行为

△ 在选项卡之间移动

用户可以通过点击选项卡或通过在内容上执行滑动手势在选项卡之间导航。

· 点击选项卡

通过点击定位到一个选项卡

· 在内容区域内滑动

要在选项卡之间导航, 用户可以在内容区域内向左或向右滑动。

对于每种类型的选项卡, 笔势的出现方式不同:

1.固定选项卡不响应所有的滑动手势

2.在华东时, 可滚动制表符独立于内容区域滚动

在内容区域中放置其他 swipeable 内容 (如交互式地图或列表项) 时, 请格外小心

Caution：在具有选项卡的 ui 中放置 swipeable 内容时要小心, 因为用户很容易华东错误的组件；Wrong：避免在具有制表符的 UI 的内容区域中放置 swipeable 项, 因为用户可能会错误活动组件。

△ 活动

当屏幕滚动时, 制表符可以固定在屏幕的顶部, 或者从屏幕上滚动，如果他们从屏幕上滚动, 当用户向上滚动时, 它们将返回。

当选项卡连接到顶部应用程序栏时, 它们可以用条形图从屏幕上滚动, 并在屏幕顶部固定。 选项卡可以滚动, 并在页面滚动时重新出现。 不要在顶部应用程序栏后面滚动制表符，当选项卡附加到组件时, 它们应作为单个单元出现并移动。

四、位置

△ 制表符布局

选项卡显示在一行中, 每个选项卡都连接到它所表示的内容，作为一个集合, 所有选项卡为同一个主题。

将制表符置于内容上方。 Caution：避免在另一个选项卡中嵌套选项卡；Wrong：不要把制表符放在下面。

△ 制表符放置

选项卡可以与诸如顶级应用程序栏、嵌入在特定 UI 区域中的组件或嵌套在卡片和表等组件中一起使用，选项卡控制显示在它们下面的 UI 区域。

顶部应用程序栏下面的选项卡 在滚动的时候，不要使用选项卡与短的顶部应用程序栏, 或顶部应用程序栏, 过渡到短的顶部应用栏。 不要将选项卡附加到底部导航, 因为它可能会导致混淆哪些操作或选项卡控制哪些内容。

选项卡可以嵌入到特定的 UI 区域中, 以便控制该区域中显示的内容。

嵌套在列中的选项卡, 它们可以在点击时控制的内容，缩小到62.5%。 不要将标签放在他们不能控制的内容上面，如果选项卡只更改 UI 的某个部分, 请将其嵌入到该节中。缩小到62.5%。 嵌套在卡中的制表符。 嵌套在表单中的选项卡。

五、固定选项卡

△ 用法

固定选项卡同时显示集合中的所有选项卡，它们最适合于快速切换相关内容, 如地图中的传输方法，若要在固定选项卡之间导航, 请单击单个选项卡, 或在内容区域中向左或向右滑动。

显示有限数量的类别时使用固定选项卡。 使用图像和标签的固定标签栏。

△ 位置

固定制表符的宽度相等, 可计算为:

· 屏幕的宽度除以制表符的数目

· 最宽标签标签的宽度

使用固定选项卡时, 请确保在移动时可以看到它们, 而不截断其文本，不要同时使用四个以上的固定标签。

不要在一组中使用超过四个固定选项卡，尺寸减少到62.5%。 在更宽的布局中, 固定制表符的宽度会增加, 因为它们的制表符宽度取决于屏幕的宽度，尺寸减少到62.5%。 避免让固定标签导致内容混淆，这些制表符宽度与此布局中的列紧密对齐, 这样选项卡和内容之间的关系可能会被误解。

△ 密集固定选项卡

密集固定标签在屏幕上不相等，选项卡栏居中、右对齐或左对齐，应在横向布局 (如横向模式) 中使用群集固定选项卡。

在更宽的布局中, 选项卡可以居中放置在选项卡栏上。 密集的固定选项卡可以向左或向右对齐。

六、可滚动选项卡

△ 用法

在屏幕上无法容纳一组选项卡时, 请使用可滚动选项卡，可滚动选项卡可以使用较长的文本标签和更大数量的制表符，它们最好用于浏览触摸界面。

一组可滚动的选项卡。

△ 位置

可滚动选项卡同时显示所有选项卡的子集，每个选项卡的宽度由其文本标签的长度定义。

在 "移动" 和 "桌面" 上, 偏移左侧的第一个选项卡, 以指示选项卡是可滚动的。 避免在每个选项卡上使用不一致的填充。 在桌面上, 提供一个可视指示器, 显示更多的选项卡在屏幕上可用。

△ 行为

要在一组可滚动的选项卡之间导航, 用户可以向左或向右滑动设置。选项卡集可以循环, 因此当用户到达集中的最后一个选项卡时, 第一个选项卡将再次显示。

要选择单个选项卡, 请点击它。

· 激活时的制表符放置

在点击时, 可滚动制表符应重新定位以在屏幕上完全可见。

活动选项卡重新定位以在屏幕上完全显示。 活动选项卡在活动时可以移动到行的中间。

七、状态

默认情况下, 选项卡继承启用的状态, 其中有一个活动态。

选项卡的非活动状态可以继承悬停、焦点和按下状态。

已启用选项卡的悬停、焦点和按下状态

选项卡的活动状态可以继承悬停、焦点和按下状态。

活动选项卡的悬停、焦点和按下状态

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~