导航设计模式：网页与移动端的 9 种菜单布局

导航不是菜单，它是对内容存放位置的承诺。运作顺畅时，用户可以毫不费力地穿梭于产品之中。一旦失效，他们就会离开。

用户不会阅读导航，他们只会扫视、信任它，只有在它失效时才会注意到它。

这才是真正的设计难题。导航不是一个值得炫耀的功能，而是应该让人感知不到的基础设施。为你的信息架构或用户情境选错模式，就会引发一连串连锁反应：用户找不到各个板块，无法确认自己的位置，也始终无法建立对产品运作方式的心智模型。

九种模式几乎涵盖了所有场景。以下是对每种模式的直接分析：它擅长什么、在哪里会失效，以及何时该用它。

---

导航真正的作用

导航为用户回答一个问题：从这里我能去哪里？回答清晰，他们就会前进。让他们费力寻找，他们就会离开。

导航的结构性任务是将你的信息架构呈现为用户可以信任的系统。这意味着一致性、稳定性，以及对产品实际内容的如实反映。在不同页面之间变来变去的导航、显示的标签与 URL 不符、或将主要路径埋在次要路径之下，都是设计失败，不管下拉动画有多精致。Amazon 之所以在数亿件商品的每一个页面上都保持相同的主导航，正是出于这个原因。

实际意义在于：你选择导航模式要基于两个输入，你的信息架构有多深多宽，以及用户在什么情境下使用产品。其他一切，视觉风格、动效、颜色，都是这两个决策的结果。

---

顶部导航栏

水平顶部导航栏是网页的默认选择，原因显而易见。在桌面尺寸下，它能在顶部区域排列大约五到七个主要板块，始终保持可见，并与人们的阅读方式相吻合：从左到右，从上到下。

Neon (neon.tech) 就是一个清晰的示例。左侧是品牌标志，主导航链接居中，右侧是登录和行动号召按钮。没有任何内容隐藏，没有嵌套，没有认知负担。在最佳状态下，顶部导航栏能用一行就讲清楚整个网站的结构，无需任何交互。

失效模式是塞得太满。一个有九个链接、两个下拉菜单、一个工具菜单和一个搜索图标的顶部导航栏，不是导航模式，而是焦虑发作。这个模式的上限大约是六七个条目，超过就需要重新整理结构。

顶部导航栏还需要提前规划移动端的回退方案。在小屏幕上，水平布局没有容纳空间。如果你在设计阶段不决定小视口的体验，最终会把汉堡菜单作为事后补救方案硬塞进去，从而引入新的问题。

---

汉堡菜单

汉堡菜单（三条叠加的横线，点击后展开抽屉或浮层）将导航隐藏在一次额外的交互之后。它节省了屏幕空间，同时也让产品中的每个板块都变得更难被发现。

关于这一点，研究结论并不含糊。NNGroup 发现，在移动端，标签式导航在可发现性和任务完成率上始终优于汉堡菜单。一旦你把导航藏起来，人们使用它的频率就会下降。隐藏在汉堡菜单后面的条目在视觉上就是优先级更低的，因为它们确实如此。

这并不意味着汉堡菜单是错的，而是说它是一个权衡。对于深层次、访问频率低的板块，这个权衡是可以接受的。对于人们每天打开的应用，这通常是个错误。

Instagram 曾尝试将主导航放在汉堡菜单后面，后来改变了方向，将核心板块移到了底部标签栏。这个教训很明确：汉堡菜单适用于次要路径、设置和访问不频繁的目的地。永远不要把它用于定义用户打开产品原因的那些操作。

---

固定侧边栏

固定侧边栏将完整的导航栏钉在屏幕左侧，在用户滚动内容时保持可见。它是仪表盘、设计工具和深层文档的主流模式，因为空间上的持久性本身就是核心价值。

