CN111857696A - 一种视觉稿的结构调整方法、装置、设备和介质 - Google Patents

Abstract

本申请属于计算机技术领域，公开了一种视觉稿的结构调整方法、装置、设备和介质，本申请公开的一种视觉稿的结构调整方法包括，响应于针对业务界面中用于优化的功能控件的触发操作，对原始视觉稿的目标图层进行解析，获得相应的原始图元树，并根据优化模式对原始图元树中的各节点进行结构调整，获得调整后的优化图元树，以及根据优化图元树对原始视觉稿的各子图元进行调整，获得优化视觉稿。这样，简化了视觉稿结构调整的繁琐步骤，解决了应用软件多样性造成的不兼容问题，扩大了适用范围。

Description

一种视觉稿的结构调整方法、装置、设备和介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种视觉稿的结构调整方法、装置、设备和介质。

背景技术

随着互联网技术以及智能终端技术的迅速发展，用户对应用程序的视觉体验要求也不断提高。设计人员在进行界面(User Interface，UI)设计时，由于不同设计人员之间的风格和水平具有差异性，设计的视觉稿的结构可能较为混乱，可读性较差，因此，通常需要对视觉稿的结构进行调整，以优化视觉稿。

但是，在对视觉稿进行结构调整时，通常需要设计人员手动输入图层约束关系，以对视觉稿进行重组，这会耗费大量专业人员的人力成本和时间成本，以及由于应用程序的多样性，针对不同的应用程序，通常需要不同的视觉稿结构调整方案，因此，适用范围较小并且兼容性差。

由此，亟待需要一种可以简化结构调整的繁琐步骤并且适用范围广的视觉稿的结构调整方案。

发明内容

本申请实施例提供一种视觉稿的结构调整方法、装置、设备和介质，用以在对视觉稿进行结构调整时，简化结构调整的繁琐步骤，扩大适用范围。

一方面，提供一种视觉稿的结构调整方法，包括：

响应于针对业务界面中用于优化的功能控件的触发操作，对待处理的原始视觉稿的目标图层进行解析，获得目标图层的原始图元树，原始图元树中的各节点为目标图层中的各图元；

根据优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树；

根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

一方面，提供一种视觉稿的结构调整装置，包括：

解析单元，用于响应于针对业务界面中用于优化的功能控件的触发操作，对待处理的原始视觉稿的目标图层进行解析，获得目标图层的原始图元树，原始图元树中的各节点为目标图层中的各图元；

调整单元，用于根据优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树；

优化单元，用于根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

较佳的，优化单元还用于：

响应于针对业务界面中用于下载的功能控件的触发操作，导出优化视觉稿。

较佳的，解析单元还用于：

响应于针对业务界面中用于视觉稿上传的功能控件的触发操作，接收用户上传的原始视觉稿，以及响应于用户在业务界面中的图层选择操作，确定用户选择的目标图层；

响应于针对业务界面中用于模式选择的触发操作，获得用户设置的优化模式。

较佳的，优化模式包括以下模式中的任意一种或任意组合：

对原始图元树中的冗余节点进行清洗处理的清洗模式；

将原始图元树中的各节点进行重组处理的重组模式；以及，

将原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

较佳的，调整单元用于：

遍历原始图元树，针对原始图元树中的每一节点进行检测，若检测结果为该节点为冗余节点，则在原始图元树中将该节点移除；

其中，冗余节点为被覆盖、对应的图元样式无效或图元不可见的节点。

较佳的，调整单元用于：

遍历原始图元树，确定原始图元树中每一节点的各候选父节点，其中，一个节点的候选父节点为包含该节点的节点；

针对每个节点，将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点；

在原始图元树中，将该节点从原始父节点下，移至相应的最优父节点下。

较佳的，调整单元用于：

遍历原始图元树，针对原始图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组；

在原始图元树中，确定每一合并组的父节点；

在原始图元树中，将每一合并组中的各叶子节点移至相应的父节点下。

较佳的，优化单元用于：

将优化图元树与原始图元树进行对比；

根据对比结果，确定各节点的节点操作序列；

分别按照每一节点的节点操作序列，对原始视觉稿的各图元进行调整，获得调整后的优化视觉稿。

一方面，提供一种控制设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时执行上述任一种视觉稿的结构调整方法的步骤。

一方面，提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一种视觉稿的结构调整方法的步骤。

本申请实施例提供的一种视觉稿的结构调整方法、装置、设备和介质中，响应于针对业务界面中用于优化的功能控件的触发操作，对原始视觉稿的目标图层进行解析，获得相应的原始图元树，并根据优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树，以及根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。这样，不需要专业人员手动操作，简化了视觉稿结构调整的繁琐步骤，将原始视觉稿的目标图层进行数据抽象，获得原始图元树，并根据原始图元树获得优化图元树，并还原获得优化视觉稿，解决了应用程序多样性造成的适用范围小以及无法兼容的问题，扩大了适用范围，兼容性高。

