四種App彈窗設計:Toast、Dialog、Actionbar 和 Snackbar

48 評論 130706 瀏覽 757 收藏 13 分鐘

彈窗又稱為對話框,是App與用戶進行交互的常見方式之一。

彈窗分為模態彈窗和非模態彈窗兩種,兩者的區別在于需不需要用戶對其進行回應。

模態彈窗會打斷用戶的正常操作,要求用戶必須對其進行回應,否則不能繼續其它操作;非模態彈窗則不會影響用戶的操作,用戶可以不對其進行回應,非模態彈窗通常都有時間限制,出現一段時間后就會自動消失。

非模態彈窗一般被設計成用來告訴用戶信息內容,而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。

無論是模態還是非模態,彈窗都是位于當前頁面的最頂層。模態彈窗常常都還會伴隨半透明的遮罩來吸引用戶的視覺焦點,以突出彈窗的信息內容。

隨著開發技術的發展,彈窗的方式和樣式多種多樣,彈窗也被定制化設計成很多種風格和版本。最常見的基本彈窗有以下四種:

Toast、Dialog、Actionbar 和 Snackbar

2

Toast 提示框

Toast提示框是一種非模態彈窗,它彈出一個小信息,作為提醒或消息反饋來用,一般用來顯示操作結果,或者應用狀態的改變。

例如你發出了一條短信,App彈出一個Toast提示你消息已發出。

最常見的Toast提示框為一句簡短的描述性文字。這種樣式的彈窗可以出現在頁面的任何位置,可設置成在頁面頂部、中部或者在底部出現(但一般都是出現在頁面的中軸線上),具體的顯示位置根據頁面的整體設計進行設置。該種Toast在安卓App上十分常見。

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

3

iOS中建議,設計一種引人注目但又和App 的界面協調融合的方式去展示信息。這種展示信息的方式和安卓純文本的Toast相似,只是界面交互有所不同,它一般在內容頁頂部向下推動出現,然后向上推動消失。這種展示信息的方式現在也在安卓平臺上使用。例如騰訊新聞App的iOS版和安卓版均采用了這種形式的Toast彈窗進行刷新功能的操作提醒。

4

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

Dialog 對話框

Dialog對話框是一種模態彈窗。當用戶進行了敏感操作,或者當App內部發生了較為嚴重性的狀態改變,這種操作和改變會帶來影響性比較大的行為結果,在該結果發生前以Dialog對話框的彈窗形式告知用戶且讓用戶進行功能選擇。比如退出App、進行付費下載等功能操作。

一般情況下Dialog由標題、信息內容和功能按鈕組成,只有當用戶點擊了某個功能按鈕后彈窗才會消失,App隨即執行該功能操作,進入相應的功能流程。

5

Dialog的標題和信息內容的文字描述都要設計成盡可能的簡潔和無異義,也可以選擇省略標題只保留內容描述和功能按鈕(實際上大多數Dialog都被設計成沒有標題的樣式)。

使用Dialog,功能按鈕最好只有兩個,讓用戶選擇“是”或“非”的功能操作(“是”指對內容描述的確認操作,比如確認刪除、確認付費;“非”一般指取消操作,然后關閉彈窗);也常被設計成只有一個“確認”按鈕,目的是讓用戶閱讀內容后點擊關閉彈窗(這種樣式的Dialog,信息內容必須非常有必要性以至于需要打斷用戶的操作進行信息內容閱讀確認,否則請用Toast進行非模態彈窗提示)。

6

若Dialog對話框出現三個或以上的功能按鈕,將會增加用戶的功能選擇負擔,所以需要使用多個功能按鈕選擇的時候請考慮使用Actionbar。

Actionbar 功能框

Actionbar功能框可以看成是Dialog的一種延伸設計,兩者都是模態彈窗,用戶必須進行回應,否則彈窗不會消失,用戶無法繼續其它操作。Actoinbar比Dialog擁有更多的功能按鈕,提供給用戶更多的功能選擇,Acionbar一般都設計有一個默認的“取消”功能按鈕,點擊該按鈕后關閉彈窗,用戶點擊彈窗以外的區域時相當于進行了點擊“取消”功能按鈕的默認回應。

Actionbar一般被設計用來向用戶展示多個功能按鈕選擇。

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

7

當功能按鈕數量很多的時候,文字列表的形式不適合顯示,此時可以用圖形加文字描述排列的形式來進行展示。這種樣式下需要注意彈窗內各功能按鈕的UI設計和排列布局。

8

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

9

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

10

Snackbar 提示對話框

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

11

一般情況下,Snackbar由信息內容加一個功能按鈕組成,用戶點擊了功能按鈕后彈窗消失,App隨即執行該操作,進入相應的功能流程。Snackbar跟Toast一樣是有時間限制的,即使用戶不進行回應,彈窗出現一段時間后也會自動消失。

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

12

Snackbar還可以被設計成只有信息內容而沒有功能按鈕,這種樣式的Snackbar用戶無法進行操作,只能等它自動消失,此時它就相當于一種文字描述型的Toast,只是表現形式有所不同。

13

這種樣式的Snackbar和Toast對比如下:

14

個人比較喜歡安卓系統采用Snackbar與用戶進行非模式彈窗交互,因為這種彈窗本身擁有比較友好的UI交互,顯示內容和提醒度也比Toast好,還能提供一個功能按鈕給用戶選擇使用。但是考慮到界面的整體設計,只有在界面內的元素大多為靜態或者底部的空白區域較大,而且需要提示給用戶的內容比較多(無法用一個簡短的句子能描述完)的時候,這種彈窗才會給用戶更好的交互體驗。否則本來界面就一大堆動態元素或者底部本來就充滿信息內容,此時再從底部向上滑出一個彈窗,會顯得整個界面非常擁擠和凌亂,而一般情況下移動端的App產品更多的是傾向于簡約設計。

