Automatic Optimization Method and System for Visual Balance of Responsive Web Page Layout

Abstract

This invention belongs to the field of responsive web front-end development technology, and particularly to a method and system for automatically optimizing the visual center of gravity balance of responsive web page layouts. It includes a visual center of gravity calculation module, the output of which is connected to a layout strategy decision module. The output of the layout strategy decision module is connected to a dynamic style adjustment module, and the output of the dynamic style adjustment module is connected to a cross-device viewport simulation and verification module. Both the cross-device viewport simulation and verification module and the dynamic style adjustment module have their outputs connected to a user feedback learning module. The output of the user feedback learning module is connected to the inputs of the visual center of gravity calculation module and the layout strategy decision module, respectively. Through the collaborative operation and data feedback between these modules, this invention enables the automatic optimization method and system for the visual center of gravity balance of responsive web page layouts to quantify aesthetic principles and automatically achieve cross-device visual balance.

Description

Technical Field

[0001] This invention relates to the field of responsive web front-end development technology, specifically to a method and system for automatically optimizing the visual center of gravity balance of responsive web layout. Background Technology

[0002] With the rapid development of mobile internet and the diversification of terminal devices, responsive web design has become a core paradigm in modern front-end development. Its core concept is to enable web page layouts to adapt to different device viewport sizes, ensuring readability and accessibility of content on any screen. Existing responsive layout technologies, such as those using CSS media queries, fluid grids, flexible boxes, and grid systems, can effectively solve the problem of physical adaptation of page elements.

[0003] Existing technologies have the following shortcomings: In a fixed viewport, designers can manually adjust the size, position, color, and spacing of elements based on experience to achieve balance. However, in responsive scenarios, dynamic changes in the viewport can cause drastic and unpredictable changes in the relative positions, size ratios, and even visual weights of elements, thus disrupting the carefully constructed visual balance. Responsive web layout technology suffers from three main defects: lack of aesthetic quantification, fragmented system capabilities, and a disconnect between user experience and functionality. Existing methods rely excessively on mechanical adaptation based on geometric breakpoints, which can only ensure that the layout does not become disordered, but cannot automatically calculate and optimize the visual balance of the page. This leads to the design process heavily relying on the designer's subjective experience and manual adjustments. The entire process is static and open-loop, lacking the systematic capability to automatically predict, verify in real time, and continuously learn and optimize based on user feedback across multiple device viewports. This ultimately results in low development efficiency, and users experience a visually unbalanced and cluttered browsing experience on different devices, despite the layout being complete, failing to meet the dual demands of modern web pages for high-quality aesthetics and intelligent automation. Summary of the Invention

[0004] To address the shortcomings of existing technologies, this invention provides an automatic optimization method and system for visual center of gravity balance in responsive web page layouts, solving the existing problems of visual imbalance and focus dispersion.

[0005] To achieve the above objectives, the present invention provides the following technical solution: an automatic optimization method for visual center of gravity balance of responsive web page layout, the method comprising: a visual center of gravity calculation step: by analyzing the DOM structure and CSS styles of the web page to be optimized, calculating the visual center of gravity coordinates and balance quantification index of the web page; Layout strategy decision-making steps: Based on the visual center of gravity coordinates and balance quantification index, the target layout strategy is determined from multiple preset layout strategies; Dynamic style adjustment steps: Based on the target layout strategy, dynamically generate and apply the adjusted CSS styles to the webpage to achieve visual balance optimization; Cross-device viewport simulation and verification steps: Render and verify the visual center of gravity of the webpage after the dynamic style adjustment steps under multiple simulated device viewports. User feedback learning steps: Collect behavioral data generated by users during their interaction with the optimized webpage, and optimize and update the visual center of gravity calculation model and layout strategy decision model based on the behavioral data.

