UI design review method and device and computer medium

Abstract

The invention provides a UI design review method and device and a computer medium, belongs to the technical field of computers, and can automatically detect the actual design effect according to a preset UI design model. Repeated annotation, proofreading and task arrangement in the auditing process are reduced, the risk of annotation omission is reduced, and the time required for repeated communication and confirmation with developers is shortened.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device and computer medium for UI design review. Background Art

[0002] Excellent design can effectively convey the value of the product, but its realization also depends on technical support. In the project process, the review of UI design is a key step. In the traditional development model, when the R&D engineer completes the project development, he will submit it to the UI designer for inspection. Designers need to manually check the product interface that is about to be launched in a test environment for different business scenarios. This process usually involves a lot of repetitive work such as annotation, proofreading, and output of modification suggestions by designers. At the same time, they also need to communicate with R&D engineers many times to confirm the details, which not only increases the cost of communication, but also affects the efficiency of work. Summary of the invention

[0003] In order to solve the above technical problems, the present invention provides a method for UI design review, which aims to reduce the repetitive annotation, proofreading and sorting tasks of designers during the review process, reduce the risk of missing annotations, and reduce the time required for repeated communication and confirmation with developers. This method helps developers to reproduce design drafts (i.e. UI renderings) more efficiently and accurately, thereby improving team collaboration efficiency and ensuring high-quality restoration of the project.

[0004] The technical solution of the present invention is:

[0005] A method for UI design review, comprising the following steps:

[0006] (1) Obtain several modules in the pre-divided UI design drawing to be reviewed.

[0007] (2) Based on these UI design drawing modules, the actual effect display diagrams to be reviewed are divided into similar modules, thereby obtaining several actual effect display diagram modules.

[0008] (3) Determine the specific position, i.e., the absolute coordinates, of each UI design drawing module to be reviewed relative to the origin of the entire UI design drawing.

[0009] (4) Similarly, determine the specific position, i.e., the absolute coordinates, of each actual effect display diagram module to be reviewed relative to the origin of the entire actual effect display diagram, and determine the matching relationship between each UI design diagram module to be reviewed and the corresponding actual effect display diagram module to be reviewed.

[0010] (5) Based on the above matching relationship, the position, i.e., the absolute coordinates, of each UI design drawing module is compared with the corresponding actual effect display drawing module, and the position deviation value between the two is calculated.

[0011] (6) Based on the calculated absolute coordinate error value of the module, the actual effect display diagram to be reviewed is evaluated to generate a scoring result.

[0012] (7) If the scoring result exceeds the pre-set qualification standard, i.e., the threshold, the actual effect display diagram is deemed to have passed the review.

[0013] Furthermore,

[0014] According to the existing division marks in the figure, it is divided into several small modules to be processed. These division marks are used to indicate the boundaries of different content areas.

[0015] These partitioning markers can be identified by automated tools.

[0016] Once the logo position is identified, the UI rendering will be automatically cut into several modules according to preset rules.

[0017] In addition, the present invention also provides a device for UI design review, comprising:

[0018] Get components: responsible for obtaining several pre-divided modules in the UI design drawing to be reviewed.

[0019] Module division component: According to the obtained UI design drawing modules, the actual effect display diagram to be reviewed is divided into similar modules to generate multiple actual effect display diagram modules.

[0020] The first position determination component: determines the absolute position of each UI design drawing module to be reviewed relative to the origin of the UI design drawing.

[0021] The second position determination component is used to determine the absolute position of each actual effect display diagram module to be reviewed relative to the origin of the actual effect display diagram.

[0022] Matching relationship determination component: establish the corresponding relationship between each UI design drawing module to be reviewed and the corresponding actual effect display drawing module to be reviewed.

[0023] Error calculation component: Based on the correspondence between modules, compare the absolute positions of the UI design module and the actual effect display module, and calculate the position deviation value between the two.

[0024] According to the calculated absolute position error value of the module, the actual effect display diagram is scored to obtain the scoring result.

[0025] If the scoring result exceeds the preset threshold, the actual effect display diagram will be deemed to have passed the review.

[0026] Furthermore,

