先看一下两个演示视频，使用 AI 生成表单布局，配合手动调整：

以及手动快速创建企业应用表单布局：：

企业级应用表单的特点

上一篇文章有聊过 2B 和 2C 表单的区别，我在啰嗦下他们的核心区别：

• • 2C 表单是离散的，比如调查问卷、信息收集、报名汇总、打赏评价、评测考试等。

• • 2B 表单是综合的，会和业务以及业务上下文严格相关。

对前者来说，表单就是业务，对后者来说，表单只是数据表现形式，一定现有业务和数据设计，才有表单。

做过企业级应用的同学都知道，没有哪个界面是先有界面，再有数据模型的。肯定是数据和业务设计完成之后，再进行UI和表单设计。

功能设计

基于上篇文章的设计，我们做一个简单的 Demo，大致设计如下：

左边展示当前场景下所有可用的字段，这些字段可能来源于多个对象或者数据表，也可能有层次结构。

右边展示一个表单设计器，整个页面基本的功能设计如下：

• • 按钮栏上有增加字段组（FieldSet）的操作

• • 点击字段添加到表单设计器里面

• • 添加到活动的字段集最后或者选中字段后面

• • 可以移出表单中的字段

• • 表单设计器上可以拖动字段调整顺序

• • 字段组可以调整顺序

• • 字段可以设置行宽、列宽，编辑标题等

为了更好的体验，我们做一点简单的优化，比如在字段列表上：

• • 可以搜搜字段

• • 不同的字段类型有不同的图标来快速区别

实现

我们条选择一个组件库来实现上面功能，这里使用 PrimeVue^[1] 这个组件库来实现，

类似的组件库有很多，比如国内被最多使用的 ElementPlus 和 AntD 等，大家可以选择自己熟悉的框架来实现。

功能实现也很简单，懂得一点 Vue 的知识，参考组件文档，拷贝相关代码即可，比如 Tree 组件^[2]：

来实现一下来源字段列表：

然后使用 FieldSet 配合各种表单输入框，来实现一个动态表单：

然后为每个字段组增加一个标题数据框 和 列设置输入框，来设置当前字段组默认几列显示：

字段设置

字段上必然有一些需要笔记的属性，如果编辑的内容比较多，可以使用侧边工具栏或者模态弹窗。两者各有不同的场景要求。

要编辑的东西比较少，可以使用 Popover 组件，在字段周围显示编辑信息：

这样的话，编辑信息的时候，用户注意力不用再屏幕上浪费，就可以集中在编辑字段的内容上，比较高效。

整体实现效果大致如下：

我们再看一下视频：

AI 辅助设计

2023 年之后，我们可以说 AI 已经渗透到生活工作的方方面面了，我们再做产品设计的时候也一样不要忘记AI。

我们前面展示了 字段组添加编辑、 字段添加编辑、位置调整等，其实所有的都只是一件事情，就是设计表单，那么是不是可以让 AI 帮我们做这个事情呢，答案是肯定的。

下面分析下具体让 AI 帮我们做什么？

• • 添加字段

• • 设置字段属性（比如标题、列宽等）

• • 调整字段位置

• • ...

上面事情当然都可以集成到系统中让AI去做，但是我们看了交互视频发现，你添加一个字段只需要点一下字段即可， 如果让AI去做，你要告诉他「添加xxx字段到表单中」，对用户来说其实是增加了复杂度的。

包括设置字段列宽、编辑字段名称、调整字段位置等，直接操作都比让AI要省时省力，而且高效很多。

所以在当前的界面交互环境里，根据我们前面写的《AI 使用原则》，这些基础操作并不适合给AI。

但是我们把这些所有的操作加起来，一次次添加字段、分组、调整位置，对我们来说就是比较耗时耗力了，这个**「复杂」**工作就很适合AI。

我们添加两个按钮，一个使用预设提示词，让 AI 自动进行布局， 一个打开对话框，让 AI 根据我们的要求进行表单设计。

整体实现效果大致如下：

我们再看一下操作视频视频：

实现也不复杂，你把你的设计要求和返回数据结构要求给到AI，让他帮你返回即可，可以参考下面提示词：

SYSTEM

作为一个表单构建构建机器人，帮我构建表单。  
  
- 使用 中文回答，严格使用 JSON 格式返回，
- 表单布局设计时，如果没有额外要求，按照字段的重要性以及相关性排列和分组，并保持美观。  
- 表单布局设计时，分组按照业务含义分组，如果某一个 fieldset 的字段较多，则使用 3 列和 4 列布局，如果字段少则使用 1 列或者 2 列布局。  
- 表单布局设计时，除非特殊说明，不要遗漏字段。

关于场景

我刚才提到了 AI 功能不要滥用，比如，移动字段，删除或者添加一个字段，都是鼠标移动一下的事儿，不值得用AI来做， 问AI一句，还要等半天才能回复，有这个时间活都干完下班了。

但是并不是说删除、添加字段这种小事情，不值得用AI，只是在这个场景行不值得用AI。

比如：我们可能开放相关的AI助手给用户端（也就是填写表单的业务人员），而不是表单设计端。这类用户不会看到我们刚刚的设计界面，也不期望看到设计界面（及时他们有修改的需求）。

这个时候业务员告诉AI助手：「表单上不要显示xxx字段」、「备注字段的长度长一点」，这时候这个功能和体验就对用户来说很有吸引力。