CN113778302A - 界面元素显示的方法、装置、存储介质及电子设备 - Google Patents

Abstract

本公开关于一种界面元素显示的方法、装置、存储介质及电子设备。其中，该方法包括：在目标应用界面上显示一组界面元素；在上述目标应用界面上获取第一目标指令，其中，上述第一目标指令用于选中上述一组界面元素中的多个界面元素；响应于上述第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线以及上述多个界面元素之间的距离值。本公开解决了相关技术中由于对多个界面元素之间的间距线以及距离值进行逐个测量，操作方式较为繁琐且校验效率低的技术问题。

Description

界面元素显示的方法、装置、存储介质及电子设备

技术领域

本公开涉及界面元素显示领域，尤其涉及一种界面元素显示的方法、装置、存储介质及电子设备。

背景技术

在相关技术中，为了对目标应用界面上设置的界面元素进行校验，在校验的过程中，通常采用以下校验方式：先将需要校验的界面元素所在的显示界面进行截图处理，得到对应的截图，将上述截图分别与原设计稿中的单个界面元素坐标、界面元素颜色值进行逐个对比，以及对各个界面元素之间的间距线进行逐个测量，得到校验结果。

但是，由于目标应用界面中的界面元素较多，对各个界面元素之间的间距线进行逐个测量的方法，操作方式较为繁琐、校验效率低。

发明内容

本公开提供一种界面元素显示的方法、装置、存储介质及电子设备，以至少解决相关技术中由于对多个界面元素之间的间距线以及距离值进行逐个测量，操作方式较为繁琐且校验效率低的技术问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种界面元素的显示方法，应用于对目标应用界面上设置的界面元素进行校验的过程中，包括：在目标应用界面上显示一组界面元素；在上述目标应用界面上获取第一目标指令，其中，上述第一目标指令用于选中上述一组界面元素中的多个界面元素；响应于上述第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线。

可选地，在上述目标应用界面上显示上述多个界面元素之间的间距线，包括：在上述多个界面元素包括第一界面元素和第二界面元素、且上述第一界面元素和上述第二界面元素均处于未被选中状态时，在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线。

可选地，在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线，包括：在上述目标应用界面上显示处于第一展示状态的上述第一间距线，并显示处于第二展示状态的上述第二间距线；在上述目标应用界面上获取第二目标指令，其中，上述在上述第二目标指令用于切换上述第一间距线和上述第二间距线的显示状态；响应于上述第二目标指令，上述在上述目标应用界面上显示处于上述第二展示状态的上述第一间距线，并显示处于上述第一展示状态的上述第二间距线。

可选地，上述在上述目标应用界面上显示上述多个界面元素之间的间距线，包括：在上述多个界面元素包括一个主界面元素和一个从界面元素时，在上述目标应用界面上显示上述从界面元素到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述一个从界面元素处于未被选中状态；或者在上述多个界面元素包括一个主界面元素和多个从界面元素时，在上述目标应用界面上显示上述多个从界面元素中的每个从界面元素分别到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述多个从界面元素处于未被选中状态。

可选地，上述在上述目标应用界面上显示上述多个界面元素之间的间距线，包括：在上述多个界面元素包括N个主界面元素和N组从界面元素时，在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，其中，上述N个主界面元素和上述N组从界面元素具有一一对应关系，每个主界面元素对应上述N组从界面元素中的一组从界面元素，上述N为大于1的自然数，上述N个主界面元素处于被选中状态，上述N组从界面元素处于未被选中状态。

可选地，上述在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，包括：在上述目标应用界面上显示处于第一展示状态的第i组间距线，并显示除上述第i组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第i组间距线之外的上述N-1组间距线是N组间距线中除上述第i组间距线之外的N-1组间距线，上述N组间距线包括上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，1≤i≤N；在上述目标应用界面上获取第三目标指令，其中，上述第三目标指令用于切换上述N组间距线的显示状态；响应于上述第三目标指令，在上述目标应用界面上显示处于第一展示状态的第j组间距线，并显示除上述第j组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第j组间距线之外的上述N-1组间距线是上述N组间距线中除上述第j组间距线之外的N-1组间距线，1≤j≤N，j与i不相等。

可选地，在上述目标应用界面上获取第一目标指令之后，上述方法还包括：响应于上述第一目标指令，在上述目标应用界面上显示处于第一展示状态的上述多个界面元素，以及显示上述一组界面元素中除上述多个界面元素之外的处于第二展示状态的界面元素。

