CN115586898A - 一种用户交互ui界面的生成方法及装置 - Google Patents

Abstract

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

Description

一种用户交互UI界面的生成方法及装置

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

响应于对已生成的控件图层中任一控件图层的选中操作，将所述任一控件图层作为目标控件图层；

响应于对多个控件模板中的目标控件模板的触发操作，根据所述目标控件模板确定当前生成的所述控件图层和所述目标控件图层之间的图层关系信息。

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

响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

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

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

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

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

获取模块，用于响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

解析模块，用于利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

生成模块，用于基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

第五方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可选的实施方式中的步骤，或执行上述第二方面的实施方式中的步骤。

第六方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可选的实施方式中的步骤，或执行上述第二方面的实施方式中的步骤。

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

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种用户交互UI界面的生成方法的流程图；

图2示出了本公开实施例所提供的另一种用户交互UI界面的生成方法的流程图；

图3示出了本公开实施例所提供的UI设计界面的结构示意图；

图4示出了本公开实施例所提供的一种UI设计界面的效果示意图；

图5示出了本公开实施例所提供的另一种UI设计界面的效果示意图；

图6示出了本公开实施例所提供的另一种用户交互UI界面的生成方法的流程图；

图7示出了本公开实施例所提供的对PSD文件进行分析的流程图；

图8示出了本公开实施例所提供的节点之间的层级关系示意图；

图9示出了本公开实施例所提供的一种用户交互UI界面的生成装置的架构结构图；

图10示出了本公开实施例所提供的另一种用户交互UI界面的生成装置的架构结构图；

图11示出了本公开实施例所提供的一种计算机设备的示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

经研究发现，在渲染生成具有图层结构的UI界面的过程中，需要根据图层资源之间预先设计好的图层关系对图层资源进行搭建。而实际中，各个图层的属性信息、图层中所需要的控件、控件的属性信息都是由美术人员手动编写生成的，美术人员的工作量较大，导致UI界面的生成效率较低。

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

针对以上方案所存在的缺陷以及所提出的解决方案，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人在本公开过程中对本公开做出的贡献。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

为便于对本实施例进行理解，首先对本公开实施例所公开的一种用户交互UI界面的生成方法进行详细介绍。

参见图1所示，为本公开实施例提供的一种用户交互UI界面的生成方法的流程图，包括：

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

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

本公开实施例中，在UI设计界面上的图层生成画布中生成与目标控件模板对应的控件图层之前，在一种实施方式中，可以响应于在目标图形软件中的目标触发操作，展示UI设计界面。

其中，UI设计界面中可以包括：多个控件模板分别对应的触发按钮、以及图层生成画布。

这里，目标图形软件可以指用于处理图形或图像数据的软件，例如PhotoShop软件。控件模板可以指预先设置好的、各个控件类型下的控件，例如图像控件Image、原始图像控件Raw Image、文本控件Text、按钮控件Button、输入框控件Input Field、摇杆控件Slider、切换控件Toggle、滚动条控件Scroll View、下拉菜单控件Drop Down等等。不同控件类型的控件模板还可以包含至少一个控件。

UI设计界面中展示的各个控件模板分别对应的触发按钮，用于被触发后，在图层生成画布中生成各个触发按钮关联的控件模板对应的控件图层。控件图层上展示有对应的目标控件。例如，触发输入框控件的控件模板对应的触发按钮后，可以在图层生成画布中生成输入框控件的控件模板对应的控件图层，该控件图层上可以展示输入框控件。其中，输入框控件可以用于被触发后输入相应的内容。

在一种实施方式中，目标触发操作可以包括用于展示UI设计界面的第一触发操作。在具体实施过程中，可以响应于在目标图形软件中的第一触发操作，展示UI设计界面。展示出来的UI设计界面中包括多个控件模板分别对应的触发按钮、以及图层生成画布。

在一种实施方式中，目标触发操作可以包括用于展示UI设计界面的第一触发操作、用于在UI设计界面中展示多个控件模板分别对应的触发按钮、以及图层生成画布的第二触发操作。在具体实施过程中，可以响应于在目标图形软件中的第一触发操作，展示UI设计界面；响应于在UI设计界面中针对画布按钮的第二触发操作，在UI设计界面中展示多个控件模板分别对应的触发按钮、以及图层生成画布。

