弹窗

出自 MBA智库百科(https://wiki.mbalib.com/)

弹窗（Pop-up Notification）

　　弹窗又称为对话框，一般是指打开网页、软件、手机APP等的时候自动弹出的窗口。

　　弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：

　　容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；

　　蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；

　　文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；

　　图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；

　　表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；

　　选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；

　　图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；

　　按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。

　　1、普通弹出式：用户上线时分时段主动推送广告窗口（网页、flash、流媒体）。

　　2、定向性弹出式：用户访问特定的网址时弹出广告窗口。

　　弹窗可以按照是否强制打断用户操作来分成两种，模态弹窗和非模态弹窗（也可以叫做阻断式弹窗和非阻断式弹窗），两者的区别在于需不需要用户对其进行回应。

　　1 模态弹窗

　　模态弹窗：模态提供了一个专注聚焦的环境，用户只有完成或者关闭当前任务，才能进行其他任务。

　　模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。

　　特点：打断用户当前的操作流程，属于强势的干扰行为，故运用弹窗需要慎重考虑。

　　常用组件：dialog（对话框）/alert(警告框)、popover（浮出层）、action sheet（动作菜单）、activity views（活动视图）、modal bottom sheet（模态底部菜单）。

　　2 非模态弹窗

　　非模态弹窗：常用于轻量级的操作反馈和信息传递，不需要获取屏幕焦点，用户可以同时操作屏幕中的其他内容。

　　非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

　　特点：属于轻量级的反馈，不会对用户流程产生干扰，但同时又给了用户反馈和信息。

　　常用组件：Toast（吐司），snackbar，Hud（透明指示层）。

　　1、Toast 提示框

　　Toast提示框是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。

　　例如你发出了一条短信，App弹出一个Toast提示你消息已发出。

　　最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置，可设置成在页面顶部、中部或者在底部出现（但一般都是出现在页面的中轴线上），具体的显示位置根据页面的整体设计进行设置。该种Toast在安卓App上十分常见。

　　还有一种Toast弹窗由简单的图形和简短的文字组成，显示位置一般位于页面正中央。

　　2、Dialog 对话框

　　Dialog对话框是一种模态弹窗。当用户进行了敏感操作，或者当App内部发生了较为严重性的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前以Dialog对话框的弹窗形式告知用户且让用户进行功能选择。比如退出App、进行付费下载等功能操作。

　　一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。

　　3、Actionbar 功能框

　　Actionbar功能框可以看成是Dialog的一种延伸设计，两者都是模态弹窗，用户必须进行回应，否则弹窗不会消失，用户无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，Acionbar一般都设计有一个默认的“取消”功能按钮，点击该按钮后关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。

　　Actionbar一般被设计用来向用户展示多个功能按钮选择。

　　4、Snackbar 提示对话框

　　Snackbar提示对话框是安卓系统的特色弹窗之一（安卓平台在开发的时候可以直接调用Snackbar类生成该弹窗，iOS好像也可以进行定制化设计开发），它也是一种非模态弹窗，同时拥有Toast和Dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互（用户可以点击功能按钮进行回应）。