四種App彈窗設(shè)計(jì):Toast、Dialog、Actionbar 和 Snackbar

48 評(píng)論 131281 瀏覽 759 收藏 13 分鐘

彈窗又稱為對(duì)話框,是App與用戶進(jìn)行交互的常見(jiàn)方式之一。

彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種,兩者的區(qū)別在于需不需要用戶對(duì)其進(jìn)行回應(yīng)。

模態(tài)彈窗會(huì)打斷用戶的正常操作,要求用戶必須對(duì)其進(jìn)行回應(yīng),否則不能繼續(xù)其它操作;非模態(tài)彈窗則不會(huì)影響用戶的操作,用戶可以不對(duì)其進(jìn)行回應(yīng),非模態(tài)彈窗通常都有時(shí)間限制,出現(xiàn)一段時(shí)間后就會(huì)自動(dòng)消失。

非模態(tài)彈窗一般被設(shè)計(jì)成用來(lái)告訴用戶信息內(nèi)容,而模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作。

無(wú)論是模態(tài)還是非模態(tài),彈窗都是位于當(dāng)前頁(yè)面的最頂層。模態(tài)彈窗常常都還會(huì)伴隨半透明的遮罩來(lái)吸引用戶的視覺(jué)焦點(diǎn),以突出彈窗的信息內(nèi)容。

隨著開(kāi)發(fā)技術(shù)的發(fā)展,彈窗的方式和樣式多種多樣,彈窗也被定制化設(shè)計(jì)成很多種風(fēng)格和版本。最常見(jiàn)的基本彈窗有以下四種:

Toast、Dialog、Actionbar 和 Snackbar

2

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è)面的中軸線上),具體的顯示位置根據(jù)頁(yè)面的整體設(shè)計(jì)進(jìn)行設(shè)置。該種Toast在安卓App上十分常見(jiàn)。

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

3

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)行刷新功能的操作提醒。

4

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

Dialog 對(duì)話框

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

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

5

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è),讓用戶選擇“是”或“非”的功能操作(“是”指對(duì)內(nèi)容描述的確認(rèn)操作,比如確認(rèn)刪除、確認(rèn)付費(fèi);“非”一般指取消操作,然后關(guān)閉彈窗);也常被設(shè)計(jì)成只有一個(gè)“確認(rèn)”按鈕,目的是讓用戶閱讀內(nèi)容后點(diǎn)擊關(guān)閉彈窗(這種樣式的Dialog,信息內(nèi)容必須非常有必要性以至于需要打斷用戶的操作進(jìn)行信息內(nèi)容閱讀確認(rèn),否則請(qǐng)用Toast進(jìn)行非模態(tài)彈窗提示)。

6

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

Actionbar 功能框

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

Actionbar一般被設(shè)計(jì)用來(lái)向用戶展示多個(gè)功能按鈕選擇。

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

7

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

8

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

9

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

10

Snackbar 提示對(duì)話框

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

11

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

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

12

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

13

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

14

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

使用彈窗要克制

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

