在产品设计中，警示是指动作触发前后起警告作用的信息，它是产品设计中非常重要的组成部分。我们所讨论的主要是指 Web 端弹框类的警示。本文将从警示弹框的使用原因、分类和使用场景来梳理警示类弹框设计。

使用警示的原因

公路上道路施工时，常常会使用路障和警示牌，表示前方不可通行或者警示车辆慢行。产品中的警示与公路上的警示牌作用类似，是表示警示产品功能不可用的状态，或警告用户慎重操作，或者告之用户操作后的结果。

使用警示可以帮助用户：了解当前产品的状态，减少错误操作，消除用户的担忧，引导用户操作。

警示弹框的分类和使用场景

警示弹框分为页面警示与操作前后的反馈警示：其中页面警示又分为功能状态的警示与辅助性的文字介绍；而操作前后的警示弹框分为操作前的确认警示与操作后的结果反馈。

1. 功能状态的警示

涉及组件：Alert

使用场景：对页面功能有一定的逻辑性判断。

七牛云个人中心页面的两种提示均属于功能状态的提示。提示的存在与否需要经过一层逻辑性判断：用户是否已经实名认证。其中功能状态警示1是可以关闭的 alert 提示，用于全局；功能状态警示2是在页面中的警示。两种警示都给出了实名认证的入口，目的在于警示用户进行实名操作，用户在进行实名操作后，警示消失。

图片来源：七牛云

2. 辅助性的文字介绍

涉及组件：Alert，Popover

使用场景：对页面内容的辅助性文字介绍，或功能引导。

Slack 帮助中心使用了不少 Alerts （警告、提示、注意的文字介绍），丰富了页面的层级和展示。Zoom 安排会议页面也使用了 Alert 提示会议持续时间，引导用户根据自身需求选择使用基本计划时间，还是升级 pro 可以支持无限制时间的会议。

图片来源：Slack

图片来源：Zoom

       作为辅助性提示的 Popover 常用于新用户或新功能引导。如百度云对新上线功能 SSH 密钥对的辅助性提示就使用了 Popover。

图片来源：百度云

3. 操作前的确认警示

涉及组件：Dialog，Popover

使用场景：对操作行为的反馈。

其中 Dialog 属于重量级反馈，用于犯错成本较高的重要场景，提示用户防止用户错误操作。确认操作后，可能会有 Message 反馈提示操作成功与否，告知用户结果。

例如，在百度云盘删除文件时，先出现“确认删除” Dialog，告之用户确认删除的后果，成功删除后，页面出现“删除成功” Message 提示。

图片来源：百度云盘

Popover 确认弹框属于中量级反馈，较之 Dialog 反馈层级稍轻。例如，在 Trello 中，已经删除的 Task 在彻底删除时，会出现 Popover 提示，告之删除后果。这里的 Popover 本身出现在 Dialog 弹窗上，避免了双重的 Dialog 。

图片来源：trello

4. 操作后的结果反馈

涉及组件：Snackbar，Alert

使用场景：属于对操作结果的反馈。发生于操作完成后，告之用户结果并可以撤销操作，或者只告之结果。这种警示方式并未打断用户的操作流程，反馈严重层级比操作前的警示要低，直接告之用户操作结果但又为用户保留了反悔的余地。

Figma 删除文件后，出现 Snackbar  ，告之用户文件已经删除，可以撤销。同样的情况也发生在Google Drive。用户删除 Gmail 中邮件时，会出现 Alert 提示。这里的 Alert 与 Snackbar 作用相似，它们的区别在于存在时长、出现位置、操作。Snackbar 出现的时间短暂，会自动消失用户也可主动关闭，往往出现在窗口底部，有撤销操作。这里的 alert 出现的时间更长，用户不可以主动关闭，会自动消失；出现在页面顶部，有撤销与了解详情两个操作。两者均为非模态框，不打断用户流程。

图片来源：Figma

图片来源：Google Drive

图片来源：Gmail

总结

1. 使用警示可以帮助用户：了解当前产品的状态，减少误操作，消除用户的担忧，引导用户操作。

2. 警示弹框分为页面警示与操作前后的反馈警示：其中页面警示又分为功能状态的警示与辅助性的文字介绍；而操作前后的警示弹框分为操作前的确认警示与操作后的结果反馈。

3. 功能状态的警示对页面功能有一定的逻辑判断。

4. 用 Alert 对页面进行辅助性文字介绍可以丰富页面的视觉层次，而 Popover 常用于用户引导。

5. 操作前的警示弹框是对操作行为的反馈，反馈层级 dialog 高于 popover

6. 操作后的警示弹框是对操作结果的反馈，反馈层级低于操作前的警示弹框。

以上是我对 web 端警示类弹窗的总结和分析，欢迎大家斧正。