【干货贴】关于提示框的那些事儿
在日常工作中我们经常会看到各种类型的提示框，在官方的规范里，它们都有各自的叫法以及用法，什么场景下用什么样的提示框，也早已有了定义。只是有些提示框类型极其相似，难免有人会在工作中将其归错类别。长此以往，反而会忘记它原本的样子。
一、提示框的作用
在细分提示框的种类之前，我想先说一下它的作用，提示框作为一个界面中的一个必不可少的组件，肯定是有它存在的独特的意义，独一无二，无法取代。提示框主要的作用有三个:
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 内的不同提示框需要在视觉上保持统一，要有章法可循。
参考链接：
https://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html Snackbars 与 Toasts
https://wiki.jikexueyuan.com/project/material-design/components/dialogs.html 提示框(Dialogs)
海盐社（公众号）
作者：橙子的橙子
