控件进阶专题！弹框设计深度思考总结

可知道了平台规范中的弹框类之后，你小小的脑袋瓜里有了大大的问号：了解得越全面，反而无从抉择了……这该怎么办？

所以一期我们来讲一下弹框的正确打开方式。最重要的还是，在每一次控件进阶题中，我们要学透表面，探索它们背值得我们学习的设计策略。

思考一：你确定你需要这个弹框吗？

在讲何正确使用弹框之前，我想让你先思考一个问题：你的需要个弹框吗？

有候当知道了一个控件为什被定义出来，就会掉进惯性思维的陷阱当中。比如知道了弹框一用于承载拓展、提示和反馈息，总是会在这些景下，不假思索地使用它。

实上，弹框使用场景其实是很值敲。在带大家了解弹框「How（怎么用）」、「What（用什么）」前，我们应该先明确「Why（为什么用）」。

先一产品层「Why」吧。

到微信「好看」功能，喜欢阅读公众的朋友一不会陌（已根据战略将「好看」改了「看」）。「好看」功能的诞初衷微信了突破公众阅读下降的瓶颈，让优质内依靠阅读者自身社交体系，扩散给多的用户。

最初微信推公众号「好看」功时，户点击「好看」后，会弹一个 Popovers ，引导户记录想法，并分享至「看一看」。好友通过「看一看」这个公共区域，可了解到最有哪些错的公众号容。该功既可户会友深粘性，又可依赖户分享的意愿，给公众号输入更多的流量。

一开始出新鲜感，「看」功能吸引许用户使用。但来愿意点击「看」的用户越来越少，其中当有许因素，但微信团认为：点击「看」之弹出让用户录想法的 Povpovers 增加用户的行为路径长度，并且给一不愿意录想法的用户带来行为负担，导致越来越的读者不愿意点击「看」。

是个 Popovers 成为一个和产品目标不的控件。在微信续的迭代中，终还是在留「写想法」的功能基础上，替换个气泡框。

但产品面能更是 PM 去考虑的问题。对设计师，我们说一说交互层面。

我们前面说到，弹框的用之一就是给用户带来行为反馈，反馈有搭建用户使用产品程中的信心。但即便是为不干扰到用户，将反馈机尽量以非模态框的形式呈现，依增加用户认成，因为人类认模型是从学习到理到习惯。

所以在计反馈机制，有候可以跳出「使用弹框」的定，「弹框」仅仅是人类五中「视觉」这一个层面，还可以通过「听觉」和「触觉」来传递用户反馈。

例如现在有许多 APP 在用户发生文本框输入误时，会采用文本框晃动+设备震动等触觉反馈。这些交互反馈含义已经让用户形成思维习惯，在不用阅读理解文信息情况下也知这是误提示。并可以让品交互变更加生动。

所以当发的产品设中，真的已很多弹框的时候，记得问一问自己：我真的需这弹框吗？已好的替方案了吗？

思考二：你确定要用模态框吗？

解决了「Why（什么用）」的问题之后，如果确当流程真的需用到弹框，我们就探究「How（怎么用）」的问题了。

上一期章我们讲到：模态框非模态框更容易打断户心流，如果是系到危险操作，我们应该尽量择更轻量的非模态框。但凭借我多年使产的经验，发现并非模态框的场景就一定是承载危险信息，如果这个标准判断应该择哪一类弹框，稍微有些偏概全了。

那么我们该如何在模态框与非模态框之间做择呢？我总结了一个分析手法。

我研许应用的弹框，现选择使用模态框还是非模态框以由以下三个度依次进行判断：

度一：是否含有互类操

因为非模态框时间短、自动消失的特质，让它在大数时是被用承载用户操的反馈提示，例「收藏成功」、「提成功」等，而无法包含操项（SnakeBars 除外）。所以「是否含有互类操」成为影响决策的一度。

当你的弹框中包含交互操作项，用户通过点击这个操作项会引发下一步交互（如：删除、提交、跳转页面等），那不用犹豫，直上模框吧。

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

维度二：是否有较高的重要别

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

度三：是否包含大量文字

能走到三度的弹框，一定是既不需要互操，也不太重要的弹框。逼迫着我们迈出最一步来决定是否使用模态框的判断条件，就是简单粗暴的「文字量」。

由非模框在规范中的定义就可以出，Toast 的最长间业界定义为 3.5 秒，长的文本息用户根本无法完成阅读。即便是可以停留 4-10 秒的 SnakeBars ，Material Design 也确告诉了计者，请不要在 SnakeBars 中放置过长的文本内容。

如以上三个维度我们答案都是「否」，那请用模态框吧，大多数情况下都不会有。

思考三：你到底该用哪一个弹框？

选定了是使用模态框与模态框后，你终于可以思考「What（用什么）」了。

模态框用「Alert」还「Action Sheet」。

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

• 操作项数区别：iOS人机交互规范规，了避免 Alert 选项溢出可视区域，让用户产滑动行，应多承载三选项，但 Action Sheet 可以承载多；
• 位置区别：Alert 现在屏幕中心，但 Action Sheet 由屏幕向上滑。

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

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

来看看易音乐的案例。当户在量删除已载音乐时，户点击了的「删除载」按钮，会弹 Action Sheet 形式现的确认删除框。

你可产生疑问：这个确认删除框包含的操作项数量小于个，但为么易音乐使 Alert 呢？

是一个非常典型的费茨定律案例（费茨定律其中一条定律法则是：当目标大小一定时，点离目标中心的距离越近，所花费的时间越短；距离越远，所花时间越长。）

通过 Alert 与 Action Sheet 的现位置，结合茨定律，我们可设计更符合户体验的设计。

非模态框是用「Toast」还是「SnakeBars」

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

所以我认为模态框选择相自由，是考虑到品统性，需要在设计规范将模态框样、弹出位等信息定义楚，以免在类似场景出现不弹框样，容易让用户生疑惑。

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

平台规范下弹框大多不会考虑情感化设计，为系统原生控件可能被任何应用在任何场景下调用。冷冰冰弹框往往是单纯为了引导用户操作、予用户反馈，频率过高容易让用户厌烦。

所以许多应用始对死板的弹框行感化改良。

感化弹框一般会出可能让用户产敏感绪的场景中。例如产品需获取到用户提醒、访问权限，或出于商业考虑需行广告营，易让用户产抵触绪时，许多产品会借感化弹框这一类场景脱敏。

并且为了增户共情，许多 APP 会情感弹框鼓励、扬他们的户或者于增节日氛围，户在使产的过程中更愉悦。

通过增效可弹框更生，现在已经有许多前端框架中预设了多种类的弹框画效果。

情感化设计策略，以在弹框打扰用户心流时，给予用户一情感弥补。

总结

像很时设计师很抵触弹框，但是出各种原因又不得不用到它，使得「弹框」在众的控件中有着很尴尬的地位。

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

要知，弹框在辅助用户完完成任务过程，其实是功不可没。

欢迎家关注作者微信公众：「UCD耍家」