Enterprise UI design element storage and sharing method and system

Abstract

The invention relates to the technical field of website system construction, in particular to an enterprise UI design element storage and sharing method and system, and the method comprises the following steps: deploying a UI design element storage and sharing system on a server, the system comprises an employee login function module, a material uploading function module, a material searching function module, a material downloading function module, a material deleting function module, a permission setting function module, a user information management function module and an administrator management function module. Uploading design materials to a system background through a personal account, wherein a designer screens and uploads high-quality materials according to different types of project requirements; the enterprise UI design element storage and sharing method and system have the beneficial effects that the enterprise UI design element storage and sharing system background is deployed, design elements are collected and uploaded, label attributes of the design elements are marked, and element access and downloading permissions are set; the effects that design resources are reused, resources are shared, and external materials do not need to be downloaded repeatedly are achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of website system construction, and in particular to a method and system for storing and sharing enterprise UI design elements. Background Art

[0002] As the requirements for UI design within enterprises become higher and higher, the need to improve design efficiency, unify design styles and share design materials is becoming more and more urgent. UI designers need to spend a lot of time looking for design resources, which leads to reduced efficiency. Designers from different departments will collect and integrate materials while looking for materials to build their own classified design material libraries, which will lead to low resource utilization. Each designer has to do a lot of repetitive and useless work to find design resources, and resources cannot be shared internally. Specific problems include:

[0003] (1) Resources cannot be shared. When multiple designers participate in a project, they need to unify the resource style and share resources. Without an internal resource platform, work efficiency will be low.

[0004] (2) Duplicate downloading of resources. Most external design material websites require payment, and there are many resources. It is time-consuming and laborious to find design resources, and there may be duplicate downloading of resources.

[0005] (3) Subsequent iterations of the project are inconvenient. A project may be subject to subsequent changes, but they may not be followed up by the same designer. At this time, changes need to be made in the design resources of the previous designer, and the handover is very troublesome.

[0006] (4) Resources are difficult to reuse. After a designer finishes designing a project, the resources may be deleted, and the remaining resources are difficult to find and reuse. Summary of the invention

[0007] The purpose of the present invention is to provide a method and system for storing and sharing enterprise UI design elements to solve the problems raised in the above background technology.

[0008] To achieve the above object, the present invention provides the following technical solution: a method for storing and sharing enterprise UI design elements, the method comprising the following steps:

[0009] Deploy a UI design element storage and sharing system on the server, which includes employee login, material upload, material search, material download, material deletion, permission setting, user information management and administrator management function modules;

[0010] Upload design materials to the system backend through personal accounts, where designers screen and upload high-quality materials based on different types of project requirements;

[0011] Add tags to the uploaded materials, including mandatory tags such as project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, as well as optional tags such as material style tag and user-defined tag, for subsequent search and classification management;

[0012] Provides multiple search methods, allowing users to search individually or in combination based on project tags, material size tags, etc., to quickly locate the required design materials;

[0013] When users upload materials, user information and department information are automatically recorded and associated, and users are supported to modify their personal information.

[0014] Preferably, the following steps are also included: constructing a backend material storage data table, which contains the ID of each uploaded material, the project tag, the project type tag, the material size tag, the material type tag, the material permission tag, the material compliance tag, the material name, the material style tag and user-defined tag fields, so as to realize centralized storage and management of the materials.

[0015] Preferably, the method further includes the following steps: constructing a user information table to store user name, gender, user authority, and department data for use in authority control, user identity verification, and department information display.

[0016] Preferably, the following front-end optimization measures are also included:

[0017] The front-end search page supports advanced search functions, uses a fuzzy search mechanism for resource names, and supports multiple selection tags for accurate search;

[0018] Use JS component library to achieve fluid adaptive layout, ensuring that UI design materials of different sizes can be neatly displayed on the page;

[0019] Implement lazy loading and compression of images to improve front-end display performance, reduce loading time, and optimize user experience.

