5分鐘交互設(shè)計指南系列對話框

2017/11/1 9:14:54來源：互聯(lián)網(wǎng)

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

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

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

對話框一樣平常由什么組成？

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

題目：對話框的題目應該簡潔易懂、一覽無余。
按鈕：模態(tài)對話框上一樣平常有兩個按鈕，一個是默認按鈕（比如，“確認”、“打印”、“清空回收站”），另一個是取消按鈕。它們應當給用戶清晰的選項。當用戶點擊任何一個按鈕后，模態(tài)對話框就會關(guān)閉。為了進步諳練用戶的服從，我們應該許可用戶按 Esc 鍵停止對話框（結(jié)果和取消按鈕雷同）。
說明文本：說明文本可以向用戶詮釋對話框里的義務，它應該清晰、避免重復信息。

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

當模態(tài)對話框打開后，用戶不能繼承之前的義務，除非模態(tài)對話框被停止。

在設(shè)計交互界面時，我們應該正視模態(tài)對話框的設(shè)計。設(shè)計優(yōu)秀的模態(tài)對話框可以幫助用戶更好的完成義務，而糟糕的模態(tài)對話框則會讓用戶感到沮喪。Alan Cooper 將模態(tài)對話框比作界面設(shè)計中的”配角“。由于模態(tài)對話框會打斷用戶的心流 (flow)，所以重要的內(nèi)容和相干控件應該放在主視圖中，而不是散布在不同的模態(tài)對話框中。此外，當一個對話框?qū)盈B在另外一個對話框之上時，它們每每讓人摸不著頭腦。

△ 級聯(lián)對話框 (Cascading Dialogs) 每每令人疑心

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

假如使用得當，模態(tài)對話框可以幫助用戶完成義務，創(chuàng)造優(yōu)秀的用戶體驗。當你有以下需求時，可以考慮使用模態(tài)對話框：

1. 獲取用戶的細致力

當你盼望用戶專注在一項緊張的義務上時，你可能必要使用到模態(tài)對話框。盡管肯定會打斷用戶，但很少有其他組件能像模態(tài)對話框一樣獲取用戶的悉數(shù)細致力。模態(tài)對話框一樣平常處于界面的最頂層的中心位置。用戶必須先處理模態(tài)對話框里的義務，然后才能行止理其他義務。因此，用戶不太可能錯過它們。

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

2. 表現(xiàn)次要內(nèi)容

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

用戶為內(nèi)容而來。因此，重要內(nèi)容及相干的控件不應當出如今模態(tài)對話框中。對于桌面應用而言，它們屬于應用的主窗口 (main windows)；對于移動應用而言，它們屬于應用的屏幕 (screens)；對于 Web 應用而言，它們屬于應用的網(wǎng)頁 (pages)。在設(shè)計優(yōu)秀的信息架構(gòu)中，用戶總是能輕松地找到他們關(guān)心的內(nèi)容。

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

偶然，用戶必要在多個語境下打開統(tǒng)一個模態(tài)對話框。比如，除了上文中提到的右鍵菜單，用戶還可以點擊底部標簽面板上的「添加／編輯標簽」按鈕打開統(tǒng)一個的模態(tài)對話框。不管通過哪種體例，用戶都可以快速地回到他們關(guān)心的重要內(nèi)容 —— AWS EC2 的實例列表。

3. 隱蔽復雜性

我們盼望為用戶創(chuàng)造簡單、壯大的應用。在設(shè)計應用時，我們必要警惕鄭重地平衡這兩個目標。相比移動用戶，桌面用戶每每更風俗使勤奮能繁多的專業(yè)應用，比如，PowerPoint、Photoshop、SourceTree。但除非他們已經(jīng)是有經(jīng)驗的老用戶；否則，充斥著按鈕和專業(yè)詞匯的應用界面就像是布滿地雷的戰(zhàn)場，會令新手們望而生畏。假如我們盼望新用戶能更快上手、掌握基本功能，我們就必須想辦法把平時不常使用的的高級功能隱蔽起來，幫助新用戶把細致力先放在重要內(nèi)容上。

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

容易理解。模態(tài)對話框每每簡短易懂，新用戶可以快速完成對話框里的義務。
容易撤銷。假如新用戶一不警惕通過按鈕或菜單打開了模態(tài)對話框，他們可以隨時點擊「取消」。
容易導航。由于用戶仍可看到模態(tài)對話框下面的部分主視圖，他不會搞不清楚他在哪里。假如他不想繼承，可以隨時關(guān)閉對話框并回到之前的視圖。

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

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

假如用戶必要頻繁地在主視圖和對話框、重要義務和次要義務之間切換，非模態(tài)對話框會比模態(tài)對話框更合適。但是，非模態(tài)對話框可能會令用戶疑心。這是由于，盡管二者看起來特別很是相似，它們的舉動卻不一樣，并難以展望。

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

此外，由于非模態(tài)對話框不會隨著次要義務的結(jié)束而主動關(guān)閉，未及時關(guān)掉的非模態(tài)對話框可能虛耗屏幕空間。在 Page 中，用戶可以用一個非模態(tài)對話框在當前打開的文檔里查找內(nèi)容。假如用戶不自動關(guān)閉它，哪怕他不想繼承查找，這個對話框仍會出如今屏幕上。（當用戶打開第二個文檔時，Page 會關(guān)閉這個非模態(tài)對話框。用戶可以再次打開它。此時，這個非模態(tài)對話框的搜索范圍是當前活躍窗口里的內(nèi)容。）

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