ux-navigation

导航技能

此技能的工作方式（请先阅读）

这是一项生成式技能。默认失效模式包括：习惯性套用模式（无论信息架构的深度、广度或平台如何，都放一个带汉堡菜单的顶栏）、隐藏必需项（将核心版块埋在图标后面），以及缺少方向指引（没有“你在这里”的提示，导致通过搜索进入的用户迷失方向）。导航应根据内容结构和用户浏览内容的方式来选择，而不是照搬现代网站的样式。此技能会按以下步骤把关：

1. 确定信息架构的形态和平台——这两者在很大程度上决定导航模式。
2. 应用始终适用的核心原则——系统分层、方向指引、必需项可见性、交互基础。
3. 明确导航模式的选择（顶栏与侧边栏、汉堡菜单、巨型菜单、选项卡、面包屑、分页与无限滚动）及其权衡。

随后将工作交接给 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit；对于多屏幕结构，还要交接给 ux-information-architecture-audit。

---

步骤 0 — 设计前先了解背景

如果信息未知，请先询问；如果没有答案仍要继续，请说明假设：

• 信息架构的形态——有多少个顶层版块、层级有多深，以及预计是否会扩展？（内容广泛或持续增长时，更适合采用垂直导航和巨型菜单；层级浅且稳定时，适合顶栏或选项卡。）
• 平台——桌面端、移动端，还是响应式？移动端会改变默认选择：主要目的地使用底部导航，单层面包屑，并按照操作系统惯例放置汉堡菜单。
• 以内容为主还是以任务为主？ 内容类应用（新闻、视频）可以尽量减少界面装饰，并隐藏次级导航；任务类应用（预订、健身）则需要持久且可见的导航。
• 入口——用户是否会通过搜索或链接直接进入深层页面？如果是，方向指引（面包屑、标题、URL）就比首页路径重要得多。

---

始终适用的核心原则（几乎所有情况下都正确）

对导航系统分层——各司其职

全局导航（主要版块，在每个页面保持一致）· 局部导航（版块内的导航；全局导航在顶部，局部导航呈倒 L 形）· 上下文导航（内容中或内容后的相关链接）· 实用功能（登录、搜索、语言、账户——位于顶部角落，使用熟悉的标签；语言名称用文本表示，不要用旗帜）· 页脚（法律信息、网站地图、联系信息、社交媒体；“大型页脚”可以容纳丰富的次级导航）。不要让某一层代替另一层的工作——面包屑永远不能取代全局导航。

始终让用户知道“我在哪里？”

• 导航中的选中状态——用颜色、下划线或偏移等方式突出显示当前版块。活动选项卡和当前分页也一样。
• 深层层级使用面包屑（参见规范），让从搜索引擎进入的用户了解上下文。
• 描述性 HTML 标题和简洁易读的 URL（/blog/how-to-bake-cookies，而不是 /page1）——浏览器界面也是导航的一部分。
• Logo 始终位于左上角、始终可点击，并始终链接到首页——这是通用的重置按钮。将 Logo 居中或放在右侧，会明显损害导航效果。
• **进行测试：**让别人直接查看一个深层页面，然后问“你现在在这个网站的哪里？”如果对方答不上来，说明提示不够明显。

让必需项保持可见

• **只要空间允许，就绝不要把主要版块藏在汉堡菜单后面。**隐藏式导航不易被发现；汉堡菜单应留给真正的次要项目。
• **在任何尺度上，可见选项都优于隐藏选项：**数量允许时，优先使用直接显示的选项卡或链接，而不是下拉菜单。

交互基础（不可妥协）

