表单是B端产品中常见的功能，在设计输入表单时，应尽量减少用户的思考和理解负担，提高表单的操作效率，降低用户出错的概率。本文笔者总结了设计B端表单时的一些知识点，分享给大家。

1. 概念

在B端产品中，表单是一个经常出现的载体。由于B端产品的主要目的是为企业降本增效、方便管理者管理，所以有一类场景经常出现，就是流程表单。流程表单除了填写表单外，还需要结合审批流程，用户角色相对复杂。这是B端设计的一个重点和难点，所以我就从表单的基本结构出发，整理一下我对B端流程表单设计的一些想法给大家。

“录入”是B端产品常见的任务场景，常用于收集或验证用户的信息。也就是说，大部分具备数据收集功能的模块都可以称为表单。例如：登录注册模块中的信息收集、评论编辑页面、OA中的留言流程等。具备数据收集、验证、提交功能的表单包括复选框、单选框、输入框、下拉选择框等元素。

在设计输入表单时，应尽量减少用户的思考和理解负担，提高表单的操作效率，降低用户出错的概率，从而提高输入任务的完成度和满意度。

针对不同的用户数据应该设计不同的表单，以适应不同的场景功能。

2. B端表单组成及类型

一个基本的表单由标签、表单域、提示信息、操作按钮四部分组成，另外根据表单的复杂程度可能衍生出其他内容：验证提示、帮助信息、占位信息、提示。

1.标签

标签用于说明表单项或需要输入/选择的内容的含义，引导用户填写、识别内容。

合理的标签排版结构可以提高用户的阅读效率，减少填写信息时的错误率。常见的标签排版形式有：左右结构、上下结构、右对齐结构、内对齐结构等。

1）左右结构

左右结构是B端产品设计中常见的表单布局，减少了页面占用的垂直空间，增加了水平空间的占用，由于PC端水平空间较大，在输入项不多的情况下可以采用这种结构。

从阅读填写效率来看，相比上下和右对齐的表单，左右对齐表单的填写速度是最慢的。由于左右对齐表单在解析问题时需要最多的眼球定位，用户通常能够将左对齐布局中的标签和输入框串联起来，但耗时更长。根据 的研究，典型的扫描时间为 500 毫秒，这个时间非常长，表明用户正在经受较大的认知压力。

优点：易于导航；标签突出；占用较少的垂直空间。

缺点：

适用场景：

表格中包含大量复杂或敏感的信息，希望用户放慢速度，仔细思考。

2）上下结构

自上而下的结构在信息浏览和填写上具有很强的效率，用户的视觉浏览路径比左右结构更短，是B端产品中最常用的表单对齐方式。该结构适用于需要将多个输入项放在一行，或者表单中标签名称通常较长的情况。

于 2006 年 7 月进行了眼动研究，发现从标签移动到输入框仅需 50 毫秒。这比左右结构标签（需 500 毫秒）快 10 倍，比右对齐标签方式（需 240 秒）快 2 倍。顶部对齐标签表单能够快速填写的原因之一就是眼球只需在标签和输入框之间上下移动。

优势：

缺点：

适用场景：

3）右对齐结构

右对齐结构与左右对齐结构一样，在很多B端产品中经常出现，同样减少了页面占用的垂直空间，增加了水平空间的占用。

右对齐的表单由于标签字数不一致导致左侧看起来比较杂乱、错位，一定程度上影响了整体表单布局。

如果要尽量减少表单占用的垂直屏幕空间，右对齐可以提供快速的完成时间。 的眼动追踪研究发现，专家用户和新手用户扫描（眼动）右对齐标签表单的标签和输入字段的平均时间分别为 170 毫秒和 240 毫秒，完成时间比左对齐表单快 2 倍。

4）内部结构

内部结构经常用于移动端表单，这里对于用户需要输入的内容只保留提示文字，当用户输入内容后，内部标签/提示文字会消失，让用户难以判断输入的信息是否正确，这种表单适合输入项很少的表单（比如登录）

内部标签消失，难以判断信息

5）如何选择

运营效率：

具体怎么选择呢？需要考虑操作效率、标签长度、屏幕效果、视觉对齐四个方面。

根据研究总结得到的浏览时间线发现，标签移动到输入框所花的时间最快，顶对齐仅需50ms，其次是右对齐，左对齐所花的时间最长。

所以当表单根据业务需求，注重操作效率时，建议使用顶部对齐方式。

标签长度：

当标签长度超过8个汉字，或者需要中英文版国际化时，建议使用顶对齐，可以容纳更多的标签文字，扩展性也更好。很多国际化的B端产品也使用顶对齐，比如Ones的任务创建这个标签就使用了顶对齐：

