移动端组件-Tabs 标签页

定义

Tabs 一般出现在页面的顶部或者页面中，让用户在少量且同样重要的视图和功能间探索和切换。

结构

tab 标签

tab 用来显示有关联的分组内容。

tab 内容

tab标签用来简要的描述内容。

1.png

用法

何时使用

• 有同类关联信息存在，且信息量比较大的时候，可以通过标签页来组织内容。

• 如果用户需要来回切换比较不同标签中的信息，那么建议不要使用标签，因为来回切换会增加用户的记忆成本、降低可用性。

• 如果内容中有使用滑动手势（譬如地图、滑动来忽略项目的列表），不要使用 Tabs。

Tabs 与 TabBar 之间的区别：
标签栏被认为是相互关联的，而导航栏不是。当用户点击导航栏时，他们希望被带到单独的视图，这可能与当前视图无关。

分组2.png

关于 tab 标签

• Tabs 应该显示在一行内，不要使用多行或嵌套选项卡，一个 tab 里的内容不应包含另一组 tabs。
• Tabs 中当前可见内容要高亮显示。
• 按优先级从左到右排列 tab。
• 一组 tabs 至少包含 2 个 tab 、最多 5 个 tab，超出的标签可以滑动展示。

• 尽量让未被选择的 tab 清晰可见、可读。

  
  

内容

tab 应该按照一定逻辑关系去组织内容。

tab 标签的内容可以自定义，可以是图标、文本已经图标+文本。

类型

固定的Tabs

• 固定的 tabs 同时显示所有标签，最适合快速切换浏览内容，例如钱包搜索结果分类。

• 标签具有相同的宽度，根据视图宽度除以选项卡数量。最多均分 5 个标签。
  或根据最宽的选项卡标签计算。

• 通过触摸标签或向左、向右滑动内容区域来切换浏览内容。

滚动的 tabs

• 比固定 Tabs 容纳更多的标签，一般超出 5个tab时使用。当用户需要比较 Tabs 标签的内容时，不适合用。

• 通过触摸标签或向左、向右滑动内容区域来进行浏览。

• 需要通过视觉样式示意用户有隐藏的内容。这边使用白色半透明遮罩层示意。

关注公众号“设计有一思”