今天来聊一聊 产品设计 各环节中必不可少的元素【模态弹框】和【非模态弹框】
一、相关定义
模态弹窗:打断用户流程,用户可以通过完成任务或点击外部区域来关闭;
非模态弹窗:不打断流程,用户不回应也可以进行操作。
二、差异
模态弹框和非模态弹框最大的区别就是是否强制用户交互
三、模态弹窗&非模态弹窗的各种表现形式
(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
网友评论