I. 定义
1. 模态（modal）弹窗：很容易打断用户的操作行为，强制用户必须回应操作，否则不能进行其他操作。
2. 非模态（nonmodal）弹窗：不会影响用户的操作，用户可以不回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。
二者区别：非模态弹窗通知用户信息，而模态弹窗除了传达信息外还可进行功能操作。
II. 优缺点
优：
1.让用户感知未离开当前页面，没有丢失正在浏览或填写的内容，又能够清晰地预见接下来要去向哪里，给用户引导的同时让用户对操作有掌控感；
2.相对独立，不影响页面布局；
3.一次性操作，解决简单，较页面轻，易返回，不需要刷新整个页面，展开/收回速度快，整个过程流畅。
缺：
1.不在用户预期之内出现的、无用的、打断用户操作的提示、告警信息；
2.不断叠加的弹窗，在弹窗内启动弹窗。
III. 类型
i. 模态弹窗3种：Alerts／Dialogs、Action bar/Activity View/Action Sheets、Popovers/Popup
1. Alerts（iOS）/Dialogs（Android）：警告框/提示框
一般由标题、描述信息*、输入框、功能按钮*组成，用户点击某个功能按钮后弹窗消失，App执行该功能操作，进入相应流程。
Dialog包含了一个标题(可选)，内容 ，事件。
标题：主要是用于简单描述下选择类型。它是可选的，要需要的时候赋值即可。
内容：主要是描述要作出一个什么样的决定 。
事件：主要是允许用户通过确认一个具体操作来继续下一步活动。
作用：用户进行了敏感操作或状态改变，在该结果发生前以对话框形式传达重要信息，告知用户当前状况，让用户主动选择回应，适用于结果影响性较大的重要操作，如退出（APP/当前账号）、离开流程（确认订单/编辑地址）、删除、清空、开启消息通知等
2. Action bar/Action Sheets（iOS）/Activity View（iOS）：操作栏/工具栏、操作列表、活动视图
Actionbar比Dialog提供更多功能按钮选择，默认有“取消”功能按钮，点击该按钮或弹窗以外的区域关闭弹窗。
在iOS中常见样式是页面底部的文字列表框，以简洁的功能描述性文字展示功能按钮。形式为文字、文字+图标、图标（较少见）。
作用：提供一系列在当前情景下可以完成的任务操作，适用于分享功能
3. Popovers(iPad) / Popup(Android)：弹出框/浮出框/浮层弹窗
提示工具Tooltip的插件，当用户轻点某个控件或页面中的某一区域时浮出的临时视图，大多浮动于顶层，弹出解释或操作气泡。
作用：可在当前页面进行更多操作，常用来显示/隐藏页面中折叠的额外信息，或呈现一些常用操作的快速入口。
iPhones避免使用popovers，所以在iOS端popovers的样式为iPads专用
ii. 非模态弹窗 2种：Toasts/HUD、Snackbars
1. Toasts/HUD：提示框
1）Toasts吐司提示（Android）
轻量级弹窗，给予用户及时提醒或消息反馈，一般用来显示操作结果或应用状态的改变，确保用户知晓自己所处的状态。
常见Toasts为一句简短的描述性文字，可在页面顶部、中部或者在底部出现（通常在页面的中轴线上），具体的显示位置根据页面的整体设计进行设置，同一款产品尽量使用相同位置，让用户产生统一认知。
优点：
1.占用屏幕空间小; 2.不会打断用户操作; 3.使用简单适用范围广
缺点：
1.显示停留时间短，占用区域不大，易被用户忽略，不适合承载过多的文字和重要信息，尤其在碎片化时代注意力不集中容易错过提示
2.被滥用于加载、表单提示、状态变更反馈、断网消息等，不断出现的黑乎乎矩形样式上给人一种模态的错觉，阻塞感会打断心流。
3.遮盖其他控件，但不能对Toasts进行交互。
在Android规范中Toasts：
出现在屏幕底部；
只能放文字不能带图标，文字要精简；
短时间后会自动消失，系统默认停留时长2s（短）和3.5s（长）；
不可进行交互。
| 在iOS 将Toasts的位置由屏幕底部和中间改到顶部的尝试
好处：1.出现位置稳定：不会因为软键盘出现导致原本在屏幕底部或中间的Toast被遮盖或浮动到其他位置。2.更容易引起用户注意：iOS持续录音、GPS被使用、正在通话状态、活动指示器和系统推送通知都在屏幕顶部，符合用户在顶部感知反馈信息的习惯。3.不会遮挡主体内容，不干扰浏览。
2）HUD透明指示层（iOS官方无Toasts，只有HUD）
HUD可能来源于 平视显示器（Head Up Display），最初是运用在航空器上的飞行辅助仪器，飞行员不需要低头就能够看到需要的重要资讯。
Toasts和HUD不同之处：
1>Toasts一般出现在屏幕底部，HUD出现在屏幕中间。
2>Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。
3>每次产生的Toasts内容不可改变，HUD内容可以改变（比如调节音量时出现的HUD）
2. Snackbars（Android）：底部弹窗
Google MD规范中Toasts和Snackbars为一类。
由信息内容和一个功能按钮组成，位于屏幕最上层，可在屏幕上滑动关闭，或触控其他屏幕区域自动消失。
作用：反馈操作结果，点击功能按钮后弹窗消失，系统执行该操作，完成相应的功能流程。如删除任务时，屏幕底部出现“任务成功删除”并附带撤销操作，点击撤销任务可恢复；不进行操作Snackbars则消失，任务删除成功。
Snackbars与Toasts对比：
相同点：
1.都为小弹窗的形式，会自动消失；
2.显示停留时长可自定义（建议遵循系统标准）；
3.屏幕上只能有一个弹窗
不同点：
1.Snackbars一般都会有操作按钮，如撤销；Toasts无操作；
2.Snackbars一般出现在底部，Toasts一般出现在中部；
3.Snackbars可操作关闭，Toasts不可交互；
4.Snackbars打扰程度高于Toasts；
5.Snackbars运用未普及，可能造成用户理解负担
IV. 设计指导
1. 在使用弹窗的时候要尽量克制，要考虑信息内容的必要性和目的性（商业推广或者增值服务等目的），来选择是否使用弹窗和使用弹窗的方式和样式。
当弹窗中的内容太多、交互过于复杂时，已违背了弹窗的最初意义，使用跳转新页面更合适；业务流程是A-B-A时使用弹窗更好，A-B-C时，使用跳转更为合理。
2. 根据反馈优先级，采用不同的样式：
Alert（强提示性）：提示信息至关重要的，要用户做决定才能继续，非用户发起（系统自动发起）一般都用Alert；
Actionbar（次强提示性）：重要程度弱于Alert，一般用户主动发起任务，需要给用户更多的功能选择时，使用Actionbar；
Toast（弱提示性）：提示信息告知用户某个事情发生了，用户不需要对此做出响应时，使用Toast。
Snackbar：涉及到删除操作类的场景，Snackbar可能是撤销最好的选择。
3. Dialogs
1）标题和信息内容的文字描述都尽可能的简洁、表述清晰、无异义，也可省略标题只保留内容描述和功能按钮（大多数Dialogs都没有标题）；
2）功能按钮最好只有两个，让用户选择“是”或“非”的功能操作（“是”指对内容描述的确认操作，比如确认删除、确认付费；“非”一般指取消操作，然后关闭弹窗）；用清晰的措辞来准确表明操作（删除、撤销、前往的我个人信息界面），而不是使用模糊的文案，例如“是”或“否”；
3）只保留一个“确认”按钮，具有更强提示性，让用户阅读内容后，点击右上角提供的关闭操作或者点击非弹层区域关闭弹层，前提要确保信息内容非常重要，才打断用户的操作进行信息内容阅读确认（如新手提示）。
Alerts（iOS）
1）最小化使用Alerts，只应用于破坏性操作或通知重要问题的使用场景，避免用户养成忽略的习惯并认真对待；
2）在横屏和竖屏模式下保证Alerts可读性良好的自适应显示；
3）Alerts标题和信息尽量简短，具有描述性，避免滚动；语气避免指责和批判；
4）常见为双按钮Alerts，按钮文案简洁有逻辑；用户习惯点击右侧的按钮，所以取消应该在左侧；差异化标红显示以区隔破坏性按钮，取消按钮标记为默认以实现加粗效果；
5）允许用户通过退回主屏幕以取消Alerts
4. Action bars
1）敏感的功能操作用红色字体或其他颜色按钮，突出视觉差异
2）在安卓系统中，Actionbar多为“选择列表框”（选项代替了功能按钮），减少了流程中的页面跳转，若选项和描述文字较多，仍建议跳转选项详情页
3）功能按钮数量过多时，文字列表的形式不适合显示，可用图形加文字描述的形式来进行展示，同时注意弹窗内各功能按钮的ICON设计、排列布局、按钮滚动显示等，留有足够的视觉线索。
Action Sheets
1）提供取消按钮，并始终包含在Action Sheets的底部；
2）突出显示破坏性或危险操作，警示性选项标红色并置于选项顶端，推荐性选项标示蓝色，通常采用官方控件，也可以自定义设计；
3）尽量避免Action Sheets中的滑动操作，如果选项过多，需要滑动才能看到全部选项，增加额外的选择时间，而且很难在滑动的同时不触碰到其他选项按钮。
5.Popovers
1）仅用关闭按钮（如取消、完成）用来确认和引导操作；
2）自动关闭非模态的Popovers时，自动保存内容；
3）在屏幕的适当位置弹出，箭头直接指向点击即展示Popovers的元素（Popovers的来源地）
4）一次仅显示一个Popover，避免在Popover上再弹出一层Popover
5）避免Popovers占位过大，弹窗大小刚好显示完全内容即可
6）改变Popovers大小时，提供平滑的过渡动效
6. Snackbars
1）通常 Snackbar 的高度应该仅仅用于容纳所有的文本，而文本应该与执行的操作相关。Snackbar 中不能包含图标，操作只能以文本的形式存在。
2）为了保证可用性，Snackbar 不应该成为通往核心操作的唯一方式。Snackbar所有层的上方，不应持续存在或相互堆叠。
3）最多包含0-1个操作，不含取消按钮
7.减少使用方式：
1）采用多状态按钮，反馈明显，不需要额外用Toast进行提示。
2）动效，吸引用户注意力，情感化设计给用户留下深刻印象。事物之间的关系可以通过动效进行隐喻，例如电商App加入购物车，商品飞入购物车中，有趣流畅。
3）声音和震动，建议作为同步辅助反馈手段。
8. 系统操作引导类可使用插画等视觉效果更加友好的弹窗
图片来源：https://developer.apple.com/
