輯導(dǎo)語：彈窗，不只是“彈出式廣告”，它是一把雙刃劍，用得好能使用戶更加聚焦，用得不好則可能使用戶不快甚至擊退潛在用戶。那么，彈窗要怎么設(shè)計呢？本文作者對彈窗進行了詳細的分析，一起來看一下吧。

說到彈窗，很多人對彈窗的印象還停留在“彈出式廣告”: 網(wǎng)站為了獲利，廣告商為了增加點擊率，那時候的廣告就像槍林彈雨，用戶無處可躲，進而惱羞成怒，甚至想要砸掉電腦。

廣告彈窗曾經(jīng)在2010年被《時代》雜志評為最糟糕的發(fā)明之一。

我們?nèi)缃裨偈煜げ贿^的淘寶曾經(jīng)為在電商領(lǐng)域存活下來，也不得已使用大量的“流氓廣告”，雖然這的確使得用戶惱怒，但是不得不說，淘寶也因此刷臉頻繁而讓大家更熟悉它。

彈窗是一把雙刃劍，用的好確實使用戶更加聚焦，而如果使用的不恰當，可能會使用戶不快甚至擊退潛在用戶。在設(shè)計彈窗時，你有沒有遇到過下面的困惑？

• 該在什么時候選擇用彈窗，什么時候用頁面呢?
• 彈窗的標題怎么起?
• 彈窗疊彈窗最多可以疊幾個?

可以說，彈窗設(shè)計的好不好，可以極大的體現(xiàn)一個設(shè)計師的基本功扎不扎實，別看一個小小的彈窗設(shè)計起來似乎非常容易，但面對不同的用戶場景、業(yè)務(wù)背景，彈窗背后的思考從未停止，今天就讓我們?nèi)轿坏亓私鈴棿啊?/p>

01 彈窗的定義

在正式認識彈窗前，我們不妨設(shè)想以下的場景: 你正在家中做事情，但是這個時候電話鈴響了， 你不得不放下手中的事情去接電話， 但是假如在智能家居環(huán)境中，你可以通過人工智能自動接電話，同時你手中的事情仍然在繼續(xù)中。

如果說把前者比喻成跳轉(zhuǎn)的頁面，那么后者就是彈窗，它能夠在吸引你當下注意力的同時，不離開當前的場景。

目前設(shè)計界對于彈窗的定義多種多樣， 從外觀布局上看，彈窗是頁面上層彈出的容器，容器中承載著文本、按鈕、選項、標簽或表單等組合內(nèi)容；從設(shè)計目的上看，彈窗是用戶與產(chǎn)品間對話的一種方式，是對用戶注意力的一種引導(dǎo)形式，根據(jù)抓取用戶注意力的多少，可具體定義為Dialogue、Actionbar、Popover、Toast、Snackbar等等特定形式。

從廣義上講，彈窗其實并沒有如它的定義那樣框的那么死，有時候彈窗不一定有容器，比如追劇時常見的彈幕，也是一種新型彈窗； 再比方說新手引導(dǎo)，也是一種彈窗。不過，咱們在這里談?wù)摰倪€是狹義上的大家在規(guī)范中所常見的彈窗，那些非典型的彈窗就不在今天討論的范圍之內(nèi)。

02 彈窗的組成

彈窗的基本組成可以拆解為：

• 遮罩
• 彈窗主體(容器、標題、內(nèi)容、動作按鈕)
• 關(guān)閉入口(不必要/模態(tài)彈窗沒有)

1. 遮罩

為了使用戶更聚焦于彈窗，我們會在彈窗容器下方頁面上方加一層遮罩， 通常這種遮罩是半透明黑色，如果遮罩顏色越深，用戶越能夠?qū)Ｗ⒂诋斍绊撁妫?遮罩顏色越淺，用戶的跳出感越小，產(chǎn)品也更親民。

當頁面中出現(xiàn)多個彈窗時，也就意味著多個遮罩層，這個時候遮罩層的顏色該怎么確定呢?

根據(jù)各大規(guī)范，彈窗疊彈窗不建議超過三個，當彈窗大于等于3個時，遮罩的顏色就不再改變。這里再補充一點， 當彈窗數(shù)量過多，一個疊一個，用戶容易迷失放向，這時候可以采用位置錯層的方法。

2. 彈窗主體

彈窗主體可以拆解為標題、內(nèi)容、動作按鈕。

彈窗的標題和內(nèi)容的書寫規(guī)則，在后文中有詳細描述，這里不再贅述。

彈窗的動作按鈕一般不超過3個:

1個按鈕: 那一定是可以關(guān)閉彈窗的操作，比如信息公告類的彈窗的“我知道了”。

2個按鈕:這是最常見的情況。一個是推進任務(wù)進程的動作，一個是取消。

3個按鈕:這種情況比較少見，比如“了解更多”，但這會讓用戶離開彈窗，導(dǎo)致彈窗任務(wù)未完成，所以不推薦使用。 如果有更多內(nèi)容需要向用戶展示，可以內(nèi)嵌一個信息擴展，點擊圖標在彈窗下方展示更多信息，這樣了解更多信息的同時，也不用離開彈窗。

至于彈窗按鈕的位置擺放，有兩種常見的擺放規(guī)則:等分居中擺放和某一側(cè)擺放(右側(cè)居多)，不同平臺有不同的擺法，接下來舉例說明:

1）Material design中右對齊

2）IOS中等分居中擺放

3）在Fiori規(guī)范中，手機端的按鈕是等分居中擺放，但是在電腦端采用右對齊

3. 彈窗的關(guān)閉入口

對于模態(tài)和非模態(tài)的關(guān)閉方式，從根本上說是很不同的。

對于模態(tài)彈窗，它的關(guān)閉方式只有做出選項選擇后彈窗才會消失， 包括“取消”選項。 而非模態(tài)彈窗的關(guān)閉方式就很多了，總結(jié)下來有四種方式:

1)關(guān)閉按鈕(叉叉)

通常是位于右上角，少數(shù)規(guī)范把關(guān)閉按鈕放在左上角，只要保持一致即可。

2)取消按鈕

通常和“確認”或者其他推進任務(wù)完成的動作按鈕放在一起，成對出現(xiàn)。

3)ESC鍵

敲擊ESC鍵，也可以退出非模態(tài)彈窗。 Esc鍵是英文單詞escape的縮寫， 在1960年由IBM的一位程序員創(chuàng)建，它的功能是“撤銷”、“退出”。

盡管如今使用鼠標進行交互的人占絕大多數(shù)，但是出于無障礙設(shè)計(包容性設(shè)計)的需要， 通過鍵盤完成交互是必不可少的，所以ESC按鈕也是必需的。

而且這類快捷鍵上的優(yōu)化能夠大大提升用戶使用效率，減輕用戶的操作成本。

尤其在B端產(chǎn)品中，調(diào)用鍵盤進行操作優(yōu)化，是一個不可忽視的用戶爽點。

4)點擊遮罩區(qū)域

遮罩區(qū)域就是彈窗背后的內(nèi)容區(qū)，通常為了使用戶更聚焦會加上一層暗色遮罩，當用戶點擊遮罩區(qū)域后，非模態(tài)彈窗會自動消失，不過為了避免用戶誤觸，如果彈窗是表單等需要用戶輸入的內(nèi)容時，這些內(nèi)容要自動保存。