[0027] According to the existing division marks in the figure, it is divided into several small modules to be processed. These division marks are used to indicate the boundaries of different content areas.

[0028] These demarcation markers can be identified by automated tools.

[0029] Once the logo position is identified, the UI rendering can be automatically cut into several modules according to preset rules.

[0030] In addition, the present invention also provides a computer storage medium on which a computer program is stored. The program is executed by a processor to implement any of the methods described above.

[0031] The beneficial effects of the present invention are

[0032] The present invention is presented in the form of a flow chart and implemented by a special UI design review system, which can automatically detect the actual design effect based on the preset UI design model. This means that there is no need to complete this time-consuming and complicated review process through traditional manual methods, thereby greatly improving work efficiency. In addition, during the review process, some input parameters or intermediate link results can be manually adjusted and optimized to ensure the accuracy of the review. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 It is a schematic diagram of a walk-through device for UI design of the present invention. DETAILED DESCRIPTION

[0034] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0035] The lack of unified standards for basic components leads to frequent occurrence of the same type of problems, and different business scenarios need to be repeatedly marked, which seriously affects work efficiency. During the page inspection process, the main challenges are as follows:

[0036] Visual consistency check: It is necessary to carefully check whether the visual effect of the page is completely consistent with the design draft, including but not limited to fonts, font sizes, colors, size spacing, button styles, feedback status, image cutting quality, etc., to ensure that all styles meet the visual design specifications. At the same time, it is also necessary to check the clarity of icons and graphics and the restoration of shadow effects to maintain the consistency and professionalism of the product experience.

[0037] Multi-device compatibility testing: Testing is required for different screen resolutions and multiple browser environments to ensure that the page can be reasonably adapted under various conditions, ensure the readability and ease of operation of the product, and improve the user experience.

[0038] Comprehensive inspection of complex logic scenarios: Due to the complexity of business logic, the inspection process takes a long time, and the compilation of problem documents is relatively complicated. On the one hand, each scenario and state should be checked one by one according to the task flow to confirm whether there are omissions and ensure the integrity and consistency of the product experience. On the other hand, the interactive actions should be carefully checked to ensure the rationality of each operation and its feedback, covering the performance in all extreme, limit and error situations, verifying the correctness of the default value, hover, click and other states, as well as the control of new function prompts and hot spots, to ensure that the inspection results of the page in different states can meet the requirements.

[0039] The difficulty of efficient collaboration: Repeated review and communication of issues takes a lot of time and the collaboration efficiency is low. Usually, the review process requires multiple meetings with developers, engineers need to repeatedly adjust the code, and designers need to repeatedly mark, proofread and organize problem documents, resulting in high time costs and affecting the overall project progress.

[0040] To solve these problems, you can consider introducing automated tools and standardized processes to reduce manual intervention and improve work efficiency and collaboration quality.

[0041] In order to further improve the user experience of the product, the present invention introduces an automated UI design walkthrough method, which includes the following steps:

[0042] 1. Calculate the absolute position coordinates of each module in multiple UI design drawings to be reviewed relative to the origin of the UI design drawings.

[0043] 2. Similarly, calculate the absolute position coordinates of each module in multiple actual display effect diagrams to be reviewed relative to the origin of the actual display effect diagrams.

[0044] 3. Establish the correspondence between these UI design drawing modules and the actual display effect drawing modules.

[0045] 4. Based on the above module correspondence, compare the absolute position coordinates of the UI design drawing module with the absolute position coordinates of the actual display effect drawing module, and calculate the position deviation value between each pair of modules.

[0046] 5. Based on the calculated position deviation value, the actual display effect diagram is evaluated and scored to obtain the scoring result.

[0047] 6. If the scoring result exceeds the preset qualification standard (threshold), the actual display effect diagram is considered to have passed the review.

[0048] This method can effectively evaluate the consistency between the actual display effect and the expected design, ensuring the quality of UI design and user experience.

[0049] Preliminary preparation: After completing the UI design and preparing for the walkthrough, upload the test link to a dedicated UI design walkthrough system. This system will be responsible for subsequent automatic detection.

