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

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

彈窗的定義：就是用戶與産品之間進行操作交互的窗口，核心價值在于對重點信息的一個傳達與反饋（傳達信息 狀态反饋 引導操作），那麼它的作用是什麼呢？它通常可以被用來進行營銷活動，功能告知，以及版本升級等。

一、彈窗類型分類

1. 模态彈窗

什麼是模态彈窗？就是用戶可以進行交互操作，常見的模态彈窗有對話框、浮層框。

1）對話框

如右圖所示，左圖屬于被動狀态，就是用戶進入app的時候不需要任何操作，主動彈出來的信息框，圖二屬于主動狀态，就是用戶需要在點擊按鈕的情況下彈出來的信息框。

彈出來的時候背後的封面呈現黑色或半透明可以使彈窗的信息更加突出醒目。

那麼他們設計的作用是什麼？圖一促進了一個優惠券的使用，給用戶一個醒目的提示，圖二經過反複的确認提示，系統以對話框的彈窗形式提醒用戶是否還繼續操作，起到警示的作用，也可避免用戶帶來不必要的損失。

對話框彈窗的核心價值在于對重點信息的傳達與反饋。

2）動作面闆

如上圖所示，從左到右分别屬于宮格模式動作面闆，列表模式動态面闆，宮格模式常見于圖表形式表現，宮格模式的彈窗最常見的場景使用就是分享模塊，它的作用就是為了減少用戶不必要的記憶負擔。

彈窗高度較低，可以展現出更多的内容以及功能，方便協助用戶的記憶以及使用。選項較多時，可以分組，一行為一組，可在屏幕右邊緣露出圖表，暗示可以橫向滑動查看更多選項。

而列表式常見于用文字的形式去表現選項。選項較少可使用，底部設置取消按鈕。

3）浮層彈窗

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

這種一般都出現在按鈕右邊，此種彈窗也可出現在任何位置，按鈕數可多可少。

2. 非模态彈窗

什麼是非模态彈窗？

用戶可回應，一段時間之後可自動消失，是一種輕量級的反饋機制，最常見的就是提示框和底部彈窗。

1）提示框（Toast/hud）

• Toast（是安卓系統的一個控件名詞，現也應用于ios系統當中）
• hud（ios裡有一個相似于toast的是hud如音量調節）

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

它不能手動消失，出現的位置可在頂部/中間/底部，它彈出一個小信息，作為提醒或消息反饋來用，一般用來顯示操作效果，或者應用狀态的改變。

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

2）底部彈窗（snackbar）

底部彈窗又被稱作為snackbar。

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

3. 彈窗的優缺點分析

二、彈窗設計風格

現在很多app設計師在設計app時，會把彈窗設計成各種各樣的形式，例如抽屜式，标簽式或宮格式等等，我們可以通過用戶自身需要結合實際情況，通過上下拖動查看彈窗信息。

那麼這樣做有什麼好處呢？可以節省屏幕的使用率，避免顯示内容太多給用戶造成一定的視覺幹擾和體驗感很差的效果。

什麼是彈窗指示器？就是方便用戶通過拖動對彈窗的進行展開、收起的操作方式。它一般适用于内容較多時，用戶可以通過自身的實際需求，選擇展開或者折疊彈窗，以達到頁面信息最佳展示。

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

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

出行這個設計結合了自身業務特點，豐富了指示條效果：向上拖動即可全屏展示車型，價格等信息，向下拖動即可收起更多車輛信息。

1. 設計彈窗時需要思考的3個問題

1）是否急迫

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

• 降低視覺音量：模态彈窗變成非模态彈窗，或者設置彈窗消失時間
• 主動觸達降級為被動展示：将觸達彈窗變成用戶主動點擊查看

2）具體情境

假如這是一個操作或信息展示型彈窗，用戶在處理這個内容/任務時，是否需要對照或查看其他内容？這個内容/任務是否反複發生/需要反複處理？

需要“對照或查看”其他内容的情況下，設計一個模态彈窗的确起到了“引導注意力、讓用戶專注當前任務”的效果，但也嚴重影響了用戶完成任務的能力。對此，我們一般有以下幾種方式來解決:

• 嘗試不用彈窗，而采用側邊欄來承載信息或任務
• 使用各種形式的非模态彈窗，來讓用戶在完成任務的同時，可以自由行動、甚至允許暫時中斷任務

3）生效方式

假如這是一個操作彈窗，用戶是否需要對照自己處理的結果，再次對内容進行調整?

• 是：可用延時生效模式，在你沒有真正點擊“提交”之前，所有的修改都隻是暫存，并沒有真正生效(在彈窗上增加一個保存選項也是可以的哦）
• 否：可用及時生效模式，在你與彈窗内容區交互時，就已經即時生效了

2. 産品設計怎樣選擇彈窗

當你不知道用對話框還是控制面闆時可根據彈窗反饋信息強度來選擇，如果強度大就選擇對話框，強度小就選擇控制面闆。

非模态彈窗在使用時首先可根據平台規範來選擇，其次在部分位置可根據具體場景來放置。

當反饋信息不需要太強的阻斷感時，采用Snackbar代替Toast也是一個不錯的選擇。從用戶體驗上來說，用戶操作起來會更順暢。

三、彈窗的核心價值

傳達信息 狀态反饋 引導操作。

• 傳達信息：傳遞信息是指通過語言、文字、視頻、圖片途徑向人們表達交流的一種互動方式。
• 狀态反饋：是系統的狀态變量通過比例環節傳送到輸入端去反饋的一種方式，是一種體現系統内部特效的一種控制方式。
• 引導操作：在産品裡有的有新手引導就是為了提示用戶如何操作，幫助用戶快速上手。

四、彈窗的設計時需要注意的細節

1）容器

即内容區的長高尺寸，一般由視覺定義規範，彈窗的内容區多根據内容适配高度，超出規範高度做滾動。

正常情況下應避免滾動，如果你畫的彈窗經常需要滾動，可能是規範不滿足業務，請向UI提建議。

交互也應定義什麼樣的信息量是彈窗的極限，超過這個極限就需使用其他的形式展示

2）标題

彈窗标題應與用戶觸發彈窗的操作按鈕同名，或者至少有相同的關鍵字;彈窗标題與内容區文案要各有分工。

3）關閉方式

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

4）内容區與主操作按鈕

彈窗的底欄層級高于内容區，因此在設計彈窗内操作時，需有輕重之分。

另外，需盡量避免彈窗 tab的交互，tab 彈窗的潛台詞是“點擊操作按鈕後，所有tab中的内容都會被提交”所以即使隐藏的tab内容沒有呈現出來，也是生效的，這與“所見即所得”背道而馳。

内容區與操作區需有映射。增強文案與操作的親密性，讓用戶做出判斷的瞬間就可以完成操作。

5）操作按鈕排布

理想情況下操作按鈕隻有2個，當存在3個按鈕時，按鈕的擺放規則可以根據自己平台的特性決定，并沒有通行的規則（但一般會将破壞性按鈕放在主操作按鈕的對側）。

C端有個不成文的規矩，取消在左，行動在右，若行動為不可撤回操作則需标紅警示，c端在超過2個按鈕後就可以考慮使用actionsheet替代彈窗了。

五、彈窗的設計體驗角度

好的彈窗應做到減少幹擾，注重極簡，視覺一緻性，突出信息主要傳遞内容，使用戶在一定的時間上能一目了然。

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

六、總結

本文講述了在哪些場景下彈窗如何使用，以及我們在設計彈窗的時候需要注意哪些細節，考慮綜合結合自身的情況下選擇最合适用戶的彈窗。

本文由 @汪仔9619 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部