對于“取消”和“關(guān)閉”按鈕，這里想要再闡述更清楚一些:先舉個生活中常見的例子，假設(shè)你有一個愛問十萬個為什么的小孩，你正在津津有味地追劇，結(jié)果他跑過來問你問題，他還沒張口呢，你就捂住耳朵不聽不聽，這個呢就相當于彈窗右上角的關(guān)閉按鈕(叉叉)，不過關(guān)閉按鈕僅僅存在于非模態(tài)彈窗中，用戶可以不做任何選擇地關(guān)掉彈窗，而模態(tài)彈窗要求用戶必須做出某種選擇，不給用戶逃避的機會，所以模態(tài)彈窗是沒有關(guān)閉按鈕的。

然后小孩問你是雞生蛋還是蛋生雞，你聽了這個問題也不知道怎么解釋，只能和小孩說，這個問題我也不知道怎么回答，這個就相當于彈窗的“取消”按鈕。

雖然“取消”按鈕和關(guān)閉按鈕(叉叉)最終都會導(dǎo)致彈窗關(guān)閉，但是從邏輯上而言，是不同的。

03 彈窗的類型

1. 模態(tài)&amp；非模態(tài)

彈窗可以分為模態(tài)彈窗和非模態(tài)彈窗兩種類型， 這兩個概念來源于開發(fā)人員的術(shù)語。

當打開一個模態(tài)彈窗后，它所屬頁面的進程被打斷了，必須等用戶處理完畢模態(tài)彈窗后，才能夠回到剛才正在進行的頁面。

舉個例子，你準備刪除一個重要的文件，系統(tǒng)彈出一個彈窗，問你確認要刪除嗎?這個你時候你必須下一個明確的指令，選擇刪除或者不刪除，然后你才可以離開當前界面，我們可以簡單的把模態(tài)彈窗理解為用戶不得不做的選擇。

再來看非模態(tài)彈窗，非模態(tài)彈窗允許用戶在不打斷當前頁面的同時，去處理其他任務(wù)，舉個例子，設(shè)計師們最熟悉不過的PS，你可以同時調(diào)用多個彈窗去更改畫面參數(shù)，因為藝術(shù)創(chuàng)作是一個多線過程，藝術(shù)家可以想到什么參數(shù)就改變什么參數(shù)。

模態(tài)和非模態(tài)只是一個比較概括性的概念，而且不同的規(guī)范里可能對相似的某一類彈窗的稱呼完全不同或者有輕微差異，接下來我分別根據(jù) Microsoft-Fluent UI、Google- Material Design、IOS 規(guī)范中拿出一些比較有代表性的彈窗類型詳細講一講。

2. 典型彈窗

1）Actionsheet

類型:模態(tài)彈窗

參考規(guī)范:IOS Design

簡介:Action sheet一次展示和當前語境相關(guān)的兩個或者更多的動作，非必要不要展示太多的動作選項，以及避免在動作列表中使用滾動條。

關(guān)鍵點:

• 動作按鈕: 把危險性選擇 (如清空、刪除)放在最上面， 把取消按鈕置于底部。
• 避免使用太多動作按鈕讓Action Sheet列表產(chǎn)生滾動條。
• 毀滅性操作需要在視覺上突出。

2）Modal

類型:模態(tài)彈窗

參考規(guī)范:Microsoft-fluent UI

簡介:Modals也是一種模態(tài)彈窗，它需要人們把注意力從當前頁面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動作。和Dialog不同的是， Modal 更適合長文本內(nèi)容，如隱私條款、知情同意書等等，抑或是要求用戶進行較為復(fù)雜的操作行為如更改頁面設(shè)置。

3）Dialog

類型:模態(tài)彈窗

參考規(guī)范:Microsoft-fluent UI

簡介:Dialog是一種模態(tài)彈窗，它需要人們把注意力從當前頁面短暫轉(zhuǎn)移到彈窗上，并且需要用戶的交互動作。它基本被用于較為簡單的場景下，如確認信息、刪除文檔、做出一個選擇。

分類:

• Alert Dialogue: 因為緊急信息、詳情展示或者動作打斷用戶，用戶必須做出一個選擇才能關(guān)掉彈窗。
• Simple Dialogue: 展示會立即生效的列表選項，它不需要動作按鈕。
• Confirmation Dialogue: 需要用戶確認當前選擇，假如用戶反悔了，可以在這一步修改。
• Full-screen Dialogue: 全屏彈窗會充滿整個屏幕，包含需要完成一系列任務(wù)的動作，只適用于手機端。

使用場景:

• 發(fā)生阻止程序運行的錯誤
• 需要向用戶展示完成某個特定任務(wù)的的關(guān)鍵信息， 如決定、聲明
• 需要最高程度地抓取用戶注意力

關(guān)鍵點:

• 在當前強制要求輸入的區(qū)域完成前，保存按鈕處于置灰狀態(tài)。
• 在全屏彈窗上層允許出現(xiàn)一些簡單的彈窗。
• 標題保持簡潔，最多不超過兩行，假如長度不確定或者更長，把它們放在內(nèi)容區(qū)而不是標題區(qū)。
• 盡量減少使用Dialogue，因為它們毫無征兆的出現(xiàn)，會打斷用戶的進程。
• 大多數(shù)彈窗內(nèi)容應(yīng)當盡量避免使用滾動條， 如果非使用不可(如選擇時間日期)，保持標題和底部的動作按鈕區(qū)域固定，遮罩區(qū)域的背景也不動。

4）Drawer

類型:模態(tài)彈窗

參考規(guī)范:Material Design

簡介:Drawer是一種容器， 它的性質(zhì)和生活中的抽屜很像， 通常用來放置和某個特定窗口相關(guān)的一些信息或者選項。默認情況下， Drawer是隱藏的， 它通常是通過一個按鈕或者菜單觸發(fā)， 從父級界面的一側(cè)滑出來，所以它不能夠脫離父級界面而單獨存在。

關(guān)鍵點:避免使用drawer，現(xiàn)在流行的軟件已經(jīng)很少會使用drawer了，而且也不提倡使用。如果你想展示補充性的內(nèi)容的話，不妨嘗試一下panel、popover、sidebars、split views。

5）Popover

類型:模態(tài)、非模態(tài)

參考規(guī)范:IOS Design

簡介:當你輕觸一個區(qū)域時，Popover會短暫的出現(xiàn)在其他內(nèi)容的上層， 通常來說，一個Popover包含一個箭頭，指向它彈出來的位置。當你點擊屏幕中的其他區(qū)域或者Popover上的按鈕時，一個非模態(tài)的popover會取消顯示。而模態(tài)的popover只能通過點擊它上面的cancel或者其他按鈕而取消顯示。

Popover更最適合大屏幕的設(shè)備， 并且可以容納很多元素，包括導(dǎo)航欄、工具欄、tab欄、表格、圖片、地圖、傳統(tǒng)視圖等等。當Popover可見時，在它消失前，當前頁面的其他交互是不能進行的。

關(guān)鍵點:

