当我们在对产品的内容，进行展示设计时，通常会先将内容进行归类整理，然后以页签的形式呈现给用户。页签的优点是，让访问目标更加清晰，使查找和浏览更加高效。

移动端产品的页签，在不同的系统环境中，会被定义为不同的控件类型，在Android 系统环境下，主要通过使用标签项（Tabs）来完成内容分类，而在iOS系统中，则通过使用分段控件（Segmented Controls）完成这一任务。而我们本节内容的重点，是讲解一下标签项（Tabs）的使用。

样式类型

常见的标签项（Tabs）因构成要素的不同，被划分为3种类型，分别为：文本标签项、图标标签项和复合标签项。

1.复合标签项

复合类型的标签项主要由图标(A)、文本（B）和活动指示器（C）等元素构成。这种类型的标签项，其优点是：内容信息对称，视觉美感度高，图标和文案互为“佐证”，能更加准确的向用户传递类型信息。其不足是：构成元素较多，整个控件占据了较大的页面空间。

2.文本标签项

文本类型的标签项主要由文本（B）、活动指示器（C）等元素构成。这种类型的标签项，是目前应用范围最广的页签类型。使用这种类型的标签项时，需格外注意，一定要控制好文本字段的长度。如果必须要使用超长的文本字段做标签，一定要保证文本的完整显示，千万不要对文本采取换行、截断、省略等方式处理。

3.图标标签项

图标类型的标签项，主要由图标(A)+活动指示器（C）等元素构成。图标类型的标签项，使页面构成，更加简洁，但不足是，在传达复杂内容信息时，不如文本标签清晰、直接。这同我们在一般按钮中提到的，文字按钮和图标按钮的特性差异，有相近之处。

固定和滚动

Android 控件规范约定，在竖屏情况下，当标签项的标签个数小于等于4时，需要在屏幕内，完整显示4个选项内容。

当完整显示4个标签时，所有标签都固定不动。像这种固定不动的标签项类型，我们称之为固定标签项

反之，如果标签项个数大于4个，我们就无法通过一屏展示所有的页签，这时就需要使用横向滑动查看更多选项的设计方案，而选择暂时隐藏部分页签。

像这种支持横向滑动操作的标签项类型，我们称之为滚动标签项。

几点注意事项

1. 使用固定标签项时，从严格意义上讲，需要保持每个分类的宽度一致。如果因某个分类的文本过长，导致无法均分宽度时，应采用滚动标签项的设计方式，优先保证文本的完整展示。

2.使用滚动标签项时，设计上一定要有清晰的视觉传达，一个通用的设计处理方法是，在标签项的左端，留出一定的空白空间，而右侧被标签完全填充，且有显示不全的标签选项露出，作为滑动查看引导。

3.在每次执行标签选中时，都需要重新定位标签项的位置。一个重要的原则是：每次选中发生时，都必须保证选中的标签，位于当前界面的可视范围内。

页面位置

标签项通常和页面的头部栏（比如导航栏一类的控件）结合，显示在页面的顶部位置

也可以嵌入到卡片或表格组件中，用以控制其下方的UI区域

但是标签项不可以和底部导航结合，那样会使页面关系显得过于混乱。

页签的切换

标签项的页签切换可通过两种操作方式实现，一种是通过点击页签来完成切换

另外一种是通过在页签下的内容区域，使用手势滑屏，来实现页签切换。

采用滑屏方式实现页签切换时，需要特别注意，有时页签的内容区域，可能存在其他可支持滑动的内容组件，滑屏操作很容易造成手势冲突。

比如下图案例中，Recent页签下存在着一个，可支持滑屏查看更多图片的响应区域，在这个区域内执行滑屏操作，并不能马上完成页签的切换，通常需要将全部的图片滑屏浏览完毕，才能到达触发页签切换的临界位置。

另外的一个案例：Picked items页签下的商品列表区域，存在着一个滑动触发添加或删除操作的响应区，当我们滑动屏幕，想要切换页签时，往往会引发滑动冲突。

区域优化

在上文中我们曾提到过，Tabs可以和导航栏等控件结合，显示在页面顶部位置。而标签项有3种类型，其中复合类型的标签项，因面板承载的元素较多，通常占据较大的页面空间，而导航栏同样会占据了较大的页面空间，两种控件一旦结合，长期占据页面顶部，会使屏幕可用区域非常紧张。对于手机等小屏设备，会给用户浏览内容，带来非常糟糕的体验。

针对这一问题，Android 官方控件设计指导，给出了一种解决方案。当我们向上滚动屏幕时，导航栏会被隐藏，Tabs会悬停在屏幕的顶部位置，从而为内容展示提供较大的空间。

如果此时的Tabs选项，并不是用户高频使用的选项，那Tabs同样也可以支持隐藏，隐藏页签后，整个页面都可用来，向用户展示内容

在移动应用设计中，因内容展示受限于屏幕尺寸，为了更好的展示内容，通常会用到上述的解决方案。但在具体的产品设计中，何时采用这种设计方案，主要取决于对用户行为的判定。

举个栗子，当我们启动一款视频APP，可能有明确的触发动机，例如想看看最近上映有哪些大片，所以首先我们要进入到电影的页签中，然后浏览这个页签下的全部资源。但有的时候，我们也可能没有明确的行为动机，只是想启动APP，随便浏览一下编辑推荐的热门影片，可见，进入分类页签是可选行为，浏览是必需行为。

所以当我们启动应用后，能满足快速进入分类，在浏览内容时，提供更加友好的内容展示空间，这基本上就能创设出极佳的使用体验。

交互状态

页签切换过程中，相关页签的交互状态总结如下

设计禁忌

在标签项在使用过程中，一些常见的错误类型

错误1：将标签项用于类型对比

分类标签不可以用于类型比对，比如用作同一个商品的不同颜色，大小，型号等

错误2：截断和省略文本标签

如果文本标签的文案较长，不要对长文案进行截断或者省略处理，一定要保证文案的完整显示，必要时，可以通过使用滚动标签项，来完成这一目标

错误3：样式不统一

在标签项控件时，应保证所有页签的类型样式一致，如果用文本，则每个页签都要使用文本，如果使用图标，则每个页签都要使用图标

错误4：标签间距不同

在使用文本页签进行设计时，应要保持页签间距大小一致，不要将页签间距故意设为不同，那样将影响用户的正常使用