hello，我是设计师小七。

表单作为B端产品中最基础通用组件，也是在各个B端产品中出现频率最高的元素之一。表单的设计特别考验设计师综合能力和设计细节的。一定程度上，表单设计的好坏也决定了产品的成败。

当我被陷入一堆表单设计中时，我开始思考，表单设计到底要遵循什么样的规律，在设计上如何去做取舍？表单该怎么布局？表单的组成元素有哪些？表单有什么交互规范？超长表单该怎么设计？

接下来跟大家聊一聊我对表单设计的研究及日常工作经验总结。将我自己踩过的坑整理出来，目的是为了帮助那些刚迈入职场的设计师，对表单能有一个更好的了解，从而避免在工作中进入误区，也希望能给PM们提供一些思路。

如果你认为表单就是指的把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了。

其实不是，表单设计远远不止这些，表单本身也是一个小产品，它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型；从表单的产生到表单在页面上如何呈现，再到使用表单时与表单之间的交互，每一步都需要投入大量的思考来做好表单。

一、表单基础概念

表单的概念并非互联网原创，在传统行业中，纸质化的表单就占据了非常重要的工具地位；

B端产品通过为表单增加属性，使得一个个任务表单能够在动作——状态机中流转，就能够实现业务的线上化开展和管理。从广义的定义来讲，表单是指用于数据录入的一切形式。从狭义上来讲，表单在大家更广泛的认知印象中，表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据，所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。

二、表单的应用场景

在B端产品中，表单是用户向系统传递和修改数据信息的主要方式，同时也是系统获取用户数据、响应反馈结果的主要方式，可以说表单是人机交互中重要的数据媒介。

想要做好表单设计首先要搞清楚表单的应用场景，在商业产品应用的平台上，表单使用场景可以粗略的归为3大类：数据录入、数据校验反馈、数据展示。

三、表单设计原则与目标

3.1 表单设计目标

表单的设计必须优先考虑为用户减负，提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用，为用户提供高效的数据录入表单，降低用户操作成本、认知负担，并提高数据采集效率才是表单设计的根本目的。

3.2 表单设计原则

贾里德·斯普尔曾经有一个经典案例：修改按钮为网站年收入增加3亿美元。听起来好像是天方夜谭的事情，但是它确实是事实。

良好的设计如何能为商业创造价值，这是设计团队一直在思考的问题。有一点是可以肯定的，我们用客观的数据与严谨的实验，去证明我们设计原则与设计模式，让它们的设计价值最大化，达到为商业创造价值的目标。

a、减少操作，效率为先

为用户减负为目标，在完成数据采集任务的时候尽量给用户带来最小的操作负担；表单效率是衡量表单设计优劣的重要指标，通过合理的信息输入组件与页面布局和交互方式可以使用户快速完成表单页的信息填写任务。

b、准确传达，目标明确

表单能够让用户快速定位重要信息和目标选项，表单标题、选项和提示等内容准确传达含义，表意明确；不要让你传达的信息产生歧义。

c、保持对话，及时反馈

信息反馈与提示对表单来说是一种很重要的保证用户正确填写数据的方式，对用户的输入及时给予反馈，及时告知用户行为的结果，让用户及时感知不同操作的前因后果，并及时响应相关操作；

d、 安全可靠，操作可控

表单需要有一定的容错性，对用户的错误操作具备一定的包容性，有合理的操作后果保证机制，不至于由于意外的错误操作造成不可控的严重后果，针对复杂表单提供分布或即时保存机制，对不同场景任务提供返回、重置、取消、清空、撤销等容错性功能；

一、基础构成

表单在设计上的结构有：1、标题；2、表单标签；3、占位符；4、表单域；5、提示信息；6、操作按钮；

二、表单的形式

1、标题

表示用户录入和编辑信息的所属层级，主要位于表单的左上方或者居中位置。

第一类：普通表单中就是对表单输入信息的概括，是典型的表单标题，通常表现为页面标题或弹窗标题；

第二类：在信息分组输入的表单中出现的分组标题，表现为信息分组标题，源于对输入信息的分组管理，是对分组字段的概括。

关于标题的设计，分为三种样式：

2、标签

标签指每个数据输入域前的解释文本，用于告知用户相对应的数据输入字段的具体含义；

注意点：

文字上要求尽量简洁明了，避免出现有歧义、冗长且难以理解的标签，用词方面尽量贴近用户的使用场景或业务场景，在同一个产品系统内或业务系统内尽量保持相同标签的一致性。

在做标签的时候，我们需要给标签的行高和宽度统一。因为开发在写这个页面的时候，是把每一个元素放在一个class统一的div或者span标签内。因此我们在做设计稿的时候，需要把换行元素考虑进去，即使只有一个字，避免以后二次设计和开发。

对标签的对齐方式又包含：顶对齐，左对齐，右对齐，这个部分后面会详细地展开说明。

3、表单域或输入域

可交互输入域，是构成表单的核心内容，是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。

