User interface personalized design method and device, computing equipment and storage medium

Abstract

Embodiments of the invention provide a user interface personalized design method and apparatus, a computing device and a storage medium, and belong to the technical field of page interaction design, the method comprises the steps of obtaining function requirements of a user for an application platform, performing similarity analysis on the function requirements, and setting the similar function requirements as the same UI module; a module library comprising a plurality of UI modules is constructed, an API interface used for accessing the module library is set, and each UI module has a user-defined attribute; a module processing request sent by a user through the API interface is received, the processed UI module is displayed based on the module processing request, and the module processing request comprises module adding, module deleting, module hiding, module sequence adjusting and module self-defined attribute modifying. According to the scheme, the consistency and maintainability of the application platform can be kept while individual requirements are met.

Description

Technical Field

[0001] The present invention relates to the technical field of page design, and in particular to a method, device, computing equipment and storage medium for personalized design of user interface. Background Art

[0002] As the number of application platform users continues to grow, the diversification of user needs has put forward requirements for the diversification of platform services. In order to meet the personalized needs of users, many platforms carry out large-scale customized development, lacking an overall design concept. The realization of each special need requires an independent page function module, which makes the platform face huge challenges in later maintenance and modification.

[0003] For example, whenever there is a new feature requirement or a system update is needed, the development team has to spend a lot of manpower to sort out these similar but slightly different features, which not only wastes time but also increases the risk of errors. In addition, this scattered custom development not only creates a burden in maintenance, but also brings problems to the user experience. When users use different pages, they may be confused due to the inconsistency of interface style and functional logic, which in turn affects overall satisfaction.

[0004] Therefore, how to maintain the consistency and maintainability of the application platform while meeting personalized needs has become an important issue facing the current platform. Summary of the invention

[0005] In order to solve the efficiency problems faced by users when adding similar or customized modules, this solution proposes a user interface personalized design method, device, computing device and storage medium. Through UI modular design and custom attributes, different styles can be displayed according to different user needs, or different contents can be displayed in the same style. It can meet personalized needs while maintaining the consistency and maintainability of the application platform.

[0006] According to a first aspect of the present invention, a method for personalized user interface design is provided, comprising: obtaining user functional requirements for an application platform, performing similarity analysis on the functional requirements, and setting similar functional requirements to the same UI module; constructing a module library comprising multiple UI modules, and setting an API interface for accessing the module library, wherein each UI module has custom attributes; receiving a module processing request sent by a user through the API interface, and displaying a processed UI module based on the module processing request, wherein the module processing request comprises adding a new module, deleting a module, hiding a module, adjusting the order of modules, and modifying the custom attributes of a module.

[0007] By adopting the above technical solution and building a module library containing multiple UI modules with custom attributes, users can select and customize UI elements according to their needs and preferences, which can not only meet the personalized needs of different users, but also adapt to the application needs of different scenarios. Developers can quickly add, delete or modify UI modules through the API interface without tedious code modification, making the system more modular and convenient for subsequent expansion and maintenance.

[0008] Optionally, in the user interface personalization design method provided by the present invention, users' functional requirements and preferences for the application platform are collected, the functional requirements of different users are compared, and the similarities between the functional requirements are determined; a corresponding UI module is created for each type of similar functional requirement, and basic attributes, visual attributes, functional attributes and behavioral attributes are set for each module.

[0009] By adopting the above technical solution, by analyzing the user's functional requirements and preferences, and then integrating similar requirements into a unified UI module based on these data, the specific needs of users can be better met.

[0010] Optionally, in the user interface personalization design method provided by the present invention, the request type of the API interface is determined; user interaction events are defined for each UI module, and corresponding event processing functions are written, where the user interaction events include adding UI modules, hiding UI modules, adjusting the display order of UI modules, and changing the properties of UI modules; the module library and API interface are deployed to a server or cloud platform for access by user terminals.

