在日常使用 APP 的过程中，经常会看到各种各样的弹窗，比如对话框、警告框、浮出层、Toast 等等，在不同的场景中我们该如何使用弹窗呢？为了能让自己对弹窗有一个更加清晰的认知，我收集整理了一些弹窗的常见样式及使用场景。
目录
1.什么是弹窗
2.模态弹窗
3.非模态弹窗
4.总结
什么是弹窗
弹窗，顾名思义，指的就是弹出的窗口。它的主要作用有信息传递和用户反馈。
在交互形式上，弹窗可以分为模态弹窗、非模态弹窗两种（也可以叫做阻断式弹窗、非阻断式弹窗）。
模态弹窗
模态弹窗会打断用户正在进行的操作，用户必须对弹窗进行反馈，才能进行下一步的操作，对用户的干扰比较强，所以需要慎重使用。
常见的种类有：对话框、浮层、动作菜单。
1.对话框
常见的对话框样式有3种：信息提示、信息确认、内容提交。
1.1.信息提示
信息提示弹窗通常是单向地通知用户一些内容信息，或告知用户当前发生的状况。
使用场景：通常使用在不需要用户进行选择，只需要用户被动单向接收信息的场景中。如下图：
图中的新手引导页面以及知乎反馈问题时字数太少的提示，都属于信息提示弹窗，它们都只单向告知用户信息，不需要用户进行选择。
1.2.信息确认
信息确认弹窗通常需要用户在“是”或“否”之间做选择，然后根据用户的反馈，进行下一步操作，不同的反馈会产生不同的结果。但有时候我们的选项不止“是”或“否”，我们需要在两个以上的选项中进行选择。
使用场景：通常使用于需要强迫用户在几个选项中做出选择的场景中。如下图：
以微信读书和得到为例，微信读书的通知弹窗和得到的协议条款弹窗都属于信息确认，用户必须在给出的选项中进行选择，才能进行下一步操作。
1.3.内容提交
用户需要按照弹窗中的提示完成任务或输入内容才能进行下一步操作，或点击关闭按钮关闭弹窗。
使用场景：通常使用于需要用户根据弹窗提示完成内容输入的场景中。如下图：
上图中的短信验证以及花瓣的添加画板页面就属于内容提交弹窗，用户按照提示完成任务，再进行下一步操作。
2.浮层
浮层弹窗通常是把页面中不能展示的更多功能收纳入一个按钮之中，用户点击这个按钮这些功能就会弹出来，然后用户再根据需求进行下一步操作，或者点击空白的地方或遮罩层取消弹窗。它可以适应各种复杂的操作和任务。
使用场景：通常使用于需要将更多功能收纳起来的场景中。如下图：
以自如和飞猪为例，它们都使用了浮层弹窗，把更多的功能收纳起来。
3.动作菜单
这种弹窗通常用来呈现和当前功能或内容有关联的补充选项，或提示用户是否执行具有破坏性的操作。它和浮层弹窗有点类似，不同的地方在于，浮层弹窗经常出现在页面上方，而它经常出现在页面的下方。
使用场景：通常用于呈现和当前内容有关的选项，或提示用户是否执行具有破坏性操作的场景中。如下图：
以京东、Soul、知乎为例，它们都使用了动作菜单弹窗，其中选项较少的使用了列表的形式来表现，选项特别多的使用了宫格的形式来表现。
非模态弹窗
非模态弹窗不会打断用户正在进行的操作，用户可以不对其进行回应，通常出现几秒后会自动消失，对用户的干扰比较小。
常见的种类有：Toast、Snackbar。
1.Toast
Toast 弹窗通常是一句简单的文字描述，出现几秒后会自动消失，由于其存在短暂的特性，所以不可能承载大量的信息。它在出现期间不会中断用户正在进行的操作，起到消息提醒和操作反馈的作用。
使用场景：通常使用于用户操作后的反馈，或提醒用户当前状态的场景中。如下图：
以马蜂窝为例，在进行刷新操作后系统会提示用户刷新了多少条新内容，断开网络后，系统会向用户反馈网络不佳。
2.Snackbar
Snackbar 弹窗是由一段文字信息和一个可点击的按钮组成，用户可以与之进行交互，它也有时间限制，在不点击的情况下它存在几秒就会自动，并不会中断用户当前进行的操作。
使用场景：通常使用于用户完成操作后，需要给用户一个撤销机会的场景中。如下图：
以谷歌浏览器为例，在删除已下载的内容后，页面底部会弹出 Snackbar 弹窗，同时用户可以点击”撤消“撤回此次删除操作。
总结
今天主要分享的是弹窗的常见样式及使用场景，我总结了以下几点：
1.模态弹窗会打断用户正在进行的操作，干扰性较强，需要慎重使用；非模态弹窗不会打断用户的操作，干扰性较弱。
2.信息提示弹窗不需要用户选择，只单向通知用户；信息确认弹窗需要用户在几个选项中进行选择；内容提交弹窗需要用户完成提示的任务才可进行下一步操作。
3.浮层弹窗常用于将更多功能收纳起来的场景中。
4.动作菜单弹窗常用于呈现和当前内容有关的选项，或提示用户是否执行具有破坏性操作的场景中。
5.Toast 弹窗常用于操作后的反馈，或提醒用户当前状态的场景中。
6.Snackbar 弹窗常用于完成操作后，需要给用户一个撤销机会的场景中。
参考引文：
《四种App弹窗设计：Toast、Dialog、Actionbar 和 Snackbar》http://t.cn/RVXeljF
《再也不要“滥用”弹窗啦》http://t.cn/EooSpNq
《交互设计之（二）弹窗设计》http://t.cn/EAhBATR
《弹窗发展简史》http://t.cn/EasddHA
《超全面！这可能是你见过最全的弹窗设计解析》http://t.cn/EooSggl
《APP弹窗浅析》http://t.cn/EZxpqZm