3.1 文本录入

文本录入是表单中最常见的和最基础的信息输入方式，为用户提供提供自定义文本信息的输入接口。

依据文本内容长度可以分为单行文本框和多行文本域，前者适用于输入文本字符总数较少的场景，后者适用于输入文本字符总数较多或者不确定的场景。

a、文本框

结合不同业务场景及相关经验，文本输入在不同的业务场景下有一些注意点：

1、选择适合的长度

输入框的大小应该向用户暗示所需输入内容的长度，所以长度和内容长度需要相匹配，一定程度上可以减轻用户的操作负担；

2、复合输入框

输入内容需带单位，或可以选择单位，使用特定前/后缀的复合输入框。

3. 特殊格式自动匹配

对于某些特有格式的输入内容，自动匹配内容的特有格式，例如电话号码、密码和银行卡号等；

根据米勒定律（对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错），通过用户的记忆结构来提升用户的阅读体验。

4. 特殊数值自动提示

对于金融类产品，在输入金额数字的时候，当数据较大的时候，建议自动提示数量级及单位，能够方便用户识别数值，降低出错率。

5. 智能补全

对于一些关联性很强的文本输入，可以通过智能补全的方式来减少用户不必要的文字输入，提高填写速度又能减少出错，例如地址输入。

b、文本域

多行输入框在 Ant design 中被定义为文本域。结合不同业务场景及相关经验，文本域在不同的业务场景下有一些注意点：

1、明确提示限制条件

对于有输入限制的文本输入，给予用户明确的输入提示，增加用户感知，降低用户出错率；

2、文本域自适应

对于多行文本框建议使用可拉伸的自适应高度的文本域，比固定高度的内滚动文本域要好，

从用户体验讲，可变化的文本框适用于各种用户的阅读习惯。同时，因为固定文本框常常会出现滚动条，会使页面出现多个滚动条，给用户的使用操作上带来一定困扰。

在做表单域的行内信息换行时，我们需要给出横向字数宽度，和上下左右的间距。超出部分是自适应高度，还是显示滚动条，需要标注出来，并且要指定最小行数，和最大行数。

3.2 选择录入

选择录入是为用户预先提供了一定的选择范围，指定范围中选择目标选项进行录入，依据选项类型可分为：单选、多选、选择器（常用的有下拉单选/多选）、级联选择（多层级联动选择）、树选择、穿梭框、开关。

a、单选框、复选框

一般用于选项不多且相对固定的情况，选项控制在6个以内为宜，用户可以一眼看到所有内容。单选框只能是其中一个选项，一般会默认一个选项选中。多选框则可以选择其中一个或多个选项。

b、开关

使用开关控件的条件是选项的性质互斥（例如：是和否、打开和关闭、开启和禁用等）；

c、选择器

根据选择类型，可以分为单选择器、多选择器、级联选择器以及树选择器4种类型。

优势：占用空间小，在展开所有选项后，可以按重要程度排列。

劣势：当选项过多时需要滚动，会放慢用户输入速度；不点击下拉，用户不知道选项都有什么，不方便比较。

适用场景：适用于选项个数较多（5个以上）的场景和有默认选项的场景；

1、下拉选择

即下拉列表，其允许用户从预定的列表中选择一个或多个选项，为用户在选项的数量上提供更多的可能性。这里注意一些 特殊类型的选择器。

1.1 自定义多选选择器

允许用户自定义添加选项，例如在允许用户添加自定义标签类场景中使用。

1.2 弹框型选择器

列表选项过多，在下拉面板中展示体验感差，那么就可以选择弹框型选择器的弹框来承载更多的数据信息。

1.3 搜索型选择器

用户的记忆程度不同，一部分用户可以通过主动搜索获取选项，一部分用户可以通过在弹窗中直接选择获取选项。

1.4 表格选择器

单一维度信息无法让用户做出选择，需要为用户呈现更多的数据信息才能让用户做出合理判断时，使用可以展示更多数据信息的表格选择器。

对于选择录入，结合不同业务场景及相关经验，选择录入在不同的业务场景下有如下设计要点和使用建议：

避免默认：

尽量避免列表设置默认值，除非业务场景中绝大部分用户将选择该默认选项，尤其是必填字段，因为有默认值的表单，用户一般会快速扫描浏览，过程中可能会跳过默认项，进而增加犯错几率；

多项搜索：

当下拉选项列表中选项较多的时候建议增加关键字联想检索功能，方便查找目标选项；

提示明确：

提示信息要明确，避免模糊的提示文本，让用户明确知道自己选择的是什么；

2、日期/时间/日期时间选择器

日期及时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间区间；

日期时间选择：相当于将日期和时间这两个选择项集为一身，在同一个选择器里选择（年月日时分秒）；相当于两个下拉框切换使用，步骤1先弹出日期选择框选择年月日，选择好日期后点击“确定按钮”旁边的“选择时间”，则切换为步骤2的时间选择框。

