同樣都是交互反饋組件，你可能會(huì)想：彈窗（Modal）、抽屜（Drawer）和折疊面板（Collapse）的區(qū)別是什么？有哪些特定的使用場(chǎng)景？

本文就來(lái)詳細(xì)分析下這三者的區(qū)別和聯(lián)系，幫助你做好應(yīng)用。

一、彈窗

彈窗（Modal）也被叫做 "對(duì)話(huà)框"，當(dāng)需要用戶(hù)處理關(guān)鍵的事務(wù)、又不希望跳轉(zhuǎn)頁(yè)面打斷用戶(hù)的工作流程時(shí)，可以在當(dāng)前頁(yè)面正中打開(kāi)一個(gè)浮層，承載相應(yīng)的操作：

其用法特征是：

1. 需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較少。
2. 常用于針對(duì)某些內(nèi)容進(jìn)行補(bǔ)充說(shuō)明、需要用戶(hù)處理關(guān)鍵信息、重要的警告提示等，不會(huì)跳轉(zhuǎn)頁(yè)面而打斷用戶(hù)的操作流程。
3. 通常是由系統(tǒng)觸發(fā)（對(duì)用戶(hù)來(lái)說(shuō)屬于被動(dòng)接受）。
4. 對(duì)于彈窗的整體高度和寬度，并沒(méi)有絕對(duì)的標(biāo)準(zhǔn)或規(guī)定，你可以根據(jù)頁(yè)面的視覺(jué)舒適度和功能需要自行確定。整個(gè)產(chǎn)品的彈窗尺寸應(yīng)盡量保持統(tǒng)一、有規(guī)律。

二、抽屜

抽屜（Drawer）是從屏幕邊緣滑出的浮層面板。用戶(hù)在抽屜內(nèi)操作時(shí)不必離開(kāi)當(dāng)前任務(wù)，操作完成后，可以平滑地回到到原任務(wù)。

在一些場(chǎng)景中，該組件可以使用兩個(gè)層級(jí)，第二層抽屜可以由第一層抽屜中的內(nèi)容喚起。關(guān)閉時(shí)需要按順序一層層關(guān)閉。不推薦使用兩個(gè)以上層級(jí)的抽屜：

其用法特征是：

1. 樹(shù)需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較多，樣式也更為多樣。
2. 常用于針對(duì)某內(nèi)容進(jìn)行補(bǔ)充說(shuō)明；展示不緊急的細(xì)節(jié)信息；進(jìn)行信息補(bǔ)充編輯等。不會(huì)跳轉(zhuǎn)頁(yè)面而打斷用戶(hù)的操作流程。
3. 通常由用戶(hù)觸發(fā)（對(duì)用戶(hù)來(lái)說(shuō)屬于主動(dòng)喚起）。
4. 對(duì)于抽屜的整體高度和寬度，并沒(méi)有絕對(duì)的標(biāo)準(zhǔn)或規(guī)定，可根據(jù)頁(yè)面視覺(jué)和柵格框架布局自行確定。整個(gè)產(chǎn)品的抽屜尺寸應(yīng)盡量保持統(tǒng)一、有規(guī)律。

三、折疊面板

折疊面板（Collapse）是可折疊 / 展開(kāi)的內(nèi)容呈現(xiàn)區(qū)域。在一些場(chǎng)景中，該組件可以使用兩個(gè)層級(jí)，也即在這部分內(nèi)容區(qū)域中可以嵌套一個(gè)新的折疊面板：

其用法特點(diǎn)是：

1. 對(duì)內(nèi)容進(jìn)行分組和歸類(lèi)，保持頁(yè)面整潔。
2. 對(duì)次要 / 不需要完整閱讀的內(nèi)容進(jìn)行隱藏，縮短頁(yè)面，提高屏效，減少用戶(hù)的滾動(dòng)操作。
3. 當(dāng)折疊面板中的內(nèi)容長(zhǎng)于網(wǎng)頁(yè)窗口高度時(shí)，整個(gè)折疊面板應(yīng)垂直滾動(dòng)。盡量不要在單個(gè)折疊面板內(nèi)垂直或水平滾動(dòng)。
4. 默認(rèn)狀態(tài)下是收起狀態(tài)，有的場(chǎng)景中也會(huì)默認(rèn)展開(kāi)第一條，其余幾條可默認(rèn)收起。

四、使用建議

1. 關(guān)于使用場(chǎng)景

1. 彈窗 Modal：常用于重要警告、關(guān)鍵信息提示和緊急信息處理；通常是由系統(tǒng)觸發(fā)。
2. 抽屜 Drawer：常用于補(bǔ)充詳細(xì)信息、展示和編輯內(nèi)容，呈現(xiàn)非緊急信息。通常是由用戶(hù)觸發(fā)。
3. 折疊面板 Collapse：常用于分組歸類(lèi)、次要內(nèi)容，用于提高屏效。通常是由用戶(hù)觸發(fā)。

2. 不建議僅用內(nèi)容篇幅來(lái)判斷使用哪個(gè)組件。

假設(shè)我們規(guī)定多于 5 行內(nèi)容的反饋用抽屜，少于 5 行則用彈窗，那么很有可能會(huì)導(dǎo)致在同一個(gè)頁(yè)面中，點(diǎn)擊相同類(lèi)型的功能時(shí)，一會(huì)兒彈出的是彈窗，一會(huì)兒則是抽屜。

因此僅用內(nèi)容篇幅作為判斷依據(jù)會(huì)對(duì)用戶(hù)預(yù)期造成一定的困擾，也會(huì)給產(chǎn)品的交互反饋一致性帶來(lái)問(wèn)題。

B 端設(shè)計(jì)系統(tǒng)和組件設(shè)計(jì)是值得每一位設(shè)計(jì)師都深入研究的課題。

作者：長(zhǎng)弓小子