作為一個交互設計師，每個項目都會接觸到各種各樣，大大小小的彈窗?？雌饋砜赡懿⒉浑y，但是也有不少人對于彈窗的分類和使用場景不是很清晰。所以這次我整理了一下關于彈窗的應用，也希望以后能養(yǎng)成定期總結的習慣。 

彈窗的作用

彈窗可告知用戶信息內容，也可讓用戶與之進行交互?？蓽p少用戶在流程中的跳出感。 

下圖是我整理的大綱，一般將彈窗分為模態(tài)和非模態(tài)兩種類型。 

模態(tài)彈窗

會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。（除了告訴用戶信息內容外還需要用戶進行功能操作）

非模態(tài)彈窗

不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現(xiàn)一段時間就會自動消失。（一般被設計成用來告訴用戶信息內容） 

1.模態(tài)彈窗

選擇類彈窗

這類模態(tài)需要你做出決定才能繼續(xù)進行主流任務。它可以是一個警告、可以是讓你明確你想要執(zhí)行什么操作的對話框或者明確要選擇的模式。

目的：快速使用

1.1動作菜單（ Actionbar、Action Sheets、AcitivityView）

Action Sheet通常是由底部彈出，這類彈窗需要用戶進行有效操作或是點擊空白處消除彈窗，才能進行其他操作。

使用場景：

• 呈現(xiàn)與當前情景相關的兩個或多個選項

• 確認是否執(zhí)行某個可能具有破壞性的操作

注意事項：

• 選項較少可使用列表模式；宮格模式適用于選項非常多的情況，并且能以圖標形式展現(xiàn)選項

• 出現(xiàn)可能產生潛在風險的行為時，應當彈出Action Sheet，并將危險操作用紅色標注

• Action Sheet是可以連續(xù)彈出的

• 在頁面有多個喚起對象或選項本身不夠明晰的情況下，提供清晰準確的描述是非常有必要的

1.2 警告框與對話框（ Alert/Dialog ）

Dialog通常出現(xiàn)在頁面中間，需用用戶進行有效操作，否則不能進行其他操作。 

使用場景：

• 需要向用戶提問或得到許可

• 簡單的交互行為，例如編輯文字等

• 一些重要信息的展示

注意事項：

• 通常會帶一個取消/關閉的按鈕，點擊可關閉彈窗（點擊空白區(qū)域不可關閉）

• 如果彈窗中包含輸入框，呼起鍵盤時，彈窗位置往上移（鍵盤不遮罩輸入框為準）

1.3 浮層彈窗（ Popover/Popup）

浮層彈窗通常出現(xiàn)在點擊區(qū)域附近，需要用戶進行有效操作或點擊空白處消除彈窗后才能進行其他操作。 

使用場景：

• 當前頁面內容比較重要，又需要展示更多的類型或選擇

• 將頁面模塊中不常用的功能隱藏

注意事項：

• 點擊入口樣式應包含“更多/可展開”的含義，例如 ^ + … 之類

• 如果不是固定位置展開，則要考慮不同位置時展開的方向（如圖3、4）

執(zhí)行類彈窗

這種模態(tài)的出現(xiàn)就是為了完成任務?；旧纤鼈兎浅＿m用于添加、編輯等任何復雜的任務。

其實該類彈窗沒有指定的控件，實際上也可能會以一個單獨頁面去開發(fā)。但是在用戶的使用過程中，也會感受到這是一個彈窗，所以我還是把這類彈窗和控件類的一起分析。 

1.4 全屏彈窗

全屏彈窗是最常見的模態(tài)類型，覆蓋整個屏幕，一般從下往上彈出。 

使用場景：

• 處理可能具有多個步驟的復雜任務

• 需要用戶保持全身心地關注

注意事項：

• 主要操作（完成／保存）始終位于右上角或底部

• 消極操作（取消）應在左上角

• 當用戶已經(jīng)設置了一些選項，則點擊X號時，彈出警告框提示用戶將丟棄所做的更改

1.5 部分屏幕彈窗

使用場景：

• 處理較為復雜的任務（一般是作用于當前頁面的）

注意事項：

• 選擇適當?shù)膭赢?/p>

• 添加關閉手勢

2.非模態(tài)彈窗

2.1 提示框（Toast/HUD）

toast一般出現(xiàn)在屏幕中間或頂部，無法對其操作，出現(xiàn)一段時間以后會自動消失，并且在此期間不影響其他操作。

ios中并沒有toast這個控件，與之相似的是HUD。HUD相對于toast，可以有圖標，內容時可以變的。（曾經(jīng)安卓toast規(guī)范：出現(xiàn)在底部、僅展示文字且精簡、非模態(tài)、自動消失、不可進行交互）

隨著應用場景的不斷豐富，toast的使用早已打破原來的規(guī)范（如4圖，含圖標，模態(tài)窗口并且可交互） 

使用場景：

• 用戶進行操作后的及時反饋

• 用戶當前所處狀態(tài)的反饋，確保用戶知曉自己所處的狀態(tài)，并可以做出相應的措施

2.2 Snackbar

Snackbar可以理解為是加強版的Toast。

樣式和規(guī)則與Toast非常相似，不同主要有兩點：1.Snackbar支持主動滑動關閉。2.Snackbar可以附帶一個操作（也可以不帶） 

使用場景：

• 用戶完成操作后，留有“撤銷”按鈕給用戶反悔的余地

• 與toast相似

2.3 氣泡/提示（tips）

tips有的懸浮在頁面上，有的嵌入在頁面里，有的可以交互，有的不能交互，有的會自動消失…通常不會影響當前正常操作。

使用場景：

• 主動告知用戶信息（與toast相似，但toast一般是操作的之后反饋）

• 新功能簡單介紹

• 用戶行為引導

小結

   

通過分析和理解各類彈窗的使用場景、作用和規(guī)范，能對該類控件有個全局性的了解，以便在實際工作中能更好的去使用和優(yōu)化。

規(guī)范是最標準的情況，場景是千變萬化的，具體運用的時候還是需要根據(jù)場景來靈活應用。