A user interface design consistency management method and device

Abstract

This invention relates to the field of software development and user interface (UI) engineering technology, and particularly to a method and apparatus for user interface design consistency control. The method, executed by a management device, includes: generating a UI design specification template for at least one project based on the UI design specifications of at least one project; storing the UI design specification templates for at least one project in a template library; receiving a template retrieval request from a first user device; and after the user device passes permission verification based on a first verification code, retrieving at least a portion of the content from a matching UI design specification template in the template library according to the project number, and sending it to the first user device so that the first user device can develop pages accordingly. This method enables efficient and consistent page development, ensuring page standardization and consistency, improving page development efficiency, and reducing communication costs during page development.

Description

Technical Field

[0001] This invention relates to the field of technology, and more particularly to a method and apparatus for controlling the consistency of user interface design. Background Technology

[0002] Maintaining consistency in the user interface across different modules, versions, and even products is a significant challenge during software development. Consistency is crucial for improving user experience, reducing learning costs, and preserving a professional brand image.

[0003] Currently, the following problems are common in related technologies: 1. Differences caused by decentralized development: Different developers or teams are responsible for different pages, and their technical backgrounds and implementation habits are different, which can easily lead to subtle differences in the style implementation of shared elements (such as buttons, forms, and tables); 2. Limitations of visual acceptance: Relying on designers to check pages to find inconsistencies; manual inspection is inefficient and cannot cover all pages and all states (such as loading, empty data, and errors); it is highly subjective and difficult to find pixel-level subtle differences; feedback is delayed, and problems are only discovered in the later stages of development or even after launch, resulting in high repair costs; asynchronous repair: even if a problem on a certain page is found and fixed, other pages with the same problem may not be modified synchronously.

[0004] Therefore, to address the above shortcomings, a method and apparatus for controlling the consistency of user interface design are needed. Summary of the Invention

[0005] The technical problem that this invention aims to solve is that related technologies cannot efficiently and consistently develop pages, and subsequently cannot efficiently detect and repair defects such as inconsistencies in the UI design of multiple pages in applications.

[0006] To address the aforementioned technical problems, this invention provides a user interface design consistency control method, executed by a management device, comprising: generating a UI design specification template for at least one project based on the UI design specifications of at least one project; storing the UI design specification templates of the at least one project in a template library; receiving a template retrieval request from a first user device, wherein the template retrieval request carries a project number and a first verification code; after the first user device passes permission verification based on the first verification code, retrieving at least a portion of the content from a matching UI design specification template in the template library based on the project number; and sending at least a portion of the content from the matching UI design specification template to the first user device, so that the first user device can develop pages based on at least a portion of the matching UI design specification template.

[0007] In some embodiments, the template acquisition request further includes a UI design element identifier. Acquiring at least a portion of the content of a matching UI design specification template from the template library based on the project number includes: acquiring a matching UI design specification template from the template library based on the project number; and extracting the content corresponding to the UI design element identifier from the matching UI design specification template based on the UI design element identifier, and using it as the at least a portion of the content.

[0008] In some embodiments, the method further includes sending at least a portion of the matched UI design specification template to an associated device of the first user device, wherein the associated device of the first user device is a device of another user belonging to the same project as the user of the first user device.

[0009] In some embodiments, the method further includes: receiving a page verification request from a second user device, the page verification request carrying a page to be verified or the address information of the page to be verified, and a project number; using a UI design specification template matching the project number to perform UI consistency verification on the page to be verified, so as to obtain a verification result; and sending the verification result to the second user device.

[0010] In some embodiments, the page verification request further carries second verification code information, and the step of performing UI consistency verification on the page to be verified using a UI design specification template matching the project number includes: after the permission verification of the second user device is passed according to the second verification code information, obtaining a matching UI design specification template from the template library according to the project number; and performing UI consistency verification on the page to be verified according to the UI design specification template matching the project number to obtain a UI consistency verification result.

