【2019-12-20】设计元素12篇-选项卡（转）

初识

横竖两处，都是选项卡。
抽象一下，画成模型：

选项卡，也被称为：Tabs、页签，或许还有其它叫法，总之，就是上图这样的一种导航样式。

数字产品需要一种好用的导航样式：能展示多个项，其中一个项是当前选中的。模拟现实中记事本，做出了选项卡导航。

选项卡可以被看做是一种列表，一种特殊的列表，栏目名称的列表，用作栏目导航，措辞比较工整。（“列表”是这个系列里单独的一篇。）

每一个页签项应包含“当前态”和“非当前态”两种状态，需要不同的表现样式。对于PC网页，通常还需要再增加一种hover（鼠标移到其上）状态。

---

各页签之间应该是什么关系？

以学校里一个班的同学为例，为了方便的筛选找到某个人，我们设计一组的同学名单的选项卡：

当然，如果需要，还可以有更多的卡，比如：会踢足球的，会唱歌的…
以这个例子，可以总结出选项卡中内容的关系：

1. 各选项卡不必一定是同一属性，“戴眼镜的”与“身高170+”，描述的不是同一种属性。并非一定要：戴眼镜、不戴眼镜、偶尔戴眼镜。

2.各选项卡中包含的内容，不必须要求“全部=栏目一+栏目二+栏目三”。

3.不必须追求各个页签内的内容彼此不重叠。戴眼镜的也可能身高170+，那就在两个卡里都出现。

4.不必追求每个卡里的内容量一样多。戴眼镜的也许有20人，身高170+可能只有3个人，没关系，有多少显示多少。选项卡的意义在于，用户需要从“身高170+的”这个特征里找人，所以就提供这么一个选项卡。

5.“全部”不是必须的。提供“全部”，那往往意味着，多数时候用户需要看全部，偶尔会需要依某个特定类别筛选。不提供“全部”的，需要小心，应确保“用户确实不需要全部一起看”，这要求远比字面上的理解要复杂，比如：迅雷

没有“全部”下载项目列表，而是分为“正在下载”和“已完成”。最上面蓝色这项，马上就要下载完成了，眼巴巴的看着，盼着。终于下载完成了，可它却消失了，因为下载完成了，跑到“已完成”里了。迅雷的设计者也意识到了这个问题，为此做补救，下载完成时，界面自动跳转到“已完成”。自动跳转又是另外一个不好的设计。抱薪救火。

各个选项卡可以理解为：这里有一大堆内容，我们给出若干个有用的线索，让用户方便查看。如果有必要全给出来，那就有“全部”。

---

不能离开

微博顶部的选项卡中，
点“发现”会怎样？嗯，就是你想象的那样。
点“游戏”会怎样？页面会变成这样：

打开了新的页面，完全一个新的网站，出乎意料。
出乎意料就是这个设计的错处。
选项卡样式被固定下来，意义就在于设计者与用户形成一个共同的认识，如同语言中的一个词汇。

数字产品出现的时间还很短，类似这样共通的词汇还很少，正在逐渐积累。词汇本来就少，写文章就困难，更不应该错用词汇。