[0006] In some embodiments, the visual centroid calculation step specifically includes: Element weight analysis sub-step: Calculate the visual weight coefficient of each element based on its position, size, color contrast, and content type. Color density distribution sub-step: Analyze the global color distribution of the webpage and calculate the influence factors of different hue and brightness areas on the visual center of gravity; Spatial symmetry detection sub-step: Identify the potential symmetry axis of the webpage layout and calculate the balance of the webpage elements relative to the symmetry axis; Attention heatmap prediction sub-step: Based on the pre-trained visual attention model, generate a predictive attention heatmap of the webpage to help determine the visual focus area.

[0007] In some embodiments, the layout strategy decision step specifically includes: The multi-objective optimization engine is invoked, with visual center of gravity balance as the primary optimization objective and information hierarchy clarity and cross-device compatibility as constraints, to perform a comprehensive solution. Based on the degree of deviation of the aforementioned balance quantification index, layout adjustment rules that conform to aesthetic principles are matched from the strategy rule base, which includes, but is not limited to, the golden ratio rule and the rule of thirds rule; Based on the page type of the webpage, the corresponding layout optimization algorithm is invoked through the adaptive algorithm selector.

[0008] In some embodiments, the dynamic style adjustment step specifically includes: The CSS variable management unit dynamically calculates and updates the CSS custom attribute values ​​applied to the webpage. The flexible layout elements in the webpage are adjusted for smooth size transitions using an elastic scaling controller. Rendering performance is improved by optimizing the rearrangement order of DOM elements through a reordering priority scheduler.

[0009] In some embodiments, the cross-device viewport simulation and verification step specifically includes: Obtain the viewport parameters and interaction characteristics of the target test device from the viewport feature library; In a virtual environment, the optimized webpage is rendered in real time based on the viewport parameters, and the visual recalculation step is performed again to obtain the cross-device balance verification result. If the cross-device balance verification result does not reach the preset threshold, the layout strategy decision step is triggered to make a strategy re-decision.

[0010] In some embodiments, the user feedback learning step specifically includes: Implicit feedback collection sub-step: Collect user scrolling depth, dwell time, and click heatmap data on the webpage; Explicit feedback collection sub-step: Receive users' proactive ratings or preference settings regarding layout satisfaction; The incremental training sub-step involves using the implicit feedback data and explicit feedback data as training samples to perform incremental learning on the visual centroid calculation model in order to optimize its prediction accuracy.

[0011] Another technical problem to be solved by the present invention is to provide an automatic optimization system for visual center of gravity balance of responsive web page layout, the system comprising: a visual center of gravity calculation module, used to perform the visual center of gravity calculation step; The layout strategy decision module is communicatively connected to the visual center of gravity calculation module and is used to execute the layout strategy decision steps; The dynamic style adjustment module is communicatively connected to the layout strategy decision module and is used to execute the dynamic style adjustment steps; The cross-device viewport simulation and verification module is communicatively connected to the dynamic style adjustment module and is used to execute the cross-device viewport simulation and verification steps. The user feedback learning module is communicatively connected to the visual center of gravity calculation module and the layout strategy decision module, and is used to execute the user feedback learning steps.

[0012] In some embodiments, the visual centroid calculation module includes: The element weight analysis unit is configured to calculate the visual weight coefficients of DOM elements. Color density distribution unit, configured to analyze the distribution characteristics of hue, saturation, and brightness; A spatial symmetry detection unit is configured to detect the symmetry axis and equilibrium point of the layout; Attention heatmap generation unit, configured to generate visual focus prediction models based on eye movement patterns.

[0013] In some embodiments, the layout strategy decision module includes: A multi-objective optimization engine, configured to simultaneously optimize visual balance, information hierarchy, and responsiveness; The strategy rule base stores classic layout rules; Adaptive algorithm selector, configured to automatically select the optimal layout algorithm based on page type; The conflict resolution unit is configured to resolve policy conflicts in multi-objective optimization.

