超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式｜北京藍(lán)藍(lán)UI設(shè)計(jì)公司

2023-11-16 周周

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

一、組件介紹

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

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

在過(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)行交互。

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

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

這就是我之前說(shuō)的，隨著新時(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)提示。

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

相對(duì)來(lái)說(shuō)運(yùn)營(yíng)彈窗會(huì)比普通的警告承載更多的設(shè)計(jì)元素，會(huì)大幅度強(qiáng)化視覺的比重，但在交互上是跟警告沒(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)屏幕的底部，這么做的很少見，但的確有，例如抖音的青少年模式彈窗 (這是彈窗，不是活動(dòng)視圖，需要加以區(qū)分)。

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

2. 警告的三段式主體

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

①標(biāo)題的布局

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

②描述的布局

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

③交互按鈕的布局

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

⑤額外內(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)程。

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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)用戶操作意見。

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式

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

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

UI必看！幫你快速掌握彈窗組件的設(shè)計(jì)方式