編者按：本文是作者從iOS 和 Material Design 設(shè)計(jì)規(guī)范中總結(jié)的App 彈窗體系，全面深入，非常適合初級(jí)UI 設(shè)計(jì)師進(jìn)階學(xué)習(xí)。

1. 彈窗的定義

彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種。

△ ?彈窗分類(lèi)

模態(tài)彈窗：很容易打斷用戶的操作行為，用戶必須回應(yīng)，否則不能進(jìn)行其他操作。

非模態(tài)彈窗：不會(huì)影響用戶的操作，用戶可以不對(duì)其進(jìn)行回應(yīng)，非模態(tài)彈窗通常都有時(shí)間限制，出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。

彈窗作用：非模態(tài)彈窗一般被設(shè)計(jì)成用來(lái)告訴用戶信息內(nèi)容，而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。

2. 彈窗的介紹

2.1 Dialog(Alerts)

△ ?得到、日歷

Dialog需要用戶對(duì)此彈框進(jìn)行操作后才能繼續(xù)執(zhí)行其他任務(wù)。

警告框在iOS中稱(chēng)之為Alerts。iOS的Alerts（警告框）主要用來(lái)傳達(dá)重要信息，并且常常需要用戶來(lái)進(jìn)行操作。

使用Dialog的時(shí)候還是謹(jǐn)慎一點(diǎn)比較好，盡量不要給用戶帶來(lái)糟糕的體驗(yàn)感。

2.2 Popover

△ ?朝夕日歷、微信、微博

浮出層（Popover）：是當(dāng)用戶輕點(diǎn)某個(gè)控件或頁(yè)面中的某一區(qū)域時(shí)浮出的，半透明的臨時(shí)視圖。

常用Popover的形式來(lái)呈現(xiàn)頁(yè)面中折疊的一些額外信息，或在首頁(yè)位置呈現(xiàn)一些常用操作的快速入口。

2.3 Actionbar（Action Sheets、Acitivity Views）

△ ?相冊(cè)、陌陌、知乎、微信

如果選擇按鈕太多，可以參考微信彈窗的形式組織按鈕和滾動(dòng)顯示，但要留有足夠的視覺(jué)線索。

△ ?餓了么、知乎、iOS

Actoinbar一般都會(huì)提供給用戶更多的功能選擇，一般可以采用官方控件，如果有特殊功能的話可以自己設(shè)計(jì)；一般都設(shè)計(jì)有一個(gè)默認(rèn)的“取消”功能按鈕，點(diǎn)擊該按鈕后或者點(diǎn)擊彈窗外的界面都可以關(guān)閉彈窗。Action Sheets（操作列表）和Acitivity Views（活動(dòng)視圖）是iOS上的特有的交互形式。

2.4 Toast/HUD

△ ?字里行間、Enjoy、即刻、微博

△ ?Pocket、Walkup、iOS

Toast是安卓系統(tǒng)的一個(gè)控件名詞，現(xiàn)在也應(yīng)用于iOS系統(tǒng)中。Toast屬于一種輕量級(jí)的反饋，常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會(huì)自動(dòng)消失，可以出現(xiàn)在屏幕上中下任意位置，但同個(gè)產(chǎn)品會(huì)模塊盡量使用同一位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知。Toast信息給予用戶及時(shí)反饋，確保用戶知曉自己所處的狀態(tài)，并做出相應(yīng)的措施。

考慮到Toast提示框顯示的時(shí)間較短（幾秒種）、占用區(qū)域不大，它容易被用戶忽略，所以Toast不適合承載過(guò)多的文字和重要信息。

關(guān)于Toast ，這兒有一篇更詳細(xì)的文章：《「這個(gè)控件叫什么」系列之TOAST（吐司提示）的曾經(jīng)、現(xiàn)在與未來(lái)》

透明指示層（HUD）：iOS平臺(tái)沒(méi)有Toasts這種說(shuō)法，只有HUD。（iOS音量截圖）

iOS中建議，設(shè)計(jì)一種引人注目但又和你的 app 的樣式相協(xié)調(diào)的方式去展示信息。（微博的刷新）

