2023年B端表单｜实战篇- 表单的具体设计方法解析

B端表单｜实战篇:表单的具体设计方法解析class="size-fullwp-image-899057aligncenter"src="/wp/2023/02/axJbyjc6cCN1g3m7g8Y9.jpg"alt=""/>

表单系列第一篇：B端表单系列开启｜从表单的基本熟悉开头剖析

表单系列其次篇：B端表单｜表单的主要分类和相关控件熟悉

3.1表单的设计框架解析

表单是一个包含了若干表单控件、组件的合集，其中包含的全部表单都具有肯定的联系和共性。所以当我们绽开表单内容的设计时，就要先构建整体的框架，确定表单间联系和共性，再进行细节的设计。

首先，我们要先完成标题、内容、操作区域的布局，标题和操作栏通常高度尺寸是固定的，内容的高度待定，但要确定内间距的数值。

然后，再构思内容区域内的数据项布局形式。常规的数据项布局形式有两种，一种是单列，一种是多列。

它们有各自的应用场景，假如表单内容的收集有连续性，比如个人资料、商品信息、产品数据，具备从第一个开头逐一向后输入的规律，那么主要使用单列设计。

每行填写单一或同0类数据项，则填写的过程会更流畅、清楚，这在成熟产品设计中随处可见。

而多列布局，主要应用在填写内容是无序、随机的，具有高度不确定性的表单中，那么这类表单就倾向于将数据项更密集的排列出来，让用户可以更快找到目标对象，常见于筛选模块中。

至于表单是否支持响应式也尽量在这个阶段确认，单列式的表单很少会完整支持响应式的场景，由于输入项所需空间一般都很小，只需要设计合适的尺寸，就没有去拉伸、缩放它们的必要。

而多列式的则可能依据页面的宽度，采纳流体的规律进行列数的变更，让显示效果更紧凑合理。

之后，就要设计单个数据项的基本布局形内容了，包含数据项区域的内间距，标题的文本区域的布局和对齐形式，内容排版区域等。

包含以下三种常见的形式：

数据项的高度是由内容和内边距相加而成，在后续排列中可以使用0间距紧贴，也可以增加固定的间距。这才是表单项布局的正确方法，而不是每个数据项设计后再“凭感觉”排列。

完成上面工作后，就可以绽开对单个数据项的设计了。

3.2输入框控件的设计

上文提到，输入框就是表单控件设计的“锚点”，除了它自身的使用数量多以外，还有大量的表单控件是结合输入框设计的，所以每次开头项目表单的设计，优先从输入框开头。

输入框设计的基本原则——使用4的倍数基础先定高，再定宽。

而应当定什么高的数值合适，这个并没有肯定精确     的答案。Ant、TDesign、Arco都给出了不同档位的高度，分别是：

设计师首先要确定一个常规的输入框高度作为标准，这个数值通常在32、36、40之间选择，这种选择依据主要是输入文本字号通常在13-16之间，这几个高度可以保证比较适中的留白，不会觉得太空旷或者太局促。

之后在其它特别场景中，再依据场景权重进行增大或者缩小，也就是多定几个规格出来。而不论是什么高度数值的输入框，它的宽度制定都需要依据显示内容的数量打算。尽量也使用4的倍数，同时也多预留一些空间出来（即使同字符数宽度也会不全都）。

除了高度的设置，还有圆角的设置也是重点，一个稳重、专业的B端项目，圆角尺寸的应用通常在1、2、4px之间选择，大于4px的圆角就会让它看起来过于圆润，不是风格化特殊强的SAAS我都建议大家直接忽视4px以上的数值。

有了基本输入框的尺寸，同时建议以它作为标准，定义表单数据项的最小高度，后续单选多选视图也使用相同的高度数值。

3.3表单内的按钮和标签

除了表单操作栏内的全局按钮，表单内部也会有使用按钮的需求，如查询、清空、重置输出框内容，上传附件，或者添加新的数据项等。

而在表单内的这些按钮，可以设计成两种尺寸，一种是和输入框同级同高，另一种是包含在输入框中比输入框小的尺寸。而标签也可以使用相同的设计来完成。

表单内只需要这两种尺寸就可以掩盖绝大多数场景，而在表单内，按钮宽度很少会制定定宽的，通常依据内容进行适配。所以，我们分别为两个按钮制定好左右内边距即可。

3.4单选、多选的设计

单选和多选项，最常用的样式上图所示的圆形或矩形加上文字的设计。

在这里单选和多选可以使用相同的尺寸，宽高掌握在16、18、20几个参数之内。然后再设置图形和文字间的间距，通常也就8、10、12三个数值可选。

由于包含多个选项，我们还要确定选项间的布局，主要形式就两种，横排或者竖排。确定好排列形式，然后再给出对应的间距即可。

这里要强调一点，横排模式下，主要以选项信息的长度加间距排列，而不是使用等宽模式。只有极少数状况，如填问卷的场景下才会使用等宽布局。

3.5下拉菜单类控件设计

类似下拉选择、日期、时间、集联等控件，都是在下拉菜单中展现主要内容信息，它们的设计方式遵循相同的规律，所以我们一起介绍。

在表单中的多数下拉菜单会有一个触发对象，即长得像输入框一样的矩形控件。当我们完成输入框设计后，它的基本规格就和矩形框全都，但是要在右侧增加可绽开的提示图标。

然后再制定下方菜单的相关参数，包括距离触发控件的距离，以及相同的圆角，合适的内间距。

正确的下拉菜单设计并不是依靠直接指定尺寸的，而是依据内容长宽加内间距得出的。假如内容过多，就会设置一个最大的宽或高，再使用滚轮滑动。

然后，再完成里面的内容设计，不管是一般列表、日期、时间还是集联，都在完成设计后置入到窗口内，通过增加内间距完成最终的样式输出。

只要理解以上设计规律，这些基础的细节内容设计我就不绽开了，大家查考下各框架的源文件即可。

3.6简单的表单组件设计

把握以上基础控件设计以后，再去设计一些简单的组件也就相当简单了，由于他们都是由这些最基础的元素组合而成的。

比如穿梭框，选项就是由纵向的多选框和衍生而来，参数基本全都。

再看看一些千牛中真实的表单数据项案例，之所以做的效果不好，缘由就是每个数据项的设计各自为战，而没有依据我们前面所说的定义方式实现。

简单表单组件的主要设计门槛在于对交互方法的制定上，只要确定交互方式和布局，就可以依据基础的设计进行组合和拓展。

遵循这样的设计方法，不管遇到什么样的特别组件，还是不同的表单页面，我们都能确保它处于同一套设计系统之内，保证系统的基础