Browser interface self-adaptive adjustment system and method

Abstract

The invention relates to the technical field of interface layout display, in particular to a browser interface self-adaptive adjustment system and method.The browser interface self-adaptive adjustment method comprises the steps that according to page requirements, components are selected and reused from a modular component library; constructing a page layout by utilizing the response type grid module, and setting breakpoints and style rules; selecting required interaction elements in an interaction component library, and adjusting an interaction mode according to the equipment type; and carrying out layout and interaction effect verification and performance monitoring. A response type grid module is used for constructing page layout, it is ensured that a webpage can be well displayed on devices with different sizes and resolutions, the layout is automatically adjusted by setting proper breakpoints and style rules to adapt to the screen sizes of the different devices, and therefore the cross-device compatibility is improved, needed interaction elements are selected from an interaction component library, and the interaction efficiency is improved. Therefore, normal work on different devices and browsers can be ensured, the interaction mode is adjusted according to the device type, and the user experience and compatibility are further improved.

Description

Technical Field

[0001] The present invention relates to the technical field of interface layout display, and in particular to a browser interface adaptive adjustment system and method. Background Art

[0002] With the rapid development of Internet technology, online videos have become an important and irreplaceable way for people to learn, socialize, and entertain. Users can access the on-demand page of a video website through a browser on a terminal. Usually, a large number of video resources on the on-demand page are displayed in the form of video thumbnails with representative video screenshots. However, the screen resolutions of the terminals used by users to access the website vary. When the terminal screen is fixed, the higher the resolution, the higher the display accuracy. A high-resolution screen can display more content, and the corresponding display effect is a reduction in the size of the displayed content, resulting in dense display of video thumbnails on the page, causing viewing discomfort and seriously affecting the user's browsing experience.

[0003] Existing announcement number CN103970894B discloses a method and system for adaptively adjusting the interface flow layout display, the method includes: detecting the resolution value of the terminal system running the browser; according to the resolution value, constructing the cells with pre-set pixel values ​​in the page into a grid arranged vertically and covering the entire page; reading the total pixel value in the horizontal direction of the grid, and adjusting the size of the video thumbnail and the video classification label in combination with the correspondence between the preset reference display column number of the video thumbnail and the total pixel value in the horizontal direction of the grid; arranging the adjusted video classification labels and video thumbnails in a horizontal manner on the grid to form multiple horizontally parallel video classification rows for display. The problem of the scattered layout of the video thumbnails in the page and the reduction of the size of the video thumbnails at a higher resolution is solved.

[0004] However, although the above method solves the layout problem under different resolutions, it may still encounter compatibility issues with some special devices or browsers. These devices or browsers may not fully support the technology or API required for dynamic adjustment of layout, and the above method and system for adaptive adjustment of interface streaming layout display are not highly compatible. Summary of the invention

[0005] The purpose of the present invention is to provide a browser interface adaptive adjustment system and method, which solves the problem of poor compatibility of existing adaptive adjustment interface flow layout display methods and systems.

[0006] To achieve the above object, the present invention provides a method for adaptively adjusting a browser interface, comprising the following steps:

[0007] Select and reuse components from the modular component library based on page requirements;

[0008] Use responsive grid modules to build page layouts and set breakpoints and style rules;

[0009] Select the required interactive elements in the interactive component library and adjust the interaction method according to the device type;

[0010] Verify layout and interaction effects and monitor performance.

[0011] Wherein, according to the page requirements, components are selected and reused from the modular component library, and the steps further include:

[0012] According to the page requirements, list all required component types;

[0013] Filter out components that meet the page requirements from the component library;

[0014] According to the project configuration, use the package management tool to install the selected component library;

[0015] In the page or component file where the component needs to be used, import the required component.

[0016] Wherein, the page layout is constructed using a responsive grid module, and breakpoints and style rules are set. The steps also include:

[0017] Use CSS layout techniques to build responsive grids;

[0018] Use relative units such as percentages, viewport units, rem, etc. to set the width, height, and margins of elements for fluid layout;

[0019] According to the design draft and the screen size of the target device, determine the screen sizes under which the layout and style need to be adjusted;

[0020] Use media queries in CSS to set different breakpoints;