根据本公开实施例的第二方面，提供一种界面元素的显示装置，应用于对目标应用界面上设置的界面元素进行校验的过程中，包括第一显示单元，被配置为执行在目标应用界面上显示一组界面元素；获取单元，被配置为执行在上述目标应用界面上获取第一目标指令，其中，上述第一目标指令用于选中上述一组界面元素中的多个界面元素；第二显示单元，被配置为执行响应于上述第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线，以及上述多个界面元素之间的距离值。

可选地，上述第二显示单元，包括：第一显示子单元，被配置为在上述多个界面元素包括第一界面元素和第二界面元素、且上述第一界面元素和上述第二界面元素均处于未被选中状态时，在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线。

可选地，上述第二显示单元，包括：第二显示子单元，被配置为在上述目标应用界面上显示处于第一展示状态的上述第一间距线，并显示处于第二展示状态的上述第二间距线；第一获取子单元，被配置为在上述目标应用界面上获取第二目标指令，其中，上述第二目标指令用于切换上述第一间距线和上述第二间距线的显示状态；第三显示子单元，被配置为响应于上述第二目标指令，在上述目标应用界面上显示处于上述第二展示状态的上述第一间距线，并显示处于上述第一展示状态的上述第二间距线。

可选地，上述第二显示单元还包括：第四显示子单元，被配置为在上述多个界面元素包括一个主界面元素和一个从界面元素时，在上述目标应用界面上显示上述从界面元素到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述一个从界面元素处于未被选中状态；第五显示子单元，被配置为在上述多个界面元素包括一个主界面元素和多个从界面元素时，在上述目标应用界面上显示上述多个从界面元素中的每个从界面元素分别到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述多个从界面元素处于未被选中状态。

可选地，上述第二显示单元还包括：第六显示子单元，被配置为在上述多个界面元素包括N个主界面元素和N组从界面元素时，在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，其中，上述N个主界面元素和上述N组从界面元素具有一一对应关系，每个主界面元素对应上述N组从界面元素中的一组从界面元素，上述N为大于1的自然数，上述N个主界面元素处于被选中状态，上述N组从界面元素处于未被选中状态。

可选地，上述第六显示子单元，包括：第七显示子单元，被配置为在上述目标应用界面上显示处于第一展示状态的第i组间距线，并显示除上述第i组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第i组间距线之外的上述N-1组间距线是N组间距线中除上述第i组间距线之外的N-1组间距线，上述N组间距线包括上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，1≤i≤N，i和N均为正整数；第二获取子单元，被配置为在上述目标应用界面上获取第三目标指令，其中，上述第三目标指令用于切换上述N组间距线的显示状态；第八显示子单元，被配置为响应于上述第三目标指令，在上述目标应用界面上显示处于第一展示状态的第j组间距线，并显示除上述第j组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第j组间距线之外的上述N-1组间距线是上述N组间距线中除上述第j组间距线之外的N-1组间距线，1≤j≤N，j为与i不相等的正整数。

可选地，上述装置还包括：第九显示子单元，被配置为响应于上述第一目标指令，在上述目标应用界面上显示处于第一展示状态的上述多个界面元素，以及显示上述一组界面元素中除上述多个界面元素之外的处于第二展示状态的界面元素。

根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储上述处理器可执行指令的存储器；其中，上述处理器被配置为执行上述指令，以实现任一项上述的界面元素显示方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当上述计算机可读存储介质中的指令由电子设备的处理器执行时，使得上述电子设备能够执行任一项上述的界面元素显示方法。

本公开的实施例提供的技术方案至少带来以下有益效果：在本公开的实施例中，通过输入的控制指令，可以同时显示多个界面元素之间的间距线以及距离值，从而简化目标应用界面中的界面元素的校验操作，解决了相关技术中由于对多个界面元素之间的间距线以及距离值进行逐个测量，造成的间距线的显示操作较为复杂的技术问题。

另一方面，在本公开的实施例中，通过输入的控制指令，可以显示多组界面元素对应的多组间距线，每组间距线为一个或多个界面元素到处于被选中状态的界面元素的间距线，进一步简化了界面元素的间距线的显示操作，提高了界面元素的间距线的显示效率，从而进一步提高了界面元素的校验效率。

又一方面，在本公开的实施例中，通过输入的控制指令，可以将不同界面元素对应的间距线显示为不同的显示状态，例如，第一展示状态和第二展示状态，并且可以在不同的显示状态下进行切换。这样，可以突出显示当前所要操作的间距线，避免了在不同的间距线之间进行误操作，提高了界面元素的校验准确性。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

首先，为方便理解本公开实施例，下面将对本公开中所涉及的部分术语或名词进行解释说明：

UI：user interface(用户交互界面)。

元素：UI稿件上的单个小视图(比如按钮、文字区域、单个图片区域等)。

