基于中间表示模型的UXUI高效协作的低代码方法与流程

本发明属于计算机，具体涉及一种基于中间表示模型的uxui高效协作的低代码方法。

背景技术：

1、在当前的数字化时代，面向客户的应用程序已成为企业在市场中取得成功的重要工具。为了在竞争激烈的市场环境中保持领先地位，企业需要提供出色的用户体验（ux）和用户界面（ui）。为了实现这一目标，企业雇佣了专门从事前端开发以及ux/ui设计的人员，其共同的任务是创造富有吸引力、易于使用和高效的应用程序，以满足客户的需求和期望。

2、在传统的工作流程中，设计师会在设计工具中创建页面或屏幕的模型，然后开发人员需要手动在outsystems等前端技术中实例化这些设计。这个过程不仅消耗大量的时间和精力，而且需要开发人员具有高度的专业知识和技能，尤其是在处理复杂的交互式设计或者高度定制化的界面设计时。

技术实现思路

1、鉴于以上存在的问题，本发明提供一种基于中间表示模型的uxui高效协作的低代码方法，用于更准确地把设计模型（如 sketch 文件）转化为可执行的程序代码（如outsystems 应用）。

2、为解决上述技术问题，本发明采用如下的技术方案：

3、一种基于中间表示模型的uxui高效协作的低代码方法，包括以下步骤：

4、s101，解压sketch设计文件，解压过程中生成多个文件和文件夹，其中一个关键文件夹包含以json格式存储的每个画板的详细数据；

5、s102，定位和使用json文件，项目中预先定义一个页面名称常量；

6、s103，使用工具遍历sketch文档中的每个子层，所述子层是构成应用界面的关键元素，被分析并识别为对应的outsystems ui组件；

7、s104，在层处理和识别过程中，系统提取与组件相关的属性，为每个识别的组件分配一个唯一的标识符id；

8、s105，对识别出的组件及其相关属性进行实例化，形成一个中间表示模型ir，所述中间表示模型ir采用json数据结构；

9、s106，完成ir模型的生成，系统将ir模型输出为json文件，所述ir模型的json文件包含所有被识别和处理过的组件，以及它们的属性，其中属性已转换为与outsystems ui库兼容的格式；

10、s107，使用outsystems的modelapi从json文件中序列化组件，并针对每个节点实例化一个container小部件；

11、s108，根据组件的类型和复杂性，选择合适的实例化策略；

12、s109，进行容器和布局处理；

13、s110，实例化完成后，系统生成一个oml文件，所述oml文件包括完全结构化的应用屏幕，以及同时保留所有必要的敏感内部数据。

14、一种可能的实施方式中，所述s104中属性包括位置、大小、样式和交互事件中的至少一种。

15、一种可能的实施方式中，s105中中间表示模型ir包括类型type、内部名称internalname、部件widget、设计师名称designername、相对位置relativeposition、子节点children以及访问标志visited的属性，其中类型表示节点的类型，包括组group、符号symbol或根root，由层的类别决定；内部名称代表在可重用ui组件库live style guide中的组件的名称；部件internalname的简化版本，用于区分组件；设计师名称是设计师选择的层名称；相对位置包括组件相对于父组件的坐标，以及其宽度和高度；子节点包含子层的列表；访问标志是一个辅助的布尔值，用于防止出现重复的组件。

16、一种可能的实施方式中，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于基础部件，直接支持实例化。

17、一种可能的实施方式中，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于复杂部件，通过引用模板部件实现实例化。

18、一种可能的实施方式中，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于需要布局的组部件，采用特定的布局策略进行实例化。

19、一种可能的实施方式中，s109，进行容器和布局处理包括：对于简单的组部件，实例化一个容器并在其中实例化子节点。

20、一种可能的实施方式中，s109，进行容器和布局处理包括：对于需要水平布局的组部件，则创建一个设置了display: flex属性的容器，以封装所有子部件，并保证布局的一致性和响应性。

21、一种可能的实施方式中，进一步包括：s111，生成诊断报告文件: 生成一个详细的报告文件，用于记录在转换过程中发现的任何问题以及解决这些问题的建议和策略。

