[发明专利]一种交互界面搭建方法、装置、电子设备及存储介质

说明书

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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