导航设计是关于创建一个使你的用户能够使用你的产品并与之进行交互的系统，这就是你需要了解的全部。

在用户体验设计社区有很多关于用户体验是“隐形”的话题讨论。人们通常的意思是设计师应该精心设计用户体验，这样做非常平滑以至于用户几乎没有注意到他们正在体验。关于这甚至还出了本书，书名叫《The Best Interface Is No Interface》（中译本叫《无界面交互》，人民邮电出版社出版）。

由于我们距离无界面的世界还有几光年的距离，因此设计师仍然可以为用户创建和设计有用、直观且一致的导航。在这篇文章中，Justinmind将教你导航设计的基础知识、常见的导航模式、制作你自己的导航原型以及使导航变得出色的原因。让我们开始吧！

什么是导航设计？

导航设计是创建、分析和实现用户浏览网站或应用程序的方式的学科。导航在用户如何与你的产品交互和使用中起着不可或缺的作用。这是你的用户如何以尽可能少的挫败感从A点到达B点甚至C点的方法。

为了进行这些令人愉快的交互，设计人员采用了包括链接、标签和其他UI元素在内的设计模式的组合。这些模式提供了相关信息，并使用户与产品的交互更加容易。

良好的导航设计可以：

• 增进用户的理解
• 给他们足够信心使用你的产品
• 为产品提供可信度

最好的导航设计是一种提高可用性的设计。导航不佳将导致你产品的用户减少，这就是导航设计对用户体验设计至关重要的原因。

导航设计很复杂，在优化用户体验时有许多设计模式可供选择。设计模式是解决问题的一种通用的、可重用的解决方案。

没有一种模式一定比另一种模式好。你在产品中使用的每个模式在实现之前都必须经过仔细考虑和测试。

这可以确保你选择的导航模式适合你的产品，但更重要的是它适合你的用户。

理想情况下，你希望从以用户为中心的设计角度来处理导航。

为什么导航设计如此重要

苹果和安卓的应用商店总共拥有超过550万个应用程序，这些应用程序中的每一个都内置有自己的导航设计。

无论是以面包屑菜单、下拉菜单还是选项卡的形式，每个产品都需要有一个用户可以通过导航来实现目标的用户流程。

如果导航没有经过深思熟虑的设计，你的用户可能会在使用你的产品时遇到麻烦，并最终完全放弃。导航设计之所以如此重要，是因为它是一种让你的用户能够探索和享受你的产品的方式。

正如Alan Cooper早在2001年的文章《导航并不有趣》中所强调的那样：

“一个设计良好的商业计划必须使其结构和组织尽可能清晰。用户不想浪费时间去解开资源和信息隐藏在哪里的谜团。“

在网站和应用程序中的导航设计也是一样的。如果没有一个好的导航系统，用户会挣扎着离开，可能永远不会再回来。

你不应该忽视导航设计重要性的其他原因是：

• 它反映了你的品牌
• 它告诉用户他们的位置
• 它提供了获取信息的途径

用户体验设计中常见的导航设计模式

存在许多帮助用户导航的机制，许多产品将在其设计中结合使用这些机制，因为某些模式可以根据当前情况更好地工作。

例如，面包屑菜单（Breadcrumb menu）可能对具有大量以分类方式构造的子类别的电子商务网站很有用。

然而，像标签云这样的东西在这里并不适合——不过，标签云是否适合目前尚未有定论。

还有哪些其它导航模式？除了搜索之外，让我们快速了解一下桌面和移动设备最常见的导航设计模式。

汉堡包菜单

汉堡菜单（左）和标签栏（右）

汉堡包（Hamburger menu）菜单经常出现在手机移动端，尽管它在桌面端也越来越受欢迎。汉堡菜单图标是3条横线，可以点击或手指敲击以显示更多的导航选项。

标签栏

标签是一种流行的导航模式，通常在移动设备上找到，它们可以在屏幕的底部或顶部找到。由于你只能在屏幕底部放置这么多标签，因此通常会在标签式导航中找到最重要的屏幕内容。

垂直导航

垂直导航菜单

垂直导航通常位于屏幕的左侧，会占用大量的屏幕空间，但会显示全局导航链接的列表，并且可以包括一级，二级和三级导航级别。

行为召唤按钮

醒目的行为召唤按钮

行为召唤（Call-to-action）按钮用于说服、激励和引导你的受众采取行动，无论是注册、购买还是下载。它们通常在网站上占据重要位置且必须引人注目。

面包屑导航

沃尔玛网站上的面包屑菜单

受Hansel and Gretel（国内译为《糖果屋历险记》，来自格林童话）故事的启发，面包屑导航（或面包屑轨迹）是一个辅助导航系统，向用户展示他们在系统中的位置。

明智的导航从今天开始——这是正确实现面包屑导航的提示。

是什么造就了成功的导航设计？

我们了解了为什么导航设计很重要，但是是什么促使导航设计的成功呢？多方面的因素有助于导航系统的设计。

由于这是用户体验设计的成败因素，以下是一些使你的导航设计更好的方法：

创建并保持清晰

导航应该有清楚的标签和路标，以便用户了解他们在哪里，可以去哪里。

通过在整个产品设计过程中为导航元素使用恰当和熟悉的文案，用户在浏览网站时会感到更加舒适。当保持一致性并提高清晰度时，将使导航更容易理解。

例如，导航栏通常将链接到指定的登陆页面，这些登陆页面用最有意义的正确文本标记。

标记清晰的导航内容带来清晰度

如果您正在设计博物馆的导航，并且希望用户能够访问专用于藏品的登陆页，则在导航栏中标记该登陆页面为“Collections”，可以使用户清楚地知道单击该链接可以获得什么样的效果。

