产品设计-弹窗总结

image.png

今天来聊一聊 产品设计 各环节中必不可少的元素【模态弹框】和【非模态弹框】

一、相关定义

模态弹窗：打断用户流程，用户可以通过完成任务或点击外部区域来关闭；

非模态弹窗：不打断流程，用户不回应也可以进行操作。

二、差异

模态弹框和非模态弹框最大的区别就是是否强制用户交互

三、模态弹窗&非模态弹窗的各种表现形式

(Alert、Modal/Dialog、Popup、Popover/Tooltip/Hovercard、Toast、Snackbar)

image.png

模态弹窗形式

Alert(警告框):

会阻断用户当前操作的流程，一般用于需要立即关注处理的警示信息（警示信息要言简意赅）, 警示的窗体通常是前置在当前用户界面，使得用户不能忽视之而必须立即做出响应, 通过提示来选择「确定」或者「取消」。Alert 一般不允许通过弹窗外的操作来关闭，但现在很多 Alert 是通过 Modals 的形式展现的。

Modal/Dialog

一般用于通过点击或其它动作后产生的二次操作，操作的窗体就是Modal 或 Dialog。一般适用于用户进行判断操作。Modal 或 Dialog 主要用于那些不必时时刻刻显示在主界面上，在一定情况下才展示的信息（包括操作本身），通常伴有遮罩层且用户点击空白处（或者关闭按钮——如果有的话）即可消失。

image.png

image.png

image.png

Popup

一般用于展示一些不需要立即处理的信息。但Popup 一般不会自动消失，需要手动关闭，手动关闭的行为表示你已经看到并知晓信息了（跟“勾选表示我已经阅读”的意思差不多）。

Popover/Tooltip/Hovercard

用于对于页面上某个元素展示额外的信息。常常用来添加额外的说明或提示，或者在用户进行某些动作予以预告形式的提醒（比如“点击这个链接会发生什么”的情景）。

image.png

非模态弹窗形式

Toast

一般是进行某些操作后会出现的提示，有时间限制，如果不管它就会在一定时间后消失（一般是几秒钟）。它们大多时候只是展示信息，但在有些地方，例如 iOS 版 Outlook APP，将「归档」和「删除」后的「撤销」操作放在了 Toast 中。

image.png

image.png

Snackbar(Android独有)

当你删除某张照片时，可以在屏幕底部出现Snackbar(仅Android)，提示“照片成功删除”，并附带撤销操作，当用户点击撤销时，照片可恢复。用户不进行操作Snackbar则消失，照片删除成功。
虽然snackbar属于非模态弹框，但是它也有模态弹框的一些特点。例如snackbar也有按钮来供用户交互；此外snackbar一般会出现在界面下方，这点又和动作栏中的Action sheet很像

image.png