CN113626018A - 一种应用界面设计方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种应用界面设计方法、装置、电子设备及存储介质，该方法包括：响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；响应于针对至少一个控件中任一目标控件的移动指令，对目标控件进行移动；若目标控件对应的第一控件辅助线与非目标控件对应的第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线，将目标控件与非目标控件进行对齐操作；响应于退出控件调整指令，将至少一个控件设置为非移动状态。本发明实施例可实现对目标编程页面中的控件进行自定义布局时，可通过控件的辅助线将各个控件进行对齐，操作方法简单，减少了自定义布局的操作时间，为用户布局控件提供了方便。

Description

一种应用界面设计方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种应用界面设计方法、装置、电子设备及存储介质。

背景技术

在以往的图形化编程编辑器中，有两种方式实现界面布局：相对定位和绝对定位。

相对定位的编辑器中通过将控件放在多个不同的布局容器中实现控件自动布局。

绝对定位的编辑器中如果要实现直观地、所见即所得的编辑，则是用户直接通过在舞台区拖拽控件放置到大致的位置。如果要实现精准定位和布局，则需要通过逐个控件的坐标计算和设置，达到控件对齐、美观的界面设计。

相对定位的编辑器布局设计不直观，运行态的控件位置和布局需要运行后再计算渲染出来，导致运行态和编辑态的界面样式完全不一致，设计时无法看到最终应用真实效果。

绝对定位的编辑器通过拖拽控件放置在舞台上指定区域实现直观快速的布局，但存在控件无法对齐导致制作出来的应用视觉上不够整洁美观；使用调节每个控件的坐标进行精准对齐的方式操作成本高。

现有的编辑器中控件的布局方法较复杂，布局效果差。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种应用界面设计方法、装置、电子设备及存储介质，旨在解决现有技术中编辑器中控件的布局方法较复杂，布局效果差的问题。

本发明的技术方案如下：

本发明第一实施例提供了一种应用界面设计方法，方法包括：

响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

响应于针对所述至少一个控件中任一目标控件的移动指令，对所述目标控件进行移动；

若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，所述第一控件辅助线为所述目标控件的辅助线，所述第二控件辅助线为所述非目标控件的辅助线；

基于所述第一控件辅助线和所述第二控件辅助线，将所述目标控件与非目标控件进行对齐操作；

响应于退出控件调整指令，将所述至少一个控件设置为非移动状态。

进一步地，所述响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态后，所述方法还包括：

响应于画面调整指令，在所述目标编程页面上展示全局辅助线；

响应于针对全局辅助线移动指令，展示移动过程中的全局辅助线。

进一步地，所述若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线，包括：

若第一控件辅助线与第二控件辅助线的距离小于等于预设的像素阈值，则展示第一控件辅助线和第二控件辅助线。

进一步地，所述展示第一控件辅助线和第二控件辅助线前，所述方法还包括：

通过第一矩形区域对所述至少一个目标控件进行表征，所述第一矩形区域包括第一长边、第二长边、第一短边和第二短边；

通过第二矩形区域对所述至少一个非目标控件进行表征，所述第二矩形区域包括第三长边、第四长边、第三短边和第四短边。

进一步地，所述展示第一控件辅助线，包括：

在目标编程页面中展示所述第一控件辅助线，所述第一控件辅助线包括第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线；

其中，所述第一水平中线为通过所述第一短边辅助线、所述第二短边辅助线的中点，且与所述第一短边辅助线垂直的直线；

所述第一垂直中线为通过所述第一长边辅助线、所述第二长边辅助线的中点，且与所述第一长边辅助线垂直的直线。

进一步地，所述展示所述第二控件辅助线，包括：

展示目标编程页面中所述非目标控件的所述第二控件辅助线，所述第二控件辅助线包括第三长边辅助线、第四长边辅助线、第三短边辅助线、第四短边辅助线、第二水平中线和第二垂直中线；

