APP交互設計中,什麼時候用Dialogs,什麼時候用Bottom Sheets?

APP交互設計中,什麼時候用Dialogs,什麼時候用Bottom Sheets?
底部動作條(Bottom Sheets)是一個從屏幕底部邊緣向上滑出的一個面板,使用這種方式向用戶呈現一組功能。底部動作條呈現了簡單、清晰、無需額外解釋的一組操作。

Dialogs提示框)用於提示用戶作一些決定,或者是完成某個任務時需要的一些其它額外的信息。 Dialog可以是用一種 取消/確定 的簡單應答模式,也可以是自定義布局的複雜模式,比如說一些文本設置或者是文本輸入 。
這是官方對兩種控制項的解釋,各位大大,實戰中如何使用兩種控制項,怎麼樣的使用環境?
例如

在同一個App中會不會出現AB兩種彈出框,A可不可以定義為Bottom Sheets?


iOS對此有比較明確的定義。

Alert(對應題主的Dialogs提示框)類似一個警報彈出於屏幕的中間,浮於其應用界面之上。警報以獨立的外觀強調了一個事實——它的到來是由於在應用程序或設備的一些變化(不一定是用戶最近的行動的結果)。用戶必須解除警報之後,才可繼續使用目前運行的應用。
Alert的出現有助於用戶認真考慮。

這就好像,當你在家裡看書時,突然電話響了,或者有人敲門。所以:
1、這個突然事件並不是關於你操作的下一個延續(比如翻頁)。
2、系統認為必須引起你的重視,而你必須處理好電話或敲門聲(忽略也是一種處理)再回去繼續看書。

從視覺上看來,Alert的視覺呈現暗示著它自己的特徵。Alert彈出即佔據屏幕的中心位置,彈出會強烈干擾用戶原來的視覺焦點,瞬間引起用戶的注意。而且面對Alert,用戶必須做出選擇後才能消失。輕觸非Alert區域(背景蒙黑處)並無法讓其消失

所以,在以下情況,建議使用Alert:
1、用戶必須注意與知情,做出選擇後才能回歸的消息。
2、在用戶沒有預期但需要詢問用戶才能繼續的警告。
3、系統級別的提示。
比如:「電量不足是否進入省電模式」 或 「該應用需要調用你的定位,是否同意?」。


Action Sheet (對應題主的Bottom Sheets)呈現一組與用戶發起的任務相關的選擇。一個Action Sheet不包括標題或解釋性文本,因為它在用戶操作的即時響應中出現。
這就類似你填寫銀行卡開戶信息時,你注意到郵寄賬單一欄時,後面緊跟著「是」與「否」兩個選擇。但如果你還猶豫不決,你完全可以先略過,絲毫不影響你填寫的流程。

從視覺上看來,Action Sheet的視覺呈現同樣暗示著它自己的特徵。Aciton Sheet並不會一下子干擾到用戶的視覺焦點。而是順著視覺焦點,再到底部(通常Action Sheet置於屏幕底部)。另外上方有空曠的蒙黑空白處,很容易看到上下文,並方便用戶輕觸縮回Aciton Sheet。

所以,在以下情況,建議使用Action Sheet:
1、提供多樣的選擇或方法來完成任務。
2、完成一個潛在危險的任務之前得到確認。

綜上所述,可以比較簡潔的區分:
在用戶有預期主動發起的任務時,哪怕不選擇都不影響任務進行時,建議使用Action Sheet;在用戶沒有預期但需要詢問用戶才能繼續的情況,比如警告強調等,使用Alert。

P.S. 其實沒有忘記Android。但Android的定義實在混亂,Alert(Android)= Alert(iOS)+Action Sheet(iOS),Action Sheet並沒有定義。通常情況下,我的設計方法是,Android彈出選項或菜單使用Action Sheet。因為當選項過多時,底部排列比居中排列更好擴展,放置滾動條不至於很奇怪。


其實你圖中列舉的例子是個 datepicker,不是能很好說明到底是用 dialog 還是 actionsheet 。

如果單純只是 datepicker 這個控制項,還是建議遵循平台的特性,用默認的樣式即可。iOS 就是類似actionsheet,Android 則是 dialog。當然如果只是時間選取,還可以更自由設計成其他的。

另外關於 dialog 和 actionsheet 的使用,我之前看過這篇文章:不要濫用對話框!細說 iOS Alert View 與 Action Sheet


這個問題上一個回答好捉急,不懂就別亂答啊。現在知乎都這麼不嚴謹。
總結:用戶主動發起的任務使用 Action Sheet,否則使用 Alert。
詳情:https://www.zhihu.com/question/35141228?


當屏幕空間比較大時,dialog 有時更合適。

On larger screens, where space is less constrained, using alternative surfaces and components such assimple dialogs and menus may be more appropriate than bottom sheets.(Google design guidelines)


更新:可以用iPhone的郵件應用,發郵件時,只發兩張圖片,不寫標題,Alert和Action Sheet 會接連出現,可以體會一樣。
----------------

Alert 重點是告知用戶重要信息,非必需情況不要使用。
例如:

(盜圖)


Action Sheet 重點是由用戶操作觸發,可以有兩個或兩個以上按鈕。
1、用於提供完成任務的不同方法。
2、用戶完成有風險的操作時,使用戶確認操作。
例如:


推薦閱讀:

我想知道這種不同空間中字體怎麼做才可以從一個角度看是平面化的?
如何通過預告片來預測一部電影的質量?
平面設計、UI設計、視覺設計、網頁設計,各自的區別和關聯是什麼?學習設計,是全面了解,還是重點培養?
知乎網頁設計時為什麼留下大面積的空白?
「糟糕的設計師」、「普通的設計師」、「好的設計師」,有專業的設計師來講解一下這張圖嗎?

TAG:交互設計 | 用戶界面設計 | 視覺設計 |