作者對彈窗的基本樣式進行了分析梳理，并總結(jié)了使用上需要注意的要點，與大家分享。

在設(shè)計Dialog彈窗時，我們大多時候直接拖控件，直接提交一個基礎(chǔ)的規(guī)范給前端，甚至只是給幾個彈窗樣式給他們，導(dǎo)致上線后出現(xiàn)不統(tǒng)一、使用混淆等情況。

盡管我們常說要把重心放到重要的界面中，彈窗這些小問題不用在意，但是如果我們通過學(xué)習(xí)整理，能提前規(guī)避這些問題，何樂不為呢？

本篇文章就和大家分享了彈窗的基本樣式和使用注意要點，讓我們可以在實際設(shè)計時少走彎路。

目錄：

1. 什么是Dialog彈窗
2. 彈窗的基本樣式
3. 彈窗的使用場景

一、什么是Dialog彈窗

Dialog彈窗在iOS中也叫Alert，屬于模態(tài)彈窗的一種，使用時會打斷用戶的操作行為，用戶必須對其進行操作才能解散彈窗，否則不能進行其他操作。

二、Dialog彈窗的基本樣式

彈窗一般由信息區(qū)和操作區(qū)組成，根據(jù)展示內(nèi)容可分為：純文本、帶圖片、帶輸入、純圖片四種。

1. 純文本：多用于以傳遞信息為主的場景中，其優(yōu)勢是信息傳遞快、設(shè)計成本低。
2. 帶輸入：多用于信息提交類彈窗，其優(yōu)勢是可以快速錄入信息，不用跳轉(zhuǎn)新頁面。
3. 帶圖片：多用于以引導(dǎo)用戶操作的場景中，其優(yōu)勢是氛圍強，避免引起用戶反感。
4. 純圖片：純圖片在系統(tǒng)操作中較少出現(xiàn)，多用于平臺運營推廣中，其優(yōu)勢是造型新穎，活動感強，能刺激用戶操作。

三、Dialog彈窗應(yīng)用場景

Dialog彈窗使用場景較多，在使用時也比較容易混淆，下面我整理了APP中10大常見的應(yīng)用場景，一起來看看它們適合采用哪種彈窗樣式吧。

1. 提示&通知

提示&通知可以看成路邊的一個告示牌，一些告示牌告訴我們前方有危險要注意，一些告示只是單純提示前方有什么景點，因此在設(shè)計時采用的方式也不太一樣，如下圖。

當告知前方有危險，這時候就需要以信息傳遞為主，建議采用純文本的樣式，比如陌陌進入聊天室彈窗；

當只是單純提示，這時候就需要以營造氛圍為主，建議采用帶圖片的樣式，比如蘇寧易購活動結(jié)束的提示。

注意：提示或通知的按鈕一般用“我知道了”來解散按鈕。

2. 規(guī)則說明

規(guī)則說明的應(yīng)用場景有兩種，一種是產(chǎn)品中的規(guī)則說明，一種是抽獎、積分兌換、打卡等活動中，如下圖：

當彈窗應(yīng)用在產(chǎn)品中的規(guī)則說明時，這時候主要以傳遞信息為主，因此建議采用純文本樣式，比如閑魚擔保交易說明。

當彈窗應(yīng)用在抽獎、積分兌換等活動時，這時候需要以豐富活動氣氛為主，建議采用帶圖片樣式，比如考拉公園的積分指數(shù)說明。

3. 版本更新

當APP有新版本上線時，一般會以彈窗的形式提醒用戶升級，設(shè)計時可考慮兩種情況，一種是常規(guī)更新，一種是主功能更新，如下圖：

當應(yīng)用為常規(guī)更新時，可采用常規(guī)帶圖片的方式，比如愛奇藝票務(wù)。

當應(yīng)用為主功能更新時，可采用走馬燈的形式，分步介紹功能，讓忙碌的用戶放緩步伐，耐心去了解功能，在確定是否更新，比如高德地圖。

4. 用戶協(xié)議

由于用戶協(xié)議往往是以傳遞內(nèi)容為主，因此設(shè)計時建議采用純文本的樣式進行設(shè)計，如下圖：

注意:由于協(xié)議內(nèi)容較多，設(shè)計時大家要考慮彈窗的適配，確定好彈窗的寬高，如下圖：

寬度一般建議和系統(tǒng)彈窗保持一致，比如我的彈窗尺寸均是按照iOS的規(guī)范進行設(shè)計的，寬度為540px(2倍圖)。高度就根據(jù)實際內(nèi)容的多少進行設(shè)置，不過這里最好設(shè)置一個最大值，以保證iPhone5中能正常顯示，這里我設(shè)置為800px(該尺寸彈窗比例比較協(xié)調(diào))。

5. 授權(quán)彈窗

剛下載APP時系統(tǒng)都會提示開啟通知、相機、定位等授權(quán)功能，為了最大程度的提高權(quán)限開啟率，建議將所有需要授權(quán)的內(nèi)容都合并到一個彈窗中，供用戶選擇，如下圖：