[0011] Optionally, in the user interface personalization design method provided by the present invention, when a user's request for adding a new UI module is received, the newly added UI module is added to the module library and the newly added UI module is displayed; when a user's request to hide or show a UI module is received, the UI module is hidden or displayed on the user terminal; when a user's request to modify the display order of UI modules is received, the reordered UI modules are displayed on the user terminal; when a user's request to modify the display order of UI modules is received, the reordered UI modules are displayed on the user terminal; and when a user's request to modify the attributes is received through the API interface, the style of the UI module is displayed based on the modified attributes.

[0012] By adopting the above technical solution, users are allowed to participate in the personalized customization of the interface layout. Users can add, hide or reorder interface modules according to their needs and preferences, making the user interface more in line with personal usage habits and improving user experience.

[0013] Optionally, in the user interface personalization design method provided by the present invention, the user's newly added UI module is matched with the UI modules in the current module library. If there is a UI module that matches the function of the newly added UI module, the properties are set based on the existing UI module; if there is no UI module that matches the function of the newly added UI module in the current module library, the newly added UI module is added to the current module library and the newly added UI module is displayed.

[0014] By adopting the above technical solution, the system can avoid repeatedly creating modules with the same functions by detecting whether there is a UI module with matching functions in the existing module library. Setting properties based on the existing UI module can ensure the consistency of the new module with the existing system.

[0015] Optionally, in the user interface personalized design method provided by the present invention, a special field is defined for a processing request of a specified event, and the UI module is processed according to the special field; and the event processing solution is added to the module library as a module.

[0016] By defining special fields, you can unify the event handling method and ensure consistent responses to similar events throughout the application. Defining event handling solutions as independent modules can achieve code reuse and better management.

[0017] According to a second aspect of the present invention, there is provided a user interface personalization design device, comprising: a management end and a user terminal, the management end comprising an analysis unit, a construction unit and a processing unit, the analysis unit being used to obtain the user's functional requirements for an application platform, perform similarity analysis on the functional requirements, and set similar functional requirements to the same UI module; the construction unit being used to construct a module library comprising a plurality of UI modules and to set an API interface for accessing the module library, each UI module having custom attributes; the processing unit being used to receive a module processing request sent by a user through an API interface, and to perform module display, hiding, order adjustment and new addition operations based on the module processing request, and to provide a module preview display effect; the user terminal being used to send a module processing request through an API interface and obtain a module to be displayed, and to display the UI module according to the preview display effect provided by the management end.

[0018] Optionally, in the user interface personalized design device provided by the present invention, the management end and the user terminal update the UI module displayed by the user terminal through an incremental synchronization mechanism.

[0019] According to a third aspect of the present invention, there is provided a computing device comprising: at least one processor; and a memory storing program instructions, wherein the program instructions are configured to be suitable for execution by at least one processor, and the program instructions include instructions for executing the above-mentioned user interface personalization design method.

[0020] According to a fourth aspect of the present invention, a readable storage medium storing program instructions is provided. When the program instructions are read and executed by a computing device, the computing device executes the above-mentioned user interface personalized design method.

[0021] Compared with the prior art, the user interface personalized design method and device provided by the present invention can at least achieve the following technical effects: 1. By building a module library containing multiple UI modules with custom properties, users can select and customize UI elements according to their needs and preferences, which can not only meet the personalized needs of different users, but also adapt to the application needs of different scenarios; 2. Developers can quickly add, delete or modify UI modules through API interfaces without tedious code modification, making the system more modular. The modular design allows UI components to adapt to different platforms and devices more easily, and also facilitates subsequent expansion and maintenance; 3. By receiving module processing requests sent by users through the API interface and dynamically displaying the processed UI modules based on these requests, the system can respond to user operations in real time and provide a smoother and more responsive user experience.

