4 個方面層層遞進，分析如何設計 B 端產品的彈窗

文章結構

1. 彈窗的定義

2. 常見的彈窗

3. 彈窗的分類：模態彈窗/非模態彈窗 （概念解析、常見案例、何時使用）

4. 對話框/抽屜 （概念、常見類型、案例、尺寸、如何使用、抽屜還是彈窗）

說說這篇文章的由來

在 2021 年終總結時發現這些年讀了很多的文章，雖說也會通過各種工具記錄整理，但還是會覺得零散。最好的輸入是輸出，今年給自己定的目標是寫 10 篇文章。一來是把零散的知識整理歸納，串聯知識結構；二來是通過課題研究，提高專業深度。

在 B 端的產品設計中，經常會使用到彈窗。選擇合適的彈窗展示形式，避免過度打擾用戶，有效地向用戶傳遞/收集信息，幫助用戶做出更合理的決策，完成復雜的任務，今天來聊聊如何設計 B 端產品的彈窗。

彈窗定義：

彈窗是展現在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之外擴展了頁面的高度。通過承載對應信息，對當前操作進行補充/傳遞，是一種更靈活的信息容器。

常見彈窗類型

常見的彈窗類型：對話框 Modal、抽屜 Drawer、警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認框 Popconfirm （在此重點闡述 B 端產品的彈窗）。

彈窗的分類

從交互形式上，彈窗分為模態和非模態。通常來說有遮罩為模態，無遮罩為非模態。

1. 模態（Modal）

a 概念解析：

模態是目前比較常見的類型，打開模態彈窗，會停止當前所有工作的進度，它所屬的應用程序不能繼續進行，直到對話框關閉為止。

比如說我在開車的過程中，路過收費站，必須將車停下來拿卡繳費。打斷我的當前的駕駛行為，專注完成交卡收費行為。

模態彈窗最常見的類型：對話框（Modal）、抽屜（Drawer）

b 常見案例

淘寶賣家平臺對于商品刪除，考慮到商品的重要性，在刪除前通過對話框的形式做二次確認。

阿里云以抽屜的方式展示模塊信息。這么做的主要考慮是抽屜可以展示較多的頁面信息，同時支持搜索和篩選等功能，并且在點擊抽屜后彈出二級頁面，有較強的拓展性。

C 使用場景

模態對話框的目的和使用范圍對用戶而言非常清晰，比較容易引起注意；如：在執行一個重要信息的刪除時，通過二次詢問引起用戶的注意，讓用戶再次做判斷；

承載較為緊急的信息，讓用戶快速處理；如：用戶未保存，就點擊離開當前頁面，通過對話框讓用戶做出選擇。

平臺限制用戶需要執行完信息后才能進行后續的操作；如：有贊的功能模塊需要付費后才能使用，彈窗內容可以是該模塊的介紹；

流程的引導；如：阿里云產品當用戶首次進入，會出現分步驟的引導。

缺點：

01.本質上強制中斷用戶的工作流程，需要立即關注；對于一些高風險如下單流程、支付流程要慎重使用；

02.造成認知負荷，可能會忘記原始任務相關的一些細節；

2. 非模態化（Non-Modal）

a 概念解析：

可以不打斷父應用程序，無需停止進度，用戶仍可以對父級內容進行交互。大部分應用于信息的反饋和提示。

繼續用開車做例子，在開車的過程中，我可以聽著音樂，可以拿起口香糖放到口中。不必完全中斷我當前的操作，可以繼續甚至同時處理。

非模態化彈窗最常見的類型：警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認框 Popconfirm

b 常見案例：

阿里云的「幫助文檔」在支持查看文檔的同時，也支持對父頁面進行編輯。幫助文檔的作用是指導用戶進行軟件操作，基于這種使用場景選擇非模態彈窗，用戶可以在兩者之間切換，極大的提高幫助文檔的使用質量。

微信公眾號對新建分組的命名使用的非模態彈窗，屬于氣泡確認卡片 popover 的演化。這種方式是基于分組命名是一個非主流程、低頻率、輕量級的操作，所以選擇這種溫和的方式。

c 使用場景

非主流程相關的任務提示；如：對于一個創建流程來說，加載提示一個非主流程的操作，選擇全局提示 Message 進行反饋提示；

用戶可以在父應用程序和彈窗間快速切換，可以通過參考父級的信息對彈窗做操作；如:在飛魚 CRM 平臺用戶無需關閉抽屜，只需要在父頁面切換不同的聯系人，即可查看/修改該聯系人的詳細信息；

比較溫和、低打擾，用戶無需停掉當前的工作來完成；

缺點：

01.避免用來承載內容較多、過于重要的信息。

