編輯導(dǎo)讀：B類產(chǎn)品設(shè)計(jì)時(shí)一定要注意產(chǎn)品細(xì)節(jié)，即使是對(duì)話框這樣容易被忽略的產(chǎn)品設(shè)計(jì)細(xì)節(jié)也不要放過。本文從“對(duì)話框 vs 抽屜”的設(shè)計(jì)細(xì)節(jié)出發(fā)，給出不同的設(shè)計(jì)細(xì)節(jié)及展示，一起來看看。

說在前面：對(duì)話框和抽屜都是在當(dāng)前頁(yè)面之上覆蓋出現(xiàn)的組件，讓用戶在不離開主路徑的情況下，查看信息/提示/反饋，或快速執(zhí)行某些的操作。兩者的交互模式有類似之處，使用場(chǎng)景也有所重疊。本文對(duì)兩個(gè)組件的主要差別進(jìn)行了對(duì)比，并提供方法幫助大家快速判斷應(yīng)該選擇哪一個(gè)。

一、對(duì)比：對(duì)話框 vs 抽屜

1. 信息量與干擾性

2. 模態(tài)與非模態(tài)

• 模態(tài)化的（Modal）：用戶將不能操作頁(yè)面層上的內(nèi)容，只能操作頁(yè)面層之上的內(nèi)容容器，直到用戶明確與內(nèi)容容器的交互結(jié)束。
• 非模態(tài)化的（Non-Modal）：即使出現(xiàn)了內(nèi)容層之上的內(nèi)容容器，用戶仍然可以與背景頁(yè)面的內(nèi)容進(jìn)行交互（例如，選擇某一鏈接或點(diǎn)擊某一按鈕）。

對(duì)話框和抽屜均可分為模態(tài)、非模態(tài)，有遮罩、無遮罩；通常有遮罩的為模態(tài)，無遮罩的為非模態(tài)。

3. 何時(shí)使用模態(tài)

1）在重要的警告時(shí)使用，避免出現(xiàn)嚴(yán)重問題、或修正已出現(xiàn)的問題。

例如：用戶未保存就要關(guān)閉時(shí)，彈出模態(tài)對(duì)話框提示用戶保存。

2） 在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時(shí)候使用。

例如：某些資源網(wǎng)站會(huì)在用戶瀏覽一段時(shí)間后彈出模態(tài)化的登錄/注冊(cè)/試用窗口，引導(dǎo)注冊(cè)。

3）用來將復(fù)雜流程拆分成簡(jiǎn)單步驟。

例如：分步驟的模態(tài)對(duì)話框式的新手引導(dǎo)。

4）用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。

例如：在房地產(chǎn)網(wǎng)站 Zillow 中，用戶可以在沒有賬號(hào)或房產(chǎn)代理的情況下瀏覽房源列表，當(dāng)用戶圖聯(lián)系某代理以獲取房源信息時(shí)，站點(diǎn)會(huì)通過一個(gè)模式對(duì)話框詢問他們是否已經(jīng)有代理。

4. 何時(shí)不能使用模態(tài)

1）不要在獲取與當(dāng)前流程不相關(guān)、不必要信息的時(shí)候使用。

2）不要在會(huì)打斷高風(fēng)險(xiǎn)流程中使用。

例如：付款為高風(fēng)險(xiǎn)流程，避免在用戶付款過程中彈出模態(tài)彈窗打斷用戶，可能會(huì)讓用戶改變主意放棄購(gòu)買。

3）不要讓用戶在模態(tài)組件上進(jìn)行需要額外信息（這些信息不在上面）的復(fù)雜決策。

例如：Frontier Airlines 使用模態(tài)對(duì)話框來追加銷售機(jī)票之外的更多服務(wù)，該對(duì)話框顯示現(xiàn)在購(gòu)買可以省162 美元，但卻找不到為什么會(huì)省這個(gè)額度的錢：

二、案例對(duì)比

1. 對(duì)話框的模態(tài) vs 非模態(tài)

文檔工具語(yǔ)雀中的模態(tài)對(duì)話框：登錄狀態(tài)失敗提醒。

語(yǔ)雀中的進(jìn)行關(guān)聯(lián)操作的非模態(tài)對(duì)話框，一個(gè)短小的表單：文字鏈設(shè)置（這里也可以使用氣泡卡片組件）

Gmail 中點(diǎn)擊「寫郵件」按鈕，在右下角打開非模態(tài)小對(duì)話框，讓用戶參考下面的郵件撰寫新郵件：

點(diǎn)擊上圖對(duì)話框右上角表示「放大」的 icon 后，擴(kuò)展為模態(tài)大對(duì)話框，轉(zhuǎn)化為沉浸式的體驗(yàn)：

2. 抽屜的模態(tài) vs 非模態(tài)

項(xiàng)目管理工具 Jira 的幫助文檔入口在頁(yè)面右側(cè)，點(diǎn)開后從右側(cè)劃入非模態(tài)抽屜展示內(nèi)容，這樣便于用戶進(jìn)行對(duì)照查看和操作：

搜索功能入口在頁(yè)面左側(cè)中的導(dǎo)航中，點(diǎn)開后從左側(cè)劃入模態(tài)抽屜進(jìn)行交互，用戶可以更加專注于當(dāng)前操作：

3. 模態(tài)抽屜 vs 非模態(tài)對(duì)話框

