CN114942817A - 设计界面的展示方法、装置、电子设备、存储介质及产品 - Google Patents

Abstract

本公开提供了一种设计界面的展示方法、装置、电子设备、存储介质及产品，涉及应用界面领域，尤其涉及应用展示界面设计领域。具体实现方案为：获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。本公开可以通过调整设计对象的宽度值，实现切换展示响应得宽度范围关联的设计对象的展示数据。

Description

设计界面的展示方法、装置、电子设备、存储介质及产品

技术领域

本公开涉及应用界面领域，尤其涉及应用展示界面设计领域，具体设计一种设计界面的展示方法、装置、电子设备、存储介质及产品。

背景技术

在设计用户界面时，需要基于不同终端对应的屏宽，为不同终端设计对应的展示界面。因此，设计的展示界面在不同终端对应的屏宽下，展示的界面样式也不同。

相关技术中，若有不同的样式呈现方案，需要创建多个画板，在不同的画板中独立设计。

发明内容

本公开提供了一种设计界面的展示方法、装置、电子设备、存储介质及产品。

根据本公开的第一方面，提供了一种设计界面的展示方法，所述方法包括：

获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。

根据本公开的第二方面，提供了一种设计界面的展示装置，所述装置包括：

获取模块，用于获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；确定模块，用于响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；展示模块，用于确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。

根据本公开的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面所述的方法。

根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据第一方面所述的方法。

根据本公开的第五方面，提供了一种计算机产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据第一方面所述的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1示出了相关技术中设计界面的过程示意图；

图2示出了本公开实施例提供的一种设计界面的展示方法的流程示意图；

图3示出了本公开实施例提供的一种设计对象的数据处理方法的流程示意图；

图4示出了本公开实施例提供的一种定义至少一个宽度范围的方法的流程示意图；

图5示出了本公开实施例提供的一种定义至少一个宽度范围的方法的流程示意图

图6示出了本公开实施例提供的一种合并宽度范围的方法的流程示意图；

图7示出了本公开实施例提供的一种设计界面的展示方法的流程示意图；

图8示出了本公开实施例提供的一种设计界面的展示的结构示意图；

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在设计用户界面时，需要基于不同终端对应的屏宽，为不同终端设计对应的展示界面。因此，设计的展示界面在不同终端对应的屏宽下，展示的界面样式也不同。

相关技术中，若有不同的样式呈现方案，需要创建多个画板，在不同的画板中独立设计。图1示出了相关技术中设计界面的过程示意图，如图1中所示，设计对象分别在不同的画板进行编辑，将编辑好的设计对象发送至研发模块，研发人员对设计对象进行编码，实现设计对象的绑定展示。并且不同画板之间不可根据大小进行联动，改变画板宽度，无法切换查看不同宽度下设计内容。

基于上述相关技术中存在的技术问题，本公开提供一种设计界面的展示方法和装置。在界面的设计阶段，通过把不同设计对象建立绑定关系，设计对象关联组合的不同宽度范围，进一步通过调整组合宽度，实现切换展示响应得宽度范围关联的设计对象。

下述实施例将结合附图对本公开提供的设计界面的展示方法和装置进行说明。

图2示出了本公开实施例提供的一种设计界面的展示方法的流程示意图，如图2中所示，该方法可以包括：

在步骤S210中，确定设计界面当前展示的第一展示数据对应的第一设计对象和第一宽度范围。

在本公开实施例中，在对设计对象的展示数据进行处理时，可以选择一个设计对象，也可以选择多个设计对象。每个设计对象对应有一个或多个相关的展示数据，例如，展示数据1，展示数据2……。每个设计对象不同的展示数据还对应相关联了不同的宽度范围。

在本公开中，确定当前展示的第一展示数据对应的设计对象，并进一步确定与第一展示数据对应关联的第一宽度范围。本公开为便于描述，将设计界面当前展示的展示数据称为第一展示数据，将第一展示数据对应的宽度范围称为第一宽度范围。

在步骤S220中，响应于检测到对设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定第二宽度值所在的第二宽度范围。

