UI interface design method and device, computer equipment and storage medium

Abstract

The invention belongs to the technical field of user interfaces, and relates to a UI interface design method and device, computer equipment and a storage medium, and the method comprises the following steps: abstracting each page in a UI interface as a data node; performing node linking on each page according to the business relationship; designing a navigation path according to the link relation of the nodes; designing an interface layout according to the hierarchical relationship and the link relationship of the nodes; and carrying out testing and iterative optimization on the UI interface design based on the binary tree. The UI pages are organized through a binary tree, jumping logic of the pages can be achieved through simple logic codes, the code development workload is reduced through decoupling of the pages, and the robustness of software is improved; the development and maintenance of the page become simpler and clearer, and meanwhile, the expansion workload of the UI page is reduced.

Description

Technical Field

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

[0002] In the information age, user interface (UI) design has become an indispensable part of software development. How to design a UI interface that is both beautiful and efficient has always been the focus of designers and developers. In recent years, the UI interface design method based on binary trees has gradually emerged and stood out among many design solutions with its unique advantages.

[0003] LCD screens are used in traditional electronic products for user interaction. The program architecture is generally designed based on tables or multiple conditional judgments, but this page organization method is very unfriendly to subsequent scalability and maintainability. Especially when the number of pages increases, the various page jump logics will become more complex and changeable, which will bring hidden dangers to the stability of the software. Summary of the invention

[0004] The purpose of the embodiments of the present invention is to propose a UI interface design method, device, computer equipment and storage medium to solve the problem in the prior art that when the number of UI pages increases, the various page jump logics will become more complex and changeable, which will bring hidden dangers to the stability of the software.

[0005] In order to solve the above technical problems, the present invention provides a UI interface design method, which adopts the following technical solution, including:

[0006] Abstract each page in the UI interface into a data node;

[0007] Link each page to nodes according to business relationships;

[0008] Design navigation paths based on the link relationship of nodes;

[0009] Design the interface layout according to the hierarchical relationship and link relationship of nodes;

[0010] Test and iteratively optimize the binary tree-based UI interface design.

[0011] Preferably, each of the data nodes contains three link nodes: a parent node, a child node, and a brother node.

[0012] Preferably, the step of designing a navigation path according to the link relationship of the nodes specifically includes:

[0013] By traversing the tree structure, find the shortest path between any two pages.

[0014] Preferably, the step of designing the interface layout according to the hierarchical relationship and link relationship of the nodes specifically includes:

[0015] Use tree diagram and menu bar to display page structure;

[0016] Improve the user's interaction experience with the interface by adding animation effects and prompt information.

[0017] Preferably, the steps of testing and iteratively optimizing the binary tree-based UI interface design specifically include:

[0018] By collecting user feedback and data analysis, we can identify problems and deficiencies in the design and improve and optimize them.

[0019] Preferably, the step of linking the pages into nodes according to the business relationship specifically includes:

[0020] The parent node points to the parent page to which the current page belongs;

[0021] The child node points to the subordinate page of the current page;

[0022] The brother nodes point to other pages at the same level as the current page.

[0023] Preferably, the UI interface design method further includes:

[0024] Optimize navigation paths based on business needs and user habits.

[0025] In order to solve the above technical problems, the present invention further provides a UI interface design device, which adopts the following technical solution, including:

[0026] Abstract module, used to abstract each page in the UI interface into a data node;

[0027] The link module is used to link nodes of each page according to business relationships;

[0028] A navigation module is used to design a navigation path based on the link relationship of nodes;

[0029] The layout module is used to design the interface layout according to the hierarchical relationship and link relationship of nodes;

[0030] The optimization module is used to test and iteratively optimize the binary tree-based UI interface design.

[0031] In order to solve the above technical problems, the present invention also provides a computer device, which adopts the technical solution described below, including a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned UI interface design method when executing the computer-readable instructions.

[0032] In order to solve the above technical problems, the present invention also provides a computer-readable storage medium, which adopts the technical solution described below, and stores computer-readable instructions on the computer-readable storage medium, which implement the steps of the above-mentioned UI interface design method when executed by the processor.

[0033] Compared with the prior art, the present invention has the following beneficial effects: each UI page is organized by a binary tree, and the page jump logic can be implemented by simple logic code. By decoupling the pages, the code development workload is reduced and the robustness of the software is improved; the page development and maintenance becomes simpler and clearer, and the expansion workload of the UI page is reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the scheme in the present invention, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0035] Figure 1 It is a flow chart of an embodiment of the UI interface design method of the present invention;

