一、提示框的作用

在细分提示框的种类之前，我想先说一下它的作用，提示框作为一个界面中的一个必不可少的组件，肯定是有它存在的独特的意义，独一无二，无法取代。提示框主要的作用有三个:

1. 提醒用户

在用户操作时，给予提醒，特别是一些操作会影响到用户的利益的时候，去提醒他们，做二次确认，减少因为误操作而带来的损失。

2. 选择权

进行重要的操作，比如删除所有订单，且删除后不可复原等时，把选择权给用户自己，让他们自己决定当前的操作是否进行下去。

3. 知情权

告知用户当前所发生的事情，让他们对当前状态有一个预估，知道发生什么事情，有知情权。

二、提示框的种类

提示框的种类按照不同的纬度划分的话，特别多。所以我以一个最简单的纬度，模态和非模态，模态框指的是，当它出现的时候，用户必须对其进行操作，确定或者取消，才能关闭它，进行下一步。而非模态框则指的是不需要用户进行操作，它自己会在设定的时间内，自动消失，用户只能等待它自己默默的消失。

1. 模态对话框 —— Dialogs

关于Dialogs，Material Design 是这样说的：“Dialogs (提示框)用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。 Dialog可以是用一种 取消/确定 的简单应答模式，也可以是自定义布局的复杂模式，比如说一些文本设置或者是文本输入 ”。

简单来说，就是 Dialog 主要是去提示用户当前页面需要去做选择，而用户必须对提示框的内容进行响应，才能进行其他的操作。

Dialog 一般包含标题、内容区域、操作区域

操作区域一般是有两个功能按钮，通常是一个肯定的事件和否定(与肯定的事件对立)的按钮组成。一般积极的、肯定的、或者说产品希望用户做的选择，会放在右边。肯定的事件也可以是具有破坏性的，比如“删除、放弃”等。

肯定事件和否定事件除了可以使用”确认”/”取消”外，也可以是其它一些动词或者是动词短语来代替，比如“升级、点错了”等。

延展 —— 自定义提示框

当然也有只包含一个功能按钮的情况，这个时候需要注意的是弹出的消息是否重要到非要用户点击确认，如果是，那就用 Dialog，如下图微信，就是默认的只有一个功能按钮的 Dialog，如果不是，可以考虑用其他的，比如 Toast。

由于 Dialog 的强制要求用户进行操作，多少会让用户在体验上有所不适，所以就在 Dialog 的基础上延展出了其他的样式。这种提示框和也有操作按钮，它和 Dialog 最大的区别就是点击操作按钮，或者提示框外的任何位置，都可以关闭该提示框，降低了关闭提示框的难度。但它不算严格意义上的 Dialog。

现在比较多的用在自定义的提示框上，比如一些运营活动之类的，自定义的提示框能更好的传达内容，从而吸引用户点击。

特殊情况

如果 Dialog 出现三个或以上的功能框，会增加用户的选择负担，而且横向显示的话在视觉上也显得拥挤，所以就有了一个由 Dialog 延伸出来的 Actionbar，它比 Dialog 拥有更多的功能按钮，能够给用户提供更多的功能选择

Acionbar 一般都有一个默认的“取消”功能按钮，当然也可以没有，点击该按钮后关闭弹框，用户点击弹窗以外的区域时相当于点击了“取消”按钮，也会关闭弹框。

当功能按钮数量过多时，文字列表的形式不适合展示，可以用图形加文字的形式来展示。

2. 非模态对话框 —— Snackbar

关于Snackbar Material Design是这样说的：“Snackbar 是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能显示一个 Snackbar”。

简单来说 Snackbar 是介于 Dialog 和 Toast 两者之间的一种轻量级反馈机制，以文本形式存在，可以包含0-1个操作，不能是取消按钮 。

当只有文本形式出现的时候，形式和 Toast 一样，不需要用户进行操作，等默认时长结束后会自动消失；不过它比 Toast 多的一点是，用户可以在屏幕上滑动将它关闭。

需要注意的是 Snackbar 不应该持续存在或相互堆叠，也不要阻挡了浮动操作按钮。

延展 —— 引导浮层

由于 Snackbar 太受限制，不能有图标，只能以文本形式存在。在现在的 APP 里用的越来越少，少到都找不到什么例子。而现实中又需要一种介于 Toast 和 Dialog 之间的一种轻量级的操作提示。所以就延伸出了另外一种样式，暂且将它归为“引导浮层”吧。

引导浮层和 Snackbar 最大的区别是，它可以有图标、图片，甚至还可以引导用户去新的页面，这也是它更有欢迎的原因所在。

3. 非模态对话框 —— Toast

关于 Toast Material Design 是这样说的：“Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕上滑动关闭”。

简单来说 Toast 主要的作用是对用户当前的操作给予反馈，用户不需要对弹框的内容进行响应，相对的也无法对它们做出控制，只能等它设置的默认时长结束，自动消失。它可以出现在页面的任何位置，可以是纯文本的，也可以是图形带文本的。

三、特别说明

提示框的作用是用来提示信息的，但不是所有的提示信息都需要用到提示框的，因为提示框怎么的都会 “打扰” 到用户的操作，所以能有别的解决方式的时候，优先考虑别的方式。

提示框存在的有一个原因就是在用户犯错之前及时制止他，所以如果有其他的方式能够在提示框出现之前就规避错误，优先使用。比如密码那一行有一个小眼睛的icon，点击之后显示密码，当用户认为自己没有输错密码，但却提醒密码错误时，多次尝试来找到错误所在不如直接点击显示密码的 icon 体验来的好。

再比如像支付宝的这种，把提示信息放置在按钮上，这样就避免提示框的出现打扰到用户的操作，而且放置在按钮上更加明显，也不会被用户忽略。

四、总结

1. 提示框的三个作用

提醒用户，在他们犯错之前及时制止；

给用户选择权，让他们自己决定当前的操作是否进行；

告知用户当前所发生的事情，让他们对当前状态有一个预估，知道发生什么事情，有知情权

2. 提示框类型以及区别

Dialog —— 模态对话框，需要用户对当前内容进行操作，不会自动消失，会打断用户的之前的操作流程；

Snackbar——非模态对话框，用户可以对当前内容进行操作，也可以等它自动消失，不会打断用户的当前操作；

Toast —— 非模态对话框，用户无法对当前内容进行操作，只能等它自动消失；

3. 不要滥用提示框

提示框出现的时候怎么都会打扰到用户的当前操作，所以能有别的方法时候，优先使用其他的提示方式；

4.视觉统一

同一个 APP 内的不同提示框需要在视觉上保持统一，要有章法可循。