Multi-layer navigation packing-up display method and multi-layer navigation packing-up display equipment

Abstract

The invention relates to the technical field of interaction of graphical user interfaces, and provides a multi-layer navigation folding display method and device, and the method comprises the steps: responding to a first user operation, and switching a navigation bar with at least one menu item from an unfolding state to a folding state; detecting whether a target menu item with a lower level exists in a navigation bar or not, and if yes, displaying an unfolding indication identifier at a preset position of the target menu item; in response to a second user operation on the unfolding indication identifier, displaying the lower-level menu content corresponding to the target menu item in a floating layer form; and in response to a third user operation on any option in the subordinate menu content, skipping to a corresponding page. According to the multi-layer navigation packing-up display method and the multi-layer navigation packing-up display equipment, navigation operation efficiency and user experience can be improved, efficient utilization of screen space is realized, content shielding is avoided, clear and visual navigation state visibility is provided, conciseness and concentration of an interface are kept, and interaction fluency and context keeping are enhanced.

Description

Technical Field

[0001] The present invention relates to the technical field of interactive graphical user interfaces, and in particular to a multi-layer navigation folding and displaying method and device. Background Art

[0002] As software applications become increasingly complex, their information architectures become increasingly multi-layered and deep. To organize and guide users through this layered content, sidebar navigation has become a widely used interface design pattern. It clearly displays a system's primary functional modules and their interdependencies. However, to conserve valuable screen space for primary content, navigation bars often need to be collapsible, displaying only icons or in a minimized form, and then fully expanded when needed.

[0003] In existing technologies, collapsing and expanding navigation bars is a common practice. However, its handling of multi-layer (cascading or tree-like) navigation structures has significant flaws. The most common implementation is: when a user clicks or hovers over a first-level menu item, the system will display the second-level submenu of that menu item within the fully expanded navigation bar by pulling down or pushing it horizontally from the right. If the navigation bar is in the collapsed state, the navigation bar must first be fully expanded before the above operations can be performed to access the submenus. This traditional approach has the following main shortcomings and disadvantages: First, operational efficiency is low and the interaction path is lengthy. To access a deeper page in a collapsed navigation bar, users must go through multiple steps: "click to expand the navigation bar, find the primary menu, trigger the submenu to expand, and then select the subitem." This process cannot be completed seamlessly while the navigation bar remains collapsed, disrupting user experience and reducing navigation efficiency.

[0004] Second, it takes up screen space and obscures primary content. The necessary action of fully expanding the navigation bar to access submenus means that the navigation bar temporarily or permanently encroaches on a prominent area of ​​the screen (usually the left side). This inevitably obscures the display area of ​​the main content behind it, preventing users from simultaneously viewing the action being taken (i.e., the main page content) when selecting a navigation item. This disrupts user contextual continuity, a particularly significant issue on devices with limited screen space.

[0005] CN112578963A discloses a menu processing method and device, storage medium and electronic equipment, which solves the specific problem of "the selected menu is scrolled out of the visible area due to too many levels or being located at the back after the navigation bar is expanded", but has the following defects: 1. The solution is based on the premise that the navigation bar must be completely expanded, and cannot fundamentally avoid the inherent defects of traditional expansion navigation. The overall expansion of the navigation bar will inevitably occupy a large amount of screen horizontal space, block the main page content and destroy the contextual coherence of user operation. 2. The interactive logic is long and passive. The user still needs to trigger the complete expansion action of the navigation bar, and the system then performs complex calculation and scrolling adjustment to locate the menu. This does not shorten the user's operation path, but introduces a delay in waiting for the system to calculate and scroll, and does not achieve true "fast response". 3. Only the "find" process of the menu is optimized, but the "use" experience is not optimized. Even if the selected menu is adjusted by scrolling to the visible area, the user still needs to find and select in the completely expanded and possibly long navigation bar, and the problem of high visual complexity and low selection efficiency caused by multi-level navigation is not solved. 4. It is essentially a "scroll compensation" rather than an "interactive innovation", which is a patching optimization of the existing expansion-scrolling interaction mode, which compensates for the shortcomings of the original design by adding additional calculation steps, and does not provide a creative solution to the interaction model to achieve space saving and operation efficiency.

[0006] Therefore, how to provide a navigation interaction method that does not completely expand the navigation bar, does not occupy too much screen space, and does not block the main page content, to achieve fast and intuitive multi-level navigation and page jumping, has become a technical problem to be solved. SUMMARY

