當你正確設計和使用對話框的時候，對話框是非常有效的用戶界面元素。它能幫助用戶更快速便捷地完成他們的目標。但使用不當的話，對話框同樣會令用戶困惑不已。清楚地了解怎樣正確設計對話框會讓你的用戶對對話框的功能一目了然。

 

什么是對話框？

對話框是覆蓋在頁面上的彈框，要求用戶與之交互，并從用戶處獲取反饋信息。對話框告訴用戶相關的關鍵信息，要求用戶做出選擇或者對多任務進行處理。在應用程 序上，網絡上，甚至在移動端，對話框被越來越多地應用于將用戶的注意力引導到一個特定的任務上，但不需要離開當前的頁面。

 

Session過期提示

 

現在讓我們來結合相關的使用案例，概括一下在實踐中如何更好地設計對話框。

 

1. 減少中斷

盡量少使用對話框，因為對話框會造成操作中斷。對話框的突然出現會強迫用戶中止當前的任務，被迫聚焦對話框的內容。用戶在進行接下來的操作之前不得不先處理對話框，而且還不能訪問下面的頁面。有時候這是一件好事，比如當用戶必須確認一個重要的操作的時候。但大多數時候這是不必要的，甚至是令人頭疼的。

 

請求確認

這是對話框使用得最有意義的情形——在你需要與用戶進行交互之后才能繼續操作的地方，或者是錯誤成本可能非常高的時候。

請求用戶確認，告知用戶相關的情況

 

不要突然打開對話框

用戶還沒有進行任何操作的時候就突然彈出對話框，是一種非常糟糕的想法。很多網站彈出的訂閱通知就是這種糟糕的例子.

這樣的對話框為沒有鍵盤的用戶制造了無數的問題

一個對話框應該總是基于用戶正在做（或者做過）的操作。這些操作可能是點擊一個按鈕，打開一個鏈接或者作一個選擇。

 

小結

a. 不是每一次選擇、設置，或者是查看詳情都需要以對話框的方式中斷。

b. 不論對話框是以菜單還是內聯的方式展示，都應該保留當前的上下文。

c. 不要突然彈出對話框，以用戶可預知的方式來展現對話框。

 

2.  對話框與現實世界的匹配

對話框應該使用用戶的語言（用戶熟悉的用詞、短語和概念），而不是特殊的系統術語。

 

明確的問題和選項

你應該使用一個明確的問題或聲明，再在內容區附帶上相關的解釋，比如說“擦除您的內存？”或者“刪除您的賬戶？”。通常，你應該避免道歉，用詞含糊，或者提出疑問，類似“警告！”，“您確定嗎？”

 

左邊的對話框提出了一個模糊的問題，并且影響范圍是不明確的。

右邊的對話框提出了一個特定的問題，描述了對用戶的影響，并且提供了明確的操作方式。

避免給用戶提供不明確的選項。你應該只使用清晰的選項。在大多數情況下，用戶應該只基于標題和按鈕上的文本就能夠理解選項的意思。

 

反面例子：以下的否定選項“不”沒有說明之后將發生什么。

 

正面例子：肯定選項文本“丟棄”清楚地說明了決定的結果。

 

提供重要信息

對話框將對用戶有用的隱晦信息明確羅列出來是很重要的。舉例來說，一個對話框提示用戶確認刪除某些項目，應該將這些項目列出來。

這個對話框簡潔地說明了操作將產生的影響

 

此外，還應避免使用“了解更多”的方式來訪問幫助文檔；而應該使用對話框的內聯展示來替代。如果有更多的擴展信息需要展示，在彈出對話框之前就應該提供給用戶。

 

提供信息反饋

當一個流程結束的時候，記得給用戶一個通知消息（或者視覺反饋），讓用戶知道她已經完成了所有必要的操作。

 

小結

a. 在對話框中使用明確的問題和選項；

b. 在對話框中提供重要信息；

c. 在操作后給用戶以反饋。

 

3.  力求簡潔