进一步地，通过清洗模式可以清洗掉冗余节点，解决了视觉稿元素冗余问题；通过重组模式，可以计算出各节点即图元之间合理的层级关系，进而对图元层级关系进行调整，输出正确的层级，解决了视觉稿结构混乱的问题；可以根据各节点之间的图元空间关系，自动对具有关联关系的节点进行合并，解决了图层零散的问题；对原始视觉稿的结构进行了优化，获得的优化视觉稿的结构清晰，可读性好，提高了用户体验。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施方式中一种视觉稿的结构调整的应用场景示例图；

图2a为本申请实施方式中一种视觉稿的结构调整实施流程图；

图2b为本申请实施方式中一种原始图元树的节点示例图。

图3a为本申请实施方式中一种不可见图元的示例图；

图3b为本申请实施方式中一种最优父节点筛选的流程示意图；

图3c为本申请实施方式中一种原始图元树；

图3d为本申请实施方式中一种优化图元树；

图3e为本申请实施方式中一种视觉稿示例图；

图3f为本申请实施方式中一种视觉稿的结构调整的过程示例图；

图4为本申请实施方式中一种视觉稿的结构调整的详细实施流程图；

图5a为本申请实施方式中一种优化前图层结构示例图；

图5b为本申请实施方式中一种优化后图层结构示例图；

图6为本申请实施方式中一种视觉稿的结构调整系统的逻辑架构示意图；

图7为本申请实施方式中一种视觉稿的结构调整装置的结构示意图；

图8为本申请实施方式中一种控制设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

首先，对本申请实施例中涉及的部分用语进行说明，以便于本领域技术人员理解。

视觉稿：主要为具有图层结构的UI设计稿。

图层：是视觉稿的基本构成单位，可以将页面上的元素进行归类和定位，可分为文本、图形、以及组等，图层之间可进行嵌套。

图元：图层的样式信息转化为的统一的图元属性，是图层的数据抽象类。

叶子节点：是离散数学中的概念，树中没有子节点的节点称为叶子节点，简称"叶子"，又称为终端节点。

图元树：包含各节点的树形结构，节点为各图元。

清洗模式：对原始图元树中的冗余节点进行清洗处理。

重组模式：将原始图元树中的各节点进行重组处理。

合并模式：将原始图元树中具有关联关系的各叶子节点进行合并处理。

下面介绍本申请实施例的设计思想。

设计人员在进行UI设计时，由于不同设计人员之间的风格和水平具有差异性，设计的视觉稿的结构可能较为混乱，可读性较差，因此，通常需要对视觉稿的结构进行优化调整。

传统方式中，对视觉稿进行结构优化调整时，通常需要专业的设计人员针对待优化的视觉稿手动输入相应的图层约束关系，实现视觉稿的重组，但是，这会耗费大量专业人员的人力成本和时间成本，以及由于不同应用程序的差异性，因此，针对不同应用程序的视觉稿进行结构优化时，可能需要不同的结构优化方案，适用范围小并且兼容性低。进一步地，不能解决视觉稿中的子图元冗余以及图层零散的问题。

由此亟待需要一种视觉稿的结构调整技术方案，以简化视觉稿结构优化的繁琐步骤，扩大适用范围，以及解决图元冗余问题和图层零散问题。

鉴于此，可以通过算法计算出视觉稿的约束关系，实现视觉稿的图元重组，解决视觉稿结构混乱的问题，以及可以将视觉稿通过图元树进行数据抽象，解决应用程序多样性导致的无法兼容问题；进一步地，还可以通过冗余图元清洗，解决图元冗余问题，以及根据图元的图形空间关系，对具有关联关系的图元进行合并，解决图层零散问题。

鉴于以上分析和考虑，本申请实施例中提供了一种视觉稿的结构调整方案，该方案中，对待优化的原始视觉稿的目标图层进行解析，获得相应的原始图元树，并根据优化模式对原始图元树中的各节点进行结构调整，获得调整后的优化图元树，以及根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

进一步地，优化模式包括以下模式中的任意一种或任意组合：对原始图元树中的冗余节点进行清洗处理的清洗模式；将原始图元树中的各节点进行重组处理的重组模式；以及将原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

为进一步说明本申请实施例提供的技术方案，下面结合附图以及具体实施方式对此进行详细的说明。虽然本申请实施例提供了如下述实施例或附图所示的方法操作步骤，但基于常规或者无需创造性的劳动在所述方法中可以包括更多或者更少的操作步骤。在逻辑上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本申请实施例提供的执行顺序。所述方法在实际的处理过程中或者装置执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行。

