彈窗的類(lèi)型有非常多種，所以在使用時(shí)很容易被濫用，這樣不僅會(huì)對(duì)用戶(hù)帶來(lái)困擾，也會(huì)讓我們的設(shè)計(jì)中出現(xiàn)細(xì)枝末節(jié)的問(wèn)題。本篇文章分析和總結(jié)了不同彈窗的使用場(chǎng)景及工作中的實(shí)際應(yīng)用，知道這些后，以后再也不會(huì)“濫用”彈窗啦！

我們口中常說(shuō)的彈窗其實(shí)是個(gè)廣義的范圍，包括了對(duì)話(huà)框，動(dòng)作菜單，浮出層，toast，snackbar等，這么多類(lèi)型的彈窗在使用中很容易混亂或者說(shuō)濫用，反而得不償失，給用戶(hù)帶來(lái)更多困擾。故本篇文章主要分析和總結(jié)不同彈窗的使用場(chǎng)景及工作中的實(shí)際應(yīng)用。

官方的設(shè)計(jì)樣式會(huì)提到，但是細(xì)節(jié)不展開(kāi)，有需要的可以參閱MD官方文檔和蘋(píng)果HIG官方文檔，文檔里介紹的都很細(xì)致。

除了官方文檔，本文還參閱了很多前輩的總結(jié)分析，參考鏈接已置于文末。（配圖主要來(lái)自體驗(yàn)過(guò)程中的app截圖，安卓部分截圖主要來(lái)自MD規(guī)范）

在App使用中，彈窗出現(xiàn)的頻率越來(lái)越高，運(yùn)營(yíng)活動(dòng)，系統(tǒng)通知，信息反饋，任務(wù)引導(dǎo)等。濫用的彈窗會(huì)漸漸導(dǎo)致用戶(hù)認(rèn)知疲勞和視覺(jué)失調(diào)，甚至?xí)霈F(xiàn)“習(xí)慣性取消”等行為。

彈窗最主要的功能就是服務(wù)于當(dāng)前主任務(wù)之外的支線(xiàn)任務(wù)，包括信息傳遞，操作反饋等。

對(duì)話(huà)框，警告框，toast……都屬于彈窗，但是使用場(chǎng)景都不一樣。

在合適的業(yè)務(wù)場(chǎng)景選擇合適的彈窗組件，能夠保證最基礎(chǔ)的用戶(hù)體驗(yàn)。因?yàn)橄駨?qiáng)干擾類(lèi)彈窗的使用，對(duì)用戶(hù)而言，更是一種強(qiáng)加的任務(wù)，很容易導(dǎo)致用戶(hù)喪失耐心而流失。

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

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

特點(diǎn)：打斷用戶(hù)當(dāng)前的操作流程，屬于強(qiáng)勢(shì)的干擾行為，故運(yùn)用彈窗需要慎重考慮。

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

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

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

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

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

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

其官方樣式如下：

4.1.1 使用場(chǎng)景

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

通過(guò)強(qiáng)干擾通知用戶(hù)設(shè)備相關(guān)問(wèn)題如備份，低電量等問(wèn)題；這些潛在問(wèn)題可能會(huì)對(duì)用戶(hù)造成一定負(fù)面的影響。

再比如app的版本更新，消息通知，首飾引導(dǎo)等都關(guān)系到用戶(hù)的利益，所以也會(huì)用強(qiáng)干擾的方式讓用戶(hù)明確知道并選擇。

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

用戶(hù)在進(jìn)行任務(wù)的過(guò)程中，受到阻攔，必須通過(guò)其他輔助操作幫助他完成任務(wù)。

如完成一些任務(wù)必須要開(kāi)啟相應(yīng)的系統(tǒng)權(quán)限：上傳照片要開(kāi)啟相冊(cè)權(quán)限；拍小視頻要麥克風(fēng)權(quán)限；出行外賣(mài)等產(chǎn)品要開(kāi)啟定位權(quán)限；新建相冊(cè)必須要為相冊(cè)命名；下載app要登錄itunes賬號(hào)。

用戶(hù)主動(dòng)中斷任務(wù)，破壞性操作等：

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

操作反饋：

當(dāng)操作后的反饋比較重要，會(huì)影響用戶(hù)接下來(lái)的操作或會(huì)影響當(dāng)下的任務(wù)，那就需要用強(qiáng)干擾讓用戶(hù)明確知道，要完成此操作需要什么，或者接下來(lái)會(huì)發(fā)生什么。

例如西瓜視頻的結(jié)算通過(guò)強(qiáng)干擾通知到用戶(hù)想要結(jié)算應(yīng)該怎么做。

運(yùn)營(yíng)活動(dòng)：

現(xiàn)在用彈出框來(lái)傳遞運(yùn)營(yíng)活動(dòng)已經(jīng)成為一個(gè)約定俗成的用法了，雖然ios規(guī)范中建議盡量少用彈出框，但公司還是要盈利的，所以基本上所有app都會(huì)以這種強(qiáng)干擾的形式來(lái)通知用戶(hù)“這里有優(yōu)惠活動(dòng)”等運(yùn)營(yíng)活動(dòng)。