[0011] In some embodiments, the method further includes: if the verification result shows that the page to be verified fails the UI consistency verification, generating page modification suggestion information and sending the page modification suggestion information to the second user device; and / or, if the verification result shows that the page to be verified fails the UI consistency verification, actively performing UI consistency verification on other pages developed by the second user device to obtain the verification results of the other pages.

[0012] According to a second aspect of the present invention, a user interface design consistency control device is provided, comprising a module for performing the user interface design consistency control method as described above.

[0013] According to a third aspect of the present invention, a user interface design consistency control apparatus is provided, comprising: a memory; and a processor coupled to the memory, the processor being configured to execute the user interface design consistency control method as described above based on instructions stored in the memory.

[0014] According to a fourth aspect of the present invention, a computer-readable storage medium is provided having computer instructions stored thereon, which, when executed by a processor, implement the user interface design consistency control method as described above.

[0015] Implementing this invention offers the following advantages: The user interface design consistency control scheme described above enables efficient and consistent multi-page development, ensuring page standardization and consistency, improving page development efficiency, and reducing communication costs during page development. Furthermore, by performing page verification based on management devices according to the above process, page verification and modification can be performed more efficiently, comprehensively, and consistently, improving verification efficiency, reducing visual display problems such as inconsistent color schemes and styles, and reducing tedious manual inspection steps. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating the user interface design consistency control method in some embodiments of the present invention; Figure 2 This is a flowchart illustrating the user interface design consistency control method in some embodiments of the present invention; Figure 3 This is a schematic diagram of the user interface design consistency control device in some embodiments of the present invention; Figure 4 This is a schematic diagram of the user interface design consistency control device in some embodiments of the present invention. Detailed Implementation

[0017] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0018] Example 1 Figure 1 This is a flowchart illustrating the user interface design consistency control method in some embodiments of the present invention. For example... Figure 1 As shown, the user interface design consistency control method is executed by the management device, including steps S11 to S15.

[0019] In step S11, a UI design specification template for at least one project is generated based on the user interface (UI) design specifications for at least one project.

[0020] The user interface (UI) design specification can be a document defined in natural language that contains design standard information for various UI design elements. The UI design specification template can be a configuration file or table generated based on the aforementioned document.

[0021] In step S11, a UI design specification template for at least one project can be generated using various methods. The following two examples illustrate this.

[0022] In the first example, a conversion script can be pre-generated, which automatically processes the user interface (UI) design specifications of at least one project to generate a UI design specification template for at least one project.

[0023] In the second example, the user generates a UI design specification template for at least one project by operating a visual configuration interface based on the user interface (UI) design specifications.

[0024] In step S12, at least one UI design specification template for a project is stored in a template library. The template library can be a database or file system that stores UI design specification templates.

[0025] In step S13, a template acquisition request from the first user equipment is received. The template acquisition request carries a project number and a first verification code.

[0026] The project number can be the number of the software project in which the user participated. For example, the project number of software development project A is 111, and the project number of software development project B is 222.

[0027] The first verification code is used to verify user permissions. For example, the first verification code can be the user's mobile phone number, the user's employee ID, a key pre-assigned to the user, the user's device identifier, an SMS verification code, or other information that can be used to verify user permissions.

[0028] In some examples, the management device can be a management server. Upon receiving a template retrieval request from the first user device, the management server verifies the first user device's permissions based on the first verification code information carried in the request. In practice, various methods can be used to verify the first user device's permissions. The following two examples illustrate this.

[0029] For example, the first verification code information is the identifier of the first user equipment. Verifying the first user equipment includes: comparing the identifier of the first user equipment with the identifier of a pre-stored trusted device. If the identifier of the first user equipment is included in the identifier of a trusted device, the first user equipment is determined to pass the verification; otherwise, the first user equipment is determined to fail the verification.

[0030] For example, the first verification code information is an SMS verification code. Verifying the first user device includes: comparing the SMS verification code carried in the request with the SMS verification code previously sent to the first user device; if the two match, the first user device is determined to have passed the verification; otherwise, the first user device is determined to have failed the verification.