屏幕效果：

如果只考虑屏幕效果，可以使用左对齐或右对齐的标签，但如果还考虑表单输入效率，建议使用右对齐的标签，例如蜂鸟报告：

视觉对齐：

一般我们在设计表单的时候，会优先考虑效率和屏幕效果，但是在竞品分析中，我们发现有50%的表单都采用了左对齐的标签方式，因为这样可以让标签和其他内容对齐，比如 ：

所以在选择标签对齐方式时，首先要明确要注重什么，可以牺牲什么，例如神策网络就选择了视觉对齐，但牺牲了运营效率。

单从效率角度看，顶部对齐>右对齐>左对齐。根据不同的业务场景，效率并不是唯一的考虑因素。

如果希望用户放慢速度，仔细思考每个表单条目，则使用左对齐，适合填写重要信息和确认。

当标签过多或者需要英文时顶部对齐更具可扩展性；

右对齐时需考虑标签内容是否可以简化，以及确定表单与界面的距离，若标签长度差异过大，请谨慎使用右对齐。

2. 表单字段

表单域是表单的输入区域，输入域是用来收集用户数据信息的核心内容，每一个输入域都包含一类数据信息。

对于用户来说，在设计表单的时候，要尽可能的减少他们的思考和理解，选择合适的输入字段类型，提高表单的输入效率。

3. 提示信息

提示信息是复杂表单的必备部分，用户在填写表单前，可能会对标签内容产生疑问，你可以用它来进行解释，让用户了解表单的内容。

还有一种提示信息，是用户填写表单域后出现的验证提示信息，比如填写手机号时位数不正确，这种提示可以提前告知用户可能出现的错误，降低下一步操作出错的概率。

4. 动作按钮

当用户完成信息录入后，按钮可以对表单内容进行验证、提交、保存或者进行下一步操作；操作按钮中只有一个主功能按钮，其它均为次要按钮；

关于按钮顺序最常见的问题是按钮应该在取消按钮的左边还是右边，这是一个由来已久的话题，这里我们建议使用基于Ant的设计原则，规范如下：左对齐从左往右读，右对齐从右往左读；

5. 表格类型

对于复杂的表单，需要在设计时进行合理的概括和简化，以减轻填写表单的负担。一般来说，表单可以分为基本表单、分步表单、锚点定位、标签页。

1）基本形式

当表单项数小于7个时，表单比较简单，此时我们一般直接使用基础表单，基础表单样式如下：

当表单项数超过7项时，可归类为复杂表单，此时需要根据表单的复杂程度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，减轻表单填报负担。

2）分步表格

如果各组之间有逻辑顺序，建议使用分步形式，例如阿里云购买。

3）锚点定位

如果各组之间相关性强，就不宜分开，建议使用锚点定位，点击定位可以快速定位到对应的表单内容，例如小棒棒里的编辑销售机会、创建新客户等表单都是使用锚点定位。

4）标签

如果各组之间没有逻辑顺序，也没有关联性，建议使用标签分组。例如飞书的发票管理就是相对独立的表格。

3. 表单布局选择

表单的布局需要考虑到内容之间的关联性，合理归纳复杂表单，简化表单页面的布局，总体上可以分为普通布局、弱分组、区域内分组、卡片分组四种。

1. 正常布局

当条目数少于7条时，仍采用正常布局，例如新增网易虎客的企业信息：

当表单项数量大于7个时，就可以归类为复杂表单，此时我们还是需要根据表单的复杂程度、逻辑性、关联性进行判断，选择合适的布局方式，提高表单的浏览效率和屏幕效果要求。

2. 弱分组

当表单空间有限，且相关性较强时，建议使用弱分组，将多个组合并成一行，形成分组提示。

3. 区域内分组

当项目数在7~15之间，且相关性较强时，使用区域内分组比较合适，例如网易奇遇新推出的在线质检模板

4. 卡片分组

当商品数量超过15件时，建议使用卡片布局，如阿里云服务购买表单：

4. 表单按钮位置

在网页上，除去顶部和侧边导航栏，主要内容页中的按钮应该如何摆放和排列呢？我们可以将内容页分为以下三个部分：

1.标题栏（）——主要是全局操作按钮，比如编辑，创建等；

2.机身-有两种操作按钮。

第一类是局部的操作按钮，比如表格里面的操作项；

第二种是跟随内​​容的全局完成按钮，比如取消、确定、上一个、下一个等等。

3.底部栏（）——主要为全局页面完成按钮，需要固定放置在底部，例如取消、确定、保存等。

表单按钮的位置、顺序、组织、视觉重点都是用户找到按钮的线索，警示色可以引起注意，避免误操作，精准的文案可以预测按钮的执行结果。

