前言
在B端产品设计当中，绝大部分产品都会出现大大小小的表单，表单设计是B端产品经常遇到的，小小的表单却掺杂了复杂的业务逻辑，隐藏着许多细节。本篇文章中，主要结合自身经验及现阶段在不断学习、研究和成长过程中，从以下三部分分享关于表单设计的经验和研究心得。
1. 表单的定义
2. 表单的类型
3. 表单的载体
3. 表单设计的细节
一、表单定义
表单：是一种用于收集和提交用户信息的交互元素。它通常包含一系列的字段（例如文本输入框、复选框、单选按钮等），用于用户输入相关的数据或选择选项。表单不同于组件，输入框、文本框等则属于组件，表单是由多种组件及元素组成的一个整体。
表单可以用于各种场景，如用户注册、订单提交、调查问卷等。提交表单后，用户输入的数据将被发送到服务器进行处理或存储。
表单由表单标题、表单标签、表单域、表单按钮共四项基本要素组成。
1）.表单标题
信息的可视性，具有提示作用，用来提示和告知用户当前表单是用来干嘛的，收集哪些信息。
对于表单标题在产品设计中，表单的标题不会很长，通常不超过10个文字。
2）.表单标签
用来提示和告知用户每个表单项要做什么事情，比如要输入什么内容的文字，选择哪些选项，表达清晰的表单标签，可以提升用户的操作效率。
在产品设计中，表单的标签应该简洁明了，并且也不会很长。
3）.表单域
用来收集和承载信息的方式，一般由文本框、复选框、单选框、下拉选择器等组件组成。
4）.表单按钮
包括确定、取消、返回、添加、切换等按钮，是对表单整体的操作，用于提交信息。
以上就是一个最基础的表单，当然也会有多种复杂的表单，在产品设计中，我们只要确保包含表单这几个基本要素，再结合业务场景去设计更多复杂的内容要素，那就显得轻松多了。
二、表单的类型
表单的类型，按复杂程度可以划分为「简单表单」和「复杂表单」，我们可以这么去理解 “简单表单” 和 “复杂表单” 。简单表单是指包含表单的四项基本要素，没有过多复杂的交互逻辑；复杂表单则是包含了表单的四项基本要素之外，拥有更多复杂交互，如表单填写信息需包含弹窗、抽屉、甚至页面层级等复杂交互动作才能完成表单操作。
简单表单
简单表单由文本框、输入框、按钮、选择框、下拉菜单等这些基本的组件组成。以我工作中真实项目为例，如下图，当前这个表单只需要在当前页面去填写信息、选择选项，提交信息即可，没有超出当前页面以外的复杂交互。
复杂表单
复杂表单由锚点、标签页、树形组件、步骤条、描述组件等复杂组件组成。如下图，当前这个表单有锚点、弹窗、二级页面等复杂交互，每个流程之间有联系，并且每个流程有单独的表单页面收集信息，需要做完每个流程的操作才算是真正意义上的完成整个表单操作。
在实际的工作中，一般不会去刻意区分简单表单，还是复杂表单，在设计过程中往往结合业务需求及用户体验去组合设计表单的场景。
三、表单的载体
因为表单是多种元素的组合，所以说明表单是有载体的，表单的载体就是页面，根据交互方式的不同，可以分为平铺页面、弹窗、抽屉三种。
弹窗、抽屉不能等同于页面，可以将页面比喻为一个房间，而弹窗就是房间中的一个小窗户。弹窗可以在房间内显示一些额外的信息，但它并不能代表整个房间。
（1）平铺页面
当表单由页面去承载的时候，说明表单的内容已经非常多了。对页面级表单，我们通常先需要整理表单内容的分类，属于一类的信息放归拢到一起。
（2）弹窗
弹窗在表单的使用中是非常高频的，使用弹窗的表单通常所要填写的信息不会很多，由于弹窗的大小、位置有一定的局限性，导致表单设计上需要考虑较多情况。例如，弹窗要不要随着屏幕适配、要不要有放大缩小功能、要不要可以随意移动、要不要根据不同的呈现内容联动弹窗尺寸等，其实这些功能都是在解决弹窗本身的局限问题。
（3）抽屉
现在有很多产品经理、设计师，都将抽屉看成了页面级表单和弹窗表单的中间态。抽屉式表单融合了页面级表单和弹窗表单的优势，它既可以承载页面级表单的信息量，又可以和弹窗表单一样不离开主阵地。
四、表单设计的细节
无论是页面表单，还是弹窗表单，甚至是抽屉表单，按照最小颗粒度来看，都是由基本的四项基本要素组成的，即表单标题、表单标签、表单域、表单按钮。那么我们设计的过程中，就会围绕四项要素进行细节控制。
我们来看一下，做一个表单设计要考虑哪些细节，所有的细节都是需要结合业务进行控制的。
（1）表单标题
a. 要考虑标题的字数长度，位置摆放（居左或居中）
b. 要考虑字体的大小，字体样式
（2）表单标签
a. 要考虑标签的字数长度，与表单域的位置摆放（是居左或居中、还是上下关系）
b. 要考虑字体的大小，字体样式
c. 要考虑是否必填，用*号还是文字表达（*号或文字居左还是居右）
（3）表单域
a. 要考虑表单域的位置摆放（跟表单标签的位置关系是居左或居中、还是上下）
b. 如果是文本框、输入框之类的组件，要考虑数字限制，同时给出输入线索
c. 提示信息：为用户提供额外的提示或说明，以帮助他们正确填写表单
d. 要考虑必填项校验，未填写时提交给出提示语
当然，也有很多同学会问，为什么手机号和密码没有线索提示和字数限制，因为我们在设计时，通常会有一些常识性在，用户看到手机号和密码就知道怎么填写了，并且，这里用的一般是单行文本，所以就没必要给出线索和限制数字了。
（4）表单按钮
a. 要考虑按钮位置摆放（居左或居中）
b. 要按钮的样式，大小
c. 要考虑按钮的交互样式，比如悬浮高亮等
d. 要考虑完成表单操作后的事件发生，比如跳转页面、关闭弹窗或回到首页等。
好了，以上就是一些关于表单设计的经验分享，如有错误，欢迎批评指正！