其中，展示的图层生成画布可以为各个初始画布属性值下的图层生成画布。图层生成画布的各个初始画布属性值，例如尺寸、样式、颜色等，都可以是预设的。在一种实施方式中，在生成图层生成画布后，响应于对图层生成画布的修改操作，可以基于修改操作修改的各个画布属性值，展示修改后的图层生成画布。

控件图层可以是基于图层属性信息生成的。在一种实施方式中，在生成控件图层的过程中，可以响应于对多个控件模板中目标控件模板对应的触发按钮的触发操作，在UI设计界面中，展示与目标控件模板对应的属性设置面板；响应于对属性设置面板中属性控件的设置操作，获取与控件图层对应的图层属性信息，并利用控件图层对应的图层属性信息，在图层生成画布上生成对应的控件图层。

其中，属性设置面板中展示有至少一个第一属性控件，第一属性控件用于响应于针对控件图层的属性修改操作，基于修改后的图层属性信息对控件图像的图层属性进行修改。在一种实施方式中，控件图层对应的图层属性信息可以包括以下至少一种：控件图层的尺寸、在图层生成画布中的位置、颜色、图像素材、形状、透明度、填充度、字体、字号等。

响应于对多个控件模板中的目标控件模板的触发操作，在图层生成画布上生成的控件图层可以为各个初始图层属性值下的控件图层，其中，控件图层的各个初始图层属性值，例如位置、形状、颜色等，可以是预设的。因此，在一种实施方式中，可以在生成控件图层后，响应于对控件图层的修改操作，基于修改操作修改的目标属性的图层属性值，对控件图层对应的图层属性信息进行更新。对控件图层对应的图层属性信息进行更新后，可以得到更新后的控件图层。

控件图层中展示的目标控件可以为初始控件属性值下的目标控件，其中，目标控件的初始控件属性值可以是预设的。

属性设置面板中还可以展示有至少一个第二属性控件，第二属性控件用于响应于针对控件图层对应的目标控件的属性修改操作，基于修改后的控件属性信息对目标控件的控件属性进行修改。在一种实施方式中，目标控件的控件属性信息可以包括下述至少一种：控件名称、控件位置、控件尺寸、与目标控件对应的控件图层的图层路径、控件锚点、控件重心。

根据生成的控制图层、控件图层对应的目标控件的控件属性信息以及不同控件图层之间的图层关系信息，可以生成预设格式的目标文件。示例性的，在目标图形软件为PhotoShop软件的情况下，生成的预设格式的目标文件可以为PSD(PhotoShop Document)文件。

在本公开实施例中，在图层生成画布上生成与目标控件模板对应的控件图层的过程中，还可以确定当前生成的控件图层和已生成的目标控件图层之间的图层关系信息。其中，图层关系信息可以用于在目标引擎基于目标文件生成目标UI界面。

具体地，在响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与目标控件模板对应的控件图层，并确定当前生成的控件图层和已生成的目标控件图层之间的图层关系信息的过程中，可以响应于对已生成的控件图层中任一控件图层的选中操作，将任一控件图层作为目标控件图层；响应于对多个控件模板中的目标控件模板的触发操作，根据目标控件模板确定当前生成的控件图层和目标控件图层之间的图层关系信息。

在具体实施中，当前生成的控件图层和目标控件图层之间的图层关系可以为层级关系。在未生成控件图层之前，可以将默认生成的根图层作为目标控件图层，将当前生成的控件图层设置在根图层的下一图层中。在生成至少一个控件图层之后，可以将选中的任一控件图层作为目标控件图层，并将当前生成的控件图层设置在目标控件图层的下一图层中。

为了更加清楚地表示当前生成的控件图层和目标控件图层之间的图层关系，在一种实施方式中，在确定触发操作对应的控件图层、和已生成的目标控件图层之间的图层关系信息时，具体可以将已生成的目标控件图层作为父节点，并将触发操作对应的控件图层作为子节点，基于父节点的标识信息和子节点的标识信息，生成图层关系信息。

