炸弹盒，一个让设计师和用户又爱又恨的控件。产品需要弹跳帧来传递信息，用户需要弹跳帧来接收反馈。但如果不加仔细考虑就乱加弹性框架设计，用户的心流会频繁中断，很容易让用户感到压抑。在我们日常的设计工作中，应该如何设计一个合理的框架？什么样的框架设计是优秀的，为什么有些框架设计会让用户感到厌烦？本文将为大家揭示答案。

作者将分两个阶段总结子弹架的规格和先进用途。欢迎继续跟进。在第一阶段，我们首先整理出平台规范下的项目符号框架。

一、框架的分类

随着“弹跳架”概念的泛化，相信连很多设计师都开始混淆弹跳架的具体分类了。弹出的窗口好像无论如何都叫“弹出框”，用法很模糊。

其实看看iOS人机交互规范和Material Design，我们可以把子弹盒分为模态盒和非模态盒两类。

第二，模态盒

模式框:模式对话框。指需要中断用户的弹出框，用户必须完成对话框中的任务(或主动关闭)后才能继续主面板的操作。“非模态”是与“模态”相反的概念，指的是在不打断用户操作的情况下的子弹盒。

事实上，良性的模态框可以帮助用户成功完成任务。因此，设计师必须知道模态盒是什么类型，如何使用。

2.1 iOS & # 8211警报和材料设计& # 8211；对话框(对话框)

对话框是应用最广泛的场合，也是最容易打断用户流程的场合，因为它直接出现在屏幕中央。所以两个平台都明确提醒设计人员尽量约束对话框的使用频率。

正是因为对话框容易引起用户的注意，所以一般用于携带重要的附加操作或警告信息。

关于对话框值得一提的是:由于在产品设计过程中可以直接调用系统的原生对话框控件，很多设计人员往往忘记提醒开发人员配置高亮选项来引导用户操作，导致我们经常看到一些与产品设计意图相悖的对话框。

比如为了激活熟睡用户或者收集用户的一些个性化信息，产品往往希望获得用户的提醒、访问等权利，所以弹出框中的操作指导通常应该是正面的。但是我们总能看到一些可笑的案例。

因此，当设计者为了方便或其他兼容性问题不得不调用本机对话框控件时，不要忽略控制细节。有时一个疏忽可能会导致用户和用户体验的损失。

2.2 iOS & # 8211行动表(行动小组)

Action Sheet是iOS规范下的一个控件，这几年慢慢基于Android了。

Action Sheet是一个响应控件，通常需要用户执行一个操作才能弹出(在一些危险的情况下，不需要用户操作直接弹出的模态框应该使用Alert/Dialog)，并显示一组两个或多个与当前操作相关的选项。通过从屏幕底部向上滑动来显示操作单。

IOS人机交互规范提醒设计师在使用Action Sheet时要注意以下几点:

(1)突出显示破坏性选项:用于用户执行破坏性或危险操作的按钮应以红色突出显示，并放置在行动表的顶部。

(2)“取消”按钮应该始终存在于动作面板的底部:虽然用户可以点击屏幕的任意空白色区域来取消动作单，但是“取消”按钮可以在用户不想执行任何操作时给用户一个明确的操作方向，因此“取消”按钮不应该被删除；

(3)避免垂直滚动:滚动意味着操作项的数量已经溢出控件的可视区域，用户需要额外的时间进行选择。但由于动作单中每个操作的横向热区都很大，在滑动时容易误触。此时，选择活动视图更合理。

2.3 iOS & # 8211活动视图(活动尝试)

活动视图是iOS 10引入的新标准控件。它的诞生是为了解决动作单的滚动问题，所以常被称为动作单的网格模式。

众所周知，在中国，活动视图最常见的使用场景是在共享或使用第三方应用程序打开文件时。

活动视图支持水平滑动。相对于Action Sheet选项的热区，Activity Views的选项都放在一个只有70px*70px的颜色块中，点击热区相对较小，适合携带更多选项，不易被用户误触。

但是我发现调用iOS的原生Activity Views控件可以合并成一个grid+list，有些应用已经在使用了。

个人觉得可能是选项太多的时候，有些选项太落后，用户横向滑动时间太长，用户很难找到需要的操作。

