文章結(jié)構(gòu)

1. 彈窗的定義

2. 常見的彈窗

3. 彈窗的分類：模態(tài)彈窗/非模態(tài)彈窗 （概念解析、常見案例、何時(shí)使用）

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

說說這篇文章的由來

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

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

彈窗定義：

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

常見彈窗類型

常見的彈窗類型：對(duì)話框 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)彈窗，會(huì)停止當(dāng)前所有工作的進(jìn)度，它所屬的應(yīng)用程序不能繼續(xù)進(jìn)行，直到對(duì)話框關(guān)閉為止。

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

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

b 常見案例

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

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

C 使用場(chǎng)景

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

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

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

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

缺點(diǎn)：

01.本質(zhì)上強(qiáng)制中斷用戶的工作流程，需要立即關(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)用程序，無需停止進(jìn)度，用戶仍可以對(duì)父級(jí)內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。

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

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

b 常見案例：

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

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

c 使用場(chǎng)景

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

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

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

缺點(diǎn)：

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

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

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

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

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

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

對(duì)話框 / 抽屜

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

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

1. 對(duì)話框 Modal

a 概念解析

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

b 確認(rèn)類

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

c 展示類

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

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

d 任務(wù)類

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

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

e 如何使用

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

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

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

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

2. 抽屜 Drawer

a 概念解析

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

b 如何使用

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

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

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

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

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

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

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

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

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

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

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

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

寫在最后

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

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

參考：

https://baike.baidu.com/item

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

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

歡迎關(guān)注作者微信公眾號(hào)：「求職幫er」