如何優化B端彈窗的使用體驗，這里有7個設計方向！

本文會講一些實用的 B 端彈窗設計方法：

如何使用彈窗：根據應用場景、交互需求、內容量、一致性原則

如何優化彈窗體驗：彈窗按鈕、彈窗高度、關閉方式、優化流程…

對于想要快速上手 B 端設計的小伙伴，這篇實用性很強的 B 端彈窗設計值得仔細閱讀～

如何使用彈窗？

1. 根據應用場景

模態彈窗和非模態彈窗的具體使用場景可參考下圖表格：

2. 根據交互需求

3. 根據內容量

當內容量較少時，可以采取下拉菜單進行設計上的優化，下拉菜單幾乎都是非模態，它的優勢明顯，沒有復雜操作和各種表單，只需要鼠標劃過點擊即可，快速高效。

如果不是影響業務流程的操作，而只是頁面的設置類，可以將對話框改為氣泡框或氣泡確認框，如下圖：

當頁面內容較多時，New page 新建頁 > Drawer 抽屜 > Modal 對話框（內容的深度較深最好采取抽屜、內容寬度較寬則彈窗形式更為合理、而新建頁合適寬度與深度同時較大的產品中）

4. 遵從一致性原則

除以上三個判斷維度，還有「一致性」原則需要考慮，例如某產品彈出的表單大多較長，采用抽屜組件，為了保持體驗的一致性，個別短表單也可以同樣采用抽屜。

例如釘釘的后臺管理，大部分編輯都采用抽屜形式，而飛書的管理后臺大部分編輯則采用彈窗的形式。但針對不同產品的具體情況，一致性的優先級有所區別。

怎樣優化彈窗使用體驗

1. 操作按鈕固定在底部

彈窗的操作按鈕沒有固定，隨滾動條滾動，需要滾動到底部進行操作很不方便。

2. 彈窗高度不高于瀏覽器內容展示

彈窗高度過大，彈窗顯示不全，就算滾動條固定到底部也有一部分顯示不出來，影響操作。

這里點擊全屏顯示會鎖定頁面的全局滾動條，但瀏覽器正常顯示會出現兩個滾動條的情況，體驗會變差。

對話框的大小主要根據內容而定。B 端應用中，一個尺寸無法滿足所有類型的彈窗需求，所以我們要設定幾種常規尺寸，一般可設定為 4 種：

• S （通知提示類）
• M （配置簡單）
• L （配置復雜或者擴展詳情）
• 特殊 （根據實際情況而定）

PC 的小屏幕分辨率為 1024*768，所以高度盡量控制在 600px 以內（除去導航欄、工具欄高度），寬度控制在 1000px 以內，避免在小屏幕下滾動一點點才能看全整個彈框的尷尬情況。

但值得注意的是：現在越來越多的寬屏正在逐漸占據市場，相對應的越來越多的網頁設計的寬度和高度都不是固定不變的。

抽屜提供穩定的尺寸。提供 S (w=378px) 和 M (w=736px)基礎寬度選項。

這兩個尺寸是根據 antd 表單尺寸規范測算，分別可容納單列和雙列表單，而且保持了使用抽屜時父級頁內容可見的優勢。仍然支持自定義寬度。

3. 背景鎖定避免滾動條引起的抖動問題

瀏覽網頁時經常會發現彈框出現后，滾動鼠標時，蒙版下面的頁面還是可以滾動的，其實這些滾動都是沒必要的，因為彈框的原意就是要聚焦用戶注意力。

因此我們要做的是背景鎖定（從技術角度其實是暫時性干掉滾動條）。

4. 關閉方式優化

彈窗應至少包含一個以上的關閉方式，常見的彈窗關閉方式有 4 種：

• 右上角的關閉按鈕
• 彈窗底部的“取消”按鈕
• 彈窗外的任意區域
• 一段時間后自動消失

彈窗外的任意區域，這種方式一般用于模態彈窗，除了彈窗中的關閉按鈕外，點擊彈窗外的任意區域關閉體驗更佳。但操作配置類彈窗不建議采用這個方式，容易誤操作導致正在配置中的彈窗被關閉。

5. 避免彈框上再彈出彈框的問題

要盡量避免在彈框上再彈一層彈框，兩層蒙版會讓用戶覺得負擔很重。

方法一：改為抽屜

如下圖，釘釘的后臺編輯員工信息，抽屜彈窗選擇部門后打開選擇部門與人員對話框。抽屜頁面上可以更深一步操作彈出彈窗或再疊加一個抽屜。

方式二：避免中間彈窗跳轉抽屜彈窗的交互方式

方式三：隱藏當前對話框

第一步，選擇添加成員后隱藏當前新增用戶組彈窗；

第二步，打開添加成員彈窗保存確定后顯示之前到新增用戶組彈窗，如下面來自飛書的后臺管理，新增用戶組彈窗的打開兩個彈窗交互方式：

6. 優化交互流程

現在彈出框不僅承載了信息編輯的功能，還可以作為上下文的跳轉，幫助用戶銜接路徑。

如 iconfont 中的新建項目，用戶新增后，頁面會直接跳轉到新的項目空間。

如果內容過多，如下圖 ，可以重新梳理交互，改成輕量彈窗+新建頁的方式。

原來的編輯內容過多，業務可以拆分成基本信息和配置信息，新增內容保存后可以自動跳轉到配置頁面進行配置。

7. 模態層優化

方式一：模態層顏色根據產品品牌色定

模態層模態抽屜的遮罩背景如果根據產品色定不僅更貼合品牌，且顯得更有設計感。下圖帆軟的模態層就不是大部分產品都采用的純黑透明度而是加入了點品牌的藍色系。

方式二：有模態層但不顯示

模態層模態抽屜的遮罩背景層可以降低透明度，也可以是全透明不顯示的，可以更好的展示關聯的信息，點擊抽屜其他處可關閉抽屜，釘釘后臺管理的模態抽屜就是這樣設計的。

方式三：去掉模態層

下圖中的抽屜為非模態抽屜，可以根據左側列的切換快速查看右側抽屜內容。

最后

通過上下兩篇「B 端彈窗設計」分享，希望能讓你對 B 端彈窗有一個初步的認識和了解。

除了彈窗，B 端產品還有很多設計知識點需要學習，在后續的文章中，設計夾將繼續為大家分享有用的「B 端設計」文章。

慢慢來比較快，如覺得有幫助，歡迎關注作者微信公眾號：「Clip設計夾」