• 避免在iPhone中使用Popover：一般來說，Popover 會在ipad中使用。在iphone中，通常會通過把信息展示在一個全屏的模態(tài)視圖中來優(yōu)化屏幕空間，而不是使用Popover。
• 使用一個關(guān)閉按鈕來確認。一個關(guān)閉按鈕是值得加上去的，比如“取消”或者“完成”，當然如果空間不擁擠的情況下，還可以加上“保存然后退出”“不保存然后退出”這樣的選項。一般來說，當Popover沒必要再展示的情況下，它應(yīng)當能夠自動退出。在大多數(shù)情況下，當用戶點擊了它區(qū)域之外的范圍或者是對Popover做出某種選擇后，它會關(guān)閉。如果需要在Popover上做出多個選擇時，Popover應(yīng)當一直顯示直到用戶做出明確的關(guān)閉行為。
• 自動關(guān)閉非模態(tài)Popover時，總是自動保存。 用戶容易誤碰到某個區(qū)域關(guān)掉非模態(tài)的Popover，除非是用戶點擊了明確的“取消”的按鈕，這種時候才不保存工作。
• 在屏幕上適當?shù)姆胖肞opover。 一個Popover的箭頭應(yīng)當直接指向觸發(fā)它的地方，因為Popover不能在屏幕上拖來拖去挪動位置，所以它不可以遮擋住屏幕上用戶重要的內(nèi)容，當然它也不能擋住觸發(fā)它的元件。
• 一次只展示一個Popover。 同時展示很多的popover，會增加畫面的噪聲，致使用戶疑惑。不要使用瀑布或者階梯式的Popover，就是那種一個接一個的彈出來的。如果你想展示一個新彈窗，那就把打開著的先關(guān)掉。
• 不要在Popover 的上層再展示其他彈窗，除了Alert。
• 如果可能的話，讓用戶點擊一下就能再打開一個新的Popover，避免多余的點擊步驟。
• 不要讓Popover展示的太大。一個Popover不應(yīng)該占據(jù)整個屏幕，只讓它達到可以剛好可以容納其中的內(nèi)容，并且指向彈出它的方向就可以了。
• 確保Popover看上去像Popover。 盡管用戶可以個性化改變一個Popover的視覺外觀，但是還是要避免設(shè)計用戶識別不出的Popover。當Popover包含標準的控件和視圖時往往用戶體驗最佳。

6）Snackbar &amp； Toast

類型:非模態(tài)

參考規(guī)范:Material Design

簡介:此處將Snackbar和Toast放在一起講，因為這兩者十分相似但是又有所差異。

Toast屬于一種輕量級的反饋，它比Snack bar的提示程度輕， 常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會自動消失， 但為了保持一致性，同個產(chǎn)品盡量使用同一位置。 和Snack bar有所區(qū)別的是，Toast常常被用作系統(tǒng)提示消息，不包含動作按鈕，可以出現(xiàn)在屏幕上中下任意位置， 并且只有安卓中有Toast。

Snack bar被用來通知用戶該程序正在發(fā)生或者即將發(fā)生的進程，也就是說Snack bar的內(nèi)容一定是和用戶當前操作相關(guān)的，而Toast彈出的內(nèi)容和當前操作沒有任何關(guān)系，只是一個系統(tǒng)提示，比如說“你收到了一條消息”這種。

Snack bar同樣短暫的出現(xiàn)在屏幕的底部，不中斷用戶體驗，也不需要用戶任何操作，自己就會消失。它繼承了Toast的所有基礎(chǔ)屬性，但是不同的是:

• 它常常只出現(xiàn)在屏幕底部
• 可以出現(xiàn)0-1個動作按鈕(不包括“取消”按鈕)
• 點擊Snack bar之外的區(qū)域，它會消失

這里值得注意的一點，Material design中已經(jīng)不再推薦使用Toast而是更推薦Snack bar了，但是目前Toast在安卓應(yīng)用上仍然在被廣泛使用。

下面著重介紹一下Snack bar。

使用場景:既想要展示信息，又想最小程度地打斷用戶注意。

關(guān)鍵點:

• 文案內(nèi)容和當前程序的進程直接相關(guān)。
• Snackbar中不能包含圖標。
• 盡量使用不透明純色背景， 也可以加一點點的透明度，只要文案清晰可見即可。
• 為了和文案區(qū)別，動作按鈕用不同的顏色強調(diào)。
• 使用優(yōu)先級最低的按鈕樣式，通常是文字按鈕。
• 動作按鈕不是必須的， 因為即使什么也不做，snack bar也會自行消失， 最多加一個動作按鈕， 通常是“取消”。
• 最快4秒鐘，最慢10秒鐘， Snack bar會自行消失。
• 當同時有多個snack bar需要出現(xiàn)時，它們是一個一個出現(xiàn)的，前一個snack bar消失后，下一個才會出現(xiàn)。
• 通常出現(xiàn)在界面的底部，并且要避免它遮住導(dǎo)航、頻繁使用的交互組件等等重要的UI元素。
• 只有當界面底部沒有常駐的導(dǎo)航元件如底部tab欄時， snack bar才可以和屏幕等寬顯示。
• 當界面中有懸浮動作按鈕(FAB)時，snack bar不可以和FAB重疊，而是位于FAB的上方，底部有常駐導(dǎo)航元件時同理。

7）Tooltip

類型:非模態(tài)

參考規(guī)范:Material Design

簡介:當Tooltip通過鼠標懸停、聚焦、或者觸摸后被激活，它會識別一個與之對應(yīng)的元素然后在該元素附近顯示簡短、描述性的文案，通常是對該元素的功能解釋，在停留短暫的時長后，Tooltip會自行消失。

關(guān)鍵點:

• 通常為了避免歧義和補充說明，Tooltip用來解釋圖像、圖標、相似相關(guān)的元素，不會用來解釋本來意思就顯而易見的文字。
• 文案只用文字，不要添加任何富文本信息如圖標、圖像。
• 完整展示整個Tooltip的元件，避免因為靠近邊緣而被裁切。
• 只要用戶的鼠標還停留在目標元素內(nèi)部，Tooltip就不會自己消失，當用戶離開目標元素后，Tooltip會停留1。5秒后消失。

8）Andriod Notification

類型:非模態(tài)

參考規(guī)范:Material Design

簡介:在軟件不被使用期間，Notifications提供關(guān)于軟件簡短、時不時的的相關(guān)資訊。這種資訊可以是來自其他用戶的交流信息或者提供任務(wù)提醒。

Notifications如何被用戶注意到:

• 顯示狀態(tài)欄圖標
• 在鎖屏界面被展示
• 發(fā)出聲音或者震動
• 在當前屏幕短暫的出現(xiàn)
• 設(shè)備的屏幕閃爍一下

9）Message bar

類型:非模態(tài)

參考規(guī)范:Microsoft Fluent UI react 8.65.1

簡介:顯示軟件或者文件的錯誤、警告、重要的信息。比如說，一個文檔上傳失敗，那么錯誤的messabe bar就會出現(xiàn)。

關(guān)鍵點:

