編輯導(dǎo)語：我們在操作某個(gè)頁面時(shí)，有時(shí)會彈出一條信息框，這就是彈窗。它的作用是什么呢？又有哪些類型？一起來看一下吧。

什么是彈窗，我相信大多數(shù)人都不陌生，就是在我們操作某一個(gè)頁面的時(shí)候，突然彈出一條信息框，這就是彈窗。

彈窗的定義：就是用戶與產(chǎn)品之間進(jìn)行操作交互的窗口，核心價(jià)值在于對重點(diǎn)信息的一個(gè)傳達(dá)與反饋（傳達(dá)信息+狀態(tài)反饋+引導(dǎo)操作），那么它的作用是什么呢？它通?？梢员挥脕磉M(jìn)行營銷活動(dòng)，功能告知，以及版本升級等。

一、彈窗類型分類

1. 模態(tài)彈窗

什么是模態(tài)彈窗？就是用戶可以進(jìn)行交互操作，常見的模態(tài)彈窗有對話框、浮層框。

1）對話框

如右圖所示，左圖屬于被動(dòng)狀態(tài)，就是用戶進(jìn)入app的時(shí)候不需要任何操作，主動(dòng)彈出來的信息框，圖二屬于主動(dòng)狀態(tài)，就是用戶需要在點(diǎn)擊按鈕的情況下彈出來的信息框。

彈出來的時(shí)候背后的封面呈現(xiàn)黑色或半透明可以使彈窗的信息更加突出醒目。

那么他們設(shè)計(jì)的作用是什么？圖一促進(jìn)了一個(gè)優(yōu)惠券的使用，給用戶一個(gè)醒目的提示，圖二經(jīng)過反復(fù)的確認(rèn)提示，系統(tǒng)以對話框的彈窗形式提醒用戶是否還繼續(xù)操作，起到警示的作用，也可避免用戶帶來不必要的損失。

對話框彈窗的核心價(jià)值在于對重點(diǎn)信息的傳達(dá)與反饋。

2）動(dòng)作面板

如上圖所示，從左到右分別屬于宮格模式動(dòng)作面板，列表模式動(dòng)態(tài)面板，宮格模式常見于圖表形式表現(xiàn)，宮格模式的彈窗最常見的場景使用就是分享模塊，它的作用就是為了減少用戶不必要的記憶負(fù)擔(dān)。

彈窗高度較低，可以展現(xiàn)出更多的內(nèi)容以及功能，方便協(xié)助用戶的記憶以及使用。選項(xiàng)較多時(shí)，可以分組，一行為一組，可在屏幕右邊緣露出圖表，暗示可以橫向滑動(dòng)查看更多選項(xiàng)。

而列表式常見于用文字的形式去表現(xiàn)選項(xiàng)。選項(xiàng)較少可使用，底部設(shè)置取消按鈕。

3）浮層彈窗

我相信很多人對浮層彈窗并不陌生，最常見的支付寶微信右上角有一個(gè)+號，里面會放置部分常用功能，它的設(shè)計(jì)方式給浮層容器加上投影，避免與底部信息混淆，浮層底部設(shè)置蒙層。

這種一般都出現(xiàn)在按鈕右邊，此種彈窗也可出現(xiàn)在任何位置，按鈕數(shù)可多可少。

2. 非模態(tài)彈窗

什么是非模態(tài)彈窗？

用戶可回應(yīng)，一段時(shí)間之后可自動(dòng)消失，是一種輕量級的反饋機(jī)制，最常見的就是提示框和底部彈窗。

1）提示框（Toast/hud）

• Toast（是安卓系統(tǒng)的一個(gè)控件名詞，現(xiàn)也應(yīng)用于ios系統(tǒng)當(dāng)中）
• hud（ios里有一個(gè)相似于toast的是hud如音量調(diào)節(jié)）

如上圖所示屏幕彈出“已取消收藏”和“微信支付”我們常常在生活中會關(guān)注某個(gè)博主或某個(gè)物品，這時(shí)屏幕中間就會提示關(guān)注成功或者收藏成功，一般這種屬于輕量級提示，無交互，一般顯示1~2秒內(nèi)自動(dòng)消失。

它不能手動(dòng)消失，出現(xiàn)的位置可在頂部/中間/底部，它彈出一個(gè)小信息，作為提醒或消息反饋來用，一般用來顯示操作效果，或者應(yīng)用狀態(tài)的改變。

考慮到它顯示的時(shí)間比較短，占用區(qū)域不大，一般不適合承載更多的文字和信息。