Tailwind CSS 文档对此的运用恰到好处。左侧边栏包含所有文档章节，按组分类且可滚动，内容占据剩余宽度。用户随时都知道自己在哪里、可以去哪里，以及整个信息空间是如何组织的。在深层参考资料中，这种空间感知至关重要，因为人们会频繁地在各章节之间跳转。

Slack、Notion 和 Figma 在应用层面都使用固定侧边栏，原因相同。侧边栏就是地图。移除它意味着用户每次导航都要重新构建心智模型，这是他们不应该承担的成本。

代价是水平屏幕空间。在 13 英寸笔记本上，固定侧边栏会占用内容区域 250 到 300 像素。在移动端，则根本没有空间。

响应式侧边栏在小屏幕上会折叠成抽屉或汉堡菜单，重新引入你本想避免的可发现性问题。从一开始就将其接入保持导航一致性的设计令牌，否则你之后还要再来打补丁。

---

底部标签栏

底部标签栏将三到五个图标锚定在移动屏幕底部，正好在拇指操作区域内。这是原生移动应用的标准模式，到 2026 年，也成为任何人们每天在手机上使用的网页产品的默认选择。

Instagram、Spotify 和 YouTube 的移动端主导航都采用这个模式。这绝非巧合。底部标签栏的存在是因为手机屏幕顶部是单手拇指最难够到的区域，而导航又需要频繁点击。将主要目的地移到底部减少了身体负担，这种优势在每天数千次操作中会不断累积。

五个条目是硬性上限。超过五个，图标会缩小，标签会被截断。如果你的产品有超过五个主要板块，这是一个伪装成导航问题的信息架构问题。先重构，再选择模式。

到 2026 年，底部标签栏是任何用户每天至少在移动端使用一次的产品的默认选择。如果你在设计消费级移动产品或移动优先的渐进式网页应用，而没有使用底部标签栏，你需要一个具体的理由。"我们先从桌面端设计起"不是那个理由。

---

超级菜单

超级菜单将一个顶部导航条目展开为包含链接、分类、有时还有预览图块的宽幅多列面板。它为拥有庞大产品目录和复杂层级的网站而生，这些网站用简单下拉菜单根本无法呈现所有内容。

Amazon 在其"全部"菜单下运行了一个极端版本。数十个分类及其子分类，按列和组排列，全部在一个面板中可见。在目录压力下，这个模式之所以有效，是因为它在不需要多次点击深入层级的情况下就能呈现深度内容，所有内容都能在一个视图中扫描完毕。

问题在于超级菜单本质上是桌面端专属模式。多列下拉面板无法在移动端复现。使用它的网站需要为小屏幕制定完全独立的导航策略，这会让设计和维护的工作量翻倍。

超级菜单在内容较少的网站上也会失效。十二个页面不足以支撑超级菜单。这个模式暗示着一种复杂性，你需要通过实际的内容深度来赢得它，而不是靠对未来增长的乐观预期。

---

面包屑导航

面包屑显示从首页到当前页面的路径：首页 > CSS > Grid。它不是主导航，而是方向导航，服务于一个精确的功能。

MDN 在每个参考页面上都使用面包屑。当你从 Google 搜索直接落到 CSS grid 文档时，面包屑路径会立即告诉你这个页面属于 CSS，CSS 又属于 References。这个上下文将一个三级层级压缩成一行，无需任何交互就能解读。

面包屑在扁平网站上毫无用处。如果你的整个产品只有两个层级，面包屑只会增加视觉噪音，而不提供任何导向价值。它们适合文档网站、电商层级（如首页 > 男士 > 夹克 > 防水），以及任何用户经常通过搜索直接落地到深层页面的网站。

面包屑与其他模式搭配使用，而不是取而代之。它们位于内容上方，补充顶部导航栏或侧边栏。对于更多网页和 UI 设计分析来说，同样的逻辑适用：次要导航元素应当支持主要模式，而不是与之竞争。

---

命令面板

