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

今天來聊一聊彈窗，在17年的時(shí)候就對(duì)彈窗做過類別的解釋說明，感興趣的可以去《淺析APP控件：模態(tài)彈窗與非模態(tài)彈窗》了解模態(tài)與非模態(tài)彈窗的區(qū)別，那么彈窗的規(guī)范化設(shè)計(jì)是什么呢？

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

一、彈窗是什么？

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

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

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

1. 彈窗類型

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

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

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

1）簡潔

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

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

2）易懂

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

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

3）快速

快速響應(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. 交互要求

1）可識(shí)別

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

2）可操作

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

3）可控制

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

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

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

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

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

2）彈性動(dòng)畫類型

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

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

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

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

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

1）標(biāo)題

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

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

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

2）內(nèi)容

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

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

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

3）操作

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

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

注：

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

4）蒙層

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

2. 其他彈窗

1）升級(jí)/警告彈窗

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

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

2）活動(dòng)類彈窗

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

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

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

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

1）反饋圖標(biāo)

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

2）反饋文案

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

3）框背景

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

三、總結(jié)

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

當(dāng)產(chǎn)品前期沒有進(jìn)行好好思考與打磨，那么在使用的過程中會(huì)暴露越來越多的問題，基于最基本的設(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)系，能用就行”。

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

#專欄作家#

JaylonG（微信號(hào)JJ865477301），人人都是產(chǎn)品經(jīng)理專欄作家。一枚擅長用產(chǎn)品思維看問題，用邏輯思維做分析，用情感體驗(yàn)做設(shè)計(jì)的產(chǎn)品愛好者。愛好廣泛，歡迎交流，拒絕水友。

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

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