使用彈窗要克制

并不是所有的彈窗設計都會被用戶接受,特別是廣告類彈窗常常會被用戶所厭惡。我們在使用彈窗的時候要盡量克制,要考慮信息內容的必要性和目的性(商業推廣或者增值服務等目的),來選擇是否使用彈窗和使用哪種方式和樣式的彈窗。

一旦選擇使用彈窗,請盡量少用,一般情況下都把彈窗的層級控制在只有一級(即關閉了一個彈窗后不會馬上出現新的彈窗),接連不斷的出現彈窗只會增加用戶想要卸載App的欲望(愚人節整蠱設計除外^_^)。

 

本文由 @Jenskee 原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不能轉載,可以潮汐您的文章嗎

    來自安徽 回復
    1. hhhh什么呀

      來自江蘇 回復
  2. 文章中所舉例的不是ActionBar,而是ActionSheet。

    來自廣西 回復
  3. 受益匪淺啊,最近正好在學習相關知識,有一個疑問,有的彈窗除了點擊彈窗中的按鈕,也可以點擊周圍的灰色區域,有的只能點擊按鈕,這兩個都是dialog彈窗嗎??

    來自北京 回復
    1. 按照顯示效果來看的話,是都屬于dialog,只是兩者對觸發條件的判斷不一樣,后者把窗口外的任何點擊都視為取消操作

      來自廣東 回復
  4. 工作中剛好也用到,學習了,謝謝分享啊

    來自廣東 回復
    1. 很幸運能幫到你

      來自廣東 回復
  5. 期待更多

    來自上海 回復
    1. 可以訂閱我,分享更多產品知識

      來自廣東 回復
  6. 淘寶京東類的購物產品移動端,選擇規格、參數那類的彈窗叫什么名字?

    來自上海 回復
    1. Actionbar功能框

      來自吉林 回復
  7. 非常棒,剛好解決了我遇到的問題 ??

    來自上海 回復
    1. 很高興能幫助到你

      來自廣東 回復
  8. Alert與Dialog的區別是什么?

    來自河南 回復
    1. 貌似是一樣的東西,只是叫法不一樣 ?

      來自廣東 回復
    2. alert應該是ios的官方彈出框,Dialog是md的

      來自陜西 回復
    3. Alert應該更多的是PC Web的彈窗吧,移動端叫Dialog比較多

      來自廣東 回復
  9. 太贊了,昨天正好遇到這個問題,看了此文章受益匪淺,蟹蟹。 ??

    來自北京 回復
    1. 很高興能幫助到你

      來自廣東 回復
  10. 好像每個回復都被回復了,我來試試 ??

    來自四川 回復
    1. 嗯嗯是的啊,你們認真閱讀認真評論了,我就得要認真回復回報你們的嘛

      來自廣東 回復
  11. mark~講的比較詳細 ??

    來自北京 回復
    1. thanks

      來自廣東 回復
  12. Actionbar 功能框和Dialog 對話框有運用場景怎么區分?我個人主觀設計比較傾向于Actionbar 功能框,但我發現大多數APP兩種都混合著用。所以想問一下有沒有明確的思路去區分它倆的運用場景?

    來自廣東 回復
    1. Actionbar功能框可以看成是Dialog的一種延伸設計,Actoinbar比Dialog擁有更多的功能按鈕,提供給用戶更多的功能選擇。在使用場景來說,Acionbar一般讓用戶進行選擇,而Dialog則是讓用戶進行是非判斷。

      來自廣東 回復
  13. dialog和actionbar用來強制用戶進行點擊操作,
    toast反饋用戶操作,剛才用戶的點擊操作有沒有生效
    Snackbar反饋用戶操作,剛才用戶的點擊操作有沒有生效。并且可以鏈接到使用幫助

    來自四川 回復
    1. 嗯嗯,謝謝你幫我總結了呢,不愧是大神,言簡意賅哈

      來自廣東 回復
    2. 見笑了,我只是班門弄斧,在您詳細的介紹下才明白的這些。

      來自四川 回復
  14. 好贊,可否提供幾個設計比較抓人眼球的toast例子

    回復
    1. toast是最簡單最常用的非模態彈窗呀,如果系那個要設計成抓人眼球的話還可以添加模糊遮罩突出要提示的內容

      來自廣東 回復
  15. 漲知識

    來自安徽 回復
    1. 你想要的姿勢我都會 ??

      來自廣東 回復
    2. 你要是個妹子,我就跟你學姿勢 ?

      來自安徽 回復
  16. 建議多看看別人做snackbar toast這種控件的初衷是解決什么場景什么用途的!

    來自北京 回復
    1. 好的,受教了

      來自廣東 回復
  17. 你這里,一:平臺概念區分不明顯;二:源生和第三方插件未區分,感覺講點有點蒙!

    來自北京 回復
  18. 你好,我是微信公眾號:超級大數據 的小編,我可以轉載您的文章嗎

    來自廣東 回復
    1. 謝謝您想要轉載本文,我拜讀過您的公眾號,好像本文不太適合您的公眾號定位,所以期待下次有機會的話再合作吧 ??

      來自廣東 回復
  19. 好棒。

    回復
    1. 你也棒棒噠 ??

      來自廣東 回復
  20. 長知識啦

    回復
    1. 能幫助您長知識是我的榮幸 ??

      來自廣東 回復
  21. 贊~~~已收錄在個人知識樹

    來自廣東 回復
    1. 謝謝收錄

      回復
  22. 總結的不錯,文章也很清晰。。贊一個 ??

    來自廣東 回復
    1. 謝謝

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

    來自廣東 回復
    1. 棒棒噠~多謝po主

      來自湖北 回復