在本公开实施例中，界面设计人员可以基于设计界面对设计对象进行操作，在检测到界面设计人员对任一设计对象的当前宽度值的调整操作时，进一步确定设计对象调整后的宽度值。根据确定的调整后的设计对象的宽度值，确定与调整后宽度值对应的宽度范围，本公开为便于描述，将设计对象的当前宽度值称为第一宽度值，将调整后的设计对象的宽度值称为第二宽度值，与第二宽度值对应的宽度范围称为第二宽度范围。

在步骤S230中，确定设计对象在第二宽度范围内对应的第二展示数据，将设计界面当前展示的第一展示数据切换为第二展示数据。

在本公开实施例中，确定当前调整的设计对象，并确定该设计对象在确定的第二宽度范围内的第二展示数据。进一步将设计界面当前展示的第一展示数据切换为第二展示数据。其中，本公开为便于描述，将第二宽度范围内的展示数据，称为第二展示数据。

在本公开实施例中，第一展示数据可以是一个，也可以是多个。

在本公开实施例中，设计界面展示的展示数据切换至第二展示数据后，设计人员可以基于设计界面当前展示的第二数据，可视化编辑该第一数据，得到设计对象在第二宽度范围的设计界面下的展示界面。该编辑完成的设计界面在第二宽度范围下生效，其他的宽度范围不受影响，从而可以实现不同宽度范围的设计定制需求。通过展示界面对设计对象的数据的展示，还可以实现高保真的交互效果演示。

在本公开中，可视化编辑设计对象相关的数据，可以是对设计对象相关的数据的显示/隐藏、以及外观样式、内容数据、位置布局变更等。还可以是对设计对象的新增，删除，修改等。

在本公开中，同一个设计内容在不同宽度范围下的展示数据包括：展示数据1，展示数据2和展示数据3。编辑删除/新增展示数据，是同时删除/新增该设计对象下的展示数据1，展示数据2和展示数据3。编辑修改，是对设计对象内容当前展示区间下的展示数据进行修改。

通过本公开的设计界面的展示方法，可以根据设计对象的宽度值，确定该宽度值下的设计对象的展示数据，从而可以根据设计对象不同的宽度值所在的宽度范围自由切换相应的展示数据，以满足界面设计人员在设计阶段对界面不同宽度区间的设计定制需求，从而提高设计人员对设计内容编辑的效率。

在确定设计界面当前展示的第一展示数据对应的第一设计对象和第一宽度范围之前，还需要对设计对象、设计对象相关的展示数据以及设计对象不同展示数据对应的宽度范围进行关联和处理，其实施方式如下述实施例。

图3示出了本公开实施例提供的一种设计对象的数据处理方法的流程示意图，如图3中所示，该方法可以包括：

在步骤S310中，获取至少一个设计对象、与每个设计对象相关的展示数据以及每个设计对象的宽度值。

在步骤S320中，建立至少一个设计对象之间的绑定关系，并根据设计对象的宽度值定义至少一个宽度范围。

在本公开实施例中，设计对象可以是一个，也可以是多个。若设计对象为多个，则可以对多个设计对象建立绑定关系，以实现多个设计对象的自由切换。

在本公开实施例中，若设计对象的展示数据为一个，则定义该设计对象默认一个展示界面，该展示界面的宽度范围为零到正无穷。

若设计对象的展示数据为多个，则可以根据多个设计对象不同的宽度值，定义多个宽度范围。从而，将多个宽度范围与对应的展示数据进行关联。

在步骤S330中，确定设计对象的宽度值对应的宽度范围，并将设计对象相关的展示数据与对应的宽度范围进行关联。

在本公开实施例中，确定设计对象的宽度值，并确定宽度值所在的宽度范围。根据设计对象的宽度值，将设计对象相关的展示数据与对应的宽度范围进行关联。从而创建与设计对象相关的组合，组合包括设计对象，设计对象相关的展示数据，设计对象的展示数据对应的宽度范围等。

示例性，可以将宽度值最小的设计对象关联组合的宽度范围为：零到最小的标记值，即，定义的第一个宽度范围。宽度值最大的设计对象关联组合的宽度范围为：最大的标记值到正无穷，即定义的最后一个宽度范围。