[0036] Figure 2 It is a schematic diagram of a binary tree organization structure used in the UI interface design method of the present invention;

[0037] Figure 3 It is a structural schematic diagram of an embodiment of the UI interface design device of the present invention;

[0038] Figure 4 It is a schematic structural diagram of an embodiment of a computer device of the present invention. DETAILED DESCRIPTION

[0039] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present invention; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present invention; the terms "including" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present invention or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0040] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0041] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings.

[0042] It should be noted that the UI interface design method provided in the embodiment of the present invention is generally executed by a server / terminal device, and accordingly, the UI interface design device is generally arranged in the server / terminal device.

[0043] It should be understood that the number of terminal devices, networks and servers is only illustrative. Depending on the implementation requirements, there can be any number of terminal devices, networks and servers.

[0044] Embodiment 1

[0045] Continue to refer Figure 1 , which shows a flow chart of an embodiment of the UI interface design method of the present invention. The UI interface design method comprises the following steps:

[0046] Step S1, abstracting each page in the UI interface into a data node.

[0047] In this embodiment, the electronic device (e.g., server / terminal device) on which the UI interface design method runs can receive the UI interface design request via a wired connection or a wireless connection. It should be noted that the wireless connection method may include but is not limited to 3G / 4G / 5G connection, WiFi connection, Bluetooth connection, WiMAXX connection, Zigbee connection, UWB (ultra wideband) connection, and other wireless connection methods currently known or to be developed in the future.

[0048] A binary tree is a common data structure where each node has at most two child nodes, usually called the left child and the right child. This structure is concise and efficient, making data storage, retrieval, and modification operations extremely fast.

[0049] In UI interface design, a binary tree can be considered as a framework for organizing and presenting information. By using interface elements (such as buttons, text boxes, icons, etc.) as nodes of a binary tree, a clear hierarchy and logically rigorous interface structure can be constructed. This structure not only helps improve user experience, but also makes the interface easier to maintain and expand.

[0050] In this embodiment, a method for designing a UI interface based on a binary tree is proposed. The primary task of designing a UI interface based on a binary tree is to determine the information hierarchy and node division. Designers need to divide the information in the interface into different levels according to the needs and habits of users, and use the information of each level as a node of the binary tree. For example, the UI interface of an e-commerce website can be divided into levels such as home page, product classification, and product details, and each level can be treated as a node.

[0051] The properties of binary trees include:

[0052] Order: The left and right child nodes have a clear order relationship, which helps to maintain the logic and consistency of interface elements.

[0053] Hierarchy: The binary tree hierarchy allows interface elements to be displayed in layers according to importance or logical relationships, improving the readability and comprehensibility of information.

[0054] Scalability: The binary tree structure allows nodes to be added or deleted as needed, making it easy to dynamically adjust and expand the interface.

[0055] In this embodiment, the data node contains three link nodes: a parent node, a child node, and a brother node. After determining the node, a binary tree structure needs to be constructed. This usually involves determining the parent-child relationship and the brother relationship of the node. In the UI interface, the parent-child relationship can represent the inclusion relationship between different levels, while the brother relationship can represent the parallel relationship between different nodes in the same level. By setting these relationships reasonably, a binary tree with a clear structure and strict logic can be constructed.

[0056] It is necessary to clarify the design goals and user needs of the UI interface, including the interface's functions, styles, and interaction methods, etc. This helps to select appropriate nodes and connections for the binary tree structure.

[0057] First, we need to abstract each page in the UI interface into a data node. Each node should contain basic information about the page, such as page name, page ID, page content, etc. At the same time, each node must also have links to its parent node, child node, and sibling node. By creating these nodes, a binary tree structure based on pages is constructed.

[0058] Step S2: link the pages into nodes according to business relationships.

[0059] In this embodiment, step S2, linking the pages into nodes according to the business relationship, may further include the following steps:

[0060] S21. The parent node points to the parent page to which the current page belongs.

[0061] S22. The child node points to the subordinate page of the current page.

[0062] S23. The brother node points to other pages at the same level as the current page.

[0063] Based on the design goals and requirements, you can start building a binary tree structure. Use interface elements or components as nodes and establish connections based on the logical relationships between them. For example, the main menu item can be the root node, and its submenu items can be the left or right child nodes.

