选项卡式导航：何时使用它以及如何优化它

我最喜欢的 UX 名言之一来自Google 工作室和设计系统主管 Chikezie Ejiasi。

他写道：“生活就是对话。 网页设计也应如此。 在网络上，您正在与一个您可能从未见过面的人交谈，因此清晰准确非常重要。 因此，结构良好的导航和内容组织与良好的对话密切相关。”

标签式导航能否清晰准确？ 当然可以，这使它成为一种有效的导航和内容组织形式。

与大多数与用户体验相关的事情一样，重要的是你如何实施它以及如何优化它。

什么是标签式导航？

选项卡式导航是一种导航和 UI 样式，其中信息组织在选项卡中，将内容分成不同的部分。

通常，在查看选项卡式导航时，您会注意到一些共同特征：

1. 圆角标签；
2. 制表符的分隔，无论是空格还是单行；
3. 选项卡上的悬停效果；
4. 为选项卡添加深度和尺寸的渐变。

选项卡式导航基于文件夹隐喻，任何在办公室工作或看电视的人都应该熟悉它。 就像 UsabilityGeek 的 Mifsud 解释的那样……

贾斯汀·米夫苏德，UsabilityGeek ：

“在 UI 术语中，隐喻是用于促进用户和应用程序之间的熟悉度的想法或对象。

在 UI 中使用选项卡是一个很好的比喻，因为它们看起来像真实世界中文件中的选项卡分隔符或文件抽屉中文件夹中的选项卡。

因此，用户更直观地知道这些选项卡将内容分成几个部分，就像在现实生活中一样，触及选项卡（通过单击选项卡在网络上模拟）将显示相应的内容。” （来自 UsabilityGeek）

因为这个比喻很常见，所以小心实施很重要。 选项卡式导航具有强大的原型，因此它们的外观和工作方式必须完全符合预期。

与任何优秀的导航系统一样，选项卡允许您：

• 有意义地将内容分成不同的部分；
• 向人们展示他们可以获得哪些内容以及他们如何获得该内容；
• 直观地向人们展示他们在您网站中的位置。

什么时候使用选项卡式导航是个好主意？

通常，在以下情况下使用选项卡式导航是个好主意：

• 您有两到九种不同类别的内容。
• 类别名称相对较短且可预测，无论是在位置还是在副本方面（即它们与原型匹配）。
• 类别数量不太可能定期更改。
• 这些类别在性质上是相似的； 将它们标记在一起是合乎逻辑的。
• 这些类别适合一行。

正如Nielsen Norman Group的Jakob Nielsen所解释的那样，当标签导航变得如此复杂以至于需要多行时，问题开始出现……

Jakob Nielsen，尼尔森诺曼集团：

“多行会创建跳跃的 UI 元素，这会破坏空间记忆，从而使用户无法记住他们已经访问过哪些选项卡。

此外，多行肯定是过度复杂的征兆：如果您需要的选项卡多于一行无法容纳的选项卡，则必须简化您的设计。” （通过 NN/g）

多行也会产生视觉层次问题。 当有第二行时，它可能会向用户发出信号，表明第二行中的选项卡是子类别，或者至少不如第一行中的选项卡重要。

通常，在以下情况下使用选项卡式导航不是一个好主意：

• 您希望人们同时比较内容。 这会使记忆力紧张并大大增加认知负荷。
• 您发现自己正在考虑添加“更多...”样式的链接。

当然，这些只是基本准则。 您可能会匹配所有“您应该使用它”的规则，但发现它对您的受众不起作用。 它最终是你需要测试的东西。

请记住，您可以使用数字分析来确定您的选项卡式导航是否给访问者带来了问题。 从那里，您可以进行更改以解决问题或尝试新型导航。

争议

虽然现代设计实践有很多网站看起来像这样……

…有些人确实使用选项卡式导航作为他们的主要导航。

正如谷歌的 Luke Wroblewski 多年前所记载的那样，亚马逊确实引领了这一趋势……

卢克·弗罗布莱夫斯基，谷歌：

“1998 年，该网站有两个顶级类别：书籍和音乐。

随着其他类别的添加（例如视频和礼品），水平标签系统扩展得很好，并为通过颜色区分产品类别创造了一个很好的机会。” （通过 LukeW）

下面让我们看看亚马逊在早期是如何使用标签式导航的……

随着网站越来越受欢迎，亚马逊需要的标签数量也越来越多……

