APP彈窗彙總及選擇維度淺析
最近在改版的APP問題較多，其中之一就是各種彈窗的使用問題，如iOS端的Alert與Action Sheet的不當使用。利用這次機會做一個總結以加深理解，梳理自己的彈窗知識體系，歡迎斧正。
APP彈窗總覽
需要回應類彈窗：用來傳達需要使用者特別注意的重要資訊（如付費下載），在使用者點選彈窗按鈕或彈窗外部區域後關閉。 無需迴應類彈窗：則主要用來告知使用者一些輕量級資訊（如訊息已傳送），它不需要使用者特別注意，也不需要使用者對彈窗進行迴應，一般會在2秒左右自行消失。
接下來一一介紹。
1.1 Alert（警報）
1.1.1 定義
Alert用來傳達與應用程式或裝置狀態有關的重要資訊，並經常請求反饋。Alert由標題，可選訊息，一個或多個按鈕以及用於收集輸入的可選文字欄位組成。除了這些可配置的元素外，警報的外觀是靜態的，不能定製。
只在傳達重要資訊時使用Alert，確保人們認真對待他們。iOS的原生應用上很少使用Alert，即使刪除郵件、日曆事件等高危操作都只調用了Action Sheet。而一些我們常見的主流APP連退出登入、清除快取等使用者主動發起的操作都要突兀地彈出Alert，破壞了使用者體驗。
這種由使用者主動發起的操作，使用ActionSheet更合適
1.1.2 設計原則
標題： 標題儘量簡短，控制在一行以內，不要使用結尾標點符號。
訊息： 可選，儘量提供簡短的完整句子，且避免解釋按鈕的功能。使用友好的語氣，避免使用諸如“你“、”我”這樣的文案，有時它們會被理解為侮辱或高傲。
按鈕： 一般來說，使用雙鍵警報來提供兩種選擇之間的簡單選擇。操作過多時請考慮使用 Action Sheet。人們最可能點選的按鈕應該在右側，取消按鈕應始終位於左側。儘可能使用與警報標題和訊息直接相關的動詞和動詞短語，例如檢視全部，回覆或忽略。避免使用“是”和“否”。
1.2 Action Sheet（動作面板）
1.2.1 定義
動作面板是響應控制元件或操作而出現的特定警報型別，並呈現與當前上下文相關的一組兩個或多個選擇。使用動作面板讓人們發起任務，或者在執行潛在的破壞性操作之前請求確認。在較小的螢幕上(如iPhone)，動作面板從螢幕底部向上滑動。在較大的螢幕上(如iPad)，動作面板立即彈出。
1.2.2 設計原則
動作面板底部始終提供取消按鈕，以提高使用者放棄任務時的信心。
用紅色凸顯執行破壞性或危險操作的按鈕，並將其顯示在動作面板的頂部。
精簡選項，避免在動作面板中啟用滾動。
1.3 Activity View（活動檢視）
1.3.1 定義
活動是一項任務，如複製，收藏或查詢，這在當前上下文中很有用。啟動後，活動可以立即執行任務，或在繼續之前詢問更多資訊。活動由活動檢視管理，活動檢視顯示為一個表或彈窗，具體取決於裝置和方向。使用活動為使用者提供訪問您的應用可以執行的自定義服務或任務。
1.3.2 設計原則
簡潔描述活動的標題，如果太長會被截斷。
確保活動適合當前的情況。系統自帶的活動雖不可以重新排序，但可以排除。例如，為了防止人們列印影象，可以排除“列印”活動。
1.4 Popover（氣泡彈出窗）
1.4.1 定義
Popover是一個臨時檢視，當點選某個控制元件或某個區域時，它會出現在螢幕上的其他內容上方。通常，Popover包含指向其出現位置的箭頭。
Popover在大螢幕上使用最合適，可以包含導航欄、工具欄等各種元素，蘋果官方建議只保留在iPad應用程式中使用（檢視詳情）。如果在小螢幕如iPhone上使用時，應儘量減少螢幕空間的佔用，並控制操作項數量以防止滾動，一般點選彈窗外部區域可將其關閉。
2.1 Dialog（對話方塊）
2.1.1 定義
對話會告知使用者有關特定任務的資訊，並可能包含重要資訊，需要做出決定或涉及多項任務。對話方塊包含文字和UI控制元件。他們保持專注直到被解除或採取了必要的行動。謹慎使用對話，因為它們是中斷性的。
Simple menus(簡易選單)、Simple dialogs(簡易對話方塊)也是比較常見的對話方塊型別，他們都可以用來顯示列表專案的選項，但前者對使用者當前的上下文影響較小，所以是首選。而簡易對話方塊的特點是可以提供列表項的其他詳細資訊或操作（如頭像、圖示），如下圖所示。
2.2 Modal Bottom Sheet（模態底部面板）
2.2.1 定義
模態底部面板是選單或簡單對話方塊的替代方案，並且可以顯示來自其他應用程式的深層連結內容。它們出現在其他使用者介面元素上方，必須被解除才能與底層內容互動。當模態底部面板滑入螢幕時，螢幕的其餘部分會變暗，從而將焦點對準底部面板。
2.2.2 用法及注意事項
顯示選單項時，完全展開的模態底部面板與應用欄底部保持最小8dp的距離。
高度應由其包含的內容量決定，最初不要重疊應用欄，並允許使用者點選/滑動即可解除。
3.1 HUD（透明指示層） / 3.2 Toast
HUD和Toast都是輕提示，用來承載一些無需使用者特別注意的資訊，比如已傳送、網路狀態不好請稍後再試等，無需使用者迴應，一般2秒左右會自行消失。通常情況下，HUD位於螢幕中間，Toast位於螢幕下方。嚴格來說Toast是Andorid系統裡的叫法，iOS系統裡類似功能的控制元件叫HUD，但通常情況下會用Toast來統一稱呼這種輕提示。
iOS系統原裝HUD
3.3 Snackbar
Snackbar是Material Design設計語言中特有的一個控制元件，它包含與所執行的操作直接相關的單行文字。一次只能顯示一個Snackbar，它可以包含一個文字操作，但不能有圖示。
Snackbar在Android系統上的應用
總結：以上介紹了移動端比較常用的彈窗型別，在實際應用中我們要根據產品目標、使用者目標以及場景做權衡選擇。
個人認為可以從 情境、迴應、平臺 三個維度來選擇：
1）當前上下文情境：比如iOS端比較容易混淆的Alert和ActionSheet，使用者主動發起的操作，彈窗應該使用Action Sheet來提供與此操作相關的選項讓使用者選擇，控制元件上方半透明區域可以清晰地看到下方介面，與上文情境連線更緊密，不會造成使用者使用流程的中段；而裝置或應用發起的則建議使用Alert，比如異常錯誤警報，此時需要使用者的注意力暫時離開當前的使用流程，以關注這條重要提示或警報。
2）是否需要回應：根據資訊的重要程度來選擇彈窗型別。比如同是錯誤提示，有的只要使用者知道一下即可(Toast)，有的比較重要需要使用者點選確認一下(Alert)。
3）平臺差異化設計：依據各平臺的設計規範與使用習慣，使用對應的控制元件。比如snackbar是Android平臺特有的控制元件，使用得當可以提高使用者的操作效率和體驗。
彈窗總覽圖
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
https://www.jianshu.com/p/1ec4dca92e71