Interface interaction method and device

Abstract

The embodiment of the invention provides an interface interaction method and device, and relates to the technical field of page development. The method comprises the steps that a first trigger operation of a user on a first target interaction element in an interface is received, the interface comprises a display area and a plurality of interaction elements, the interaction elements are arranged around the display area, and the first target interaction element is one of the interaction elements; and in response to the first trigger operation, displaying content associated with the first target interaction element in the display area. Compared with a mode of deploying labels on a top bar or a side bar of the interface, the method and the device have the advantage that the interface space is utilized more reasonably under the condition of more interactive elements.

Description

Technical Field

[0001] The present application relates to the field of page development technology, and in particular to an interface interaction method and device. Background Art

[0002] With the growing demand for human-computer interaction, tabs in user interface modules (UI components) are widely used in interface design and web development. Tab components are usually composed of several tab option buttons on the top bar and a rectangular display area below the top bar. Clicking a tab option button will display the tab content corresponding to the tab option button in the rectangular display area, so that interaction with multiple tab contents can be achieved in one display area.

[0003] However, in some specific scenarios, such as when there are many Tab tags or Tab tags are nested in multiple levels, this interaction method causes the top bar to be filled with numerous Tab buttons, making the overall interface complex and confusing. This unreasonable layout often makes it difficult for users to clearly find the Tab tag they want to click, resulting in a poor interaction experience. Summary of the invention

[0004] The embodiments of the present application provide an interface interaction method, device, electronic device, computer storage medium and computer program product, which can make the interface layout more reasonable.

[0005] In a first aspect, an embodiment of the present application provides an interface interaction method, the method comprising: receiving a first trigger operation of a user on a first target interactive element in an interface, the interface comprising a display area and multiple interactive elements, the multiple interactive elements are arranged around the display area, and the first target interactive element is one of the multiple interactive elements; in response to the first trigger operation, displaying content associated with the first target interactive element in the display area.

[0006] In this embodiment, the interface displayed by the terminal may include a display area, and one or more circles of interactive elements may be displayed around the periphery of the display area. When a user performs a first trigger operation such as clicking or floating on one of the interactive elements (i.e., the first target interactive element), the content associated with the interactive element may be displayed in the display area. In this way, compared with the navigation bar where multiple interactive elements of the UI component are crowded and arranged at the top or side of the interface, the arrangement of the interactive elements around the display area in this embodiment is conducive to effectively reducing the display density of the interactive elements visually, and is conducive to shortening the space occupied by the overall UI component in the length or width direction of the interface. The layout is reasonable and beautiful, which is conducive to improving the user's interactive experience.

[0007] In some examples, before receiving a first trigger operation from a user on a first target interactive element in an interface, the method includes: receiving a second trigger operation on a second target interactive element, the second target interactive element being one of multiple interactive elements; in response to the second trigger operation, displaying child interactive elements of the second target interactive element around an area where the second target interactive element is located, the first target interactive element being a child interactive element of the second target interactive element.

[0008] In this way, the parent interactive element (i.e., the second target interactive element) and the same-level interactive elements are in a circle outside the display area, and the child interactive elements of the parent interactive element are in a layer outside of this circle. In this way, the multi-level nested interactive elements can present a form of expansion from the inside to the outside outside the display area, which is convenient for users to intuitively identify the navigation logic displayed by interactive elements of different levels, avoid confusion about label information of different levels, and thus help improve user interaction efficiency.

[0009] In some examples, the method also includes: displaying multiple interactive elements belonging to the same level on the same circle layer outside the display area, and the circle layer also includes a page turning control; obtaining a third trigger operation for the page turning control; and in response to the third trigger operation, displaying additional interactive elements belonging to the level on the circle layer.

[0010] In this way, when there are many interactive elements at the same level, they can be deployed in pages on a circle. The user can find the target interactive element that the user wants to operate by turning the pages. Even if there are many elements, there will be no confusion, which makes it easy for users to distinguish the levels of elements and ensure the user interaction experience.

[0011] In some examples, interactive elements of the same level are displayed on the same circle layer outside the display area, and the arrangement spacing between the interactive elements on the circle layer is greater than or equal to a preset value, so as to avoid too dense arrangement of interactive elements of the same level and produce visual crowding effect.

[0012] In some examples, interactive elements of the same level are displayed on the same circle outside the display area, and the arrangement spacing between interactive elements on each circle is equal to L / N, where L is the perimeter of the circle and N is the number of elements deployed on the circle. This avoids too dense arrangement of interactive elements of the same level, which would cause visual crowding.

[0013] In some examples, when multiple interactive elements are displayed on multiple circles outside the area, the arrangement spacing between interactive elements on different circles is greater than a preset value, so as to avoid too dense arrangement of interactive elements at different levels, resulting in visual crowding effect.

[0014] In some examples, when an interactive element overlaps with part of the content on the interface, the transparency of the interactive element is greater than the preset transparency so that the part of the content overlapping with the interactive element can be presented. This helps save interface layout space and ensures the displayability of the overlapping content.

[0015] In some examples, in response to a first trigger operation, content associated with a first target interactive element is displayed in a display area, including: in response to the first trigger operation, determining an index value representing the first target interactive element; obtaining content queried according to the index value; and displaying the content in the display area.

[0016] In this way, after the user triggers the interactive element, the corresponding content is obtained through dynamic query for display, which is conducive to improving the flexible arrangement between the interactive elements and the displayed content on the interface and facilitating the background maintenance and updating of the content.

[0017] In some examples, the multiple interactive elements are respectively associated with corresponding label panels, the label panels include corresponding content, all display panels overlap in the display area, and are hidden by default; in response to the first trigger operation, displaying the content associated with the first target interactive element in the display area includes: in response to the first trigger operation, displaying the content in the label panel associated with the first target interactive element.

[0018] In this way, the label panel of the interactive element has the edited label content, and after the user triggers the interactive element, it can be directly switched from the hidden state to the displayed state, and the response speed is fast.

[0019] In some examples, the ratio of the horizontal size of the display area to the horizontal size of the interface, and the ratio of the vertical size of the display area to the vertical size of the interface, are both smaller than a preset value. In this way, when there are many interactive elements or multiple levels of nesting, but the amount of displayed content is small, the display area can be much smaller than the interface, which can ensure the integrity and aesthetics of the arrangement of the interactive elements and the display area, and save interface layout space.

[0020] In some examples, the method specifically includes: receiving a user's selection operation on a third target interactive element, the third target interactive element being one of multiple interactive elements; in response to the selection operation, determining an object identified by the third target interactive element, the object being associated with at least one tag content, the tag content being used to characterize characteristics of the object; receiving a first trigger operation on a first target interactive element by the user; and in response to the first trigger operation, displaying target tag content of the object in a display area, the target tag content being a tag content among at least one tag content that is associated with the first target interactive element.

[0021] In this example, the interactive elements displayed outside the display area can belong to different directories (a root-level interactive element and all the hierarchical sub-elements nested under it are a directory). Among these directories, some directories are independent of each other, and each interactive element in these targets can represent an object respectively. In addition, this part of the directory can have a cascade operation relationship with another part of the directory, and each interactive element in the other part of the directory can be associated with a type of label content of these objects respectively. In this way, a third target interactive element is selected from the independent directories to trigger, and the corresponding object can be determined. Then a first target interactive element is selected from the other part of the directory to trigger, and the label content associated with the object and the first target interactive element can be displayed. In this way, through the cascade operation of the interactive elements, it can be more flexibly applied to more data query scenarios.

[0022] In some examples, the interface is used to display the component structure of the server, and the multiple interactive elements include a label of at least one component among a chassis, a central processing unit, a memory, a fan, a hard disk, or a power module; then in response to the first trigger operation, displaying the content associated with the first target interactive element in the display area specifically includes: in response to the first trigger operation, displaying a picture of the component corresponding to the first target interactive element in the display area.

[0023] In a second aspect, an embodiment of the present application provides an interface interaction device, the device comprising: a receiving module for receiving a first trigger operation of a user on a first target interactive element in the interface, the interface comprising a display area and multiple interactive elements, the multiple interactive elements are arranged around the display area, and the first target interactive element is one of the multiple interactive elements; a processing module for displaying content associated with the first target interactive element in the display area in response to the first trigger operation.

[0024] In some examples, the receiving module can also be used to: receive a second trigger operation on a second target interactive element, where the second target interactive element is one of multiple interactive elements; the processing module can also be used to: in response to the second trigger operation, display child interactive elements of the second target interactive element around the area where the second target interactive element is located, where the first target interactive element is a child interactive element of the second target interactive element.

[0025] In some examples, the processing module can also be used to: display multiple interactive elements belonging to the same level on the same circle layer outside the display area, and the circle layer also includes a page turning control; the receiving module can also be used to: obtain a third trigger operation on the page turning control; the processing module can also be used to: display additional interactive elements belonging to the level on the circle layer in response to the third trigger operation.

