正确使用标签（tab）的12条原则

作者：马志强

最近看到尼尔森（Jakob Nielsen，web易用性大师）一篇新的文章，关于正确使用tab标签的设计，翻译过来供大家参考（文中翻译不准确之处，恳请指正）。

摘要：按照以下12条基本原则设计tab标签，以区分网站导航以及其他情况。

在网站中，简单的GUI组件是大部分功能的基础，但是很少看到网站中合理使用。在很多情况下也不能正确地使用一些简单的控件，例如单选框、复选框，更别提很多时候被滥用的下拉框了。本文主要探讨另一个被误用的设计元素：tab标签。

（本文讨论的是页面内的标签，如以下截图所示，它是在网站或者基于网络的应用中涉及到的。另一种不同类型的标签如chrome浏览器中的标签—允许用户在浏览器中同时打开多个页面，这篇文章所谈论的是前者，区别于后者。）

标签可用性设计原则

以下为标签设计的12条基本原则：

1.标签的使用应在相同情境中切换视图。不要引导至其他地方，这是最基本的原则，因为我们所设计标签的初衷就是在同一地方切换视图。

2.标签上的内容具有逻辑性，用户在选择既定标签时可预测所点击的分类内容。卡片分类是帮助实现合理分类的一个方法。如果你不能很清楚地区分分组内容，那么很可能是错误地接合内容与标签。

3.只有当用户不从多标签中同时看内容时，才使用标签。如果用户确实想对比不同标签中的信息时，不得不返回去查看，这加重了短时记忆的负担，增加了认知负担和交互成本，并且相比把所有内容放在一个页面的设计降低了可用性。

4.设计自然并列的标签。如果标签看上去相差非常大，用户就会把它当做导航，如下图。

 

5.高亮显示当前选中的标签。高亮突出显示当前的选项，以确保用户能分辨所选标签。 

该标签使用白色高亮当前选中标签，这在至少3个标签的情况下会更好。只有两个标签的情况下很难分辨哪一个被选中。

6.未选中标签应清晰可见、易读，提醒用户其他选项。如果灰显的标签相对于背景太弱化，将会导致用户不会点击，也不会发现许多隐藏的内容。

7.视觉上结合当前选中标签和内容区域。这就像是贴上一些实物卡片在内容区域上。这强调了所展示的内容与标签的对应，并且也告诉用户在只有两个标签的情况下哪一个被选中。

8.使用精简的标签和平实的语言，而不是用生僻字词。标签通常应该在1-2个词语。短标签更易于扫视。如果你想使用长标签，那对一个标签来说太复杂了。

9.不要全部使用大写字母。因为字母全部大写并不易读。

10.标签应使用一行，而不是多行。多行标签产生跳跃的UI元素，这使得用户很难记忆已经阅读过哪些标签，当然，多行也显得非常复杂。

11.把标签放置在内容面板的上方，不要放置其边上或底下，因为用户容易忽略。标签的范围控制必须在视觉设计上非常明显。打个比方，使用标签就像通过索引卡在翻阅一个老式卡片目录的抽屉，因此用户必须能够一眼就分辨“索引卡片”。

 

12.标签应在外观、功能上保持一致。一致性在视觉设计中非常重要，因为它在以下方面建立了用户对界面的掌控感：

A.可识别性。当一些东西看上去都是一样时，你会知道所寻找的，并且当你寻找时你会知道它是什么。

B.可预见性。当一些功能实现一致时，你会知道当你操作时将会发生什么。

C.可控性。当你依赖以往可用的知识时，你会很容易知道如何达成目标。

D.高效性。没有必要花时间学习一些新的东西，也没必要担心不一致的设计所产生的影响。

总结：如果遵循文中的设计原则，用户将会在没有进一步的探索和错误的尝试下知道如何使用这些标签。这也意味着他们可以集中全部精力在那些标签下的内容。标签本身没有价值，但是他们的作用在于不引起用户注意的情况下，促进用户顺利的获取内容。

翻译自《Tabs, Used Right》by Jakob Nielsen,on July 9, 2016

本文来自网易实践者社区，经作者马志强授权发布