跳至主要内容

保存
就绪

在 Grafana 中进行保存是一个多层级模式,其变化取决于所需的阻力(见:设计原则:恰到好处的阻力)以及被保存项的重要性。

层级

为确保使用恰当的保存模式,我们在下方提供了每个模式的定义和用例

自动保存

这种模式在所有保存模式中对用户的阻力最小。用户无需明确告知系统保存,系统会在检测到更改后自动保存值,等待指定时间后触发请求。自动保存依赖于内嵌的 Toast 通知来告知用户保存成功。

实现

自动保存字段仅应在影响较小的区域实现。由于这是一种无阻力模式,因此仅在用户操作不会造成损害的区域启用它非常重要。更改团队或显示名称等操作非常适合此组件。由于 Grafana 目前没有“撤销”概念,自动保存仅用于用户可以轻松手动撤销的项目。

每个自动保存字段都必须附带内嵌验证和加载状态,以确保用户了解系统正在更新他们的调整。每个字段在保存前还会检查更改,以最大程度地减少保存次数。请注意,这是 Grafana 最新的保存模式,因此为某些输入类型添加加载和无效状态仍在进行中。

用法

应做

  • 当更改不敏感且无需增加阻力时,使用自动保存。
  • 当用户期望对其所做的更改获得即时响应时,使用自动保存。
  • 确保出现内嵌 Toast 通知以确认保存已完成。

不应做

  • 在同时使用其他保存模式的页面上使用自动保存
  • 对会影响其他用户的操作(组织默认语言、仪表盘更改)使用自动保存

内嵌保存

内嵌保存模式在表单内部使用,为用户提供一个按钮来触发系统保存和更新已编辑或更新的各种用户输入。

实现

内嵌保存应在需要对对象执行显式保存操作的区域使用。特别地,当实体按行显示且用户正在编辑一行或多行时,此模式非常有用。

用法

应做

  • 在字段更改后启用保存按钮。
  • 始终显示保存操作,即使它处于禁用状态。
  • 当用户离开未保存的更改时,显示未保存更改警告。
  • 显示 Toast 消息以指示保存成功。

不应做

  • 在没有未保存更改时也启用保存按钮。
  • 通过额外的点击或直到发生更改才隐藏保存按钮。
  • 显示额外的、不作用于整个页面的、不必要的保存按钮。

应用并保存

“应用”允许用户测试所做更改的结果,但不保存该值,这使用户能够预览其更改/更新。当用户想在不保存的情况下导航到另一个页面时,应显示未保存警告。

“保存”永久更改值。保存成功或失败应通过 Toast 消息显示给用户。

如果用户在使用“应用”后但在尚未使用“保存”的情况下导航离开,则应使用未保存更改警告。

实现

“应用并保存”应在用户可能希望在实际提交更改之前预览更改的区域使用。此模式应用于中等到中高影响的区域。在 Grafana 中,此模式最常用于仪表盘编辑。为了对用户有帮助,当某项已应用但尚未保存时,应有明确的指示,以区别于已保存的内容。

应做

  • 当用户已应用但尚未保存时,显示未保存更改警告。
  • 显示 Toast 消息以指示保存成功。
  • 允许某种方式取消更改,以便用户在保存之前撤销其已应用的更改。
  • 理想情况下,除非发生更改,否则禁用“应用”按钮;除非发生更改,否则也禁用“保存”按钮。

不应做

  • 用户点击“应用”时保存。

页面保存

页面保存最常见于表单中,通常由一个主要保存按钮指示,点击该按钮将保存表单的所有内容。当用户想在不保存的情况下导航到另一个页面时,应显示未保存警告。

“保存”永久更改值。保存成功或失败应通过 Toast 消息显示给用户。如果用户在使用“应用”后但在尚未使用“保存”的情况下导航离开,则应使用未保存更改警告。

实现

页面保存应在中等影响的区域使用。页面保存最常见于表单中,通常由一个主要保存按钮指示,点击该按钮将保存表单的所有内容。此模式用于保存整个页面,而不是页面的一部分。如果您只想保存页面的一部分,请考虑使用内嵌保存代替。

应做

  • 页面上的内容发生更改后启用保存按钮。
  • 始终显示保存操作,即使它处于禁用状态。
  • 当用户离开未保存的更改时,显示未保存更改警告。
  • 显示 Toast 消息以指示保存成功。

不应做

  • 在没有未保存更改时也启用保存按钮。
  • 通过额外的点击或直到发生更改才隐藏保存按钮。
  • 每页显示多个保存按钮。

对话框保存

这是阻力最大的模式,它需要用户全部的注意力,以确保他们完全了解自己正在提交的更改。所做的更改会产生连锁效应,这使得用户有必要确认并接受更新所带来的后果。

实现

对话框保存通常通过这两种方式触发

  1. 未保存更改警告:当用户离开未保存的工作时,显示未保存更改警告对话框,以便用户在继续之前选择保存或放弃其更改。
  2. 高影响更改:当用户保存关键更改时,显示一个确认模态框,描述其更改的影响,并允许他们保存或放弃其更改。

出现的问题(可能会变成应做/不应做部分):通常从未保存警告触发 - 但警告并非总是在预期时出现

应做

  • 当任何导航操作会导致用户丢失更改时,显示未保存更改警告。
  • 清晰描述高影响更改的规模或范围。例如:“此更改将影响 75 个用户。您确定要保存吗?”

不应做

  • 不要想当然地认为用户在导航离开时总是想保存。选择权在用户,不在我们。

未保存更改

如果用户试图离开有未保存更改的页面,必须使用告警或模态框警告他们,除非保存,否则更改将丢失。此模式是由用户的间接操作引起的,例如用户关闭标签页、使用浏览器后退按钮或点击其他导航元素。详情请参阅对话框保存。

重定向

创建用户、团队或报告、SLO 等更大实体等新内容时,应在创建流程结束时将用户重定向到他们刚刚创建的内容。确保在特定页面上的重定向操作保持一致。

这里的例外是面板编辑器;保存更改后,应重定向到仪表盘,以便用户在整个仪表盘的上下文中查看其更改。请注意,面板编辑器的行为仍在开发中,因此目前不应重复使用此模式。