[0020] Preferably, the following material management security measures are also included: only the material uploader and users with administrator privileges are allowed to delete the uploaded materials to ensure the security and traceability of the materials.

[0021] An enterprise UI design element storage and sharing system, the system comprising:

[0022] Material management module: used to centrally store, classify and manage UI design element materials, including adding, modifying and deleting materials and their label information, such as department, project, type, authority, name and custom style;

[0023] User management module: provides user login, registration, permission setting, personal information management and administrator management functions to ensure secure access to the system and accuracy of user information;

[0024] Search and filter module: supports users to conduct single or combined searches based on multiple tags and attributes, such as project name, material type, size, and style, to quickly locate the required design materials;

[0025] Material display module: uses front-end technology to display materials, supports fluid adaptive layout, and ensures that materials of different sizes and types can be neatly and beautifully displayed on the interface;

[0026] Performance optimization module: optimizes front-end display performance, reduces loading time, and improves user experience through image lazy loading and image compression techniques.

[0027] Preferably, the material management module further includes:

[0028] The material upload function allows users to upload high-quality materials selected during the design process to the system, and automatically associates user information and the department to which they belong;

[0029] The tag management function supports adding or modifying tags for uploaded materials, including required tags and optional tags, to facilitate subsequent search and management.

[0030] Preferably, the user management module also includes:

[0031] Permission control function ensures that only users with corresponding permissions can perform specific operations, such as deleting materials and modifying user information;

[0032] User information synchronization function updates the user information table in real time to reflect the user's latest status.

[0033] Preferably, the search and screening module also includes:

[0034] Advanced search function, supporting fuzzy search of resource names and precise search of multiple tags, improving search efficiency and accuracy;

[0035] Search result sorting function, sorting search results according to user preferences or system preset rules.

[0036] Preferably, the performance optimization module also includes:

[0037] Image compression function, which automatically compresses images when uploading materials and generates low-resolution versions suitable for front-end display to reduce loading time;

[0038] The caching mechanism caches frequently used materials or search results to the server or client to speed up access.

[0039] Compared with the prior art, the present invention has the following beneficial effects:

[0040] The enterprise UI design element storage and sharing method and system proposed in the present invention, by deploying the enterprise UI design element storage and sharing system background, collects and uploads design elements, marks design element label attributes, and sets element access and download permissions, thereby achieving the effects of design resource reuse, resource sharing, and no need for repeated downloading of external materials; through the enterprise UI design element storage and sharing system, the search and positioning is made more accurate according to the material label, which helps to find suitable materials faster, save search costs, realize resource sharing, and have high download efficiency. Even novice designers can quickly find the corresponding materials, and can quickly find the materials required for the project according to the project type label, material size label, material type label, and material permission label. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 Upload a flow chart for the system of the present invention;

[0042] Figure 2 This is a schematic diagram of the label content contained in the required label of the material of the present invention. DETAILED DESCRIPTION

[0043] In order to make the purpose and technical solution of the present invention clearly and completely described, and the advantages more clearly understood, the embodiments of the present invention are further described in detail with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are part of the embodiments of the present invention, rather than all of the embodiments, and are only used to explain the embodiments of the present invention, and are not used to limit the embodiments of the present invention. All other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0044] For example, see Figure 1 to Figure 2 The present invention provides a technical solution: a method for storing and sharing enterprise UI design elements, the method comprising the following steps:

[0045] Deploy a UI design element storage and sharing system on the server, which includes employee login, material upload, material search, material download, material deletion, permission setting, user information management and administrator management function modules;

[0046] Upload design materials to the system backend through personal accounts, where designers screen and upload high-quality materials based on different types of project requirements;

[0047] Add tags to the uploaded materials, including mandatory tags such as project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, as well as optional tags such as material style tag and user-defined tag, for subsequent search and classification management;

[0048] Provides multiple search methods, allowing users to search individually or in combination based on project tags, material size tags, etc., to quickly locate the required design materials;

[0049] When users upload materials, user information and department information are automatically recorded and associated, and users are supported to modify their personal information.