• 通常一個Message bar會顯示在軟件頂部，主操作欄的下面。比如說office的Message bar就是在ribbon的下面，在文檔畫布的上面。
• 多條信息可以同時出現(xiàn)，但是一個場景或者相關(guān)一系列場景應(yīng)當一個只展示一個Message bar。 Message bar很少是關(guān)于一個操作的直接反饋，而是展示一個用戶應(yīng)當了解的關(guān)于軟件或者文檔的總體的信息。
• 使用圖標來暗示Message的類型: 比如說， 信息圖表就代表咨詢類的message；盾牌的圖標就代表和安全相關(guān)的message；警告圖標代表非阻塞型錯誤警告；

10）Coachmark &amp； Teaching bubble

類型:非模態(tài)

參考規(guī)范:Microsoft Fluent UI react 8.65.1

簡介:Coachmark 是為了吸引用戶注意力并且增加用戶使用他們的機會，當鼠標懸停或者選擇Coachmark時，Teaching bubble就會顯示。

關(guān)鍵點:

• 一次一個Coachmark只可以和一個Teaching bubble組合。
• Coachmark可以是單個的，也可以是連續(xù)的。應(yīng)當減少使用連續(xù)的coachmark， 它只在復(fù)雜多步驟的交互中會被使用，連續(xù)coachmark最好不超過3步。
• Coachmark只被設(shè)計來放Teaching bubble。
• 不可以改變Coachmark的尺寸、顏色和動畫。 打開彈出窗口時，這個操作會減少用戶。

04 彈窗的設(shè)計原則

1. 什么時候選用彈窗

彈窗作為一種容器，在選用時常常和抽屜、頁面一起比較，那么在給定一個內(nèi)容時，我們該根據(jù)什么來選擇使用哪種類型的容器呢?

首先，我們先把這三個容器的定義搞清楚。

• 彈窗：在不離開當前頁面的情況下，完成對某個任務(wù)的聚焦。
• 抽屜：建立在父級頁面的基礎(chǔ)上的一個附加面板，在被需要時呼出。
• 頁面：處于最下層的容器，也是我們最常見的容器形式。

接著，在我們被給定一個需求時，要先分析這個需求，從一下幾個方面去判斷:

1）信息承載量

既然是容器，必然有容量這一說，在這里用信息承載量可能更合適，信息承載量包括圖片、視頻、文本、表格等等各種形式的信息量，當信息量非常大，密密麻麻十分惱人時，彈窗自然是不被推薦使用的了，通常來說信息承載量大小有這么一個規(guī)律: 頁面 &gt； 抽屜 &gt； 彈窗。

不過信息承載量只是考慮的第一步，是一個比較宏觀的方面，不是決定性因素。

2）頁面獨立性

獨立性可以理解為與前一個或者當前頁面的聯(lián)系是否緊密。 頁面的獨立性最高，當你不斷打開一個又一個新的頁面，常常會記不得上一個頁面的內(nèi)容，這就是因為這些頁面的內(nèi)容相對獨立，關(guān)聯(lián)性不大。

而我們僅僅是從定義上不難看出，彈窗和抽屜的獨立性較低， 彈窗的前提是不離開當前頁面內(nèi)容，甚至彈窗的主體不能夠遮住當前頁面的重要內(nèi)容；抽屜是建立在父級頁面基礎(chǔ)上的，它是對父級頁面內(nèi)容的補充。

大多數(shù)彈窗是與當前用戶正在執(zhí)行的操作內(nèi)容相關(guān)的，比如在表單錄入的場景下，選擇時間會彈出時間彈窗，選擇地址時會彈出地址簿彈窗。

抽屜比較適合內(nèi)容度較深、邏輯緊密、概括性簡短的內(nèi)容但不是時時必須展示的內(nèi)容， 如購物網(wǎng)站的目錄導(dǎo)航、safari收藏夾等等。

而頁面和頁面之間的邏輯性不強甚至可以毫無邏輯，比如跳轉(zhuǎn)到一個莫名其妙的廣告頁面。

3）頁面切換成本

當用戶因為某個業(yè)務(wù)需求需要頻繁在A和B頁面間切換時，這個時候我們就要考慮切換成本。

抽屜有一個固定位置的觸發(fā)按鈕，所以當需要頻繁操作時，用戶能夠快速找到并彈出抽屜，減少學(xué)習(xí)成本。

彈窗回到頁面的速度也很快， 如果是非模態(tài)彈窗，它可能會自行消失、點擊遮罩區(qū)域消失或者點擊關(guān)閉按鈕消失，對于模態(tài)彈窗來說，只要用戶做出了明確的操作后，彈窗就會消失，自然的回到當前頁面。

頁面是切換成本最高的，一般需要點擊返回按鈕，返回上一級頁面，這個時候頁面加載需要一定的時間，用戶需要快速認知一個全新的頁面需要一定的適應(yīng)時間，所以頁面的切換成本最高。

2. 彈窗文案怎么寫

1）UX Writing規(guī)則

• 說人話：彈窗應(yīng)與現(xiàn)實世界相關(guān)連彈窗應(yīng)該使用用戶的語言（用戶熟悉的文字，短語和概念），而不是一些系統(tǒng)特有的專有名詞。
• 表述清晰無歧義：在彈窗中使用語意清晰的問題和選項，而不是讓用戶產(chǎn)生疑惑，令用戶猶豫不決。
• 簡潔：在表述清晰的前提下，盡量減少字數(shù)，一方面是因為彈窗的尺寸大小有限，無法承載太多的字數(shù)；另一方面， 任何人都不喜歡長篇大論，彈窗做的就是幫助用戶高效率理解問題、解決問題。
• 一致性：同樣的意思、同樣的操作所使用的詞語句子保持相同，比如說“編輯”和“修改”是差不多的意思，那么在這個系統(tǒng)中只能出現(xiàn)其中一個詞語。

2）標題

標題是用戶第一眼注意到的內(nèi)容，用戶掃一眼標題來快速了解這個彈窗是做什么的，所以標題的重要性不言而喻。

• 如果彈窗是用戶主動觸發(fā)，彈窗標題應(yīng)當包含觸發(fā)該彈窗的動作按鈕的文案，通常采用“動詞+名詞”的格式，這樣用戶才能通過標題確認自己進入了正確的模塊。
• 彈窗標題和內(nèi)容是總-分關(guān)系。標題一般是陳述問題、詢問行為或者做出行為建議，通常比較簡短概括；內(nèi)容是一個較為詳細的說明解釋以及操作的后果等等。
• 標題中不要使用諸如“錯誤!”“警告!”這種帶有強烈情緒的詞語， 而是使用帶有信息的中性的句子，比如“某某任務(wù)終止”。

3）內(nèi)容

• 用戶不喜歡被責怪。避免使用針對性措辭，比如:你出錯了!
• 生僻專業(yè)詞匯附加解釋，尤其像金融類產(chǎn)品，里面涉及了大量專業(yè)詞匯，非專業(yè)人士小白可能會一頭霧水，這時候可以采用Tooltip形式，當用戶懸停在該詞匯上，顯示對該詞匯的解釋。
• 內(nèi)容不必再重復(fù)標題中的文案。
• 使用具體的可以付諸行動的語言，把重要的信息寫在開頭。
• 可以在內(nèi)容中添加一些可供用戶參考的有用信息。

4）如何優(yōu)化按鈕文案