[0014] Compared with existing technologies, the present invention provides a method and system for automatically optimizing the visual center of gravity balance of responsive web page layouts, which has the following beneficial effects: The invention provides an automatic optimization method and system for the visual balance of responsive web page layouts. By introducing three core mechanisms—quantitative aesthetic evaluation, intelligent decision-making adjustment, and closed-loop learning optimization—it achieves a technological leap from "mechanical adaptation" to "intelligent optimization" in the field of responsive web design, demonstrating the following multi-dimensional beneficial effects: I. Quantitative Enhancement and Automated Implementation of Expressive Power Traditional responsive layout technology only focuses on basic geometric adaptation, while this invention, through a three-dimensional analysis system using a visual center of gravity calculation module, achieves the digital implementation of aesthetic principles. Specifically: The accuracy of visual center of gravity quantification has been significantly improved: the element weight analysis unit comprehensively calculates the position, size, color contrast, and content type of DOM elements, changing the limitation of traditional methods that rely solely on physical size; the color density distribution unit analyzes the global color distribution and quantifies the influence factors of different hues and brightness areas, solving the problem of underestimating the visual weight of bright color blocks; the spatial symmetry detection unit identifies potential symmetry axes and calculates balance, transforming the designer's intuitive experience into calculable indicators; the attention heatmap prediction sub-step, based on a pre-trained visual attention model, enables the system to predict the user's visual focus, achieving an upgrade from "looking balanced" to "being comfortable to use".

[0015] Scientific Aesthetic Decision-Making: The system encodes classic aesthetic rules such as the golden ratio and the rule of thirds into a database. Through a multi-objective optimization engine, it coordinates visual balance, information hierarchy, and device compatibility, seeking the optimal solution under complex constraints, thus solving the common problem of neglecting one aspect for another in manual adjustments.

[0016] II. Synergistic Optimization of System Efficiency and User Experience The complete technical loop constructed by this invention significantly improves the end-user experience while enhancing development efficiency. A revolutionary automation of the development process: The dynamic style adjustment module enables real-time updates of style properties through the CSS variable management unit, the elastic scaling controller ensures a smooth transition of layout adjustments, and the reordering priority scheduler optimizes rendering performance, compressing the manual adjustment process that originally required hours to minutes, significantly reducing the labor costs of high-quality web design.

[0017] Cross-device experience consistency guarantee: The cross-device viewport simulation and verification module obtains real device parameters from the viewport feature library and performs multi-environment pre-verification before release to ensure a balanced visual experience on various devices from desktop to mobile, solving the problem of "perfect desktop, unbalanced mobile" in traditional methods. Attached Figure Description

[0018] Figure 1 This is a schematic diagram of the visual center of gravity balance automatic optimization system of the present invention; Figure 2 This is a schematic diagram of the unit analysis included in the visual centroid calculation module of the present invention; Figure 3 This is a schematic diagram illustrating the unit analysis of the layout strategy decision module of the present invention; Figure 4 This is a schematic diagram of the units included in the dynamic style adjustment module of the present invention; Figure 5 This is a schematic diagram of the cross-device viewport simulation and verification module and its lower-level units of the present invention; Figure 6 This is a schematic diagram of the user feedback learning module and its extension units of the present invention. Detailed Implementation

[0019] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0020] In the description of this invention, it should be noted that the terms "upper," "lower," "inner," "outer," "front end," "rear end," "both ends," "one end," and "the other end," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing this invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this invention. Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0021] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "installed," "equipped with," "connected," etc., should be interpreted broadly. For example, "connection" can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium; it can be a connection within two components. Those skilled in the art can understand the specific meaning of the above terms in this invention based on the specific circumstances.

[0022] Please see Figure 1-6 In this implementation plan: a method and system for automatic optimization of visual center of gravity balance in responsive web page layout, the method includes: visual center of gravity calculation step: by analyzing the DOM structure and CSS style of the web page to be optimized, the visual center of gravity coordinates and balance quantification index of the web page are calculated; Layout strategy decision-making steps: Based on the visual center of gravity coordinates and balance quantification index, the target layout strategy is determined from multiple preset layout strategies; Dynamic style adjustment steps: Based on the target layout strategy, dynamically generate and apply the adjusted CSS styles to the webpage to achieve visual balance optimization; Cross-device viewport simulation and verification steps: Render and verify the visual center of gravity of the webpage after the dynamic style adjustment steps under multiple simulated device viewports. User feedback learning steps: Collect behavioral data generated by users during their interaction with the optimized webpage, and optimize and update the visual center of gravity calculation model and layout strategy decision model based on the behavioral data.