时间段选择：为用户提供了一种可视化的方式去浏览和选择一个日期、一个时间、一个日期时间或日期范围。

3、级联选择、树选择

二者都属层级选择，区别在于级联选好选项后框内显示的是含层级的内容选项，且只能选择需最子集选项（例如：广东省/广州市市/天河区，不能选择广东省，因为前面的选项只为导航至最子集）

而树选择框内展示的是单个选项的内容，不展示层级，但可以选择任何层级（例如：天河区）

如何选择呢？

1、层级不深，在2-3级之间。一级节点在5个节点左右，二、三级节点个数相对较少，使用具有树形结构的树选择器。

2、层级不深，在2-3级之间。一、二、三级节点个数都相对较多，使用树选择器纵向展示不利于用户查找，建议使用节点分开展示的级联选择器。

d、滑块选择

滑动型输入器，展示当前值和可选范围，通过拖动滑块在一个固定区间内进行选择。

滑块选择这种交互特点使得在设置音量、亮度等某一个维度的强弱等级的时候是一个比较好的方案，依据数值特点可以分为三种类型，分别为单点连续滑块、区间连续滑块和单点间续滑块。

优势：便于用户快速浏览大量的选项，提供流畅的用户体验；

劣势：数值选择具有较强的不准确性，难以精准操作；

使用场景：适用于输入结果相对模糊或不准确的业务场景。

用户可以在一个连续或非连续的区间内，通过滑动锚点来选择一个合适的数值或范围。需求精度要求不高的场景下使用「连续滑块」可得到更灵活便捷的操作；需求精度要求高的场景下可配合「数字输入」使用。

e、步进器

也称为计数器，仅允许输入自定义范围内标准的数字值，上下按钮也不是每点击一次数值±1，可以设置每点击一次±N，N可以为任何数字，也可以为小数。

f、穿梭框

穿梭框较列表选择的区别在于其将备选和已选分别置于选择面板的左右两栏，能够以很直观的方式在两栏中移动元素完成选择行为。

优点：能够展示更多的可选项，方便用户对比已选项与未选项以及更改已选内容;

缺点：控件较大，选择面板占用空间较大;

适用场景：备选项较多且为多选的，需要在多个可选项中进行多选；

两种特殊类型的穿梭框

带排序穿梭框：允许用户将常用或者重要的元素靠前排序，自由调整元素顺序。

树/表格穿梭框：元素的展现形式不同，使用不同的穿梭框形态。树形结构使用树穿梭框，表格类数据使用表格穿梭框。

g、评分

当需要为内容进行评分时使用。

3.3 文件上传

文件上传为用户提供将本地文件上传到系统服务器上的入口，依据上传方式可划分为点击上传、缩略图上传、拖拽上传三种形式:

a、直接上传

即点击后通过桌面系统弹窗选择文件并上传，多用于EXCEL数据表文件、WORD文件等形式；一般用于不需要预览效果的文件上传，文件上传需要提供明确的文件大小和文件格式。这种情况是上传图片和文件合在一个上传控件里。

分为需要手动点击页面上的上传按钮才能完成上传动作和自动上传两种

b、显示缩略图上传

一般用于需要显示预览效果的文件上传，同时选择文件后直接完成上传动作。文件上传需要提供明确的文件大小和文件格式，多用于图片、PDF等文件，一般还可以直接在缩略图片上赋予其他的交互 (查看、删除等)。

c、拖拽上传

用户拖拽文件到指定区域即可完成上传，也支持点击上传。文件上传需要提供明确的文件大小和文件格式。

3.4 关于控件选择

1、选择框优于输入框

选择框为用户提供了备选的选项，用户只需要点击即可完成数据录入，而输入框则需要用户手动自定义输入，操作复杂度和成本明显高于选择框，所以优先考虑选择代替键盘输入，一方面简化操作，另一方面也减轻用户认知和记忆负担；

2、量少对比优选单/复选框

单/复选框较适用于选项较少（5个以内），同时选项之间较为类似需要强调对比时，可以优先选择单/复选框，此外当选项能见度和要求快速响应的时，也可以优先考虑单/复选框，能够直白地提供待选选项，直接选中目标选项，提升输入效率；

3、量大优先下拉选择

当选项较多的时候，超过10个，甚至更多的时候，无法直接下拉展示的时候建议提供模糊匹配和排序规则，方便用户提前预知选项位置或通过关键字模糊检索目标选项；

4、提示

提示信息是指在用户输入信息的过程中提示用户输入状态的辅助信息，提示信息的设计原则：先预防、后纠错

根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，依据用户信息输入阶段，可以将提示信息分为三类：输入前的引导类提示信息、输入中/后的反馈类提示信息，前者则包括帮助性提示、输入性提示，后者则包括错误性提示、反馈性提示。

4.1 输入前-引导信息

一般是在用户输入数据之前就给予用户的信息，目的是帮助和引导用户完成数据输入，防止用户在输入时出错。

a、帮助性提示