UI恒星：是指被锚定操作选中的UI元素。

UI行星：是指被普通操作选中的UI元素。

恒星手势：是指通过该手势可以指定某个被选中的UI元素作为“UI恒星”。

行星手势：是指通过该手势可以指定某个UI元素作为“UI行星”。

UI元素星系：指定一个UI恒星，然后选定某些其他UI作为UI行星，显示UI恒星与多个UI行星之间的间距(看起来是多个行星围绕恒星)。

间距线：是指任意两个UI元素(例如：UI恒星、UI行星)被选中后，两个UI元素之间的一条线，线上有文本会显示该线的长度，其中，2个UI元素之间可以有一根或多根线。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种界面元素显示方法的计算机终端的硬件结构框图；

图2是根据一示例性实施例示出的一种界面元素显示方法的流程图；

图3a是根据一示例性实施例示出的一种可选的显示UI元素的界面示意图；

图3b是根据一示例性实施例示出的另一种可选的显示UI元素的界面示意图；

图4是根据一示例性实施例示出的另一种可选的显示UI元素的界面示意图；

图5是根据一示例性实施例示出的一种可选的界面元素显示方法的流程图；

图6a是根据一示例性实施例示出的另一种可选的显示UI元素的界面示意图；

图6b是根据一示例性实施例示出的另一种可选的显示UI元素的界面示意图；

图6c是根据一示例性实施例示出的又一种可选的显示UI元素的界面示意图；

图7是根据一示例性实施例示出的另一种可选的界面元素显示方法的流程图；

图8是根据一示例性实施例示出的一种界面元素的显示装置框图；

图9是根据一示例性实施例示出的另一种界面元素的显示装置框图；

图10是根据一示例性实施例示出的又一种界面元素的显示装置框图；

图11是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

需要说明的是，本公开所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)，均为经用户授权或者经过各方充分授权的信息。

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本申请实施例所提供的方法实施例可以在计算机终端、计算机终端或者类似的运算模块中执行。以运行在计算机终端上为例，图1是根据一示例性实施例示出的一种界面元素显示方法的计算机终端的硬件结构框图。如图1所示，计算机终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理模块)和用于存储数据的存储器104，在一个示例性实施例中，上述计算机终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机终端的结构造成限定。例如，计算机终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示等同功能或比图1所示功能更多的不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本申请实施例中的智能家居设备的控制方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储模块、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输模块106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端的通信供应商提供的无线网络。在一个实例中，传输模块106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输模块106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。

图2是根据一示例性实施例示出的一种界面元素显示方法的流程图，如图2所示，上述界面元素的显示方法，应用于对目标应用界面上设置的界面元素进行校验的过程中，包括以下步骤：

在步骤S11中，在目标应用界面上显示一组界面元素；

在步骤S12中，在上述目标应用界面上获取第一目标指令，其中，上述第一目标指令用于选中上述一组界面元素中的多个界面元素；

在步骤S13中，响应于上述第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线，以及上述多个界面元素之间的距离值。

需要说明的是，本申请实施例所提供的界面元素显示方法应用在终端设备，例如，移动终端(Android终端、iOS终端)、PC终端、智能可穿戴设备、平板电脑等等其他前端设备。在本公开实施例中，上述终端设备中运行有多个应用程序App，上述目标应用界面即用户交互界面，上述界面元素可以包括但不限于按钮、控件、文字区域、图片区域等等。

作为一种可选的实施例，本申请实施例可以但不限于应用于对目标应用界面上设置的界面元素进行校验的过程中，例如，在App、前端研发流程中，存在UI设计师设计UI稿，研发工程师在终端设备上将UI稿以代码的形式进行还原，再由UI设计师验收。大致的具体流程如下：UI设计师设计UI稿是指UI稿上会标注各个UI元素的坐标、UI元素之间的间距线。研发工程师在前端设备上还原UI是指由研发工程师进行编码，将UI稿以代码的形式进行还原，最终展现在各前端设备上；UI设计师验收是指UI设计师对研发工程师在前端上展示的效果与最初UI设计稿进行对比、教研，若比对结果没有差异(例如，UI元素坐标点、宽高、UI元素之间的相对间距以及UI元素的颜色都正确)，则UI设计师会告知管理方该次研发流程中UI审查通过。

