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

往期回顧：

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

什么是Banner

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

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

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

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

△ 左為Snackbar，右為Banner

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

• 視覺表現(xiàn)更弱：Dialog 顯示時會用深色遮擋背景，并居中顯示在頁面中央，使用戶不得不將注意力全部集中于 Dialog 之上；Banner 顯示時僅占據(jù)頁面頂部，形成局部的視覺干擾。
• 干擾度更弱：Dialog 持續(xù)期間會禁止用戶進行其它頁面操作，而 Banner 持續(xù)期間則不會影響用戶進行其它操作。

△ 左為Dialog，右為Banner

因此綜上所述，三個提示控件的干擾度從強到弱排序可以視為：Dialog>Banner>Snackbar。

那么當(dāng)我們需要給予用戶一些長時間顯示，且不需打斷用戶操作的提示時，Banner 絕對是你的最佳選擇，此外 Banner 還可以兼容 1-2 個次要操作，也是兼具提示與操作功能的好幫手。

下面就由我來為你詳解 Banner 控件的一些特性和玩法吧。

Banner的常見樣式

Banner 的樣式可以根據(jù)設(shè)備的寬度進行適配改變。

1. 窄屏樣式

注意控制文案字?jǐn)?shù)，保持單行展示，按鈕展示不下時允許折行顯示。

2. 寬屏樣式

注意控制文案字?jǐn)?shù)，保持單行展示。

Banner的顯示與消失機制

1. 顯示

Banner 通常在屏幕加載內(nèi)容時出現(xiàn)，加載后出現(xiàn)的 Banner 會從頂部向下滑出顯示。

2. 消失

Banner 必須保持顯示在屏幕上，直到自定義消失邏輯被滿足時才會消失。

Banner的顯示位置

當(dāng)頁有 Top app bar 或 Search bar 時，顯示在其下方（不可發(fā)生重疊）。

當(dāng)頁無 Top app bar 或 Search bar 時，顯示在 Status bar 下方（不可發(fā)生重疊）。

Banner的層級關(guān)系

可設(shè)置 Banner 層級高于頁面內(nèi)容，Banner 從頂部向下滑出顯示時會遮擋下方內(nèi)容；當(dāng)頁面內(nèi)容向上滑動時，Banner 會固定在頂部。

可設(shè)置 Banner 與頁面內(nèi)容同一層級，Banner 從頂部向下滑出顯示時會將內(nèi)容向下推移；當(dāng)頁面內(nèi)容向上滑動時，Banner 也會跟隨滑出屏幕（不會消失）。

當(dāng)頁使用 Navigation drawer 時，Banner 會被展開的抽屜導(dǎo)航遮擋。

Banner的點擊熱區(qū)

當(dāng)承載 2 個操作時，設(shè)置對應(yīng)操作按鈕為點擊熱區(qū)。

僅承載 1 個操作時，可設(shè)置對應(yīng)操作按鈕為點擊熱區(qū)，也可設(shè)置整行 banner 為點擊熱區(qū)（應(yīng)用內(nèi)需保持交互統(tǒng)一）。

Banner的幾點「不要」

• 不要同時展示多個 banner，每次僅展示 1 個；
• 按鈕不要使用 text button 之外樣式，因為會過強；
• 不要使用 2 個以上的按鈕，若確實需要，請考慮使用 Dialogs；
• 按鈕文案不要使用「忽略」或「取消」文案，取消文案應(yīng)當(dāng)與信息內(nèi)容相匹配。

使用范例

Teambition 利用 Banner 在首頁進行新版本提示，用戶可以點擊去查看新版本更新內(nèi)容，也可以選擇稍后查看或置之不理。

微信同樣利用 Banner 在消息列表頁告知網(wǎng)絡(luò)異常狀態(tài)，用戶可以點擊去查看詳細(xì)問題，也可以選擇去查看本地已緩存的消息內(nèi)容，在網(wǎng)絡(luò)恢復(fù)正常時自動消失。

歡迎關(guān)注作者的微信公眾號：「愚者筆記」