其中，所述第二水平中线为通过所述第三短边辅助线、所述第四短边辅助线的中点，且与所述第三短边辅助线垂直的直线；

所述第二垂直中线为通过所述第三长边辅助线、所述第四长边辅助线的中点，且与所述第三长边辅助线垂直的直线。

进一步地，所述若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，包括以下至少一项：

当检测到所述第一控件辅助线与所述第二控件辅助线的第三长边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第四长边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第三短边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第四短边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第二水平中线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第二垂直中线的距离满足预设的阈值条件。

本发明的另一实施例提供了一种应用界面设计装置，装置包括：

设置模块，用于响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

移动模块，用于响应于针对所述至少一个控件中任一目标控件的移动指令，对所述目标控件进行移动；

展示模块，用于若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，所述第一控件辅助线为所述目标控件的辅助线，所述第二控件辅助线为所述非目标控件的辅助线；

对齐模块，用于基于所述第一控件辅助线和所述第二控件辅助线，将所述目标控件与非目标控件进行对齐操作；

所述设置模块，还用于响应于退出控件调整指令，将所述至少一个控件设置为非移动状态。

本发明的另一实施例提供了一种电子设备，所述电子设备包括至少一个处理器；以及，

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

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的应用界面设计方法。

本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的应用界面设计方法。

有益效果：本发明实施例可实现对目标编程页面中的控件进行自定义布局时，可通过控件的辅助线将各个控件进行对齐，操作方法简单，减少了自定义布局的操作时间，为用户布局控件提供了方便。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1为本发明一种应用界面设计方法较佳实施例的流程图；

图2为本发明一种应用界面设计方法的具体应用实施例的控件辅助线的示意图；

图3为本发明一种应用界面设计方法的具体应用实施例的全局辅助线的示意图；

图4为本发明一种应用界面设计装置的较佳实施例的功能模块示意图；

图5为本发明一种电子设备的较佳实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

以下结合附图对本发明实施例进行介绍。

本发明实施例提供了一种应用界面设计方法，请参阅图1，图1为本发明一种应用界面设计方法较佳实施例的流程图。如图1所示，其包括步骤：

步骤S100、响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

具体地，本发明实施例可用于图形化编程页面的客户端，可通过户端对应用界面设计方法进行处理。当用户进入图形化编程页面时，当前的图形化编程页面即为目标编程页面。接收到用户发起的控件调整指令时，对目标编程页面中的至少一个控件的状态进行检测，其中，控件的状态包括移动状态和非移动状态，移动状态表示当前可以基于移动指令进行移动，非移动状态表示控件当前不能基于移动指令进行移动。

其中控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能、控件创建过程包括设计、开发、调试(就是所谓的3Ds开发流程,即Design、Develop、Debug)工作，然后是控件的使用等数据。

当检测到至少一个控件处于非移动状态时，则即可将至少一个控件的状态设置为移动状态。

以计算机为例，其中组件调整指令可以是通过用户在目标编程页面上对控件的双击操作或是用户在目标编程页面上对控件执行右击操作。组件调整指令也可以是用户在触屏移动终端上目标编程页面的控件上的按压预设时长触发，比如用户在目标编程页面的控件上按压5s触发控件调整指令；还可通过其他方式触发控件调整指令，在实际应用中，可以根据实际需求进行限制，本发明实施例对此不作限制。

步骤S200、响应于针对至少一个控件中任一目标控件的移动指令，对目标控件进行移动；

具体地，当客户端接收到用户发起的对针对至少一个控件中任一目标控件的移动指令，对该目标控件进行移动。

移动指令可能通过用户对目标控件的拖拽发起，也可通过其他方式发起，在实际应用中，可以根据需求进行限制，本发明实施例对此不作限制。

步骤S300、若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，第一控件辅助线为目标控件的辅助线，第二控件辅助线为非目标控件的辅助线。

具体实施时，在目标控件的移动过程中，同时展示目标编程页面中除目标控件外其他控件。将除目标控件外的其他控件记为非目标控件。

