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

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

彈窗定義：

彈窗是展現(xiàn)在用戶操作界面之上的容器，在 X 軸和 Y 軸的平行空間之外擴(kuò)展了頁面的高度。通過承載對應(yīng)信息，對當(dāng)前操作進(jìn)行補(bǔ)充/傳遞，是一種更靈活的信息容器。

常見彈窗類型

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

彈窗的分類

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

1. 模態(tài)（Modal）

a 概念解析：

模態(tài)是目前比較常見的類型，打開模態(tài)彈窗，會停止當(dāng)前所有工作的進(jìn)度，它所屬的應(yīng)用程序不能繼續(xù)進(jìn)行，直到對話框關(guān)閉為止。

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

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

b 常見案例

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

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

C 使用場景

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

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

平臺限制用戶需要執(zhí)行完信息后才能進(jìn)行后續(xù)的操作；如：有贊的功能模塊需要付費(fèi)后才能使用，彈窗內(nèi)容可以是該模塊的介紹；

流程的引導(dǎo)；如：阿里云產(chǎn)品當(dāng)用戶首次進(jìn)入，會出現(xiàn)分步驟的引導(dǎo)。

缺點(diǎn)：

01.本質(zhì)上強(qiáng)制中斷用戶的工作流程，需要立即關(guān)注；對于一些高風(fēng)險如下單流程、支付流程要慎重使用；

02.造成認(rèn)知負(fù)荷，可能會忘記原始任務(wù)相關(guān)的一些細(xì)節(jié)；

2. 非模態(tài)化（Non-Modal）

a 概念解析：

可以不打斷父應(yīng)用程序，無需停止進(jìn)度，用戶仍可以對父級內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。

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

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

b 常見案例：

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

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

c 使用場景

非主流程相關(guān)的任務(wù)提示；如：對于一個創(chuàng)建流程來說，加載提示一個非主流程的操作，選擇全局提示 Message 進(jìn)行反饋提示；

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

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

缺點(diǎn)：

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

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

3. 模態(tài)還是非模態(tài)

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

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

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

對話框 / 抽屜

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

但是在實際的項目中，對話框 Modal、抽屜 Drawer 有較高的使用場景以及較強(qiáng)的業(yè)務(wù)屬性；在此主要針對對話框 Modal、抽屜 Drawer 進(jìn)行研究。

1. 對話框 Modal

a 概念解析

對話框以對話的方式讓使用者參與進(jìn)來，在對話中輸入或輸出信息。以應(yīng)用場景劃分包括確認(rèn)類、展示類、任務(wù)類三種；

b 確認(rèn)類

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

c 展示類

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

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

d 任務(wù)類

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

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

e 如何使用

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

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

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

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

2. 抽屜 Drawer

a 概念解析

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

b 如何使用

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

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

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

04 建議抽屜上的關(guān)閉按鈕放在左側(cè)，符合認(rèn)知習(xí)慣；

3. 對話框還是抽屜

a 從內(nèi)容區(qū)分

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

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

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

b 從行為角度區(qū)分

由系統(tǒng)觸發(fā)：選擇彈窗，打斷用戶當(dāng)前流程；用戶一般無預(yù)期，需謹(jǐn)慎使用；

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

寫在最后

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

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

參考：

https://baike.baidu.com/item

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

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

作者：求職幫er