A page interaction method, system, medium and electronic terminal
By laying up the page elements of different levels of page elements on the web page, and dynamically displaying the next level of page elements based on the user's interaction behavior, the problem of complex structures in the existing technologies and overwhelming pages in the existing technologies have achieved more more crowded pages. Simple and efficient user interaction experience.
Patent Information
- Application Number
- CN202111081194.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2021-09-15
- Publication Date
- 2025-01-28
- Estimated Expiration
- 2041-09-15
AI Technical Summary
In the existing technology, the menu structure of web pages is relatively complex, which leads to users who need to spend too much effort to find the target application, and only supports one-way return paths. There is poor operation feedback and user experience, and the page is too crowded and complicated to be fast. Make accurate interaction behaviors.
By displaying the corresponding levels of page elements on the viewing page at different levels, when the user trigger any page element, the display and interaction of the next level of view page is performed according to the pre -set display rules. The display rules include determining determination The element information related to the currently triggered page element is displayed according to the information.
Avoid using menu structures, reduced the complexity of the page element architecture, realized the dimension reduction processing of information frameworks with higher complexity, improved the simplicity and interaction efficiency of the user interface, and reduced user learning costs.
Smart Images

Figure CN113722042B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of Internet technology, and in particular to a page interaction method, system, medium and electronic terminal. Background Art
[0002] Currently, the system's multi-level pages are usually reorganized and organized through menus to ensure that there are no particularly deep levels on a single page; or, the page levels are managed through breadcrumb components or hierarchical navigation to ensure that users are always aware of their current level; or, by compressing the page space, relatively more information and interactive operation entrances are displayed in a limited page to ensure support for business complexity.
[0003] However, the above method has certain problems, such as: the menu structure of the web page is complex, users need to spend too much energy to find the target application, and only supports a one-way return path, there is poor operation feedback and usage experience, the page is too crowded and complicated, and it is impossible to quickly make accurate interactive behaviors, and the usage is highly restrictive, with high restrictions and requirements on equipment. Summary of the invention
[0004] The present invention provides a page interaction method, system, medium and electronic terminal to solve the problem in the prior art that the menu structure of web pages is complex, the pages are too crowded and complicated, and the user experience is poor.
[0005] The page interaction method provided by the present invention includes:
[0006] The page elements of the corresponding levels are displayed in a tiled manner on a view page, and the page elements of adjacent levels are associated with each other;
[0007] When the user triggers any page element, the next level of view page is displayed and interacted with according to the preset display rules;
[0008] The display rules include: determining element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, page elements at the next level, and interaction trigger area information for indicating an interaction entrance.
[0009] Optionally, the step of displaying according to the element information includes:
[0010] Determine a corresponding interactive display area according to the element information, wherein the interactive display area includes at least one of the following: an element details area of a currently triggered page element, a display area of a page element at a next level, and an interactive triggering area of a currently triggered page element;
[0011] According to the preset translation direction, the current view page is controlled to translate, the interactive display area in the current view page is squeezed and hidden, and the remaining area in the current view page is obtained;
[0012] The remaining area is used to display the interactive display area corresponding to the element information to complete the interaction.
[0013] Optionally, the page elements include: first-level page elements;
[0014] Classifying the plurality of first-level page elements according to a preset classification rule to determine the category of the first-level page elements;
[0015] According to the categories of the first-level page elements, the first-level page elements are stored and grouped to obtain one or more element groups and corresponding element group icons;
[0016] The first-level page elements are displayed using the element group icon.
[0017] Optionally, the page element further includes: a secondary page element;
[0018] Using the element group icon, triggering the element group;
[0019] When the element group is triggered, the primary page elements corresponding to the element group are displayed;
[0020] When any first-level page element is triggered, the second-level page element associated with the current first-level page element is determined according to the current first-level page element;
[0021] By overlaying the view page of the next level onto the view page of the current level, the secondary page elements are tiled and displayed on the view page of the next level.
[0022] Optionally, the page elements further include: third-level page elements;
[0023] When any secondary page element is triggered, element information associated with the current secondary page element is determined according to the current secondary page element;
[0024] The element information associated with the current secondary page element includes: secondary element details information, the tertiary page element of the next level, and secondary interaction trigger area information for indicating the interaction entrance between the secondary page element and the tertiary page element;
[0025] Determine a secondary interactive display area according to element information associated with the current secondary page element, the secondary interactive display area includes: a secondary element detail area, a tertiary page element display area and a secondary element interactive trigger area, the secondary element interactive trigger area includes: one or more secondary trigger buttons, the secondary trigger button corresponds to a trigger operation;
[0026] The page is displayed according to the preset secondary interactive display template and the secondary interactive display area.
[0027] Optionally, when the page element does not include a fourth-level page element, a corresponding trigger operation is determined by selecting the second-level trigger button;
[0028] According to the trigger operation, obtaining element information associated with the third-level page element;
[0029] The element information associated with the third-level page element includes: third-level element detail information corresponding to the third-level page element, and third-level interaction triggering area information for interactively triggering the third-level page element;
[0030] According to the element information associated with the third-level page element, a third-level interactive display area is determined, and the page is displayed, the third-level interactive display area includes: a third-level element detail area and a third-level element interactive trigger area used as an interactive entrance of the third-level page element, the third-level element interactive trigger area includes: one or more third-level trigger buttons, and the third-level trigger button corresponds to a trigger operation;
[0031] By selecting the three-level trigger button, interactive feedback is performed to complete page interaction.
[0032] Optionally, when the page element includes a fourth-level page element, it is determined whether the third-level page element is triggered;
[0033] When any of the third-level page elements is triggered, the current view page is controlled to translate according to a preset page translation direction, and the second-level element detail area and the second-level element interaction trigger area are squeezed and hidden;
[0034] According to the third-level page element, determining corresponding fourth-level element detail information and fourth-level interaction triggering area information;
[0035] Determine a corresponding fourth-level element detail area and a fourth-level element interaction trigger area according to the fourth-level element detail information and the fourth-level interaction trigger area information;
[0036] The fourth-level element details area and the fourth-level element interaction trigger area are controlled to appear along the page translation direction and displayed on the current view page. The fourth-level element details area and the fourth-level element interaction trigger area are both located on the side of the third-level page element display area away from the second-level element details area.
[0037] The present invention also provides a page interaction system, comprising:
[0038] A display module, used to tile page elements of corresponding levels on a view page, where page elements of adjacent levels are associated with each other;
[0039] The interactive module is used to display and interact with the next level of view page according to the preset display rules when the user triggers any page element;
[0040] The display rules include: determining element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, page elements at the next level, and interaction trigger area information for indicating an interaction entrance.
[0041] The present invention also provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program implements any of the above methods when executed by a processor.
[0042] The present invention also provides an electronic terminal, comprising: a processor and a memory;
[0043] The memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the terminal executes any one of the methods described above.
[0044] Beneficial effects of the present invention: The page interaction method of the present invention displays the page elements of the corresponding levels on the view pages of different levels in a tiled manner. When the user triggers any page element, the view page of the next level is displayed and interacted with according to the preset display rules. The display rules include: determining the element information associated with the currently triggered page element, and displaying according to the element information. The element information includes at least one of the following: element detail information corresponding to the current page element, the page element of the next level, and the interaction trigger area information for indicating the interaction entrance. The use of a menu structure is avoided, the complexity of the page element architecture is reduced, and the dimensionality reduction processing of the information framework with higher complexity is realized. The simplicity of the view pages or user interfaces of each level is better guaranteed, and the structured relationship between the page elements of different levels is directly perceived by the user through interactive behavior, thereby reducing the user's learning cost and improving the interaction efficiency and user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0045] Figure 1 It is a flow chart of the page interaction method in an embodiment of the present invention.
[0046] Figure 2 It is a schematic diagram of the interaction between primary page elements in the page interaction method in an embodiment of the present invention.
[0047] Figure 3 It is a schematic diagram of the interaction between the secondary page elements and the tertiary page elements in the page interaction method in the embodiment of the present invention.
[0048] Figure 4 It is a schematic diagram of the interaction between the third-level page elements and the fourth-level page elements in the page interaction method in the embodiment of the present invention.
[0049] Figure 5 It is a schematic diagram of the interaction between the fourth-level page elements and the fifth-level page elements in the page interaction method in the embodiment of the present invention.
[0050] Figure 6 It is a structural diagram of a page interaction system in an embodiment of the present invention.
[0051] Figure ID:
[0052] 00 element group icon; 01 first-level page element; 02 second-level page element;
[0053] 021 Secondary element details area; 022 Secondary element interaction trigger area;
[0054] 03 Third-level page element; 031 Third-level element details area;
[0055] 032 Level 3 element interaction trigger area; 041 Level 4 element details area;
[0056] 042 Level 4 element interaction trigger area; 051 Level 5 element details area;
[0057] 052 Level 5 element interaction trigger area; a System name;
[0058] b first-level page element name; c second-level page element name;
[0059] d Third-level page element name DETAILED DESCRIPTION
[0060] The following describes the embodiments of the present invention by specific examples, and those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict.
[0061] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present invention, and thus the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.
[0062] The inventor found that for the management system on the web (WEB) side, due to the high complexity of the business logic, more traditional tables and forms are mostly used, and dialog boxes are used to support users to complete interactive behaviors. With the development of Internet technology, more and more offline processes are abstracted into some kind of business logic, and ultimately through the user interface, users can interact with the system, so that the system can obtain the required information and users can achieve their goals. However, as the offline processes that need to be abstracted become more and more complicated, the complexity of business logic is also increasing. At present, the re-organization and storage of the multi-level pages of the system are usually completed through menus to ensure that there will be no particularly deep levels in a single page; or, methods such as managing the page level through breadcrumb components or hierarchical navigation ensure that users can always be aware of the level they are currently in; or, by compressing the page space, relatively more information and interactive operation entrances are displayed in a limited page to ensure support for business complexity. However, the above method has certain problems, such as: the menu structure of the web page is complex, the user needs to spend too much energy to find the target application, and only supports a one-way return path, there is poor operation feedback and usage experience, the page is too crowded and complicated, and it is impossible to quickly make accurate interactive behaviors, and the usage is highly restrictive, the device restrictions and requirements are high, and the interaction mode cannot be continued between the PC (Personal Computer) and the mobile terminal. Therefore, the inventor proposes a page interaction method, system, medium and electronic terminal, which display page elements of corresponding levels on view pages of different levels in a tiled manner. When a user triggers any page element, the view page of the next level is displayed and interacted with according to a preset display rule. The display rule includes: determining element information associated with the currently triggered page element, and displaying according to the element information. The element information includes at least one of the following: element detail information corresponding to the current page element, page elements of the next level, and interaction trigger area information for indicating the interaction entrance. The use of a menu structure is avoided, the complexity of the page element architecture is reduced, and dimensionality reduction processing of information frameworks with higher complexity is achieved. The simplicity of view pages or user interfaces at each level is better guaranteed, and the structured relationship between page elements at different levels is directly perceived by the user through interactive behavior, thereby reducing the user's learning cost, improving interaction efficiency and user experience, and having strong feasibility and low cost.
[0063] like Figure 1 As shown, the page interaction method in this embodiment includes:
[0064] S101: The page elements of the corresponding levels are tiled on a view page, and the page elements of adjacent levels are related to each other; by tiled displaying the page elements of the corresponding levels on view pages of multiple different levels, the absolute position of the menu in the display system in the prior art is removed to achieve a flat information architecture and a low-coupled hierarchical relationship, reduce the complexity of the information architecture of the page elements, and ensure the simplicity of the view pages of each level.
[0065] For example: according to the functions of multiple page elements, the multiple page elements are divided into levels, and multiple page elements of different levels are obtained. The levels of the page elements correspond to the levels of the view pages. The page elements of the corresponding levels are tiled and displayed using multiple view pages of different levels. The page elements of adjacent levels are correlated with each other.
[0066] S102: When the user triggers any page element, the next level of view page is displayed and interacted with according to the preset display rules; the user triggers the page element in the following ways: clicking or touching.
[0067] The display rule includes: determining the element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, the page element of the next level, and the interaction trigger area information used to represent the interaction entrance. The element detail information is the detail information of the page element, such as the device type and device model corresponding to the page element. By displaying and interacting with the view page of the next level according to the preset display rule, it is ensured that the interaction entrance on the view page has enough area to support the user to quickly trigger the operation. The trigger operation, such as click or touch, exposes the core interaction behavior of the user to the view page. The spatial arrangement and setting of the view page are more reasonable, which is convenient for the user to directly perceive the structured relationship between the page elements of different levels through the interaction behavior, reduce the learning cost and difficulty of the user for the architecture between the page elements of different levels, improve the interaction efficiency between the system and the user, and effectively improve the user experience.
[0068] In order to achieve a unified and sustainable interaction mode between the PC and the mobile terminal, the inventor proposes that the step of displaying according to the element information includes: determining the corresponding interactive display area according to the element information, the interactive display area includes at least one of the following: the element details area of the currently triggered page element, the display area of the next-level page element, and the interactive trigger area of the currently triggered page element; according to the preset page translation direction, controlling the translation of the current view page, squeezing and hiding part or all of the interactive display area in the current view page, and obtaining the remaining area in the current view page; using the remaining area, displaying the interactive display area corresponding to the element information to complete the interaction. By translating the current view page, the overall space of the view page is fully utilized, such as by controlling the current view page to move left and right, etc., the horizontal space of the view page is fully utilized, which helps to achieve a unified and sustainable interaction mode between the PC and the mobile terminal, reduce the requirements for the device that carries the view page, and improve the user experience. The page translation direction can be set according to actual conditions, which will not be repeated here.
[0069] Please refer to Figure 2 In order to improve the simplicity of the view page, the inventor proposes to store the page elements of the same level, and further store the first-level page element 01. The steps of storing include:
[0070] S201: Classify the plurality of first-level page elements 01 according to a preset classification rule to determine the category of the first-level page element 01; for example, classify the plurality of first-level page elements 01 according to the function of the first-level page element 01 to determine the category of the first page element.
[0071] S202: According to the category of the first-level page element 01, the first-level page element 01 is stored and grouped to obtain one or more element groups and corresponding element group icons 00;
[0072] S203: Display the first-level page element 01 using the element group icon 00. By grouping and storing multiple first-level page elements 01, the simplicity of the view page is effectively improved. The user can obtain the first-level page element 01 corresponding to the element group by clicking or touching the element group icon 00, thereby improving the interaction efficiency.
[0073] In order to facilitate the user experience of the interaction between page elements at different levels, the inventor proposes that the page elements also include: a secondary page element 02; it can be understood that the secondary page element 02 is the page element of the next level of the primary page element 01, such as: the primary page element 01 can be OA, administration, etc., and the secondary page element 02 corresponding to OA can be attendance, clocking in and leaving, etc., and so on, which will not be repeated here.
[0074] S301: using the element group icon 00 to trigger the element group; for example, the user clicks or touches the element group icon 00 to trigger the element group.
[0075] S302: When the element group is triggered, the first-level page element 01 corresponding to the element group is displayed; that is, when the element group is triggered, the first-level page element 01 in the element group is tiled and displayed on the current view page, with high simplicity.
[0076] S303: When any first-level page element 01 is triggered, the second-level page element 02 associated with the current first-level page element 01 is determined according to the current first-level page element 01; that is, the user selects and triggers multiple first-level page elements 01 displayed in a tiled manner. When any first-level page element 01 is triggered, the second-level page element 02 associated with the current first-level page element 01 is determined according to the association relationship between the current first-level page element 01 and the second-level page element 02.
[0077] S304: By overlaying the view page of the next level onto the view page of the current level, the secondary page element 02 is tiled and displayed on the view page of the next level. This improves the simplicity of the view page display, facilitates the user to directly perceive the information architecture of the page elements of different levels through interactive triggering, and improves the user experience.
[0078] like Figure 3 As shown, the page elements also include: a third-level page element 03;
[0079] S401: When any secondary page element 02 is triggered, the element information associated with the current secondary page element 02 is determined based on the current secondary page element 02; for example: when the user performs a triggering operation such as clicking or touching the secondary page element 02, the element information associated with the current secondary page element 02 is obtained based on the clicked or touched secondary page element 02.
[0080] The element information associated with the current secondary page element 02 includes: secondary element detail information, the next-level tertiary page element 03 , and secondary interaction trigger area information for indicating the interaction entrance between the secondary page element 02 and the tertiary page element 03 .
[0081] S402: Determine a secondary interactive display area according to element information associated with the current secondary page element 02, wherein the secondary interactive display area includes: a secondary element detail area 021, a tertiary page element 03 display area, and a secondary element interactive trigger area 022, wherein the secondary element interactive trigger area 022 includes: one or more secondary trigger buttons, wherein the secondary trigger button corresponds to a trigger operation;
[0082] S403: Display the page according to the preset secondary interactive display template and the secondary interactive display area. The user can select or trigger the secondary trigger button in the secondary interactive display area to interact with the secondary page element 02 and the tertiary page element 03. The secondary interactive display template can be set according to actual conditions, for example: Figure 3 As shown, the secondary element detail area 021 is set at the upper left corner of the view page, the secondary element interaction trigger area 022 is set at the lower left corner of the view page, and the tertiary page element 03 display area is set on the right side of the view page. This allows users to avoid being inconvenienced by accumulated and overlapping windows or dialog boxes when acquiring information between page elements at different levels. By simplifying the view page and improving the simplicity of the view page display, users can directly perceive page elements at different levels through interactive behaviors, thereby improving user experience.
[0083] Further, S501: when the page elements do not include the fourth-level page elements, the corresponding trigger operation is determined by selecting the second-level trigger button; for example: the user determines the corresponding trigger operation by touching or clicking the second-level trigger button.
[0084] S502: according to the trigger operation, obtaining element information associated with the third-level page element 03;
[0085] The element information associated with the third-level page element 03 includes: third-level element detail information corresponding to the third-level page element 03 , and third-level interaction triggering area information for performing interaction triggering on the third-level page element 03 .
[0086] S503: Determine a third-level interactive display area based on element information associated with the third-level page element 03, and perform page display. The third-level interactive display area includes: a third-level element details area 031 and a third-level element interactive trigger area 032 used as an interactive entrance for the third-level page element 03. The third-level element interactive trigger area 032 includes: one or more third-level trigger buttons, and the third-level trigger button corresponds to the trigger operation.
[0087] S504: By selecting the third-level trigger button, interactive feedback is performed to complete the page interaction. Through the above steps, the user completes the interaction with the third-level page element 03. After completing the interaction, click or touch the return arrow in the upper left corner of the view page to return to the tile view page of the second-level page element, or click or touch the area of the first-level page element name b in the upper left corner of the view page to directly return to the tile view page of the first-level page element.
[0088] Please refer to Figure 4 S601: When the page element includes a fourth-level page element, it is determined whether the third-level page element 03 is triggered; that is, when the page element includes a fourth-level page element, it is monitored whether the third-level page element 03 is triggered, and the monitoring method is: determine whether the user touches or clicks the third-level page element 03 on the view page.
[0089] S602: When any of the third-level page elements 03 is triggered, the current view page is controlled to be translated according to a preset page translation direction, the second-level element detail area 021 and the second-level element interaction trigger area 022 are squeezed and hidden, and the corresponding page translation direction is obtained;
[0090] S603: Determine corresponding fourth-level element details information and fourth-level interaction triggering area information according to the third-level page element 03;
[0091] S604: Determine the corresponding fourth-level element detail area 041 and fourth-level element interaction trigger area 042 according to the fourth-level element detail information and the fourth-level interaction trigger area information;
[0092] S605: Control the fourth-level element details area 041 and the fourth-level element interaction trigger area 042 to appear along the page translation direction and be displayed on the current view page, wherein the fourth-level element details area 041 and the fourth-level element interaction trigger area 042 are both located on the side of the third-level page element 03 display area away from the second-level element details area 021. The fourth-level element interaction trigger area 042 includes: one or more fourth-level trigger buttons, and the fourth-level trigger button corresponds to a trigger operation.
[0093] In some embodiments, if the fifth-level page element is not included, the fourth-level element details area 041 and the fourth-level element interaction trigger area 042 are squeezed to the right by clicking the expansion icon on the left side of the view page, and the second-level element details area 021 and the second-level element interaction trigger area 022 on the left side of the view page are restored. The different interaction methods and various usage scenarios of the PC and mobile terminals are uniformly considered. In terms of page layout, the overall space of the view page is fully utilized, such as the horizontal space, etc., so that a unified and sustainable interaction mode can be achieved on the PC and mobile terminals, which is conducive to reading information on mobile terminals with smaller screens, such as: translating the view page left and right or up and down, and displaying page elements at different levels, so that users can obtain information on page elements at different levels, and this interaction mode can be continued on the PC and mobile terminals, which reduces the R&D cost while providing better support for users' mobile office.
[0094] like Figure 5 As shown, S701: when the page elements further include level five page elements, the corresponding trigger operation is determined by selecting the level four trigger button;
[0095] S702: Determine element information associated with the fourth-level page element according to the trigger operation;
[0096] S703: The element information associated with the fourth-level page element includes: corresponding fifth-level element details information and fifth-level interaction triggering area information;
[0097] S704: Determine the corresponding fifth-level element detail area 051 and fifth-level element interaction trigger area 052 according to the fifth-level element detail information and the fifth-level interaction trigger area information;
[0098] S705: Display the page according to the preset five-level interactive display template, the five-level element details area 051 and the five-level element interactive trigger area 052, and perform interactive feedback by selecting the five-level trigger button in the five-level element interactive trigger area 052. The five-level page elements, as the deepest element level, can be displayed in the form of a sidebar, and corresponding feedback information is given after the user completes a specific interactive operation, and the interactive process is completed at the same time.
[0099] Please refer to Figure 6 This embodiment also provides a page interaction system, including:
[0100] A display module, used to tile page elements of corresponding levels on a view page, where page elements of adjacent levels are associated with each other;
[0101] The interactive module is used to display and interact with the next level of view page according to the preset display rules when the user triggers any page element;
[0102] The display rules include: determining element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, page elements at the next level, and interaction trigger area information for indicating an interaction entrance; the display module and the interaction module are connected.
[0103] In some embodiments, the step of displaying according to the element information includes:
[0104] Determine a corresponding interactive display area according to the element information, wherein the interactive display area includes at least one of the following: an element details area of a currently triggered page element, a display area of a page element at a next level, and an interactive triggering area of a currently triggered page element;
[0105] According to the preset translation direction, the current view page is controlled to translate, the interactive display area in the current view page is squeezed and hidden, and the remaining area in the current view page is obtained;
[0106] The remaining area is used to display the interactive display area corresponding to the element information to complete the interaction.
[0107] In some embodiments, the page elements include: first-level page element 01;
[0108] Classify the plurality of first-level page elements 01 according to a preset classification rule to determine the category of the first-level page element 01;
[0109] According to the category of the first-level page element 01, the first-level page element 01 is stored and grouped to obtain one or more element groups and corresponding element group icons 00;
[0110] The first-level page element 01 is displayed using the element group icon 00 .
[0111] In some embodiments, the page elements further include: secondary page element 02;
[0112] Using the element group icon 00, triggering the element group;
[0113] When the element group is triggered, the first-level page element 01 corresponding to the element group is displayed;
[0114] When any first-level page element 01 is triggered, the second-level page element 02 associated with the current first-level page element 01 is determined according to the current first-level page element 01;
[0115] By overlaying the view page of the next level onto the view page of the current level, the secondary page element 02 is tiled and displayed on the view page of the next level.
[0116] In some embodiments, the page elements further include: a third-level page element 03;
[0117] When any secondary page element 02 is triggered, the element information associated with the current secondary page element 02 is determined according to the current secondary page element 02;
[0118] The element information associated with the current secondary page element 02 includes: secondary element details information, the next-level tertiary page element 03, and secondary interaction trigger area information for indicating the interaction entrance between the secondary page element 02 and the tertiary page element 03;
[0119] Determine a secondary interactive display area according to element information associated with the current secondary page element 02, the secondary interactive display area includes: a secondary element detail area 021, a tertiary page element 03 display area and a secondary element interactive trigger area 022, the secondary element interactive trigger area 022 includes: one or more secondary trigger buttons, the secondary trigger button corresponds to a trigger operation;
[0120] The page is displayed according to the preset secondary interactive display template and the secondary interactive display area.
[0121] In some embodiments, when the page elements do not include a fourth-level page element, a corresponding trigger operation is determined by selecting the second-level trigger button;
[0122] According to the trigger operation, element information associated with the third-level page element 03 is obtained;
[0123] The element information associated with the third-level page element 03 includes: third-level element detail information corresponding to the third-level page element 03, and third-level interaction triggering area information for interactively triggering the third-level page element 03;
[0124] According to the element information associated with the third-level page element 03, a third-level interactive display area is determined, and the page is displayed. The third-level interactive display area includes: a third-level element detail area 031 and a third-level element interactive trigger area 032 used as an interactive entrance of the third-level page element 03. The third-level element interactive trigger area 032 includes: one or more third-level trigger buttons, and the third-level trigger button corresponds to the trigger operation;
[0125] By selecting the three-level trigger button, interactive feedback is performed to complete page interaction.
[0126] In some embodiments, when the page element includes a fourth-level page element, it is determined whether the third-level page element 03 is triggered;
[0127] When any of the third-level page elements 03 is triggered, the second-level element detail area 021 and the second-level element interaction trigger area 022 are squeezed and hidden by controlling the current view page translation, and the corresponding page translation direction is obtained;
[0128] According to the third-level page element 03, the corresponding fourth-level element detail information and fourth-level interaction triggering area information are determined;
[0129] Determine the corresponding fourth-level element detail area 041 and fourth-level element interaction trigger area 042 according to the fourth-level element detail information and the fourth-level interaction trigger area information;
[0130] The fourth-level element details area 041 and the fourth-level element interaction trigger area 042 are controlled to appear along the page translation direction and displayed on the current view page. The fourth-level element details area 041 and the fourth-level element interaction trigger area 042 are both located on the side of the third-level page element 03 display area away from the second-level element details area 021.
[0131] In some embodiments, the page elements further include: a level five page element;
[0132] The four-level element interaction trigger area 042 includes: one or more four-level trigger buttons, and the four-level trigger buttons correspond to trigger operations;
[0133] By selecting the four-level trigger button, the corresponding trigger operation is determined;
[0134] Determining, according to the trigger operation, element information associated with the fourth-level page element;
[0135] The element information associated with the fourth-level page element includes: corresponding fifth-level element detail information and fifth-level interaction trigger area information;
[0136] According to the fifth-level element detail information and the fifth-level interaction trigger area information, determine the corresponding fifth-level element detail area 051 and the fifth-level element interaction trigger area 052;
[0137] The page is displayed according to the preset five-level interactive display template, the five-level element details area 051 and the five-level element interactive trigger area 052, and interactive feedback is performed by selecting the five-level trigger button in the five-level element interactive trigger area 052.
[0138] This embodiment further provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, any one of the methods in this embodiment is implemented.
[0139] This embodiment also provides an electronic terminal, including: a processor and a memory;
[0140] The memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the terminal executes any one of the methods in this embodiment.
[0141] The computer-readable storage medium in this embodiment can be understood by ordinary technicians in this field: all or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to the computer program. The aforementioned computer program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned storage medium includes: ROM, RAM, magnetic disk or optical disk and other media that can store program codes.
[0142] The electronic terminal provided in this embodiment includes a processor, a memory, a transceiver and a communication interface. The memory and the communication interface are connected to the processor and the transceiver and complete communication with each other. The memory is used to store computer programs, the communication interface is used to communicate, and the processor and the transceiver are used to run computer programs so that the electronic terminal executes each step of the above method.
[0143] In this embodiment, the memory may include a random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.
[0144] The above-mentioned processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.
[0145] The above embodiments are merely illustrative of the principles and effects of the present invention, and are not intended to limit the present invention. Anyone familiar with the art may modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by a person of ordinary skill in the art without departing from the spirit and technical concept disclosed by the present invention shall still be covered by the claims of the present invention.
Claims
1. A page interaction method for a WEB terminal, characterized in that: include: The page elements of the corresponding levels are displayed in a tiled manner on a view page, and the page elements of adjacent levels are associated with each other; When the user triggers any page element, the next level of view page is displayed and interacted with according to the preset display rules; The display rule includes: determining element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, page elements at the next level, and interaction triggering area information for indicating an interaction entrance; The page elements also include: third-level page elements; When any secondary page element is triggered, the element information associated with the current secondary page element is determined according to the current secondary page element; the element information associated with the current secondary page element includes: secondary element detail information, the third-level page element of the next level, and secondary interaction triggering area information for indicating the interaction entrance between the secondary page element and the third-level page element; Determine a secondary interactive display area according to element information associated with the current secondary page element, the secondary interactive display area includes: a secondary element detail area, a tertiary page element display area and a secondary element interactive trigger area, the secondary element interactive trigger area includes: one or more secondary trigger buttons, the secondary trigger button corresponds to a trigger operation; Displaying a page according to a preset secondary interactive display template and the secondary interactive display area; When the page elements do not include the fourth-level page elements, the corresponding trigger operation is determined by selecting the second-level trigger button; According to the trigger operation, element information associated with the third-level page element is obtained; the element information associated with the third-level page element includes: third-level element detail information corresponding to the third-level page element, and third-level interaction triggering area information for interactively triggering the third-level page element; According to the element information associated with the third-level page element, a third-level interactive display area is determined, and the page is displayed, the third-level interactive display area includes: a third-level element detail area and a third-level element interactive trigger area used as an interactive entrance of the third-level page element, the third-level element interactive trigger area includes: one or more third-level trigger buttons, and the third-level trigger button corresponds to a trigger operation; By selecting the three-level trigger button, interactive feedback is performed to complete page interaction.
2. The page interaction method according to claim 1, characterized in that: The step of displaying according to the element information includes: Determine a corresponding interactive display area according to the element information, where the interactive display area includes at least one of the following: The element details area of the currently triggered page element, the display area of the next-level page element, and the interaction triggering area of the currently triggered page element; According to the preset translation direction, the current view page is controlled to translate, the interactive display area in the current view page is squeezed and hidden, and the remaining area in the current view page is obtained; The remaining area is used to display the interactive display area corresponding to the element information to complete the interaction.
3. The page interaction method according to claim 1, characterized in that: The page elements include: primary page elements; Classifying the plurality of first-level page elements according to a preset classification rule to determine the category of the first-level page elements; According to the categories of the first-level page elements, the first-level page elements are stored and grouped to obtain one or more element groups and corresponding element group icons; The first-level page elements are displayed using the element group icon.
4. The page interaction method according to claim 3, characterized in that: The page elements also include: secondary page elements; Using the element group icon, triggering the element group; When the element group is triggered, the primary page elements corresponding to the element group are displayed; When any first-level page element is triggered, the second-level page element associated with the current first-level page element is determined according to the current first-level page element; By overlaying the view page of the next level onto the view page of the current level, the secondary page elements are tiled and displayed on the view page of the next level.
5. The page interaction method according to claim 1, characterized in that: When the page element includes a fourth-level page element, determining whether the third-level page element is triggered; When any of the third-level page elements is triggered, the current view page is controlled to translate according to a preset page translation direction, and the second-level element detail area and the second-level element interaction trigger area are squeezed and hidden; According to the third-level page element, determining corresponding fourth-level element detail information and fourth-level interaction triggering area information; Determine a corresponding fourth-level element detail area and a fourth-level element interaction trigger area according to the fourth-level element detail information and the fourth-level interaction trigger area information; The fourth-level element details area and the fourth-level element interaction trigger area are controlled to appear along the page translation direction and displayed on the current view page. The fourth-level element details area and the fourth-level element interaction trigger area are both located on the side of the third-level page element display area away from the second-level element details area.
6. A web page interaction system for a WEB terminal, characterized in that: include: A display module, used for tiling page elements of corresponding levels on a view page, where page elements of adjacent levels are associated with each other; The interactive module is used to display and interact with the next level of view page according to the preset display rules when the user triggers any page element; The display rule includes: determining element information associated with the currently triggered page element, and displaying according to the element information, wherein the element information includes at least one of the following: element detail information corresponding to the current page element, page elements at the next level, and interaction triggering area information for indicating an interaction entrance; The page elements also include: third-level page elements; When any secondary page element is triggered, the element information associated with the current secondary page element is determined according to the current secondary page element; the element information associated with the current secondary page element includes: secondary element detail information, the third-level page element of the next level, and secondary interaction triggering area information for indicating the interaction entrance between the secondary page element and the third-level page element; Determine a secondary interactive display area according to element information associated with the current secondary page element, the secondary interactive display area includes: a secondary element detail area, a tertiary page element display area and a secondary element interactive trigger area, the secondary element interactive trigger area includes: one or more secondary trigger buttons, the secondary trigger button corresponds to a trigger operation; Displaying a page according to a preset secondary interactive display template and the secondary interactive display area; When the page elements do not include the fourth-level page elements, the corresponding trigger operation is determined by selecting the second-level trigger button; According to the trigger operation, element information associated with the third-level page element is obtained; the element information associated with the third-level page element includes: third-level element detail information corresponding to the third-level page element, and third-level interaction triggering area information for interactively triggering the third-level page element; According to the element information associated with the third-level page element, a third-level interactive display area is determined, and the page is displayed, the third-level interactive display area includes: a third-level element detail area and a third-level element interactive trigger area used as an interactive entrance of the third-level page element, the third-level element interactive trigger area includes: one or more third-level trigger buttons, and the third-level trigger button corresponds to a trigger operation; By selecting the three-level trigger button, interactive feedback is performed to complete page interaction.
7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.
8. An electronic terminal, characterized in that: include: Processor and memory; The memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the terminal executes the method according to any one of claims 1 to 5.
Citation Information
Patent Citations
Menu display method and device
CN104166501A