获取第一控件辅助线与第二控件辅助线的距离关系，若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，在目标编程页面上对目标控件的第一控件辅助线以及非目标控件对应的第二控件辅助线进行展示。

步骤S400、基于第一控件辅助线和第二控件辅助线，将目标控件与非目标控件进行对齐操作。

具体实施时，当第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件后，将目标控件与非目标进行吸附对齐，实现两个控件的自动对齐操作。

步骤S500、响应于退出控件调整指令，将至少一个控件设置为非移动状态。

具体实施时，当客户端接收到用户发起的控件调整指令，即可将至少一个控件设置为非移动状态。

通过响应于控件调整指令，将目标编程页面中至少一个控件设置为移动状态，然后响应于至少一个控件中任一目标控件的移动指令，对目标控件进行移动，移动过程中，若检测目标控件对应的第一控件辅助线与非目标控件对应的第二控件辅助线满足预设条件时，展示目标控件的第一控件辅助线及非目标控件的第二控件辅助线，并根据第一控件辅助线与第二控件辅助线间的关系，完成目标控件与其他控件的对齐操作，检测到移动指令停止时，再响应于退出控件调整指令；将至少一个控件设置为非移动状态。因此，用户在对客户端的目标编程页面中的控件进行自定义布局时，可以通过辅助线的方式将目标控件与其他的控件进行吸附对齐，大大减少了自定义布局时的操作时间。

在一个实施例中，响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态后，方法还包括：

响应于画面调整指令，在目标编程页面上展示全局辅助线；

响应于针对全局辅助线移动指令，展示移动过程中的全局辅助线。

具体实施时，本发明实施例的目标编程页面还设置有全局辅助线，全局辅助线为一个矩形来进行表征。当检测到用户的画面调整指令，目标编程页面的编程区域构成的矩形边上各显示一条直线，共四条直线。当检测到用户拖动其中一条直线时，在目标编程页面上展示移动过程的全局辅助线。

进一步地，当检测到目标控件与全局辅助线的距离满足预设的条件时，也可将目标控件与全局辅助线进行吸附对齐，完成目标编程页面的整体布局划分，将具体控件的设计规范在一定的布局内。

在一个实施例中，若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线，包括：

若第一控件辅助线与第二控件辅助线的距离小于等于预设的像素阈值，则展示第一控件辅助线和第二控件辅助线。

具体实施时，预先对预设的像素阈值进行设置，例如，预设的像素阈值设为3pixel。若第一控件辅助线与第二控件辅助线的距离小于3pix时，则展示第一控件辅助线和第二控件辅助线。在实际应用中，可以根据需求对预设的像素阈值进行限制，本发明实施例对此不作限制。

在一个实施例中，展示第一控件辅助线和第二控件辅助线前，方法还包括：

通过第一矩形区域对至少一个目标控件进行表征，第一矩形区域包括第一长边、第二长边、第一短边和第二短边；

通过第二矩形区域对至少一个非目标控件进行表征，第二矩形区域包括第三长边、第四长边、第三短边和第四短边。

具体实施时，在实际应用中，由于控件的形状存在多样性，某些特殊形状的控件的边缘并不好确定，比如圆形、梯形等等，导致难以检测控件的边缘间距，所以，在本发明实施例中，每个控件通过矩形区域表征，矩形区域为包含控件形状的最小面积的区域，这样，控件的边缘即是矩形区域的边缘。

通过第一矩形区域对目标控件进行表征，第一矩形区域包括两个长边和两个短边，两个长边分别记为第一长边、第二长边；两个短边分别记为第一短边和第二长边。

通过第二矩形区域对非目标控件进行表征，第二矩形区域包括两个长边和两个短边，两个长边分别记为第三长边、第四长边；两个短边分别记为第三短边和第四短边。

在一些其他的实施例，也可用圆形对控件进行表征。在实际应用中，可以根据需求采用不同的图形对控件进行表征进行限制，本发明实施例对此不作限制。

