跳转到使用指南
Navigation Patterns作者 Owl-Listener

Navigation Patterns Skill.

将信息层级转化为易于识别的导航控件,以及通往各个目的地的清晰路径。

  • 交互设计
  • 导航
来源审查 · Navigation PatternsSKILL.md
任务 交互设计 产出 • 推荐的导航模式及基于任务的理由。 • 全局、局部、实用和情境导航的分配方案。 • 激活、悬停、焦点、禁用和通知角标状态的要求。 开始之前 需要信息层级和任务优先级;不提供导航组件包。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

选择用户在产品中的移动方式

一份导航选择指南,涵盖全局与局部模式、方向提示、平台惯例和状态设计。

基于来源的工作流程并非执行基准测试

工作方法

Navigation Patterns 用于选择能够呈现产品结构的界面:移动端标签页、桌面端侧边栏、顶部导航、面包屑、情境链接或抽屉式导航。它将全局、局部和实用导航明确区分开来,避免不同层级的目的地在同一控件中相互竞争。

来源对方向感和移动同样重视。用户需要知道当前位置、预判标签会通往何处,并找到返回路径。激活状态不能仅依靠颜色来识别,所选模式也应符合平台特性和使用频率,而不是只为了节省屏幕空间。

预期交付物

  • 推荐的导航模式及基于任务的理由。
  • 全局、局部、实用和情境导航的分配方案。
  • 激活、悬停、焦点、禁用和通知角标状态的要求。
查看示例简述

从简述到审查

  1. 01
    理解结构

    从现有信息架构中识别主要目的地、嵌套区段和偶尔使用的实用功能。

  2. 02
    让模式与情境匹配

    选择控件前,应考虑平台、目的地数量、层级深度以及移动端的可触达性。

  3. 03
    检查方向指引

    明确当前位置提示,并与具有代表性的用户一起测试标签和跨区段任务。

02 适用场景

适用场景

需要信息层级和任务优先级;不提供导航组件包。

适合的情况

  • 在标签页与抽屉式导航之间进行选择当不同导航选项在可见性和可触达性方面存在不同取舍时,这项技能很有用。
  • 层级较深的产品结构有助于结合面包屑和局部导航,同时避免混淆层级。

需要检查的限制

  • 不能替代信息架构如果类别和标签不清晰,可能需要先重构,之后任何控件才能良好运作。
  • 不会自动证明可用性模式建议需要通过首次点击测试或基于任务的测试来验证。

请提供这些输入

  • 目的地层级提供既定区段及其父子关系。
  • 使用优先级明确高频任务、跨区段移动和实用功能目的地。
  • 平台说明桌面端和移动端的限制、惯例及无障碍要求。

03 关键决策

关键决策

  1. 可见性有其代价

    隐藏导航可能会简化布局,但也会让重要目的地更难被发现。

  2. 不只依靠颜色表达状态

    字重、下划线或指示器可以在不单独依赖色相的情况下,让当前位置可被感知。

04 示例任务

尝试一份聚焦的简述

以下示例简述尚未经过测试。使用前请检查该技能的配置说明。

检查配置

使用仓库中记录的安装方式,并保留其中引用的所有配套文件。此条目介绍的是一种聚焦的设计方法,而非可执行应用程序。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

需要信息层级和任务优先级;不提供导航组件包。

从一项交付物开始

运行该技能前,请调整这份简述的范围、来源材料和约束条件。

示例简述
使用 navigation-patterns 为一款具有六个主要区段、嵌套报表文件夹且支持移动端访问的桌面分析应用设计导航。比较侧边栏与顶部导航,分离实用功能,并明确面包屑以及激活/焦点状态。说明实施前必须解决哪些信息架构问题。

检查结果

根据以下可观察标准检查实际输出。

  • 全局层级和局部层级没有被意外混用。
  • 当前目的地通过颜色以外的方式加以指示。
  • 跨区段任务具有易于发现的前往路径和返回路径。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不意味着该技能已内置,也不意味着其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页介绍下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
Owl-Listener
许可证
MIT
已审查的快照
2026-10-07 · 9a6930cf84a8
编辑来源摘要
一份导航选择指南,涵盖全局与局部模式、方向提示、平台惯例和状态设计。

由 OpenDesign 根据链接来源撰写的原创摘要。仓库星标数是带日期的受欢迎程度信号,并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

移动端导航是否始终都应使用抽屉式导航?

不是。对于数量较少的主要目的地,来源倾向于使用可见标签页,并将抽屉式导航视为需要在可发现性方面作出取舍的方案。

面包屑何时有用?

在层级较深的内容结构中,面包屑有助于说明当前位置及其上级路径,并且经常与局部导航搭配使用。

它能修正用户不熟悉的区段名称吗?

它可以标记这些名称并建议开展标签测试,但底层类别可能需要进行信息架构方面的工作。

OpenDesign

为下一轮设计迭代留出空间。

将简述、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程之前,请先检查其自身的配置说明。

上游源文件
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md