你不應該試圖將太多內容塞進對話框。保持對話框干凈簡單（遵循KISS原則，KISS，即Keep It Simple，Stupid）。但簡約并不意味著信息不全，所有的信息都應該是有價值和有關聯的。

 

大量的元素和選項

對話框絕不應該在屏幕上只顯示一部分。你不應該讓對話框出現滾動條。

 

反面例子：巴克萊銀行支付處理對話框有很多的選項和元素，部分的選項只有滾屏之后才是可用的（尤其對那些屏幕相對較小的移動端設備）。

 

正面例子：Stripe使用了一個簡單且智能的對話框，只包含必要的信息，并且在桌面端和移動端都有很好的展示。

 

大量的操作

對話框中不應該包括兩個以上的操作。第三個操作，比如“了解更多”，將用戶引導離開了對話框，可能會留下沒有完成的任務。

“了解更多”操作引導用戶離開這個對話框，使流程處于一個不確定的狀態

 

不要在對話框中包含大量的步驟

將一個復雜的任務細分成多個步驟是個很不錯的想法，但是這也意味著在一個對話框的范圍內要完成的工作對用戶來說可能有些過于復雜。

 

如果一個交互操作非常復雜，需要多個步驟（就像下面的例子），那么就保證當前的步驟就好了。

帶有多個步驟的對話框。來源：Dribbble。

小結

a. 如果你發現你正嘗試將很多元素塞進一個對話框，這就意味著這個對話框并不是最好的設計方案；

b. 通過移除不支持用戶任務的不必要的元素或內容來簡化對話框；

c. 避免在對話框中放入多個步驟。

 

4.  選擇合適的對話框類型

對話框有兩種主要類型。第一種是用以尋求關注的模態對話框，這種對話框強迫用戶在繼續接下來的操作之前提供交互信息。模態對話框通常用于分散的，不連續的進程：

(1) 為確定接下來的操作，周圍的上下文并不是必須的；

(2) 為了關閉對話框，需要明確的“接受”或“取消”操作。當用戶選擇操作前，點擊對話框之外的地方對話框不會被關閉；

(3) 不允許出現用戶的進程是未完成的狀態。

 

第二種類型是非模態對話框，允許用戶點擊對話框之外的地方來關閉對話框。

 

你應該只對非常重要的交互操作（例如刪除賬戶、同意條款和條件選擇）使用模態對話框（第一種）。

模態對話框：用戶必須通過實際輸入“刪除”來確認刪除操作

 

同樣移動系統（本地）對話框也是模態的，通常包含以下幾個基本要素——內容、操作，和標題。

安卓模態對話框窗口

 

5. 保持視覺的一致性

對話框后面的背景

當打開一個對話框時，背景變暗是很重要的。這起到兩個作用：一是將用戶的注意力引導到對話框上，二是讓用戶知道頁面當前是不活動的。

安卓的模態對話框

 

明確關閉選項

在對話框的右上角上應該有一個關閉選項。許多對話框在窗口的角落有一個“X”按鈕，用戶點擊它可以退出窗口。然而，對很多用戶來說，通過“X”按鈕退出窗口并不是一件非常簡單的事。因為“X”按鈕通常很小，用戶不得不移到當前位置，并且準確的點擊它。

 

讓用戶通過點擊對話框以外的背景區域來退出非模態窗口是一個非常不錯的主意。

 

Twitter使用“X”關閉按鈕和點擊背景兩種方式退出窗口

 

避免對話框疊加對話框

對話框應該避免彈出附加的對話框，這會增加網站或者app的景深，增加視覺復雜性。

 

反面例子：對話框疊加對話框

小結

a. 允許用戶通過點擊“X”按鈕或點擊背景等多種方式退出對話框（模態對話框除外）。

b. 應該避免對話框彈出對話框。

 

總結

我希望這些非常好的實踐是有趣并且對原型設計是有用的。記住，用戶體驗是關于人的，而不是技術。為你的用戶找到最好的交互方式也是很簡單的：模型化主要的對話框，并通過幾個用戶來對結果進行測試。

 

謝謝！