彈框體系總結(jié)

 

彈框是一種重要的交互方式，主要用于完成信息傳遞和用戶反饋兩大功能。彈框很常見，但并不見的每一個設(shè)計(jì)師都可以100%的弄明白彈框這個概念。這篇文章是對彈框體系的一個簡單的梳理和總結(jié)，希望可以解決大家心中的一些疑惑。

 

我們?nèi)粘Ｋf的彈框是一個很籠統(tǒng)的概念。所有的對話框，浮層，提示條我們都習(xí)慣性的稱之為彈框，其實(shí)彈框我們可以分為兩種：模態(tài)彈框和非模態(tài)彈框。

 

模態(tài)彈框

 

模態(tài)彈框和非模態(tài)彈框最大的區(qū)別就是是否強(qiáng)制用戶交互。模態(tài)彈框會打斷用戶的當(dāng)前操作流程，用戶不在彈框上操作的話，其余功能都使用不了。從這方面，我們可以看出來模態(tài)彈框的優(yōu)缺點(diǎn)都十分的明顯：優(yōu)點(diǎn)是可以很好的獲取的用戶的視覺焦點(diǎn)，缺點(diǎn)是打斷了用戶的當(dāng)前操作流程。模態(tài)彈框?qū)儆谝环N重量性反饋，一般用于用戶進(jìn)行重要的操作。常見的模態(tài)彈框種類有對話框(Dialog/Alter)，動作欄(Actionbar/Actionsheet/ActionView)和浮層(Popover/Popup)。因?yàn)楝F(xiàn)在iOS和Android很多組件都是通用的，所以在接下來的文章里過于相似的組件我只介紹一種。

 

 

 

 

對話框

 

對話框一般用于用戶進(jìn)行一項(xiàng)很重要或者有風(fēng)險的操作，這時會彈出一個對話框來給用戶提示信息，用戶根據(jù)提示來進(jìn)行判斷。一般會出現(xiàn)在屏幕的中間位置，會對界面的主要內(nèi)容造成遮擋。

 

 

目前來說對話框的設(shè)計(jì)樣式繁多，用戶可以進(jìn)行信息錄入，也可以用于營銷宣傳。

 

 

 

動作欄

 

動作欄在我看來可以看成是對話框的一個加強(qiáng)版，因?yàn)闊o論是alert還是dialog一般都只有兩個按鈕。而動作欄可以提供多個功能按鈕，而且展示的樣式比較多變。

 

 

但是也有例外，有的動作欄只有兩個選項(xiàng)。以網(wǎng)易云音樂為例，你要刪除歌曲時，“確認(rèn)刪除”提示就是通過動作欄來完成的(如左圖)。其實(shí)這里使用對話框也是完全可以的(如右圖)，網(wǎng)易云音樂的設(shè)計(jì)師在這里使用的動作欄的理由我不得而知。但是我的個人猜測是，動作欄位于屏幕下方，相對來說對界面內(nèi)容的遮蓋會小一點(diǎn)。

 

 

浮層

 

浮層是用戶點(diǎn)擊控件或者界面某一區(qū)域浮出的半透明的臨時視圖。浮層的樣式跟動作欄很相似，都可以向用戶展示多個功能選項(xiàng)。但是浮層可以出現(xiàn)屏幕中的任何位置，能夠給用戶更具有指向型的提示。

 

 

接下來我們可以做一個小結(jié)：在不考慮信息錄入情況下，對話框適用于用戶進(jìn)行判斷操作，而動作欄和浮層適用于用戶進(jìn)行選擇操作，而浮層相對于動作欄更具有指向型。

 

非模態(tài)彈框

 

與模態(tài)彈框相比，非模態(tài)彈框最大的區(qū)別是不強(qiáng)制用戶交互，也不會彈出半透明背景層，非模態(tài)彈框停留一段時間后會自己消失。所以相對于模態(tài)彈框來說，非模態(tài)彈框?qū)儆谳p量型反饋，不會對用戶造成太大的干擾。常見的非模態(tài)彈框有toast(hud)和snackbar。

 

Toast

 

 

Toast主要用于用戶完成操作以后，告訴用戶操作結(jié)果或者狀態(tài)的變更。Toast其實(shí)是屬于Android的組件，iOS里有一個相類似的是hud，最常見的就是音量調(diào)節(jié)提示。但是現(xiàn)在iOS和Android的界限不斷被打破，toast現(xiàn)在也被廣泛應(yīng)用于iOS界面設(shè)計(jì)中。如果我們?nèi)タ碅ndroid給的設(shè)計(jì)規(guī)范，會發(fā)現(xiàn)toast有以下幾個特點(diǎn)：

 

1 只出現(xiàn)在屏幕底部

 