[0050] Automatic detection: The system will automatically extract and identify the uploaded UI renderings and the online images in the actual R&D test link, and compare the differences between the two. For any inconsistencies found, the system will use different colors to mark them to distinguish different types of problems.

[0051] Scoring and report generation: Based on the results of automatic detection, the system will score the UI design and generate a detailed walkthrough report. This report not only points out the existing problems, but also provides specific scores to help the R&D team understand the current design quality.

[0052] Correction and review: Make necessary changes based on the feedback in the self-inspection report. If the score reaches the preset standard, the system will automatically pass the walkthrough; otherwise, the process will enter the next stage - manual review. The purpose of manual review is to further confirm and optimize the design until the score reaches the qualified standard.

[0053] Process standardization and efficiency improvement: Through this combination of automation and manual work, the process between UI designers and R&D engineers can be standardized, making project management more convenient. This method not only improves collaboration efficiency and saves time costs, but also effectively avoids the need for UI designers to repeatedly mark and organize problem documents, greatly reducing their burden.

[0054] This process is executed by the UI design walkthrough system, which can automatically check the actual renderings based on the UI renderings to be processed, eliminating the need for manual complex walkthroughs, thus significantly improving work efficiency. At the same time, some input parameters or intermediate results in the process support manual intervention, which helps improve the accuracy of detection.

[0055] In computer systems, in order to ensure smooth operation and responsiveness of applications, especially when it comes to complex operations such as video processing, multi-threading or multi-processing is usually used to organize the code execution process. This method can effectively avoid the problem of user interface freezing or unresponsiveness caused by long-running tasks (such as video loading or processing).

[0056] Specifically, an application can create multiple threads to handle different tasks. For example, in a video playback application, a main thread (or UI thread) can be used to handle the display and interaction of the user interface to ensure that users can browse and operate the application interface smoothly. At the same time, one or more auxiliary threads can be used to perform time-consuming operations, such as reading, decoding, and preprocessing video files.

[0057] The core of this design pattern is the application of the concept of "asynchronous", which allows different tasks to be performed independently in the background without waiting for other tasks to complete. This not only improves the overall performance of the application, but also improves the user experience, because the user interface remains responsive even when performing resource-intensive operations.

[0058] For devices with limited resources, if it is not possible to support multiple threads running simultaneously, asynchronous behavior can also be simulated through a single-threaded time slice rotation mechanism. This means that the main program divides time into multiple small segments, and each task takes turns to get a certain time slice to execute its own code, thus achieving the effect of parallel processing at a macro level.

[0059] In short, whether through true multi-threading technology or time slice scheduling under single thread, the goal is to ensure that background tasks such as video processing do not interfere with the normal display and operation of the user interface, and to achieve application functions while ensuring a good user experience.

[0060] In the example of this specification, before processing the user interface (UI) rendering, the entire UI rendering can be divided into several small modules to be processed according to the existing division marks in the drawing, such as text titles, dividing lines, card boundaries, etc. These division marks are used to indicate the boundaries of different content areas, which helps to accurately separate various functions or information blocks.

[0061] In actual operation, these division marks can be identified through automated tools. Once the mark position is identified, the UI rendering can be automatically cut into multiple modules according to the preset rules. This method not only improves efficiency, but also ensures the consistency and accuracy of the division, making it easier to analyze, optimize or process each module separately. For example, specific design adjustments, performance tests or adaptation to different screen sizes can be performed for each module.

[0062] The present invention aims at checking the consistency between UI design drawings and actual development effects, and automatically executes a series of steps through a computer program to ensure that the actual development effect drawings are highly consistent with the UI effect drawings provided by the designer.

[0063] include:

[0064] Get UI design module: First, the system will get the UI design renderings that have been pre-divided into several independent parts. These parts can be any interface elements such as buttons, input boxes, labels, etc.

[0065] Modularization of actual renderings: Then, based on the above UI design modules, the system will perform similar modularization on the actual renderings to be tested, that is, divide them into multiple parts that match the UI design drawings.

[0066] Determine the coordinate position: Then, the system calculates the specific position (i.e., absolute coordinates) of each UI design module and the actual rendering module relative to the origin of their respective overall images.

