toast弹窗_常见的弹窗及应用-Action sheet、Modal、Toast、浮出层

在交互设计的过程中，发现关于弹窗的应用，大家不是很明确，应用起来大部分是看美观：这个操作太多了，用弹层吧；这个操作只有一个按钮，用对话框吧；这个提示不重要，用toast吧...

Action sheet、Modal、Toast都是什么呢？我们实际的应用场景是什么样的呢？

首先，我们来明确一个概念，什么是模态对话框？什么是非模态对话框？

模态对话框&非模态对话框

区别是模态还是非模态的对话框，通过用户是否需要对对话框的内容必须进行响应。

用户想要对对话框以内的应用程序进行操作时，必须首先对该对话框做出响应的是模态对话框。

模态对话框尝尝伴随着半透明遮罩层，用来突出模态框内的内容

了解了模态对话框的概念，接下来我们来了解一下Action sheet、Modal、Toast和浮出层

动作面板（Action sheet）

动作面板指的是底部弹出的弹窗，提供当前场景两个以上的操作动作。支持加标题和描述，这些内容的样式基本上是固定的，不支持灵活的修改。

在动作面板的应用时，需要注意：

1、要有明显的退出/取消按钮

2、对于破坏性的操作，高亮展示（删除/清空这类的操作）

3、上图展示了两种类型的动作面板，如果操作都是纵向展示的，如图一，内容不放置过多，避免出现纵向的滚动条，最多放置6个；如果操作较多，可以采用横向放置的方法，如图二所示，可以横向进行滚动，虽然横向允许滚动，但是操作也不宜过多

4、一般动作面板我们采用非模态的形式，就是说，一般的动作面板，都可以通过点击蒙层部分进行关闭，除了一些特殊的应用场景

对话框（Modal）

对话框用作显示系统的重要信息，并请求用户进行操作反馈。对话框是一种模态的形式，即用户必须要对对话框上的内容作出反馈，才能进行其他操作。因此对话框常用在用户进行了敏感操作，或者当App内部发生了较为严重的状态改变，这种操作和改变会带来影响性比较大的行为结果，用对话框的形式让用户必须作出选择。

较多应用场景：退出、删除、评分

在对话框的应用中，需要注意：

1、尽可能少用，因为对话框这种模态的形式会打断用户的操作，所以只用在重要的时候

2、标题简明，不能超过1行；描述简明，一般不超过2行。能够让用户迅速的明白打断我操作的弹窗在说什么，需要怎么操作才能继续之前的操作

3、对话框的操作按钮最多有3个，如上图所示 竖排；大部分都是1~2按钮，如上图所示 横排。如果超过了3个，一般采用动作面板的形式（动作面板也是可以做成模态形式的哦~）

4、在放置操作按钮的时候，把希望用户点击的、用户最可能点击的按钮放在右侧，把取消始终放在左侧

因为对话框大多数在用户操作某内容的时候弹出的，除了一些误触的情况，大部分是希望能顺利进行到下一步的，所以把对话框的流程操作放在右侧，把取消（关闭弹窗）放在左侧；对话框的文案表达要精确，在操作的位置，不用是/否这类词，会让用户操作成本增加

轻提示（Toast&HUD&Snackbar）

toast是一种轻量的反馈/提示，用来提示不会打断用户操作的内容，适用于页面转场、数据交互等场景；HUD是ios系统特有的一种比toast要稍微明显一些的轻量的反馈/提示，HUD一般是除了文案还带一个icon或者动画效果，也不会打断用户的操作；Snackbar是安卓系统特有的一种轻量的反馈/提示，在安卓系统内应用的时候，Snackbar一般展示在页面的底部，除了有提示还能与用户进行简单的交互（有一个按钮进行操作）

在轻提示的应用中，需要注意（下文中的轻提示都用toast代替）：

1、一次只显示一个toast

2、有icon的toast字数4~6个，没有icon的toast字数不超过14个

3、toast默认提示为3秒

浮出层

浮出层是一种暂时性的视图，一般为非模态的形式，承载轻量操作或是功能的入口

在浮出层的应用中，需要注意：

选项不要太多，尤其是竖排的形式，2~5个；横排的按照屏幕宽度显示，显示不下的部分用右箭头隐藏展示。

参考文章
移动弹窗基础知识浅析——IOS弹窗体系
四种常见的App弹窗设计：Toast、Dialog、Actionbar 和 Snackbar
A Mobile Design Specification