上一案例來自之前的 Jira，當(dāng)前版本的 Jira 對(duì)導(dǎo)航和交互模式進(jìn)行了調(diào)整，例如通知模塊由模態(tài)抽屜改為了非模態(tài)對(duì)話框，出現(xiàn)的位置均遵循就近原則，體驗(yàn)上非模態(tài)對(duì)話框更加輕量。

原來由左側(cè)劃入的模態(tài)抽屜，點(diǎn)擊左側(cè)導(dǎo)航后從左側(cè)劃入：

當(dāng)前版本使用非模態(tài)對(duì)話框，點(diǎn)擊頂部導(dǎo)航后在 icon 下方出現(xiàn)：

4. 非模態(tài)抽屜 vs 模態(tài)對(duì)話框

研發(fā)效能工具 Aone 中用非模態(tài)抽屜來展示項(xiàng)目的需求/任務(wù)/bug 的具體內(nèi)容：

與上圖 Aone 的類似場(chǎng)景下，同類產(chǎn)品 Teambition 則采用了模態(tài)對(duì)話框：

相比之下，非模態(tài)抽屜的優(yōu)點(diǎn)是，用戶可以同時(shí)查看下面的父級(jí)頁(yè)面中其他任務(wù)的標(biāo)題，并快速點(diǎn)擊切換到其他需求；而模態(tài)對(duì)話框的優(yōu)點(diǎn)是用戶可以完全沉浸在當(dāng)前的任務(wù)中，同時(shí)頂部也增加了「上一條」、「下一條」按鈕，支持上下條快速切換。

兩者對(duì)比可以看出，兩種組件自身的優(yōu)點(diǎn)也是對(duì)方的不足，沒有百分百的十全十美。選擇哪一個(gè)，要看具體用戶的需求和產(chǎn)品的定位。

5. 模態(tài)抽屜 vs 氣泡卡片

文檔工具 Gitbook 中，產(chǎn)品功能和交互都很簡(jiǎn)潔輕量，沒有出現(xiàn)對(duì)話框組件，在文檔中插入圖片或文件、編輯導(dǎo)航、導(dǎo)入文檔等稍重的操作使用抽屜，而插入表情、標(biāo)簽等位置指向明確、操作很輕的使用氣泡卡片，這些氣泡卡片和非模態(tài)的對(duì)話框類似：

三、選擇：用對(duì)話框還是抽屜？

按下圖從應(yīng)用場(chǎng)景、交互需求、信息長(zhǎng)度三個(gè)維度來判斷使用對(duì)話框還是抽屜。

例如：為一個(gè)表單選擇組件，從應(yīng)用場(chǎng)景來看，對(duì)話框和抽屜皆可；從交互維度，該表單的填寫需要參考表單的父級(jí)頁(yè)面中的內(nèi)容，則確定選擇非模態(tài)抽屜，不需要再?gòu)拈L(zhǎng)短考慮。

• 一致性：除以上列表中的三個(gè)判斷維度，還有「一致性」原則需要考慮，例如某產(chǎn)品彈出的表單大多較長(zhǎng)，采用抽屜組件，為了保持體驗(yàn)的一致性，個(gè)別短表單也可以同樣采用抽屜。但針對(duì)不同產(chǎn)品的具體情況，一致性的優(yōu)先級(jí)有所區(qū)別，因此未放入判斷列表。

四、注釋和舉例

• 操作確認(rèn)、信息提示、操作反饋場(chǎng)景：在需要用戶暫停當(dāng)前操作、即刻閱讀/處理時(shí)，使用模態(tài)對(duì)話框，否則建議使用較輕量的組件如警告提示、全局提示、通知提醒框、氣泡確認(rèn)框。本文討論對(duì)話框和抽屜的區(qū)分。
• 需要和父級(jí)頁(yè)面內(nèi)容相互參照：使用無遮罩的非模態(tài)抽屜，便于查看和操作。
• 需要在父級(jí)頁(yè)面中快速選擇切換：使用無遮罩的非模態(tài)抽屜。在下面父頁(yè)面露出的部分上進(jìn)行與抽屜內(nèi)容和位置都無關(guān)的操作，且不是點(diǎn)擊空白區(qū)域時(shí)，抽屜不用自動(dòng)消失。
• 疊放：是指在一個(gè)對(duì)話框/抽屜上面疊加放置更多對(duì)話框/抽屜。不建議對(duì)話框上疊放對(duì)話框，但抽屜組件支持多層抽屜，即在抽屜內(nèi)打開新的抽屜，用以解決多分支任務(wù)的復(fù)雜狀況。

必要的情況下，在抽屜上疊放對(duì)話框也是可以的，例如在抽屜操作過程中有非常重要的信息要即刻告知用戶，可以通過對(duì)話框展示。

• 表單長(zhǎng)短：表單項(xiàng)超出 5 條時(shí)，建議采用抽屜而非彈窗。
• 內(nèi)容長(zhǎng)短：在展示靜態(tài)信息給用戶時(shí)，如果內(nèi)容少、不超出 5 行，建議使用彈窗而非抽屜；如果信息多到超出一屏，功能上彈窗和抽屜都支持滾動(dòng)條，都可以使用，如何選擇請(qǐng)?jiān)O(shè)計(jì)師根據(jù)設(shè)計(jì)傾向和一致性決定。

參考：

• 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/

作者：林葉，螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議