一旦選擇使用彈窗,請(qǐng)盡量少用,一般情況下都把彈窗的層級(jí)控制在只有一級(jí)(即關(guān)閉了一個(gè)彈窗后不會(huì)馬上出現(xiàn)新的彈窗),接連不斷的出現(xiàn)彈窗只會(huì)增加用戶想要卸載App的欲望(愚人節(jié)整蠱設(shè)計(jì)除外^_^)。

 

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不能轉(zhuǎn)載,可以潮汐您的文章嗎

    來(lái)自安徽 回復(fù)
    1. hhhh什么呀

      來(lái)自江蘇 回復(fù)
  2. 文章中所舉例的不是ActionBar,而是ActionSheet。

    來(lái)自廣西 回復(fù)
  3. 受益匪淺啊,最近正好在學(xué)習(xí)相關(guān)知識(shí),有一個(gè)疑問(wèn),有的彈窗除了點(diǎn)擊彈窗中的按鈕,也可以點(diǎn)擊周圍的灰色區(qū)域,有的只能點(diǎn)擊按鈕,這兩個(gè)都是dialog彈窗嗎??

    來(lái)自北京 回復(fù)
    1. 按照顯示效果來(lái)看的話,是都屬于dialog,只是兩者對(duì)觸發(fā)條件的判斷不一樣,后者把窗口外的任何點(diǎn)擊都視為取消操作

      來(lái)自廣東 回復(fù)
  4. 工作中剛好也用到,學(xué)習(xí)了,謝謝分享啊

    來(lái)自廣東 回復(fù)
    1. 很幸運(yùn)能幫到你

      來(lái)自廣東 回復(fù)
  5. 期待更多

    來(lái)自上海 回復(fù)
    1. 可以訂閱我,分享更多產(chǎn)品知識(shí)

      來(lái)自廣東 回復(fù)
  6. 淘寶京東類的購(gòu)物產(chǎn)品移動(dòng)端,選擇規(guī)格、參數(shù)那類的彈窗叫什么名字?

    來(lái)自上海 回復(fù)
    1. Actionbar功能框

      來(lái)自吉林 回復(fù)
  7. 非常棒,剛好解決了我遇到的問(wèn)題 ??

    來(lái)自上海 回復(fù)
    1. 很高興能幫助到你

      來(lái)自廣東 回復(fù)
  8. Alert與Dialog的區(qū)別是什么?

    來(lái)自河南 回復(fù)
    1. 貌似是一樣的東西,只是叫法不一樣 ?

      來(lái)自廣東 回復(fù)
    2. alert應(yīng)該是ios的官方彈出框,Dialog是md的

      來(lái)自陜西 回復(fù)
    3. Alert應(yīng)該更多的是PC Web的彈窗吧,移動(dòng)端叫Dialog比較多

      來(lái)自廣東 回復(fù)
  9. 太贊了,昨天正好遇到這個(gè)問(wèn)題,看了此文章受益匪淺,蟹蟹。 ??

    來(lái)自北京 回復(fù)
    1. 很高興能幫助到你

      來(lái)自廣東 回復(fù)
  10. 好像每個(gè)回復(fù)都被回復(fù)了,我來(lái)試試 ??

    來(lái)自四川 回復(fù)
    1. 嗯嗯是的啊,你們認(rèn)真閱讀認(rèn)真評(píng)論了,我就得要認(rèn)真回復(fù)回報(bào)你們的嘛

      來(lái)自廣東 回復(fù)
  11. mark~講的比較詳細(xì) ??

    來(lái)自北京 回復(fù)
    1. thanks

      來(lái)自廣東 回復(fù)
  12. Actionbar 功能框和Dialog 對(duì)話框有運(yùn)用場(chǎng)景怎么區(qū)分?我個(gè)人主觀設(shè)計(jì)比較傾向于Actionbar 功能框,但我發(fā)現(xiàn)大多數(shù)APP兩種都混合著用。所以想問(wèn)一下有沒(méi)有明確的思路去區(qū)分它倆的運(yùn)用場(chǎng)景?

    來(lái)自廣東 回復(fù)
    1. Actionbar功能框可以看成是Dialog的一種延伸設(shè)計(jì),Actoinbar比Dialog擁有更多的功能按鈕,提供給用戶更多的功能選擇。在使用場(chǎng)景來(lái)說(shuō),Acionbar一般讓用戶進(jìn)行選擇,而Dialog則是讓用戶進(jìn)行是非判斷。

      來(lái)自廣東 回復(fù)
  13. dialog和actionbar用來(lái)強(qiáng)制用戶進(jìn)行點(diǎn)擊操作,
    toast反饋用戶操作,剛才用戶的點(diǎn)擊操作有沒(méi)有生效
    Snackbar反饋用戶操作,剛才用戶的點(diǎn)擊操作有沒(méi)有生效。并且可以鏈接到使用幫助

    來(lái)自四川 回復(fù)
    1. 嗯嗯,謝謝你幫我總結(jié)了呢,不愧是大神,言簡(jiǎn)意賅哈

      來(lái)自廣東 回復(fù)
    2. 見(jiàn)笑了,我只是班門(mén)弄斧,在您詳細(xì)的介紹下才明白的這些。

      來(lái)自四川 回復(fù)
  14. 好贊,可否提供幾個(gè)設(shè)計(jì)比較抓人眼球的toast例子

    回復(fù)
    1. toast是最簡(jiǎn)單最常用的非模態(tài)彈窗呀,如果系那個(gè)要設(shè)計(jì)成抓人眼球的話還可以添加模糊遮罩突出要提示的內(nèi)容

      來(lái)自廣東 回復(fù)
  15. 漲知識(shí)

    來(lái)自安徽 回復(fù)
    1. 你想要的姿勢(shì)我都會(huì) ??

      來(lái)自廣東 回復(fù)
    2. 你要是個(gè)妹子,我就跟你學(xué)姿勢(shì) ?

      來(lái)自安徽 回復(fù)
  16. 建議多看看別人做snackbar toast這種控件的初衷是解決什么場(chǎng)景什么用途的!

    來(lái)自北京 回復(fù)
    1. 好的,受教了

      來(lái)自廣東 回復(fù)
  17. 你這里,一:平臺(tái)概念區(qū)分不明顯;二:源生和第三方插件未區(qū)分,感覺(jué)講點(diǎn)有點(diǎn)蒙!

    來(lái)自北京 回復(fù)
  18. 你好,我是微信公眾號(hào):超級(jí)大數(shù)據(jù) 的小編,我可以轉(zhuǎn)載您的文章嗎

    來(lái)自廣東 回復(fù)
    1. 謝謝您想要轉(zhuǎn)載本文,我拜讀過(guò)您的公眾號(hào),好像本文不太適合您的公眾號(hào)定位,所以期待下次有機(jī)會(huì)的話再合作吧 ??

      來(lái)自廣東 回復(fù)
  19. 好棒。

    回復(fù)
    1. 你也棒棒噠 ??

      來(lái)自廣東 回復(fù)
  20. 長(zhǎng)知識(shí)啦

    回復(fù)
    1. 能幫助您長(zhǎng)知識(shí)是我的榮幸 ??

      來(lái)自廣東 回復(fù)
  21. 贊~~~已收錄在個(gè)人知識(shí)樹(shù)

    來(lái)自廣東 回復(fù)
    1. 謝謝收錄

      回復(fù)
  22. 總結(jié)的不錯(cuò),文章也很清晰。。贊一個(gè) ??

    來(lái)自廣東 回復(fù)
    1. 謝謝

      回復(fù)
  23. 根據(jù)這四種彈窗的特性和使用場(chǎng)景行了模擬產(chǎn)品原型設(shè)計(jì),由于篇幅有限未能把它們寫(xiě)入本文中,有興趣的讀者可以去閱讀原文,在原文末尾有場(chǎng)景設(shè)計(jì)和原型分享。
    原文鏈接:http://www.jianshu.com/p/d6c9a485c061

    來(lái)自廣東 回復(fù)
    1. 棒棒噠~多謝po主

      來(lái)自湖北 回復(fù)