眾所周知，APP彈窗是App與用戶(hù)進(jìn)行交互的常見(jiàn)方式之一。

隨著開(kāi)發(fā)技術(shù)的發(fā)展，彈窗的方式和樣式多種多樣，彈窗也被定制化設(shè)計(jì)成很多種風(fēng)格和版本。

最常見(jiàn)的基本彈窗有以下四種：Toast、Dialog、Actionbar 和 Snackbar

之前25學(xué)堂也分享了：

1、APP創(chuàng)意彈窗設(shè)計(jì)下的產(chǎn)品交互思維學(xué)習(xí)

2、APP新手引導(dǎo)遮罩層設(shè)計(jì)與UI視覺(jué)界面設(shè)計(jì)欣賞

3、APP反饋提示設(shè)計(jì)之彈出框設(shè)計(jì)，超贊

1、Toast ?提示框

Toast提示框是一種非模態(tài)彈窗，它彈出一個(gè)小信息，作為提醒或消息反饋來(lái)用，一般用來(lái)顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。例如你發(fā)出了一條短信，App彈出一個(gè)Toast提示你消息已發(fā)出。

最常見(jiàn)的Toast提示框?yàn)橐痪浜?jiǎn)短的描述性文字。這種樣式的彈窗可以出現(xiàn)在頁(yè)面的任何位置，可設(shè)置成在頁(yè)面頂部、中部或者在底部出現(xiàn)（但一般都是出現(xiàn)在頁(yè)面的中軸線(xiàn)），具體的顯示位置根據(jù)頁(yè)面的整體設(shè)計(jì)進(jìn)行設(shè)置。該種Toast在安卓App上十分常見(jiàn)。

還有一種Toast彈窗由簡(jiǎn)單的圖形和簡(jiǎn)短的文字組成，顯示位置一般位于頁(yè)面正中央。這種Toast在iOS和安卓上都可以經(jīng)常見(jiàn)到。

iOS中建議，設(shè)計(jì)一種引人注目但又和App 的界面協(xié)調(diào)融合的方式去展示信息。這種展示信息的方式和安卓純文本的Toast相似，只是界面交互有所不同，它一般在內(nèi)容頁(yè)頂部向下推動(dòng)出現(xiàn)，然后向上推動(dòng)消失。

這種展示信息的方式現(xiàn)在也在安卓平臺(tái)上使用。例如騰訊新聞App的iOS版和安卓版均采用了這種形式的Toast彈窗進(jìn)行刷新功能的操作提醒。

考慮到Toast提示框顯示的時(shí)間較短（幾秒種）、占用區(qū)域不大，它容易被用戶(hù)忽略，所以Toast不適合承載過(guò)多的文字和重要信息。

2、Dialog ?對(duì)話(huà)框

Dialog對(duì)話(huà)框是一種模態(tài)彈窗。當(dāng)用戶(hù)進(jìn)行了敏感操作，或者當(dāng)App內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變，這種操作和改變會(huì)帶來(lái)影響性比較大的行為結(jié)果，在該結(jié)果發(fā)生前以Dialog對(duì)話(huà)框的彈窗形式告知用戶(hù)且讓用戶(hù)進(jìn)行功能選擇。比如退出App、進(jìn)行付費(fèi)下載等功能操作。

一般情況下Dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶(hù)點(diǎn)擊了某個(gè)功能按鈕后彈窗才會(huì)消失，App隨即執(zhí)行該功能操作，進(jìn)入相應(yīng)的功能流程。

Dialog的標(biāo)題和信息內(nèi)容的文字描述都要設(shè)計(jì)成盡可能的簡(jiǎn)潔和無(wú)異義，也可以選擇省略標(biāo)題只保留內(nèi)容描述和功能按鈕（實(shí)際上大多數(shù)Dialog都被設(shè)計(jì)成沒(méi)有標(biāo)題的樣式）。

使用Dialog，功能按鈕最好只有兩個(gè)，讓用戶(hù)選擇“是”或“非”的功能操作（“是”指對(duì)內(nèi)容描述的確認(rèn)操作，比如確認(rèn)刪除、確認(rèn)付費(fèi)；“非”一般指取消操作，然后關(guān)閉彈窗）；

