WordPress导航栏最佳做法

您将要创造的

导航栏：您会想到任何网页上的一个简单且看似显而易见的元素。

但是，重要的是要在导航栏中添加思想，以使其对用户有效，易于导航并易于访问。

在本文中，我将向您展示如何确保导航栏尽可能地正常运行，并且是对站点的增强而不是附加组件。

出色的导航栏的功能

出色的导航栏将改善用户体验（UX），并使所有站点访问者都易于使用。 它会：

• 请清楚清楚地标明有意义的标签，并与其链接的页面相关。
• 放置在访问者期望的位置，该位置可以在页面的顶部，也可以在横幅下方。
• 在移动设备上使用汉堡菜单，在台式机和移动设备（以及两者之间的所有设备）上都可以很好地工作。
• 易于访问，这不仅与代码有关，而且与设计有关—颜色是否具有足够的对比度，菜单是否位于一个位置？
• 改善网站的设计，并保持颜色和字体的一致性。
• 在您网站的每个页面上永久可用。

导航菜单要做的事很多！ WordPress自动解决了一些挑战，但让我们看一下有效导航菜单中的一些关键元素，以识别特定的最佳做法。

用户体验

导航菜单最重要的任务是使人们可以轻松浏览站点的主要区域。 根据站点的性质，菜单可能包含指向多个页面的链接。

• 新闻网站的链接：使用类别存档链接到各节
• 对于商店：使用产品类别链接到部门
• 小型企业网站：链接到包含有关企业及其服务信息的静态页面
• 对于博客：最受欢迎类别的链接

每个导航菜单还应包括指向主页的链接-即使通过标题中的徽标或站点名称链接到主页，也应始终在菜单中。 您也可能会包含指向其他静态页面的链接，例如“关于”页面和“联系”页面。

链接应具有清晰，简短但明显的名称，这些名称与要链接的内容有关，但不必与链接的页面标题相同。 例如，一个站点名为“ 我们的咨询服务”的网站可能在菜单“ 咨询”中有指向该站点的链接。

Envato Elements网站的主导航非常简单，页面顶部的栏中只有几个链接。 该栏显然是一个导航栏，并在页面上突出显示：

优良作法是确保始终可见的菜单部分（即顶层导航）包含在桌面浏览器的一行中。 这样可以避免混乱并且更加整洁。 如果菜单跨越两行或更多行，请考虑使用下拉菜单在第二级添加一些链接。

如果您的菜单需要更多链接，则有两种方法可以解决此问题：通过使用主导航项下的下拉列表，或添加大型菜单。

通过在多个级别添加菜单项，可以在WordPress菜单屏幕中创建下拉列表。 编码正确的主题随后会将其转换为屏幕上的下拉菜单。 这是一个基于页面的站点的示例，该站点的菜单中具有多个级别：

大型菜单适用于具有很多链接的网站，这些链接不太容易分解为子项，或者适用于希望许多项目具有同等知名度的网站。 在线商店经常使用它们。

UX用于导航的另一个元素是导航菜单的位置。 用户始终希望它位于屏幕顶部，无论是在横幅上方还是在横幅下方。 顶部菜单有时会浮动在其他内容（例如站点名称和徽标）的右侧。

Tuts +菜单使用下拉菜单和这些下拉菜单之一旁边的小巨型菜单的组合：

这是搜索栏的补充，并链接到页面右上角的网站其他部分。

UX的另一个方面是，当用户向下滚动页面时，导航菜单是否随用户一起移动，并停留在浏览器窗口的顶部。 一项实验发现，固定或“粘滞”的导航菜单更容易导航20％以上。

这仅适用于狭窄的导航栏。 范围广泛的内容将受到阻碍。 某些主题将包括此主题-在Envato Elements上搜索“固定菜单”可找到16个主题 。 另外，您可以使用CSS将其添加到自己的主题中： position: fixed和top: 0 。

具有固定菜单的网站相对较少，但大型社交媒体网站倾向于使用它们，例如Google+：

视觉设计

导航菜单的视觉设计应增强UX并反映您的品牌。