02.避免讓用戶做較為復雜的操作；

3. 模態還是非模態

模態化彈窗最常見的類型：對話框（Modal）、抽屜（Drawer）；非模態化彈窗最常見的類型：警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認框 Popconfirm；

但是，并不是所有的對話框和抽屜都是屬于模態化彈窗。

在決定使用兩種類型時，需要參考上下文的工作流程和業務場景，避免不必要的打斷用戶和他們的工作流程。最終的目的是引導用戶高效完成任務。

對話框 / 抽屜

在 Ant D 等眾多平臺級設計組件規范中對警告提示 Alert、全局提示 Message、通知提醒框 Notification、氣泡確認框 Popconfirm 都有較為明確的定義；

但是在實際的項目中，對話框 Modal、抽屜 Drawer 有較高的使用場景以及較強的業務屬性；在此主要針對對話框 Modal、抽屜 Drawer 進行研究。

1. 對話框 Modal

a 概念解析

對話框以對話的方式讓使用者參與進來，在對話中輸入或輸出信息。以應用場景劃分包括確認類、展示類、任務類三種；

b 確認類

考慮到信息的重要性，巨量引擎在刪除時給用戶二次確認提示；

c 展示類

拼多多商戶后臺對于 Logo 上傳規則的信息展示。將較為重要的信息通過對話框的形式推送給用戶，引導用戶閱讀。對于 SaaS 產品中，具有營銷性的信息，也可以選擇海報+文字的形式，營造氛圍提升閱讀量。

飛魚 CRM 信息展示彈窗，作為新功能的宣傳海報。

d 任務類

巨量引擎用戶可以自定義表格列的內容，通過對話框進行編輯。這么做的考慮是，自定義列是一個相對獨立的流程，選用對話框完全不影響父頁面的布局，并且可以快速返回到父頁面。

微信公眾號選擇圖片，分為選擇封面和編輯封面兩個步驟完成。

e 如何使用

對話框的尺寸一般根據內容來設定，考慮到可閱讀性，通長要給予最大尺寸的限制。

據統計我司配置的電腦最小屏幕分辨率是 1280X720，因此只要保證這個尺寸放得下，就不會出現顯示不全出現雙滾動條的問題。

最大尺寸：寬度選擇 960PX，高度以 Windows 為例，去掉系統底部功能條的高度（40PX）以及瀏覽器的高度（60-100PX）為 580PX，安全角度考慮，最終高度定為 540PX。

為適配更多場景，同時讓設計具有一致性。常規彈窗尺寸：寬度 560PX，高度 400PX。

2. 抽屜 Drawer

a 概念解析

通常從父窗體邊緣滑入，覆蓋住部分父窗體內容。用戶在抽屜內操作時不必離開當前任務，操作完成后，可以平滑地回到原任務。在項目中，通常抽屜從右側向左劃出。

b 如何使用

01 推薦默認寬度 378PX，大號抽屜寬度 736PX，分別可容納單列和雙列表單，而且保持了使用抽屜時父級頁內容可見的優勢；

02 建議抽屜采用右側劃出的交互，不會遮擋父容器的內容，在抽屜中填寫信息/核對信息都可以參考父容器的內容；

03 建議抽屜上的操作按鈕放在右上角，不會被遮擋；

04 建議抽屜上的關閉按鈕放在左側，符合認知習慣；

3. 對話框還是抽屜

a 從內容區分

內容類型：操作確認、信息提示、操作反饋通常選擇對話框形式；表單編輯/內容展示，使用表單和對話框均可；

表單數量：通常來說抽屜可以承載更多的內容，Ant D 建議在表單數大于 8 項時使用抽屜；可以進行更復雜的操作；

內容長短：在展示信息給用戶時候，如果內容少不超過 5 行建議采用彈窗；如果信息超出一屏，設計師可根據習慣使用；

b 從行為角度區分

由系統觸發：選擇彈窗，打斷用戶當前流程；用戶一般無預期，需謹慎使用；

由用戶觸發：選擇抽屜，用戶主動喚起，對動作有一定預期，支持多層打開支持任務流；

寫在最后

本文從彈窗的定義、常見類型入手，重點講解了模態彈窗和非模態彈窗，分析了使用場景和案例。同時將 B 端產品經常使用的對話框和抽屜做分析，設計師可以根據場景內容和用戶行為出發，選擇合理的交互方式。

感謝閱讀，如有問題歡迎隨時溝通。

參考：

https://baike.baidu.com/item

https://www.yuque.com/wuxinghua/01/qmyrgt

https://zhuanlan.zhihu.com/p/405853880

歡迎關注作者微信公眾號：「求職幫er」