围绕怎么使得表单设计显得友好和降低用户交互成本，这篇文章主要介绍了Web端表单设计的几种常见方式以及需要注意的地方。

全文分为以下8大块：

把表单设计成2列好吗？

标签应该放哪？

能用占位符替代表单吗？

怎么减少表单填写的认知成本？

按钮应该算作表单填写的一部分吗？

提高表单填写的效率有可能吗？

用户所在地会影响表单设计吗？

结论

1.把表单设计成2列好吗？

眼球跟踪研究已经表明单列比多列表单的填写更便捷。我们浏览网页的习惯同填写表单的习惯是一致的：都是从上到下，关注点放在内容上。而多列表单会给用户造成干扰和打断他们的注意力。所以为了保护用户注意力的连续性，我们把表单各部分按照上下竖着的结构设计。当然规则都有例外，对于较短的内容或者逻辑上相关的内容（比如手机号、城市、国家、区号）可以并排放在一行显示。

如果表单结构复杂（比如在借贷平台上注册），可以通过拉开间距或者添加标题，在视觉上把语义相近的部分划为一类。这样用户就不会在字段中迷失，并且因为分成了几大类，所以更能感觉到阶段填写的进展。       

2.标签应该放哪？

标签告诉用户需要在输入区填写什么内容。关于标签的放置方式，通常有3种：输入区上面、输入框的左边、输入框的里面。关于哪种方式最好有不少争议，所以也没有明确的答案，不过有一件事情可以确定的是标签的放置位置取决于场景。下面分别介绍这3种标签设计方式。

标签在输入区上面

已经被谷歌的UX研究所证实这是最常见的标签设计方式。这种方式可以更好的适配手机的尺寸。

标签在输入区左侧

标签在左更能引起用户的注意，而且与输入框是左右一一对应的，视觉上不会有歧义。左右的布局在空间上也会更加节省，但是这样的布局仅适用于web端的设计，对于手机，就要考虑到尺寸的问题了。如果还是采用这样的方式那用户可能看不到完整的输入字段了。

标签在输入区里面

交互式标签在输入区里面的设计方式越来越常用了。在点击输入区后占位符标签不消失，而是移到输入区的顶部，为用户输入字段腾出空间。

这样的设计方式的优势很明显，可以节省空间，对于用户标签动效也很好理解。不过这也不是在任何情况下都是最好的解决方式。如果仅仅需要填写几行字段（比如登录框或者邮箱），那就没必要采纳这种设计方式了，这种方式适用于填写多行内容的复杂表单。

先不管这种设计方式的好处，大家可以考虑下需要下拉展开选项怎么适配这种交互式标签。

3.能用占位符替代表单吗？

给用户提供提示的方法有很多种，占位符是其中一种，不过有研究表明占位符为用户提供的帮助没有对可用性的伤害程度大。当用户点击输入区域后，占位符消失，这很考验用户的短期记忆。对于用户，填写前需要记住需要填写什么内容，填完后需要靠记忆检查内容的正确性，这无疑增加了用户的视觉和记忆负担。

用户的解析数据的习惯一般是先点击对应的输入区再思考，而占位符是点击后就消失了，所以这就要求用户在鼠标切换到输入区前就思考。这与用户的操作习惯不太一致。

虽然占位符替代标签的劣势很多，但是有些情况下这样设计是合理的。比如提交新闻订阅时，仅需填入“邮箱”一项内容。

4.怎么减少表单填写的认知成本？

拉开间距

标签和输入区应该在视觉上是捆绑在一起的，这样用户就能理解哪个标签是对应的哪个输入区，避免所有标签和输入区的间距是平均分的，否则会给用户造成困惑。

自动聚焦在第一行输入区

自动聚焦可引导用户填写表单的第一项。可以通过加深输入框的描边或者填充吸引用户的注意力。通过自动聚焦的方式，可以加快注册或者购买的进程。

不要使用大写

全大写的标签使得阅读困难，大大降低了填写表单的效率。

5.按钮应该算作表单填写的一部分吗？

按钮引导用户采取行动，所以按钮设计应该是易于识别的。假设网页或者app使用者是一位很忙碌的用户，按钮在任务流中起着关键的作用。

按钮应该直接说明具体的行动

一段好的对话设计不仅包括询问用户想采取何种行动。也包括把每一步的意图传达的尽量清晰，给用户提供及时的帮助，这样用户在操作时内心会更加明确和自信。

给按钮命名时候应该尽量精细，而不是采用一些通过的词汇，比如“OK”。有研究表明，仅通过更换按钮的文案，把通用的动词改成了精准的动作词汇，就提升了31.54%的网页注册率。按钮文案应该能够反应出用户的意图，比如注册的任务流，那在按钮上可以直接放“注册”。

置灰按钮

在表单所有内容填写完整前，按钮设计成不可点击的状态。这样可以提醒用户在提交前检查表单内容的完整度。

6.提高表单填写的效率有可能吗？

补充自动填充

自动填充输入区可以减少用户填写表单的出错率，提升表单填写效率。如果用户已经注册过自有的相关服务，填写表单时可以从关联账号获取对应的内容。也可以基于区号或者地理位置可以自动填充城市和区。但是不要忘了，自动填写的区域给予用户可编辑的权利，把掌控权放在用户手里。

不要忘了格式化输入区

把表单输入区格式化，适用于日期、时间、手机号等类似输入。这样会使表单填写更简单。用户填写时不会产生疑惑，因为一切已经清晰明了。

定制输入区

通过定制输入区的长度可以作为填写内容的提示。这对于字符串有限的区域有意义，比如手机号码、家庭地址和区号。

避免使用下拉框，当只有2到3项选择时

当只有2到3项需要用户选择时，因为选项比较少，就不需要用下拉选框了，可采用单选的形式，把选项平铺的在页面上，仅需用户点击一次就可以完成。

验证表单内容

验证表单内容是很关键的一步，把出错项通过视觉区别开，并且说明为什么出错。

给予密码输入相关提示说明

如果密码输入有一些特殊的要求，在用户填写前提前告知用户可以避免一些错误。

在密码输入区还有一个常见的问题，那就是大写键盘开启了，而用户忘记了这一点。建议告知用户大写键盘的开启情况。

给予用户可通过社交账号登录的选择

社交账号登录时一项很给力的选择，这可以节省用户的很多时间。如果提供给用户快速登录的选择，记得告知用户会保证账号数据的安全性以及明确说明需要获取的信息。告知用户在没有获得许可的情况下不会使用他们的数据。

7.用户所在地会影响表单设计吗？

如果服务的用户是2个或更多不同的区域（比如欧洲、美国、亚洲），那表单填写会存在差异性。以下是一些需要注意的地方：

每个国家都有它自己的号码格式

美国的邮政编码叫‘ZIP code’，在欧洲被称为‘postal code’

州‘state’在美国才有

8.结论

要做出好的用户体验表单，设计者需要站在用户的角度去考虑问题。设计表单时，尽量把意思明确的传达，不要让用户失望或者浪费用户宝贵的时间。