[0007] Therefore, how to provide a navigation interaction method that does not completely expand the navigation bar, does not occupy too much screen space, and does not block the main page content, to achieve fast and intuitive multi-level navigation and page jumping, has become a technical problem to be solved.

[0008] According to a first aspect of the present application, a multi-level navigation folding display method is provided, which comprises: Step S1: switching the navigation bar with at least one menu item from an expanded state to a folded state in response to a first user operation; Step S2: detecting whether there is a target menu item with a lower level in the navigation bar, and if so, displaying an expansion indication mark at a preset position of the target menu item; Step S3: in response to a second user operation on the expansion indication mark, displaying the lower level menu content corresponding to the target menu item in a floating layer form; Step S4: in response to a third user operation on any option in the lower level menu content, jumping to the corresponding page.

[0009] Optionally, in the multi-layer navigation folding display method, in step S1, when the navigation bar is in the folding state, the menu items of the navigation bar are displayed only in the form of icons.

[0010] Optionally, in the multi-layer navigation folding display method, in step S2, the detection of whether there is a target menu item having a lower level in the navigation bar comprises: defining the attributes of each menu item and the hierarchical relationship between the menu items through a tree data model, traversing all the currently displayed menu items when the navigation bar is switched to the folding state, and querying the tree data model, if a menu item is defined as having a child node in the tree data model, it is determined that the menu item is a target menu item.

[0011] Optionally, in the multi-layer navigation folding display method, in step S2, the expansion indication mark is a dynamic arrow icon, wherein the first direction of the dynamic arrow icon is used to represent that there is a lower level that is folded at present, and the second direction of the dynamic arrow icon is used to represent that the lower level has been expanded or there is no lower level at present.

[0012] Optionally, in the multi-layer navigation folding display method, in step S3, the operation mode of the second user operation is a mouse hovering operation, when the cursor of the user hovers over the area of the expansion indication mark or the target menu item, the display of the lower menu content is triggered immediately, and when the cursor of the user moves out of the area of the expansion indication mark or the target menu item or the area of the lower menu content, the lower menu content is hidden automatically.

[0013] Optionally, in the multi-layer navigation folding display method, in step S3, the floating layer takes the icon of the target menu item as a positioning reference, and is smoothly popped up adjacent to the right side or below the icon, the visual style of the floating layer is consistent with the navigation bar, and the floating layer is visually distinguished from the content of the underlying page through a shadow, a border or a background color, so as to clearly show the hierarchical relationship.

[0014] Optionally, in the multi-layer navigation folding display method, the floating layer is displayed on the current page content and does not trigger the overall expansion of the navigation bar.

[0015] Optionally, in the multi-layer navigation folding display method, in step S3, when the navigation bar is in the folding state, a text prompt box is generated near the cursor of the user when the cursor hovers over any menu item icon, and the text prompt box is used to display the complete name or function description of the menu item.

[0016] Optionally, in the multi-layer navigation folding display method, in step S4, after jumping to the corresponding page, the navigation bar remains in the folding state, and the lower menu content in the form of the floating layer is hidden automatically.

[0017] According to a second aspect of the present application, there is provided a computer device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor implementing the method of the first aspect of the application when executing the program.

[0018] The multi-layer navigation folding display method and device of the present application has the following beneficial technical effects: 1. Improve navigation operation efficiency and user experience By setting "expansion indication mark" (such as right arrow) and "hover trigger" mechanism, the user can directly trigger and access the lower level content of any menu item under the premise of keeping the navigation bar in the folded state. The originally multi-step interaction process is simplified to one-step "hover-selection" action, shortening the operation path and time, realizing truly fast response and seamless navigation, significantly improving the user's operation efficiency and overall use experience.

[0019] 2. Efficient use of screen space, avoid content blocking The display of multi-level menu completely depends on the floating layer independent of the navigation bar body, which is superimposed on the main content rather than pushing it away. This means that when performing multi-level navigation tasks, the main navigation bar always remains in the folded state to save space, and the main content area is fully preserved without any obstruction. Thus, the fundamental defect of blocking page content and disrupting user reading or operation continuity inherent in the traditional mode of "fully expanded navigation bar to access submenus" is solved, realizing the maximum balance and cooperation of navigation function and content display in limited screen space.

