【B端设计】表单设计的3大模式

折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。...

前言

在B端设计中，表单设计是常见的需求设计，对于B端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是B端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。下面我总结了三种不同的表单展示方式以及应用场景。

一：平铺

平铺：指的是将表单信息完整的排版在界面中。

无论是在B端还是C端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。

例如：飞书的审批表单页面设计就是采用平铺的设计方式

二：分组

表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。

01：折叠分组

折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。

在B端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。

折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。

例如：Grafana的自定义BI图表设置信息就采用了折叠的表单形式

02：区域分组

区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。

在B端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。

例如：下面是我在工作中所运用的一个区域分组的表单设计方式。

03：标签分组

标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。

上下结构

构和左右结构

复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。

标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。

下面可以看一下在B端产品中我对于一些复杂表单标签分组的设计方式。

三：分页

分页：指的是将整个表单信息通过多页的形式展示。

分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。

同样的，下面截图为B端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。

总结

B端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。

简单且不具有强相关的表单可选择平铺，

复杂且具有强相关的表单可选择区域分组。

复杂且不具有强相关的可选择标签分组，

具有先后顺序的则选择分页。