對話框 (dialogs) 是疊加在應用主視圖上的彈出 (pop-up) 視圖，一般會要求用戶作出反應,。對話框可以分為模態(tài)對話框 (modal dialogs) 和非模態(tài)對話框 (modeless dialogs),。

模態(tài) (modality) 會阻止用戶完成當前視圖上的任務，使用戶專注于模態(tài)視圖 (modal views) 里的新任務,；只有當模態(tài)視圖被終止后,，用戶才能繼續(xù)完成之前的任務。

在下面的例子中,，提示框阻止用戶繼續(xù)查看地圖,，使用戶專注于提示；只有當用戶輕點 OK 后,，用戶才能繼續(xù)查看地圖,。提示框是 iOS 中常見的模態(tài)視圖之一,。

對話框一般由什么組成？

大部分對話框都由標題,、按鈕和說明文本組成,。如果對話框允許用戶輸入或選擇，則還需相關控件,。

• 標題：對話框的標題應該簡潔易懂,、一目了然。

• 按鈕：模態(tài)對話框上一般有兩個按鈕,，一個是默認按鈕（比如,，“確認”、“打印”,、“清空回收站”），另一個是取消按鈕,。它們應當給用戶清晰的選項,。當用戶點擊任何一個按鈕后，模態(tài)對話框就會關閉,。為了提高熟練用戶的效率,，我們應該允許用戶按 Esc 鍵終止對話框（效果和取消按鈕相同）。

• 說明文本：說明文本可以向用戶解釋對話框里的任務,，它應該清晰,、避免重復信息。

什么是模態(tài)對話框,？

當模態(tài)對話框打開后,，用戶不能繼續(xù)之前的任務，除非模態(tài)對話框被終止,。

在設計交互界面時,，我們應該重視模態(tài)對話框的設計。設計良好的模態(tài)對話框可以幫助用戶更好的完成任務,，而糟糕的模態(tài)對話框則會讓用戶感到沮喪,。Alan Cooper 將模態(tài)對話框比作界面設計中的”配角“。因為模態(tài)對話框會打斷用戶的心流 (flow),，所以主要的內(nèi)容和相關控件應該放在主視圖中,，而不是散布在不同的模態(tài)對話框中。此外,，當一個對話框層疊在另外一個對話框之上時,，它們往往讓人摸不著頭腦。

級聯(lián)對話框 (Cascading Dialogs) 往往令人困惑

為什么使用模態(tài)對話框,？

如果使用得當,，模態(tài)對話框可以幫助用戶完成任務,，創(chuàng)造良好的用戶體驗。當你有以下需求時,，可以考慮使用模態(tài)對話框：

1. 獲取用戶的注意力

當你希望用戶專注在一項重要的任務上時,，你可能需要使用到模態(tài)對話框。盡管一定會打斷用戶,，但很少有其他組件能像模態(tài)對話框一樣獲取用戶的全部注意力,。模態(tài)對話框一般處于界面的最頂層的中間位置。用戶必須先處理模態(tài)對話框里的任務,，然后才能去處理其他任務,。因此，用戶不太可能錯過它們,。

在下圖的例子中,，當用戶刪除項目時，應用啟動了一個模態(tài)對話框向用戶確認刪除操作,。

2. 顯示次要內(nèi)容

本質上,，應用都是為了幫助用戶訪問特定的內(nèi)容。比如,，Evernote 的內(nèi)容是筆記,，而 Spotify 的內(nèi)容是音樂。盡管有時很難對主要和次要內(nèi)容作出清晰劃分,，但我們可以認為用戶最感興趣,、最關心、最頻繁訪問的是主要內(nèi)容,，其他內(nèi)容則是次要內(nèi)容,。

用戶為內(nèi)容而來。因此,，主要內(nèi)容及相關的控件不應當出現(xiàn)在模態(tài)對話框中,。對于桌面應用而言，它們屬于應用的主窗口 (main windows),；對于移動應用而言,，它們屬于應用的屏幕 (screens)，對于 Web 應用而言,，它們屬于應用的頁面 (pages),。在設計良好的信息架構中，用戶總是能輕松地找到他們關心的內(nèi)容,。