[0050] Build a backend material storage data table, which contains the ID of each uploaded material, the project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, material style tag, and user-defined tag fields to achieve centralized storage and management of materials.

[0051] Build a user information table to store user name, gender, user permissions, and department data for permission control, user identity authentication, and department information display.

[0052] The following front-end optimization measures are also included:

[0053] The front-end search page supports advanced search functions, uses a fuzzy search mechanism for resource names, and supports multiple selection tags for accurate search;

[0054] Use JS component library to achieve fluid adaptive layout, ensuring that UI design materials of different sizes can be neatly displayed on the page;

[0055] Implement lazy loading and compression of images to improve front-end display performance, reduce loading time, and optimize user experience.

[0056] The following material management security measures are also included:

[0057] Only the material uploader and users with administrator privileges are allowed to delete uploaded materials to ensure the security and traceability of the materials.

[0058] Embodiment 2, based on embodiment 1, proposes an enterprise UI design element storage and sharing system, the system comprising:

[0059] Design element classification material library backend and frontend system. Furthermore, the design material mainly has the following tags: material department tag, project tag, project type tag, material type general tag, material permission tag, material name, material custom style tag, etc. Furthermore, the construction method of the enterprise UI design element storage and sharing system includes the following steps:

[0060] (1) Server deployment of UI design element storage and sharing system: including employee login, material upload, material search, material download, material deletion, permission setting, user information, administrator management and other functional entrances;

[0061] (2) Uploading materials through personal accounts: When designers are designing pages, they will download different materials to meet different project requirements, and then screen the materials. For high-quality materials, users log in and upload them to the material library backend.

[0062] (3) Add tags to materials: After uploading materials, you need to select tags for the materials to facilitate subsequent searches. You can select existing tags or add custom tags. Required tags include project tags, project type tags, material size tags, material type tags, material permission tags, material compliance tags, material names, etc. Optional tags include material style tags and user-defined tags.

[0063] (4) Searching for materials: There are many ways to search for materials. You can search by the project tag to which they belong. For example, searching for the XX design project tag will find all the materials for that project. You can also search by the material size tag, for example, 1200*200 size will find all the materials of that size. The search function for other tags is the same. It also supports accurate search with multiple tags. That is, when searching, add the two tags XX design project and 1200*200 size to search for the 1200*200 size materials of that project.

[0064] (5) User personal information settings: uploaded materials will automatically carry user information and department information, and individual users can modify their own personal information.

[0065] Embodiment 3, based on Embodiment 2, proposes an enterprise UI design element storage and sharing system that can improve design efficiency, unify design style, share design materials, facilitate subsequent product iteration and reuse of materials. The specific implementation mainly involves two aspects: implementation and innovation:

[0066] (1) Solution implementation:

[0067] 1) Build a backend material storage data table: Create a data table for the uploaded materials. Each uploaded material includes data such as ID, project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, material style tag, and user-defined tags.

[0068] 2) Build a user information table: save data such as user name, gender, user permissions, department, etc. for each user.

[0069] 3) Advanced search on the front-end search page: When searching, the resource name uses a fuzzy search mechanism. The resource name that contains the search name will be displayed in the results. At the same time, tags support multiple selections for accurate search. Unselected tag attributes will be searched for all. Multiple tag combinations can quickly lock in the desired design resources.

[0070] 4) Front-end material display: UI design materials are of different sizes and cannot be neatly displayed on the page. The front-end uses the JS component library's fluid adaptive layout method to automatically layout the searched images of different sizes on the page.

[0071] 5) Front-end display performance optimization: When displaying front-end materials, lazy loading of images is adopted, and the original images are not displayed directly. The original images occupy too much memory, which will cause the page to be blank for a long time. When uploading, the back-end automatically compresses the image and generates an image with a slightly lower resolution but the same size for the front-end display. In this way, the front-end loads resources faster and improves the overall performance of the Web application.

[0072] 6) Material Deletion: When a material needs to be deleted, only the material uploader and users with administrator privileges can delete the material.

