一、組件介紹

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

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

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

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

在過去的交互實(shí)踐中，模態(tài)是一種強(qiáng)制打斷用戶的場(chǎng)景，所以除非是優(yōu)先級(jí)非常高的或緊急的情況，否則都會(huì)建議謹(jǐn)慎使用模態(tài)。不過這種謹(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)行的一種彈出式控件。在用戶完成該事件的處理之前，無法與別的控件進(jìn)行交互。

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

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

這就是我之前說的，隨著新時(shí)代互聯(lián)網(wǎng)的深入發(fā)展，運(yùn)營(yíng)需求開始覆蓋并刷新系統(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)求開啟通知權(quán)限等偏功能的運(yùn)營(yíng)提示。

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

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

1. 彈窗的位置

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

2. 警告的三段式主體

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

①標(biāo)題的布局

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

②描述的布局

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

③交互按鈕的布局

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

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

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

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

⑤額外內(nèi)容

除了以上標(biāo)準(zhǔn)的三段式區(qū)域之外，警告彈窗內(nèi)還可以加入其它一些額外的內(nèi)容。描述區(qū)域可以依據(jù)情況增加額外的控件或設(shè)計(jì)元素，例如最常見的對(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)前所處的情況；如需額外操作，詢問用戶操作意見。

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

描述——盡可能用直接、人性化的口吻說出目前遇到的問題。

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

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

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

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

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

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

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

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

①圖標(biāo)

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

②插畫

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

③3D / 仿 3D

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

④圖片/視頻

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

四、樣式拓展

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

文章來源：優(yōu)設(shè)網(wǎng)    作者：酸梅干超人

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。