編輯導讀：B類產品設計時一定要注意產品細節(jié)，即使是對話框這樣容易被忽略的產品設計細節(jié)也不要放過。本文從“對話框 vs 抽屜”的設計細節(jié)出發(fā)，給出不同的設計細節(jié)及展示，一起來看看。
說在前面：對話框和抽屜都是在當前頁面之上覆蓋出現的組件，讓用戶在不離開主路徑的情況下，查看信息/提示/反饋，或快速執(zhí)行某些的操作。兩者的交互模式有類似之處，使用場景也有所重疊。本文對兩個組件的主要差別進行了對比，并提供方法幫助大家快速判斷應該選擇哪一個。
一、對比：對話框 vs 抽屜
1. 信息量與干擾性
2. 模態(tài)與非模態(tài)
- 模態(tài)化的（Modal）：用戶將不能操作頁面層上的內容，只能操作頁面層之上的內容容器，直到用戶明確與內容容器的交互結束。
- 非模態(tài)化的（Non-Modal）：即使出現了內容層之上的內容容器，用戶仍然可以與背景頁面的內容進行交互（例如，選擇某一鏈接或點擊某一按鈕）。
對話框和抽屜均可分為模態(tài)、非模態(tài)，有遮罩、無遮罩；通常有遮罩的為模態(tài)，無遮罩的為非模態(tài)。
3. 何時使用模態(tài)
1）在重要的警告時使用，避免出現嚴重問題、或修正已出現的問題。
例如：用戶未保存就要關閉時，彈出模態(tài)對話框提示用戶保存。
2） 在需要用戶輸入信息或進行某操作，才能繼續(xù)當前流程的時候使用。
例如：某些資源網站會在用戶瀏覽一段時間后彈出模態(tài)化的登錄/注冊/試用窗口，引導注冊。
3）用來將復雜流程拆分成簡單步驟。
例如：分步驟的模態(tài)對話框式的新手引導。
4）用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。
例如：在房地產網站 Zillow 中，用戶可以在沒有賬號或房產代理的情況下瀏覽房源列表，當用戶圖聯系某代理以獲取房源信息時，站點會通過一個模式對話框詢問他們是否已經有代理。
4. 何時不能使用模態(tài)
1）不要在獲取與當前流程不相關、不必要信息的時候使用。
2）不要在會打斷高風險流程中使用。
例如：付款為高風險流程，避免在用戶付款過程中彈出模態(tài)彈窗打斷用戶，可能會讓用戶改變主意放棄購買。
3）不要讓用戶在模態(tài)組件上進行需要額外信息（這些信息不在上面）的復雜決策。
例如：Frontier Airlines 使用模態(tài)對話框來追加銷售機票之外的更多服務，該對話框顯示現在購買可以省162 美元，但卻找不到為什么會省這個額度的錢：
二、案例對比
1. 對話框的模態(tài) vs 非模態(tài)
文檔工具語雀中的模態(tài)對話框：登錄狀態(tài)失敗提醒。
語雀中的進行關聯操作的非模態(tài)對話框，一個短小的表單：文字鏈設置（這里也可以使用氣泡卡片組件）
Gmail 中點擊「寫郵件」按鈕，在右下角打開非模態(tài)小對話框，讓用戶參考下面的郵件撰寫新郵件：
點擊上圖對話框右上角表示「放大」的 icon 后，擴展為模態(tài)大對話框，轉化為沉浸式的體驗：
2. 抽屜的模態(tài) vs 非模態(tài)
項目管理工具 Jira 的幫助文檔入口在頁面右側，點開后從右側劃入非模態(tài)抽屜展示內容，這樣便于用戶進行對照查看和操作：
搜索功能入口在頁面左側中的導航中，點開后從左側劃入模態(tài)抽屜進行交互，用戶可以更加專注于當前操作：
3. 模態(tài)抽屜 vs 非模態(tài)對話框
上一案例來自之前的 Jira，當前版本的 Jira 對導航和交互模式進行了調整，例如通知模塊由模態(tài)抽屜改為了非模態(tài)對話框，出現的位置均遵循就近原則，體驗上非模態(tài)對話框更加輕量。
原來由左側劃入的模態(tài)抽屜，點擊左側導航后從左側劃入：
當前版本使用非模態(tài)對話框，點擊頂部導航后在 icon 下方出現：
4. 非模態(tài)抽屜 vs 模態(tài)對話框
研發(fā)效能工具 Aone 中用非模態(tài)抽屜來展示項目的需求/任務/bug 的具體內容：
與上圖 Aone 的類似場景下，同類產品 Teambition 則采用了模態(tài)對話框：
相比之下，非模態(tài)抽屜的優(yōu)點是，用戶可以同時查看下面的父級頁面中其他任務的標題，并快速點擊切換到其他需求；而模態(tài)對話框的優(yōu)點是用戶可以完全沉浸在當前的任務中，同時頂部也增加了「上一條」、「下一條」按鈕，支持上下條快速切換。
兩者對比可以看出，兩種組件自身的優(yōu)點也是對方的不足，沒有百分百的十全十美。選擇哪一個，要看具體用戶的需求和產品的定位。
5. 模態(tài)抽屜 vs 氣泡卡片
文檔工具 Gitbook 中，產品功能和交互都很簡潔輕量，沒有出現對話框組件，在文檔中插入圖片或文件、編輯導航、導入文檔等稍重的操作使用抽屜，而插入表情、標簽等位置指向明確、操作很輕的使用氣泡卡片，這些氣泡卡片和非模態(tài)的對話框類似：
三、選擇：用對話框還是抽屜？
按下圖從應用場景、交互需求、信息長度三個維度來判斷使用對話框還是抽屜。
例如：為一個表單選擇組件，從應用場景來看，對話框和抽屜皆可；從交互維度，該表單的填寫需要參考表單的父級頁面中的內容，則確定選擇非模態(tài)抽屜，不需要再從長短考慮。
- 一致性：除以上列表中的三個判斷維度，還有「一致性」原則需要考慮，例如某產品彈出的表單大多較長，采用抽屜組件，為了保持體驗的一致性，個別短表單也可以同樣采用抽屜。但針對不同產品的具體情況，一致性的優(yōu)先級有所區(qū)別，因此未放入判斷列表。
四、注釋和舉例
- 操作確認、信息提示、操作反饋場景：在需要用戶暫停當前操作、即刻閱讀/處理時，使用模態(tài)對話框，否則建議使用較輕量的組件如警告提示、全局提示、通知提醒框、氣泡確認框。本文討論對話框和抽屜的區(qū)分。
- 需要和父級頁面內容相互參照：使用無遮罩的非模態(tài)抽屜，便于查看和操作。
- 需要在父級頁面中快速選擇切換：使用無遮罩的非模態(tài)抽屜。在下面父頁面露出的部分上進行與抽屜內容和位置都無關的操作，且不是點擊空白區(qū)域時，抽屜不用自動消失。
- 疊放：是指在一個對話框/抽屜上面疊加放置更多對話框/抽屜。不建議對話框上疊放對話框，但抽屜組件支持多層抽屜，即在抽屜內打開新的抽屜，用以解決多分支任務的復雜狀況。
必要的情況下，在抽屜上疊放對話框也是可以的，例如在抽屜操作過程中有非常重要的信息要即刻告知用戶，可以通過對話框展示。
- 表單長短：表單項超出 5 條時，建議采用抽屜而非彈窗。
- 內容長短：在展示靜態(tài)信息給用戶時，如果內容少、不超出 5 行，建議使用彈窗而非抽屜；如果信息多到超出一屏，功能上彈窗和抽屜都支持滾動條，都可以使用，如何選擇請設計師根據設計傾向和一致性決定。
參考：
- https://www.uisdc.com/pop-up-application-design
- http://www.woshipm.com/ucd/3502268.html
- https://mp.weixin.qq.com/s/xZ5UuOtlbDb8wEOd8IjYcg
- https://yuque.antfin.com/docs/share/7b3c3efd-7766-49dc-9799-09d95b3bf44e?#
- https://www.nngroup.com/articles/modal-nonmodal-dialog/
作者：林葉，螞蟻集團設計師
本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議
版權聲明：本文內容由互聯網用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現本站有涉嫌抄襲侵權/違法違規(guī)的內容， 請發(fā)送郵件至 舉報，一經查實，本站將立刻刪除。
