彈窗作為一種交互元素對(duì)于每一個(gè)設(shè)計(jì)師來(lái)說(shuō)都不陌生，在 GUI 發(fā)明之初，彈窗就被用于承載界面上的多層級(jí)內(nèi)容。不過(guò)，即使到今天，很多彈窗設(shè)計(jì)的體驗(yàn)卻仍然難以讓人滿意。尤其是在彈窗廣告問(wèn)世以后，幾乎每個(gè)人都經(jīng)歷過(guò)被無(wú)窮無(wú)盡的營(yíng)銷類彈窗支配的恐懼。以至于在 2010 年《時(shí)代周刊》的評(píng)選中，模態(tài)彈窗還被選為 21 世紀(jì)最糟糕的 50 個(gè)設(shè)計(jì)之一。

此外，在設(shè)計(jì)師的日常工作中，也經(jīng)常會(huì)遇到以下情況：

1. 概念混淆

不論是在設(shè)計(jì)師之間，還是和產(chǎn)品或開(kāi)發(fā)溝通過(guò)程中，常出現(xiàn)有人在說(shuō)彈窗，有人在說(shuō)模態(tài)，有人在問(wèn) “你們說(shuō)的是對(duì)話框還是 popover ” 的情況。

2. 用法模糊

盡管 Apple HIG 等較為權(quán)威的設(shè)計(jì)指南已經(jīng)對(duì)彈窗類型做出了梳理，但這些指南主要聚焦于移動(dòng)端，在 PC 端仍然欠缺彈窗設(shè)計(jì)的完整決策標(biāo)準(zhǔn)。尤其是在一些業(yè)務(wù)流程復(fù)雜的 toB 產(chǎn)品中，這種決策問(wèn)題更為明顯。

針對(duì)以上問(wèn)題，本文闡述了彈窗的概念與分類，為 PC 端彈窗設(shè)計(jì)提供了一種決策路徑，并給出了相應(yīng)的設(shè)計(jì)建議。

本期提綱：

• 彈窗概念與分類
• PC 彈窗設(shè)計(jì)：5 步?jīng)Q策法
• 總結(jié)與建議

彈窗概念與分類

1. 彈窗 Popup

從廣義上講，彈窗(popup)顧名思義泛指彈出的窗口，是一種信息容器。如圖所示，從容器形態(tài)上劃分，彈窗主要有以下幾類：

對(duì)話框 Dialog

“Dialog” 的本義是指人與人之間的對(duì)話，引申到界面交互上，是指人與機(jī)器的互動(dòng)。對(duì)話框是一種需要引起用戶明確操作的彈窗。視覺(jué)上常居中于屏幕。雖然對(duì)話框可以是模態(tài)或非模態(tài)的，但由于本身視覺(jué)形式阻斷感強(qiáng)，大多都是模態(tài)的。(關(guān)于模態(tài)的定義見(jiàn)下文)

Popover

Popover 是一種觸發(fā)后出現(xiàn)在屏幕內(nèi)容上方的瞬時(shí)視圖，通常有一個(gè)箭頭指向彈出位置?？梢允悄B(tài)或非模態(tài)的。Popover 指向性明確，更適用于較大屏幕，并且可以承載多種信息元素。

抽屜 Drawer

抽屜是一種從屏幕邊緣滑進(jìn)來(lái)的面板。抽屜的滑動(dòng)方向既可以是垂直的，也可以是水平的?？梢允悄B(tài)或非模態(tài)的。移動(dòng)端常見(jiàn)的從屏幕底部滑出的半屏也是一種抽屜。

比起對(duì)話框和 popover，抽屜可以更大程度上利用屏幕空間，因此能夠承載更多內(nèi)容，且與主界面的親密度較高。但缺點(diǎn)是靈活度較低，只能橫向/縱向降低尺寸。因此使用范圍更小，多用于承載較為復(fù)雜的表單及字段較多的詳情頁(yè)。

還有一些比較輕量的彈窗形式如 tooltip(信息提示)以及臨時(shí)出現(xiàn)的 toast，通常都是非模態(tài)的。

2. 模態(tài) Modality

涉及彈窗，最容易混淆的概念大概就是模態(tài)了。盡管在日常溝通中，常常會(huì)把模態(tài)和彈窗混為一談。但實(shí)際上，模態(tài)并不是一種交互元素。

根據(jù) Apple HIG：“模態(tài)是是一種在用戶離開(kāi)當(dāng)前場(chǎng)景的臨時(shí)模式中呈現(xiàn)內(nèi)容、需要明確的操作才能退出的設(shè)計(jì)技巧。”

模態(tài)在是否阻斷當(dāng)前交互的層面上區(qū)分了屏幕狀態(tài)。從這個(gè)層面上劃分，一共只有兩種屏幕形態(tài)：模態(tài)的(modal)和非模態(tài)的(nonmodal)，即任何一個(gè)屏幕不是模態(tài)的，就是非模態(tài)的，如下圖。

彈窗與模態(tài)的關(guān)系：