[0031] In this embodiment of the invention, by first verifying the first user device's permissions based on the first verification code information carried in the template acquisition request, and then obtaining the matching template and sending the matching template to the first user device after the permission verification is passed, the security of the template data acquisition process can be improved, unnecessary data acquisition and transmission processes can be reduced, and unnecessary interaction overhead between the management device and the user device can be reduced.

[0032] In step S14, after the first user device passes the permission verification based on the first verification code information, at least a portion of the content of the matching UI design specification template is obtained from the template library according to the project number.

[0033] Step S14 can be implemented in several ways. Two examples are described below. In the first implementation, in step S14, a UI design specification template matching the project number is retrieved from the template library so that the matching UI design specification template can be sent to the first user device later. For example, the template library stores UI design specification templates for multiple projects, and the UI design specification templates for different projects are different.

[0034] In this embodiment of the invention, after the permission verification of the first user device is passed, the required UI design specification template can be obtained more accurately by obtaining the template according to the first implementation method, which helps to improve the standardization and consistency of page development.

[0035] In the second implementation, the template retrieval request also carries a UI design element identifier. In this implementation, a matching UI design specification template can be retrieved from the template library based on the project number; based on the UI design element identifier, content corresponding to the UI design element identifier is extracted from the matching UI design specification template and used as at least a part of the content in the matching UI design specification template, so that at least a part of the content in the matching UI design specification template can be sent to the first user device subsequently.

[0036] For example, suppose a UI design specification template contains design specification configuration information for 100 UI design elements, and the template retrieval request carries 5 UI design element identifiers. Then, only the content corresponding to these 5 UI design element identifiers can be extracted from the matched UI design specification template, so that only the content corresponding to these 5 UI design element identifiers is subsequently sent to the first user device.

[0037] In this embodiment of the invention, after the permission verification of the first user device is passed, obtaining the template according to the second implementation method not only allows for more accurate acquisition of the content in the required UI design specification template, but also reduces the amount of template content data that needs to be transmitted. This helps to reduce data transmission overhead during the page development process while ensuring the standardization and consistency of page development.

[0038] In step S15, at least a portion of the content in the matched UI design specification template is sent to the first user device so that the first user device can develop a page based on at least a portion of the matched UI design specification template.

[0039] In some examples, after obtaining a matching UI design template, the management device sends the template to the first user device. Upon receiving the matching UI design template, the first user device develops the page based on it.

[0040] In other examples, after the management device obtains a portion of the matching UI design specification template, it sends that portion to the first user device. The first user device, upon receiving this portion of the matching UI design specification template, develops the page based on that portion.

[0041] In some embodiments, the user interface design consistency control method includes, in addition to, Figure 1 In addition to the illustrated process, it also includes sending at least a portion of the matched UI design specification template to associated devices of the first user device. The associated devices of the first user device are devices of other users belonging to the same project as the user of the first user device. By synchronously sending at least a portion of the matched UI design specification template to multiple user devices within the same project, the efficiency of page development can be further improved.

[0042] In this embodiment of the invention, the above method enables efficient and consistent page development, ensuring page standardization and consistency, improving page development efficiency, and reducing communication costs in page development.

[0043] Example 2 Figure 2This is a flowchart illustrating the user interface design consistency control method in some embodiments of the present invention. For example... Figure 2 As shown, the user interface design consistency control method includes steps S11 to S18.

[0044] In step S11, a UI design specification template for at least one project is generated based on the user interface UI design specifications of at least one project.

[0045] In step S12, at least one UI design specification template for a project is stored in the template library.

[0046] In step S13, a template acquisition request from the first user equipment is received. The template acquisition request carries a project number and a first verification code.

[0047] In step S14, after the first user device passes the permission verification based on the first verification code information, at least a portion of the content of the matching UI design specification template is obtained from the template library according to the project number.

[0048] In step S15, at least a portion of the content in the matched UI design specification template is sent to the first user device so that the first user device can develop a page based on at least a portion of the matched UI design specification template.

