Construction method of data display page

Abstract

The invention relates to a method for constructing a data display page, which comprises the following steps of: in response to a received page creation request, executing the following layout optimization process: analyzing the proportion of a data display area in a page, and analyzing the proportion of an auxiliary function area in the page; setting priorities of the data display area and the auxiliary function area according to a weight strategy; adjusting the proportion of the data display area and the auxiliary function area in the page according to the priority; and monitoring page size change, and dynamically updating the data display area and the auxiliary function area in the page. According to the method, the search term layout of the data display page is optimized, the user experience is remarkably improved, interference is reduced, data readability is improved, and operation is more convenient; the page response is quick, the loading speed is high, and the overall performance is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for constructing a data display page. Background Art

[0002] In existing software development projects, auxiliary functions on the data display page, such as search items and buttons, need to be carefully considered during layout to balance the space allocation between data display and auxiliary functions, so as to ensure the smoothness of the user experience and the efficiency of data access.

[0003] The core purpose of the data display page is to enable users to clearly view and understand the data, so the presentation of data should occupy the main visual area of ​​the page. Auxiliary functions such as search items, filter buttons, and export buttons are essential to improving user operation efficiency, but these functions should not occupy too much page space to avoid interfering with users' direct viewing of data.

[0004] With the increase in page data volume and the complexity of functions, how to reasonably layout the data display area and auxiliary function area within a limited space has become an urgent problem to be solved.

[0005] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention

[0006] In view of the defects existing in the prior art, the purpose of the present invention is to provide a method for constructing a data display page, optimize the search item layout of the data display page, and significantly improve the user experience: reduce interference, improve data readability, and make operation more convenient; the page responds quickly, loads quickly, and improves overall performance.

[0007] In order to achieve the above purpose, the technical solution adopted by the present invention is:

[0008] A method for constructing a data display page, characterized in that it includes the following steps:

[0009] In response to the received page creation request, the layout optimization process described below is performed:

[0010] The proportion of the data display area in the parsing page, the proportion of the auxiliary function area in the parsing page;

[0011] According to the weight strategy, set the priority of the data display area and auxiliary function area;

[0012] Adjust the proportion of the data display area and auxiliary function area on the page according to the priority;

[0013] Monitor page size changes and dynamically update the data display area and auxiliary function area on the page.

[0014] Based on the above technical solution, the data display area includes:

[0015] Content block, used to display text information, picture information or video information;

[0016] Lists or tables, used to display data lists and statistical tables;

[0017] Charts or graphs, used to display visual bar charts, pie charts, and line charts;

[0018] Data summary, used to display summary information of data;

[0019] Detailed information, which is used to display the extended content of the data;

[0020] Search results, used to display search results;

[0021] The auxiliary function areas include:

[0022] Navigation bar, used to help users jump between different page sections;

[0023] Search box, used to assist users in entering keywords to search for corresponding content;

[0024] Toolbar, used to provide auxiliary operation buttons or drop-down menus;

[0025] Prompt information is used to assist in presenting help information, user information or advertising information.

[0026] Based on the above technical solution, the weight strategy analyzes and balances the weight distribution coefficients from the following aspects:

[0027] User needs: Based on user surveys and data analysis, we understand the degree of user demand for each area of ​​the page and assign corresponding weight distribution coefficients to different areas;

[0028] Task flow: Analyze the user's operation flow on the page, determine the role of data display and auxiliary functions in the task completion process, and increase the corresponding weight allocation coefficient for areas that directly affect task completion;

[0029] The visible page range considers the overall layout space and available resources of the page, and reasonably allocates the weight distribution coefficients of the data display area and the auxiliary function area. On the premise of ensuring clear display of data, a higher weight distribution coefficient should be provided for the auxiliary function area as much as possible.

[0030] On the basis of the above technical solution, a priority threshold is set. When the priority of the auxiliary function area is lower than the priority threshold, the height parameter of the auxiliary function area is dynamically bound, and a collapse / expand button is set. The dynamic binding includes:

[0031] When the auxiliary function area is initialized, its height parameter is set to the lower limit and is in the folded state. The specific interactive operation is determined by binding events and variable monitoring. The height parameter of the auxiliary function area is dynamically adjusted to one of the following states according to the interactive operation:

