原文鏈接:彈框體系總結(jié):模態(tài)彈框和非模態(tài)彈框 - 優(yōu)設(shè)-UISDC
概要:彈框主要完成信息傳遞和用戶反饋兩大功能。所有的對(duì)話框、浮層、提示條我們都習(xí)慣性的稱之為彈框,其實(shí)彈框我們可以分為兩種:模態(tài)彈框和非模態(tài)彈框。
1、模態(tài)和非模態(tài)。最大的區(qū)別就是是否強(qiáng)制交互。模態(tài)會(huì)打斷用戶的當(dāng)前流程,不操作的話,其余功能無(wú)法使用。

2、模態(tài)彈框。模態(tài)彈框?qū)儆谝环N重量性反饋,一般用戶用戶進(jìn)行重要的操作。優(yōu)點(diǎn):很好的獲取用戶的視覺(jué)焦點(diǎn);缺點(diǎn):打斷用戶的操作流程。
A 對(duì)話框:對(duì)話框一般用于用戶進(jìn)行一項(xiàng)很重要或者有風(fēng)險(xiǎn)的操作,這時(shí)會(huì)彈出一個(gè)對(duì)話框給用戶提示信息,用戶根據(jù)提示來(lái)進(jìn)行判斷。一般出現(xiàn)在屏幕的中間位置,會(huì)對(duì)界面的主要內(nèi)容造成遮擋。

除常規(guī)對(duì)話框,可進(jìn)行信息錄入,還可用于營(yíng)銷宣傳。

B 動(dòng)作欄:對(duì)話框的加強(qiáng)版。Alert和Dialog一般都只有兩個(gè)按鈕,動(dòng)作欄可提供多個(gè)功能按鈕,展示樣式多變。

但也有例外。有的動(dòng)作欄只有兩個(gè)選項(xiàng)。網(wǎng)易云音樂(lè)刪除歌曲,通過(guò)動(dòng)作欄來(lái)完成(筆者覺(jué)得也可使用對(duì)話框)。

C 浮層。浮層是用戶點(diǎn)擊控件或者界面某一區(qū)域浮出的半透明的臨時(shí)視圖。樣式跟動(dòng)作欄很相似,都可向用戶展示多個(gè)功能選項(xiàng)。但浮層可以出現(xiàn)屏幕中的任何位置,能夠給用戶更具有指向型的提示。

小結(jié):在不考慮信息錄入情況下,對(duì)話框適用于用戶進(jìn)行判斷操作,而動(dòng)作欄和浮層適用于用戶進(jìn)行選擇操作,而浮層相對(duì)于動(dòng)作欄更具有指向型。
3、非模態(tài)彈框。
不強(qiáng)制交互,也不會(huì)彈出半透明背景層,停留后會(huì)自己消失。非模態(tài)屬于輕量級(jí)反饋。
A Toast?

Toast主要用于用戶完成操作以后,告訴用戶操作結(jié)果或者狀態(tài)的變更。Toast其實(shí)是屬于Android的組件,iOS里有一個(gè)相類似的是hud,最常見(jiàn)的就是音量調(diào)節(jié)提示。但是現(xiàn)在iOS和Android的界限不斷被打破,toast現(xiàn)在也被廣泛應(yīng)用于iOS界面設(shè)計(jì)中。如果我們?nèi)タ碅ndroid給的設(shè)計(jì)規(guī)范,會(huì)發(fā)現(xiàn)Toast有以下幾個(gè)特點(diǎn):只出現(xiàn)在屏幕底部、只能放文字、非模態(tài)彈框

但真實(shí)的toast出現(xiàn)在屏幕的任何位置。甚至可以加ICON,背景顏色也能改變。toast的優(yōu)點(diǎn)在于不會(huì)打斷用戶當(dāng)前的操作流程,屬于輕量級(jí),缺點(diǎn)是易被忽視,而且不適合展示過(guò)多信息。為增加可讀性和美感,一般采取文字加ICON。
B Snackbar
由文字加功能按鈕組成??牲c(diǎn)擊按鈕進(jìn)行交互。及時(shí)不點(diǎn)擊也會(huì)消失,一般位于屏幕下方??蓪⑵淇醋鲙в衖con的toast。
屬于非模態(tài),但有模態(tài)的一些特點(diǎn)。有按鈕可供交互,出現(xiàn)在界面下方,和action sheet很像。
小結(jié):非模態(tài)偏重信息提示,模態(tài)即可信息提示也可供交互。toast為輕量級(jí)彈框,snackbar集眾家所長(zhǎng)。
4、彈框體系的建立優(yōu)化
能在界面中展示就不用彈框,能用非模態(tài)彈框的就不要用模態(tài)彈框。
任何彈框都會(huì)對(duì)用戶造成干擾,即使是toast。從用戶體驗(yàn)角度看,一個(gè)操作流程所受到的干擾越少越好。
案例(方案3最佳):

多態(tài)按鈕:
此外多態(tài)按鈕的使用也可以幫助我們解放彈框的壓力。例如,支付寶的支付界面,立即支付按鈕可以跳轉(zhuǎn)到付款成功的狀態(tài),這時(shí)候就沒(méi)有必要再用彈框給用戶提示了。

3、