超全面！這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析

時(shí)間：2023-10-02 07:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-02 07:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

超全面！這可能是你見(jiàn)過(guò)最全的彈窗設(shè)計(jì)解析：彈窗，對(duì)于大家來(lái)說(shuō)并不陌生。UI設(shè)計(jì)師在工作中，乃至日常App使用過(guò)程中，經(jīng)常接觸到形形色色的彈窗設(shè)計(jì)。今天這篇好文將讓你對(duì)彈窗設(shè)計(jì)的理解更加透徹。

看完本文你會(huì)學(xué)到：

1. 什么是彈窗，彈窗的定義

2. 彈窗的分類以及他們各自的特征

3. 彈窗設(shè)計(jì)的思考和優(yōu)化

一. 什么是彈窗

一般來(lái)說(shuō)它的功能意義是：中斷用戶當(dāng)前操作并對(duì)其作出補(bǔ)充，或中斷用戶當(dāng)前操作并對(duì)其作出反饋。作為拉通產(chǎn)品交互與用戶操作的核心樞紐，作為用戶處理「即時(shí)任務(wù)」的重要載體，它的模樣可謂是千變?nèi)f化，但萬(wàn)變不離其宗。在交互形式上它分為兩種形式，模態(tài)彈窗和非模態(tài)彈窗。

模態(tài)彈窗，它的特征為，當(dāng)它出現(xiàn)在用戶的操作視野內(nèi)時(shí)，用戶需要對(duì)其作出回應(yīng)，所以它是可交互的。常見(jiàn)的種類有對(duì)話框（Dialog），警示框（Alter），浮層（Popover/Popup）和操作欄（Actionbar），由于它的特性，它的層級(jí)注定比較高，可以很好的吸引用戶的注意。同時(shí)會(huì)帶來(lái)頓挫感強(qiáng)烈的體驗(yàn)風(fēng)險(xiǎn)，個(gè)人建議慎用。

非模態(tài)彈窗在特征上則與模態(tài)彈窗相反，它從出現(xiàn)到停留消失的時(shí)間很短暫，短到用戶不需要對(duì)它作出反映，所以它是一種輕量級(jí)的反饋機(jī)制。常見(jiàn)的種類有Hud/Toast，提示欄和Snackbar。

二. 彈窗的分類

模態(tài)：對(duì)話框

對(duì)話框類型的彈窗有很多，我把他們劃分為：信息下發(fā)類、信息提交類。

信息下發(fā)類型的對(duì)話框通常指代程序運(yùn)行的過(guò)程出現(xiàn)需要用戶決策的「即時(shí)任務(wù)」。

比較典型的：系統(tǒng)、版本更新、消息通知、警示欄、運(yùn)營(yíng)/廣告彈窗等等。

這類彈窗的視覺(jué)層級(jí)非常高，設(shè)計(jì)也是多種多樣。通常出現(xiàn)在屏幕中心，伴隨半透明遮罩，讓你想忽略都難。他們通常用來(lái)提示重大信息，提醒用戶處理當(dāng)前任務(wù)等等。由于它「引人注目」的特性，用于活動(dòng)運(yùn)營(yíng)，廣告宣發(fā)的頻率非常高。







△ 系統(tǒng)位置提示 / 新版本提示 / 開(kāi)啟通知提示







△ 系統(tǒng)電量提示 / 活動(dòng)運(yùn)營(yíng)提示 / 廣告彈窗

信息提交類則是需要用戶在彈窗內(nèi)進(jìn)行操作，二次提交信息。使用場(chǎng)景有，登錄注冊(cè)，改名分組等等，如下圖。







△ 登錄對(duì)話框 / 改備注名 / 新建分組名

模態(tài)：浮層

△ 按鍵浮層 / 按鍵浮層 / 下拉菜單浮層

浮層是指，用戶點(diǎn)擊某個(gè)功能控件后浮出一個(gè)臨時(shí)界面對(duì)其作出補(bǔ)充，它通常會(huì)伴隨半透明的遮罩/陰影襯底，用戶需要點(diǎn)擊臨時(shí)界面的功能區(qū)域，或者點(diǎn)擊空白處才能進(jìn)行下一步操作。它也會(huì)有一些其他的名詞，像是「下拉菜單」「下拉彈窗」等等。他們的功能屬性是一樣的，所以我把他們歸類到一起，方便大家歸納。

模態(tài)：操作欄

