16个表单优化技巧

表单可能是日常设计中最常见的设计元素了，它广泛的应用范畴、多年来的积淀使得表单设计牵涉到大量的、约定俗成的设计规则。今天我们来聊聊表单设计优化。

下面是列举的16个表单优化技巧

1.填写的信息永远越少越好

左图：一大波无用问题    右图：一次只列举了最重要的部分

每一步最好只让用户填写最有用的相关信息。如果你在当前步骤并不迫切需要获取用户的电话号码或家庭住址，那就不要让用户填写。“Less is more"的原则在这里很受用。

2.自动填写

左图：所有信息均需要用户手动填写   右图：帮助用户自动填写你已获取的信息

如果用户已经填写过他的一些信息，那就帮他自动填充那些信息，或者根本不显示这些信息。

例如：

1）大多数情况下你可以用IP或定位来获取用户所在城市。

2）如果用户参加过你的市场活动或者用邮箱订阅了你的新闻信息，你当然可以获取到他的邮箱地址。

当然需要时刻谨记在心的是用户信息是否安全。

3. 光标自动定位于输入框内

                                   左图：填写信息需要用户手动移到表单内再开始填写                                      右图：自动获取焦点方便用户直接输入信息

自动激活表单第一部分（或需要填写部分）的填写区域。这样会给用户一个提示——这里有内容需要填写。激发用户填写兴趣。更重要的是这样会节省用户不必要的点击鼠标的时间。

4.表单尽量只设计一栏

左图：用户视线不集中，表单字段分散   右图：用户视线从左到右从上到下很自然

用单行表单的设计布局，视觉动线会很自然，用户自上而下填写浏览。多列布局会扰乱用户垂直方向的视线移动，用户的注意力会分散，也很容易错填漏填。

5. 相关信息分组区分

                               左图：没有分隔开相似信息，导致看起来很臃肿、杂乱                                 右图：相同信息分隔为3部分，不仅视觉上更易接受，更舒缓了用户心

如果表单有很多需要用户填写的信息，试着把相似信息分组，把组用标题或者间隙分隔开。过长的表单常常会让用户感到烦躁和不知所措。

6.给输入的信息限制提示

左图：没有限制提示    右图：有限制提示

为了减少错误信息的录入，在输入区需要增加限制提示：

1）最少和最多字符提示

2）格式提示

3）限制文字、标点符号等提示

举个例子：银行卡号可以输入标点符号和文字吗？当然是不可以的。同样的，输入手机号码也同样适用。

7. 让内容长度与输入框长度对应

地址信息的长度明显比其他标签的长度要长，在视觉上我们也应当和其他标签区分开。

8.错误提示应当展示清楚，逐条说明

逐条展示错误提示

在用户填写错误的那项标签周围出现提示，而不是在其他地方。

更重要的是清楚明确的告诉用户，哪一项填写有误。避免用”当前页面有误，请随后再试“这些提示。这些提示用户永远不明白。用更易理解的语言告诉用户，而不是“系统出现错误”这些字眼。

9.在用户填写完单项信息最好有实时反馈

如图所示用户填写完一项后，再对内容的格式、属性进行验证

在用户输入不合规范的信息后，应当在输入框旁及时提醒用户。

普通的内容输入应当在用户输入完成之后再对内容的格式、属性进行验证。通过Luke Wroblewski 的研究得知，这样做的好处是：

1）会提高22%的成功率

2）会减少22%的错误输入

3）会提高31%的满意度

4）会减少42%的填写完成时间

你可能注意到现在很多产品用的都是不同的提示方法。比如：

1）一些产品在用户填完所有表单信息且点按提交按钮后才告诉用户哪里填写的有问题。

点按完提交按钮后，统一显示错误提示

2）一些产品在用户未填完信息就已经在检验用户填写的信息是否有误。

在填写完成前检验信息是否有误

这两种情况都会导致用户体验不友好。但最坏的情况是第二种，因为：

1.打出任何一个字符用户都会收到错误提示

2.即使在什么都没填的情况下，也会显示错误提示

10.把标签放在输入框外，在输入框内用占位符向用户提示要填写的内容

如果把标签放到输入框内，点击输入的时候占位符消失，有的用户会忘记输入内容属性。这种设计非常不友好。

如果给移动端或者小屏幕设计表单，你可以把标签设置为顶部对齐方式。当然这会让表单非常长，但需要记住的是，表单纵向设计永远比横向设计好，因为纵向表单用户一次获取的信息比横向的少很多，可以避免用户看到繁多冗杂信息而后手足无措。

或者用另一种方法（如下图所示）：把标签放在输入框内，而当用户开始填写时，标签自动移到输入框的左上角。这是对移动端来说很友好的交互方式。

shopify 表单

11. 标记选填项而不是必填项

左图：标记了必填项  右图：只标记了选填项

老实说在这一点上存在着很多争议。Baymard Institute 说你必须两项都标记才行。但在这一点上我比较偏向 Nielsen Norman Group version. 他们的建议是——always ask as less as possible. 一般来说，选填的内容总比必填的要少。举个例子，如果10项有9项都是必填项，那么只标出那个可选项是说得通的。

12. 不要打断用户的填写进程

不要在结账页放任何会连接到其他地方的链接。你需要让用户保持专注不要突然地打断他们，否则他们会迷失，并且会忘记一开始想要干什么。

13.在信息都填写完成后高亮“下一步”按钮

在所有必填项都填写完整并且所有填写项检验无误后，再让“下一步”按钮可点击。显然这种情况只适用于用户填写完某一项内容后，对内容的格式、属性进行验证的这种情况。而非填写完成后一次性提交后再验证错误。这种方法会让用户的注意力集中于填写表单，而且这种方法不会让用户遗漏填写一些重要信息。

更重要的是，“下一步”按钮只在用户填写完成所有信息后才会出现，所以用户的注意力不会一开始就在这个按钮上。需要注意的是：我们需要让这个按钮的“可点击”与“不可点击”的视觉区分明显。

14. 主意地域差别

如果你的产品是跨国产品，你需要特别主意地域差别。

比如：

1）不同国家的电话区号问题

2）美国用zip code，欧洲国家用postal code

3）只有美国有州

15. 如果要获取特殊数据，要向用户解释这些数据是用来做什么的

图为脸书的注册表单

需要谨记在心的是你想让用户填写的信息对他来说是隐私。为了避免不必要的怀疑和质疑，你需要解释让用户填写一些私密信息是干什么的，例如：手机号码，生日，配偶名字等。

上图为脸书的注册表单，脸书在这里解释了为什么他们需要获取到用户的生日信息。

16. 支持颜色有障碍的用户使用

大部分设计师或企业都会忘记这部分的特殊客群。有一些工具可以帮助设计师检查设计稿是否对颜色有障碍的群体友好。

Bjango 可以在PS里实时查看设计稿，Stark Plugin 是sketch的插件，这两个插件用起来都非常简单。

原文作者：Dmitry Kovalenko

译者：Ever

原文地址：https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92