有多少人喜欢填写表格？我想，并不是很多。这不是用户想要的服务 --他们只想购买门票，与朋友聊天等等。注册是某种不可避免的“灾祸"，他们必须处理。那么提交表单有什么问题？

1.这是非常耗时的。

2.复杂的表单很难弄清楚。

3.表单可能会要求用户不愿意分享的信息 - 信用卡详细信息，电话号码，地址。

表格对于商业成功至关重要，而且可能会导致低转换率和客户放弃率。但这也是争取用户最多的地方。那么设计师在这种情况下可以提供哪些帮助？如何设计一个非常棒的表单？这里有一些建议。

允许注册并通过社交服务登录 - Facebook，Google等

社交登录是一个非常强大的工具，有助于完成字段。请记住向人们保证他们的社交数据是安全的，并解释您需要的信息。

图片来源：纽约时报

保存输入的数据

表单中最有用的功能之--记住用户已经输入的数据。万一出现问题，用户不需要再次输入所有信息。此功能对于长表格特别有用。Garlic.js允许您在本地自动保存表单的文本字段值，直到表单被提交。

尽量保持简洁，或者把它分成多个步骤

只在表单中添加必要的字段 - 它可以节省时间并减少错误。如果一个字段是可选的，最好不要显示它。将表格限制为只有1或2个可选字段，并将其明确标记为可选字段。还可以移除所有的确认字段。如果无法避免长表单，请将其分成多个步骤并对相关字段进行分组。

自动对焦窗体中的第一个输入字段

自动对焦可将用户引导至表单的起点。强调第一个领域的口音边框颜色，背景颜色或两者。

Image credit: Udacity

避免隐私警察协议确认复选框

使用带有关于接受条款和政策的链接的文本，而不是复选框。更新：在某些情况下（例如在欧盟），复选框只允许使用而不是自动接受，所以最好使用合法检查。

图片来源：Coursera

你可使用一种表单进行注册并登录（但要小心）

创建一个用于注册和登录的通用表单是个不错的选择。输入电子邮件和密码后，服务会检查电子邮件是否已经存在于数据库中。如果是的话，你会登录，如果没有，服务将为你创建一个新的帐户。但请注意，这种方法有一些问题，如果您输入错误但有效的电子邮件，该服务将使用此电子邮件创建一个帐户。

Image credit: Bookmate

在单列布局中呈现字段

保持用户在流中，坚持一个单一的列，以避免重定向。（例外：短的和相关的字段，例如城市，州和邮政编码）。

提供明确的标题

一个好的设计从一个文本开始，一个好的形式从一个标题开始。简洁明快的CTA向用户展示完成此表单的好处并激励他们。为了值得信赖，请显示用户的信息是安全的，并提供安全证件。

图片来源：纽约时报

设置输入

输入字段是任何形式的基本元素。一个简单的输入由几个部分组成 - 输入字段，标签，占位符。

输入字段

通常，一个文本字段有6个状态 - 默认，悬停，焦点，禁用，错误和成功。

标签

一个很好的经验法则是使用顶部对齐的标签，因为它们更容易阅读。简而言之，可以使用有意义的图标而不是标签。

另一种方法是使用像Material Design中的浮动标签。标签应该有一个简短清晰的副本。一个句子或一个标题案例 - 这是你的选择，但要保持标签命名的一致性。组相关的标签和字段 - 将标签放置在与它们相关的字段附近。

占位符

占位符是帮助用户理解可以输入的数据类型和格式的提示。避免使用占位符作为标签，这样就能使表格紧凑。它适用于有2-3个字段的短表单，但不适合较长的表单。当用户将信息输入字段时，占位符会消失，用户可能无法检查是否输入了正确的数据类型。

避免使用占位符作为标签

请注意密码字段

我指出密码字段是因为它有自己的约束和窍门。

让用户看到他们的密码

它可以帮助用户在提交之前检查他们的密码。

显示密码强度

好的密码很难猜到。显示用户密码的强度和安全性，以及他们是否需要使其更加复杂。

提交之前显示密码要求

如果您的服务需要密码的特定要求，请在提交表单之前向他们显示。

警告用户Caps Lock处于打开状态

它有助于防止突然按下Shift键的Caps Lock键这样的常见错误。

设计“忘记密码”?“以表格形式输入日志。

人们经常忘记他们的密码（我也是如此），所以要提醒或恢复密码很容易。

创建强大的按钮

正确命名按钮

表单按钮不应该使用一个通用的提交标签，而是应该描述用户在任务中所做的事情——创建帐户、登录等等。

在完成所有必需的输入之前，禁用按钮。

这是在提交之前可视验证输入的另一种方法。

正确使用主要和次要按钮

如果你有两个按钮 - 主要和次要的，你应该在视觉上区分它们以减少潜在的错误。更重要的是，主键应该更明显。

避免重置和清除按钮同时出现

考虑防止错误

预防错误是一种好的方式中最重要的部分之一。考虑系统如何防止和修复常见错误，而不是仅显示用户错误消息。

输入自动化

自动化用户的输入可以通过减少他们需要填写的字段来防止他们的错误。

1、根据邮政编码或地理位置数据自动填写城市和州的文本字段。

2、从输入的信用卡号码中选择卡类型。

使用输入掩码格式化您的字段

要修复输入问题，请在格式化的数据字段上使用输入掩码。输入掩码自动在字段中插入正确的格式。

字段约束

控制用户输入的另一种技术是添加字段约束。例如，仅允许电话和邮政编码字段的数字。

记住有关错误验证

1.使用内联验证

避免错误摘要，在输入旁边放置错误消息。一次显示一个字段的错误消息。

2.使用清晰的副本检查错误消息

它应该告诉用户为什么他们的信息被拒绝以及如何解决这个问题。你的错误信息的语气应该感觉有礼貌和专业。

3.提交之前验证具有多个需求的字段

4.用颜色，图标和文本突出显示错误字段

使错误信息清晰可见，使用不同的方式强调它 - 颜色，文本和图标。

结论

正如我们所看到的，一个好的注册表格是一件棘手的事情，它不仅仅是一个很好的UI设计。为了改善用户体验，设计师需要考虑过程的所有细节。适当的表格可以增加转换次数并减少客户放弃。

原文链接