對話框是彈出視圖，疊加在應(yīng)用程序的主視圖上，通常需要用戶做出反應(yīng)。對話框可分為模態(tài)對話框和無模式對話框。

模態(tài)防止用戶在當前視圖上完成任務(wù)，允許用戶專注于模態(tài)視圖中的新任務(wù);只有在模態(tài)視圖終止后，用戶才能繼續(xù)完成上一個任務(wù)。

在下面的示例中，提示框阻止用戶繼續(xù)查看地圖，允許用戶專注于提示;只有在用戶點擊確定后，用戶才能繼續(xù)查看地圖。提示框是iOS中常見的模式視圖之一。

什么是常規(guī)對話框？

大多數(shù)對話框由標題，按鈕和描述文本組成。如果對話框允許用戶鍵入或選擇，則還需要相關(guān)控件。

標題：對話框的標題應(yīng)該簡單易懂，一目了然。

按鈕：模態(tài)對話框中通常有兩個按鈕。一個是默認按鈕（例如，“確認”，“打印”，“清空回收箱”），另一個是“取消”按鈕。他們應(yīng)該給用戶明確的選擇。當用戶單擊任何按鈕時，模式對話框?qū)㈥P(guān)閉。為了提高熟練用戶的效率，我們應(yīng)該允許用戶按下Esc鍵來終止對話框（與“取消”按鈕的效果相同）。

解釋性文本：解釋性文本可以向用戶解釋對話框中的任務(wù)，這些任務(wù)應(yīng)該清晰并避免重復(fù)信息。

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

打開模態(tài)對話框時，除非模態(tài)對話框終止，否則用戶無法繼續(xù)執(zhí)行上一個任務(wù)。

在設(shè)計交互式界面時，我們應(yīng)該注意模態(tài)對話框的設(shè)計。精心設(shè)計的模態(tài)對話框可以幫助用戶更好地完成工作，而糟糕的模態(tài)對話框可能會讓用戶感到沮喪。 Alan Cooper將模態(tài)對話框與“支持角色”進行比較。在界面設(shè)計中。由于模態(tài)對話框會中斷用戶的流程，因此主要內(nèi)容和相關(guān)控件應(yīng)放在主視圖中，而不是分布在不同的模式對話框中。此外，當對話框分層放在另一個對話框之上時，它們通常會令人困惑。

△級聯(lián)對話通常令人困惑

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

如果使用得當，模態(tài)對話框可以幫助用戶完成任務(wù)并創(chuàng)建良好的用戶體驗。當您有以下要求時，請考慮使用模態(tài)對話框：

1.引起用戶的注意

當您希望用戶專注于重要任務(wù)時，您可能需要使用模態(tài)對話框。雖然用戶將被中斷，但很少有其他組件像模式對話框一樣得到用戶的全部注意。模態(tài)對話框通常位于界面最頂層的中間。用戶必須先處理模態(tài)對話框中的任務(wù)，然后才能處理其他任務(wù)。因此，用戶不太可能錯過它們。

在下面的示例中，當用戶刪除項目時，應(yīng)用程序啟動模式對話框以確認刪除給用戶。

2.顯示輔助內(nèi)容

從本質(zhì)上講，應(yīng)用程序旨在幫助用戶訪問特定內(nèi)容。例如，Evernote的內(nèi)容是一個注釋，Spotify的內(nèi)容是音樂。盡管有時難以清楚地區(qū)分主要內(nèi)容和次要內(nèi)容，但我們可以假設(shè)用戶最感興趣，最關(guān)注，并且最常訪問的是主要內(nèi)容，而其他內(nèi)容是次要內(nèi)容。

用戶來找內(nèi)容。因此，主要內(nèi)容和相關(guān)控件不應(yīng)出現(xiàn)在模態(tài)對話框中。對于桌面應(yīng)用程序，它們屬于應(yīng)用程序的主窗口（主窗口）;對于移動應(yīng)用程序，它們屬于應(yīng)用程序的屏幕;對于Web應(yīng)用程序，它們屬于應(yīng)用程序的頁面。在精心設(shè)計的信息架構(gòu)中，用戶可以輕松找到他們關(guān)心的內(nèi)容。

