Skip to main content

Notifications 消息

通知将相关的信息传达给用户,以响应用户操作或系统生成的消息。


设计目标

让用户明确知晓当前页面反馈的通知信息,做到合理有效的信息传达。

设计原则

易读性

使用清晰的语言表达,外观格式一致,突出有利于用户识别的关键信息。

明确性

让用户能感知紧急程度匹配的结果反馈或信息提醒,做到合理有效的信息传达。

消息类型

可以基于两个维度的组合按类型组织通知:

消息是系统生成的还是用户生成的,以及通知是被动查看还是可操作的。

这些消息类型会影响通知的突出程度。

系统生成或用户生成
  • 系统生成的通知是应用程序发送的独立于用户操作的消息。
  • 用户生成的通知直接响应用户的操作,是用户在处理页面上下文时提供的即时反馈。
被动或可操作
  • 被动通知向用户提供信息,但不要求用户采取行动。
  • 可操作的通知可能需要立即采取行动才能在流程中继续前进(例如错误通知),或向用户提供 "查看更多信息" 或 "执行其他操作的选项"(例如带有查看更多信息的链接)。

通知状态

状态图标相关颜色用法
成功@Green-600 #00B42A表示积极确认状态,例如成功完成的操作或任务。
错误@Red-600 #F53F3F表示需要立即注意。在采取行动解决问题之前阻止进展。
警告@Yellow-600 #FF7D00提示用户注意但不需要操作。警报消息可以帮助用户避免错误。
信息@Blue-600 #165DFF表示具有中性状态的一般信息消息。

通知行为

短暂的

短暂通知提供操作反馈的状态,会在短时间内自动关闭。不接收键盘操作,也不包含任何可操作的内容。

可关闭

可关闭通知右上角有一个 X 关闭按钮或者底部有确认取消按钮,允许用户关闭通知。

明确关闭

通知需要明确的关闭。

不可关闭

错误通知会一直存在,直到页面中的错误已解决。