认识移动端弹框思维导图

弹框是人机交互中常见的方式，常常出现于询问、警示、以及完成某个插入任务，常见于网页端及移动端。弹框能使用户有效聚焦于当前最紧急的信息，也可以在不用离开当前页面的前提下，完成一些轻量的任务。

iOS最新HIG中对模态（Modality）说明是：

模态对话框是指弹框出现时，父级视图的操作被中断，用户需要首先解决弹框中的任务，才能去做其他事情。移动端的模态弹框一般是指对话框（Dialog），iOS中将其定义为警告框（Alert）。

Material Design中对Dialogs的定义是：

在实际情景中，我们仍可以在基础构成上根据不同设计目的对其进行变形，所以在不同的产品中有不同的表达形式，但务必要让对话框的目的和解决方式清晰可见，避免增加用户负担。

下图是iOS中系统询问权限时出现的弹框，包含了简洁明了的标题，详细的说明，以及两个可选操作。是很标准的符合规范的设计，好懂易用。

理论上来说，模态对话框不应该提供选项之外的关闭按钮，因为在一个选择性事件中，“关闭”的含义不明确（是放弃还是确定呢？），但是现在很多软件会在一些模态弹框设置关闭按钮。一种情况是该弹框是自动弹出而非用户触发，弹框的内容与用户当前的操作无关，所以用户可能不想做出任何一个选择，对“关闭弹框”有较强烈的需求，如下图1。

另一种情况，商家为了促使用户做出他们希望的选择，削弱其他选项干扰，把“取消”选项以右上角的关闭按钮代替，此时关闭操作不会引起严重后果，且含义比较清楚，如下图2。 

除此之外，在某些提供快捷操作的弹框中，应该要使任务足够清楚明了，尤其是在有多个任务之时，一个标题或说明是必要的。如下图就是新建账本任务对话框，包含了账本名称、选择账本颜色两个任务，两者是相对清晰的。

Android中的临时弹框包括了 Snackbar和Toast，iOS中有HUD，虽然都是轻量级弹出框，但三者定义略微不同。

HUD：iOS中的透明指示层，英文全称head up display，用于提供轻量的反馈，在页面居中位置，可以使用图标，有可变动信息，如iOS音量加减。（不可交互） 

其中，Snackbar更像是对话框与Toast的综合，及时反馈并且可以提供一个简单的操作。Toast和HUD是相似的，用以提供系统级的反馈，且不可操作，更多的场景下并未将两者区分开，而认为是内容形式不同的Toast。

一般临时弹框出现时不需要加压黑蒙版，但是在某些需要较高关注度的提示，会采用居中并辅以蒙版来突出它。

下图左为居中、压黑弹出的Toast，对用户的不规范操作进行及时反馈。图右为iOS中有可变动信息的HUD，对用户的操作反馈。下图为包含了一个撤销操作的Snackbar，反馈操作成功的同时，提供一个轻量的操作。

与模态对话框不同，临时弹框一般不会打断用户操作，又能够达到传递信息的目的。对于无法直观看出改变的操作、某些用户可能想要知道的信息时，是比较理想的解决方式。下图是对这几种类型的弹框一个简单的示意。

雷石点歌台是基于微信平台H5页面的工具类产品。由于H5的不稳定性和开发技术的限制性，雷石点歌台的一大部分操作反馈都有赖于弹框，详细的弹框规范可见下面表格。

下图为弹框使用规范示例

在消费环节，需要对用户的消费行为进行再次确认，并在用户账户没有足够积分的情况提，提供多种解决方案，以便用户能够清楚便捷地进行消费行为。同样，在用户断开包房链接时，需要对断开行为再次确认，以免误操作给用户增加使用成本。

需要注意的是，在此类确认的弹框中，选项按钮的名称要能清楚表明其行为，故而在断开弹框中，我们不使用“确定／取消”，而使用“断开连接／继续嗨歌”。

由于开发同事反馈H5无法及时获取系统当前所处的状态，所以原伴唱切换、播放暂停切换等按钮，无法在用户操作后及时准确地反馈当前状态。但灵活的Toast能够弥补无反馈状态按钮的不足，能针对用户的操作进行反馈，这样良好的互动也会增加用户使用的信心。 

弹框是一种插入机制，目的在于给用户带去更便捷、快速的反馈和操作。模态弹框相对非模态弹框来说，更聚焦，同时也会对用户的体验造成了更大的影响，所以在使用过程中要更加慎重；非模态弹框更轻巧、更灵敏，合理的使用能让用户对产品有更好的体验。

从定义到原则，认识弹框能帮我们更系统、正确的使用它们，做出更优秀的产品。但规范提供给我们的只是一些建议和参考，在面对实际项目时，最重要的是了解产品的意图和具体的使用情景，然后在规范之上，去做出最适合当前需求的产品。