也常被設(shè)計(jì)成只有一個(gè)“確認(rèn)”按鈕，目的是讓用戶(hù)閱讀內(nèi)容后點(diǎn)擊關(guān)閉彈窗（這種樣式的Dialog，信息內(nèi)容必須非常有必要性以至于需要打斷用戶(hù)的操作進(jìn)行信息內(nèi)容閱讀確認(rèn)，否則請(qǐng)用Toast進(jìn)行非模態(tài)彈窗提示）。

若Dialog對(duì)話(huà)框出現(xiàn)三個(gè)或以上的功能按鈕，將會(huì)增加用戶(hù)的功能選擇負(fù)擔(dān)，所以需要使用多個(gè)功能按鈕選擇的時(shí)候請(qǐng)考慮使用Actionbar。

3、Actionbar 功能框

Actionbar功能框可以看成是Dialog的一種延伸設(shè)計(jì)，兩者都是模態(tài)彈窗，用戶(hù)必須進(jìn)行回應(yīng)，否則彈窗不會(huì)消失，用戶(hù)無(wú)法繼續(xù)其它操作。Actoinbar比Dialog擁有更多的功能按鈕，提供給用戶(hù)更多的功能選擇，Acionbar一般都設(shè)計(jì)有一個(gè)默認(rèn)的“取消”功能按鈕，點(diǎn)擊該按鈕后關(guān)閉彈窗，用戶(hù)點(diǎn)擊彈窗以外的區(qū)域時(shí)相當(dāng)于進(jìn)行了點(diǎn)擊“取消”功能按鈕的默認(rèn)回應(yīng)。Actionbar一般被設(shè)計(jì)用來(lái)向用戶(hù)展示多個(gè)功能按鈕選擇。

在iOS中，Actionbar的樣式比較常見(jiàn)的是文字列表框，它出現(xiàn)在頁(yè)面底部，以簡(jiǎn)潔的功能描述性文字展示功能按鈕，敏感的功能操作一般用紅色字體標(biāo)出（也可以設(shè)計(jì)其它顏色以突出某個(gè)功能按鈕）。

當(dāng)功能按鈕數(shù)量很多的時(shí)候，文字列表的形式不適合顯示，此時(shí)可以用圖形加文字描述排列的形式來(lái)進(jìn)行展示。這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計(jì)和排列布局。

圖形加文字描述排列的Actionbar

安卓系統(tǒng)中也有文字列表和圖文排列兩種樣式的Actionbar。

在安卓系統(tǒng)中，Actionbar還經(jīng)常被設(shè)計(jì)成“選擇列表框”（其實(shí)就是用選項(xiàng)代替了功能按鈕），比如安卓版的微信App中就是用這種設(shè)計(jì)方式讓用戶(hù)進(jìn)行性別選擇。這種設(shè)計(jì)方式的好處是減少了功能流程中的頁(yè)面跳轉(zhuǎn)，但是如果選項(xiàng)很多而且描述文字較多的時(shí)候，還是設(shè)計(jì)成選項(xiàng)詳情頁(yè)更好些。

4、Snackbar ?提示對(duì)話(huà)框

Snackbar提示對(duì)話(huà)框是安卓系統(tǒng)的特色彈窗之一（安卓平臺(tái)在開(kāi)發(fā)的時(shí)候可以直接調(diào)用Snackbar類(lèi)生成該彈窗，iOS好像也可以進(jìn)行定制化設(shè)計(jì)開(kāi)發(fā)），它也是一種非模態(tài)彈窗，同時(shí)擁有Toast和Dialog的特點(diǎn)，不會(huì)打斷用戶(hù)正常的操作流程，它除了可以告訴用戶(hù)信息內(nèi)容，還可以與用戶(hù)進(jìn)行對(duì)話(huà)交互（用戶(hù)可以點(diǎn)擊功能按鈕進(jìn)行回應(yīng)）。