[0067] Establishing module correspondence: By comparing the modules in the two sets, the system can identify which actual rendering modules should correspond to which UI design modules and establish this one-to-one mapping relationship.

[0068] Calculate coordinate deviation: Next, the system will use the previously established mapping relationship to compare the absolute coordinates of the UI design module and the corresponding actual rendering module one by one, so as to calculate the coordinate deviation value between them.

[0069] Effect score: Based on the above coordinate deviation value, the system can give a comprehensive score to the quality of the entire actual effect map. This score reflects the degree of consistency between the actual effect map and the UI design map.

[0070] Walkthrough judgment: Finally, if the score of the actual rendering exceeds the preset standard threshold, it is considered that the actual rendering meets the quality requirements and can pass the walkthrough.

[0071] This method not only improves the efficiency and accuracy of UI effect verification, but also provides the possibility for automated testing, which helps to improve the overall quality control level of software development. In addition, this series of operations can be completed by computer executable instructions stored on non-volatile computer storage media, so that the process can be run automatically without human intervention.

[0072] The above description is only a preferred embodiment of the present invention, which is only used to illustrate the technical solution of the present invention, and is not used to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.

Claims

1. A method for UI design review, characterized in that: The steps include: (1) Obtain several modules in the pre-divided UI design drawing to be reviewed; (2) Based on these UI design drawing modules, the actual effect display drawings to be reviewed are divided into similar modules, thereby obtaining a number of actual effect display drawing modules; (3) Determine the specific position, i.e., the absolute coordinates, of each UI design drawing module to be reviewed relative to the origin of the entire UI design drawing; (4) Similarly, determine the specific position, i.e., the absolute coordinates, of each actual effect display diagram module to be reviewed relative to the origin of the entire actual effect display diagram, and determine the matching relationship between each UI design diagram module to be reviewed and the corresponding actual effect display diagram module to be reviewed; (5) Based on the above matching relationship, the position, i.e., the absolute coordinates, of each UI design drawing module and the corresponding actual effect display drawing module are compared to calculate the position deviation value between the two; (6) Evaluate the actual effect display diagram to be reviewed based on the calculated module absolute coordinate error value and generate a scoring result; (7) If the scoring result exceeds the pre-set qualification standard, i.e., the threshold, the actual effect display diagram is deemed to have passed the review.

2. The method according to claim 1, characterized in that According to the existing division marks in the figure, it is divided into several small modules to be processed. These division marks are used to indicate the boundaries of different content areas.

3. The method according to claim 2, characterized in that These partitioning markers can be identified by automated tools.

4. The method according to claim 2 or 3, characterized in that: Once the logo position is identified, the UI rendering will be automatically cut into several modules according to preset rules.

5. A device for UI design review, characterized in that: include Get components: responsible for obtaining several modules pre-divided in the UI design drawing to be reviewed; Module division component: Based on the obtained UI design drawing modules, the actual effect display diagram to be reviewed is divided into similar modules to generate several actual effect display diagram modules; The first position determination component: determines the absolute position of each UI design drawing module to be reviewed relative to the origin of the UI design drawing; The second position determination component: determines the absolute position of each actual effect display diagram module to be reviewed relative to the origin of the actual effect display diagram; Matching relationship determination component: establish the corresponding relationship between each UI design drawing module to be reviewed and the corresponding actual effect display drawing module to be reviewed; Error calculation component: Based on the correspondence between modules, compare the absolute positions of the UI design module and the actual effect display module, and calculate the position deviation between the two; According to the calculated absolute position error value of the module, the actual effect display diagram is scored to obtain the scoring result; If the scoring result exceeds the preset threshold, the actual effect display diagram will be deemed to have passed the review.

6. The device according to claim 5, characterized in that According to the existing division marks in the figure, it is divided into several small modules to be processed. These division marks are used to indicate the boundaries of different content areas.

7. The device according to claim 5, characterized in that These demarcation markers can be identified by automated tools.

8. The device according to claim 6 or 7, characterized in that Once the logo position is identified, the UI rendering can be automatically cut into several modules according to preset rules.

9. A computer storage medium having a computer program stored thereon, characterized in that: The program is executed by a processor to implement the method according to any one of claims 1 to 4.

Images