2）底部彈窗（snackbar）

底部彈窗又被稱作為snackbar。

通常底部彈窗由文案和按鈕組成，一般出現(xiàn)在界面下方，可以自動(dòng)消失也可以用戶手動(dòng)操作使其銷售，通常多見于撤銷操作，也有關(guān)注后提示并帶有按鈕打開關(guān)注頁操作的等等。

3. 彈窗的優(yōu)缺點(diǎn)分析

二、彈窗設(shè)計(jì)風(fēng)格

現(xiàn)在很多app設(shè)計(jì)師在設(shè)計(jì)app時(shí)，會把彈窗設(shè)計(jì)成各種各樣的形式，例如抽屜式，標(biāo)簽式或?qū)m格式等等，我們可以通過用戶自身需要結(jié)合實(shí)際情況，通過上下拖動(dòng)查看彈窗信息。

那么這樣做有什么好處呢？可以節(jié)省屏幕的使用率，避免顯示內(nèi)容太多給用戶造成一定的視覺干擾和體驗(yàn)感很差的效果。

什么是彈窗指示器？就是方便用戶通過拖動(dòng)對彈窗的進(jìn)行展開、收起的操作方式。它一般適用于內(nèi)容較多時(shí)，用戶可以通過自身的實(shí)際需求，選擇展開或者折疊彈窗，以達(dá)到頁面信息最佳展示。

接下來就讓我為大家舉例子：

如圖某股票通過商業(yè)新聞來提升用戶的黏性：

出行這個(gè)設(shè)計(jì)結(jié)合了自身業(yè)務(wù)特點(diǎn)，豐富了指示條效果：向上拖動(dòng)即可全屏展示車型，價(jià)格等信息，向下拖動(dòng)即可收起更多車輛信息。

1. 設(shè)計(jì)彈窗時(shí)需要思考的3個(gè)問題

1）是否急迫

假如這件事情不那么急迫，不需要用戶馬上進(jìn)行處理、或者用戶根本處理不了，那么你可以考慮用以下方式弱化、降級觸達(dá)：

• 降低視覺音量：模態(tài)彈窗變成非模態(tài)彈窗，或者設(shè)置彈窗消失時(shí)間
• 主動(dòng)觸達(dá)降級為被動(dòng)展示：將觸達(dá)彈窗變成用戶主動(dòng)點(diǎn)擊查看

2）具體情境

假如這是一個(gè)操作或信息展示型彈窗，用戶在處理這個(gè)內(nèi)容/任務(wù)時(shí)，是否需要對照或查看其他內(nèi)容？這個(gè)內(nèi)容/任務(wù)是否反復(fù)發(fā)生/需要反復(fù)處理？

需要“對照或查看”其他內(nèi)容的情況下，設(shè)計(jì)一個(gè)模態(tài)彈窗的確起到了“引導(dǎo)注意力、讓用戶專注當(dāng)前任務(wù)”的效果，但也嚴(yán)重影響了用戶完成任務(wù)的能力。對此，我們一般有以下幾種方式來解決:

• 嘗試不用彈窗，而采用側(cè)邊欄來承載信息或任務(wù)
• 使用各種形式的非模態(tài)彈窗，來讓用戶在完成任務(wù)的同時(shí)，可以自由行動(dòng)、甚至允許暫時(shí)中斷任務(wù)

3）生效方式

假如這是一個(gè)操作彈窗，用戶是否需要對照自己處理的結(jié)果，再次對內(nèi)容進(jìn)行調(diào)整?