Snakbar Demo

一般情況下，Snackbar由信息內(nèi)容加一個(gè)功能按鈕組成，用戶(hù)點(diǎn)擊了功能按鈕后彈窗消失，App隨即執(zhí)行該操作，進(jìn)入相應(yīng)的功能流程。Snackbar跟Toast一樣是有時(shí)間限制的，即使用戶(hù)不進(jìn)行回應(yīng)，彈窗出現(xiàn)一段時(shí)間后也會(huì)自動(dòng)消失。

與Taost相似，Snackbar彈出一個(gè)小信息，作為提醒或消息反饋來(lái)用，一般用來(lái)顯示操作結(jié)果，另外可以提供一個(gè)功能按鈕給用戶(hù)選擇使用。例如你刪除了某張圖片，App彈窗告訴你刪除成功，并提供一個(gè)“撤銷(xiāo)刪除”功能按鈕給你進(jìn)行對(duì)應(yīng)的功能操作。

Snackbar原型

Snackbar還可以被設(shè)計(jì)成只有信息內(nèi)容而沒(méi)有功能按鈕，這種樣式的Snackbar用戶(hù)無(wú)法進(jìn)行操作，只能等它自動(dòng)消失，此時(shí)它就相當(dāng)于一種文字描述型的Toast，只是表現(xiàn)形式有所不同。

沒(méi)有功能按鈕的Snackbar原型

這種樣式的Snackbar和Toast對(duì)比如下：

Snackbar和Toast的對(duì)比

個(gè)人比較喜歡安卓系統(tǒng)采用Snackbar與用戶(hù)進(jìn)行非模式彈窗交互，因?yàn)檫@種彈窗本身?yè)碛斜容^友好的UI交互，顯示內(nèi)容和提醒度也比Toast好，還能提供一個(gè)功能按鈕給用戶(hù)選擇使用。但是考慮到界面的整體設(shè)計(jì)，只有在界面內(nèi)的元素大多為靜態(tài)或者底部的空白區(qū)域較大的時(shí)候，而且需要提示給用戶(hù)的內(nèi)容比較多（無(wú)法用一個(gè)簡(jiǎn)短的句子能描述完）的時(shí)候，這種彈窗才會(huì)給用戶(hù)更好的交互體驗(yàn)。否則本來(lái)界面就一大堆動(dòng)態(tài)元素或者底部本來(lái)就充滿(mǎn)信息內(nèi)容，此時(shí)再?gòu)牡撞肯蛏匣鲆粋€(gè)彈窗，會(huì)顯得整個(gè)界面非常擁擠非常凌亂.

而一般情況下移動(dòng)端的App產(chǎn)品更多的是傾向于簡(jiǎn)約設(shè)計(jì)。

最后，請(qǐng)大家注意：使用彈窗要學(xué)會(huì)克制

并不是所有的彈窗設(shè)計(jì)都會(huì)被用戶(hù)接受，特別是廣告類(lèi)彈窗常常會(huì)被用戶(hù)所厭惡。我們?cè)谑褂脧棿暗臅r(shí)候要盡量克制，要考慮信息內(nèi)容的必要性和目的性（商業(yè)推廣或者增值服務(wù)等目的），來(lái)選擇是否使用彈窗和使用哪種方式和樣式的彈窗。

一旦選擇使用彈窗，請(qǐng)盡量少用，一般情況下都把彈窗的層級(jí)控制在只有一級(jí)（即關(guān)閉了一個(gè)彈窗后不會(huì)馬上出現(xiàn)新的彈窗），接連不斷的出現(xiàn)彈窗只會(huì)增加用戶(hù)想要卸載App的欲望。

以上就是今天25學(xué)堂的小編想要跟大家分享四種常見(jiàn)的彈窗設(shè)計(jì)方式，值得大家借鑒學(xué)習(xí).

同時(shí)也是給APP設(shè)計(jì)新手們漲漲知識(shí)。

以上內(nèi)容來(lái)源簡(jiǎn)書(shū)：http://www.jianshu.com/p/d6c9a485c061