一. 前言

我們口中常說的彈窗其實是個廣義的范圍，包括了對話框，動作菜單，浮出層，toast，snackbar等，這么多類型的彈窗在使用中很容易混亂或者說濫用，反而得不償失，給用戶帶來更多困擾，故本篇文章主要分析和總結(jié)不同彈窗的使用場景及工作中的實際應(yīng)用。官方的設(shè)計樣式會提到，但是細(xì)節(jié)不展開，有需要的可以參閱MD官方文檔和蘋果HIG官方文檔，文檔里介紹的都很細(xì)致。除了官方文檔，本文還參閱了很多前輩的總結(jié)分析，參考鏈接已置于文末。（配圖主要來自體驗過程中的app截圖，安卓部分截圖主要來自MD規(guī)范）

二. 什么是彈窗

在app使用中，彈窗出現(xiàn)的頻率越來越高，運營活動，系統(tǒng)通知，信息反饋，任務(wù)引導(dǎo)等。濫用的彈窗會漸漸導(dǎo)致用戶認(rèn)知疲勞和視覺失調(diào)，甚至?xí)霈F(xiàn)“習(xí)慣性取消”等行為。彈窗最主要的功能就是服務(wù)于當(dāng)前主任務(wù)之外的支線任務(wù)，包括信息傳遞，操作反饋等。對話框，警告框，toast......都屬于彈窗，但是使用場景都不一樣。在合適的業(yè)務(wù)場景選擇合適的彈窗組件，能夠保證最基礎(chǔ)的用戶體驗。因為像強干擾類彈窗的使用，對用戶而言，更是一種強加的任務(wù)，很容易導(dǎo)致用戶喪失耐心而流失。

三. 彈窗有哪些

彈窗可以按照是否強制打斷用戶操作來分成兩種，模態(tài)彈窗和非模態(tài)彈窗（也可以叫做阻斷式彈窗和非阻斷式彈窗）

3.1 模態(tài)彈窗

模態(tài)彈窗：模態(tài)提供了一個專注聚焦的環(huán)境，用戶只有完成或者關(guān)閉當(dāng)前任務(wù)，才能進(jìn)行其他任務(wù)。

特點：打斷用戶當(dāng)前的操作流程，屬于強勢的干擾行為，故運用彈窗需要慎重考慮。

常用組件：dialog（對話框）/alert(警告框)，popover（浮出層），action sheet（動作菜單），activity views（活動視圖），modal bottom sheet（模態(tài)底部菜單）

3.2 非模態(tài)彈窗

非模態(tài)彈窗：常用于輕量級的操作反饋和信息傳遞，不需要獲取屏幕焦點，用戶可以同時操作屏幕中的其他內(nèi)容。

特點：屬于輕量級的反饋，不會對用戶流程產(chǎn)生干擾，但同時又給了用戶反饋和信息。

常用組件：Toast（吐司），snackbar，Hud（透明指示層）

四. 具體使用

4.1 強干擾類 — dialog（對話框）/alert（警告框）

dialog和alert分別是MD和ios的官方彈出框，是最常見的彈窗，兩者功能一樣，在使用上以及樣式上略有區(qū)別（下文分析統(tǒng)一稱為彈出框）。

彈出框通常用來傳達(dá)和app及設(shè)備相關(guān)的重要信息，并且要求用戶操作或反饋，且其出現(xiàn)在屏幕中央，對內(nèi)容遮擋嚴(yán)重，會中斷用戶正常操作。用戶只有完成或者關(guān)閉當(dāng)前任務(wù)，才能進(jìn)行其他任務(wù)。其官方樣式如下：

4.1.1 使用場景

* 通知用戶app或設(shè)備相關(guān)的問題

通過強干擾通知用戶設(shè)備相關(guān)問題如備份，低電量等問題；這些潛在問題可能會對用戶造成一定負(fù)面的影響。再比如app的版本更新，消息通知，首飾引導(dǎo)等都關(guān)系到用戶的利益，所以也會用強干擾的方式讓用戶明確知道并選擇。

* 輔助用戶完成任務(wù)，如系統(tǒng)權(quán)限

用戶在進(jìn)行任務(wù)的過程中，受到阻攔，必須通過其他輔助操作幫助他完成任務(wù)。如完成一些任務(wù)必須要開啟相應(yīng)的系統(tǒng)權(quán)限：上傳照片要開啟相冊權(quán)限；拍小視頻要麥克風(fēng)權(quán)限；出行外賣等產(chǎn)品要開啟定位權(quán)限；新建相冊必須要為相冊命名；下載app要登錄itunes賬號；

* 用戶主動中斷任務(wù)，破壞性操作等