在用户填写表单前对表单填写内容进行解释说明的提示信息，并将其置于表单或者某一个输入域的前面，一般分为全局提示与单项提示。

需要注意的是，表单中应尽量减少帮助文字内容，不要依赖帮助文字来弥补表单难以理解的缺点，也避免稀释表单重要信息。帮助文字最适合解释用户不熟悉或者需要特定的操作和内容。放置的位置通常在毗邻输入框的位置。

① 全局提示

全局提示一般位于整个表单的最开始，是对整个表单的解释说明，包括信息的用途、安全性、保密性等，以此消除用户不信任。

② 单项提示

单项提示对应单个输入域，只对此项输入域进行解释说明，根据格式塔原理，定位精准便于用户理解。

单项提示也可以选用不同的布局，分别有提示图标在鼠标haver时气泡提示、输入框下方文字提示、输入框后方文字提示、单机输入框气泡提示4种提示布局。

b、输入性提示

输入性提示信息即占位符，直接展示在输入项中，是对某一个输入域的内容进行提示，当用户输入时文本框在获取焦点后提示文本隐藏，如果是大篇幅的解释性内容应放在帮助性文字中。

有示例型占位符和通用型占位符两种。属于是一种轻量化的提示信息，与其他提示信息相比，视觉负担较小，占用空间更小，与输入内容的关联性更强。

占位符设计时，需要注意的：

注意1：有效提示

提示文字最好能简洁明了给出有效的提示信息。让用户能在上下文中获取信息，帮助他完成输入。

用户填写表单时最容易出现的问题就是不知道填写什么格式，例如民族填写“汉族”还是“汉”；生日填写“1997-06-11”还是“199年6月11日”这里可以提示具体的填写示例帮助用户理解。

注意：必不可少

长期的占位符已经给用户培养了使用习惯，没有占位符，用户在输入的时候会抱着试一试的心态去点击，会疑惑是不是应该在这里输入，不够直接清晰，对用户来说是很不友好的。

4.2 输入后-反馈信息

反馈提示是在用户输入时或输入后对输入内容进行的反馈，提示当前输入域所填写的内容是否符合填写规则。

系统状态的可见性 包括“用户知道自己在做什么”、“系统在做什么”、“系统进行到了哪一步”、“用户当前所处环节”等。应当始终为用户提供适当且及时的反馈，避免用户执行错误操作。

反馈机制的设计原则：预先提示，减少出错；

①轻量。遵循【告知但不打扰】的基本原则；

②清晰的文案。反馈内容需要明确表达目的及操作后果，错误提示需要说清错误原因及改正方式；

③保持系统中所有相同事件反馈方式一致，利于培养用户使用习惯和心理预期。

④就近原则。反馈出现在操作点最近的地方时，最容易被注意到且容易被操作的。

反馈类提示信息包括错误性提示和反馈性提示，前者专指错误类的信息提示，后者既可以包括错误类的反馈提示，也可以包括警告或者正确类的反馈提示。

a、错误性提示

在填写表单时，用户免不了出错。错误消息让用户知道无法继续进行，并且告知如何改正。

视觉表现：采用醒目的色彩和视觉要素来对比突出。目的只有一个即：引起关注。

位置：指导文字邻近产生错误的输入框，可以更快更便捷的提供改进帮助。

时机：确保在适当时机出现，如果过度使用，会让人沮丧。例如：在用户输入进程中停止提示，确保输入完成才出现。

准确：信息精准，不要让用户产生歧义；例如“用户名填写错误”要提示用户名具体错误的原因“用户名不能添加符号”“用户名重复”“用户名不能超过8个字符”等具体原因，让用户明确修改意图。

b、反馈类提示信息

反馈提示一般有正确、错误、警告三种状态。其中，正确状态通常不给予任何提示，也可采用图标进行反馈，让用户感受更加直观；反之当用户录入的内容与规则不符时，给予错误提示信息。警告状态往往与文本框相结合，当字数超过规则的限制时，给出相对应的反馈。

c、校验形式

在产品设计中我们还需要了解反馈信息的校验方式，校验方式主要分为：前端校验、后端校验。

前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。与数据库无关。

后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。

d、触发条件

触发条件是说检验的提示信息在什么节点（填写时、失焦时、点击提交时）进行提示，这里分为单项触发、提交触发。

单项触发-即时报错

触发提示的条件是每填写完一项时，校验用于输入项较多，且某个输入项有先决条件，会对接下来的输入产生影响；

优点：避免完整输入后才反馈信息，为用户增加犯错成本。

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

适用场景：输入验证码、注册等功能。

提交触发-输入完成后报错

触发条件是填写完表单点击“提交”时统一校验，用于表单体量较小出错率较低的表单页面，给出所有不合规则的表单信息，根据具体的提示内容可以是单项提示也可以全局提示；

优点：减少后端服务器压力，提高页面性能；

缺点：用户不能及时看到反馈，及时进行修改，如果表单过长的话，一定程度上会影响用户体验；

适用场景：登录账号时检测输入内容是否合理。

