toast弹窗_移动端控件（四）-提示信息小部件(1)Toast/HUD/Snackbar/Noticebar

前言

“提示信息小部件”是笔者自己的提法，这里主要指需要提示用户一些重要或不重要的信息，或者对用户操作的反馈。前两篇文章所提到的Popover、弹窗（Alert）、Action sheet皆属于信息提示的控件类型。而本节主要讲Toast/HUD、Snackbar、Noticebar、Banner、Badge，之所以把他们几个控件放在这一节来讲，是因为他们主要作用是提示用户信息，对用户的打扰又不如弹窗、Action sheet那么强。

Snackbar与Toast、HUD

在最新版MD规范中，已经没有关于toast的介绍了，而是合并到snackbar里面。MD中对snackbar的描述是这样：Snackbar出现在屏幕底部，为应用进程提供简短消息。这里的snackbar包含了通常意义上的toast，又包含了比toast更加高级的带按钮的形式。

iOS规范中是没有toast、snackbar、banner的，另外笔者又仔细翻阅了最新版的iOS设计规范，发现连HUD也没有了，类似提示控件只有Feedback。然而，在实际应用中，随着iOS和Android的界限不断被打破，这些控件现在也被广泛应用于iOS界面设计中。

• Toast的用法：

1.出现在屏幕底部；
2.只能放文字不能带图标，文字要精简不宜太长；
3.不是模态的，可以透过Toast对其他控件进行操作；
4.短时间后会自动消失；
5.不能对Toast进行交互；
6.优先适用于系统提示，不能手动操作让Toast主动消失。

• HUD与Toast的区别：

1.HUD只出现在屏幕的中央，Toast则在底部；
2.HUD可以包含icon，Toast只能纯文字；
3.HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；
4.HUD中内容可以变化（如调节音量时），Toast中内容不可变化。

• Snackbar的用法：

1.由信息内容和一个功能按钮组成，位于屏幕最上层，可在屏幕上滑动关闭，或触控其他屏幕区域自动消失；
2.snackbar一般位于 屏幕下方（注意与Notice bar做区分）
3.提示的文案要 简短，包含的操作按钮最多只有一个，或者没有。（注意，snackbar不能包含使其消失的“取消”按钮！）；
4.一次只能出现 一个。如果出现了一个snackbar，这时候用户进行了操作，需要出现另一个，则第一个snackbar从上向下退出，之后第二个snackbar从下向上出现；
5.尽量 不要包含图标，如果非要用那最好用弹窗来提示；
6.按钮字体最好（颜色）突出展示（但是不要用填充式按钮）；
7.snackbar 不能覆盖导航栏或浮动按钮上。

Noticebar（通告栏）

这个在安卓和iOS设计规范中都没有对应的描述，在实际应用中却经常能够看到，比如后台网络状态、活动推送、发送（处理）状态……：

Noticebar位于一般位于屏幕顶部导航栏下方，可以说是snackbar的衍生体。不同的是它根据具体提示内容可选择始终显示或者操作消失，也就是说即不打断用户当然的任务，又足够明显能一直引起用户的关注。

• 用法：

1.消失机制：①大部分是需要操作才消失 ②一直显示，直到活动结束或者后台状态发生变化才消失 ③点击关闭按钮使其消失

2.可以堆叠，根据优先级进行排列，比如微信

3.文本较长时，可以滚动展示
4.一般位于顶部（导航栏下方）
5.展示样式较为灵活，常见样式：

所以总结来说，与snackbar的区别主要有三点：1.展示位置 2.消失机制 3.数量限制 4.展示形式，我们可以根据提示信息的级别来选择用snackbar还是noticebar。

参考文献：

https:// material.io/components/ snackbars/#
iOS开发常用之 HUD 弹窗
Noticebar ? Snackbar傻傻分不清楚
这个控件可能叫：Notice Bar/通告栏