操作清晰可預(yù)測。 減少使用中性詞， 從而避免用戶停頓思考，讓用戶看到文本的瞬間就明白按鈕時會發(fā)生什么。

優(yōu)先考慮“動詞+名詞”的形式，如果不能夠這樣表達，再去考慮“確認”“取消”“關(guān)閉”這些中性詞。

5）反饋

操作后的反饋對于用戶體驗也很重要，正如你打游戲通關(guān)時，系統(tǒng)會發(fā)出喝彩的聲音，比如你提交了一個表單彈窗，當你提交后，應(yīng)當顯示提交成功的反饋。

• 成功: 告知用戶結(jié)果或者當前進程
• 失敗: 告知用戶失敗的結(jié)果、失敗的原因、如何解決問題

3. 滾動條

首先要明確的一點，在各大規(guī)范中都不推薦使用滾動條，因為首先彈窗的內(nèi)容承載量就不大，如果是業(yè)務(wù)場景復(fù)雜的彈窗，我們可以采用Tab或者分步彈窗，盡量去避免在彈窗中使用滾動條。

那么，如果不得不使用滾動條的情況下，有幾點要注意:

• 內(nèi)嵌表格彈窗:當表格數(shù)據(jù)很少時，表格中不含滾動條；當表格數(shù)據(jù)列較多，出現(xiàn)水平滾動條；當表格數(shù)據(jù)行過多時，設(shè)定固定高度的表格，出現(xiàn)垂直滾動條。
• 一般彈窗:禁止使用水平滾動條，垂直滾動條出現(xiàn)時，要保證遮罩內(nèi)容區(qū)的滾動條保持靜止，否則局面會變得混亂不堪。當關(guān)閉彈窗后，內(nèi)容區(qū)的滾動條恢復(fù)運動。

4. 彈窗尺寸

1) Web端

調(diào)查市面上的電腦分辨率， 從數(shù)據(jù)圖中可見，分辨率900 * 1080是主流，最小的分辨率是1024 * 768。

俗話說“一個水桶，盛水量得看最短的那塊木板”， 所以理論上來說， 只要彈窗能滿足1024*768的分辨率，就可以適配市面上所有的電腦。

• 寬度: 最大寬度一般在1000px左右。最小寬度由各個平臺制定
• 高度: 最大高度是600px左右。具體計算: 768px-瀏覽欄頂部高度(60~100px)-系統(tǒng)底部工具欄高度(40px)=628~668px， 再加上彈窗不能像個充氣的氣球一樣擠滿整個屏幕，肯定還要留一些安全邊距(每個平臺的安全邊距不一樣)，我們再取個整——600px左右是最大高度。

各個平臺根據(jù)自身業(yè)務(wù)量和需求的差異性，可以根據(jù)內(nèi)容量再給彈窗的尺寸分類，常見的可以分為: 超級大、大、中、小尺寸，比如螞蟻中臺的Alert的幾種尺寸:

2) 手機端

手機端的彈窗一般都是全屏顯示，除了一些特殊的彈窗類型如Alert， Error， Notification會有固定的尺寸規(guī)范。

5. 彈窗的兩種生效模式

彈窗中有兩種生效模式: 即時提交模式(immediate commit model)和延遲提交模式(delayed commit model)

舉個例子，如mac的偏好設(shè)置中的桌面屏保，當你選中后立即生效，這里沒有提交也沒有確認按鈕，這種就是即時提交模式；而延遲提交模式更為常見，比如注冊網(wǎng)站會員時，你需要填好所有的信息，然后確認一遍，最后提交。

即時提交模式更適合本身操作量不大，但是切換頻繁的操作，尤其對于視覺聽覺上的效果改變，即時提交是非常高效的，常見的比如更換手機鈴聲、選擇照片濾鏡、更換電腦壁紙等等。

延遲提交模式在B端中非常普遍，它需要用戶仔細斟酌輸入的內(nèi)容，用戶修改編輯滿意后再確認提交，比起效率，它更重視質(zhì)量、減少出錯率。

6. 彈窗的交互

1) 彈窗內(nèi)的導(dǎo)航:

當彈窗內(nèi)有次級彈窗(同一個容器，不同的內(nèi)容)時，在次級彈窗標題部分，有一個返回按鈕，可以返回主彈窗。

2) 用戶改變彈窗的顯示大小

比如一些長列表，里面的條目很多，有一些字段因為比較長，被隱藏住了一部分，用戶需要滾動滑動條，來查看更多的條目，而當彈窗的大小可以被改變時，用戶就可以增大彈窗，從而每滾動一次，就能查看更多的條目，減少滾動條的操作次數(shù)，更大的視野也讓用戶的體驗感更好。

這里有兩個小細節(jié)值得注意:

1. 要設(shè)定一個最大/最小寬度，保證彈窗始終可以被看見，不影響彈窗最基本功能的實現(xiàn)。
2. 給一個暗示的符號，比如小三角符號，告知用戶這個頁面是可以被拉伸的。

3) 拖拽移動彈窗

有時候一個彈窗彈出來正好遮擋住了底部頁面的重要內(nèi)容，所以彈窗需要有被移動和拖拽的功能:

4) 彈窗的防錯功能

在填寫表單場景下，比方說用戶已經(jīng)花費了二十分鐘填寫表單，但是他不小心碰到了鍵盤上的Esc鍵，彈窗自動退出，那么他的內(nèi)容就消失了，這對用戶來說是十分糟糕的，有如五雷轟頂!

所以對于一些彈窗而言，添加防錯功能是很有必要的，在不小心誤觸后，彈窗不會立刻關(guān)閉，而是彈出一個確認彈窗“你確定要離開嗎?你的內(nèi)容將會丟失”，這個確認彈窗可以大大的降低誤觸帶來糟糕后果，畢竟很少人會連續(xù)誤觸兩次嘛。

確認彈窗確實是防錯的一個思路，還有一個思路是為彈窗添加自動保存功能，當彈窗不小心關(guān)閉后再打開時，剛才的內(nèi)容還在，不過新用戶的心情會經(jīng)歷一個跌宕起伏: “糟糕了!我的心血沒了!(哭泣)”–奧!!它們竟然還在，太驚喜了!”

7. 多個彈窗

需要明確的一點，在各大規(guī)范中，都不推薦彈窗疊彈窗，即使必要情況下，也會限制彈窗的數(shù)量，至于為什么這樣限制，打個比方你就懂了:大家小時候玩過俄羅斯套娃吧，每打開一個娃娃會發(fā)現(xiàn)里面還藏著一個娃娃，試想把娃娃換成彈窗，彈窗中還有彈窗。

1. 這樣會讓用戶迷失在當前彈窗中，彈窗越多，用戶需要更多的時間和操作回到主彈窗(最外面的娃娃)。
2. 最里面的彈窗因為隱藏的過深，不容易找到； 三， 過多的彈窗加大視覺工作量，增加視覺噪音，導(dǎo)致糟糕的用戶體驗，所以彈窗不推薦多層級堆疊。

但是在復(fù)雜的大型企業(yè)軟件中，不可避免的會出現(xiàn)多個彈窗的情況，我們又該怎么解決呢?

根據(jù)用戶的目標和任務(wù)的對應(yīng)關(guān)系，彈窗和彈窗之間的關(guān)系可以分為線性和非線性關(guān)系。