这里，标识信息可以为控件名称或者控件图层的标识信息等。

基于控件图层、控件图层对应的目标控件的控件属性信息、以及不同控件图层之间的图层关系信息，生成预设格式的目标文件。在生成的预设格式的目标文件包含控件图层、控件属性信息、以及不同控件图层之间的图层关系信息的情况下，不同控件图层之间的图层关系信息可以表示为预设结构化的数据关系。示例性地，在一种实施方式中，图层关系信息可以表示为JavaScript对象简谱(JavaScript Object Notation，JSON)数据结构的数据关系。在其他方式中，图层关系信息可以表示为树结构的数据关系。这里对预设结构可以不做具体限定。

生成的预设格式的目标文件可以导入到目标引擎中，目标引擎可以基于目标文件，获取到目标文件中包括的控件图层、控件图层对应的目标控件的控件属性信息以及不同控件图层之间的图层关系信息，从而可以生成目标UI界面，具体过程将在后文详述。

参见图2所示，为本公开实施例提供的另一种用户交互UI界面的生成方法的流程图，具体可以包括：

S201：响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系。

S202：利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息。

S203：基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

本公开实施例可以应用于目标引擎中，目标引擎响应于触发UI界面生成指令，可以获取前述包括预设结构化数据关系的目标文件。这里，目标文件可以是按照前述过程生成之后自动导入到目标引擎中的。这里，可以利用目标插件，例如PhotoShop软件中自带的通用扩展性面板(Common Extensibility Platform，CEP)插件导出目标文件。

针对导出的目标文件，可以利用文件分析工具对其进行解析，例如可以利用预设的PSD分析工具对目标文件进行解析，从而可以得到控件图层、控件图层对应目标控件的控件属性信息、以及各控件图层之间的图层关系信息。在一种实施方式中，可以得到包含图层关系信息、以及按照JSON数据结构组织的控件属性信息的JSON文件；此外，还可以得到包含控件图层的图层资源。

在一种实施方式中，在生成目标UI界面的过程中，可以生成UI面板；然后按照预设结构化数据关系指示的控件图层之间的图层关系，依次读取各个控件图层对应的控件属性信息；基于各个控件图层对应的控件属性信息、以及各个控件图层，在UI面板上添加与各个控件图层对应的目标控件；为各个目标控件关联执行逻辑代码，生成目标UI界面。

其中，各个目标控件关联的执行逻辑代码可以是预先生成的，这里，通过为各个目标控件关联执行逻辑代码，可以实现UI界面上的交互逻辑，比如为某个按钮关联监听点击事件的逻辑代码，该按钮就可以在监听到点击事件的时候，触发下一步的处理逻辑。

下面对在用户交互UI界面的生成方法进行详述。

这里可以利用目标图形软件(例如PhotoShop软件)中的目标插件(例如CEP插件)实现生成用于渲染用户交互UI界面的PSD文件的功能。除此之外，目标插件还提供了PSD文件在引擎中的还原功能。比如用户交互UI界面中有文本组件时，则可以会触发字体搜索功能，在引擎中渲染时使用与PSD文件中相同的字体。

这里，可以利用目标插件在目标图形软件中创建UI设计界面。在具体实施中，可以在目标图形软件的功能栏中设置UI设计界面对应的创建按钮。当用户打开目标图形软件的时候，可以点击功能栏中的创建按钮，在目标图形软件中展示UI设计界面。UI设计界面中可以展示包含多个控件模板的控件编辑面板以及图层生成画布。

如图3所示的UI设计界面的结构示意图中，控件编辑面板可以为超文本标记语言(Hyper Text Markup Language，HTML)编辑面板。利用HTML编辑面板可以定义控件编辑面板的大小、样式以及实现各个按钮的功能绑定。为了实现HTML面板的各个功能，还可以利用目标插件创建JavaScript扩展脚本语言(JavaScript XML，JSX)，在JSX扩展脚本中定义创建面板、添加控件、导入控件模板、修改属性信息等各种功能。这里，还可以利用目标插件创建可以被HTML编辑面板使用的JS脚本的接口，通过将JS脚本的接口作为HTML编辑面板调用JSX扩展脚本的接口的中转接口，从而实现HTML编辑面板的上述功能。目标图形软件在运行时，图层生成画布可以调用JSX扩展脚本的接口，实现对图层的编辑功能。

