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

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

一、彈窗

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

其用法特征是：

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

二、抽屜

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

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

其用法特征是：

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

三、折疊面板

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

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

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

四、使用建議

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

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

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

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

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

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

作者：長弓小子