[0020] 3. Provide clear and intuitive navigation state visibility By dynamically displaying "expansion indication mark" next to the menu item with lower level, the user is provided with explicit visual indication. The user does not need to rely on memory or make exploratory clicks, but can intuitively identify which menu items contain more content through visual observation. This design follows the basic principle of "state visibility", reducing the user's cognitive load and making the interface more friendly and easy to explore.

[0021] 4. Keep the interface simple and focused In the default folded state, the interface presents an extremely simple style (only icons are displayed), allowing the user to highly concentrate on the current main work content. Only when the user has a clear navigation intention (triggered by hovering), the relevant navigation options are dynamically displayed. This "on-demand" interaction mode effectively reduces the long-term visual interference of interface elements, helping the user maintain focus while ensuring the accessibility of advanced functions.

[0022] 5. Enhance the smoothness of interaction and context retention Since the jump operation is completed in the floating layer, and the navigation bar state remains unchanged after the jump, and the floating layer is automatically hidden, the entire navigation process becomes very smooth. Users will not feel lost or interrupted due to the dramatic expansion / contraction of the navigation bar, and will always be in a stable visual context, thereby maintaining clear operation ideas and task continuity. BRIEF DESCRIPTION OF DRAWINGS

[0023] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained from these drawings without creative labor.

[0024] Figure 1 A step flow chart of a multi-layer navigation folding display method according to an embodiment of the present application; Figure 2 A first example diagram of application of the multi-layer navigation folding display method according to the embodiment of the present application; Figure 3 A second example diagram of application of the multi-layer navigation folding display method according to the embodiment of the present application; Figure 4 A third example diagram of application of the multi-layer navigation folding display method according to the embodiment of the present application; Figure 5 A fourth example diagram of application of the multi-layer navigation folding display method according to the embodiment of the present application; Figure 6 A structural schematic diagram of the device provided by the present application. DETAILED DESCRIPTION

[0025] The embodiments of the present application will be described in detail below with reference to the drawings.

[0026] It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict; and based on the embodiments in the present disclosure, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present disclosure.

[0027] It is to be appreciated that various aspects described herein are described in the context of embodiments that are illustrative and not limiting. It is to be understood that the aspects described herein can be implemented in a wide variety of forms and that any particular structure and / or function described herein is merely illustrative. Based on the teachings herein one skilled in the art will appreciate that an aspect described herein can be implemented independently of any other aspects and that two or more aspects described herein, including dependent aspects, can be implemented in any combination. For example, an apparatus can be implemented using any number of the aspects described herein. Additionally, an apparatus can be implemented using other structure and / or functionality not expressly described herein. It is to be understood that other variations and modifications can be made to the aspects described herein, and any aspect described herein, including dependent aspects, can be implemented in any combination.

[0028] Figure 1 A flowchart of steps of a multi-layer navigation folding display method according to an embodiment of the present application. As shown in Figure 1 the multi-layer navigation folding display method includes the following. Step S1: in response to a first user operation, switching a navigation bar having at least one menu item from an unfolded state to a folded state.

[0029] In this embodiment, when the navigation bar is in the folded state, the menu items of the navigation bar are displayed only in the form of icons.

[0030] Step S2: detecting whether there is a target menu item having a lower level in the navigation bar, and if so, displaying an unfolding indication mark at a preset position of the target menu item.

[0031] In this embodiment, the attributes of each menu item and the hierarchical relationship between menu items are defined by a tree data model, when the navigation bar is switched to the folded state, all the menu items currently displayed are traversed, and the tree data model is queried, if a menu item is defined as having a child node in the tree data model, it is determined that the menu item is a target menu item.

[0032] It is to be noted that in this embodiment, the unfolding indication mark is a dynamic arrow icon, wherein a first pointing direction of the dynamic arrow icon is used to indicate that there is a lower level currently being folded, and a second pointing direction of the dynamic arrow icon is used to indicate that the lower level has been unfolded or there is currently no lower level.

[0033] Step S3: in response to a second user operation on the unfolding indication mark, displaying the lower menu content corresponding to the target menu item in the form of a floating layer.

[0034] In this embodiment, the operation mode of the second user operation is mouse hovering operation. When the cursor of the user hovers over the area of the expansion indication mark or the target menu item, the display of the sub-menu content is triggered immediately. When the cursor of the user moves out of the area of the expansion indication mark or the target menu item or the area of the sub-menu content, the sub-menu content is hidden automatically.

