我们每天都要和大量的表单交互，表单设计的好坏直接影响着我们使用产品的直观感受，同时表单设计的好坏还会影响公司产品的转化率，公司的利益等等。好的表单设计，能够让用户在愉快的操作中完成各种任务，而不好的表单设计则会让用户产生严重的挫败感，最终导致用户流量丢失的问题。与此同时，表单设计也常常被交互设计师所忽略，很多设计师都没有系统的研究过表单，设计表单的时候全凭“感觉”。本文将从表单设计的概念、原则、元素三个大的方面来阐述表单设计，希望阅读完本文后可以对表单设计有个基本的认知。
（文末附本文内容结构）
一.什么是表单
刚刚前文提到，我们每天都会和大量的表单产生交互，那么什么是表单呢？举例来讲，日常手机应用的登陆注册页面是一种表单，淘宝里的购物车的结算页面是一种表单，在线填写的调查问卷也属于表单。生活中的表单可谓是无处不在。正因为表单如此的普遍，所以它的重要性在交互设计中也变得举足轻重。表单从根本上来讲，是为了让用户可以轻松顺利的完成一些任务，友好的登陆注册页面，会提高产品的注册率，复杂的注册页面则会让用户望而却步。
二.表单的元素
通过前文的阐述，相信你已经对表单有了一个基本的认知，接下来我们来系统的认识一下表单。
表单通常来讲由三个主要元素构成，分别是：标签、输入框和动作。除此之外呢，表单中还可以包含帮助文字、交互反馈等元素。标签负责向用户提出问题，输入框则是提供给用户回答问题，而动作则是帮助用户提交问题。首先我们来介绍标签。
标签
标签主要负责向用户提问题，就像登陆页面里的“用户名、密码”一样。好的标签首先在内容上就要尽可能的简洁明了，最好用几个字符就可以阐述清楚你要问的问题，切记不要用口语化的表达方式作为标签，比如“你的名字是什么啊，你的密码是什么啊”，这样看上去很人性化的文字实际上是很愚蠢的。标签的内容固然重要，我在这里最想阐述的还是标签的对其方式。细心的同学在日常填写表单的时候可能会注意到，表单的标签会有几种对齐方式，比如顶对齐、左对齐和右对齐。这三种对齐方式各有利弊，适用于不同的场景。
顶对齐：顶对齐是三种对齐方式中，对减少用户填写表单的时间贡献最大的。因为顶对齐的方式，给用户提供了一条清晰的浏览线，用户只需要自上而下自然浏览填写就好。据数据统计，顶对齐标签的设计形式可以让用户更快的识别信息。但与此同时，顶对齐标签的形式也会导致垂直空间的浪费。
左对齐：左对齐标签的形式可以很大程度上减少顶对齐竖空间浪费的情况，同时，由于人们的浏览习惯是由左向右，因此左对齐的方式也更利于人们浏览标签。所以，当你的设计中，标签内容是需要用户认真浏览或者用户不熟悉的情况下，使用左对齐标签的形式更利于你的设计。但是左对齐也会导致标签右侧不对齐，标签和相关输入框之间的间距增大，这样也会降低表单整体的可读性，延长用户完成时间。
右对齐：右对齐标签的设计形式，同样可以减少竖空间浪费的情况。由于采用右对齐的方式，这样和右侧输入框之间的关联情况就会大大提升，用户可以很容找到标签对应的输入框位置。但同样也会导致标签左侧不齐，导致可读性降低，延长用户完成填写表单的时间。
输入框内标签：输入框内标签也是常用的一种标签形式，但是这种形式存在一定的特殊性，鼠标光标定位后，输入框内的标签就要消失。这样的形式可以很大程度上减少空间的浪费，减少表单完成后的信息量。但是当用户填写完表单后，所有的标签都不在了，这对于用户想要检查表单填写的准确性就会造成一定的困难。
在这里，我简单介绍了四种标签存在方式。每种形式都有其优点和缺点，我们在选择具体设计样式时要整体考虑场景，信息量等问题，综合考虑。
输入框
输入框是用户和表单之间交互的主要阵地，输入框的形式除了文本输入框还有很多种形式。包括单选框、复选框、下拉列表、日期面板等等都属于输入框的范畴。
设计师在设计输入框时，应该注意以下几点：
1.提供输入框内容限制，避免用户输入错误信息。举例来讲，设计购票平台时，购票数量输入框系统初始状态下就不允许用户输入负数或小数，这样在一定程度上会避免用户提交错误信息，导致系统性能下降等等。
2.输入框的长度实际上是对用户输入内容的一种暗示。因此当用户提交的信息字符很短时就不要将输入框设计的过长。当输入框的长度不符合用户预期时，会让用户思考是否输入错误，不让用户思考是我们在设计方案时候的一项准则。
3.设计标签和输入框时，可以考虑运用栅格系统。
动作
在表单设计中，可以将动作划分为主动作和次动作两种。主动作主要是指对用户行为起正向推动作用的，如确定、完成、下一步等。而次动作则与主动作相反，主要对用户行为起反向作用的，如取消，上一步等。
在设计表单设计的动作时，应该注意以下几点：
1.通过视觉差异来区分主动作和次动作，主动作一般主要起推动作用，因此在设计过程中，可以适度弱化次动作的视觉效果，引导用户去点击主动作，推动用户完成表单。
2.当设计次动作时，可以为其设计撤销路径。当用户填写完一篇表单内容后，不小心点击了上一步，所有填写的内容都消失了，对于用户来说，这是非常不好的使用体验。
3.用户进行主动作或次动作操作时，系统应当及时给予用户视觉反馈，及时告诉用户，他的点击造成了什么影响，带来了哪些变动，让用户在使用产品的过程中有一种计划安排之内可控的感觉。
帮助文字
帮助文字是用户使用产品遇到困难时，能够最先找到解决方法的途径。因此就要求，帮助文字的出现要及时且不会对用户操作本身带来干扰。
1.什么时候用户需要帮助文字：人们不熟悉表单要填入什么数据、人们质疑为何要填入特定数据、系统推荐数据填写方式、用户不知道怎么去解决遇到的问题。
2.帮助文字，提示信息尽量使用用户语言，不要使用用户看不懂得语言，因为看不懂得语言只会让用户更加焦躁，把你的用户想象成一个技术小白，去告诉他解决方法。
3.不要将产品的可用性寄托在帮助文字上，帮助文字越多，只能说明你设计的产品可用性低，无法让用户在不看帮助文字的基础上完成任务。我们设计的最终目标都要让用户在不看帮助文字的情况下都可以完成操作任务。
4.帮助文字的出现一定是用户需要的时候再出现，最后可以让用户主动触发，不要到处弹帮助文字。
错误与成功
错误与成功信息的提示，是用户使用产品完成任务时可以看到的最终反馈。在设计方案时，不要吝啬成功信息的反馈，成功信息就好像在鼓励用户说“你完成了任务，真棒”而错误信息反馈就像在说“你太笨了，这都没完成”。试想如果你作为用户，你最想看到哪种信息反馈呢？
当然也不要害怕错误信息的设计，有效的错误信息可以帮助用户解决遇到的问题。
1.通过视觉强化，及时定位错误原因，告诉用户哪里出现了问题。
2.及时提供高效的解决方案，当然在提供解决方案时，要求也是要运用用户语言，不要使用用户看不懂的语言。
3.产品中，错误信息的提示要保证一致性，不要出现错误信息不统一的状态，那样只会让用户感到更加糊涂。
4.用户修改完错误信息后，要及时反馈用户修改完成并提示成功信息。
表单设计设计是一个系统工程，在这里推荐《Web表单设计-点石成金的艺术》这本书。
好的表单设计，就好像是一副美丽的画卷，给人以赏心悦目的感受。以上提到的一些内容，都是作为设计师在设计表单时应该考虑到的问题。随着我们对交互研究的不断深入，设计一个体验好的表单已经不再是什么难事，也很难再遇到体验很差的表单设计。表单设计以小见大，把表单的体验设计好就可以反推到我们整个产品设计。本文中提到的一些内容，希望可以给各位一些帮助，哪怕只是读完，感叹一句“哦，这些点我在设计中已经注意到了”我觉得写这篇文章也是有价值的。
交互学习，我一直在路上。
与君共勉。
