响应用户的操作，提供操作结果反馈。

适用：响应用户的操作，提供操作结果反馈
不适用：用户操作之前的重要信息提醒

通用原则

  • 因为是用户操作结果的告知，所以通常而言无需用户进一步操作
  • 被动出现，但也会自动消失，不会阻碍用户的任何操作流程。
  • 出现在屏幕的右上角，层级最高（不受其他内容的遮挡）。

构成

image.png

  1. 图标+标题：Icon配合「状态指示条」，在视觉上快速告知用户当前反馈的类型：成功或者失败。标题则传递核心信息，直接告诉用户结果。
  2. 描述（可选）：对标题信息的详细描述。
  3. 操作（可选）：针对当前反馈的非直接相关操作。
  4. 容器
    1. 状态指示条
    2. 关闭Icon

类型

类型 何时使用
告知（蓝） 对于用户操作的结果既无积极，也无消息影响的事实的告知。比如帮助、指南、辅助类信息等。
成功（绿） 当用户操作成果的时候，用以传达成功、积极的信息。
警示（黄） 当用户操作的结果有风险的时候，用以传达提醒与警示信息。此时用户当前的操作流程通常没有结束，所以建议不要有操作。
失败（红） 当用户操作失败的时候，用以传达错误、失败等严重信息。此时用户当前的操作流程通常没有结束，所以建议不要有操作。

行为

出现

在用户具体的操作之后触发，在页面右上角自动出现。

主动消失

可根据业务场景定义消失间隔，带描述信息的时候，默认为 4.5 秒；无描述信息的适合可适当缩短为 3 秒。

冻结

在主动消失的基础上，当用户鼠标 hover 该组件时，则停止消失计数，移出后再继续。

被动消失

用户可主动关闭。