想把表单设计做到极致居然有这么多细节需要注意！

编辑导语：表单设计老生常谈，但又是使用频繁且经常遇到各种问题的一种组件，尤其在 B 端业务中。本文详细分享了在表单设计中我们应该注意的细节，一起来看看吧！

对于我们设计师来说，尤其是现在 B 端设计如此流行的情况下，表单设计细节尤其需要各位设计师注意。今天会分享表单设计中那些你不注意的细节点，必须先点赞收藏了，这些干货知识相信你一定用的上。

比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。

因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。

错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。

当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：

一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。

尽可能的进行内联验证 这种类型的错误消息很容易被察觉 ，此外，输入完成后立即告知错误，对用户的交互成本最低—— UX 专家 Rachel Krause

另一位专家 Luke Wroblewski 建议，当问题的答案不明显时，可以使用内联验证。例如，在选择用户名时，用户可能不知道哪些用户名可用。在这种情况下，在用户输入数据时立即告知错误可能会有所帮助。

另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。

使用内联验证，用户必须在两种截然不同的思维模式之间反复切换：填写表单和纠正错误。这减慢了用户的速度，增加了认知努力，通常会降低用户的满意度。Jessica Enders 在她的书《设计 UX：表单》中写道。

服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。

错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示 Error:90803，对用户有很大帮助。

错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说 该字段不应该是空的 ，不如说 请填写此字段 。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。

在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。

标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。

许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是 Z 模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在