[发明专利]一种用户交互UI界面的生成方法及装置

说明书

本公开提供了一种用户交互UI界面的生成方法及装置，其中，该方法包括：响应于对多个控件模板中的目标控件模板的触发操作，在图层生成画布上生成与目标控件模板对应的控件图层，并确定当前生成的控件图层和已生成的目标控件图层之间的图层关系信息；基于控件图层、控件图层对应的目标控件的控件属性信息、以及不同控件图层之间的图层关系信息，生成包括预设结构化数据关系的目标文件。本公开实施例中控件图层之间的图层关系可以在生成目标文件时自动生成，无需用户手动编写，减少了用户的工作量；目标文件中的图层关系和控件属性信息是适用于目标引擎的，因此目标引擎可以快速获取到图层关系和控件属性信息，提高了UI界面的生成效率。

技术领域

本公开涉及图形技术领域，具体而言，涉及一种用户交互UI界面的生成方法及装置。

背景技术

在用户交互UI界面的制作过程中，通常由美术人员绘制UI界面的设计稿，然后再把设计稿中包含的各个图层进行切分，得到各个图层资源。然后这些图层资源可以由引擎渲染生成具有图层结构的UI界面。

在渲染生成具有图层结构的UI界面的过程中，需要根据图层资源之间预先设计好的图层关系对图层资源进行搭建。而实际中，图层资源、图层资源之间的图层关系是由美术人员手动生成的，美术人员的工作量较大，导致UI界面的生成效率较低。

发明内容

本公开实施例至少提供一种用户交互UI界面的生成方法及装置。

第一方面，本公开实施例提供了一种用户交互UI界面的生成方法，包括：

响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层，并确定当前生成的所述控件图层和已生成的目标控件图层之间的图层关系信息；

基于所述控件图层、所述控件图层对应的目标控件的控件属性信息、以及不同控件图层之间的所述图层关系信息，生成包括预设结构化数据关系的目标文件；所述目标文件用于目标引擎基于所述目标文件生成目标UI界面；所述预设结构化数据关系用于描述所述控件图层之间的图层关系。

一种可选的实施方式中，响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层之前，所述方法还包括：

响应于在目标图形软件中的目标触发操作，展示所述UI设计界面；其中，所述UI设计界面包括：多个所述控件模板分别对应的触发按钮、以及所述图层生成画布。

一种可选的实施方式中，所述在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层，包括：

响应于对多个所述控件模板中目标控件模板对应的触发按钮的触发操作，在所述UI设计界面中，展示与所述目标控件模板对应的属性设置面板；

响应于对所述属性设置面板中属性值的设置操作，获取与所述控件图层对应的图层属性信息，并利用所述控件图层对应的图层属性信息，在所述图层生成画布中生成对应的控件图层。

一种可选的实施方式中，所述方法还包括：在生成所述控件图层后，响应于对所述控件图层的修改操作，基于所述修改操作修改的目标属性的图层属性值，对所述控件图层对应的图层属性信息进行更新。

一种可选的实施方式中，所述确定当前生成的所述控件图层和已生成的目标控件图层之间的图层关系信息，包括：

将所述目标控件图层作为父节点，并将所述触发操作对应的控件图层作为子节点，基于所述父节点的标识信息和所述子节点的标识信息，生成所述图层关系信息。

一种可选的实施方式中，所述响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层，并确定当前生成的所述控件图层和已生成的目标控件图层之间的图层关系信息，包括：