系统主动推送给用户的消息。

适用：系统级的通知、推广类信息
不适用：

  • 用户操作的即时反馈，此时应该用 Toast
  • 限制用户操作流程的消息推送，此时应该用 Modal

通用原则

  • 不会对用户浏览和操作当前页面产生阻碍
  • Notice 内嵌在页面中，不遮挡页面内容，消失时伴随动效
  • 根据业务需要设定是否允许用户手动关闭
  • 同种类型的通知，可合并后展示；页面中可同时存在多个不同类型的通知
  • 通知中需要要明确的操作，引导用户解决问题
  • 文案应该清晰的描述现状，解释原因，并给出明确的操作指引
  • 描述文案应当采用易于用户阅读的结构化表达形式，避免长篇大论；允许在描述中使用文本链接

类型

类型 何时使用
常规 用于模块内或页面局部的消息通知
全局 用户页面级或系统级消息通知；运营或促销时

常规

image.png

全局

image.png

通知等级

包含「指南」、「成功」、「警示」、「失败」四种信息类型：

  • 指南（蓝）：用于传达加载、帮助、指南、辅助类信息
  • 成功（绿）：用于传达成功、积极的信息
  • 警示（黄）：用于传达提醒与警示信息
  • 失败（红）：用于传达错误、失败等严重信息

image.png

构成

image.png

  1. 图标
  2. 标题（可选）
  3. 描述
    1. 允许增加 Link
  4. 容器
    1. 根据业务需要，选择是否有关闭按钮

image.png

  1. 图标
  2. 描述
    1. 允许增加 Link
  3. 容器
    1. 根据业务需要，选择是否有关闭按钮

行为

出现

载入页面时出现或在用户触发操作后出现（情况区分与「反馈」，反馈更多的是即时的，非全局的）

主动消失

用户完成了提醒中描述的操作，使得该提醒的前置条件不再有效，那么该通知会主动消失。

被动消失

用户点击右侧关闭图标或相关行动点。