編輯導(dǎo)語(yǔ)：我們平常在使用各類APP時(shí)，經(jīng)常會(huì)遇到彈窗，彈窗的設(shè)計(jì)好與壞很大的影響了用戶的體驗(yàn)，讓用戶感到不舒服的彈窗只會(huì)讓你的后續(xù)收到更多的麻煩和反饋，本文作者分享這份「彈窗設(shè)計(jì)規(guī)范」大全，教你怎么提升用戶體驗(yàn)，我們一起來(lái)看一下。

今天來(lái)聊一聊彈窗，在17年的時(shí)候就對(duì)彈窗做過(guò)類別的解釋說(shuō)明，感興趣的可以去了解模態(tài)與非模態(tài)彈窗的區(qū)別：

那么彈窗的規(guī)范化設(shè)計(jì)是什么呢？

最近有來(lái)自小伙伴的求解，針對(duì)產(chǎn)品的彈窗該如何優(yōu)化？所以來(lái)剖析下彈窗設(shè)計(jì)的規(guī)范，讓你避開那些坑做出更好的彈窗。

彈窗是什么？

彈窗是為了讓用戶回應(yīng)，需要用戶與之交互的窗口。

存在于應(yīng)用的多種場(chǎng)景中，需要用到不同的彈窗類型，滿足跟用戶交流的信息傳達(dá)與操作。

彈窗在產(chǎn)品中的地位相當(dāng)于一個(gè)小助手，在用戶迷茫的時(shí)候，告訴用戶如何做（引導(dǎo)）；在用戶與產(chǎn)品進(jìn)行交互操作時(shí)，告訴用戶接下來(lái)會(huì)發(fā)生什么（提示）；甚至在用戶沉浸在體驗(yàn)中的時(shí)候，輕微告知用戶需要知道的信息（傳達(dá)）。

1. 彈窗類型

感興趣去了解下那篇文章，這里就簡(jiǎn)單說(shuō)下有幾種常用彈窗類型：

優(yōu)秀的彈窗具備什么條件

1. 視覺設(shè)計(jì)

簡(jiǎn)潔

彈窗其實(shí)是一種干擾的信息提示，這時(shí)候考慮用戶可能正沉浸在產(chǎn)品體驗(yàn)中，如果被強(qiáng)行打斷，那么也要告訴用戶WHY？

就像此前iOS 13系統(tǒng)，低電量提醒彈窗的出現(xiàn)，可能用戶正在手機(jī)游戲過(guò)程中，這時(shí)候能夠快速了解發(fā)生了什么，才能做出操作。

易懂

正如可用性原則中說(shuō)的一樣，當(dāng)用戶看到一個(gè)頁(yè)面，應(yīng)該一目了然知道它是什么意思的。

特別是標(biāo)題與內(nèi)容、按鈕文案，需要統(tǒng)一或者需要區(qū)分的地方，一定要清晰，如果需要引導(dǎo)用戶操作，可以在按鈕設(shè)計(jì)上做文章。

快速

快速響應(yīng)，是一個(gè)彈窗的基本素養(yǎng)。什么是快速響應(yīng)呢？

特別是在網(wǎng)絡(luò)狀況不好的情況下，更應(yīng)該給予用戶反饋的狀態(tài)。比如用戶操作了一個(gè)需要付費(fèi)或者消費(fèi)的行為，那么這時(shí)候需要告知用戶當(dāng)前的狀況，如果等你網(wǎng)絡(luò)好了再告訴用戶發(fā)生了什么，用戶早已經(jīng)被嚇跑。

2. 交互要求

可識(shí)別

文案與顯示圖片需清晰，按鈕間的字體顏色需讓用戶了解按鈕的作用與說(shuō)明，采取對(duì)比色進(jìn)行區(qū)分。特別是按鈕文案的配色，盡量在突出信息的情況下，也讓用戶清晰文字信息。

可操作

