一、什么是表单
在正式谈论表单设计之前，我们先明确「表单」的概念。我们所谈论的「表单」是一种用于信息录入、数据校验的组合组件类型。需要注意的是，常与之混淆的是「列表」，「列表」指的是主要用于信息展示的的组件类型。
二、表单的设计原则
表单内容：表单中字段的数量、文字的多少直接决定了表单采用的对齐方式。
逻辑结构：表单中字段的关联性、逻辑结构（线性关系、组合、并列、嵌套关系），决定了表单的排版方式。
性质目标：表单的性质决定了设计的目标，对于重要的转化目标，我们希望用户高效的完成。对于需要慎重的填写的信息，我们希望表单整体足够清晰，易于理解，确保用户填写正确有效的信息。
承载容器：承载表单的容器（页面、抽屉弹出层、弹窗、气泡对话框），由于不同的可用空间，决定了表单的布局排版方式。反之，根据表单的内容、逻辑结构、性质，也可以决定我们采用的容器，
三、表单的构成
标签：告知用户需要输入的内容。
输入域：采集用户输入的内容。
占位符文本：输入框内的文字提示。
帮助性文字：字段附近的少量文字提示。
反馈提示：输入后的反馈提示。
动作按钮：完成表单并提交录入的内容。
接下来我们将逐个拆解针对这些元素的设计要点。
1. 顶对齐标签
优点：
#清晰的完成路径，最快捷的浏览形式。
2006年7月马泰奥·彭佐进行的眼动研究发现，从标签移动到输入框只需要50毫秒，比右对齐标签快2倍，比左对齐标签快10倍。
#标签和输入域有大量的横向空间。
标签长度弹性大，适合不同长短标签/国际化。大量的横向空间还给多个组合方式的输入域提供了空间，布局灵活。
缺点：
#顶对齐标签占用额外的垂直空间，不适宜屏幕垂直空间较小的情况。
顶对齐标签设计时需要考虑合适的垂直间距，如果表单输入框之间的距离太多太少都会影响视线的移动。建议采用输入框50%-75%的高度作为相邻输入框的间距。
2. 右对齐标签
优点
#能够较快速完成填写，但右对齐布局造成左侧不齐，会稍稍降低浏览表单的效率。
根据马泰奥·彭佐的眼动研究，专家用户和新手用户扫视右对齐标签表单的标签和输入框的平均时间分别为 170 毫秒和 240 毫秒，比左对齐标签快2倍。
#节约表单占用的纵向空间。
对于表单字段内容较多或者屏幕垂直控件较小的情况，可以采用右对齐标签。
缺点
#标签长度和输入域空间受限。
对于多语和国际化的标签长度而言，如果标签文字需要折行，浏览表单会变得困难，右对齐标签适用于标签简短且需要减少垂直空间的情况。
优点
4. 内联标签
内联标签是使用占位符文本作为表单的标签。优点是浏览便捷，填写速度快，可以节省表单占用的屏幕空间。但标签长度的拓展性较差，且输入内容后，标签即会消失，只适合用于有少量字段的表单。
5. 图标标签
图标标签的特点与内联标签较为相似。但将标签设计成图标形式，传达能力有限，不是所有的字段都能够用图形表意的形式轻松识别内容，所以只针对特定简单的表单适用，例如登录表单。
6. 浮动标签
类型 | 完成速度 | 占用空间 | 标签长度 | 适用场景 |
顶对齐 | 最便捷 | 纵向空间占用多 | 大 | 标签长、国际化、简短的表单 |
右对齐 | 较便捷 | 横向空间占用多 | 小 | 标签短、复杂的表单 |
左对齐 | 慢 | 横向空间占用多 | 小 | 复杂敏感的数据 |
内联标签 | 便捷 | 空间占用少 | 大 | 简短的表单 |
图标标签 | 便捷 | 空间占用少 | — | 简短的表单 |
浮动标签 | 便捷 | 空间占用少 | 大 | 均可适用 |
五、输入域
1.输入域的类型
2.输入域的默认值
3.输入域的宽度
六、表单的提示与反馈信息
1.输入前提示
占位符文本：在文本框获取焦点后提示文字会消失。 图标气泡提示：一般在提示文本较多的情况下使用。 帮助性文字：直观，适合少量文字内容、少量字段提示。 文字链接：一般在提示文本较多的情况下使用。
2.输入后反馈
实时校验：在输入的过程中，即时校验并给出反馈。 失焦校验：在输入内容后且失去焦点时，校验并给出反馈。 提交校验：需要网络后台校验的字段数据，在点击提交按钮后校验并给出反馈。
在条件允许的情况下，输入过程中进行实时校验无疑是一种非常便利的校验方式，尤其是针对有多项校验条件的字段，例如密码字段，需要校验字段的内容、字数。并且，这样的方式在一定程度上可规避页面上过度大量的针对细节的文字提示。
七、表单的动作按钮
1.主动作和次动作
通常表单包含一个或多个动作按钮，针对表单最重要的行为（完成表单）的按钮通常被成为主动作按钮，例如「提交」、「下一步」。
次动作则较少使用，作为表单的辅助功能出现，例如「预览」「保存」「返回」。
如果表单中出现次动作按钮，需要确保主动作和次动作按钮视觉效果的差异性，保证用户在第一时间识别完成表单的动作按钮。
2.主动作按钮的禁用与激活
在表单字段较少（3个以内）且均为必填项时，可考虑采用输入域和动作按钮激活的方式。 表单字段较多，或者同时存在必填和非必填项时，不建议采用这种联动。一则因为用户可能会跳过非必填项的填写，二来用户在输入过程中不易得到反馈，可能会对表单本身的功能性产生疑惑 。
八、表单的排版方式
1.平铺布局
单列
多列
2.分组布局
当表单字段内容多、且内容存在分组的关联性，那么把内容按组整理会是一个非常好的选择。例如下单页面，可针对产品信息、收货信息、付款信息分模块展示。用户在填写大量的内容时，可以一目了然的了解表单的结构，减少填写中的压力。
3.步骤引导
当表单的内容较长且存在用户易于理解的明确的流程时，为了避免用户在填写过程中存在错误或一些意外情况，可以考虑用步骤引导的方式去帮助用户完成信息的填写。
最常见的例子是用户注册流程，比较长的流程可能会分为：输入邮箱/手机→验证→填写信息。但需要注意的是尽管步骤引导是减轻填写压力的一种方式，但不过分的分开太多步骤、且需要明确每一步需要完成的任务，否则用户也会对过于漫长、过于未知的流程产生放弃的想法。
