SuperAPI AI 工具集

navigation-patterns

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

Navigation Patterns 是一套关于产品导航系统设计的技能指南,目标是让产品可读、可遍历、可定向。它帮助设计者根据产品的信息架构、平台和使用模式,选择并设计合适的导航模式,使用户始终知道自己在哪、能去哪、如何返回。

用途

该技能用于选择和设计导航模式,使其匹配产品结构与用户任务。它强调导航设计应先于单个屏幕设计,因为导航错误会在整个产品中累积放大。

导航类型

全局导航

出现在每个屏幕上,提供对顶层区块的访问:

  • 标签栏(移动端):屏幕底部 3–5 个目的地,图标加标签,始终可见。
  • 底部导航(Android/移动网页):Material 等价形式,规则与标签栏相同。
  • 顶部导航栏(桌面/网页):页眉中的水平链接,适合 4–7 个目的地。
  • 侧边导航/侧边栏(桌面应用):垂直目的地列表,可扩展更多条目,支持嵌套结构。
  • 汉堡菜单/抽屉:将导航隐藏在菜单图标后,降低可发现性,仅用于次要导航或屏幕受限场景。

局部导航

限定在当前区块内:

  • 标签页:在同一区块的平行视图间切换,所有标签页处于同一层级。
  • 分段控件:紧凑的标签页变体,用于 2–4 个紧密相关的视图。
  • 区块内侧边栏:区块内的子导航(设置分类、文档章节)。
  • 面包屑:显示从根到当前页面的路径,在深层层级中必不可少。

工具导航

高频触达、低频使用:账户、通知、搜索、设置、帮助。视觉上与主导航分离(桌面端通常位于右上角),不应与主导航争夺视觉注意力。

上下文导航

相关内容之间的链接:正文内链、相关内容(推荐文章、相关产品)、“同区块还有”链接。

如何选择模式

  • 移动端,3–5 个主要目的地:标签栏。
  • 桌面应用,多目的地或嵌套结构:侧边导航。
  • 简单营销站或文档:顶部导航栏。
  • 深层内容层级:面包屑加局部侧边栏。
  • 同一内容的平行视图:标签页或分段控件。
  • 偶尔、非主要的访问:工具导航或溢出菜单。

导航设计原则

  • 定向:用户应始终知道自己在哪(激活状态、面包屑、页面标题)。
  • 寻路:用户应能在点击前预测目的地会带他们去哪里。
  • 可达性:移动端主要目的地必须处于拇指可及范围(屏幕底部)。
  • 一致性:导航结构与位置在不同屏幕间不得改变。
  • 气味:标签必须准确描述其目的地,用首次点击测试验证。

激活状态

每个导航项都需要清晰的激活/选中状态,并覆盖:默认与激活、悬停与聚焦、禁用、通知徽章(适用时)。激活状态必须能通过颜色以外的特征区分(字重、下划线、指示条)。

常见错误

  • 桌面端用汉堡菜单做主导航,隐藏关键路径。
  • 在同一视觉组件中混用导航层级(全局加局部)。
  • 不同区块的激活状态不一致。
  • 导航标签使用用户不认识的内部产品名。
  • 顶层目的地过多(超过 7 个会造成选择瘫痪;应先重新审视信息架构再添加导航项)。

最佳实践

  • 构建前用首次点击测试验证导航标签。
  • 遵循平台惯例,用户会带着来自操作系统和其他应用的预期。
  • 先设计导航,再设计单个屏幕;导航错误会在整个产品中累积。
  • 用需要用户跨区块的任务测试导航,跨区块导航是信息架构问题暴露的地方。

限制

资料未提供该技能的具体安装方式、运行环境、收费模式、价格、平台支持或效果数据,这些信息暂未提供。