當(dāng)你正確設(shè)計和使用對話框的時候，對話框是非常有效的用戶界面元素。它能幫助用戶更快速便捷地完成他們的目標(biāo)。但使用不當(dāng)?shù)脑挘瑢υ捒蛲瑯訒钣脩衾Щ蟛灰?。清楚地了解怎樣正確設(shè)計對話框會讓你的用戶對對話框的功能一目了然。

 

什么是對話框？

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

 

Session過期提示

 

現(xiàn)在讓我們來結(jié)合相關(guān)的使用案例，概括一下在實踐中如何更好地設(shè)計對話框。

 

1. 減少中斷

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

 

請求確認

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

請求用戶確認，告知用戶相關(guān)的情況

 

不要突然打開對話框

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

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

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

 

小結(jié)

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

b. 不論對話框是以菜單還是內(nèi)聯(lián)的方式展示，都應(yīng)該保留當(dāng)前的上下文。

c. 不要突然彈出對話框，以用戶可預(yù)知的方式來展現(xiàn)對話框。

 

2.  對話框與現(xiàn)實世界的匹配

對話框應(yīng)該使用用戶的語言（用戶熟悉的用詞、短語和概念），而不是特殊的系統(tǒng)術(shù)語。

 

明確的問題和選項

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

 

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

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

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

 

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

 

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

 

提供重要信息

對話框?qū)τ脩粲杏玫碾[晦信息明確羅列出來是很重要的。舉例來說，一個對話框提示用戶確認刪除某些項目，應(yīng)該將這些項目列出來。

這個對話框簡潔地說明了操作將產(chǎn)生的影響

 

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

 

提供信息反饋

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

 

小結(jié)

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

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

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

 

3.  力求簡潔

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

 

大量的元素和選項

對話框絕不應(yīng)該在屏幕上只顯示一部分。你不應(yīng)該讓對話框出現(xiàn)滾動條。

 

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

 

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

 

大量的操作

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

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

 

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

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

 

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

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

小結(jié)

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

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

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

 

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

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

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

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

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

 

第二種類型是非模態(tài)對話框，允許用戶點擊對話框之外的地方來關(guān)閉對話框。

 

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

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

 

同樣移動系統(tǒng)（本地）對話框也是模態(tài)的，通常包含以下幾個基本要素——內(nèi)容、操作，和標(biāo)題。

安卓模態(tài)對話框窗口

 

5. 保持視覺的一致性

對話框后面的背景

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

安卓的模態(tài)對話框

 

明確關(guān)閉選項

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

 

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

 

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

 

避免對話框疊加對話框

對話框應(yīng)該避免彈出附加的對話框，這會增加網(wǎng)站或者app的景深，增加視覺復(fù)雜性。

 

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

小結(jié)

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

b. 應(yīng)該避免對話框彈出對話框。

 

總結(jié)

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

 

謝謝！