[交互设计]Tab如何服务于信息分组

一、前言：

很多信息内容条目多，结构复杂，所以常常会需要把一大堆的内心信息进行分组归类，在一个页面中，通过「类别」把一堆信息梳理成有规律、有层次的逻辑架构。关于这个场景，我常常会用到「tab」这个功能来处理，因此总结出下面一些关键的点。

Tab将大量关联的数据或者选项划分成更易理解的分组。

Tab元素中，同一时刻，只能显示一个选项卡的内容。当用户需要对多个选项卡的信息进行对比，或者这几个分类的信息，放在一起显示会让用户更加方便获取到目标信息的时候，就不应该使用Tab的形式来对信息进行分类和分组了，否则会导致用户为了对比所需的信息，而不停在选项卡之间进行切换。

下面讲的是页面内的Tab，不包括顶部和左侧导航的用于整个页面切换的导航Tab。

二、这里定义两种：

一种是功能型tab，一般是在设计阶段就已经可以明确规划到的功能范围，文案、功能内容、数量都是在可控范围内，不同的用户基本上都会是一样。

一种是内容型tab，一般tab的字段内容一部分承担了条目列表的功能，一部分承当普通tab的切换的功能。这类的tab会根据不同用户使用情况，生成不同的tab内容list，因此不同用户文案、内容都会有所不同，所以tab的数量有可能有很多，有可能为0，这是需要设计者去注意的。

三、设计形式：

那么针对上述两种情况，在tab的设计上也会有所差异。

功能型tab

中规中矩，根据内容以及规划内信息框架进行对应的设计，常见的那几种（横向的、纵向的）基本可以满足需求。下面这三种在toB的复杂企业系统中，基本可满足功能性的信息分类的需求。

内容型tab

需要考虑的问题比较多：

（1）tab的字段长短（最长的情况，最短的情况，常规的情况）

（2）tab可以预测到的数量（最少情况下是几个，如果为0的情况怎样，需不需要默认提供几个，最多的情况下会是几个，最常规的情况下是几个）

（3）tab有无需要分组情况

下面这三种类型，在横向布局和纵向布局上面各有优势，也是比较常见的用户内容生成个数和长度不确定的情况下，比较容易使用和把控的「Tab」样式。

四、总结：

关于Tab的样式，可以设计出各种各种，不同的设计师对于不同样式的Tab的样式，可以有不同的定义和叫法。但是个人认为，Tab作为选项卡，最起码应该承担多个平级的内容菜单之间的切换，以及当用户在第一个选项卡中停留时，用户可以明确的预期到，第二个选项卡的内容大概是什么内容。

最后，关于Tab的基础知识，国内很多文章都有，但大部分应该都是参考了 NielsenNormanGroup 研究团队的这篇文章：Tabs，uesd right 吧。