了解彈窗的類型和可以做到的事情，可以幫助我們?cè)谠O(shè)計(jì)中做出更合理的決策，并且有助于我們梳理和規(guī)范現(xiàn)有產(chǎn)品框架、制定和完善設(shè)計(jì)規(guī)范。

在設(shè)計(jì)B端產(chǎn)品時(shí)，產(chǎn)品經(jīng)理和設(shè)計(jì)師總會(huì)為寫一個(gè)問題爭(zhēng)執(zhí)不休：在有限的頁(yè)面空間，是否還能放些什么？而彈窗它可大可小，且能在當(dāng)前二維頁(yè)面之外衍生無限的空間，幾乎可以做到所有頁(yè)面能做的事，同時(shí)對(duì)于開發(fā)來說隨便在html中加一個(gè)<alert>和一句話就能生成一個(gè)最簡(jiǎn)單的提示彈窗。是的，在產(chǎn)品設(shè)計(jì)中，彈窗真的太“方便”了！

或許正因如此，彈窗可能是產(chǎn)品設(shè)計(jì)中最被濫用的一種常用控件了。如果用戶打開一個(gè)鏈接或是按鈕后充斥的是一層層的彈窗，用戶會(huì)感覺你的產(chǎn)品太復(fù)雜太難用！更糟糕的是，有的產(chǎn)品會(huì)很粗魯?shù)膹棾龈鞣N“提示”、“警告”，還需要強(qiáng)制用戶去點(diǎn)擊或關(guān)閉——可能設(shè)計(jì)者以為這種”溫馨提示“是“已用戶為中心”，但很多時(shí)候我們完全可以以一種更為溫和的方式來提醒用戶（如toast、懸停浮層、輸入框旁邊的橙色文字等）。了解彈窗有哪些類型、可以做什么，能夠幫助我們?cè)谠O(shè)計(jì)時(shí)做出更合理的決策。

彈窗，是一種“展現(xiàn)于頁(yè)面之上的一種信息容器”，在x、y軸的平面空間之外擴(kuò)展了頁(yè)面的維度和深度，它是一種比頁(yè)面更靈活的信息容器。細(xì)分下來會(huì)有很多類型，但并沒有一種很明確和統(tǒng)一的叫法。在移動(dòng)應(yīng)用流行以前的網(wǎng)頁(yè)設(shè)計(jì)中，有對(duì)話框（Dialog）、警示框（Alert）、彈出層、彈框、浮層（popup）、氣泡……現(xiàn)在，因?yàn)轫憫?yīng)式設(shè)計(jì)和多平臺(tái)統(tǒng)一的趨勢(shì)下，甚至也有將android的toast提示、Actionbar，以及ios的透明指示層（HUD）和也算作是“彈窗”的一種。同時(shí)，非模態(tài)各種浮層和窗口，類型和用法千差萬別；鑒于此，我在這里重點(diǎn)探討我們?cè)贐端產(chǎn)品（PC端）中常用的傳統(tǒng)意義上的“彈窗”。

以功能和用途為維度，筆者將彈窗分為三種類型：信息展示、任務(wù)、反饋。

一、信息展示

1、解釋或說明

一般由用戶主動(dòng)觸發(fā)的，包含圖文信息，少數(shù)會(huì)有簡(jiǎn)單的操作按鈕，如“確認(rèn)”、“知道了”等等。典型場(chǎng)景有：歡迎界面、操作說明、幫助、功能引導(dǎo)、取數(shù)說明、查看詳情、預(yù)覽或查看大圖……