图1为本申请实施方式中提供的一种视觉稿的结构调整的应用场景示例图。参阅图1所示，视觉稿优化平台的业务界面包括三大模块：左边为图层结构模块，中间为视觉稿模块，右边为优化交互模块。

其中，图层结构模块：用于展示对视觉稿进行解析后获得的图层结构。

视觉稿模块：用于展示视觉稿。

优化交互模块：用于通过各功能控件实现人机交互，接收用户通过功能控件下发的控制指令。优化交互模块包括“上传”功能控件、“优化”功能控件，以及“下载”功能控件，还包含用于设置优化模式的优化选项。其中，优化选项包括：清洗模式、重组模式以及合并模式。实际应用中，优化模式可以是固定设置的，也可以根据用户的控制指令进行选择设置。

需要说明的是，图1仅用于说明视觉稿优化平台包含图层结构模块、视觉稿模块和优化交互模块，以及优化交互模块包含多个功能控件，因此，即便图1中的文字、线条以及图片不清晰，也不影响本申请说明书的清楚性。

用户可以通过视觉稿优化平台业务界面的“上传”功能控件，将待优化的原始视觉稿上传至视觉稿优化平台，并通过优化选项选择优化模式，以及通过鼠标在上传的原始视觉稿中选择待优化的目标图层。用户点击“优化”功能控件后，视觉稿优化平台响应于针对“优化”功能控件的触发操作，对待处理的原始视觉稿进行解析，获得原始视觉稿的原始图元树，并根据用户设置的优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树，以及根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

需要说明的是，对视觉稿进行优化时，原始视觉稿与优化视觉稿在视觉上是一样的，但是，原始视觉稿与优化视觉稿的图层结构是完全不同的。本申请实施例中原始视觉稿和优化视觉稿均是指包含图层结构的视觉稿，而非单指视觉稿的视觉效果。

图2a为本申请提供的一种视觉稿的结构调整实施流程图。参阅图2a所示，该方法的具体流程如下：

步骤200：控制设备响应于针对业务界面中用于视觉稿上传的功能控件的触发操作，接收用户上传的原始视觉稿。

具体的，执行步骤200时，原始视觉稿可以为UI设计稿。

步骤201：控制设备对接收的原始视觉稿进行解析，获得原始视觉稿的图层结构，并通过业务界面呈现原始视觉稿以及相应的图层结构。

具体的，执行步骤201时，图层是视觉稿的基本构成单位，可以将页面上的元素进行归类和定位，可分为文本、图形、以及组等，图层之间可进行嵌套。参阅图1所示的图层结构模块，原始视觉稿包含多个图层，原始视觉稿的图层结构表示原始视觉稿的各图层之间的关系。

步骤202：控制设备响应于用户在业务界面中的图层选择操作，确定用户选择的目标图层，并响应于针对业务界面中用于模式选择的触发操作，获得用户设置的优化模式。

具体的，执行步骤202时，用户可以通过鼠标点击或者框选出待优化的目标图层。优化模式可以包括以下模式中的任意一种或任意组合：

第一种模式为：对原始图元树中的冗余节点进行清洗处理的清洗模式。

第二种模式为：将原始图元树中的各节点进行重组处理的重组模式。

第三种模式为：将原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

其中，叶子节点是离散数学中的概念，树中没有子节点的节点称为叶子节点，简称"叶子"，又称为终端节点。

例如，参阅图2b所示，为一种原始图元树的节点示例图。该原始图元树中包括5个节点，即节点001、节点002、节点003、节点004以及节点005。由于节点003、节点004和节点005均没有子节点，因此，节点003、节点004和节点005均为原始图元树的叶子节点。

需要说明的是，若通过清洗模式、重组模式以合并模式的任意组合依次对目标图层进行优化时，依次对调整后的原始图元树继续进行优化。

例如，控制设备采用清洗模式对原始图元树中的冗余节点进行清洗处理，获得第一优化图元树，接着，采用重组模式对第一优化图元树中的各节点进行重组处理，获得第二优化图元树，以及采用合并模式，对第二图元树中具有关联关系的各叶子节点进行合并处理获得第三优化图元树。

可选的，优化模式还可以为直接采用固定的优化模式。图层选择操作和优化模式设置的执行顺序可以根据实际应用进行调整，在此不做限制。

步骤203：控制设备响应于针对业务界面中用于优化的功能控件的触发操作，对目标图层进行解析，获得目标图层的原始图元树。

具体的，用户点击业务界面中用于优化的功能控件，控制设备响应于针对业务界面中用于优化的功能控件的触发操作，调用解析器对目标图层的图层结构进行解析，获得目标图层中各子图层的图层类型，并根据各图层类型提取相应的图层样式，以及根据目标图层中各子图层的图层类型和图层样式，将各子图层进行数据抽象，获得包含各图元的原始图元树。

