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

這個控制元件可能叫:Notice Bar通告欄

這個控制元件可能叫Notice Bar(通告欄)

名稱來源

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

這個控制元件可能叫:Notice Bar通告欄

反饋矩陣

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

這個控制元件可能叫:Notice Bar通告欄

Slack用Notification Bar提醒使用者開啟桌面通知

這個控制元件可能叫:Notice Bar通告欄

上古時代IE的Information Bar

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

這個控制元件可能叫:Notice Bar通告欄

搜尋Notification Bar(通知欄)出來的都是Android的通知抽屜

我發現螞蟻金服的Ant design將其稱呼為Notice Bar(通告欄),之後有讚的ZanUI也使用了這個名稱,隨著越來越多的開發者認可,也許最後這個控制元件就真的叫Notice Bar(通告欄)了。

如何使用

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

醒目的區分不同型別

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

這個控制元件可能叫:Notice Bar通告欄

用顏色和圖示進行區分

不要附加太多操作

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

這個控制元件可能叫:Notice Bar通告欄

要麼開啟提醒、要麼關閉通告欄

多橫幅的優先順序

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

這個控制元件可能叫:Notice Bar通告欄

微信多個Notice Bar

文字超長處理策略

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

這個控制元件可能叫:Notice Bar通告欄

滾動輪播的的Notice Bar

相關資料

把Notice Bar和進度條整合

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

這個控制元件可能叫:Notice Bar通告欄

百度網盤、OneDrive