在本公开中，设计对象的宽度值可以是设计对象对应视窗/容器类型的屏宽。屏宽可以是根据屏幕的方向确定当前屏宽是宽度还是高度。还可以是设计对象应用设备的设备类型，例如，移动端，平板端和电脑端。若设计对象的应用设备还包括多个媒体类型(例如，颜色模式，交互特征等)，还可以根据媒体类型确定设计对象适配的宽度值。

本公开下述实施例将对定义至少一个宽度范围进行说明。

图4示出了本公开实施例提供的一种定义至少一个宽度范围的方法的流程示意图，如图4中所示，该方法可以包括：

在步骤S410中，基于绑定关系，在至少一个设计对象中，确定组合设计对象。

其中，组合设计对象中每个设计对象的宽度值不同。

在本公开实施例中，对宽度值不同的设计对象进行绑定，创建组合设计对象。

示例性的，选择设计对象1宽度300，与设计对象2宽度600，组合绑定。得到组合的宽度范围0-600，600-正无穷，宽度范围：0-600设计对象1的展示数据1(即，宽度值为300的展示数据)正常显示。设计对象2的展示数据1(即，宽度值为600的展示数据)默认隐藏。在本公开中可对隐藏的展示数据进行取消隐藏操作，从而可编辑隐藏的展示数据。宽度范围：600-正无穷，设计对象1的展示数据2(即，宽度值为300的展示、数据)默认隐藏，同理，可对隐藏的展示数据进行取消隐藏操作，从而可编辑隐藏的展示数据。设计对象2的展示数据2(即，宽度值为600的展示数据)正常显示。

在步骤S420中，基于组合设计对象，定义至少一个标记值。

在本公开实施例中，可以对组合设计对象中不同的宽度值进行分类，从而得到划分不同宽度值的标记值。进一步，可以通过添加的标记值，将宽度范围进行划分，从而得到至少一个宽度范围。

在本公开中，可以在组合设计对象中，获取每个设计对象的宽度值，基于不同的宽度值，定义用于划分宽度范围的标记值。例如，可以直接将确定的不同的宽度值，定义为标记值。例如，标记值为600，1000。

在本公开中，可以将小于宽度阈值的宽度值定义为无效标记，从而避免该设计对象对应宽度范围的准确性。

在步骤S430中，获取默认宽度范围，并根据至少一个标记值，划分默认宽度范围，得到至少一个宽度范围。

在本公开实施例中，默认宽度范围为零到正无穷。根据确定的至少一个标记值，对默认宽度范围进行划分，从而可以将默认宽度范围(即，零到正无穷)分裂为多个不同的宽度范围。例如，根据标记值为600，1000将默认宽度范围分裂为0-600，600-1000，1000-正无穷。本公开还可以对已有的任意一个宽度范围进行划分，从而得到两个宽度范围。

可以理解的是，若根据标记值对任意一个宽度范围进行划分，则新生成的两个宽度范围关联的设计对象的展示数据与划分前相同。

在本公开实施例中，若根据标记值对任意一个宽度范围进行划分的一种实施方式可以是合并新增的设计对象至组合设计对象中。

图5示出了本公开实施例提供的一种定义至少一个宽度范围的方法的流程示意图，如图5中所示，该方法可以包括：

在步骤S510中，获取待合并的设计对象的宽度值，并基于宽度值，确定被划分的第三宽度范围。

在本公开实施例中，可以待合并新的设计内容，将选择的新的设计内容合并到指定组合设计对象中。进一步，可以根据待合并的设计对象的所有展示数据关联的不同宽度范围，在当前已有宽度范围中，确定需要被划分的宽度范围。本公开为便于区分，将被划分的宽度范围称为第三宽度范围。需要说明的是，若新的设计对象的宽度值大小，与指定组合中已有的宽度范围的端点相同，则不可合并该设计对象至组合设计对象中。

在步骤S520中，根据宽度值划分第三宽度范围，得到第一子宽度范围和第二子宽度范围。

在本公开中，根据确定的待合并的设计对象的宽度值，对第三宽度范围进行划分，得到第一子宽度范围和第二子宽度范围。即，取待合并的设计对象的宽度值，将该宽度值大小设置为划分第三宽度范围的标记值，将标记值所在的第三宽度范围分裂为两个新的宽度范围。

