电商资讯

【设计规范】Web 端的警示弹框设计

日期: 2018-07-27 08:57 访问量: 类型:

在产品设计中,警示是指动作触发前后起警告作用的信息,它是产品设计中非常重要的组成部分。我们所讨论的主要是指 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 端警示类弹窗的总结和分析,欢迎大家斧正。

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