按钮设计的目标是引导用户采取我们希望他们采取的行动，尽量帮助用户快速找到自己需要操作的按钮，并且了解执行操作的结果，同时尽可能避免误操作。

表单按钮位置有三种：页面右上角、内容下面、固定底部操作区域。

1）右上角的标题栏

表单按钮固定在右上角的标题区域，不随表单内容滚动。将操作按钮放在右上角B站电脑下拉，相比固定在底部操作区域，可以进一步减少按钮对表单内容的干扰，让用户更加专注于表单内容的填写。

操作按钮放在了右上角，与操作路径不一致，右上角也是视觉上很容易被忽略的地方，可能会增加点击操作的难度。

2）关注内容

按钮跟在表单内容后面是一种常见的设计方式，用户填写完所有表单内容后，操作按钮在下面，适合表单内容不超过一屏的基础表单场景。

在一些超过一屏的复杂表单中，有一个操作按钮需要手动保存。您可能需要滚动到页面底部才能单击“保存”。

3）固定底部操作区

复杂表单中，表单内容区域通常超过一屏，需要填写的内容非常多，可以考虑将操作按钮固定在底部操作区域，同时考虑增加手动保存按钮。复杂表单内容较多，用户在使用过程中可能会中断退出，此时保存功能可以帮助用户下次回来再次编辑时使用，继续上次填写的内容。

固定在底部操作区域的按钮会干扰用户，导致用户忽略表单的内容。

设计策略：按钮应该放置在用户的浏览路径上，容易被用户发现，并且尽可能靠近其控制的对象。

设计指南：使用经典的“F”或“Z”视觉引导模型。

当只有表单时，建议使用“F”模型，按钮位置跟随左侧内容；当表单包含在容器中时，建议使用“Z”模型，将“确认/提交”等操作放在右侧的视觉终点。

对于单列布局的基本表单，操作按钮可以与内容一起放置。对于超过一屏的多列复杂表单，可以考虑将按钮固定在底部操作区域。

1. 表单内容是否应该视觉平衡？

在设计表单的时候，我们总是觉得如果视觉重心偏向左边，会给用户带来视觉上的不适，所以在设计的时候，我们总是想让视觉更加平衡。

比如在大屏电脑上看京东云，所有信息都集中在左侧，右侧一片空白，视觉上就有些不平衡。类似飞书的居中设计，左右留白面积相等，会让视觉更加平衡。所以我在设计的时候也在考虑，要不要用居中设计的方式？

但当我继续查找资料时，发现其实在形态设计上我们没必要过分追求视觉平衡，首先人的视觉运动线路遵循F模型，同时根据行业相关信息的可读性研究，眼球运动的舒适角度是30度。

因此在表单信息较少，不考虑屏幕效率的情况下，采用自上而下的单列布局，据研究这是最能高效完成任务的布局方式。

为了验证这个结论，我收集了近50款B面产品的表单，发现只有两款产品采用了视觉重心居中的设计。

这两个产品分别是飞书设置表单和百度云购买表单。

其他CRM、ERP、云产品、OA、项目开发、文档产品、在线教育、HR、BI等系统产品的输入表单均采用视觉左偏的设计方式，无论表单中的信息有多复杂，都不会影响整体的一致性。

因此在表单设计的时候，不需要过度追求视觉的平衡，而是需要优先考虑信息操作效率和信息阅读效率。

5. 表单页面适配方法

B端设计师在设计表单时也需要考虑页面适配，如果设计时没有考虑适配，前端会站在他的角度，按照他认为合理的去适配，导致实际使用体验不好，后期再想调整的话，又得等排期了。所以适配的方式需要在设计时就确定好，表单设计时一般会有两种适配方式，一种是固定适配，一种是间距适配。

1. 固定适配

表单中信息宽度固定，不随分辨率变化，需要保证最小分辨率才可以正常显示。

使用弱分组布局时，随着分辨率的降低，数据项自动下移，其他保持不变。列数由屏幕宽度决定。

我设计的时候就设置成最低分辨率，保证笔记本使用，页面最低分辨率可以根据客户或者本公司产品使用者的屏幕分辨率来定，因为有些公司企业可能还是会用到这个分辨率，那就设置1280作为最低兼容分辨率吧。

当使用弱分组布局时，随着分辨率的降低，数据项会自动下降，而其他数据项保持不变。

2. 间距调整

间距适配是指使用固定的左右间距，不随着页面宽度变化，当页面宽度增加时，组件会自适应宽度。

这种适配方式在弹窗、抽屉中比较常用，在表单页中不建议使用这种方式，因为分辨率提高后，视野会变大，不利于信息浏览。