序

之所以这篇想写Tabs这个组件，是想到了很久以前做过的一个需求，大致内容是将三种类型的图片作一个预览的功能，当时我就使用了Tabs组件去设计。

这是一个真实且值得回忆的事情。

Tabs：选项卡

前言

首先什么是选项卡？

选项卡由多个(2个或以上)选项标签和所控制的内容组成。

选项卡很容易和导航栏混淆，这篇会先讲一下选项卡，导航栏放在后一篇文章里去说。

目录

– 选项卡的由来

– 何时使用选项卡

– 选项卡的选项标签

– 选项卡和导航栏的区别

– 按优先级排列选项标签

– 选项标签应该更易懂

– 尽量不使用图标

– 始终有一个选项标签被选中并强调

– 未选中的选项标签也要容易被发现

– 放置选项卡的位置

– 单行放置选项标签避免嵌套

– 热区的大小

– 滑动手势是加分项

– 动效同样也是加分项

– 最后

选项卡的由来

很多组件的交互方式受现实生活中实物影响，比如之前说过的单选按钮受早期汽车上收音机的物理按钮所影响，选项卡也是，是受现实生活中能够快速翻阅的索引卡（如上图）影响。

因为和现实呼应，所以这些组件能够在应用中更有效的去帮助用户提高效率并完成目的。

何时使用选项卡

IxDKN

当用户不需要同时看到多个选项标签中的内容时，可以考虑使用选项卡组件。

如果当用户需要比较多个选项标签中的内容时，就应该把所有信息放在一个页面。因为如果使用选项卡这个组件，会让用户在不同选项标签之间来回切换，增加了用户的交互成本，降低了阅读性和可用性。

选项卡的选项标签

每个选项标签所控制的内容是互斥的，根据用户的认知有条理的对选项标签进行归类。