如图3a所示，在目标应用界面30上显示一组界面元素，例如，上述一组界面元素为UI元素1、UI元素2、UI元素3、UI元素4、UI元素5、UI元素6，研发工程师或者UI设计师通过触控或者点击的操作方式触发第一目标指令，例如，双击、滑动后点击等，以选中上述一组界面元素中的多个界面元素，例如，选中UI元素1和UI元素2、UI元素3和UI元素4；终端设备在上述目标应用界面30上获取第一目标指令，并响应于上述第一目标指令，仍如图3所示，在上述目标应用界面30上选中UI元素1和UI元素2，并在上述目标应用界面上显示UI元素1和UI元素2之间的间距线，例如，该间距线是指任意两个UI元素(例如：UI恒星、UI行星)被选中后，根据两个UI元素之间的相对距离生成的一条或多条间距线，间距线上还可以显示有文本，例如，a11，a12；表示UI元素1到UI元素2的横间距和纵间距，b11，b12表示UI元素2到UI元素1的横间距和纵间距，该文本用于显示该间距线的长度，需要说明的是，任意两个UI元素之间可以有一条或多条间距线。

作为一种可选的实施例，上述间距线包括但不限于：UI元素1的顶部到UI元素2的顶部之间的间距线、UI元素1的左边框到UI元素2的左边框之间的间距线、UI元素1的右边框到UI元素2的右边框之间的间距线、UI元素1的上边框到UI元素2的上边框之间的间距线，等等。

通过本公开实施例，可以降低UI设计师验收/研发工程师自查阶段的工作繁琐性，在目标应用界面中，UI设计师/研发工程师可以通过在目标应用界面上触发第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线以及距离值，进而可以直接查看多个界面元素之间的间距线以及距离值。

在本公开的实施例中，通过输入的控制指令，可以同时显示多个界面元素之间的间距线以及距离值，从而简化目标应用界面中的界面元素的校验操作，解决了相关技术中由于对多个界面元素之间的间距线以及距离值进行逐个测量，造成的间距线的显示操作较为复杂的技术问题。

另一方面，在本公开的实施例中，通过输入的控制指令，可以显示多组界面元素对应的多组间距线，每组间距线为一个或多个界面元素到处于被选中状态的界面元素的间距线，进一步简化了界面元素的间距线的显示操作，提高了界面元素的间距线的显示效率，从而进一步提高了界面元素的校验效率。

又一方面，在本公开的实施例中，通过输入的控制指令，可以将不同界面元素对应的间距线显示为不同的展示状态，例如，对于不同的间距线分别采用不同色彩的线条进行区别显示；对于不同的间距线分别采用不同粗细的线条进行区别显示，再例如，对于不同的间距线分别采用高亮状态和非高亮状态进行区别显示等等，并且不同的间距线可以在不同的显示状态下进行切换。这样，可以突出显示当前所要操作的间距线，避免了由于无法清晰区别显示而对不同的间距线误操作，提高了界面元素的校验准确性。

在一种可选的实施例中，上述在上述目标应用界面上显示上述多个界面元素之间的间距线以及距离值的步骤包括：

在步骤S21中，在上述多个界面元素包括第一界面元素和第二界面元素、且上述第一界面元素和上述第二界面元素均处于未被选中状态时，在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线。

如图4所示，以上述第一界面元素可以UI元素3，上述第四界面元素为UI元素4为例，例如，UI元素3和UI元素4均处于未被选中状态，即该UI元素3和UI元素4均不是UI设计师/研发工程师通过锚定操作选中的UI元素，则可以在上述目标应用界面上显示UI元素3到UI元素4的第一间距线，例如，上述第一间距线包括：c11，c12表示UI元素3到UI元素4的横间距和纵间距(即距离值)，还可以在上述目标应用界面上显示UI元素4到UI元素3的第二间距线(在图4中未示出，第二间距线可以通过第一间距线类比得到)。

作为另一可选的实施例，本申请实施例中的任意一个UI元素，UI设计师验收/研发工程师可以自定义UI元素的边框大小，需要说明的是，上述UI元素可以与实际应用中的尺寸大小相等或不相等。

在一种可选的实施例中，图5是根据一示例性实施例示出的一种可选的界面元素显示的流程图，如图5所示，上述在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线的步骤包括：

在步骤S31中，在上述目标应用界面上显示处于第一展示状态的上述第一间距线，并显示处于第二展示状态的上述第二间距线；

在步骤S32中，在上述目标应用界面上获取第二目标指令，其中，上述第二目标指令用于切换上述第一间距线和上述第二间距线的显示状态；

在步骤S33中，响应于上述第二目标指令，在上述目标应用界面上显示处于上述第二展示状态的上述第一间距线，并显示处于上述第一展示状态的上述第二间距线。

