在B端產品中彈窗已經被更多的設計師關注和使用。彈窗作為常見的表現形式不僅與當下流行的卡片式設計形式接近，而且它也是展現在用戶界面頁面之上的一種容器，能在不影響當前頁面信息堆積的情況下更好的擴展更多的信息內容。由于內容集中在彈層上并且彈窗以彈出或平滑展開的動作出現，所以他較吸引用戶視覺，并且用戶在操作時不用離開當前頁面即可完成某項任務。
彈窗交互形式分為「模態彈窗」和「非模態彈窗」兩種，使用場景類型也可以分為「任務」、「內容反饋」、「信息提示」三種。其中「模態彈窗」大多數情況下都出現在用戶處理問題的關鍵時刻，突然吊起「模態彈窗」的交互形式如果使用不恰當，那么極易中斷用戶操作導致用戶產生厭惡感。反之彈窗可幫助用戶更加有效的完成界面中的復雜任務，所以設計師還需合理正確選擇使用。用戶界面中彈窗中的按鈕文案也是設計師經常拿捏不準的地方，比如「確定」與「確認」、「提交」與「發布」、「關閉」與「取消」它們的區別是什么？它們分別用在什么場景下最準確？根據以上概要我們聊聊關于彈窗的一些設計思考以及如何正確選擇彈窗。
1. 彈窗交互類型
我們先介紹一下彈窗的組件，彈窗的組件類型有多種，通常形式為一個容器卡片承載對應的信息內容。在網頁中應用中常用的彈窗基礎組件有「對話框（Modal）」、「氣泡（Popover）」、「文字提示（Tooltip）」、「通知提示（Notification）」、「抽屜（Drawer）」、「氣泡確認框（Popconfirm）」、「全局提示（Message）」、「警告提示（Alert）」。彈窗交互形式分為模態、非模態兩大類，如下圖所示：
模態
「模態彈窗」的形式極易破壞用戶操作流，強制用戶必須回應并操作，否則不能進行其他操作?！噶鳌乖凇蹲顑烍w驗的心理學》中概括是「當人們全身心投入某個活動時，會對周邊視而不見」。當使用「模態彈窗」時如果使用不恰當會影響用戶操作界面時的「控制權」，容易產生厭惡感，尤其是在用戶被動且無前提感知的情況下出現時極為明顯。因為，當一個「模態彈窗」打開時，其實是強制讓用戶與該對話框進行交互，而用戶界面中其它內容是不可操作的，它限制了用戶使用界面的自由權。如下圖所示是用戶對模態彈窗的處理流程。
非模態
「非模態彈窗」我們可以大概理解它為不影響用戶體驗，用戶可以不作回應。特點是不會打斷用戶正常的操作，更不會破壞用戶「操作流」，用戶更享受界面中「控制權」，并且它能夠在關鍵時刻幫助用戶的任務狀態、信息提示，如：成功、失敗、錯誤、功能操作提示、暗提示等。當頁面中出現「非模態彈窗」時用戶依然可以操作主界面。大部分「非模態彈窗」通常都有時間限制，出現一段時間后就會自動消失。當然也有部分需要操作行為動作才會消失。比如，「文字提示」它需要用戶懸停在某個焦點時出現，移除才消失。「氣泡確認彈窗」它需要用戶點擊某個操作出現，也需要用戶點擊指定動作才可消失。下圖所示是用戶對「非模態彈窗」的處理流程。
在艾倫·庫珀在《About Face》中提到過一個概念就是「富視覺非模態反饋」，它的「富」在于能夠讓用戶深入全面的感知信息，讓用戶了解一個進程的狀態或者屬性。它的「視覺」是指按用戶習慣的方式使用界面中的元素。它的「非模態」在于不打斷用戶的情況下信息能及時地顯示出來，即不需要用戶做特殊動作或者轉換模式，就能看到和理解這些反饋。它存在的意義在于，幫助用戶更加有效的完成界面中的復雜任務。
「非模態彈窗」大部分是一些內容反饋和信息提示，如：「文字提示」、「通知提示」、「全局提示等」，我們這邊統稱它為「信息反饋」?！感畔⒎答仭勾嬖诘囊饬x是及時有效的目的幫助用戶完成任務目標，其中「有效」包含了「提供有用的信息反饋，提高任務的操作效率和可理解程度」。
有用
有用的「信息反饋」：
- 告訴用戶發生了什么，剛剛做了什么以及前面的操作導致現所處的狀態，讓用戶感受到一切都在掌握之中；
- 告訴用戶哪些過程正在進行中，需要下一步需要做什么，及時告訴這一步哪些地方操作有誤。
效率
提高用戶的操作效率：
- 在不打斷用戶行為操作的前提下提供良好的反饋機制，用戶看到反饋后可繼續操作當前頁面；
- 在用戶出現錯誤之前及時制止，盡量避免出現錯誤后才的告知用戶；
- 減少用戶出錯率，設計師必須清楚不出錯不代表用戶總是正確的，而是杜絕「自以為是」地糾錯用戶錯誤，正確引導用戶形成良好的操作環境。
彈窗的使用場景類型我大致的把他們分為三大類，分別是：任務；內容反饋；信息提示。
任務類型
在用戶需操作相對復雜的擴展功能時更常見的是用「模態彈窗」，它承載當前頁面的擴展內容，所以常常用到「對話框」、「抽屜」兩種類型，他們除了有標題、按鈕之外通常還會有一些任務表單，它是給予當前主頁面之上的一種目標任務，承載了用戶明確目標的擴展應用。
內容反饋類型
用戶輸入信息或操作用戶界面時，系統給出相應的提示時出現內容反饋機制，它屬于「非模態彈窗」類型，在設計師設計界面時常常用到「全局提示」、「通知提示」、「氣泡確認框」三種類型作為反饋消息。它的「非模態」在于用戶操作后不打斷用戶的情況下及時地顯示出來，明確告知用戶的一些反饋結果，幫助用戶更加有效的完成界面中的復雜任務。
信息提示類型
對于「內容反饋」及「信息提示」我把這兩種類型都統稱為「信息反饋」，因為它們兩種類型很相似，都屬于「非模態彈窗」類型。并且他們存在的意義都是及時有效的幫助用戶完成任務目標，提高任務的操作效率和可理解程度」。信息提示常常用到「文字提示」、「氣泡」、「警告提示」三種形式展現給用戶。
小結
根據上文我們可總結到，彈窗是信息反饋、內容展示等基礎組件的統稱。各類組件可以根據類型屬性進行分類，如：彈窗的交互形式分可為「模態彈窗類型」和「非模態彈窗類型」兩大類。根據其功能屬性和使用場景我們大致可以把他們分為三大類，分別是為：任務；內容反饋；信息提示。其中「模態彈窗類型」阻斷性較強，用戶使用容易被動阻斷，但是其優點是更加的突出，幾乎不被用戶忽略?！阜悄B彈窗類型」阻斷性更弱，用戶操作時界面時不會被打斷，但是往往它很容易被用戶忽略。所以，它們各有優劣勢，設計師可根據它們的特點靈活運用，為了讓大家更加清楚理解，下面我們可以針對「模態彈窗類型」進行實際的案例分析（非模態彈窗類型下篇詳析）。
1. 對話框
對話框在我們日常設計用戶界面時最為頻繁的彈窗形式之一。該組件既可以用作簡單的任務填寫，也可以作為提示控件中的一種。使用時吸引用戶注意力程度較強，并且用戶必須執行對應操作后才可以對其進行關閉。對話框最初用作于重要或高風險操作時彈出的一個對話框，它有著較強醒目的警示作用，只有在傳遞非常重要，且可操作的信息時才需要使用它。隨著B端產品的不斷發展，對話框既可以用作簡單的任務填寫，如：登錄注冊、表單錄入、信息修改、信息展示等，也可以是一個超強的信息提示，如：成功、失敗、警示等。
因為「對話框」與「抽屜」的交互類型都屬于「模態彈窗類型」，并且他們都屬于任務類型彈窗，所以在這里我們先針對「模態彈窗類型」（對話框、抽屜）舉幾個較為典型例子，看看他們實際應用場景的效果及使用特點。我們可以先看看對話框，對話框在Web端的應用中可分為：確認對話框；操作反饋；表單編輯；內容展示這四大類型。
確認對話框類型
下圖為Google郵箱中的授權確認對話框，當你點擊「發起會議」，如果用戶第一次使用此功能并且系統沒有得到用使用攝像頭、麥克風等授權功能時，系統為了最大程度提高用戶權限的開啟率（不開啟此視頻會議功能幾乎沒法用），那么這時候會彈出蘋果系統「確認對話框」快速讓用戶進行操作，減少用戶需要關閉當前頁面后再去尋找相關設置的這種不必要的操作。以及Google郵箱系統同時也會對應的彈出對話框，建議用戶必須授權，不然會導致其他參與者看不到你并聽不到你的聲音。
下圖為Facebook Ads平臺截圖，此平臺主要針對的人群是想要在Facebook上投放廣告的廣告主們，廣告主可以進行廣告版位選擇、人群定向、地域定向選擇等操作進行廣告創建以及廣告投后效果追蹤。并且可以把廣告投在Facebook、Instagram、Messenger等產品中，它是一款典型的B端類產品。在Facebook Ads的主要創編流程中「確認對話框」就起到較大作用（注：創編主流程屬于業務邏輯相當復雜的表單），當廣告主創建廣告時可能把整個創建流程都設置完成，在沒有點擊確認按鈕完成創建廣告時廣告主可能誤操作、也可能是中途想要跳轉至其它頁面，這時候會彈出「對話框」讓用戶確認是否要退出創建，退出后可能導致更改的內容未保存而丟失的后果。就因為這個確認對話框大大減少了用戶的出錯率。因為，當用戶在未保存設置時如果退出的話沒有一個確認彈窗，用戶是無感、預期而帶來的影響的后果。所以在較重要或者是某操作會給用戶帶一系列后果的話，需要一個「對話框」提示用戶。
操作反饋類型
「操作反饋」的目的是告訴用戶其操作的結果、預期帶來的影響或后果，它是產品與用戶交互的重要觸點，如果設計師能夠合理的使用反饋設計，那么可以使得產品與用戶之間建立一個良好循環的互動，并且可以幫助用戶更好的了解產品，避免或減少困惑及錯誤，提升用戶的整體使用體驗。如下圖所示為Google郵箱「視頻會議」在未授權情況下的「反饋對話框」，當用戶第一打開此功能時用戶未授予給系統攝像頭和麥克風權限后，那么導致系統無法獲取到攝像頭和麥克風權限導致這兩個功能處于禁用狀態，并同時彈出反饋類型對話告知用戶攝像頭與麥克風已被屏蔽狀態，引導用戶開啟授權路徑。
表單編輯類型
上一篇文章有介紹過關于表單的內容，它的核心功能是采集、傳遞、提交數據信息，其作為獲取用戶輸入的重要交互方式，也承擔著將問題和答案進行配對的角色。當頁面中有些擴展操作需要用戶填寫時，但又不想用戶跳出當前頁面時可使用彈窗的方式進行操作，它能夠有效減少頁面跳轉頻率。如下圖中實際用場景有西瓜視頻的登錄注冊、谷歌加入會議填寫會議代碼、站酷文件上傳、Facebook Ads視頻制作工具中都屬于表單類對話框的應用。
在這里我們引入一個思考點，為什么有些網站需要登錄注冊以后才可訪問頁面，而有些網站需要完成登陸才可以訪問主頁面呢？
其實這是由產品特性決定的產品策略，先講下不必登錄就能使用的業務場景。就拿優酷視頻來舉例子吧，優酷視頻屬于大型視頻分享類網站，主要內容體系由劇集、綜藝等四大頭部內容矩陣和新聞、文化財經等八大垂直內容構成，它不需要用登錄作為一個身份門檻，它注重內容的質量、數量達到吸引用戶、留住用戶的作用。所以，從產品的形態、產品的屬性、業務的需求上來講它并不需要用戶來登錄注冊。既然登錄注冊不那么重要不如直接降低用戶使用產品的門檻，讓用戶直接進入產品就能使用、瀏覽、操作。當用戶對產生興趣以后想進行下一步操作時，比方播放記錄同步、體驗高清等功能時，才有必要去讓用戶登錄注冊，獲取用戶的身份等信息，達到用戶轉化作用。
我們再來講講必須登錄的業務場景。工具類、設計類產品大部分是需要登錄之后才能使用很多，因為此類產品更強調角色、身份。就拿飛書舉例，飛書屬于工具協作類產品，當用戶未登錄時只能看到產品介紹頁。它屬于典型的工具類的溝通協作產品，它與新聞閱讀類產品不同的是，使用它的用戶群體目的比較明確，所以首頁做成一個功能介紹頁面，引導查看者了解產品核心功能從而達到轉化成用戶群體。其中，功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮如何提高網站的色彩、插圖等元素的亮點、統一性達到加強用戶的印象。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把「飛書向所有組織與企業免費開放」slogan這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成注冊以后，進入到功能頁面。
內容展示類型
把重要并且需要強調的信息推送給用給用戶時，我這里把它歸類為「內容展示類型」。它常常被用在產品功能更新升級、用戶協議等場景。比如：有些網站涉及一些法務內容確認時，在用戶使用產品時一般會以彈窗的形式提醒用戶查看或確認，由于用戶協議往往是以傳遞內容為主，因此設計時建議采用純文本形式嵌套在對話框中。注：一般情況下用戶額協議由于內容較多，設計師應當考慮到對話框的高度適配內容的展示，需要設置一個最高值內容超過后以內部滾動的形式展示，下圖為淘寶的注冊協議。
比如說還有一些場景是表單的信息回填展示，它能夠幫助用戶快速記憶或需要用戶對信息進行校驗時會用到此類型。如下圖為Facebook Ad創編主流程中的信息展示類彈窗，場景是廣告主在創建廣告中，由于上一次創建廣告時中途可能中途出現了各種原因而導致退出完成編輯，所以當用戶再此進入到創建流程時會彈窗對話框告訴用戶是否繼續編輯還是重新開始，在這里對話框用的很巧妙，它給予用戶記憶與選擇，當用戶選擇繼續創建時那么用戶就不必重復編輯上一次已經編輯過的內容，大大提升了戶的整體使用效率。
2. 抽屜
「抽屜」作為模態類彈窗的擴展應用的一種，它與對話框在功能上很相似，都屬于任務型彈窗，并且都屬于「模態形式」。但是「抽屜」的出現形式與「對話框」完全不一樣，對話框是在主頁面中以彈出的方式出現，而抽屜是與主頁面有著相對位置關系平滑展開出現。抽屜出現的形式可以分為四種類型，分別是：向左平移；橫向右平移；底部向上平移；頂部向下平移，常規情況下設計師在Web端中使用橫向左平移頻率最高。
與「對話框」對比，「抽屜」在使用場景也有它的優劣勢。優勢：「抽屜」的頁面空間更大，它能夠承載更多的內容、信息，它與主頁面親密度更高；劣勢：「抽屜」的靈活度比較低，比如「對話框」可以根據業務的內容多少去變化它的寬度與高度，而抽屜只能橫向/縱向降低尺寸。所以，「抽屜」適用范圍更小，大部分場景下都用在較復雜的表單及字段較多詳情頁。「抽屜」在Web端的應用中可分為：內容展示；表單編輯這兩大類型。
內容展示類型
說到「內容展示抽屜」我們可以拿分享銷客作為案例分享。此平臺針對的人群各企業銷售人員，主要核心功能特點是為企業提供內部銷售一站式管理。下圖所示為分享銷客客戶詳情截圖，在這里它選擇了使用「抽屜」作為承載內容，主要原因是因為客戶詳細的字段、內容較多，信息較為龐大，剛剛在上面也有講到「抽屜」最大特點是空間較大，能夠比「對話框」更友好的承載龐大信息內容，并且「抽屜」是由平滑展開出現它比對話框跳出感更弱。在這里分享銷客使用「抽屜」可方便銷售能快速能看到客戶全量的詳情數據，例如：客戶聯系人報表，跟進動態等內容，此使用場景屬于比較典型的抽屜用法。
表單編輯類型
巨量引擎廣告投放平臺中「創意工作臺」用到過此類型「抽屜」，此功能是為了解決在創建廣告時素材制作成高等問題，平臺專門為優化師提供了高效和便捷的素材制作工具。如圖所示為「創意工作臺」其中的「批量制圖」功能，在此場景下用戶在只需編輯和上傳一些必填字段即可批量生成多個不同風格的視頻。其中，因為生成視頻時間會比較漫長，所以用戶可以暫時收起「抽屜」繼續操作其它內容，當用戶有需要時再點擊展開即可，這也是屬于抽屜的獨有一種特性。所以，這時候使用「抽屜」會比使用「對話框」更加合適。
小結
總結上文，模態彈窗包含了兩種基礎組件，分別是「對話框」與「抽屜」。其中「對話框」根據它在Web端實際的應用場景我們把它分為成4大類型，分別為：確認對話框；操作反饋；表單編輯；內容展示這四大類型。它的應用范圍更廣，靈活度更高。而「抽屜」頁面空間足夠大，它們承載更多內容，可進行更復雜的操縱，在Web端由于它的靈活度較低，所以可應用的的場景較少，分別：內容展示；表單編輯這兩大類型。
在用戶界面中文案是用戶與產品的溝通方式，其中「達意」是最終目的，也是最重要的宗旨。如果用戶無法理解你想要傳達的意思，那么用戶將無法良好的使用產品，文案也失去了存在的意義。在這里我們重點分析一下關于彈窗中按鈕容易發生歧義的幾個具體代表性的案例，比如確定與確認、提交與發布、關閉與取消，它們的區別是什么，它們分別用在什么場景下最準確？
確定or確認？
我們先講講彈窗中常常容易被忽視、也容易被混淆的「確定」和「確認」按鈕，它們常常與「取消」按鈕組合使用。從表面的中文字符上看他們很接近，所以造成很多產品設計師傻傻分不清導致把二者混合著用。導致界面中不僅文案不統一，也容易混淆用戶的認知。
在確認彈窗場景中，「確定」對應的場景是用戶在前置場景中對頁面中進行了配置或某項重要操作，并且這個是操作不可逆，需要彈出確認彈窗告訴用戶這次的操作會造成后續一些影響，需要用戶進行抉擇。如下圖為Facebook Ads的賬戶設置，當用戶更改推廣目的選項時，這時彈出確認彈窗并告訴用戶是否確定更改，如果用戶確定后修改將生效，取消則不做更改。
「確認」對應的場景是用戶在彈窗中進行了選擇、信息填寫等配置操作，需要用戶進行信息校驗確認的情況下使用。如下圖所示為知乎的富文本編輯頁面，當用戶需要進行一些擴展操作場景時。比如用戶使用要插入文本鏈接時彈出表單類彈窗，并且用戶需要在彈窗中進行內容填寫和內容核實，這時彈窗中的按鈕需使用「確認」比較合適。
提交or發布？
「提交」與「發布」按鈕文案因為使用場景近似，也經常容易被混用，所以設計師不僅需要捋清楚這兩個文案的不同使用場景，還需要在日常設計中了解產品的策略即可減少錯誤。下面我們來分析一下「提交」與「發布」差異點，以及它們用在哪個場景下最為合適。
「提交」對應的場景是用戶需要對某個權限進行申請，并需要進行一些信息填寫。在用戶填寫內容時符合字段要求即可其，相關信息不需要后臺審核。如下圖為菜鳥全球供應鏈服務合作申請，用戶只需要將一些相關信息填寫即可，不用等待系統的審批，表單提交后相關營銷會主動聯系。
在一些用戶反饋、用戶評價場景中，使用「提交」比「發布」更加的輕松愉悅。其中「發布」給人帶來的感覺是會顯得更加的莊重，對后續影響力更大，格式要求更高，而「提交」給人即時性、快速反饋的感覺。下圖為美團外賣與京東的商品評價頁面，由于評價對正常運營影響較小，更多的是給其它消費者輔助決策和意見參考。他們在商品評價頁面都使用了「提交」作為按鈕文案。
「發布」常用在工單、作品、資料等內容發布到公共場景，部分場景甚至需要系統后置信息內容審核，再反饋給用戶審核是否通過。如下圖所示為Facebook Ads廣告創編的功能，由于廣告發布權重較高，當用戶發布廣告會涉及到后面影響一系列影響，這時候不僅使用了「發布」作為按鈕文案，同時彈出「確認對話框」對用戶進行事件強調。
如下圖分別為淘寶（左）和京東（右）的商品評價頁。其中，淘寶使用「發布」而京東使用的是「提交」，在商品評價頁整體看功能好像并沒有多大的區別，但二者最大的區別不在頁面展示的內容上，而在于評分背后的產品策略。
我們先分析一下淘寶的評價體系，淘寶屬于B2B電商平臺，主要以心、鉆石、皇冠等形式作為信用評價等級劃分，所以淘寶比較看重評價結果。其中，淘寶還根據評分做了一些機制，比如評價高直接影響信用評分，評分影響了其店鋪的搜索排序、產品的搜索排序、金牌賣家考核等等，用戶更愿意選擇評分高、信譽度高的店鋪進行商品交易?？偟膩碚f，淘寶更看重用戶所發表的評價，甚至淘寶會使用紅包的形式激勵購買者進行評價。
我們再來看看京東。相對于淘寶，京東的評價更多的作用在于指導用戶決策，其評價只針對客戶能反應出買家對商品的直觀感受，它評分機制不影響店鋪正常運營。因為京東屬于B2C電商平臺，主要針對京東自營和第三方店鋪，產品本身的質量較高，沒必要使用評級影響店鋪的運營?？偟膩碚f，京東的評價一方面是給買家一個表達看法的作用，另一方面對其它購買者產生部分輔助決策作用，京東更弱化評價力度。
關閉or取消？
「關閉」與「取消」在我們日常設計界面時出現的頻率也相當的高，我們先拋出兩個發自靈魂的拷問：為什么有些彈窗，在設計時，有「取消」按鈕，右上角也有「關閉」Icon；「關閉」與「取消」按鈕在使用上的區別是什么？那么我們根據這兩個問題簡單分析一下。
在彈窗中，很多時候不僅僅提供了「取消」按鈕，還在對話框右上角提供「關閉」入口。如下圖所示為云鳳蝶編輯器頁面，簡單介紹一下，云鳳蝶是阿里旗下一個基于SaaS模式的智能建站平臺，主要提供給無設計能力的廣告主自助制作落地頁的一個工具平臺，當用戶刪除編輯器中模版中的某個內容模塊時，彈出「確認對話框」，咱們可以看到對話框中既有「取消」按鈕，也有「關閉」 入口。其中 「取消」是對于對話框內容的反饋，它的含義是取消之前的操作，保持原樣/我不同意此操作」。「關閉」是對于彈窗頁面的一種反饋，它的含義是「關閉當前彈窗，暫對之前彈窗暫時不做處理」。
下圖為谷歌Meet頁面，當系統無法訪問用戶攝像頭和麥克風時出現「提示反饋對話框」，對話框中的「關閉」是對話框頁面的反饋。
下圖為Facebook受眾人群包保存頁面，其中右上角「關閉」是對話框的反饋，下面的「取消」按鈕是對當前對框框操作內容的反饋，表示我對此操作放棄，不保存。
小結
文案也是用戶體驗的一部分，其中按鈕的文字不僅需要清晰、簡潔、統一，還需要根據實際的業務場景準確的進行表述。有時候兩個文案相當接近，這時候設計師往往需要設計師在日常的設計中了解產品的策略和文案的差異性即可減少錯誤。
本文整體從分析彈窗的不同類型，到模態彈窗類型的實際應用分析，再到彈窗中容易產生分歧的按鈕文案進行內容闡述。其中也多次強調不同類型的彈窗有其的利弊，所需要設計們靈活使用，當設計師把彈窗應用的恰當好處時，它將會是非常有效率的界面元素，并且能夠快速幫助用戶達成目標。然而設計師在使用不恰當時，它將困惱用戶進而使得用戶對彈窗產生厭惡。所以，設計師搞明白不同類型的彈窗使用規則和特性，可以幫助其良好的設計界面避免那些錯誤而造成用戶的困擾。
作者其他文章：
參考文獻
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 zandraZhu