22、采用本发明具有如下的有益效果：

23、(1)引入中间表示模型（irnode）：引入了一种高度抽象的中间表示模型(irnode)，它在源模型到目标模型的转换过程中，作为一个桥梁。这种设计使得在未来可以轻松支持其他设计工具，如figma。irnode是一个抽象结构，用于作为中间表示的节点，包含了每个组件中的所有常见信息以及特定属性，使模型既通用又灵活。

24、(2)创新的转换流程：将转换过程巧妙地分解为两个阶段：从源设计模型（例如，sketch设计文件）转换至中间表示模型(irnode)；再从中间表示模型转换至目标代码模型（例如，outsystems的ui组件）。这种两阶段的转换策略增强了灵活性和兼容性，可以适应多变的源设计模型和目标代码模型。分解转换过程，有助于更有效地解决转换过程中可能出现的问题，提升设计到代码转换的效率和精确性。

25、(3)处理设计异质性：通过高度抽象的中间表示模型(irnode)，有效地处理了设计的异质性问题。irnode作为中间表示的节点，其内部包含了覆盖大多数设计方法和习惯的常见信息。此外，irnode的设计本身具有高度的灵活性，使其能够适应多样的组件和设计方法，可以有效地处理各种复杂的设计场景。

技术特征：

1.一种基于中间表示模型的uxui高效协作的低代码方法，其特征在于，包括以下步骤：

2.如权利要求1所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，所述s104中属性包括位置、大小、样式和交互事件中的至少一种。

3.如权利要求1所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s105中中间表示模型ir包括类型type、内部名称internalname、部件widget、设计师名称designername、相对位置relativeposition、子节点children以及访问标志visited的属性，其中类型表示节点的类型，包括组group、符号symbol或根root，由层的类别决定；内部名称代表在可重用ui组件库live style guide中的组件的名称；部件internalname的简化版本，用于区分组件；设计师名称是设计师选择的层名称；相对位置包括组件相对于父组件的坐标，以及其宽度和高度；子节点包含子层的列表；访问标志是一个辅助的布尔值，用于防止出现重复的组件。

4.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于基础部件，直接支持实例化。

5.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于复杂部件，通过引用模板部件实现实例化。

6.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s108，根据组件的类型和复杂性，选择合适的实例化策略包括：对于需要布局的组部件，采用特定的布局策略进行实例化。

7.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s109，进行容器和布局处理包括：对于简单的组部件，实例化一个容器并在其中实例化子节点。

8.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，s109，进行容器和布局处理包括：对于需要水平布局的组部件，则创建一个设置了display: flex属性的容器，以封装所有子部件，并保证布局的一致性和响应性。

9.如权利要求1至3任一所述的基于中间表示模型的uxui高效协作的低代码方法，其特征在于，进一步包括：s111，生成诊断报告文件: 生成一个详细的报告文件，用于记录在转换过程中发现的任何问题以及解决这些问题的建议和策略。

技术总结
本发明公开了一种基于中间表示模型的UXUI高效协作的低代码方法，包括以下步骤：S101，解压Sketch设计文件，解压过程中生成多个文件和文件夹；S102，定位和使用JSON文件，项目中预先定义一个页面名称常量；S103，使用工具遍历Sketch文档中的每个子层，被分析并识别为对应的OutSystems UI组件；S104，在层处理和识别过程中，系统提取与组件相关的属性，为每个识别的组件分配一个唯一的标识符ID；S105，对识别出的组件及其相关属性进行实例化，形成一个中间表示模型IR；S106，完成IR模型的生成，系统将IR模型输出为JSON文件；S107，使用OutSystems的ModelAPI从JSON文件中序列化组件；S108，根据组件的类型和复杂性，选择合适的实例化策略；S109，进行容器和布局处理；S110，实例化完成后，系统生成一个OML文件。

技术研发人员：曾大克,李振华
受保护的技术使用者：宁波沃尔斯软件有限公司
技术研发日：
技术公布日：2024/3/11