[0049] For details on how steps S11 to S15 are implemented, please refer to the relevant descriptions in the embodiments shown above.

[0050] In step S16, a page verification request from the second user equipment is received. The page verification request carries the page to be verified or the address information of the page to be verified, and the item number.

[0051] After developing a page based on the obtained UI design specification template, the second user equipment can send a page verification request carrying the developed page or the address information of the developed page to the management device. Upon receiving the page verification request, the management device executes steps S17 and S18.

[0052] In some examples, the page validation request carries a second verification code in addition to the page to be validated or its address and the item number. In these examples, the user interface design consistency control methods include... Figure 2In addition to the illustrated process, the following steps are also included: After receiving the page verification request, the management device verifies the permissions of the second user device based on the second verification code information. If the permission verification of the second user device based on the second verification code information passes, steps S17 and S18 are executed. Furthermore, if the permission verification of the second user device based on the second verification code information fails (i.e., the permission verification fails), a permission verification failure message can be sent to the second user device.

[0053] The second verification code is used to verify user permissions. For example, the second verification code can be the user's mobile phone number, the user's employee ID, a key pre-assigned to the user, the user's device identifier, an SMS verification code, or other information that can be used to verify user permissions.

[0054] In this embodiment of the invention, by first verifying the permissions of the second user device based on the second verification code information carried in the page verification request, and then obtaining the matching template after the permission verification is successful, and performing consistency verification on the page based on the matching template, not only can the security of the page verification process be improved, but unnecessary page verification operations can also be reduced. This helps to improve the efficiency of the user interface design consistency control method.

[0055] In step S17, the UI design specification template matching the project number is used to perform UI consistency verification on the page to be verified in order to obtain the verification result.

[0056] For example, in step S17, a matching UI design specification template is first obtained from the template library based on the project number carried in the page verification request; then, UI consistency verification is performed on the page to be verified based on the UI design specification template that matches the project number, so as to obtain the UI consistency verification result.

[0057] In some embodiments, the user interface design consistency control method includes, in addition to, Figure 2 In addition to the illustrated process, the steps also include: if the verification result shows that the page to be verified fails the UI consistency verification, generating page modification suggestions and sending these suggestions to the second user device. This helps the second user device quickly modify the page design, improving the efficiency of page repair.

[0058] In some embodiments, the user interface design consistency control method includes, in addition to, Figure 2In addition to the illustrated process, the procedure also includes: if the verification result shows that the page to be verified fails the UI consistency verification, proactively performing UI consistency verification on other pages developed for the second user device to obtain the verification results of those other pages; and sending the verification results of those other pages to the second user device. This allows for UI consistency verification of all pages developed for the second user device, facilitating unified repair of all pages developed for the second user device subsequently, and improving the comprehensiveness and efficiency of page UI consistency verification and repair.

[0059] In step S18, the verification result is sent to the second user equipment.

[0060] After receiving the verification result, the second user equipment can decide whether to repair the page based on the verification result.

[0061] In this embodiment of the invention, the above process can not only improve the standardization and consistency of the developed pages, but also enhance the efficiency of page development, verification and repair, and reduce communication costs, thereby solving the problems in related technologies such as the inability to develop pages efficiently and consistently, and the inability to efficiently detect and repair inconsistencies in the UI design of multiple pages in the application.

[0062] Example 3 Figure 3 This is a schematic diagram of the user interface design consistency control device in some embodiments of the present invention. For example... Figure 3 As shown, the user interface design consistency control device 30 includes a generation module 31, a storage module 32, a receiving module 33, an acquisition module 34, and a sending module 35.

[0063] The generation module 31 is used to generate a UI design specification template for at least one project based on the UI design specifications of at least one project.

[0064] Storage module 32 is used to store UI design specification templates for at least one project into a template library.

[0065] The receiving module 33 is used to receive a template acquisition request from the first user equipment. The template acquisition request carries a project number and a first verification code.

