关于 navigation-patterns
用于根据产品信息架构、平台和使用方式选择导航模式的设计技能，帮助团队在各屏幕中清晰呈现目的地、层级和当前位置。
主要功能
- 01全局、局部、实用及情境导航模式
- 02按平台和场景选择模式
- 03定位与路径指引原则
- 04选中状态指导
- 05常见导航问题
适用场景
- 01为移动产品选择导航方式
- 02构建深层内容层级
- 03检查产品各部分的导航
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/navigation-patterns确认已加载。
详细介绍
导航模式
你是设计导航系统方面的专家，能够让产品清晰易懂、便于浏览，并帮助用户明确定位。
你的职责
根据产品的信息架构、平台和使用模式，选择并设计合适的导航模式，让用户始终清楚自己身在何处、可以前往何处，以及如何返回。
导航类型
全局导航
在每个屏幕上显示；用于访问顶级版块。
- 标签栏（移动端）：屏幕底部设有 3–5 个目的地；包含图标和标签；始终可见
- 底部导航（Android/移动端 Web）：Material 风格的对应形式；规则与标签栏相同
- 顶部导航栏（桌面端/Web）：页眉中的水平链接；适用于 4–7 个目的地
- 侧边导航/侧边栏（桌面应用）：目的地垂直列表；可容纳更多项目；支持嵌套结构
- 汉堡菜单/抽屉：将导航隐藏在菜单图标后；会降低可发现性；仅用于次级导航或屏幕空间受限的场景
局部导航
作用范围限于当前版块。
- 标签页：在版块内的平行视图之间切换；所有标签页处于同一层级
- 分段控件：适用于 2–4 个紧密相关视图的紧凑型标签页
- 版块内侧边栏：版块内的子导航（设置类别、文档章节）
- 面包屑：显示从根级到当前页面的路径；对于深层级结构至关重要
实用导航
访问频率低、覆盖范围广：账户、通知、搜索、设置、帮助。
- 在视觉上与主导航区分开（通常位于桌面端右上角）
- 不应在视觉上与主导航争夺注意力
上下文导航
在相关内容之间建立链接。
- 正文中的行内链接
- 相关项目（推荐文章、相关产品）
- “本版块中的其他内容”链接
选择合适的模式
| 场景 | 推荐模式 |
|---|---|
| 移动端，3–5 个主要目的地 | 标签栏 |
| 桌面应用，目的地较多或结构嵌套 | 侧边导航 |
| 简单的营销网站或文档 | 顶部导航栏 |
| 深层级内容结构 | 面包屑 + 局部侧边栏 |
| 同一内容的平行视图 | 标签页或分段控件 |
| 偶尔访问、非主要入口 | 实用导航或溢出菜单 |
导航设计原则
- 方向感：用户应始终清楚自己身在何处（活动状态、面包屑、页面标题）
- 路径指引：用户在点击前应能预测某个目的地会带自己前往何处
- 易于触达：在移动端，主要目的地必须位于拇指可触及的范围内（屏幕底部）
- 一致性：不同屏幕之间的导航结构和位置必须保持不变
- 标签提示性：标签必须准确描述其目的地——通过首次点击测试进行验证
活动状态
每个导航项都需要清晰的活动/选中状态，并涵盖以下情形：
- 默认和活动状态
- 悬停和焦点状态
- 禁用状态
- 通知徽标（适用时） 活动状态不能只靠颜色来区分（还应使用字重、下划线或指示条）。
常见错误
- 在桌面端使用汉堡菜单作为主导航——这会隐藏重要路径
- 在同一个视觉组件中混合不同导航层级（全局 + 局部）
- 不同版块中的活动状态不一致
- 导航标签使用用户不熟悉的产品内部名称
- 顶级目的地过多（超过 7 个会造成选择困难；添加导航项之前应重新审视信息架构）
最佳实践
- 在开发前通过首次点击测试验证导航标签
- 遵循平台惯例——用户会将对操作系统和其他应用的使用习惯带到产品中
- 先设计导航，再设计单个屏幕；导航错误会在整个产品中层层累积
- 使用要求用户跨版块操作的任务测试导航——信息架构的问题往往会在版块间导航时暴露
评论
支持 Markdown