一种网页用户界面与设计稿的对比方法、装置及终端设备制造方法及图纸

本发明专利技术适用于计算机数据处理技术领域，提供了一种网页用户界面与设计稿的对比方法、装置及终端设备，所述方法包括：获取待审核的网页用户界面，获取与所述网页用户界面对应的设计稿的尺寸信息；对所述网页用户界面进行尺寸变换，得到与所述设计稿具有相同图片比例的目标用户界面；分别对所述目标用户界面和所述设计稿进行颜色处理；将经过颜色处理后的所述目标用户界面和经过颜色处理后的所述设计稿进行比对，得到比对结果。本发明专利技术实现了对网页用户界面快速准确地审核。

A comparison method, device and terminal device between web user interface and design draft

The invention is applicable to the technical field of computer data processing, and provides a comparison method, device and terminal device of web user interface and design draft. The method includes: obtaining the web user interface to be audited, obtaining the size information of design draft corresponding to the web user interface, carrying out the size transformation of the web user interface, and obtaining the design draft with Target user interface with the same picture proportion; color processing of the target user interface and the design draft respectively; comparing the target user interface after color processing with the design draft after color processing to obtain the comparison result. The invention realizes fast and accurate audit of web user interface.

【技术实现步骤摘要】
一种网页用户界面与设计稿的对比方法、装置及终端设备
本专利技术属于计算机数据处理
，尤其涉及一种网页用户界面与设计稿的对比方法、装置及终端设备。
技术介绍
随着计算机网络技术的发展，网页应用程序越来越复杂多样，开发团队的分工也越来越细致。现今，大多数网页应用程序的制作团队中，从设计师设计出网页用户界面的设计稿，到前端开发人员实现网页用户界面，经历的是不同的人员；此外，由于设计师设计出设计稿和前端开发人员实现网页用户界面所使用的技术也不相同，因而导致前端开发人员实现的网页用户界面和设计师的设计稿存在差异。因此，亟需一种网页用户界面与设计稿的对比方法，快速准确地实现对网页用户界面的审核。
技术实现思路
有鉴于此，本专利技术实施例提供了一种网页用户界面与设计稿的对比方法、装置及终端设备，以实现对网页用户界面快速准确地审核。本专利技术实施例的第一方面提供了一种网页用户界面与设计稿的对比方法，包括：获取待审核的网页用户界面，获取与所述网页用户界面对应的设计稿的尺寸信息；对所述网页用户界面进本文档来自技高网...

【技术保护点】
1.一种网页用户界面与设计图的对比方法，其特征在于，包括：/n获取待审核的网页用户界面，获取与所述网页用户界面对应的设计稿的尺寸信息；/n对所述网页用户界面进行尺寸变换，得到与所述设计稿具有相同图片比例的目标用户界面；/n分别对所述目标用户界面和所述设计稿进行颜色处理；/n将经过颜色处理后的所述目标用户界面和经过颜色处理后的所述设计稿进行比对，得到比对结果。/n

【技术特征摘要】
1.一种网页用户界面与设计图的对比方法，其特征在于，包括：
获取待审核的网页用户界面，获取与所述网页用户界面对应的设计稿的尺寸信息；
对所述网页用户界面进行尺寸变换，得到与所述设计稿具有相同图片比例的目标用户界面；
分别对所述目标用户界面和所述设计稿进行颜色处理；
将经过颜色处理后的所述目标用户界面和经过颜色处理后的所述设计稿进行比对，得到比对结果。


2.如权利要求1所述的对比方法，其特征在于，所述对所述网页用户界面进行尺寸变换，得到与所述设计稿具有相同图片比例的目标用户界面，包括：
根据所述设计稿的尺寸信息，计算所述设计稿的长与高的比例；
将所述网页用户界面按照所述比例进行拉伸或缩放得到目标用户界面。


3.如权利要求1所述的对比方法，其特征在于，
所述分别对所述目标用户界面和所述设计稿进行颜色处理，包括：
分别计算所述目标用户界面中每个像素点的RGB值的反转值；
分别计算所述目标用户界面中每个像素点的所述反转值的平均值记为第一平均值；
分别计算所述设计稿中每个像素点的RGB值的平均值记为第二平均值；
相应的，所述将经过颜色处理后的所述目标界面和经过颜色处理后的所述设计稿进行比对，得到比对结果，包括：
针对所述目标用户界面中与所述设计稿中两个对应的像素点而言，计算所述第一平均值与所述第二平均值的平均值总和；
将所述平均值总和等于255的所述第一平均值对应的所述目标用户界面中的像素点确定为合格像素点，并对所述合格像素点进行第一标记；
将所述平均值总和大于或小于255的所述第一平均值对应的所述目标用户界面中的像素点确定为不合格像素点，并对所述不合格像素点进行第二标记。


4.如权利要求3所述的对比方法，其特征在于，在所述对所述不合格像素点进行第二标记之后，还包括：
计算所述不合格像素点占所述目标用户界面的总像素点的比例，
若所述比例小于或等于预设比例阈值，则判定所述网页用户界面合格。


5.如权利要求3或4所述的对比方法，其特征在于，在所述对所述不合格像素点进行第二标记之后，还包括：
根据所述第二标记确定所述目标用户界面中的异常区域；
确定所述异常区域在所述设计稿中对应的设计区域，并确定所述设计区域所在的设计页面元素；
在所述目标用户界面中确定与所述设计页面元素对应的异常页面元素；
获取所述异常页面元素在所述目标用户界面中的第一元素信息，并获取所述设计页面元素在所述设计稿中的第二元素信息；
将所述第一元素信息和所述第二元素信息进行匹配；
若所述第一元素信息与所述第二元素信息不匹配，...

【专利技术属性】
技术研发人员：林泽全，
申请(专利权)人：平安普惠企业管理有限公司，
类型：发明
国别省市：广东;44