彈窗設計方式詳解

2023-11-17 博博

一、組件介紹

彈窗是一種瞬態(tài)的交互式視圖，它會在“合適”的時間彈出到頁面的最頂層，并借由用戶的一次點擊完成關閉。

在我們習慣的語境中，彈窗僅指模態(tài)彈窗，故這里不討論那些看上去也是彈出式卻非模態(tài)彈窗，那些控件均有自己專門的分類，例如 Toast（吐司提示）。

這里需要專門解釋一下模態(tài)（Modal），模態(tài)是指一種會打斷用戶原本的任務流，并強制用戶完成當前交互的控件場景。

通常情況下會出現(xiàn)一層遮罩，將原頁面和需要交互的控件隔離開來，在用戶完成交互或點擊關閉該控件之前，無法在原來的頁面上繼續(xù)流程。例如典型的模態(tài)控件有：警告、抽屜、活動視圖、動作表單等等。

在過去的交互實踐中，模態(tài)是一種強制打斷用戶的場景，所以除非是優(yōu)先級非常高的或緊急的情況，否則都會建議謹慎使用模態(tài)。不過這種謹慎的態(tài)度在如今的設計實踐中已經(jīng)漸漸出現(xiàn)了一些變化。

二、使用場景

彈窗有兩種主要的使用場景。

1. 警告 Alert / 對話框 Dialog

兩者是同一功能的控件，在 iOS 中稱為 Alert，也就是警告，在 Android 中被稱為 Dialog，也就是對話框。這是模態(tài)彈窗最傳統(tǒng)的用法，它通常是對系統(tǒng)層優(yōu)先級最高的、最實時需要用戶做判斷或操作的事件進行的一種彈出式控件。在用戶完成該事件的處理之前，無法與別的控件進行交互。

在之后的行文中，我都會以警告來統(tǒng)稱警告和對話框。

2. 運營彈窗

這就是我之前說的，隨著新時代互聯(lián)網(wǎng)的深入發(fā)展，運營需求開始覆蓋并刷新系統(tǒng)各個控件原本的設計意圖，運營彈窗就此應運而生。但運營彈窗并非只能是廣告、抽獎、優(yōu)惠券之類的活動內(nèi)容，也可以是 App 內(nèi)測邀請、升級提醒、請求開啟通知權限等偏功能的運營提示。

相對來說運營彈窗會比普通的警告承載更多的設計元素，會大幅度強化視覺的比重，但在交互上是跟警告沒有太多區(qū)別的——模態(tài)加簡單的交互依然是運營彈窗主要的交互特征。

三、設計要點

1. 彈窗的位置

在普遍的概念中模態(tài)彈窗好像都是出現(xiàn)在屏幕正中心，但其實不是這樣，模態(tài)彈窗還可以出現(xiàn)屏幕的底部，這么做的很少見，但的確有，例如抖音的青少年模式彈窗（這是彈窗，不是活動視圖，需要加以區(qū)分）。

2. 警告的三段式主體

在大多數(shù)情況下，警告彈窗都包含三部分主體，從上至下分別是：標題區(qū)、描述區(qū)和交互區(qū)。這三部分是警告彈窗的基本骨架，想要做更深一步的精細設計，也是在這三個部分的基礎之上。

1）標題的布局

在設計實踐中，標題的對齊可以居中或者居左。一般來說，在 iOS 中警告的標題默認居中，在 Android 中對話框的標題默認居左。

2）描述的布局

描述的布局大體上應與標題的布局保持一致，標題是如何對齊的，描述就如何對齊。

3）交互按鈕的布局

交互按鈕如果少于或等于兩個，那么優(yōu)先使用水平排版，在此情況下還可以進一步選擇均分或者偏置，由于拇指的活動范圍有限，一般偏置在右側。

另一種垂直排版則適合任何數(shù)量的按鈕——盡管 iOS 規(guī)范要求交互按鈕的數(shù)量不超過三個，但實際情況卻依然需要具體問題具體分析，存在更多按鈕也是可能的。

4）交互按鈕的權重

通常我們還能看到 App 設計者會對不同的交互操作給予不同的傾向，這種傾向有時是功能需求，有時是運營需要，會讓傾向的按鈕更突出，會讓反傾向的按鈕更不易察覺（甚至置灰），會讓危險的按鈕呈現(xiàn)紅色。

5）額外內(nèi)容

除了以上標準的三段式區(qū)域之外，警告彈窗內(nèi)還可以加入其它一些額外的內(nèi)容。描述區(qū)域可以依據(jù)情況增加額外的控件或設計元素，例如最常見的對話框，可以允許用戶輸入文本后再進行下一步操作；標題區(qū)域之上也可以增加一個圖標區(qū)，圖標可以更直觀提示該警告事件需求的操作、完成狀態(tài)或進程。