关于反馈信息的如何选择位置，我们下一篇详细聊聊。

5、动作按钮

操作按钮常规意义上指的是“完结”表达操作的按钮，常见在一些较简单的表单场景，是对表单内容的反馈，包括提交或不提交。

关于按钮的分类及各种状态：

并且对于每一种按钮，都可以分为常规和禁用两种状态。禁用状态的出现一般是表单所呈现的内容未达到能够触发按钮点击。同时注意一个页面只保留一个主按钮。

5.1 按钮位置

在复杂些的表单中，分别会在header区、body区、footer区放置影响全局属性、仅影响跟随对象、有“完结流程”属性的按钮。

1、表单顶部/表单底部

用于放置全局按钮，两个位置的功能按钮是一样的，只是出现的条件不同。默认显示表单顶部按钮，目的在于用户无需上下滑动到固定位置才能对表单进行操作，省时增效。当顶部按钮因为页面上滑被遮盖了，底部按钮才悬浮在窗口底部。

2、跟随表单项

需要滚动条滚动到底部显示操作按钮，一般用于大部分表单都可以一页显示的情况，为了避免编辑后忘记点确定就跳转页面，会给表单有修改是否保存的提示弹窗。

3、分组底部

对每个分组表单进行的操作按钮，常用于只需要查看不需要经常编辑的表单。

5.2 主按钮禁用策略

对于主按钮是否采用默认禁用取决于表单的表单项数量，有两种策略：禁用策略和校验策略，

当表单项较少的时候，一般在3个以下时，主按钮采用禁用策略，当有数据录入的时候则启用主按钮，一来便于用户理解，二来也是对用户操作的一种反馈；

当表单项比较多的时候，一般超过5项，或者有必填项（必填和非必填同时存在）时，主按钮建议采用校验策略。

因为表单项较多的情况下，往往是必填和选填同时存在，若采用禁用原则，则必须是所有必填项全部非空才能启用主按钮，这时主按钮的启用条件不易被用户察觉，容易造成用户困惑，不知道该如何填写才能启用主按钮，采用校验原则可直接告知不具备操作的原因，因此采用提交时校验反馈的做法更合适这种多表单项的场景。

5.3 按钮的主次按钮如何设计

表单的动作分为主动作和次动作。例如提交、保存或者继续等完成表单填写的动作属于主动作，取消、重置等允许撤销输入的属于次动作。

如果无法移除表单中的次动作，我们在设计时进行视觉区分，尽量弱化次级动作按钮的样式，需要注意的是，在《web表单设计》一书中，测试了几种主动作和次动作的组合。

从阅读顺序、按钮层级、对齐方式综合测试，结果表明在几种设计方案中，方案A的眼球固定时间较短，完成任务效率更高。方案B，人们的眼球定位时间最长，这是因为人们期望按钮按照垂直视线左侧排列，而不是四处寻找按钮。方案C中，很多人误点击了取消按钮。

可以发现，说明完成的路径很重要。主动作和输入框对齐会减少填写表单的时间。所以若无特殊考虑，方案A是最佳选择。

6、微文案

另外，表单中的微文案也很重要，无论是标签、还是占位符，还是提示性文字，或者反馈性文字……表意都必须清晰易懂，同时需要消除用户的疑虑，在整个流程中，做出更快更准确的抉择。

一、常见的表单布局

在表单设计中，通常需要根据信息的容量来选择合理的内容形式来组织表单的内容形式，以此来确保信息屏效比和用户的操作效率。

其中所谓“屏效”比是一个关于界面设计的一个概念，最初起源于谐音“坪效”，“坪效”指的是每坪的面积可以产出多少营业额（营业额/专柜所占总坪数），是一个市场营销领域的概念，而界面设计中的“屏效”则是指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率的提升。

依据表单的组织方式可以将其分为表单的组织形式分为三种，分别为：基础布局、分组布局、分步骤布局。

1. 基础布局

基础平铺是最简单的表单组织形式，将所有需要填写的表单内容项直接罗列在页面上。主要针对表单内容项较少且项目之间无逻辑关系不能按照一定的相关性进行分组的表单。

优势：相对简洁、便于操作，比较适用于完成一个简单快捷的任务；

劣势：表单项数量较大时一次性展示全部信息加重了用户的操作负担，填写效率较低。

使用场景：当需要完成一个简单快速的任务（表单条目数在7个内），比如：输入少量信息即可完成创建、注册登陆表单。

依据表单的尺寸或列数，可将平铺方式分为单列平铺和多列平铺；

1.1单列平铺

优势：路径清晰，由上至下，填写效率高、体验好，操作顺畅；

劣势：占用纵向空间。

1.2多列平铺

优势：节省页面纵向空间，信息承载量较大，能够放置更多的控件单元

劣势：“Z”字型的视觉动线较为复杂，填写体验不好，易出错易遗漏。

2. 分组表单

