登录注册
最新博客
最新资源下载
<translation>表单需要验证
达芬奇密码2018-08-13 11:39
原文链接：https://uxdesign.cc/forms-need-validation-2ecbccbacea1
译者写在前面：最近正好在看一些表单验证相关的交互文章，其实很多已经挺成熟了，但是在运用的时候也常常会有一些思虑。很多时候我们会使用提交验证的方式，这篇文章主要是讲在提交之前用户填写内容时做的一些内联验证，虽然比较简单，但总结的也挺完整，简单翻译分享出来，希望对各位有所帮助。
表单需要验证
设计内联型验证和错误处理
内联验证是一种在提交之前检查输入内容合法性并给出反馈的一种方法，它显著提高了表单的可用性和用户体验。这篇文章解释了内联型表单验证和错误处理的设计技巧。
----------------------------------------------------------------------------------------------------------------------------------------------------------------
验证
内联验证的例子
内联验证简单的部分是确认部分。当一个条目被确认的时候，可以使用简单的确认标记传达信息。内联错误就更加棘手一些。
展示内联错误
内联错误应该展示问题的解释并说明如何解决。
有多种方法可以展示：
在输入框上方
--------------------------------------------------------------------------------
在输入框下方
--------------------------------------------------------------------------------
和输入框同行
--------------------------------------------------------------------------------
作为一个工具提示
--------------------------------------------------------------------------------
什么时候应该提供内联型确认和错误？
我总结出来5个方法，每一个都有它的权衡和局限性。尽早且在源头解决问题很重要，但是若用轻率的方法也很容易让问题更糟糕。
1.当用户聚焦到输入框
当用户聚焦到输入框时，立即显示错误是令人讨厌、有误导性且分散注意力的。就这像你在说任何事情之前表单就对你大喊大叫，谈论一段糟糕的关系。但是若在错误被应验或输入内容被确认之前，展示帮助性文本来替换明确的错误，这种方法就能做得很好。
2.当用户输入时
这种方法会在用户输入内容被确认之前打扰到用户。因为它给的挫败感多余帮助，所以用户会对每输入一个字符感到厌倦。这就像和一个正在谈论你的人争论。但是对于密码强度和用户名的可用性，这种方法可以提供有用的反馈。
--------------------------------------------------------------------------------
3. 一旦用户达到了某种字符要求
在输入可预见的字符串长度，如邮政编码、手机号、CC 号码等，这种验证方法是有作用的。但是这对国际化来说可能是有问题的，因为准备的表单内容并不总是已知的。
--------------------------------------------------------------------------------
4.当用户失焦
这可能是最好的默认行为了，因为验证发生在内容明确之后。但是，这种方法可能会打断用户的操作流，因为这个反馈在用户移开光标后才显示。
--------------------------------------------------------------------------------
5. 当用户暂停输入
这种方法是在用户暂停时提供反馈。这方法减轻了用户输入时因内联错误而产生的烦恼，而且能在他们暂停或退出输入时提供反馈。
--------------------------------------------------------------------------------
令人吃惊的是，有如此多的表单没有使用简单的内联型验证和错误处理，更令人惊讶的是，它的执行情况也常常很差。我希望这篇文章帮助你更好地设计 web 表单验证。我期待听到你们有用的技巧。
网易云新用户大礼包：https://www.163yun.com/gift
本文来自网易实践者社区，经作者龚梦恬授权发布。
分享至：
