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

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

【技术实现步骤摘要】
一种交互界面搭建方法、装置、电子设备及存储介质


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

技术介绍

[0002]目前针对程序、网页等交互界面，通常会提供低代码的界面设计平台，以方便非开者自行设计满足需求的交互界面。
[0003]在这类界面设计平台中，往往可以提供相对固定、交互逻辑简单的页面模板，以供设计者进行选择。
[0004]但是，由于模板及交互逻辑的设计粒度较大，导致用户在进行页面设计时，页面样式与交互逻辑相对固定，降低了界面设计平台的设计自由度。

技术实现思路

[0005]本申请的目的在于提供一种交互界面搭建方法、装置、电子设备及存储介质，以提供较为灵活的页面设计逻辑，提高设计自由度。
[0006]为了实现上述目的，本申请实施例采用的技术方案如下：
[0007]第一方面，本申请实施例提供一种交互界面搭建方法，包括：响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。
[0008]第二方面，本申请实施例提供一种交互界面搭建装置，输入输出模块，用于响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；处理模块，用于当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；所述输入输出模块，还用于根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。
[0009]第三方面，本申请实施例提供一种电子设备，包括：存储器，用于存储一个或多个程序；处理器；当所述一个或多个程序被所述处理器执行时，实现第一方面所述的交互界面搭建方法。
[0010]第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现第一方面所述的交互界面搭建方法。
[0011]相对于现有技术，本申请实施例所提供的一种交互界面搭建方法、装置、电子设备及存储介质，通过根据当前位置关系确定被选组件与其他组件的当前层级关系；进而识别当前层级关系，若当前层级关系为同级关系时，根据当前位置关系确定被选组件是否与第一预设布局信息匹配。从而对使用者预期的被选组件的设计意图是否与模板预设的布局信息是否冲突进行识别，当发现存在冲突时，即被选组件与第一预设布局信息不匹配。则对布局信息进行更新，即生成第二父组件。进而基于该第二父组件，将被选组件与其他组件作为第二父组件的子组件。最终根据第二父组件对应的第二预设布局信息，在画布界面中显示被选组件与其他组件的最终预览示意图。从而避免使用者首先需要理解各个组件的逻辑位置关系，进而再手动对发生冲突的组件进行调整。从而通过构建父组件以及匹配的预设布局信息，保证使用者的设计预期与最终预览示意图的结果一致，从而提高处理效率与使用的自由度，降低使用门槛。
[0012]为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
[0013]为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它相关的附图。
[0014]图1A为现有技术的一种交互界面示意图；
[0015]图1B为现有技术的另一种交互界面示意图；
[0016]图1C为现有技术的另一种交互界面示意图；
[0017]图1D为现有技术的另一种交互界面示意图；
[0018]图2为本专利技术实施例提供的一种界面设计平台的架构示意图；
[0019]图3为本申请实施例提供的一种电子设备的结构示意图；
[0020]图4为本专利技术实施例提供的一种交互界面搭建方法的流程示意图；
[0021]图5为本方案实施例提供的一种交互界面示意图；
[0022]图6为本方案实施例提供的另一种交互界面示意图；
[0023]图7为本方案实施例提供的另一种交互界面示意图；
[0024]图8为本方案实施例提供的另一种交互界面示意图；
[0025]图9为本方案实施例提供的另一种交互界面搭建方法的流程示意图；
[0026]图10A为本方案实施例提供的另一种交互界面示意图；
[0027]图10B为本方案实施例提供的另一种交互界面示意图；
[0028]图10C为本方案实施例提供的另一种交互界面示意图；
[0029]图10D为本方案实施例提供的另一种交互界面示意图；
[0030]图11为本方案实施例提供的一种交互界面搭建方法的信令交互示意图；
[0031]图12为本方案实施例提供的另一种交互界面搭建方法的信令交互示意图；
[0032]图13为本方案实施例提供的另一种交互界面搭建方法的流程示意图；
[0033]图14A为本方案实施例提供的另一种交互界面示意图；
[0034]图14B为本方案实施例提供的另一种交互界面示意图；
[0035]图15为本方案实施例提供的另一种交互界面搭建方法的流程示意图；
[0036]图16为本方案实施例提供的一种交互界面搭建方法的信令交互示意图；
[0037]图17为本专利技术实施例提供的一种界面设计平台的示意图；
[0038]图18为本专利技术实施例提供的一种基于界面设计平台的发布示意图；
[0039]图19为本专利技术实施例提供的一种交互界面搭建装置的示意图。
具体实施方式
[0040]为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种交互界面搭建方法，其特征在于，包括：响应用户的组件选择操作，在画布界面显示被选组件的预览示意图；当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系；根据所述当前位置关系确定所述被选组件与所述其他组件的当前层级关系；若所述当前层级关系为同级关系时，根据所述当前位置关系确定所述被选组件是否与第一预设布局信息匹配；所述第一预设布局信息与所述其他组件所属第一父组件对应；所述第一预设布局信息表征第一类组件排列方式；若所述被选组件与第一预设布局信息不匹配，则生成第二父组件，将所述被选组件与所述其他组件作为所述第二父组件的子组件；根据所述第二父组件对应的第二预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图；所述第二预设布局信息表征第二类组件排列方式。2.如权利要求1所述的方法，其特征在于，还包括：若所述被选组件与第一预设布局信息匹配，根据所述第一预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图。3.如权利要求1所述的方法，其特征在于，还包括：若所述当前层级关系为父子关系时，将所述其他组件作为被选组件的第三父组件，并根据所述第三父组件对应的第三预设所述布局信息，在所述画布界面中显示所述被选组件与所述其他组件的最终预览示意图。4.如权利要求1所述的方法，其特征在于，在响应用户的组件选择操作，在画布界面显示被选组件的预览示意图的步骤之后，还包括：在所述组件选择操作执行中，获得所述被选组件与所述画布界面中其他组件的过程位置关系；根据所述过程位置关系确定所述被选组件与所述其他组件的过程层级关系；在控件树交互界面显示表征所述过程层级关系的过程节点信息。5.如权利要求4所述的方法，其特征在于，在所述组件选择操作执行中，获得所述被选组件与所述画布界面中其他组件的过程位置关系的步骤，包括：获得所述组件选择操作的组件过程位置信息，所述当前位置信息表征所述被选组件的过程位置；缓存所述组件过程位置信息；根据所述组件过程位置信息与所述其他组件的位置信息，确定所述过程位置关系；所述当所述组件选择操作结束时，确认所述被选组件与所述画布界面中其他组件的当前位置关系的步骤，包括：当所述组件选择操作结束时，获得所述组件选择操作的组件当前位置信息；判断所述组件当前位置信息是否命中所述组件过程位置信息；若是，则根据所述组件过程位置信息与所述其他组件的位置信息，确定所述当前位置关系；若否，则根据所述组件当前位置信息与所述其他组件的位置信息，确定所述当前位置
关系。6.如权利要求5所述的方法，其特征在于，还包括：当所述组件选择操作结束时，将所述控件树交互界中的过程节点信息更新为当前节点信息，所述当前节点信息表征所述当前层级关系。7.如权利要求1所述的方法，其特征在于，还包括：在所述控件树交互界面显示表征所述当前层级关系的当前节点信息；所述当前节点信息包含被选节点与至少一个其他节点；所述被选节点与所述被选组件对应；所述其他节点与所述其他组件对应；响应用户的节点更新操作，在所述控件树交互界面显示表征更新层级关系的更新节点信息；所述更新节点信息包含所述被选节...

【专利技术属性】
技术研发人员：钟英常，
申请(专利权)人：广州虎牙信息科技有限公司，
类型：发明
国别省市：