在印象里，前兩年我們產品經理給的交互圖中，所有的彈框方式都是彈窗（對話框）。用戶操作的時候，隔幾步“duang～”一個彈窗，隔幾步“duang～”一個彈窗，真是令人崩潰的體驗方式。直到有一次需要操作的按鈕太多，彈窗放不下了，于是解鎖了新的方式——浮層（其實是動作欄）。然后靠著這個假“浮層”和彈窗解決了很多彈框的需求。再后來先后接觸到了真·浮層和Toast，慢慢地彈框方式有了許多變化和組合，再也不見以前的“duang～duang～duang～”了。當然有了選擇之后也會給我們造成困擾——用哪一種合適？
這篇文章就是對彈框方式做一個簡單的總結。讓大家了解彈框都有哪些方式，以及他們各自的特點，并結合實例分析各自的適用場景。
我們平時說的彈窗、浮層、動作欄、Toast其實都是彈框的一種，除了這些還有對話框、Hud、等。那么這些彈框我們可以分為兩大類：模態彈框和非模態彈框。
這個概念最早是在的應用程序中模態對話框是什么時候實例的對話框，兩者的區別在于當對話框打開時，是否允許用戶進行其他對象的操作。那么衍生至移動端，我們可以理解為是否強制用戶交互。強制交互的是模態彈框，不強制交互的是非模態彈框。根據這個原則模態對話框是什么時候實例的對話框，我們將平時常見的幾種彈框做了一個歸類（見下圖）。雖然既有iOS的，也有的，但是現在兩端的組件很多都是通用的，所以相似的就歸在一起了。
模態彈框
上文提到過，模態彈框和非模態彈框最大的區別就是是否強制用戶交互。模態彈框會打斷用戶的當前操作流程，如果不在彈框上操作的話，其余功能都使用不了。從這方面，我們可以看出來模態彈框的優缺點都十分的明顯：
優點：可以很好的獲取用戶的視覺焦點。
缺點：打斷了用戶的當前操作流程。
模態彈框屬于一種重量性反饋，一般用于用戶進行重要的操作。常見的模態彈框種類有對話框(/Alter)、動作欄(/)和浮層()。
對話框
對話框一般用于用戶進行一項很重要或者有風險的操作，這時會彈出一個對話框給用戶提示信息，用戶根據提示來進行判斷。如TIM中賬號退出時以及微信小程序獲取隱私授權時，都是重要且有風險的操作。對話框一般出現在屏幕的中間位置，會對界面的主要內容造成遮擋。
目前來說對話框的設計樣式繁多，可以進行信息錄入，如iOS相冊中的新建相冊；也可以用于營銷宣傳，如美團外賣的優惠券領取。
動作欄
動作欄可以看成是對話框的一個加強版，因為對話框一般都只有兩個按鈕。而動作欄可以提供多個功能按鈕，而且展示的樣式比較多變。如今日頭條的舉報功能是縱向列表排列，微信公眾號的更多功能是宮格式列表排列。
但是也有例外，有的動作欄只有兩個選項。如iOS相冊中，你要刪除照片時，「刪除提示」就是通過動作欄來完成的。這里我認為主要的目的是動作欄位于屏幕下方，相對來說對照片內容的遮蓋會小一點，方便用戶確認。
浮層
浮層是用戶點擊控件或者界面某一區域浮出的半透明的臨時視圖。浮層的樣式跟動作欄很相似，都可以向用戶展示多個功能選項，如TIM中的更多功能。但是浮層可以出現屏幕中的任何位置，能夠給用戶更具有指向型的提示，如微信讀書中的文本選中后操作，特指對選中的這段文本操作。
非模態彈框
與模態彈框相比，非模態彈框最大的區別是不強制用戶交互，也不會彈出半透明背景層，非模態彈框停留一段時間后會自己消失。所以他的優缺點也十分明顯：
優點：不會對用戶造成太大的干擾。
缺點：容易被用戶忽視，而且不適合展示過多的信息，可能在用戶讀完之前就消失了。
非模態彈框屬于輕量型反饋，常見的非模態彈框有Toast（Hud）和。
Toast
Toast主要用于用戶完成操作以后，告訴用戶操作結果或者狀態的變更，如網易嚴選中添加商品至購物車后的提示。Toast其實是屬于的組件，iOS里有一個相類似的是Hud，最常見的就是音量調節提示。但是現在iOS和的界限不斷被打破，Toast現在也被廣泛應用于iOS界面設計中。
Toast的樣式不僅僅局限于半透明黑色底加白色文字。他也可以加icon，如淘寶中添加商品至購物車后的提示。或者改變其背景層顏色，如淘寶中的微淘刷新后提示。
一般是由文字和功能按鈕組成的，用戶可以點擊按鈕交互，即使用戶不點擊也會自動消失。
也不僅僅出現在頁面底部。如百度地圖中截屏后，頁面上方會以的形式出現分享提示；同樣是百度地圖中，搜索路線之后，在地圖上方會有擁堵路線繞行提示。
總結
彈框分為兩大類：模態彈框和非模態彈框。模態彈框包括對話框、動作欄、浮層；非模態彈框包括Toast、。
在選擇使用時
1、確定是否需要強制用戶操作（包括但不限于：信息輸入、選擇、確認行為），需要則使用模態彈框，如果不需要操作，僅僅是告知提示則使用非模態彈框。
2、模態彈框中，對話框適用于用戶進行單一功能操作，而動作欄和浮層適用于用戶進行多項功能操作，這其中浮層相對于動作欄更具有指向型。非模態彈框中，Toast主要用于簡短的狀態變更或者操作結果反饋，而則可以加入操作或者用于較長的提示。
3、適度使用模態彈框，不要讓用戶產生「狼來了」的心理。
參考
彈框體系總結：模態彈框和非模態彈框
淺析APP控件：模態彈窗與非模態彈窗