优秀的网站导航兼具策略与设计。如果一个设计精美的菜单将你转化率最高的页面埋在“解决方案”之类的通用标签下，那它就毫无用处。如果笨拙的菜单和过小的移动字体使其无法使用，精心规划的内容层次结构也会付诸东流。
在本指南中，你将学习如何做出导航设计决策，以改善用户体验并带来更好的结果。你还将获得改善内容结构、为移动设备设计和选择适合你网站的导航元素的具体技巧，以及九个成功导航的真实案例。
如何设计你的网站导航
以下是如何以系统的方式处理你的网站导航，既考虑到用户需求，又考虑到现代网页设计的最佳实践。
1. 首先确定你的内容结构
作为设计师，你可能更愿意尝试悬停效果，而不是深入研究信息架构。但在你将第一个导航元素拖到画布上之前，你必须回答至少几个问题。
至少，确定哪些内容最重要：
考虑用户来到你的网站是为了完成哪些特定任务
将这些用户任务中的每一个都映射到一个网页上
在任何菜单设计中突出显示这些页面
如果你正在处理高可见度项目或广泛的站点地图，你可能需要戴上 UX 研究员的帽子并深入研究。
为你的导航决策添加上下文的一个简单方法是查看你的分析，找到归因报告，并找出哪些页面驱动了最高的转化。在大多数情况下，你表现最好的页面应该易于访问。交互设计基金会还建议在设计之前进行卡片分类练习，以验证你的网站导航结构。
即使你只是想在信息架构上“打勾”，也不要在不知道你正在设计什么以及为什么设计的情况下开始设计。决定哪些链接足够重要，可以包含在你的顶级导航中，哪些可以提升到最显眼的位置，以及哪些可以隐藏在页脚中。
2. 选择你的导航类型和放置位置
一项被称为雅各布定律的UX 网站设计原则提出了一个常识性观察：用户大部分时间都在其他网站上度过，他们期望你的网站或多或少地像他们以前使用过的那些网站一样运作。
大多数网站导航设计都应坚持以下标准惯例：
顶部水平导航
移动设备上的汉堡菜单
左上方可点击的徽标，将用户带到主页
右上方嵌入为按钮的行动号召
你不会因这些选择而让任何人感到惊讶——这正是重点。这些规范已经存在了几十年，并深深植根于用户行为中。Slides Agency的以下示例所示，其优势在于用户在几毫秒内就能理解的用户界面。
想尝试一下吗？你可以——但你可能不应该。坚持用户熟悉的东西是让他们达到目标的最快途径。一个例外是侧边栏，它可以在内容密集的情况下很好地用作辅助导航菜单，例如浏览电子商务网站、博客文章或支持文章。
3. 让你的菜单保持专注和可扫视
在互联网历史的某个时刻，企业对它们的“关于”页面的名称感到厌倦。一些改成了“我们的故事”，如今用户对此或多或少都能理解。但试图耍小聪明可能会适得其反：偏离常规的菜单项名称（例如“加入我们”而不是“招聘”）非但没有让导航更轻松，反而增加了用户的认知负担。
让你的菜单直截了当：
将菜单项名称限制为一两个单词，并使用常见的术语
在你的顶部导航栏上坚持5-7个选项，以防止决策瘫痪
突出显示最重要的页面
使用下拉菜单或超级菜单来放置次要内容
只有三个主要菜单项，一个下拉菜单和一个导航栏行动号召，Packaly是导航极简主义优势的一个很好的例子。用户立即知道该做什么——如果他们想深入了解，他们也知道去哪里。
如果你使用的是大型超级菜单，你会有更多回旋余地。你的菜单项名称仍然应该简短、可扫描且熟悉——但由于你有更多的空间可供使用，你可以添加比必需品更多的信息。
4. 创建独立的移动导航体验
移动菜单通常是桌面导航体验的完全复制。但这并非总是最佳途径：如果你曾访问过一个网站，其移动手风琴菜单中塞满了数十个链接，你就会亲身了解到这可能出错的地方。
考虑到你正在使用的有限空间、移动设备上使用的基于触摸的交互以及用户在使用小屏幕时具有的不同目标，采取更周密的方法具有强有力的论据。
设计极简的移动菜单，应做到：
可见地显示最重要的5-7个菜单项
将不那么重要的链接放在折叠菜单中（或完全删除它们）
使触控目标足够大并添加适当的间距
汉堡菜单是移动导航中久经考验的方法。近二十年来，它们已被用户广泛理解。如果你想改进经典的汉堡图标公式，可以添加“菜单”一词以提高清晰度——CXL（一家 UX 培训机构）进行的一系列 A/B 测试表明，它表现得更好。
Donut Shop，一个 Framer 模板，展示了这一点。它还包含另一个用户友好的细节：打开菜单后，“菜单”会变为“关闭”，以便用户知道如何关闭它。
将链接放在汉堡菜单中会降低它们的可见性，不如它们直接显示。因此，你也可以考虑在移动导航栏上单独显示你最重要的行动号召按钮。或者，如果你的链接很少，则可以考虑使用底部导航栏，直接列出每个链接，并完全跳过汉堡菜单。
5. 为可用性和可访问性而设计
你应该始终保持网站导航与品牌一致，但它并不是进行巨大创意表达的最佳场所。相反，请坚持使用可用性最佳实践，以巧妙地向用户展示如何交互并找到他们需要的东西。
遵循这些网站导航最佳实践：
确保你的导航链接看起来可点击，并在悬停时有明显的颜色变化
在下拉菜单中添加图标以帮助用户快速导航
在整个网站上保持相同的导航结构
对于具有深层层次结构的网站，请使用面包屑导航
考虑嵌入一个可扩展的搜索栏
设计你的菜单悬停状态以即时触发
粘性菜单是提高可用性并让用户在网站上停留更长时间的简单方法。Smashing Magazine 的一项研究发现，粘性菜单的导航速度提高了22%——研究中100%的用户更喜欢它们而不是静态菜单。粘性菜单在移动设备上尤其重要，因为如果没有它们，用户将不得不进行不合理的滚动。
在这里，你可以看到PlayerZero的粘性导航栏如何始终跟随用户到页脚，让他们可以轻松地进行下一步操作，而无需疲劳滚动。
确保你的网站导航菜单可访问。使用适当的焦点状态和ARIA 标签，选择与菜单背景颜色对比度高的文本颜色，并确保你的菜单支持键盘导航和屏幕阅读器。除了提高所有用户的可读性外，这些步骤还有助于你的网站 SEO。
9 个有效的网站导航设计示例
让我们看看九个网站，它们在导航方面做得很好，从水平导航栏和汉堡菜单等常见方法，��不常用但很棒的底部导航栏。
1. 水平导航栏 — Tapdaa
Tapdaa的水平导航栏符合所有正确的标准：它是粘性的，悬停时会改变颜色，并且有一个醒目的行动号召按钮。由于它是一个单页网站，所有链接实际上都是锚点链接——这意味着使用粘性导航栏可以在不同部分之间轻松快速跳转。
一些设计师倾向于不使用粘性水平导航栏，以避免屏幕拥挤。如果你对此感到担忧，可以将导航栏设置为用户向下滚动时消失，并在用户再次开始向上滚动时重新出现。
2. 下拉菜单 — Delphi
Delphi的下拉菜单具有超强的响应性，菜单项通过平滑的淡入动画在几毫秒内出现。箭头表示下拉菜单项的存在。导航栏打破了常规，将徽标放在中央而不是左侧，但这种权衡是值得的——这里存在清晰的组织逻辑，右侧是行动导向的链接，左侧是信息性链接。
3. 超级菜单 — Gitbook
如果你发现自己正在添加多个嵌套下拉菜单来容纳你的内容，请考虑使用超级菜单。它提供了一种更优雅的方式来组织大量导航项。超级菜单还减少了导航栏固有的空间限制，让你能够包含简短描述和额外的行动号召。
Gitbook很好地利用了其超级菜单。菜单的每个列都作为即时可见的子菜单，减少了需要放入导航栏的链接数量。Gitbook 还通过包含图标和简短描述来方便地导航内容，并将整个超级菜单列变成了一个醒目的 CTA，引导用户使用新功能。
4. 侧边栏导航 — Novara
侧边栏导航菜单对于导航深层内容层次结构（如电子商务产品页面）非常有用。但将它们用作主要导航会打破 UX 惯例，这意味着用户将不可避免地对你选择组织内容的方式感到惊讶。然而，这并非总是不可接受，特别是对于营销机构和设计师。
作品集网站有时会选择侧边栏导航，因为它既能打开网站主体，又能为菜单项增加更多空间。Novara（一个 Framer 模板）是这种工作方式的一个很好的例子：它允许在不同项目之间进行一键导航，包含一个视觉化的“预订通话”CTA，并且仍然有空间放置“关于”和“定价”等标准菜单项。
如果你使用侧边栏菜单，请将其放在屏幕的左侧。右对齐的菜单会使用户更难扫描你的链接列表，根据 Nielsen Norman Group（一家用户体验培训咨询公司）进行的眼动追踪研究。
5. 汉堡菜单 — Kits AI
汉堡菜单长期以来一直在 UX 圈子里存在争议。它们有两个主要缺点：
访问者必须点击才能看到你的菜单，这可能导致参与度降低。
技术不那么精通的用户可能没有意识到点击汉堡图标会打开一个菜单。
你还应该使用它们吗？可能。汉堡菜单现在几乎普遍用于移动导航，而且它们可能永远不会消失。《大西洋月刊》和TechCrunch在2015年都曾发文呼吁取消它们——而这两个网站至今仍在使用汉堡菜单。（话说回来，*永远不要*在桌面端使用汉堡菜单，因为它会隐藏你的导航，并且没有明显的节省空间的好处。）
Kits AI拥有简洁的汉堡菜单设计，带有流畅的动画、粘性导航栏和足以在小设备上阅读的字体大小。它始终将主要行动号召（“开始使用”）放在汉堡菜单之外，这对转化率来说是一个明智之举。它的16个功能可能太多了，无法在移动菜单上列出，但由于它们隐藏在手风琴菜单下，因此在移动设备上导航网站并不会变得过于笨拙。
6. 底部导航栏 — Assemble
底部导航栏提供了一种优雅的替代方案，取代了汉堡菜单：它们能释放屏幕顶部的空间，让所有菜单选项都可见，并且在移动设备上更忠实地再现了完整的桌面体验。不幸的是，如果你的网站链接数量不多，你就无法充分利用它们。虽然底部导航栏在网站上并不特别常见，但用户已经习惯了它们，因为它们在移动应用程序上是常规操作。
Assemble的移动网站一开始既没有顶部导航栏，也*没有*底部导航栏，这使得焦点集中在少数几个 CTA 上，并使其最初更像一个挤压页面的感觉。当你从页面顶部向下滚动时，一个底部导航栏会进入视野，使你可以随时轻松导航到任何地方。
7. 手风琴菜单 — Crayo
手风琴菜单（或可折叠菜单，允许多个部分同时保持打开状态）是处理移动设备上大量菜单项的默认解决方案。
Crayo使用手风琴菜单来组织大约十几条链接，这些链接通常可以通过网站桌面版本的下拉导航进行访问。在移动设备上导航大量链接会很快让人不知所措，因此关键在于提供上下文。Crayo 在这方面做得很好，它在每个菜单项下方显示简短描述，并用标题组织较大的列表。
8. 移动覆盖菜单 — Penny
对于移动菜单来说，越简单越好。Penny这家金融科技公司在这方面具有优势：它的网站只有四个页面和一个 CTA。Penny 通过增加字体大小、添加留白以及将汉堡图标动画化为“X”来让用户了解如何关闭菜单，从而出色地为其移动设备适配了菜单。
将移动菜单这样的小东西视为品牌体验的一部分，这听起来很有趣，但 Penny 的确做到了——菜单的圆角、流畅的动画和模糊的背景都让人感觉是故意的，并且符合品牌形象。（如果你想创建带有流畅淡入动画的可滚动移动菜单，Framer 可以轻松实现。）
9. 页脚菜单 — Zazu
许多设计师将页脚作为主菜单的逐点重述。理论上这可以减少你的跳出率，但现在已经不必要了。它是粘性导航出现之前的遗留物，那时页脚导航是网站访问者的救命稻草，他们到达页面底部却不想滚动回顶部。
你的网站页脚菜单最好用于突出那些值得查看但没有理由包含在主菜单中的重要内容。
页脚菜单的用途包括：
法律免责声明
隐私/使用条款/版权信息
地址和联系信息
漏斗底部内容，如对比文章
社交媒体链接
Zazu，一个银行应用程序，很好地平衡了这一点。它的页脚品牌特色鲜明，易于阅读，并涵盖了主菜单中无法访问的所有隐私、法律和社交媒体信息。Zazu 成功地将注意力引导到网站的主要部分，而不会通过列出每个页面来让用户感到不知所措。
使用 Framer 构建真正有效的导航
最好的导航是不可见的。用户应该能够无缝地到达他们的目的地，以至于他们从不怀疑自己是如何到达那里的。但当导航失败时——当用户找不到你的定价页面或在混乱的下拉菜单中迷失方向时——突然间，这就是他们唯一能想到的。要做好导航需要实验，对于许多设计团队来说，这需要等待开发人员。
通过 Framer，设计师可以使用无代码构建器在几天而不是几个月内测试导航假设。想看看底部导航栏在移动用户中是否比汉堡菜单表现更好？构建两个版本并找出答案。好奇你的超级菜单是否真的能帮助用户找到他们需要的东西？可以尝试一个简化的下拉菜单。
如果你准备设计更有效的导航，首先快速浏览Framer Academy 中的导航课程。从那里，你可以在 Framer 的组件库中找到现成的导航元素，并注册 Framer，立即开始构建。