1999 年，Jakob 称这是“糟糕的设计和对标签隐喻的滥用”：

我认为选项卡最好用于在备选（但相关）视图之间切换，而不是导航到不相关的位置。

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

雅各布·尼尔森

尽管如此，许多网站还是效仿亚马逊，标签式导航的定义开始从 Nielsen 的“在不同视图之间切换”转变。

虽然使用选项卡式导航作为主要导航系统有点过时，但它可以工作。 与大多数事情一样，您最关心的不应该是 Nielsen 对选项卡式导航的看法，而是您的听众所说的。

他们觉得很难使用吗？ 他们是否正确浏览您的网站？ 他们能找到您网站中最重要的元素吗？ 进行可用性测试以确保。

如何实现标签式导航

加拿大航空公司以及大多数主要航空公司都很好地使用了标签式导航……

自己实现选项卡式导航（在任何级别）时，请记住以下几点：

• 首先，设计站点的信息架构 (IA)，以便您可以做出更明智的选项卡相关决策。
• 整个选项卡应该是可点击的，而不仅仅是类别名称（文本）。
• 不要使用“主页”选项卡，即使您正在为整个站点使用选项卡式导航。 相反，让您的徽标将访问者带到主页。
• 选项卡应该连接到它控制的内容区域，以便选项卡的范围清晰。
• 类别名称应为一两个词长，并以通俗易懂的英语书写。 避免使用全部大写，因为这会使标签更难阅读。
• 不要堆叠多行标签。 如果必须，请改用子类别（即选项卡下方的第二个水平条）。 如果您确实使用子类别，请确保所选选项卡和下面的子类别栏之间存在视觉连接。 确保您使用的子类别数量不是太多； 浓缩和简化。
• 所选选项卡应突出标记以指示当前位置。 但是，未选择的选项卡不应静音以至于被遗忘或忽略。
• 页面之间应保持一致的选项卡顺序，以便用户完全理解选项卡之间的关系。

Jakob 解释了为什么这种一致性很重要……

1. 可识别性。 当某样东西看起来总是一样时，您就会知道要寻找什么，并且当您找到它时就知道它是什么。

2. 可预测性。 当某件事总是以同样的方式运作时，你知道当你对它采取行动时会发生什么。

3. 授权。 当您可以依靠过去对所有可用功能的了解时，您可以轻松地编写一组操作来实现您的目标。

4.效率。 无需花时间学习新东西或担心不一致功能的影响。

雅各布·尼尔森

正确完成选项卡式导航的示例

了解选项卡式导航的最佳方法是查看一些示例，尤其是因为它可以以多种不同方式使用。

1.专辑艺术收藏

专辑艺术收藏是标签式导航的一个相当流行的例子......

这里有两件事很有趣……

1. 导航是垂直的，而不是水平的。
2. 导航包括图标。

通常，您会发现标签式导航是水平显示的。 这部分是由于设计原型。 由于它很常见，人们倾向于在徽标下方的水平空间中寻找导航。

当然，这并不意味着您只能使用该空间进行导航。 请务必使用用户测试。 您不希望出于风格原因移动导航以影响站点的易用性。

请注意，虽然 Album Art Collection 使用导航图标，但它们并没有放弃基于文本的描述。 图标可用性测试本身就是一篇文章，但通常情况下，基于文本的描述比单独的图标更有用。 Six Revisions 的 Jacob Gube 解释了……

Jacob Gube，六次修订：

“避免使用图标代替选项卡控制文本，因为符号对不同的人可能意味着不同的东西——最安全的做法是使用纯文本来描述窗格信息。” （来自 Smashing 杂志）

2.发票机

Invoice Machine 是您作为主要导航示例的基本选项卡式导航……

但是，它们确实包含一个“主页”选项卡，这是多余的。 请注意所选选项卡是如何向前显示的，以及选项卡是如何连接到内容区域的。

3.缓冲区

Buffer 是我最喜欢的选项卡式导航示例之一。 过去，他们有针对个人的产品和针对企业的产品，因此他们使用选项卡将其内容分隔在首屏之下。

这是个人内容的开始……

这是企业内容的开始……

这使他们能够与两个不同的听众交谈，而无需创建完全独立的站点或体验。

后来，Buffer 的产品页面经历了深刻的变化，发布、回复和分析等产品（都是不言自明的）。 这是他们用于页面的选项卡导航：

除了不同的定价计划外，这些基于产品的选项卡还显示了与选项卡上的产品相关的不同推荐：

