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