• 是：可用延時(shí)生效模式，在你沒有真正點(diǎn)擊“提交”之前，所有的修改都只是暫存，并沒有真正生效(在彈窗上增加一個(gè)保存選項(xiàng)也是可以的哦）
• 否：可用及時(shí)生效模式，在你與彈窗內(nèi)容區(qū)交互時(shí)，就已經(jīng)即時(shí)生效了

2. 產(chǎn)品設(shè)計(jì)怎樣選擇彈窗

當(dāng)你不知道用對話框還是控制面板時(shí)可根據(jù)彈窗反饋信息強(qiáng)度來選擇，如果強(qiáng)度大就選擇對話框，強(qiáng)度小就選擇控制面板。

非模態(tài)彈窗在使用時(shí)首先可根據(jù)平臺規(guī)范來選擇，其次在部分位置可根據(jù)具體場景來放置。

當(dāng)反饋信息不需要太強(qiáng)的阻斷感時(shí)，采用Snackbar代替Toast也是一個(gè)不錯(cuò)的選擇。從用戶體驗(yàn)上來說，用戶操作起來會更順暢。

三、彈窗的核心價(jià)值

傳達(dá)信息+狀態(tài)反饋+引導(dǎo)操作。

• 傳達(dá)信息：傳遞信息是指通過語言、文字、視頻、圖片途徑向人們表達(dá)交流的一種互動(dòng)方式。
• 狀態(tài)反饋：是系統(tǒng)的狀態(tài)變量通過比例環(huán)節(jié)傳送到輸入端去反饋的一種方式，是一種體現(xiàn)系統(tǒng)內(nèi)部特效的一種控制方式。
• 引導(dǎo)操作：在產(chǎn)品里有的有新手引導(dǎo)就是為了提示用戶如何操作，幫助用戶快速上手。

四、彈窗的設(shè)計(jì)時(shí)需要注意的細(xì)節(jié)

1）容器

即內(nèi)容區(qū)的長高尺寸，一般由視覺定義規(guī)范，彈窗的內(nèi)容區(qū)多根據(jù)內(nèi)容適配高度，超出規(guī)范高度做滾動(dòng)。

正常情況下應(yīng)避免滾動(dòng)，如果你畫的彈窗經(jīng)常需要滾動(dòng)，可能是規(guī)范不滿足業(yè)務(wù)，請向UI提建議。

交互也應(yīng)定義什么樣的信息量是彈窗的極限，超過這個(gè)極限就需使用其他的形式展示

2）標(biāo)題

彈窗標(biāo)題應(yīng)與用戶觸發(fā)彈窗的操作按鈕同名，或者至少有相同的關(guān)鍵字;彈窗標(biāo)題與內(nèi)容區(qū)文案要各有分工。

3）關(guān)閉方式

對B端來說，建議右上角添加關(guān)閉作為關(guān)閉操作性彈窗的最短路徑，并佐以鍵控、點(diǎn)擊遮罩等多種關(guān)閉方式;對C端來說，功能性彈窗較少在彈窗加“X”，關(guān)閉多以“取消”、點(diǎn)擊遮罩、下拉(底部半彈窗會采取的關(guān)閉手勢)為主;運(yùn)營彈窗因需要視覺沖擊力和引導(dǎo)行為，不會放取消操作，因此常在底部放圓“X”

4）內(nèi)容區(qū)與主操作按鈕

彈窗的底欄層級高于內(nèi)容區(qū)，因此在設(shè)計(jì)彈窗內(nèi)操作時(shí)，需有輕重之分。

另外，需盡量避免彈窗+tab的交互，tab+彈窗的潛臺詞是“點(diǎn)擊操作按鈕后，所有tab中的內(nèi)容都會被提交”所以即使隱藏的tab內(nèi)容沒有呈現(xiàn)出來，也是生效的，這與“所見即所得”背道而馳。

內(nèi)容區(qū)與操作區(qū)需有映射。增強(qiáng)文案與操作的親密性，讓用戶做出判斷的瞬間就可以完成操作。

5）操作按鈕排布

理想情況下操作按鈕只有2個(gè)，當(dāng)存在3個(gè)按鈕時(shí)，按鈕的擺放規(guī)則可以根據(jù)自己平臺的特性決定，并沒有通行的規(guī)則（但一般會將破壞性按鈕放在主操作按鈕的對側(cè)）。

C端有個(gè)不成文的規(guī)矩，取消在左，行動(dòng)在右，若行動(dòng)為不可撤回操作則需標(biāo)紅警示，c端在超過2個(gè)按鈕后就可以考慮使用actionsheet替代彈窗了。

五、彈窗的設(shè)計(jì)體驗(yàn)角度

好的彈窗應(yīng)做到減少干擾，注重極簡，視覺一致性，突出信息主要傳遞內(nèi)容，使用戶在一定的時(shí)間上能一目了然。

其次需要注意的是彈出的頻率一定不要太過于頻繁，如果太過于頻繁，就會使用戶感覺很厭煩。在做產(chǎn)品的時(shí)候一定不要讓用戶去思考，讓客戶去思考做選擇的產(chǎn)品不是好產(chǎn)品。

六、總結(jié)

本文講述了在哪些場景下彈窗如何使用，以及我們在設(shè)計(jì)彈窗的時(shí)候需要注意哪些細(xì)節(jié)，考慮綜合結(jié)合自身的情況下選擇最合適用戶的彈窗。

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

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