跳到主要内容

导航
就绪

导航模式对于确保用户能够流畅地在应用中移动至关重要。在 Grafana 中，有两个关键组件在导航中起着至关重要的作用：巨型菜单（Megamenu）和面包屑（Breadcrumbs）。让我们深入探讨这些组件如何有助于有效的导航模式。

巨型菜单导航​

概述
Grafana 巨型菜单是整个 Grafana（包括核心、插件和其他应用）的主要导航组件。它有三种状态：打开、关闭和“停靠”打开。打开时，菜单会作为叠加层显示。停靠时，页面内容会响应收窄的视口。

何时使用
巨型菜单提供对 Grafana 信息架构的第 1、2 和 3 级内容的访问。超出这些级别的内容应由页面上的选项卡（第 4 级）或使用标题、步进器或其他设计元素的内联元素（第 5 级及以上）处理。

使用指南​

为了确保用户在 Grafana 中导航时获得一致且符合预期的体验，遵循以下注意事项非常重要。

要做

  • 为所有概述/类别页面使用着陆页。
  • 确保所有条目都有相应的页面或跳转位置，以实现一致的面包屑行为。
  • 务必在任何第 1 级内容旁边包含一个图标。
  • 确保所有巨型菜单条目使用句子大小写。
  • 考虑标准化整个 Grafana 中使用的标签，并在页面标题中使用名词而非动词。
  • 考虑在巨型菜单中放置的页面数量。
  • 小心页面标题长度，避免截断。
  • 努力在 Grafana 生态系统中保持一致性。

不要做

  • 在巨型菜单内部进行重定向以弥补缺少着陆页的情况。
  • 不要为非第 1 级的内容使用图标。
  • 不要将云应用放置在巨型菜单的第 1 级。
  • 使用标题大小写。
  • 包含外部链接。
  • 嵌套选项卡以指示第 5 级及以上内容。

Grafana 的顶部导航面包屑是整体导航体验的关键部分。它们是 2022-2023 年导航重新设计中最受欢迎的顶部部分，因此它们以一致和统一的方式运行对用户体验至关重要。

何时使用
面包屑由页面层级结构自动生成，因此在所有页面上使用。

使用指南：​

面包屑为用户提供了一个关键指示，说明他们在产品空间中的位置。让面包屑在整个产品中保持一致的行为，可以确保用户获得良好的体验，并且无论他们当前正在查看产品的哪个部分，都能理解自己的位置。以下指南将确保我们提供一致且符合预期的体验。

要做

  • 使用面包屑来反映信息架构层级。
  • 为任何反映为面包屑的内容使用单独的页面。
  • 确保所有面包屑条目使用句子大小写。
  • 努力在 Grafana 生态系统中保持一致性。
  • 小心页面标题长度，避免截断。

不要做

  • 不要覆盖面包屑行为使其反映历史记录。
  • 不要重定向面包屑以弥补缺少着陆页的情况。
  • 使用标题大小写。

返回上一页​

由于 Grafana 的技术和信息架构，用户经常会在一个区域处理某个项目，然后跟随链接查看其工作结果，最终到达另一个区域（例如创建告警规则的 SLO 配置或创建仪表盘的云应用）。此外，我们将云应用体验通过扩展更多地融入 Grafana 核心，就会更多地将用户从信息架构“树”的一个分支链接到另一个非常遥远的分支。

这会导致上下文切换，需要完全理解 Grafana 的信息架构才能真正理解。

由于面包屑是保留用于层级结构而非历史记录的，用户无法使用面包屑来“返回”。此外，浏览器的“后退”按钮仅间歇性地有用——而且许多用户已经被训练成在 Web 应用中忽略浏览器按钮。

“返回上一页”是一个帮助组件，用于在用户遇到这种情况时恢复先前的上下文。

何时使用： 当链接将用户发送到 Grafana 信息架构的遥远部分时，随时使用“返回上一页”。虽然该组件最初是为云应用设计的，但它在 Grafana 的核心产品中也很有用。

使用指南：​

使用“返回上一页”来帮助用户导航回他们来到的地方。

开发者专属文档可在开发者门户上找到。