菜单中使用的颜色和字体通常会反映站点其他位置使用的颜色，从站点范围的调色板中获取它们，然后选择与菜单周围其他元素的颜色形成对比的颜色。 Envato网站上带有对比鲜明的横幅和绿色的品牌文字，就是一个很好的例子。

WordPress.com网站没有相对的导航菜单，但是由于网站设计非常简单，因此很明显这是导航：

BBC网站的屏幕顶部有一个简单的导航菜单。 同样，这是低对比度的，但是很明显，这是从位置来看的菜单：

如果将导航菜单放在标题下方（这种做法随着顶部菜单的普及而变得越来越不常见），那么您的视觉设计将需要确保它显然是导航菜单，而不是页面的一部分。

Gap网站有两个导航菜单：一个位于公司其他品牌的顶部，另一个位于商店部门的横幅下。 显然，由于所有空白，这是导航：

手机导航

移动导航与台式机导航有所不同，原因有两个：

• 人们使用手指或拇指代替鼠标。
• 屏幕空间更少。

这意味着，如果您使用了大型菜单或多级下拉菜单，则需要找到一种创造性的方式来适应较小的屏幕。

使导航适用于移动设备的最常见方法是添加汉堡菜单（给定名称），因为该菜单通常由看起来有点像汉堡的三条水平线表示。

对于Envato Elements网站，该菜单由侧面的省略号（或三个点在另一个点上方）表示：

当您点击该符号时，您将看到菜单项，可以将其展开，如以下两个屏幕截图所示：

这是一个很好的示例，说明了如何在移动设备上合并大型导航菜单而不丢失菜单中的任何项目或使用户不知所措。

您可以自己在主题代码中添加一个汉堡菜单，也可以使用内置主题的主题菜单或通过插件添加主题的主题 。

在移动设备上查看时，某些站点选择使用替代菜单，但链接较少。 这可能会减少混乱，但是对UX不利，所以我建议不要这样做。 相反，请使用上述解决方案，该解决方案保留所有链接，但使菜单适应小屏幕。

在移动设备上，您还需要考虑导航菜单中链接的大小。 这是因为人们会轻按而不是单击。 确保您的链接之间有足够的间距，并且很难有人意外地点击错误的链接。

辅助功能

在考虑用户体验，视觉设计或移动设计时，请不要忘记可访问性，这一点很重要。 如果无法访问导航菜单，则表示您在限制可以使用您网站的访问者，这可能违反了法律。

考虑导航中的颜色。 如果这些文字的对比度较低，或者文字较小或华丽，则视力障碍的用户可能很难阅读它们。 这也适用于短视人士，而我们中有数百万人！ 网络可访问性倡议具有关于颜色和对比度的有用指南 。

菜单的编码方式也很重要。 标记的结构应正确，包括链接标题和正确编码的列表。

除非特别要求，否则请确保您主题的代码中包含跳过导航菜单的指令。 否则，使用屏幕阅读器访问您的网站的人每次切换到新页面时都必须先读出主菜单，然后才能收听。 如果您使用的是大型菜单，则可能要花费一些时间，并有可能导致用户离开您的网站。

考虑您可能在菜单上使用的任何视觉效果。 这将包括大型菜单，下拉菜单，固定菜单以及以任何方式移动的菜单。

在用户滚动时改变屏幕位置或改变颜色的菜单会分散注意力，并可能给某些情况下的人带来问题。 我的建议是使菜单的设计尽可能简洁明了，并避免添加奇特的视觉效果。

W3C上有一个有关辅助功能和导航的有用教程 ：在您的网站上对其进行检查，并在启用之前通过验证器运行您的网站。

精心设计的导航栏将改善您的网站

导航菜单在任何网站中都是显而易见的部分，很容易将其放入而不花时间考虑其设计。

如果您按照上述提示进行操作，那么您将获得导航功能，可以使用户更轻松地浏览您的网站，这意味着他们可以停留更长的时间。 其设计将很好地反映您的品牌，并确保您不会因为用户使用的技术或他们可能造成的残障而排斥他们。

翻译自: https://code.tutsplus.com/tutorials/navigation-bar-best-practices-in-wordpress--cms-32633