翻译 | 正确使用标签页

原文：https://www.nngroup.com/articles/tabs-used-right/
作者：Jakob Nielsen (2016-07-09)
阅读时间：6m30s

摘要：遵循以下 12 个选项卡控件的设计指南，以区分选项卡和网站导航，并解决点击不确定性问题。

简单的 GUI 窗口小部件是网页中大多数功能的基本构件，但却很难找到正确使用所有对话控件的网站。即使是像单选按钮和复选框这样简单的东西，也有一半的时间是被错误使用的。甚至我们都还没开始讲下拉菜单，这也是可怕的滥用。本文讨论的是另一个经常被滥用的设计元素：选项卡。
（这里，我讨论的是页面内的选项卡，如下面的几个截屏示例所示。这些是你可以自己设计的选项卡，作为你的网站或基于 web 的应用程序的一部分。另一种不同类型的选项卡被用于浏览器框架，它允许用户在浏览器中同时打开多个页面。在本文中，我不讨论浏览器选项卡。）

选项卡可用性指南

下面是使用选项卡的 12 个设计原则：

1. 使用选项卡在同一上下文的视图之间切换，而不是导航到不同的区域。这是最重要的一点，因为在切换视图时保持原位不变是我们使用选项卡的首要原因。

2. 按一定的逻辑将内容分到不同的选项卡下，这样，用户便能轻松预测到选择一个给定的选项卡后会看到什么内容。（卡片分类法是研究这种「mini-IA」问题的一种方法。如果你无法找到明确不同的分组，那么选项卡可能是管理你的内容的错误界面控件。）

3. 当用户不需要同时查看多个选项卡中的内容时，才使用选项卡。如果用户确实需要比较不同选项卡下面的信息，那么不得不来回切换将会增加他们的短期记忆负担，增加认知负担和交互成本，并降低可用性，相比于把所有内容都放在一个大页面中的设计。

4. 设计本质上平行的选项卡。如果选项卡明显不同，用户会将它们理解为网站导航。

   

   Workday 的主页使用了选项卡控件来呈现它的服务和应用。第一个选项卡 About Workday 提供了公司的概况，而其他的选项卡描述了公司提供的服务。最好是移除 About Workday 这个选项卡，以保持选项卡的平行。

5. 高亮显示当前选中的选项卡。确保高亮显示足够突出，以便人们可以辨别出哪个选项卡是选中的。

   

   Ticketmaster 的选项卡控件通过去掉填充颜色来突出显示当前选中的选项卡（Just Announced），如果有至少 3 个选项卡，则可以使用这个方法。但如果只有 2 个选项卡，这将很难判断出哪个是选中的。
   
   除了高亮显示，你还可以通过尺寸，加粗文字，加上图标或者使它显示在其他选项卡前方等方法来标记当前选中的选项卡。如上述例子所示，如果只有 2 个选项卡，那么这种附加的信号将非常重要。

6. 未选中的选项卡应该清晰可见、可读，以提醒用户有其他的选项。如果非高亮显示的选项卡太融入于背景，那么用户可能永远都不会点击它们，也永远都不会发现那些隐藏的功能。

7. 将当前选中的选项卡与它的内容区域联系起来，就好像您正在使用几个粘贴有选项卡的物理索引卡一样。这将强调当前正显示哪个面板，并在只有 2 个选项卡的时候，告诉用户哪个选项卡是被选中的。

   

   Traveler 的选项卡控件中，选中的选项卡和面板区域使用了相同的颜色。这个设计加强了选项卡及其相关内容之间的联系，这也是支持使用反向高亮显示的原因之一。

8. 编写简短的选项卡标签，并使用简单明了的语言，而不是自创的术语。选项卡标签通常为 1~2 个字。短标签更易于扫描；如果你需要更长的标签，则表明这些选项对于一个选项卡控件来说过于复杂了。

9. 选项卡标签不要使用全部大写。因为更难阅读，所以全部大写基本不会是一个好方法。可读性对于单个、简短的单词来说并不重要，但，正如「主页可用性设计指南」中提到的，你应该选择一种大写的形式（无论是句型还是标题式大写），并坚持使用。

10. 只使用一行选项卡。多行会造成 UI 元素的跳跃，破坏空间记忆，从而造成用户无法记住他们已访问过哪些选项卡。此外，多行也是过度复杂的一个症状；如果你需要超出一行的选项卡，那么你应该简化你的设计。

11. 将一整行选项卡放置在选项卡面板的顶部，而不是旁边或者底部，否则用户会忽略它们。
    从视觉设计上看，选项卡控制的范围应该是显而易见的。打个比方，使用选项卡就像在一个老式卡片目录的抽屉里翻阅索引卡一样，因此用户必须能够一眼就看出是什么构成了一个「索引卡」（即选项卡面板）。

    

    Reuter 主页上的市场部分，使用了边框来显示选项卡控制的范围。

12. 选项卡的外观和作用应该总是一致的。一致性在 GUI 控件设计中很重要，因为它通过以下几种方式构建起用户对界面的掌控感：

• 可识别性。当一件东西看起来总是一样的时候，你就知道应该寻找什么，并且知道当你找到它时会看到什么。

• 可预测性。当一件东西总是以相同的方式运作时，你就可以知道当你触发它时会发生什么。

• 赋予权力。当你可以依赖于你过去对所有可用功能的了解时，你就可以轻松地进行一系列操作来实现你的目标。

• 效率。没有必要花费时间去学习新的东西或者担心特性不一致带来的影响。
  
  

总结

在图形用户界面设计中，选项卡可能看起来是一个不起眼、无聊的控件。但是，如本文所示，在创建运行良好、易于使用、增强用户体验的选项卡时，存在许多特定的设计上的问题。

当使用分析技术对一个 UX 运行状况进行检查时，选项卡的设计问题是一个常见的调查结果。假设你正在对页面内的操作进行跟踪，你可能会发现，用户很少使用某些页面上的选项卡。检查你是否违反了本文中的任何一条设计准则。如果是的话，你很可能就是罪魁祸首，并且你可通过快速的 A/B 测试变成英雄，这个测试通常会显示重设计的选项卡的两次使用，以使其符合标准。

如果你遵循了本文中的设计准则，用户将知道如何使用你的选项卡，而无需进一步探索或进行易错的猜测。这也意味着他们可以将所有的时间和精力用于理解你在这些选项卡下提供的内容和功能。选项卡本身没有任何价值，但当它们不是吸引注意力而是促进用户对内容的访问时，它们将发挥重要的作用（在满足用户体验和业务目标方面）。

---

以上翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
感谢原文作者及所有分享想法与经验的人 ^^