4000字干货！手把手带你掌握web中的表单设计

前言

表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。

生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该"由内而外"而不是"由外而内"的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。

一、什么是表单

表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。

填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。

二、如何进行表单设计

1. 表单拆分

基础表单中会有以下六个元素：

1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。

2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。

3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等

4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……

5. 提示：描述该输入项需要的输入类型，如：上传的文件类型

6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。

当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：

1. 这个元素是什么类型的？
2. 如何处理其他这类东西？
3. 元素之间有什么关系？
4. 通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？

2. 表单录入模式

表单根据录入模式可以分为：单步表单、分步表单和高级表单

① 单步表单：

单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。

② 分步表单：

内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。

③ 高级表单（分组表单）：

高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。

3. 表单的页面框架

表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。

整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。

弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。

侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。

我们在选择页面框架时通常需要综合以下三个因素去考虑：

1. 内容数量 ：内容如果较多不适合使用弹窗式
2. 与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式
3. 表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。

4. 表单的排列方式

① 布局方式

在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：

1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。

2. 多列布局的表单会导致用户的视觉路径变长，用户需以 "Z" 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。

但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。

单列布局

优势：视觉路径清晰，填写效率高，体验好；

劣势：垂直空间占用率高。

建议使用场景：表单内容较少的情况下使用单列布局

多列布局

优势：省空间，能够放置更多的控件；

劣势：视觉路径模糊，填写成本高，填写易出错。

建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。

② 标签对齐方式

标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。

马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：

顶对齐标签：

研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。

劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）

建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。

右对齐标签：

如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。

优势：标签和输入框位置紧密，更方便填写

劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。
建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。

左对齐标签：

在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。

优势：易浏览标签；占用纵向空间较少

劣势：标签和输入框距离较大，表单填写效率低

建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局

输入字段上方的粗体标签

在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。

粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。

小结

标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。

粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。

三、表单校验形式

1. 什么是表单的校验

为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的"反馈提示"，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。

① 前端校验：

主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。

② 后端校验：

与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。

③ 校验触发条件：

1. 用户输入时进行校验（例如：注册输入密码时，实时显示密码强度）
2. 用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致）
3. 用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册）

④ 报错方式：

1. 即时报错
2. 输入完成后点击 提交/下一步/保存 等操作后报错

2. 校验形式

根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：

① 输入时即时验证，即时报错

用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。

优点：可以实时告知用户表单的填写时候符合规范

缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感

使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码

② 失去焦点后即时报错

用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。

优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。

缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。

使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。

③ 操作后（保存/提交/下一步）后全部报错

用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。

优点：减少对用户的打扰，减少后端服务器压力，提高效率

缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。

使用场景：登录账号是判断密码是否正确

最后说说

表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得"由内而外"的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。

欢迎关注团队微信公众号：兆日 UCD