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

往期干貨：

本文就來詳細分析下這三者的區別和聯系，幫助你做好應用。

一、彈窗

彈窗（Modal）也被叫做 “對話框”，當需要用戶處理關鍵的事務、又不希望跳轉頁面打斷用戶的工作流程時，可以在當前頁面正中打開一個浮層，承載相應的操作：

其用法特征是：

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

二、抽屜

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

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

其用法特征是：

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

三、折疊面板

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

其用法特點是：

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

四、使用建議

1. 關于使用場景

1. 彈窗 Modal：常用于重要警告、關鍵信息提示和緊急信息處理；通常是由系統觸發。
2. 抽屜 Drawer：常用于補充詳細信息、展示和編輯內容，呈現非緊急信息。通常是由用戶觸發。
3. 折疊面板 Collapse：常用于分組歸類、次要內容，用于提高屏效。通常是由用戶觸發。

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

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

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

B 端設計系統和組件設計是值得每一位設計師都深入研究的課題。

歡迎關注作者微信公眾號：「長弓小子」