對話框是一種重要的交互方式，主要用于完成信息傳遞。雖然很常見，卻并不見得每一個設計師都可以百分百地弄明白對話框這個概念。本文作者對“對話框”的知識進行了梳理總結，希望能給你帶來一些幫助。

一篇關于對話框的深度解讀，希望對大家有所幫助。

對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個設計師都可以百分百地弄明白對話框這個概念。這篇文章是對「對話框」的一個簡單梳理和總結，希望可以解決大家心中的一些疑惑。

一、了解對話框

1. 對話框定義

對話框是疊加在應用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進來，在對話中它給出消息或要求輸入。

當用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個對話框便消失了，把應用的主窗口交還給用戶。

關于對話框的概念，以下是百度百科的解釋：

對話框越來越廣泛地被應用于軟件、網頁、以及移動設備中。它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作 。

2. 對話框分類

按照對話框的交互方式，可將其分為「模態[1]對話框」和「非模態對話框」。我們可以把他們看作是兩個小家族，模態家族的人比較強硬，而非模態家族的人相對溫柔一點。兩個家族的主要區別：是否強制用戶對其進行回應。

1）模態對話框

是位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，模態才會消失。而對話框會因為自身的吸引程度、停留時間、信息量承載多少被劃分為多種對話框類型進行區分，常見的對話框分別為：普通對話框、內嵌表單對話框、分步表單對話框、文件選擇對話框、復雜信息展示對話框。

何時使用模態對話框？

①在重要的警告時使用，避免出現嚴重問題、或修正已出現的問題。

例如：用戶錄入信息后未保存就要關閉時，彈出模態對話框提示用戶保存。

②在需要用戶輸入信息或進行某操作，才能繼續當前流程的時候使用。

例如：在使用Canva資源網站時，點擊“上傳”會彈出模態化的登錄/注冊窗口，引導登錄/注冊后使用。

③用來將復雜流程拆分成簡單步驟。

例如：Teambition-分步驟的模態對話框式創建項目。

④用來獲取信息，該信息可大大減輕用戶的后續操作/精力。

例如：在轉賬場景中，如果先復制一個賬號，打開手機銀行APP（以招商銀行或平安口袋銀行為例），系統會通過模式對話框詢問用戶是否向這個賬號轉賬，這樣的設計做到了預判用戶行為，節省用戶后面的操作成本。

2）非模態對話框

與模態完全相反，它更加溫和，不會強制打斷用戶正在進行的現有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

何時使用非模態對話框？

①在獲取與當前流程不必要信息的時候使用。

例如：平安口袋銀行和平安數字口袋采用氣泡卡片展示更多功能或引導用戶登錄。

②不打斷重要流程中使用。

例如：在平安口袋銀行APP中購買理財時，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。

簡單來說，兩者的優缺點見下表：

二、對話框常見應用場景

從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標導向的角度來看對話框，對話框要傳遞的信息的常見應用場景主要有以下五種：

1. 屬性對話框

屬性對話框是向用戶呈現或讓用戶改變所選對象的屬性或者設置。一般來說，在屬性對話框中，用戶可以修改當前的選擇，也可以設置應用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設置一次的屬性，屬性對話框常見在一些設置、詳情中。

例如：Windows 11系統的設置界面，可設置系統的全局屬性。

2. 功能對話框

功能對話框通常從菜單中打開，是最常見的模態對話框，只控制單一功能，如打印、文件上傳/導入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個動作，而且也允許用戶設置動作的細節，屬于模態對話框。

例如：瀏覽器的打印功能，會彈出模態化的打印窗口，用戶可設置打印的細節。

例如：飛書的文檔導入功能，使用模態化對話框，引導用戶選擇文件類型或進行批量導入操作。

3. 進度對話框

進度對話框是由應用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當前應用正在忙于某些內部功能，其他功能的處理能力可能會降低。

每個進度對話框都應該向用戶清晰地展現如下信息：

• 一個耗時的進程正在進行
• 現在一切正常
• 該進行還有多長時間才能完成
• 還有多少事情或項目沒有做完
• 用戶如何才能取消該操作，或重獲控制權

例如：使用Axure軟件導出html文件時的進度提示，既提醒用戶當前Axure正在運行，又告知用戶當前文件導出進度。

例如：使用Sketch軟件導出文件時的進度提示。

4. 通知對話框

通知對話框將一些重要信息報告給用戶。來源可以是一些觸發的事件，也可以是其他用戶的通知。

常見的有通知中心對話框，處理完成某個操作的告知等等。

例如：花瓣的通知提醒。

例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態對話框方式。

