原文作者 ：Vitaly Dulenko  |  Wirex的產(chǎn)品設(shè)計(jì)師

翻譯：Elm

—————————————————————————————————————————————————

UI設(shè)計(jì)中“錯(cuò)誤提示”看上去只是很少的一部分，但是歸納整理出來其實(shí)很多，影響許多至關(guān)重要的功能，如果沒有設(shè)計(jì)好，那么將嚴(yán)重影響你的產(chǎn)品體驗(yàn)。

“錯(cuò)誤”時(shí)有發(fā)生。在App與生活中都會(huì)發(fā)生。有時(shí)是因?yàn)槲覀兎噶隋e(cuò)誤，有時(shí)是系統(tǒng)錯(cuò)誤。無論錯(cuò)誤原因是什么，它們——還有解決方式——對(duì)用戶體驗(yàn)影響深遠(yuǎn)。但它往往不被重視，草草處理錯(cuò)誤、組織混亂的錯(cuò)誤信息會(huì)使用戶沮喪，最終拋棄你的應(yīng)用。相反，處理得當(dāng)?shù)腻e(cuò)誤提示，能把失敗變?yōu)轶@喜。   

錯(cuò)誤是什么？

錯(cuò)誤（或者說錯(cuò)誤狀態(tài)）發(fā)生在app未能完成某個(gè)預(yù)期操作時(shí)，例如：

 

  ·  APP不理解用戶的輸入 

  ·  APP出錯(cuò)了

  ·  用戶試圖同時(shí)進(jìn)行兩個(gè)矛盾的操作

 

無論是誰引起的，每一種錯(cuò)誤對(duì)于用戶而言，都會(huì)成為一種阻礙。好在，設(shè)計(jì)良好的錯(cuò)誤處理能減少這種阻礙。

以下是每條錯(cuò)誤信息的3個(gè)重要組成部分

1、簡(jiǎn)明的信息（發(fā)生了什么）

2、正確的位置

3、良好的視覺設(shè)計(jì)

簡(jiǎn)明的信息（發(fā)生了什么）

1、錯(cuò)誤信息應(yīng)該明確（什么出錯(cuò)了，為什么？）

錯(cuò)誤消息應(yīng)該清楚地表達(dá)問題是什么，為什么會(huì)發(fā)生，以及如何處理它。將錯(cuò)誤消息視為與用戶的對(duì)話 ，確保錯(cuò)誤信息是寫給人看的。 要實(shí)現(xiàn)這一點(diǎn)，就得用用戶的語言來說話，避免使用技術(shù)術(shù)語，用用戶的詞匯來表達(dá)一切。驗(yàn)證信息要清晰陳述以下內(nèi)容

2、錯(cuò)誤信息應(yīng)對(duì)用戶有所幫助（用戶接下來該做什么來解決錯(cuò)誤）

如果只寫出錯(cuò)誤信息是不夠的，應(yīng)盡快向用戶提供解決錯(cuò)誤的方案。

例如，Microsoft描述了錯(cuò)誤，并在錯(cuò)誤消息中提供了解決方案，以便用戶可以立即解決此問題。

3、錯(cuò)誤信息應(yīng)針對(duì)具體情況

網(wǎng)站通常對(duì)所有驗(yàn)證失敗狀態(tài)使用一條錯(cuò)誤信息。將此電子郵件字段留空提示 “輸入有效的電子郵件地址”，沒有輸入“@”字符依然提示“輸入有效的電子郵件地址”。MailChimp以另一種方式執(zhí)行 - 它們針對(duì)每種電子郵件驗(yàn)證狀態(tài)有3條錯(cuò)誤信息。第一個(gè)檢查提交表單時(shí)輸入字段是否為空白。另外兩個(gè)檢查是否有“@”和“.”字符。并且“請(qǐng)輸入內(nèi)容”并不是合理的錯(cuò)誤信息，用戶不清楚要輸入什么樣的內(nèi)容。向用戶提示符合實(shí)際情況的信息，而不是所有情況都提示同一種信息。

4、友好的提示

不要責(zé)怪用戶做錯(cuò)了，即使他們真的做錯(cuò)了。還是要對(duì)你的用戶友好，讓他們感到舒適和方便。同時(shí)這也是一個(gè)提升品牌形象和辨識(shí)度的機(jī)會(huì)。

5.適當(dāng)?shù)氖褂糜哪?/strong>

在錯(cuò)誤信息中適當(dāng)使用幽默。在保證提示消息正確且沒有誤導(dǎo)的情況下可以在消息中添加一些幽默。這樣可以改善用戶體驗(yàn)。

正確的位置

好的錯(cuò)誤消息在需要時(shí)即可看到。避免將錯(cuò)誤信息放在不相關(guān)的元素旁，將錯(cuò)誤消息放在與其相關(guān)的UI元素旁邊。

良好的視覺設(shè)計(jì)

錯(cuò)誤信息應(yīng)清晰可見。使用對(duì)比度較大的文本和背景顏色，以便用戶可以輕松地注意和閱讀消息。

像往常一樣，紅色用于錯(cuò)誤消息文本。在某些情況下，黃色或橙色也可被用作錯(cuò)誤狀態(tài)，紅色對(duì)用戶來說太緊張。在這兩種情況下，請(qǐng)確保錯(cuò)誤文本清晰易讀，并與背景顏色形成鮮明對(duì)比。不要忘記在顏色旁邊提供相關(guān)圖標(biāo)，以改善色盲人士的可訪問性。

讓人注意到提示信息。圖片來源：Material Design

后記

錯(cuò)誤信息是改善用戶體驗(yàn)，展示品牌和個(gè)性的絕佳機(jī)會(huì)。注意錯(cuò)誤信息的所有方面 ： 語言、位置和視覺設(shè)計(jì)，使其錯(cuò)誤信息變得完美。

同時(shí)錯(cuò)誤信息是最佳方式引導(dǎo)用戶向正確方向前進(jìn)，第一時(shí)間預(yù)防錯(cuò)誤發(fā)生。但當(dāng)錯(cuò)誤確實(shí)發(fā)生時(shí)，設(shè)計(jì)精良的錯(cuò)誤處理，不僅能教育用戶按你預(yù)期的方式使用APP，還能防止用戶感到茫然。

感謝閱讀！