[0035] As an optional example, in this embodiment, the floating layer takes the target menu item icon as the positioning reference, and is smoothly popped up to the right or below the target menu item icon. The visual style of the floating layer is consistent with the navigation bar, and the visual distinction is formed between the floating layer and the underlying page content through the shadow, the border or the background color, so as to clearly show the hierarchical relationship.

[0036] In actual application, the floating layer of this embodiment is displayed on the current page content and does not trigger the overall expansion of the navigation bar. When the navigation bar is in the collapsed state, a text prompt box is generated near the cursor of the user when the cursor hovers over any menu item icon, so as to display the complete name or the function description of the menu item.

[0037] Step S4: in response to the third user operation on any option in the sub-menu content, jump to the corresponding page.

[0038] After jumping to the corresponding page, the navigation bar remains in the collapsed state, and the sub-menu content in the form of the floating layer is hidden automatically.

[0039] The multi-layer navigation collapsed display method of this embodiment is further described in a specific scenario.

[0040] Figure 2 FIG. 1 is an application first example diagram of the multi-layer navigation collapsed display method according to the embodiment of the application, Figure 3 FIG. 2 is an application second example diagram of the multi-layer navigation collapsed display method according to the embodiment of the application, Figure 4 FIG. 3 is an application third example diagram of the multi-layer navigation collapsed display method according to the embodiment of the application, Figure 5 FIG. 4 is an application fourth example diagram of the multi-layer navigation collapsed display method according to the embodiment of the application.

[0041] As Figures 2 to 5 shown, the “<<” icon on the right side of the left navigation area is clicked, the navigation is collapsed, the indication arrow appears on the right side of each menu icon, and the interface evolves into Figure 2 ; in Figure 3 , the mouse is hovered over the menu icon in the first row of the left navigation area, the menu name appears, and the interface evolves into Figure 3 ; in Figure 4 , the mouse is hovered over the menu icon in the third row of the left navigation area, and the interface evolves into Figure 4 . Figure 5

[0042] ​The multi-layer navigation folding display method of the embodiment has the following beneficial technical effects: 1. Improve navigation operation efficiency and user experience By setting "expansion indication mark" (such as right arrow) and "hover trigger" mechanism, the user can directly trigger and access the sub-level content of any menu item under the premise of keeping the navigation bar in the folded state. The originally multi-step interaction process is simplified to one-step "hover-selection" action, shortening the operation path and time, realizing truly fast response and seamless navigation, significantly improving the operation efficiency and overall user experience.

[0043] 2. Efficient use of screen space, avoid content blocking The display of multi-level menu completely depends on the floating layer independent of the navigation bar body, which is superimposed on the main content instead of pushing it away. This means that when performing multi-level navigation tasks, the main navigation bar always remains in the folded state to save space, and the main content area is fully preserved without any obstruction. Thus, it solves the fundamental defect of the traditional mode of "fully expanded navigation bar to access sub-menu" that blocks page content and disrupts user reading or operation continuity, achieving the maximum balance and cooperation between navigation function and content display in limited screen space.

[0044] 3. Provide clear and intuitive navigation state visibility By dynamically displaying "expansion indication mark" next to menu items with sub-levels, the user is provided with explicit visual indication. The user does not need to rely on memory or perform exploratory clicks, but can intuitively identify which menu items contain more content through visual observation. This design follows the basic principle of "state visibility", reducing the user's cognitive load and making the interface more friendly and easy to explore.

[0045] 4. Keep the interface simple and focused In the default folded state, the interface presents an extremely simple style (only icons are displayed), allowing the user to highly concentrate on the current main work content. Only when the user has a clear navigation intention (triggered by hovering), the relevant navigation options are dynamically displayed. This "on-demand" interaction mode effectively reduces long-term visual interference of interface elements, helping users maintain focus while ensuring accessibility of advanced functions.

[0046] 5. Enhance the smoothness of interaction and context retention Since the jump operation is completed in the floating layer, and the navigation bar state remains unchanged after the jump, and the floating layer is automatically hidden, the entire navigation process becomes very smooth. Users will not feel lost or interrupted due to the dramatic expansion / contraction of the navigation bar, and will always be in a stable visual context, thereby maintaining a clear operation idea and task continuity.