[0022] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A block diagram of a computing device 100 according to an embodiment of the present invention is shown; Figure 2 A schematic diagram showing a flow chart of a method 200 for designing a personalized user interface according to an embodiment of the present invention; Figure 3 A schematic structural diagram of a user interface personalized design device 300 according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0024] This solution can improve development efficiency through UI modular design and flexible customization mechanism, allowing users to realize personalized needs within a unified framework, while the system can also maintain high maintainability and scalability.

[0025] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0026] Figure 1 FIG. 1 is a schematic diagram showing the structure of a computing device 100 according to an embodiment of the present invention. Figure 1 As shown, in a basic configuration 102, computing device 100 includes system memory 106 and one or more processors 104. A memory bus 108 may be used for communication between processor 104 and system memory 106.

[0027] The processor 104 may be any type of processor, including but not limited to a microprocessor (µP), a microcontroller (µC), a digital signal processor (DSP), or any combination thereof. The processor 104 may include one or more levels of cache, such as a level 1 cache 110 and a level 2 cache 112, a processor core 114, and registers 116. An example processor core 114 may include an arithmetic logic unit (ALU), a floating point unit (FPU), a digital signal processing core (DSP core), or any combination thereof. An example memory controller 118 may be used with the processor 104, or in some implementations, the memory controller 118 may be an internal part of the processor 104.

[0028] The system memory 106 may be any type of memory, including but not limited to: volatile memory (such as RAM), non-volatile memory (such as ROM, flash memory, etc.) or any combination thereof. The physical memory in the computing device generally refers to the volatile memory RAM, and the data in the disk needs to be loaded into the physical memory before it can be read by the processor 104. The system memory 106 may include an operating system 120, one or more applications 122, and program data 124. In some embodiments, the application 122 may be arranged to execute instructions on the operating system by one or more processors 104 using the program data 124. The operating system 120 may be, for example, Linux, Windows, etc., which includes program instructions for processing basic system services and performing hardware-dependent tasks. The application 122 includes program instructions for implementing various user-desired functions, and the application 122 may be, for example, a browser, instant messaging software, a software development tool (such as an integrated development environment IDE, a compiler, etc.), etc., but is not limited thereto. When the application 122 is installed in the computing device 100, a driver module may be added to the operating system 120.

[0029] When the computing device 100 starts running, the processor 104 reads and executes the program instructions of the operating system 120 from the memory 106. The application 122 runs on the operating system 120 and uses the interfaces provided by the operating system 120 and the underlying hardware to implement various functions desired by the user. When the user starts the application 122, the application 122 is loaded into the memory 106, and the processor 104 reads and executes the program instructions of the application 122 from the memory 106.

[0030] Computing device 100 also includes a storage device 132 including a removable storage 136 and a non-removable storage 138 , both of which are connected to storage interface bus 134 .

[0031] The computing device 100 may also include an interface bus 140 that facilitates communication from various interface devices (e.g., output devices 142, peripheral interfaces 144, and communication devices 146) to the basic configuration 102 via the bus / interface controller 130. Example output devices 142 include a graphics processing unit 148 and an audio processing unit 150. They can be configured to facilitate communication with various external devices such as a display or speakers via one or more A / V ports 152. Example peripheral interfaces 144 may include a serial interface controller 154 and a parallel interface controller 156, which may be configured to facilitate communication with external devices such as input devices (e.g., keyboards, mice, pens, voice input devices, touch input devices) or other peripherals (e.g., printers, scanners, etc.) via one or more I / O ports 158. Example communication devices 146 may include a network controller 160, which may be arranged to facilitate communication with one or more other computing devices 162 via a network communication link via one or more communication ports 164.

[0032] A network communication link may be an example of a communication medium. Communication media may generally be embodied as computer-readable instructions, data structures, program modules in a modulated data signal such as a carrier wave or other transmission mechanism, and may include any information delivery medium. A "modulated data signal" may be a signal in which one or more of its data sets or its changes may be performed in a manner that encodes information in the signal. As a non-limiting example, communication media may include wired media such as a wired network or a dedicated network, and various wireless media such as sound, radio frequency (RF), microwave, infrared (IR) or other wireless media. The term computer-readable media used herein may include both storage media and communication media. In a computing device 100 according to the present invention, an application 122 includes instructions for executing the user interface personalization design method 200 of the present invention.

