經(jīng)常能看到在很多App的Navigation Bar(iOS叫導(dǎo)航欄,安卓叫App Bar/應(yīng)用欄)下方、列表上方或者頁面底部懸浮著一個橫幅。這些橫幅通過某個事件觸發(fā)而出現(xiàn),能常駐顯示直到事件結(jié)束,并且通??梢圆僮?。翻遍iOS Human Interface Guidelines和Material Design都找不到這個控件,這個控件可能叫Notice Bar(通告欄)。

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

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


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

我發(fā)現(xiàn)螞蟻金服的Ant design將其稱呼為Notice Bar(通告欄),之后有贊的ZanUI也使用了這個名稱,隨著越來越多的開發(fā)者認(rèn)可,也許最后這個控件就真的叫Notice Bar(通告欄)了。
如何使用
Notice Bar一般用于活動提醒或者系統(tǒng)權(quán)限申請等吸引用戶關(guān)注但又不強(qiáng)制用戶去處理的場景。
醒目的區(qū)分不同類型
如果你的App中有用于警告、溫馨提示、活動促銷等不同的Notice Bar,可用顏色和圖標(biāo)進(jìn)行區(qū)分,便于用戶形成視覺記憶,快速辨識通告類型。

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

多橫幅的優(yōu)先級
如果多個事件觸發(fā)了不同的Notice Bar,應(yīng)當(dāng)為其定制優(yōu)先級,防止排序跳動對用戶閱讀產(chǎn)生干擾。

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

相關(guān)資料
把Notice Bar和進(jìn)度條整合
對大文件或多個小文件進(jìn)行操作非常耗時,而且很有可能中途失敗。百度云iOS版把復(fù)制進(jìn)度條做成Notice Bar,微軟OneDrive用Notice Bar做上傳進(jìn)度,這樣文件操作狀況隨時了解,出問題能馬上解決,而且不影響同時進(jìn)行其他任務(wù)。

《這個控件叫什么》專題
這個控件叫:Badge/徽標(biāo)/小紅點
這個控件叫:A-Z index/字母索引導(dǎo)航
這個控件叫:Segment Controls/分段控件(附錄與Tabs的區(qū)別)
這個控件叫:Skeleton Screen/加載占位圖
這個控件叫:Page Indicator/Page Controls/頁面指示器
這個控件叫:Stepper/步進(jìn)器
這個控件叫:Switch/開關(guān)/滑動開關(guān)/切換開關(guān)
Toast(吐司提示)的曾經(jīng)、現(xiàn)在與未來
這個控件叫:Picker/選擇器/拾取器
這個控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
這個控件叫:Action Sheet/動作菜單/動作面板/行動列表
這個控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個控件叫:Text fields/輸入框/文本框