可选的，在本公开实施例中，如图3a所示，在目标应用界面30上显示处于第一展示状态的上述第一间距线，并如图3b所示，显示处于第二展示状态的上述第二间距线，通过本公开实施例，着重突出被选中的UI元素2到UI元素1的第一间距线，并将UI元素1到UI元素2的第二间距线、其他UI元素3、UI元素4等采用第二展示状态，例如，灰度状态、蒙层显示、遮挡状态显示，进而可以提高被选中的多个UI元素的视觉效果。

用户如果想要切换第一间距线和上述第二间距线的显示状态，可以触发第二目标指令，例如，双击、滑动后点击等，终端设备在上述目标应用界面上获取第二目标指令，并响应于上述第二目标指令，在上述目标应用界面30上显示处于上述第二展示状态的上述第一间距线，并显示处于上述第一展示状态的上述第二间距线。

在一种可选的实施例中，上述在上述目标应用界面上显示上述多个界面元素之间的间距线的步骤包括：

在步骤S41中，在上述多个界面元素包括一个主界面元素和一个从界面元素时，在上述目标应用界面上显示上述从界面元素到上述主界面元素的间距线；

在步骤S42中，在上述多个界面元素包括一个主界面元素和多个从界面元素时，在上述目标应用界面上显示上述多个从界面元素中的每个从界面元素分别到上述主界面元素的间距线。

可选的，上述一个主界面元素处于被选中状态，上述一个从界面元素处于未被选中状态；上述一个主界面元素处于被选中状态，上述多个从界面元素处于未被选中状态。

在上述多个界面元素包括一个主界面元素和一个从界面元素时，如图3所示，上述主界面元素为UI元素1，上述从界面元素为UI元素2，在上述目标应用界面30上显示UI元素2到UI元素1的间距线；在上述多个界面元素包括一个主界面元素和多个从界面元素时，如图6a所示，上述主界面元素为UI元素1，上述多个从界面元素包括UI元素2、UI元素3，在上述目标应用界面30上显示上述多个从界面元素中的UI元素2、UI元素3分别到UI元素1的间距线。

通过本公开实施例，可以选取一个UI元素1作为主界面元素，也可以理解为UI恒星元素，上述从界面元素为UI行星元素，通过在目标应用界面上显示多个UI行星元素中每个UI行星元素分别到UI恒星元素的间距线，如图6b所示，还可以UI元素1和UI元素4分别为上述主界面元素，上述UI元素1的多个从界面元素包括UI元素2、UI元素3，在上述目标应用界面30上显示上述UI元素2、UI元素3分别到UI元素1的间距线；上述UI元素4的多个从界面元素包括UI元素5和UI元素6，在上述目标应用界面30上还显示上述UI元素5和UI元素6分别到UI元素4的间距线。进而可以由UI恒星元素、多个UI行星元素和多个间距线构成UI元素星系。

需要说明的是，图6a、图6b、图6c中目标应用界面上显示的间距线上还可以显示有数值文本(当前未绘制)，例如，a11，a12，b11，b12，类比图3a、图3b所示。

在一种可选的实施例中，上述在上述目标应用界面上显示上述多个界面元素之间的间距线的步骤包括：

在步骤S51中，在上述多个界面元素包括N个主界面元素和N组从界面元素时，在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线。

可选的，上述N个主界面元素和上述N组从界面元素具有一一对应关系，每个主界面元素对应上述N组从界面元素中的一组从界面元素，上述N为大于1的自然数，上述N个主界面元素处于被选中状态，上述N组从界面元素处于未被选中状态。

在本公开实施实施例，UI设计师/研发工程师通过选定多组UI元素星系，即同时显示多组UI元素的间距，可以只突出显示当前活跃的UI元素星系，其他星系进行灰度显示或者遮挡显示。

当UI设计师/研发工程师开启该功能后，在目标应用界面，UI设计师/研发工程师可以通UI恒星手势(例如，双击、左滑等等)指定某个元素为UI恒星元素，或者通过UI行星手势(例如，单击、右滑等等，以可以与UI恒星手势区分开即可)指定某个元素为UI行星元素，选定多个UI元素后可以生成间距线并在目标应用界面上进行显示，在一种可选的实施例中，可以通过双选形态、单个UI元素星系形态和多个UI元素星系形态进行显示：

双选形态，是指在UI设计师/研发工程师当前没有指定UI恒星元素的情况下，通过行星手势选中任意两个UI行星元素，在目标应用界面上显示任意两个UI行星元素之间的间距线，并将该目标应用界面上的其他UI元素进行灰度显示或者蒙层显示，进而可以很直观的看出任意两个UI行星元素之间的间距线，双选形态下每次只能选定任意两个UI行星元素并显示两个UI行星元素之间的间距线。