1）非線形關(guān)系

比如Photoshop，里面的大量窗口都是非線形關(guān)系，我可以調(diào)一下這個參數(shù)，再跳到另一個窗口改變另一個參數(shù)，這些參數(shù)本身并不存在什么邏輯關(guān)系，所以Photoshop的工作臺可以將窗口隨意的打開、隱藏、關(guān)閉，可以根據(jù)設(shè)計師的使用頻率自定義工作臺的內(nèi)容窗口，而面對復(fù)雜大量的功能，PS給了諸如搜索的工具，讓用戶自主的快速找到自己需要的功能。

對于多個非線形彈窗，與其耗費心機的建立一個復(fù)雜的結(jié)構(gòu)導(dǎo)航，不如給他們工具，讓用戶找到他們自己想要的東西。

2）線形關(guān)系

當彈窗和彈窗之間存在緊密的邏輯關(guān)系時，常見的有三種形態(tài):

1. A容器中彈出B容器
2. 同一容器不同內(nèi)容
3. 關(guān)閉A容器后，彈出B容器

舉個例子，叮叮的“新建項目”:

假設(shè)用戶的目標是想要從已有項目中復(fù)制一個模版: 點擊全部模版后，跳到模版界面，這一步就是“A容器中彈出B容器”。

進入模版彈窗后，點擊新建模版，選擇“從已有項目中新建”，可以看出這一步的彈窗的容器沒有變化，只是將彈窗的內(nèi)容區(qū)域進行改變，這就是“同一容器不同內(nèi)容”。

而“關(guān)閉A容器后，彈出B容器”，這個就不太常見，比如通常我們卸載一些流氓軟件時，會確認卸載之后，再確認一次，使得用戶十分惱怒，這些流氓軟件為了留下來真的費盡心機 ； 還有就是在填寫非常重要的信息時，系統(tǒng)為了提醒用戶“你一定要填寫正確，因為這是不可更改的哦”所以會確認兩次。

這個場景不常見，所以絕大多數(shù)彈窗只要一個確認彈窗就可以了。

05 彈窗的使用場景

我們從對話框傳遞的信息的性質(zhì)和來源， 可以將對話框分為系統(tǒng)彈窗、信息展示彈窗、操作彈窗?！禔bout Face 4》一書中將彈窗更細致地分為屬性、功能、通知、公告、進度彈窗，其實理解起來是一樣的: 進度和公告是系統(tǒng)彈窗，通知屬于信息展示彈窗，功能彈窗就是操作彈窗。

系統(tǒng)彈窗:這是由應(yīng)用程序直接啟動，而不是用戶請求發(fā)出的，比如“版本升級到2.0”“頁面崩潰了”。

信息展示彈窗:顧名思義，就是展示信息的彈窗，這個信息可以是來自其他用戶的消息、也可以是查看詳情等等。

操作彈窗:用戶需要對彈窗執(zhí)行具體的動作，比如常見的表單錄入、確認刪除、上傳信息等等。

一般的簡單場景下，不需要再搭建額外的層級關(guān)系， 用常見的簡單的方式就可以完成需求， 但是在復(fù)雜的業(yè)務(wù)場景下，我們可能會遇到各種各樣棘手的問題，如信息太多、信息太復(fù)雜.

于是我們將一些頁面中會用到的層級框架運用到彈窗中，但是切記彈窗的承載量是很小的，不要濫用這些手段(比如說彈窗中又有Tabbar，又有側(cè)邊欄，這樣是很忌諱的)，這里提供幾種解決思路:

1. Tab導(dǎo)航彈窗

Tab是一種導(dǎo)航控件，當頁面的內(nèi)容眼花繚亂時，我們可以將內(nèi)容分類然后放入不同的Tab頁面中，如Mac中的系統(tǒng)偏好設(shè)置的顯示器設(shè)置。

Tab選項卡的形式是多樣化的， 包括僅文字、僅圖標、圖標+文字、帶有次級選項的Tab選項、帶數(shù)字/角標等等，設(shè)計師根據(jù)業(yè)務(wù)場景選擇最合適的。

當Tab和底部操作區(qū)同時存在時，操作區(qū)的層級永遠是最高的，所以說當點擊操作區(qū)按鈕時，其生效的范圍是所有Tab，而不是當前Tab。

如果用戶想在當前tab頁面完成操作的話，這個時候可以刪掉底部的操作區(qū)，推薦使用選擇控件如單選框/復(fù)選框， 當勾選選項的瞬間，這個行為生效。

在使用Tabbar時有幾個小細節(jié)要注意:

• 使用盡量少的tab，并且保證每一個Tab始終可見。
• 當在某些情況下，某個Tab下的內(nèi)容是空的或者不可見的，也要顯示這個tab，原因是保持系統(tǒng)的穩(wěn)定性和可預(yù)測性，你可以在空白的頁面中解釋為什么當前頁面是空白的，避免讓用戶一頭霧水。

2. 側(cè)邊欄導(dǎo)航彈窗

由于彈窗的寬度限制， Tabbar可承受的數(shù)量有限， 當Tab數(shù)量太多時，不妨考慮用Sidebar，以騰訊會議的設(shè)置彈窗舉例。 Sidebar和Tabbar類似，都是導(dǎo)航控件， 所以同樣地，如果用戶想在當前sidebar選項頁面完成操作的話，推薦使用選擇控件如單選框/復(fù)選框，它也是立刻生效。

3. 分組彈窗

在表單錄入場景中， 當信息又多又亂的時候，往往會降低用戶的閱讀效率，增加用戶的認知成本，分組就是一個很好的解決辦法。將同類的信息歸納成一組，可以給每個組加上一個標題，也可以只是在組和組之間加上分割線，界面更加清晰，操作流程更加高效。

4. 分步彈窗

分步彈窗適用于有一定的先后邏輯的操作步驟，必須完成第一步才能進行第二步，不可以像Tabbar或者Sidebar一樣隨心所欲地去任意位置，最常見的就是網(wǎng)站注冊。

這樣做有幾個好處:

• 用戶一次只要專注于一個步驟，降低用戶認知，提高操作效率。
• 由于必須先完成第一步才可以進行下一個步驟，上一步正確了才能進行下一步，大大降低了整體的出錯率。
• 步驟條也是一種進度條，能為用戶提供正向反饋，用戶有一種“一切盡在掌握之中”的感覺，帶給用戶的體驗感很好。
• 試想如果一上來用戶就被告知要寫一大堆的東西(用戶是非常討厭做輸入內(nèi)容的工作的)，很可能面對大量內(nèi)容時被勸退，但是分解到多個步驟中后，看上去就沒有那么多了，減少用戶的壓力。

5. 側(cè)邊欄作為參考

彈窗使我們不得不聚焦于當前任務(wù)中，但是在一些信息錄入場景中，我們錄入的信息并不像我們的身份信息一樣信手拈來，比如商品信息的錄入，這個時候可以采用側(cè)邊欄的形式將參考信息放在旁邊。

以叮叮的“新建工作待辦”——添加執(zhí)行人舉例子: 為了減輕用戶的記憶壓力，叮叮在右側(cè)提供一個常駐的側(cè)邊欄，用戶可以通過“最近聊天”“我的好友”“我的群組”等方式查詢到自己好友的姓名，這個側(cè)邊欄于左邊的頁面是相對獨立的。

