這一篇你將看到：
1、彈窗的定義
2、不同類型彈窗的特點及使用場景
3、常見使用誤區(qū)
一、彈窗的定義：
彈窗是App中一種常見的交互方式，主要具有“傳遞信息”和“獲取反饋”兩大功能。按類別劃分，可分為“模態(tài)彈窗”和“非模態(tài)彈窗”兩大類。
模態(tài)彈窗：
強制打斷用戶當(dāng)前操作行為，傳遞給用戶信息，同時用戶必須進行操作回應(yīng)，否則無法使用其他功能。
包含：Dialog/alerts（警告框、對話框）； Actionbar、Action Sheets、Acitivity View（動作欄、操作列表、活動視圖）； Popover/Popup（彈出框、浮層）
非模態(tài)彈窗：
不影響用戶當(dāng)前操作行為，傳遞給用戶信息，用戶不用對其進行回應(yīng)，一般出現(xiàn)幾秒后消失。
包含：Toast / HUD（提示框）；Snackbar（底部彈窗）
二、彈窗介紹：
1.1、Dialog/alerts（警告框、對話框）
顧名思義此類彈窗具有通知、警告的作用，往往會打擾到用戶正常操作。用戶必須對彈窗進行回應(yīng)，才能繼續(xù)其他任務(wù)。此類彈窗在安卓中稱為Dialog，在ios中稱為alerts。
（1）樣式：
一般出現(xiàn)在屏幕中間位置，背后有黑色半透明蒙層。主要分為“按鈕樣式”和“圖片樣式“。“按鈕樣式”基本元素必須包含標題、1~3個按鈕，此外可以根據(jù)情況添加：描述文案、輸入框等。“圖片樣式”通常用于廣告活動宣傳，圖片形狀不固定，可以是異形。有時也可以圖片和按鈕結(jié)合使用。
（2）使用場景：
此類彈窗通常用于很重要、很緊急、有風(fēng)險的操作，或傳達重要信息。如：退出、刪除、清空、版本升級、廣告宣傳等。由系統(tǒng)發(fā)起的彈窗（非用戶觸發(fā)）一般也使用Dialog。
（3）不同按鈕數(shù)量的Dialog使用方法也不同：
單個按鈕：一般用于告知用戶信息，用戶不需要做出選擇，點擊按鈕后彈窗消失或直接執(zhí)行對應(yīng)操作。
兩個按鈕：一般用于告知用戶信息，用戶需要在兩個選項中做出選擇，如果其中涉及到不能恢復(fù)的破壞性操作時，需要在按鈕上添加特殊顏色，來警示用戶謹慎操作。
三個按鈕：用于有3個選項時。通常把最希望用戶點擊的選項，放在第一個按鈕。最不想用戶點擊的選項，放最后一個按鈕。
1.2、Actionbar（Action Sheets、Acitivity View）（動作欄、操作列表、活動視圖）
點擊頁面某個操作區(qū)域，觸發(fā)此彈窗。提供一個臨時操作窗口，可以選擇多個功能選項。一般都有一個默認的“取消”按鈕，點擊“取消”或彈窗以外區(qū)域可以關(guān)閉彈窗。Aciton Sheets和Activity View是iOS上特有的交互形式。
Action Sheets
（1）樣式：
動作欄主要位于屏幕底部，背后有黑色半透明蒙層，可以提供多個功能選項，且展示的樣式不固定。“Action Sheets”一般提供至少2個功能選項，頂部提示文案是可選模塊。如果功能選項太多，可以使用“Acitivity View”滾動顯示多個功能，注意需要保留一定的視覺線索。特殊情況下也可自行定義彈窗樣式，來包含多個功能或復(fù)雜操作，以適應(yīng)特殊場景。
Acitivity View
（2）使用場景：
一般由用戶主動觸發(fā)，常用于提供更多的功能操作。如：分享功能
（3）優(yōu)點：
這種提示方式可以減少彈窗出現(xiàn)在頁面中間給用戶帶來的干擾，且不會永久占用頁面的空間。
1.3、 Popover/Popup（浮層）
（1）樣式：
用戶點擊頁面某個區(qū)域，浮出的半透明或不透明窗口，包含有多個功能選項。浮層出現(xiàn)的位置不固定，因此使用上更加靈活。
（2）使用場景：
用于折疊頁面中的多余信息，或是作為一些功能的快捷入口。常出現(xiàn)于首頁，具有一定的指向性。
2.1、Toast / HUD（提示框）
此類彈窗在安卓里叫Toast。在iOS里有一個類似的叫HUD，音量調(diào)節(jié)提示是最常見的HUD。
（1）樣式：
此類彈窗尺寸較小，常出現(xiàn)幾秒后消失。一般有一個背景，背景顏色不限制，帶有簡短的文案提示。同時也可以添加icon，icon顏色也不限制，可以是動圖。Toast出現(xiàn)的位置可自定，通常在屏幕中間居多。整個App里，相同類型的Toast出現(xiàn)的位置需要保持一致，形成統(tǒng)一的認知習(xí)慣。
（2）使用場景：
用于通知用戶結(jié)果反饋或狀態(tài)變化，用戶不需要對這個彈窗做出回應(yīng)。此類彈窗能給予用戶及時反饋，對用戶的打擾程度較小，用于不是非常重要信息的提示，如：刷新成功、保存成功、等待中。
（3）優(yōu)點：
不打斷用戶當(dāng)前的操作任務(wù)，是一種輕量級的反饋提示，對用戶干擾小，占用屏幕空間小。
（4）缺點：
容易被用戶忽視，出現(xiàn)時間短。不適合展示重要信息，以及大量文案，用戶很可能沒讀完文案彈窗就消失了。此類彈窗無法交互操作。
（5）系統(tǒng)規(guī)范里Toast與HUD的區(qū)別：
1、Toast只出現(xiàn)在屏幕底部，HUD則出現(xiàn)在屏幕中央。
2、Toast只能是純文字，HUD則可以帶icon。
3、Toast一般是黑色半透明背景，HUD是毛玻璃透明背景
4、Toast里面的內(nèi)容無法變化，HUD則可以變化內(nèi)容（如音量調(diào)節(jié)時，音量的變化）
我們可以看到很多線上App的Toast，并沒有嚴格按照系統(tǒng)規(guī)范。所以在實際使用中，完全可以跳出規(guī)范，選擇適合自己產(chǎn)品的Toast樣式。
2.2、Snackbar（底部彈窗）
Snackbar是安卓系統(tǒng)的一種控件，有時也在ios系統(tǒng)中使用。它用于向用戶反饋信息，其打擾程度介于Dialog和Toast之間，是一種輕量級的反饋彈窗。Snackbar出現(xiàn)時，用戶仍然可以在屏幕上操作，屏幕上只能同時出現(xiàn)1個Snackbar。
（1）樣式：
大多數(shù)出現(xiàn)在屏幕底部，由文字和按鈕組成，用戶可以點擊按鈕進行交互。通常展示幾秒鐘后消失，也可以操作彈窗外其他位置而消失。偶爾也有未按照規(guī)范，出現(xiàn)在屏幕頂部的情況，如摩拜單車App。
（2）使用場景：
較多使用于撤銷操作，給予用戶反悔的機會。
（3）Snackbar與Toast的對比：
1、都是小尺寸彈窗，幾秒鐘后自動消失。
2、Snackbar帶有可交互的按鈕，而Toast無法交互。
3、Snackbar一般出現(xiàn)在屏幕底部，Toast位置不固定。
4、Snackbar對用戶的打擾程度，比Toast略高。
5、Snackbar可以觸摸彈窗以外部分消失，而Toast不行，只能等待自動消失。
三、彈窗總結(jié)：
1、模態(tài)彈窗
特點：模態(tài)彈窗是一種重量級反饋，常用于重要信息的提示，進行重要操作。
優(yōu)點：能夠容易的獲取用戶視覺焦點，吸引用戶注意力。
缺點：容易打斷用戶當(dāng)前的操作行為，用戶必須回應(yīng)彈窗，否則無法進行其他操作。
Dialog適用于少量選項的判斷操作；動作欄和浮層適用于多個選項的功能操作；浮層具有一定的指向性。
2、非模態(tài)彈框
特點：非模態(tài)彈窗屬于一種輕量級反饋，常用于非重要的信息提示。有一定的時間限制，出現(xiàn)一段時間后自動消失。
優(yōu)點：不強制用戶交互，對用戶的打擾程度較小。
缺點：展示時間較短，不適合展示重要信息。不能承載大量文案。
3、彈窗設(shè)計原則
（1）精簡文案
彈窗的“按鈕文案”和“提示文案”應(yīng)盡量精簡易懂，不產(chǎn)生疑惑和歧義。大量或模糊不清的文案，會導(dǎo)致用戶無法快速做出選擇，導(dǎo)致整個操作流程時間變長、效率低下。
反饋類型的彈窗，應(yīng)盡可能告訴用戶：發(fā)生了什么，應(yīng)該怎么做。（如果不需要用戶去做什么，則不用提示應(yīng)該怎么做）
圖一：過于復(fù)雜的文案看似，能讓用戶完全明白發(fā)生了什么。實際上文案過多，閱讀時間變長，操作效率變低。大量的文案閱讀起來也很累。
圖二：只告訴了用戶發(fā)生了什么，沒有告訴用戶應(yīng)該怎么辦。尤其是對年紀大的用戶，以及對App不熟悉的用戶，根本不知道接下來應(yīng)該怎么做。
圖三：比較合適。精簡的文案清楚且快速的讓用戶知道發(fā)生了什么，應(yīng)該怎么做。同時按鈕文案變成“重新輸入”，再一次提示用戶接下來如何操作。
（2）直接了當(dāng)
操作按鈕盡可能使用直接表示對應(yīng)操作的文案，避免用戶長時間思考，快速理解選項，高效完成操作。
如果希望用戶點擊按鈕去升級，文案應(yīng)直接表達升級意思，使用“立即升級”文案。而使用“確定”文案，則不能清晰表達升級意思，會使用戶產(chǎn)生疑惑和歧義，不利于理解和高效操作。
使用“刪除”文案，而不是“確定”文案。雖然根據(jù)提示內(nèi)容，一樣可以知道“確定”就是刪除App，但是不如使用“刪除”文案更直接明了。甚至都不用看提示內(nèi)容，也能明白操作按鈕的含義，和點擊后的結(jié)果。直接展示出操作名稱更合適。
四、常見使用誤區(qū)：
1、Dialog（警告框） 和 Action Sheets（操作列表）
（1）Dialog側(cè)重于傳達信息，因此文案內(nèi)容的優(yōu)先級較高。Action Sheets側(cè)重于功能選項，因此表示不同功能選項的按鈕優(yōu)先級較高。
（2）按鈕為2個或以內(nèi)時，一般使用Dialog。按鈕超過2個時，一般使用Action Sheets。（僅指一般情況，特殊場景特殊對待）
（3）需要強行打斷的場景，使用Dialog。如：沒有網(wǎng)絡(luò)，版本升級。
2、Action Sheets（操作列表） 和 選擇器
（1）Action Sheets用于選擇不同的“操作”，而不是選擇不同的“選項”。
（2）選擇不同的選項時（單選），使用選擇器。選擇器可以容納很多選項。
------------------------------------------------------
以上僅對工作中學(xué)習(xí)到的彈窗知識進行總結(jié)，希望可以幫助到大家。
如果喜歡請點個贊吧。聽說點完贊的朋友今年有好運哦~
↓
