A method for realizing cross-platform UI alignment detection based on UI design draft

Abstract

The present invention discloses a method for realizing cross-platform UI alignment detection based on UI design draft. Compared with the prior art solutions, the innovation of the present invention lies in: 1) Automation and intelligence: by extracting JSON description information from the UI design draft, automatic labeling and comparison of layout and style are realized, which greatly improves the detection efficiency. No manual investigation and manual measurement are required, which reduces labor costs and human errors. 2) Cross-platform versatility: not limited to a specific platform or framework, it can be applied to a variety of scenarios to ensure UI consistency on different platforms. Unified JSON description information and comparison algorithms provide a basis for cross-platform UI alignment detection. 3) Multi-dimensional testing: testable dimensions include position layout, spacing, background color, text size, icon size, etc., covering the main aspects of UI alignment detection. Comprehensive test dimensions ensure the accuracy and reliability of UI consistency.

Description

Technical Field

[0001] The invention relates to a UI alignment detection method. Background Art

[0002] In modern software development, UI consistency is one of the important factors to ensure user experience. However, traditional UI alignment detection methods mainly rely on manual troubleshooting and manual measurement, which is not only time-consuming and labor-intensive, but also prone to errors. In addition, some existing automated UI testing frameworks are limited to specific platforms and cannot achieve cross-platform versatility. These problems seriously hinder the development team's ability to ensure UI consistency during rapid iteration. Summary of the invention

[0003] The purpose of the present invention is to propose a new UI alignment detection solution, which can automatically detect UI alignment, improve detection efficiency, reduce labor costs, and achieve cross-platform versatility.

[0004] In order to achieve the above object, the technical solution of the present invention is to disclose a method for realizing cross-platform UI alignment detection based on UI design draft, which is characterized by comprising the following steps:

[0005] Step 1: Use the design draft intelligent parsing tool to automatically extract the key UI layout and style information of different UI elements from UI design drafts of different screen sizes, store the obtained information in JSON format, and obtain the design draft JSON information;

[0006] At the same time, the client page screenshot module is used to automatically capture real-time screenshots of the client page on different target platforms;

[0007] Step 2: Analyze and detect the actual UI element information of each UI element in the real-time screenshot;

[0008] Step 3: Compare the actual UI element information obtained in step 2 with the UI layout and style information of the same UI element in the design draft JSON information obtained in step 1, obtain the difference between the actual UI element information and the UI layout and style information of different UI elements, and automatically generate a difference information file, which records in detail the expected and actual status of each UI element and the difference between them through the difference information file;

[0009] Step 4: Use the test report generation module to generate a detailed test report based on the difference information file, providing clear improvement directions for the development and design teams.

[0010] Preferably, in step 1, the extracted key layout and style information includes the position coordinates, size, color, and font size of the UI elements.

[0011] Preferably, in step 2, an image processing library is used to analyze and detect real-time screenshots, actual UI element information of each UI element is extracted, and computer vision technology is combined to identify and locate complex UI element layouts.

[0012] Preferably, in step 3, a graphical representation or attribute annotation is performed on the real-time screenshot according to the obtained difference information file to intuitively display the actual position and style of the UI element.

[0013] Compared with the prior art solutions, the present invention is innovative in that:

[0014] 1) Automation and intelligence:

[0015] By extracting JSON description information from UI design drafts, automatic labeling and comparison of layout and style are realized, which greatly improves the detection efficiency. No manual investigation and manual measurement are required, which reduces labor costs and human errors.

[0016] 2) Cross-platform versatility:

[0017] It is not limited to a specific platform or framework and can be applied to a variety of scenarios to ensure UI consistency on different platforms. The unified JSON description information and comparison algorithm provide a basis for cross-platform UI alignment detection.

[0018] 3) Multi-dimensional testing:

[0019] The testable dimensions include position layout, spacing, background color, text size, icon size, etc., covering the main aspects of UI alignment detection. Comprehensive test dimensions ensure the accuracy and reliability of UI consistency.

[0020] Due to the adoption of the above innovative means, the present invention has the following beneficial effects compared with the prior art solutions:

[0021] 1) Improve detection efficiency:

[0022] Automated testing greatly shortens the time for UI alignment testing and improves the efficiency of the development team. Unified testing standards ensure the efficiency and consistency of collaboration between different development teams.

[0023] 2) Reduce costs:

[0024] Reduce labor costs and reduce the need for manual troubleshooting and manual measurements. Improve test quality and reduce repair costs caused by UI inconsistencies.

[0025] 3) Improve user experience:

