最近在改版的APP問題較多，其中之一就是各種彈窗的使用問題，如iOS端的Alert與Action Sheet的不當(dāng)使用。利用這次機(jī)會做一個總結(jié)以加深理解，梳理自己的彈窗知識體系，歡迎斧正。
APP彈窗總覽
需要回應(yīng)類彈窗：用來傳達(dá)需要用戶特別注意的重要信息（如付費(fèi)下載），在用戶點(diǎn)擊彈窗按鈕或彈窗外部區(qū)域后關(guān)閉。? 無需回應(yīng)類彈窗：則主要用來告知用戶一些輕量級信息（如消息已發(fā)送），它不需要用戶特別注意，也不需要用戶對彈窗進(jìn)行回應(yīng)，一般會在2秒左右自行消失。
接下來一一介紹。
1.1 Alert（警報）
1.1.1 定義
Alert用來傳達(dá)與應(yīng)用程序或設(shè)備狀態(tài)有關(guān)的重要信息，并經(jīng)常請求反饋。Alert由標(biāo)題，可選消息，一個或多個按鈕以及用于收集輸入的可選文本字段組成。除了這些可配置的元素外，警報的外觀是靜態(tài)的，不能定制。
只在傳達(dá)重要信息時使用Alert，確保人們認(rèn)真對待他們。iOS的原生應(yīng)用上很少使用Alert，即使刪除郵件、日歷事件等高危操作都只調(diào)用了Action Sheet。而一些我們常見的主流APP連退出登錄、清除緩存等用戶主動發(fā)起的操作都要突兀地彈出Alert，破壞了用戶體驗(yàn)。
1.1.2 設(shè)計(jì)原則
標(biāo)題：標(biāo)題盡量簡短，控制在一行以內(nèi)，不要使用結(jié)尾標(biāo)點(diǎn)符號。
消息：可選，盡量提供簡短的完整句子，且避免解釋按鈕的功能。使用友好的語氣，避免使用諸如“你“、”我”這樣的文案，有時它們會被理解為侮辱或高傲。
按鈕：一般來說，使用雙鍵警報來提供兩種選擇之間的簡單選擇。操作過多時請考慮使用 Action Sheet。人們最可能點(diǎn)擊的按鈕應(yīng)該在右側(cè)，取消按鈕應(yīng)始終位于左側(cè)。盡可能使用與警報標(biāo)題和消息直接相關(guān)的動詞和動詞短語，例如查看全部，回復(fù)或忽略。避免使用“是”和“否”。
1.2 Action Sheet（動作面板）
1.2.1 定義
動作面板是響應(yīng)控件或操作而出現(xiàn)的特定警報類型，并呈現(xiàn)與當(dāng)前上下文相關(guān)的一組兩個或多個選擇。使用動作面板讓人們發(fā)起任務(wù)，或者在執(zhí)行潛在的破壞性操作之前請求確認(rèn)。在較小的屏幕上(如iPhone)，動作面板從屏幕底部向上滑動。在較大的屏幕上(如iPad)，動作面板立即彈出。
1.2.2 設(shè)計(jì)原則
動作面板底部始終提供取消按鈕，以提高用戶放棄任務(wù)時的信心。
用紅色凸顯執(zhí)行破壞性或危險操作的按鈕，并將其顯示在動作面板的頂部。
精簡選項(xiàng)，避免在動作面板中啟用滾動。
1.3 Activity View（活動視圖）
1.3.1 定義
活動是一項(xiàng)任務(wù)，如復(fù)制，收藏或查找，這在當(dāng)前上下文中很有用。啟動后，活動可以立即執(zhí)行任務(wù)，或在繼續(xù)之前詢問更多信息?；顒佑苫顒右晥D管理，活動視圖顯示為一個表或彈窗，具體取決于設(shè)備和方向。使用活動為用戶提供訪問您的應(yīng)用可以執(zhí)行的自定義服務(wù)或任務(wù)。
1.3.2 設(shè)計(jì)原則
簡潔描述活動的標(biāo)題，如果太長會被截?cái)唷?/p>
確?；顒舆m合當(dāng)前的情況。系統(tǒng)自帶的活動雖不可以重新排序，但可以排除。例如，為了防止人們打印圖像，可以排除“打印”活動。
1.4 Popover（氣泡彈出窗）
1.4.1 定義
Popover是一個臨時視圖，當(dāng)點(diǎn)擊某個控件或某個區(qū)域時，它會出現(xiàn)在屏幕上的其他內(nèi)容上方。通常，Popover包含指向其出現(xiàn)位置的箭頭。
Popover在大屏幕上使用最合適，可以包含導(dǎo)航欄、工具欄等各種元素，蘋果官方建議只保留在iPad應(yīng)用程序中使用 （查看詳情）。如果在小屏幕如iPhone上使用時，應(yīng)盡量減少屏幕空間的占用，并控制操作項(xiàng)數(shù)量以防止?jié)L動，一般點(diǎn)擊彈窗外部區(qū)域可將其關(guān)閉。
2.1 Dialog（對話框）
2.1.1 定義
對話會告知用戶有關(guān)特定任務(wù)的信息，并可能包含重要信息，需要做出決定或涉及多項(xiàng)任務(wù)。對話框包含文本和UI控件。他們保持專注直到被解除或采取了必要的行動。謹(jǐn)慎使用對話，因?yàn)樗鼈兪侵袛嘈缘摹?/p>
Simple menus(簡易菜單)、Simple dialogs(簡易對話框)也是比較常見的對話框類型，他們都可以用來顯示列表項(xiàng)目的選項(xiàng)，但前者對用戶當(dāng)前的上下文影響較小，所以是首選。而簡易對話框的特點(diǎn)是可以提供列表項(xiàng)的其他詳細(xì)信息或操作（如頭像、圖標(biāo)），如下圖所示。
2.2 Modal Bottom Sheet（模態(tài)底部面板）
2.2.1 定義
模態(tài)底部面板是菜單或簡單對話框的替代方案，并且可以顯示來自其他應(yīng)用程序的深層鏈接內(nèi)容。它們出現(xiàn)在其他用戶界面元素上方，必須被解除才能與底層內(nèi)容交互。當(dāng)模態(tài)底部面板滑入屏幕時，屏幕的其余部分會變暗，從而將焦點(diǎn)對準(zhǔn)底部面板。
2.2.2 用法及注意事項(xiàng)
顯示菜單項(xiàng)時，完全展開的模態(tài)底部面板與應(yīng)用欄底部保持最小8dp的距離。
高度應(yīng)由其包含的內(nèi)容量決定，最初不要重疊應(yīng)用欄，并允許用戶點(diǎn)擊/滑動即可解除。
3.1 HUD（透明指示層） / 3.2 Toast
HUD和Toast都是輕提示，用來承載一些無需用戶特別注意的信息，比如已發(fā)送、網(wǎng)絡(luò)狀態(tài)不好請稍后再試等，無需用戶回應(yīng)，一般2秒左右會自行消失。通常情況下，HUD位于屏幕中間，Toast位于屏幕下方。嚴(yán)格來說Toast是Andorid系統(tǒng)里的叫法，iOS系統(tǒng)里類似功能的控件叫HUD，但通常情況下會用Toast來統(tǒng)一稱呼這種輕提示。
3.3 Snackbar
Snackbar是Material Design設(shè)計(jì)語言中特有的一個控件，它包含與所執(zhí)行的操作直接相關(guān)的單行文本。一次只能顯示一個Snackbar，它可以包含一個文本操作，但不能有圖標(biāo)。
總結(jié)：以上介紹了移動端比較常用的彈窗類型，在實(shí)際應(yīng)用中我們要根據(jù)產(chǎn)品目標(biāo)、用戶目標(biāo)以及場景做權(quán)衡選擇。
個人認(rèn)為可以從 情境、回應(yīng)、平臺 三個維度來選擇：
1）當(dāng)前上下文情境：比如iOS端比較容易混淆的Alert和ActionSheet，用戶主動發(fā)起的操作，彈窗應(yīng)該使用Action Sheet來提供與此操作相關(guān)的選項(xiàng)讓用戶選擇，控件上方半透明區(qū)域可以清晰地看到下方界面，與上文情境連接更緊密，不會造成用戶使用流程的中段；而設(shè)備或應(yīng)用發(fā)起的則建議使用Alert，比如異常錯誤警報，此時需要用戶的注意力暫時離開當(dāng)前的使用流程，以關(guān)注這條重要提示或警報。
2）是否需要回應(yīng)：根據(jù)信息的重要程度來選擇彈窗類型。比如同是錯誤提示，有的只要用戶知道一下即可(Toast)，有的比較重要需要用戶點(diǎn)擊確認(rèn)一下(Alert)。
3）平臺差異化設(shè)計(jì)：依據(jù)各平臺的設(shè)計(jì)規(guī)范與使用習(xí)慣，使用對應(yīng)的控件。比如snackbar是Android平臺特有的控件，使用得當(dāng)可以提高用戶的操作效率和體驗(yàn)。
Agen? 2018.03.14
參考資料：
https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/
https://material.io/guidelines/
https://www.zhihu.com/question/35141228/answer/61369322
http://www.itdecent.cn/p/1ec4dca92e71