其中，原始图元树中的各节点为目标图层的各图元，图元为图层的样式信息转化为的统一的图元属性，是图层的数据抽象类。

其中，所有视觉稿的图层经过数据抽象后，都将转化为图片(Image)、图形(Shape)、组(Group)、文本(Text)四种图元。其中，组图元带有树形层级关系，可嵌套多个子图元，这里将根节点组图元称为图元树。

步骤204：控制设备根据优化模式，对原始图元树中各节点结构进行调整，获得调整后的优化图元树。

具体的，获得优化图元树时，控制设备可以采用以下方式中的任意一种或任意组合：

第一种方式为：当优化模式包括清洗模式，控制设备对原始图元树中的冗余节点进行清洗处理。

第二种方式为：当优化模式包括重组模式时，将原始图元树中的各节点进行重组处理。

第三种方式为：当优化模式包括合并模式时，将原始图元树中具有关联关系的各叶子节点进行合并处理。

其中，清洗模式、重组模式以及合并模式的执行顺序可以根据实际需求进行调整，在此不做限定。

当优化模式包括清洗模式，控制设备对原始图元树中的冗余节点进行清洗处理时，可以采用如下步骤：

控制设备遍历原始图元树，分别针对原始图元树中的每一节点，若该节点为冗余节点，则在原始图元树中将该节点移除。

其中，冗余节点为被覆盖、对应的图元样式无效或图元不可见的节点。被覆盖即图元被其它图元覆盖。图元样式无效，如全透明，无背景，或图元颜色伪装。图元不可见即图元颜色与其底层图元颜色相同造成图元不可见。

本申请实施例中，遍历可以为深度优先遍历，也可以为广度优先遍历。所谓深度优先遍历即每次都在访问完当前结点后首先访问当前结点的第一个邻接结点。而广度优先遍历需要使用一个队列保持访问过的节点的顺序，以便按这个顺序访问这些节点的邻接节点。

由此既可尽可能深的搜索原始图元树的分支以及每个节点。

例如，图3a为一种不可见图元的示例图。参阅图3a所示，目标图层中包含图元301和图元302。图元301为一个矩形方框，图元302为一个“哭脸”图片，为非冗余节点。由于图元301的图元颜色与底层图元颜色相同，造成图元不可见，因此，图元301为冗余节点，则在目标图层的原始图元树中移除图元301。

其中，判断目标图元被其它图元覆盖时，可以采用以下方式：

若原始图元树中存在一个图元，可使得目标图元的各顶点坐标均落在该图元的范围内，且该图元的z轴坐标大于目标图元的z轴坐标，即该图元在z轴上高于目标图元，如，该图元位于顶层，目标图元位于底层，则判定目标图元被该图元覆盖。

当优化模式包括重组模式，将原始图元树中的各节点进行重组处理时，可以采用如下步骤：

S20411：遍历原始图元树，确定原始图元树中每一节点的候选父节点。

本申请实施例中遍历可以为深度优先遍历，也可以为广度优先遍历。

其中，一个节点的候选父节点为包含该节点的节点。也就是说，一个节点的候选父节点需要满足以下条件：包含该节点。

S20412：将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点；

其中，一个节点的最优父节点需要满足以下两个条件：属于该节点的候选父节点并且面积最小。

S20413：在原始图元树中，将该节点从原始父节点下，移至相应的最优父节点下。

例如，图3b为一种最优父节点筛选的流程示意图。参阅图3b所示，目标图层310包含的各节点为：笑脸节点311、第一矩形框节点312、文字节点313、第二矩形框节点314以及第三矩形框节点315。

以将笑脸节点311为目标节点为例进行说明，目标图层310的其余各节点集合包括第一矩形框节点312、文字节点313、第二矩形框节点314以及第三矩形框节点315。在其余各节点集合中，将包含笑脸节点311的第一矩形框节点312和第二矩形框节点314确定为笑脸节点311的候选父节点。最后，将各候选节点中面积最小的第一矩形框节点312确定为笑脸节点311的最优父节点。

由此就可以计算出各节点之间合理的层级关系进而进行调整，输出正确的层级，解决了视觉稿结构混乱的问题。

当优化模式包括合并模式，将原始图元树中具有关联关系的各叶子节点进行合并处理时，可以采用如下步骤：

S20421：遍历原始图元树，针对原始图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组。

本申请实施例中遍历可以为深度优先遍历，也可以为广度优先遍历。

S20422：在原始图元树中，分别确定与每一合并组相应的父节点。

具体的，针对每一合并组，分别创建相应的父节点。

