編輯導(dǎo)語：彈框，在我們?nèi)粘Ｊ褂檬謾C時都會碰到，那么對于這些彈框，你是否有幾分好奇，不同模態(tài)的彈框有什么差異？作者對彈框的分類和形式進(jìn)行了總結(jié)，并分享了在設(shè)計時需要注意的幾點問題。

手機彈框相信大家都不陌生，那為什么要設(shè)計彈框不設(shè)置界面？彈框到底有哪幾種形式？幾種彈框的區(qū)別在哪里？在設(shè)計的時候需要注意些什么？本文將從這幾個板塊給大家分享一下彈框的設(shè)計。

一、彈框的分類

彈窗又稱為對話框，是App與用戶進(jìn)行交互的常見方式之一。使用彈框可以減少用戶功能流程的頁面跳轉(zhuǎn)，當(dāng)功能比較少的時候盡量使用彈框，但是如果功能選項中包括很多描述文字的時候，還是單獨設(shè)置成跳轉(zhuǎn)頁面會更好。

彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種，區(qū)分這兩種彈框只需要記清楚一點，那就是到底需不需要用戶對這個彈框進(jìn)行相關(guān)操作，需要操作的就是模態(tài)彈框，不需要操作的就是非模態(tài)彈框。

模態(tài)彈框往往會直接打斷用戶的操作，當(dāng)出現(xiàn)模態(tài)彈框的時候，用戶必須對其進(jìn)行操作，否則無法進(jìn)行其他操作，也就是說模態(tài)彈框往往是提示用戶一些重要消息的。

但是非模態(tài)彈框往往不會影響用戶的正常操作，用戶不用對其有任何操作也會自動消失，因為非模態(tài)彈框通常都有時間限制，出現(xiàn)一段時間之后就會自動消失。從而也能夠看出來非模態(tài)彈框只是用來通知用戶一些不太重要的消息的，單純地通知用戶，并不需要任何操作。

二、模態(tài)彈框

1. Dialog對話框

Dialog對話框是一種模態(tài)彈窗。當(dāng)用戶進(jìn)行了敏感操作，或者當(dāng)App發(fā)生了較為嚴(yán)重性的狀態(tài)改變時，這種操作和改變會帶來影響性比較大的結(jié)果，就會出現(xiàn)Dialog對話框來提示用戶進(jìn)行確認(rèn)或選擇。比如退出App、進(jìn)行付費下載等功能操作。

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

由于Dialog 對話框提示的都是比較重要的一些操作或者提醒，所以在設(shè)計的時候一定要簡潔、無異義，讓用戶一眼就能看到我接下來的操作會帶來什么樣的影響或者后果。所以實際上大多數(shù)Dialog對話框都被設(shè)計成了沒有標(biāo)題的形式，這樣的設(shè)計可以減少用戶的理解成本。

2. Actionbar功能框

Actionbar功能框可以看成是Dialog對話框的一種延伸設(shè)計，兩者都是模態(tài)彈窗，用戶必須進(jìn)行回應(yīng)，否則彈窗不會消失，用戶無法繼續(xù)其它操作。

Actoinbar和Dialog的區(qū)別在于Dialog往往只會提供一個或兩個功能選項，但是Actoinbar往往會給用戶展示多個功能按鈕選擇，提供給用戶更多的功能選擇。而且Actionbar功能框還有一個特性，就是在彈框底部會存在一個固定的“取消”按鈕，點擊取消按鈕可直接關(guān)閉彈框。

對于Actionbar功能框而言還有一種展示形式，那就是當(dāng)功能按鈕很多的時候，全部用文字列表的形式展示不太清楚，那就可以采用文字+圖標(biāo)的形式來展示，這樣能展示的內(nèi)容會更多，而且給到用戶的體驗感會更好。但是這種形式就需要對功能按鈕進(jìn)行合理的UI設(shè)計和排列布局，符合用戶的視覺體驗。

三、非模態(tài)彈框

1. Toast 提示框

Toast提示框是一種非模態(tài)彈窗，往往會彈出一個提示框，作為提醒或消息反饋來用，一般用來顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。這個提示框往往會保存兩三秒就消失了。

例如你保存了一篇文章，App彈出一個Toast提示你消息已保存。

Toast 提示框往往也會在刷新界面時展現(xiàn)，比如微博動態(tài)刷新成功時，會有提示刷新成功提示框，這樣的設(shè)計會給用戶一種耳目一新的感覺，同時也不會感覺到這個彈框跟這個界面產(chǎn)生任何違和感。

2. Snackbar 提示對話框

Snackbar 提示對話框比較有意思的一點就是它同時融合了模態(tài)彈框和非模態(tài)彈框的一些特點，它除了去告知用戶一些信息的同時，還能跟用戶產(chǎn)生交互，也就是需要用戶簡單的操作。

比如下圖中收藏時會底部有會有彈框出現(xiàn)，同時在彈框中會出現(xiàn)功能按鈕，可以點擊操作，同時用戶如果不做任何操作，這條彈框也會在顯示三秒后自動消失。

3. Snackbar 提示對話框與toast提示框的區(qū)別

四、總結(jié)

在進(jìn)行彈框設(shè)計時一定要謹(jǐn)慎，因為并不是所有的彈框設(shè)計都會被用戶接受，在使用彈窗的同時一定要考慮清楚彈框內(nèi)容的重要性以及設(shè)計彈框的目的，根據(jù)這兩點來判斷我們是否需要使用彈框以及該使用哪種形式的彈框。而且彈框盡量少用，一定要避免一個接一個的彈框，這樣會引起用戶的反感。

總之作為產(chǎn)品經(jīng)理在滿足用戶功能使用的同時一定要考慮用戶的體驗，結(jié)合多個案例去設(shè)計自己的產(chǎn)品。

此文僅代表個人看法，歡迎大家交流討論~

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

題圖來自Unsplash，基于CC0協(xié)議