低代码开发平台是无需编码或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法。使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。

本文从平台生态、用户体验、布局组件等方面，讨论低代码开发平台的交互核心”页面布局编辑器“，希望对你有所启发。

低代码开发平台，通过可视化进行应用程序开发，实现任何人都可以扩展SaaS应用的范围和功能的愿景。

低代码开发平台的可视化能力包含不限于：

列表数据可视化配置，即视图设计，例如列表、级联、卡片、日历、看板、项目、GIS等。详情数据可视化配置，即页面设计，例如页头、按钮、字段、标签页、动态、协同等。数据模型可视化配置，即建模设计，例如对象、字段、关系、数据验证、数据表达式等。数据分析可视化配置，即驾驶舱设计，例如聚合表、图表组件、数据组件、筛选组件等。业务流程可视化配置，即集成设计，例如触发器、业务流、RPA流、数据连接器等。

一个标准的应用程序从原型定义到云端发布上线，至少需要经历以上5个可视化配置环节。

接下来重点讨论下，详情数据可视化配置工具的产品实现，即“页面布局编辑器”，希望对你有所帮助。

一、关于页面布局编辑器的设计讨论

一个现象，为什么现行的低代码开发平台，详情页都是表单设计驱动的？

数据的详情页就是表单吗？什么样的详情页可以满足对业务数据的全览？

表单设计与页面设计，在用户体验、开发者体验以及ISV服务协同上，都存在着较大差异。

表单设计更像Form表单页，通过字段集提交业务数据，驱动的业务像是把Excel表的数据，按照对象模型与业务节点，业务实现上聚焦业务数据的结构化和流程化。

页面设计更像应用详情页，通过多种页面布局组件渲染业务数据，驱动的业务更像是围绕业务数据的上下文呈现，对象模型按照布局组件分发，业务实现上更聚焦业务数据的用户体验。

二、页面布局编辑器的可视化体验

页面布局编辑器，用于管理数据对象记录页面的布局。它控制按钮、字段、自定义链接和用户看到的相关记录列表的布局和结构。

页面布局编辑器从可视化体验上包含：

配置页面模板，包含页面终端以及布局框架，例如有基础、分栏、横向、纵向等。配置标准组件，包含紧凑布局、字段、选项卡、自定义按钮和链接、数据动态等。配置增强组件，包含文档系统服务、数据分析服务、AI服务、RPA服务等。配置自定义组件，自定义开发的布局组件或者从应用市场下载的三方布局组件。

目前市场上的低代码开发平台，都实现了标准组件的可视化配置，感兴趣的同学可以自行配置体验下。

三、页面布局编辑器中的标准组件

1. 页面紧凑布局

显示业务对象中重要的信息字段，会在页面顶部高亮显示，例如显示账户名称、电话、行业、评级等。

2. 页面信息字段

页面布局中的数据源，大部分布局组件都需要和对象中的信息字段关联。

通过字段组件，可以关联业务数据对象中的所有字段，常见的字段类型有基础字段和场景字段。

基础字段类型有文本、图片、编号、数值、日期、计算、选项、金额等。场景字段类型有扫码、签名、拍照、3D、位置等，采集后需要有callback处理。

页面布局时，也可以配置数据字段的显示、数据字段的读写权限、级联字段的数据关联等。

3. 页面选项卡

常见的页面选项卡有关联数据选项卡和详情数据选项卡。

关联选项卡，相关数据对象的列表数据查询，定义列表的显示字段和排序以及筛选规则。详情选项卡，当前数据对象的详细数据查询，定义详情的显示字段和布局排版。

通过选项卡组件，实现业务数据的上下文查询，例如常见的主从表类型。

4、页面流程卡

通过流程卡了解业务数据的进度状态，例如CRM中的线索->机会->交易等。

配置时需要关联业务对象中的状态字段，同时定义状态数据的时序，当发生状态变更时，流程图同步更新。

5、页面自定义按钮

页面布局设计中的创意担当，可以实现N多业务场景。

系统业务按钮，例如新增、编辑、打印、复制、分享、导出等。修改当前数据，例如同时修改2个或2个以上信息字段、变更数据状态等。写入外部数据，例如快捷写入其他业务对象的数据等。跳转网络链接，例如跳转工具型网站、跳转外部应用网站等。触发事件行为，例如RPA流、发邮件、变更数据、写入数据、IM信息等。

合理的运用自定义按钮，是详情页的设计哲学，避免过度设计。

四、关于低代码平台的业务能力建设

低代码开发平台如何成为云生产力工具。

有效的业务生产力平台，需要有可套的业务建设能力，低代码平台需要的三种能力：

整合数据源的能力，异构数据源整合，为业务打造统一的客户档案。移动办公的能力，跨终端应用，引导业务与客户的互动是数字优先的。任务型应用的能力，任务型应用，协助业务做好客户的关键交付节奏。

更多关于低代码开发平台的业务讨论，可以参见上期 ”商业应用开发平台“

本文由 @这届南京码农 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。