06 結(jié)語

彈窗規(guī)范雖然目前來說已經(jīng)比較完善了，但是隨著業(yè)務(wù)場景的復(fù)雜化和多元化，我相信還會有更多新的規(guī)則產(chǎn)生， 這就要求設(shè)計師不僅僅要了解并合理運用規(guī)范，更要勇于質(zhì)疑和思考，去不斷地完善規(guī)范。

以上是我對彈窗的一些思考和總結(jié)，如果你有不同的想法，歡迎與我交流! 期待聽到你的聲音!

本文由郝小七指導(dǎo)http：//www.woshipm.com/u/917803

作者：自來卷夏憶

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

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

對電腦PC端應(yīng)用軟件彈窗信息騷擾用戶問題，工信部召開行政指導(dǎo)會，要求相關(guān)企業(yè)：①充分保障用戶知情權(quán)，明確告知用戶彈窗信息來源，不得以“默認同意”等方式強制用戶接受產(chǎn)品自啟動進行彈窗或提供相關(guān)服務(wù)；②尊重用戶選擇權(quán)，為用戶提供清晰、有效、顯著的彈窗信息關(guān)閉選項，不得采用虛假或過小關(guān)閉按鈕誤導(dǎo)用戶；③進一步優(yōu)化改進產(chǎn)品，避免開機時集中彈窗，影響用戶正常使用，切實保障用戶權(quán)益。（央視新聞客戶端）

來源： 央視新聞

輯導(dǎo)讀：我們經(jīng)常會收到各種彈窗，它們的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對話的一種方式。但是，彈窗也不是多多益善。如何彈、什么時候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計原則，一起來看看吧。

產(chǎn)品經(jīng)理：我覺得這里要加個彈窗，你去設(shè)計吧。

設(shè)計師：emmm…

彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說了算嗎？

好的產(chǎn)品通常會在恰當?shù)臅r間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。

很多時候，產(chǎn)品經(jīng)理會從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問題，但這些未必是用戶所需要的，設(shè)計師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計，否則就成了只會照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計目標，只有經(jīng)過反復(fù)的推敲、認真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計，所以彈窗該不該加、如何加就成了設(shè)計師不可推卸的責任和使命。

本篇文章將圍繞著彈窗類型、使用場景、轉(zhuǎn)化率及常見問題為側(cè)重點，將自己對彈窗的理解、設(shè)計經(jīng)驗分享給大家，幫助大家對彈窗組件有更清晰的認識，為后續(xù)避坑設(shè)計出更好的彈窗做準備。

一、彈窗的基本介紹

1. 彈窗的定義

當我們與應(yīng)用產(chǎn)生主動或被動交互時，頁面上層會彈出容器，將可承載的文本、按鈕、選項、標簽或表單等任一內(nèi)容與之組合，就可以用來傳遞信息、狀態(tài)反饋、引導(dǎo)用戶等操作，這就是彈窗。

彈窗的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對話的一種方式，在線上各種場景中都有可能碰到，相當于產(chǎn)品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。

2. 彈窗組件的構(gòu)成

彈窗組件的樣式很多，如浮層、對話框、下拉菜單、toast等，且iOS、Android官方平臺也都根據(jù)自身的規(guī)范對組件進行命名，不管如何稱呼，其常見的彈窗組件絕大多數(shù)都是由以下元素組成：

• 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
• 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會在界面上層（容器下層）設(shè)置一個不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會為容器設(shè)置投影，例如篩選器的展開、下拉菜單等；
• 文本：文本是彈窗傳達信息主體的必要條件，如標題、按鈕等，即便把文本融入圖片，也能一目了然；
• 圖片：用于運營彈窗傳達更多信息內(nèi)容的方式之一，為了對用戶產(chǎn)生更強的吸引力，還可設(shè)計成動態(tài)效果；
• 表單：為成功進入下一步做準備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當前頁面流程的分支，例如輸入優(yōu)惠券等；
• 選項：條件較少的選項可使用彈窗完成，單選、復(fù)選在選項不超過6個的情況下都可使用；
• 圖標：在弱化次要操作的情況下，通常會將關(guān)閉彈窗按鈕設(shè)計成圖標放在右上角或彈窗下方，目的是突出主操作，鼓勵用戶從彈窗中進入下一步，另外還有單選、復(fù)選、提示等按鈕；
• 按鈕：是進入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設(shè)置按鈕。

二、彈窗體系分類

1. 模態(tài)彈窗

用戶在完成任務(wù)的過程中，界面會出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過主動點擊才可以進行下一步操作，這即是模態(tài)彈窗。

模態(tài)彈窗通常能較好的獲取用戶的視覺焦點，并通過承載的內(nèi)容、按鈕主次層級來引導(dǎo)用戶完成他們的需求，這也會根據(jù)用戶、產(chǎn)品側(cè)重點的不同，彈出樣式也有所不同，常見的模態(tài)彈窗有對話框、動作欄、浮層…等。

1.1 對話框Dialog/Alert

對話框是很常見的彈窗，主要在打斷用戶后并提供選項操作，對用戶的干擾較大，通常會配備1~3個操作按鈕，而且會把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。

對話框類型的彈窗主要分為主動、被動兩種觸發(fā)類型，主動彈窗：信息的二次確認、輸入內(nèi)容、前置條件選擇、風險警示等；被動彈窗：版本更新、運營宣傳、消息通知、系統(tǒng)功能授權(quán)等。

1.2 動作欄Actionbar

動作欄是通過用戶主動操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見。

動作欄相比對話框則能承載更多、更豐富的功能信息，在用戶清晰感知當前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁面更有安全感。

1.3 浮層Popover/Popup

浮層是指用戶操作某個功能/內(nèi)容后，會在附近出現(xiàn)一個帶有視覺引導(dǎo)性質(zhì)的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動于頂層窗口并指向觸發(fā)操作的位置。

例如很多社交娛樂類型的應(yīng)用右上角有一個“+”入口，里面會放置部分常用功能。部分浮層底部沒有設(shè)置不透明度的蒙層，為了與頁面信息更好的區(qū)分，會給浮層容器加上投影，避免與底部信息混淆。

2. 非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會打斷用戶的當前操作，主要是給予用戶即時反饋，讓用戶清楚應(yīng)用當前的交互后狀態(tài)。非模態(tài)彈窗不強制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時間內(nèi)自動消失，也可等待用戶操作后消失，常見的有以下幾種：

2.1 提示框Toast/Hud

用于反饋用戶操作成功、警告、錯誤等當前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級的模塊統(tǒng)一位置、風格即可，無需用戶有任何操作，出現(xiàn)2s左右自動消失。

Toast只有純文字提示，例如格式錯誤、刷新成功、刪除成功等；Hud會使用文字+圖標樣式，例如添加到購物車、關(guān)注成功等。

2.2 提示對話框Snackbar

Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會使用到，可以看作是toast的加強版。一般只出現(xiàn)在屏幕底部，存在的時間比toast長，提供0~1個操作入口，可自動消失，也可與用戶產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁面。