[0026] In some examples, interactive elements of the same level are displayed on the same circle layer outside the display area, and the arrangement spacing between the interactive elements on the circle layer is greater than or equal to a preset value.

[0027] In some examples, interactive elements of the same level are displayed on the same circle layer outside the display area, and the arrangement spacing between the interactive elements on the circle layer is equal to L / N, where L is the circumference of the circle layer and N is the number of elements deployed on the circle layer.

[0028] In some examples, when multiple interactive elements are displayed on multiple circles outside the area, the arrangement spacing between the interactive elements on different circles is greater than a preset value.

[0029] In some examples, when any interactive element overlaps with part of the content on the interface, the transparency of the arbitrary interactive element is greater than a preset transparency so that the part of the content overlapping with the arbitrary interactive element can be presented.

[0030] In some examples, the processing module can be specifically used to: determine an index value representing a first target interactive element in response to a first trigger operation; obtain content queried according to the index value; and display the content in a display area.

[0031] In some examples, the multiple interactive elements are respectively associated with corresponding label panels, which include corresponding content, all display panels overlap in the display area, and are hidden by default; the processing module can be specifically used to: in response to the first trigger operation, display the content in the label panel associated with the first target interactive element.

[0032] In some examples, a ratio of a lateral size of the display area to a lateral size of the interface, and a ratio of a longitudinal size of the display area to a longitudinal size of the interface, are both smaller than preset values.

[0033] In some examples, the receiving module can also be used to: receive a user's selection operation on a third target interactive element, where the third target interactive element is one of multiple interactive elements; the processing module can also be used to: determine, in response to the selection operation, an object identified by the third target interactive element, where the object is associated with at least one label content, and the label content is used to characterize the characteristics of the object; the receiving module can also be used to: receive a first trigger operation on a first target interactive element by the user; the processing module can also be used to: display the target label content of the object in the display area in response to the first trigger operation, where the target label content is the label content associated with the first target interactive element in at least one label content.

[0034] In some examples, the receiving module can be specifically used to: in response to the first trigger operation, display a picture of the component corresponding to the first target interactive element in the display area. The interface is used to display the component structure of the server, and the multiple interactive elements include a label of at least one component of a chassis, a central processing unit, a memory, a fan, a hard disk, or a power module.

[0035] In a third aspect, an embodiment of the present application provides an electronic device, comprising: at least one memory for storing programs; and at least one processor for executing programs stored in the memory; wherein, when the program stored in the memory is executed, the processor is used to execute the method described in the first aspect or any possible implementation of the first aspect.

[0036] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program runs on a processor, the processor executes the method described in the first aspect or any possible implementation of the first aspect.

[0037] In a fifth aspect, an embodiment of the present application provides a computer program product, characterized in that when the computer program product runs on a processor, the processor executes the method described in the first aspect or any possible implementation of the first aspect.

[0038] In the sixth aspect, an embodiment of the present application provides a chip, characterized in that it includes at least one processor and an interface; at least one processor obtains program instructions or data through the interface; at least one processor is used to execute program line instructions to implement the method described in the first aspect or any possible implementation method of the first aspect.

[0039] It can be understood that the beneficial effects of the second to sixth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 This is a schematic diagram of the tab interface in the form of a top bar;

[0041] Figure 2 It is a schematic diagram of an application scenario of an embodiment of the present application;

[0042] Figure 3 is a schematic diagram of the layout of interactive elements in an embodiment of the present application;

[0043] Figure 4 is a schematic diagram of interface interaction in an embodiment of the present application;

[0044] Figure 5 It is a schematic diagram of deploying interactive elements on the interface in a specific example of the present application;

[0045] Figure 6 It is a schematic diagram of deploying interactive elements on the interface in a specific example of the present application;

[0046] Figure 7 is a schematic diagram of deploying interactive elements on the interface in an embodiment of the present application;

[0047] Figure 8 is a schematic diagram of deploying interactive elements on the interface in an embodiment of the present application;

[0048] Fig. 9 is a schematic diagram of deploying interactive elements on the interface in an embodiment of the present application;

[0049] Fig.10 is a schematic diagram of deploying interactive elements on the interface in an embodiment of the present application;

[0050] Fig.11 It is a flowchart of an interface interaction method provided in an embodiment of the present application;

[0051] Fig. 12A It is a flowchart of an interface interaction method provided in an embodiment of the present application;

[0052] Fig. 12B It is a flowchart of an interface interaction method provided in an embodiment of the present application;

[0053] Fig.13 is a flowchart of the interface interaction method in an embodiment of the present application;

[0054] Fig.14 is a flowchart of the interface interaction method in an embodiment of the present application;

[0055] Fig.15 is a flowchart of the interface interaction method in an embodiment of the present application;

[0056] Fig.16A is a flowchart of the interface interaction method in an embodiment of the present application;

[0057] Fig. 16B It is a schematic diagram of performing interface interaction in the example of this application;

[0058] Fig.17 is a schematic diagram of performing interface interaction in a specific example of the present application;

[0059] Fig.18 It is a structural schematic diagram of an interface interaction device provided in an embodiment of the present application;

[0060] Fig.19 It is a schematic diagram of the structure of a chip provided in an embodiment of the present application. DETAILED DESCRIPTION

[0061] The term "and / or" in this article is a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The symbol " / " in this article indicates that the associated objects are in an or relationship, for example, A / B means A or B.

[0062] In the description of the embodiments of the present application, unless otherwise specified, "multiple" means two or more than two. For example, multiple processing units refer to two or more processing units, etc.; multiple elements refer to two or more elements, etc.

[0063] A tab page is an interface area created by a Tab component in a web page, application, or software interface. Multiple tab pages can be created in a Tab component, and each tab page can include a Tab label and a corresponding Tab panel (also referred to as the content area in this article). Tab labels are clickable elements, and users can switch to display the content of the corresponding tab page (displayed through their own Tab panel) by clicking on different Tab labels.

