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

一、什么是Banner

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

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

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

位置不同：Snackbar通常顯示在頁面底部，Banner通常顯示在頁面頂部。

干擾度會更強：Snackbar會自動消失，Banner則會固定展示，除非達成了使其消失的必要條件（條件可由設(shè)計師自定義）

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

視覺表現(xiàn)更弱：Dialog顯示時會用深色遮擋背景，并居中顯示在頁面中央，使用戶不得不將注意力全部集中于Dialog之上；Banner顯示時僅占據(jù)頁面頂部，形成局部的視覺干擾。

干擾度更弱：Dialog持續(xù)期間會禁止用戶進行其它頁面操作，而Banner持續(xù)期間則不會影響用戶進行其它操作。

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

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

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

二、Banner的常見樣式

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

1. 窄屏樣式

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

2. 寬屏樣式

注意控制文案字數(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ū)。

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

七、Banner的幾點“不要”

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

八、使用范例

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

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

其它傳送門：還在用Toast？快試試更好用的Snackbar！

最后感謝閱讀，有問題歡迎隨時聯(lián)系哦～

本文由 @愚者秦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議