在屏幕尺寸有限的情況下，輔助內(nèi)容可以出現(xiàn)在模態(tài)對話框中。在特定上下文中，用戶將有機會打開這些對話框。例如，如果用戶選擇AWS EC2實例列表中的實例并從上下文菜單中單擊“添加/編輯標簽”，則會打開一個模態(tài)對話框。用戶可以在此對話框中查看和編輯實例的標記。如果用戶不想繼續(xù)查看和編輯標簽，他可以關(guān)閉對話框并返回上一界面。

有時用戶需要在多個上下文中打開相同的模式對話框。例如，除了上面提到的右鍵單擊菜單，用戶還可以單擊底部選項卡面板上的“添加/編輯標簽”按鈕以打開相同的模式對話框。無論哪種方式，用戶都可以快速回到他們關(guān)心的主要內(nèi)容—— AWS EC2的實例列表。

3.隱藏復(fù)雜性

我們希望為用戶創(chuàng)建簡單，功能強大的應(yīng)用程序。在設(shè)計應(yīng)用程序時，我們需要仔細平衡這兩個目標。與移動用戶相比，桌面用戶更習(xí)慣于使用各種專業(yè)應(yīng)用程序，如PowerPoint，Photoshop，SourceTree。但除非他們已經(jīng)有經(jīng)驗的老用戶;否則，充滿按鈕和專業(yè)詞匯的應(yīng)用界面就像一個充滿地雷的戰(zhàn)場，這將使新手氣餒。如果我們希望新用戶入門并更快地掌握基本功能，我們必須找到隱藏不常用的高級功能的方法，并幫助新用戶專注于主要內(nèi)容。

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

容易明白。模態(tài)對話框通常簡短易懂，新用戶可以快速完成對話框中的任務(wù)。

容易撤銷。如果新用戶通過按鈕或菜單意外打開模式對話框，他們可以隨時單擊“取消”。

易于導(dǎo)航。由于用戶仍然可以在模態(tài)對話框下方看到主視圖的一部分，因此他不知道他在哪里。如果他不想繼續(xù)，他可以隨時關(guān)閉對話框并返回上一個視圖。

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

打開無模式對話框時，用戶可以關(guān)注對話框中的輔助任務(wù)，也可以繼續(xù)主視圖中的主要任務(wù)。

如果用戶需要頻繁地在主視圖和對話框，主要任務(wù)和輔助任務(wù)之間切換，則無模式對話框比模態(tài)對話框更合適。但是，非模態(tài)對話框可能會讓用戶感到困惑。這是因為，盡管它們看起來非常相似，但它們的行為卻不同，難以預(yù)測。

例如，在模式對話框中，當用戶單擊下面的按鈕時，對話框?qū)㈥P(guān)閉。但是，在無模式對話框中，當用戶單擊該按鈕時，該對話框不會立即關(guān)閉。 （除非用戶主動點擊無模式對話框上的關(guān)閉控件。）

此外，由于無模式對話框不會隨著輔助任務(wù)的結(jié)束而自動關(guān)閉，因此未及時關(guān)閉的無模式對話框可能會浪費屏幕空間。在Page中，用戶可以使用無模式對話框查找當前打開的文檔中的內(nèi)容。如果用戶沒有主動關(guān)閉它，即使他不想繼續(xù)搜索，該對話框仍將出現(xiàn)在屏幕上。 （當用戶打開第二個文檔時，Page關(guān)閉無模式對話框。用戶可以再次打開它。此時，此無模式對話框的搜索范圍是當前活動窗口的內(nèi)容。）

為了避免這些問題，我們可以考慮使用其他非模態(tài)組件而不是非模態(tài)對話框，例如面板，側(cè)邊欄和工具欄。例如，Ulysses用面板替換非模態(tài)對話框。

« Html5有多強大？微型企業(yè)H5構(gòu)建站突出強度 | 掌握這些技能，使您的業(yè)務(wù)脫穎而出。 »