用戶中斷當(dāng)前任務(wù)，對之前的操作有一定的影響，或者一些無法挽回的破壞性操作，故需強干擾的彈窗通知，避免用戶因為失誤有了不可挽回的損失。如退出賬號；刪除訂單，活動消息等；放棄編輯；

* 操作反饋

當(dāng)操作后的反饋比較重要，會影響用戶接下來的操作或會影響當(dāng)下的任務(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一定要加強，突出。

* 功能引導(dǎo)

功能引導(dǎo)和運營活動一樣，是產(chǎn)品出于業(yè)務(wù)角度考慮，用強干擾的方式吸引用戶使用某功能，達(dá)到一定的業(yè)務(wù)目標(biāo)，如用戶活躍度，例如完成訂單后（外賣或商品）引導(dǎo)用戶評價，并給予一定獎勵。如將流量引流到新業(yè)務(wù)，從而達(dá)到新業(yè)務(wù)推廣目的。

4.2 強干擾——popover（浮出層）

浮出層是ios的組件，是用戶點擊屏幕上的某個控件或區(qū)域出現(xiàn)在屏幕上方的臨時視圖，它最典型的是包含一個指向它出現(xiàn)位置的箭頭，且浮出層一般在入口下方，整個浮出層應(yīng)該位于整個屏幕的中上方。浮出層最開始主要用于大屏幕的ipad，但由于手機屏幕越來越大，目前也被較多地運用到手機界面中。

4.2.1 使用場景

* 多個常用操作的快捷入口

多個常用操作通過popover折疊起來，視覺上更清爽簡潔，同時使用起來也方便，缺點是用戶不能直觀看到，需要一定的學(xué)習(xí)才能掌握，所以適合于有學(xué)習(xí)能力用戶群的產(chǎn)品。

* 呈現(xiàn)頁面中一些折疊的信息

屬于浮出層的衍生應(yīng)用，和上個場景一樣，節(jié)約屏幕空間，顯露出一部分，并將剩余信息折疊起來，不影響用戶理解功能，又解決了屏幕空間，若用戶有需求，即可展開探索更多的信息，同樣也會用箭頭等指向出處。

* 對于新用戶的功能引導(dǎo)或者新功能的引導(dǎo)

此類場景也屬于浮出層的衍生應(yīng)用，主要通過帶指向箭頭的浮層引導(dǎo)用戶學(xué)習(xí)某個功能，一般需要學(xué)習(xí)的功能是高亮的，且箭頭指向它。

4.3 強干擾——action sheet（動作菜單）

actionsheet是ios系統(tǒng)中特定的警告框，用來響應(yīng)動作或控件，或者呈現(xiàn)和當(dāng)前內(nèi)容相關(guān)的兩個及更多的選項。一般在屏幕底部。官方不建議在動作菜單中應(yīng)用滾動條，所以動作菜單中的選項不能過多。

4.3.1 使用場景

* 當(dāng)前對象的多個操作或者完成任務(wù)的多個選擇

對當(dāng)前對象的的多個操作，如qq中對圖片長按，出現(xiàn)多個對該圖片可進(jìn)行的操作，幫助完成任務(wù)。除了文字列表外，還可以用圖標(biāo)+宮格式的展示方式，例如分享功能的多個選項。

* 執(zhí)行潛在的破壞性操作前的二次確認(rèn)

當(dāng)執(zhí)行潛在的破壞性操作前需再做提醒，避免產(chǎn)生不可挽回的失誤。需注意的是破壞性操作的按鈕需重點突出，一般用紅色，起到警示，危險的提醒作用。

* 和alert的區(qū)別

alert主要適用于兩個選項，而actionsheet可以有多個功能選項，且展示形式更多樣。前文講過，alert也有破壞性操作提醒的場景使用。兩者相比，alert出現(xiàn)在屏幕中央，actionsheet出現(xiàn)在屏幕底部。視覺角度上alert相較于actionsheet更有阻斷感，對用戶而言干擾性更大。另一方面底部的actionsheet從手勢操作的角度上來看，操作更方便，更容易對此作出選擇或關(guān)閉。所以alert更加適用于嚴(yán)重后果的破壞性操作提醒。

4.4 強干擾——activity view（活動視圖）

活動視圖是ios組件，是針對當(dāng)前頁面提供的一系列任務(wù)和服務(wù)，例如復(fù)制，收藏，查找等。系統(tǒng)提供了許多內(nèi)置活動，包括打印，信息和AirPlay。這些任務(wù)始終首先出現(xiàn)在活動視圖中，無法重新排序。無需創(chuàng)建執(zhí)行這些內(nèi)置任務(wù)的自定義活動?；顒右晥D還顯示來自其他應(yīng)用的共享和操作擴(kuò)展。

4.5 強干擾類——modal bottom sheet（模態(tài)底部菜單）

Bottom sheet是MD的組件，MD中底部菜單有兩種，一種是Standard bottom sheet（標(biāo)準(zhǔn)底部菜單），另一種是Modal bottom sheet（模態(tài)底部菜單）。MD的模態(tài)底部菜單和iOS的action sheet類似，它阻止用戶與屏幕其他地方交互，通過聚焦的底部菜單提供了更多的選項和功能。它可以是內(nèi)聯(lián)菜單和簡單對話框的替代方案，為內(nèi)容，圖標(biāo)和動作提供了額外的空間。

規(guī)范建議，模態(tài)底部淡淡的初始垂直位置的上限為屏幕高度的50％。內(nèi)容超過屏幕高度50％的模態(tài)菜單可以在整個屏幕上拉動，在內(nèi)部滾動以訪問其余項目。同樣他的展現(xiàn)方式有列表式，也可有宮格式。

4.6 輕反饋——snackbar

snackbar是android專有控件，是出現(xiàn)在屏幕底部的提供有關(guān)app相關(guān)的簡短信息提醒，它屬于輕量級的信息提醒，一般出現(xiàn)幾秒后就會自動消失，不會中斷用戶操作。snackbar往往由一條文案+一個引導(dǎo)性按鈕（可選，按鈕可以引導(dǎo)用戶進(jìn)一步操作）組成，帶有一定的交互性。因為它自動會消失，所以它一定沒有取消或者不要等否定性按鈕。

4.6.1 使用場景

* 傳達(dá)輕量級的信息和操作反饋，可以引導(dǎo)用戶操作

傳達(dá)輕量級的信息或反饋，并且可以引導(dǎo)用戶進(jìn)行下一步行為，但并不強制用戶操作。比如chrome添加書簽時，可以進(jìn)一步對新加的書簽進(jìn)行編輯；刪除書簽時防止用戶后悔，提供一個撤銷按鈕。

4.7 輕反饋——Toast

Toast是android專有的控件，原先的MD規(guī)范中，toast是和snackbar放在一起講的，翻閱了最新的MD規(guī)范，snackbar里找不到關(guān)于toast的相關(guān)介紹（有小伙伴找到的望提醒一下）。Toast應(yīng)該包含在snackbar里了，當(dāng)snackbar沒有按鈕其實就是toast了，不過這邊還是把Toast單獨拿出來分析。

4.7.1 使用場景

* 傳達(dá)輕量級的信息和操作反饋，且不需要用戶操作

適用于通知用戶不重要的信息和操作反饋，且不會對用戶當(dāng)前的任務(wù)有影響，因為不能交互，且?guī)酌牒笙В杂脩艉芸赡芎雎?，所以該類信息相對而言沒那么重要。