[0066] The acquisition module 34 is used to retrieve at least a portion of the content from the matching UI design specification template from the template library based on the project number after the user device passes the permission verification based on the first verification code information.

[0067] The sending module 35 is used to send at least a portion of the content in the matched UI design specification template to the first user device, so that the first user device can develop pages based on at least a portion of the matched UI design specification template.

[0068] In some embodiments, the user interface design consistency control device 30 further includes other modules for performing other steps in the user interface design consistency control method as described above.

[0069] In this embodiment of the invention, the above-mentioned device enables efficient and consistent page development, ensuring the standardization and consistency of the pages, improving the efficiency of page development, and reducing communication costs in page development.

[0070] Example 4 Figure 4 This is a schematic diagram of the user interface design consistency control device in some embodiments of the present invention. For example... Figure 4 As shown, the user interface design consistency control device 40 includes a memory 41 and a processor 42 coupled to the memory 41. The memory 41 is used to store instructions for executing embodiments of the user interface design consistency control method as described above. The processor 42 is configured to execute the user interface design consistency control method in any of the embodiments of this disclosure based on the instructions stored in the memory 41.

[0071] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A user interface design consistency management method, characterized in that, The method is executed by the management device and includes: Generate a UI design specification template for at least one project based on the UI design specifications of at least one project. Store the UI design specification templates for at least one of the projects into the template library; Receive a template acquisition request from a first user equipment, wherein the template acquisition request carries a project number and a first verification code; After the first user device passes the permission verification based on the first verification code information, at least a portion of the content of the matching UI design specification template is obtained from the template library based on the project number. At least a portion of the content in the matched UI design specification template is sent to the first user device so that the first user device can develop a page based on at least a portion of the matched UI design specification template.

2. The user interface design consistency governance method of claim 1, wherein, The template retrieval request also includes UI design element identifiers. Based on the project number, retrieving at least a portion of the content from the matching UI design specification template in the template library includes: Based on the project number, retrieve the matching UI design specification template from the template library; Based on the UI design element identifier, extract the content corresponding to the UI design element identifier from the matched UI design specification template, and use it as the at least part of the content.

3. The user interface design consistency governance method of claim 2, wherein, The method further includes: At least a portion of the matched UI design specification template is sent to the associated device of the first user device, wherein the associated device of the first user device is the device of another user belonging to the same project as the user of the first user device.

4. The user interface design consistency management method according to claim 1, characterized by, The method further includes: Receive a page verification request from a second user device, the page verification request carrying the page to be verified or the address information of the page to be verified, and the item number; Using a UI design specification template that matches the project number, perform UI consistency verification on the page to be verified to obtain the verification result; The verification result is sent to the second user equipment.

5. The user interface design consistency governance method of claim 4, wherein, The page verification request also carries a second verification code. The step of using a UI design specification template matching the project number to perform UI consistency verification on the page to be verified includes: After the second user device passes the permission verification based on the second verification code information, a matching UI design specification template is obtained from the template library according to the project number. Based on the UI design specification template that matches the project number, perform UI consistency verification on the page to be verified to obtain the UI consistency verification result.

6. The user interface design consistency governance method of claim 5, wherein, The method further includes: If the verification result indicates that the page to be verified fails the UI consistency verification, page modification suggestion information is generated and sent to the second user device; and / or, If the verification result shows that the page to be verified fails the UI consistency verification, the UI consistency verification is actively performed on other pages developed by the second user device to obtain the verification results of the other pages.

7. A user interface design consistency management device, characterized by: Includes a module for implementing the user interface design consistency control method as described in any one of claims 1-6.

8. A user interface design consistency management device, characterized by, include: Memory; as well as A processor coupled to the memory, the processor being configured to execute the user interface design consistency control method as described in any one of claims 1 to 6 based on instructions stored in the memory.

9. A computer-readable storage medium having stored thereon computer instructions that, when executed by a processor, implement the user interface design consistency control method as described in any one of claims 1 to 6.

Images