当你需要展示一段持续提示却又不想打断使用者操作时，用Dialog弹窗会打断使用者操作，Toast又不够明显，Snackbar会自动消失，显然这些都不符合要求。那么不妨就来跟我一起认识下能满足该要求的Banner控制元件吧～
一、什么是Banner
这里的Banner并非是我们在电商、视讯网站上常见的焦点图，而是Material design规范中推荐使用的一种提示控制元件，我们可以将其译为横幅提示。
Banner控制元件通常用于轻度干扰的讯息提示，该讯息会对使用者形成视觉干扰但不会阻断当前操作，使用者可以选择忽略它或稍后再进行操作。
上篇文章为大家讲解了比Toast更好用的Snackbar，Banner与Snackbar一样同属提示控制元件，但二者的的不同之处在于（下图左为Snackbar，右为Banner）：
位置不同：Snackbar通常显示在页面底部，Banner通常显示在页面顶部。
干扰度会更强：Snackbar会自动消失，Banner则会固定展示，除非达成了使其消失的必要条件（条件可由设计师自定义）
Banner与另一个大名鼎鼎的提示控制元件Dialog（弹窗）对比，二者的不同之处在于（下图左为Dialog，右为Banner）：
视觉表现更弱：Dialog显示时会用深色遮挡背景，并居中显示在页面中央，使使用者不得不将注意力全部集中于Dialog之上；Banner显示时仅占据页面顶部，形成区域性的视觉干扰。
干扰度更弱：Dialog持续期间会禁止使用者进行其它页面操作，而Banner持续期间则不会影响使用者进行其它操作。
因此综上所述，三个提示控制元件的干扰度从强到弱排序可以视为：Dialog>Banner>Snackbar。
那么当我们需要给予使用者一些长时间显示且不需打断使用者操作的提示时，Banner绝对是你的最佳选择，此外Banner还可以相容1～2个次要操作，也是兼具提示与操作功能的好帮手。
下面就由我来为你详解Banner控制元件的一些特性和玩法吧～
二、Banner的常见样式
Banner的样式可以根据装置的宽度进行适配改变。
1. 窄屏样式
注意控制文案字数，保持单行展示，按钮展示不下时允许折行显示。
2. 宽屏样式
注意控制文案字数，保持单行展示。
三、Banner的显示与消失机制 1. 显示
Banner通常在屏幕载入内容时出现，载入后出现的Banner会从顶部向下滑出显示。
2. 消失
Banner必须保持显示在屏幕上，直到自定义消失逻辑被满足时消失。
四、Banner的显示位置
当页有Top app bar或Search bar时，显示在其下方（不可发生重叠）。
当页无Top app bar或Search bar时，显示在Status bar下方（不可发生重叠）。
五、Banner的层级关系
可设定Banner层级高于页面内容，Banner从顶部向下滑出显示时会遮挡下方内容，当页面内容向上滑动时，Banner会固定在顶部。
可设定Banner与页面内容同一层级，Banner从顶部向下滑出显示时会将内容向下推移，当页面内容向上滑动时，Banner也会跟随滑出屏幕（不会消失）。
当页使用Navigation drawer时，Banner会被展开的抽屉导航遮挡。
六、Banner的点选热区
当承载2个操作时，设定对应操作按钮为点选热区。
当仅承载1个操作时，可设定对应操作按钮为点选热区，也可设定整行banner为点选热区（应用内需保持互动统一）。
七、Banner的几点“不要”
Teambition利用Banner在首页进行新版本提示，使用者可以点选去检视新版本更新内容，也可以选择稍后检视或置之不理。
微信同样利用Banner在讯息列表页告知网络异常状态，使用者可以点选去检视详细问题，也可以选择去检视本地已快取的讯息内容，在网络恢复正常时自动消失。
其它传送门：还在用Toast？快试试更好用的Snackbar！
最后感谢阅读，有问题欢迎随时联络哦～
本文由 @愚者秦 原创释出于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
