先看一下两个演示视频，使用 AI 生成表单布局，配合手动调整：
以及手动快速创建企业应用表单布局：：
企业级应用表单的特点
上一篇文章有聊过 2B 和 2C 表单的区别，我在啰嗦下他们的核心区别：
对前者来说，表单就是业务，对后者来说，表单只是数据表现形式，一定现有业务和数据设计，才有表单。
做过企业级应用的同学都知道，没有哪个界面是先有界面，再有数据模型的。肯定是数据和业务设计完成之后，再进行UI和表单设计。
功能设计
基于上篇文章的设计，我们做一个简单的 Demo，大致设计如下：
左边展示当前场景下所有可用的字段，这些字段可能来源于多个对象或者数据表，也可能有层次结构。
右边展示一个表单设计器，整个页面基本的功能设计如下：
为了更好的体验，我们做一点简单的优化，比如在字段列表上：
• 可以搜搜字段
• 不同的字段类型有不同的图标来快速区别
实现
我们条选择一个组件库来实现上面功能，这里使用 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字段」、「备注字段的长度长一点」，这时候这个功能和体验就对用户来说很有吸引力。
粤ICP备14082021号
免费POC，
零成本试错