• 触控目标 ≥44×44px，链接文字 ≥16px，链接之间留出足够的间距。
• 点击激活菜单，不要只靠悬停——触摸屏和键盘无法使用悬停。如果使用悬停（大型菜单）：意图延迟 0.5s，显示延迟 0.1s。
• 用插入符号／箭头图标表示子菜单；不可用的选项应显示为灰色（而不是移除）。
• 图标应与标签搭配使用，而非取代标签——仅图标的导航容易被忽略或误读。
• 让常用目的地触手可及（菲茨定律——按实际使用频率排列菜单项）。
• 长页面使用粘性页眉／菜单，避免导航时必须滚回顶部；同时保持精简，不要占用过多视口空间。

---

取决于具体情境的决策（呈现出来，不要自动套用）

决策	适用情境	避免／调整的情境	默认建议
顶部栏 vs. 垂直侧边栏	顶部栏：≤7 个稳定的版块，以内容为主的网站。侧边栏：类别众多或不断扩展的 B2B／企业／政府网站及应用——更便于扫读（注意力更倾向左侧），且移动端无需改变布局	侧边栏会占用小屏幕的横向空间——应规划断点	层级浅且结构稳定时使用顶部栏；信息架构广泛或不断扩展时使用左侧边栏
汉堡菜单	次要选项；移动端空间受限	隐藏主要版块；桌面端有足够空间展示选项	显示核心选项，其余内容放入汉堡菜单；Android 上放在左上角，其他平台则遵循各自平台的惯例
大型菜单	大型目录需要可扫读的二维分类面板	类别较少时（普通下拉菜单更简洁）；悬停触发不受控时	按中等粒度分组（参考卡片分类结果），标签简洁，不要遮住页面
选项卡	2–9 个并列的内容类别，标签简短，且处于同一层级	连续步骤（使用进度跟踪器）；选项卡超过 1 行（绝不要堆叠多行）	桌面端使用固定选项卡；移动端类别较多时使用可滚动选项卡
底部导航（移动端）	3–5 个需要单手触达的全局目的地	超过 5 个（会显得杂乱）；次要操作	移动端顶层应用导航的默认选择
面包屑	层级较深的网站（电子商务、文档、大型博客）；用户可能从网站中层进入	结构扁平的网站（1–2 层）——纯属干扰	深度 ≥3 时添加；移动端使用单个“上一级”链接
分页 vs. 无限滚动	用户需要重新查找条目、进行比较并了解进度时（目录、搜索结果、档案）——有限分页有助于决策和转化	纯休闲信息流	目标导向的浏览使用分页；仅在随意浏览内容时使用无限滚动
手势导航	配有引导提示、富有互动性的移动端模式（滑动操作）	作为某项功能的唯一使用方式（难以发现）	将手势作为可见控件之外的快捷操作
快速链接	在整个网站中突出显示常用或难以找到的内容	重复展示全局导航已提供的内容	精选少量链接，不要做成第二套菜单

---

组件规范（选择该模式时）

页眉 — 左上角放置 logo + 有意义的分区标签 + 最多一个主要 CTA（右上角）。不要堆得太满：菜单、logo、搜索、一个 CTA。高度紧凑；文字不小于 16px；点击目标不小于 44px；留出内边距，避免元素贴边；通过对比度或边框与内容区分。响应式设计：布局应能平滑折叠，次要项目收进汉堡菜单 — 核心项目不能折叠。

标签页 — 外观和行为保持统一；清楚突出选中的标签页，并在视觉上与其内容相连；未选中的标签页应清晰可见（不要看起来像已禁用）；添加悬停效果以体现交互性；仅使用一行；优先留白，而非垂直分隔线；内容切换方向应与标签页方向一致（亲子原则）；垂直内边距 ≥12px，触控目标为 44px；标签简洁（“订单”，而非“订单历史记录”）。

面包屑 — 展示层级，而非浏览历史；从首页开始；当前页面放在最后，使用不同样式且不可点击；其他每一项都必须是真实、可点击的页面；使用熟悉的分隔符（> / →）；放在页眉下方、页面顶部，并左对齐（RTL 布局时镜像对齐）；样式低调 — 它是次级导航（但对比度仍需 ≥4.5:1）；长路径使用溢出菜单截断（始终显示第一项和最后一项）；长标签应截断，并通过工具提示查看完整文本。