例如，图3c为一种原始图元树。图3d为一种优化图元树。参阅图3c所示，目标图层320对应的原始图元树包括节点321至节点328(即包括节点321、节点322、节点323、节点324、节点325、节点326、节点327以及节点328)。其中，原始图元树中的叶子节点包括：节点321、节点322、节点323以及节点324。

由于节点321、节点323以及节点324均与节点322相关联，因此，将节点321、节点322、节点323以及节点324作为合并组，并针对该合并组创建父节点329。

S20423：在原始图元树中，分别将每一合并组中的各叶子节点移至相应的父节点下。

例如，参阅图3c所示，由于节点321、节点323以及节点324均与节点322相关联，因此，将节点321、节点322、节点323以及节点324作为合并组，并针对该合并组创建父节点329，以及将原始图元树中的节点321、节点322、节点323以及节点324移至父节点329下，获得图3d所示的优化图元树。

这样，就可以根据各节点之间的图元空间关系，自动对具有关联关系的各节点进行合并。

步骤205：控制设备根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

具体的，控制设备将优化图元树与原始图元树进行对比，根据对比结果，确定各节点的节点操作序列，分别按照每一节点操作序列，对原始视觉稿的各图元进行调整，获得调整后的优化视觉稿。

可选的，可以调用设计软件应用程序编程接口(Application ProgrammingInterface，API)对原始视觉稿进行调整，获得优化视觉稿。

其中，节点操作序列用于根据优化图元树与原始图元树之间的区别，将原始视觉稿的各节点的位置进行调整，从而获得调整后的优化视觉稿，从而根据优化图元树还原获得优化视觉稿。

表1.

参阅表1所示，为一种节点操作序列格式的释义表。可选的，节点操作序列的格式可以表1所示，即{id，from，to}。

例如，{id：“A”，from：“B”，to：“C”}，表示将节点A从父节点B下移动至父节点C下，可用于节点的重组处理。

又例如，{id：“A”，from：“B”，to：null}，表示将节点A从父节点B下移除，可用于节点的清洗。

又例如，{id：“A”，from：null，to：B}，表示在父节点B下创建子节点A，可用于节点的创建。

这样，就可以通过优化图元树，获得相应的优化视觉稿。

步骤206：控制设备响应于针对业务界面中用于下载的功能控件的触发操作，导出优化视觉稿。

这样，用户就可以下载优化视觉稿。

例如，图3e为一种视觉稿示例图。图3f为一种视觉稿的结构调整的过程示例图。图3f中包含图a-图d。图a为原始的图层结构图，图b为原始图元树图，图c为优化图元树图，图d为优化后的图层结构图。

控制设备获取如图3e所示的原始视觉稿，并对原始视觉稿进行解析后，获得图a所示的原始的图层结构，并根据该图层结构获得图b所示的原始图元树图，以及根据优化模式对该原始图元树的各节点结构进行调整获得图c所示的优化图元树，并根据优化图元树以及原始图元树对原始视觉稿的各图元进行调整，获得优化视觉稿。优化视觉稿的图层结构为图d所示的优化后的图层结构。

图4为本申请提供的一种视觉稿的结构调整的详细实施流程图。参阅图4所示，该方法的具体流程如下：

步骤400：控制设备响应于针对业务界面中用于视觉稿上传的功能控件的触发操作，接收用户上传的原始视觉稿。

步骤401：控制设备对接收的原始视觉稿进行解析，获得原始视觉稿的图层结构，并通过业务界面呈现原始视觉稿以及相应的图层结构。

具体的，执行步骤401时，详细步骤参见上述步骤201。

步骤402：控制设备响应于用户在业务界面中的图层选择操作，确定用户选择的目标图层，并响应于针对业务界面中用于模式选择的触发操作，获得用户设置的所述优化模式。

具体的，执行步骤402时，详细步骤参见上述步骤202。

步骤403：控制设备响应于针对业务界面中用于优化的功能控件的触发操作，对目标图层进行解析，获得目标图层的原始图元树。

具体的，执行步骤403时，详细步骤参见上述步骤203。

步骤404：控制设备确定优化模式包括清洗模式，则对原始图元树中的冗余节点进行清洗处理，获得第一优化图元树。

具体的，执行步骤404时，控制设备可以采用以下步骤：

S4041：遍历原始图元树，依次获取下一个目标节点。

S4042：判断该节点是否为冗余节点，若是，则执行S4043，否则，执行S4044。

S4043：在原始图元树中移除该节点。

S4044：判断是否遍历完成，若是，则执行S4045，否则，执行S4041。

S4045：输出第一优化图元树。

步骤405：控制设备确定优化模式包括重组模式，则将第一优化图元树中的各节点进行重组处理。

具体的，执行步骤405时，控制设备可以采用以下步骤：

S4051：遍历第一优化图元树，分别针对第一优化图元树中的每一节点，确定该节点的各候选父节点，并将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点。