[0033] Figure 2 FIG. 2 is a flow chart of a method 200 for designing a personalized user interface according to an embodiment of the present invention. Figure 2 As shown, the method 200 begins with step S210, obtaining the user's functional requirements for the application platform, performing similarity analysis on the functional requirements, and setting similar functional requirements as the same UI module.

[0034] In the initial stage, collect users' functional requirements and preferences for the application platform, compare the functional requirements of different users, determine the similarities between functional requirements, set similar functional requirements to the same UI module, and set basic attributes, visual attributes, functional attributes, and behavioral attributes for each module. For example, collect user feedback through questionnaires to clarify the needs of different users. Preliminarily classify user requirements according to functional types, such as display, interaction, filtering, etc. Then compare the collected user requirements to identify requirements with similar functions. For example, multiple users hope to have a "recommendation module", but the specific names and forms of expression may be different. All requirements related to "recommendation" are classified into the "recommendation module". Each UI module only undertakes a certain function or task, and each module is independent.

[0035] Then in step S220, a module library including a plurality of UI modules is constructed, and an API interface for accessing the module library is set, wherein each UI module has custom attributes.

[0036] Each UI module can contain multiple components. A set of custom properties can be defined for each UI module, and multiple independent UI modules can be integrated into the module library. For example, the custom properties that can be modified include name, style, size, content, display order, etc., allowing users to customize module property values ​​within a specified range. More customizable properties can be provided for each module, including animation effects, response events, style variables, etc., allowing users to adjust the UI's visuals and functions in a more detailed manner.

[0037] To set up an API interface for accessing the module library, you first need to clarify which functions and data require external access, which usually includes querying and modifying the properties of UI modules, adding or displaying, deleting or hiding modules, adjusting the order, and other operations. Design an API interface so that users can obtain the configuration and display sequence of UI modules through the API interface. Determine the request type of the API interface (GET, POST, PATCH, DELETE). For example, using the RESTful standard, GET / ui-modules can be used to obtain all module information, including module ID, name, properties (such as title, color, size), and sorting sequence number.

[0038] Then, define user interaction events for each UI module and write corresponding event handling functions. User interaction events include adding UI modules, hiding UI modules, adjusting the display order of UI modules, and changing the properties of UI modules. For example, implement POST requests to allow users to add new modules to the interface. Implement PATCH or PUT requests to update the "display status" property of a module. Implement PATCH or PUT requests to update the display order of modules, allowing users to change any configurable properties of a module, etc. Write backend logic for each event type.

[0039] Finally, the constructed module library is published to the server or cloud platform, and the UI module library can be regularly maintained based on user feedback. For example, each time a new UI module is added, the module library can be expanded based on the properties of the new UI module.

[0040] Finally, step S230 is executed to receive the module processing request sent by the user through the API interface, and the processed UI module is displayed based on the module processing request. The module processing request includes adding new modules, deleting modules, hiding modules, adjusting module order, and modifying custom attributes of modules.

[0041] Users can trigger module processing requests through various interactions on the front-end interface. The back-end API interface processes the received requests through routing, processes the modules according to the module order returned by the API interface, parses the request body, and executes the corresponding business logic according to the request type. For example, when receiving a user's request to add a new UI module, the newly added UI module will be added to the module library and displayed on the user terminal; when receiving a user's request to hide or show a UI module, the UI module will be hidden or shown on the user terminal; when receiving a user's request to modify the display order of UI modules, the reordered UI modules will be displayed on the user terminal; when receiving a user's request to modify the attribute modification sent through the API interface, the style of the UI module will be displayed on the user terminal based on the modified attributes.