[0047] As shown in Figure 6 The application further provides a device, including a processor 210, a communication interface 220, a memory 230 for storing a processor-executable computer program, and a communication bus 240. The processor 210, the communication interface 220, and the memory 230 can communicate with each other through the communication bus 240. The processor 210 can realize the multi-layer navigation folding display method described above by running the executable computer program.

[0048] The computer program in the memory 230 can be realized in the form of a software functional unit and sold or used as an independent product. When used, the computer program can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the part that contributes to the prior art or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the embodiments of the method of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various program code storage media.

[0049] The system embodiments described above are only schematic, and the units shown as separate components can or can not be physically separated, and the components shown as units can or can not be physical units, i.e. they can be located in one place or distributed on multiple network units. Part or all of the modules can be selected to achieve the purpose of the embodiments based on actual needs. Those skilled in the art can understand and implement it without creative labor.

[0050] Those skilled in the art can clearly understand the implementation of the various embodiments by means of software and necessary general hardware platforms through the description of the above embodiments, and of course, the embodiments can also be implemented by hardware. Based on such understanding, the above technical solutions can be embodied in the form of a software product, and the computer software product can be stored in a computer readable storage medium, such as a ROM / RAM, a magnetic disk, an optical disk, etc., and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods of the various embodiments or some parts of the embodiments.

[0051] The above merely describes specific embodiments of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art can easily think of changes or replacements within the technical range disclosed by the present application, which should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A multi-layered navigation collapse and display method, characterized by, The method comprises: Step S1: switching a navigation bar with at least one menu item from an expanded state to a collapsed state in response to a first user operation; Step S2: detecting whether there is a target menu item with a lower level in the navigation bar, and displaying an expansion indication mark at a preset position of the target menu item if there is; Step S3: displaying the lower menu content corresponding to the target menu item in a floating layer form in response to a second user operation on the expansion indication mark; Step S4: jumping to a corresponding page in response to a third user operation on any option in the lower menu content.

2. The multi-layered navigational rollout display method of claim 1, wherein, In step S1, when the navigation bar is in the collapsed state, the menu items of the navigation bar are displayed only in the form of icons.

3. The multi-layered navigational rollout display method of claim 1, wherein, In step S2, detecting whether there is a target menu item with a lower level in the navigation bar comprises: defining the attributes of each menu item and the hierarchical relationship between the menu items through a tree data model, traversing all the currently displayed menu items when the navigation bar is switched to the collapsed state, and querying the tree data model, and determining that the menu item is the target menu item if the menu item is defined as having a child node in the tree data model.

4. The multi-layered navigational rollout display method of claim 1, wherein, In step S2, the expansion indication mark is a dynamic arrow icon, wherein a first pointing direction of the dynamic arrow icon is used to indicate that there is a lower level that is currently collapsed, and a second pointing direction of the dynamic arrow icon is used to indicate that the lower level has been expanded or there is currently no lower level.

5. The multi-layered navigational rollout display method of claim 1, wherein, In step S3, the operation mode of the second user operation is a mouse hovering operation, and the display of the lower menu content is triggered instantly when the cursor of the user hovers over the area of the expansion indication mark or the target menu item, and the lower menu content is automatically hidden when the cursor of the user moves out of the area of the expansion indication mark or the target menu item or the area of the lower menu content.

6. The multi-layered navigational rollout display method of claim 1, wherein, In step S3, the floating layer is smoothly popped up adjacent to the right side or below the icon of the target menu item, the visual style of the floating layer is consistent with the navigation bar, and the visual distinction is formed between the floating layer and the underlying page content through shading, border or background color, so as to clearly show the hierarchical relationship.

7. The multi-layered navigational rollout display method of claim 6, wherein, The floating layer is displayed on the current page content without triggering the overall expansion of the navigation bar.

8. The multi-layered navigational rollout display method of claim 1, wherein, In step S3, when the navigation bar is in the collapsed state, a text prompt box is generated near the cursor of the user when the cursor hovers over any menu item icon, and the complete name or function description of the menu item is displayed in the text prompt box.

9. The multi-layered navigational rollout display method of claim 1, wherein, In step S4, after jumping to the corresponding page, the navigation bar remains in the collapsed state, and the lower menu content in the form of the floating layer is automatically hidden.

10. A computer device, characterized in that, The computer device comprises a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the steps of the method according to any one of claims 1-9 when executing the program.

Images