有时你可以偏离惯例，但当涉及到导航时最好保持清晰。

尼尔森·诺曼集团（Nielsen Norman Group）的奥罗拉·哈雷（Aurora Harley）发现，“过去的经验和反复的实践会影响用户体验，任何偏离已习得惯例的行为都会导致用户错误”。

这些必不可少的移动UI模式使您的设计更加清晰。

使用有意义的而不是格式化的标签

你的导航栏是一个促进搜索引擎优化并向你的用户提供更多相关信息的机会。

如果你导航到一个卖手表的网站，而他们的导航菜单上写着“products”，这能告诉你什么吗？不完全是。人们不倾向于搜索“products”。这是一个宽泛的、包罗万象的术语。

有意义的标签可帮助用户更好地理解

现在，如果你读到“analog watches”或“smart watches”会怎么样？这些标签更有意义，不那么模棱两可，因为它们准确地解释了用户将在该页面上找到什么。

通过使用更有意义的标签，你将改善搜索引擎优化（SEO），因为你使用的是描述性语言，并且用户更有可能搜索“smart watches”而不是“products”。

当然，如果你的产品标签下有一个专门的页面，对应每个页面及其关键字，那就好了。

当然，如果您在产品标签下有专门的页面用于这些页面及其关键字，那么很好。比把你所有的产品放在一个页面上要好。

使用大型菜单而不是下拉菜单

我们已经提到过，没有一种导航模式比另一种更好的说法。 但是，根据上下文情境的不同，有些模式在某些场景下会表现更好或更有用。

大型菜单提供上下文和指向更多内容的链接

尽管被广泛使用，但下拉菜单的可用性很差。Andy Crestodina提出了避免使用下拉菜单是有好处的，其原因有两个：

1. 下拉菜单可能对搜索引擎不太友好；
2. 下拉菜单鼓励用户跳过重要页面。

另一方面，大型菜单更易于使用，因为它们是：

• 更大
• 根据上下文情境分组
• 立即可见

大型菜单也消除了用户鼠标滚动的需要，用户通常讨厌滚动。说到这个，为什么不制作你自己的滚动模式的原型呢？

使导航设计与用户目标保持一致

理想情况下，良好的导航将满足有主要目标的主要用户群体。用户角色是捕获这些主要用户群体的一种方式。

在某种程度上，当你将导航与用户目标保持一致时，你就正在涉及逆向工程。通过确定用户群的需求，你将能够创建一个能够帮助到他们的导航。

如何确定你的用户的需求？ 你可以问问题，诸如James Kalbach在《Web导航设计》中概括的问题：

• 如何快速找到我想要的特定信息或产品？
• 我怎么知道信息是最新的？
• 网站内容是否可信？
• 如何联系网站所有者？
• 怎样才能把我找到的信息发给我认识的人？

为了使你的导航更容易与您的用户目标保持一致，请尝试创建属于你自己的用户场景。这将为你提供所需的上下文情境和信息，以帮助你使导航与目标保持一致。

渴望了解移动应用导航？从这里开始。

导航设计不仅仅是后退按钮

当你想到导航时，Web浏览器上的后退按钮首先会映入脑海，这是一项很棒的功能，可避免成千上万的用户迷失方向或走失。雅各布·尼尔森（Jakob Nielsen）称其为“网络用户的生命线和使用量第二高的导航功能”。

对很多人来说，这就是导航。但是屏幕上还有很多其他元素可以帮助用户定位并为他们提供导航指导。我们说的是导航提示。

导航提示或“ You-Are-Here”导航是网站和产品上的功能，这些功能不一定是导航模式，而是广泛的设计功能，可以补充或增强导航功能。

导航提示有助于定位用户并提供位置感

这些导航提示包括：

• 你产品的徽标和品牌
• 浏览器上Tab选项卡的标题
• 视觉设计变更
• 网址
• 面包屑导航
• 日期、时间、图标或标签

所有这些提示都有助于在用户浏览你的产品或网站时为他们创建一种平和的心态。

原型设计（和测试！）你的导航设计

原型制作是一种有价值的用户体验方法。 制作原型可以帮助你了解：

• 你的产品
• 你的产品方向
• 你的用户
  -成功和失败意味着什么

导航设计在为产品实现相同目标方面也起着重要作用。

对导航流程进行原型设计可以帮助你消除用户流程中的所有问题。使用原型，你可以测试以下导航设计：

• 你的注册流程
• 在产品中查找特定项目
• 购买流程
• 整个产品的导航

原型设计让你有机会尝试不同的导航设计并进行测试。

你可能会认为你的产品通过面包屑菜单会表现的更好，但这只是你的猜想，除非你为不同的选项制作原型并进行测试。

即使您的猜想是世界上最有根据的猜想，除非有可靠的数据支持，否则仍然存在风险。 使用数据可以减轻这种风险。

在创建设计或对导航流程进行原型制作时，请尝试使用已经集成了用户测试工具的原型制作工具，诸如CrazyEgg，UserTesting和HotJar之类的工具。这不仅可以节省你的时间和金钱，而且可以使你以最少的麻烦获得所需的数据。

Laura Klein在她的书《UX for Lean Startups》中写道，当涉及到测试时，你不需要很多人——只需找到3到5个人，然后进行一次用户测试。

渴望开始创建很棒的导航模式吗？ 从这5种导航模式开始，以获得出色的用户体验。

结论

完善导航设计有很多事情要做，正确的导航设计意味着它通常没有被忽视。

通过调整用户目标、内容策略和导航设计，你将能够创建用户喜爱的整体一致的用户体验。

---

作者：Justinmind
原文：https://uxplanet.org/navigation-design-almost-everything-you-need-to-know-6f107814e22b