[0064] After creating the nodes, you need to link them according to the business relationship. Specifically, you need to analyze the logical relationships between pages, such as parent-child relationships, sibling relationships, etc., and map these relationships to the links between nodes. For example, if a page is a child page of another page, you can link the node of the child page to the node of the parent page. In this way, a binary tree structure that reflects the business relationship is established.

[0065] If a device has three pages, namely, main menu, submenu 1, and submenu 2, the link relationship is:

[0066] The child node of the main menu points to submenu 1; the parent node of the main menu points to itself (because it is a top-level menu and does not contain a parent node); the brother node of the main menu points to itself (does not contain a brother node); the parent node of submenu 1 points to the main menu; the child node of submenu 1 points to itself (because it does not contain lower-level child nodes); the brother node of submenu 1 points to submenu 2; the parent node of submenu 2 points to the main menu; the child node of submenu 2 points to itself; the brother node of submenu 2 points to itself (because it does not contain a brother node).

[0067] After the program is running, the "current page" pointer is first pointed to the parent node, that is, the main menu is displayed first. According to the running logic, when it is necessary to jump to submenu 1, the "current page" is pointed to submenu 1, and the same is true for submenu 2. When it is necessary to return to the upper menu, just point the "current page" to the parent node again.

[0068] The linking process of each node is fixed, and all nodes are linked each time. In this way, when adding a new page, developers can focus on the design of page content and business logic, and do not need to worry about the status and jump logic between pages. This achieves decoupling between pages.

[0069] For page switching, it mainly receives events such as "return" and "jump to sub-page" and jumps according to the events. For other business layer events (such as data modification, button events, etc.), they are received and processed by the actual business processing code inside the page.

[0070] The page data is designed as follows:

[0071] typedef struct MinUI_Page

[0072] {

[0073] struct MinUI_Page *Parent; / / The parent node.

[0074] struct MinUI_Page *Child; / / The child node.

[0075] struct MinUI_Page *Brother; / / The brother node

[0076] Tick_Handler Process; / / The time tick handler

[0077] Key_Handler KeyPress; / / The key press handler

[0078] uint32_t Status;

[0079] uint32_t Num; / / The order num of node

[0080] } MinUI_Page_TypeDef;

[0081] Each page contains three page pointers: Parent is the parent node, which is used when the page returns upward; Child is the node of the home page in the sub-page collection, which is used when jumping to the sub-page; Brother is the brother node, which can jump to any sub-page in conjunction with the Child node.

[0082] The page processing logic is shown in the following code:

[0083] void MinUI_Process(uint32_t ms)

[0084] {

[0085] MinUI_Status_TypeDef status;

[0086] switch(status = CurrentPage->Process(ms))

[0087] {

[0088] case SWITCH_PARENT: / * Page Return * /

[0089] {

[0090] CurrentPage = CurrentPage->Parent;

[0091] break;

[0092] }

[0093] default:

[0094] {

[0095] if(status > 0)

[0096] {

[0097] MinUI_Page_TypeDef *child;

[0098] if(child = Get_Child(CurrentPage, status))

[0099] {

[0100] CurrentPage = child;

[0101] }

[0102] }

[0103] break;

[0104] }

[0105] }

[0106] }

[0107] CurrentPage is the pointer to the current page. Looping through the Process function of the current page implements page refresh and event response. When the SWITCH_XXX parameter is returned, the address pointed to by CurrentPage is switched to implement page switching.

[0108] Each page only needs to implement internal event processing and related logic, which greatly achieves the decoupling between pages.

[0109] / **

[0110] * @brief Page_Process

[0111] * @param uint32_t ms: refresh period in ms

[0112] * @retval MinUI_Status_TypeDef.

[0113] * /

[0114] static MinUI_Status_TypeDef Page_Process(uint32_t ms)

[0115] {

[0116] / / Draw the relevant display content in the page

[0117] }

[0118] / **

[0119] * @brief Page_KeyPress

[0120] * @param uint32_t keyCode

[0121] * @retval MinUI_Status_TypeDef.

[0122] * /

[0123] static MinUI_Status_TypeDef Page_KeyPress(uint32_t keyCode)

[0124] {

[0125] MinUI_Status_TypeDef ret;

[0126] / / Handle related key events and implement page jump through return values

[0127] return ret;

[0128] }

[0129] Step S3, designing a navigation path according to the link relationship of the nodes.

