User interface design management method and computer readable storage medium

Abstract

The invention discloses a user interface design management method and a computer readable storage medium, and the method comprises the steps that a first terminal obtains a user interface file, the user interface file comprises a resource file, a constraint file and a color file, the constraint file is used for recording the positions and sizes of the resource file and components in an interface, and the color file is used for recording the positions and sizes of the components in the interface; the color file is used for recording a background color and / or a font color of a component in the interface; displaying data in the user interface file in a list form, and performing proofreading and modification; and packaging the modified user interface file to obtain an application package. According to the method, the user interface can be conveniently and quickly modified and previewed, and the working efficiency of interface design is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of user interface debugging, and in particular to a user interface design management method and a computer-readable storage medium. Background Art

[0002] In the packaging and debugging process of user interface (UI) design and verification of embedded products, the existing working mode faces the following problems: 1. The user interface effect is not intuitive: The current UI design verification process often lacks a real-time preview function, making it difficult for UI designers to intuitively understand the user interface effect, resulting in a gap between the design and the actual effect.

[0003] 2. Inconvenient operation and low efficiency: The existing user interface design process usually requires the collaboration of multiple teams, such as R&D, testing and UI design, which leads to complex operation and low efficiency. Often, after the designer designs the user interface, the R&D personnel need to code and verify it. However, the R&D personnel generally do not have sufficient ability to modify or adjust the designed user interface, and need to return to the designer for modification. The process is complicated and cumbersome, and the communication and coordination between all parties increase the workload and inefficiency.

[0004] 3. It is difficult to quickly view the display effect of the user interface on the terminal: In actual applications, due to factors such as device performance, there is often a gap between the user interface effect displayed on the designer's PC and the user interface effect displayed on the terminal device. After the existing user interface is designed, it can only be viewed on the designer's PC, and it is not convenient to view the display effect of the designed user interface on the terminal. Summary of the invention

[0005] The technical problem to be solved by the present invention is to provide a user interface design management method and a computer-readable storage medium, which can facilitate the rapid modification and preview of the user interface and improve the work efficiency of the user interface design.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is: a user interface design management method, comprising: The first terminal obtains a user interface file, wherein the user interface file includes a resource file, a constraint file, and a color file, wherein the constraint file is used to record the positions and sizes of resource files and components in the interface, and the color file is used to record the background color and / or font color of the components in the interface; Displaying the data in the user interface file in the form of a list and performing proofreading and modification; The modified user interface file is packaged to obtain an application package.

[0007] The present invention also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method described above is implemented.

[0008] The beneficial effects of the present invention are: by obtaining the user interface file and displaying the data therein in the form of a list, it is convenient for UI designers to check and modify; through the one-click packaging function, the modified user interface file is packaged into a skin package, so that it can be subsequently transferred to the Android device through a mobile storage device (such as a USB flash drive) so that the user interface usage effect can be viewed on the Android device, thereby facilitating UI designers to understand whether modification or adjustment is required. The present invention allows UI designers to quickly view the user interface effect, make adjustments in a timely manner, improve work efficiency and design quality, and has a low technical threshold, so that non-R&D personnel can also easily design and package the user interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] Figure 1 A flowchart of a user interface design management method of the present invention; Figure 2 This is a flow chart of a method according to Embodiment 1 of the present invention. DETAILED DESCRIPTION

[0010] In order to explain the technical content, achieved objectives and effects of the present invention in detail, the following is an explanation in conjunction with the implementation modes and the accompanying drawings.

[0011] Please refer to Figure 1 , a user interface design management method, comprising: The first terminal obtains a user interface file, wherein the user interface file includes a resource file, a constraint file, and a color file, wherein the constraint file is used to record the positions and sizes of resource files and components in the interface, and the color file is used to record the background color and / or font color of the components in the interface; Displaying the data in the user interface file in the form of a list and performing proofreading and modification; The modified user interface file is packaged to obtain an application package.

[0012] From the above description, it can be seen that the beneficial effect of the present invention is that through real-time preview and one-click packaging functions, it is convenient for UI designers to quickly view the user interface effects and make timely adjustments, which significantly improves the work efficiency and design quality of UI design.

[0013] Furthermore, after packaging the modified user interface file to obtain the application package, the process further includes: The second terminal obtains the application package through a mobile storage device, and checks and tests the user interface according to the application package, and the second terminal is an Android device.

[0014] Furthermore, the second terminal obtains the application package through a mobile storage device, and checks and tests the user interface according to the application package, including: The second terminal monitors the mobile storage device insertion broadcast, and when the mobile storage device is detected to be inserted, identifies whether the mobile storage device stores an application package corresponding to the user interface file; If yes, the application package is stored in a preset storage path, and the user interface is checked and tested according to the application package.

[0015] As can be seen from the above description, by inserting a USB flash drive into an Android device (a terminal device used by a user) and selecting a skin to be previewed, the user interface can be activated, and the effect of the user interface can be quickly viewed to understand whether modification or adjustment is required.

