Version:

Error Messages in Inline Notifications

内嵌通知是仅限于界面内特定区域的非中断消息。内联通知用于向用户显示即时反馈。它们经常用作 toast 的替代方法,与日志表结合使用,以及在组件卡中。

Inline Toast Messages

规格

在创建内嵌通知时,请查看以下规范:

  • 持续显示内嵌通知,直到用户将其关闭或问题得到解决。

  • 编写清晰简洁的信息。建议使用一行。

  • 启动内联通知以响应用户在工作流中的操作,或由系统响应。

  • 包含与消息相关的可选行动号召按钮。

  • 仅在具有多个操作目的的屏幕上显示内嵌通知。例如,它们可以出现在非模态对话框中,但不能出现在模态对话框中。

  • 不要使用内嵌通知消息代替日志文件。

UI 尺寸

属性规格
Icon Size24 x 24px
Padding10px
FillSpecific color opacity: 10%
BorderSpecific Color
FontOpen Sans
Weight400
Size12px
Line Height20px

Inline Toast - Markup

最佳实践

  • 将内嵌通知放在内容顶部,以免它们覆盖任何内容。

  • 不要堆叠多个内嵌通知。相反,应按顺序按优先级顺序一次显示一个,而不会阻止任何用户操作。

  • 消息必须具有描述性,并指导用户明确的后续步骤。

  • 使用内嵌通知将用户的焦点从当前界面重定向到消息上。

  • 消息可以包含指向系统外部的帮助程序链接,而不是指向应用程序的其他部分。

Inline Error with CTA

多行消息

建议将内嵌通知消息放在一行中。但是,如果它们适合多行,请确保满足以下条件:

  • 使用项目符号列表来显示问题列表。列表有助于将用户注意重要信息。
  • 在非模式对话框中,指导用户执行后续步骤以及如何解决问题。

Inline Toast - Multi-line

组件卡片中的内联通知

组件卡中的内联通知显示以指示错误/失败或警告状态。内嵌消息会告知用户如何恢复或解决问题。

Inline Error in Component Cards

规格

  • 在问题得到解决之前,在组件卡中持续显示内嵌通知。

  • 避免水平或垂直堆叠多个内联消息。相反,在用户解决每个问题时一个接一个地显示这些消息。

  • 编写清晰简洁的信息。建议最多使用两行。

  • 使用标准图标列表中的错误/失败或警告图标,具体取决于以下使用案例。请参阅 标准图标.

    Inline Error in Component Cards

  • 仅在必要时添加行动号召按钮。

  • 在组件卡的内容上方显示内嵌通知。

  • 组件卡的标题具有灰色的警告图案背景,并显示图标。这指示组件卡的状态,即使它已折叠。

UI 尺寸

属性规格
Icon size24 x 24px
Padding8px
FillWarning color opacity: 10%
BorderWarning color code
FontOpen Sans
Weight400 or 600
Size12px
Line weight16px

Inline Messages in Component Cards - Markup