如图4所示的UI设计界面的效果示意图中，在UI设计界面的控件编辑面板中展示有多个控件模板分别对应的触发按钮、以及用于创建图层生成画布的画布按钮Canvas。

触发画布按钮Canvas后，可以在UI设计界面中展示图层生成画布，并且还可以展示用于修改图层生成画布的属性信息的属性面板，如图5所示，画布属性面板可以展示在控件模板对应的触发按钮的上层。画布属性面板中展示有用于修改画布的分辨率和名称的编辑框。各个属性对应的编辑框内可以展示有初始画布属性值。通过在编辑框内对属性面板中的各个初始画布属性值进行修改，可以得到修改后的图层生成画布。完成对图层生成画布的修改后，可以隐藏画布属性面板。当再次点击图层生成画布的时候，可以继续展示画布属性面板。

在UI设计界面中展示的控件模板例如可以包括图像控件Image、原始图像控件RawImage、文本控件Text、按钮控件Button、输入框控件Input Field、摇杆控件Slider、切换控件Toggle、滚动条控件Scroll View、下拉菜单控件Drop Down等。通过触发目标控件模板对应的触发按钮，可以在图层生成画布中生成目标控件模板对应的控件图层。

当触发目标控件模板对应的触发按钮，在UI设计界面生成目标控件图层的时候，或者选中已生成的目标控件图层的时候，还可以在UI设计界面中，展示与目标控件模板对应的属性设置面板，如图4所示，属性设置面板展示有目标控件图层的各个属性下的初始控件属性值。通过对各个初始控件属性值进行修改，可以基于修改后的控件属性值，得到修改后的控件图层。

其中，UI设计界面中展示的各个控件模板与引擎中所使用的控件模板是对应的，因此使用UI设计界面中展示的各个控件模板生成的控件图层可以直接应用于引擎中。

如图6所示，通过CEP插件可以实现导入控件模板、生成PSD文件以及将PSD文件栅格化的功能。通过CEP插件制作完成PSD文件后，可以将PSD文件导入PSD分析工具中，对PSD文件进行分析和切分。通过对PSD文件切分，可以得到JSON文件和图层资源。其中，JSON文件中图层关系信息、以及按照JSON数据结构组织的控件属性信息，图层资源中包含已生成的控件图层。通过引擎导入插件，可以将JSON文件和图层资源导入到目标引擎中生成UI界面。引擎导入插件可以实现对JSON文件的分析、渲染图层和绑定逻辑代码等功能，这里不再赘述。

其中，通过图7所示的对PSD文件进行分析的流程图，通过读取PSD文件，可以得到图层标识信息和节点标识信息，然后根据图层标识信息，得到控件图层；根据节点标识信息，得到JSON文件。如图8所示的节点之间的层级关系示意图中，已生成的控件图层可以作为JSON根节点的子节点，并按照图层关系排布。每个节点处对应有节点信息，节点信息中可以包括节点名、以及作为该节点的控件图层的控件属性信息，具体如控件名、控件图层的位置信息、图片路径、锚点和重心等信息。最后，将控件图层以及按照预设结构化数据关系组织的控件属性信息导入引擎中，对按照Json数据结构关系组织的控件属性信息进行分析，根据控件属性信息中包含的大小、位置等属性信息，将控件图层按照图层关系进行渲染，并与各个控件图层对应的控件的逻辑代码进行绑定，从而实现各个控件在UI界面中的功能。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与用户交互UI界面的生成方法对应的用户交互UI界面的生成装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述用户交互UI界面的生成方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图9所示，为本公开实施例提供的一种用户交互UI界面的生成装置的架构示意图，所述装置包括：第一生成模块901、第二生成模块902；其中，

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

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

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

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

