() translation by (you can also view the original English article)
设计有效且友好的用户提示信息本身是一种艺术形式。 不过设计者们总是会花很多时间在主要的用户界面上，而对提示类信息页面的考虑和设计一般都是有空再说。 良好的信息提示可以让用户和系统保持互动，如果缺失了反馈，用户有时会不知所措。
提示信息类别
在深入探讨之前，还是先看一下实际生活中的各种UI反馈信息。
网站类提示
我们最常遇到的错误信息是404页面找不到的错误提示。 这通常发生在用户如果不小心输入了错误的网址，或者之前的网页不再允许访问时。
服务器停机，或出现了意外状况时， 会出现网站关闭的提示信息。
Tumblr网站关停提示信息
下面是网站计划内的维护通知信息。
计划内停机 credit
著名的twitter访问失败鲸鱼标识
下面这些信息则是在用户某项操作后用于告知用户操作结果。
如下图，Versions告诉用户，已经开始下载，文件将保存在下载文件夹中。
这个常见的网站顶部的通知信息条则是提醒用户要去确认邮件。
Zootool则会用整个页面提醒用户确认邮件以激活帐号，激活前是不能进行下一步操作的。
这是用户完成邮件确认后的感谢信息。
表单类信息
我们还会常常遇到表单类的提示信息。 最为常见的是信息确认时，用户提交信息后，script会校验所填信息是否有效时，页面会给出相应的信息。
针对每个表单项的校验信息
除了校验失败时给出提示外，表单类提示信息也可加点创意。 比如用一种可爱的方式引导用户更好地填写信息。
密码强度提示
这是用户信息提示成功后页面提出的反馈信息。
应用程序提示信息
现在web页面应用和app越来越相似。 很多web应用在使用上和本地的app没什么不同。 比如，750words.com网站会给出提示－当你用快捷键保存文章时会弹出提示信息。
你也可以在特定区域显示特定的信息，来鼓励用户执行一些操作。 如Twitter.com会在有更新的时候通知用户。
如果给移动应用设计提示框情况会有所不同，主要是因为移动端的屏幕会小，提示信息必须要醒目。
一个app的状态通知消息。
再次强调，如果出现的时机恰当，可以把提示信息设计得象是一个使用技巧。
在这里，UI提示看起来就象是一个用户使用说明
也可以用来表示对用户完成一项任务的激励。
Credit
站在用户的角度思考
我们需要以用户的立场来看待问题。 当他们浏览网站时，或使用你的应用时，你希望他们的感觉是什么？ 你可能会希望他们信任你，如果他们觉得使用你的网站时感觉很有意思，那就更棒了。 但是如果没有精心设计你的提示信息，那网站给用户带来的则可能是失望或沮丧。
绝大多数浏览网站或使用应用时，都有着明确的目标。 象查找一个公司的资料，购买某个商品，或用app完成某项工作，等等。 你可以想象如果用户在网站上想买点什么。 他点完‘加入购物车’后如果跳转到空白页面，用户的感觉会怎样？ 这种情况下如果操作后发生错误了，系统必须得给出恰当且明确的信息。
例：加入购物车出错时页面给出高亮和文字提示。
还有一种场景，用户正在你的网站上进行某项重要的操作流程。 可能是试图通过你负责的金融网站付房租。 如果在整个付钱过程中网站停止响应了，用户的感觉会有多么的担心 郁闷和着急。
img credit网站
上面的出错信息并没有给出明确的信息原因，压力一下子就转移给了正在操作的用户身上。
最佳实践
先看几个反馈和提示都做得不错的几个例子。
尽可能地特别
又简单又特别的提示信息，Dealotto有个不错的范例。
- 顶部的绿色banner看起来就是一个特别的状态信息。
- 视觉上用了图标，进一步强调了标题信息。
- 提示用户后续还需要操作。
- 页面设计精良并提供了足够的信息，给出了后续操作说明。
尽可能的醍目
在Vimeo网站上注册时没人会看不见错误提示信息。
- 信息使用了强烈的颜色
- 提示信息显示在出错的表格项旁边，信息框上还有三角形的指向出错位置。
37signals(现在的Basecamp网站）在用户还没有任何内容时，会显示下图这个艺术化的界面(而不是一个空白的页面）。
但是也不能信息过剩。
有的应用会把整个页面占得满满的。 上图用了所有的UI已有的信息展示样式，提示窗、逐行提示、置顶提示，要求你必须去做这件事。
过于醒目和持续不断的提示会导致反效果：用户干脆放弃了。
切忌把错误提示信息设计成到处都是的报错红海。
产当你首次登陆并想浏览Huffington邮报的新闻文章时，页面会给出下图的提示窗。 用户很容易会困惑,他会想：读个新闻需要一个twitter帐号。
提供相关的帮助
不管显示给用户是的错误提示还是提示信息，增加些相关的帮助或提示的话，效果会很实用。 尤其是在网站出错的情况下，这种情况不可避免，不过我们可以尽可能地优化用户感知。
Vimeo会在这种情况下给提供其他部分的操作链接，还会在页面下方附上帮助链接。
还有下图，虽然只用了小小的帮助图标，但效果却会很好。
Credit网站
下图的帮助技巧也很实用，用一个链接用户点击时可以看到更多信息。
表格来自Postmark. Credit网站。
Invisionapp在内容加载的图片上加了一个有效的使用技巧信息。
先发制人的艺术
提前预测是设计出好的反馈信息的基础。 需要预先明确的内容如下：
- 用户的感觉是怎样的
- 用户会做哪些操作
- 他们可能会遇到哪些错误。
- 有些场景你需要用户耐心等待。
- 你想在哪些场景保存导致失败的原因
Kicksend发现有些用户没有去确认他们的邮件。 经过数据分析发现没有确认的原因是用户因为输入的问题导致邮件地址输错了。 所以他们设计了一个jquery插件，mailcheck.js脚本，当用户输入邮件地址时，便检查他们是否犯了常见的输入错误。 简单的检查措施，就将邮件（不）确认的情况减少了50%。
Fab.com预测到有些用户可能会取消帐号。 当用户取消帐号时，网站希望可以了解取消的原因。
有时场景预测可以带来生机。
或者有时会挽救回会丢失的订单。
这都与小的细节有关。 Gmail邮件的登陆页面猜到，你改了密码，但你现在忘记了这件事。
Gmail还提供了其他一些预测后的信息：我相信有无数人都遇到过这样的错误：发邮件忘记加附件。
Credit网站。
状态提示也是UI信息中一种重要的形式。 Foursequare精心设计了一个信息，在加载数据时告诉用户系统正在定位他的位置，寻找周边有趣的地方。 这样做有两个目的
- 让用户在页面加载时有点耐心
- 同时暗示系统正在后台分析数据，执行某个很智能的操作。
.
teuxduex认为todo清单的同步非常重要，然后在网络断掉的时候会幽默地给出警告。
Credit
还有许许多多其他的例子，如何去预测，然后在用户界面上放置防范措施。
注入幽默和情感
之前我们提过象用户那样去思考的重要性。 最小化他们的挫败感非常重要，我们还可以采取些其他的办法。 许多人都是长时间对着屏幕。 如果可以加进一些幽默感，就会将普普通通或者是糟糕的场景变得有趣一些。
这个散架的机器人让你笑了，不是吗？
想看到更多的404错误页面，可以参考这个Pinterest图片集。 不仅仅是出错信息，辛苦一天之后，简单的提醒也能让你会心一笑。
我们都为"收件箱中没有待读邮件"而苦苦折扎，不过当看到Gmail的这条信息的时候，也许感觉值了。
来自Buffer网站的信息用讨好和幽默的方式希望得到更多的注册。
Credit
另一个提示范例：聪明的文案会让你不由微笑。
Credit
如果你对此感兴趣想了解更多和幽默有关的设计，可以参考excellent deck网站上aaron Walter的演示（情感设计大拿，Mailchimp的首席设计师）。
结论
我真心希望本篇关于用户界面上的信息制作能对你有所帮助。 下方是相关资源，你可以进一步学习并进行研究。 信息设计上不要去区分好坏，而是要引起用户的情感，经验共鸣，还有能提供用户的反馈就好。
不要着急，这需要大量的实践和迭代才能找到合适的信息设计感觉。 请用户提供反馈，可以故意设计一些给用户的信息起步，如果有效果，再加一点幽默或情感来强化整体体验。 希望对大家有帮助。
有任何问题请留言给我。 反馈可以让我在webdesigntuts+网站上写出更好的文章。
相关文章。
- Avoiding being embarrassed by your error messages
- A more useful 404
- Are You Saying “No” When You Could Be Saying “Yes” in Your Web Forms?
- Form-Field Validation: The Errors-Only Approach
- Why Can’t Error Messages Be Fun?
- Inline Validation in Web Forms
- Web Form Validation: Best Practices and Tutorials
- The Personality Layer
- What’s the most useful 404 or error page you’ve seen?
Relevant Books
Design Patterns