命令面板是一个由键盘触发的浮层，通常通过 Cmd+K 或 Ctrl+K 调出，接受文字输入并返回按优先级排列的操作、导航目标和搜索结果。Linear、Raycast、Slack 和 Figma 都将其作为一级导航界面来提供。

到 2026 年，命令面板已经从高级用户的小技巧升级为专业生产力软件中的主要导航机制。Linear 的 Cmd+K 能在两秒内带你到达任何 issue、项目或工作区操作。Raycast 几乎完全围绕这个模式构建。这些产品将文字输入意图视为比任何菜单层级更直接的路径，因为对于有键盘操作习惯的人来说，确实如此。

失效模式是不可见性。不知道快捷键存在的用户永远不会通过探索发现它。命令面板无法取代对首次用户或任何没有键盘优先习惯的人的可见导航。将所有导航都隐藏在 Cmd+K 后面的产品会让每个新用户无所适从。

正确的用法是扩充，而不是替代。在侧边栏或顶部导航栏旁边运行命令面板，让有键盘习惯的用户可以完全跳过菜单。让其他所有人用视觉方式导航。两条路径都必须存在。

---

固定导航栏与收缩导航栏

固定导航栏在用户滚动时保持钉在视口顶部。收缩导航栏做同样的事，但在用户滚动超过某个阈值后会降低自身高度，在不牺牲导航访问性的前提下收回垂直空间。

两种模式都能在长页面上保持导航的可访问性，而无需滚回页面顶部。对于内容密集的页面，这是真实的可用性提升。GitHub 在其仓库页面中使用固定导航栏，这样当你滚动浏览 issues、代码和讨论时，主导航、搜索和仓库上下文始终在视野之内。

代价是垂直屏幕空间。一个 60 到 70 像素高的固定导航栏会在每个滚动位置都占据这个高度。在 768 像素高的平板电脑上，这接近视口高度的 10%，永远被导航占据。收缩导航栏通过在滚动后将高度降至约 40 像素来收回一部分空间，但需要谨慎实现，以免让人感觉像是出了问题。

避免在用户很快就能到达底部的短页面上使用固定导航栏。这个模式在长而内容密集的页面上才发挥价值，因为滚回顶部需要相当大的滑动距离。

---

超大页脚

超大页脚是一个宽幅多列的底部区域，包含次要导航、链接分类、法律页面和联系信息。它不是主导航，而是为那些在主要内容中没有找到所需内容而滚动到底部的用户提供的第二次机会。

Tailwind CSS、Stripe 以及大多数 SaaS 营销网站都使用四到六列的超大页脚，涵盖产品链接、文档、公司页面、法律条款和社交媒体链接。它们在主要内容体验期间不占用任何视口高度，并为那些滚动到底部寻找特定内容的用户提供了一个有用的地图。

超大页脚对 SEO 的意义大于对实时导航的意义。页脚中的每一个链接都是可爬取的路径，它们是搜索引擎发现网站次要和三级页面的主要方式之一。从纯粹的可用性角度来看，大多数用户从不滚动到页脚，但那些滚动到底部的人是在有目的地寻找内容。

在已登录产品体验中跳过超大页脚。Notion 不会在编辑器内向你显示营销页脚。这个模式属于营销网站和文档中心，在那里匿名用户和新用户可以自由浏览。

---

如何选择正确的模式

正确的导航模式由两个输入决定：你的信息架构深度，以及用户使用产品的情境。其他一切都是这两个因素的结果。

组合使用模式是正常且符合预期的。大多数成熟的产品会同时使用两到三种。Tailwind CSS 文档使用顶部导航栏进行网站级导航，使用固定侧边栏进行文档导航，使用面包屑进行页面级定位。这三种模式同时处理导航层级的三个不同层次，互不重叠。

Brainy 帮助设计师在真正落地的工作上做出更快、更敏锐的判断。了解我们正在为创作者构建的东西。

---

那些悄悄破坏可用性的导航错误