[0021] In each media query block, adjust the grid layout, element dimensions, font size and styles based on the target screen size.

[0022] The step of selecting the required interactive elements from the interactive component library and adjusting the interactive mode according to the device type further includes:

[0023] Identify interaction points that require special attention on different device types;

[0024] Adjust page layout according to device screen size and resolution;

[0025] Leverage device-specific features to enhance the interactive experience.

[0026] The steps of verifying the layout and interaction effects and monitoring performance also include:

[0027] Verify whether the arrangement of elements on the page is reasonable and whether the spacing between elements is consistent;

[0028] Test the page display effect on devices with different resolutions to ensure that the page can be displayed normally on different devices;

[0029] Check the color matching, font style, size, color and icon style of page elements to ensure they meet the design requirements;

[0030] Test that all interactive elements function properly.

[0031] Among them, the verification and performance monitoring of row layout and interaction effects, the steps also include:

[0032] Use performance monitoring tools to test page loading speed;

[0033] Monitor the usage of CPU, memory, and network resources;

[0034] Set up error and exception monitoring mechanisms to capture and handle application errors and exceptions in a timely manner;

[0035] Evaluate user experience through user behavior analysis.

[0036] A browser interface adaptive adjustment system, characterized in that:

[0037] It includes a modular component library, a responsive grid module, a media query manager and a test monitoring module. The responsive grid module is connected to the modular component library, the media query manager is respectively connected to the modular component library and the responsive grid module, and the test monitoring module is respectively connected to the modular component library and the responsive grid module.

[0038] The modular component library is used to store reusable page components, each of which is designed to be independent and support adaptive layout requirements;

[0039] The responsive grid module builds a grid system that supports dynamic column counts and proportional column width adjustments to accommodate different screen sizes and orientations.

[0040] The media query manager is used to manage and optimize CSS media queries to ensure that all important breakpoints are covered in an orderly and manageable manner, and to achieve style application for different screen sizes and characteristics;

[0041] The test monitoring module is used to write automated test scripts to verify the layout and interaction effects under different screen sizes and browsers, and to use performance monitoring tools to track page loading time and rendering performance.

[0042] A browser interface adaptive adjustment system and method of the present invention utilizes a responsive grid module to construct a page layout, which can ensure that a web page can be well displayed on devices of different sizes and resolutions. By setting appropriate breakpoints and style rules, the layout can be automatically adjusted to adapt to the screen sizes of different devices, thereby improving cross-device compatibility. When selecting the required interactive elements in the interactive component library, these elements are usually carefully designed to ensure that they can work properly on different devices and browsers. In addition, adjusting the interaction mode according to the device type, such as different interaction modes between a touch screen and a mouse device, can further improve user experience and compatibility. When using a test monitoring module to verify the layout and interaction effects, multiple devices and browser environments can be simulated for testing, which helps to discover potential compatibility issues and repair them in a timely manner, thereby improving the overall compatibility of the system. Performance monitoring not only focuses on loading speed and response time, but also on the performance of the system on different devices and browsers. By monitoring and optimizing performance, it can be ensured that the system can run stably in various environments and improve compatibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art are briefly introduced below.

[0044] Figure 1 It is a flowchart of the steps of the browser interface adaptive adjustment method according to the first embodiment of the present invention.

[0045] Figure 2 It is a flowchart of the steps of selecting and reusing components from a modular component library according to page requirements in the first embodiment of the present invention.

[0046] Figure 3 It is a flowchart of the steps of building a page layout using a responsive grid module and setting breakpoints and style rules according to the first embodiment of the present invention.

[0047] Figure 4 This is a flowchart of the steps of selecting required interactive elements from an interactive component library and adjusting the interactive mode according to the device type according to the first embodiment of the present invention.

[0048] Figure 5 It is a flow chart of the steps of verifying the layout and interaction effects and monitoring the performance of the first embodiment of the present invention.

[0049] Figure 6 It is a structural block diagram of a browser interface adaptive adjustment system according to a second embodiment of the present invention.

[0050] In the figure: 201-modular component library, 202-responsive grid module, 203-media query manager, 204-test monitoring module. DETAILED DESCRIPTION