[0042] The front-end application decides which modules to display and which modules to hide based on the information returned by the interface. For events or data that require special processing, the interface can return modules containing special fields. These special fields indicate that the front-end performs non-standard processing, such as triggering pop-up windows, timed displays, etc. Based on the instructions of the special fields, the front-end can perform specific actions, such as temporarily hiding the created module if the activity has not started, and manually displaying or timing displaying it after the activity starts. By adding the event processing solution as a module to the module library, the event processing module can be dynamically deployed to the target terminal, or the module configuration can be updated. This flexibility allows for rapid response to changes in business needs.

[0043] Through modular interface design, applications can flexibly adapt to different user needs and business scenarios. When adding or modifying module properties, there is no need to significantly change the existing code, making data maintenance and updating easier.

[0044] Figure 3 FIG. 3 is a schematic diagram showing the structure of a user interface personalized design device 300 according to an embodiment of the present invention. Figure 3 As shown, the device 300 may include a management terminal 310 and a user terminal 320 , wherein the management terminal 310 may include an analyzing unit 311 , a constructing unit 312 and a processing unit 313 .

[0045] Among them, the analysis unit 311 is used to obtain the user's functional requirements for the application platform, perform similarity analysis on the functional requirements, and set similar functional requirements as the same UI module. Specifically, the analysis unit 311 can perform similarity analysis according to the functional requirements mentioned by the user, classify modules with similar functional requirements as the same UI module, define attributes for each UI module, and specify customizable attribute types. For example, for the same module, customer A wants to name it "Latest on the Shelf", and customer B wants to name it "Recommendations in the Museum". The module can be classified as the same "recommendation module".

[0046] The construction unit 312 is used to construct a module library containing multiple UI modules and set an API interface for accessing the module library. Each UI module has custom properties. The construction unit 312 can define user interaction events for each UI module and write corresponding event processing functions. User interaction events include adding UI modules, hiding UI modules, adjusting the display order of UI modules, and changing the properties of UI modules; deploy the module library and API interface to a server or cloud platform for user terminals to access.

[0047] The processing unit 313 is used to receive the module processing request sent by the user through the API interface, and execute the display, hiding, order adjustment and new addition of the module based on the module processing request, and provide the module preview display effect. For example, the collection page design within the authority can be carried out through the management end, and the desired module can be selected through the existing module types, and different names can be given to perform typesetting layout. Each module allows repeated use of name modification, and the module display order can also be adjusted. The effect of UI design display can be viewed through preview.

[0048] The user terminal 320 is used to send a module processing request through an API interface and obtain a module that needs to be displayed, and display the UI module according to the preview display effect provided by the management terminal 310 .

[0049] In summary, the method and device for personalized user interface design provided by the present invention can at least achieve the following technical effects: 1. By building a module library containing multiple UI modules with custom properties, users can select and customize UI elements according to their needs and preferences, which can not only meet the personalized needs of different users, but also adapt to the application needs of different scenarios; 2. Developers can quickly add, delete or modify UI modules through API interfaces without tedious code modification, making the system more modular. The modular design allows UI components to adapt to different platforms and devices more easily, and also facilitates subsequent expansion and maintenance; 3. By receiving module processing requests sent by users through the API interface and dynamically displaying the processed UI modules based on these requests, the system can respond to user operations in real time and provide a smoother and more responsive user experience.

[0050] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0051] Although the present invention has been described according to a limited number of embodiments, it will be apparent to those skilled in the art, with the benefit of the above description, that other embodiments may be envisioned within the scope of the invention thus described. In addition, it should be noted that the language used in this specification is selected primarily for readability and teaching purposes, rather than for explaining or defining the subject matter of the present invention. Therefore, many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the appended claims. The disclosure of the present invention is illustrative and not restrictive with respect to the scope of the present invention, and the scope of the present invention is defined by the appended claims.

Claims

