組件詳解|彈窗、抽屜、折疊面板,用法有什么區別?

0 評論 7717 瀏覽 46 收藏 7 分鐘

本篇文章,作者將分析彈窗、抽屜和折疊面板三個組件的用法特征,并對這三個組件的使場景提供對應的使用建議,能給產品設計的伙伴提供一些參考,希望能對你有所幫助。

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

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

一、彈窗 Modal

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

其用法特征是:

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

二、抽屜Drawer

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

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

不推薦使用兩個以上層級的抽屜:

其用法特征是:

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

三、折疊面板Collapse

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

其用法特點是:

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

四、使用建議

1. 關于使用場景

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

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

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

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

專欄作家

元堯,微信公眾號:長弓小子,人人都是產品經理專欄作家。一線互聯網大廠B端體驗設計師,清華大學美術學院本碩連讀。曾負責國內最大開源組件庫Ant Design組件的設計和運營工作,目前負責國際業務線B端產品體驗設計和組件庫的搭建工作。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!