怎么写出完美的错误消息 #2080

sunshine940326 · 2017-08-18T03:58:58Z

resolve #2065

laampui · 2017-08-18T04:20:29Z

@sqrthree 校对认领

linhe0x0 · 2017-08-18T04:20:31Z

@lampui 好的呢 🍺

laampui

@sunshine940326 @sqrthree 校对完毕

laampui · 2017-08-18T04:43:31Z

TODO/how-to-write-a-perfect-error-message.md


-### **Clear text** message
+### **明确地文字**信息


『明确地文字信息』 =>
『明确的文字信息』

laampui · 2017-08-18T04:52:41Z

TODO/how-to-write-a-perfect-error-message.md

-
-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”并不是一个很好的例子，因为还并不清楚你需要输入什么样的值。） 向用户显示实际的错误消息，而不是通用的错误消息。


『你没有填写邮箱提示“Enter a valid email address”，你没有使用“@”符号也是提示“Enter a valid email address”。』 =>
『你没有填写邮箱 — 网站提示“请输入有效的邮箱地址”，你漏了“@”符号 — 网站也是提示“请输入有效的邮箱地址”』

laampui · 2017-08-18T06:00:33Z

TODO/how-to-write-a-perfect-error-message.md

-
-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”并不是一个很好的例子，因为还并不清楚你需要输入什么样的值。） 向用户显示实际的错误消息，而不是通用的错误消息。


漏掉了这一句：The first one checks if the .... form.所以后面的也错了

laampui · 2017-08-18T06:06:40Z

TODO/how-to-write-a-perfect-error-message.md


-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.
+通常情况下，红色用于错误消息文本。在某些情况下，使用黄色或橙色作为某些资源状态因为红色对用户来说过于紧张。在这两种情况下，请确保错误文本是易读的，与背景颜色有明显的对比。别忘了在颜色旁边提供一个相关的图标，帮助盲人阅读。


color-blindness 应译为色盲人士，而不是盲人。

shawnchenxmu · 2017-08-18T14:51:29Z

@sqrthree 校对认领

fanyijihua · 2017-08-18T14:51:36Z

@shawnchenxmu 妥妥哒 🍻

shawnchenxmu

校对完毕 @sqrthree @sunshine940326

shawnchenxmu · 2017-08-18T14:55:58Z

TODO/how-to-write-a-perfect-error-message.md

-2. Right placement.
-3. Good visual design.
+1. 明确的文字信息。
+2. 显示在合适的位置。


『显示在合适的位置』=>『合适的显示位置』
和1、3两点统一句式

shawnchenxmu · 2017-08-18T14:57:51Z

