
接下我們來(lái)一個(gè)一個(gè)講解
1.1 下拉彈窗(界面頂部,少量出現(xiàn)在界面中間) 如下圖,點(diǎn)擊某按鈕后,從頂部彈出的彈窗叫做下拉彈窗。此時(shí)用戶必須要操作彈窗上的某個(gè)功能或者點(diǎn)擊空白處才能消除彈窗,從而進(jìn)行其它操作。

1.2 對(duì)話框(界面中間) 對(duì)話框(Dialog)就是我們最常見(jiàn)的從界面中間彈出的提示彈框,需要用戶對(duì)此彈框進(jìn)行操作后才能繼續(xù)執(zhí)行其他任務(wù)。如下圖:

而對(duì)話框也有很多形式:不同維度會(huì)有不同的分類(lèi),比如以操作按鈕的多少來(lái)分類(lèi)、是否可以輸入內(nèi)容來(lái)分類(lèi)、系統(tǒng)樣式還是自定義樣式等等,我們可以根據(jù)具體項(xiàng)目來(lái)制定對(duì)話框的樣式與規(guī)則。
此類(lèi)彈窗大多數(shù)用于信息提示及操作的二次確認(rèn),設(shè)計(jì)師在使用前一定要謹(jǐn)慎選擇,綜合場(chǎng)景角度、用戶價(jià)值及平臺(tái)價(jià)值多個(gè)維度進(jìn)行考慮。
1.3 動(dòng)作列表(界面底部) 動(dòng)作列表會(huì)向用戶展示多個(gè)功能按鈕,形式有純文字、文字加圖標(biāo)、甚至純圖標(biāo)。對(duì)于警示性選項(xiàng)會(huì)標(biāo)出紅色,推薦性選項(xiàng)可標(biāo)示藍(lán)色,可根據(jù)實(shí)際情況自行定義。 案例如下圖:

2.1 Toast/HUD(界面頂部或中間) Toast提示框是一種非阻斷式(非模態(tài))彈窗,它彈出狀態(tài)信息給予用戶及時(shí)反饋,確保用戶知曉自己所處的狀態(tài),并做出相應(yīng)的措施。 而Toast的樣式也分頂部和中部,如下圖:

這里值得一提的是,Toast其實(shí)是安卓系統(tǒng)的一個(gè)控件名詞,iOS 并沒(méi)有,IOS有一個(gè)類(lèi)似的控件叫做HUD,但是行業(yè)內(nèi)大部分已經(jīng)將Toast彈窗通用到兩個(gè)系統(tǒng)內(nèi),所以對(duì)于HUD大家了解即可。
2.2 Tips 提示條(界面頂部) Tips嚴(yán)格來(lái)說(shuō)其實(shí)并不算彈窗,因?yàn)閺棿笆歉≡诮缑嫔蠈拥膯为?dú)浮層,而tips是嵌入在頁(yè)面內(nèi)的提示條,但由于個(gè)人覺(jué)得tips提示條也是相當(dāng)重要的一個(gè)控件,而且很少看見(jiàn)有人將其總結(jié)到哪個(gè)歸類(lèi)當(dāng)中,所以我決定將其分類(lèi)到非阻斷式彈窗的類(lèi)別下,與toast彈窗并行。這樣在整理控件的時(shí)候也很方便。 可能有些同學(xué)還不知道Tips提示條是什么樣子的,請(qǐng)看下圖:

2.3 snackbar(界面底部,可交互) 雖然snackbar彈窗也是出于安卓系統(tǒng),但是目前也已經(jīng)通用到iOS系統(tǒng)中,它就是一種底部非阻斷式彈窗,也會(huì)自行消失,但和toast不同的是它是可交互的,并且一定是在底部出現(xiàn),如下圖郵件歸檔后的狀態(tài):

總結(jié) 在拉通所有分類(lèi)、場(chǎng)景、樣式后,再去執(zhí)行,你會(huì)有一種前所未有的成就感,感覺(jué)一切都在自己的掌控之中,這也就是總結(jié)的魅力所在。 以上就是我個(gè)人關(guān)于彈窗的一些簡(jiǎn)單總結(jié),還有很多不全之處,以后會(huì)慢慢摸索補(bǔ)充,希望能夠?qū)δ阌兴鶈l(fā)。 最后:如果現(xiàn)在你也對(duì)自己定位不夠清晰,那就請(qǐng)盡快思考一下吧,因?yàn)橹挥蟹较虼_定了,你后面的努力才夠事半功倍,你才能真正的快速成長(zhǎng)起來(lái)!