彈框體系總結(jié):模態(tài)彈框和非模態(tài)彈框
彈框是一種重要的交互方式,主要用于完成信息傳遞和用戶反饋兩大功能。彈框很常見(jiàn),但并不見(jiàn)的每一個(gè)設(shè)計(jì)師都可以100%的弄明白彈框這個(gè)概念。這篇文章是對(duì)彈框體系的一個(gè)簡(jiǎn)單梳理和總結(jié),希望可以解決大家心中的一些疑惑。
我們?nèi)粘Kf(shuō)的彈框是一個(gè)很籠統(tǒng)的概念。所有的對(duì)話框,浮層,提示條我們都習(xí)慣性的稱之為彈框,其實(shí)彈框我們可以分為兩種:模態(tài)彈框和非模態(tài)彈框。
模態(tài)彈框
模態(tài)彈框和非模態(tài)彈框最大的區(qū)別就是是否強(qiáng)制用戶交互。模態(tài)彈框會(huì)打斷用戶的當(dāng)前操作流程,用戶不在彈框上操作的話,其余功能都使用不了。從這方面,我們可以看出來(lái)模態(tài)彈框的優(yōu)缺點(diǎn)都十分的明顯:優(yōu)點(diǎn)是可以很好的獲取的用戶的視覺(jué)焦點(diǎn),缺點(diǎn)是打斷了用戶的當(dāng)前操作流程。模態(tài)彈框?qū)儆谝环N重量性反饋,一般用于用戶進(jìn)行重要的操作。常見(jiàn)的模態(tài)彈框種類(lèi)有對(duì)話框(Dialog/Alter),動(dòng)作欄(Actionbar/Actionsheet/ActionView)和浮層(Popover/Popup)。因?yàn)楝F(xiàn)在iOS和Android很多組件都是通用的,所以在接下來(lái)的文章里過(guò)于相似的組件我只介紹一種。
對(duì)話框
對(duì)話框一般用于用戶進(jìn)行一項(xiàng)很重要或者有風(fēng)險(xiǎn)的操作,這時(shí)會(huì)彈出一個(gè)對(duì)話框來(lái)給用戶提示信息,用戶根據(jù)提示來(lái)進(jìn)行判斷。一般會(huì)出現(xiàn)在屏幕的中間位置,會(huì)對(duì)界面的主要內(nèi)容造成遮擋。
目前來(lái)說(shuō)對(duì)話框的設(shè)計(jì)樣式繁多,用戶可以進(jìn)行信息錄入,也可以用于營(yíng)銷(xiāo)宣傳。
動(dòng)作欄
動(dòng)作欄在我看來(lái)可以看成是對(duì)話框的一個(gè)加強(qiáng)版,因?yàn)闊o(wú)論是alert還是dialog一般都只有兩個(gè)按鈕。而動(dòng)作欄可以提供多個(gè)功能按鈕,而且展示的樣式比較多變。
但是也有例外,有的動(dòng)作欄只有兩個(gè)選項(xiàng)。以網(wǎng)易云音樂(lè)為例,你要?jiǎng)h除歌曲時(shí),“確認(rèn)刪除”提示就是通過(guò)動(dòng)作欄來(lái)完成的(如左圖)。其實(shí)這里使用對(duì)話框也是完全可以的(如右圖),網(wǎng)易云音樂(lè)的設(shè)計(jì)師在這里使用的動(dòng)作欄的理由我不得而知。但是我的個(gè)人猜測(cè)是,動(dòng)作欄位于屏幕下方,相對(duì)來(lái)說(shuō)對(duì)界面內(nèi)容的遮蓋會(huì)小一點(diǎn)。
浮層
浮層是用戶點(diǎn)擊控件或者界面某一區(qū)域浮出的半透明的臨時(shí)視圖。浮層的樣式跟動(dòng)作欄很相似,都可以向用戶展示多個(gè)功能選項(xiàng)。但是浮層可以出現(xiàn)屏幕中的任何位置,能夠給用戶更具有指向型的提示。
接下來(lái)我們可以做一個(gè)小結(jié):在不考慮信息錄入情況下,對(duì)話框適用于用戶進(jìn)行判斷操作,而動(dòng)作欄和浮層適用于用戶進(jìn)行選擇操作,而浮層相對(duì)于動(dòng)作欄更具有指向型。
非模態(tài)彈框
與模態(tài)彈框相比,非模態(tài)彈框最大的區(qū)別是不強(qiáng)制用戶交互,也不會(huì)彈出半透明背景層,非模態(tài)彈框停留一段時(shí)間后會(huì)自己消失。所以相對(duì)于模態(tài)彈框來(lái)說(shuō),非模態(tài)彈框?qū)儆谳p量型反饋,不會(huì)對(duì)用戶造成太大的干擾。常見(jiàn)的非模態(tài)彈框有toast(hud)和snackbar。
Toast
Toast主要用于用戶完成操作以后,告訴用戶操作結(jié)果或者狀態(tài)的變更。Toast其實(shí)是屬于Android的組件,iOS里有一個(gè)相類(lèi)似的是hud,最常見(jiàn)的就是音量調(diào)節(jié)提示。但是現(xiàn)在iOS和Android的界限不斷被打破,toast現(xiàn)在也被廣泛應(yīng)用于iOS界面設(shè)計(jì)中。如果我們?nèi)タ碅ndroid給的設(shè)計(jì)規(guī)范,會(huì)發(fā)現(xiàn)toast有以下幾個(gè)特點(diǎn):
- 只出現(xiàn)在屏幕底部
- 只能放文字
- 非模態(tài)彈框
但是我們會(huì)發(fā)現(xiàn)現(xiàn)在的一些toast是可以出現(xiàn)在屏幕中任何位置的,而且也可以加icon,所以說(shuō)教條主義害死人啊。我想起前端跟我說(shuō)的一句話,“只要你們能設(shè)計(jì)出來(lái),理論上我們都可以做出來(lái),但是我們可能會(huì)砍人?!?/p>
其實(shí)真實(shí)的toast是可以出現(xiàn)在屏幕的任何位置的,而且可以加icon,甚至連背景層顏色都能變。所以說(shuō)我覺(jué)得設(shè)計(jì)師不僅要去看那些設(shè)計(jì)規(guī)范,還要花點(diǎn)時(shí)間跟開(kāi)發(fā)溝通一下。
Toast的優(yōu)點(diǎn)是不會(huì)打斷用戶當(dāng)前的操作流程,屬于輕量型的反饋方式。缺點(diǎn)是容易被用戶忽視,而且不適合展示過(guò)多的信息,可能在用戶讀完之前就消失了。為了提升信息的可讀性和增加樣式美感,現(xiàn)在toast都會(huì)采用文字加icon的組合樣式。
Snackbar
Snackbar一般是由文字和功能按鈕組成的,用戶可以點(diǎn)擊按鈕交互,即使用戶不點(diǎn)擊snackbar也會(huì)自動(dòng)消失,一般位于屏幕下方。通俗意義上,我們可以把snackbar看成是帶有icon的toast。
Snackbar我放在最后說(shuō),因?yàn)樗浅L厥?。雖然snackbar屬于非模態(tài)彈框,但是它也有模態(tài)彈框的一些特點(diǎn)。例如snackbar也有按鈕來(lái)供用戶交互;此外snackbar一般會(huì)出現(xiàn)在界面下方,這點(diǎn)又和動(dòng)作欄中的Action sheet很像。
如果上面寫(xiě)的你看不懂,沒(méi)關(guān)系。我來(lái)給你做一個(gè)小結(jié):非模態(tài)彈框偏重信息提示,模態(tài)彈框既可以信息提示也可以供用戶交互;toast是輕量型的彈框類(lèi)型,snackbar集眾家之所長(zhǎng),當(dāng)然你說(shuō)它四不像我也沒(méi)意見(jiàn)。
彈框體系的建立優(yōu)化
以上我們了解了幾種主要的彈框樣式和用法,接下來(lái)我們來(lái)考慮的是如何建立一款產(chǎn)品的彈框體系或者如何對(duì)現(xiàn)有產(chǎn)品的彈框體系進(jìn)行優(yōu)化。其實(shí)彈框體系的建立和優(yōu)化的原則可以用一句話概括:能在界面中展示就不用彈框,能用非模態(tài)彈框的就不要用模態(tài)彈框。
因?yàn)槿魏螐椏蚨紩?huì)對(duì)用戶造成干擾,即使是最輕量型的toast。從用戶體驗(yàn)的角度來(lái)說(shuō),進(jìn)行一個(gè)操作流程所受到的干擾肯定是越少越好。以下圖為例,用戶可能會(huì)對(duì)“配速區(qū)間”和“配速穩(wěn)定性”這些專業(yè)術(shù)語(yǔ)不太了解,所以他們會(huì)點(diǎn)擊“問(wèn)號(hào)”圖標(biāo)。
這時(shí)候我們有3種的解決方案:
- 通過(guò)一個(gè)新的界面展示。但是我們可以可以看出,解釋信息并不多,不需要通過(guò)一個(gè)新的頁(yè)面來(lái)展示。
- 使用對(duì)話框或者浮層,在這里我們不能使用toast,因?yàn)閠oast時(shí)間太短,用戶根本讀不完。
- 在當(dāng)前界面展示。
其實(shí)方案2和3這在我看來(lái)是不錯(cuò)的解決方案。但是考慮到減少對(duì)用戶的干擾和操作步驟,這里我覺(jué)得方案3更佳。
多態(tài)按鈕
此外多態(tài)按鈕的使用也可以幫助我們解放彈框的壓力。例如,支付寶的支付界面,立即支付按鈕可以跳轉(zhuǎn)到付款成功的狀態(tài),這時(shí)候就沒(méi)有必要再用彈框給用戶提示了。
建立優(yōu)先級(jí)
優(yōu)先級(jí)不同的信息應(yīng)該獲得不同的視覺(jué)權(quán)重,那么視覺(jué)權(quán)重最大的模態(tài)彈框應(yīng)該展示重要的內(nèi)容。所以我們要對(duì)需要展示的信息做一個(gè)優(yōu)先級(jí)的排布,要讓真正重要的信息才可以使用模態(tài)彈框。只有低頻而又合理的使用,用戶才會(huì)當(dāng)回事。過(guò)度使用會(huì)給用戶產(chǎn)生”狼來(lái)了”心理。
總結(jié)
因?yàn)楝F(xiàn)在交互設(shè)計(jì)的很多術(shù)語(yǔ)都沒(méi)有統(tǒng)一,導(dǎo)致很多人對(duì)于彈框的種類(lèi)很定義都有很大的出入。這篇文章是從我個(gè)人角度進(jìn)行的一個(gè)總結(jié),希望可以幫助到大家。各位有什么想法的,歡迎留言或者私信。
#專欄作家#
王M爭(zhēng)(微信公眾號(hào):王M爭(zhēng)),人人都是經(jīng)理專欄作家,資深互聯(lián)網(wǎng)人。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
請(qǐng)問(wèn)彈框需要做成產(chǎn)品層級(jí)的管理系統(tǒng)么?還是從技術(shù)底層實(shí)現(xiàn)管理即可?
棒
寫(xiě)的非常好,謝謝分享
寫(xiě)的不錯(cuò) 支持
文章里模態(tài)彈窗里對(duì)話框括號(hào)內(nèi)是alert還是alter?
終于知道各種彈窗的學(xué)名和區(qū)別及用法了,贊一個(gè)!
蠻贊不過(guò)上面小結(jié)有個(gè)bug:非模態(tài)彈框是一種輕量級(jí)反饋,主要傳遞不太重要的少量信息,它不強(qiáng)制用戶交互;而模態(tài)彈框要打斷用戶當(dāng)前操作流,而獲取視覺(jué)焦點(diǎn),所以是一種表現(xiàn)較高重要性信息的反饋。
絕對(duì)的干貨,看設(shè)計(jì)指南上模態(tài)視圖的部分很模糊,搞不清彈窗和模態(tài)視圖的區(qū)別,現(xiàn)在很清晰了
閱讀量這么高,點(diǎn)贊率太低是網(wǎng)站設(shè)計(jì)的問(wèn)題,文章是一級(jí)棒的。
老師,配速那個(gè)環(huán)節(jié)是不是少了個(gè)方案3的圖片 ??
左右的兩張圖是用方案3前后的區(qū)別,方案1的跳轉(zhuǎn)和2的彈窗沒(méi)展示
1
mark
受益匪淺! ??