△ 操作欄 / 操作菜單 / 操作菜單

操作欄實(shí)際上和浮層很像，都是通過(guò)用戶主動(dòng)點(diǎn)擊后對(duì)某一功能作出補(bǔ)充，只不過(guò)浮層通常出現(xiàn)在比較靠上的位置，操作欄通常出現(xiàn)在底部。浮層從形式上更強(qiáng)調(diào)它的歸屬，也就是從哪來(lái)，為用戶明確操作導(dǎo)向。圖三是讓我感到很迷惑的一個(gè)設(shè)計(jì)，我?guī)缀鯖](méi)法為它歸類，由于它帶有半透明的毛玻璃遮罩，所以我把它歸為操作欄。它是點(diǎn)擊某個(gè)分享button出現(xiàn)的，整個(gè)界面密封性較高，點(diǎn)擊空白區(qū)域會(huì)撤銷當(dāng)前操作，不過(guò)個(gè)人感覺(jué)如果不是慣性操作，用戶很容易覺(jué)得迷茫。建議適當(dāng)優(yōu)化，例如加個(gè)返回鍵，固定操作區(qū)域等等。

非模態(tài)：HUD/Toast

Hud是iOS的控件，Toast則是android的，業(yè)內(nèi)大部分 App 在 iOS 提示體系內(nèi)采用了Toast來(lái)設(shè)計(jì)。所以兩個(gè)端不管從功能還是形式上來(lái)看都有異曲同工之處。







△ 音量Hud / 更新氣泡 / 更新提示條







△ 清理緩存 / 更新氣泡 / 更新氣泡







△ 按鍵引導(dǎo) / 按鍵引導(dǎo) / 按鍵引導(dǎo)

由于他們的形式非常多變，甚至有些很難被定義，我截了以上9個(gè)界面來(lái)幫助大家理解。

通過(guò)1、2行圖例，大家可以看出，他們都是反饋用戶的任務(wù)狀態(tài)，例如更新了多少條新動(dòng)態(tài)，發(fā)送成功，正在清除緩存等等。這類toast存在的時(shí)間非常短暫，大概1s左右。第3行圖例中的Toast和前兩行有些不同，他們主動(dòng)出現(xiàn)，用于提示用戶，對(duì)某個(gè)功能點(diǎn)做必要的補(bǔ)充。

這類Toast存在的時(shí)間會(huì)稍長(zhǎng)一點(diǎn)，或者伴隨用戶滑動(dòng)/點(diǎn)擊后才會(huì)消失，我把這類叫做引導(dǎo)氣泡。重點(diǎn)想來(lái)聊一聊他們的「形式」和「位置」。從形式上來(lái)看大概分為純文本，icon+文本，有的是氣泡（POP），有的是提示條，設(shè)計(jì)師根據(jù)權(quán)重選擇即可。

從位置上來(lái)說(shuō)，這些彈窗幾乎出現(xiàn)在任何區(qū)域，值得注意的是，Toast出現(xiàn)的位置往往與用戶操作息息相關(guān)，作為設(shè)計(jì)師，我們需要確保即便是這樣輕量的反饋，也要出現(xiàn)在合適的位置，有效的被用戶接收，像是下拉刷新后Toast一般出現(xiàn)在頂部，雙擊Navbar中首頁(yè)icon后提示更新的Toast會(huì)出現(xiàn)在底部，引導(dǎo)氣泡往往出現(xiàn)在按鍵周圍等等，設(shè)計(jì)師不妨多多思考。

非模態(tài)：Snackbar

△ 售罄提示/ 簽到提示 / 登錄活動(dòng)提示

Snackbar和Toast一樣是Android里的控件，也是現(xiàn)在通用于iOS端App提示提示的彈窗。同樣針對(duì)用戶操作的輕量反饋機(jī)制。他們通常出現(xiàn)在底部，可交互，短暫停留后，或滑動(dòng)頁(yè)面后就會(huì)消失。這兩個(gè)端的交互方式存在一些區(qū)別，Android中Snackbar的出現(xiàn)更加針對(duì)用戶某個(gè)操作，iOS中可能用戶打開(kāi)App，或者滑動(dòng)商品列表就會(huì)出現(xiàn)，更像是吸引用戶，進(jìn)行下一步操作，在電商 App 內(nèi)尤其常見(jiàn)。

非模態(tài)：提示欄