S4052：在第一优化图元树中，将该节点从原始父节点下移至相应的最优父节点下。

S4053：输出第二优化图元树。

步骤406：控制设备确定优化模式包括合并模式，将第二优化图元树中具有关联关系的各叶子节点进行合并处理。

具体的，执行步骤406时，控制设备可以采用如下步骤：

S4061：遍历原始图元树，针对第二优化图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组。

S4062：在第二优化图元树中，分别针对每一合并组，确定相应的父节点。

S4063：分别将每一合并组中的各叶子节点移至相应的父节点下，获得并输出第三优化图元树。

步骤407：控制设备根据第三优化图元树，对原始视觉稿的各子图元进行调整，获得优化视觉稿。

具体的，执行步骤407时，可以采用以下步骤：

S4071：将第三优化图元树与所述原始图元树进行对比，根据对比结果，确定各节点的节点操作序列。

S4072：调用设计软件API，分别按照每一节点操作序列，对原始视觉稿的各子图元进行调整，获得调整后的优化视觉稿。

例如，图5a为一种优化前图层结构示例图，图5b为一种优化后图层结构示例图。控制设备对图5a所示的优化前图层进行解析，获得相应的原始图元树，并针对原始图元树依次执行以下步骤：

p1：遍历原始图元树，确定图元(即节点)Aa手游为冗余节点，即图5a中的待清洗节点，则移除图元Aa手游，获得第一优化图元树。

p2：遍历第一优化图元树，确定原始图元树中图元任务copy8下的图元矩形copy9、图元矩形、图元矩形copy8、图元合并形状以及图元Rectangle3为具有关联关系的叶子节点、即图5a中的待合并节点，则将各待合并节点组成合并组，并针对合并组创建父节点任务copy7，以及在第一优化图元树中，将各待合并节点移至父节点任务copy7下，获得第二优化图元树。

p3：遍历第二优化图元树，确定图元Aa红包的候选父节点为图元wrap以及图元任务copy9下的图元icon，并且图元椭圆形copy和图元Aa手游的候选父节点均为图元wrap以及图元任务copy7下的图元icon，进而确定图元Aa红包、图元椭圆形copy和图元Aa手游均为待重组节点，则根据面积比较，确定图元任务copy9下的图元icon为图元Aa红包的最优父节点，图元任务copy7下的图元icon为图元椭圆形copy和图元Aa手游的最优父节点，并将图元Aa红包移至图元任务copy9下的图元icon下，以及将图元椭圆形copy和图元Aa手游均移至图元任务copy7下的图元icon下，获得第三优化图元树。

p4：控制设备将第三优化图元树与原始图元树进行对比，根据对比结果，确定各节点的节点操作序列。表2为各节点的节点操作序列的释义表。

P5：，分别按照每一节点操作序列，对原始视觉稿的各图元进行调整，获得参阅图5b所示的优化视觉稿的优化后图层结构。

表2.

进一步地，控制设备响应于针对业务界面中用于下载的功能控件的触发操作，导出优化视觉稿。

图6为一种视觉稿的结构调整系统的逻辑架构示意图。参阅图6所示，视觉稿的结构调整系统包括：数据抽象模块600、清洗模块601、重组模块602、合并模块603以及视觉稿还原模块604。

其中，数据抽象模块600，用于执行上述步骤400-步骤403，输出原始图元树。

清洗模块601，用于执行上述步骤404，也就是执行上述S4041-S4045，输出第一优化图元树。

重组模块602，用于执行上述步骤405，也就是执行上述S4051-S4053，输出第二优化图元树。

合并模块603，用于执行上述步骤406，也就是执行上述S4061-S4063，输出第三优化图元树。

视觉稿还原模块604，用于执行上述步骤407，也就是执行上述S4071和S4072，获得优化视觉稿。

可选的，清洗模块601、重组模块602以及合并模块603的执行顺序可以根据实际需求进行调整，以及可以采用清洗模块601、重组模块602以及合并模块603中的任意一个或任意组合。

本申请实施例中，将原始视觉稿的目标图层进行数据抽象，获得原始图元树，并根据原始图元树获得优化图元树，并还原获得优化视觉稿，解决了应用程序多样性造成的适用范围小以及无法兼容的问题，扩大了适用范围，兼容性高；通过清洗模式可以清洗掉冗余节点，解决了视觉稿元素冗余问题；通过重组模式，可以计算出各节点即图元之间合理的层级关系，进而对图元层级关系进行调整，输出正确的层级，解决了视觉稿结构混乱的问题；可以根据各节点之间的图元空间关系，自动对具有关联关系的节点进行合并，解决了图层零散的问题；对原始视觉稿的结构进行了优化，获得的优化视觉稿的结构清晰，可读性好，提高了用户体验。