• 模態(tài)描述彈窗在交互上是否鎖層(即阻斷與主界面內(nèi)容的交互)。每一種彈窗，不論是對(duì)話框、popover 還是抽屜，都可以被定義為模態(tài)或非模態(tài)的。如果一個(gè)彈窗出現(xiàn)時(shí)，用戶無(wú)法與其之外的界面內(nèi)容交互，那么該彈窗就是模態(tài)彈窗。相反，如果還可以繼續(xù)與彈窗外的內(nèi)容交互，該彈窗就是非模態(tài)彈窗。

3. 模態(tài)彈窗

目前我們見(jiàn)到的大部分的彈窗都是模態(tài)的，通常的結(jié)構(gòu)如下：

• 陰影區(qū)：提供阻斷的感知，最常見(jiàn)的是黑色，顏色越深，阻斷感越強(qiáng)。
• 內(nèi)容區(qū)：展示需要引起注意的內(nèi)容，通常有描述性標(biāo)題和操作。
• 關(guān)閉出口：提供多個(gè)出口，如按鈕、點(diǎn)擊陰影區(qū)、ESC 鍵。

模態(tài)彈窗的特點(diǎn)

模態(tài)彈窗發(fā)明之初是為了簡(jiǎn)化用戶標(biāo)簽頁(yè)，便于用戶聚焦高度重要任務(wù)或信息。然而，作為一種容器，它非常 “易用”，所以經(jīng)常被濫用。此外，由于與轉(zhuǎn)化率之間存在正相關(guān)關(guān)系，模態(tài)彈窗常被用于承載營(yíng)銷信息。以至于用戶出現(xiàn)了一種習(xí)慣化效應(yīng)(habituation)，很多研究表明，用戶對(duì)于彈窗已經(jīng)產(chǎn)生了直覺(jué)性關(guān)閉的條件反射。

實(shí)際上，盡管模態(tài)彈窗作為容器能夠容納多種信息，但不意味著它適合承載所有類型的信息。它主要有以下缺點(diǎn)：

引起即時(shí)性認(rèn)知負(fù)擔(dān)

模態(tài)彈窗出現(xiàn)后要求用戶即刻做出反應(yīng)，索取高度的注意力資源。

阻斷當(dāng)前任務(wù)

模態(tài)彈窗會(huì)中斷用戶當(dāng)前正在進(jìn)行的任務(wù)，給用戶造成額外的認(rèn)知資源去恢復(fù)原始任務(wù)。

造成切換成本

模態(tài)彈窗在彈窗內(nèi)、外內(nèi)容之間造成了額外的切換成本。如果完成彈窗內(nèi)任務(wù)需要用戶高頻參考彈窗外信息，任務(wù)完成就會(huì)變得更困難。

以上特征決定了模態(tài)彈窗更適合承載用戶重要的線性任務(wù)以及需要特定決策的關(guān)鍵信息。對(duì)于其他場(chǎng)景，需要評(píng)估是否有必要造成以上這些成本。否則，可以采取其他設(shè)計(jì)方式，如使用非模態(tài)彈窗、就地響應(yīng)或開(kāi)啟新頁(yè)面等等。

• 模態(tài)彈窗的使用建議
• 減少非用戶觸發(fā)的彈窗(如彈窗廣告)。
• 模態(tài)內(nèi)的任務(wù)盡量簡(jiǎn)短、聚焦。
• 復(fù)雜流程分步驟進(jìn)行，過(guò)于復(fù)雜考慮用新頁(yè)面承載。提供可以顯著減少用戶工作量的信息(比如復(fù)用已有信息的操作)。

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

在一些非重要信息展示或有切換訴求的場(chǎng)景中，非模態(tài)彈窗可能是合適的選項(xiàng)：展示非關(guān)鍵信息

非模態(tài)彈窗的的阻斷性較弱，適合呈現(xiàn)非關(guān)鍵信息。比如一些系統(tǒng)建議或新手引導(dǎo)的場(chǎng)景，使用非模態(tài)彈窗不影響用戶原本的交互目標(biāo)，可以降低對(duì)用戶的打擾。

便于快速切換

當(dāng)用戶需要在彈窗內(nèi)外的內(nèi)容之間快速切換時(shí)，非模態(tài)彈窗是更合適的。例如 Gmail 在查看郵件時(shí)新建郵件的操作默認(rèn)使用非模態(tài)彈窗。這有助于用戶在寫郵件的同時(shí)參考彈窗外信息，如果需要聚焦新建任務(wù)也可以最大化彈窗窗口。

PC 彈窗設(shè)計(jì)：5 步?jīng)Q策法

在移動(dòng)端，選取彈窗類型并非難事。移動(dòng)端屏幕空間有限，彈窗用法較為固定。另外目前較為權(quán)威的設(shè)計(jì)指南 Apple HIG，Google Material Design 等都有對(duì)彈窗類型的細(xì)分說(shuō)明，在使用時(shí)決策難度不大。

而在 PC 端，這一決策問(wèn)題卻是真實(shí)存在的。一方面是因?yàn)橄嚓P(guān)權(quán)威資料的相對(duì)缺乏，另一方面，PC 端屏幕空間較大，彈窗作為一種容器在設(shè)計(jì)上的可拓展性很高。尤其是在一些業(yè)務(wù)流程復(fù)雜的 toB 產(chǎn)品中，彈窗的用法更是五花八門，難以統(tǒng)一標(biāo)準(zhǔn)。

