CN115794091A - 一种交互界面搭建方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提出一种交互界面搭建方法、装置、电子设备及存储介质，通过根据当前位置关系确定被选组件与其他组件的当前层级关系；若当前层级关系为同级关系时，确定被选组件是否与第一预设布局信息匹配。从而对使用者预期的被选组件的设计意图是否与模板预设的布局信息冲突进行识别，当发现存在冲突时，则对布局信息进行更新。将被选组件与其他组件作为第二父组件的子组件。在画布界面中显示被选组件与其他组件的最终预览示意图。从而避免使用者首先需要理解各个组件的逻辑位置关系，再手动进行调整。从而通过构建父组件与预设布局信息，从而提高处理效率与使用的自由度，降低使用门槛。

Description

一种交互界面搭建方法、装置、电子设备及存储介质

技术领域

本申请涉及人机交互领域，具体而言，涉及一种交互界面搭建方法、装置、电子设备及存储介质。

背景技术

目前针对程序、网页等交互界面，通常会提供低代码的界面设计平台，以方便非开者自行设计满足需求的交互界面。

在这类界面设计平台中，往往可以提供相对固定、交互逻辑简单的页面模板，以供设计者进行选择。

但是，由于模板及交互逻辑的设计粒度较大，导致用户在进行页面设计时，页面样式与交互逻辑相对固定，降低了界面设计平台的设计自由度。

发明内容

本申请的目的在于提供一种交互界面搭建方法、装置、电子设备及存储介质，以提供较为灵活的页面设计逻辑，提高设计自由度。

为了实现上述目的，本申请实施例采用的技术方案如下：

第一方面，本申请实施例提供一种交互界面搭建方法，包括：响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。

第二方面，本申请实施例提供一种交互界面搭建装置，输入输出模块，用于响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；处理模块，用于当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；所述输入输出模块，还用于根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。

第三方面，本申请实施例提供一种电子设备，包括：存储器，用于存储一个或多个程序；处理器；当所述一个或多个程序被所述处理器执行时，实现第一方面所述的交互界面搭建方法。

第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现第一方面所述的交互界面搭建方法。

相对于现有技术，本申请实施例所提供的一种交互界面搭建方法、装置、电子设备及存储介质，通过根据当前位置关系确定被选组件与其他组件的当前层级关系；进而识别当前层级关系，若当前层级关系为同级关系时，根据当前位置关系确定被选组件是否与第一预设布局信息匹配。从而对使用者预期的被选组件的设计意图是否与模板预设的布局信息是否冲突进行识别，当发现存在冲突时，即被选组件与第一预设布局信息不匹配。则对布局信息进行更新，即生成第二父组件。进而基于该第二父组件，将被选组件与其他组件作为第二父组件的子组件。最终根据第二父组件对应的第二预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。从而避免使用者首先需要理解各个组件的逻辑位置关系，进而再手动对发生冲突的组件进行调整。从而通过构建父组件以及匹配的预设布局信息，保证使用者的设计预期与最终预览示意图的结果一致，从而提高处理效率与使用的自由度，降低使用门槛。

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

附图说明

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

图1A为现有技术的一种交互界面示意图；

图1B为现有技术的另一种交互界面示意图；

图1C为现有技术的另一种交互界面示意图；

图1D为现有技术的另一种交互界面示意图；

图2为本发明实施例提供的一种界面设计平台的架构示意图；

图3为本申请实施例提供的一种电子设备的结构示意图；

图4为本发明实施例提供的一种交互界面搭建方法的流程示意图；

图5为本方案实施例提供的一种交互界面示意图；

图6为本方案实施例提供的另一种交互界面示意图；

图7为本方案实施例提供的另一种交互界面示意图；

图8为本方案实施例提供的另一种交互界面示意图；

图9为本方案实施例提供的另一种交互界面搭建方法的流程示意图；

图10A为本方案实施例提供的另一种交互界面示意图；

图10B为本方案实施例提供的另一种交互界面示意图；

图10C为本方案实施例提供的另一种交互界面示意图；

图10D为本方案实施例提供的另一种交互界面示意图；

图11为本方案实施例提供的一种交互界面搭建方法的信令交互示意图；

图12为本方案实施例提供的另一种交互界面搭建方法的信令交互示意图；

图13为本方案实施例提供的另一种交互界面搭建方法的流程示意图；

图14A为本方案实施例提供的另一种交互界面示意图；

图14B为本方案实施例提供的另一种交互界面示意图；

图15为本方案实施例提供的另一种交互界面搭建方法的流程示意图；

图16为本方案实施例提供的一种交互界面搭建方法的信令交互示意图；

图17为本发明实施例提供的一种界面设计平台的示意图；

图18为本发明实施例提供的一种基于界面设计平台的发布示意图；

图19为本发明实施例提供的一种交互界面搭建装置的示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对于现有技术提供的界面设计平台，例如，现有的低代码平台，其提供的画布能力，逻辑与控制粒度相对固定，对于非开发者的普通使用者来说，当在该平台进行界面设计时，页面样式与交互逻辑相对固定，降低了设计的自由度。

而为了获得粒度更细的设计结果，需要使用者使用一些较为复杂的设置流程，才能实现预期的设计效果。甚至需要使用者具备一定的代码设计能力，以达到设计预期，从而大大降低了处理效率，提高了使用类似界面设计平台的门槛。

下面以具体示例，对现有技术的操作流程进行说明，以展示其使用过程中的问题。图1A为现有技术的一种交互界面示意图，参见图1A，该界面设计平台包含：画布10与模板列表11；

