上期我们提到了电商网站建立标签导航栏不仅是网站视觉相关的问题，更是与用户体验有关。并对标签导航栏有个简单的认识，这期，我们将举出实例并提供一些关于电商网站建立标签导航栏的建议与作为一站式电商解决方案的 嘿店heyshop 的做法。

如何实现标签导航栏

加拿大航空，以及大多数主要航空公司，将标签导航栏使用的很好……

当你在实现标签导航栏的时候，以下是你需要注意的 ……

• 首先，设计网站的信息架构（IA），为此你可以作出更好的与标签相关的决定

• 全部的标签必须是可以点击的，而不仅仅是分类的名称文本

• 不要使用主页标签，即使你的整个网站都在使用标签导航栏

• 为了使得标签范围清晰，它应该被连接到受它控制的内容区域

• 分类名称应该控制在1-2个方便书写的英文单词。避免使用使得标签更加难读的大写字母

• 不要出现大量叠行标签。如果必须，使用子类别来代替（即第二个水平栏下面的标签）。如果你使用子类别，请确保在选中的标签和下面的子类别有一个视觉上的联系。同时确保你使用的子类别的数量不会很多，浓缩且简单

• 选中的标签应该突出显示在当前位置，然而未选中的标签也不应该被忽视

• 一个连贯的标签顺序应该是保持从一个页面到另一页面以便用户知道标签是如何相互关联的。

一些好的标签导航栏事例

理解标签导航栏的最好方法，就是看一些例子，特别是在它可以被用于许多不同方向时。

Album Art Collection

Album Art Collection 是一个比较流行的标签导航栏例子 ……

这有两件有趣的事情 ……

• 这导航栏是垂直于水平的
• 导航栏包含图标

通常可以发现标签导航栏以水平形式展现。一方面这是因为设计模板。由于这种情况是常见的，人们也趋向习惯在 logo 下方的水平位置是导航栏。

当然，这并不意味着导航栏的使用位置受限。你不希望因为设计风格原因而去移动你的导航栏从而影响了网站的易用性。

请注意，虽然 Album Art Collection 使用了导航图标，但他们仍留下了以文本为基础的描述。通常基于文本的描述比图标更可用。因为符号意味着不同的人有着不同的理解，因此最安全的便是使用纯文本来描述窗口信息。

The Invoice Machine

The Invoice Machine 是以基本标签导航栏作为主导航栏的例子 …… 然而，他们包含了一个主标签，这是多余的。请注意如何提取所选的标签，并将标签到连接到内容区域。

Buffer

Buffer 是我最喜欢的标签导航栏例子之一。由于他们为个人提供的服务与其为企业提供的服务不同，所以他们使用标签将其内容分开。

这是个人内容 ……

这是企业内容……

标签不需要限于主要和次要导航级别，正如Buffer的情况。结合在不重新加载页面的情况下切换内容的技术可以为终端用户浏览页面带来实际感觉。

嘿店heyshop

作为一家美与科技兼得，无需代码与设计的乐高式建站工具 —— 嘿店heyshop ，便变成了许多品牌去打造一家属于品牌的独立网店的良好选择。 嘿店heyshop 的每个主题模板都由嘿店的顶尖设计师匠心精制，以主题模板rush – juiceshop 为例子，在该模板的博客列表中选用了标签导航栏的方式，以便用户能够清晰且方便的查阅不同博客内容。

应该记得的最好实践

在你体验标签导航栏或者决定这不适合你之前，考虑三个因素：可访问性、分块和速度。

辅助功能

如果希望残疾人或是其他受限人员能够访问您的网站。为了做到这点与标签导航栏，必须…… * 允许人们使用键盘上的“Tab”键导航标签 * 允许人们使用键盘上的“Enter”键选择标签 * 添加一个带有“活动”字样的标题属性 这些会使得你的网站对于更多人来说更加容易使用并且将不会损害转化。

分块功能

通过标签导航栏，你如何决定组织和分块你的内容是十分重要的。考虑网站上的所有内容，将该内容分成4-5组，当然可以组合浓缩成2-3组，那样更好。并进行用户测试，以了解哪些人能更好地回应和导航。

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

• 您的内容应该用对访问者的逻辑、预期和清晰的方式来进行分块
• 您的标签顺序是有意义和合乎逻辑的。
• 您的标签是跟随现有的原型。例如，SaaS网站通常以特定方式分块，而电子商务网站通常在另一个网站中分块。

速度事项

速度的重要性已经被强调过很多次了。因此，速度在标签导航栏的有效性方面也起到了重要作用。

使用标签模块的目的是为了尽可能让内容更加快速地且交互着呈现。当然在这窗格之间切换时应避免页面重新加载。这种建议不适合使用标签导航栏作为其主页导航栏的用户。

结论

标签导航栏绝对可以让您与用户更好地交互。如果实施得当，它的清晰度和准确度足以告诉用户：他们的确切位置，他们可以使用的是什么，以及他们如何访问可用的内容。在可用性测试和优化下，这些会改进更多。

然而与任何事情一样，请务必进行研究并进行多重测试。

综上所述……

• 标签导航栏可用作主页导航栏系统以及超出主要／辅助导航栏级别。
• 当您有2-9个类似的类别，拥有适合单行的短名称时，尝试标签导航栏
• 当你想要人们比较内容或者想要添加“更多”链接时，不要尝试标签导航栏
• 你可以遵循实施最佳方案，但是……
• 重要的是你的数据。进行可用性测试便能了解你的访客是否难以通过标签导航栏浏览您的网。
• 修复弹出问题。如果有许多较为复杂的问题，可以考虑另一种导航系统。
• 可访问性、分块和速度都涉及到标签导航栏，所以要密切关注

部分内容参考及编译自 https://conversionxl.com/tabbed-navigation/