Snackbar反饋的重要程度強于toast，例如，某個應(yīng)用今天有重要提醒，同時又不想影響用戶的其他操作，會在用戶首次進入時彈出提醒，并提供關(guān)閉操作入口，等待用戶通過手動關(guān)閉（部分自動關(guān)閉），加強用戶記憶。

2.3 通知Notice

最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開消息通知開關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開啟通知權(quán)限。

2.4 透明指示層HUD

HUD是一種在透明元素上通過填充、反饋用戶當前交互操作的指示層，實時生效，例如視頻類產(chǎn)品中的調(diào)整音量、亮度、控制進度條等。

三、彈窗的使用場景

當我們對彈窗體系有了一定了解后，就需要清楚什么場景需要設(shè)計彈窗？用什么類型的彈窗？

產(chǎn)品最終都是服務(wù)于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗，我們可以從以下幾點來說明。

1. 打斷用戶的操作

風險警示：當用戶的某種操作可能存在風險，為避免操作失誤，會彈出對話框打斷用戶，并給予一定的風險提示引起用戶的注意，讓其有足夠的時間確認是否真的需要進行下一步操作，如：刪除、放棄福利機會、退出登錄等，會彈出對話框提示操作后可能引起的后果。

前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿足條件才能進入下一步操作，通常這種情況會根據(jù)內(nèi)容量的多少、重要程度以對話框或動作欄的樣式彈出，例如下單時選擇優(yōu)惠券、支付方式。

任務(wù)關(guān)鍵節(jié)點：用戶在滿足任務(wù)的基本條件后，需要操作一個關(guān)鍵步驟才能成功，則會彈出對話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。

2. 定制化彈窗

這類彈窗主要從產(chǎn)品角度出發(fā)，不會過于在乎用戶是否需要、會不會反感，都會引導(dǎo)或強制用戶操作。

例如產(chǎn)品發(fā)布新版本，會強制用戶更新，否則將無法使用。還有各大電商APP，在進入首頁時會彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺、動態(tài)效果突出主題增加吸引力，以達到轉(zhuǎn)化用戶的目的。

3. 二次確認

二次確認也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認，以免操作結(jié)果造成用戶認知上的偏差。雖然從用戶體驗角度出發(fā)，用最少的操作、最簡單的流程滿足用戶所需是產(chǎn)品追求的目標之一，但通過權(quán)和利弊之后，二次確認的出現(xiàn)實屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內(nèi)容加深二次記憶等作用。

二次確認使用得當，可以避免用戶、產(chǎn)品的潛在風險，但若是從主觀角度一味的濫用，就成了對用戶的惡意干擾、影響使用體驗，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實際角度出發(fā)，兩相其害（加-影響使用體驗；不加-造成一定損失）取其輕的考慮是否需要增加二次確認彈窗。

當用戶的某個操作可能帶來不可逆轉(zhuǎn)、錯誤嚴重程度較高時，例如：放棄僅有一次機會的較好福利、手機系統(tǒng)還原、應(yīng)用賬號注銷等，系統(tǒng)都會給予二次確認，降低用戶認知偏差后，以確保用戶是經(jīng)過多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會過于降罪產(chǎn)品，產(chǎn)品也算是“問心無愧”了。

4. 簡單提示

常見于用戶操作之后的狀態(tài)反饋，即便用戶沒有注意到，也不會造成較大的損失、或結(jié)果已經(jīng)注定，相對來說成本較低，大部分出現(xiàn)在任務(wù)過程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶知曉當前所處狀態(tài)。

非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類型的彈窗之后或同時存在。

四、如何設(shè)計有效的彈窗

1. 前提條件

優(yōu)秀的彈窗需要從視覺、交互兩方面思考，視覺上簡潔、易懂，交互上可操作且可控。

視覺層面：首先需要做到的是易懂，這時候就非常注重文案清晰程度及按鈕層級關(guān)系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計必須簡潔，在彈出時需要考慮是否會過度影響（影響是一定會有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋（傳統(tǒng)來電），自己會以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來電是多么的理所當然，但心里必定是非常不痛快的，那么，如果來電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來電方式）是不是就給了用戶足夠反應(yīng)時間及緩沖時間呢？

交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進行下一步操作而并非回到上一步，即便如此，我們也只能通過弱化次要操作以突出主要操作，用戶有來去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會存在反面作用；另外需注意用戶對產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進入下一步轉(zhuǎn)化，但不能強制，一定要給用戶提供回去的路（強制版本更新除外），否則，任性的用戶可能會直接結(jié)束應(yīng)用，甚至因產(chǎn)品過于霸道直接卸載。

2. 設(shè)計目的

首先，設(shè)計師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來什么？滿足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計目標，以確保彈窗根據(jù)不同的需求，在恰當?shù)臅r間、適合的樣式合理的呈現(xiàn)給用戶。

其次，在得到設(shè)計目標后，同樣需要從設(shè)計側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計角度，團隊所有成員需要對該組件有清晰且統(tǒng)一的認知，了解組件的使用場景，以確保不會錯用、濫用，如果增加或更換新人設(shè)計師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開發(fā)效率。

3. 設(shè)計思路

在UI設(shè)計中，組件的設(shè)計思路基本相通，旨在滿足產(chǎn)品的實用性、視覺的統(tǒng)一性，主要圍繞著以下幾點進行：

• 基礎(chǔ)定義：利用清晰易懂且簡短的文案描述彈窗組件的內(nèi)容及目的。
• 類型及構(gòu)成：明確彈窗的類型，如模態(tài)/非模態(tài)，將其拆分并注明每個小元素的具體信息。
• 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場景可復(fù)用。
• 交互狀態(tài)：交互流程邏輯清晰，擬請產(chǎn)品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。

五、需關(guān)注的問題點

1. 信息的層級關(guān)系

設(shè)計彈窗時需要注意信息的主次層級關(guān)系，優(yōu)先傳達用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時間傳達給用戶。

2. 展現(xiàn)形式

彈窗需要根據(jù)實際的場景合理使用，不能為了簡潔而過分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報告類的提示可以使用簡單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認。

△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來不可逆的損失。

3. 文案表述

因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡潔且精確，能用一句話說清楚的就不要過于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時間內(nèi)清晰的表達出核心內(nèi)容。

4. 彈出的時機及頻率

針對運營彈窗，如果彈出的時間不對或過于頻繁，可能會造成用戶反感，所以需要把握好彈出時機及頻率。

例如用戶有一張未使用的優(yōu)惠券，如果用戶每次進入應(yīng)用都看到彈出提醒，確實又沒有購買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進入應(yīng)用時提示、每累計進入應(yīng)用5次后提示、即將到期提示或者用戶有購買意愿且優(yōu)惠券支持改品類時提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。

六、總結(jié)

本篇文章主要系統(tǒng)的分析了彈窗組件分類及使用場景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計師清楚認知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計，都需要有一個不斷優(yōu)化的過程，要根據(jù)產(chǎn)品的實際情況不斷思考與打磨，通過腦暴或已知問題作出更好的改善。

能清楚認知、理解、使用彈窗組件是一個成熟UI設(shè)計師必備的條件，當然，并不能以此定義設(shè)計師是否優(yōu)秀，在此基礎(chǔ)上，還需通過持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

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

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