[0064] In the related art, the tab panels of multiple tabs can be arranged in an area of ​​the interface in an overlapping manner (either completely or partially), and only the tab with the selected tab can display its own tab panel, while the tab panel of the unselected tab is hidden. Figure 1 As shown in FIG. 1 , the interface 1 has a navigation bar 3 including four different tab labels 2a to 2d, namely, "User Management", "Configuration Management", "Role Management" and "Task Management", which are created by using the Tab label component. The four labels 2a to 2d belong to four tab pages ( Figure 1 Only the tab page 4b ​​to which the tab 2b belongs is shown in the figure. The tab panels of these four tab pages ( Figure 1 The tab panel 5b (only the tab page 4b ​​is shown) is overlapped and arranged in the area 6 of the interface 10. The interactive implementation method of the interface 10 is: determine the user's click action, and according to the tab clicked by the user (for example Figure 1 In the example, the "Configuration Management" label 2b) triggers the display of the content of the label panel 5b of the corresponding label page 4b, such as "Configuration Management Information", and the label panels of other label pages (including the content in the label panels) are hidden. Similarly, if the user clicks the "Role Management" label 2a again, the label panel 5b is hidden, and the label panel of the label page to which label 2a belongs is displayed in the display area 6, thereby displaying the content of the label page to which label 2a belongs.

[0065] However, when there are too many tabs, the tabs may take up a lot of space in the horizontal or vertical direction of the interface (for example, when the tabs are arranged in the sidebar). In the end, the area occupied by all the tabs in the interface may be larger than the display area, making the interface layout unreasonable, the tab display effect messy, and the user interaction experience poor. Especially in this case, if the content corresponding to each tab is small, for example Figure 1 In the example, when the label "configuration management" is selected, the corresponding content "configuration management information" only occupies a small part in the display area 6, which will cause a waste of the layout space of the interface 1.

[0066] In order to improve the user interaction experience when there are many tags and to save layout space, an embodiment of the present application provides an interface interaction method, which improves the flexibility of interface layout and ensures the user's interaction experience through the surrounding arrangement between interactive elements and display areas.

[0067] To facilitate understanding of the technical solution of the present application, the application scenarios of the embodiments of the present application are introduced below.

[0068] For example, Figure 2 What is shown in FIG. is a schematic diagram of an application scenario provided by an embodiment of the present application. Figure 2 As shown, the user can perform human-computer interaction with the interface 100 displayed on the terminal 10, wherein the interface 100 can be an interface accessed through a browser, application or other software deployed on the terminal 10. By way of example and not limitation, the interface 100 can be an interface provided by the local software or application of the terminal 10, or can be an interface provided by the server 20 that communicates with the terminal 10 (such as a Web interface).

[0069] Exemplarily, the terminal 10 can be a fixed terminal such as a personal computer (PC), a digital television, etc., and a mobile terminal such as a smart phone, a personal digital assistant (PDA), a tablet computer, a laptop computer, a vehicle-mounted terminal (such as a vehicle-mounted navigation terminal), a wearable device, etc., but is not limited thereto.

[0070] Exemplarily, the server 20 may be a physical server or a cloud server, etc., but is not limited thereto.

[0071] In this embodiment, the interface 100 displayed on the terminal 10 includes a display area 110 and at least one interactive element 1, 2, ... surrounding the display area 110. The user performs an operation on any interactive element (such as Figure 2In the interactive element 3), a trigger operation is performed, such as a click, a suspension operation, etc. Then, the terminal 10 responds to the trigger operation and displays the content associated with the interactive element in the display area 110 for the user to view.

[0072] For example, please refer to Figure 2 As shown, the interactive elements 1 , 2 , . . . may be arranged at a preset interval around the display area 110 , or the interactive elements 1 , 2 , . . . may be evenly distributed around the display area 110 .

[0073] In this way, compared with the navigation bar in which multiple interactive elements of the UI component are crowdedly arranged at the top or side of the interface, the arrangement of the interactive elements 1, 2, ... around the display area 110 in this embodiment is beneficial to effectively reduce the display density of the interactive elements visually, and to shorten the space occupied by the entire UI component (including the display area 110 and each interactive element 1, 2, ...) in the length or width direction of the interface. The layout is reasonable and beautiful, which is beneficial to improving the user's interactive experience.

[0074] In some possible implementations, the size of the display area 110 can be significantly smaller than the interface 100. In other words, if the amount of information associated with the content of each interactive element 1, 2, ... is small, the display area 110 can be a smaller area that can only fully display the content, thereby saving interface layout space and improving layout space utilization.

[0075] An example of this implementation is that the interactive elements 1, 2, ... can be tab labels formed by tab option buttons, or can be other UI components that can view related content by triggering operations. The interactive elements 1, 2, ... can be distinguished by label information through identification methods such as text, symbols, icons, colors, etc.

[0076] In some possible implementations, such as Figure 3 As shown in (3a), each interactive element 1, 2, ... can correspond to an independent label panel (i.e., content area, which is a UI component) 121, 122, ..., and these label panels 121, 122, ... can be arranged overlappingly in the display area 110. When any interactive element 1, 2, ... is triggered, its corresponding label panel 121, 122, ... can be displayed in the display area 110. Then, the content associated with the interactive element that is triggered is filled into the corresponding label panel, and can be displayed in the display area 110. At the same time, if the trigger operation is not executed, the corresponding label panel 121, 122, ... is hidden. For example Figure 3 As shown in (3b), the user clicks on the interactive element 1, the label panel 121 is displayed in the display area 110, and the other label panels are hidden. Then when the user clicks on the interactive element 3, Figure 3 As shown in (3c), the label panel 123 is displayed in the display area 110, and the label panel 121 is hidden.

[0077] As a concrete example of this implementation, see Figure 4 As shown, the interface 100 is a web interface provided by the server 20. When the user performs a trigger operation on an interactive element 1, 2, ... in step 1, the terminal 10 can execute step 2 in response to the trigger operation and transmit a message representing the interactive element (e.g. Figure 4 The terminal 10 receives the index value of the interactive element 1) in the terminal 10, and requests the server 20 to execute step 3 to query the content associated with the index value. Then, the terminal 10 executes steps 4 and 5 to obtain the associated content and load it into the label panel corresponding to the interactive element, so that it is displayed in the display area 110 for the user to view. It should be understood that if the interface 100 is an interface provided by a local software program of the terminal 10, the index value can be transmitted to the local software program to query the corresponding associated content, so that it is displayed in the display area 110.

[0078] As another possible example of this implementation, the contents associated with each interactive element 1, 2, ... may also be pre-filled into the label panels 121, 122, ..., and when any interactive element 1, 2, ... is triggered, its label panel together with the filled contents may be directly displayed in the display area 110.

[0079] For example, in this embodiment, please refer to Figure 5 As shown in (5a) to (5c), when the interactive elements 1, 2, ... surround the periphery of the display area 110, the centers of the interactive elements 1, 2, ... can all be located on the same annular layer 501 (also referred to as the first layer herein for ease of distinction), and the center of this first annular layer 501 can coincide with the center of the display area 110.

[0080] Exemplarily, the display area 110 may be a circle, or a shape such as a square, rectangle, rhombus, regular triangle or other regular polygon, all of which have a certain aesthetic appeal and are conducive to fully displaying the contents associated with the interactive elements 1, 2, . . . . .

[0081] Exemplarily, the first annular circle layer 501 where the centers of the interactive elements 1, 2, ... are located can be a circle, or a shape such as a square, rectangle or other regular polygon that has a certain aesthetic appeal and is conducive to intuitive judgment by users, so that users can clearly identify the interactive elements 1, 2, ... as UI components of the same level from this annular layout.

[0082] Let's take an example to illustrate this. Figure 5As shown in (5a), the display area 110 is circular, and the centers of the interactive elements 1, 2, ... can be evenly distributed on a circular circle layer 501 outside the display area 110. Or for example Figure 5 As shown in (5b), the display area 110 is a square, and the centers of the interactive elements 1, 2, ... can be evenly distributed on a circular layer 501 outside the display area 110, and the center of the circular layer 501 coincides with the center of the square. Or for example Figure 5 As shown in (5c), the display area 110 is a square, and the centers of the interactive elements 1, 2, ... can be evenly distributed on a square circle layer 501 outside the display area 110, and the center of the square circle layer 501 coincides with the center of the square.

[0083] It should be noted that the circle layer where any level of interactive elements are located marked in the drawings of this article is only for the convenience of understanding the technical solution of the present application. In the actual interface interaction process, the circle layer itself may be displayed on the interface 100 or not.

[0084] In some specific embodiments, the interactive elements 1, 2, ... in the interface 100 may be root-level interactive elements nested in multiple levels, and all parent-level interactive elements (i.e., parent elements) under each root-level interactive element may also include one or more child-level interactive elements (i.e., child elements). If a user performs a trigger operation on a parent element from the interface 100, the child elements of the parent element may be displayed around the periphery of the area of ​​the level to which the parent element belongs.

[0085] Furthermore, illustratively, multiple child elements belonging to the same parent element may be arranged at a preset interval outside the area of ​​the level to which the parent element belongs (e.g. Figure 5 Alternatively, multiple child elements belonging to the same parent element may be evenly distributed around the area of ​​the hierarchy to which the parent element belongs. The centers of these child elements may be located on the same annular layer (also referred to herein as the second layer for ease of distinction), and the center of the annular layer where the child elements are located coincides with the center of the display area 110. In this way, through the hierarchy of the annular layer where the interactive element is located, it is convenient for users to intuitively and clearly distinguish between child elements and parent elements.

[0086] This example is explained below. Figure 6As shown, the interactive elements 1, 2, ... in the interface 100 are parent elements. When the user clicks (or hovers over) the interactive element 2, a circle of sub-elements 21 to 28 distributed in a ring shape can be displayed outside the area of ​​the level to which the interactive element 2 belongs, that is, outside the area occupied by the circular circle layer 501. The centers of the sub-elements 21 to 28 are all located on a circle layer 601. Then, when the user performs a trigger operation on a sub-element 21 to 28, the content associated with the sub-element can be displayed in the display area 110.

[0087] In this way, the root-level interactive elements 1, 2, ... are arranged at the first level around the display area 110, and the child elements 21 to 28 of the triggered parent interactive element 2 are arranged at the second level around the display area 110. This nested arrangement of inner and outer rings makes it easy for users to intuitively identify the navigation logic displayed by interactive elements of different levels, avoids confusion about label information of different levels, and thus helps improve user interaction efficiency.

[0088] Exemplarily, after the user performs a trigger operation on a sub-element and displays the corresponding content in the display area 110, all current sub-elements can be hidden after a preset delay of ending the trigger operation on the sub-element. For example, when the user hovers the mouse over a sub-element in the interface 100, the content associated with the sub-element is displayed in the display area 110. When the mouse moves away from the sub-element for a preset time (such as 0.5 to 2 seconds), or clicks (C l ick) other areas of the interface 100, all sub-elements are hidden from the interface 100, and the default state of displaying a circle of root-level interactive elements 1, 2, ... outside the display area 110 is restored.

[0089] It is understandable that when there are two or more levels of interactive elements nested, similar to the above arrangement principle, the parent interactive element and its child interactive element are nested from the inside to the outside. That is, the first-level interactive element is triggered, and a circle of second-level sub-elements are displayed on the periphery of the area where the first-level interactive element is located. The second-level sub-elements are triggered, and a circle of third-level sub-elements are displayed on the periphery of the area where the second-level sub-elements are located, ..., until the smallest level of sub-elements are displayed, and the user can trigger the sub-element to display the corresponding content in the display area 110.

[0090] In some specific embodiments, a certain distance is maintained between interactive elements at the same level and between interactive elements at different levels according to a preset arrangement strategy to avoid visual crowding caused by too dense arrangement of interactive elements, thereby reducing the user's interactive experience with the interface 100.

[0091] Specifically, in this embodiment, the preset arrangement strategy may include:

[0092] (1) The distance along the line between interactive elements of the same level in the circle they belong to = L / N, where L is the perimeter of the circle, and N is the number of interactive elements deployed on the circle, and N ≤ the maximum number of elements that can be deployed in the circle N (max). Figure 6 Taking the UI component shown in the figure as an example, the parent interactive elements 1, 2, ... are located on the circular circle 501, and the interactive elements 1, 2, ... are arranged with a certain arc length between each other. If the maximum number of parent interactive elements set on the circle 501 is 5, then the arc length distance between each two of the interactive elements 1, 2, ... is not less than 1 / 5 of the circumference of the circular circle 501. In this way, the interactive elements of the same level can be prevented from being arranged too densely.

[0093] In other examples, it can also be directly set that the distance along the line between the same-level interactive elements on their respective circles is ≥ R, where R is a preset value. In this way, by directly setting the spacing value R between the same-level interactive elements on their respective circles, the arrangement density of the interactive elements is controlled, which helps to reduce the complexity of the arrangement logic. Figure 6 Taking the UI component shown as an example, the sub-level interactive elements 21-28 with a circular appearance are located on the circular circle layer 601, and the arc length distance between the interactive elements 21-28 on the circular circle layer 601 can be set to R=3r, where r is the circular radius of the interactive elements 21-28.

[0094] (2) For any parent interactive element, take its center as a vertex, take the reverse extension line from the center to the center of the display area 100 as the midline, construct an equilateral triangle with the other two vertices located on the edge of the parent interactive element, translate the sides where the two vertices are located to the circle where the child elements under the parent element are located, and the area formed by the translated path is used as the restricted area. The center of any child element is prohibited from appearing in the restricted area. For example Figure 7 As shown in the figure, the center O2 of the parent interactive element 2 is the vertex, and the reverse extension line from O2 to the center O1 of the display area 110 is used as the midline to construct an equilateral triangle with other two vertices falling on the edge of the interactive element 2. The side D where the two vertices are located is translated to the area 701 of the annular boundary of the child elements 21 to 23 as the limited area. The center of any child element is prohibited from appearing in the limited area 701.

[0095] In this embodiment, if the center of a child element falls within the limited area 701 of any parent interactive element when it is arranged, the child element automatically moves along the circle where the child element is located until its center is outside the limited area 701, provided that the above arrangement strategy (1) is met. In this way, it is possible to avoid too dense arrangement of interactive elements at different levels.

[0096] In this embodiment, by arranging the interactive elements through the above arrangement strategy, visual crowding can be avoided when there are many interactive elements, thereby achieving the effect of optimizing the interface layout.

[0097] In some specific embodiments, when arranging interactive elements on the interface 100, if there are too many interactive elements at the same level and exceed the maximum number that can be arranged on the circle layer, the paging mechanism of the interactive elements is triggered to add one or more pages to arrange these interactive elements. When arranging the interactive elements on each added page, they are also arranged in a circular pattern, and the circle layer where the center of the interactive elements on each added page is located is the same as the first page.

[0098] Exemplarily, the interactive elements of each level can be arranged in a surrounding manner according to the above arrangement strategy, maintaining a corresponding distance from the interactive elements of the same level and different levels. In the case where there are too many interactive elements at any level and the arrangement strategy cannot be completed by surrounding them in a circle, the interactive elements of the first circle of surrounding arrangements are used as the first page, and one or more pages are added to deploy the remaining interactive elements of the level to which they belong, and the interactive elements on each page are also arranged in a surrounding manner.

[0099] For example, please refer to Figure 8 As shown in (8a), in the interface 100, a circle of interactive elements 1 to 4 are evenly spaced around the outer periphery of the display area 110. If an interactive element 5 is added at the current level, as shown in (8b), the interactive element 5 and the interactive elements 1 to 4 are located in the same circle layer 501, and the interactive elements 1 to 5 are evenly spaced around the outside of the display area 110. The spacing between the interactive elements is smaller than that of the layout in (8a). If the maximum number of interactive elements at the current level that surround the display area 110 is 5, then when an interactive element is added, for example, the interactive element 6 is added, the paging mechanism is triggered, so that the interactive elements 1 to 5 automatically form the homepage, as shown in (8a). Figure 8 As shown in (8c), a new page (i.e., the second page) is generated to deploy the remaining interactive elements, i.e., interactive element 6. The home page may also include a trigger button 801 for the next page. When a user clicks or hovers on the trigger button 801, the interactive elements of the second page shown in (8d) may be switched to display. The second page, as the last page, may also include a trigger button 802 for the previous page. When a user clicks the trigger button 802, the interactive elements of the first page shown in (8c) may be switched to display.

[0100] Another example Fig. 9As shown, element 4 in interface 100 includes several sub-elements, which are arranged through three pages, wherein the home page is shown as (9a), and 8 sub-elements are evenly spaced around the periphery of the area where elements 1 to 4 are located, and are located on the same circle layer 601, and the sub-elements of this level also include a trigger button 803 for the next page. When a user clicks or hovers on the trigger button 803, the display can be switched to the sub-elements of the second page shown in (9b). The second page, as an intermediate page, can also include a trigger button 804 for the previous page (first page) and a trigger button 803 for the next page (third page). When a user clicks the trigger button 804, the display can be switched to the sub-elements of the first page shown in (9a), and when a user clicks the trigger button 805, the display can be switched to the sub-elements of the third page. Since the third page is the last page, the trigger button 803 for the previous page (second page) can be included on the third page.

[0101] In this way, when there are too many hierarchical interactive elements, the paging mechanism can be used to achieve a reasonable layout of the interactive elements to avoid the visual crowding effect caused by too dense arrangement of interactive elements. The user can turn the page to find the interactive element he wants to operate by triggering the previous and next pages. The operation is convenient, and the occupied area of ​​each page directory of the same level in the interface 100 is consistent, that is, they are all deployed in the same circle. The user will not be confused about the level of the interactive elements during the page turning process, the navigation logic is clear, and the interaction efficiency is high.

[0102] Exemplarily, during the page turning process, a corresponding page turning animation effect may be presented. As an example and not limitation, the page turning animation effect may be a direct transformation, where when a page turning button is clicked, the interactive elements of the current page are switched to the interactive elements of the corresponding page. Alternatively, when the page turning button is clicked, the interactive elements of the current page move toward a position and converge until they are completely hidden, and then the interactive elements of the corresponding page are gradually released from that position, and so on. These examples are not listed one by one.

[0103] For example, after the user finds the interactive element to be triggered by turning pages, the user can perform a trigger operation to display the associated content in the display area 110. After the trigger operation is completed and the preset time is reached, the interface returns to the default state, that is, only the display area 110 and a circle of the largest level interactive elements around it are displayed.

[0104] Optionally, in some possible implementations, when the interactive elements are nested in multiple levels, when the display of the child elements of the smallest level is triggered, the surrounding interactive elements may occupy a larger interface space. In this regard, in this implementation, the transparency of the interactive elements can be adjusted so that the child elements of the smallest level can cover other areas of the interface 100 when expanded, and the identification information of the child elements of the smallest level can be displayed without completely covering the information of other areas. In this way, only the layout space for the display area 110 and the largest level interactive elements can be reserved in the interface 100, which effectively saves the layout space of the interface and makes the layout more flexible.

[0105] For example Fig.10 In the example, the arrangement positions of the sub-elements 42 to 44 of the element 4 overlap with part of the text on the interface 100 , and the transparency can be increased so that the text below can be seen when the sub-elements 42 to 4 cover the text.

[0106] Next, based on the above description, an interface interaction method provided by an embodiment of the present application is introduced. It can be understood that the method is proposed based on the above description, and part or all of the content of the method can refer to the above description.

[0107] See also Fig.11 , Fig.11 It is a flowchart of an interface interaction method provided in an embodiment of the present application. It can be understood that the method can be executed by any device or equipment with computing and processing capabilities. Figure 2 The execution on the terminal 10 shown is used as an example, but is not limited to this execution subject. Fig.11 As shown, the method may include:

[0108] In S1101, a first trigger operation of a user on a first target interactive element in an interface is received.

[0109] In this embodiment, the user can interact with the interface 100 displayed on the terminal 10 , which may be an interface provided by a local software program on the terminal 10 , or an interface (such as a Web page) provided by a server 20 communicating with the terminal 10 .

[0110] For example, the interface 100 may include a display area 110 and a plurality of interactive elements (eg Figure 2), these interactive elements are arranged around the display area 110. The display area 110 is an area in the interface 10 that can display content, and the interactive elements can be UI components that meet the interactive needs. For example, but not limited to, the interactive elements can be label option buttons (Buttons), and the interactive elements can be used to distinguish different levels of labels (such as parent labels, child labels, etc.) and different label information through text, color, icons, etc.

[0111] Exemplarily, the interactive elements surround the periphery of the display area 110 to form a navigation bar, wherein the interactive elements can be associated with corresponding content, and the user can perform a trigger operation (i.e., a first trigger operation) on any of the interactive elements (i.e., the target interactive element) to request to view the content associated with the target interactive element.

[0112] It should be understood that the first target interactive element is the interactive element of the smallest level displayed on the current interface 100. For example, if the interactive elements currently displayed are all at the same level, the user can directly perform the trigger operation on one of them (i.e., the first target interactive element) to view related content. If the interactive elements currently displayed are interactive elements of multiple levels, the user can perform the trigger operation on an interactive element of the smallest level (i.e., the first target interactive element) to view related content.

[0113] In addition, exemplarily, the first trigger operation may be a click operation, a hovering operation, a voice input operation, a drag operation, etc. on the first target interactive element, which are not listed one by one in this example.

[0114] S1102: In response to a first trigger operation, display content associated with a first target interactive element in a display area.

[0115] In this embodiment, the terminal 10 can obtain the content associated with the first target interactive element in response to the first trigger operation of the user, and display it in the display area 110 .

[0116] In some possible implementations, if the interface 100 is an interface provided by a local software program, the terminal 10, in response to the first trigger operation of the user, can query the corresponding content through the local software program and display it in the display area 110. If the interface 100 is a web page provided by the server 20, the terminal 10, in response to the first trigger operation of the user, can request the server 20 to query the corresponding content, so as to display it in the display area 110.

[0117] In this embodiment, compared with the navigation bar in which multiple interactive elements of the UI component are crowdedly arranged at the top or side of the interface, the arrangement of the interactive elements 1, 2, ... around the display area 110 in this embodiment is beneficial to effectively reduce the display density of the interactive elements visually, and to shorten the space occupied by the entire UI component (including the display area 110 and each interactive element) in the length or width direction of the interface. The layout is reasonable and beautiful, which is beneficial to improving the user's interactive experience.

[0118] In some possible implementations, the size of the display area 110 can be significantly smaller than the interface 100. Specifically, the ratio of the horizontal size of the display area 110 to the horizontal size of the interface 100 can be set to be smaller than a preset horizontal ratio (for example, but not limitation, the ratio can be ≤1 / 2), and the ratio of the vertical size of the display area 110 to the vertical size of the interface 100 is also smaller than a preset vertical ratio (for example, but not limitation, the ratio can be ≤1 / 5), so that the display area 110 visually occupies only a small area of ​​the interface 100. In other words, if the amount of information associated with the content of each interactive element 1, 2, ... is small, the display area 110 can be a smaller area that can fully display these contents, thereby saving interface layout space and improving layout space utilization.

[0119] Another implementation method of the embodiment of the present application is described in detail below with reference to the accompanying drawings.

[0120] For example, Fig. 12A The flowchart of an interface interaction method provided by an embodiment of the present application is shown. Fig. 12A The process shown is similar to Fig.11 The difference between the illustrated processes is that, before receiving the first triggering operation of the user on the first target interactive element, the method may further include the following steps S1201 to S1202:

[0121] S1201: Receive a second trigger operation from a user on a second target interactive element.

[0122] In this embodiment, at least one level of interactive elements may be displayed in the interface 100. For example, multiple root-level interactive elements surround the display area 110 to form a circle, and these root-level interactive elements may have one or more child-level interactive elements (hereinafter referred to as child elements). The user may perform a trigger operation (hereinafter also referred to as a second trigger operation) on any of the root-level interactive elements, i.e., the second target interactive element, to view the child elements under the second target interactive element.

[0123] Similarly, if the current interface 100 displays sub-elements of a root-level interactive element, the user can perform a second trigger operation on one of the sub-elements (not the element at the smallest level) to view the next-level sub-elements of the sub-element.

[0124] Exemplarily, the second trigger operation may be a click operation, a hover operation, a voice input operation, a drag operation, etc. on the target interactive element, but is not limited thereto.

[0125] S1202: In response to a second trigger operation, display child interactive elements of the second target interactive element around an area where the second target interactive element is located.

[0126] In this embodiment, the terminal 10 can display the sub-elements of the second target interactive element on the interface 100 in response to the second trigger operation, and these sub-elements surround the area where the second target interactive element is located. Specifically, the second target interactive element and other interactive elements of the same level surround the display area 110 to form a circle, and when one or more sub-elements of the second target interactive element are displayed, they surround the outer periphery of the circle where the second target interactive element is located. In this way, interactive elements of different levels are nested layer by layer, presenting a form in which multiple circles expand outward from the display area 110. In the scenario with more levels of interactive elements, it is convenient for users to intuitively identify the navigation logic displayed by interactive elements of different levels, avoid confusion about label information of different levels, and thus help improve the user's interaction efficiency. And these wraparound layouts are also beneficial in the scenario with a large number of interactive elements, which is conducive to shortening the space occupied by the overall UI component in the length or width direction of the interface, and the layout is reasonable and beautiful, which is conducive to improving the user's interactive experience.

[0127] For example, you can refer to Figure 6 As shown, multiple root-level interactive elements 1, 2, ... are displayed in the interface 100, and the root-level interactive elements 1, 2, ... are arranged in a surrounding manner on the first circle (also referred to as the first circle layer in this article) 501 outside the display area 110. For any parent interactive element, taking element 2 as an example, its multiple child elements 21 to 28 are arranged on the second circle layer 601 outside the first circle layer 501, thus forming a nested layout. Similarly, if any of the child elements 21 to 28 has child elements of the next level, then these child elements can be arranged on a circle layer outside the second circle layer 601 when displayed, and so on, until the smallest level of interactive elements is displayed.

[0128] S1203: Receive a first trigger operation from a user on a first target interactive element in the interface.

[0129] In this embodiment, when the sub-elements of the second target interactive element are displayed on the interface 100, one of the sub-elements (which may be the lowest level element), namely the first target interactive element, may be triggered to request to view the content associated with the first target interactive element. The execution principle of step 1203 is similar to step S1101 in the above embodiment, and the details may refer to the above description of S1101, which will not be repeated here.

[0130] S1204: In response to the first trigger operation, display content associated with the first target interactive element in the display area.

[0131] In this embodiment, the execution principle of step 1204 is similar to step S1101 in the above embodiment, and may specifically include:

[0132] S12041: In response to a first trigger operation, determine an index value representing a first target interactive element.

[0133] In this example, in response to the first trigger operation, the terminal 10 can transmit an index value representing the target interactive element to the provider of the interface 100, such as the server 20 or a local application of the terminal 10, to request the provider of the interface 100 to query the content associated with the index value.

[0134] S12042, obtaining the content queried according to the index value.

[0135] S12043, display the content in the display area.

[0136] In this way, the terminal 10 obtains the content associated with the index value, and can display the content in the display area 100 for the user to view.

[0137] Optionally, in some examples, refer to Fig. 12B As shown, it is consistent with the above Fig. 12A The difference between the illustrated process is that, after the content associated with the first target interactive element is displayed in the display area 110, the method may further include:

[0138] S1205: After the first trigger operation on the first target interactive element ends and a preset delay is reached, all current sub-elements are hidden.

[0139] In this example, after the user performs a first trigger operation on the first target interactive element and displays the corresponding content in the display area 110, all current sub-elements can be hidden after a preset delay has elapsed since the first trigger operation ended, restoring the state of displaying only the root-level interactive element.

[0140] Still Figure 6The example shown shows that when the user hovers the mouse over the sub-element 21 in the interface 100, the content associated with the sub-element 21 is displayed in the display area 110. When the mouse is moved away from the sub-element 21 for a preset time (such as 0.5 to 2 seconds), or clicks other areas of the interface 100, all sub-elements 21 to 28 are hidden from the interface 100, and the default state of displaying a circle of root-level interactive elements 1, 2, ... outside the display area 110 is restored. Of course, if the display area 110 displays the content associated with the sub-element 21, and the user immediately hovers the mouse over the sub-element 22, the display area 110 switches to display the content associated with the sub-element 22. When the user moves the mouse away from the sub-element 22 for a preset time, or clicks other areas of the interface 100, all sub-elements 21 to 28 are hidden from the interface 100, and a circle of root-level interactive elements 1, 2, ... are displayed outside the display area 110.

[0141] In this embodiment, when executing the above Fig.11 , Fig. 12A or Fig. 12B Before the process shown, the interactive elements displayed on the interface 100 can be arranged so that after the user performs a corresponding trigger operation on the interface 100, these interactive elements can be displayed in a nested manner in a surrounding form outside the display area 110 according to the pre-arranged manner. When arranging the interactive elements, the arrangement spacing between the same-level interactive elements on the same circle layer can be configured to avoid the interactive elements on the same circle layer being arranged too densely to produce a visual crowding effect, thereby reducing the user's interactive experience with the interface 100.

[0142] Specifically, in the process of arranging interactive elements, the arrangement spacing between interactive elements of the same level on the same circle layer can be made equal to L / N, where L is the perimeter of the circle layer, N is the number of elements deployed on the circle layer, and N is less than the maximum number of elements that can be deployed in the circle layer, N (max). Figure 6 The example shown illustrates that the root-level interactive elements 1, 2, ... are located on the circular circle 501, and the interactive elements 1, 2, ... are arranged with a certain arc length between each other. If the circle 501 deploys interactive elements 1, 2, 3, the arc length between each two elements is 1 / 3 of the circumference of the circle 501. In this way, the spacing can be adaptively adjusted according to the number of deployments, which is conducive to the automatic arrangement of interactive elements and avoids too dense arrangement of interactive elements at the same level.

[0143] Alternatively, in the process of arranging interactive elements, a corresponding distance value can be directly set for each circle layer: the distance along the line between the interactive elements arranged on the circle layer i on the circle layer i ≥ R(i), where R is the preset distance value for the circle layer i. Figure 6The example shown shows that the sub-level interactive elements 21 to 28 with circular appearance are located on the circular circle layer 601, and the arc length distance between the interactive elements 21 to 28 on the circular circle layer 601 can be set to R = 3r, where r is the circular radius of the interactive elements 21 to 28. In this way, by directly setting the spacing value R of the same-level interactive elements on the corresponding circle layer, the arrangement density of the interactive elements is controlled, which is conducive to reducing the complexity of the arrangement logic.

[0144] Alternatively, when arranging interactive elements, if there are many levels of interactive elements, in order to avoid the visual crowding effect caused by too dense arrangement of interactive elements and improve the deployment efficiency, you can follow the following steps: Fig.13 The interactive elements are arranged in the following way. Fig.13 As shown, the method may further include:

[0145] S1301, in the process of deploying child interactive elements of any parent interactive element, the child interactive elements are added to the corresponding circle layer one by one; wherein the parent interactive element and the same-level interactive elements of the parent interactive element are divided into a limited area of ​​a preset size between the circle layer.

[0146] In this embodiment, a limited area of ​​a preset size is divided between each parent element of the same level and the circle layer where the respective next-level child elements are located. The limited area refers to the area where the center of the child element is prohibited from falling. In the process of deploying the child elements of any parent element, these child elements are added one by one to the circle layer (such as the second circle layer) where these child elements are located, and these child elements can be automatically or manually arranged in intervals on the circle layer according to the above-mentioned preset distance value.

[0147] As a specific example, for any parent element, its center can be used as a vertex, and the reverse extension line from the center to the center of the display area 110 can be used as the midline to construct an equilateral triangle with the other two vertices located on the edge of the parent element. The sides where the two vertices are located are translated to the circle layer where the child elements under the parent element are located. The area formed by the translated path is used as the limited area. The center of any child element (including the child elements of the parent element itself and the child elements of the same level as the parent element) is prohibited from appearing in the limited area. You can refer to Figure 7 As shown in the figure, the center O2 of the parent interactive element 2 is the vertex, and the reverse extension line from O2 to the center O1 of the display area 110 is used as the midline to construct an equilateral triangle with other two vertices falling on the edge of the interactive element 2. The side D where the two vertices are located is translated to the area 701 of the annular boundary of the child elements 21 to 23 as the limited area. The center of any child element is prohibited from appearing in the limited area 701.

[0148] S1302, when the center of any added sub-level interactive element falls within any limited area, move the sub-level interactive element along the circle layer until the center of the sub-level interactive element is outside each limited area and the interval between the sub-level interactive element and the adjacent interactive element is greater than or equal to a preset value.

[0149] In this embodiment, when the center of any added sub-element falls within any defined area, the sub-element is moved along the circle layer until the center of the sub-element is outside each defined area and the interval between the sub-element and the adjacent same-level interactive element is greater than or equal to a preset value, thereby avoiding too dense arrangement of interactive elements between different levels and the same level.

[0150] It is understandable that during the process of interface development and design, the size of the circle layer, the size of the interactive element, and the size of the display area can be adjusted to facilitate meeting the above-mentioned spacing requirements.

[0151] In some possible implementations, since a certain distance needs to be maintained between interactive elements on the same circle layer, in the process of arranging interactive elements by any of the above methods, if the number of interactive elements at the same level is large and cannot be arranged in one circle layer, multiple pages can be formed on the circle layer, and each page includes one or more interactive elements. In other words, interactive elements that are arranged on the same circle and can be displayed at the same time belong to the same page. Each page can also include a corresponding page turning control. For easy identification, the page turning control in each page is also arranged on the corresponding circle layer. Thus, illustratively, in the process of arranging interactive elements, such as Fig.14 As shown, the method may also include:

[0152] S1401, in the process of deploying multiple interactive elements, add the multiple interactive elements one by one to the circle where the elements are located.

[0153] In this example, in the process of deploying multiple interactive elements, the interactive elements can be added one by one to the circle layer of their own level, and the element spacing can be controlled according to one of the three element arrangement methods mentioned above.

[0154] S1402: If the number of interactive elements added to the circle layer reaches the maximum number of elements that can be deployed on the circle layer, the interactive elements currently existing on the circle layer are divided into the same page, and at least one page is generated on the circle layer.

[0155] In this example, when the number of interactive elements added to the circle layer reaches the maximum number of elements that can be deployed on the circle layer, N(max), the interactive elements currently existing on the circle layer can be automatically divided into the same page, and at least one page is generated on the circle layer. Figure 8In the example shown, when the interactive elements on circle layer 501 reach a maximum value of 5, elements 1 to 5 automatically form the home page, and a second page is generated to deploy element 6.

[0156] S1403, deploying the remaining interactive elements on the at least one page;

[0157] In this example, the remaining peer-level interactive elements are deployed on these generated pages.

[0158] S1404, adding corresponding page turning controls for each page.

[0159] In this example, corresponding page turning controls are added to the circles where each page is located. Specifically, the first page has a page turning control for the next page (i.e., the second page), each intermediate page has a page turning control for the previous page and a page turning control for the next page, and the last page has a page turning control for the previous page.

[0160] In this way, when there are many interactive elements at the same level, they are deployed in pages in the same circle, which can greatly save layout space. Since pages at the same level are in the same circle, there will be no confusion in label logic. In addition, the switching of the directory pages of interactive elements based on the page turning control is convenient and efficient, which is conducive to improving the user interaction experience.

[0161] In this embodiment, based on the above-mentioned paging deployment mechanism of interactive elements, in implementing Fig.11 , 12A Before the process shown in FIG. 12B, if you need to turn the page to find the corresponding target interactive element, you can execute the following steps: Fig.15 Therefore, specifically, Fig.15 As shown, the method may also include:

[0162] S1501, obtaining a third trigger operation on a page turning control.

[0163] In this embodiment, multiple interactive elements belonging to the same level are displayed on the same circle layer outside the display area 110, and the circle layer also includes a page turning control. The user can perform a trigger operation (i.e., a third trigger operation) on the page turning control on any circle layer to switch the display of the interactive elements on the page corresponding to the page turning control.

[0164] For example Figure 8 In the example shown in , the third trigger operation can be performed on the trigger button 801 (i.e., the page turning control) on the first page of the circle layer 501 to turn to the next page, or the third trigger operation can be performed on the trigger button 802 (i.e., the page turning control) on the second page of the circle layer 501 to turn to the previous page. Fig. 9 In the example shown, a third trigger operation can be performed on the trigger button 804 or 805 of the middle page on the circle layer 601 to correspondingly turn to the previous page or the next page.

[0165] Exemplarily, the third trigger operation may be a click operation, a floating operation, a voice input operation, etc. of the page turning control by the user, but is not limited thereto.

[0166] S1502: In response to a third trigger operation, display another interactive element belonging to the level on the circle layer.

[0167] In this embodiment, in response to the third trigger operation, the terminal 10 can display the interactive elements of the corresponding page on the circle layer where the triggered page turning control is located in the interface 100. Figure 8 The example shown shows that if the home page elements 1 to 5 on the circle layer 501 are currently displayed, in response to a click operation on the trigger button 801 , the element 6 of the second page will be switched to be displayed on the circle layer 501 .

[0168] In this way, when there are too many interactive elements at the same level, the paging mechanism can be used to achieve a reasonable layout of the interactive elements to avoid the visual crowding effect caused by too dense arrangement of interactive elements. The user can turn the page by pressing the trigger button of the previous and next pages to find the target interactive element to be operated. The operation is convenient, and the occupied area of ​​each page directory at the same level in the interface 100 is consistent, that is, they are all deployed according to the same circle. The user will not be confused about the level of interactive elements during the page turning process, the navigation logic is clear, and the interaction efficiency is high.

[0169] Optionally, during the page turning process, a corresponding page turning animation effect may be presented. As an example and not limitation, the page turning animation effect may be a direct transformation, whereby when a page turning button is clicked, the interactive elements of the current page are switched to interactive elements of the corresponding page. Alternatively, when a page turning button is clicked, the interactive elements of the current page move toward a position and converge until they are completely hidden, and then the interactive elements of the corresponding page are gradually released from that position, and so on. These examples are not enumerated one by one.

[0170] For example, after the user finds the target interactive element to be triggered by turning the page, the user can execute the following steps: Fig.11 , 12A Or the process shown in 12B, which will not be repeated here. And, when executing any of the above processes of this method, similar Fig.10 As shown, when any interactive element overlaps with part of the content on the interface 100, the transparency of the arbitrary interactive element is greater than the preset transparency, so that the part of the content overlapping with the arbitrary interactive element can be presented.

[0171] In this embodiment, the directories to which the interactive elements displayed on the interface 100 belong may be independent of each other, that is, there is no strict order of operation between the parent or child interactive elements in one directory and the interactive elements in another directory, and the interactive elements in any directory that are triggered first have no effect on the triggering results of the interactive elements in the directory that are triggered later. Figure 6 In the example shown, if the directories to which the root-level interactive elements 1 to 4 belong are independent of each other, then when any of the sub-elements 21 to 28 in the directory to which element 2 belongs is clicked first, the corresponding content will be displayed in the display area 110. Thereafter, if element 4 is clicked again, if element 4 has a sub-element, the sub-element will be displayed, or if there is no sub-element, the content corresponding to element 4 will be displayed in the display area 110, and the result of clicking on element 4 has nothing to do with the directory of element 2 that was clicked first.

[0172] Alternatively, the directories to which the interactive elements displayed on the interface 100 belong can generate a cascading operation relationship, that is, different directories that are triggered first will have different effects on the triggering results of the interactive elements in the directories that are triggered later. Figure 6 The example shown illustrates that if the directories to which the root-level interactive elements 1 to 3 belong are independent of each other but can all generate a cascade operation relationship with element 4, then if sub-element 21 of element 2 is clicked first and then element 4 is clicked, content related to both sub-element 21 and element 4 will be displayed in display area 110; if sub-element 22 of element 2 is clicked first and then element 4 is clicked, content related to both sub-element 22 and element 4 will be displayed in display area 110.

[0173] In this way, the interactive elements under the mutually independent directories (also referred to as the first directory herein) can be tab label option buttons for identifying one or a class of objects, while the interactive elements under the directory that can generate a cascade operation relationship with these directories (also referred to as the second directory herein) can be buttons associated with the label contents of these objects. In this way, the interactive elements of the first directory are first triggered to select an object, and then the interactive elements under the second directory are triggered to display a certain label content of the object in the display area 110.

[0174] Therefore, based on the relationship between the above-mentioned different directories, in some possible implementations, reference may be made to the following: Fig.16A The flowchart of an interface interaction method provided by an embodiment of the present application is shown in FIG. Fig.11 The difference between the illustrated process is that, before receiving the first triggering operation of the user on the first target interactive element, the method may further include the following S1601 to S1602:

[0175] S1601: Receive a user's selection operation on a third target interactive element.

[0176] In this embodiment, when some directories (i.e., first directories) among the directories to which the multiple interactive elements displayed around the display area 110 belong are independent of each other, and a cascade operation relationship can be generated between these first directories and another part of the directories (i.e., second directories), the user can perform a selection operation on one of the interactive elements in any first directory, i.e., the third target interactive element.

[0177] Exemplarily, the selection operation may be a click operation, a floating operation, a voice input operation, etc. of a page turning control by the user, but is not limited thereto.

[0178] S1602: In response to the selection operation, determine the object identified by the third target interactive element.

[0179] In this embodiment, since the interactive element may be a tab option button used to identify one or a class of objects, the terminal 10 may determine the object identified by the third target interactive element in response to the selection operation.

[0180] By way of example and not limitation, an object may be an object described by a data element in structured data or semi-structured data. For example, for a cluster device maintenance table, the objects identified by different root-level interactive elements may be different servers described in the table, and the objects identified by the sub-elements under the root-level interactive elements may be a virtual machine (VM) running on a server described in the table.

[0181] Exemplarily, these objects are also associated with at least one label content, and these label contents are used to characterize the characteristics of the objects. For example, if the object identified by the third target interactive element is a server in the above cluster device maintenance table, its label content can describe the IP, system version and other characteristics of the server, and these label contents are also recorded in the cluster device maintenance table. The same type of label content of different objects can be associated with the same interactive element in the second directory.

[0182] S1603: Receive a first trigger operation from a user on a first target interactive element.

[0183] In this embodiment, after the user selects an operation object, he can select an interactive element, i.e., a first target interactive element, from any second directory outside the display area 110 to perform the first trigger operation. It should be understood that the principle of performing the first trigger operation is the same as that of the above-mentioned Fig.11 The description of step S1101 is similar and will not be repeated here.

[0184] S1604: In response to the first trigger operation, display the target label content of the object in the display area, where the target label content is the label content associated with the first target interactive element in the at least one label content.

[0185] In this embodiment, in response to the first trigger operation, the terminal 10 can display the label content associated with the object and the first target interactive element, that is, the target label content, in the display area 110. For example, if the object is a server in the above cluster device maintenance table, and the label content associated with the first target interactive element is the IP information of each server, then in response to the first trigger operation, the display area 110 displays the IP information of the server (rather than the IP information of other servers).

[0186] The following is an example of the present application. Fig.16A Some specific application scenarios of the method shown are described.

[0187] In one possible example, Fig. 16B As shown, for cluster XX1 including several host nodes host0~host3, multiple virtual machine nodes VM can be deployed on each host node host0~host3, obtaining virtual machine nodes VM00~07. In the process of cluster XX1 providing services to users, tasks can be migrated between these virtual machine nodes VM00~07, and a table with detailed information such as whether the task migration of each virtual machine node VM00~07 is successful or not is generated in the background. For example Fig. 16B Table 1 shown in (16b1) records the name of the virtual machine node, the name and IP address of the host node where the virtual machine node is located, the source operating system, the target operating system, the task progress, and the task completion status.

[0188] For Table 1, the created migration task management interface 100 can be as follows: Fig. 16B As shown in (16b2), the six labels 161 of the largest level surrounding the outer periphery of the display area 110 in the interface 100 respectively represent objects such as host nodes host0~host3 and corresponding classification label contents such as step (used to display task progress), net (used to display node IP), and disk (used to display disk capacity).

[0189] The user can click on the label of one of the host nodes, for example, click on the label of the host node host0, thereby displaying sub-labels 162 outside these labels 161, respectively indicating objects such as virtual machine nodes VM00-03 deployed on the host node host0. Then, the user can select the virtual machine nodes VM00-03 that he wants to view, for example, virtual machine node VM00, then click on the label of virtual machine node VM00, and then click on the corresponding classification label to view the specific task information of the virtual machine node VM00. Specifically, if the user clicks on the step label, then the migration progress of the virtual machine node VM00 and the current step can be displayed in the display area 110; click on the di sk label, the display area 110 displays the disk capacity information of the virtual machine node VM00; and click on the net label, the display area 110 switches to the ip information of the virtual machine node VM00.

[0190] Similarly, the classification of Tab tags can be appropriately adjusted according to business logic. For example, the Tab tag of the migration scenario is to list all migrated virtual machine nodes. In order to clearly display a large amount of table node data, the host is set as the parent Tab tag and the virtual machine is displayed as the child Tab tag. In this way, it is possible to clearly observe which virtual machines are included under a certain host. Click one of the child Tab tags and randomly click on the classification tag, and the data content of the corresponding classification tag to the associated field under the child Tab tag can be pulled from the table, and then displayed in the real area. In this way, users do not need to specifically query the table to understand key information such as the task progress of each virtual machine of any node. Compared with traditional top bar and sidebar Tab pages, the circular hidden design can save a lot of space and does not need to be specially formatted for a large number of Tab tags. If the traditional Tab page component is used for display, the Tab tag will appear very crowded. In contrast, the present invention can clearly and concisely display the key information required by the user.

[0191] In another application scenario, the disassembled parts of the server can be used to show the overall layout of a server model in three dimensions through a structural diagram, for example Fig.17As shown in (17a), it is difficult for users to clearly correspond to the information of a single component based on (17a). In this example, a server structure disassembly interface 100 as shown in (17b) is constructed, including a display area 110. Four labels 171 of the maximum level surrounding the outer periphery of the display area 110 are included in the display area 110, which respectively represent objects such as server components, such as the "core" label identifies the core component (such as the CPU), the "storage" label identifies the storage-type component, and the "disassembly parts" and "others" can identify the remaining components. The directories to which the labels 171 belong are independent of each other. Clicking or hovering over the label 171 or its sub-label 172 of one of the directories, such as clicking the "hard disk" label 172, can display a picture of the hard disk in the display area 110. h

[0192] Alternatively, in this application scenario, a server structure disassembly interface 100 such as (17c) is constructed, which includes a display area 110 and can surround the display area 110 with 6 labels 171 of the maximum level, which respectively represent objects such as server components and their classification label contents, such as the "core" label identifies the core component (such as CPU), the "storage" label identifies the storage-class component, and the "disassembly parts" and "others" can identify the remaining components. The model label is associated with the model information of each component, and the picture label is associated with the picture of each component.

[0193] Specifically, the terminal 10 can receive a user's selection operation on a label of one of the components (i.e., the third target interactive element). Taking clicking on the "hard disk" label 172 as an example, the terminal 10 can determine that the "hard disk" label 172 identifies the hard disk component of the server in response to the selection operation.

[0194] Next, the terminal 10 may receive a first trigger operation from the user on a tag (i.e., the first target interactive element) associated with a certain type of tag content, such as receiving a click operation from the user on the "model" tag 171. Then, in response to the first trigger operation, the terminal 10 may display the tag content of the corresponding component and associated with the "model" tag 171, i.e., the model information of the hard disk, in the display area 110. Similarly, if the user clicks on the "picture" tag 171 again, the model information of the hard disk in the display area 110 is hidden and switched to a picture of the hard disk. In this way, the interface 100 can more accurately display the picture and information of each component through the display area 110 and the nested tags.

[0195] Moreover, in this example, there are many classification labels about server components in the interface 100, but the amount of information to be displayed is relatively small. The traditional top bar or sidebar Tab page will occupy too much layout space due to too many Tab labels, which will appear crowded. At the same time, too many Tab labels will make it difficult for users to quickly filter out the required Tab labels and key information. However, in this example, the labels of the surrounding layout occupy very little space, and the navigation logic is clear, which is convenient for users to accurately view the required information.

[0196] Based on the method in the above embodiment, the present application embodiment provides an interface interaction device. Figure 8 , Fig.18 It is a structural schematic diagram of an interface interaction device provided in an embodiment of the present application.

[0197] like Fig.18 As shown, the device 1800 may include: a receiving module 1801 and a processing module 1802. The receiving module 1801 may be used to receive a first trigger operation of a user on a first target interactive element in an interface, wherein the interface includes a display area and multiple interactive elements, the multiple interactive elements are arranged around the display area, and the first target interactive element is one of the multiple interactive elements; the processing module 1802 may be used to display content associated with the first target interactive element in the display area in response to the first trigger operation.

[0198] It should be understood that the above-mentioned device 1800 is used to execute the method in the above-mentioned embodiment. The implementation principle and technical effect of the corresponding program module in the device 1800 are similar to those described in the above-mentioned method. The working process of the device can refer to the corresponding process in the above-mentioned method, which will not be repeated here.

[0199] Based on the method in the above embodiment, an embodiment of the present application provides an electronic device. The electronic device may include: at least one memory for storing programs; at least one processor for executing the programs stored in the memory; wherein, when the programs stored in the memory are executed, the processor is used to execute the method in the above embodiment.

[0200] Based on the method in the above embodiment, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program runs on a processor, the processor executes the method in the above embodiment.

[0201] Based on the method in the above embodiment, an embodiment of the present application provides a computer program product, characterized in that when the computer program product runs on a processor, the processor executes the method in the above embodiment.

[0202] Based on the method in the above embodiment, the present application embodiment also provides a chip. Fig.19 , Fig.19 This is a schematic diagram of the structure of a chip provided in an embodiment of the present application. Fig.19 As shown, the chip 900 includes one or more processors 901 and an interface circuit 902. Optionally, the chip 900 may also include a bus 903. Among them:

[0203] Processor 901 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in processor 901 or an instruction in software form. The above processor 901 can be a general-purpose processor, a digital communicator (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component. The disclosed methods and steps in the embodiments of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc.

[0204] The interface circuit 902 can be used to send or receive data, instructions or information. The processor 901 can use the data, instructions or other information received by the interface circuit 902 to process, and can send the processing completion information through the interface circuit 902.

[0205] Optionally, the chip 900 further includes a memory, which may include a read-only memory and a random access memory, and provides operation instructions and data to the processor. A portion of the memory may also include a non-volatile random access memory (NVRAM).

[0206] Optionally, the memory stores executable software modules or data structures, and the processor can perform corresponding operations by calling operation instructions stored in the memory (the operation instructions can be stored in the operating system).

[0207] Optionally, the interface circuit 902 may be used to output the execution result of the processor 901 .

[0208] It should be noted that the functions corresponding to the processor 901 and the interface circuit 902 can be implemented through hardware design, software design, or a combination of hardware and software, which is not limited here.

[0209] It should be understood that each step of the above method embodiment can be completed by a hardware-based logic circuit or a software-based instruction in a processor.

[0210] It is understandable that the size of the sequence number of each step in the above embodiment does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present application. In addition, in some possible implementations, each step in the above embodiment can be selectively executed according to actual conditions, and can be partially executed or fully executed, which is not limited here.

[0211] It is understandable that the processor in the embodiments of the present application may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. The general-purpose processor may be a microprocessor or any conventional processor.

[0212] The method steps in the embodiments of the present application can be implemented by hardware, or by a processor executing software instructions. The software instructions can be composed of corresponding software modules, and the software modules can be stored in random access memory (RAM), flash memory, read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, mobile hard disks, CD-ROMs, or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an ASIC.

[0213] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted through the computer-readable storage medium. The computer instructions may be transmitted from a website site, a computer, a server or a data center to another website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrated. The available medium may be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state drive (SSD)), etc.

[0214] It should be understood that the various numerical numbers involved in the embodiments of the present application are only used for the convenience of description and are not used to limit the scope of the embodiments of the present application.

Claims

1. An interface interaction method, It is characterized in that The method comprises: Receiving a first trigger operation of a user on a first target interactive element in an interface, wherein the interface includes a display area and a plurality of interactive elements, wherein the plurality of interactive elements are arranged around the display area, and the first target interactive element is one of the plurality of interactive elements; In response to the first trigger operation, content associated with the first target interactive element is displayed in the display area.

2. The method according to claim 1, It is characterized in that Before receiving a first trigger operation of a user on a first target interactive element in the interface, the method includes: receiving a second trigger operation on a second target interactive element, where the second target interactive element is one of the multiple interactive elements; In response to the second trigger operation, child interactive elements of the second target interactive element are displayed around the area where the second target interactive element is located, and the first target interactive element is a child interactive element of the second target interactive element.

3. The method according to claim 1, It is characterized in that The method further comprises: The plurality of interactive elements belonging to the same level are displayed on the same circle layer outside the display area, and the circle layer also includes a page turning control; Acquire a third trigger operation for the page turning control; In response to the third trigger operation, another interactive element belonging to the level is displayed on the circle layer.

4. The method according to any one of claims 1 to 3, It is characterized in that The interactive elements of the same level are displayed on the same circle layer outside the display area, and the arrangement spacing between the interactive elements on each circle layer is greater than or equal to a preset value.

5. The method according to any one of claims 1 to 3, It is characterized in that The interactive elements of the same level are displayed on the same circle layer outside the display area, and the arrangement spacing between the interactive elements on each circle layer is equal to L / N, L is the circumference of the circle layer, and N is the number of elements deployed on the circle layer.

6. The method according to claim 4 or 5, It is characterized in that When the interactive element overlaps with part of the content on the interface, the transparency of the interactive element is greater than a preset transparency so that the part of the content overlapping with the interactive element can be presented.

7. The method according to any one of claims 1 to 6, It is characterized in that In response to the first trigger operation, displaying the content associated with the first target interactive element in the display area includes: In response to the first trigger operation, determining an index value representing the first target interactive element; Obtaining the content queried according to the index value; The content is displayed in the display area.

8. The method according to any one of claims 1 to 7, It is characterized in that The method specifically comprises: receiving a selection operation of the user on a third target interactive element, where the third target interactive element is one of the multiple interactive elements; In response to the selection operation, determining an object identified by the third target interactive element, wherein the object is associated with at least one tag content, and the tag content is used to characterize a feature of the object; receiving the first trigger operation of the user on the first target interactive element; In response to the first trigger operation, a target label content of the object is displayed in the display area, where the target label content is a label content associated with the first target interactive element in the at least one label content.

9. The method according to claim 1, It is characterized in that The method specifically comprises: The interface is used to display the component structure of the server, and the multiple interactive elements include a label of at least one component of a chassis, a central processing unit, a memory, a fan, a hard disk, or a power module; In response to the first trigger operation, displaying the content associated with the first target interactive element in the display area specifically includes: In response to the first trigger operation, a picture of a component corresponding to the first target interactive element is displayed in the display area.

10. An electronic device, It is characterized in that include: at least one memory for storing a program; at least one processor, configured to execute the program stored in the memory; Wherein, when the program stored in the memory is executed, the processor is used to execute the method according to any one of claims 1-9.

Images