编辑指南:在之前的文章《B面UI界面交互基本组件-表格》中，我学习了B面“表格”组件的UI设计规范，包括“基本表格”、“分屏加载表格”、“分页加载表格”；以上组件从需求场景、内容布局、表格组件交互方式等方面进行了详细描述，今天我们继续介绍B端“表单”组件的交互规范。

一、基本形式

1.1需求场景

要求用户配置相关数据，完成相应的数据提交。

1.2内容布局

根据功能需求，分为表单配置项区域，配置汇总和操作按钮:

一般配置表单的内容区是根据实际内容排列的，对应的布局遵循文本和标准空之间的对应规范

表单配置项级别分为:配置类别标签、配置项和配置项子项

配置分类标签:标签文本左对齐，配置分类一般尽量使用长格式

配置项:当表单中有配置分类标签时，通过换行和缩进的方式显示配置项的内容；Ci文本标签左对齐:

Ci子配置:ci子配置内容和ci配置内容区域左对齐，ci子配置标签左对齐，以纵向配置标签最大宽度为准；

需要根据业务需求和内容项数量显示表单配置摘要。一般情况下，在一般约定的最小正常显示分辨率下，无法在一个屏幕上显示所有配置项。建议提供配置摘要显示:

配置摘要内容显示在左侧，不同配置类别下的配置项以特定的可视表示(如水平线)分组显示

表单项操作按钮的布局根据表单所在的外部环境进行调整。一般内容如下:

该表单具有配置类别项目:

表单没有配置类别项目:

1.3互动行为

在表单的初始状态下，表单的所有配置项都不执行格式合法性检查的提示，表单配置分发按钮默认设置为禁用状态。

如果表单中有未填写的必填项，当配置项未通过合法性检查时，表单配置分发按钮将被禁用。

当表单中所有必需的配置项目都已配置并通过格式有效性检查时，表单配置分发按钮将被设置为可用状态。

当后台数据有效性检查返回失败时，相应配置项的状态被标记为有效性检查失败，配置分发按钮不可用。

当您点击分发表单配置的操作时，您将检查表单的合法性。如果表单中有未通过合法性检查的配置项，您将自动跳转到序列中的第一个非法配置项，操作分发将被终止。

二、整页表格

2.1需求场景

需要用户进行相关数据配置，并完成像一个数据提交。表单配置项较多，信息量较大。表单有较大的可用空间防止内容。

2.2内容布局

总体面积分布与基本形态分布相同。

当整体面积表的水平面积空较大时，合法性检查规则或补充说明可放在输入框右侧显示:

表单初始状态下，不执行合法性检查，表单数据下发操作按钮默认设置为可用状态：在表单的初始状态下，不进行合法性检查，默认情况下，发布表单数据的操作按钮设置为可用:

当表单输入项的光标被移除时，或者当数据分发或操作按钮被点击时，检查合法性，标记非法配置项，自动将光标定位到第一个非法输入项，并保持操作按钮可用:

有一个表单合法炎症失败，表单数据无法分发。

三.总结

以上都是为了分享B端基本交互组件“Form”。在下一章中，我们介绍了“会话盒”的交互规范，包括基本信息会话盒、提示信息会话盒、行为确认会话盒和配置会话盒。