[0032] In the semi-expanded state, the height parameter value is half of the upper limit;

[0033] In the scrolling presentation state, the height parameter value is one-third or one-quarter of the upper limit, and a scroll bar is presented;

[0034] In the expanded state, the height parameter value is the upper limit;

[0035] In the suspended state, the height parameter value is the upper limit, and the auxiliary function area is displayed in the suspended window.

[0036] Based on the above technical solution, the default lower limit is the height occupied by a row.

[0037] Based on the above technical solution, when the height parameter takes an empty value, any interactive operation is triggered in the auxiliary function area, and the auxiliary function area is automatically set to the expanded state to display all auxiliary functions. After no operation reaches a preset time limit, the auxiliary function area is automatically set to the collapsed state.

[0038] On the basis of the above technical solution, when the height parameter value is less than the lower limit due to the interactive operation, the hiding operation is triggered to hide the auxiliary function area. When the service is reinitialized, the hiding of the auxiliary function area is automatically canceled.

[0039] Based on the above technical solutions, the page layout and element display status are controlled through CSS styles to ensure good user experience and visual effects on different devices and screen sizes.

[0040] On the basis of the above technical solution, when presenting the auxiliary function area, the priority levels are preset for the interactive elements therein, and the interactive elements with high priority levels are fully presented in the auxiliary function area first.

[0041] Based on the above technical solution, the high-priority interactive element at least includes a search box; the search box includes at least one recommended search phrase.

[0042] The method for constructing a data display page of the present invention optimizes the layout of search items on the data display page, significantly improving the user experience: reducing interference, improving data readability, and making operations more convenient; the page responds quickly, loads quickly, and improves overall performance; and has the following beneficial effects:

[0043] 1. Place auxiliary functions such as secondary search items and buttons in secondary positions or use folding / expanding mechanisms to reduce their interference with the main data display area, allowing users to focus more on viewing and analyzing data;

[0044] 2. Reasonable layout design makes the page information hierarchy clearer. By reducing the space occupied by auxiliary functions on the page, the data display area is more prominent, which improves the readability and comprehensibility of the data, and users can understand the page structure and data relationship more quickly;

[0045] 3. Use dynamic height binding and responsive layout technology to quickly adjust the layout when the page size changes, maintaining the responsiveness and usability of page elements; reduce the amount of page elements loaded, especially hiding unnecessary search items and buttons during initial loading, which can increase the page loading speed and reduce user waiting time

[0046] These optimization measures enhance the flexibility and practicality of the page, allowing users to view data more efficiently, while also providing developers with a more flexible development space. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] The present invention has the following accompanying drawings:

[0048] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation of the present invention.

[0049] Figure 1 A flowchart of a first embodiment of a method for constructing a data display page according to the present invention. DETAILED DESCRIPTION

[0050] The present invention is further described in detail below in conjunction with the accompanying drawings. The detailed description is an explanation made in conjunction with the exemplary embodiments of the present invention, including various details of the embodiments of the present invention to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those skilled in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0051] like Figure 1 As shown, a method for constructing a data display page according to the present invention comprises the following steps:

[0052] In response to the received page creation request, the layout optimization process described below is performed:

[0053] The proportion of the data display area in the parsing page, the proportion of the auxiliary function area in the parsing page;

[0054] According to the weight strategy, set the priority of the data display area and auxiliary function area;

[0055] Adjust the proportion of the data display area and auxiliary function area on the page according to the priority;

[0056] Monitor page size changes and dynamically update the data display area and auxiliary function area on the page.

[0057] In this embodiment, by monitoring the changes in page size and dynamically updating the data display area and the auxiliary function area, it is possible to ensure that the page maintains a good layout and readability on different devices (such as mobile phones, tablets, and desktop computers) and in different window sizes; by setting the priorities of different areas according to the weight strategy, the importance and display space of information can be flexibly adjusted according to user needs and page purposes. For example, in data-intensive applications, the data display area may be given a higher priority to ensure that users can quickly obtain key information; by dynamically adjusting the ratio of the data display area and the auxiliary function area, the page space can be used more effectively to avoid space waste; dividing the page into a data display area and an auxiliary function area and using a weight strategy for priority setting helps to achieve modular design of the page, which can reduce the complexity of page development and improve the readability and maintainability of the code.