[0130] In this embodiment, in a binary tree structure, a navigation path can be designed according to the link relationship of the nodes. By traversing the tree structure, the shortest path between any two pages can be found. This helps to achieve fast navigation and reduce the complexity of user operations. At the same time, the navigation path can also be optimized according to business needs and user habits, such as adding shortcut paths, hiding infrequently used paths, etc.

[0131] After building the binary tree structure, you need to design a suitable style and interaction method for each node. This includes visual elements such as the shape, color, and font of the node, as well as interactive behaviors such as clicking and hovering the node. Through reasonable node design, the aesthetics and usability of the interface can be improved.

[0132] Based on the hierarchy and orderliness of the binary tree structure, the layout and navigation of the interface can be easily realized. By reasonably arranging the position and hierarchical relationship of the nodes, it can ensure that users can quickly find the required information or functions.

[0133] Step S4, designing the interface layout according to the hierarchical relationship and link relationship of the nodes.

[0134] In this embodiment, the UI interface design based on the binary tree structure not only focuses on the logical relationship between pages, but also pays attention to the layout and interaction design of the interface. A reasonable interface layout can be designed according to the hierarchical relationship and link relationship of the nodes, such as using a tree diagram, menu bar, etc. to display the page structure. At the same time, the user's interaction experience with the interface can also be enhanced by adding animation effects, prompt information, etc.

[0135] Step S5, testing and iteratively optimizing the UI interface design based on the binary tree.

[0136] In this embodiment, by collecting user feedback and data analysis, problems and deficiencies in the design can be discovered and improved and optimized, which helps to improve the quality of the UI interface and user experience and promote business development.

[0137] When implementing a binary tree-based UI interface design, front-end development technology and data visualization technology can be used. Front-end development technology can help build the basic structure and functions of the page and realize page rendering and interaction. Data visualization technology can help display the binary tree structure in an intuitive way, which is easy for users to understand and operate. At the same time, back-end development technology can also be used to store and manage data to ensure the stability and scalability of UI interface design.

[0138] The binary tree-based UI interface design method optimizes and improves the interface design by abstracting the page into data nodes and establishing business relationship links. This method can not only clearly reflect the hierarchical relationship between pages, but also help to achieve fast navigation and flexible layout of pages.

[0139] Figure 2 This is a schematic diagram of a binary tree organization structure used in the UI interface design method of the present invention. Figure 2 As shown in the figure below, the topmost layer is the root node, the left child node of the root node is its own child node, and the right child node is the brother node. The same is true for other nodes. As shown in the figure below: Page 1, Page 1.1, Page 1.1.1, Page 1.1.1.1 are parent-child relationships, and Page 1, Page 2, Page 3, Page 4 are brother relationships.

[0140] The beneficial effects of implementing this embodiment are as follows: each UI page is organized through a binary tree, and the page jump logic can be implemented through simple logic code. The code development workload is reduced by decoupling the pages, and the robustness of the software is improved; the development and maintenance of the page becomes simpler and clearer, and the expansion workload of the UI page is reduced.

[0141] The present invention can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present invention can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present invention can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0142] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0143] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0144] Embodiment 2

[0145] Further references Figure 3 , as a response to the above Figure 1 The present invention provides an embodiment of a UI interface design device, and the device embodiment is Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0146] like Figure 3 As shown, the UI interface design device 60 of this embodiment includes: an abstract module 61, a link module 62, a navigation module 63, a layout module 64 and an optimization module 65. Among them:

[0147] Abstraction module 61, used to abstract each page in the UI interface into a data node;

[0148] The link module 62 is used to link the pages into nodes according to the business relationship;

[0149] A navigation module 63, used to design a navigation path according to the link relationship of the nodes;

[0150] The layout module 64 is used to design the interface layout according to the hierarchical relationship and link relationship of the nodes;

[0151] The optimization module 65 is used to test and iteratively optimize the UI interface design based on the binary tree.

[0152] The beneficial effects of implementing this embodiment are as follows: each UI page is organized through a binary tree, and the page jump logic can be implemented through simple logic code. The code development workload is reduced by decoupling the pages, and the robustness of the software is improved; the development and maintenance of the page becomes simpler and clearer, and the expansion workload of the UI page is reduced.

[0153] Embodiment 3

[0154] To solve the above technical problems, the embodiment of the present invention also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of the computer device in this embodiment.

[0155] The computer device 7 includes a memory 71, a processor 72, and a network interface 73 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 7 having components of a memory 71, a processor 72, and a network interface 73, but it should be understood that it is not required to implement all the components shown, and more or fewer components may be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), a digital processor (DSP), an embedded device, etc.