對(duì)話彈窗是需要操作的，首先一定存在可關(guān)閉操作，其次就是直接操作；對(duì)于用戶來(lái)說(shuō)，需要怎樣的操作，取決于TA自己的選擇，想不想要確定還是取消，是用戶的主動(dòng)行為。

可控制

在既定場(chǎng)景里，如果與場(chǎng)景有關(guān)的信息提示，那么不應(yīng)該進(jìn)行頁(yè)面跳轉(zhuǎn)或者覆蓋掉用戶的操作當(dāng)前界面，否則容易造成視覺影響甚至產(chǎn)生歧義。

3. 加分/進(jìn)階：彈性運(yùn)動(dòng)

為什么用彈性運(yùn)動(dòng)？

彈性運(yùn)動(dòng)對(duì)比常規(guī)的運(yùn)動(dòng)讓人感知更加真實(shí)、流暢、自然，能彌補(bǔ)屬性動(dòng)畫帶來(lái)的機(jī)械感給人的不友好體驗(yàn)。

最優(yōu)秀的例子就是iOS的系統(tǒng)動(dòng)畫了，除了iOS本身系統(tǒng)出色，也有是UI動(dòng)畫做得非常細(xì)膩。

彈性動(dòng)畫類型

常用的有Spring、Ease in 、Ease out、Linear和Ease both，具體數(shù)值可以自行進(jìn)行調(diào)整（這部分內(nèi)容要按實(shí)際需求來(lái)增減，效果不可以過(guò)多，控制在適當(dāng)?shù)亩龋敿?xì)的說(shuō)明看后續(xù)的文章）。

彈窗的設(shè)計(jì)規(guī)范

1. 模態(tài)（對(duì)話框）彈窗

一個(gè)模態(tài)（對(duì)話框）彈窗基本由「四部分」組成，包含標(biāo)題、內(nèi)容、操作按鈕、蒙層，部分類型彈窗的樣式與內(nèi)容會(huì)有所不同，但是所包含元素必然有「內(nèi)容」。

如果對(duì)彈窗使用情況不是很理解的話，接著看下去，四大部分該如何使用。

標(biāo)題

標(biāo)題一般在彈窗框架的頂部，用于明確提示內(nèi)容的主題與中心，讓用戶快速了解這是怎樣的信息，精簡(jiǎn)為主，切忌采用長(zhǎng)文案。

個(gè)人建議控制在7字以內(nèi)，根據(jù)「2±7法則」，過(guò)多的文字會(huì)造成短期識(shí)別與記憶壓力，所以盡量控制（能用“超流量提醒”，就不要用“檢測(cè)到您的流量已經(jīng)超額”這樣的話）。

注：如果內(nèi)容文案簡(jiǎn)單，只有一小段話，那么可以省略標(biāo)題，避免造成重復(fù)信息的干擾。

內(nèi)容

內(nèi)容一般是說(shuō)明性文字，用來(lái)告知用戶主要信息，也是補(bǔ)充標(biāo)題描述信息。作用既然是告知信息，引導(dǎo)信息，那么就不能夠太過(guò)復(fù)雜，表述簡(jiǎn)潔清晰。

如果遇到長(zhǎng)文案時(shí)，適當(dāng)進(jìn)行分行，適當(dāng)進(jìn)行頁(yè)面可滑動(dòng)操作（內(nèi)容盡量刪減，字?jǐn)?shù)應(yīng)在“5-30字”內(nèi)最佳，長(zhǎng)文案支持上下滑動(dòng)，避免適配問題）。

注：盡量避免句號(hào)“。”和感嘆號(hào)“！”，容易給用戶強(qiáng)硬的語(yǔ)氣壓力；還有這類彈窗盡量少用，內(nèi)容過(guò)多可考慮新頁(yè)面。

操作

操作一般是指對(duì)對(duì)話彈窗的交互操作，一般有“確定”、“取消”、“關(guān)閉”等。

作用是讓用戶擁有控制權(quán)，也是可用性原則中重要的一點(diǎn)（按鈕一般可以進(jìn)行顏色區(qū)分，以側(cè)重需要突出的信息，也有提示類彈窗，那么也存在單按鈕情況）。