分页 — 清楚标记当前页；提供上一页/下一页以及首页/末页（« »）控件；显示页码计数（“第 3 页，共 10 页”）；对较长的页码列表进行智能截断（始终显示首页、末页和当前页）；数据量较大的列表可选提供手动输入页码和每页条数选择器；控件放在内容底部，点击区域应足够大，对比度为 4.5:1。

---

验证结果（编排）

交接时须使用各审查视角对应的可安装技能 name。仅当该技能已安装时才调用；如果未安装，本技能本身的核心内容已涵盖这些规则 — 无需因此阻塞，直接继续。

生成或修订后，应将结果交由审查视角审核，而不是直接宣布完成。这些审查视角均为候选项 — 审查方式由 docs/orchestration-policy.md 规定，也可以将整个任务交由 ux-design-review 处理。此处，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics、information-architecture 和 mobile-responsiveness 属于 B 级（可选） — 使用现有设计系统时，将不启用 aesthetics，且 accessibility 的审查范围将缩小为使用方式；mobile-responsiveness 仅适用于移动端。如果用户调用此技能只为处理某个具体事项，请遵循其指定范围。

• ux-heuristics-audit （A 级） — 系统状态的可见性（选中状态）、是否符合心智模型、是否一致、是否优先识别而非回忆。
• ux-accessibility-audit （B 级 — 可选；使用设计系统时缩小范围） — 菜单的键盘可操作性、触控目标、对比度、是否依赖悬停、导航中的焦点顺序。
• ux-aesthetics-audit （B 级 — 可选；使用设计系统时不启用） — 页眉/菜单的密度、间距节奏、界面装饰是否喧宾夺主。
• ux-microcopy-audit （A 级） — 分区/标签页/面包屑标签是否清晰简洁，标题是否具有描述性。
• ux-information-architecture-audit （B 级 — 可选） — 类别结构本身（分组、层级、标签）是否符合用户心智模型；本技能负责放置导航，信息架构审查负责结构。
• ux-mobile-responsiveness-audit （B 级 — 可选；仅适用于移动端） — 针对移动场景：底部导航、断点、单手可达性。

如果审查发现冲突（例如品牌方想要极简的纯图标侧边栏，但这会影响可查找性），应优先保障主要任务：用户必须始终清楚自己身处何处、这里有什么，以及如何前往目的地。

---

常见的应做与不应做模式

❌ 不要这样做	✅ 应该这样做
为了界面简洁，把所有内容都塞进汉堡菜单	让核心内容一目了然；汉堡菜单仅用于次要项目
凭审美偏好选择顶部栏还是侧边栏	根据信息架构的广度、扩展性和平台来决定
用面包屑记录用户的点击路径	让面包屑体现网站层级
只能通过悬停打开下拉菜单	点击即可打开；悬停作为增强功能，并设置 0.5s 意图延迟
只显示图标的导航项	图标搭配文字标签
两行标签页	保持一行；使用可滚动标签页或重新整理类别
完全没有选中状态	始终标记当前版块、标签页和页面
居中且无法点击的徽标	徽标置于左上角，可点击并跳转到主页
产品目录使用无限滚动	使用分页——用户需要重新找到并比较商品
用旗帜作为语言选择器	使用各语言自身的名称作为文字标签
未经检查就发布	交由启发式评估、无障碍检查、审美评估和微文案检查

---

课程来源（Uxcel）

• 导航系统的类型
• 常见的导航模式
• “你在这里”导航系统
• 实用导航
• 垂直导航的最佳实践
• 如何设计清晰易用的标签页导航
• 设计标签页导航的最佳实践
• 如何设计更易导航的面包屑
• 设计面包屑的最佳实践
• 何时以及如何在 UI 中使用页眉
• 设计页眉的最佳实践
• 分页设计指南
• 分页设计的最佳实践
• 移动端导航设计