2 只能放文字

 

3 非模態(tài)彈框

 

但是我們會發(fā)現(xiàn)現(xiàn)在的一些toast是可以出現(xiàn)在屏幕中任何位置的，而且也可以加icon，所以說教條主義害死人啊。我想起前端跟我說的一句話，“只要你們能設(shè)計(jì)出來，理論上我們都可以做出來，但是我們可能會砍人。”

 

 

其實(shí)真實(shí)的toast是可以出現(xiàn)在屏幕的任何位置的，而且可以加icon，甚至連背景層顏色都能變。所以說我覺得設(shè)計(jì)師不僅要去看那些設(shè)計(jì)規(guī)范，還要花點(diǎn)時間跟開發(fā)溝通一下。

 

Toast的優(yōu)點(diǎn)是不會打斷用戶當(dāng)前的操作流程，屬于輕量型的反饋方式。缺點(diǎn)是容易被用戶忽視，而且不適合展示過多的信息，可能在用戶讀完之前就消失了。為了提升信息的可讀性和增加樣式美感，現(xiàn)在toast都會采用文字加icon的組合樣式。

 

 

Snackbar

 

Snackbar一般是由文字和功能按鈕組成的，用戶可以點(diǎn)擊按鈕交互，即使用戶不點(diǎn)擊snackbar也會自動消失，一般位于屏幕下方。通俗意義上，我們可以把snackbar看成是帶有icon的toast。

 

 

Snackbar我放在最后說，因?yàn)樗浅Ｌ厥?。雖然snackbar屬于非模態(tài)彈框，但是它也有模態(tài)彈框的一些特點(diǎn)。例如snackbar也有按鈕來供用戶交互；此外snackbar一般會出現(xiàn)在界面下方，這點(diǎn)又和動作欄中的Action sheet很像。

 

如果上面寫的你看不懂，沒關(guān)系。我來給你做一個小結(jié)：非模態(tài)彈框偏重信息提示，模態(tài)彈框既可以信息提示也可以供用戶交互；toast是輕量型的彈框類型，snackbar集眾家之所長，當(dāng)然你說它四不像我也沒意見。

 

彈框體系的建立優(yōu)化

 

以上我們了解了幾種主要的彈框樣式和用法，接下來我們來考慮的是如何建立一款產(chǎn)品的彈框體系或者如何對現(xiàn)有產(chǎn)品的彈框體系進(jìn)行優(yōu)化。其實(shí)彈框體系的建立和優(yōu)化的原則可以用一句話概括：能在界面中展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框。

 

因?yàn)槿魏螐椏蚨紩τ脩粼斐筛蓴_，即使是最輕量型的toast。從用戶體驗(yàn)的角度來說，進(jìn)行一個操作流程所受到的干擾肯定是越少越好。以下圖為例，用戶可能會對“配速區(qū)間”和“配速穩(wěn)定性”這些專業(yè)術(shù)語不太了解，所以他們會點(diǎn)擊“問號”圖標(biāo)。

 

這時候我們有3種的解決方案：

 

1 通過一個新的界面展示。但是我們可以可以看出，解釋信息并不多，不需要通過一個新的頁面來展示。

 

2 使用對話框或者浮層，在這里我們不能使用toast，因?yàn)閠oast時間太短，用戶根本讀不完。

 

 3 在當(dāng)前界面展示。

 

 

其實(shí)方案2和3這在我看來是不錯的解決方案。但是考慮到減少對用戶的干擾和操作步驟，這里我覺得方案3更佳。

 

多態(tài)按鈕

 

此外多態(tài)按鈕的使用也可以幫助我們解放彈框的壓力。例如，支付寶的支付界面，立即支付按鈕可以跳轉(zhuǎn)到付款成功的狀態(tài)，這時候就沒有必要再用彈框給用戶提示了。

 

 

建立優(yōu)先級

 

優(yōu)先級不同的信息應(yīng)該獲得不同的視覺權(quán)重，那么視覺權(quán)重最大的模態(tài)彈框應(yīng)該展示重要的內(nèi)容。所以我們要對需要展示的信息做一個優(yōu)先級的排布，要讓真正重要的信息才可以使用模態(tài)彈框。只有低頻而又合理的使用，用戶才會當(dāng)回事。過度使用會給用戶產(chǎn)生”狼來了”心理。

 

總結(jié)

 

因?yàn)楝F(xiàn)在交互設(shè)計(jì)的很多術(shù)語都沒有統(tǒng)一，導(dǎo)致很多人對于彈框的種類很定義都有很大的出入。這篇文章是從我個人角度進(jìn)行的一個總結(jié)，希望可以幫助到大家。各位有什么想法的，歡迎留言或者私信。