UI设计之验证 Validation

2.11. 验证

本文章属于《跟我学线框图》系列教程，转载请注明出处。

验证通常被用作警报的轻量级替代方案。这是在有限的干扰下提供反馈或指导的好方法。

何时使用验证

有时使用验证代替警报，或者与警报一起使用，以提供上下文中的错误消息。 但这不仅仅是为了告诉用户他们做错了什么。 它也可以用来告诉用户他们什么时候做对了，或者提出改进的建议(比如密码强度)。

验证通常用于帮助用户从错误中恢复。 但是，比提供良好的验证更好的是，从一开始就避免了对验证的需求。 下面的文本输入指南可以最大限度地减少验证的需要。

如何使用验证

仅在用户与特定字段交互之后显示错误验证消息或样式

在提交表单之前，请尝试“即时”验证。但是，如果不能这样做，请考虑在重新加载页面时在页面顶部添加一个通知以汇总反馈。

不要清除无效的输入数据，除非用户无法轻松更正错误。 这样做可以让用户不用重新开始就可以纠正错误

提供如何修复任何错误的指导，不要只是告诉用户他们做错了什么

Basic Usage 基本用法

States 状态

验证组件通常有三种状态(如上所示) :

成功-告诉用户他们的条目或选择是有效的。 不是必需的，但对于新手或新手用户是有帮助的

警告-通常表示条目或选择是有效的，但不推荐使用。 例如，一个弱密码

错误-最常见的验证形式。 提醒用户注意一个无效的条目，最好是建议他们如何修复它

Variations 变化

验证组件变化的主要方式是它们的表示或样式。 色彩是经常使用的，虽然方式不同。 它不应该是唯一的指标，但是，因为它可能不会被色盲用户识别。 此外，还经常使用图标和 / 或帮助文本。

References 参考资料

U.S. Web Design System 美国网页设计系统

KDE Human Interface Guidelines Kde 人机界面指南

Related Controls 相关控件

Alerts 警报

Text Input 文本输入

Further Reading 进一步阅读

Preventing User Errors: Avoiding Unconscious Slips (Nielsen Norman Group)

Voice, Tone & Content Guides (by John Moore Williams)

“Web Form Design: Filling in the Blanks” by Luke Wroblewski