這種彈窗一般用來對(duì)頁(yè)面內(nèi)容作補(bǔ)充，用戶通過點(diǎn)擊圖標(biāo)或文字按鈕，可以在當(dāng)前頁(yè)面展開彈窗。比如業(yè)務(wù)介紹、圖表的取數(shù)說明、操作說明和引導(dǎo)等，這類信息往往與當(dāng)前頁(yè)面緊密相關(guān)，且從屬于當(dāng)前語(yǔ)境，所以并不適合用跳轉(zhuǎn)頁(yè)面、并列tab其或二級(jí)頁(yè)面的形式來表達(dá)，因?yàn)檫@樣無疑會(huì)加深頁(yè)面層級(jí)，增加用戶的認(rèn)知負(fù)擔(dān)。尤其是對(duì)一些很重要的操作說明或引導(dǎo)，甚至可以在彈窗中使用翻頁(yè)或tab頁(yè)簽的形式來擴(kuò)充彈窗的顯示空間。

需要說明的是，很多產(chǎn)品喜歡對(duì)那些普通的字段解釋和說明也使用帶遮罩的模態(tài)彈窗，并需要用戶點(diǎn)擊才顯示。這是一種很糟糕的設(shè)計(jì)。這種解釋說明，完全可以用一般的非模態(tài)浮層來代替，用戶只需要懸停就可以快速瀏覽，并且快速離開（移開觸發(fā)區(qū)按鈕或點(diǎn)擊空白區(qū)域）（當(dāng)然，如果內(nèi)容太多，可能你要考慮設(shè)計(jì)跳轉(zhuǎn)到新的頁(yè)面而不是使用浮層或彈窗）。

類似這種頁(yè)面的補(bǔ)充說明，使用懸停浮層體驗(yàn)會(huì)更好。

2、內(nèi)容拓展

這種類型常見于一些圖表統(tǒng)計(jì)頁(yè)面、列表頁(yè)面。由于頁(yè)面布局的限制，以及突出核心需求的原則，我們只會(huì)給用戶展示最關(guān)心的統(tǒng)計(jì)結(jié)果和字段，不會(huì)也不可能把統(tǒng)計(jì)圖表的所有詳細(xì)數(shù)據(jù)和說明展示在當(dāng)前頁(yè)面。而這些內(nèi)容往往又并未多到需要一個(gè)新的頁(yè)面來容納（同樣會(huì)增加頁(yè)面層級(jí)），所以這時(shí)候就可以用彈窗來呈現(xiàn)。

內(nèi)容擴(kuò)展型的彈窗，主要有以下場(chǎng)景：查看詳情、預(yù)覽圖片、數(shù)據(jù)透視、歷史記錄……

對(duì)于這種彈窗，模態(tài)和非模態(tài)并沒有很大的差別。一般來說，如果是內(nèi)容較少，并不會(huì)占用較大的屏幕面積，使用非模態(tài)的會(huì)更合適。因?yàn)橛脩糁恍枰獟咭谎蹆?nèi)容就行，模態(tài)的可能會(huì)給用戶一種“被打斷”的感覺。而且，使用非模態(tài)的可以直接展現(xiàn)在目標(biāo)旁邊，關(guān)聯(lián)性更好，同時(shí)可允許用戶快速切換查看其它同類彈窗，且不會(huì)影響對(duì)其他的模塊的操作和瀏覽。

3、彈窗的擴(kuò)展樣式——側(cè)滑面板

還有一種比較常見的“彈窗”，會(huì)以側(cè)滑的形式出新，而不是加遮罩層的模態(tài)彈窗。這樣做的好處是，用戶在查看彈窗內(nèi)容的同時(shí)，不會(huì)失去當(dāng)前頁(yè)面的信息，方便用戶進(jìn)行對(duì)比、參照和檢閱；同時(shí)并不會(huì)影響用戶對(duì)界面其他區(qū)域的操作。這種形式一般在表格中出現(xiàn)較多。當(dāng)然，這里的彈窗并不局限于一般的對(duì)話框樣式，我們也可以使用側(cè)滑浮層。

而對(duì)于那些信息量較大（可能有滾動(dòng)條、拖拽操作等），甚至?xí)幸恍┛蛇x的支線任務(wù)或擴(kuò)展操作時(shí)，建議最好使用模態(tài)的彈窗。這樣可以讓用戶的注意力更為聚焦，且可減少可能產(chǎn)生的誤操作（一些非模態(tài)的彈窗允許用戶點(diǎn)擊彈窗范圍外區(qū)域關(guān)閉彈窗）。