将主要操作藏在汉堡菜单里。 如果用户每天都需要某个功能，它就不能存在于额外的一次点击之后。测量汉堡菜单本身的点击率。如果低于 30%，里面的路径对大多数用户来说是隐形的。

在不同界面使用不一致的标签。 仪表盘上叫"洞察"，入门邮件里叫"报告"，帮助文档里叫"分析"，却指向同一个目的地。导航是一种词汇，每一个同义词在用户的心智模型中都是一个问号。

当前位置没有激活状态。 用户需要知道自己在哪里。当前导航条目上的激活状态是最基本的方向感信号。省略它会迫使用户去看 URL，而这是你主动设计到产品中的失效模式。

导航随页面或板块而变化。 如果侧边栏根据用户所在的板块重新排列，你就破坏了他们已经建立的空间记忆。导航应该是一张固定的地图。地图随位置变化的产品不会建立用户信心，只会摧毁它。

过度使用嵌套。 三层深的下拉菜单几乎总是一个在 UI 中错误呈现的信息架构问题。先把结构扁平化。嵌套菜单扫描速度慢，在触摸操作上无法使用，而且需要精确的鼠标控制才能在悬停时保持展开状态。

对于为扫描而设计的布局模式来说，同样的原则适用：结构和方向感先于装饰。无法引导方向的导航充其量是装饰，往往是阻力。

---

常见问题

网页上最常用的导航模式是什么？

水平顶部导航栏是桌面网站最常见的模式。对于移动应用和日常使用的产品，底部标签栏已成为标准。大多数实际产品同时使用两者，桌面端用顶部导航栏，移动端用底部标签栏，建立在一个统一的信息架构之上。

什么时候应该使用汉堡菜单？

将汉堡菜单用于移动端的次要或不常用导航，而不是主要板块。如果用户需要打开汉堡菜单才能完成产品的核心任务，那么架构需要重构，而不是换一个更好看的图标。

导航栏应该有多少个条目？

水平顶部导航栏被接受的上限是五到七个条目，移动端底部标签栏是五个。超过这些数量，模式就开始失效，条目挤在一起，标签被截断，扫描的成本超过了回报。

一个网站可以使用多种导航模式吗？

不仅可以，而且应该。大多数成熟产品使用两到三种模式来处理导航层级的不同层次。文档网站通常将顶部导航栏（用于网站导航）、固定侧边栏（用于章节导航）和面包屑（用于页面定位）组合使用。

每种模式处理一个不同的层次，互不重叠。错误在于使用多种相互竞争而非相互协作的模式。

导航如何影响 SEO？

顶部导航栏、侧边栏和超大页脚中的链接会传递页面权重，并帮助搜索引擎发现和收录页面。面包屑会添加结构化数据，可以在搜索结果中直接呈现路径信息。导航是你的 SEO 架构的一部分，应该从第一天起就这样对待，而不是事后打补丁。

---

停止让用户四处寻找

导航在运作时是隐形的，失效时令人抓狂。目标从来不是一个漂亮的菜单，而是用户能够到达、定位、移动和返回，没有任何一刻的摩擦。

九种模式几乎涵盖了所有情况：顶部导航栏用于营销网站和广泛参考，固定侧边栏用于深层工具和文档，底部标签栏用于每日使用的移动端，超级菜单用于大型产品目录，面包屑用于层级定位，命令面板用于速度优先的生产力工具，固定导航栏用于长文章内容，汉堡菜单作为次要路径的后备选项，超大页脚作为营销网站的第二次机会地图。

根据信息架构深度和使用情境来选择，当产品有多个导航层级时叠加两到三种模式。避免那些悄悄积累的错误：隐藏的主要操作、不一致的标签、缺失的激活状态、变化的导航结构，以及过度的嵌套。

在 Brainy Papers 上探索更多网页和 UI 设计分析，或加入 Brainy 创作者社区，与 200 万以上关心基础功底的设计师一起打磨技艺。