其中，该画布10用于展示界面设计的预览图，例如，该画布10当前展示了已经被选择的组件A的预览图；

模板列表11，可以包含用于进行设计的各种工具，例如画图工具、按键样例列表、组件列表等；参见该图1A，该模板列表11显示了组件列表，该组件列表包含：组件A、组件B、组件C以及组件D，供使用者选择所需的组件进行设计。

其中，对于每一个被选择组件来说，其在画布显示的同时，具有一个预设布局信息，以图1A中画布所显示的组件A为例，其在画布10中显示预览图时，可以被理解其被置于一个父组件102内，该父组件102可以被显示在画布中10，也可以不进行显示。

该父组件102作为容器，置于其中的子组件之间应具备一定的排布逻辑。例如，该父组件102中的子组件从左向右排布，下一个子组件应位于前一个子组件右上角且紧贴前一个子组件的位置上，则进一步的，当有新的组件被用户基于组件选择操作，拖拽至画布10中，且该组件与已存在的组件A的层级关系为同级关系(即彼此不为父子组件)时，则当用户完成组件选择操作时，该组件会被显示在预览图中位置101上。

需要说明的是，对于上述位置101，在使用者未针对组件进行操作时，该位置101的信息可以不在画布10中进行显示。本方案下述方案中，交互界面示意图中的信息，在实际产品中，在使用者未操作的状态下，可以基于实际需求显示或不显示。本方案示意图中的信息，仅作为示例进行说明。

具体的，可以结合使用者具体的交互过程进行说明，在图1A的基础上，图1B为现有技术的另一种交互界面示意图，参见图1B，当使用者所控制的光标20点选了模板列表11中的组件B，并将其拖拽至画布10的位置103上。如果使用者松开光标20，即当用户完成组件选择操作，则此时，预览图中被选择的组件B并不会显示在位置103上，而是如图1C所示，基于前文所述的预设布局信息，被显示在位置101处。

显然，经过图1A、图1B至图1C的交互流程，用户希望其设计的界面中，组件B作为组件A的兄弟组件，显示在组件A的下方。然而若该组件A所属的父组件102的预设布局信息定义为子组件之间从左向右排布。当其排布方式与使用者意图发生冲突时，该界面设计平台的处理流程必须遵循预设布局信息，将组件B显示在位置103上。从而导致了使用者的操作结果并非使用者视觉的直观效果。

进一步的，在图1A的基础上，图1D为现有技术的另一种交互界面示意图，参见图1D，如果使用者如果想将组件B显示在组件A的下方，需要使用者手动新建一个新的父组件104，涵盖组件A，并且其新的预设布局信息定义为子组件之间从上向下排布。而此时，使用者重新将模板列表11中的组件B拖拽至组件A的下方后，当用户完成组件选择操作，此时该组件B会显示在位置105处。

综上所述，可知对于目前的界面设计平台，当使用者的设计意图与原有组建的预设布局信息出现矛盾时，该方案会基于原有的预设布局信息显示结果，而该结果并非使用者所希望得到。导致使用者首先理解各个组件的逻辑层级关系，进而必须手动调整组件与预设布局信息，重新进行设计，才能够得到预期的设计效果。意味着，当被设计的界面包含复杂的组件组合与层级关系时，每当设计者的意图与预设布局信息出现矛盾，都需要进行上述的人为调整。大大降低了处理效率，拉大了该设计平台的使用门槛。

为了解决上述问题，本方案核心的改进点为通过对“使用者的设计意图与原有组建的预设布局信息出现矛盾”的情况进行识别，从而在该条件下由设计平台生成符合设计者意图的父组件，在不需要使用者手动设置的基础上，显示符合使用者预期的预览图，进而提高处理效率，降低使用门槛。

为了实现上述功能，下面提供一种可能的实现方式，对本方案中涉及的界面设计平台的架构逻辑进行示例性说明。具体的，图2为本发明实施例提供的一种界面设计平台的架构示意图，参见图2，该界面设计平台包含：交互层30、逻辑层31与渲染层32；

其中，交互层30用于响应使用者交互的模块,需要处理拖拽、缩放等动作,实时绘制位置线、参考线等,展示菜单栏等信息；

逻辑层31，可以基于交互层30获得使用者交互，判断是否需要生成父组件，即本方案对于如何识别“使用者的设计意图与原有组件的预设布局信息出现矛盾”，需要交互层30与逻辑层31配合实现。

渲染层32，用于负责界面渲染，例如画布组件的渲染,不涉及使用者的交互操作,主要需要处理props、data、event的传递和更新用户配置的数据。

进一步的，该界面设计平台可以被配置在电子设备上，以便用户通过该电子设备执行相应的程序，以执行下文各个示例的方法流程，从而实现使用该界面设计平台的对应功能。请参阅图3，图3为本申请实施例提供的一种电子设备的结构示意图。电子设备40包括存储器401、处理器402和通信接口403；

该存储器401、处理器402和通信接口403相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器401可用于存储软件程序及模块，处理器402通过执行存储在存储器401内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口403可用于与其他设备进行信令或数据的通信。