在步骤S530中，将新待合并的设计对象的展示数据与第一子宽度范围进行关联，将第三宽度范围关联的设计对象的展示数据与第二子宽度范围进行关联。

其中，第一子宽度范围大于或等于第二子宽度范围。

在本公开实施例中，在新生成的第一子宽度范围和第二子宽度范围中，较大的子宽度范围与待合并的设计对象的展示数据进行关联，较小的子宽度范围关联的设计对象的展示数据与分裂前相同。

需要说明的是，其他宽度区间的展示数据默认隐藏，并非取消关联，隐藏的数据可通过展示界面取消隐藏。

在本公开实施例中，根据宽度值划分第三宽度范围，由该标记所在的位置和相邻标记的大小决定。

在本公开中，获取第三宽度范围的两个端点，并基于端点和宽度值之间的大小关系，划分第三宽度范围。其中，可以将新增设计对象的宽度值确定为编辑的标记值。

示例性的，若编辑的标记值位于宽度范围的头部，更改范围为：0＜X＜下个标记值。若编辑的标记值位于一个宽度范围相邻的标记值之间，更改范围为：较小标记值＜X＜较大标记值。若编辑的标记位于宽度范围的尾部，更改范围为：较小标记值＜X＜正无穷。

在本公开实施例中，还可以对已有的至少一个宽度范围进行合并，其实施方式如下。

图6示出了本公开实施例提供的一种合并宽度范围的方法的流程示意图，如图6中所示，该方法可以包括：

在步骤S610中，响应于检测到对宽度范围的合并操作，确定待合并的多个相邻宽度范围。

在步骤S620中，将多个相邻宽度范围进行合并，得到第四宽度范围。

在本公开实施例中，对宽度范围的合并操作可以是删除多个相邻宽度范围之间的标记值。

检测到对宽度范围的合并操作，确定待合并的多个相邻宽度范围。通过删除多个相邻宽度范围之间的标记值，将待合并的多个相邻宽度范围进行合并，得到一个宽度范围。其中，本公开为便于描述，将合并多个相邻宽度范围得到一个宽度范围称为第四宽度范围。

在步骤S630中，确定多个相邻宽度范围中范围最小的宽度范围对应的设计对象的展示数据，将展示数据与第四宽度范围进行关联。

在本公开实施例中，将原相邻两个宽度范围中，较大的宽度范围关联的设计对象的展示数据脱离组合设计对象的绑定。较小的宽度范围关联的设计对象的展示数据与合并后的第四宽度范围进行关联。

本公开提供的实施方式用于在展示界面的设计阶段，图7示出了本公开实施例提供的一种设计界面的展示方法的流程示意图，如图7中所示，通过对设计对象的编辑(绑定设计对象)，使得设计对象在不同条件下，可编辑配置不同的数据，得到设计对象相关的组合。该组合可以包括用于设计对象的设备的设备类型，媒体类型和视窗/容器类型。其中，设备类型可以是移动端，平板端和电脑端等；媒体类型可以是颜色模式，交互特征等；视窗/容器类型可以是宽度，高度，屏幕方向等。在展示模块对设计对象进行展示时，通过设计对象的宽度，确定对应组合包括的数据。设计阶段完成之后，编辑器中关于媒体查询的设计参数可转化为样式代码，研发可直接使用，实现无代码开发，从而提高展示界面的设计效率。

基于与图8中所示的方法相同的原理，图8示出了本公开实施例提供的一种设计界面的展示的结构示意图，如图8所示，该设计界面的展示装置800可以包括：

获取模块801，用于获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；确定模块802，用于响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；展示模块803，用于确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。

在本公开实施例中，所述获取模块801，还用于获取至少一个设计对象、与每个所述设计对象相关的展示数据以及每个所述设计对象的宽度值；建立所述至少一个设计对象之间的绑定关系，并根据所述设计对象的宽度值定义至少一个宽度范围；确定所述设计对象的宽度值对应的宽度范围，并将所述设计对象相关的展示数据与对应的宽度范围进行关联。

