站点导航系统
目的
站点导航系统技能提供了一种用于组织和设计网站结构路径的方法论。它确保用户能够定位自己、快速找到信息，并在所有设备类型之间轻松移动。一个健壮的导航系统平衡了信息密度与清晰度，同时保持了可访问性和视觉层级。
用例
- 为新建网站设计全局页眉和页脚。
- 重组复杂网站的信息架构 (IA)。
- 实现响应式导航模式（例如移动抽屉、Mega菜单）。
- 在内容密集型站点上改进“寻路”（面包屑、子导航）。
- 审计现有导航的可访问性和可用性差距。
何时不使用
- 路由极少的单页应用 (SPA)： 导航在单个视图中纯粹是功能性的（例如一个简单的仪表盘工具）。
- 沉浸式/实验性网站： 故意避免使用标准导航约定以达到叙事或艺术目的。
- 独立着陆页： 目标是单一的转化路径，全局导航可能会分散用户的注意力（但可能仍然使用“返回顶部”或最小锚点导航）。
输入
- 信息架构 (IA)： 一个站点地图或按层次分类的页面列表。
- 用户角色与目标： 用户需要执行的最频繁的任务是什么？
- 内容优先级： 哪些链接是“主要”（全局）、“次要”（上下文相关）或“实用”（工具/账户）？
- 设备约束： 目标断点以及触控与鼠标交互要求。
输出
- 导航地图： 页眉、页脚和子导航元素的结构指南。
- 响应式策略： 导航如何从桌面端适应到移动端的定义。
- 交互规范： 下拉菜单、活动状态和焦点管理的行为。
- 可访问性地标： 为屏幕阅读器导航定义的ARIA角色和标签。
工作流
1. 分类导航层级
将您的站点地图划分为功能层级：
- 主要： 核心站点区域（例如，产品、服务、关于我们）。
- 次要/上下文相关： 特定于某个部分的链接（例如，特定产品类别）。
- 实用： 非核心但必要的工具（例如，搜索、登录、语言选择器）。
- 第三级（页脚）： SEO链接、法律信息、社交媒体和冗余的全局链接。
2. 选择导航模式
根据内容密度选择模式：
- 简单栏： 3–7 个链接。最适合中小型网站。
- 下拉菜单： 最适合具有 2 级层次结构的网站。
- Mega菜单： 最适合具有许多类别的大型电子商务或企业网站。
- 移动抽屉： 移动端标准；在一个垂直堆栈中包含所有导航层级。
3. 为寻路设计
确保用户始终知道他们在哪里：
- 活动状态： 视觉上区分当前页面链接，并使用
aria-current="page"为辅助技术标记它。 - 面包屑： 用于深度超过 3 级的网站。
- 一致放置： 在所有页面上将全局导航保持在相同位置。
4. 定义响应式行为
确定导航如何折叠：
- 断点切换： 确切决定桌面菜单何时变成“汉堡包”菜单。
- 优先级修剪： 在移动端，如果实用链接（如“搜索”）优先级高，则将其移出抽屉并放入页眉。
- 触摸目标： 满足 WCAG 2.2 SC 2.5.8（目标大小最小值）24x24px 并具有充足间距；对于主要拇指交互目标，首选 44x44px。
5. 确立可访问性
- 地标： 使用带有唯一
aria-label的<nav>标签（例如，“主菜单”，“页脚”）。 - 键盘路径： 确保逻辑的 Tab 顺序和可见的
:focus-visible状态，且这些状态永远不会被粘性页眉或覆盖层遮蔽（WCAG 2.2 SC 2.4.11 焦点不被遮蔽）。 - 跳过链接： 为键盘用户提供一个“跳转到内容”链接。
- ARIA 状态： 对于可切换菜单，使用
aria-expanded和aria-controls。
决策规则
- 7 链接规则： 尝试将主导航限制在 7 项或更少，以减轻认知负荷（米勒定律）。
- 可预测性优于创新： 使用标准图标（汉堡包表示菜单，放大镜表示搜索）以确保立即识别。
- 视觉层级： 最重要的操作（例如，“立即开始”）应该是样式化的按钮，而不是文本链接。
- 粘性与静态： 仅当用户在滚动时需要频繁访问导航时才使用粘性页眉（例如，长篇内容或仪表盘）。
约束
- 可访问性： 必须完全可仅通过键盘导航。导航链接的对比度必须满足 WCAG AA (4.5:1)。触摸目标需满足 WCAG 2.2 SC 2.5.8。
- 响应式： 导航绝不能水平溢出视口。
- 层级： 导航不应与页面的 H1 或主要 CTA 竞争。
常见失败模式
- “神秘肉”导航： 使用没有标签且不被普遍理解的图标。
- 过度拥挤的页眉： 试图容纳太多实用链接，导致混乱和误点击。
- 不可访问的抽屉： 创建无法通过键盘关闭或打开时不捕捉焦点的移动菜单。
- 缺少反馈： 当用户在当前页面或悬停在链接上时没有视觉变化。
验证标准
- 导航被分为清晰的层级（主要、实用、页脚）。
- 活动状态在视觉上可区分且可访问。
- 移动端导航功能正常，并包含所有主要链接。
- 键盘用户可以访问所有链接并仅使用键盘关闭菜单。
- 地标 (
<nav>) 被正确使用和标记。 - 移动端的触摸目标至少满足 WCAG 2.2 24x24px 最小值（主要操作首选 44x44px）。
- “跳转到内容”链接存在且功能正常。