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

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

彈窗定義：

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

常見(jiàn)彈窗類(lèi)型

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

彈窗的分類(lèi)

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

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

a 概念解析：

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

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

模態(tài)彈窗最常見(jiàn)的類(lèi)型：對(duì)話(huà)框（Modal）、抽屜（Drawer）

b 常見(jiàn)案例

淘寶賣(mài)家平臺(tái)對(duì)于商品刪除，考慮到商品的重要性，在刪除前通過(guò)對(duì)話(huà)框的形式做二次確認(rèn)。

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

C 使用場(chǎng)景

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

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

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

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

缺點(diǎn)：

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

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

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

a 概念解析：

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

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

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

b 常見(jiàn)案例：

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

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

c 使用場(chǎng)景

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

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

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

缺點(diǎn)：

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

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

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

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

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

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

對(duì)話(huà)框 / 抽屜

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

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

1. 對(duì)話(huà)框 Modal

a 概念解析

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

b 確認(rèn)類(lèi)

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

c 展示類(lèi)

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

飛魚(yú) CRM 信息展示彈窗，作為新功能的宣傳海報(bào)。

d 任務(wù)類(lèi)

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

微信公眾號(hào)選擇圖片，分為選擇封面和編輯封面兩個(gè)步驟完成。

e 如何使用

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

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

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

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

2. 抽屜 Drawer

a 概念解析

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

b 如何使用

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

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

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

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

3. 對(duì)話(huà)框還是抽屜

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

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

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

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

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

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

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

寫(xiě)在最后

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

感謝閱讀，如有問(wèn)題歡迎隨時(shí)溝通。

參考：

https://baike.baidu.com/item

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

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

作者：求職幫er