模態彈窗與非模態彈窗
在手機app應用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談談關於app彈窗設計以及彈窗的適用情景。
一、彈窗的定義 1、彈窗作用
彈窗是為了讓使用者迴應，需要使用者與之互動的視窗。
非模態彈窗一般被設計成用來告訴使用者資訊內容，而模態彈窗除了告訴使用者資訊內容外還需要使用者進行功能操作。
2、模態彈窗
會打斷使用者的操作行為，強制使用者必須進行操作，否則不可以進行其他操作。
（Alerts／dialog，Actionbar，Popover）
3、非模態彈窗
不會影響使用者操作，使用者可以不與迴應，通常有時間限制，出現一段時間就會自動消失。
（Toast/HUD，Snackbar）
二、彈窗分類
*以下將以各類彈窗的含義、作用、適用來進行淺析
Alerts/Dialog：警告框與對話方塊
含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾使用者的行為。
剖析：iOS中警告框稱之為Alerts，作用是用來傳達重要資訊，並伴隨著需要使用者進行操作。
iOS規範中，警告框包含的元素如下：標題（必選）、描述資訊（可選）、輸入框（可選）、按鈕（必選）
必須包含標題、包含一個或多個按鈕。
Android規範中，彈窗互動按鈕需結合實際情況，不用“是/否”原則進行設計。
作用：告知使用者當前發生的狀況，讓使用者主動選擇迴應。
適用：重要性較高的操作時，如退出、刪除、清空等
Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動檢視
含義：英譯為工具欄、操作欄
剖析：當用戶激發一個操作的時候，出現此視窗。
一般會給使用者提供更多的功能選擇，一般可採用官方控制元件。
一般都設計有一個預設的“取消”按鈕，點選取消可以關閉彈窗。
Aciton Sheets和Activity Views是iOS上特有的互動形式。
特性是使用者觸發、包含兩個或以上的按鈕。
(以上為今日頭條、iOS系統相簿)
作用：操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久佔用頁面UI的空間。
適用：如分享功能
Popover/Popup：浮出框/浮層彈窗
含義：英意為彈出視窗，浮動於頂層視窗，氣泡
（以上為微博、qq、微信）
剖析：當用戶點選某個控制元件或者某個區域時浮出的半透明或者不透明的彈窗視窗。
不會對使用者所在位置進行跳轉。
作用：可以在當前頁面進行更多的操作行為，顯示/隱藏頁面中的摺疊資訊。
適用：首頁位置呈現一些常用操作的快捷入口。
Toast/HUD：提示框（iOS沒有Toast，只有HUD）
含義：Toast也被稱為吐司提示，Toast是安卓系統的一個控制元件名詞，現也應用於iOS系統中。
剖析：提示框屬於一種輕量級的彈窗反饋形式，常以小彈框的形式出現，持續1-2秒自動消失，可以出現在螢幕任意位置，但是建議同一款產品儘量使用相同位置，讓使用者產生統一認知，成為習慣。
提示資訊能給予使用者及時反饋，確保使用者知曉自己所處的狀態，並可以做出相應的措施。
iOS使用者更習慣於在頂部感知反饋資訊，不干擾使用者瀏覽主體內容。Toast出現在螢幕頂部不會遮擋主體內容。（如花瓣、有道雲筆記）
Android正統的規範中Toast：
- 出現在螢幕底部。
- 只能放文字不能帶圖示，文字要精簡不宜太長。
- 不是模態的，可以透過Toast對其他控制元件進行操作。
- 短時間後會自動消失。
- 不能對Toast進行互動。
- 優先適用於系統提示，不能手動操作讓Toast主動消失。
（以上為今日頭條、微博、即刻）
HUD與Toast的區別：
- HUD只出現在螢幕的中央，Toast則在底部；
- HUD可以包含icon，Toast只能純文字；
- HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；
- HUD中內容可以變化（如調節音量時），Toast中內容不可變化。
（iOS音量調節）
作用：
優點：
- 佔用螢幕空間小。
- 不會打斷使用者操作。
- 使用簡單適用範圍廣
缺點：
- 出現時間短，在碎片化時代注意力不集中容易錯過Toast提示。
- 遮蓋其他控制元件，但不能對Toast進行互動。
適用：提示不需要的反饋資訊，如重新整理後的成功狀態。
Snackbar：底部彈窗
Android特有的互動形式，在Google的MD規範中，將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中。也可以理解為加強版的Toast。
含義：英譯為快餐、小吃。
剖析：Snackbars與toast一樣是從螢幕底部向上出現，但是Snackbar不同的是可以經過使用者進行其他操作而消失。
適用：較多適用於撤銷操作。
三、總結
通過分析和了解彈窗的類別、適用範圍，才能更好地在設計中進行優化與改變，使用者體驗設計的重點，是一步步瞭解使用者，然後設計出適合使用者體驗，滿足使用者心理需求的產品。把握好彈框設計規範，避免彈框設計的誤區，能更好地幫助你完善產品。
但是，沒有十全十美的產品，所以要根據設計趨勢與使用者需求不斷地進行更新迭代，通過使用者反饋不斷地改良產品體驗，才是做出優秀產品的前提。
通過幾天的學習參考，寫出這篇文章，希望對於大家有所幫助，歡迎交流。
作者：JaylonG 一位對產品有著濃厚興趣的UI/UX設計師。
本文由 @Jaylon 原創釋出於人人都是產品經理。