提示欄是內(nèi)嵌于當(dāng)前頁(yè)面的一個(gè)組件，由于它和彈窗一樣與當(dāng)前頁(yè)面有較大區(qū)別，所以我把它也歸入彈窗來(lái)總結(jié)了。常態(tài)下的提示欄雖然隸屬非模態(tài)彈窗，但是他們是常駐于頁(yè)面的某個(gè)區(qū)域的，并且可交互。







△ 登錄提示 / 登錄提示 / 離線提示

總結(jié)

彈窗設(shè)計(jì)是我非常喜歡的內(nèi)容之一，我覺(jué)得它讓用戶真正感覺(jué)到自己與產(chǎn)品之間產(chǎn)生了某種聯(lián)系。同時(shí)，設(shè)計(jì)的好壞也考量了產(chǎn)品背后的團(tuán)隊(duì)是否真正的了解用戶，了解產(chǎn)品。

不管是模態(tài)彈窗還是非模態(tài)彈窗，它的出現(xiàn)多多少少會(huì)影響到用戶當(dāng)前的體驗(yàn)，所以我們使用彈窗要克制，不能高頻率的使用。同時(shí)，我們選擇彈窗時(shí)也要謹(jǐn)慎，合理。

當(dāng)出現(xiàn)犯錯(cuò)成本很高的操作前，及時(shí)使用對(duì)話框提醒用戶規(guī)避風(fēng)險(xiǎn)，用戶才會(huì)覺(jué)得安心，可靠。如果在電量還剩10%時(shí)，蘋果只是淡淡的浮出1s的氣泡來(lái)提醒，而你恰好沒(méi)有看見(jiàn)導(dǎo)致關(guān)機(jī)，你是不是感到十分崩潰？所以，選擇彈窗也需要根據(jù)場(chǎng)景。

在文章的準(zhǔn)備期我截了差不多70個(gè)界面，有的彈窗設(shè)計(jì)十分精妙，當(dāng)然也有碰到「一言難盡」的設(shè)計(jì)。下面我羅列了彈窗設(shè)計(jì)的三個(gè)「反面案例」，希望為大家規(guī)避掉設(shè)計(jì)中的一些誤區(qū)。







△ 版本更新提示 / 廣告彈窗 / 評(píng)價(jià)提示

反面1的問(wèn)題：文案不友好

用戶并不關(guān)心新版本修復(fù)了什么問(wèn)題，他們甚至連「Bug」是什么都不知道，彈窗的文案讓人覺(jué)得很迷惑。產(chǎn)品方不妨把思路從「我們修復(fù)了什么」換成「我們帶來(lái)了什么」，具體可以參考各大電商app的做法。

反面2的問(wèn)題：錯(cuò)誤的交互

當(dāng)我打開(kāi)這個(gè)App的時(shí)候，我甚至都沒(méi)有滑動(dòng)頁(yè)面，就直接跳出一個(gè)廣告，這讓我覺(jué)得體驗(yàn)非常差。并且重點(diǎn)是，居然設(shè)置了5s后才能點(diǎn)擊關(guān)閉按鈕。好吧，我立馬就卸載了并放進(jìn)了反面案例中。不要在用戶沒(méi)有進(jìn)行任何操作前彈窗。在高層級(jí)，高量級(jí)的彈窗上盡可能不要再次增加復(fù)雜的交互，再一次的消耗用戶耐心。這樣做實(shí)在太不合理了，建議參考一些新零售App的做法，利用設(shè)計(jì)+文案+布局，「聰明」的打廣告。

反面3的問(wèn)題：糟糕的時(shí)機(jī)

這個(gè)彈窗的文案也很好，選項(xiàng)也很合理，看起來(lái)沒(méi)有任何問(wèn)題，我把他放進(jìn)反面案例的原因是，我剛下載完這個(gè)App，評(píng)價(jià)彈窗就跳了出來(lái)。我知道現(xiàn)在有很多App這樣做，對(duì)此我真的覺(jué)得很糟糕，用戶甚至沒(méi)有足夠的時(shí)間使用你的產(chǎn)品，如何給出評(píng)價(jià)呢？建議給新用戶一段使用時(shí)間，再進(jìn)行彈窗評(píng)價(jià)。

米果電商 | 專注淘寶天貓京東等電商視覺(jué)設(shè)計(jì)策劃，營(yíng)銷策劃，電商品牌策劃設(shè)計(jì)。官網(wǎng)看案例 http://51migo.cn