[0051] Embodiments of the present invention are described in detail below. Examples of the embodiments are shown in the accompanying drawings. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, but should not be construed as limiting the present invention.

[0052] The first embodiment of the present application is:

[0053] See also Figures 1 to 5 ,in, Figure 1 It is a flowchart of the steps of the browser interface adaptive adjustment method according to the first embodiment of the present invention. Figure 2 It is a flowchart of the steps of selecting and reusing components from the modular component library 201 according to page requirements in the first embodiment of the present invention. Figure 3 It is a flowchart of the steps of using the responsive grid module 202 to construct a page layout and set breakpoints and style rules according to the first embodiment of the present invention. Figure 4 This is a flowchart of the steps of selecting required interactive elements from an interactive component library and adjusting the interactive mode according to the device type according to the first embodiment of the present invention. Figure 5 The present invention provides a method for adaptively adjusting a browser interface, which includes the following steps:

[0054] S101: Select and reuse components from the modular component library 201 according to page requirements;

[0055] S1011: List all required component types according to page requirements;

[0056] S1012: Filter out components that meet the page requirements from the component library;

[0057] S1013: Use the package management tool to install the selected component library according to the project configuration;

[0058] S1014: In the page or component file where the component is needed, introduce the required component.

[0059] Specifically, select a suitable component library based on the project technology stack and team habits; filter out components that meet the page requirements from the component library, ensure that these components can meet the functional requirements of the page, check whether the component style conforms to the overall design style of the page, including color, font, spacing, etc., evaluate the customizability of the component, and ensure that the component style or behavior can be adjusted to meet special needs when necessary; according to the project configuration, use package management tools such as npm or yarn to install the selected component library, and introduce the required components in the pages or component files where the components are needed. This is done through import statements. If the component library is not globally registered, register the required components in the script part of the page or component; in the template part of the page, write the component code according to the usage provided by the component library; configure corresponding properties for the component as needed to achieve specific functions or styles. If the component is triggered by an event, add an event handling function in the script part of the page or component.

[0060] S102: Use the responsive grid module 202 to build a page layout and set breakpoints and style rules;

[0061] S1021: Use CSS layout techniques to build responsive grids;

[0062] S1022: Use relative units such as percentage, viewport unit, rem, etc. to set the width, height, and margin of elements for flow layout;

[0063] S1023: Determine, based on the design draft and the screen size of the target device, the screen sizes under which layout and style adjustments need to be made;

[0064] S1024: Use media queries in CSS to set different breakpoints;

[0065] S1025: In each media query block, adjust the grid layout, element size, and font size style according to the target screen size.

[0066] Specifically, clarify the target users and device types of the page, such as the sizes of various devices, determine the content that needs to be displayed on the page and its priority, use design tools such as Sketch, Figma, etc. to create a design draft of the page, including the layout and style under different screen sizes; add <meta name＝"viewport"content＝"width＝device-width,initial-scale＝1.0">to ensure that the page can adapt to the screen width of different devices; use modern CSS layout techniques such as CSS Grid or Flexbox to build responsive grids, including defining grid containers and grid items in CSS, and setting appropriate grid lines and grid areas; use relative units such as percentage (%), viewport units (vw / vh), rem, etc. to set the width, height and margins of elements to achieve fluid layout, which can ensure that elements can scale proportionally on different screen sizes and maintain the overall layout and proportion of the page; determine at which screen sizes the layout and style need to be adjusted based on the design draft and the screen size of the target device. Common breakpoints include the screen sizes of mobile phones, tablets, and desktops; use @media media queries in CSS to set different breakpoints; in each media query block, adjust the grid layout, element size, font size and other styles according to the target screen size, including reducing the number of grid columns, hiding unnecessary elements, or adjusting the stacking order of elements on smaller screen sizes.

[0067] S103: Selecting a required interactive element from the interactive component library, and adjusting the interactive mode according to the device type;

[0068] S1031: Identify interaction points that require special attention on different device types;

[0069] S1032: Adjust page layout according to device screen size and resolution;

[0070] S1033: Utilize the characteristics of specific devices to enhance the interactive experience.