4、漸進(jìn)式的展示：

除了彈窗和二級(jí)頁(yè)面，還有一種信息展示方式——漸進(jìn)式的策略值得借鑒：即在頁(yè)面只展示結(jié)構(gòu)式信息和核心元素，更多細(xì)節(jié)信息在用戶需要時(shí)再作立即呈現(xiàn)。當(dāng)然這樣造成洞察速度受到一定影響，但你能得到一個(gè)更清爽更簡(jiǎn)潔的用戶界面。

二、任務(wù)

1、復(fù)雜任務(wù)

這種彈窗在B端產(chǎn)品中也非常常見。當(dāng)用戶在瀏覽當(dāng)前頁(yè)面時(shí)，有一些很常見的場(chǎng)景：“登錄”、“審核”、“申請(qǐng)”、“編輯”……這些相對(duì)復(fù)雜的任務(wù)和操作，它除了標(biāo)題和文字、說明、操作按鈕之外，通常還會(huì)有一些復(fù)雜的可編輯表單，以及點(diǎn)擊、選擇、拖動(dòng)等操作。在移動(dòng)端，因?yàn)槠聊坏目丶拗疲O(shè)計(jì)師更喜歡用新的頁(yè)面來容納這些內(nèi)容。但在pc上，更常見的是用模態(tài)彈窗來設(shè)計(jì)這種基于當(dāng)前頁(yè)面的、承載用戶明確目標(biāo)的任務(wù)。因?yàn)閺棿皶?huì)讓用戶明確感知到所進(jìn)行任務(wù)是基于當(dāng)前語(yǔ)境的，且在“提交”或“取消”后可以很自然的自動(dòng)返回到主頁(yè)面。

此外，對(duì)于一些任務(wù)來說，雖然信息量大，但大多數(shù)場(chǎng)景下用戶并不需要去編輯所有的字段，而只是修改你其中一兩個(gè)。因此，從用戶感知來說，相比二級(jí)頁(yè)面，使用彈窗會(huì)讓他們感覺更快捷、簡(jiǎn)單。

大多數(shù)情況下，用戶只需要編輯或修改一兩個(gè)字段。

這里有必要說一下其中比較特殊的彈窗——登錄/注冊(cè)界面。雖然以彈窗的形式來呈現(xiàn)目前仍然很常見，但已經(jīng)有越來越多的產(chǎn)品在用戶點(diǎn)擊“登錄”時(shí)會(huì)跳轉(zhuǎn)到新的頁(yè)面，這樣做的好處是可以有更大的空間，用來增加產(chǎn)品slogan和場(chǎng)景圖，以達(dá)到向用戶介紹產(chǎn)品核心功能、烘托產(chǎn)品氛圍、宣傳品牌理念的目的。

2、簡(jiǎn)單任務(wù)

如選擇器、輸入驗(yàn)證碼、高級(jí)搜索、分享、操作權(quán)限確認(rèn)、用戶反饋等一些單一、簡(jiǎn)單的操作。多數(shù)情況下，這些彈窗更多的只是整個(gè)任務(wù)的一個(gè)過渡操作、前提設(shè)置，或者你可以把它看做僅僅是一個(gè)選擇器。

3、用懸停浮層來代替

