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
领取专属 10元无门槛券
私享最新 技术干货