正如 UX Booth 的 David Leggett 解释的那样，选项卡式导航的相关性超出了一级和二级导航级别。 它们甚至可以在非首屏使用，就像 Buffer 的情况一样……

大卫莱格特，用户体验展台：

“选项卡不需要局限于一级和二级导航。 如果它们为用户提供了在相同内容区域之间切换的能力，那么它们将非常有用。

结合无需重新加载页面即可切换内容的技术，可以为浏览页面的最终用户灌输一种有形的感觉。” （通过用户体验展台）

要记住的 3 个最佳实践

在您尝试选项卡式导航或决定它不适合您之前，请考虑以下三个因素：可访问性、分块和速度。

1. 可访问性很重要

您希望残障人士或行动不便的人可以访问您的网站。 为了使用选项卡式导航来做到这一点，您必须……

• 允许人们使用键盘上的“Tab”键导航选项卡。
• 允许人们使用键盘上的“Enter”键选择一个选项卡。
• 使用替代方法指示选择了哪个选项卡。 例如，您可以在标题属性中包含“活动”一词。

让更多人更容易使用您的网站永远不会影响转化率。

2.分块问题

使用选项卡式导航，您决定如何组织和分块内容非常重要。 这就是为什么我上面的第一个实施建议与您网站的信息架构有关。

贾斯汀解释了为什么适当的组织至关重要……

贾斯汀·米夫苏德，UsabilityGeek ：

“选项卡将内容分成有意义的部分，占用更少的屏幕空间。 在这方面，用户可以轻松访问他们感兴趣的内容（而不是段落中的所有内容）。” （来自 UsabilityGeek）

考虑您希望网站上出现的所有内容。 然后，将该内容分组为四到五个桶。 很可能，您将能够重复此练习并最终得到两个或三个不同的桶。 那挺好的。 进行用户测试，看看哪些人的响应和导航更好。

最重要的是，您需要确保……

1. 您的内容以一种合乎逻辑、预期且对访问者清晰的方式进行分块。
2. 选项卡的顺序是有意义且合乎逻辑的。
3. 您的选项卡遵循现有原型。 例如，SaaS 网站通常以特定方式分块，而电子商务网站通常以另一种方式分块。

3.速度很重要

我们已经多次写到速度的重要性。 因此，速度在选项卡式导航的有效性中也发挥作用也就不足为奇了。

雅各布解释得很好……

Jacob Gube，六次修订：

“使用模块选项卡的一个目的是允许快速和交互式地呈现内容。 为此，您应该尝试在 HTML 文档中内联写入非活动窗格的内容，然后使用 CSS 和 JavaScript 设置样式并可视化地隐藏窗格，这比需要重新加载页面或请求远程源数据更快。

在窗格之间切换时避免重新加载页面，因为这会显着延迟窗格之间的导航。 使用 Ajax 的远程加载内容可以成为动态和远程定位窗格信息的一个选项，但对可能不知道文档树中异步插入 DOM 节点的屏幕阅读器用户来说是一个挑战。” （来自 Smashing 杂志）

此建议不适用于那些使用选项卡式导航作为主要导航的用户，但那些像加航和 Buffer 那样使用选项卡式导航的用户应该注意。

结论

选项卡式导航绝对可以与您的访问者进行“良好的对话”。 如果实施得当，它会足够清楚和准确地告诉您的访问者：他们的确切位置、他们可以使用的内容以及他们如何访问他们可以使用的内容。

在可用性测试和优化的帮助下，这种对话得到了进一步改善。

然而，与任何事情一样，一定要进行你的研究（在这种情况下，你的信息架构研究）和测试，测试，测试。

总之…

1. 选项卡式导航可以用作主要导航系统，也可以超出主要或次要导航级别。
2. 当您有两到九个固定的、相似的类别且短名称可以放在一行中时，请尝试使用选项卡式导航。
3. 当您希望人们比较内容或发现自己正在考虑添加“更多...”链接时，请不要尝试选项卡式导航。
4. 您可以遵循实施最佳实践，但是……
5. 重要的是您的数据。 您的访问者是否发现使用选项卡式导航难以浏览您的网站？ 进行可用性测试以找出答案。
6. 修复弹出的问题。 或者，如果存在许多代价高昂的问题，请考虑使用另一个导航系统。
7. 当涉及到选项卡式导航时，可访问性、分块和速度都很重要，因此请密切注意。

正在做与此相关的事情吗？ 在CXL 社区发表评论！