[0073] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for storing and sharing enterprise UI design elements, characterized by: The method comprises the following steps: Deploy a UI design element storage and sharing system on the server, which includes employee login, material upload, material search, material download, material deletion, permission setting, user information management and administrator management function modules; Upload design materials to the system backend through personal accounts, where designers screen and upload high-quality materials based on different types of project requirements; Add tags to the uploaded materials, including mandatory tags such as project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, as well as optional tags such as material style tag and user-defined tag, for subsequent search and classification management; Provides multiple search methods, allowing users to search individually or in combination based on project tags, material size tags, etc., to quickly locate the required design materials; When users upload materials, user information and department information are automatically recorded and associated, and users are supported to modify their personal information.

2. The method for storing and sharing enterprise UI design elements according to claim 1, characterized in that: The following steps are also included: Build a backend material storage data table, which contains the ID of each uploaded material, the project tag, project type tag, material size tag, material type tag, material permission tag, material compliance tag, material name, material style tag, and user-defined tag fields to achieve centralized storage and management of materials.

3. The method for storing and sharing enterprise UI design elements according to claim 1, characterized in that: The following steps are also included: Build a user information table to store user name, gender, user permissions, and department data for permission control, user identity authentication, and department information display.

4. The method for storing and sharing enterprise UI design elements according to claim 1, characterized in that: The following front-end optimization measures are also included: The front-end search page supports advanced search functions, uses a fuzzy search mechanism for resource names, and supports multiple selection tags for accurate search; Use JS component library to achieve fluid adaptive layout, ensuring that UI design materials of different sizes can be neatly displayed on the page; Implement lazy loading and compression of images to improve front-end display performance, reduce loading time, and optimize user experience.

5. The method for storing and sharing enterprise UI design elements according to claim 1, characterized in that: The following material management security measures are also included: Only the material uploader and users with administrator privileges are allowed to delete uploaded materials to ensure the security and traceability of the materials.

6. An enterprise UI design element storage and sharing system according to the enterprise UI design element storage and sharing method according to any one of claims 1 to 5, characterized in that: The system comprises: Material management module: used to centrally store, classify and manage UI design element materials, including adding, modifying and deleting materials and their label information, such as department, project, type, authority, name and custom style; User management module: provides user login, registration, permission setting, personal information management and administrator management functions to ensure secure access to the system and accuracy of user information; Search and filter module: supports users to conduct single or combined searches based on multiple tags and attributes, such as project name, material type, size, and style, to quickly locate the required design materials; Material display module: uses front-end technology to display materials, supports fluid adaptive layout, and ensures that materials of different sizes and types can be neatly and beautifully displayed on the interface; Performance optimization module: optimizes front-end display performance, reduces loading time, and improves user experience through image lazy loading and image compression techniques.

7. The enterprise UI design element storage and sharing system according to claim 6, characterized in that: The material management module also includes: The material upload function allows users to upload high-quality materials selected during the design process to the system, and automatically associates user information and the department to which they belong; The tag management function supports adding or modifying tags for uploaded materials, including required tags and optional tags, to facilitate subsequent search and management.

8. The enterprise UI design element storage and sharing system according to claim 6, characterized in that: The user management module also includes: Permission control function ensures that only users with corresponding permissions can perform specific operations, such as deleting materials and modifying user information; User information synchronization function updates the user information table in real time to reflect the user's latest status.

9. The enterprise UI design element storage and sharing system according to claim 6, characterized in that: The search and filter module also includes: Advanced search function, supporting fuzzy search of resource names and precise search of multiple tags, improving search efficiency and accuracy; Search result sorting function, sorting search results according to user preferences or system preset rules.

10. The enterprise UI design element storage and sharing system according to claim 6, characterized in that: The performance optimization module also includes: Image compression function, which automatically compresses images when uploading materials and generates low-resolution versions suitable for front-end display to reduce loading time; The caching mechanism caches frequently used materials or search results to the server or client to speed up access.

Images