Toasts和HUD不同之處：

1.Toasts一般出現(xiàn)在屏幕下方，HUD出現(xiàn)在屏幕中間。

2.Toasts一般是灰黑或黑色半透明，HUD一般是毛玻璃半透明。

3.每次產(chǎn)生的Toasts內(nèi)容不可改變，HUD內(nèi)容可以改變（比如調(diào)節(jié)音量時(shí)出現(xiàn)的HUD）

2.5 Snackbar

Snackbar是Android平臺(tái)特有的交互形式，很多時(shí)候也會(huì)應(yīng)用在iOS系統(tǒng)中。它也用于向用戶反饋信息，但其打擾程度介于對(duì)話框和Toast之間；一般出現(xiàn)1到2秒會(huì)自動(dòng)消失，但和toast不同的是它是可交互的，并且一定是在底部出現(xiàn)。

Snackbar使用場(chǎng)景：當(dāng)你刪除收集箱某件任務(wù)時(shí)，可以在屏幕底部出現(xiàn)Snackbar，提示“任務(wù)成功刪除”，并附帶撤銷(xiāo)操作，當(dāng)用戶點(diǎn)擊撤銷(xiāo)時(shí)，任務(wù)可恢復(fù)。用戶不進(jìn)行操作Snackbar則消失，任務(wù)刪除成功。

△ ?滴答清單、Spark

Snackbar與toast的對(duì)比

1.都為小彈窗的形式，會(huì)自動(dòng)消失；

2.Snackbar一般都會(huì)有操作按鈕，如撤銷(xiāo)。toast則不可交互；

3.Snackbar一般出現(xiàn)在底部；

4.Snackbar帶有一定的交互性，用戶觸摸屏幕其他地方后自動(dòng)消失，也可以在屏幕上滑動(dòng)關(guān)閉。

5.Toast和Snackbar顯示時(shí)間都可以修改（建議遵循系統(tǒng)）；

6.Snackbar打擾程度介于對(duì)話框和Toast之間；

7.Snackbar僅是安卓規(guī)范樣式且運(yùn)用還未普及，可能造成用戶理解負(fù)擔(dān)；

總結(jié)

Alert：當(dāng)提示信息是至關(guān)重要的，并且必須要由用戶做出決定才能繼續(xù)的時(shí)候，請(qǐng)使用Alert。非用戶發(fā)起的（即系統(tǒng)自動(dòng)發(fā)起）一般都用Alert。

Action Sheet：重要程度弱于Alert時(shí)，當(dāng)需要給用戶更多的功能選擇時(shí)使用Action Sheet。一般用戶主動(dòng)發(fā)起任務(wù)時(shí)用 Action Sheet。

Toast：當(dāng)提示信息只是告知用戶某個(gè)事情發(fā)生了，用戶不需要對(duì)這個(gè)事情做出響應(yīng)的時(shí)候，使用Toast。

Snackbar：以上兩者之外的任何其他場(chǎng)景，Snackbar可能會(huì)是你最好的選擇。

官方參考

Material Design規(guī)范：Material

「在這兒讀懂Material Design 」

官方譯文：

1. 《中文版來(lái)了！新版Material Design 官方動(dòng)效指南》
2. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（二）》
3. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（三）》

學(xué)習(xí)筆記：

1. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記》

iOS規(guī)范：Developer

中文版：

1. 《中文版來(lái)了！UI設(shè)計(jì)師必讀的IOS 10人機(jī)界面設(shè)計(jì)指南 （一）》
2. 《中文版來(lái)了！UI設(shè)計(jì)師必讀的IOS 10人機(jī)界面設(shè)計(jì)指南 （二）》
3. 《中文版來(lái)了！UI設(shè)計(jì)師必讀的IOS 10人機(jī)界面設(shè)計(jì)指南 （三）》
4. 《中文版來(lái)了！UI設(shè)計(jì)師必讀的IOS 10人機(jī)界面設(shè)計(jì)指南 （四）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量200萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com