@龍爪槐守望者 ：經常能看到在很多 App 的 Navigation Bar（iOS 叫導航欄，安卓叫 App Bar /應用欄）下方、列表上方或者頁面底部懸浮著一個橫幅。這些橫幅通過某個事件觸發而出現，能常駐顯示直到事件結束，并且通常可以操作。翻遍 iOS Human Interface Guidelines 和 Material Design 都找不到這個控件，這個控件可能叫 Notice Bar（通告欄）。

△ 這個控件可能叫 Notice Bar（通告欄）

往期回顧：

1. 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
2. 《「這個控件叫什么」系列之加載占位圖+頁面指示器》
3. 《「這個控件叫什么」系列之步進器+SWITCH》
4. 《「這個控件叫什么」系列之TOAST》
5. 《「這個控件叫什么」系列之虛擬鍵盤/軟鍵盤/SOFT KEYBOARD》
6. 《「這個控件叫什么」系列之動作菜單/動作面板》
7. 《「這個控件叫什么」系列之Popover/氣泡彈出框/彈出式氣泡》
8. 《「這個控件叫什么」系列之輸入框/文本框/Text fields》

一、名稱來源

Notice Bar 的出現有其必然性，我們知道交互設計中給予用戶合適的反饋是非常重要的。比如通常用作輕量反饋的 Toast，出現時間短，不打斷用戶當前操作；或者強制用戶做出選擇，才關閉的模態對話框（Modal dialog）；還有進度條，必須等到100%才能繼續下一步；以及系統推送通知，雖然通知推送的瞬間很醒目，但如果用戶不馬上處理，收納到消息中心后被點擊的可能性就降低很多了。顯然，我們還缺少一種控件，即不打斷用戶當前的任務，又足夠明顯能一直引起用戶的關注。

△ 反饋矩陣

其實早在 Web 時代，就有這種控件了，通常叫做 Notification Bar 或者 Information Bar。

△ Slack 用 Notification Bar 提醒用戶打開桌面通知

△ 上古時代 IE 的 Information Bar

但因為早年間 Android 把通知抽屜（Notification drawer）就叫 Notification Bar（通知欄），如果再以此概念稱呼，極易造成混淆。

△ 搜索 Notification Bar（通知欄）出來的都是 Android 的通知抽屜

我發現螞蟻金服的 Ant design 將其稱呼為 Notice Bar（通告欄），之后有贊的 ZanUI 也使用了這個名稱，隨著越來越多的開發者認可，也許最后這個控件就真的叫 Notice Bar（通告欄）了。

二、如何使用

Notice Bar 一般用于活動提醒或者系統權限申請等吸引用戶關注但又不強制用戶去處理的場景。

1. 醒目的區分不同類型

如果你的 App 中有用于警告、溫馨提示、活動促銷等不同的 Notice Bar，可用顏色和圖標進行區分，便于用戶形成視覺記憶，快速辨識通告類型。

△ 用顏色和圖標進行區分

2. 不要附加太多操作

一條 Notice Bar 只描述一個事件，通常點擊后提供處理這個事件的頁面，最多再提供一個關閉 Notice Bar 的按鈕。不要在 Notice Bar上附加太多操作，增加用戶選擇負擔。

△ 要么開啟提醒、要么關閉通告欄

3. 多橫幅的優先級

如果多個事件觸發了不同的 Notice Bar，應當為其定制優先級，防止排序跳動對用戶閱讀產生干擾。

△ 微信多個 Notice Bar

4. 文字超長處理策略

如果文字超長，除了末尾省略和折行外，還可以使用滾動輪播的方式顯示。

△ 滾動輪播的 Notice Bar

三、相關資料

1. 把 Notice Bar 和進度條整合

對大文件或多個小文件進行操作非常耗時，而且很有可能中途失敗。百度云 iOS 版把復制進度條做成 Notice Bar，微軟 OneDrive 用 Notice Bar 做上傳進度，這樣文件操作狀況能隨時了解，出問題能馬上解決，而且不影響同時進行的其他任務。

△ 百度網盤、OneDrive

歡迎關注作者的微信公眾號：「龍爪槐守望者」

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com