編輯導(dǎo)讀：對(duì)話框和抽屜都是在父級(jí)頁(yè)面之上打開一個(gè)浮層，在不用離開父級(jí)任務(wù)的基礎(chǔ)上，完成另一個(gè)任務(wù)。在企業(yè)級(jí)中后臺(tái)產(chǎn)品中，兩者都很常見。在有些場(chǎng)景下，對(duì)話框和抽屜有時(shí)總給人一種兩者皆可的感覺?；隗w驗(yàn)統(tǒng)一性原則，應(yīng)該將二者進(jìn)行區(qū)分，制定出明確的使用規(guī)范。本文將從對(duì)話框和抽屜的特性入手，嘗試總結(jié)出一套明確的使用規(guī)范。

一、特性

從對(duì)話框和抽屜各自的特性入手進(jìn)行分析，找出二者的差異點(diǎn)，以此作為使用場(chǎng)景判別的基礎(chǔ)。

1. 聚焦性

• 對(duì)話框通常位于父級(jí)頁(yè)面的中心，與用戶常規(guī)的視覺焦點(diǎn)是重合的，對(duì)用戶的注意力的壟斷性較強(qiáng)烈，內(nèi)容的聚焦性也更強(qiáng)
• 抽屜通常位于父級(jí)頁(yè)面的邊緣，不在用戶常規(guī)的視覺焦點(diǎn)中心，具有一定的偏移，內(nèi)容的聚焦性較弱

2. 延續(xù)性

• 對(duì)話框通常是從父級(jí)頁(yè)面的中心彈出，具有較強(qiáng)的阻斷性，適合相對(duì)于原界面較為獨(dú)立的內(nèi)容
• 抽屜通常是從父級(jí)頁(yè)面的邊緣滑出，具有較強(qiáng)的連貫性，適合與原界面具有延續(xù)關(guān)系的內(nèi)容

3. 父級(jí)內(nèi)容可見性

• 由于對(duì)話框通常位于父級(jí)頁(yè)面的中心，因此通常會(huì)遮擋住父級(jí)頁(yè)面的核心內(nèi)容，父級(jí)內(nèi)容可見性較差
• 抽屜通常位于父級(jí)頁(yè)面的邊緣，因此通常不會(huì)遮擋住父級(jí)頁(yè)面的核心內(nèi)容，父級(jí)內(nèi)容可見性較好

抽屜的父級(jí)內(nèi)容可見性較好，僅限于抽屜寬/高度較小的情況下，否則，抽屜在父級(jí)可見性方面并不占優(yōu)勢(shì)。

4. 多層可用性

• 對(duì)話框懸浮在父級(jí)界面的中心，多層對(duì)話框要么會(huì)互相完全遮擋，導(dǎo)致用戶不清楚自己所在的層級(jí)，要么錯(cuò)層展示，這又會(huì)使界面比較混亂。因此，對(duì)話框的多層可用性較差
• 抽屜僅有一邊不貼著父級(jí)的邊緣，多層抽屜僅在寬/高上有所不同，錯(cuò)層后能明確的區(qū)分出層級(jí)，且齊整有序，多層可用性相對(duì)較好

但還是應(yīng)該從流程/信息層級(jí)優(yōu)化入手，盡量避免多層模態(tài)界面的出現(xiàn)。

5. 內(nèi)容承載量

從內(nèi)容承載量的角度來(lái)區(qū)別對(duì)話框與抽屜，并不具有說服力，兩者都可擴(kuò)展，甚至是擴(kuò)展至全屏。

二、使用場(chǎng)景

以上總結(jié)了對(duì)話框與抽屜的特性，根據(jù)這些特性，我們能夠隱隱感覺到對(duì)話框與抽屜一定有各自適合的使用場(chǎng)景，而不是兩者皆可。

1. 根據(jù)內(nèi)容分類判別

根據(jù)內(nèi)容分類，可將使用場(chǎng)景分為信息確認(rèn)、操作反饋、表單編輯、內(nèi)容展示這四類。但僅根據(jù)內(nèi)容分類場(chǎng)景，是無(wú)法在表單編輯與內(nèi)容展示場(chǎng)景中準(zhǔn)確判別應(yīng)使用對(duì)話框還是抽屜。

2. 根據(jù)父子界面的關(guān)系判別

在表單編輯與內(nèi)容展示場(chǎng)景中，還需分析父子界面之間的關(guān)系，并結(jié)合對(duì)話框與抽屜的特性，來(lái)判別當(dāng)前場(chǎng)景適合對(duì)話框還是抽屜。

可綜合分析子界面的獨(dú)立性與聚焦性，僅在子界面同時(shí)具有較高的獨(dú)立性與聚焦性時(shí)使用對(duì)話框，在其他情況下，則使用抽屜更為合適。

• 組合一：高聚焦性 + 高獨(dú)立性 — 對(duì)話框
• 組合二：高聚焦性 + 低獨(dú)立性 — 抽屜
• 組合三：低聚焦性 + 高獨(dú)立性 — 抽屜
• 組合四：低聚焦性 + 低獨(dú)立性 — 抽屜

三、案例舉例

案例一：華為云

在此處的主任務(wù)是填寫表單，抽屜中的內(nèi)容是對(duì)父級(jí)界面中某一個(gè)表單項(xiàng)的解釋，并不需要高度壟斷用戶的注意力。

因此屬于低聚焦性 + 低獨(dú)立性，使用抽屜更合適。

案例二：華為云

此處的主任務(wù)是向父級(jí)界面中新增一條內(nèi)容，對(duì)話框中的表單編輯是需要用戶高度關(guān)注的，且此表單編輯不依賴父級(jí)界面。

因此屬于高聚焦性+高獨(dú)立性，使用對(duì)話框更合適。

案例三：華為云

此處的主任務(wù)可能是任何其他正在進(jìn)行中的任務(wù)，查看消息只是作為臨時(shí)任務(wù)。

因此屬于低聚焦性 + 高獨(dú)立性，使用抽屜更合適。

案例四：釘釘郵箱

此處的主任務(wù)是查看郵件詳情，但同時(shí)兼顧了快速切換郵件的功能，使用抽屜能夠完全看到郵件狀態(tài)、發(fā)件人及部分主題，方便用戶快速切換。

因此屬于高聚焦性 + 低獨(dú)立性，使用抽屜更合適。

案例五：銷售易

此處的主任務(wù)是對(duì)父級(jí)界面功能介紹，需要用戶在接觸父界面之前，就先了解到這些功能介紹，需要引起用戶足夠的注意力。

因此屬于高聚焦性 + 高獨(dú)立性，使用對(duì)話框更合適

四、結(jié)語(yǔ)

以上純屬個(gè)人當(dāng)前見解，還需更多的實(shí)踐驗(yàn)證及交流討論。

本文由@三多的設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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