起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識彈窗提示太強，Toast又太弱？不妨來試試Banner吧！
當你需要展示一段持續提示卻又不想打斷用戶操作時，用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的幾點“不要”
- 不要同時展示多個banner，每次僅展示1個；
- 按鈕不要使用text button之外樣式，因為會過強；
- 不要使用2個以上的按鈕，若確實需要，請考慮使用Dialogs；
- 按鈕文案不要使用“忽略”或“取消”文案，取消文案應當與信息內容相匹配。
八、使用范例
Teambition利用Banner在首頁進行新版本提示，用戶可以點擊去查看新版本更新內容，也可以選擇稍后查看或置之不理。
微信同樣利用Banner在消息列表頁告知網絡異常狀態，用戶可以點擊去查看詳細問題，也可以選擇去查看本地已緩存的消息內容，在網絡恢復正常時自動消失。
其它傳送門：還在用Toast？快試試更好用的Snackbar！
最后感謝閱讀，有問題歡迎隨時聯系哦～
本文由 @愚者秦 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
這不就是Noticebar嗎？
贊??