注：

• 按鈕文案不宜過(guò)長(zhǎng)，注意操作人群的使用習(xí)慣進(jìn)行左右分布；
• 選擇類信息一定要提供關(guān)閉按鈕，應(yīng)用的強(qiáng)制更新除外；
• 不可逆操作應(yīng)進(jìn)行顏色區(qū)分，提醒用戶將進(jìn)行重要選擇。

蒙層

蒙層是指對(duì)話彈窗后面的黑色的遮罩層，一般是帶有透明度的，作用是為了讓用戶更好區(qū)分對(duì)話彈窗與原本界面（透明度可根據(jù)產(chǎn)品特性調(diào)整，也可以根據(jù)實(shí)際情況去除）。

2. 其他彈窗

升級(jí)/警告彈窗

用于提示與警告用，常用于升級(jí)、警告、內(nèi)測(cè)公告等內(nèi)容。

此類彈窗必備的內(nèi)容也是4要素，特別注意進(jìn)行操作按鈕區(qū)分。

活動(dòng)類彈窗

用戶告訴用戶特殊的信息、活動(dòng)的信息，一般以好看的元素搭配吸引用戶點(diǎn)擊。

此類彈窗比較特殊，特別注意需要保留關(guān)閉按鈕，不可隱藏。

3. 非模態(tài)（提示框）彈窗

提示類的彈窗，一般也是Toast和Snackbar，主要是輕量信息的反饋，既不影響用戶的當(dāng)前操作與當(dāng)前視覺，也不去要求用戶需要進(jìn)行交互，在呈現(xiàn)一定時(shí)間后消失（一般不超過(guò)5-7s），一般置于界面的最頂層。

反饋圖標(biāo)

反饋圖標(biāo)一般包括幾種狀態(tài)，成功、失敗、異常等；圖形元素更能夠吸引視覺焦點(diǎn)，比文字更生動(dòng)形象，一般2s內(nèi)很難抓住用戶焦點(diǎn)，所以圖標(biāo)效果更佳（非必要，根據(jù)產(chǎn)品特性選擇是否需要圖標(biāo)）。

反饋文案

文案一般非常簡(jiǎn)短，在有限的時(shí)間內(nèi)盡量清晰，讓用戶快速知道發(fā)生了什么（不可超過(guò)兩行）。

框背景

一般是為了在界面上層讓信息更加清晰，在復(fù)雜的界面中，如果此提示不加框的話，容易被其他元素所影響，造成了視覺干擾。

總結(jié)

無(wú)論是怎樣的設(shè)計(jì)，都是一個(gè)持續(xù)優(yōu)化的過(guò)程，除了針對(duì)現(xiàn)狀問題進(jìn)行修復(fù)優(yōu)化，還要時(shí)刻了解互聯(lián)網(wǎng)市場(chǎng)的發(fā)展趨勢(shì)，不斷變更以適應(yīng)互聯(lián)網(wǎng)時(shí)代的產(chǎn)品特性。

當(dāng)產(chǎn)品前期沒有進(jìn)行好好思考與打磨，那么在使用的過(guò)程中會(huì)暴露越來(lái)越多的問題，基于最基本的設(shè)計(jì)規(guī)范，進(jìn)行優(yōu)化更新——這是所有產(chǎn)品從業(yè)者、設(shè)計(jì)師，甚至開發(fā)者的共同目標(biāo)。

在現(xiàn)在還是會(huì)聽到一些互聯(lián)網(wǎng)公司的聲音“體驗(yàn)沒關(guān)系，能用就行”。

在市場(chǎng)競(jìng)爭(zhēng)日益激烈的環(huán)境下，很多產(chǎn)品勝利在于它優(yōu)秀的體驗(yàn)維度，身為產(chǎn)品設(shè)計(jì)者還有用戶的我們，更要明白體驗(yàn)是維持產(chǎn)品不斷發(fā)展的調(diào)和劑。