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

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

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

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

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

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

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

01 彈窗的定義

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

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

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

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

02 彈窗的組成

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

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

1. 遮罩

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

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

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

2. 彈窗主體

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

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

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

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

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

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

至于彈窗按鈕的位置擺放，有兩種常見的擺放規(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)取消按鈕

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

3)ESC鍵

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

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

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

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

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

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

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

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

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

03 彈窗的類型

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

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

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

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

再來看非模態(tài)彈窗，非模態(tài)彈窗允許用戶在不打斷當(dāng)前頁面的同時，去處理其他任務(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ī)范中拿出一些比較有代表性的彈窗類型詳細(xì)講一講。

2. 典型彈窗

1）Actionsheet

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

參考規(guī)范: IOS Design

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

關(guān)鍵點:

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

2）Modal

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

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

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

3）Dialog

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

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

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

分類:

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

使用場景:

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

關(guān)鍵點:

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

4）Drawer

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

參考規(guī)范: Material Design

簡介: Drawer是一種容器， 它的性質(zhì)和生活中的抽屜很像， 通常用來放置和某個特定窗口相關(guān)的一些信息或者選項。默認(rè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

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

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

關(guān)鍵點:

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

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

7）Tooltip

類型: 非模態(tài)

參考規(guī)范: Material Design

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

關(guān)鍵點:

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

8）Andriod Notification

類型: 非模態(tài)

參考規(guī)范: Material Design

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

Notifications如何被用戶注意到:

• 顯示狀態(tài)欄圖標(biāo)
• 在鎖屏界面被展示
• 發(fā)出聲音或者震動
• 在當(dāng)前屏幕短暫的出現(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)當(dāng)一個只展示一個Message bar。 Message bar很少是關(guān)于一個操作的直接反饋，而是展示一個用戶應(yīng)當(dāng)了解的關(guān)于軟件或者文檔的總體的信息。
• 使用圖標(biāo)來暗示Message的類型: 比如說， 信息圖表就代表咨詢類的message；盾牌的圖標(biāo)就代表和安全相關(guān)的message；警告圖標(biāo)代表非阻塞型錯誤警告；

10）Coachmark &amp； Teaching bubble

類型: 非模態(tài)

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

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

關(guān)鍵點:

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

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

1. 什么時候選用彈窗

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

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

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

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

1）信息承載量

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

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

2）頁面獨立性

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

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

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

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

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

3）頁面切換成本

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

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

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

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

2. 彈窗文案怎么寫

1）UX Writing規(guī)則

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

2）標(biāo)題

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

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

3）內(nèi)容

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

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

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

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

5）反饋

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

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

3. 滾動條

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

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

• 內(nèi)嵌表格彈窗:當(dāng)表格數(shù)據(jù)很少時，表格中不含滾動條；當(dāng)表格數(shù)據(jù)列較多，出現(xiàn)水平滾動條；當(dāng)表格數(shù)據(jù)行過多時，設(shè)定固定高度的表格，出現(xiàn)垂直滾動條。
• 一般彈窗: 禁止使用水平滾動條，垂直滾動條出現(xiàn)時，要保證遮罩內(nèi)容區(qū)的滾動條保持靜止，否則局面會變得混亂不堪。當(dāng)關(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è)置中的桌面屏保，當(dāng)你選中后立即生效，這里沒有提交也沒有確認(rèn)按鈕，這種就是即時提交模式；而延遲提交模式更為常見，比如注冊網(wǎng)站會員時，你需要填好所有的信息，然后確認(rèn)一遍，最后提交。

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

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

6. 彈窗的交互

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

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

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

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

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

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

3) 拖拽移動彈窗

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

4) 彈窗的防錯功能

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

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

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

7. 多個彈窗

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

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

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

根據(jù)用戶的目標(biāo)和任務(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)系

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

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

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

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

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

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

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

05 彈窗的使用場景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 分組彈窗

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

4. 分步彈窗

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

這樣做有幾個好處:

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

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

彈窗使我們不得不聚焦于當(dāng)前任務(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：//m.codemsi.com/u/917803

作者：自來卷夏憶

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

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