在屏幕大小有限的情況下,，次要的內(nèi)容可以出現(xiàn)在模態(tài)對話框中。在特定語境 (context) 下，用戶將有機會打開這些對話框,。比如,，用戶在 AWS EC2 的實例列表中選中實例、通過右鍵菜單點擊 “添加／編輯標簽” 后會打開一個模態(tài)對話框,。用戶可以在這個對話框里查看,、編輯實例的標簽。如果用戶不想繼續(xù)查看,、編輯標簽,，可以隨時關閉對話框并回到之前的界面。

有時,，用戶需要在多個語境下打開同一個模態(tài)對話框,。比如，除了上文中提到的右鍵菜單,，用戶還可以點擊底部標簽面板上的 “添加／編輯標簽” 按鈕打開同一個的模態(tài)對話框,。不管通過哪種方式，用戶都可以快速地回到他們關心的主要內(nèi)容 —— AWS EC2 的實例列表,。

3. 隱藏復雜性

我們希望為用戶創(chuàng)造簡單,、強大的應用。在設計應用時,，我們需要小心謹慎地平衡這兩個目標,。相比移動用戶,，桌面用戶往往更習慣使用功能繁多的專業(yè)應用,，比如，PowerPoint,、Photoshop,、SourceTree。但除非他們已經(jīng)是有經(jīng)驗的老用戶,；否則,，充斥著按鈕和專業(yè)詞匯的應用界面就像是布滿地雷的戰(zhàn)場，會令新手們望而卻步,。如果我們希望新用戶能更快上手,、掌握基本功能，我們就必須想辦法把平時不常使用的的高級功能隱藏起來,，幫助新用戶把注意力先放在主要內(nèi)容上,。

我們可以把這些高級功能藏在模態(tài)對話框中。對于新用戶而言,，模態(tài)對話框的好處主要體現(xiàn)在：

1. 容易理解,。模態(tài)對話框往往簡短易懂，新用戶可以快速完成對話框里的任務,。

2. 容易撤銷,。如果新用戶一不小心通過按鈕或菜單打開了模態(tài)對話框,，他們可以隨時點擊 “取消”。

3. 容易導航,。因為用戶仍可看到模態(tài)對話框下面的部分主視圖,，他不會搞不清楚他在哪里。如果他不想繼續(xù),，可以隨時關閉對話框并回到之前的視圖,。

什么是非模態(tài)對話框？

當非模態(tài)對話框打開后,，用戶可以專注于對話框里的次要任務,，也可以繼續(xù)完成主視圖里的主要任務。

如果用戶需要頻繁地在主視圖和對話框,、主要任務和次要任務之間切換,，非模態(tài)對話框會比模態(tài)對話框更合適。但是,，非模態(tài)對話框可能會令用戶困惑,。這是因為，盡管二者看起來非常相似,，它們的行為卻不一樣,，并難以預測。

舉個例子,，在模態(tài)對話框中,，當用戶點擊了下方的按鈕后，對話框就會關閉,；但是在非模態(tài)對話框中,，當用戶點擊了按鈕后，對話框不會立刻關閉,。（除非用戶主動點擊非模態(tài)對話框上的關閉控件,。）

此外，因為非模態(tài)對話框不會隨著次要任務的結束而自動關閉,，未及時關掉的非模態(tài)對話框可能浪費屏幕空間,。在 Page 中，用戶可以用一個非模態(tài)對話框在當前打開的文檔里查找內(nèi)容,。如果用戶不主動關閉它,，哪怕他不想繼續(xù)查找，這個對話框仍會出現(xiàn)在屏幕上,。（當用戶打開第二個文檔時,，Page 會關閉這個非模態(tài)對話框。用戶可以再次打開它。此時,，這個非模態(tài)對話框的搜索范圍是當前活躍窗口里的內(nèi)容,。）

為了避免這些問題，我們可以考慮使用其他非模態(tài)組件替代非模態(tài)對話框,，比如：面板 (panel),、側邊欄 (sidebar) 和工具欄 (toolbar)。比如,，Ulysses 用面板取代了非模態(tài)對話框,。