以上介绍了平台规格的弹框类型，应该如何判断在哪个场景下需要使用弹框呢？ 必要时需要什么类型的弹框？ 针对这些疑问，笔者将进一步展开分析。

上次，我们介绍了平台规格的模态、非模态箱的类型以及它们的使用方法。 可以回顾： 《掌握“弹窗”设计规范，打造优质用户体验》。

但是，在知道平台规范中的弹框类型后，你的小脑袋上打了个大问号。 越全面了解，反而越无法选择…这下该怎么办？

所以这次我们来谈谈弹框的正确打开方法。 最重要的是，在所有控制的高级主题中，我们必须学会通过表面，探索它们背后值得学习的设计战略。

在说明如何正确使用

一、你确定你需要这个弹框吗？

弹框之前，我想先考虑一个问题。 真的需要这个子弹框吗？

一旦知道控件为什么被定义，就会陷入惯性思维的陷阱。 例如，我们知道弹框一般用于承载扩展、提示和反馈信息。 我们总是在这些场景中，不加思考地使用它。

但实际上，弹框的使用场景值得推敲。 在理解弹框的“How (怎么使用)”、“What () )使用什么)”之前，应该明确“Why () )为什么使用”。

首先，让我们来谈谈产品层面的“Why”。

说到Wechat的“漂亮”功能，喜欢读公众号的朋友一定不知道吧。 “漂亮”被战略改成了“看着”。 “好看”功能诞生的初衷是让微信突破公众号阅读量下降的瓶颈，让高质量的内容依靠读者自身的社交体系，扩散到更多的用户。

最初推出微信公众号“漂亮”功能时，当用户点击“漂亮”时，powers会弹出来，引导用户记录想法，分享给“看”。 那个朋友可以通过“观看”这个公共区域，知道最近有什么好的公共号码的内容。 这个功能可以让用户在文会好友中增加粘性，也可以依靠用户主动分享的意愿，在公众号中输入更多流量。

最初因为新鲜感，“干净”的功能被很多用户使用。 但是，之后，点击“漂亮”的用户变少了。 其中当然有很多因素，但Wechat团队在点击“漂亮”后，弹出让用户记录创意的Povpovers会增加用户行为路径的长度，让不想记录创意的用户承担行为负担

于是，这个Popovers成为了与产品目标不相容的控制。 在微信后续的迭代中，终于在保留“写创意”功能的基础上，替换了这个泡沫箱。

但是，在产品层面，PM考虑的问题可能很多。 那对设计师来说，我们谈交互水平。

综上所述，弹框的作用之一是给用户带来行为反馈，反馈有助于建立用户在使用产品过程中的信心。 但是，为了不打扰用户，尽量将反馈机制表现为非模态箱仍然会增加用户的认知成本。 因为人类的认知模式从学习到理解再到习惯。

因此，在设计反馈结构时，可以摆脱“使用弹框”的设定。 “弹框”不仅是人类五感中的“视觉”层面，还可以通过“听觉”和“触觉”传递用户的反馈。

例如，用户输入错误文本框时，文本框会摇晃，设备会振动等，很多APP都会进行触觉反馈。 这些互动反馈的含义已经让用户形成了思维习惯，没有阅读和理解文字信息，就知道这是错误的提示。 可以使产品的相互作用更生动。

所以，当你害怕孤独而发现冷风在你的产品设计中，真的有很多弹框时，你会问：“我真的需要这个弹框吗？ ’我记得问自己。 没有好的代替方案吗？

二、确定要用模态框吗？

在解决“why (为什么要用)”的问题后，如果判断现在的流程真的有必要使用弹框的话，就来探索“How )”的问题。

在上次的文章中，我提到了模态框比非模态框更容易中断用户的心流，因此在与危险操作无关的情况下，需要尽量选择轻量级的非模态框。 但是，根据多年使用产品的经验，我发现非模态框架的运用场景一定会登载危险信息，所以如果按照这个基准判断应该选择哪种弹框，就会有点偏颇。

那么，在模式框和非模式框之间应该如何选择呢？ 我总结了分析方法。

研究了许多APP的弹框后，我们发现使用模式框还是使用非模式框可以通过以下三个维度依次判断。

1. 是否含有交互类操作

由于具有非模态帧在短时间内自动消失的特性，除了SnakeBars以外，大多数情况下用于托管“收集成功”、“提交成功”等用户操作的反馈，将操作项目作为因此，“是否包含交互操作”将成为影响决策的第一次元。

害怕孤独的冷风弹匣包含互动的操作项目，用户点击这个操作项目会引起下一个互动(例如删除、提交、跳转到页面等)。 不要犹豫，直接进入模态框吧。

RteMUZ6InGUz1n?from=pc">