如果應(yīng)用為工具類的應(yīng)用，那么授權(quán)彈窗可以用純文本+權(quán)限選擇的方式，如左圖。

如果應(yīng)用針對的娛樂類，那么授權(quán)彈窗建議用帶圖片+權(quán)限選擇的方式，如右圖：

注意：授權(quán)彈窗在設(shè)計時盡量避免一個授權(quán)一個彈窗，這樣很容易引起用戶反感，權(quán)限開啟率也低。

6. 系統(tǒng)評分

系統(tǒng)評分主要是引導(dǎo)用戶去App Store評分，因此建議都采用帶圖片的設(shè)計方式，不過要注意按鈕的設(shè)計上，如下圖：

從上圖可以看到按鈕設(shè)計分為：1個按鈕、2個按鈕、3個按鈕的情況。

• 1個按鈕：直接引導(dǎo)用戶去評分，將建議或吐槽用小字進行設(shè)計，同時取消設(shè)計在右上角的關(guān)閉按鈕上，加大用戶操作，這是一種常見的設(shè)計方式，比如知乎。
• 2個按鈕：評分和吐槽，取消為點擊屏幕任意部分，這是一種比較粗暴的方式，因為不管是評分還是吐槽，都是引導(dǎo)到App Store中去，容易引起用戶反感，不推薦這種方式，比如金貓管家。
• 3個按鈕：其按鈕順序一般為主要操作、次要操作、輔助操作，比如有范，這是目前比較推薦的設(shè)計方式。

7. 操作反饋

操作反饋一般出現(xiàn)在編輯、刪除、提交等表單操作過程中，根據(jù)操作環(huán)境不同一般可以分為兩類：警示類、反饋狀態(tài)類，如下圖：

警示類：一般以快速的傳遞信息為主，使用時多用純文字彈窗樣式，比如途家民宿。

反饋狀態(tài)類：一般以情感傳遞為主，因此多采用帶圖片、純圖片的設(shè)計方式，比如ofo、有道樂讀。

8. 信息提交

當APP中一些信息填寫不適合跳轉(zhuǎn)到新頁面時，會采用輸入彈窗的形式來設(shè)計，減少界面跳轉(zhuǎn)，如下圖：

注意：信息提交類彈窗在設(shè)計時盡量少填寫、多選擇，因為填寫的時候會調(diào)出輸入鍵盤，會對彈窗進行遮擋，影響操作，如下圖：

因此當彈窗輸入內(nèi)容較多時不推薦使用該方式，關(guān)于信息提交類彈窗的設(shè)計，可看我之前寫的《如何提高信息提交類彈窗的操作效率》這篇文章。

9. 功能引導(dǎo)

主要指通過彈窗引導(dǎo)用戶去實名認證、完善資料、打卡、綁定手機等，一般建議采用帶圖片的方式，其設(shè)計重點在內(nèi)容上的設(shè)計。

內(nèi)容設(shè)計形式比較多，比如糗事百科直接文字表明是配合國家要求綁定手機，不然不能發(fā)言。

小時光給寶媽介紹寶寶的成長情況，讓我點亮元氣滿滿的一天，這么正能量一定要點。

騰訊doki直接將明星說的話放出，相比圖片來說更有影響力，這種方式你更想為他打榜吧。

當然，功能引導(dǎo)還有更多其他的方式，比如放出優(yōu)惠券、福利等，這里就不細說了。

10. 運營廣告

運營彈窗的設(shè)計一般都采用純圖片的方式，不過根據(jù)應(yīng)用場景不同，表現(xiàn)手法上有所差異，如下圖：

運營彈窗的設(shè)計表現(xiàn)手法不限，可以是扁平、線條、2.5D等風(fēng)格，造型上也可以是中規(guī)中矩的矩形，也可以是充滿變化的異形等，設(shè)計時可根據(jù)具體的活動類型選擇適合的表現(xiàn)手法。

劃重點

下面根據(jù)彈窗的樣式分別和大家整理下，彈窗的應(yīng)用場景，如下圖：

1. 純文本：多用于提示&通知中的危險類、規(guī)則說明、用戶協(xié)議、授權(quán)彈窗、操作反饋等需要強提醒用戶的場景。其優(yōu)勢是信息傳遞快、設(shè)計成本低。
2. 帶輸入：多用于信息提交類彈窗，其優(yōu)勢是可以快速錄入信息，不用跳轉(zhuǎn)新頁面。
3. 帶圖片：多用于產(chǎn)品中需要情感化表達的一些場景。比如：提示&通知單純提示類、活動規(guī)則說明、版本更新、授權(quán)彈窗、系統(tǒng)評分、操作反饋類、功能引導(dǎo)等。
4. 純圖片：純圖片在系統(tǒng)操作中較少出現(xiàn)，多用于平臺運營推廣中，比如活動引導(dǎo)彈窗、廣告彈窗等。

作者：風(fēng)箏KK，《UI那些事兒》作者；公眾號：海鹽社

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

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