[发明专利]用户界面调整方法、装置、存储介质及电子设备

说明书

本公开实施例公开了一种用户界面调整方法和装置，其中，该方法包括：获取预设的参考界面图像；将参考界面图像以预设透明度显示在用于绘制用户界面的绘制区域上；基于对参考界面图像进行调整的操作，调整参考界面图像的属性，并将调整属性后的参考界面作为调整用户界面的参考；基于对用户界面进行调整的操作，调整用户界面，以使用户界面与参考界面图像重合。本公开实施例可以实时地将用户界面与参考界面图像比对，使设计人员能够实时地观察当前设计的用户界面是否与参考界面图像一致，并调整用户界面，提高了用户界面设计的精准性，降低用户界面与参考界面图像的误差。

技术领域

本公开涉及计算机技术领域，尤其是一种用户界面调整方法、装置、计算机可读存储介质及电子设备。

背景技术

在UI(User Interface)设计领域，传统的测试方法都是用肉眼对比原始设计图与设计界面，严谨的UI设计还会截图画横线逐行对比，如果能在开发过程中及时调整UI，就可以高质量地完成其视觉测试。

视觉测试通常包括以下方式：

1、基于屏幕截图。

2、基于断言库和JS(JavaScript)计算属性。

第一种方案基于屏幕截图只能在UI可预测的情况下工作，在测试运行期间测试静态页面或使用伪造数据。第二种方案基于断言库和JS计算属性需要一些测试断言，具有很强的绑定性。

发明内容

本公开的实施例提供了一种用户界面调整方法、装置、计算机可读存储介质及电子设备。

本公开的实施例提供了一种用户界面调整方法，该方法包括：获取预设的参考界面图像；将参考界面图像以预设透明度显示在用于绘制用户界面的绘制区域上；基于对参考界面图像进行调整的操作，调整参考界面图像的属性，并将调整属性后的参考界面作为调整用户界面的参考；基于对用户界面进行调整的操作，调整用户界面，以使用户界面与参考界面图像重合。

在一些实施例中，基于对参考界面图像进行调整的操作，调整参考界面图像的属性，包括：响应于对参考界面图像进行调整尺寸的操作，将参考界面图像调整至目标尺寸。

在一些实施例中，基于对参考界面图像进行调整的操作，调整参考界面图像的属性，包括：响应于对参考界面图像进行恢复位置的操作，将参考界面图像调整至初始位置。

在一些实施例中，基于对参考界面图像进行调整的操作，调整参考界面图像的属性，包括：响应于对参考界面图像进行滚动固定切换操作，基于滚动固定切换操作，将参考界面图像调整为固定显示或滚动显示。

在一些实施例中，基于对参考界面图像进行调整的操作，调整参考界面图像的属性，包括：响应于对参考界面图像进行调整透明度的操作，将参考界面图像的透明度调制至目标透明度。

在一些实施例中，基于对参考界面图像进行调整的操作，调整参考界面图像的属性，包括：响应于对参考界面图像进行颜色反相的操作，将参考界面图像的颜色反相显示。

在一些实施例中，基于对用户界面进行调整的操作，调整用户界面：响应于在绘制区域上添加分割线的操作，在绘制区域上显示用于辅助对用户界面进行尺寸调整的分割线，其中，分割线包括以下至少一种：横向分割线、纵向分割线。

在一些实施例中，基于对用户界面进行调整的操作，调整用户界面，包括：响应于对用户界面进行界面元素颜色校验的操作，基于输入的类名和颜色信息进行界面元素颜色校验。