1. A method for personalized design of a user interface, characterized in that: include: Obtaining the user's functional requirements for the application platform, performing similarity analysis on the functional requirements, and setting similar functional requirements to the same UI module; Build a module library containing multiple UI modules and set up an API interface for accessing the module library. Each UI module has custom properties. Receive a module processing request sent by the user through the API interface, and display the processed UI module based on the module processing request. The module processing request includes adding a new module, deleting a module, hiding a module, adjusting the module order, and modifying the custom attributes of a module.

2. The method for personalized user interface design according to claim 1, characterized in that: The step of obtaining the user's functional requirements for the application platform, performing similarity analysis on the functional requirements, and setting similar functional requirements to the same UI module includes: Collect users' functional requirements and preferences for the application platform, compare the functional requirements of different users, and determine the similarities between functional requirements; Create a corresponding UI module for each type of similar functional requirement, and set basic properties, visual properties, functional properties, and behavioral properties for each module.

3. The method for personalized user interface design according to claim 1, characterized in that: The steps of constructing a module library including a plurality of UI modules and setting an API interface for accessing the module library, wherein each UI module has custom attributes, include: Determine the request type of the API interface; Define user interaction events for each UI module and write corresponding event processing functions. The user interaction events include adding UI modules, hiding UI modules, adjusting the display order of UI modules, and changing the properties of UI modules. The module library and API interface are deployed to a server or cloud platform for access by user terminals.

4. The method for personalized user interface design according to claim 1, characterized in that: The step of receiving a module processing request sent by a user through the API interface and displaying a processed UI module based on the module processing request includes: Receive a user's request for adding a new UI module, add the new UI module to the module library and display the new UI module; Receiving a request from a user to hide or display a UI module, hiding or displaying the UI module on the user terminal; receiving a request from a user to modify the display order of UI modules, and displaying the reordered UI modules on the user terminal; Receive a property modification request sent by the user through the API interface, and display the style of the UI module based on the modified properties.

5. The method for personalized user interface design according to claim 4, characterized in that: The step of receiving a user's request for adding a new UI module, adding the new UI module to the module library and displaying the new UI module comprises: Match the newly added UI module with the UI modules in the current module library. If there is a UI module that matches the function of the newly added UI module, set the properties based on the existing UI module. If there is no UI module matching the function of the newly added UI module in the current module library, the newly added UI module will be added to the current module library and the newly added UI module will be displayed.

6. The method for personalized user interface design according to claim 4, characterized in that: The step of receiving a module processing request sent by a user through the API interface and displaying a processed UI module based on the module processing request also includes: A special field is defined for a processing request of a specified event, and a UI module is processed according to the special field; Add the event handling solution as a module to the module library.

7. A user interface personalized design device, characterized in that: include: A management end and a user terminal, wherein the management end includes an analysis unit, a construction unit and a processing unit, wherein the analysis unit is used to obtain the user's functional requirements for the application platform, perform similarity analysis on the functional requirements, and set similar functional requirements to the same UI module; the construction unit is used to build a module library containing multiple UI modules and set an API interface for accessing the module library, and each UI module has custom attributes; the processing unit is used to receive a module processing request sent by the user through the API interface, and execute the display, hiding, adjustment of order and addition of modules based on the module processing request, and provide a module preview display effect; The user terminal is used to send a module processing request through an API interface and obtain a module that needs to be displayed, and display the UI module according to the preview display effect provided by the management end.

8. The user interface personalized design device according to claim 7, characterized in that: The management end and the user terminal update the UI module displayed by the user terminal through an incremental synchronization mechanism.

9. A computing device, characterized in that include: At least one processor and a memory storing program instructions, wherein the program instructions are configured to be suitable for being executed by the at least one processor, and the program instructions include instructions for executing the user interface personalization design method according to any one of claims 1-6.

10. A readable storage medium storing program instructions, characterized in that: When the program instructions are read and executed by a computing device, the computing device executes the user interface personalized design method as described in any one of claims 1-6.

Images