分组归纳是基础平铺的演进方式，也是基于基础平铺上的交互设计四法则之一“组织”的应用，在基础平铺的基础上将表单项中相关联的项目进行分组，显得更有规律和组织性，即使表单项较多也不会显得杂乱和压抑，用户在填写表单时的心理压力和视觉疲劳也会得到缓解，操作体验也会更好。

依据视觉样式可以有三种形式，分别为：标题分组、卡片分组和标签分组。

优势：将表单内容进行了分类归组，便于快速定位，能够减轻用户填写表单时的焦虑感和心理压力；

劣势：分组标题的添加进一步增加了页面的垂直空间占用；

使用场景：适用于表单条目数在7个以上，且表单项之间存在关联关系，具备分类归纳的基础条件。

2.1 标题分组

标题分组是用文字标题对表单项进行分类，当表单的数据信息超过7个输入域，同时关联性没有那么强且可以被分组时，用分组的方式帮用户设置几个休息点，让用户把要填写表单的大任务拆解成几个小任务来完成；缓解用户在输入上的心理压力与视觉疲劳。

注意：分组内设置项要有强关联性，否则不能归为一组，不能因为字段多为了分组去分组。

标题分组对应的详情展示：一项一项上下铺出来，但如果表单详情信息过长，可以考虑将锚点定位，点击锚点定位的标题即可自动定位到该区域，方便用户快速定位浏览位置。

2.2 卡片分组

卡片分组是在标题分组的基础上给每个分组加上背景做成卡片的形式进行分组。

需要满足数据内容体量很大（7-15个设置项）且超过一屏，关联性更强、数据信息可被分类归纳时，用标题分组不足以给信息做层级区分，为了让用户在操作时更聚焦，同时也需要给用户更明确的操作引导，可通过卡片分组的形式展示，对单独的卡片进行命名。

注意：一个表单项不要分过多的卡片分组，不能每两项做一个分组，这反而会造成用户视觉压力和操作负担。

2.3 标签分组

当表单数据信息之间没有特定的关联性，可以并列单独处理，且每个设置项都包含多个输入域，且多个输入域都使用了标题分组，为减少加载时间将表单分页展现的情况下，布局就可以采用标签页布局进行展示操作。

标签分组是以tab标签页的形式将不同分组的表单项进行并列分组的方式；这种方式一般比较少用，也不推荐，因为页面上只能看到一个分组的内容，比较容易遗漏。

注意事项：

1、tab标签的填写没有先后顺序的规则，标签页彼此之间没有特定的关联性，可独立去设置。也就是说先填写tab1还是先填写tab2，对表单的其他tab项没有任何影响，不存在联动关系。

2、对表单信息的分类可以有效的降低视觉噪音，帮助用户关注重要的填写内容，根据表单数据信息的优先级进行分类，将优先级高的放在表单前面，优先级低的放在表单后面，或进行折叠收起；

具体该如何选择呢？

1、如果每个组之间有逻辑先后顺序，那么推荐使用分步表单。

2、如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位。

3、如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组。

3. 基础分步表单

步骤引导是将需要填写的表单信息按照线性流程进行组织，配备步骤条告知用户完整的流程和进度，在全部步骤表单填写完整后确认信息，流程结束后给予用户操作的结果及反馈。

优势：任务流程清晰，明确当前用户目标，减少用户负担；及时的反馈校验，也避免填写完成后才发现中间的表单填写有误，降低用户的犯错成本。

劣势：无法通览全部内容，每一步的回溯成本较高

适用场景：适用于具有明确线性逻辑的任务场景。

4. 高级表单

高级表单适用于内容项复杂，多任务嵌套使用的场景，常见有动态表单、动态表格、折叠面板、弹窗/抽屉编辑等。

4.1 动态可编辑表单

表单内容项是不固定的，用户可以按照实际业务需求对某些内容项进行动态增减。常见形式有一个固定的表单，通过增减按钮可以设置表单数目，一般动态表单数目≤3，并且每个输入框不需要单独的标题使用。

4.2 可编辑表格

和动态表单的交互逻辑基本一致，外观上是以表格形式展示，增减的动态数据数目建议3~6个。

建议条目表单数2~5项时使用，以使得每行内容可被完整呈现。

4.3 折叠面板编辑

折叠面板：适用于表单中明显嵌套子任务的模式，收起状态下只读子任务设置，展开状态则可以对子任务的设置进行编辑修改。

建议条目表单数在6~8项时使用。

4.4 规则树

应用于规则编辑场景。适用于页面中需要添加一个或多个对象，且每个对象都需要添加或编辑多组数据的情况。

4.5语句式表单

让用户在预设的结构来完成语句，常用于设置、编辑规则类表单，表单读起来更友好更人性化。

二、影响表单布局的要素

影响表单布局与构成元素选择的几个要素：

内容数量：

内容的多少会影响设计所选择的容器、内容布局；如果内容较多，除了布局还要考虑采用分组、分步等形式去有序组织信息。

复杂程度：

