當你需要展示一段持續提示，卻又不想打斷用戶操作。用 Dialog 彈窗會打斷用戶操作，Toast 又不夠明顯，Snackbar 會自動消失，顯然這些都不符合要求。那么不妨就來跟我一起認識下能滿足該要求的 Banner 控件吧。

往期回顧：

• 《交互控件科普系列！Snackbar 的常見樣式和設計注意事項總結》
• 《交互控件科普系列！ Sheet 的常見樣式和設計注意事項總結》
• 《交互控件科普系列！Dialogs 的常見樣式和設計注意事項總結》

什么是Banner

這里的 Banner 并非是我們在電商、視頻網站上常見的焦點圖，而是 Material design 規范中推薦使用的一種提示控件，我們可以將其譯為橫幅提示。

Banner 控件通常用于輕度干擾的消息提示，該消息會對用戶形成視覺干擾但不會阻斷當前操作，用戶可以選擇忽略它或稍后再進行操作。

上篇文章為大家講解了比 Toast 更好用的 Snackbar，Banner 與 Snackbar 一樣同屬提示控件，但二者的不同之處在于：

• 位置不同：Snackbar 通常顯示在頁面底部，Banner 通常顯示在頁面頂部。
• 干擾度會更強：Snackbar 會自動消失，Banner 則會固定展示，除非達成了使其消失的必要條件。

△ 左為Snackbar，右為Banner

Banner 與另一個大名鼎鼎的提示控件 Dialog（彈窗）對比，二者的不同之處在于：

• 視覺表現更弱：Dialog 顯示時會用深色遮擋背景，并居中顯示在頁面中央，使用戶不得不將注意力全部集中于 Dialog 之上；Banner 顯示時僅占據頁面頂部，形成局部的視覺干擾。
• 干擾度更弱：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 在消息列表頁告知網絡異常狀態，用戶可以點擊去查看詳細問題，也可以選擇去查看本地已緩存的消息內容，在網絡恢復正常時自動消失。

歡迎關注作者的微信公眾號：「愚者筆記」