知道這些后,再也不會(huì)“濫用”彈窗了
彈窗的類型有非常多種,所以在使用時(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é)議
西瓜視頻的action sheet 與 activity view 感覺有些相似。
在日歷上,添加點(diǎn)擊某個(gè)日期時(shí),彈出彈框,我想的是用
Snackbar,因?yàn)槲矣X得這重復(fù)率較高的,用戶體驗(yàn)起來會(huì)煩,不知道用哪種好。。。彈框內(nèi)容是 添加、取消這種。。。
Snackbar本質(zhì)是為最大概率的某種操作縮短路徑(例如保存網(wǎng)頁至默認(rèn)書簽文件夾),同時(shí)也給關(guān)聯(lián)的小概率任務(wù)留有余地(修改書簽名稱)
正解哦,學(xué)習(xí)了,我講了半天沒有講到關(guān)鍵點(diǎn) ?
作者很棒,學(xué)習(xí)了。有后面的鏈接分享真是 ? 太好了,感謝!
謝謝鼓勵(lì) ??
功能提示文字怎么表現(xiàn)是好?剛打開軟件時(shí)提示?
就要看具體哪個(gè)功能提示,像網(wǎng)絡(luò)連接這種基本上就是打開軟件就提示,因?yàn)闆]連上網(wǎng)就不能用軟件啦:oops:
阿里嘎多,受益匪淺
謝謝鼓勵(lì) ??
感謝分享,正好在思考相關(guān)問題。很棒
想轉(zhuǎn)載此文章到微信公眾號(hào)“趣玩設(shè)計(jì)吧”,您看能授權(quán)一下么?
好的,可以的,注明來源就好,加個(gè)原文章的鏈接 ??
感謝??,沒問題
很游泳,蟹蟹樓主。
哈哈哈,謝謝鼓勵(lì) ??
感恩
謝謝鼓勵(lì) ??
想請(qǐng)教個(gè)問題,有些比較傳統(tǒng)的公司,業(yè)務(wù)就是需要彈窗來導(dǎo)流,這種該怎么取舍呢?
A/B測(cè)試或轉(zhuǎn)化數(shù)據(jù)的方式比較 模態(tài)和非模態(tài)兩種導(dǎo)流方式,淺見。
謝謝 ??
樓上正解,主觀想法沒有說服力,數(shù)據(jù)可以很好的說明哪種方式更適合你們產(chǎn)品的用戶
講的很詳細(xì),學(xué)習(xí)了,謝謝樓主
謝謝鼓勵(lì),有幫助就好 ??