表单逻辑也是伴随内容的多少而同比增加的，内容少则关系相对简单，内容多则关系复杂。

逻辑结构：

常见的有串行结构（各表单内容之间是线性关系）、并列结构（有多组表单，各组是并列关系）、更复杂的甚至有串行与并行嵌套结合的结构。

所处容器：

表单内容所处的容器有页面、抽屉、弹窗、气泡，容器所能承载内容的多少也在逐步减少。在设计中我们根据打断感、与上一级关联程度、内容复杂度进行容器选择。

来源页面关联：

如果与来源页面关联强，则建议使用弹窗、抽屉等容器，可以停留在之前操作页面上，缺点则是用户操作的沉浸感偏弱；如果与来源页面关联弱且信息量较大，则建议使用页面，同时在页面中填写表单的沉浸感也会更强。

三、如何判断采用哪种布局方式

关于使用何种布局方式的判断，应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。

下图是为了能更直观的让设计师明确面对不同复杂程度的表单如何设计，根据信息的复杂度和相关性模型来进行选择。

（来源：Ant Design）

在B端产品中，大致可以将表单操作的交互方式分为6种，依据使用频率从低到高分别为：原位编辑、侧边抽屉、气泡卡片、新开页面、浮层弹窗、页面跳转，在选择交互方式的时候需要根据使用场景和业务需求。

一、原位编辑

原位编辑是一种由内容展示演变而来的状态，其编辑内容也为展示内容，单击的时候切换为编辑状态，可编辑内容，属于轻量型的信息采集表单。

一般出现在表格或者卡片内，单个的字段展示（例如新建文档标题等）也可能出现，正常情况下就是展示状态，当鼠标悬浮时hover时提示可编辑，点击字段内容或特定操作按钮即激活为可编辑状态。

优势：快捷易操作，随时启用与退出，主流程的操作流畅度高。

劣势：编辑状态较为隐蔽，不宜被察觉，特殊状态才会被触发。

适用场景：适用于输入内容较少，适用于频率较低，同时属于主流程分支的场景。

二、气泡卡片

气泡卡片是一种类似于弹窗的对话框，但是比弹框要轻量很多，属于超轻量的对话框，气泡卡片内通常只包含一个轻量化的操作，允许用户在当前界面快速对某一个操作进行编辑同时不需要打断主任务流，可以随取随用，通常是非模态的，不对主页面流程和操作具有阻断性。

触发生效机制可以是设置项点击即生效，也可以多个设置项选择后，触发操作按钮生效（操作按钮建议不超过2个），触发机制可以根据项目实际需求而定。

优势：简单快捷易操作、主流程的操作流畅度高。

劣势：扩展性不强，承载的信息不易过多。

适用场景：适用于快速编辑和输入的场景。常用于条件筛选的设置，点击或hover后显示气泡卡片内容（建议不超过5个设置项）。

三、抽屉编辑

抽屉弹窗也被称为侧弹窗，弹窗抽屉和弹窗很类似，使用场景和亲密度都是一样的。相比弹窗，抽屉的侧边弹出的交互方式，其操作成本和用户使用心理负担会小很多，流畅性次于原位编辑与气泡卡片交互但但优于页面跳转。

通常在主视窗的局部位置滑动出现，占用整个窗口高度，抽屉的承载能力大于弹窗，根据数据信息选择弹窗或抽屉，允许承载较长的表单内容。

和模态一样，滑出的内容是与上下文存在关系的，允许用户在主视窗中查看参考信息，建议条目表单数>8项时使用。

注意事项：如果系统大部分用的弹窗，就优先选用弹窗，如果表单内增加了更多字段，可以换成抽屉弹窗；

优势：承载的信息量有较大的弹性空间。

劣势：由于信息集中在一侧，导致视觉焦点不稳定，如果长时间工作，会产生不平衡的感觉。

适用场景：适用于当前任务流中插入临时任务的场景。

四、新开页面

新开页面指的是保持当前页面不变，在主页面进行操作后在浏览器中新开标签页用以展示新页面，浏览器停留的页面可以是当前页面也可以是新开的标签页。

优势：页面之间相互独立，互补不干扰。

劣势：用户的焦点丢失，注意力分散（因为系统中大部分的操作在同一个页面中完成）。

适用场景：适用于需要参照一些文档来帮助用户完成表单录入操作的场景。

五、 窗口式表单（浮层弹窗）

弹窗交互是表单交互比较常见的交互方式，也具有较强的信息承载能力，同时拓展性也更强，在原位编辑与气泡卡片无法满足交互时选择弹窗/抽屉交互，用户在不离开当前页面的情况下进行插入性操作，用户也可随时退出操作。

依据主页面交互阻断性可将弹窗分为模态弹窗和非模态弹窗两种形式。

3.1 模态弹窗

模态弹窗以页面对话框的形式呈现，体现页面和弹窗之间的一种层级关系，激活弹窗时，用户不能离开主页面的流程，对主页面的交互具有一定的阻断性，不能继续主页面中的操作，必须关闭弹窗后才能继续主页面的操作。

