AI时代动态表单高阶方案：可视化和 AI 自动设计

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

企业级应用表单的特点

上一篇文章聊过2B和2C表单的区别，这里再啰嗦一下核心区别：

• 2C 表单是离散的，比如调查问卷、信息收集、报名汇总、打赏评价、评测考试等。
• 2B 表单是综合的，会和业务以及业务上下文严格相关。

对前者来说，

；对后者来说，表单只是数据表现形式，，才有表单。

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

功能设计

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

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

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

• 按钮栏上有增加字段组（FieldSet）的操作
• 点击字段添加到表单设计器里面

• 添加到活动的字段集最后或选中字段后面
• 可以移出表单中的字段
• 表单设计器上可以拖动字段调整顺序
• 字段组可以调整顺序
• 字段可以设置行宽、列宽，编辑标题等

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

• 可以搜索字段
• 不同的字段类型有不同的图标来快速区分

实现

我们挑选一个组件库来实现上述功能，这里使用 PrimeVue^[1] 这个组件库。类似的组件库有很多，比如国内常用的 ElementPlus 和 AntD 等，大家可以选择自己熟悉的框架来实现。

功能实现其实挺简单，懂点 Vue，翻翻组件文档，把相关代码拷过来就行，比如 Tree 组件^[2]：

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

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

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

字段设置

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

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

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

整体实现效果大致如下：

再看一下视频：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3721436213048442880"></iframe>

AI 辅助设计

2023年之后，AI可以说已经渗透到工作和生活的方方面面了。做产品设计的时候，也别把AI落下。

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

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

• 添加字段
• 设置字段属性（比如标题、列宽等）
• 调整字段位置
• ...

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

包括设置字段列宽、编辑字段名称、调整字段位置等，

。

所以

，根据前面写的《AI 使用原则》，这些基础操作并不适合交给AI。

但是，把这些操作加起来——一次次添加字段、分组、调整位置——对用户来说就比较耗时耗力了。这个

的工作就非常适合AI。

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

整体实现效果大致如下：

再看一下操作视频：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3721439141008015374"></iframe>

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

SYSTEM

作为一个表单构建机器人，帮我构建表单。  

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

关于场景

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

但这并不是说删除、添加字段这种小事不值得用AI，只是

。

比如，我们可能开放相关的AI助手给用户端（也就是填写表单的业务人员），而不是表单设计端。这类

（即使他们有修改的需求）。

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