弹窗，顾名思义是在当前窗口上弹出的窗口。对于这里的“弹出”，我的理解是：不可以脱离父窗口单独存在，且有打断、插入用户上一个行为流的意思。
从用户交互行为来判断，可以分为“模态弹窗”和“非模态弹窗”两大类：模态弹窗需要用户进行至少一步操作才可跳出当前弹窗页面，非模态弹窗则不强制要求用户对其产生触控等交互行为。经过互联网产品的发展迭代，弹窗组件大致可以分为以下几种形态。（如图1）
图1 弹窗类别
- 对话框（dialog/alert）
对话框一般用于提示用户正在进行一项很重要或者有风险的操作，最常见的就是对【删除】的二次确认，通过弹出对话框来给用户提示信息，用户根据提示来进行判断。一般会出现在屏幕的中间位置，会对界面的主要内容造成遮挡。（如图2）
图2 dialog的基本构成
对话框除了简单的与非选择，支持数据录入的形式也很常见；通过内容和样式的变化，对话框也常用于运营内容（如图3）。可以利用直觉和交互惯性对按钮进行取巧设计，以达到运营目的。
图3 汽车之家运营页 图4 淘宝“芭芭农场”界面
如图4，在用户想要退出“芭芭农场”，点击左上角的【返回】按键后会弹出dialog弹窗。这里的按钮组通过位置布局、填充效果两种手段来引导用户凭直觉点击【再玩一会】，从而达到把用户挽留在父级页面的目的。这里还有第3个按钮—【关闭】，它和【再玩一会】的指令是相同的，点击后也会关闭弹窗留在父级页面。那么为什么这里要设计2个功能重复的按钮呢？我认为是一个达到运营目的的“双保险”，有些用户会在快速的连续点击下惯性点击右侧的实色按钮，而更有一大部分用户会对这类运营弹窗更抵触，见叉就点，这比理解“再玩一会”的含义所需的反应时间要少很多。而不管哪类用户，都在这种引导下被“挽留”住了。
作为一名设计师，初体验是可以get到其中的“小心机”的，但不会上当第二次，而且我认为这类“心思”不能在一个产品的业务流中多次使用，有耍人的嫌疑；另外，过于强调按钮组的设计会影响弹窗内提示信息的传达。特别是现在的网民对文字不如图片敏感、图片不如视频敏感，比如小编我直到写这篇文章时才第一次看配图说的是什么。
- 动作面板（actionbar/actionsheet/actionview）
加强版对话框，动作栏可以提供多个功能按钮，展示的样式比较多变。传统的actionbar会在用户点击后从底部弹出功能列表，为用户的下一步操作提供多个不同路径选项，例如苹果的分享照片面板。苹果通过转场动画的衔接，将actionbar能实现的功能扩大化，可以在点击后再对操作对象做补充（支持选择更多照片）；（如图5）
图5 ios系统相册-【分享】
随着手机屏幕变大，单手操作的限制和障碍逐渐明显，越来越多的设计重视利用移动屏幕的下半部分，动作栏变为更加综合、多元的交互组件，例如高德地图搜索框的下移。（见图6）
点击底部导航标签后的跳转也变为了从底部向上推出更大的卡片，而根据“来去同一”原则，同样用户会在动效引导下尝试用下滑的手势代替原点击左上角的【返回】来回到上一步。相较从左侧屏幕边框滑动退出的手势，在屏幕任意位置向下滑动确实是对大屏下的单手操作更加友好。
图6 高德地图-首页界面
- 浮层/气泡（popover/popup）
浮层，也叫气泡，是用户点击控件或者界面某一区域浮出的半透明的临时视图。浮层的样式跟动作栏很相似，都可以向用户展示多个功能选项。但是浮层可以出现屏幕中的任何位置，能够给用户更具有指向型的提示。这类指向性气泡是对web端tooltips的移用，在电脑软件中经常出现“鼠标移入”某个功能按键后的气泡提示，用简短的一句话解释指向的功能。在移动端不存在hover事件（在隔空手势应用后也许会有），但是还是可以从位置和样式上应用气泡的设计。
默认的样式是在浮层边缘添指向性图形，并指向所属icon（如图7中微信界面）。在ios中没有使用箭头，但通过将其他元素的毛玻璃化处理，仍可以实现成组的作用。（如图7中ios对桌面icon的长按操作）
图7 微信界面 / ios操作界面
这里对上述提到的弹窗形式做一个小结：
- 吐司（toast/hud）
一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中；主要用于用户完成操作以后，告诉用户操作结果或者状态的变更。优点是不会打断用户当前的操作流程，属于轻量型的反馈方式。缺点是容易被用户忽视，而且不适合展示过多的信息，可能在用户读完之前就消失了；
taost是对产品当前状态的一个即时反馈，所以它的显隐是根据后台信号决定的，因此存在多个toast按顺序同时显示的状态（如图8为微博及微信的顶部toast）。
图8 信息流内容更新提示 / 网络及账号状态提示
信息反馈同样支持所见即所得的原则，那么用户的目光不用离开指令输入-执行-结果反馈等所有信息自然效率更高。多数app都把toast的功能应用在多态按钮上，如图9用户使用App store下载应用时，“操作提示”-“解密”-“识别中”-“完成”，每一步信息都用明晰连贯的动态icon在同一处显示。对于串联的行为流，采用这样的设计即提升了用户操作的效率，也保证了画面的简洁。
图9 使用苹果商店下载App
- snackbar
存在于安卓系统，由信息内容和一个功能按钮组成，位于屏幕最上层，一般位于屏幕下方，可在屏幕上滑动关闭，或触控其他屏幕区域自动消失；snackbar的提示的文案要简短，包含的操作按钮最多只有一个，或者没有。（不能包含使其消失的“取消”按钮）；
与toast不同的是，snackbar一次只能出现一个。如果出现了一个该元件，这时候用户进行了操作，需要出现另一个，则第一个snackbar从上向下退出，之后第二个snackbar从下向上出现；内容中尽量不要包含图标，如果非要用那最好用弹窗来提示；按钮字体最好（颜色）突出展示（但是不要用填充式按钮）。
图10 snackbar demo
总结
一个产品中一定会有很多个不同样式的弹窗，对于业务流复杂的产品弹窗显得尤为重要，要在不打断行径的前提下传递准确的信息，这个平衡的拿捏需要在前期完整的梳理产品结构、业务流程，对所有需要用弹窗形式展现的模块做优先级排序，进行统筹设计，做到即便是“打断”也会有效的解决问题、提升效率。
