序
之所以这篇想写Tabs这个组件，是想到了很久以前做过的一个需求，大致内容是将三种类型的图片作一个预览的功能，当时我就使用了Tabs组件去设计。
这是一个真实且值得回忆的事情。
Tabs：选项卡
前言
首先什么是选项卡？
选项卡由多个(2个或以上)选项标签和所控制的内容组成。
选项卡很容易和导航栏混淆，这篇会先讲一下选项卡，导航栏放在后一篇文章里去说。
目录
- 选项卡的由来
- 何时使用选项卡
- 选项卡的选项标签
- 选项卡和导航栏的区别
- 按优先级排列选项标签
- 选项标签应该更易懂
- 尽量不使用图标
- 始终有一个选项标签被选中并强调
- 未选中的选项标签也要容易被发现
- 放置选项卡的位置
- 单行放置选项标签避免嵌套
- 热区的大小
- 滑动手势是加分项
- 动效同样也是加分项
- 最后
选项卡的由来
很多组件的交互方式受现实生活中实物影响，比如之前说过的单选按钮受早期汽车上收音机的物理按钮所影响，选项卡也是，是受现实生活中能够快速翻阅的索引卡（如上图）影响。
因为和现实呼应，所以这些组件能够在应用中更有效的去帮助用户提高效率并完成目的。
何时使用选项卡
当用户不需要同时看到多个选项标签中的内容时，可以考虑使用选项卡组件。
如果当用户需要比较多个选项标签中的内容时，就应该把所有信息放在一个页面。因为如果使用选项卡这个组件，会让用户在不同选项标签之间来回切换，增加了用户的交互成本，降低了阅读性和可用性。
选项卡的选项标签
每个选项标签所控制的内容是互斥的，根据用户的认知有条理的对选项标签进行归类。
如上左图应用中选项标签控制着相同维度的内容(类别)切换，右图中选项标签控制着不同维度的内容(类型)切换。
如果选项标签的内容在不同维度时，就会和底部导航(HIG中是:Tab Bars、MD中是:Bottom Navigation)很相像了。
选项卡和导航栏的区别
虽然说这两者会有着类似的功能，但他们在使用上还是有很大差异。选项卡的内容被认为是相互关联的，但导航栏不是。
- 当点击导航栏标签时，用户是在不同位置且不同页面下进行切换。
- 当点击选项卡的选项标签时，用户是在相同位置且不同页面下进行切换。
按优先级排列选项标签
对用户有帮助的去排列选项标签，选项标签需要遵循顺序规则才能提高可用性。
但最重要的是需要根据用户的认知(使用逻辑)或商业目的进行排序。
选项标签应该更易懂
选项标签需要使用简单易懂的描述，而不是很专业的描述(内部叫法)。每个选项卡对应的选项标签文字需要尽量简短，保证用户快速理解，点击选择其中某个选项标签后会得到什么信息。
尽量避免很多文字的选项标签，会发生字符截断(...)或换行。
尽量不使用图标
选项标签可以是文字或icon，但不要在文字中穿插使用icon。
虽说用户对部分icon有认知，但很难快速的从icon中读懂标签的含义，所以使用文字选项标签效果会比icon好。
始终有一个选项标签被选中并强调
选项标签必须默认选中一项，默认被选中的可以是：有商业目的或大多数用户想得到的信息。
选中状态除了常见的高亮显示，也可以调整字体大小、字体加粗、图标(横杠)等等变化来强调出的被选中的选项标签所对应的内容。如上图，就可以避免很难看出到底哪个才是选中的问题了。
未选中的选项标签也要容易被发现
对于未选中的选项标签，也需要保持清晰可见的未选中状态，可以起到提醒用户还有其他标签可供选择的作用。如果当这些未选中的选项标签隐藏不可见时，就会有很难发现的风险，容易遗漏。
放置选项卡的位置
将选项卡放置在屏幕中居上的位置，尽量不要放在边栏或底部，这样会让用户忽略；还有一个原因是选项卡是标题，在信息层级高于其他的内容。
单行放置选项标签避免嵌套
坚持把所有的选项标签单行横向放置，避免嵌套。
当嵌套放置在多行时，就会发生两个组件间的跳跃性阅读，破坏用户在空间上的记忆，会使他们很难记住自己曾经访问过什么选项标签。
热区的大小
根据费茨定律，让选项标签的点击热区足够大，便于点击。计算每个选项标签的点击宽度，可以用设计尺寸的宽度除以选项标签的数量，或者可以使用所有选项标签中最大宽度的标签。
使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。
——Wikipedia(费茨法则)
滑动手势是加分项
虽然点击切换选项标签没毛病，但可以根据页面性能和个厂规范，加入滑动手势，这样用户就不必回到选项标签所在的位置去点击切换了。
HIG中没有说明Segmented Controls的滑动动作，Material Design中说明了Tabs滑动手势。
动效同样也是加分项
加强了不同选项卡处于相同位置的效果，不单单只使用默认的动态效果。使用滑入滑出动效是加分的。
同时动效也起到了鼓励用户使用滑动手势去切换选项标签的作用。
最后
Tabs是一个简单的组件，合理运用其特性就能有巨大的作用。虽说只可能是我们应用(App/Pc)中很小的一部分，但是一个优秀的Tabs设计是可以帮助用户高效完成任务的。
同时也可以基于Tabs的原则去做不一样的设计，比方：腾讯视频App在首页顶部Tabs这一栏右侧有个可以让用户自定义排序频道(选项标签)的功能，这样用户就可以放置自己钟意的频道(选项标签)的在靠前位置，从而再过滤不钟意的内容，同时也减少了操作。
不知这功能用的人是否多，我猜测这起码是为三层用户设计的。
参考文章：
Tabs for Mobile UX Design、Tabs, Used Right
Guideline：
以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～
不知大家还发现过什么优秀的Tabs设计应用，比如说：简书App的首页可以定制调整Tabs顺序。
虽说评论不能传图，但欢迎文字留言。
