navigation-design

导航设计

导航是网站的目录。它始终向用户展示他们身处何处、可以前往何处，以及如何返回。

适用范围

在以下情况下使用此技能：

• 设计或评审导航结构
• 为特定类型的网站选择菜单模式
• 设计面包屑导航、元导航或页脚导航
• 集成搜索功能
• 将信息架构转化为导航
• 需要确保导航的无障碍访问

原则

1. 导航用于定位

导航始终向用户展示他们身处何处、可以前往何处，以及如何返回。它是网站的目录。

2. 先设计信息架构，再设计导航

先组织内容，再据此设计导航。绝不能反过来。

3. 清晰胜过创意

为导航项命名时，清晰度优先于独创性。用户必须能够预判链接指向的内容。

4. 在大屏幕上保持可见

绝不要在桌面端隐藏导航。汉堡菜单是移动端模式，不是通用模式。

5. 将“三次点击”规则作为指导原则

用户应能通过最多 3 次点击访问任何重要信息。这不是教条，而是设计基准。

规则

应做：清晰组织主导航

• 将主导航限制在 5–7 个项目。
• 将最重要的链接放在开头和结尾（序列位置效应）。
• 以核心服务开头，以主要 CTA（“联系”“预约演示”）结尾。
• 默认在页眉中使用水平主导航。

应做：使用描述性菜单项

• 为菜单项起准确的名称（例如，使用“WordPress 教程”，而不是“教程”）。
• 使用目标受众的语言，而不是内部行话。
• 纳入相关关键词以优化 SEO。

应做：提供多种导航路径

• 结合主导航、元导航、页脚导航和面包屑导航。
• 子页面数量达到约 100 个时，提供搜索功能。
• 在内容区域内使用页内链接。
• 在长页面上添加“返回顶部”按钮。

应做：使用元导航

• 将元导航放在页眉右上角。
• 包含：搜索功能、语言选择器、登录、联系信息、法律声明。
• 在所有页面上保持元导航一致。

应做：将页脚作为补充导航

• 在页脚重复最重要的链接。
• 添加次要链接（条款与条件、隐私政策、网站地图、社交媒体）。
• 按主题对页脚链接分组，并使用清晰的标题。

应做：正确使用面包屑导航

• 层级超过 2 级时使用面包屑导航。
• 以指向主页的链接开头。
• 当前页面是最后一项，且不可点击。
• 将面包屑导航直接放在全局导航下方。

应做：实现无障碍导航

• 确保可通过键盘完整操作。
• 实现清晰可见的焦点指示器。
• 使用符合逻辑的 Tab 键顺序和跳过链接。
• 将触控目标尺寸设置为至少 44x44px。
• 确保文字对比度至少为 4.5:1，图标对比度至少为 3:1。

不应做：在桌面端使用汉堡菜单

• 在大屏幕上始终显示完整的主导航。
• 有足够空间时，不要将导航隐藏在图标后面。

不应做：构建过深的层级

• 避免超过 3 级导航层级。
• 将下拉菜单限制在 2–3 级。

不应做：以刻意新奇的方式隐藏导航

• 避免使用非传统的导航位置。
• 主导航项不要只使用图标而不加文字标签。

模式

按网站类型选择导航方案

网站类型	推荐导航
企业网站	水平主导航 + 页脚 + 面包屑导航
电子商务网站	超级菜单 + 带筛选条件的搜索 + 面包屑导航
博客	主导航 + 分类／标签导航 + 分页
作品集	极简设计、分类筛选、低调呈现
内容门户	多级导航 + 标签 + 强大的搜索功能 + 面包屑导航
单页网站	滚动导航 + 返回顶部按钮

巨型菜单

适用于电商网站和大型内容门户。全宽下拉菜单采用多列布局，最多 2–3 层。为类别提供视觉预览，将最重要的类别放在左侧（根据眼动追踪研究）。详情请参阅 references/navigation-patterns.md。

侧边栏导航

适用于 Web 应用、仪表盘和文档网站。垂直导航位于左侧，可折叠为仅显示图标的状态，并在悬停或点击时显示完整标签。

滚动导航（单页）

适用于作品集网站和活动落地页。点击导航项滚动至对应版块，滚动时高亮当前项。滚动到指定深度后显示“返回顶部”按钮。

站内搜索

适用于约有 100 个子页面的网站。搜索框放在页眉中，并确保醒目。大型网站应提供自动补全。无搜索结果页面应提供替代建议。

反模式

通用菜单项标签

使用“服务”“产品”“更多”等未具体说明的标签。用户无法预知点击后会看到什么。**解决方案：**使用明确的标签：“网页设计套餐”“WordPress 主题”。

菜单项过多

主导航中有 10 个或更多菜单项。这会让用户不知所措，减慢决策速度。**解决方案：**最多保留 7 个菜单项。将次要链接移至元导航或页脚。

只有图标、没有标签的导航

图标含义模糊，并非所有用户都熟悉图标惯例。**解决方案：**始终将图标与文本标签结合使用，至少提供工具提示。

触屏设备上通过悬停打开下拉菜单

下拉菜单在触屏设备上无法正常使用。**解决方案：**悬停菜单应支持切换选项。第一次点击打开菜单，第二次点击进行跳转。

返回按钮行为异常

浏览器的返回按钮无法正常工作（SPA 路由错误）。**解决方案：**正确实现 History API。

检查清单

结构

• 在设计导航前完成信息架构
• 主导航最多包含 5–7 个菜单项
• 层级最多 3 层
• 将最重要的链接放在开头和结尾

命名

• 菜单项描述清晰，并使用目标受众的语言
• 在菜单项和 URL 中融入关键词
• 所有页面的命名保持一致

元素

• Logo 链接到主页（左上角）
• 桌面端显示主导航
• 仅在移动端显示汉堡菜单图标
• 提供元导航
• 页脚导航按组列出次要链接
• 超过 2 层时提供面包屑导航
• 超过 100 个子页面时提供搜索功能

视觉反馈

• 当前菜单项在视觉上突出显示
• 链接易于辨认
• 为键盘导航提供清晰可见的焦点指示器

无障碍

• 支持完整的键盘操作
• 提供跳转链接
• 为导航区域添加 ARIA 标签
• 确保最低对比度达到 4.5:1
• 触控目标至少为 44x44px

交叉引用

• usability -- 导航是核心的可用性要素
• responsive-design -- 响应式导航（汉堡菜单、断点）
• accessibility -- 无障碍导航（WCAG、键盘、ARIA）
• ui-design -- 导航元素的视觉设计
• branding-identity -- 导航作为品牌触点