B端產品設計中的模態彈框和非模態彈框丨DTinsight UED
B端（PC）產品中，彈框的作用往往是使用者處理事物或進行操作反饋時，不希望離開當前頁面以至於打斷工作流程，因而在頁面中開啟的一個浮層，以便承接使用者相應的操作。
我們日常所接觸到的彈框有很多種，比如對話方塊、氣泡、抽屜、全域性提示等等都稱之為彈框，彈框的整個概念就較為籠統。本文將彈框分為模態彈框和非模態彈框，以此來展現B端產品中的一個彈框體系。
1.模態彈框
模態彈框具有一定的強制性，會打斷使用者當前工作流程，使用者必須在彈框上進行一定的操作反饋才能進行下一步和回到父級頁面，並且操作過程中將無法使用其他功能。
模態彈框屬於重量級操作反饋，在B端產品中，我們最常見的模態彈框就是帶有遮罩層的彈出對話方塊，其包含的使用場景有刪除、編輯、修改、新建……在一些具有不可逆和破壞性的操作中，我們有必要讓使用者進行“二次確認”，例如刪除操作等。
對話方塊
一般用於使用者進行重要或有一定風險的操作，使用者需要根據提示來進行判斷。一般出現在螢幕的中間位置，會對介面的主要內容造成遮擋。對話方塊的設計樣式較多，既有二次確認類，也有資訊錄入類。
（刪除對話方塊）
（確認對話方塊）
（步驟類對話方塊）
綜上所述，我們可以明顯的看到模態彈框的優缺點：
· 優點：
能很好的把控使用者的視覺焦點，捕捉使用者操作習慣
· 缺點：
打斷使用者工作流程，使其無法使用其餘功能
2.非模態彈框
非模態彈框和模態彈框最大的區別就是不具有強制性，也不會出現背景遮罩層，使用者不用先處理此類彈框也可以對其他功能進行操作。
在B端產品中，常見的非模態彈框有警告提示、全域性提示、通知提醒框等，這些彈框停留一段時間後會自己消失。相對模態彈框來說，非模態彈框屬於輕量級操作反饋，不會對使用者的工作流程有太大的干擾。
（全域性提示）
1.模態和非模態的區分難易度
B端產品由於顯示裝置的螢幕空間較大，彈框的內容區域不會佔據整體產品太大的可視面積，他們會疊在父級頁面上面，所以B端中模態和非模態彈框可以輕鬆識別。然而，C端產品裝置螢幕空間有限，這也是為什麼許多彈框在C端產品中佔據全屏的原因。它們不在保持父級頁面可見，在C端中模態和非模態彈框更難區分。
· B端的模態和非模態彈框：
圖一模態必須在中間彈框中進行操作再回到主介面，圖二非模態紅色主介面區域可隨意點選。
· C端的模態和非模態彈框：
圖一模態需點選關閉按鈕才能回到主介面，圖二非模態底部導航欄可隨意切換。兩者都屬於全屏彈框，比較難區分模態和非模態。
2.模態彈框種類
由於展示裝置的空間存在很大的差距，B端產品中模態彈框的種類少於C端產品，C端產品對模態彈框的依賴程度也大於B端。
· B端最常見模態彈框：
對話方塊、抽屜浮框
· C端常見模態彈框：
對話方塊、抽屜、動作欄、營銷活動…
3.模態彈框內容的複雜程度
B端產品的使用者群體較固定，操作的目的性雖明確但也複雜，彈框在一個工作流程中需要承擔承上啟下的作用，所以某些彈框內容會多且雜。而在C端中，由於產品的使用者群體較廣，對操作的要求會相對簡單些，彈框內容也會更加簡明。
以上我們瞭解了怎麼區分彈框和B、C端之間的彈框差異化，接下來我們來看下彈框在數棧產品中的實際運用情況以及可最佳化的點。
目前在數棧中我們將彈框按照元件類別進行區分，分別為對話方塊、抽屜、氣泡確認框、氣泡卡片、氣泡提示框、警告提示、全域性提示、通知提醒框。如下圖。
其中，模態彈框的主要表現形式為對話方塊，抽屜在我們的產品中進行了改良由模態彈框降為輕量級的非模態，其他型別的彈框則均為非模態彈框。
在真實的使用場景中，我們發現抽屜這一類被降級的非模態彈框，需要根據其發揮的作用分為兩種狀態。第一種為純展示類抽屜，保留頂部選單欄的互動，不用擔心對其他功能的誤觸；第二種為操作類抽屜彈框，背景可最佳化為全域性遮罩，使用者只能在抽屜中進行互動動作。如下圖。
由於在現在的互動設計中，各種彈框的命名上並沒有一個詳細統一的規範，跨平臺間對彈框的命名會有一定的差異化，本文中所展示的模態與非模態彈框的幾種分類也僅僅是自己的理解和來自其他文獻的感想，希望能對大家有一定的幫助。
作|者|介|紹
阿宅-袋鼠雲數棧使用者體驗設計師
做得了設計，擼得了插畫，集“智慧與美貌”於一身的使用者體驗設計師。
更多技術交流方式
想面對面技術交流？想看技術大佬直播？加入釘釘群“袋鼠雲開源框架技術交流群”（群號：30537511）
想體驗更多數棧開源專案？在Github社群或Gitee社群搜尋“FlinkX”開源專案
開源專案地址
Github
：https：//github。com/DTStack/flinkx
Gitee：
https：//gitee。com/dtstack_dev_0/flinkx
