一、組件介紹

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

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

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

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

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

二、使用場景

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

1. 警告 Alert / 對話框 Dialog

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

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

2. 運(yùn)營彈窗

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

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

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

1. 彈窗的位置

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

2. 警告的三段式主體

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

①標(biāo)題的布局

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

②描述的布局

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

③交互按鈕的布局

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

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

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

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

⑤額外內(nèi)容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①圖標(biāo)

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

②插畫

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

③3D / 仿 3D

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

④圖片/視頻

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

四、樣式拓展

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

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

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

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

 

藍(lán)藍(lán)設(shè)計(jì)(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ā)。