[0058] The construction method described in this embodiment does not depend on a specific data type or display form, and therefore can be applied to a variety of application scenarios. Whether it is a data analysis report, a real-time monitoring page or an information display platform, specific needs can be met by adjusting the weight strategy and the ratio of the data display area.

[0059] Based on the above technical solution, the data display area includes:

[0060] Content block, used to display text information, picture information or video information;

[0061] Lists or tables, used to display data lists and statistical tables;

[0062] Charts or graphs, used to display visual bar charts, pie charts, and line charts;

[0063] Data summary, used to display summary information of data;

[0064] Detailed information, which is used to display the extended content of the data;

[0065] Search results, used to display search results;

[0066] The auxiliary function areas include:

[0067] Navigation bar, used to help users jump between different page sections;

[0068] Search box, used to assist users in entering keywords to search for corresponding content;

[0069] Toolbar, used to provide auxiliary operation buttons or drop-down menus;

[0070] Prompt information is used to assist in presenting help information, user information or advertising information.

[0071] Based on the above technical solution, the weight strategy analyzes and balances the weight distribution coefficients from the following aspects:

[0072] User needs: Based on user surveys and data analysis, we understand the degree of user needs for each area of ​​the page and assign corresponding weight allocation coefficients to different areas. Based on user orientation, through user surveys and data analysis, we deeply understand the degree of user needs for each area of ​​the page and assign weight allocation coefficients accordingly. This user-centric design approach can ensure that the page layout and function settings are closer to the actual needs and expectations of users, thereby improving user satisfaction and loyalty.

[0073] Task flow: Analyze the user's operation flow on the page, determine the role of data display and auxiliary functions in the task completion process, and increase the corresponding weight allocation coefficient for the areas that directly affect the task completion; Based on the process orientation, analyze the user's operation flow on the page, determine the role of data display and auxiliary functions in the task completion process, and adjust the weight allocation coefficient accordingly. By increasing the weight of the areas that directly affect the task completion, users can be guided to complete tasks more efficiently and reduce unnecessary operations and time waste;

[0074] Within the visible page range, consider the overall layout space and available resources of the page, and reasonably allocate the weight allocation coefficients of the data display area and the auxiliary function area. On the premise of ensuring clear display of data, provide a higher weight allocation coefficient for the auxiliary function area as much as possible; Within the visible page range, consider the overall layout space and available resources of the page, and reasonably allocate the weight allocation coefficients of the data display area and the auxiliary function area. On the premise of ensuring clear display of data, provide a higher weight allocation coefficient for the auxiliary function area as much as possible, thereby enriching the functionality and interactivity of the page.

[0075] In this embodiment, the formulation of the weight strategy is no longer static, but is dynamically adjusted according to changes in user needs, task flow, and visible page range. This flexibility enables the page to better adapt to different application scenarios and user groups, improving the versatility and scalability of the page. The weight allocation coefficient is analyzed and balanced from the three aspects of user needs, task flow, and visible page range, further improving the accuracy, efficiency, flexibility, and scientificity of the data display page construction method.

[0076] On the basis of the above technical solution, a priority threshold is set. When the priority of the auxiliary function area is lower than the priority threshold, the height parameter of the auxiliary function area is dynamically bound, and a collapse / expand button is set. The dynamic binding includes:

[0077] When the auxiliary function area is initialized, its height parameter is set to the lower limit, and it is in the collapsed state. The specific interactive operation is determined by binding events and variable monitoring. According to the interactive operation, the height parameter of the auxiliary function area is dynamically adjusted to one of the following states: the default lower limit is the height occupied by a line;

[0078] In the semi-expanded state, the height parameter value is half of the upper limit;

[0079] In the scrolling presentation state, the height parameter value is one-third or one-quarter of the upper limit, and a scroll bar is presented;

[0080] In the expanded state, the height parameter value is the upper limit;

[0081] In the suspended state, the height parameter value is the upper limit, and the auxiliary function area is displayed in the suspended window.