[0071] Specifically, first, be familiar with and understand the interactive component library used, including understanding what types of interactive elements are included in the library, such as buttons, input boxes, navigation bars, pop-ups, etc., as well as the properties, styles, and customizability of each element; clarify which interactive elements the application or website needs to implement specific user interaction scenarios, and identify user needs and interaction habits on different device types; determine the types of devices that need to be supported based on the target user group and application scenarios, and consider the differences between different devices in screen size, resolution, and input methods, such as touch, mouse and keyboard, etc.; browse the interactive component library: browse and search for the required interactive elements in the interactive component library, and filter them according to the type, style, and function of the element; for each selected interactive element, evaluate whether it is suitable for your application or website, and consider its performance on different device types, paying attention to the elements responsive design features, such as whether it can adapt to different screen sizes and resolutions; customize the style of selected interactive elements according to design requirements and brand style, and use style properties or custom CSS provided by the component library to adjust the look and feel of elements; determine the interaction points that need special attention on different device types, such as the difference between touch and mouse operations, the way information is displayed on small and large screens, etc. For touch screen devices such as mobile phones and tablets, optimize the touch interaction experience; ensure that buttons and clickable areas are large enough and easy to touch; use touch-friendly gestures such as sliding, zooming, and dragging; adjust page layout according to device screen size and resolution; use simpler navigation and menu options on small screens to reduce the complexity of user browsing; provide more information and function options on large screens to improve user efficiency. Use the characteristics of specific devices to enhance the interactive experience, including using voice commands to control applications or websites on devices that support voice input; using complex gestures to perform complex operations on devices that support gesture recognition; test on different device types to ensure that interactive elements and interaction methods meet expectations, and adjust and optimize based on user feedback and test results.

[0072] S104: Verify the layout and interaction effects and monitor performance.

[0073] S1041: Verify whether the arrangement of elements on the page is reasonable and whether the spacing between elements is consistent;

[0074] S1042: Test the page display effect on devices with different resolutions to ensure that the page can be displayed normally on different devices;

[0075] S1043: Check the color matching, font style, size, color and icon style of page elements to ensure that they meet the design requirements;

[0076] S1044: Test all interactive elements for proper functionality.

[0077] S1045: Use performance monitoring tools to test page loading speed;

[0078] S1046: Monitor the usage of CPU, memory, and network resources;

[0079] S1047: Set up an error and exception monitoring mechanism to capture and handle application errors and exceptions in a timely manner;

[0080] S1048: Evaluate user experience through user behavior analysis.

[0081] Specifically, verify whether the arrangement of elements on the page is reasonable and whether the spacing between elements is consistent. In particular, use developer tools such as browsers to check HTML and CSS codes to ensure that the layout meets the requirements of the design draft. Test the page display effect on devices with different resolutions to ensure that the page can be displayed normally on different devices. In particular, use responsive design tools such as CSS media queries to adapt to different screen sizes. Check the color matching, font style, size, color and icon style of page elements to ensure that they meet the product design requirements. In particular, use design review meetings or online collaboration tools such as Figma and Sketch's sharing function to confirm the visual effects with the design team. Test whether all interactive elements, such as buttons, links, forms, etc., function normally. In particular, use test case documents to ensure that each interactive element works as expected. Invite target users to conduct actual use tests and observe their behavior and feedback during use. In particular, use a "rough" user testing method, that is, quickly grab colleagues or non-project team members for testing and collect immediate feedback. Invite interactive design experts or usability experts to evaluate the page to find potential usability problems. In particular, expert evaluation can be based on general usability principles and experience to conduct systematic inspections. Use performance monitoring tools, such as Google PageSpeed ​​Insights, WebPageTest, etc., to test page loading speed and analyze bottlenecks in the loading process, such as network latency, server response time, resource loading time, etc.; monitor the usage of resources such as CPU, memory, and network to ensure that the application does not run out of resources during operation. Use the Windows built-in Perfmon tool or third-party monitoring tools, such as New Relic and Datadog, for real-time monitoring. Set up error and exception monitoring mechanisms to capture and handle errors and exceptions in the application in a timely manner. Use log analysis tools, such as Splunk and ELK Stack, to analyze log files and identify potential problems. Evaluate user experience through user behavior analysis, such as user clicks, scrolling, and dwell time. Use user behavior analysis tools, such as Google Analytics and Mixpanel, to collect and analyze user behavior data. Record problems found during testing, including problem description, reproduction steps, scope of impact, severity, etc. Use issue tracking systems, such as Jira and Trello, to manage issue tracking and repair processes. Track all covered issues, confirm whether the issues have been resolved and conduct test verification. If the issues have not been resolved, it is necessary to re-test or adjust the test strategy, summarize and evaluate the test process and results, and analyze the issues and improvements found in the test. Develop the next round of test plans and optimization strategies based on the evaluation results.

