From 247ecfb4afcf41d5db2512c0fc64be3f7228c8f2 Mon Sep 17 00:00:00 2001 From: cherry <991939332@qq.com> Date: Fri, 18 Aug 2017 11:51:57 +0800 Subject: [PATCH 1/4] TODO/how-to-write-a-perfect-error-message.md --- TODO/how-to-write-a-perfect-error-message.md | 59 +++++++++----------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/TODO/how-to-write-a-perfect-error-message.md b/TODO/how-to-write-a-perfect-error-message.md index f63a051c9c4..9f2edaf60cc 100644 --- a/TODO/how-to-write-a-perfect-error-message.md +++ b/TODO/how-to-write-a-perfect-error-message.md @@ -6,69 +6,64 @@ > * 译者： > * 校对者： - # How to Write a Perfect Error Message +# 怎么写出完美的错误消息 + +![](https://cdn-images-1.medium.com/max/2000/1*xzoYpYHX1Cgb9cuUi6w-LQ.png) - ![](https://cdn-images-1.medium.com/max/2000/1*xzoYpYHX1Cgb9cuUi6w-LQ.png) +每一个系统都会出现错误。这可能是用户的错误也可能是系统的错误。在这两种情况下，正确处理错误非常重要，因为它们对于良好的用户体验至关重要。 -Every system can’t work without errors. It can be user’s errors or system’s fails. In both cases, it’s very important to handle errors in a right way as they are crucial for a good user experience. +**下面是每个好的错误消息的 3 个重要部分：** -**Here are 3 vital parts of every good error message:** -1. Clear text message. -2. Right placement. -3. Good visual design. +1. 明确的文字信息。 +2. 显示在合适的位置。 +3. 好的视觉设计。 -### **Clear text** message +### **明确地文字**信息 -#### 1. Error message should be clear +#### 1. 错误消息应该明确 -The error messages should clearly define what the problem was, why it happened, and what to do about it. Think of your error message as a conversation with your user — it should sound like they’ve been written for humans. Make sure your error message is polite, understandable, friendly and jargon-free. +错误消息应该明确地定义是什么错误，错误是怎样发生的并且应该怎样处理。将错误消息想象为你和用户之间的对话：这就应该使得错误消息被拟人化。确保你的错误消失是礼貌的、易懂的、友好的和无术语的。 ![](https://cdn-images-1.medium.com/max/1600/1*2RdNRoDJmqfArWaViXal-g.png) -#### 2. Error message should be helpful +#### 2. 错误信息应该是有用的 +只告诉用户一些地方出错了是不够的。你要告诉读者怎样才能又快又方便的解决问题。 -It’s not enough to write that something went wrong. Show the users the way how to fix it as soon and easy as possible. - -For example, Microsoft describes what’s wrong and provides a solution in the error message so you can immediately fix this issue. +例如，微软描述了错误，并在错误消息中提供了一个解决方案，这样你就可以立即修复这个问题。 ![](https://cdn-images-1.medium.com/max/1600/1*9eTjcpNOWtE7pEWXpiPivA.png) -#### 3. Error message should be specific to the situation - -Very often websites use only one error message for all validation states. You left this email field blank — “Enter a valid email address”, you missed the “@” character — “Enter a valid email address”. The MailChimp does it in another way — they have 3 error messages for each state of email validation. The first one checks if the input field isn’t blank when submitting the form. The other two check if there is “@” and “.” characters. (However “Please enter a value” isn’t a great example of the error writing, it is unclear what kind of value you need to enter.) Show your users actual messages instead of general ones. +#### 3. 错误消息应该针对具体情况 +很多时候，网站对于所有的验证状态只使用一条错误消息。你没有填写邮箱提示“Enter a valid email address”，你没有使用“@”符号也是提示“Enter a valid email address”。MailChimp 处理这种情况有另一种方式：他们有 3 个错误消息对应不同的邮箱验证状态。第一种情况是检查是否有“@”符号和“.”符号（“Please enter a value”并不是一个很好的例子，因为还并不清楚你需要输入什么样的值。） 向用户显示实际的错误消息，而不是通用的错误消息。 ![](https://cdn-images-1.medium.com/max/1600/1*cbmeYu8zkwhuw-I6fxn5gQ.png) -#### 4. Error message should be polite - -Don’t blame your users that they did something wrong even if they did. Be polite to your user, make them feel comfortable and convenient. It’s a great opportunity to use your brand voice and add personality into the errors. +#### 4. 错误信息应该是礼貌的 +如果你的用户犯了错误请不要粗鲁的对待他们。对你的用户客气一点，让他们感觉舒适和方便。使用你品牌的声音和个性化的错误消息是一个好的选择。 ![](https://cdn-images-1.medium.com/max/1600/1*4C2I4mLoV7A2Xclp5xXYmg.png) -#### 5. Use humor if it’s appropriate - -Be careful using humor in your error message. First of all the error message should be informative and helpful. Then you can improve user experience adding some humor in your error message if it’s appropriate. +#### 5. 适当的时候使用幽默的语言 +在你的错误消息中小心地使用幽默。首先，错误信息应该是提供信息和有用的。然后，您可以改进用户体验，如果适当的话，在错误消息中添加一些幽默性。 ![](https://cdn-images-1.medium.com/max/1600/1*cVp9802WuM8W1pb4kSRH-A.png) -### The right place for error messages - -The good error message is that one you can see when needed. Avoid error summaries, place error messages next to the UI elements they are related to. +### 将错误消息放置在合适的位置 +好的错误信息是在需要时可以看到的错误信息。避免错误摘要，在与它们相关的 UI 元素旁边放置错误消息。 ![](https://cdn-images-1.medium.com/max/1600/1*90bO1c3llbghosgQTH0hwA.png) -### The right visual design for the error message - -The error message should be clearly visible. Use contrast text and background colors so the user can easily notice and read the message. +### 为错误消息提供合适的视觉设计 +错误消息应该清晰可见。使用对比强烈的文本颜色和背景颜色，这样用户就可以很容易地注意到和阅读消息。 -As usual, the red color is used for error message text. In some cases, yellow or orange colors are used as some resources state that red color is too stressful for users. In both cases, be sure that the error text is legible, with noticeable contrast against its background color. Don’t forget to provide a related icon alongside the color to improve the accessibility for people with color-blindness. +通常情况下，红色用于错误消息文本。在某些情况下，使用黄色或橙色作为某些资源状态因为红色对用户来说过于紧张。在这两种情况下，请确保错误文本是易读的，与背景颜色有明显的对比。别忘了在颜色旁边提供一个相关的图标，帮助盲人阅读。 ![](https://cdn-images-1.medium.com/max/1600/1*Gny4mwee7oJL1vQsNgJhkg.png) ### Conclusion - -Error messages are a great opportunity to improve user experience, share your brand voice and personality. Pay attention to all aspects of a good error message — the language, placement, and visual design to make it a really perfect. +### 结语 +错误消息是改善用户体验、分享您的品牌声音和个性的绝佳机会。注重良好的错误消息，在语言、布局和视觉设计等各个方面。使它成为一个真正的完美的产品。 --- From 6ca6392dc46004223785d3b03e343e22341b9187 Mon Sep 17 00:00:00 2001 From: Cherry <991939332@qq.com> Date: Sun, 20 Aug 2017 11:27:54 +0800 Subject: [PATCH 2/4] Update how-to-write-a-perfect-error-message.md --- TODO/how-to-write-a-perfect-error-message.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/TODO/how-to-write-a-perfect-error-message.md b/TODO/how-to-write-a-perfect-error-message.md index 9f2edaf60cc..3df62dc8318 100644 --- a/TODO/how-to-write-a-perfect-error-message.md +++ b/TODO/how-to-write-a-perfect-error-message.md @@ -3,8 +3,8 @@ > * 原文作者：[Vitaly Dulenko](https://uxplanet.org/@atko_o) > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/how-to-write-a-perfect-error-message.md](https://github.com/xitu/gold-miner/blob/master/TODO/how-to-write-a-perfect-error-message.md) - > * 译者： - > * 校对者： + > * 译者： [Cherry](https://github.com/sunshine940326) + > * 校对者：[lampui](https://github.com/lampui) # 怎么写出完美的错误消息 @@ -12,11 +12,11 @@ 每一个系统都会出现错误。这可能是用户的错误也可能是系统的错误。在这两种情况下，正确处理错误非常重要，因为它们对于良好的用户体验至关重要。 -**下面是每个好的错误消息的 3 个重要部分：** +**一个好的错误消息应该包括下面这 3 个重要部分：** 1. 明确的文字信息。 -2. 显示在合适的位置。 +2. 合适的显示位置。 3. 好的视觉设计。 ### **明确地文字**信息 @@ -28,19 +28,19 @@ ![](https://cdn-images-1.medium.com/max/1600/1*2RdNRoDJmqfArWaViXal-g.png) #### 2. 错误信息应该是有用的 -只告诉用户一些地方出错了是不够的。你要告诉读者怎样才能又快又方便的解决问题。 +只告诉用户哪些地方出错了是不够的。你要告诉读者怎样才能又快又方便的解决问题。 例如，微软描述了错误，并在错误消息中提供了一个解决方案，这样你就可以立即修复这个问题。 ![](https://cdn-images-1.medium.com/max/1600/1*9eTjcpNOWtE7pEWXpiPivA.png) #### 3. 错误消息应该针对具体情况 -很多时候，网站对于所有的验证状态只使用一条错误消息。你没有填写邮箱提示“Enter a valid email address”，你没有使用“@”符号也是提示“Enter a valid email address”。MailChimp 处理这种情况有另一种方式：他们有 3 个错误消息对应不同的邮箱验证状态。第一种情况是检查是否有“@”符号和“.”符号（“Please enter a value”并不是一个很好的例子，因为还并不清楚你需要输入什么样的值。） 向用户显示实际的错误消息，而不是通用的错误消息。 +很多时候，网站对于所有的验证状态只使用一条错误消息。你没有填写邮箱 — 网站提示“请输入有效的邮箱地址”，你漏了“@”符号 — 网站也是提示“请输入有效的邮箱地址”。MailChimp 处理这种情况有另一种方式：他们有 3 个错误消息对应不同的邮箱验证状态。第一个检查是检查在提交表单的时候检查输入是否为空。其他的两个检查是检查是否有“@”符号和“.”符号（“请输入内容”并不是一个很好的例子，因为还并不清楚你需要输入什么样的值。） 向用户显示实际的错误消息，而不是通用的错误消息。 ![](https://cdn-images-1.medium.com/max/1600/1*cbmeYu8zkwhuw-I6fxn5gQ.png) #### 4. 错误信息应该是礼貌的 -如果你的用户犯了错误请不要粗鲁的对待他们。对你的用户客气一点，让他们感觉舒适和方便。使用你品牌的声音和个性化的错误消息是一个好的选择。 +如果你的用户犯了错误请不要粗鲁地对待他们。对你的用户客气一点，让他们感觉舒适和方便。使用你品牌的声音和个性化的错误消息是一个好的选择。 ![](https://cdn-images-1.medium.com/max/1600/1*4C2I4mLoV7A2Xclp5xXYmg.png) @@ -57,16 +57,16 @@ ### 为错误消息提供合适的视觉设计 错误消息应该清晰可见。使用对比强烈的文本颜色和背景颜色，这样用户就可以很容易地注意到和阅读消息。 -通常情况下，红色用于错误消息文本。在某些情况下，使用黄色或橙色作为某些资源状态因为红色对用户来说过于紧张。在这两种情况下，请确保错误文本是易读的，与背景颜色有明显的对比。别忘了在颜色旁边提供一个相关的图标，帮助盲人阅读。 +通常情况下，红色用于错误消息文本。在某些情况下，使用黄色或橙色作为某些资源状态因为红色对用户来说过于紧张。在这两种情况下，请确保错误文本是易读的，与背景颜色有明显的对比。别忘了在颜色旁边提供一个相关的图标，帮助色盲人士阅读。 ![](https://cdn-images-1.medium.com/max/1600/1*Gny4mwee7oJL1vQsNgJhkg.png) ### Conclusion ### 结语 -错误消息是改善用户体验、分享您的品牌声音和个性的绝佳机会。注重良好的错误消息，在语言、布局和视觉设计等各个方面。使它成为一个真正的完美的产品。 +错误消息是改善用户体验、分享您的品牌声音和个性的绝佳机会。注重良好的错误消息，要综合考虑语言、布局和视觉设计等各个方面。使它成为一个真正的完美的产品。 --- > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[React](https://github.com/xitu/gold-miner#react)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计) 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 - \ No newline at end of file + From 059cca6e4d34afa224dbea42e56e9814b34805df Mon Sep 17 00:00:00 2001 From: Cherry <991939332@qq.com> Date: Sun, 20 Aug 2017 11:28:29 +0800 Subject: [PATCH 3/4] Update how-to-write-a-perfect-error-message.md --- TODO/how-to-write-a-perfect-error-message.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TODO/how-to-write-a-perfect-error-message.md b/TODO/how-to-write-a-perfect-error-message.md index 3df62dc8318..602a4ad4aa6 100644 --- a/TODO/how-to-write-a-perfect-error-message.md +++ b/TODO/how-to-write-a-perfect-error-message.md @@ -4,7 +4,7 @@ > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/how-to-write-a-perfect-error-message.md](https://github.com/xitu/gold-miner/blob/master/TODO/how-to-write-a-perfect-error-message.md) > * 译者： [Cherry](https://github.com/sunshine940326) - > * 校对者：[lampui](https://github.com/lampui) + > * 校对者：[lampui](https://github.com/lampui) [shawnchenxmu](https://github.com/shawnchenxmu) # 怎么写出完美的错误消息 From 6f724ff90c2cfb3129429fe9f8a1b11f78478366 Mon Sep 17 00:00:00 2001 From: Cherry <991939332@qq.com> Date: Sun, 20 Aug 2017 11:32:07 +0800 Subject: [PATCH 4/4] Update how-to-write-a-perfect-error-message.md --- TODO/how-to-write-a-perfect-error-message.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/TODO/how-to-write-a-perfect-error-message.md b/TODO/how-to-write-a-perfect-error-message.md index 602a4ad4aa6..887d57838eb 100644 --- a/TODO/how-to-write-a-perfect-error-message.md +++ b/TODO/how-to-write-a-perfect-error-message.md @@ -19,7 +19,7 @@ 2. 合适的显示位置。 3. 好的视觉设计。 -### **明确地文字**信息 +### **明确的文字**信息 #### 1. 错误消息应该明确 @@ -61,7 +61,6 @@ ![](https://cdn-images-1.medium.com/max/1600/1*Gny4mwee7oJL1vQsNgJhkg.png) -### Conclusion ### 结语 错误消息是改善用户体验、分享您的品牌声音和个性的绝佳机会。注重良好的错误消息，要综合考虑语言、布局和视觉设计等各个方面。使它成为一个真正的完美的产品。