在手機app應用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談談關于app彈窗設計以及彈窗的適用情景。
一. 彈窗的定義
1. 彈窗作用
彈窗是為了讓用戶回應，需要用戶與之交互的窗口。
非模態彈窗一般被設計成用來告訴用戶信息內容，而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。
2. 模態彈窗
會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。
（Alerts／dialog，Actionbar，Popover）
3. 非模態彈窗
不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現一段時間就會自動消失。
（Toast/HUD，Snackbar）
二. 彈窗分類
以下將以各類彈窗的含義、作用、適用來進行淺析。
1. Alerts/Dialog：警告框與對話框
含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。
剖析：iOS中警告框稱之為Alerts，作用是用來傳達重要信息，并伴隨著需要用戶進行操作。
iOS規范中，警告框包含的元素如下：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。
必須包含標題、包含一個或多個按鈕。
Android規范中，彈窗交互按鈕需結合實際情況，不用「是/否」原則進行設計。
作用：告知用戶當前發生的狀況，讓用戶主動選擇回應。
適用：重要性較高的操作時，如退出、刪除、清空等。
2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動視圖
含義：英譯為工具欄、操作欄。
剖析：當用戶激發一個操作的時候，出現此窗口。
一般會給用戶提供更多的功能選擇，一般可采用官方控件。
一般都設計有一個默認的「取消」按鈕，點擊取消可以關閉彈窗。
Aciton Sheets和Activity Views是iOS上特有的交互形式。
特性是用戶觸發、包含兩個或以上的按鈕。
△ 以上為今日頭條、iOS系統相冊
作用：操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久占用頁面UI的空間。
適用：如分享功能。
3. Popover/Popup：浮出框/浮層彈窗
含義：英意為彈出窗口，浮動于頂層窗口，氣泡。
△ 以上為微博、qq、微信
剖析：當用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口。
不會對用戶所在位置進行跳轉。
作用：可以在當前頁面進行更多的操作行為，顯示/隱藏頁面中的折疊信息。
適用：首頁位置呈現一些常用操作的快捷入口。
4. 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進行交互。
適用：提示不需要的反饋信息，如刷新后的成功狀態。
5. Snackbar：底部彈窗
Android特有的交互形式，在Google的MD規范中，將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中，也可以理解為加強版的Toast。
含義：英譯為快餐、小吃。
剖析：Snackbars與toast一樣是從屏幕底部向上出現，但是Snackbar不同的是可以經過用戶進行其他操作而消失。
適用：較多適用于撤銷操作。
三. 總結
通過分析和了解彈窗的類別、適用范圍，才能更好的在設計中進行優化與改變。用戶體驗設計的重點，是一步步了解用戶，然后設計出適合用戶體驗，滿足用戶心理需求的產品。把握好彈框設計規范，避免彈框設計的誤區，能更好的幫助你完善產品。
但是，沒有十全十美的產品，所以要根據設計趨勢與用戶需求不斷地進行更新迭代，通過用戶反饋，不斷地改良產品體驗，才是做出優秀產品的前提。
作者微信號：JJ865477301
歡迎關注作者的微信公眾號：「JAYGO」
「超全面的彈窗設計總結」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