优势：简单易操作，承载的信息量有较大的弹性空间。

劣势：浮层弹窗给主操作流程造成较强的割裂，降低输入的流畅度。

适用场景：适用于主流程步骤中需要分支任务的场景。

3.2 非模态弹窗

非模态弹窗指的是用户在不离开主页面的情况下，可在当前页面中打开多个浮层弹窗并对其内容进行编辑；

激活弹窗时，用户可以离开当前的主页面及相关流程对弹窗内容进行编辑，同时随时可以回到主页面及相关流程继续操作，和模态弹窗的主要区别是对主页面流程没有阻断性。

优势：同时进行多个操作，阻断性弱。

劣势：学习成本高，容易产生混乱，误操作概率高。

适用场景：适用于多任务处理情况有较高的要求的场景。

六、页面跳转

新页面为当前页面的分支流程，不会干涉用户对于主页面的操作，页面功能是独立的。

如果是初始化类型操作，超出了弹窗/抽屉的承载量，涉及录入内容比较多的时候，有大量的信息要一项一项审核，就建议跳转到页面再进行新的操作，跳转页面体量较大，页面更加稳定。

优势：信息承载能力强；有利于用户对业务流程有更清晰的认识，从而使得主流程的操作流畅度高。

劣势：输入字段较多，难于给予及时性反馈。

适用场景：适用于特别重要的功能表单的填写场景。

七、如何选择表单交互方式

第一原则：不滥用表单的交互形式。

表单的交互设计，有时候往往会被设计所忽略，或者所有交互都采用弹窗，本可以气泡卡片一步解决，使用弹窗却要两步完成，本需要界面跳转承载复杂表单，却使用弹窗不停滚动。

表单交互方式的选择，我们可以参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次再考虑相关性。

根据内容的多少及亲密程度来决定，我们设计时应选用哪种交互方式，或者可以直接根据内容承载量做判断也是可以的，从少到多依次为：气泡卡片 - 原位编辑 - 弹窗 - 抽屉 - 页面跳转-新开页面。

具体选择：

1、当信息复杂度低，同时相关性高时，我们可以选择原位编辑/气泡卡片、弹窗的交互方式。

2、当信息复杂度高，但关联性也较高时，我们可以使用抽屉、全屏弹窗的交互方式。

3、当信息复杂度高或信息独立时，我们可以使用页面的交互方式。

关于不同交互方式的特点：

气泡卡片：承载内容比较少，直观，即见即所得。

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

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

页面跳转：最常用方式，适用于绝大部分的表单，支持构建复杂的表单。

一、表单页面要考虑适配方式

表单在设计时一般有2种适配方式，一种是固定适配，一种是间距适配。

1.1 固定适配

设计需要注意设计时，需要保证最小分辨率能够正常显示，表单中信息宽度固定，不随分辨率变化而变化。该方式适合用于表单页面的适配中。

当采用弱分组布局时，随分辨率变小，数据项自动掉下来，其他保持不变。

这里最小分辨率大家根据自己公司情况而定，我在设计时设定1366X768为最小分辨率。 下图是百度统计流量研究所，大家可以看看数据，具体以自身公司而定，因为一些单位可能还在使用1280X720的分辨率，那么就设定1280为最小兼容的分辨率。

1.2 间距适配

和移动端类似，间距固定，组件自适应该适应方式在弹窗、抽屉中较为实用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。

二、总结

关于表单设计其实还有很多可以深挖的空间，不管是To C 还是To B，都是为了实现用户的需求、帮用户解决问题。

我自己刚接触B端产品的时候，还是习惯性的希望能把产品做的美观，“高大上”。后来在工作中慢慢地发现每个项目的背后思考更为重要，把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上，辅助业务挖掘，为谁而设计很重要，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题。

以上便是个人对表单设计经验总结和方法沉淀，以及对部分问题的理解和分析，希望能够通过这篇文章给到大家更多的启发。文章中如果有不严谨、错误的地方希望大家给予指正。作为一名刚刚将自己工作内容进行沉淀并分享给大家的设计师，希望大家可以多多点赞评论鼓励下。

长达16000+字，文章很长，感谢您的耐心阅读。

下期预告：

全方位解析在表单设计中，常见的设计疑问？

最后，我准备了很多平时可以能用的资料，老规矩，资料在公众号后台，需要的话免费拿走，获取方式：【三原设计】公众号后台，发送文字“素材”，获得获取方式～

参考文献：

1、来源链接：https://ant.design/docs/spec/research-form-cn（来源：Ant Design）

2、表单设计需要注意 http://t.cn/EhMmZPf

3、表单设计 http://www.woshipm.com/pd/4147841.html

4、《Ant Design表单设计》来源链接：https://ant.design/docs/spec/research-form-cn

5、《web表单设计》

文内出现的图像版权属于其合法持有人，只供传递信息之用，非商务用途。如无意侵犯到您的权益，请及时联系我处理。