當(dāng)你正確設(shè)計(jì)和使用對(duì)話框的時(shí)候，對(duì)話框是非常有效的用戶界面元素。它能幫助用戶更快速便捷地完成他們的目標(biāo)。但使用不當(dāng)?shù)脑挘瑢?duì)話框同樣會(huì)令用戶困惑不已。清楚地了解怎樣正確設(shè)計(jì)對(duì)話框會(huì)讓你的用戶對(duì)對(duì)話框的功能一目了然。
什么是對(duì)話框？
對(duì)話框是覆蓋在頁面上的彈框，要求用戶與之交互，并從用戶處獲取反饋信息。對(duì)話框告訴用戶相關(guān)的關(guān)鍵信息，要求用戶做出選擇或者對(duì)多任務(wù)進(jìn)行處理。在應(yīng)用程 序上，網(wǎng)絡(luò)上，甚至在移動(dòng)端，對(duì)話框被越來越多地應(yīng)用于將用戶的注意力引導(dǎo)到一個(gè)特定的任務(wù)上，但不需要離開當(dāng)前的頁面。
Session過期提示
現(xiàn)在讓我們來結(jié)合相關(guān)的使用案例，概括一下在實(shí)踐中如何更好地設(shè)計(jì)對(duì)話框。
1. 減少中斷
盡量少使用對(duì)話框，因?yàn)閷?duì)話框會(huì)造成操作中斷。對(duì)話框的突然出現(xiàn)會(huì)強(qiáng)迫用戶中止當(dāng)前的任務(wù)，被迫聚焦對(duì)話框的內(nèi)容。用戶在進(jìn)行接下來的操作之前不得不先處理對(duì)話框，而且還不能訪問下面的頁面。有時(shí)候這是一件好事，比如當(dāng)用戶必須確認(rèn)一個(gè)重要的操作的時(shí)候。但大多數(shù)時(shí)候這是不必要的，甚至是令人頭疼的。
請(qǐng)求確認(rèn)
這是對(duì)話框使用得最有意義的情形——在你需要與用戶進(jìn)行交互之后才能繼續(xù)操作的地方，或者是錯(cuò)誤成本可能非常高的時(shí)候。
請(qǐng)求用戶確認(rèn)，告知用戶相關(guān)的情況
不要突然打開對(duì)話框
用戶還沒有進(jìn)行任何操作的時(shí)候就突然彈出對(duì)話框，是一種非常糟糕的想法。很多網(wǎng)站彈出的訂閱通知就是這種糟糕的例子.
這樣的對(duì)話框?yàn)闆]有鍵盤的用戶制造了無數(shù)的問題
一個(gè)對(duì)話框應(yīng)該總是基于用戶正在做（或者做過）的操作。這些操作可能是點(diǎn)擊一個(gè)按鈕，打開一個(gè)鏈接或者作一個(gè)選擇。
小結(jié)
a. 不是每一次選擇、設(shè)置，或者是查看詳情都需要以對(duì)話框的方式中斷。
b. 不論對(duì)話框是以菜單還是內(nèi)聯(lián)的方式展示，都應(yīng)該保留當(dāng)前的上下文。
c. 不要突然彈出對(duì)話框，以用戶可預(yù)知的方式來展現(xiàn)對(duì)話框。
2. 對(duì)話框與現(xiàn)實(shí)世界的匹配
對(duì)話框應(yīng)該使用用戶的語言（用戶熟悉的用詞、短語和概念），而不是特殊的系統(tǒng)術(shù)語。
明確的問題和選項(xiàng)
你應(yīng)該使用一個(gè)明確的問題或聲明，再在內(nèi)容區(qū)附帶上相關(guān)的解釋，比如說“擦除您的內(nèi)存？”或者“刪除您的賬戶？”。通常，你應(yīng)該避免道歉，用詞含糊，或者提出疑問，類似“警告！”，“您確定嗎？”
左邊的對(duì)話框提出了一個(gè)模糊的問題，并且影響范圍是不明確的。
右邊的對(duì)話框提出了一個(gè)特定的問題，描述了對(duì)用戶的影響，并且提供了明確的操作方式。
避免給用戶提供不明確的選項(xiàng)。你應(yīng)該只使用清晰的選項(xiàng)。在大多數(shù)情況下，用戶應(yīng)該只基于標(biāo)題和按鈕上的文本就能夠理解選項(xiàng)的意思。
反面例子：以下的否定選項(xiàng)“不”沒有說明之后將發(fā)生什么。
正面例子：肯定選項(xiàng)文本“丟棄”清楚地說明了決定的結(jié)果。
提供重要信息
對(duì)話框?qū)?duì)用戶有用的隱晦信息明確羅列出來是很重要的。舉例來說，一個(gè)對(duì)話框提示用戶確認(rèn)刪除某些項(xiàng)目，應(yīng)該將這些項(xiàng)目列出來。
這個(gè)對(duì)話框簡(jiǎn)潔地說明了操作將產(chǎn)生的影響
此外，還應(yīng)避免使用“了解更多”的方式來訪問幫助文檔；而應(yīng)該使用對(duì)話框的內(nèi)聯(lián)展示來替代。如果有更多的擴(kuò)展信息需要展示，在彈出對(duì)話框之前就應(yīng)該提供給用戶。
提供信息反饋
當(dāng)一個(gè)流程結(jié)束的時(shí)候，記得給用戶一個(gè)通知消息（或者視覺反饋），讓用戶知道她已經(jīng)完成了所有必要的操作。
小結(jié)
a. 在對(duì)話框中使用明確的問題和選項(xiàng)；
b. 在對(duì)話框中提供重要信息；
c. 在操作后給用戶以反饋。
3. 力求簡(jiǎn)潔
你不應(yīng)該試圖將太多內(nèi)容塞進(jìn)對(duì)話框。保持對(duì)話框干凈簡(jiǎn)單（遵循KISS原則，KISS，即Keep It Simple，Stupid）。但簡(jiǎn)約并不意味著信息不全，所有的信息都應(yīng)該是有價(jià)值和有關(guān)聯(lián)的。
大量的元素和選項(xiàng)
對(duì)話框絕不應(yīng)該在屏幕上只顯示一部分。你不應(yīng)該讓對(duì)話框出現(xiàn)滾動(dòng)條。
反面例子：巴克萊銀行支付處理對(duì)話框有很多的選項(xiàng)和元素，部分的選項(xiàng)只有滾屏之后才是可用的（尤其對(duì)那些屏幕相對(duì)較小的移動(dòng)端設(shè)備）。
正面例子：Stripe使用了一個(gè)簡(jiǎn)單且智能的對(duì)話框，只包含必要的信息，并且在桌面端和移動(dòng)端都有很好的展示。
大量的操作
對(duì)話框中不應(yīng)該包括兩個(gè)以上的操作。第三個(gè)操作，比如“了解更多”，將用戶引導(dǎo)離開了對(duì)話框，可能會(huì)留下沒有完成的任務(wù)。
“了解更多”操作引導(dǎo)用戶離開這個(gè)對(duì)話框，使流程處于一個(gè)不確定的狀態(tài)
不要在對(duì)話框中包含大量的步驟
將一個(gè)復(fù)雜的任務(wù)細(xì)分成多個(gè)步驟是個(gè)很不錯(cuò)的想法，但是這也意味著在一個(gè)對(duì)話框的范圍內(nèi)要完成的工作對(duì)用戶來說可能有些過于復(fù)雜。
如果一個(gè)交互操作非常復(fù)雜，需要多個(gè)步驟（就像下面的例子），那么就保證當(dāng)前的步驟就好了。
帶有多個(gè)步驟的對(duì)話框。來源：Dribbble。
小結(jié)
a. 如果你發(fā)現(xiàn)你正嘗試將很多元素塞進(jìn)一個(gè)對(duì)話框，這就意味著這個(gè)對(duì)話框并不是最好的設(shè)計(jì)方案；
b. 通過移除不支持用戶任務(wù)的不必要的元素或內(nèi)容來簡(jiǎn)化對(duì)話框；
c. 避免在對(duì)話框中放入多個(gè)步驟。
4. 選擇合適的對(duì)話框類型
對(duì)話框有兩種主要類型。第一種是用以尋求關(guān)注的模態(tài)對(duì)話框，這種對(duì)話框強(qiáng)迫用戶在繼續(xù)接下來的操作之前提供交互信息。模態(tài)對(duì)話框通常用于分散的，不連續(xù)的進(jìn)程：
(1) 為確定接下來的操作，周圍的上下文并不是必須的；
(2) 為了關(guān)閉對(duì)話框，需要明確的“接受”或“取消”操作。當(dāng)用戶選擇操作前，點(diǎn)擊對(duì)話框之外的地方對(duì)話框不會(huì)被關(guān)閉；
(3) 不允許出現(xiàn)用戶的進(jìn)程是未完成的狀態(tài)。
第二種類型是非模態(tài)對(duì)話框，允許用戶點(diǎn)擊對(duì)話框之外的地方來關(guān)閉對(duì)話框。
你應(yīng)該只對(duì)非常重要的交互操作（例如刪除賬戶、同意條款和條件選擇）使用模態(tài)對(duì)話框（第一種）。
模態(tài)對(duì)話框：用戶必須通過實(shí)際輸入“刪除”來確認(rèn)刪除操作
同樣移動(dòng)系統(tǒng)（本地）對(duì)話框也是模態(tài)的，通常包含以下幾個(gè)基本要素——內(nèi)容、操作，和標(biāo)題。
安卓模態(tài)對(duì)話框窗口
5. 保持視覺的一致性
對(duì)話框后面的背景
當(dāng)打開一個(gè)對(duì)話框時(shí)，背景變暗是很重要的。這起到兩個(gè)作用：一是將用戶的注意力引導(dǎo)到對(duì)話框上，二是讓用戶知道頁面當(dāng)前是不活動(dòng)的。
安卓的模態(tài)對(duì)話框
明確關(guān)閉選項(xiàng)
在對(duì)話框的右上角上應(yīng)該有一個(gè)關(guān)閉選項(xiàng)。許多對(duì)話框在窗口的角落有一個(gè)“X”按鈕，用戶點(diǎn)擊它可以退出窗口。然而，對(duì)很多用戶來說，通過“X”按鈕退出窗口并不是一件非常簡(jiǎn)單的事。因?yàn)?ldquo;X”按鈕通常很小，用戶不得不移到當(dāng)前位置，并且準(zhǔn)確的點(diǎn)擊它。
讓用戶通過點(diǎn)擊對(duì)話框以外的背景區(qū)域來退出非模態(tài)窗口是一個(gè)非常不錯(cuò)的主意。
Twitter使用“X”關(guān)閉按鈕和點(diǎn)擊背景兩種方式退出窗口
避免對(duì)話框疊加對(duì)話框
對(duì)話框應(yīng)該避免彈出附加的對(duì)話框，這會(huì)增加網(wǎng)站或者app的景深，增加視覺復(fù)雜性。
反面例子：對(duì)話框疊加對(duì)話框
小結(jié)
a. 允許用戶通過點(diǎn)擊“X”按鈕或點(diǎn)擊背景等多種方式退出對(duì)話框（模態(tài)對(duì)話框除外）。
b. 應(yīng)該避免對(duì)話框彈出對(duì)話框。
總結(jié)
我希望這些非常好的實(shí)踐是有趣并且對(duì)原型設(shè)計(jì)是有用的。記住，用戶體驗(yàn)是關(guān)于人的，而不是技術(shù)。為你的用戶找到最好的交互方式也是很簡(jiǎn)單的：模型化主要的對(duì)話框，并通過幾個(gè)用戶來對(duì)結(jié)果進(jìn)行測(cè)試。
謝謝！
