你有没有遇到过这样的情况，你访问一个网站，花大量时间时间在浏览，突然想要去某个特定的页面执行一项任务，但是自己完全迷失了方向，不知道该去哪里？

导航是任何应用程序或界面中最重要的一个部分，因为它包含许多与可访问性相关的东西，用户必须能够轻松地浏览信息，而不是迷失在网站上的大量页面中。有人可能会争辩说，有“搜索”来帮助你，但是你不能单单相信搜索，因为研究表明，只有30％的网站用户使用搜索功能，而大多数70％的网站依靠直接导航。这就是导航菜单具有高优先级的原因。毕竟，即使是最有创意或有最酷的功能的网站，如果用户无法找到想要的信息，它也是毫无用处的。

那什么是导航菜单？

导航菜单是一种内容类别或显示特征的列表，其通常以链接或图标的形式呈现，并以明显的视觉形式组合在一起，所述清晰的视觉形式不同于网站或页面设计的其余部分。这些主要由导航栏和汉堡菜单组成。

我们几乎在任何地方都能找到这些菜单，但这里面临的挑战是，您经常发现人们在查找这些菜单时遇到很多困难，并且对菜单感到困惑。

在研究了超过15种以用户为中心的产品和项目之后，我发现了一些有趣的发现和最佳实践来设计用户友好的导航菜单：我将它们分为几类

显示更加明显

1.使用面包屑导航。面包屑是帮助定位网站内人员的导航辅助工具。如果人们从外部来源被引导到网站的更深层页面，这种方向尤其重要。

2.避免在大屏幕上使用小菜单（或菜单图标）。当有足够的空间来显示菜单时，不应该隐藏菜单。

3.总是尝试将菜单放在熟悉的位置。用户大部分时间都花在网站其他内容上。因此，用户希望在浏览其他内容或应用程序（例如，左栏，屏幕顶部）之前查找他们以前见过的UI元素。通过将你的菜单放在人们希望找到它们的地方，使这些期望对你有利。（如下所示）

4.使菜单选项看起来可交互。如果选项看起来不可点击，用户可能甚至不会意识到它是一个菜单。如果您改变了太多菜单的造型，或者严格遵守平面设计原则，菜单看起来可能只是装饰性图片或标题，这样也是不可行的。

5.确保你的菜单有足够的视觉重量。在许多情况下，放置在熟悉位置的菜单，则不需要太多留白区域或添加高饱和度颜色以便显眼。但是，如果设计混乱，缺乏视觉重量的菜单可能很容易迷失在促销和头条新闻的海洋中。

6.使用与背景色对比强的颜色。有多少设计师忽略了对比度准则; 迷失在数字空间里，又多少用户因为寻找菜单眯起了双眼。

协调用户任务菜单

1.用可理解的链接标签。找出用户正在查找的内容，并使用熟悉且相关的类别标签。菜单不是为了装扮修饰的部分。是为了坚持清楚地描述产品内容和功能的术语。

2.使链接标签易于扫描阅读。您可以通过左对齐垂直菜单和前置加载关键字来减少用户花费阅读菜单的时间。

3.对于大型网站，使用菜单让用户预览较低级别的内容。如果典型的用户旅程涉及向下钻取几个级别，超级菜单（或传统下拉菜单）可以通过让用户跳过一个级别（或两个级别）来节省用户时间。

4.为密切相关的内容提供本地导航菜单。如果人们经常希望相关的产品的比较，使那些近似的页面在本地导航菜单中看到，而不是强迫人们浏览“弹簧式”的向上和向下的层次结构。

5.利用视觉沟通。帮助用户理解菜单选项的图像，图形或颜色。但要确保图像代表用户任务（或者至少不要使任务更加困难）。

为每个级别做独特的视觉设计

人们应该能够快速扫描导航并了解哪些链接是主要，次要和第三方导航项目。链接的放置和分组应该建立在这个层次结构之上。

视觉设计 ： 如字体样式，字体大小，字体重量、字体颜色等都应该建立不同的导航级别上，并且应该在整个导航中保持一致。如果实施辅助导航，则设计还应该明确区分父母、孩子和兄弟之间的链接，并与主导航保持一致。

使用位置指示器

与面包屑一样，导航上的位置指示器可帮助人们在网站上定位自己，尤其是在网站内部更深的情况下。这个清晰的视觉指示器可以指示用户在哪个部分。

移动端与PC端的不同导航

NNG的菜单导航不仅只针对于移动设备，虽然为不同设备独立开发设计可能是额外的付出，但他们依旧建议优化每个设备的导航。这是一种更好的用户体验，因为“不同的设备具有不同的交互能力和不同的屏幕尺寸”。

例如，在PC上，日本时报导航设计利用更宽的屏幕宽度，并在单独的栏上水平列出类别（辅助项目）。在移动设备上，相同的导航使用汉堡包菜单设计模式，并在展开时利用手机的较长垂直空间，并在每个部分标题下方列出次要项目，而不是在两个部分之间分割主要和次要级别。两种设计之间要存在凝聚力，同时针对每个视图进行优化。

- 本文翻译来自Medium

- 感谢Vamsi Batchu