雖然toast是android專有樣式，但現(xiàn)在很多ios版本的系統(tǒng)中都使用了改良版的“toast”，因為輕反饋，不打斷用戶操作，同時又能通知信息和操作反饋，對用戶而言及其友好，但是不易傳達(dá)過多的文字，因為用戶很有可能會忽略。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)和察覺，達(dá)到通知用戶的目的。

4.8 輕反饋——Hud

Hud透明指示層，ios專用控件，典型的就是音量調(diào)節(jié)的彈窗樣式。部分改良的toast，在樣式上有借鑒學(xué)習(xí)Hud。

5.2 其他

了解了每個彈窗組件的用法，下次就可以根據(jù)實際業(yè)務(wù)設(shè)計合適的彈窗了，不過官方規(guī)范或者文章的建議也都只是參考，實際工作中還是要靈活變通，設(shè)計的目標(biāo)是幫助用戶更好更快的解決問題。

以上就是我對彈窗相關(guān)知識的總結(jié)，總結(jié)的過程中也對官方規(guī)范彈窗部分的內(nèi)容再次熟悉了好幾遍，因為看的英文，所以理解上可能稍微有些不足，有不對的地方，還希望大家批評指正。（推薦大家多看看官方設(shè)計規(guī)范，就像一本非常實用的設(shè)計工具書，對于實際工作還是非常有幫助的）

好了今天的分享就到這里了

在這里我相信有很多想要學(xué)習(xí)UI設(shè)計的小伙伴，我自己是一名從事了多年UI設(shè)計工作的設(shè)計師，辭職目前在做自己的私人定制課程，今年年初我花了一個月時間整理了一份最適合2019年學(xué)習(xí)的學(xué)習(xí)干貨，從最基礎(chǔ)到實戰(zhàn)都有整理，送給每一位想學(xué)習(xí)的小伙伴，想要獲取的可以關(guān)注然后私信我“學(xué)習(xí)”兩個字，即可免費獲取資料，伸手黨勿擾~