[0026] Ensuring the consistency of UI on different platforms improves the consistency and satisfaction of user experience, reduces user confusion and dissatisfaction caused by UI inconsistency, and enhances the brand's credibility and reputation.

[0027] In summary, the present invention realizes the automation and intelligence of cross-platform UI alignment detection through innovative methods and technical means, provides the development team with an efficient, accurate and low-cost solution, and effectively improves user experience and product quality. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 It is a flow chart of the present invention. DETAILED DESCRIPTION

[0029] The present invention will be further described below in conjunction with specific embodiments. It should be understood that these embodiments are only used to illustrate the present invention and are not intended to limit the scope of the present invention. In addition, it should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms fall within the scope limited by the appended claims of the application equally.

[0030] like Figure 1 As shown, a method for implementing cross-platform UI alignment detection based on a UI design draft disclosed in an embodiment of the present invention specifically includes the following steps:

[0031] Step 1: Use the design draft intelligent parsing tool to automatically extract key layout and style information from UI design drafts of different screen sizes (such as files generated by design tools such as Sketch and Adobe XD). This information is stored in JSON format to obtain the design draft JSON information. In an embodiment of the present invention, the extracted key layout and style information includes but is not limited to the position coordinates, size, color, font size and other parameters of the element. The JSON format is an ideal choice for cross-platform data exchange due to its lightweight and easy-to-parse characteristics.

[0032] At the same time, the client page screenshot module is used to automatically capture real-time screenshots of the client page on different target platforms to ensure that the test covers all target platforms.

[0033] Step 2: Analyze and detect the actual UI element information in the real-time screenshot, including position coordinates, size, color, etc. In an embodiment of the present invention, an image processing library is mainly used to analyze and detect real-time screenshots to extract the position coordinates, size and color information of UI elements. And combine computer vision technology to identify and locate the layout of complex UI elements. The UI element information obtained through the real-time screenshot is compared with the design draft JSON information obtained in step 1, and a difference information file is automatically generated based on the differences in specific information including coordinates and styles, recording in detail the expected and actual status of each UI element, as well as the differences between them. The difference information file will list in detail which UI elements have inconsistencies in specific information including position, spacing, background color, text size, icon size, etc.

[0034] Furthermore, in an embodiment of the present invention, a graphical representation or attribute annotation is performed on the real-time screenshot according to the obtained difference information file, so as to intuitively display the actual position and style of the UI elements. For example, for each design draft element, a rectangle, circle or path can be created, whose position and size match the element in the design draft. This step ensures a direct comparison between the design draft and the actual UI, and provides an intuitive visual reference for subsequent automated detection.

[0035] Step 3: Use the test report generation module to generate a detailed test report based on the difference information file, providing clear improvement directions for the development and design teams.

[0036] The above solution does not depend on a specific platform or framework and can be applied to any scenario such as Web, iOS, Android, etc. The consistency and accuracy on different platforms are ensured through unified JSON description information and comparison algorithm.

Claims

1. A method for realizing cross-platform UI alignment detection based on UI design draft, characterized in that: The following steps are involved: Step 1: Use the design draft intelligent parsing tool to automatically extract the key UI layout and style information of different UI elements from UI design drafts of different screen sizes, store the obtained information in JSON format, and obtain the design draft JSON information; At the same time, the client page screenshot module is used to automatically capture real-time screenshots of the client page on different target platforms; Step 2: Analyze and detect the actual UI element information of each UI element in the real-time screenshot; Step 3: Compare the actual UI element information obtained in step 2 with the UI layout and style information of the same UI element in the design draft JSON information obtained in step 1, obtain the difference between the actual UI element information and the UI layout and style information of different UI elements, and automatically generate a difference information file, which records in detail the expected and actual status of each UI element and the difference between them through the difference information file; Step 4: Use the test report generation module to generate a detailed test report based on the difference information file, providing clear improvement directions for the development and design teams.

2. A method for realizing cross-platform UI alignment detection based on UI design draft according to claim 1, characterized in that: In step 1, the key layout and style information extracted includes the position coordinates, size, color, and font size of the UI elements.

3. A method for realizing cross-platform UI alignment detection based on UI design draft according to claim 1, characterized in that: In step 2, an image processing library is used to analyze and detect real-time screenshots, extract the actual UI element information of each UI element, and combine computer vision technology to identify and locate complex UI element layouts.

4. A method for realizing cross-platform UI alignment detection based on UI design draft according to claim 1, characterized in that: In step 3, a graphical representation or attribute annotation is performed on the real-time screenshot according to the obtained difference information file to intuitively display the actual position and style of the UI element.

Images