在一个实施例中，展示第一控件辅助线，包括：

在目标编程页面中展示目标控件的第一控件辅助线，第一控件辅助线包括第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线；

其中，第一水平中线为通过第一短边辅助线、第二短边辅助线的中点，且与第一短边辅助线垂直的直线；

第一垂直中线为通过第一长边辅助线、第二长边辅助线的中点，且与第一长边辅助线垂直的直线。

具体实施时，在确定目标控件的第一控件辅助线时，可通过目标控件对应的第一矩形区域的相关参数来进行确定。例如，将第一矩形区域的第一长边记为第一长边辅助线；第二长边记为第二长边辅助线；第一短边记为第一短边辅助线；第二短边记为第二短边辅助线，以及通过第一短边辅助线、第二短边辅助线的中点，且与第一短边辅助线垂直的直线，记为第一水平中线；将通过第一长边辅助线、第二长边辅助线的中点，且与第一长边辅助线垂直的直线，记为第一垂直中线。

通过第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线记为目标控件的第一控件辅助线。

在一些其他的实施例中，也可以通过将矩形区域的第一长边、第二长边以及第一短边和第二短边作为目标控件的第一控件辅助线；或是将矩形区域的第一水平中线和第一垂直中线作为目标控件的第一控件辅助线。

在实际应用中，第一控件辅助线可以根据需求进行限制，本发明实施例对此不作限制。

在一个实施例中，展示第二控件辅助线，包括：

展示第二控件辅助线，第二控件辅助线包括第三长边辅助线、第四长边辅助线、第三短边辅助线、第四短边辅助线、第二水平中线和第二垂直中线；

其中，第二水平中线为通过第三短边辅助线、第四短边辅助线的中点，且与第三短边辅助线垂直的直线；

第二垂直中线为通过第三长边辅助线、第四长边辅助线的中点，且与第三长边辅助线垂直的直线。

具体实施时，在确定非目标控件的第二控件辅助线时，可通过非目标控件对应的第二矩形区域的相关参数来进行确定。非目标控件对应的第二矩形区域的第三长边记为第三长边辅助线；第四长边记为第四长边辅助线；第三短边记为第三短边辅助线；第四短边记为第四短边辅助线，以及将通过第三短边辅助线、第四短边辅助线的中点，且与第三短边辅助线垂直的直线，记为第二水平中线；将通过第三长边辅助线、第四长边辅助线的中点，且与第三长边辅助线垂直的直线，记为第二垂直中线。

通过第三长边辅助线、第四长边辅助线、第三短边辅助线、第四短边辅助线、第二水平中线和第二垂直中线记为非目标控件对应的第二控件辅助线。

在一些其他的实施例中，与目标控件的第一控件辅助线对应，也可以将非目标矩形区域的第三长边、第四长边、第三短边及第四短边作为目标控件的第二控件辅助线；或是将矩形区域的第二水平中线和第二垂直中线作为目标控件的第二控件辅助线。

在实际应用中，第二控件辅助线可以根据需求进行限制，本发明实施例对此不作限制。

在一个实施例中，第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，包括以下至少一项：

当检测到第一控件辅助线与第二控件辅助线的第三长边辅助线的距离满足预设的阈值条件；

当检测到第一控件辅助线与第二控件辅助线的第四长边辅助线的距离满足预设的阈值条件；

当检测到第一控件辅助线与第二控件辅助线的第三短边辅助线的距离满足预设的阈值条件；

当检测到第一控件辅助线与第二控件辅助线的第四短边辅助线的距离满足预设的阈值条件；

当检测到第一控件辅助线与第二控件辅助线的第二水平中线的距离满足预设的阈值条件；

当检测到第一控件辅助线与第二控件辅助线的第二垂直中线的距离满足预设的阈值条件。