[0082] Using the responsive grid module 202 to build a page layout can ensure that the web page can be well displayed on devices of different sizes and resolutions. By setting appropriate breakpoints and style rules, the layout can be automatically adjusted to adapt to the screen sizes of different devices, thereby improving cross-device compatibility; when selecting the required interactive elements in the interactive component library, these elements are usually carefully designed to ensure that they can work properly on different devices and browsers. In addition, adjusting the interaction method according to the device type, such as the different interaction methods of touch screen and mouse devices, can further enhance user experience and compatibility; when using the test monitoring module 204 to verify the layout and interaction effects, multiple devices and browser environments can be simulated for testing, which helps to discover potential compatibility issues and repair them in time, thereby improving the overall compatibility of the system. Performance monitoring not only focuses on loading speed and response time, but also on the performance of the system on different devices and browsers. By monitoring and optimizing performance, it can ensure that the system can run stably in various environments and improve compatibility.

[0083] The second embodiment of the present application is:

[0084] Based on the first embodiment, please refer to Figure 6 ,in, Figure 6 The structure diagram of the browser interface adaptive adjustment system of the second embodiment of the present invention is as follows. The browser interface adaptive adjustment system of this embodiment includes a modular component library 201 , a responsive grid module 202 , a media query manager 203 and a test monitoring module 204 .

[0085] According to this specific implementation, the responsive grid module 202 is connected to the modular component library 201, the media query manager 203 is connected to the modular component library 201 and the responsive grid module 202 respectively, and the test monitoring module 204 is connected to the modular component library 201 and the responsive grid module 202 respectively.

[0086] The modular component library 201 is used to store reusable page components, each of which is designed to be independent and support adaptive layout requirements;

[0087] The responsive grid module 202 builds a grid system that supports dynamic column numbers and proportional column width adjustment to accommodate different screen sizes and orientations;

[0088] The media query manager 203 is used to manage and optimize CSS media queries to ensure that all important breakpoints are covered in an orderly and manageable manner, and to implement style applications for different screen sizes and characteristics;

[0089] The test monitoring module 204 is used to write automated test scripts to verify the layout and interaction effects under different screen sizes and browsers, and to use performance monitoring tools to track page loading time and rendering performance.

[0090] A browser interface adaptive adjustment system using the present embodiment, the modular component library 201 is a collection, which includes multiple reusable page components, which are designed as independent and self-contained units and can be easily inserted into any page without repeatedly writing the same code. Each component is designed to be able to adapt to different layout requirements, which means that they can automatically adjust their size, shape or content display mode according to the size of the parent container, the screen direction or other layout parameters. Each component in the modular component library 201 is laid out based on the responsive grid module 202, which means that the components use the class name or attributes of the grid system internally to define their layout, thereby ensuring that they can adapt to different screen sizes and directions. The modular component library 201 and the interactive component library together constitute the building blocks of the front-end page. The page components in the modular component library 201 include elements in the interactive component library, such as buttons, drop-down menus, etc., to achieve richer user interaction; the responsive grid module Block 202 is responsible for building a flexible grid system for layout of page elements. The grid system supports dynamic number of columns and proportion-based column width adjustment, so that the page layout can automatically adapt to different screen sizes and directions. Through the responsive grid, developers can define layout rules for different screen sizes, such as stacking elements on a small screen and displaying them side by side on a large screen. The responsive grid module 202 usually works in conjunction with the media query manager 203; the media query manager 203 is responsible for organizing and optimizing media queries in CSS to ensure that all media queries are orderly and manageable so as to cover all important breakpoints. Through media queries, different style rules can be applied for different screen sizes and features, thereby optimizing the user experience. The media query manager 203 not only affects the layout of the grid system, but also directly affects the style application in the modular component library 201 and the interactive component library. The style rules in the component library contain media queries to ensure that components can be displayed and interacted correctly under different screen sizes. The test monitoring module 204 allows developers to write automated test scripts to verify the layout and interaction effects under different screen sizes and browsers, which helps to ensure that the page can work properly in various environments. In addition, the module also uses performance monitoring tools to track page loading time and rendering performance, which helps to identify and solve performance bottlenecks and improve user experience. Using the responsive grid module 202 to build a page layout can ensure that the web page can be well displayed on devices of different sizes and resolutions. By setting appropriate breakpoints and style rules, the layout can be automatically adjusted to adapt to the screen sizes of different devices, thereby improving cross-device compatibility.