[0016] Furthermore, the obtaining of the user interface file includes: Obtain a compressed package of the user interface file, and decompress the compressed package to obtain the user interface file.

[0017] From the above description, it can be seen that the user interface file can be obtained at one time by means of a compressed package.

[0018] Furthermore, after obtaining the user interface file, the method further includes: The resource parameters of the resource file are checked for legality and the check results are saved, wherein the resource parameters include the name and the file format.

[0019] From the above description, we can see that by verifying the resource name and format, errors in subsequent packaging can be avoided.

[0020] Furthermore, after obtaining the user interface file, the method further includes: The page is rendered according to the user interface file to generate an interface preview image.

[0021] As can be seen from the above description, the designer can intuitively preview the page layout effect, providing a visual working environment.

[0022] Furthermore, the data in the user interface file is displayed in the form of a list and proofread and modified, including: A resource list, a constraint list and a color list are generated according to the resource file, the constraint file and the color file respectively, and displayed to proofread and modify the data in the user interface file.

[0023] From the above description, it can be seen that by displaying in the form of a list, it is convenient for designers to check, verify, and modify user interface files, and the modification effects can be seen immediately, achieving rapid iteration, which significantly improves the flexibility and responsiveness of UI design and makes the design process more efficient and intuitive.

[0024] Furthermore, the modified user interface file is packaged to obtain an application package, including: The modified user interface file is packaged through a preset automated construction script to obtain an application package.

[0025] From the above description, it can be seen that the application package is obtained through the one-click packaging function, which is simple to operate and lowers the usage threshold, so that non-R&D personnel can also use it easily.

[0026] Furthermore, after packaging the modified user interface file to obtain the application package, the process further includes: The application package is saved to a mobile storage device.

[0027] The present invention also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method described above is implemented.

[0028] Embodiment 1 Please refer to Figure 2 , Embodiment 1 of the present invention is: a user interface design management method, which can be applied to user interface (UI) design scenarios, and aims to reduce the communication cost between development and design, so that UI designers can focus more on the creativity itself.

[0029] like Figure 2 As shown, the following steps are included: S1: The first terminal obtains a user interface file.

[0030] The user interface file includes resource files, constraint files and color files. Resource files are skin materials, including pictures; constraint files are used to record the location (i.e., the location in the page, which can be expressed as the distance from a certain edge of the page) and size of resource files and components in the interface; color files are used to record the background color and font color of components in the interface; constraint files and color files are in XML format. The first terminal can be a computer terminal.

[0031] In this embodiment, the user interface file is stored in a compressed package format (such as ZIP) and is structured (distinguishing between horizontal and vertical screen resources) to facilitate the system to parse and render the material. The UI designer uploads the ZIP material package, the system identifies the image and its related size parameters, verifies the legitimacy of the image name and the file format, and saves the verification results. For example, it verifies whether there are illegal characters in the image name or whether it complies with the file naming rules of the Android system to avoid subsequent packaging errors.

[0032] Since there are a lot of materials in a user interface, uploading them individually would be a lot of work. Instead, they can be uploaded at once in a compressed package. The system can parse and render them on the web page, display the image check status, and help UI designers quickly confirm the correctness of the images. If the images are modified later, the size will be checked to ensure that they are consistent with the standards of the first uploaded images.

[0033] S2: Rendering a page according to the user interface file, generating an interface preview image, and displaying the data in the user interface file in the form of a list for proofreading and modification.

[0034] Specifically, the system uses the Canvas drawing board to draw according to the user interface file and generate a proportional interface preview image, so that the designer can intuitively preview the page layout effect and provide a visual working environment.

[0035] At the same time, the data in the user interface file is displayed in real time on the page in the form of a list. In this embodiment, a resource list is generated according to the resource file, and the fields in the resource list include resource name, initial size and verification result; a constraint list is generated according to the constraint file, and the fields in the constraint list include position and size as well as image name or component name, that is, the constraint list displays the image or component corresponding to each position and size; a color list is generated according to the color file, and the fields in the color list include color and component name, that is, the color list displays the component corresponding to each color.

[0036] Furthermore, the list supports retrieval methods such as fuzzy query and interval query, which makes it convenient for designers to quickly find the required UI materials.

[0037] By displaying in the form of a list, it is easy for designers to check, verify, and modify the user interface files, and they can immediately see the modification effects, achieving rapid iteration. This real-time feedback mechanism significantly improves the flexibility and responsiveness of UI design, making the design process more efficient and intuitive.

[0038] S3: Packaging the modified user interface file to obtain an application package, and saving the application package to a mobile storage device.

[0039] The modified user interface file is packaged through a preset automated build script to obtain an application package. Specifically, through secondary development of Jenkins, the server calls the Jenkins API, uploads the modified user interface file to the Jenkins server, and writes an automated build script, which mainly copies the material to the skin packaging project, unzips it to the specified directory, verifies the files with the same name, and finally triggers the skin packaging through Gradle to generate the final APK skin package (divided into APK skin packages corresponding to the horizontal screen and APK skin packages corresponding to the vertical screen).