单个UI元素星系形态，是指UI设计师/研发工程师通过UI恒星手势指定某一个UI恒星元素，其他UI元素进行灰度显示或者蒙层显示，此时再通过UI行星手势选中一个至多个UI行星元素，将被选中的UI行星元素进行高亮显示，然后分别逐个生成当前UI恒星元素与多个UI行星元素之间的间距线，进而多个UI行星元素围绕一个UI恒星元素构成一个UI元素星系，可以直观的看出单个UI元素与其他多个UI元素之间的间距线。

在一种可选的实施例中，图7是根据一示例性实施例示出的另一种可选的界面元素显示的流程图，如图7所示，上述在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线的步骤包括：

在步骤S61中，在上述目标应用界面上显示处于第一展示状态的第i组间距线，并显示除上述第i组间距线之外的处于第二展示状态的N-1组间距线；

在步骤S62中，在上述目标应用界面上获取第三目标指令，其中，上述第三目标指令用于切换上述N组间距线的显示状态；

在步骤S63中，响应于上述第三目标指令，在上述目标应用界面上显示处于第一展示状态的第j组间距线，并显示除上述第j组间距线之外的处于第二展示状态的N-1组间距线。

可选的，除上述第i组间距线之外的上述N-1组间距线是N组间距线中除上述第i组间距线之外的N-1组间距线，上述N组间距线包括上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，1≤i≤N，i和N均为正整数。

可选的，除上述第j组间距线之外的上述N-1组间距线是上述N组间距线中除上述第j组间距线之外的N-1组间距线，1≤j≤N，j为与i不相等的正整数。

上述步骤S61至步骤S63中可以理解为多个UI元素星系形态，例如，UI元素1为UI元素星系A的主界面元素，上述UI元素1的多个从界面元素包括UI元素2、UI元素3，在上述目标应用界面30上显示上述UI元素2、UI元素3分别到UI元素1的间距线，即UI元素1、UI元素2、UI元素3构成UI元素星系A；在UI设计师/研发工程师当前指定了一个UI元素星系A后，如图6c所示，UI设计师/研发工程师通过UI恒星手势指定一个UI元素4作为新的UI恒星B，同时将星系A置为灰度显示状态，新的UI恒星B置为第一展示状态，此时再通过UI行星手势指定UI行星C，此时UI行星C(UI元素5和UI元素6)将会与UI恒星B(UI元素4)构成UI元素星系D，即上述UI元素4、UI元素5和UI元素6构成UI元素星系D，并生成以及在目标应用界面上显示该UI元素星系D中UI恒星B与UI行星C之间的间距线；此时UI元素星系B处于第一展示状态，可以通过UI恒星手势选中UI元素星系A中的UI恒星，使得UI元素星系A置为第一展示状态，UI元素星系B将置为灰度状态，便可以同时间显示多组元素之间的间距线，并且可以来回的切换高亮显示状态和灰度显示状态。

相比较界面截图—电脑工具对比—逐个间距测量的原始自查方式，通过本公开实施例，可以提升UI设计师验收/研发工程师对UI元素的审查效率，在显示UI元素星系时，可以同时显示多个UI元素星系，达到单个时间维度内同时显示多组UI元素之间的间距线；突出被选中的UI元素(例如；UI恒星元素、UI行星元素)，将未被选中的其他UI元素采用灰度显示，以提升被选中UI元素的视觉显示体验。

并且，本公开实施例中UI元素星系模式涉及双恒星模式、多星系同时显示、可切换活跃星系；另外，被选中UI元素处于第一展示状态，可以对该UI元素所处区域进行挖孔来实现，例如，采用OpenGL的颜色混合技术，可以将多个UI元素所处的区域挖孔。

图8是根据一示例性实施例示出的一种界面元素的显示装置框图。参照图8，该装置应用于对目标应用界面上设置的界面元素进行校验的过程中，包括第一显示单元121，获取单元122和第二显示单元123。

该第一显示单元121被配置为执行在目标应用界面上显示一组界面元素；

该获取单元122被配置为执行在上述目标应用界面上获取第一目标指令，其中，上述第一目标指令用于选中上述一组界面元素中的多个界面元素；

该第二显示单元123被配置为执行响应于上述第一目标指令，在上述目标应用界面上选中上述多个界面元素，并在上述目标应用界面上显示上述多个界面元素之间的间距线，以及所述多个界面元素之间的距离值。

在一种可选的实施例中，上述第二显示单元123，包括第一显示子单元131。

改第一显示子单元131，被配置为在上述多个界面元素包括第一界面元素和第二界面元素、且上述第一界面元素和上述第二界面元素均处于未被选中状态时，在上述目标应用界面上显示上述第一界面元素到上述第二界面元素的第一间距线，以及上述第二界面元素到上述第一界面元素的第二间距线。