在本公开实施例中，所述确定模块802，用于基于所述绑定关系，在所述至少一个设计对象中，确定组合设计对象，所述组合设计对象中每个所述设计对象的宽度值不同；基于所述组合设计对象，定义至少一个标记值，所述标记值用于对不同的宽度值进行归类；获取默认宽度范围，并根据所述至少一个标记值，划分所述默认宽度范围，得到至少一个宽度范围。

在本公开实施例中，所述至少一个设计对象中包括待合并的设计对象；所述装置还包括：关联模块804；

所述关联模块804，用于获取待合并的设计对象的宽度值，并基于所述宽度值，确定被划分的第三宽度范围；根据所述宽度值划分所述第三宽度范围，得到第一子宽度范围和第二子宽度范围；将所述待合并的设计对象与所述第一子宽度范围进行关联，将所述第三宽度范围关联的设计对象的展示数据与所述第二子宽度范围进行关联；其中，所述第一子宽度范围大于或等于所述第二子宽度范围。

在本公开实施例中，所述获取模块801，还用于获取所述第三宽度范围的两个端点，并基于所述端点和所述宽度值之间的大小关系，划分所述第三宽度范围。

在本公开实施例中，关联模块804，还用于响应于检测到对宽度范围的合并操作，确定待合并的多个相邻宽度范围；将所述多个相邻宽度范围进行合并，得到第四宽度范围；确定多个相邻宽度范围中范围最小的宽度范围对应的设计对象的展示数据，将所述展示数据与所述第四宽度范围进行关联。

在本公开实施例中，所述展示模块803，还用于基于设计界面展示的第二展示数据，编辑所述第二展示数据，得到所述设计对象在所述第二宽度范围的设计界面下的展示界面。

本公开的技术方案中，所涉及的用户个人信息的获取，存储和应用等，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图9示出了可以用来实施本公开的实施例的示例电子设备900的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图9所示，设备900包括计算单元901，其可以根据存储在只读存储器(ROM)902中的计算机程序或者从存储单元908加载到随机访问存储器(RAM)903中的计算机程序，来执行各种适当的动作和处理。在RAM 903中，还可存储设备900操作所需的各种程序和数据。计算单元901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

设备900中的多个部件连接至I/O接口905，包括：输入单元906，例如键盘、鼠标等；输出单元907，例如各种类型的显示器、扬声器等；存储单元908，例如磁盘、光盘等；以及通信单元909，例如网卡、调制解调器、无线通信收发机等。通信单元909允许设备900通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元901可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元901的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元901执行上文所描述的各个方法和处理，例如方法设计界面的展示方法。例如，在一些实施例中，方法设计界面的展示方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元908。在一些实施例中，计算机程序的部分或者全部可以经由ROM 902和/或通信单元909而被载入和/或安装到设备900上。当计算机程序加载到RAM 903并由计算单元901执行时，可以执行上文描述的方法设计界面的展示方法的一个或多个步骤。备选地，在其他实施例中，计算单元901可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行方法设计界面的展示方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (17)

1.一种设计界面的展示方法，其特征在于，所述方法包括：

获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；

响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；

确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。

2.根据权利要求1所述的方法，其中，所述获取设计界面当前展示的第一展示数据对应的第一设计对象和第一宽度范围之前，所述方法包括：

获取至少一个设计对象、与每个所述设计对象相关的展示数据以及每个所述设计对象的宽度值；

建立所述至少一个设计对象之间的绑定关系，并根据所述设计对象的宽度值定义至少一个宽度范围；

确定所述设计对象的宽度值对应的宽度范围，并将所述设计对象相关的展示数据与对应的宽度范围进行关联。

3.根据权利要求2所述的方法，其中，所述根据所述设计对象的宽度值定义至少一个宽度范围，包括：

基于所述绑定关系，在所述至少一个设计对象中，确定组合设计对象，所述组合设计对象中每个所述设计对象的宽度值不同；

基于所述组合设计对象，定义至少一个标记值，所述标记值用于对不同的宽度值进行归类；

获取默认宽度范围，并根据所述至少一个标记值，划分所述默认宽度范围，得到至少一个宽度范围。

4.根据权利要求2或3所述的方法，其中，所述至少一个设计对象中包括待合并的设计对象；

所述方法还包括：

获取待合并的设计对象的宽度值，并基于所述宽度值，确定被划分的第三宽度范围；