[0023] The system includes: a visual centroid calculation module, used to perform the visual centroid calculation steps; The layout strategy decision module is communicatively connected to the visual center of gravity calculation module and is used to execute the layout strategy decision steps; The dynamic style adjustment module is communicatively connected to the layout strategy decision module and is used to execute the dynamic style adjustment steps; The cross-device viewport simulation and verification module is communicatively connected to the dynamic style adjustment module and is used to execute the cross-device viewport simulation and verification steps. The user feedback learning module is communicatively connected to the visual center of gravity calculation module and the layout strategy decision module, and is used to execute the user feedback learning steps.

[0024] In this embodiment, the present invention provides an automatic optimization method for visual center of gravity balance in responsive web page layout. The method includes: Step S101: Visual center of gravity analysis and quantification. By parsing the Document Object Model (DOM) structure and Cascading Style Sheets (CSS) styles of the web page to be optimized, and comprehensively considering the geometric attributes, spatial positions, color contrasts, and content weights of page elements, the center of gravity coordinates representing the visual focus distribution of the entire web page are calculated, and a balance index is generated to quantify its balance state. Step S102: Adaptive layout strategy decision. Based on the visual center of gravity coordinates and balance index calculated in Step S101, and combined with preset multiple objectives regarding page aesthetics and information hierarchy, the system automatically determines the most suitable target layout strategy for the current page from a pre-built strategy library containing multiple layout optimization strategies. Step S103: Dynamic style application and rendering. According to the target layout strategy determined in Step S102, the system dynamically generates a set of adjusted CSS style rules and applies them to the web page through a programmatic interface, thereby adjusting the page layout in real time without changing the original HTML structure to achieve visual center of gravity balance optimization. Step S104: Multi-Scenario Compatibility Verification. To ensure continuous optimization effectiveness, the system will re-render the webpage optimized in Step S103 under various simulated device viewport environments and re-execute the visual center of gravity calculation step to verify the effect, ensuring that the optimization scheme has good cross-device adaptability. Step S105: Continuous Optimization and Model Evolution. The system will collect behavioral data generated when real users interact with the optimized webpage and feed this data back to the visual center of gravity analysis model and layout strategy decision model for iterative training and optimization, thereby enabling the system's automated decision-making capabilities to continuously evolve according to user preferences.

[0025] On the other hand, the present invention provides an automatic optimization system for visual center of gravity balance in responsive web page layout. The system includes: a visual center of gravity calculation module configured to execute the visual center of gravity analysis and quantification step (S101), responsible for extracting relevant features from the web page and completing the calculation; a layout strategy decision module, communicatively connected to the visual center of gravity calculation module, configured to execute the adaptive layout strategy decision step (S102), responsible for selecting the optimal strategy based on quantification indicators; a dynamic style adjustment module, communicatively connected to the layout strategy decision module, configured to execute the dynamic style application and rendering step (S103), responsible for converting the strategy into specific style adjustment instructions and making them effective; a cross-device viewport simulation and verification module, communicatively connected to the dynamic style adjustment module, configured to execute the multi-scene compatibility verification step (S104), responsible for verifying the optimization effect in a simulation environment; and a user feedback learning module, communicatively connected to both the visual center of gravity calculation module and the layout strategy decision module, configured to execute the continuous optimization and model evolution step (S105), responsible for using user data to drive system self-improvement.

[0026] Further technical details In a preferred embodiment, the various modules of the system can be implemented through software, hardware, or a combination of both. At the software implementation level, this solution can be developed as a standalone web service, a reusable JavaScript library, or integrated as a plugin into existing web development frameworks such as React and Vue, facilitating widespread deployment and application.