其中，存储器401可以是但不限于，随机存取存储器(RandomAccessMemory，RAM)，只读存储器(ReadOnlyMemory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除只读存储器(ErasableProgrammableRead-OnlyMemory，EPROM)，电可擦除只读存储器(ElectricErasableProgrammableRead-OnlyMemory，EEPROM)等。

处理器402可以是一种集成电路芯片，具有信号处理能力。该处理器402可以是通用处理器，包括中央处理器(CentralProcessingUnit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(DigitalSignalProcessing，DSP)、专用集成电路(Application SpecificIntegratedCircuit，ASIC)、现场可编程门阵列(Field－ProgrammableGateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

可以理解，图3所示的结构仅为示意，电子设备40还可包括比图1中所示更多或者更少的组件，或者具有与图3所示不同的配置。图3中所示的各组件可以采用硬件、软件或其组合实现。例如，该电子设备40包含I/O单元，例如，鼠标/键盘/触控屏等，用于获得使用者的交互操作。

可选地，该电子设备，可以为但不限于：智能手机、平板、个人电脑、笔记本等设备。

下面结合具体示例，对本方案可能的实现方式进行说明，具体的，图4为本发明实施例提供的一种交互界面搭建方法的流程示意图，该方法可以被置于如图3所示电子设备中的界面设计平台实现，该界面设计平台的架构可以采用图2所示的方案，参见图4，该方法包括：

步骤500、响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；

具体的，图5为本方案实施例提供的一种交互界面示意图，参见图5的(a)部分，使用者利用光标20从菜单栏(图中未示出)中拖拽一个组件B到画布10中，此时会在该画布10的界面显示该组件B，即被选组件的预览示意图。

步骤504、当组件选择操作结束时，确认被选组件与画布界面中其他组件的当前位置关系；

具体的，继续参加图5的(b)部分，当光标20将组件B拖拽至的(b)中位置，并且使用者松开光标20，则确认其与画布界面中组件A当前位置关系为：组件B位于组件A下方，且两者无重叠。

步骤505、根据当前位置关系确定被选组件与其他组件的当前层级关系；

继续参见上述示例，当组件B位于组件A下方，且两者的在画布10中的位置无重叠，两者的当前层级关系为同级关系，即两者为兄弟组件。

步骤506、若当前层级关系为同级关系时，根据当前位置关系确定被选组件是否与第一预设布局信息匹配；

其中，第一预设布局信息与其他组件所属第一父组件对应；第一预设布局信息表征第一类组件排列方式；

继续参加图5的(b)部分，对于组件A，其第一预设布局信息为：包含组件A的第一父组件/容器102中，子组件之间的第一类组件排列方式为：从左向右排布。即对于组件A新的兄弟组件，其预览图的位置位于101处。

步骤509、若被选组件与第一预设布局信息不匹配，则生成第二父组件，将被选组件与其他组件作为第二父组件的子组件；

继续参加图5的(b)部分，可知组件B的位置与第一预设布局信息不匹配。则此时原有的第一父组件102、第一预设布局信息并不符合使用者的需求。因此，结合图2，该逻辑层31可以生成新的第二父组件，例如，图5的(c)中的第二父组件105，该第二父组件105对应的第二预设布局信息中，子组件之间的第二类组件排列方式为：从上向下排布。

在一种可能的实现方式中，该第二父组件105与前文所述第一父组件102并不冲突，例如可以将该第二父组件105作为第一父组件102的子组件。或者，在另一种可能的实现方式中，在生成第二父组件105时，删除原有的第一父组件102。

步骤510、根据第二父组件对应的第二预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图；

继续参加图5的(d)部分，该组件B基于新的第二父组件105与第二预设布局信息，其在最终预览示意图中，被显示在了组件A的下方位置第二父组件105处。

本发明实施例提供的交互界面搭建方法，通过根据当前位置关系确定被选组件与其他组件的当前层级关系；进而识别当前层级关系，若当前层级关系为同级关系时，根据当前位置关系确定被选组件是否与第一预设布局信息匹配。从而对使用者预期的被选组件的设计意图是否与模板预设的布局信息是否冲突进行识别，当发现存在冲突时，即被选组件与第一预设布局信息不匹配。则对布局信息进行更新，即生成第二父组件。进而基于该第二父组件，将被选组件与其他组件作为第二父组件的子组件。最终根据第二父组件对应的第二预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。从而避免使用者首先需要理解各个组件的逻辑位置关系，进而再手动对发生冲突的组件进行调整。从而通过构建父组件以及匹配的预设布局信息，保证使用者的设计预期与最终预览示意图的结果一致，从而提高处理效率与使用的自由度，降低使用门槛。

可选地，对于本文中涉及的预设布局信息中的组件排列方式，其不仅可以限定组件之间的排列顺序，也可以对通过设置界面进行更细化的限定。例如，子组件之间的组件排列方式为：从上向下排布，且下一个子组件紧贴上一个子组件的下方靠左的位置，如图5的(d)中所示的组件B与组件A的排列方式；也可以为：从上向下排布，且下一个子组件与上一个子组件间隔设定距离，且下一个子组件居中设置。

对于上述组件排列方式，本实施例并不予以限定。其可以通过在界面设计平台的设置界面灵活设置，来实现使用者所需的要求。

上述示例展示了使用者拖拽的被选组件与第一预设布局信息不匹配时的处理流程，下面对于匹配的情况进行说明。继续参见图4，该方法，还包括：

步骤507、若被选组件与第一预设布局信息匹配，根据第一预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。

具体的，图6为本方案实施例提供的另一种交互界面示意图，参见图6的(a)部分，使用者利用光标20从菜单栏(图中未示出)中拖拽一个组件B到画布10中，此时会在该画布10的界面显示该组件B，即被选组件的预览示意图。相应的，组件A的第一父组件102，其子组件之间的第一类组件排列方式为：从左向右排布。即对于组件A新的兄弟组件，其预览图的位置位于101处。

进一步参见图6的(b)部分，若使用者利用光标20将组件B拖拽至101处，并松开光标20。则此时，组件B与第一预设布局信息匹配。因此图6的(b)部分即可以理解为组件B与组件A的最终预览示意图。

可选地，上述实施例，以被选组件与其他组件为同级关系的情况进行了说明。对于使用者拖拽的被选组件，其也存在将被选组件设置为其他组件的子组件情况，下面针对该情况进行说明，继续参见图4，该方法，还包括：

步骤508、若当前层级关系为父子关系时，将其他组件作为被选组件的第三父组件，并根据第三父组件对应的第三预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。

具体的，图7为本方案实施例提供的另一种交互界面示意图，参见图7的(a)部分，使用者利用光标20从菜单栏(图中未示出)中拖拽一个组件B到画布10中，此时会在该画布10的界面显示该组件B，即被选组件的预览示意图。

进一步的，参见图7的(b)部分。使用者利用光标20继续拖拽该组件B至与组件A重叠，并松开光标20。则根据当前层级关系，可以确定组件B与组件A为父子关系，即组件B为组件A的子组件。

此时，将该组件A作为第三父组件，其可以具备第三预设布局信息，例如，该第三预设布局信息指示根据组件B当前的位置进行显示，则参见图7的(b)的排布形式即为最终预览示意图；又或者，该第三预设布局信息对应的第三类组件排列方式为：组件A内子组件从左上角，从左向右依次排布，则参见图7的(c)，当松开光标20时，该组件B在最终预览示意图会显示在位置106处。

可选地，对于某一些组件，其由于自身组件属性的限制，其并不能够作为其他组件的父组件。此时本方案还提供一种可能的实现方式，具体的，图8为本方案实施例提供的另一种交互界面示意图，参见图8的(a)部分，使用者利用光标20从菜单栏(图中未示出)中拖拽一个组件B到画布10中，此时会在该画布10的界面显示该组件B，即被选组件的预览示意图。

进而，参见图8的(b)部分。使用者利用光标20继续拖拽该组件B至与组件A重叠，并松开光标20。则根据当前层级关系，确定组件B与组件A为父子关系，即组件B为组件A的子组件。但此时，该组件A的组件属性不允许组件A作为其他组件的父组件；

则参见上文步骤509与步骤510，可以针对组件A生成新的父组件，即图8的(c)所示父组件102，其对应的预设布局信息中，子组件之间的列方式为：从左向右排布。则当光标20松开时，组件B实际的显示位置在101处，则对应的最终预览示意图如图8的(d)所示。

参见上文可知，在用户进行组件选择操作的过程中，随着被选组件在画布中位置关系的变化，可能会涉及大量的被选组件与其他组件的层级关系变化。为了能够更加清楚地体现组件之间地层级关系，本方案引入控件树交互界面，用于体现层级关系。

而对于画布与控件树交互界面，在用户交互过程中的信息关联，可以通过多种方式实现，一种方式为：用户通过拖拽画布中的组件，当其在画图界面中与其他组件的层级关系发生变化时，这种变化也会在控件树交互界面中体现为位置关系的变化；另一种方式为：用户通过拖拽控件树交互界面中节点信息，当节点之间的层级信息变化时，画布的预览示意图也会随之变化。

下面，对于第一种方式进行示例性说明，具体的，在图4的基础上，图9为本方案实施例提供的另一种交互界面搭建方法的流程示意图，该方法在步骤500之后，还包括：

步骤501、在组件选择操作执行中，获得被选组件与画布界面中其他组件的过程位置关系；

可选地，图10A为本方案实施例提供的另一种交互界面示意图，参见图10A，该界面设计平台包含画布10与控件树交互界面12；为了更好说明画布10与控件树交互界面12在交互过程中的关系，以图10A中包含的组件与节点信息进行示例性说明。

具体的，参见图10A，该画布10显示了7个组件，即组件1，该组件1包含两个子组件：组件1-1与组件1-2，且两个子组件的基于预设布局信息，从左向右排布；组件1-1包含两个子组件：组件A与组件B，且两个子组件的基于预设布局信息，从上向下排布；组件1-2包含两个子组件：组件C与组件D，且两个子组件的基于预设布局信息，从上向下排布。相应的，表征画布10中各个组件的节点信息，以控件树的形式在控件树交互界面12显示，其除了显示每个组件对应的节点信息外，还包括各个节点之间的层级关系。

结合步骤501、在图10A基础上，图10B为本方案实施例提供的另一种交互界面示意图，参见图10B，当用户的光标20选择组件B，并向组件D下的组件B虚框位置拖拽时，此时，用户的光标20并未松开，可以被理解为处于“在组件选择操作执行中”的状态。此时组件B与其他组件的位置关系发生了变化：即组件B位于组件A下方，且紧贴组件A，变为了组件B位于组件D下方，且紧贴组件D，即如图10C所示。

步骤502、根据过程位置关系确定被选组件与其他组件的过程层级关系；

具体的，继续参见图10C，对于当组件B被拖拽至组件D下方时，此时的层级关系发生了变化：组件B从组件1-1的子组件变更给为了组件1-2的子组件，由于此时使用者的光标20并未结束拖拽，因此，该层级关系可以被定义为过程层级关系。

步骤503、在控件树交互界面显示表征过程层级关系的过程节点信息。

具体的，继续参见图10C，控件树交互界面中组件B的节点信息从组件1-1的子组件变更为了组件1-2的子组件。

继续参见图9，步骤511、当组件选择操作结束时，将控件树交互界中的过程节点信息更新为当前节点信息；

其中，当前节点信息表征当前层级关系。在图10C基础上，图10D为本方案实施例提供的另一种交互界面示意图，参见图10D，若光标20继续拖拽组件B至组件C内，并且该光标20松开，即可以理解为“组件选择操作结束”。则当前层级关系为组件B为组件C的子组件，则应该根据该当前层级关系对控件树交互界中的过程节点信息进行更新，更新后的节点信息为当前节点信息，即组件B对应的节点信息为组件C的子组件。

下面结合图2所示交互层30、逻辑层31、渲染层32以及控件树33，对上述示例中通过使用者拖拽画布中的组件，进而联动控件树交互界的交互流程进行说明，具体的，图11为本方案实施例提供的一种交互界面搭建方法的信令交互示意图，参见图11，该信令交互流程包括：

步骤600、交互层30向逻辑层31转发组件选择操作；

该组件选择操作可以被理解为上述示例中，点选、拖拽组件至画布中的操作。

步骤601、逻辑层31向渲染层32发送更新预览示意图的指示；

具体的，逻辑层31可以执行上述示例中步骤500的动作，以实现步骤601；进而渲染层32响应逻辑层31的指示，最终将更新后的预览示意图通过交互层30进行显示，即上文示例所述画布中的预览示意图。

需要说明的是，由于步骤601，在步骤600后，优先向渲染层32发送更新预览示意图的指示，因此能够有效降低用户操作与观看到画布中预览示意图之间的延迟，即先响应用户操作，避免卡顿。

步骤602、交互层30告知逻辑层31操作结束；

具体的，操作结束只上述组件选择操作完成，例如，使用者松快鼠标按键或手指离开触摸屏，从而使得上文所述光标20松开。

步骤603、逻辑层31执行父组件处理逻辑；

具体的，该父组件处理逻辑指，判断使用者的组件选择操作，是否涉及针对被选组件进行生成父组件的流程，该流程可以通过前文步骤504、步骤505、步骤506实现。

步骤604、逻辑层31确认最终预览示意图；

此时，在未进行渲染前，逻辑层31确认待现实的最终预览示意图。

步骤605、逻辑层31指示渲染层32更新绘制。

具体的，该渲染层32基于该指示，绘制前文所述最终预览示意图。该流程可以通过前文步骤507、步骤508、步骤510实现。

步骤606、渲染层32指示控件树33更新；

具体的，该控件树33指代上文所述控件树交互界面对应的节点信息及层级关系。进而在控件树33完成更新后，通过渲染层32与逻辑层31，响应至交互层30。从而实现上述步骤511的效果。

进一步的，参见图11，其中“可循环”部分，是可以基于使用者的组件选择操作，随时被触发并循环执行的。下面针对该“可循环”部分提供一种可能的实现方式，具体的，在图11的基础上，图12为本方案实施例提供的另一种交互界面搭建方法的信令交互示意图，参见图11，该信令交互流程，还包括：

步骤607、逻辑层31获得组件过程位置信息；

步骤608、逻辑层31处理虚拟的预览示意图；

对于步骤607至步骤608，可以理解为在显示预览示意图前，确定被选组件与画布界面中其他组件的过程位置关系，即上述示例中的步骤501；

具体的，在获得组件选择操作的组件过程位置信息后，可以基于根据组件过程位置信息与其他组件的位置信息，确定过程位置关系。

即根据前文过程位置关系与当前层级关系，指示渲染层32更新预览示意图中的组件；

步骤610、渲染层32指示控件树33更新；

具体的，该控件树33指代上文所述控件树交互界面对应的节点信息及层级关系。进而在控件树33完成更新后，通过渲染层32与逻辑层31，响应至交互层30。从而实现上述步骤503的效果。

步骤611、更新缓存；

将上述组件过程位置信息存储至缓存。该组件过程位置信息可以为基于LRU算法设计了一种双向链表(位置信息)+哈希表(存储+查找)的缓存形式。

可选地，对于图12的信令交互流程，子执行完步骤611后，可以继续执行图11中的步骤602。

需要说明的是，当图11中步骤602的操作结束，即组件选择操作结束时，此时可以利用上述缓存中的组件过程位置信息，来进一步降低数据反复缓存对于资源的占用，具体的，获得组件选择操作的组件当前位置信息；

进而，对于上述图9中的步骤504，一种可能的实现方式为：

判断组件当前位置信息是否命中组件过程位置信息；

若是，则根据组件过程位置信息与其他组件的位置信息，确定当前位置关系；

若否，则根据组件当前位置信息与其他组件的位置信息，确定当前位置关系。

可选地，判断组件当前位置信息是否命中组件过程位置信息的标准，可以为预设的距离阈值，若组件当前位置信息与组件过程位置信息的距离小于该距离阈值，则意味着组件当前位置信息命中组件过程位置信息。从而在命中的情况下，不用反复缓存相应的组件位置信息，从而降低了对缓存资源的占用。

对于前文所述画布与控件树交互界面，在用户交互过程中的信息关联，下面针对第二种方式，即“用户通过拖拽控件树交互界面中节点信息，当节点之间的层级信息变化时，画布的预览示意图也会随之变化”的情况，进行示例性说明。

具体的，图13为本方案实施例提供的另一种交互界面搭建方法的流程示意图，参见图13，该方法，包括：

步骤700、在控件树交互界面显示表征当前层级关系的当前节点信息；

具体的，图14A为本方案实施例提供的另一种交互界面示意图，参见图14A，该画布10显示了7个组件，即组件1，该组件1包含两个子组件：组件1-1与组件1-2，且两个子组件的基于预设布局信息，从左向右排布；组件1-1包含两个子组件：组件A与组件B，且两个子组件的基于预设布局信息，从上向下排布；组件1-2包含两个子组件：组件C与组件D，且两个子组件的基于预设布局信息，从上向下排布。

相应的，表征画布10中各个组件的节点信息，以控件树的形式在控件树交互界面12显示，其除了显示每个组件对应的当前节点信息外，还包括各个节点之间的当前层级关系。

步骤701、响应用户的节点更新操作，在控件树交互界面显示表征更新层级关系的更新节点信息；

继续参见图14A，当用户通过光标20点选控件树交互界面12中的节点“组件B”，即被选节点；而上述“组件1”、“组件1-1”、“组件A”等即为其他节点。而该节点“组件B”与左侧画布10中的组件B对应，其他节点与左侧画布10中的其他组件一一对应。

进一步的，当用户通过光标20拖拽该节点“组件B”至控件树交互界面12中虚框位置时，可以理解发生了节点更新操作。在图14A的基础上，图14B为本方案实施例提供的另一种交互界面示意图，参见图14B，节点“组件B”新的位置即对应上述更新节点信息，其同时构成了新的更新层级关系，即“组件B”从原节点“组件1-1”的子节点，变更为了节点“组件1-2”的子组件；

可选地，此时对于画布10，其预览示意图也可以基于组件B的过程层级关系的变化随之更新。

步骤706、当节点更新操作结束时，根据更新层级关系确定更新位置关系；

进而，当光标20松开时，可以被理解为“节点更新操作结束”，则上述更新层级关系确定，进而画布10中的组件B的位置关系发生了更新，即更新位置关系组件B与组件1-1、组件1-2、组件A、组件C及组件D等组件的更新位置关系，此时，组件B成为组件1-2的子组件；

步骤707、根据更新位置关系确定第四预设布局信息；

进而，基于上述更新位置关系：“组件B成为组件1-2的子组件”，此时，组件1-2的第四预设布局信息为：其子组件从上向下依次排布，进而在画布10中，该组件B应位于组件D的下方。

步骤708、根据第四预设布局信息，在画布界面中显示被选组件与至少一个其他组件的最终预览示意图。

进而基于707的第四预设布局信息，画布10的界面中，将组件B显示在组件D的下方。

本发明实施例提供的交互界面搭建方法，通过利用用户针对控件树交互界面中节点的调整，实现联动的对画布中组件的位置关系的更新，进而更新预览示意图，进一步简化设计流程，提高使用的灵活度。

可选地，对于节点更新操作未结束时，可以基于实时的过程信息，提供对应可能的实现方式，具体的，在图13的基础上，图15为本方案实施例提供的另一种交互界面搭建方法的流程示意图，参见图15，该方法，在步骤705之前，还包括：

步骤702、在节点更新操作执行中，获得表征更新过程层级关系的更新过程节点信息；

其中，更新过程节点信息包含被选节点与至少一个其他节点；

步骤703、根据更新过程层级关系确定更新过程位置关系；

更新过程位置关系为被选组件与至少一个其他节点的更新过程位置关系；

步骤704、根据更新过程位置关系确定第五预设布局信息；

步骤705、根据第五预设布局信息，在画布界面中显示被选组件与至少一个其他组件的过程预览示意图。

具体的，结合图14B，当光标20未松开时，即可以被理解为处于“节点更新操作执行”的状态，则此时，节点“组件B”位于节点“组件1-2”下的子节点处，即上述更新过程节点信息。而相应的该更新过程位置关系即为画布10处，组件B与其他节点的变化的过程位置关系。基于图14B的示例，该第五预设布局信息与前文第四预设布局信息。除非使用者基于拖拽节点“组件B”至其他会引发节点信息变化的位置。

下面结合图2所示交互层30、逻辑层31、渲染层32以及控件树33，对上述示例中通过使用者拖拽控件树交互界中的节点，进而联动画布的交互流程进行说明，可以理解的是，对于本方案，该控件树33即“控件树交互界”可以为前文交互层30的一部分。具体的，图16为本方案实施例提供的一种交互界面搭建方法的信令交互示意图，参见图16，该信令交互流程包括：

步骤800、控件树33将节点更新操作发送至逻辑层31；

步骤801、逻辑层31确定节点过程位置信息；

具体的，前文步骤702的一种可能的实现方式中：获得组件选择操作对应的节点过程位置信息；节点过程位置信息表征被选节点的过程位置；

步骤802、逻辑层31处理虚拟的预览示意图；

其中，逻辑层31可以根据节点过程位置信息与其他节点的位置信息，确定更新过程层级关系，进而基于该更新过程层级关系确认，控件树交互界中的节点信息是否发生变化，从而在显示之前，确认虚拟的预览示意图。

步骤803、逻辑层31指示控件树33更新；

具体的，指示控件树33更新中的控件树交互界中的节点信息。由于此时节点更新操作未结束，因此具体的为更新过程节点信息。

进而控件树33进行响应。

步骤804、更新缓存；

与图12所述示例中的组件过程位置信类似，将节点过程位置信息存储至缓存。该节点过程位置信息也可以为基于LRU算法设计了一种双向链表(位置信息)+哈希表(存储+查找)的缓存形式。

步骤805、控件树33告知逻辑层31操作结束；

具体的，操作结束只上述节点更新操作完成，例如，使用者松快鼠标按键或手指离开触摸屏，从而使得上文所述光标20松开。

步骤806、逻辑层31指示渲染层32更新预览示意图。

具体的，该渲染层32基于该指示，绘制前文所述最终预览示意图。该流程可以通过前文步骤708实现。

步骤807、渲染层32指示控件树33更新；

具体的，该控件树33指代上文所述控件树交互界面对应的节点信息及层级关系。进而在控件树33完成更新后，通过渲染层32，响应至逻辑层31。

需要说明的是，当图16中步骤805的操作结束，即节点更新操作结束时，此时可以利用上述缓存中的节点过程位置信息，来进一步降低数据反复缓存对于资源的占用，具体的，获得节点更新操作的节点过程位置信息；

进而，在图13步骤706之前，还可以包括：

节点更新操作结束时，获得组件选择操作对应的节点位置信息；节点位置信息表征被选节点的当前位置；

判断节点位置信息是否命中节点过程位置信息；

若是，则根据节点过程位置信息与其他节点的位置信息，确定更新层级关系；

若否，则根据节点位置信息与其他节点的位置信息，确定更新层级关系。

可选地，判断节点位置信息是否命中节点过程位置信息的标准，可以为预设的距离阈值，若节点位置信息与节点过程位置信息的距离小于该距离阈值，则意味着节点位置信息命中节点过程位置信息。从而在命中的情况下，不用反复缓存相应的节点位置信息，从而降低了对缓存资源的占用。

基于上述实施例所示的方案，下面给出本方案一种可能的界面设计平台的实现方式，具体的，图17为本发明实施例提供的一种界面设计平台的示意图，参见图17，该界面设计平台包括：画布10、控件树交互界面12、设置界面14、组件列表界面13以及工具栏15；

其中，该画布10可以用于显示上述实施例中与画布相关的信息；

控件树交互界面12可以用于显示上述实施例中与控件树交互界面相关的信息；

组件列表界面13可以用于显示各种组件，例如按键“button”、图片“image”、文本“text”等；使用者可以基于光标从该组件列表界面13将特定的组件拖拽至画布10中；

设置界面14可以对组件的具体信息进行设置，例如前文所示的预设布局信息进行设置，例如，尺寸与布局、位置信息、背景颜色、外边距等；

工具栏15可以提供基本的操作工具，例如，退回、前进、保存等功能。

进而基于上述示例所提供的界面设计平台，用户可以基于其提供的组件列表界面、画布、控件树交互界面、设置界面及工具栏等功能，设计所需的界面。进而将相应的界面进行发布。可选地，图18为本发明实施例提供的一种基于界面设计平台的发布示意图，参见图18，该发布流程包括：

使用者通过上述示例中所述的画布，进行组件的选择与组合。

进而在组件的设计过程中，确定组件中涵盖的数据，例如：组件的名称、显示的文本内容、图案等；同时确定组件对应的事件，例如：点击、拖拽等，亦即赋予该组件与对应交互操作相关的功能。

当确定被选组件、数据和相应事件的组合后，该平台生成对应的代码，例如，Lizard/RN代码。

并且基于上述代码构建待发布的界面数据包。

最终将界面数据包进行发布。

具体的，上述界面数据包可以是程序交互界面的新版本，也可以是原有界面中新的插件界面，此处不与限定。

进一步的，基于上述实施例，本发明实施例还提供一种交互界面搭建装置，其可以用于执行上述示例的各个步骤，以实现相应的技术效果。具体的，图19为本发明实施例提供的一种交互界面搭建装置的示意图，参见图19，该装置90包括：输入输出模块900与处理模块901；输入输出模块900，用于响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；

处理模块901，用于当组件选择操作结束时，确认被选组件与画布界面中其他组件的当前位置关系；根据当前位置关系确定被选组件与其他组件的当前层级关系；若当前层级关系为同级关系时，根据当前位置关系确定被选组件是否与第一预设布局信息匹配；若被选组件与第一预设布局信息不匹配，则生成第二父组件，将被选组件与其他组件作为第二父组件的子组件；

输入输出模块900，还用于根据第二父组件对应的第二预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。

可选地，输入输出模块900，还用于：

若被选组件与第一预设布局信息匹配，根据第一预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。

若当前层级关系为父子关系时，将其他组件作为被选组件的第三父组件，并根据第三父组件对应的第三预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。

可选地，处理模块901，还用于在组件选择操作执行中，获得被选组件与画布界面中其他组件的过程位置关系；根据过程位置关系确定被选组件与其他组件的过程层级关系；

相应地，输入输出模块900，还用于在控件树交互界面显示表征过程层级关系的过程节点信息。

可选地，处理模块901，还用于获得组件选择操作的组件过程位置信息，当前位置信息表征被选组件的过程位置；缓存组件过程位置信息；根据组件过程位置信息与其他组件的位置信息，确定过程位置关系；

可选地，处理模块901，还用于当组件选择操作结束时，获得组件选择操作的组件当前位置信息；判断组件当前位置信息是否命中组件过程位置信息；若是，则根据组件过程位置信息与其他组件的位置信息，确定当前位置关系；若否，则根据组件当前位置信息与其他组件的位置信息，确定当前位置关系。

相应地，输入输出模块900，还用于当组件选择操作结束时，将控件树交互界中的过程节点信息更新为当前节点信息，当前节点信息表征当前层级关系。

可选地，输入输出模块900，还用于在控件树交互界面显示表征当前层级关系的当前节点信息；响应用户的节点更新操作，在控件树交互界面显示表征更新层级关系的更新节点信息；

相应地，处理模块901，还用于当节点更新操作结束时，根据更新层级关系确定更新位置关系；根据更新位置关系确定第四预设布局信息；

相应地，输入输出模块900，还用于根据第四预设布局信息，在画布界面中显示被选组件与至少一个其他组件的最终预览示意图。

可选地，处理模块901，还用于在节点更新操作执行中，获得表征更新过程层级关系的更新过程节点信息；根据更新过程层级关系确定更新过程位置关系；根据更新过程位置关系确定第五预设布局信息；

相应地，输入输出模块900，还用于根据第五预设布局信息，在画布界面中显示被选组件与至少一个其他组件的过程预览示意图。

可选地，处理模块901，还用于获得组件选择操作对应的节点过程位置信息；缓存节点过程位置信息；根据节点过程位置信息与其他节点的位置信息，确定更新过程层级关系；节点更新操作结束时，获得组件选择操作对应的节点位置信息；节点位置信息表征被选节点的当前位置；判断节点位置信息是否命中节点过程位置信息；若是，则根据节点过程位置信息与其他节点的位置信息，确定更新层级关系；若否，则根据节点位置信息与其他节点的位置信息，确定更新层级关系。

可选地，本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述示例所示的方法流程，以实现相应的技术效果。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

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

以上仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (12)

1.一种交互界面搭建方法，其特征在于，包括：

响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；

当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；

根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；

若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；

若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；

根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。

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

若所述被选组件与第一预设布局信息匹配，根据所述第一预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图。

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

若所述当前层级关系为父子关系时，将所述其他组件作为被选组件的第三父组件，并根据所述第三父组件对应的第三预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图。

4.如权利要求1所述的方法，其特征在于，在响应用户的组件选择操作，在画布界面显示被选组件的预览示意图的步骤之后，还包括：

在所述组件选择操作执行中，获得所述被选组件与所述画布界面中其他组件的过程位置关系；

根据所述过程位置关系确定所述被选组件与所述其他组件的过程层级关系；

在控件树交互界面显示表征所述过程层级关系的过程节点信息。

5.如权利要求4所述的方法，其特征在于，在所述组件选择操作执行中，获得所述被选组件与所述画布界面中其他组件的过程位置关系的步骤，包括：

获得所述组件选择操作的组件过程位置信息，所述当前位置信息表征所述被选组件的过程位置；

缓存所述组件过程位置信息；

根据所述组件过程位置信息与所述其他组件的位置信息，确定所述过程位置关系；

所述当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系的步骤，包括：

当所述组件选择操作结束时，获得所述组件选择操作的组件当前位置信息；

判断所述组件当前位置信息是否命中所述组件过程位置信息；

若是，则根据所述组件过程位置信息与所述其他组件的位置信息，确定所述当前位置关系；

若否，则根据所述组件当前位置信息与所述其他组件的位置信息，确定所述当前位置关系。

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

当所述组件选择操作结束时，将所述控件树交互界中的过程节点信息更新为当前节点信息，所述当前节点信息表征所述当前层级关系。

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

在所述控件树交互界面显示表征所述当前层级关系的当前节点信息；所述当前节点信息包含被选节点与至少一个其他节点；所述被选节点与所述被选组件对应；所述其他节点与所述其他组件对应；

响应用户的节点更新操作，在所述控件树交互界面显示表征更新层级关系的更新节点信息；所述更新节点信息包含所述被选节点与至少一个所述其他节点；

当所述节点更新操作结束时，根据所述更新层级关系确定更新位置关系；所述更新位置关系为所述被选组件与至少一个所述其他节点的更新位置关系；

根据所述更新位置关系确定第四预设布局信息；

根据所述第四预设布局信息，在所述画布界面中显示所述被选组件与至少一个所述其他组件的最终预览示意图。

8.如权利要求7所述的方法，其特征在于，在所述当所述节点更新操作结束时，根据所述更新层级关系确定更新位置关系的步骤之前，还包括：

在所述节点更新操作执行中，获得表征更新过程层级关系的更新过程节点信息；所述更新过程节点信息包含所述被选节点与至少一个所述其他节点；

根据所述更新过程层级关系确定更新过程位置关系；所述更新过程位置关系为所述被选组件与至少一个所述其他节点的更新过程位置关系；

根据所述更新过程位置关系确定第五预设布局信息；

根据所述第五预设布局信息，在所述画布界面中显示所述被选组件与至少一个所述其他组件的过程预览示意图。

9.如权利要求8所述的方法，其特征在于，在所述节点更新操作执行中，获得更新过程层级关系的步骤，包括：

获得所述组件选择操作对应的节点过程位置信息；所述节点过程位置信息表征所述被选节点的过程位置；

缓存所述节点过程位置信息；

根据所述节点过程位置信息与所述其他节点的位置信息，确定所述更新过程层级关系；

在所述当所述节点更新操作结束时，根据所述更新层级关系确定更新位置关系的步骤之前，还包括：

所述节点更新操作结束时，获得所述组件选择操作对应的节点位置信息；所述节点位置信息表征所述被选节点的当前位置；

判断所述节点位置信息是否命中所述节点过程位置信息；

若是，则根据所述节点过程位置信息与所述其他节点的位置信息，确定所述更新层级关系；

若否，则根据所述节点位置信息与所述其他节点的位置信息，确定所述更新层级关系。

10.一种交互界面搭建装置，其特征在于，

输入输出模块，用于响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；

处理模块，用于当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；

所述输入输出模块，还用于根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。

11.一种电子设备，其特征在于，包括：

存储器，用于存储一个或多个程序；

处理器；

当所述一个或多个程序被所述处理器执行时，实现如权利要求1-9中任一项所述的方法。

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

Images