有一些過渡操作，并不一定要使用傳統(tǒng)的模態(tài)彈窗，比如下面這種場(chǎng)景：用戶點(diǎn)擊“打印”時(shí)，需要用戶來選擇打印樣式（縱向和橫向），最開始我們的設(shè)計(jì)是讓用戶點(diǎn)擊“打印”后，顯示彈窗讓用戶選擇打印樣式，用戶需要選擇并確認(rèn)（或直接確認(rèn)默認(rèn)選項(xiàng)），才能進(jìn)入打印預(yù)覽界面。這樣看起來符合邏輯和用戶心理模型；但結(jié)果發(fā)現(xiàn)，對(duì)那些使用打印功能頻繁的用戶，每次這樣的彈窗“確認(rèn)”讓人覺得 “多余”和“愚蠢”：我基本都是“橫向（或縱向）”打印，為什么每次都要讓我選擇？正是因?yàn)檫@樣，我們最終放棄了彈窗，而改用了這種浮層的設(shè)計(jì)：用戶懸停按鈕時(shí)，就即時(shí)顯示可選擇的選項(xiàng)，如果用戶不需要切換選項(xiàng)，直接點(diǎn)擊打印就好（這對(duì)于絕大多數(shù)用戶來說如此）。同時(shí)也允許用戶快速切換到其他選項(xiàng)。通過與真實(shí)用戶的溝通和觀察，我們發(fā)現(xiàn)他們很明顯更喜歡這種交互。

三、反饋

用戶點(diǎn)擊按鈕、完成任務(wù)，或系統(tǒng)狀態(tài)更新后，需要給用戶一個(gè)明確的反饋，這是人機(jī)交互中的一個(gè)至關(guān)重要的部分。如果只有輸入，沒有輸出，很容易造成用戶的不良情緒，如困惑、懷疑、不信任等。告知用戶發(fā)生了什么？結(jié)果如何？此外，容錯(cuò)是評(píng)價(jià)一個(gè)產(chǎn)品可用性的重要標(biāo)志之一，我們要在用戶可能“犯錯(cuò)”前給予必要的提示、警告。

1、重要操作確認(rèn)

確認(rèn)退出、確認(rèn)刪除、確認(rèn)提交……需在彈窗中告知用戶正在進(jìn)行的操和可能帶來的“危害”，減少用戶犯錯(cuò)的可能。有的可使用非模態(tài)浮層，但最好能顯示在操作觸發(fā)區(qū)域旁邊，以防止用戶忽略提示。

2、告知操作結(jié)果

告知結(jié)果和影響，并引導(dǎo)用戶接下來可進(jìn)行的任務(wù)；

如果只是普通的告知用戶操作成功（如申請(qǐng)成、刪除成功、提交成功……），這里建議使用toast提示即可，讓用戶“了解”即可，而不需要特別用戶關(guān)注和點(diǎn)擊關(guān)閉。如果是操作失敗，在告知結(jié)果同時(shí)，還需要告知用戶失敗的原因、需要做什么。

諸如導(dǎo)入等相對(duì)復(fù)雜、不可控和出錯(cuò)率較高的任務(wù)，在操作失敗時(shí)還需要告知用戶具體出錯(cuò)的位置，幫助用戶快速定位原因并找到解決方案。

3、頁(yè)面異常

斷網(wǎng)、數(shù)據(jù)出錯(cuò)、系統(tǒng)崩潰等。

4、下線通知

頁(yè)面登錄超時(shí)，強(qiáng)制下線重新登錄；賬號(hào)被擠下等。

5、其他反饋類彈窗

四、小結(jié)

在B端web設(shè)計(jì)中，彈窗的視覺樣式可以是多種多樣的（本文也并未過多涉及這方面），但從功能上來說，無外乎以上所述信息展示、任務(wù)、反饋三大類型。一般來說，如果可以替代，我們應(yīng)慎重和少使用彈窗。但了解彈窗的各種應(yīng)用場(chǎng)景，可以方便我們更好地權(quán)衡設(shè)計(jì)方案：是否可用彈窗？是否只能用彈窗？用二級(jí)頁(yè)面、浮層、甚至toast提示是否會(huì)更好……從另一個(gè)角度來說，了解彈窗的各種功能，對(duì)于我們梳理和規(guī)范現(xiàn)有產(chǎn)品框架、制定和完善設(shè)計(jì)交互及視覺規(guī)范來說，也是大有裨益的。

日常設(shè)計(jì)小結(jié)，如有不足，歡迎拍磚指正！

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

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