這種場(chǎng)景下，彈出框會(huì)根據(jù)產(chǎn)品以及業(yè)務(wù)的運(yùn)營(yíng)需求及產(chǎn)品的調(diào)性做豐富的運(yùn)營(yíng)設(shè)計(jì)，來(lái)吸引用戶(hù)參加運(yùn)營(yíng)活動(dòng)，需要注意的一點(diǎn)，需要用戶(hù)參加的buttom一定要加強(qiáng)，突出。

功能引導(dǎo)：

功能引導(dǎo)和運(yùn)營(yíng)活動(dòng)一樣，是產(chǎn)品出于業(yè)務(wù)角度考慮，用強(qiáng)干擾的方式吸引用戶(hù)使用某功能，達(dá)到一定的業(yè)務(wù)目標(biāo)，如用戶(hù)活躍度。

例如完成訂單后（外賣(mài)或商品）引導(dǎo)用戶(hù)評(píng)價(jià)，并給予一定獎(jiǎng)勵(lì)。如將流量引流到新業(yè)務(wù)，從而達(dá)到新業(yè)務(wù)推廣目的。

浮出層是ios的組件，是用戶(hù)點(diǎn)擊屏幕上的某個(gè)控件或區(qū)域出現(xiàn)在屏幕上方的臨時(shí)視圖，它最典型的是包含一個(gè)指向它出現(xiàn)位置的箭頭，且浮出層一般在入口下方，整個(gè)浮出層應(yīng)該位于整個(gè)屏幕的中上方。

浮出層最開(kāi)始主要用于大屏幕的ipad，但由于手機(jī)屏幕越來(lái)越大，目前也被較多地運(yùn)用到手機(jī)界面中。

4.2.1 使用場(chǎng)景

多個(gè)常用操作的快捷入口：

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

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

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

對(duì)于新用戶(hù)的功能引導(dǎo)或者新功能的引導(dǎo)：

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

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

4.3.1 使用場(chǎng)景

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

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

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

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

和alert的區(qū)別：

alert主要適用于兩個(gè)選項(xiàng)，而actionsheet可以有多個(gè)功能選項(xiàng)，且展示形式更多樣。前文講過(guò)，alert也有破壞性操作提醒的場(chǎng)景使用。

兩者相比，alert出現(xiàn)在屏幕中央，actionsheet出現(xiàn)在屏幕底部。視覺(jué)角度上alert相較于actionsheet更有阻斷感，對(duì)用戶(hù)而言干擾性更大。

另一方面底部的actionsheet從手勢(shì)操作的角度上來(lái)看，操作更方便，更容易對(duì)此作出選擇或關(guān)閉。所以alert更加適用于嚴(yán)重后果的破壞性操作提醒。

活動(dòng)視圖是ios組件，是針對(duì)當(dāng)前頁(yè)面提供的一系列任務(wù)和服務(wù)，例如復(fù)制，收藏，查找等。系統(tǒng)提供了許多內(nèi)置活動(dòng)，包括打印，信息和AirPlay。

這些任務(wù)始終首先出現(xiàn)在活動(dòng)視圖中，無(wú)法重新排序。無(wú)需創(chuàng)建執(zhí)行這些內(nèi)置任務(wù)的自定義活動(dòng)。活動(dòng)視圖還顯示來(lái)自其他應(yīng)用的共享和操作擴(kuò)展。

Bottom sheet是MD的組件，MD中底部菜單有兩種，一種是Standard bottom sheet（標(biāo)準(zhǔn)底部菜單），另一種是Modal bottom sheet（模態(tài)底部菜單）。

MD的模態(tài)底部菜單和iOS的action sheet類(lèi)似，它阻止用戶(hù)與屏幕其他地方交互，通過(guò)聚焦的底部菜單提供了更多的選項(xiàng)和功能。它可以是內(nèi)聯(lián)菜單和簡(jiǎn)單對(duì)話(huà)框的替代方案，為內(nèi)容，圖標(biāo)和動(dòng)作提供了額外的空間。

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

snackbar是android專(zhuān)有控件，是出現(xiàn)在屏幕底部的提供有關(guān)app相關(guān)的簡(jiǎn)短信息提醒，它屬于輕量級(jí)的信息提醒，一般出現(xiàn)幾秒后就會(huì)自動(dòng)消失，不會(huì)中斷用戶(hù)操作。

snackbar往往由一條文案+一個(gè)引導(dǎo)性按鈕（可選，按鈕可以引導(dǎo)用戶(hù)進(jìn)一步操作）組成，帶有一定的交互性。因?yàn)樗詣?dòng)會(huì)消失，所以它一定沒(méi)有取消或者不要等否定性按鈕。

4.6.1 使用場(chǎng)景

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

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

