中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

一、彈窗類型分類

1. 模態(tài)彈窗

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

1）對話框

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

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

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

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

2）動作面板

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

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

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

3）浮層彈窗

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

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

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

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

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

1）提示框（Toast/hud）

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

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

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

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

2）底部彈窗（snackbar）

底部彈窗又被稱作為snackbar。

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

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

二、彈窗設計風格

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

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

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

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

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

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

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

1）是否急迫

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

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

2）具體情境

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

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

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

3）生效方式

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

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

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

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

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

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

三、彈窗的核心價值

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

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

四、彈窗的設計時需要注意的細節(jié)

1）容器

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

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

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

2）標題

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

3）關閉方式

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

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

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

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

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

5）操作按鈕排布

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

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

五、彈窗的設計體驗角度

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

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

六、總結

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

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

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