[0091] What is disclosed above is only one or more preferred embodiments of the present application, and cannot be used to limit the scope of rights of the present application. Ordinary technicians in this field can understand that all or part of the processes of implementing the above embodiments and equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A browser interface adaptive adjustment method, characterized in that: The following steps are involved: Select and reuse components from the modular component library based on page requirements; Use responsive grid modules to build page layouts and set breakpoints and style rules; Select the required interactive elements in the interactive component library and adjust the interaction method according to the device type; Verify layout and interaction effects and monitor performance.

2. The browser interface adaptive adjustment method according to claim 1, characterized in that: According to the page requirements, components are selected and reused from the modular component library, and the steps further include: According to the page requirements, list all required component types; Filter out components that meet the page requirements from the component library; According to the project configuration, use the package management tool to install the selected component library; In the page or component file where the component needs to be used, import the required component.

3. The browser interface adaptive adjustment method according to claim 1, characterized in that: Building a page layout using a responsive grid module and setting breakpoints and style rules, the steps further comprising: Use CSS layout techniques to build responsive grids; Use relative units such as percentages, viewport units, rem, etc. to set the width, height, and margins of elements for fluid layout; According to the design draft and the screen size of the target device, determine the screen sizes under which the layout and style need to be adjusted; Use media queries in CSS to set different breakpoints; In each media query block, adjust the grid layout, element dimensions, font size and styles based on the target screen size.

4. The browser interface adaptive adjustment method according to claim 1, characterized in that: Selecting the required interactive elements from the interactive component library and adjusting the interactive mode according to the device type, the steps further include: Identify interaction points that require special attention on different device types; Adjust page layout according to device screen size and resolution; Leverage device-specific features to enhance the interactive experience.

5. The browser interface adaptive adjustment method according to claim 1, characterized in that: Verifying the layout and interaction effects and monitoring performance, the steps also include: Verify whether the arrangement of elements on the page is reasonable and whether the spacing between elements is consistent; Test the page display effect on devices with different resolutions to ensure that the page can be displayed normally on different devices; Check the color matching, font style, size, color and icon style of page elements to ensure they meet the design requirements; Test that all interactive elements function properly.

6. The browser interface adaptive adjustment method according to claim 5, characterized in that: Verification and performance monitoring of row layout and interaction effects, the steps also include: Use performance monitoring tools to test page loading speed; Monitor the usage of CPU, memory, and network resources; Set up error and exception monitoring mechanisms to capture and handle application errors and exceptions in a timely manner; Evaluate user experience through user behavior analysis.

7. A browser interface adaptive adjustment system, applicable to the browser interface adaptive adjustment method as claimed in claim 1, characterized in that: It includes a modular component library, a responsive grid module, a media query manager and a test monitoring module. The responsive grid module is connected to the modular component library, the media query manager is respectively connected to the modular component library and the responsive grid module, and the test monitoring module is respectively connected to the modular component library and the responsive grid module. The modular component library is used to store reusable page components, each of which is designed to be independent and support adaptive layout requirements; The responsive grid module builds a grid system that supports dynamic column counts and proportional column width adjustments to accommodate different screen sizes and orientations. The media query manager is used to manage and optimize CSS media queries to ensure that all important breakpoints are covered in an orderly and manageable manner, and to achieve style application for different screen sizes and characteristics; The test monitoring module is used to write automated test scripts to verify the layout and interaction effects under different screen sizes and browsers, and to use performance monitoring tools to track page loading time and rendering performance.

Images