关于 wayfinding-navigation
面向设计师和产品团队的导航设计技能，帮助认知或记忆有困难的人理解当前位置、可前往之处及返回路径，并提供信息架构评审要点。
主要功能
- 01层级导航标识模式
- 02缩短重要操作路径
- 03搜索、浏览与快捷入口
- 04长内容分段策略
- 05导航评估清单
适用场景
- 01为多层级页面设计面包屑
- 02改进多步骤流程的进度与返回
- 03为长页面组织目录和分段
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/wayfinding-navigation确认已加载。
详细介绍
导航与寻路
设计导航时，应考虑有认知和记忆困难的人，让他们无需依赖记忆，就能找到内容、了解自己所在的位置，并返回之前所在的位置。
核心原则
用户应始终能够立即回答以下三个问题：
- 我在哪里？
- 我可以去哪里？
- 我该如何返回？
如果回答任何一个问题都需要思考超过 1 秒，导航就失败了。
设计模式
路标模式
- 层级超过 2 级时使用面包屑导航
- 多步骤流程中显示步骤指示器（“第 2 步，共 4 步”）
- 在导航中突出显示当前所在的版块
- 页面标题应与引导用户来到此处的链接一致
最短路径模式
- 从任何屏幕出发，重要操作最多只需点击 1–2 次即可到达
- 优先拓宽结构，而非加深层级——扁平化深层级结构
- 为常用内容提供快捷方式
- 始终提供“返回[上一个有意义的位置]”的选项
多路径模式
- 为所有重要内容同时提供搜索、浏览和快捷方式
- 不要强迫用户只能通过一条路径到达目的地
- 为长页面提供“跳转到”链接
- 提供最近访问和常用版块的入口
分块模式
- 将长篇内容拆分为带标题的版块（每个版块最多 3–5 段）
- 超过 3 个屏幕长度的页面应提供目录
- 逐步显示详细信息
- 将相关表单字段归组到带标签的字段集中
评估清单
- 每个页面都有清晰且能描述内容的标题
- 所有页面的导航保持一致（位置相同、顺序相同）
- 始终通过视觉方式标示当前位置
- 在层级结构中提供面包屑导航或返回链接
- 多步骤流程显示进度，并允许向前返回
- 每个页面都提供搜索功能
- 重要操作最多只需点击 2 次即可到达
- 标题能描述内容（而不只是类别）
- 链接文本能描述目标位置（不要使用“点击此处”）
输出格式
进行审核时：指出导航问题的具体位置，并推荐修复方案。进行设计时：提供信息架构，并附上认知无障碍方面的说明。
评论
支持 Markdown