[0082] This embodiment further enriches the interactivity and user experience of the page by setting a priority threshold and dynamically binding the height parameter of the auxiliary function area, and setting a collapse / expand button; this is mainly reflected in the following aspects:

[0083] 1. Improve page interactivity

[0084] By dynamically binding the height parameters of the auxiliary function area and adjusting the height according to the user's interactive operations (such as clicking the collapse / expand button), the page can be flexibly changed according to the user's needs and preferences. This dynamic adjustment mechanism enhances the interactivity and fun of the page, and improves user participation and satisfaction.

[0085] 2. Optimize page layout

[0086] When the priority of the auxiliary function area is lower than the priority threshold, it is initialized to the collapsed state and a smaller lower limit height (such as the height of a row) is set. This design can save page space and prevent the auxiliary function area from occupying too much space and affecting the display effect of the data display area. At the same time, users can choose to expand the auxiliary function area as needed to optimize space utilization.

[0087] 3. Enhance user experience

[0088] This embodiment provides multiple height parameter adjustment modes such as semi-expanded state, scrolling presentation state, expanded state and suspended state, and users can choose the most suitable display mode according to their needs. This diversified display mode enhances the readability and usability of the page and improves the user's reading experience and satisfaction.

[0089] 4. Improve page performance

[0090] When the auxiliary function area is in the collapsed state, the page loading burden and rendering time can be reduced. When the user needs to view the auxiliary function area, the relevant content is loaded as needed. This on-demand loading mechanism helps improve the performance and responsiveness of the page.

[0091] 5.Support multiple application scenarios

[0092] By dynamically binding height parameters and setting multiple state switching methods, this technical solution can be applied to a variety of application scenarios. Whether it is a data analysis report, a real-time monitoring page or an information display platform, it can be personalized and adjusted according to specific needs.

[0093] 6. Improve the professionalism and innovation of page design

[0094] By introducing the design idea of ​​dynamically binding height parameters and switching between multiple states, this technical solution demonstrates the professionalism and innovation of page design. This design not only improves the aesthetics and practicality of the page, but also enhances its competitiveness and attractiveness.

[0095] Based on the above technical solution, when the height parameter takes an empty value, any interactive operation is triggered in the auxiliary function area, and the auxiliary function area is automatically set to the expanded state to display all auxiliary functions. After no operation reaches a preset time limit, the auxiliary function area is automatically set to the collapsed state.

[0096] On the basis of the above technical solution, when the height parameter value is less than the lower limit due to the interactive operation, the hiding operation is triggered to hide the auxiliary function area. When the service is reinitialized, the hiding of the auxiliary function area is automatically canceled.

[0097] This embodiment introduces a hiding operation mechanism, that is, when the interactive operation causes the height parameter value to be less than the lower limit, the auxiliary function area is hidden, and it is automatically unhidden after the service is reinitialized. When the height parameter value is abnormal (less than the lower limit), hiding the auxiliary function area can avoid confusion or errors in the page layout, thereby maintaining the consistency and stability of the user experience. Through the hiding and automatic unhiding operations, users can control the display status of the auxiliary function area more flexibly. When the user no longer needs the auxiliary function area, he can choose to hide it; and when it needs to be used again, the service can automatically restore the display after reinitialization without the user having to perform additional operations.

[0098] Based on the above technical solutions, the page layout and element display status are controlled through CSS styles to ensure good user experience and visual effects on different devices and screen sizes.

[0099] On the basis of the above technical solution, when presenting the auxiliary function area, the priority levels are preset for the interactive elements therein, and the interactive elements with high priority levels are fully presented in the auxiliary function area first.

[0100] Exemplarily, the high-priority interactive element includes at least a search box; the search box includes at least one recommended search phrase.

[0101] This embodiment gives priority to displaying high-priority interactive elements, such as a search box, so that users can find and use these functions more quickly, thereby reducing the time cost of searching and clicking; placing high-priority interactive elements in a prominent position in the auxiliary function area can highlight the importance and practicality of these functions, thereby improving page usage efficiency and user satisfaction; by setting priorities for interactive elements and designing the layout accordingly, a clear visual hierarchy can be formed, making the page look more tidy, orderly, and beautiful, thereby improving the user's visual experience and the overall quality of the page.