5. 公告對話框

公告對話框，和進度對話框一樣，由應用程序直接啟動，不是由用戶請求發起的。公告對話框有三種：錯誤、警告、確認。

這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認]，或者[OK]。

屬性、功能、進度對話框，是用戶主動請求的–它們為用戶服務。但是，應用程序發起的公告對話框–它們為應用程序服務，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。

三、怎么讓公告對話框“名聲鵲起”

我們可以從應用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現頻率。

1. 應用方面

解決用戶錯誤的方法不是指責用戶，讓用戶再認真一些，或者給他們更多的指導練習，而應該優化應用設計，讓犯錯變得困難。

1）讓應用變“聰明”，減少用戶犯錯

①使用有界控件

比如驗證碼輸入框、數字鍵盤等。示例：登錄藍湖時的短信驗證碼輸入框。

示例：轉賬時輸入金額的數字鍵盤，金額大小的位數提示；平安口袋銀行的身份證號專屬鍵盤。

②提高可見性，用戶可自主糾錯

示例：輸錯密碼是一個很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現錯誤頻率。

③具備預判思維，在容易出錯的地方提供更方便的功能

示例：在支付寶聊天窗輸入一串數字，支付寶發現這個問題后，提供了識別后直接轉賬的功能，預判了用戶的慣性，減少錯誤發生。

Zoom – 拉會前預設值在加入會議室的界面，提前選擇是否在進入會議房間后“不自動連接語音”和“保持攝像頭關閉”，有效避免忘記閉麥或者忘記關攝像頭就直接加入了線上會議的意外尷尬。

2）讓操作可“復原”，提供撤銷功能

在很多破壞性的操作都會二次進行提醒，讓用戶確認操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時候，是不是眼疾手快地按下那個「確認」按鈕？

這種對話框在沒有容錯處理時，非常容易被我們這種無腦按「確認」的用戶釀成大錯。比如我只是想試試這個刪除，然后就把某個表幾千條辛苦寫了一個月的數據刪掉了，由此可見系統的容錯處理有多么重要。

示例：Windows系統在早期的時候，刪除文件時會讓用戶進行二次確認，但這是完全沒必要的，因為刪除文件不是真正的刪除，還會在回收站里面。

Mac系統：在回收站刪除文件將是永久性刪除，此時的確認對話框才是對用戶有用的。

2. 對話框設計方面

從對話框本身的設計優化出發，我們可以對話框的使用場景和文案方面著手進行優化設計。

1）對話框使用場景

其實什么時候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。

例如你在手機上買了一張電影票，支付失敗的結果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發現自己購買失敗，那么用戶極有可能當場卸載你的產品。

模態彈框會打斷用戶當前操作流程，所以「使用對話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態彈框的就不要用模態彈框?？傊?，重要的信息優先考慮使用對話框。

具體的使用原則有：

• 彈框使用盡量克制
• 文字需要精簡，使用行為召喚動詞
• 注意區分復雜任務和輕量任務，選擇對應的彈框類型
• 反饋要及時
• 可使用引導幫助選擇

2）清晰且友好的文案

如果非要使用對話框，那么請使用友好尊重用戶的方式。當我們說到人與人之間的交流時，語言是重要的媒介，而用戶與產品之間同樣如此。

在設計過程中應始終努力設計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認為也是不必要的，糟糕的提示性文案甚至會破壞產品中最好的用戶體驗。例如以下幾種情況：

• 含糊不清
• 過于啰嗦
• 無意義，產生誤導
• 無同理心

因此糟糕的提示文案設計會誤導用戶在產品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產生本末倒置的結果， 也給用戶帶來不佳體驗。

所以，語言是使產品更加人性化的主要因素。產品的文案則充當了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機的功能性關系轉化成人類的個人情感體驗。而這種用戶的情感體驗才能夠真正的彰顯品牌個性，從而與其他產品區分開來。

錯誤提示設計三步法：

1. 盡可能準確地描述問題和哪里出錯了，簡明易懂。
2. 提出建設性意見，解決問題，保持流程前進不中斷。如果此時問題還不能解決，告訴用戶可以做些什么來幫助他們，以及他們可以向誰求助。
3. 不要責怪他們，禮貌的對待用戶，在報錯中加入情感。

四、總結

對話框可以成為幫助用戶完成目標的有用助手，而不是讓他們在每一步操守挫敗的可怕絆腳石。通過保持對話框的可管理性，并且只有在他們的功能真的屬于另一個房間的情況下才調用他們，你將很好地維持用戶的工作流狀態，保證他們會成功完成任務，并且滿懷感激。