[0027] Regarding the visual center of gravity calculation module: The design focus of this module is on efficiency and comprehensiveness. To avoid complex calculations affecting the smoothness of page interaction, asynchronous calculation technology can be used. Its calculation process comprehensively considers multiple dimensions: Element influence assessment: Obtain page element size, position, and style information by accessing the browser's standard application programming interface (API). An element's overall influence is determined by its screen area, position relative to the viewport center, color and background contrast, and content type (e.g., title images and regular paragraphs are given different levels of importance).

[0028] Color distribution assessment: This involves sampling and analyzing web pages using graphics rendering techniques to extract color attributes (such as saturation and brightness) from different areas. Generally, areas with high color saturation or low brightness are more visually appealing and should be given higher weight in the center of gravity calculation.

[0029] Layout symmetry analysis: By analyzing the weight distribution of elements within the viewport, potential visual symmetry axes are detected, and the weight differences between the left and right or top and bottom regions are calculated, which serves as the core basis for balance.

[0030] Visual attention prediction: A pre-trained visual attention calculation model can be introduced, which can analyze page screenshots and predict the distribution of areas that users are most likely to focus on, thereby providing more accurate data support for center of gravity calculation.

[0031] Regarding the layout strategy decision-making module: This module is the core of intelligent decision-making and is preferably deployed on a server with strong computing power. Its core mechanism lies in: Employing an advanced multi-objective optimization algorithm, this algorithm simultaneously considers and optimizes multiple objectives, such as maximizing visual balance, preserving information hierarchy clarity, and adaptability across different screen sizes. The algorithm searches for and outputs a set of optimization strategies that achieve the best trade-off among these objectives.

[0032] It includes a built-in strategy rule library that encapsulates classic design principles and aesthetic rules (such as the golden ratio and grid alignment standards) to provide a theoretical basis for strategy generation.

[0033] It has adaptive strategy selection capabilities, and can dynamically adjust the focus of the optimization algorithm according to the type of webpage (e.g., whether it is a news portal, e-commerce website or data dashboard) to select the most suitable layout algorithm.

[0034] Regarding the dynamic style adjustment module: This module operates directly on the browser's rendering engine and is responsible for executing strategies. To achieve high-performance style manipulation, it utilizes the modern CSS object model interface provided by the browser to dynamically create, update, and manage CSS variables and style rules, thereby enabling precise and smooth adjustments to layout attributes such as page margins, spacing, and size.

[0035] Finally, it should be noted that the above descriptions are merely preferred embodiments of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for automatically optimizing the visual balance of responsive web page layouts, characterized in that, The method includes: a visual center of gravity calculation step: by analyzing the DOM structure and CSS styles of the webpage to be optimized, the visual center of gravity coordinates and balance quantification index of the webpage are calculated; Layout strategy decision-making steps: Based on the visual center of gravity coordinates and balance quantification index, the target layout strategy is determined from multiple preset layout strategies; Dynamic style adjustment steps: Based on the target layout strategy, dynamically generate and apply the adjusted CSS styles to the webpage to achieve visual balance optimization; Cross-device viewport simulation and verification steps: Render and verify the visual center of gravity of the webpage after the dynamic style adjustment steps under multiple simulated device viewports. User feedback learning steps: Collect behavioral data generated by users during their interaction with the optimized webpage, and optimize and update the visual center of gravity calculation model and layout strategy decision model based on the behavioral data.

2. The automatic optimization method for visual center of gravity balance in responsive web page layout according to claim 1, characterized in that: The visual centroid calculation steps specifically include: Element weight analysis sub-step: Calculate the visual weight coefficient of each element based on its position, size, color contrast, and content type. Color density distribution sub-step: Analyze the global color distribution of the webpage and calculate the influence factors of different hue and brightness areas on the visual center of gravity; Spatial symmetry detection sub-step: Identify the potential symmetry axis of the webpage layout and calculate the balance of the webpage elements relative to the symmetry axis; Attention heatmap prediction sub-step: Based on the pre-trained visual attention model, generate a predictive attention heatmap of the webpage to help determine the visual focus area.