iOS既然支持组件的组合，那肯定考虑过这样极端的情况。所以具体的使用方法还是需要设计师去适应具体的场景。

2.4 iOS & # 8211波波夫和材料设计& # 8211；菜单(场景菜单)

Popovers通常由一个指向其外观位置的三角形箭头和一个弹出窗口组成。按照iOS规范，Popovers只适用于iPad，但不难发现跨平台使用Popovers的情况并不少见。

Popovers在各种应用中最常见的使用场景是信息提示和上下文菜单，所以我想把iOS Popovers和MD Menus分门别类。

MD & # 8211菜单和iOS & # 8211Popovers除了没有三角形指向之外，没有太大区别。但是我个人认为用户更容易知道当前弹出框中包含的内容与哪些操作相关，其实对用户更友好。

但是MD & # 8211菜单毕竟是原生控件，样式不再支持修改。所以设计师在设计个性化泡泡框的时候，可以多改进。

第三，非模态盒

与模态框相比，非模态框不太可能干扰用户操作，因为当非模态框弹出时，用户仍然可以继续操作主面板中的内容。但是非模态盒子也有它的缺点:出现时间短，不容易引起用户的注意；有时非模态框中的信息可能在用户读完之前就消失了。

iOS和MD规范中定义了几个非模态框:

3.1材料设计& # 8211；吐司(吐司炸弹框)

吐司是MD的标准控件，平台规定吐司要出现在屏幕底部，并且只包含尽可能少的文字信息，不要出现增加用户认知成本的图标。

针对上面提到的非模态框的一个缺点:有时在用户还没看完非模态框中的信息时，弹出框就消失了，业界对吐司弹出框实施了隐藏规则，认为吐司弹出框出现的最佳时间是2 & # 8211；3.5秒(短吐司和长吐司)。在这个时间段内，不容易打扰用户，也有助于用户阅读完整的提示信息。

3.2 iOS & # 8211平视显示器(是否是“平视显示器”的缩写尚待考虑)

其实iOS的HUD框架并不包含在平台规范中。但是大家肯定都很熟悉。比如iOS 13之前控制设备音量的时候，弹出框是HUD弹出框。但由于HUD子弹框太大，经常会遮挡屏幕信息。iOS 13之后，iOS优化了这类子弹盒的体验。所以HUD外壳出现的场合很少。

但是为什么要单独提到HUD框架呢？前面说过，MD规定了图标等元素不能出现在Toast中，但是现在很多APP定义的Toast已经打破了这个规范。我觉得这个变化的启示点来自于HUD框架。

HUD子弹盒始终是iOS系统私有的，不能被第三方应用调用。所以很多应用开始模仿HUD子弹盒的风格，演化出了图案繁多的Toast子弹盒。

所以今天的吐司不仅仅是MD当初规定的标准吐司，有时候还会考虑到用户的情感需求，在产品中加入一些定制的元素。

3.3材料设计& # 8211；蛇形杆

有趣的是，当蛇条第一次包含在MD规范中时，它被标记为“仅限MD”，显示了设计这个控件的成就感。蛇条是一个子弹盒，中和了模态盒和非模态盒的属性，在其他平台规范中很少见到。

常规无模式框不支持操作，会自动消失；模式盒必须由用户操作或在消失前手动关闭。蛇形条是一个支持用户操作并自动消失的控件。它通常出现在屏幕的底部。

蛇条支持两种模式:纯文本提示和操作容器。

如何区别于Toast？Google翻译做了一个很好的例子。蛇形条具有较长的帧长度和较长的显示时间。MD规定蛇条显示在4 & # 8211；10秒，提示内容为纯文本时可以更短，用户需要操作时可以更长。

四.摘要

模态箱和非模态箱各有利弊:正确使用模态箱可以帮助用户一步一步完成操作，但频繁使用可能会干扰用户的操作过程。如果仅仅从用户流的角度来看，非模态框应该更友好一些，但是不能携带操作，有时容易被用户忽略。

因此，如何找到一个合适、正确的画框，需要设计师根据具体场景来细看。

本期主要了解平台规范下的模态箱和非模态箱的控制类型。在深入研究控件之前，我们必须首先了解每个控件自己的名称和使用代码。下一期我会深入分析优秀的框架案例。