Material Design —Tabs

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

Tabs

Material Design链接：Tabs

Tabs

Tabs可以轻松浏览和切换不同的视图。

选项卡使内容组织处于较高级别，例如在app的视图、数据组或功能之间切换。

将Tabs以单行的形式显示在其关联的内容上方。 Tab的标签应该简洁地描述其中的内容。

由于滑动手势用于在Tabs之间导航，请勿将Tabs与同样支持滑动手势的内容配对。

类型

固定

滚动

Tab标签

标签标签可能包含icons和文字。

颜色

将app的强调色或对比色用于文本字段和文本字段光标。

用法

Tab提供了显示分组内容的功能可见性。 Tab的标签简洁地描述了tab的相关分组的内容。

移动端

左：默认app bar和固定的tab bar    中：延长的app bar和固定的tab bar    右：固定的tab bar固定到滚动内容顶部

左：放入搜索，app bar和固定的tab bar    中：默认的app bar和可滚动的tab bar    右：文字颜色与tab指示器颜色相同

左：默认app bar和带icon的tab bar    右：icon的颜色与tab指示器颜色相同

pc端

默认的app bar与tab bar

带有一个下拉菜单的tab bar

点击菜单中“book”后的tab bar

带有滚动标页码的tab bar

选中tab bar时

何时使用

例如，使用选项卡组织高级别的内容，以呈现报纸的不同部分。 请勿将标签用于轮播或分页内容。 这些使用案例涉及查看内容，而不是在内容组之间进行导航。

有关使用制表符导航顶层视图的更多详细信息，请参阅导航 - 模式中的“制表符”。

请勿使用包含支持滑动手势的内容的选项卡，因为滑动手势用于在选项卡之间进行导航。 例如，避免在内容可平移的地图中使用选项卡，或者避免在滑动内容的情况下使用可以取消项目的列表。

固定标签应该使用有限数量的标签，并且一致的放置将有助于肌肉记忆。 当有许多或可变数量的选项卡时，应使用可滚动的选项卡。

左：tabs用于在包含了重要程度相似的内容中进行切换    右：重要程度参差不齐

Tab特征

Tabs控制在一个始终如一的位置显示内容。

格式规范：

·将tabs显示为单行。 如果需要，将tab标签换行，然后省略。

·不要在tabs中套用tabs

·突出显示与可见内容对应的tab

·将tabs分级组合在一起。 内容相似的tabs链接为一组

·保持标签与其内容相邻以保持两者之间的关系

tabs是以行展示而不是列

tabs不能套用

内容

在tabs中显示的内容可能差异很大，甚至在tabs之间。 例如，显示艺术家不同年份作品集的tabs与包含不同类型设置的tabs。

一组tabs中的所有内容应该根据一个较大的组织原则下（例如，设置或指导）进行关联，每个tab的内容与其他tab的内容互斥。

Tabs标签应提供有意义的差别，才能让用户从逻辑上讲其与其中内容关联起来。

Tabs标签可能包含icons和文字。 选择文字标签时，请使用简短的标题。

避免对内容进行交叉标签比较的需要。 重要的跨标签比较可能表明内容将从不同的组织方式或展示方式中获益，从而使内容更接近。

标签的展示方式

Tabs类型

根据平台和使用环境，tab的可以分为固定tabs或可滚动tabs。

固定tabs

固定tabs可同时显示所有tabs，最适合用于需要固定位置tabs之间快速切换的内容，例如切换Google地图中指示运输路径的方向。

固定tabs具有相同的宽度，计算方式为视图宽度除以标签数量，或基于最宽的tab标签。 要在固定选项卡之间导航，可点击tab或向左或向右滑动内容区域。

可滚动tabs

可滚动选项卡在任何特定时刻显示选项卡的子集。 它们可以包含更长的选项卡标签和比固定选项卡更多的选项卡。 当用户不需要直接比较选项卡标签时，可滚动选项卡最适合用于浏览触摸界面中的上下文。

要在可滚动选项卡之间导航，请触摸选项卡或向左或向右滑动内容区域。 要在不导航的情况下滚动选项卡，请向左或向右滑动选项卡。

移动端可滚动tabs

pc端可滚动tabs