一种可选的实施方式中，第一生成模块901，具体用于：

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

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

一种可选的实施方式中，所述装置还包括：

更新模块，用于在生成所述控件图层后，响应于对所述控件图层的修改操作，基于所述修改操作修改的目标属性的图层属性值，对所述控件图层对应的图层属性信息进行更新。

一种可选的实施方式中，第一生成模块901，具体用于：

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

一种可选的实施方式中，第一生成模块901，具体用于：

响应于对已生成的控件图层中任一控件图层的选中操作，将所述任一控件图层作为目标控件图层；

响应于对多个控件模板中的目标控件模板的触发操作，根据所述目标控件模板确定当前生成的所述控件图层和所述目标控件图层之间的图层关系信息。

参照图10所示，为本公开实施例提供的一种用户交互UI界面的生成装置的架构示意图，所述装置包括：获取模块1001、解析模块1002、生成模块1003；其中，

获取模块1001，用于响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

解析模块1002，用于利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

生成模块1003，用于基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图11所示，为本公开实施例提供的计算机设备1100的结构示意图，包括处理器1101、存储器1102、和总线1103。其中，存储器1102用于存储执行指令，包括内存11021和外部存储器11022；这里的内存11021也称内存储器，用于暂时存放处理器1101中的运算数据，以及与硬盘等外部存储器11022交换的数据，处理器1101通过内存11021与外部存储器11022进行数据交换，当计算机设备1100运行时，处理器1101与存储器1102之间通过总线1103通信，使得处理器1101在执行以下指令：

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

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

或处理器1101与存储器1102之间通过总线1103通信，使得处理器1101在执行以下指令：

响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的用户交互UI界面的生成方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例还提供一种计算机程序产品，该计算机产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的用户交互UI界面的生成方法的步骤，具体可参见上述方法实施例，在此不再赘述。

其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (11)

1.一种用户交互UI界面的生成方法，其特征在于，所述方法包括：

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

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

2.根据权利要求1所述的方法，其特征在于，响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层之前，所述方法还包括：

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

3.根据权利要求2所述的方法，其特征在于，所述在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层，包括：

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

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

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：在生成所述控件图层后，响应于对所述控件图层的修改操作，基于所述修改操作修改的目标属性的图层属性值，对所述控件图层对应的图层属性信息进行更新。

5.根据权利要求1所述的方法，其特征在于，所述确定当前生成的所述控件图层和已生成的目标控件图层之间的图层关系信息，包括：

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

6.根据权利要求1所述的方法，其特征在于，所述响应于对多个控件模板中的目标控件模板的触发操作，在UI设计界面上的图层生成画布中生成与所述目标控件模板对应的控件图层，并确定当前生成的所述控件图层和已生成的目标控件图层之间的图层关系信息，包括：

响应于对已生成的控件图层中任一控件图层的选中操作，将所述任一控件图层作为目标控件图层；

响应于对多个控件模板中的目标控件模板的触发操作，根据所述目标控件模板确定当前生成的所述控件图层和所述目标控件图层之间的图层关系信息。

7.一种用户交互UI界面的生成方法，其特征在于，包括：

响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

8.一种用户交互UI界面的生成装置，其特征在于，包括：

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

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

9.一种用户交互UI界面的生成装置，其特征在于，包括：

获取模块，用于响应于触发UI界面生成指令，获取包括预设结构化数据关系的目标文件；所述预设结构化数据关系用于描述所述控件图层之间的图层关系；

解析模块，用于利用文件分析工具对所述目标文件进行解析，得到所述目标文件中包括的所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息；

生成模块，用于基于所述控件图层、所述控件图层对应目标控件的控件属性信息以及各所述控件图层之间的图层关系信息，生成目标UI界面。

10.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一项所述的用户交互UI界面的生成方法的步骤或执行如权利要求8所述的用户交互UI界面的生成方法的步骤。

11.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任一项所述的用户交互UI界面的生成方法的步骤或执行如权利要求8所述的用户交互UI界面的生成方法的步骤。

Images