移动端，各种弹窗被当作一种便捷的系统提示被广泛应用，但是关于不同弹窗有不同命名规范，根据我所看到的资料给大家稍微科普一下。不完整还望见谅 ;)

这次主要给大家说一下Toast、HUD、Alert、Snackbars区别

Toast

除了Android规范，在windows规范中也有Toast，但是定义不同。Toast在Android中的定义就是大家所熟悉的黑色半透明提示，而在windows的规范中Toast的概念几乎等同于Android的一条Notification。

windows与Android的Toast有着千丝万缕的联系，据说是因为微软前员工在开发MSN Messenger时，觉得MSN弹出方式很像烤面包（Toast）烤熟时从烤面包机

（Toaster）里弹出来一样，因此把这种提示方式命名为Toast，后来这位开发者带着这个习惯命名跳槽去了Google。

Toast优先适用于系统提示。它也在屏幕下方出现，但是不能被划出屏幕外（而被清除）。由于Toast的概念已经泛化，早已打破了Android的规范。在Android正统的规范中Toast是这样被规范的：

· 出现在屏幕底部

· 只有文字且无图标，文字要精简不宜过长

· 不是模态的，可以透过Toast对其他控件进行操作

· 短时间后会自动消失

· 不能对Toast进行交互，不能手动操作让Toast消失

来看看被开发者“玩坏了”的Toast样式，例如：出现在屏幕中间，带图标，模态层，可通过操作让其主动消失。

目前在移动平台里，似乎所有半透明矩形提示和反馈都可以被称作Toast。连iOS官方的Apple Store App都开始使用类似Toast的控件。

HUD

实际上，在IOS中是没有Toast这个控件的，但IOS系统中也有类似于Toast的样式，例如IOS的音量调节提示。IOS把这个组件叫做UIProgressHUD，但是这个是系统私有，第三方app无法直接使用，因此出现了各种模仿它的第三方控件，例如MBProgressHUD、SVProgressHUD，从此以后HUD就成了IOS开发者里达成共识的半官方语言。

iOS的HUD与Android的Toast的区别有：

· HUD出现在屏幕的中央，Toast在底部；

· HUD可以有icon，Toast不能有icon，只能用文字；

· HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；

· HUD中内容可以变化（如调节音量时），Toast中内容不可变化。

Alert

在iOS的设计规范以及Android的MD规范中，都有警告框（Alerts）这个组件。保证提醒对话框的内容都是必要且可操作的。提醒对话框会打断用户的体验并且要点击才会消失，所以要让用户感到提醒信息是有用的，打断是有价值的。

它们都有共同两个特点：

1.都出现在页面的中央且自带蒙层

2.警告框的选项通常为两个，且应避免“是／否”这样的选项，选项明确告知用户操作的结果。

Google Material Design对于Alert是这样说的：

“警告框是一种紧急的打扰（提示），以告知用户一个发生了的情况。”警告框可以看作是操作的确认，可以理解为操作的“最后一步”，只有当用户点击了“确认”按钮这个操作才算是真正完成。

iOS Human Interface Guideline对于Alert是这样说的：

“警告框 传达了你的应用或设备某种状态的重要信息，并且常常需要用户来进行操作。”

规范中，对警告框包含的元素有这样的规定：标题必选、描述信息可选、输入框可选、按钮必选。同时，警告框模式都是磨砂效果圆角白框。

另外，苹果官方还给了两个原则：

1.尽量少使用，只用在重要场景下，确保了它能够引起用户足够重视；

2.确保警告框在竖屏、横屏条件下都显示正常。

Snackbars

包含一行与进行的操作直接相关的文案（文案前不可有icon）。

Snackbar可以理解为是加强版的Toast。

样式和规则与Toast非常相似，不同主要有两点：

1.Snackbar支持主动滑动关闭；

2.Snackbar可以附带一个操作（也可以不带）。

提示的文案要简短，包含的操作按钮最多只有一个，或者没有。（注意，snackbar不能包含使其消失的“取消”按钮！）。

如果出现了一个snackbar，这时候用户进行了操作，需要出现另一个，则第一个snackbar从上向下退出，之后第二个snackbar从下向上出现。

以上都是Google Material Design对Snackbar的定义。

虽然这些提示控件有很多方便之处，帮我们节省了一些设计成本，但是由于这些控件的应用，有时候一个产品不停的弹出提示框，这样反而对用户体验带来很大的阻塞感，所以要适当运用。

只是对以上几个提示控件做一个简单描述，以方便日后我们在与前端工程师或pm对接的时候，我们可以清晰的判断该用什么提示控件，如果想要细致理解的同学可以自己去延展哦～