對話框和抽屜都是在當前頁面之上覆蓋出現的組件，讓用戶在不離開主路徑的情況下，查看信息/提示/反饋，或快速執行某些操作。兩者的交互模式有類似之處，使用場景也有所重疊。本文對兩個組件的主要差別進行了對比，并提供方法幫助大家快速判斷應該選擇哪一個。
1. 信息量與干擾性
2. 模態與非模態
模態化的（Modal）：用戶將不能操作頁面層上的內容，只能操作頁面層之上的內容容器，直到用戶明確與內容容器的交互結束。
非模態化的（Non-Modal）：即使出現了內容層之上的內容容器，用戶仍然可以與背景頁面的內容進行交互（例如，選擇某一鏈接或點擊某一按鈕）。
對話框和抽屜均可分為模態、非模態，有遮罩、無遮罩；通常有遮罩的為模態，無遮罩的為非模態。
何時使用模態
1）在重要的警告時使用，避免出現嚴重問題、或修正已出現的問題。
例如：用戶未保存就要關閉時，彈出模態對話框提示用戶保存。
2）在需要用戶輸入信息或進行某操作，才能繼續當前流程的時候使用。
例如：某些資源網站會在用戶瀏覽一段時間后彈出模態化的登錄/注冊/試用窗口，引導注冊。
3）用來將復雜流程拆分成簡單步驟。
例如：分步驟的模態對話框式的新手引導。
4）用來獲取信息，該信息可大大減輕用戶的后續操作/精力。
例如：在房地產網站 Zillow 中，用戶可以在沒有賬號或房產代理的情況下瀏覽房源列表，當用戶試圖聯系某代理以獲取房源信息時，站點會通過一個模式對話框詢問他們是否已經有代理。
何時不能使用模態
1）不要在獲取與當前流程不相關、不必要信息的時候使用。
例如：Figma 幫助信息就近通過底部劃入的非模態抽屜來展現內容，比如下圖中介紹快捷鍵的抽屜。
2）不要在會打斷高風險流程中使用。
例如：付款為高風險流程，避免在用戶付款過程中彈出模態彈窗打斷用戶，可能會讓用戶改變主意放棄購買。
3）不要讓用戶在模態組件上進行需要額外信息（這些信息不在上面）的復雜決策。
例如：Frontier Airlines 使用模態對話框來追加銷售機票之外的更多服務，該對話框顯示現在購買可以省 162 美元，但卻找不到為什么會省這個額度的錢：
案例對比
1）對話框的模態 vs 非模態
文檔工具語雀中的模態對話框：登錄狀態失敗提醒：
語雀中的進行關聯操作的非模態對話框，一個短小的表單：文字鏈設置（這里也可以使用氣泡卡片組件）
Gmail 中點擊「寫郵件」按鈕，在右下角打開非模態小對話框，讓用戶參考下面的郵件撰寫新郵件：
點擊上圖對話框右上角表示「放大」的 icon 后，擴展為模態大對話框，轉化為沉浸式的體驗：
2）抽屜的模態 vs 非模態
項目管理工具 Jira 的幫助文檔入口在頁面右側，點開后從右側劃入非模態抽屜展示內容，這樣便于用戶進行對照查看和操作：
搜索功能入口在頁面左側中的導航中，點開后從左側劃入模態抽屜進行交互，用戶可以更加專注于當前操作：
3）模態抽屜 vs 非模態對話框
上一案例來自之前的 Jira，當前版本的 Jira 對導航和交互模式進行了調整，例如通知模塊由模態抽屜改為了非模態對話框，出現的位置均遵循就近原則，體驗上非模態對話框更加輕量。
原來由左側劃入的模態抽屜，點擊左側導航后從左側劃入：
當前版本使用非模態對話框，點擊頂部導航后在 icon 下方出現：
4）非模態抽屜 vs 模態對話框
研發效能工具 Aone 中用非模態抽屜來展示項目的需求/任務/bug 的具體內容：
與上圖 Aone 的類似場景下，同類產品 Teambition 則采用了模態對話框：
相比之下，非模態抽屜的優點是，用戶可以同時查看下面的父級頁面中其他任務的標題，并快速點擊切換到其他需求；而模態對話框的優點是用戶可以完全沉浸在當前的任務中，同時頂部也增加了「上一條」、「下一條」按鈕，支持上下條快速切換。兩者對比可以看出，兩種組件自身的優點也是對方的不足，選擇哪一個，要看具體用戶的需求和產品的定位。
5）模態抽屜 vs 氣泡卡片
文檔工具 Gitbook 中，產品功能和交互都很簡潔輕量，沒有出現對話框組件，在文檔中插入圖片或文件、編輯導航、導入文檔等稍重的操作使用抽屜，而插入表情、標簽等位置指向明確、操作很輕的使用氣泡卡片：
按下圖從應用場景、交互需求、信息長度三個維度來判斷使用對話框還是抽屜。
例如：為一個表單選擇組件，從應用場景維度，對話框和抽屜皆可；從交互維度，該表單的填寫需要參考表單的父級頁面中的內容，則確定選擇非模態抽屜，不需要再從長短考慮。
一致性：除以上判斷條件，還要考慮「一致性」原則。例如某產品彈出的表單大多較長，采用抽屜組件，為了保持一致，個別短表單也可以同樣采用抽屜。但不同產品的一致性的優先級不同，因此未放入圖中。
注釋和舉例
操作確認、信息提示、操作反饋場景：在需要用戶暫停當前操作、即刻閱讀/處理時，使用模態對話框，否則建議使用較輕量的組件如警告提示、全局提示、通知提醒框、氣泡確認框。本文討論對話框和抽屜的區分。
需要和父級頁面內容相互參照：使用無遮罩的非模態抽屜，便于查看和操作。
需要在父級頁面中快速選擇切換：使用無遮罩的非模態抽屜。
在父頁面露出的部分上進行與抽屜內容和位置都無關的操作，且不是點擊空白區域時，抽屜不用自動消失。
疊放：是指在一個對話框/抽屜上面疊加放置更多對話框/抽屜。不建議對話框上疊放對話框，但抽屜組件支持多層抽屜，即在抽屜內打開新的抽屜，用以解決多分支任務的復雜狀況。
必要的情況下，在抽屜上疊放對話框也是可以的，例如在抽屜操作過程中有非常重要的信息要即刻告知用戶，可以通過對話框展示。
表單長短：表單項超出 5 條時，建議采用抽屜而非彈窗。
內容長短：在展示靜態信息給用戶時，如果內容少、不超出 5 行，建議使用彈窗而非抽屜；如果信息多到超出一屏，功能上彈窗和抽屜都支持滾動條，都可以使用，如何選擇請設計師根據設計傾向和一致性決定。
上期回顧：
歡迎加我的微信交流設計：ion_shaw
參考：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 4 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