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

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


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

名稱來源

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一般用于活動提醒或者系統權限申請等吸引用戶關注但又不強制用戶去處理的場景。

醒目的區分不同類型

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


用顏色和圖標進行區分

不要附加太多操作

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

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

多橫幅的優先級

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


微信多個Notice Bar

文字超長處理策略

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


滾動輪播的的Notice Bar

相關資料

把Notice Bar和進度條整合

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


百度網盤、OneDrive








《這個控件叫什么》專題

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 用到的組件 1、通過CocoaPods安裝 2、第三方類庫安裝 3、第三方服務 友盟社會化分享組件 友盟用戶反饋 ...
    SunnyLeong閱讀 14,700評論 1 180
  • 原文鏈接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影閱讀 32,965評論 6 472
  • 走在通往金光寺的路上 陽光在臉上打轉 柴堆上蒙覆了充滿煙火味的殘雪 湮沒于雪中的是高高的稻草垛以及未收獲的玉米棒 ...
    青藍花朵閱讀 360評論 0 0
  • “第一次打開游戲請允許“使用數據”,否則游戲無法正常運行。” 2017手游巔峰之作,獨家發布,官方正版! 【游戲特...
    流云追風閱讀 1,350評論 0 0
  • 根生今年七歲。上小學。 我們每個人或多或少都有一些癖好,比如很喜歡殺蟲劑的味道、用衛生紙一定要對折得很整齊、一首歌...
    喬恩熙閱讀 1,152評論 0 1