騰訊出品！PC端彈窗設計五步決策法
彈窗作為一種交互元素對于每一個設計師來說都不陌生，在 GUI 發明之初，彈窗就被用于承載界面上的多層級內容。不過，即使到今天，很多彈窗設計的體驗卻仍然難以讓人滿意。尤其是在彈窗廣告問世以后，幾乎每個人都經歷過被無窮無盡的營銷類彈窗支配的恐懼。以至于在 2010 年《時代周刊》的評選中，模態彈窗還被選為 21 世紀最糟糕的 50 個設計之一。
此外，在設計師的日常工作中，也經常會遇到以下情況：
1. 概念混淆
不論是在設計師之間，還是和產品或開發溝通過程中，常出現有人在說彈窗，有人在說模態，有人在問 “你們說的是對話框還是 popover ” 的情況。
2. 用法模糊
盡管 Apple HIG 等較為權威的設計指南已經對彈窗類型做出了梳理，但這些指南主要聚焦于移動端，在 PC 端仍然欠缺彈窗設計的完整決策標準。尤其是在一些業務流程復雜的 toB 產品中，這種決策問題更為明顯。
針對以上問題，本文闡述了彈窗的概念與分類，為 PC 端彈窗設計提供了一種決策路徑，并給出了相應的設計建議。
本期提綱：
- 彈窗概念與分類
- PC 彈窗設計：5 步決策法
- 總結與建議
彈窗概念與分類
1. 彈窗 Popup
從廣義上講，彈窗(popup)顧名思義泛指彈出的窗口，是一種信息容器。如圖所示，從容器形態上劃分，彈窗主要有以下幾類：
對話框 Dialog
“Dialog” 的本義是指人與人之間的對話，引申到界面交互上，是指人與機器的互動。對話框是一種需要引起用戶明確操作的彈窗。視覺上常居中于屏幕。雖然對話框可以是模態或非模態的，但由于本身視覺形式阻斷感強，大多都是模態的。(關于模態的定義見下文)
Popover
Popover 是一種觸發后出現在屏幕內容上方的瞬時視圖，通常有一個箭頭指向彈出位置。可以是模態或非模態的。Popover 指向性明確，更適用于較大屏幕，并且可以承載多種信息元素。
抽屜 Drawer
抽屜是一種從屏幕邊緣滑進來的面板。抽屜的滑動方向既可以是垂直的，也可以是水平的。可以是模態或非模態的。移動端常見的從屏幕底部滑出的半屏也是一種抽屜。
比起對話框和 popover，抽屜可以更大程度上利用屏幕空間，因此能夠承載更多內容，且與主界面的親密度較高。但缺點是靈活度較低，只能橫向/縱向降低尺寸。因此使用范圍更小，多用于承載較為復雜的表單及字段較多的詳情頁。
還有一些比較輕量的彈窗形式如 tooltip(信息提示)以及臨時出現的 toast，通常都是非模態的。
2. 模態 Modality
涉及彈窗，最容易混淆的概念大概就是模態了。盡管在日常溝通中，常常會把模態和彈窗混為一談。但實際上，模態并不是一種交互元素。
根據 Apple HIG：“模態是是一種在用戶離開當前場景的臨時模式中呈現內容、需要明確的操作才能退出的設計技巧。”
模態在是否阻斷當前交互的層面上區分了屏幕狀態。從這個層面上劃分，一共只有兩種屏幕形態：模態的(modal)和非模態的(nonmodal)，即任何一個屏幕不是模態的，就是非模態的，如下圖。
彈窗與模態的關系：
- 模態描述彈窗在交互上是否鎖層(即阻斷與主界面內容的交互)。每一種彈窗，不論是對話框、popover 還是抽屜，都可以被定義為模態或非模態的。如果一個彈窗出現時，用戶無法與其之外的界面內容交互，那么該彈窗就是模態彈窗。相反，如果還可以繼續與彈窗外的內容交互，該彈窗就是非模態彈窗。
3. 模態彈窗
目前我們見到的大部分的彈窗都是模態的，通常的結構如下：
- 陰影區：提供阻斷的感知，最常見的是黑色，顏色越深，阻斷感越強。
- 內容區：展示需要引起注意的內容，通常有描述性標題和操作。
- 關閉出口：提供多個出口，如按鈕、點擊陰影區、ESC 鍵。
模態彈窗的特點
模態彈窗發明之初是為了簡化用戶標簽頁，便于用戶聚焦高度重要任務或信息。然而，作為一種容器，它非常 “易用”，所以經常被濫用。此外，由于與轉化率之間存在正相關關系，模態彈窗常被用于承載營銷信息。以至于用戶出現了一種習慣化效應(habituation)，很多研究表明，用戶對于彈窗已經產生了直覺性關閉的條件反射。
實際上，盡管模態彈窗作為容器能夠容納多種信息，但不意味著它適合承載所有類型的信息。它主要有以下缺點：
引起即時性認知負擔
模態彈窗出現后要求用戶即刻做出反應，索取高度的注意力資源。
阻斷當前任務
模態彈窗會中斷用戶當前正在進行的任務，給用戶造成額外的認知資源去恢復原始任務。
造成切換成本
模態彈窗在彈窗內、外內容之間造成了額外的切換成本。如果完成彈窗內任務需要用戶高頻參考彈窗外信息，任務完成就會變得更困難。
以上特征決定了模態彈窗更適合承載用戶重要的線性任務以及需要特定決策的關鍵信息。對于其他場景，需要評估是否有必要造成以上這些成本。否則，可以采取其他設計方式，如使用非模態彈窗、就地響應或開啟新頁面等等。
- 模態彈窗的使用建議
- 減少非用戶觸發的彈窗(如彈窗廣告)。
- 模態內的任務盡量簡短、聚焦。
- 復雜流程分步驟進行，過于復雜考慮用新頁面承載。提供可以顯著減少用戶工作量的信息(比如復用已有信息的操作)。
4. 非模態彈窗
在一些非重要信息展示或有切換訴求的場景中，非模態彈窗可能是合適的選項：展示非關鍵信息
非模態彈窗的的阻斷性較弱，適合呈現非關鍵信息。比如一些系統建議或新手引導的場景，使用非模態彈窗不影響用戶原本的交互目標，可以降低對用戶的打擾。
便于快速切換
當用戶需要在彈窗內外的內容之間快速切換時，非模態彈窗是更合適的。例如 Gmail 在查看郵件時新建郵件的操作默認使用非模態彈窗。這有助于用戶在寫郵件的同時參考彈窗外信息，如果需要聚焦新建任務也可以最大化彈窗窗口。
PC 彈窗設計：5 步決策法
在移動端，選取彈窗類型并非難事。移動端屏幕空間有限，彈窗用法較為固定。另外目前較為權威的設計指南 Apple HIG，Google Material Design 等都有對彈窗類型的細分說明，在使用時決策難度不大。
而在 PC 端，這一決策問題卻是真實存在的。一方面是因為相關權威資料的相對缺乏，另一方面，PC 端屏幕空間較大，彈窗作為一種容器在設計上的可拓展性很高。尤其是在一些業務流程復雜的 toB 產品中，彈窗的用法更是五花八門，難以統一標準。
例如任務完成的場景，就有以下這些處理方式：
對話框
popover
抽屜
新頁面
可拖動的自由面板 (panel)
這些設計方式的適用場景可以參考下面的表格：
在多種設計方式中取舍是一個復雜決策，這里整理了一份 5 步法決策路徑：
1. 判斷使用場景
通常涉及到彈窗使用的場景有 3 類：操作反饋、展示內容或者完成任務。比如操作反饋類的，針對信息重要性和場景可以選擇 toast 或者對話框。
2. 分析信息特點
可以從信息量、注意力優先級、切換訴求三點進行分析。
首先，信息量的大小決定了需要選取容器的大小。第二，評估所需要處理的信息是否需要引起用戶高度注意。最后，判斷完成彈窗內任務是否有與主界面切換的訴求。
3. 選擇屏幕形態
即定義模態/非模態。注意力優先級高且切換訴求低的信息或任務適合使用模態彈窗。注意力優先級較低且切換訴求高的信息或任務適合使用非模態彈窗。
4. 選擇容器形態
根據信息特點在對話框、popover、抽屜、新頁面、自由面板等容器形態中選擇。按照對信息量的承載能力排序，新頁面 > 抽屜 > 對話框 / popover。注意力優先級高的信息可以用模態對話框或抽屜，較低的可以使用非模態的 popover。如果有高度切換訴求可以使用非模態面板。
5. 定義參數
最后一步是定義具體的尺寸大小、響應位置和動畫參數。根據相應的設計規范和場景決定即可。
根據以上的決策路徑，在具體的設計場景中具體分析，都可以找到較為合適的處理方式。
總結和建議
總的來說，對于彈窗設計有以下幾點建議：
1. 限制模態彈窗的使用場景，減少打擾。
由于模態彈窗的打擾性強，在產品的整體設計中減少模態彈窗的使用是非常有必要的。在蘋果的網頁端設計中就非常少用模態彈窗，更傾向于就地響應，交互自然流暢、輕量不打擾。比如售后服務頁面，早期的蘋果官網還會出現很多模態彈窗，如
圖 1。但目前已經非常少見，而更多是用在當前頁面頂部展開的方式，如圖 2。
再舉一個 Today at Apple 上報名活動的例子。整個任務完成流程在當前頁面就地展開，過渡自然流暢。
2. 需要閉環體驗的場景，減少跳轉，降低操作成本。
比如 Medium 中查看評論的操作，使用抽屜在當前位置展開評論，減少了跳轉。另外，淺色陰影區降低了阻斷感，打造了流暢沉浸的交互體驗。
3. 任務流繁雜時，靈活嘗試多種交互形式，提高任務完成效率。
比如，Google 的很多 PC 端產品任務流復雜，交互方式靈活多樣，根據場景搭配使用對話框、抽屜、非模態彈窗等，可以最大程度利用屏幕空間，提高多任務操作的效率。
任何一個看似微小的交互元素都可能對體驗產生很大影響。彈窗雖然是一種常見的設計方式，但設計出優雅的彈窗體驗卻并非易事。只有在場景上多分析，解法上多探索才能更大程度上優化用戶體驗。希望本篇內容對大家有所幫助。
