我們口中常說的彈窗其實是個廣義的范圍，包括了對話框，動作菜單，浮出層，toast，snackbar等，這么多類型的彈窗在使用中很容易混亂或者說濫用，反而得不償失，給用戶帶來更多困擾。故本篇文章主要分析和總結(jié)不同彈窗的使用場景及工作中的實際應(yīng)用。
官方的設(shè)計樣式會提到，但是細節(jié)不展開，有需要的可以參閱MD官方文檔和蘋果HIG官方文檔，文檔里介紹的都很細致。
除了官方文檔，本文還參閱了很多前輩的總結(jié)分析，參考鏈接已置于文末。（配圖主要來自體驗過程中的app截圖，安卓部分截圖主要來自MD規(guī)范）
在App使用中，彈窗出現(xiàn)的頻率越來越高，運營活動，系統(tǒng)通知，信息反饋，任務(wù)引導等。濫用的彈窗會漸漸導致用戶認知疲勞和視覺失調(diào)，甚至會出現(xiàn)“習慣性取消”等行為。
彈窗最主要的功能就是服務(wù)于當前主任務(wù)之外的支線任務(wù)，包括信息傳遞，操作反饋等。
對話框，警告框，toast……都屬于彈窗，但是使用場景都不一樣。
在合適的業(yè)務(wù)場景選擇合適的彈窗組件，能夠保證最基礎(chǔ)的用戶體驗。因為像強干擾類彈窗的使用，對用戶而言，更是一種強加的任務(wù)，很容易導致用戶喪失耐心而流失。
彈窗可以按照是否強制打斷用戶操作來分成兩種，模態(tài)彈窗和非模態(tài)彈窗（也可以叫做阻斷式彈窗和非阻斷式彈窗）。
模態(tài)彈窗：模態(tài)提供了一個專注聚焦的環(huán)境，用戶只有完成或者關(guān)閉當前任務(wù)，才能進行其他任務(wù)。
特點：打斷用戶當前的操作流程，屬于強勢的干擾行為，故運用彈窗需要慎重考慮。
常用組件：dialog（對話框）/alert(警告框)、popover（浮出層）、action sheet（動作菜單）、activity views（活動視圖）、modal bottom sheet（模態(tài)底部菜單）。
非模態(tài)彈窗：常用于輕量級的操作反饋和信息傳遞，不需要獲取屏幕焦點，用戶可以同時操作屏幕中的其他內(nèi)容。
特點：屬于輕量級的反饋，不會對用戶流程產(chǎn)生干擾，但同時又給了用戶反饋和信息。
常用組件：Toast（吐司），snackbar，Hud（透明指示層）。
dialog和alert分別是MD和ios的官方彈出框，是最常見的彈窗，兩者功能一樣，在使用上以及樣式上略有區(qū)別（下文分析統(tǒng)一稱為彈出框）。
彈出框通常用來傳達和app及設(shè)備相關(guān)的重要信息，并且要求用戶操作或反饋，且其出現(xiàn)在屏幕中央，對內(nèi)容遮擋嚴重，會中斷用戶正常操作。用戶只有完成或者關(guān)閉當前任務(wù)，才能進行其他任務(wù)。
其官方樣式如下：
4.1.1 使用場景
通知用戶app或設(shè)備相關(guān)的問題：
通過強干擾通知用戶設(shè)備相關(guān)問題如備份，低電量等問題；這些潛在問題可能會對用戶造成一定負面的影響。
再比如app的版本更新，消息通知，首飾引導等都關(guān)系到用戶的利益，所以也會用強干擾的方式讓用戶明確知道并選擇。
輔助用戶完成任務(wù)，如系統(tǒng)權(quán)限：
用戶在進行任務(wù)的過程中，受到阻攔，必須通過其他輔助操作幫助他完成任務(wù)。
如完成一些任務(wù)必須要開啟相應(yīng)的系統(tǒng)權(quán)限：上傳照片要開啟相冊權(quán)限；拍小視頻要麥克風權(quán)限；出行外賣等產(chǎn)品要開啟定位權(quán)限；新建相冊必須要為相冊命名；下載app要登錄itunes賬號。
用戶主動中斷任務(wù)，破壞性操作等：
用戶中斷當前任務(wù)，對之前的操作有一定的影響，或者一些無法挽回的破壞性操作，故需強干擾的彈窗通知，避免用戶因為失誤有了不可挽回的損失。如退出賬號；刪除訂單，活動消息等；放棄編輯。
操作反饋：
當操作后的反饋比較重要，會影響用戶接下來的操作或會影響當下的任務(wù)，那就需要用強干擾讓用戶明確知道，要完成此操作需要什么，或者接下來會發(fā)生什么。
例如西瓜視頻的結(jié)算通過強干擾通知到用戶想要結(jié)算應(yīng)該怎么做。
運營活動：
現(xiàn)在用彈出框來傳遞運營活動已經(jīng)成為一個約定俗成的用法了，雖然ios規(guī)范中建議盡量少用彈出框，但公司還是要盈利的，所以基本上所有app都會以這種強干擾的形式來通知用戶“這里有優(yōu)惠活動”等運營活動。
這種場景下，彈出框會根據(jù)產(chǎn)品以及業(yè)務(wù)的運營需求及產(chǎn)品的調(diào)性做豐富的運營設(shè)計，來吸引用戶參加運營活動，需要注意的一點，需要用戶參加的buttom一定要加強，突出。
功能引導：
功能引導和運營活動一樣，是產(chǎn)品出于業(yè)務(wù)角度考慮，用強干擾的方式吸引用戶使用某功能，達到一定的業(yè)務(wù)目標，如用戶活躍度。
例如完成訂單后（外賣或商品）引導用戶評價，并給予一定獎勵。如將流量引流到新業(yè)務(wù)，從而達到新業(yè)務(wù)推廣目的。
浮出層是ios的組件，是用戶點擊屏幕上的某個控件或區(qū)域出現(xiàn)在屏幕上方的臨時視圖，它最典型的是包含一個指向它出現(xiàn)位置的箭頭，且浮出層一般在入口下方，整個浮出層應(yīng)該位于整個屏幕的中上方。
浮出層最開始主要用于大屏幕的ipad，但由于手機屏幕越來越大，目前也被較多地運用到手機界面中。
4.2.1 使用場景
多個常用操作的快捷入口：
多個常用操作通過popover折疊起來，視覺上更清爽簡潔，同時使用起來也方便，缺點是用戶不能直觀看到，需要一定的學習才能掌握，所以適合于有學習能力用戶群的產(chǎn)品
呈現(xiàn)頁面中一些折疊的信息：
屬于浮出層的衍生應(yīng)用，和上個場景一樣，節(jié)約屏幕空間，顯露出一部分，并將剩余信息折疊起來，不影響用戶理解功能，又解決了屏幕空間，若用戶有需求，即可展開探索更多的信息，同樣也會用箭頭等指向出處
對于新用戶的功能引導或者新功能的引導：
此類場景也屬于浮出層的衍生應(yīng)用，主要通過帶指向箭頭的浮層引導用戶學習某個功能，一般需要學習的功能是高亮的，且箭頭指向它。
actionsheet是ios系統(tǒng)中特定的警告框，用來響應(yīng)動作或控件，或者呈現(xiàn)和當前內(nèi)容相關(guān)的兩個及更多的選項。一般在屏幕底部。官方不建議在動作菜單中應(yīng)用滾動條，所以動作菜單中的選項不能過多。
4.3.1 使用場景
當前對象的多個操作或者完成任務(wù)的多個選擇：
對當前對象的的多個操作，如qq中對圖片長按，出現(xiàn)多個對該圖片可進行的操作，幫助完成任務(wù)。除了文字列表外，還可以用圖標+宮格式的展示方式，例如分享功能的多個選項。
執(zhí)行潛在的破壞性操作前的二次確認：
當執(zhí)行潛在的破壞性操作前需再做提醒，避免產(chǎn)生不可挽回的失誤。需注意的是破壞性操作的按鈕需重點突出，一般用紅色，起到警示，危險的提醒作用
和alert的區(qū)別：
alert主要適用于兩個選項，而actionsheet可以有多個功能選項，且展示形式更多樣。前文講過，alert也有破壞性操作提醒的場景使用。
兩者相比，alert出現(xiàn)在屏幕中央，actionsheet出現(xiàn)在屏幕底部。視覺角度上alert相較于actionsheet更有阻斷感，對用戶而言干擾性更大。
另一方面底部的actionsheet從手勢操作的角度上來看，操作更方便，更容易對此作出選擇或關(guān)閉。所以alert更加適用于嚴重后果的破壞性操作提醒。
活動視圖是ios組件，是針對當前頁面提供的一系列任務(wù)和服務(wù)，例如復(fù)制，收藏，查找等。系統(tǒng)提供了許多內(nèi)置活動，包括打印，信息和AirPlay。
這些任務(wù)始終首先出現(xiàn)在活動視圖中，無法重新排序。無需創(chuàng)建執(zhí)行這些內(nèi)置任務(wù)的自定義活動?；顒右晥D還顯示來自其他應(yīng)用的共享和操作擴展。
Bottom sheet是MD的組件，MD中底部菜單有兩種，一種是Standard bottom sheet（標準底部菜單），另一種是Modal bottom sheet（模態(tài)底部菜單）。
MD的模態(tài)底部菜單和iOS的action sheet類似，它阻止用戶與屏幕其他地方交互，通過聚焦的底部菜單提供了更多的選項和功能。它可以是內(nèi)聯(lián)菜單和簡單對話框的替代方案，為內(nèi)容，圖標和動作提供了額外的空間。
規(guī)范建議，模態(tài)底部淡淡的初始垂直位置的上限為屏幕高度的50％。內(nèi)容超過屏幕高度50％的模態(tài)菜單可以在整個屏幕上拉動，在內(nèi)部滾動以訪問其余項目。同樣他的展現(xiàn)方式有列表式，也可有宮格式
snackbar是android專有控件，是出現(xiàn)在屏幕底部的提供有關(guān)app相關(guān)的簡短信息提醒，它屬于輕量級的信息提醒，一般出現(xiàn)幾秒后就會自動消失，不會中斷用戶操作。
snackbar往往由一條文案+一個引導性按鈕（可選，按鈕可以引導用戶進一步操作）組成，帶有一定的交互性。因為它自動會消失，所以它一定沒有取消或者不要等否定性按鈕。
4.6.1 使用場景
傳達輕量級的信息和操作反饋，可以引導用戶操作：
傳達輕量級的信息或反饋，并且可以引導用戶進行下一步行為，但并不強制用戶操作。比如chrome添加書簽時，可以進一步對新加的書簽進行編輯；刪除書簽時防止用戶后悔，提供一個撤銷按鈕。
Toast是android專有的控件，原先的MD規(guī)范中，toast是和snackbar放在一起講的，翻閱了最新的MD規(guī)范，snackbar里找不到關(guān)于toast的相關(guān)介紹（有小伙伴找到的望提醒一下）。
Toast應(yīng)該包含在snackbar里了，當snackbar沒有按鈕其實就是toast了，不過這邊還是把Toast單獨拿出來分析
4.7.1 使用場景
傳達輕量級的信息和操作反饋，且不需要用戶操作：
適用于通知用戶不重要的信息和操作反饋，且不會對用戶當前的任務(wù)有影響，因為不能交互，且?guī)酌牒笙?，所以用戶很可能忽略，所以該類信息相對而言沒那么重要。
雖然toast是android專有樣式，但現(xiàn)在很多ios版本的系統(tǒng)中都使用了改良版的“toast”，因為輕反饋，不打斷用戶操作，同時又能通知信息和操作反饋，對用戶而言及其友好，但是不易傳達過多的文字，因為用戶很有可能會忽略。
ios文檔中的feedback中有建議：反饋可以幫助人們了解應(yīng)用正在做什么，發(fā)現(xiàn)他們下一步可以做什么，并了解行動的結(jié)果。所以實際應(yīng)用中，既要不打擾用戶，又要能引起用戶注意，還要和產(chǎn)品設(shè)計相協(xié)調(diào)。
比如結(jié)合了文字和icon的樣式，再比如用較為突出的背景色，位置的話在中央，頂部，底部，都會出現(xiàn)，會根據(jù)具體的業(yè)務(wù)來選擇合適的位置。一般出現(xiàn)的位置會和操作內(nèi)容在一起，這樣用戶才能清晰有效地得到即時反饋。
下方例舉的toast案例因為選用了比內(nèi)容更為突出的背景色，相比較上方案例的toast更易被用戶發(fā)現(xiàn)和察覺，達到通知用戶的目的。
Hud透明指示層，ios專用控件，典型的就是音量調(diào)節(jié)的彈窗樣式。部分改良的toast，在樣式上有借鑒學習Hud。
Dialog/Alert：
當信息或操作非常重要，并且必須要由用戶做決定或者操作才能繼續(xù)，一般用alert，更適用于用戶判斷選擇。
Modal bottom sheet/Action sheet：
稍弱于dialog/alert，更著重于提供更多的功能和選項時使用。
Activity view：
是針對當前頁面提供的一系列額外的任務(wù)和服務(wù)。
Popover：
使用更側(cè)重于指向性，更適用于信息或功能折疊。
Toast：
不太重要的信息提醒和操作反饋，更適用于不需用戶響應(yīng)或反饋的場景。
snackbar：
不太重要的信息提醒和操作反饋，可以交互，但并不強制，更適用于可以引導用戶進行下一步或者一些撤銷上一步的場景。
Hud：
音量調(diào)節(jié)。
了解了每個彈窗組件的用法，下次就可以根據(jù)實際業(yè)務(wù)設(shè)計合適的彈窗了，不過官方規(guī)范或者文章的建議也都只是參考，實際工作中還是要靈活變通，設(shè)計的目標是幫助用戶更好更快的解決問題。
以上就是我對彈窗相關(guān)知識的總結(jié)，總結(jié)的過程中也對官方規(guī)范彈窗部分的內(nèi)容再次熟悉了好幾遍，因為看的英文，所以理解上可能稍微有些不足，有不對的地方，還希望大家批評指正。（推薦大家多看看官方設(shè)計規(guī)范，就像一本非常實用的設(shè)計工具書，對于實際工作還是非常有幫助的）
聯(lián)系客服
