編輯導語：模態框和非模態框在設計的過程中經常會被使用到，但是很多人仍然沒有搞懂應該在什麼場景下合理的去使用，本文作者結合自己的經驗，為我們做了總結。

最近在整理系統的元件規範，收集各個場景下的元件應用，在蒐集應用控制元件時，彈窗的套用、混用、亂用情況挺多的。

主要是模態框和非模態框的使用：

模態框：一般會有一層黑色透明的蒙板，它打斷使用者所屬的主流程，不能進行下去，只能到完成模態框的操作，才能返回到主流程中去，這個操作很明確，不會被誤解；

非模態框：一般沒有那一層蒙板，不會影響所屬的主流程，也不用擔心原有進度會停止，仍然可以持續操作，即開啟非模態也能看見底層的主流程。

概述：模態or 非模態，統稱為彈窗。

樣式上可以理解為類似卡片，能夠幫助使用者快速定位獲取關鍵資訊和進行操作，它的內容是靈活的，一般情況下包含文字、圖示、按鈕。彈窗的設計是給使用者傳遞與當前場景需要的操作相關的內容。

場景使用：會根據業務的需要、場景要求，衍生出其他類多種形態。大多情況下先對彈窗分類，再對應到場景中使用。而實際上產品設計會從實際業務出發，從使用方式考慮，倒推來使用什麼樣的彈窗符合要求。

基本設計原則：層次要分明，突出重點。

遵循基本的介面設計原則，在多種場景下透過資訊分層、字型的粗細、大小等方式展現出明顯的視覺層次，結合業務場景需要再按照閱讀順序慣例來佈局，標題使用物件的名字，目的是幫助使用者聚焦每一個關鍵資訊上。

一、悄無聲息的，你在不在乎它，它都會出現的

全域性提示：一般由系統主動發起，不是使用者請求的，大體分為進度提醒、通知提醒、公告提醒。

1。 進度提醒

這個是由系統發起的，表明使用者當前所在的操作的程序中的位置，抑或是卡在進度未操作，無響應狀態，通知使用者。

位置：在頁面的頂部浮層顯示一塊區域；統一放置訊息分類裡。

2。 通知提醒

來自系統一些重要的資訊推送給使用者，或者是來自其他使用者的提示資訊，抑或是操作反饋。

位置：將其放在右上側，並自動關閉。

3。 公告提醒

依然是由系統發起，提醒使用者需要關注的資訊，一般包含系統迭代、系統錯誤、稽核透過or不透過、系統維護提醒等以及其他活動資訊。

位置：與進度提醒同一位置，一般情況下並會在3S自動消失。

二、強制打斷使用者當前流程的

部分功能需要使用者打斷去確認操作或是可能會造成比較危險的，不常用的，那麼就需要改變使用者操作焦點，將使用者的注意力從原來流程中拎出來，那麼這個時候需要一個方式隔離原有流程和需要當前操作的內容，模態框就是比較適用的。

疊加在系統視窗的彈出式視窗，彈框以對話的方式讓使用者參與進來，以對話的方式與使用者產生互動操作。

操作反饋提示類：

1。 成功和失敗

對於某個模組的層級過深的功能操作反饋，需要在提交之後的結果反饋中提供輔助導航返回到初始功能頁面。

2。 確認型彈窗

在簡單的業務場景中，只需要使用者進行確認的“確認”或“取消”等案例。一般情況下應用在對內容的提交、修改，在內容詳情頁裡的刪除操作，表格的批次刪除等。

樣式：標題（以所屬物件作為標題）+文案（對物件的解釋說明）+操作按鈕。

3。 操作型彈窗

在複雜的業務場景中，需要使用者進行資料輸入一系列操作。

一般會有新建內容（新建內容很多的就需要用新頁面，彈窗有限空間滿足不了大容量的資料輸入）、檢視詳情（內容多需要新頁面展示）、詳情編輯。有部分場景下，新建內容和編輯內容是重合的。

一般樣式：標題+資料輸入元件+操作按鈕

複雜樣式：標題+資料輸入和資料展示組合控制元件+操作按鈕

4。 組合型彈窗（堆疊彈窗）

特殊複雜業務中，單層模態框不能滿足實際業務的需要，考慮彈窗的容量大小以及主次使用者類別使用的情況下，會使用堆疊彈窗，在有限的條件下，能做的就是儘量將彈窗分層次。

三、彈窗出現不打斷使用者原有流程的

在實際操作的過程中，常見的錯誤提示、部分晦澀難懂或專業的術語、對功能元件的描述解釋、小模組裡的操作反饋、全文字展示，只會在使用者不明白用途的情況下，告知使用者，但不能妨礙使用者閱讀或是操作。

1。 氣泡提示（解釋說明的）

起輔助說明的，輔助使用者決策。

樣式：深色背景+文字描述；一般由滑鼠滑入目標區域，展現氣泡提示框，滑鼠滑出即消失。

2。 氣泡對話方塊

一般簡單場景中，對單條資訊或者模組內的某一個內容執行操作確認。

樣式：背景+（+圖示）文案描述+操作按鈕；一般滑鼠點選，顯示氣泡，點選其他區域即消失。

複雜的場景中，氣泡框也承載需要使用者去執行資料輸入的操作，將氣泡內的執行後的結果與原流程同步資料展示結果。

除此之外，氣泡框承載的內容和模態框操作型別有重合部分，不同的是，氣泡框的資料與主流程的資料需要有對應關係。

3。 堆疊氣泡框

特殊場景需要，單層氣泡框不能滿足需求，內容需要比較嚴謹的父子級關係，且並不是常用的，在考慮對後續的衍生，也會將不常用的功能隱藏，需要時再點選彈出，方法類似於堆疊模態框。

四、特殊場景下

在某些複雜業務的場景下，需要模態框和非模態框搭配組合使用，特別是操作彈窗和氣泡框之間。

一般情況下，是操作彈窗—>氣泡框（氣泡框—>操作彈窗這個型別不常有，主要是不符合使用者的使用習慣）。

五、總結

對於彈窗的使用，應用到各個型別的使用者場景下選擇合適恰當的方式去滿足需求，也許不盡人意，但也是在進步。不僅僅需要了解彈窗的型別，更需要了解業務場景，實際應用過程中需要兩者相互碰撞，打破、重組，尋找到合適的方式。

思考延伸：上邊有說到堆疊模態框，在實際應用中，層級多達三層彈窗，使用的時候，重複點選好幾次按鈕才能關閉彈窗，使用起來甚是麻煩，有沒有可以最佳化的方法呢？

本文由 @Ychen 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議