知道這些后,再也不會(huì)“濫用”彈窗了

24 評(píng)論 22787 瀏覽 223 收藏 22 分鐘

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

一、前言

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

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

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

二、什么是彈窗

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

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

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

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

三、彈窗有哪些

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

3.1 模態(tài)彈窗

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

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

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

3.2 非模態(tài)彈窗

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

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

常用組件:Toast(吐司),snackbar,Hud(透明指示層)。

四.具體使用

4.1 強(qiáng)干擾類——dialog(對(duì)話框)/alert(警告框)

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

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

其官方樣式如下:

4.1.1 使用場(chǎng)景

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

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

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

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

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

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

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

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

?操作反饋:

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

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

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

現(xiàn)在用彈出框來傳遞運(yùn)營(yíng)活動(dòng)已經(jīng)成為一個(gè)約定俗成的用法了,雖然ios規(guī)范中建議盡量少用彈出框,但公司還是要盈利的,所以基本上所有app都會(huì)以這種強(qiáng)干擾的形式來通知用戶“這里有優(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ì),來吸引用戶參加運(yùn)營(yíng)活動(dòng),需要注意的一點(diǎn),需要用戶參加的buttom一定要加強(qiáng),突出。

功能引導(dǎo):

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

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

4.2 強(qiáng)干擾——popover(浮出層)

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

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

4.2.1 使用場(chǎng)景

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

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

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

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

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

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

4.3 強(qiáng)干擾——action sheet(動(dòng)作菜單)

actionsheet是ios系統(tǒng)中特定的警告框,用來響應(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)不能過多。

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),且展示形式更多樣。前文講過,alert也有破壞性操作提醒的場(chǎng)景使用。

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

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

4.4 強(qiáng)干擾——activity view(活動(dòng)視圖)

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

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

4.5 強(qiáng)干擾類——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類似,它阻止用戶與屏幕其他地方交互,通過聚焦的底部菜單提供了更多的選項(xiàng)和功能。它可以是內(nèi)聯(lián)菜單和簡(jiǎn)單對(duì)話框的替代方案,為內(nèi)容,圖標(biāo)和動(dòng)作提供了額外的空間。

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

4.6 輕反饋——snackbar

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

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

4.6.1 使用場(chǎng)景

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

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

4.7 輕反饋——Toas

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

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

4.7.1 使用場(chǎng)景

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

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

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

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

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

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

4.8 輕反饋——Hud

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

五.總結(jié)

5.1 對(duì)比總結(jié)

Dialog/Alert:

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

Modal bottom sheet/Action sheet:

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

Activity view:

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

Popover:

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

Toast:

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

snackbar:

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

Hud:

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

5.2 其他

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

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

六.參考資料

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

MD官方規(guī)范?https://material.io/

HIG規(guī)范?https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

交互設(shè)計(jì)之(二)彈窗設(shè)計(jì)?https://www.zcool.com.cn/article/ZNjE0MjIw.html

https://www.zhihu.com/question/38063549/answer/235584402

這個(gè)控件叫什么系列之toast的曾經(jīng),現(xiàn)在,與未來?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ì)話框!細(xì)說 iOS Alert View 與 Action Sheet?https://zhuanlan.zhihu.com/p/20189186

App設(shè)計(jì)中,6組常見組件的區(qū)別和用法?http://www.aharts.cn/pd/873075.html

重新復(fù)習(xí) Toast 和 Snackbar?https://zhuanlan.zhihu.com/p/26386661

APP提示框架詳解:Toast提示、Snackers和Alert?http://www.aharts.cn/pmd/296674.html

 

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 西瓜視頻的action sheet 與 activity view 感覺有些相似。

    來自廣東 回復(fù)
  2. 在日歷上,添加點(diǎn)擊某個(gè)日期時(shí),彈出彈框,我想的是用

    回復(fù)
    1. Snackbar,因?yàn)槲矣X得這重復(fù)率較高的,用戶體驗(yàn)起來會(huì)煩,不知道用哪種好。。。彈框內(nèi)容是 添加、取消這種。。。

      回復(fù)
  3. Snackbar本質(zhì)是為最大概率的某種操作縮短路徑(例如保存網(wǎng)頁至默認(rèn)書簽文件夾),同時(shí)也給關(guān)聯(lián)的小概率任務(wù)留有余地(修改書簽名稱)

    回復(fù)
    1. 正解哦,學(xué)習(xí)了,我講了半天沒有講到關(guān)鍵點(diǎn) ?

      來自浙江 回復(fù)
  4. 作者很棒,學(xué)習(xí)了。有后面的鏈接分享真是 ? 太好了,感謝!

    來自廣東 回復(fù)
    1. 謝謝鼓勵(lì) ??

      來自浙江 回復(fù)
  5. 功能提示文字怎么表現(xiàn)是好?剛打開軟件時(shí)提示?

    回復(fù)
    1. 就要看具體哪個(gè)功能提示,像網(wǎng)絡(luò)連接這種基本上就是打開軟件就提示,因?yàn)闆]連上網(wǎng)就不能用軟件啦:oops:

      來自浙江 回復(fù)
  6. 阿里嘎多,受益匪淺

    來自上海 回復(fù)
    1. 謝謝鼓勵(lì) ??

      來自浙江 回復(fù)
  7. 感謝分享,正好在思考相關(guān)問題。很棒
    想轉(zhuǎn)載此文章到微信公眾號(hào)“趣玩設(shè)計(jì)吧”,您看能授權(quán)一下么?

    來自北京 回復(fù)
    1. 好的,可以的,注明來源就好,加個(gè)原文章的鏈接 ??

      來自浙江 回復(fù)
    2. 感謝??,沒問題

      來自北京 回復(fù)
  8. 很游泳,蟹蟹樓主。

    來自北京 回復(fù)
    1. 哈哈哈,謝謝鼓勵(lì) ??

      來自浙江 回復(fù)
  9. 感恩

    來自北京 回復(fù)
    1. 謝謝鼓勵(lì) ??

      來自浙江 回復(fù)
  10. 想請(qǐng)教個(gè)問題,有些比較傳統(tǒng)的公司,業(yè)務(wù)就是需要彈窗來導(dǎo)流,這種該怎么取舍呢?

    回復(fù)
    1. A/B測(cè)試或轉(zhuǎn)化數(shù)據(jù)的方式比較 模態(tài)和非模態(tài)兩種導(dǎo)流方式,淺見。

      來自江蘇 回復(fù)
    2. 謝謝 ??

      來自四川 回復(fù)
    3. 樓上正解,主觀想法沒有說服力,數(shù)據(jù)可以很好的說明哪種方式更適合你們產(chǎn)品的用戶

      來自浙江 回復(fù)
  11. 講的很詳細(xì),學(xué)習(xí)了,謝謝樓主

    來自上海 回復(fù)
    1. 謝謝鼓勵(lì),有幫助就好 ??

      來自浙江 回復(fù)