TODO/how-to-write-a-perfect-error-message.md


 ![](https://cdn-images-1.medium.com/max/1600/1*2RdNRoDJmqfArWaViXal-g.png)

-#### 2. Error message should be helpful
+#### 2. 错误信息应该是有用的
+只告诉用户一些地方出错了是不够的。你要告诉读者怎样才能又快又方便的解决问题。


『告诉用户一些地方出错』=>『告诉用户哪些地方出错』

shawnchenxmu · 2017-08-18T15:04:02Z

TODO/how-to-write-a-perfect-error-message.md

-
-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. 错误信息应该是礼貌的
+如果你的用户犯了错误请不要粗鲁的对待他们。对你的用户客气一点，让他们感觉舒适和方便。使用你品牌的声音和个性化的错误消息是一个好的选择。


『粗鲁的对待他们』=>『粗鲁地对待他们』

shawnchenxmu · 2017-08-18T15:10:11Z

TODO/how-to-write-a-perfect-error-message.md

-
-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.
+### 结语
+错误消息是改善用户体验、分享您的品牌声音和个性的绝佳机会。注重良好的错误消息，在语言、布局和视觉设计等各个方面。使它成为一个真正的完美的产品。


『在语言、布局和视觉设计等各个方面』=>『要综合考虑语言、布局和视觉设计等各个方面』

shawnchenxmu · 2017-08-18T15:12:25Z

TODO/how-to-write-a-perfect-error-message.md


-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 个重要部分：**


『下面是每个好的错误消息的 3 个重要部分』=>『一个好的错误消息应该包括下面这 3 个重要部分』

sunshine940326 · 2017-08-20T03:29:36Z

@lampui @shawnchenxmu 感觉两位的耐心校对~
@sqrthree 修改完毕

linhe0x0 · 2017-08-21T08:47:32Z

@sunshine940326 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

…slate * 'master' of https://github.com/xitu/gold-miner: (178 commits) 🚀 添加文章『关于 React Router 4 的一切』到文章列表 🚀 添加文章『为什么我们渴求女性来设计 AI 』到文章列表 🚀 添加文章『如何在 Webpack 2 中使用 tree-shaking』到文章列表 🚀 添加文章『Redux 有多棒？』到文章列表 🚀 添加文章『别再使用图片轮播了』到文章列表 🚀 添加文章『将 Android 项目迁移到 Kotlin 语言』到文章列表 🚀 添加文章『巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏』到文章列表别再使用图片轮播了 (xitu#2073) Update how-to-do-proper-tree-shaking-in-webpack-2.md (xitu#2100) 为什么我们渴求女性来设计 AI (xitu#2074) 如何在 webpack2 中使用 tree-shaking (xitu#2076) 怎么写出完美的错误消息 (xitu#2080) 巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏 (xitu#2043) 将 Android 程序移植为 Kotlin 程序 (xitu#2039) Redux 有多棒？ (xitu#2003) 🚀 添加文章『函数式响应编程入门指南』到文章列表 🚀 添加文章『虚拟现实是如何改变用户体验的：从原型到设备的设计』到文章列表 ✨ Create angular-vs-react-which-is-better-for-web-development.md ✨ Create evolving-the-facebook-news-feed-to-serve-you-better.md ✨ Create why-context-value-matters-and-how-to-improve-it.md ...

TODO/how-to-write-a-perfect-error-message.md

247ecfb

linhe0x0 added the 校对认领 label Aug 18, 2017

linhe0x0 mentioned this pull request Aug 18, 2017

怎么写出完美的错误消息 #2065

Closed

linhe0x0 added the 设计 label Aug 18, 2017

linhe0x0 mentioned this pull request Aug 18, 2017

怎么写出完美的错误提示 #2077

Closed

linhe0x0 added the 正在校对 label Aug 18, 2017

laampui reviewed Aug 18, 2017

View reviewed changes

fanyijihua removed the 校对认领 label Aug 18, 2017

shawnchenxmu reviewed Aug 18, 2017

View reviewed changes

sunshine940326 added 2 commits August 20, 2017 11:27

Update how-to-write-a-perfect-error-message.md

6ca6392

Update how-to-write-a-perfect-error-message.md

059cca6

Update how-to-write-a-perfect-error-message.md

6f724ff

linhe0x0 approved these changes Aug 21, 2017

View reviewed changes

linhe0x0 merged commit cf8b831 into xitu:master Aug 21, 2017

linhe0x0 added 翻译完成 and removed 正在校对 labels Aug 21, 2017

leviding added 待添加积分 and removed 待添加积分 labels Aug 29, 2017

cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017

怎么写出完美的错误消息 (xitu#2080)

12eb048

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

怎么写出完美的错误消息 #2080

怎么写出完美的错误消息 #2080

sunshine940326 commented Aug 18, 2017

laampui commented Aug 18, 2017

linhe0x0 commented Aug 18, 2017

laampui left a comment

laampui Aug 18, 2017

laampui Aug 18, 2017

laampui Aug 18, 2017

laampui Aug 18, 2017

shawnchenxmu commented Aug 18, 2017

fanyijihua commented Aug 18, 2017

shawnchenxmu left a comment

shawnchenxmu Aug 18, 2017

shawnchenxmu Aug 18, 2017

shawnchenxmu Aug 18, 2017

shawnchenxmu Aug 18, 2017

shawnchenxmu Aug 18, 2017

sunshine940326 commented Aug 20, 2017

linhe0x0 commented Aug 21, 2017


		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.
		通常情况下，红色用于错误消息文本。在某些情况下，使用黄色或橙色作为某些资源状态因为红色对用户来说过于紧张。在这两种情况下，请确保错误文本是易读的，与背景颜色有明显的对比。别忘了在颜色旁边提供一个相关的图标，帮助盲人阅读。


		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 个重要部分：

怎么写出完美的错误消息 #2080

怎么写出完美的错误消息 #2080

Conversation

sunshine940326 commented Aug 18, 2017

laampui commented Aug 18, 2017

linhe0x0 commented Aug 18, 2017

laampui left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shawnchenxmu commented Aug 18, 2017

fanyijihua commented Aug 18, 2017

shawnchenxmu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sunshine940326 commented Aug 20, 2017

linhe0x0 commented Aug 21, 2017