Toast是android專(zhuān)有的控件，原先的MD規(guī)范中，toast是和snackbar放在一起講的，翻閱了最新的MD規(guī)范，snackbar里找不到關(guān)于toast的相關(guān)介紹（有小伙伴找到的望提醒一下）。

Toast應(yīng)該包含在snackbar里了，當(dāng)snackbar沒(méi)有按鈕其實(shí)就是toast了，不過(guò)這邊還是把Toast單獨(dú)拿出來(lái)分析

4.7.1 使用場(chǎng)景

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

適用于通知用戶(hù)不重要的信息和操作反饋，且不會(huì)對(duì)用戶(hù)當(dāng)前的任務(wù)有影響，因?yàn)椴荒芙换ィ規(guī)酌牒笙В杂脩?hù)很可能忽略，所以該類(lèi)信息相對(duì)而言沒(méi)那么重要。

雖然toast是android專(zhuān)有樣式，但現(xiàn)在很多ios版本的系統(tǒng)中都使用了改良版的“toast”，因?yàn)檩p反饋，不打斷用戶(hù)操作，同時(shí)又能通知信息和操作反饋，對(duì)用戶(hù)而言及其友好，但是不易傳達(dá)過(guò)多的文字，因?yàn)橛脩?hù)很有可能會(huì)忽略。

ios文檔中的feedback中有建議：反饋可以幫助人們了解應(yīng)用正在做什么，發(fā)現(xiàn)他們下一步可以做什么，并了解行動(dòng)的結(jié)果。所以實(shí)際應(yīng)用中，既要不打擾用戶(hù)，又要能引起用戶(hù)注意，還要和產(chǎn)品設(shè)計(jì)相協(xié)調(diào)。

比如結(jié)合了文字和icon的樣式，再比如用較為突出的背景色，位置的話(huà)在中央，頂部，底部，都會(huì)出現(xiàn)，會(huì)根據(jù)具體的業(yè)務(wù)來(lái)選擇合適的位置。一般出現(xiàn)的位置會(huì)和操作內(nèi)容在一起，這樣用戶(hù)才能清晰有效地得到即時(shí)反饋。

下方例舉的toast案例因?yàn)檫x用了比內(nèi)容更為突出的背景色，相比較上方案例的toast更易被用戶(hù)發(fā)現(xiàn)和察覺(jué)，達(dá)到通知用戶(hù)的目的。

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

Dialog/Alert：

當(dāng)信息或操作非常重要，并且必須要由用戶(hù)做決定或者操作才能繼續(xù)，一般用alert，更適用于用戶(hù)判斷選擇。

Modal bottom sheet/Action sheet：

稍弱于dialog/alert，更著重于提供更多的功能和選項(xiàng)時(shí)使用。

Activity view：

是針對(duì)當(dāng)前頁(yè)面提供的一系列額外的任務(wù)和服務(wù)。

Popover：

使用更側(cè)重于指向性，更適用于信息或功能折疊。

Toast：

不太重要的信息提醒和操作反饋，更適用于不需用戶(hù)響應(yīng)或反饋的場(chǎng)景。

snackbar：

不太重要的信息提醒和操作反饋，可以交互，但并不強(qiáng)制，更適用于可以引導(dǎo)用戶(hù)進(jìn)行下一步或者一些撤銷(xiāo)上一步的場(chǎng)景。

Hud：

音量調(diào)節(jié)。

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

以上就是我對(duì)彈窗相關(guān)知識(shí)的總結(jié)，總結(jié)的過(guò)程中也對(duì)官方規(guī)范彈窗部分的內(nèi)容再次熟悉了好幾遍，因?yàn)榭吹挠⑽模岳斫馍峡赡苌晕⒂行┎蛔悖胁粚?duì)的地方，還希望大家批評(píng)指正。（推薦大家多看看官方設(shè)計(jì)規(guī)范，就像一本非常實(shí)用的設(shè)計(jì)工具書(shū)，對(duì)于實(shí)際工作還是非常有幫助的）

再次感謝前輩的經(jīng)驗(yàn)分享！

這個(gè)控件叫什么系列之toast的曾經(jīng)，現(xiàn)在，與未來(lái) https://www.uisdc.com/ui-element-toast

如何設(shè)計(jì)App中的提示控件（toast） https://zhuanlan.zhihu.com/p/22405748

iOS和Android規(guī)范解析——底部浮層（上）https://www.jianshu.com/p/8bdfbc0a9339

iOS和Android規(guī)范解析——提示框（Toast）對(duì)比 https://www.jianshu.com/p/e1beeacbea32

不要濫用對(duì)話(huà)框！細(xì)說(shuō) iOS Alert View 與 Action Sheet https://zhuanlan.zhihu.com/p/20189186

App設(shè)計(jì)中，6組常見(jiàn)組件的區(qū)別和用法 http://www.woshipm.com/pd/873075.html

APP提示框架詳解：Toast提示、Snackers和Alert http://www.woshipm.com/pmd/296674.html

本文由 @麥子_Maizi 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議