彈窗這類組件已經(jīng)十分常見(jiàn)，那么，這類組件應(yīng)該怎么設(shè)計(jì)？這篇文章里，作者針對(duì)彈窗的設(shè)計(jì)方式做了詳細(xì)拆解，一起來(lái)看看，或許會(huì)對(duì)想了解C端界面組件的同學(xué)有所幫助。

一、組件介紹

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

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

這里需要專門(mén)解釋一下模態(tài)（Modal），模態(tài)是指一種會(huì)打斷用戶原本的任務(wù)流，并強(qiáng)制用戶完成當(dāng)前交互的控件場(chǎng)景。

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

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

二、使用場(chǎng)景

彈窗有兩種主要的使用場(chǎng)景。

1. 警告 Alert / 對(duì)話框 Dialog

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

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

2. 運(yùn)營(yíng)彈窗

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

相對(duì)來(lái)說(shuō)運(yùn)營(yíng)彈窗會(huì)比普通的警告承載更多的設(shè)計(jì)元素，會(huì)大幅度強(qiáng)化視覺(jué)的比重，但在交互上是跟警告沒(méi)有太多區(qū)別的——模態(tài)加簡(jiǎn)單的交互依然是運(yùn)營(yíng)彈窗主要的交互特征。

三、設(shè)計(jì)要點(diǎn)

1. 彈窗的位置

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

2. 警告的三段式主體

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

1）標(biāo)題的布局

在設(shè)計(jì)實(shí)踐中，標(biāo)題的對(duì)齊可以居中或者居左。一般來(lái)說(shuō)，在 iOS 中警告的標(biāo)題默認(rèn)居中，在 Android 中對(duì)話框的標(biāo)題默認(rèn)居左。

2）描述的布局

描述的布局大體上應(yīng)與標(biāo)題的布局保持一致，標(biāo)題是如何對(duì)齊的，描述就如何對(duì)齊。

3）交互按鈕的布局

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

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

4）交互按鈕的權(quán)重

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

5）額外內(nèi)容

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

3. 警告的文案設(shè)計(jì)

在警告彈窗的設(shè)計(jì)中，因?yàn)樗膹?qiáng)功能性，這三段的文案要求要大于設(shè)計(jì)要求，盡管文案幾乎不歸我們?cè)O(shè)計(jì)師管，但是我在這里還是提一下這幾個(gè)部分的文案要求。

標(biāo)題——盡可能簡(jiǎn)練得總結(jié)當(dāng)前所處的情況；如需額外操作，詢問(wèn)用戶操作意見(jiàn)。

如果描述本身非常的長(zhǎng)，那么就一定要加標(biāo)題去凝練當(dāng)前的事件，包括目前遇到的情況，以及可能的解決方案并詢問(wèn)用戶的意見(jiàn)。

描述——盡可能用直接、人性化的口吻說(shuō)出目前遇到的問(wèn)題。

如果 App 是面向大眾用戶的，盡量避免用理工科思維寫(xiě)出一些很繞且生澀的描述，尤其是如果中間還有程序語(yǔ)言那會(huì)更糟。這一點(diǎn) windows 做的就非常不足，充滿了理工科的自說(shuō)自話的氣息，也不管用戶到底看不看得懂。

按鈕——給出對(duì)結(jié)果的描述，避免要求語(yǔ)義邏輯判斷。

按鈕的文案最好是對(duì)結(jié)果的直接描述，按鈕上說(shuō)的是什么，結(jié)果就會(huì)是什么，而不要讓用戶做語(yǔ)文題，否定之否定等于肯定這樣的情況避免出現(xiàn)——除非是故意的。例如“是否刪除XXXX”，正確的按鈕文案應(yīng)當(dāng)是“刪除”和“保留”，而非“是”和“否”。

4. 運(yùn)營(yíng)彈窗的三段式主體

盡管運(yùn)營(yíng)彈窗的布局可能眼花繚亂，但是它依然大致符合模態(tài)彈窗的三段式：標(biāo)題、描述和交互按鈕。只不過(guò)運(yùn)營(yíng)彈窗的各個(gè)部分會(huì)輔以視覺(jué)元素表達(dá)。

此外，最重要的一點(diǎn)是，運(yùn)營(yíng)彈窗一定不能缺少「關(guān)閉」按鈕，雖然這個(gè)按鈕通常會(huì)浮在彈窗主體之外，是大是小全看想不想讓用戶輕易點(diǎn)到，但它不可或缺，否則用戶不知道如何退出這個(gè)彈窗。

5. 運(yùn)營(yíng)彈窗視覺(jué)元素的類型

隨著各類型 App 運(yùn)營(yíng)要求的逐漸提升，運(yùn)營(yíng)彈窗中視覺(jué)元素的運(yùn)用也越發(fā)頻繁且有往愈加浮夸的方向發(fā)展的苗頭?？梢栽谶\(yùn)營(yíng)彈窗中使用的視覺(jué)元素大致有以下幾種：

1）圖標(biāo)

最基礎(chǔ)的視覺(jué)元素，還是以常用的矩形為基底，但會(huì)輔以契合內(nèi)容的圖標(biāo)，其形式更加類似于警告。

2）插畫(huà)

現(xiàn)在最常見(jiàn)的花哨形式，插畫(huà)風(fēng)格的多變性決定了它會(huì)在運(yùn)營(yíng)內(nèi)容中大放異彩，甚至可以拋棄矩形邊界，完全以插畫(huà)內(nèi)容為主體。

3）3D / 仿3D

隨著 3D 更多地進(jìn)入 UI 領(lǐng)域，運(yùn)營(yíng)彈窗也逐漸開(kāi)始使用 3D 元素，或者仿 3D 的元素。

4）圖片/視頻

圖片和視頻多用在品牌營(yíng)銷(xiāo)的廣告中，不管是人還是物，都可以直接在彈窗中置入品牌的廣告物料圖或視頻。

四、樣式拓展

這里收集了一些彈窗的案例，也可以作為設(shè)計(jì)時(shí)的參考：

作者：酸梅干超人；公眾號(hào)：超人的電話亭（ID：Superman_Call）

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

題圖來(lái)自Unsplash ，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。