图9是根据一示例性实施例示出的另一种界面元素的显示装置框图。参照图9，上述第二显示单元123，包括第二显示子单元141、第一获取子单元142、第三显示子单元143。

该第二显示子单元141，被配置为在上述目标应用界面上显示处于第一展示状态的上述第一间距线，并显示处于第二展示状态的上述第二间距线；

该第一获取子单元142，被配置为在上述目标应用界面上获取第二目标指令，其中，上述第二目标指令用于切换上述第一间距线和上述第二间距线的显示状态；

该第三显示子单元143，被配置为响应于上述第二目标指令，在上述目标应用界面上显示处于上述第二展示状态的上述第一间距线，并显示处于上述第一展示状态的上述第二间距线。

在一种可选的实施例中，上述第二显示单元123，包括第四显示子单元151、第五显示子单元152。

该第四显示子单元151，被配置为在上述多个界面元素包括一个主界面元素和一个从界面元素时，在上述目标应用界面上显示上述从界面元素到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述一个从界面元素处于未被选中状态；

该第五显示子单元152，被配置为在上述多个界面元素包括一个主界面元素和多个从界面元素时，在上述目标应用界面上显示上述多个从界面元素中的每个从界面元素分别到上述主界面元素的间距线，其中，上述一个主界面元素处于被选中状态，上述多个从界面元素处于未被选中状态。

在一种可选的实施例中，上述第二显示单元123，包括第六显示子单元161；该第六显示子单元161，被配置为在上述多个界面元素包括N个主界面元素和N组从界面元素时，在上述目标应用界面上显示上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，其中，上述N个主界面元素和上述N组从界面元素具有一一对应关系，每个主界面元素对应上述N组从界面元素中的一组从界面元素，上述N为大于1的自然数，上述N个主界面元素处于被选中状态，上述N组从界面元素处于未被选中状态。

图10是根据一示例性实施例示出的又一种界面元素的显示装置框图。参照图10，上述第六显示子单元161，包括第七显示子单元171、第二获取子单元172、第八显示子单元173。

该第七显示子单元171，被配置为在上述目标应用界面上显示处于第一展示状态的第i组间距线，并显示除上述第i组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第i组间距线之外的上述N-1组间距线是N组间距线中除上述第i组间距线之外的N-1组间距线，上述N组间距线包括上述N组从界面元素中的每组从界面元素分别到上述N个主界面元素中对应的一个主界面元素的间距线，1≤i≤N，i和N均为正整数；

该第二获取子单元172，被配置为在上述目标应用界面上获取第三目标指令，其中，上述第三目标指令用于切换上述N组间距线的显示状态；

该第八显示子单元173，被配置为响应于上述第三目标指令，在上述目标应用界面上显示处于第一展示状态的第j组间距线，并显示除上述第j组间距线之外的处于第二展示状态的N-1组间距线，其中，除上述第j组间距线之外的上述N-1组间距线是上述N组间距线中除上述第j组间距线之外的N-1组间距线，1≤j≤N，j为与i不相等的正整数。

在一种可选的实施例中，上述装置还包括第九显示子单元181。

该第九显示子单元181，被配置为响应于上述第一目标指令，在上述目标应用界面上显示处于第一展示状态的上述多个界面元素，以及显示上述一组界面元素中除上述多个界面元素之外的处于第二展示状态的界面元素。

关于上述实施例中的装置，其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器，当上述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行任一项上述的模型训练方法。可选地，计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

根据本公开实施例，提供一种电子设备，图11是根据一示例性实施例示出的一种电子设备的框图，如图11所示，该电子设备可以包括：至少一个(图中仅示出一个)处理器901、存储器902、以及外设接口903。包括：处理器；用于存储上述处理器可执行指令的存储器；其中，上述处理器被配置为执行上述指令，以实现任一项上述的界面元素显示方法。可选地，存储器可包括高速随机存储器，还可以包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器可进一步包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

根据本公开实施例，提供一种计算机程序产品，包括计算机程序，上述计算机程序被处理器执行时实现任一项上述的界面元素显示方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种界面元素的显示方法，其特征在于，应用于对目标应用界面上设置的界面元素进行校验的过程中，包括：

在目标应用界面上显示一组界面元素；

在所述目标应用界面上获取第一目标指令，其中，所述第一目标指令用于选中所述一组界面元素中的多个界面元素；

响应于所述第一目标指令，在所述目标应用界面上选中所述多个界面元素，并在所述目标应用界面上显示所述多个界面元素之间的间距线，以及所述多个界面元素之间的距离值。

