凡是系統(tǒng)都會(huì)出現(xiàn)暫停工作的時(shí)候，設(shè)計(jì)一個(gè)合理的錯(cuò)誤提示信息就十分重要了。那么如何設(shè)計(jì)呢？文章就此展開(kāi)了分享。

每個(gè)系統(tǒng)都會(huì)出現(xiàn)暫停工作的時(shí)候，它可能是用戶的錯(cuò)誤操作或系統(tǒng)故障導(dǎo)致的。在這兩種情況下，設(shè)計(jì)一個(gè)完美的錯(cuò)誤信息尤為重要，因?yàn)樗苡行岣哂脩趔w驗(yàn)。如何制作一個(gè)完美的錯(cuò)誤信息？它往往包含以下3個(gè)重要部分：

• 清楚的文本信息。
• 正確的放置。
• 良好的視覺(jué)設(shè)計(jì)。

第一部分：清楚的文本信息

1.錯(cuò)誤信息應(yīng)該清楚明了

錯(cuò)誤信息應(yīng)該明確告訴用戶問(wèn)題是什么，為什么會(huì)發(fā)生，以及如何處理。首先你要將錯(cuò)誤信息視為與用戶的對(duì)話 – 它應(yīng)該看起來(lái)更加人性化。其次要確保你的錯(cuò)誤信息有禮貌，可理解，友好和易懂。

2. 錯(cuò)誤信息應(yīng)該是有幫助的

在錯(cuò)誤信息中只是指出錯(cuò)誤是不夠的，還需提示用戶如何快速簡(jiǎn)單地解決問(wèn)題。

例如，微軟在消息中描述錯(cuò)誤的同時(shí)還提供了解決方案，以便用戶可以立即解決此問(wèn)題。

3. 在特定情況下顯示相應(yīng)錯(cuò)誤信息

網(wǎng)站通常只會(huì)在驗(yàn)證狀態(tài)中使用錯(cuò)誤消息。如果你將電子郵件地址填寫(xiě)一欄留空，錯(cuò)誤消息會(huì)提示你“輸入有效的電子郵件地址”，當(dāng)你漏掉了“@”字符時(shí)也會(huì)提示“輸入有效的電子郵件地址”。

MailChimp則由另外一種方式執(zhí)行，它們對(duì)于電子郵件驗(yàn)證狀態(tài)都有3個(gè)錯(cuò)誤消息。 第一個(gè)在提交表單時(shí)檢查輸入字段是否為空。 另外兩個(gè)檢查是否有“@”和“?！弊址?。（但是“請(qǐng)輸入一個(gè)值”并不是錯(cuò)誤信息寫(xiě)入的一個(gè)好例子，用戶并不清楚需要輸入什么值）。給用戶展示的不是籠統(tǒng)的信息。

4. 錯(cuò)誤信息用語(yǔ)應(yīng)該禮貌

即使用戶在操作中失誤，也不要想著去責(zé)怪他們。對(duì)待用戶要有禮貌，讓他們感到舒適方便。這是一個(gè)傳播品牌聲音的好機(jī)會(huì)，通過(guò)添加個(gè)性的錯(cuò)誤信息提示，讓用戶對(duì)你們的品牌更加印象深刻。

5. 適當(dāng)運(yùn)用詼諧語(yǔ)言

在錯(cuò)誤信息中使用幽默語(yǔ)言需謹(jǐn)慎，切記分清主次。首先，確保錯(cuò)誤信息為用戶提供信息和幫助。其次，在恰當(dāng)?shù)臅r(shí)候添加一些詼諧的語(yǔ)言可以有效提高用戶體驗(yàn)。

第二部分：正確放置錯(cuò)誤消息

一個(gè)成功的錯(cuò)誤信息是往往在你需要的地方出現(xiàn)。避免錯(cuò)誤信息對(duì)用戶造成誤導(dǎo)，將錯(cuò)誤消息放在與他們相關(guān)的UI元素旁邊。

第三部分：錯(cuò)誤信息須有正確的視覺(jué)設(shè)計(jì)

成功的錯(cuò)誤消息除了文本應(yīng)清晰可見(jiàn)，正確的視覺(jué)設(shè)計(jì)也至關(guān)重要。視覺(jué)設(shè)計(jì)通過(guò)使用對(duì)比文本和背景顏色，以便用戶可以輕松地注意并閱讀消息。通常情況下，紅色用于錯(cuò)誤消息文本。但在某些情況下，也使用黃色或橙色，因?yàn)榧t色對(duì)用戶來(lái)說(shuō)壓力太大。在這兩種情況下，都要確保錯(cuò)誤文本清晰可辨，與其背景顏色有明顯的對(duì)比。不要忘記提供顏色旁邊的相關(guān)圖標(biāo)，以提高色盲人群使用的無(wú)障礙水平。

結(jié)論

錯(cuò)誤消息是改善用戶體驗(yàn)，傳播品牌聲音和獨(dú)特品牌個(gè)性的絕佳機(jī)會(huì)。一個(gè)成功的錯(cuò)誤消息必須注意語(yǔ)言，位置和視覺(jué)設(shè)計(jì)這三方面，這樣才能使你的錯(cuò)誤消息變得更加完美！

原文作者： Vitaly Dulenko

原文鏈接：https://uxplanet.org/how-to-write-a-perfect-error-message-da1ca65a8f36

本文由@Mockplus團(tuán)隊(duì) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議