根据所述宽度值划分所述第三宽度范围，得到第一子宽度范围和第二子宽度范围；

将所述待合并的设计对象与所述第一子宽度范围进行关联，将所述第三宽度范围关联的设计对象的展示数据与所述第二子宽度范围进行关联；

其中，所述第一子宽度范围大于或等于所述第二子宽度范围。

5.根据权利要求4所述的方法，其中，所述根据所述宽度值划分所述第三宽度范围，包括：

获取所述第三宽度范围的两个端点，并基于所述端点和所述宽度值之间的大小关系，划分所述第三宽度范围。

6.根据权利要求2所述的方法，其中，所述方法还包括：

响应于检测到对宽度范围的合并操作，确定待合并的多个相邻宽度范围；

将所述多个相邻宽度范围进行合并，得到第四宽度范围；

确定多个相邻宽度范围中范围最小的宽度范围对应的设计对象的展示数据，将所述展示数据与所述第四宽度范围进行关联。

7.根据权利要求1所述的方法，其中，所述将设计界面当前展示的所述第一展示数据切换为所述第二展示数据之后，所述方法还包括：

基于设计界面展示的第二展示数据，编辑所述第二展示数据，得到所述设计对象在所述第二宽度范围的设计界面下的展示界面。

8.一种设计界面的展示装置，所述装置包括：

获取模块，用于获取设计界面当前展示的第一展示数据对应的设计对象和第一宽度范围；

确定模块，用于响应于检测到对所述设计对象的第一宽度值的调整操作，确定调整后的第二宽度值，并确定所述第二宽度值所在的第二宽度范围；

展示模块，用于确定所述设计对象在所述第二宽度范围内对应的第二展示数据，将设计界面当前展示的所述第一展示数据切换为所述第二展示数据。

9.根据权利要求8所述的装置，其中，所述获取模块，还用于：

获取至少一个设计对象、与每个所述设计对象相关的展示数据以及每个所述设计对象的宽度值；

建立所述至少一个设计对象之间的绑定关系，并根据所述设计对象的宽度值定义至少一个宽度范围；

确定所述设计对象的宽度值对应的宽度范围，并将所述设计对象相关的展示数据与对应的宽度范围进行关联。

10.根据权利要求9所述的装置，其中，所述确定模块，用于：

基于所述绑定关系，在所述至少一个设计对象中，确定组合设计对象，所述组合设计对象中每个所述设计对象的宽度值不同；

基于所述组合设计对象，定义至少一个标记值，所述标记值用于对不同的宽度值进行归类；

获取默认宽度范围，并根据所述至少一个标记值，划分所述默认宽度范围，得到至少一个宽度范围。

11.根据权利要求9或10所述的装置，其中，所述至少一个设计对象中包括待合并的设计对象；

所述装置还包括：关联模块；

所述关联模块，用于获取待合并的设计对象的宽度值，并基于所述宽度值，确定被划分的第三宽度范围；

根据所述宽度值划分所述第三宽度范围，得到第一子宽度范围和第二子宽度范围；

将所述待合并的设计对象与所述第一子宽度范围进行关联，将所述第三宽度范围关联的设计对象的展示数据与所述第二子宽度范围进行关联；

其中，所述第一子宽度范围大于或等于所述第二子宽度范围。

12.根据权利要求11所述的装置，其中，所述获取模块，还用于：

获取所述第三宽度范围的两个端点，并基于所述端点和所述宽度值之间的大小关系，划分所述第三宽度范围。

13.根据权利要求9所述的装置，其中，关联模块，还用于：

响应于检测到对宽度范围的合并操作，确定待合并的多个相邻宽度范围；

将所述多个相邻宽度范围进行合并，得到第四宽度范围；

确定多个相邻宽度范围中范围最小的宽度范围对应的设计对象的展示数据，将所述展示数据与所述第四宽度范围进行关联。

14.根据权利要求8所述的装置，其中，所述展示模块，还用于：

基于设计界面展示的第二展示数据，编辑所述第二展示数据，得到所述设计对象在所述第二宽度范围的设计界面下的展示界面。

15.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一项所述的方法。

17.一种计算机产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-7中任一项所述的方法。

Images