原文地址：http://ui-patterns.com/patterns/InputFeedback

输入反馈：确认通知，错误通知，警报，内联表单验证

问题总结

用户在系统里输入数据后，并希望得到该数据提交之后的反馈。

示例

当你在Twitter上注册时，当你输入内容时，你会立即收到对你所输入内容的反馈。

用法

当用户向你的网站提交内容时，你想向用户提供反馈时使用。

当用户在表单提交期间出错了，你想要提醒用户的时候使用。

当用户提交内容的时候，你想让用户知道内容是按照规则填写的时候使用。

解决方案

当用户通过表单向你的网站提交内容时，错误肯定会时有发生。此模式的目标是通过最小化输入错误来改善用户体验。

一个被称为数据验证的模型非常适合在提交表单时捕捉错误。判断数据是否有效的常用方法是为表单中的每个输入字段设置规则。输入的数据必须通过这些规则才能被视为有效。这种验证规则可以是：

对存在的内容进行验证 - 必须要输入一些内容

对排除的内容进行验证 - 禁止指-例如将“admin”作为用户名使用。

对必须包含的内容进行验证 - 数据必须包含某些数据或必须在特定范围内。

对必须接受的内容进行验证（例如服务条款）- 通常用一个复选框。

对内容的确认进行验证 - 需要将输入的两个字段进行匹配-例如密码。

对内容的格式进行验证 - 一封电子邮件需要有一个“@”和多个圆点-例如，使用者必须年满18岁。

对内容的长度进行验证 - 在许多情况下，密码至少得有6个字符长。

对内容的唯一性进行验证 - 许多系统只允许用户有一个用户名。

如果用户提交的数据通过了验证，那么最好让用户知道一切都按照规则填写的。更好的是，将用户重定向到一个页面，在那里他或她可以在上下文中看到新提交的内容。

但是，如果用户提交的数据未通过验证，则应向用户显示一条错误消息，解释如何更正数据并请求重新提交。这样的错误消息应该解释如下：

发生了错误。 通过页面顶部的显示框说明错误（这样用户无需滚动页面即可发现错误），最好使用红色表示错误。

发生错误的地方。 这可以通过在错误消息中列出出错的字段，以及突出显示出错的字段（通过更改其颜色）来完成。

如何修正错误。 提供哪些跟所需要的内容不同，以便该字段进行验证。 这可以列在顶部错误提示框中，也可以直接在出错的字段旁边显示。

对于输入反馈的视觉表现应与您要提供的消息相对应，如果提交成功了，就考虑使用绿色框让用户知道。如果信息是中性的，则常用的颜色为黄色。如果出了什么问题——通常会使用红色。但要注意——红色意味着危险——用户是否正处于危险的情况中？

基本原理

当用户在网页上填写表单时，他们都会经历这样一个过程：将其中一种结构化的心理数据转换为以另一种结构化的书面表单。由于并非所有人的想法都一样，那么当我们试图将我们个人的结构化数据转换为系统定义的公共结构时，我们必然会以不同的方式输入数据。

在web表单中输入的数据容易出错，因此我们必须在进行设计时候，就要有所准备，防患于未然。我们必须使用户意识到，他们输入的数据与我们设计的结构并不匹配，在反馈通知上使用鲜明的视觉表现将使用户更容易意识到这些错误，以及如何纠正这些错误。

论述

可以肯定地说，在用户提交数据之前，你应该更多的关注预防错误，而不是在提交数据之后提供一个好的错误信息提示。在输入的时候考虑使用选择框进行约束。

请考虑你的错误信息的语言形式，因为这些可能会对你的用户的情绪产生影响。什么样的语调适合你的用户？

每次操作之后要提供明确的反馈

当用户从系统中收到反馈时，他们会感到更加自信，且以为自己是博学多才的。反馈一般包括通知，对话框消息框、彩色或禁用按钮、加载动画、内联报警、工具提示、悬停效果等。缩小对评估系统执行操作和执行操作之后之间的差距。