具体实施时，当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线的任意一条直线与第二控件辅助线的第三长边辅助线的距离满足预设的阈值条件；则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线的任意一条直线与第二控件辅助线的第四长边辅助线的距离满足预设的阈值条件；则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线中的任意一条直线与第二控件辅助线的第三短边辅助线的距离满足预设的阈值条件；则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线中的任意一条直线与第二控件辅助线的第四短边辅助线的距离满足预设的阈值条件；则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线中的任意一条直线与第二控件辅助线的第二水平中线的距离满足预设的阈值条件，则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

当检测到第一控件辅助线的第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线中的任意一条直线与第二控件辅助线的第二垂直中线的距离满足预设的阈值条件；则判定第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件。

其中，预设的阈值条件是指第一控件辅助线与第二控件辅助线的距离小于预设的像素阈值，预先对预设的像素阈值进行设置，例如，预设的像素阈值设为3pixel。若第一控件辅助线与第二控件辅助线的距离小于3pix时，则执行后续的目标控件与非目标控件进行吸附对齐操作。

本发明实施例实现了辅助线和对齐吸附的交互方式，使用户在进行应用界面的控件设计时方便快捷地实现对齐和布局，使用户能够更加低门槛快捷地做出一个符合设计规范的应用。

在一个实施例中，以目标编程界面为图形化编程界面为例，图形化编程界面包括事件驱动界面、舞台界面等部分组成，由图2所示，图形化编程界面为的控件为播放键控件，该播放键控件都存在上下左右四条边缘线和水平垂直两条中线，用户在拖拽播放键控件过程中，播放键控件与其他控件的任意一条辅助线的距离接近3px，会出现对齐辅助线并且自动吸附到辅助线，完成控件的对齐设计。

进一地，如图3所示，从舞台区左侧和上侧的标尺处可以拖拽出全局辅助线，用户可使用全局辅助线进行屏幕界面的整体布局划分，将具体元素的设计规范在一定的布局中。

采用上述方法相较于传统的绝对定位编辑器，保证了用户在设计界面阶段的所见即所得，直观地拖拽放置到的位置就是最终应用的效果。相较于传统的相对定位编辑器，增加了对齐辅助线和靠近吸附的功能，使得用户方便快捷地就能将控件对齐在同一条线上，保证产出应用界面的整洁美观，极大地提升应用设计的效率。

需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。

本发明另一实施例提供一种应用界面设计装置，如图4所示，装置1包括：

设置模块11，用于响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

移动模块12，用于响应于针对至少一个控件中任一目标控件的移动指令，对目标控件进行移动；

展示模块13，用于若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，第一控件辅助线为目标控件的辅助线，第二控件辅助线为非目标控件的辅助线；

对齐模块14，用于基于第一控件辅助线和第二控件辅助线，将目标控件与非目标控件进行对齐操作；

设置模块11，还用于响应于退出控件调整指令，将至少一个控件设置为非移动状态。

具体实施方式见方法实施例，此处不再赘述。

本发明另一实施例提供一种电子设备，如图5所示，电子设备10包括：

一个或多个处理器110以及存储器120，图5中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图5中以通过总线连接为例。

处理器110用于完成电子设备10的各种控件逻辑，其可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISCMachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件控件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何其它这种配置。

存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的应用界面设计方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行设备10的各种功能应用以及数据处理，即实现上述方法实施例中的应用界面设计方法。

存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据设备10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的应用界面设计方法，例如，执行以上描述的图1中的方法步骤S100至步骤S500。

本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤S100至步骤S500。