[0156] The computer device may be a desktop computer, a notebook computer, a PDA, a cloud server, etc. The computer device may interact with the user through a keyboard, a mouse, a remote control, a touch pad, or a voice control device.

[0157] The memory 71 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 71 may be an internal storage unit of the computer device 7, such as a hard disk or memory of the computer device 7. In other embodiments, the memory 71 may also be an external storage device of the computer device 7, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 7. Of course, the memory 71 may also include both the internal storage unit of the computer device 7 and its external storage device. In this embodiment, the memory 71 is generally used to store the operating system and various application software installed on the computer device 7, such as computer-readable instructions of the UI interface design method, etc. In addition, the memory 71 can also be used to temporarily store various types of data that have been output or are to be output.

[0158] In some embodiments, the processor 72 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips. The processor 72 is generally used to control the overall operation of the computer device 7. In this embodiment, the processor 72 is used to run the computer-readable instructions stored in the memory 71 or process data, such as computer-readable instructions for running the UI interface design method.

[0159] The network interface 73 may include a wireless network interface or a wired network interface. The network interface 73 is generally used to establish a communication connection between the computer device 7 and other electronic devices.

[0160] The beneficial effects of implementing this embodiment are as follows: each UI page is organized through a binary tree, and the page jump logic can be implemented through simple logic code. The code development workload is reduced by decoupling the pages, and the robustness of the software is improved; the development and maintenance of the page becomes simpler and clearer, and the expansion workload of the UI page is reduced.

[0161] Embodiment 4

[0162] The present invention also provides another embodiment, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the UI interface design method as described above.

[0163] The beneficial effects of implementing this embodiment are as follows: each UI page is organized through a binary tree, and the page jump logic can be implemented through simple logic code. The code development workload is reduced by decoupling the pages, and the robustness of the software is improved; the development and maintenance of the page becomes simpler and clearer, and the expansion workload of the UI page is reduced.

[0164] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the various embodiment methods of the present invention.

[0165] Obviously, the embodiments described above are only some embodiments of the present invention, rather than all embodiments. The preferred embodiments of the present invention are given in the accompanying drawings, but they do not limit the patent scope of the present invention. The present invention can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive. Although the present invention has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to perform equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of the present invention, directly or indirectly used in other related technical fields, is also within the scope of patent protection of the present invention.

Claims

1. A UI interface design method, characterized in that: The steps include: Abstract each page in the UI interface into a data node; Link each page to nodes according to business relationships; Design navigation paths based on the link relationship of nodes; Design the interface layout according to the hierarchical relationship and link relationship of nodes; Test and iteratively optimize the binary tree-based UI interface design.

2. The UI interface design method according to claim 1, characterized in that: The data nodes each contain three link nodes: a parent node, a child node, and a brother node.

3. The UI interface design method according to claim 1, characterized in that: The step of designing a navigation path according to the link relationship of the nodes specifically includes: By traversing the tree structure, find the shortest path between any two pages.

4. The UI interface design method according to claim 1, characterized in that: The step of designing the interface layout according to the hierarchical relationship and link relationship of the nodes specifically includes: Use tree diagram and menu bar to display page structure; Improve the user's interaction experience with the interface by adding animation effects and prompt information.

5. The UI interface design method according to claim 1, characterized in that: The steps of testing and iteratively optimizing the binary tree-based UI interface design specifically include: By collecting user feedback and data analysis, we can identify problems and deficiencies in the design and improve and optimize them.

6. The UI interface design method according to claim 2, characterized in that: The step of linking the pages to nodes according to the business relationship specifically includes: The parent node points to the parent page to which the current page belongs; The child node points to the subordinate page of the current page; The brother nodes point to other pages at the same level as the current page.

7. The UI interface design method according to claim 3, characterized in that: Also includes: Optimize navigation paths based on business needs and user habits.

8. A UI interface design device, characterized in that: include: Abstract module, used to abstract each page in the UI interface into a data node; The link module is used to link nodes of each page according to business relationships; A navigation module is used to design a navigation path based on the link relationship of nodes; The layout module is used to design the interface layout according to the hierarchical relationship and link relationship of nodes; The optimization module is used to test and iteratively optimize the binary tree-based UI interface design.

9. A computer device, comprising a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the UI interface design method as described in any one of claims 1 to 7 when executing the computer-readable instructions.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the UI interface design method according to any one of claims 1 to 7 are implemented.

Images