3. The automatic optimization method and system for visual center of gravity balance in responsive web page layout according to claim 1, characterized in that: The specific steps for making the layout strategy decision include: The multi-objective optimization engine is invoked, with visual center of gravity balance as the primary optimization objective and information hierarchy clarity and cross-device compatibility as constraints, to perform a comprehensive solution. Based on the degree of deviation of the aforementioned balance quantification index, layout adjustment rules that conform to aesthetic principles are matched from the strategy rule base, which includes, but is not limited to, the golden ratio rule and the rule of thirds rule; Based on the page type of the webpage, the corresponding layout optimization algorithm is invoked through the adaptive algorithm selector.

4. The automatic optimization method and system for visual center of gravity balance in responsive web page layout according to claim 1, characterized in that: The dynamic style adjustment steps specifically include: The CSS variable management unit dynamically calculates and updates the CSS custom attribute values ​​applied to the webpage. The flexible layout elements in the webpage are adjusted for smooth size transitions using an elastic scaling controller. Rendering performance is improved by optimizing the rearrangement order of DOM elements through a reordering priority scheduler.

5. The automatic optimization method and system for visual center of gravity balance of responsive web page layout according to claim 1, characterized in that: The cross-device viewport simulation and verification steps specifically include: Obtain the viewport parameters and interaction characteristics of the target test device from the viewport feature library; In a virtual environment, the optimized webpage is rendered in real time based on the viewport parameters, and the visual recalculation step is performed again to obtain the cross-device balance verification result. If the cross-device balance verification result does not reach the preset threshold, the layout strategy decision step is triggered to make a strategy re-decision.

6. The automatic optimization method and system for visual center of gravity balance in responsive web page layout according to claim 1, characterized in that: The user feedback learning steps specifically include: Implicit feedback collection sub-step: Collect user scrolling depth, dwell time, and click heatmap data on the webpage; Explicit feedback collection sub-step: Receive users' proactive ratings or preference settings regarding layout satisfaction; The incremental training sub-step involves using the implicit feedback data and explicit feedback data as training samples to perform incremental learning on the visual centroid calculation model in order to optimize its prediction accuracy.

7. A visual center-of-gravity balance automatic optimization system for implementing the responsive web page layout according to any one of claims 1 to 6, characterized in that, The system includes: The visual center of gravity calculation module is used to perform the visual center of gravity calculation step; The layout strategy decision module is communicatively connected to the visual center of gravity calculation module and is used to execute the layout strategy decision steps; The dynamic style adjustment module is communicatively connected to the layout strategy decision module and is used to execute the dynamic style adjustment steps; The cross-device viewport simulation and verification module is communicatively connected to the dynamic style adjustment module and is used to execute the cross-device viewport simulation and verification steps. The user feedback learning module is communicatively connected to the visual center of gravity calculation module and the layout strategy decision module, and is used to execute the user feedback learning steps.

8. The system according to claim 7, characterized in that, The visual centroid calculation module includes: The element weight analysis unit is configured to calculate the visual weight coefficients of DOM elements. Color density distribution unit, configured to analyze the distribution characteristics of hue, saturation, and brightness; A spatial symmetry detection unit is configured to detect the symmetry axis and equilibrium point of the layout; Attention heatmap generation unit, configured to generate visual focus prediction models based on eye movement patterns.

9. The system according to claim 7, characterized in that, The layout strategy decision module includes: A multi-objective optimization engine, configured to simultaneously optimize visual balance, information hierarchy, and responsiveness; The strategy rule base stores classic layout rules; Adaptive algorithm selector, configured to automatically select the optimal layout algorithm based on page type; The conflict resolution unit is configured to resolve policy conflicts in multi-objective optimization.

Images