基于同一发明构思，本申请实施例中还提供了一种视觉稿的结构调整装置，由于上述装置及设备解决问题的原理与一种视觉稿的结构调整方法相似，因此，上述装置的实施可以参见方法的实施，重复之处不再赘述。

如图7示，其为本申请实施例提供的一种视觉稿的结构调整装置的结构示意图。一种视觉稿的结构调整装置包括：

解析单元700，用于响应于针对业务界面中用于优化的功能控件的触发操作，对待处理的原始视觉稿的目标图层进行解析，获得目标图层的原始图元树，原始图元树中的各节点为目标图层中的各图元；

调整单元701，用于根据优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树；

优化单元702，用于根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。

较佳的，优化单元702还用于：

响应于针对业务界面中用于下载的功能控件的触发操作，导出优化视觉稿。

较佳的，解析单元700还用于：

响应于针对业务界面中用于视觉稿上传的功能控件的触发操作，接收用户上传的原始视觉稿，以及响应于用户在业务界面中的图层选择操作，确定用户选择的目标图层；

响应于针对业务界面中用于模式选择的触发操作，获得用户设置的优化模式。

较佳的，优化模式包括以下模式中的任意一种或任意组合：

对原始图元树中的冗余节点进行清洗处理的清洗模式；

将原始图元树中的各节点进行重组处理的重组模式；以及，

将原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

较佳的，调整单元701用于：

遍历原始图元树，针对原始图元树中的每一节点进行检测，若检测结果为该节点为冗余节点，则在原始图元树中将该节点移除；

其中，冗余节点为被覆盖、对应的图元样式无效或图元不可见的节点。

较佳的，调整单元701用于：

遍历原始图元树，确定原始图元树中每一节点的各候选父节点，其中，一个节点的候选父节点为包含该节点的节点；

针对每个节点，将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点；

在原始图元树中，将该节点从原始父节点下，移至相应的最优父节点下。

较佳的，调整单元701用于：

遍历原始图元树，针对原始图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组；

在原始图元树中，确定每一合并组的父节点；

在原始图元树中，将每一合并组中的各叶子节点移至相应的父节点下。

较佳的，优化单元702用于：

将优化图元树与原始图元树进行对比；

根据对比结果，确定各节点的节点操作序列；

分别按照每一节点的节点操作序列，对原始视觉稿的各图元进行调整，获得调整后的优化视觉稿。

本申请实施例提供的一种视觉稿的结构调整方法、装置、设备和介质中，响应于针对业务界面中用于优化的功能控件的触发操作，对原始视觉稿的目标图层进行解析，获得相应的原始图元树，并根据优化模式，对原始图元树中的各节点进行结构调整，获得调整后的优化图元树，以及根据优化图元树，对原始视觉稿的各图元进行调整，获得优化视觉稿。这样，不需要专业人员手动操作，简化了视觉稿结构调整的繁琐步骤，将原始视觉稿的目标图层进行数据抽象，获得原始图元树，并根据原始图元树获得优化图元树，并还原获得优化视觉稿，解决了应用程序多样性造成的适用范围小以及无法兼容的问题，扩大了适用范围，兼容性高。

进一步地，通过清洗模式可以清洗掉冗余节点，解决了视觉稿元素冗余问题；通过重组模式，可以计算出各节点即图元之间合理的层级关系，进而对图元层级关系进行调整，输出正确的层级，解决了视觉稿结构混乱的问题；可以根据各节点之间的图元空间关系，自动对具有关联关系的节点进行合并，解决了图层零散的问题；对原始视觉稿的结构进行了优化，获得的优化视觉稿的结构清晰，可读性好，提高了用户体验。

参阅图8所示，为一种控制设备的结构示意图。基于同一技术构思，本申请实施例还提供了一种控制设备，可以包括存储器801和处理器802。

存储器801，用于存储处理器802执行的计算机程序。存储器801可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。处理器802，可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元等。本申请实施例中不限定上述存储器801和处理器802之间的具体连接介质。本申请实施例在图8中以存储器801和处理器802之间通过总线803连接，总线803在图8中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。总线803可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器801可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器801也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器801是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器801可以是上述存储器的组合。

处理器802，用于调用所述存储器801中存储的计算机程序时执行如图2a或图4中所示的实施例提供的视觉稿的结构调整方法。

本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任意方法实施例中的视觉稿的结构调整方法。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台控制设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (15)

1.一种视觉稿的结构调整方法，其特征在于，包括：

响应于针对业务界面中用于优化的功能控件的触发操作，对待处理的原始视觉稿的目标图层进行解析，获得所述目标图层的原始图元树，所述原始图元树中的各节点为所述目标图层中的各图元；