[0040] This step is simple to operate, so that non-R&D personnel can also use it easily. Users only need to select the skin to be packaged on the web page and click Package to complete the quick packaging. At the same time, each packaging record is recorded. Users can choose different records to download. The system downloads the packaging results of Jenkins to the server and returns the download address. This function lowers the technical threshold and encourages more designers to participate in skin design.

[0041] S4: The second terminal obtains the application package through the mobile storage device, and checks and tests the user interface according to the application package.

[0042] Among them, the second terminal is an Android device, such as a set-top box. Combined with Android's USB flash drive file reading capability, users can easily import the designed user interface resources directly from the USB flash drive into the device for testing and previewing. The device listens to the USB flash drive insertion broadcast to identify whether it contains skin packages and other related files. If so, the skin package file is copied to the specified directory of the SD card for system preview. The user can select the skin package to be previewed, and after confirmation, switch the resource path to the skin package folder under the SD card to achieve effect rendering. The user can quickly view the use effect of the user interface to understand whether it needs to be modified or adjusted. This method improves work efficiency, enhances the flexibility of the design process, and enables skin design and testing links to be quickly switched between different devices.

[0043] This embodiment has the following advantages: 1. Improve design efficiency: Through real-time preview and one-click packaging functions, designers can quickly view the modification effects and make timely adjustments, which reduces the waiting time in the traditional design process and significantly improves the work efficiency of UI design.

[0044] 2. Simplify operation for non-technical personnel: The operation is simple, which lowers the technical threshold and enables non-R&D personnel to easily design and package the user interface.

[0045] 3. Flexible resource management: Supports import and export of resources in multiple formats, allowing designers to flexibly manage according to different needs. This flexibility enables the tool to adapt to different types of projects and user needs.

[0046] 4. Real-time feedback and optimization: Provide real-time feedback mechanism during the design process, so that designers can quickly discover and solve problems, thereby improving design quality and user experience. Through dynamic updates, designers can instantly see the effect of the design and further optimize the UI.

[0047] Embodiment 2 This embodiment is a computer-readable storage medium corresponding to the above embodiment, on which a computer program is stored. When the program is executed by the processor, it implements the various steps of a user interface design management method and a computer-readable storage medium in the above embodiment, and can achieve the same technical effect, which will not be repeated here.

[0048] To sum up, the user interface design management method and computer-readable storage medium provided by the present invention comprehensively utilize multiple basic technical architectures such as Vue, Springboot, and Jenkins (Vue technology used in the front-end web page, MySQL used in the back-end service using Springboot database, and Jenkins used in the automated packaging workflow) and combine with compression package and XML parsing technology to realize UI preview and management of Android skin, thereby significantly improving work efficiency and facilitating rapid modification and real-time preview of UI design.

[0049] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's specification and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A user interface design management method, characterized in that: include: The first terminal obtains a user interface file, wherein the user interface file includes a resource file, a constraint file, and a color file, wherein the constraint file is used to record the positions and sizes of resource files and components in the interface, and the color file is used to record the background color and / or font color of the components in the interface; Displaying the data in the user interface file in the form of a list and performing proofreading and modification; The modified user interface file is packaged to obtain an application package.

2. The user interface design management method according to claim 1, characterized in that: After the modified user interface file is packaged to obtain the application package, the method further includes: The second terminal obtains the application package through a mobile storage device, and checks and tests the user interface according to the application package, and the second terminal is an Android device.

3. The user interface design management method according to claim 2, characterized in that: The second terminal obtains the application package through a mobile storage device, and checks and tests the user interface according to the application package, including: The second terminal monitors the mobile storage device insertion broadcast, and when the mobile storage device is detected to be inserted, identifies whether the mobile storage device stores an application package corresponding to the user interface file; If yes, the application package is stored in a preset storage path, and the user interface is checked and tested according to the application package.

4. The user interface design management method according to claim 1, characterized in that: The obtaining of the user interface file comprises: Obtain a compressed package of the user interface file, and decompress the compressed package to obtain the user interface file.

5. The user interface design management method according to claim 1, characterized in that: After obtaining the user interface file, the method further includes: The resource parameters of the resource file are checked for legality and the check results are saved, wherein the resource parameters include the name and the file format.

6. The user interface design management method according to claim 1, characterized in that: After obtaining the user interface file, the method further includes: The page is rendered according to the user interface file to generate an interface preview image.

7. The user interface design management method according to claim 1, characterized in that: The data in the user interface file is displayed in the form of a list and proofread and modified, including: A resource list, a constraint list and a color list are generated according to the resource file, the constraint file and the color file respectively, and displayed to proofread and modify the data in the user interface file.

8. The user interface design management method according to claim 1, characterized in that: The modified user interface file is packaged to obtain an application package, including: The modified user interface file is packaged through a preset automated construction script to obtain an application package.

9. The user interface design management method according to claim 1, characterized in that: After the modified user interface file is packaged to obtain the application package, the method further includes: The application package is saved to a mobile storage device.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

Images