子弹盒是一种重要的交互方式，主要用于完成信息传输和用户反馈两个功能。子弹盒很常见，但是每个看不到它的设计师都能100％理解子弹盒的概念。本文是对子弹盒系统的简单梳理和总结，希望能够解决每个人心中的疑虑。

我们每天谈论的子弹盒是一个非常普遍的概念。所有对话框，浮动图层和提示栏都通常称为子弹框。事实上，我们可以将子弹盒分为两种类型：模态框架和非模态框架。

模态框架

模态帧和非模态帧之间的最大区别在于是否强制用户交互。模态框架将中断用户当前的操作过程。如果用户未对框架进行操作，则不会使用其余功能。从这个方面，我们可以看出模态框架的优缺点非常明显：优点是可以很好地获得用户的视觉焦点，缺点是用户当前的操作流程被中断。模态框架是一种重量反馈，通常用于用户的重要操作。常见的模态框架类型是对话框（Dialog/Alter），操作栏（Actionbar/Actionsheet/ActionView）和浮动图层（Popover/Popup）。因为iOS和Android的许多组件现在都很常见，所以我将在下一篇文章中介绍一个过于相似的组件。

对话框

对话通常用于用户执行非常重要或有风险的操作。将弹出一个对话框，提示用户输入信息。用户将根据提示判断。它通常出现在屏幕中间并阻止界面的主要内容。

目前，对话框的设计风格很多，用户可以输入信息，也可以用于营销宣传。

行动栏

在我看来，操作栏可以看作对话框的增强版本，因为警报和对话框只有两个按钮。操作栏可以提供多个功能按钮，显示的风格也各不相同。

但是，也有例外，操作栏只有两个选项。以网易云音乐为例。如果要删除歌曲，可通过操作栏完成“确认删除”提示（如左图所示）。事实上，这里使用对话框也是完全可以的（如右图所示），我认为网易云音乐设计师在这里使用动作栏的原因尚不清楚。但我个人的猜测是，操作栏位于屏幕的底部，界面的封面相对较小。

浮动图层

浮动层是半透明临时视图，用户单击控件或界面区域。浮动层的样式类似于操作栏的样式，并且两者都可以向用户显示多个功能选项。但浮动图层可以出现在屏幕上的任何位置，从而为用户提供更具方向性的提示。

接下来，我们可以做一个总结：对话框适合用户判断操作而不考虑信息输入，动作栏和浮动层适合用户执行选择操作，浮动层是更有针对性的行动吧。

非模态子弹盒

与模态帧相比，非模态帧之间的最大区别在于不强制用户交互，并且不会弹出半透明背景层。一段时间后，非模态框架消失。因此，与模态帧相比，非模态帧是轻量级反馈，并且不会对用户造成太多干扰。常见的非模态墨盒是烤面包（hud）和零食吧。

吐司

Toast主要用于在用户完成操作后告诉用户操作结果或状态变化。 Toast实际上是Android的一个组件。在iOS中，有一个类似的hud。最常见的是音量调节提示。但是现在iOS和Android之间的界限不断被打破，而吐司现在被广泛用于iOS界面设计中。如果我们去看看Android提供的设计规范，我们会发现toast具有以下特征：

1仅出现在屏幕底部

2只能放文字

3个非模态子弹盒

但是我们会发现一些吐司可以出现在屏幕的任何地方，也可以添加图标，所以教条主义已经死了。我想到前端告诉我的话，“只要你能设计它，我们都可以在理论上做到，但我们可能会破坏人。 ”的

事实上，真正的吐司可以出现在屏幕上的任何地方，并且您可以添加图标，甚至可以更改背景图层颜色。所以我认为设计师不仅要看这些设计规范，还要花一些时间与开发沟通。

Toast的优势在于它不会中断用户当前的操作过程，并且是一种轻量级的反馈方法。缺点是用户容易忽视它并且不适合显示太多的信息，这些信息可能在用户完成阅读之前消失。为了提高信息的可读性并增加风格的美感，吐司现在使用文本和图标的组合。

小吃吧

Snackbar通常由文本和功能按钮组成。用户可以单击按钮进行交互，即使用户没有点击快餐栏，它也会自动消失，通常在屏幕的底部。在流行的意义上，我们可以将小吃吧视为带有图标的烤面包。

Snackbar我把它放在最后，因为它非常特别。虽然小吃店是非模态框架，但它也具有模态框架的一些特征。例如，小吃店还有用于用户交互的按钮;此外，小吃栏通常​​出现在界面下方，类似于操作栏中的操作表。

如果你不明白你上面写的是什么，那没关系。让我为您做一个总结：非模态子弹盒强调信息提示，模态子弹盒既可以告知信息又可以用户交互; toast是一种轻量级的子弹盒，小吃吧设定了家庭的优势。你说它看起来不像我。

子弹框架系统建立的优化

上面我们已经了解了子弹盒的几种主要风格和用法。接下来，我们将考虑如何为产品构建子弹盒系统或如何优化现有产品的子弹盒系统。实际上，子弹框架系统的建立和优化的原理可以用一句话概括：它可以在不使用子弹框架的情况下在界面中显示，并且可以在没有模态框架的情况下使用非模态子弹框架。

因为任何子弹盒都会对用户造成干扰，即使是最轻的吐司。从用户体验的角度来看，操作过程引起的干扰必须尽可能小。例如，用户可能不知道“速度间隔”和“速度稳定性”的术语，因此他们将点击“问号”图标。

目前我们有3个解决方案：

1通过新界面显示。但是我们可以看到没有太多信息需要解释，也没有必要通过新页面显示它。

2使用对话框或浮动图层，我们不能在这里使用Toast，因为Toast时间太短，用户无法完成阅读。

3显示在当前界面上。

事实上，在我看来，情景2和3是一个很好的解决方案。但考虑到减少用户干扰和操作步骤，我认为方案3在这里更好。

多态按钮

此外，使用多状态按钮还可以帮助我们解除子弹盒的压力。例如，支付宝的支付界面，即时支付按钮可以跳转到成功支付的状态，那么就没有必要使用子弹框来提示用户。

确定优先顺序

具有不同优先级的信息应该具有不同的视觉权重，因此具有最大视觉权重的模态框应该显示重要内容。因此，我们需要对需要显示的信息进行优先安排，以便真正重要的信息可以使用模态框架。只有低频率和合理使用，用户才会认真对待。过度使用会给用户带来“狼来了”的心理。

总结

由于许多交互设计条款不统一，很多人在子弹盒类型的定义上有很大差异。本文是从我个人的角度总结，希望对大家有所帮助。如果您有任何想法，请留言或留言。

« Pig Eight Rings Platform“Store Home”修订版1.0 | “互联网+潜水之旅”麒麟公司即将诞生？ - 与潜水猫平台的访谈 »