在UI設計中，友好的對話框設計會使人機交互更高效，可以用戶更方便、快捷的得到web頁(或APP)想傳達給用戶的信息。但是如果設計的不好，那么對話框不但不能給用戶帶來便捷，反而會影響用戶對信息的理解。為了讓用戶不受到困擾，我們應該了解如何才能設計好對話框。

什么是對話框？

對話框是一種覆蓋式的，指引用戶信息交互的設計。告知用戶重要信息，并且讓用戶做出決定，或者做出相應的選擇。不管是在web，還是在app中或是移動端，對話框的作用就是將用戶的注意力從屏幕轉移到作者想要用戶專注的內容上。

那么，就讓我用實踐和案例來說明。

1.減少對話框的干擾

盡量減少使用對話框，因為它很容易打斷用戶思路。對話框的彈窗很容易讓用戶將注意力從既有的內容跳轉到對話框的內容。用戶必須處理完對話框的內容才能繼續先前的閱讀。或許有時這是一件好事，比如某些時候用戶必須要確認某些重要的決定或是行為。但是在大多時候，頻繁使用對話框是沒必要甚至是很惹人煩的。

對話框是對信息的一種認可

使用對話框的場景往往是需要用戶在繼續某項之前作出決定。或者是繼續下去會導致錯誤的成本很高的情況下才要使用對話框。

不要突然彈出對話框

在用戶未完成某項任務的時候突然彈出對話框是非常不明智的行為。就像許多網站沒完沒了的彈出訂閱對話框是非常惱人的一件事。

一個對話框的彈出一定是基于用戶正要或者做完了某事之后。內容應當是一個確認鈕，一個超鏈接或是某些選項。

小貼士

不是每一個選擇，設置，或細節都要打斷用戶。

對話框是可以被菜單和內聯展開所取代的，這樣可以保持內容的完整，連貫性。

不要將對話框突然彈出，每次彈出一定是用戶可預知的。

2.對話框表達要盡量貼近真實

對話框的內容要盡量用自然的語言描述（用那些用戶熟知的文字，詞匯和概念來描述），而不是用一些特殊的系統語言。

使用明晰的問題和選項

你應當在解釋問題或表達內容時使用清晰的語言或是聲明，比如：“確定要抹掉磁盤？”或者“確定要刪除您的賬戶？”通常，你應當避免道歉性質或是有歧義的文字，盡量避免使用問句。（比如：“警告！”或者“你確定要這樣嗎？”）

避免當前用戶讀到的是模棱兩可的選項內容。你必須細化，明確你的選項內容。大部分的案例是用戶必須通過標題或者按鈕上的文字就能理解內容。

舉個例子（反面）：

像“否”這樣的選項只是否定了選項，并沒有告知用戶會有怎樣的后果。

再舉個正面的例子：

“舍棄”這樣的選項明確告知了用戶點擊后會是怎樣的結果。

為用戶提供重要的信息

不要使用晦澀的語言來描述，這點很重要，一定要告知用戶最有用的信息。舉個例子：對話框的內容如果是告知用戶要刪除，那么請列舉出要刪除的內容。

你還要盡量避免在幫助文檔中使用“了解更多”的行為選項。相對來說內聯式的模式可能在這里更適合。如果有大量的信息需要顯示，那么應該在先前的對話框就要提示。

提供有用的反饋

當一個進程結束的時候，一定記得要顯示一個通知消息（或者一個可視的反饋）。一定要讓用戶知道他所做的事情成功了。

小貼士

在對話框中使用明確、清晰的文字來描述問題或選項。

對話要首尾呼應（閉合）。

在用戶行為結束后一定要告知用戶。

3.力爭做到最簡單

不要嘗試著把什么信息都塞入對話框，盡量保持對話框的干凈與整潔（KISS 原則：Keep It Simple Stupid 大道至簡）。但是極簡并不代表著限制，那些必需的信息還是要呈現給用戶的。

元素和選項的數量

對話框不要信息只顯示一半，不要在對話框上還使用滾動條。

舉個反面例子：巴克萊銀行的支付系統的對話框里有太多的選項和元素，一些選項只有在滾動的時候才能看到（特別是在像移動設備這樣的小屏幕上）。

舉個正面的例子：Stripe 公司的對話框設計的非常合理，對用戶只顯示那些最基本且必要的信息，不管是在web端還是在小屏的移動端上顯示都非常友善。

行為的數量

一個對話框上不要出現大于2個的行為,當有第三個行為時（像“了解更多”這樣的），應當避免出現在同一個對話框中，否則讓人會有未完成的感覺。

一個對話框中不要存在多個步驟

把一個復雜的問題拆解成多個步驟來解決是一個好方法，但要求用戶在一個對話框的范圍內完成答題會讓用戶覺得太復雜。

如果一個交互太復雜，需要許多步才能完成（就像下面的例子），那么它需要一個足以承載它復雜程度的頁面來顯示。

小貼士

如果你發現你設計的對話框承載了太多的元素，那么通常來說這不是一個好的設計。

你可以通過去除不必要的元素或者對用戶無用的內容來簡化你的對話框設計。

避免在對話框設計中使用太多步驟。

4.選擇合理的對話框形式

對話框通常有2種主要形式，第一種類型是讓用戶的注意力集中的模態對話框，強制用戶在下一步之前與他們進行互動。模態對話框通常用于阻斷間隔進程，其中：

它不取決于周圍環境是否會引導行為的執行。

它需要明確的指示來關閉，比如“同意”或者“取消”。當點擊其他范圍時他不應被關閉。

它的設計必須引導用戶完成一個完整的進程。

第二種類型是非模態對話框，通俗的講就是用戶在空白處點擊可以關閉的對話框。

當使用模態對話框時（第一種），一定有非常重要的信息需要用戶來確認。（比如刪除帳戶，或者變更某種狀態時）。

當然，移動系統（原生）的對話框形式通常是包含以下元素的：標題、內容、行為按鈕。

5.視覺的連貫性

對話框置于背景之前

當打開一個對話框時，背景應當適當的變暗。這樣做有兩個好處，意識讓用戶的注意力集中到對話框的內容上，二是告知用戶當前的對話框才是被激活的界面（而不是背景）。

清晰的關閉選項

通常的，在對話框的右上角應當有個明確的關閉鈕（譯者注：Mac os的規范在左邊）。大部分的對話框在右上角（左上角）會放置一個“X”形的按鈕以關閉或退出當前對話框。然而，對于普通用戶來說，“X”鈕還不夠簡便，因為用戶可能花費更多的時間和精力以將鼠標聚焦在小小的“X”鈕上以便點擊。

最好的方法是使用非模態對話框，當用戶點擊空白或外部區域時，用戶也可以方便地退出當前對話框。

避免對話框中再加載對話框

在對話框中就不要再加載額外的對話框了，在網站或者APP內疊加對話框，會增加Z軸上的冗余，使用戶感覺到視覺上的復雜。

小貼士

允許用戶在更廣泛的區域點擊以退出對話框（模態對話框除外）。

對話框中不要再加載冗余的對話框了。

結論

我希望這些有趣的實踐在你做原型是能幫助到你。記著，用戶體驗的根本是人而不是技術。你會輕易發現什么設計才是對用戶的最優解，多模擬，多測試，那么你一定能設計出讓人愉悅的交互。

謝謝！