高效易用的表单设计指南
整理了一篇断断续续写了很久的文章，结合最近的读书笔记和自己的工作经历探讨一下表单设计中的一二。
（最常见的表单就是各种登录页）
如何定义表单，表单的构成元素有哪些
表单无处不在，表单主宰者我们生活中涉及到信息输入的一切，表单在互联网产品中有着十分重要的作用，我想可以毫不夸张的说，表单是人们与网络世界发生互动的入口，表单的重要性不言而喻。那么什么样的形式才能被称为表单，先下一个模糊的定义：只要有允许用户输入信息和提交信息的页面，都可以称作为表单（传统的纸质的手写的表格也属于表单），可以说表单承载着所有手动的信息源录入的入口，优秀的表单设计可以极大的提高信息录入的效率。
（表单一眼就能辨认出）
哪些信息的综合才能被成为表单呢，表单的构成元素主要分为三块：信息标签，信息输入控件，动作。具体的内容将会在下文详细阐述
信息标签
在一个表单中文本相关的内容都可以被归纳到信息标签一类中，常见的内容包括标题、提示信息、帮助文字、状态信息等，本质上来说这些信息标签的存在都是为了人们能够更高效的完成表单而存在。首先我们来说一说标题，标题对于一张表单来说就像是一个表单的眼睛，标明当前表单主要目的一句文字描述，对于用户来说猛然进入到表单页面，一个能够说明当前是在做什么的表单标题对于消除用户的疑虑有着很显著的作用，表单标题的文字描述不需要在标题中使用过多的修饰词（甚至不使用修饰词），告诉人们在填什么表单，填完后能干什么，提示信息、帮助文字和状态信息也是如此，以简洁高效的传达信息为主。对于表单填写页面来说，需要尽可能的去除任何会分散用户填写表单时注意力的媒体信息，以营造沉浸式的表单填写环境。
对于这一类的信息标签，我们在撰写的时候需要遵循以下几个关键的描述方式：
· 文字描述尽量简洁直观，避免出现冗长累赘的文本需要用户阅读
· 用词尽可能能够贴近用户的使用场景
· 尽量使用简洁肯定的语气描述
· 同一类的信息标签字数上尽量满足视觉上一致性的要求
常见的表单信息输入控件
文本框
表单最基础也是应用最广泛的控件，主要作用是用于输入内容（文本或者符号），根据需要可进行字符数或文本格式限制
单选框
仅允许用户从一组数量较少的相互独立的选项中选择一项，须有默认选项
复选框
允许用户从一组相互独立的选项中选择不止一项，应确保所有的选项都能够被激活
下拉列表
允许用户能够从一组数量较多的相互独立的选项中选择一项，下拉菜单需要有明显的下拉箭头显示更多选项，下拉菜单对页面空间的利用率较高，对于数量较多的单选项来说优先选择下拉菜单，但是因为有下拉菜单的存在，展示区域有限，尽量避免在下拉菜单中放入过多的选项
穿梭框
在多栏之间移动某些特定信息单元，点击中间的方向按钮完成选择行为
图片、文件等文件上传器
上传图片或者文件的入口，需要有上传文件的进度提醒，一般会在前端进行文件格式和大小的校验
时间选择器、级联选择器等复合型选择器
特殊用途的输入框，仅为特定场景定制使用，如时间选择器几乎都只用在需要进行时间选择的地方，级联选择器用在所选择的信息已经被准确的进行层级分类（如省市区地址一类）
表单中的动作设计
对表单动作的设计也是组成表单非常重要的一个模块，合理设计的动作可以减少用户对表单产生误操作的概率，也可以提高表单的使用效率。上述列举了表单的基础构成，那么当一个表单仅仅是一堆表单控件的堆砌，并不能构成一个完成的表单，也并不能让用户完成表单的填写，更不可能得到我们期望的填写体验。
根据填写表单的动作时间可以分为三类：起始动作、过程动作和终止动作
· 起始动作：开始（表单入口）
· 过程动作：进程指示器，快捷键设计（主要为Tab键等快速切换），分步按钮，外部链接
· 终止动作：撤销，重置，分步按钮，提交（完成）
开始
一般为开始填写表单的入口，需要有明确的入口信息
进程指示器
进程指示器优先使用在有明确步骤划分的表单填写进程中，一整个表单可以被划分为一系列的小步骤，并且这些小步骤之间确实存在一定的先后顺序。进程指示器会详细的告诉用户当前处在表单填写的那一个步骤，以及距离完成还需要多好个步骤。进程指示器必须要显示实时的填写进度，每个步骤建议采用一致的常见的编号方式对进度进行编号（数字、字母等）
快捷键设计
在进行动作设计时，必须要考虑使用快捷键进行跳转的问题，包括使用tab键、enter键或上下左右键的来控制对输入框的切换。常规的切换顺序建议按照目标用户的阅读习惯来设计，如大部分的时候我们都会依照从左至右自上而下的切换顺序。
外部链接
外部链接的跳转在表单中也很常见的动作之一，除非在非常必要的情况下添加外部链接，否则建议不要在表单中使用外部链接，因为外部链接很容易打断用户当前填写表单的沉浸体验
撤销
撤销属于对于单个表单控件的破坏习惯动作，对于撤销操作的设计需要基于用户可逆的返回操作，比如常见的在win系统中为Ctrl+Z和Ctrl+Y(在Mac中为Cmd+Z和Cmd+Y)
重置
重置也属于对于整个表单的破坏性动作，对于重置这里一类破坏性较强的操作，一般在视觉上进行弱化处理，和主动作在视觉上形成明显的层级对比。在进行重置按钮式，一般建议让用户进行二次确认，并且提供简单的恢复方式，
分步按钮
在采用进程指示器的表单中，我们经常能够看到类似于"下一步”一类含义的按钮，这类按钮存在的价值一方面是检查当前步骤中的必要信息的填写完整性，还有一方面是在当前步骤结束后给予用户明确的反馈。
提交（完成）
此类操作意味着当前表单的结束，甚至包含部分在当前流程中不可逆的成分存在，所以提交与完成动作的设计也需要相当谨慎，提交完成按钮的设计建议是是是校验表单所需的必要信息完整性，满足条件时才释放可点击状态，当一个页面中存才不止一个按钮时，我们更需要把视觉焦点放在提交（完成）的操作上。不过现在很多时候提交按钮经常与一些条款类文件的“同意阅读”绑定在一起，如“同意条款并立即提交”“提交即视为同意服务协议”等，这样的结合其实一定程度上优化了降低了用户发生模棱两可心理活动的机会：不同意这个条款我还能不能提交信息？我点了同意之后真的能够提交信息吗？将两个具有从属关系且都是唯一性的操作合并在一起，避免引起复杂化。
表单的反馈设计
我们期望用户给我们是有用数据，也希望用户能够一气呵成完成表单的填写，但是当用户费尽心思的填写表单时，难免会对表单列出的内容发生误解，从而输入了一些错误的信息，这时候就需要触发表单的校验反馈机制。我们不得不打断整个沉浸的填写过程，告诉他：不好意思，刚刚这个地方你填的不对。
那么在表单的反馈中，该如何设计反馈机制才能将这种错落感降到最低，首先就是我们对有特定要求的数据进行实时校验。哪些数据最好进行实时校验呢，首先就是类似于手机号码、证件号码这一类有着明显格式属性的信息，这一类信息一旦错误，对我们来说将毫无价值，还有一类如密码的设置这类信息需要对其安全性进行校验和计算，通过页面反馈基于用户当前安全、重要程度的提示.
根据长期的表单设计的经验，总结了一下几点：
· 表单项目填写时的错误反馈，实时校验，尽早验证给予用户反馈
· 表单填写完成后给予用户正向激励式的反馈
· 填写表单的过程中的慎用弹窗反馈
（弹窗实际上是一种用户体验非常差的交互机制，一而再的弹窗会打断人们思考问题的逻辑，会增加了操作的复杂性，弹窗后还需要去阅读弹窗内容，寻找关闭弹窗的方式）
我们需要尽可能的去营造沉浸的填写体验，使表单填写一气呵成
简单易用的表单的其他一些关键特征
由于文章篇幅的原因，还有很多综合性的表单设计技巧无法一一详细展开叙述，整理了以下一些我认为比较关键的因素与大家分享。
· 一页表单只做一个主题的事，沉浸在当前的信息中，对于较长的表单建议采用分步导航
· 页面上尽可能的排除与填写当前表单无关的一些视觉元素
· 将表单的内容最好按照逻辑顺序进行分组
· 在有大量表单的页面，视觉效果上应该尽可能的采用简洁的设计风格，过多的视觉信息会打破沉浸的填写体验，弄巧成拙
· 表单的控件要兼容市面上的全部主流浏览器
· 表单在填写时，视觉上最好能够拥有一条清晰的自上而下的视觉线
· 表单的排版方式：左对齐>顶部对齐>右对齐（具体的原因将会在其他文章中细说）
上文主要和大家讨论了我在仅有的交互设计工作经历中总结的一些心得，肯定有很多观点还存在不成熟的地方，接下来仍会不断的学习，同时完成本篇文章时也吸收和借鉴了很多前辈们的书籍和文章中的观点，在此一并表示敬意。
参考资料：
《Web Form Design: Filling in the Blanks 》
《Forms taht Works Designing Web Forms for Usability》
原创发布，未经许可，禁止转载