例如任務(wù)完成的場(chǎng)景，就有以下這些處理方式：

對(duì)話框

popover

抽屜

新頁(yè)面

可拖動(dòng)的自由面板 (panel)

這些設(shè)計(jì)方式的適用場(chǎng)景可以參考下面的表格：

在多種設(shè)計(jì)方式中取舍是一個(gè)復(fù)雜決策，這里整理了一份 5 步法決策路徑：

1. 判斷使用場(chǎng)景

通常涉及到彈窗使用的場(chǎng)景有 3 類：操作反饋、展示內(nèi)容或者完成任務(wù)。比如操作反饋類的，針對(duì)信息重要性和場(chǎng)景可以選擇 toast 或者對(duì)話框。

2. 分析信息特點(diǎn)

可以從信息量、注意力優(yōu)先級(jí)、切換訴求三點(diǎn)進(jìn)行分析。

首先，信息量的大小決定了需要選取容器的大小。第二，評(píng)估所需要處理的信息是否需要引起用戶高度注意。最后，判斷完成彈窗內(nèi)任務(wù)是否有與主界面切換的訴求。

3. 選擇屏幕形態(tài)

即定義模態(tài)/非模態(tài)。注意力優(yōu)先級(jí)高且切換訴求低的信息或任務(wù)適合使用模態(tài)彈窗。注意力優(yōu)先級(jí)較低且切換訴求高的信息或任務(wù)適合使用非模態(tài)彈窗。

4. 選擇容器形態(tài)

根據(jù)信息特點(diǎn)在對(duì)話框、popover、抽屜、新頁(yè)面、自由面板等容器形態(tài)中選擇。按照對(duì)信息量的承載能力排序，新頁(yè)面 > 抽屜 > 對(duì)話框 / popover。注意力優(yōu)先級(jí)高的信息可以用模態(tài)對(duì)話框或抽屜，較低的可以使用非模態(tài)的 popover。如果有高度切換訴求可以使用非模態(tài)面板。

5. 定義參數(shù)

最后一步是定義具體的尺寸大小、響應(yīng)位置和動(dòng)畫參數(shù)。根據(jù)相應(yīng)的設(shè)計(jì)規(guī)范和場(chǎng)景決定即可。

根據(jù)以上的決策路徑，在具體的設(shè)計(jì)場(chǎng)景中具體分析，都可以找到較為合適的處理方式。

總結(jié)和建議

總的來(lái)說(shuō)，對(duì)于彈窗設(shè)計(jì)有以下幾點(diǎn)建議：

1. 限制模態(tài)彈窗的使用場(chǎng)景，減少打擾。

由于模態(tài)彈窗的打擾性強(qiáng)，在產(chǎn)品的整體設(shè)計(jì)中減少模態(tài)彈窗的使用是非常有必要的。在蘋果的網(wǎng)頁(yè)端設(shè)計(jì)中就非常少用模態(tài)彈窗，更傾向于就地響應(yīng)，交互自然流暢、輕量不打擾。比如售后服務(wù)頁(yè)面，早期的蘋果官網(wǎng)還會(huì)出現(xiàn)很多模態(tài)彈窗，如

圖 1。但目前已經(jīng)非常少見(jiàn)，而更多是用在當(dāng)前頁(yè)面頂部展開(kāi)的方式，如圖 2。

再舉一個(gè) Today at Apple 上報(bào)名活動(dòng)的例子。整個(gè)任務(wù)完成流程在當(dāng)前頁(yè)面就地展開(kāi)，過(guò)渡自然流暢。

2. 需要閉環(huán)體驗(yàn)的場(chǎng)景，減少跳轉(zhuǎn)，降低操作成本。

比如 Medium 中查看評(píng)論的操作，使用抽屜在當(dāng)前位置展開(kāi)評(píng)論，減少了跳轉(zhuǎn)。另外，淺色陰影區(qū)降低了阻斷感，打造了流暢沉浸的交互體驗(yàn)。

3. 任務(wù)流繁雜時(shí)，靈活嘗試多種交互形式，提高任務(wù)完成效率。

比如，Google 的很多 PC 端產(chǎn)品任務(wù)流復(fù)雜，交互方式靈活多樣，根據(jù)場(chǎng)景搭配使用對(duì)話框、抽屜、非模態(tài)彈窗等，可以最大程度利用屏幕空間，提高多任務(wù)操作的效率。

任何一個(gè)看似微小的交互元素都可能對(duì)體驗(yàn)產(chǎn)生很大影響。彈窗雖然是一種常見(jiàn)的設(shè)計(jì)方式，但設(shè)計(jì)出優(yōu)雅的彈窗體驗(yàn)卻并非易事。只有在場(chǎng)景上多分析，解法上多探索才能更大程度上優(yōu)化用戶體驗(yàn)。希望本篇內(nèi)容對(duì)大家有所幫助。