[0102] The contents not described in detail in this specification belong to the prior art known to professional and technical personnel in this field.

[0103] The above description is only a preferred embodiment of the present invention, and the protection scope of the present invention is not limited to the above embodiment. Any equivalent modifications or changes made by those skilled in the art based on the contents disclosed by the present invention should be included in the protection scope recorded in the claims.

Claims

1. A method for constructing a data display page, characterized in that: The following steps are involved: In response to the received page creation request, the layout optimization process described below is performed: The proportion of the data display area in the parsing page, the proportion of the auxiliary function area in the parsing page; According to the weight strategy, set the priority of the data display area and auxiliary function area; Adjust the proportion of the data display area and auxiliary function area on the page according to the priority; Monitor page size changes and dynamically update the data display area and auxiliary function area on the page.

2. A method for constructing a data display page according to claim 1, characterized in that: The data display area includes: Content block, used to display text information, picture information or video information; Lists or tables, used to display data lists and statistical tables; Charts or graphs, used to display visual bar charts, pie charts, and line charts; Data summary, used to display summary information of data; Detailed information, which is used to display the extended content of the data; Search results, used to display search results; The auxiliary function areas include: Navigation bar, used to help users jump between different page sections; Search box, used to assist users in entering keywords to search for corresponding content; Toolbar, used to provide auxiliary operation buttons or drop-down menus; Prompt information is used to assist in presenting help information, user information or advertising information.

3. A method for constructing a data display page according to claim 1, characterized in that: The weight strategy analyzes and balances the weight distribution coefficients from the following aspects: User needs: Based on user surveys and data analysis, we understand the degree of user demand for each area of ​​the page and assign corresponding weight distribution coefficients to different areas; Task flow: Analyze the user's operation flow on the page, determine the role of data display and auxiliary functions in the task completion process, and increase the corresponding weight allocation coefficient for areas that directly affect task completion; The visible page range considers the overall layout space and available resources of the page, and reasonably allocates the weight distribution coefficients of the data display area and the auxiliary function area. On the premise of ensuring clear display of data, a higher weight distribution coefficient should be provided for the auxiliary function area as much as possible.

4. A method for constructing a data display page according to claim 1, characterized in that: A priority threshold is set. When the priority of the auxiliary function area is lower than the priority threshold, the height parameter of the auxiliary function area is dynamically bound, and a collapse / expand button is set. The dynamic binding includes: When the auxiliary function area is initialized, its height parameter is set to the lower limit and is in the folded state. The specific interactive operation is determined by binding events and variable monitoring. The height parameter of the auxiliary function area is dynamically adjusted to one of the following states according to the interactive operation: In the semi-expanded state, the height parameter value is half of the upper limit; In the scrolling presentation state, the height parameter value is one-third or one-quarter of the upper limit, and a scroll bar is presented; In the expanded state, the height parameter value is the upper limit; In the suspended state, the height parameter value is the upper limit, and the auxiliary function area is displayed in the suspended window.

5. A method for constructing a data display page according to claim 4, characterized in that: The default lower limit is the height of a row.

6. A method for constructing a data display page according to claim 4, characterized in that: When the height parameter takes a null value, any interactive operation is triggered in the auxiliary function area, and the auxiliary function area is automatically set to the expanded state to display all auxiliary functions. After no operation reaches the preset time limit, the auxiliary function area is automatically set to the collapsed state.

7. A method for constructing a data display page according to claim 4, characterized in that: When the height parameter value is less than the lower limit due to interactive operations, the hiding operation is triggered to hide the auxiliary function area. When the service is reinitialized, the hiding of the auxiliary function area is automatically canceled.

8. A method for constructing a data display page according to claim 1, characterized in that: Use CSS styles to control page layout and element display status to ensure good user experience and visual effects on different devices and screen sizes.

9. A method for constructing a data display page according to claim 1, characterized in that: When presenting the auxiliary function area, preset priorities for the interactive elements therein, and give priority to fully presenting high-priority interactive elements in the auxiliary function area.

10. A method for constructing a data display page according to claim 9, characterized in that: The high-priority interactive element at least includes a search box; the search box includes at least one recommended search phrase.

Images