編輯導語：彈框，在我們日常使用手機時都會碰到，那麼對於這些彈框，你是否有幾分好奇，不同模態的彈框有什麼差異？作者對彈框的分類和形式進行了總結，並分享了在設計時需要注意的幾點問題。
手機彈框相信大家都不陌生，那為什麼要設計彈框不設定介面？彈框到底有哪幾種形式？幾種彈框的區別在哪裡？在設計的時候需要注意些什麼？本文將從這幾個板塊給大家分享一下彈框的設計。
一、彈框的分類
彈窗又稱為對話方塊，是App與使用者進行互動的常見方式之一。使用彈框可以減少使用者功能流程的頁面跳轉，當功能比較少的時候儘量使用彈框，但是如果功能選項中包括很多描述文字的時候，還是單獨設定成跳轉頁面會更好。
彈窗分為模態彈窗和非模態彈窗兩種，區分這兩種彈框只需要記清楚一點，那就是到底需不需要使用者對這個彈框進行相關操作，需要操作的就是模態彈框，不需要操作的就是非模態彈框。
模態彈框往往會直接打斷使用者的操作，當出現模態彈框的時候，使用者必須對其進行操作，否則無法進行其他操作，也就是說模態彈框往往是提示使用者一些重要訊息的。
但是非模態彈框往往不會影響使用者的正常操作，使用者不用對其有任何操作也會自動消失，因為非模態彈框通常都有時間限制，出現一段時間之後就會自動消失。從而也能夠看出來非模態彈框只是用來通知使用者一些不太重要的訊息的，單純地通知使用者，並不需要任何操作。
二、模態彈框
1。 Dialog對話方塊
Dialog對話方塊是一種模態彈窗。當用戶進行了敏感操作，或者當App發生了較為嚴重性的狀態改變時，這種操作和改變會帶來影響性比較大的結果，就會出現Dialog對話方塊來提示使用者進行確認或選擇。比如退出App、進行付費下載等功能操作。
Dialog 對話方塊是由標題、資訊內容和功能按鈕組成，如下圖，Dialog對話方塊只有當用戶點選了某個功能按鈕後彈窗才會消失，App隨即執行該功能操作，進入相應的功能流程。
由於Dialog 對話方塊提示的都是比較重要的一些操作或者提醒，所以在設計的時候一定要簡潔、無異義，讓使用者一眼就能看到我接下來的操作會帶來什麼樣的影響或者後果。所以實際上大多數Dialog對話方塊都被設計成了沒有標題的形式，這樣的設計可以減少使用者的理解成本。
2。 Actionbar功能框
Actionbar功能框可以看成是Dialog對話方塊的一種延伸設計，兩者都是模態彈窗，使用者必須進行迴應，否則彈窗不會消失，使用者無法繼續其它操作。
Actoinbar和Dialog的區別在於Dialog往往只會提供一個或兩個功能選項，但是Actoinbar往往會給使用者展示多個功能按鈕選擇，提供給使用者更多的功能選擇。而且Actionbar功能框還有一個特性，就是在彈框底部會存在一個固定的“取消”按鈕，點選取消按鈕可直接關閉彈框。
對於Actionbar功能框而言還有一種展示形式，那就是當功能按鈕很多的時候，全部用文字列表的形式展示不太清楚，那就可以採用文字+圖示的形式來展示，這樣能展示的內容會更多，而且給到使用者的體驗感會更好。但是這種形式就需要對功能按鈕進行合理的UI設計和排列布局，符合使用者的視覺體驗。
三、非模態彈框
1。 Toast 提示框
Toast提示框是一種非模態彈窗，往往會彈出一個提示框，作為提醒或訊息反饋來用，一般用來顯示操作結果，或者應用狀態的改變。這個提示框往往會儲存兩三秒就消失了。
例如你儲存了一篇文章，App彈出一個Toast提示你訊息已儲存。
Toast 提示框往往也會在重新整理介面時展現，比如微博動態重新整理成功時，會有提示重新整理成功提示框，這樣的設計會給使用者一種耳目一新的感覺，同時也不會感覺到這個彈框跟這個介面產生任何違和感。
2。 Snackbar 提示對話方塊
Snackbar 提示對話方塊比較有意思的一點就是它同時融合了模態彈框和非模態彈框的一些特點，它除了去告知使用者一些資訊的同時，還能跟使用者產生互動，也就是需要使用者簡單的操作。
比如下圖中收藏時會底部有會有彈框出現，同時在彈框中會出現功能按鈕，可以點選操作，同時使用者如果不做任何操作，這條彈框也會在顯示三秒後自動消失。
3。 Snackbar 提示對話方塊與toast提示框的區別
四、總結
在進行彈框設計時一定要謹慎，因為並不是所有的彈框設計都會被使用者接受，在使用彈窗的同時一定要考慮清楚彈框內容的重要性以及設計彈框的目的，根據這兩點來判斷我們是否需要使用彈框以及該使用哪種形式的彈框。而且彈框儘量少用，一定要避免一個接一個的彈框，這樣會引起使用者的反感。
總之作為產品經理在滿足使用者功能使用的同時一定要考慮使用者的體驗，結合多個案例去設計自己的產品。
此文僅代表個人看法，歡迎大家交流討論~
本文由 @一起聊產品 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