2.根据权利要求1所述的方法，其特征在于，所述在所述目标应用界面上显示所述多个界面元素之间的间距线，包括：

在所述多个界面元素包括第一界面元素和第二界面元素、且所述第一界面元素和所述第二界面元素均处于未被选中状态时，在所述目标应用界面上显示所述第一界面元素到所述第二界面元素的第一间距线，以及所述第二界面元素到所述第一界面元素的第二间距线。

3.根据权利要求2所述的方法，其特征在于，所述，在所述目标应用界面上显示所述第一界面元素到所述第二界面元素的第一间距线，以及所述第二界面元素到所述第一界面元素的第二间距线，包括：

在所述目标应用界面上显示处于第一展示状态的所述第一间距线，并显示处于第二展示状态的所述第二间距线；

在所述目标应用界面上获取第二目标指令，其中，所述第二目标指令用于切换所述第一间距线和所述第二间距线的显示状态；

响应于所述第二目标指令，在所述目标应用界面上显示处于所述第二展示状态的所述第一间距线，并显示处于所述第一展示状态的所述第二间距线。

4.根据权利要求1所述的方法，其特征在于，所述在所述目标应用界面上显示所述多个界面元素之间的间距线，包括：

在所述多个界面元素包括一个主界面元素和一个从界面元素时，在所述目标应用界面上显示所述从界面元素到所述主界面元素的间距线，其中，所述一个主界面元素处于被选中状态，所述一个从界面元素处于未被选中状态；或者

在所述多个界面元素包括一个主界面元素和多个从界面元素时，在所述目标应用界面上显示所述多个从界面元素中的每个从界面元素分别到所述主界面元素的间距线，其中，所述一个主界面元素处于被选中状态，所述多个从界面元素处于未被选中状态。

5.根据权利要求1所述的方法，其特征在于，所述在所述目标应用界面上显示所述多个界面元素之间的间距线，包括：

在所述多个界面元素包括N个主界面元素和N组从界面元素时，在所述目标应用界面上显示所述N组从界面元素中的每组从界面元素分别到所述N个主界面元素中对应的一个主界面元素的间距线，其中，所述N个主界面元素和所述N组从界面元素具有一一对应关系，每个主界面元素对应所述N组从界面元素中的一组从界面元素，所述N为大于1的自然数，所述N个主界面元素处于被选中状态，所述N组从界面元素处于未被选中状态。

6.根据权利要求5所述的方法，其特征在于，所述在所述目标应用界面上显示所述N组从界面元素中的每组从界面元素分别到所述N个主界面元素中对应的一个主界面元素的间距线，包括：

在所述目标应用界面上显示处于第一展示状态的第i组间距线，并显示除所述第i组间距线之外的处于第二展示状态的N-1组间距线，其中，除所述第i组间距线之外的所述N-1组间距线是N组间距线中除所述第i组间距线之外的N-1组间距线，所述N组间距线包括所述N组从界面元素中的每组从界面元素分别到所述N个主界面元素中对应的一个主界面元素的间距线，1≤i≤N，i和N均为正整数；

在所述目标应用界面上获取第三目标指令，其中，所述第三目标指令用于切换所述N组间距线的显示状态；

响应于所述第三目标指令，在所述目标应用界面上显示处于第一展示状态的第j组间距线，并显示除所述第j组间距线之外的处于第二展示状态的N-1组间距线，其中，除所述第j组间距线之外的所述N-1组间距线是所述N组间距线中除所述第j组间距线之外的N-1组间距线，1≤j≤N，j为与i不相等的正整数。

7.根据权利要求1至6中任一项所述的方法，其特征在于，在所述目标应用界面上获取第一目标指令之后，所述方法还包括：

响应于所述第一目标指令，在所述目标应用界面上显示处于第一展示状态的所述多个界面元素，以及显示所述一组界面元素中除所述多个界面元素之外的处于第二展示状态的界面元素。

8.一种界面元素的显示装置，其特征在于，应用于对目标应用界面上设置的界面元素进行校验的过程中，包括：

第一显示单元，被配置为执行在目标应用界面上显示一组界面元素；

获取单元，被配置为执行在所述目标应用界面上获取第一目标指令，其中，所述第一目标指令用于选中所述一组界面元素中的多个界面元素；

第二显示单元，被配置为执行响应于所述第一目标指令，在所述目标应用界面上选中所述多个界面元素，并在所述目标应用界面上显示所述多个界面元素之间的间距线，以及所述多个界面元素之间的距离值。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的界面元素显示方法。

10.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1至7中任一项所述的界面元素显示方法。

Images