那如果弹框中不包含交互类操作，是否就能直接用非模态框呢？那得看接下来的第二个维度。

2. 是否有较高的重要级别

正是因为模态框必需由用户手动关闭的原因，往往可以用于承载重要信息，获取用户注意力。所以就算弹框中并不包含交互操作项，但因为提示内容非常重要（如：隐私协议、危险操作信息、版本更新信息等），也应该使用模态框来呈现。

3. 是否包含大量文字

能走到第三维度的弹框，一定是既不需要交互操作，也不太重要的弹框了。那逼迫着我们迈出最后一步来决定是否使用模态框的判断条件，就是简单粗暴的“文字量”了。

由非模态框在平台规范中的定义就可以看出，Toast的最长时间业界定义为3.5秒，太长的文本信息用户根本无法完成阅读。即便是可以停留4-10秒的SnakeBars ，Material Design 也明确告诉了mldwx，请不要在 SnakeBars 中放置过长的文本内容。

如果以上三个维度我们的答案都是“否”，那请用非模态框吧，大多数情况下都不会有错的。

三、你到底该用哪一个弹框？

选定了是使用模态框与非模态框之后，你终于可以思考“What（用什么）”了。

1. 模态框是用“Alert”还是“Action Sheet”

对于模态框，最容易产生纠结的主要是 Alert 与 Action Sheet 。在抉择具体使用哪一个控件之前，只需要弄明白它们的两大区别即可：

操作项数量区别：iOS人机交互规范规定，为了避免 Alert 选项溢出可视区域，让用户产生滑动行为，应最多承载三个选项，但 Action Sheet 可以承载更多；位置区别：Alert 出现在屏幕中心，但 Action Sheet 由屏幕底部向上滑出。

对于操作项数量区别，很容易理解。多余三个操作项的模态框，我们理应使用更符合操作体验的 Action Sheet。

但对于位置区别，我们该如何加以运用呢？

来看看网易云音乐的案例。当用户在批量删除已下载音乐时，用户点击了底部的“删除下载”按钮，会弹出以 Action Sheet 形式出现的确认删除框。

你可能产生疑问：这个确认删除框包含的操作项数量小于三个，但为什么网易云音乐不使用 Alert 呢？

这是一个非常典型的悲凉的外套定律案例（篇幅原因，悲凉的外套定律在以后的文章中再详解，有兴趣可以先自行查阅资料。悲凉的外套定律其中一条定律法则是：当目标大小一定时，起点离目标中心的距离越近，所花费的时间越短；距离越远，所花时间越长。）

通过 Alert 与 Action Sheet 的出现位置，结合悲凉的外套定律，我们可以设计出更符合用户体验的设计。

2. 非模态框是用“Toast”还是“SnakeBars”

SnakeBars 当初由 Material Design 创造出来，就是为了解决用户无法在非模态框中进行交互操作的问题。所以选择它们的手法不言而喻。但 SnakeBars 在 iOS 端被运用的次数确实太少了，很多时候容易被mldwx以相对轻量的模态 Popovers 取代。

所以我认为非模态框的选择相对自由，只是考虑到产品的统一性，需要在设计规范中将非模态框的样式、弹出位置等信息定义清楚，以免在类似场景中出现不同的弹框样式，容易让用户产生疑惑。

四、当然，你也可以让弹框更加情感化

平台规范下的弹框大多不会考虑情感化设计，因为系统原生的控件可能被任何应用在任何场景下调用。义气的菠萝的弹框往往只是单纯为了引导用户操作、给予用户反馈，频率过高就容易让用户厌烦。

所以许多应用开始对死板的弹框进行情感化改良。

情感化弹框一般会出现在可能让用户产生敏感情绪的场景中。例如产品需要获取到用户提醒、访问等权限，或出于商业考虑需要进行广告营销，容易让用户产生抵触情绪时，许多产品会借助情感化弹框为这一类场景脱敏。

并且为了增加用户共情，许多APP也会用情感化弹框鼓励、赞扬他们的用户或者用于增加节日氛围，让用户在使用产品的过程中更加愉悦。

通过增加动效也可以让弹框更加生动，现在也已经有许多前端框架中预设了多种类的弹框动画效果。

这些情感化设计策略，可以在弹框打扰用户心流时的，给予用户一些情感弥补。

五、总结

好像很多时候设计师都很抵触弹框，但是出于各种原因又不得不用到它，使得“弹框”在众多的控件中有着很尴尬的地位。

但希望这一期的内容能够帮助你在今后设计弹框的过程中变得更加得心应手，坚定而明确地选择弹框控件，也还弹框一个清白。

要知道，弹框在辅助用户完整完成任务的过程中，其实是功不可没的。

作者：Howie_t；公众号：UCD耍家（ID：ucdplayer）

本文由 @Howie_t 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议