彈窗設計原則

編輯導語:我們在操作某個頁面時,有時會彈出一條資訊框,這就是彈窗。它的作用是什麼呢?又有哪些型別?一起來看一下吧。

彈窗設計原則

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

彈窗的定義:就是使用者與產品之間進行操作互動的視窗,核心價值在於對重點資訊的一個傳達與反饋(傳達資訊+狀態反饋+引導操作),那麼它的作用是什麼呢?它通常可以被用來進行營銷活動,功能告知,以及版本升級等。

一、彈窗型別分類

彈窗設計原則

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 協議。

頂部