Ouch.pics的插画

表单是任何网站的必要组成部分；无论是联系人表单、支付细节表单、帐户创建表单、潜在客户表单等，用户在使用您的产品时肯定是需要与某种表单进行交互的。本文的目的是提出在设计更好的表单时遵循的一些准则。

保持表单简短

没人喜欢冗长的表单。在设计中“定义范围”的步骤里，花一些时间来询问用户是否需要回答每一个问题来达成他们的目标。这可能需要更多的时间，但是相信我，减少用户的工作将会吸引更多的用户提交您的表单。

ASOS注册表单很冗长，并且包含多余字段。

～～～

可视化地分组字段及标签

标签应该靠近它们各自的字段。特别是当标签位于字段上方时，使用空白来分隔它们。

始终将标签放在更靠近关联字段的位置，而不是其他字段。这是因为人类会把紧密结合在一起的事物建立联系——格式塔原则。

Amazon 注册表单在每个字段之间使用足够的空白，以便于清楚得看懂。

～～～

清楚地展示你的需求

告诉用户他们需要什么，不要等到他们完成表单后才显示错误信息——这是一种消极强化的形式。如果没有明确的验证规则指示，用户不知道从这些规则中得到什么。这特别适用于“密码”字段，因为不同的产品有不同的要求。

Mailchimp的不仅减轻了密码错误的可能，而且为用户创建新帐户提供了积极的动力。

～～～

避免使用占位符文本作为字段标签

占位符通常用于提示特定输入字段需要什么类型的信息。但一些设计师使用它来取代字段标签，以减少混乱和更简约的外观。

问题是一旦用户输入字段，占位符就会消失。如果用户忘记了字段的用途，必须单击字段外才能再次看到占位符，这可能会令人很烦躁。

谷歌使用智能微交互来解决这个问题。

当用户单击输入字段时，占位符文本将淡出，并成为左上角的一个迷你字段标签。

～～～

使用自动对焦

我非常喜欢表单自动聚焦第一个输入字段，因为我只需要输入、回车、输入、回车便可以了。虽然它只为我节省了一次额外的点击，但确实以一种微妙的方式提升了整体体验。

当允许自动对焦时，也要突出显示活动字段，以通知用户第一个字段已经被选中，他们可以继续填写它。

高亮活跃的区域
这通常是改变边框的颜色和大小来提供更强的视觉提示。确保所选字段的颜色从表单的其他部分中突出出来，以便潜意识地帮助用户关注活动字段。同样的概念也可以用于错误提示，通常情况下，如果出现错误文本字段将用红色突出显示。

通过高亮显示活动字段，可以很容易地关注到它。

～～～

通知用户大写锁定已打开

这是一个如此简单的特性，但并没有很多产品实现它。有些时候，我没有意识到大写锁定是打开的，当我不断被拒绝时感到很沮丧。更糟糕的是，错误信息甚至没有告诉我大写锁定打开了，它只是不停地说我的密码错了。这对用户来说真的很烦人。

Mac OS在通知用户大写锁定是否开启方面做得很好。

～～～

使用视觉的限制

视觉约束有助于增强用户所需的信息。例如，如果“月”字段只需要两个字符，那么它就不需要与“名字”字段一样长，否则可能会引起用户的混淆。

可以根据所需的信息提供不同的字段长度大小。

～～～

不要隐藏错误消息

使用一些提示来传递错误消息。通过在文本字段旁边放置一个警告图标，当用户将鼠标悬停在该图标上时，将出现错误消息的提示。这是个非常糟糕的交互，因为它需要用户付出更多的努力来纠正他们的错误。有些用户甚至不知道他们需要执行额外的操作（将鼠标悬停在图标上）来查看错误消息。

只在文本字段底部显示错误提示不是更好吗?

～～～

清楚地标记选项字段

如果您忽略了第一个技巧（保持表单简短），请确清楚地标记出可选字段。它将提供一个更强的视觉提示，用文本“可选”标记字段，而不只是使用星号。有些用户可能也不理解星号的含义，因为它有时用来表示验证错误。

标记处可选字段比使用星号标记更清楚。

～～～

使用图片来增强理解力

当需要有含义时，可以使用图像来选择以改善用户体验。如果您想更好地使用文本、图标或图像解释每个选择，这是很好的选择。

谷歌使用图像来描述他们的广告类型。

～～～

尽可能使用预测搜索

这主要适用于要求用户输入具有许多预定义选项信息时，比如他们的度假目的地，允许用户只输入几个字母来找到他们的目的地城市，而不是输入整个城市的名字——这是一项非常烦人的任务。

它还降低了搜索失败的几率，因为用户不太可能拼错他们的搜索词。

Airbnb使用预测性搜索帮助用户轻松找到他们的度假目的地。

我知道表单设计可能是一个无聊的过程，大多数用户总是讨厌填写表单。但是按照上面的指导方法，并在交互中加入一些幽默，您可以改进用户的体验并引发情感反应。

这样做无疑会提高完成率，这也是用户体验设计师的目标之一。

感谢阅读！

原文链接：https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

作者链接：https://uxdesign.cc/@nataniellam