作为示例，非易失性存储介质能够包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦ROM(EEPROM)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(RAM)。通过说明并非限制，RAM可以以诸如同步RAM(SRAM)、动态RAM、(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强型SDRAM(ESDRAM)、Synchlink DRAM(SLDRAM)以及直接Rambus(兰巴斯)RAM(DRRAM)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器控件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。

本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使处理器执行上述方法实施例的应用界面设计方法。例如，执行以上描述的图1中的方法步骤S100至步骤S500。

以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。

通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。

除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。

已经在本文中在本说明书和附图中描述的内容包括能够提供应用界面设计方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。

Claims (10)

1.一种应用界面设计方法,其特征在于,所述方法包括：

响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

响应于针对所述至少一个控件中任一目标控件的移动指令，对所述目标控件进行移动；

若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，所述第一控件辅助线为所述目标控件的辅助线，所述第二控件辅助线为所述非目标控件的辅助线；

基于所述第一控件辅助线和所述第二控件辅助线，将所述目标控件与非目标控件进行对齐操作；

响应于退出控件调整指令，将所述至少一个控件设置为非移动状态。

2.根据权利要求1所述的方法，其特征在于，所述响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态后，所述方法还包括：

响应于画面调整指令，在所述目标编程页面上展示全局辅助线；

响应于针对全局辅助线移动指令，展示移动过程中的全局辅助线。

3.根据权利要求1或2所述的方法，其特征在于，所述若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线，包括：

若第一控件辅助线与第二控件辅助线的距离小于等于预设的像素阈值，则展示第一控件辅助线和第二控件辅助线。

4.根据权利要求1所述的方法，其特征在于，所述展示第一控件辅助线和第二控件辅助线前，所述方法还包括：

通过第一矩形区域对所述至少一个目标控件进行表征，所述第一矩形区域包括第一长边、第二长边、第一短边和第二短边；

通过第二矩形区域对所述至少一个非目标控件进行表征，所述第二矩形区域包括第三长边、第四长边、第三短边和第四短边。

5.根据权利要求4所述的方法，其特征在于，所述展示第一控件辅助线，包括：

在目标编程页面中展示所述第一控件辅助线，所述第一控件辅助线包括第一长边辅助线、第二长边辅助线、第一短边辅助线、第二短边辅助线、第一水平中线和第一垂直中线；

其中，所述第一水平中线为通过所述第一短边辅助线、所述第二短边辅助线的中点，且与所述第一短边辅助线垂直的直线；

所述第一垂直中线为通过所述第一长边辅助线、所述第二长边辅助线的中点，且与所述第一长边辅助线垂直的直线。

6.根据权利要求4所述的方法，其特征在于，所述展示所述第二控件辅助线，包括：

展示目标编程页面中所述非目标控件的所述第二控件辅助线，所述第二控件辅助线包括第三长边辅助线、第四长边辅助线、第三短边辅助线、第四短边辅助线、第二水平中线和第二垂直中线；

其中，所述第二水平中线为通过所述第三短边辅助线、所述第四短边辅助线的中点，且与所述第三短边辅助线垂直的直线；

所述第二垂直中线为通过所述第三长边辅助线、所述第四长边辅助线的中点，且与所述第三长边辅助线垂直的直线。

7.根据权利要求6所述的方法，其特征在于，所述若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，包括以下至少一项：

当检测到所述第一控件辅助线与所述第二控件辅助线的第三长边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第四长边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第三短边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第四短边辅助线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第二水平中线的距离满足预设的阈值条件；

当检测到所述第一控件辅助线与所述第二控件辅助线的第二垂直中线的距离满足预设的阈值条件。

8.一种应用界面设计装置，其特征在于，所述装置包括：

设置模块，用于响应于控件调整指令，将目标编程页面中的至少一个控件设置为移动状态；

移动模块，用于响应于针对所述至少一个控件中任一目标控件的移动指令，对所述目标控件进行移动；

展示模块，用于若第一控件辅助线与第二控件辅助线的距离满足预设的阈值条件，则展示第一控件辅助线和第二控件辅助线；其中，所述第一控件辅助线为所述目标控件的辅助线，所述第二控件辅助线为所述非目标控件的辅助线；

对齐模块，用于基于所述第一控件辅助线和所述第二控件辅助线，将所述目标控件与非目标控件进行对齐操作；

所述设置模块，还用于响应于退出控件调整指令，将所述至少一个控件设置为非移动状态。

9.一种电子设备，其特征在于，所述电子设备包括至少一个处理器；以及，

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

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

10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的应用界面设计方法。

Images