根据优化模式，对所述原始图元树中的各节点进行结构调整，获得调整后的优化图元树；

根据所述优化图元树，对所述原始视觉稿的各图元进行调整，获得优化视觉稿。

2.如权利要求1所述的方法，其特征在于，还包括：

响应于针对业务界面中用于下载的功能控件的触发操作，导出所述优化视觉稿。

3.如权利要求1所述的方法，其特征在于，还包括：

响应于针对业务界面中用于视觉稿上传的功能控件的触发操作，接收用户上传的所述原始视觉稿，以及响应于用户在业务界面中的图层选择操作，确定用户选择的目标图层；

响应于针对业务界面中用于模式选择的触发操作，获得用户设置的所述优化模式。

4.如权利要求1所述的方法，其特征在于，所述优化模式包括以下模式中的任意一种或任意组合：

对所述原始图元树中的冗余节点进行清洗处理的清洗模式；

将所述原始图元树中的各节点进行重组处理的重组模式；以及

将所述原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

5.如权利要求4所述的方法，其特征在于，当所述优化模式包括清洗模式时，对所述原始图元树中的冗余节点进行清洗处理，包括：

遍历所述原始图元树，针对所述原始图元树中的每一节点进行检测，若检测结果为该节点为冗余节点，则在所述原始图元树中将该节点移除；

其中，所述冗余节点为被覆盖、对应的图元样式无效或图元不可见的节点。

6.如权利要求4所述的方法，其特征在于，当所述优化模式包括重组模式时，将所述原始图元树中的各节点进行重组处理，包括：

遍历所述原始图元树，确定所述原始图元树中每一节点的各候选父节点，其中，一个节点的候选父节点为包含该节点的节点；

针对所述每个节点，将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点；

在所述原始图元树中，将该节点从原始父节点下，移至相应的最优父节点下。

7.如权利要求4所述的方法，其特征在于，当所述优化模式包括合并模式时，将所述原始图元树中具有关联关系的各叶子节点进行合并处理，包括：

遍历所述原始图元树，针对所述原始图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组；

在所述原始图元树中，确定每一合并组的父节点；

在所述原始图元树中，将每一合并组中的各叶子节点移至相应的父节点下。

8.如权利要求1-7任一项所述的方法，其特征在于，根据所述优化图元树，对所述原始视觉稿的各图元进行调整，获得优化视觉稿，包括：

将所述优化图元树与所述原始图元树进行对比；

根据对比结果，确定各节点的节点操作序列；

分别按照每一节点的节点操作序列，对所述原始视觉稿的各图元进行调整，获得调整后的优化视觉稿。

9.一种视觉稿的结构调整装置，其特征在于，包括：

解析单元，用于响应于针对业务界面中用于优化的功能控件的触发操作，对待处理的原始视觉稿的目标图层进行解析，获得所述目标图层的原始图元树，所述原始图元树中的各节点为所述目标图层中的各图元；

调整单元，用于根据优化模式，对所述原始图元树中的各节点进行结构调整，获得调整后的优化图元树；

优化单元，用于根据所述优化图元树，对所述原始视觉稿的各图元进行调整，获得优化视觉稿。

10.如权利要求9所述的装置，其特征在于，所述优化模式包括以下模式中的任意一种或任意组合：

对所述原始图元树中的冗余节点进行清洗处理的清洗模式；

将所述原始图元树中的各节点进行重组处理的重组模式；以及

将所述原始图元树中具有关联关系的各叶子节点进行合并处理的合并模式。

11.如权利要求10所述的装置，其特征在于，所述调整单元用于：

遍历所述原始图元树，针对所述原始图元树中的每一节点进行检测，若检测结果为该节点为冗余节点，则在所述原始图元树中将该节点移除；

其中，所述冗余节点为被覆盖、对应的图元样式无效或图元不可见的节点。

12.如权利要求10所述的装置，其特征在于，所述调整单元用于：

遍历所述原始图元树，确定所述原始图元树中每一节点的各候选父节点，其中，一个节点的候选父节点为包含该节点的节点；

针对所述每个节点，将该节点的各候选父节点中面积最小的候选父节点，确定为该节点的最优父节点；

在所述原始图元树中，将该节点从原始父节点下，移至相应的最优父节点下。

13.如权利要求10所述的装置，其特征在于，所述调整单元用于：

遍历所述原始图元树，针对所述原始图元树中的每一叶子节点，将该叶子节点，以及与该叶子节点具有相连、相交或包含关系的各叶子节点，组成相应的合并组；

在所述原始图元树中，确定每一合并组的父节点；

在所述原始图元树中，将每一合并组中的各叶子节点移至相应的父节点下。

14.一种控制设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-8任一项所述的方法的步骤。

15.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1～8任一所述方法的步骤。

Images