Graphical user interface adaptive layout method, program product, equipment and medium

Abstract

The embodiment of the invention provides an adaptive layout method of a graphical user interface, a program product, equipment and a medium. The method comprises the following steps: acquiring initial layout data of the graphical user interface to be laid out and display information of target display equipment; analyzing the difference between the initial layout data and preset standard layout data to obtain an analysis result; based on the analysis result and the display information, adaptively arranging the graphical user interface to the target display equipment to obtain a first adaptive interface; and inputting the first adaptive interface into the trained layout adjustment model to obtain a second adaptive interface which is output after the layout adjustment model adjusts the first adaptive interface at least based on the standard layout data. According to the method, the graphical user interface can better adapt to different screen sizes, meanwhile, it can be guaranteed that the interface after self-adaption meets the standard layout, and the problem that the graphical user interface is matched with various screen sizes due to the fact that a response type design frame excessively depends on breakpoints and styles is solved.

Description

Technical Field

[0001] The present application relates to the field of graphical user interface technology, and in particular to a method, program product, device and medium for adaptive layout of a graphical user interface. Background Art

[0002] With the popularity of mobile devices and various screen sizes, traditional graphical user interfaces (GUIs) often need to be customized for different devices to adapt to the display requirements of different resolutions and screen sizes. In related technologies, the design of GUIs lacks flexibility, and how to automatically adapt to the display characteristics of different devices is a technical problem that needs to be solved in this field. Summary of the invention

[0003] The purpose of the embodiments of the present application is to provide a method, program product, device and medium for adaptive layout of a graphical user interface, so as to achieve the technical effect of adaptively adjusting the display characteristics of different devices of the graphical user interface.

[0004] A first aspect of an embodiment of the present application provides an adaptive layout method for a graphical user interface, the method comprising:

[0005] Acquire initial layout data of the graphical user interface to be laid out, and display information of the target display device;

[0006] Analyzing the difference between the initial layout data and the preset standard layout data to obtain an analysis result;

[0007] Based on the analysis result and the display information, adaptively layout the graphical user interface to the target display device to obtain a first adaptive interface;

[0008] The first adaptive interface is input into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on at least the standard layout data.

[0009] In the above implementation process, compared with the related art of designing layout styles for different screen size ranges, the layout method provided by the present application can enable the graphical user interface to better adapt to different screen sizes, while also ensuring that the adaptive interface meets the standard layout, thereby solving the problem of graphical user interface adaptation to various screen sizes caused by the responsive design framework's excessive reliance on breakpoints and styles.

[0010] Furthermore, the obtaining of initial layout data of the graphical user interface to be laid out includes:

[0011] Traversing the document object model DOM elements included in the graphical user interface;

[0012] The DOM element is analyzed to obtain initial layout data of the graphical user interface.

[0013] In the above implementation process, by traversing the DOM elements in the graphical user interface and then analyzing the DOM elements one by one, the initial layout data of the graphical user interface is obtained, and then the difference between the initial layout data and the standard layout data is used to adaptively layout the graphical user interface to the target display device, thereby completing the adaptive layout process of the graphical user interface.

[0014] Furthermore, based on the analysis result and the display information, the graphical user interface is adaptively laid out to the target display device to obtain a first adaptive interface, including:

[0015] The graphical user interface is adaptively laid out to the target display device based on the analysis result by using a Cascading Style Sheet (CSS) tool to obtain a first adaptive interface matching the display information.

[0016] In the above implementation process, applying CSS tools to the responsive design framework can achieve an adaptive layout that matches the screen size and obtain a first adaptive interface.

[0017] Furthermore, inputting the first adaptive interface into a trained layout adjustment model includes:

[0018] Adjusting the layout of the first adaptive interface based on a preset adjustment rule; wherein the adjustment rule includes one or more of layout container width, interface element size, and navigation bar style;

[0019] The adjusted first adaptive interface is input into the trained layout adjustment model.

[0020] In the above implementation process, by successively using the adjustment rules and the layout adjustment model to adjust the layout of the first adaptive interface, the degree of adaptation between the graphical user interface and the target display device can be improved, and the graphical user interface can be better ensured to conform to the annotation layout.

[0021] Furthermore, the method further comprises:

[0022] In response to a size adjustment instruction for the second adaptive interface, the size adjustment instruction and the second adaptive interface are input into the trained layout adjustment model to obtain a third adaptive interface output by the layout adjustment model; wherein the third adaptive interface matches the interface size indicated by the size adjustment instruction.

[0023] In the above implementation process, the layout adjustment model is used to learn the potential relationship between size change and interface layout, so that when a size adjustment instruction is received, the layout adjustment model can be used to adjust the layout of the second adaptive interface, and then the output third adaptive interface matches the interface size indicated by the size adjustment instruction. This allows the graphical user interface to better adapt to the adjusted size when the size changes. At the same time, the relationship between size change and interface layout is learned by the neural network model, which can greatly save the interface layout development cost.

[0024] Furthermore, the layout adjustment model is trained using GUI sample data carrying difference information and user feedback information, wherein the difference information is used to characterize the difference between the GUI sample data and the standard layout data;

[0025] The step of inputting the first adaptive interface into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on at least the standard layout data comprises:

[0026] The first adaptive interface is input into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on the standard layout data and user feedback.

[0027] In the above implementation process, the obtained second adaptive interface not only conforms to the standard layout, but also conforms to the user's usage habits and uses a layout style that is popular with users, thereby improving the user experience.

[0028] Furthermore, the method further comprises:

[0029] In response to a user's instruction to load the graphical user interface on the target display device, reading the user's editing operation data, adjusting the second adaptive interface based on the editing operation data, and displaying the obtained fourth adaptive interface;

[0030] The editing operation data is data of the user performing editing operations on the second adaptive interface displayed historically.

[0031] In the above implementation process, by storing the user's editing operation data on the second adaptive interface, the layout of the second adaptive interface can be adjusted based on the editing operation data when loading the graphical user interface, giving the user personalized setting operation space.

[0032] A second aspect of an embodiment of the present application provides a computer program product, wherein the computer program product includes a computer program, and when the computer program is executed by a processor, any method described in the first aspect is implemented.

[0033] According to a third aspect of the present application, an electronic device is provided, the electronic device comprising:

[0034] processor;

[0035] a memory for storing processor-executable instructions;

[0036] Wherein, when the processor calls the executable instruction, it implements the operation of any method described in the first aspect.

[0037] A fourth aspect of an embodiment of the present application provides a computer-readable storage medium having computer instructions stored thereon, which, when executed by a processor, implement the steps of any method described in the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments of the present application will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0039] Figure 1 A schematic diagram of a flow chart of an adaptive layout method of a graphical user interface provided in an embodiment of the present application;

[0040] Figure 2 A schematic diagram of a flow chart of another method for adaptive layout of a graphical user interface provided in an embodiment of the present application;

[0041] Figure 3 A schematic diagram of a flow chart of another method for adaptive layout of a graphical user interface provided in an embodiment of the present application;

[0042] Figure 4 A hardware structure diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0043] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0044] It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings. At the same time, in the description of this application, the terms "first", "second", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0045] In the related art, the graphical user interface with a fixed layout cannot provide a consistent user experience on all display devices, and there are multi-device compatibility issues. In order to achieve compatible display of the graphical user interface on multiple devices, developers often need to manually design multiple layouts for different devices and screen sizes, and this process often consumes high manpower and time costs. With the development of technology, although some design tools that can create adaptive layouts have emerged, such as responsive design frameworks, including popular front-end frameworks such as Bootstrap and Foundation, responsive design frameworks rely on preset breakpoints and styles and may not be suitable for all design needs.

[0046] In the responsive design framework, a breakpoint is a specific screen size. Multiple screen size intervals can be divided by designing breakpoints. For example, breakpoints may include 576px (pixel), 768px, and 992px, etc. Based on the breakpoints, the following multiple screen size intervals can be obtained: less than 576px, 576px-768px, 768px-992px, and greater than 992px. In the responsive design framework, a layout style is often designed for each screen size interval for the graphical user interface. Then for two display devices with different screen sizes, if their screen sizes fall into the same screen size interval, the graphical user interface will display the same layout style in the two display devices. Furthermore, if the screen size is larger than the layout style size corresponding to the interval, the graphical user interface will not be able to completely fill the display position of the entire screen, and there will be blank space around the graphical user interface. It can be seen that the responsive design framework relies too much on breakpoints and styles, which will cause the graphical user interface to be unable to adapt well to various screen sizes.

[0047] In order to solve at least one of the technical problems mentioned above, the present application proposes an adaptive layout method of a graphical user interface, including: Figure 1 Steps 110 - 140 are shown.

[0048] Step 110: Acquire initial layout data of the graphical user interface to be laid out and display information of the target display device.

[0049] Exemplarily, the initial layout data refers to the layout data obtained when the unadjusted graphical user interface is laid out on the target display device, or refers to the layout data when the graphical user interface is originally designed, including interface size, elements and display parameters thereof, etc. The display parameters include, for example, but are not limited to, position, size, color, attributes, etc.

[0050] The display information of the target display device includes screen size, resolution, device type, and the like.

[0051] Step 120: Analyze the difference between the initial layout data and the preset standard layout data to obtain an analysis result.

[0052] Standard layout data refers to specific rules and best practices for layout that are followed when designing and implementing a graphical user interface. The standard layout data may be specified in advance, for example, by referring to standards followed in the industry for graphical user interface design.

[0053] As an example, standard layout data can be developed based on the following: 1) Define a container with a maximum width to avoid content being too scattered on large screens; use a 12-column grid system to facilitate layout on different screen sizes. 2) Define at least four breakpoints: small screen (mobile phone), medium screen (tablet), large screen (desktop monitor), and extra-large screen (large-size monitor). 3) Define breakpoint values, examples of breakpoint values: small screen <576px, medium screen 576px-768px, large screen 768px-992px, extra-large screen >992px. 4) Define consistent spacing standards, such as using multiples of 8px for margins and padding; ensure that the body text font size is between 14px and 16px, and titles and sub-titles should be appropriately increased. 5) The line height should be 1.4 to 1.6 times the font size to ensure good readability. 6) Ensure sufficient contrast between text and background, meeting the AA standard of WCAG 2.0. 7) Provide visual feedback for links, buttons, and other interactive elements. 8) Ensure images and icons remain clear and not blurry on different devices. 9) Use appropriate image formats to optimize loading speed. 10) The minimum clickable area of ​​a button should be 48px x 48px to meet the requirements of touch devices. 11) Form input fields should have clear labels and the label text should not be too long. 12) Navigation elements should remain consistent and easy for users to find and use. 13) Provide a hamburger menu or other accordion navigation mode for mobile devices.

[0054] Of course, in addition to the above, the standard layout data may also refer to image accessibility, performance, layout adaptability, and the like.

[0055] Based on this, when executing step 120, the preset standard layout data can be read, and the initial layout data of the graphical user interface to be laid out can be compared with the standard layout data item by item to obtain an analysis result. The analysis result includes the difference between the initial layout data and the standard layout data. Optionally, the analysis result can also include a layout adjustment suggestion for the graphical user interface.

[0056] Step 130: Based on the analysis result and the display information, the graphical user interface is adaptively laid out to the target display device to obtain a first adaptive interface.

[0057] Based on the difference between the initial layout data and the standard layout data indicated by the analysis result, the graphical user interface can be adaptively laid out in the target display device to obtain a first adaptive interface. The first adaptive interface matches the display information of the target display device. For example, the size of the first adaptive interface is consistent with the screen size of the target display device, so that when the graphical user interface is adaptively displayed on the target display device, the first adaptive interface can fill the display position of the entire target display device screen.

[0058] However, the first adaptive interface obtained by adaptively layouting the graphical user interface based on the analysis result and the display information may not be perfect in some layout details. Therefore, the adjustment of the layout details can be further improved by executing step 140.

[0059] Step 140: inputting the first adaptive interface into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on at least the standard layout data.

[0060] Exemplarily, the layout adjustment model may include but is not limited to a decision tree, a random forest, or a neural network. In the training phase of the layout adjustment model, the layout adjustment model may be supervised trained using the graphical user interface sample data carrying difference information to obtain a trained layout adjustment model. The difference information is used to characterize the difference between the graphical user interface sample data and the standard layout data. Specifically, during the training process, difference information between a plurality of graphical user interfaces and their initial layout data and the standard layout data may be collected. By learning the graphical user interface sample data carrying difference information, the layout adjustment model may learn the standard layout style of the graphical user interface.

[0061] Alternatively, the layout adjustment model can be supervised by using a graphical user interface sample data set. The graphical user interface sample data set includes the graphical user interface before adjustment and the graphical user interface that conforms to the standard layout. By learning the graphical user interface sample data set, the layout adjustment model can also learn the standard layout style of the graphical user interface.

[0062] Based on this, the first adaptive interface is input into the trained layout adjustment model, and since the trained layout adjustment model has learned the standard layout style of the graphical user interface, the trained layout adjustment model can adjust the first adaptive interface based on the standard layout data. The second adaptive interface output after adjustment conforms to the standard layout.

[0063] It can be seen that the present application provides an adaptive layout method for a graphical user interface, which analyzes the difference between the initial layout data of the graphical user interface and the standard layout data, and based on the analysis results and the display information of the target display device, adaptively layouts the graphical user interface to the target display device, thereby obtaining a first adaptive interface that matches the display information. At the same time, the layout adjustment model is also used to adjust the first adaptive interface based on the standard layout data to obtain a second adaptive interface that conforms to the standard layout. In this way, compared with the related art of designing layout styles for different screen size intervals, the layout method provided by the present application can enable the graphical user interface to better adapt to different screen sizes, while also ensuring that the interface after adaptation meets the standard layout, thereby solving the problem of the graphical user interface adapting to various screen sizes caused by the responsive design framework's excessive reliance on breakpoints and styles.

[0064] The following is a detailed description of step 110 to step 140.

[0065] Regarding the process of obtaining the initial layout data in step 110, in some embodiments, the process may include: Figure 2 Steps 210 to 220 are shown.

[0066] Step 210: traverse the document object model DOM elements included in the graphical user interface.

[0067] The DOM (Document Object Model) element refers to the hierarchical structure of a page in web page development, which defines the objects required to represent and modify a document, the behaviors and properties of the objects, and the relationships between the objects.

[0068] Step 220: Analyze the DOM element to obtain initial layout data of the graphical user interface.

[0069] After obtaining all DOM elements included in the graphical user interface, the DOM elements can be analyzed one by one. Exemplarily, CSS (Cascading Style Sheets) media query tools and / or JavaScript tools can be used to analyze the DOM elements to obtain the initial layout data of the graphical user interface.

[0070] It can be seen that in this embodiment, by traversing the DOM elements in the graphical user interface and then analyzing the DOM elements one by one, the initial layout data of the graphical user interface is obtained, and then the difference between the initial layout data and the standard layout data is used to adaptively layout the graphical user interface to the target display device, thereby completing the adaptive layout process of the graphical user interface.

[0071] Regarding the process of adaptive layout in step 130, based on any of the above embodiments, the following steps may be included:

[0072] The graphical user interface is adaptively laid out to the target display device based on the analysis result by using a Cascading Style Sheet (CSS) tool to obtain a first adaptive interface matching the display information.

[0073] The CSS tools may include but are not limited to CSS Flexbox tools, CSS Grid tools, and CSS media query tools, etc. In this way, applying the CSS tools to the responsive design framework can achieve an adaptive layout that matches the screen size, thereby obtaining a first adaptive interface.

[0074] In addition, based on any of the above embodiments, the first adaptive interface can be adjusted by a preset adjustment rule in addition to being adjusted by a layout adjustment model. Thus, as an alternative implementation of step 130, it may include: adjusting the layout of the first adaptive interface based on a preset adjustment rule to obtain an adjusted second adaptive interface. The adjustment rule includes one or more of the layout container width, the interface element size, and the navigation bar style. The adjusted second adaptive interface satisfies the layout container width, the interface element size, and the navigation bar style defined in the adjustment rule.

[0075] In this way, by adjusting the layout of the first self-adaptive interface based on the preset adjustment rules, a second self-adaptive interface that complies with the standard layout can also be obtained.

[0076] In addition, in some embodiments, the first adaptive interface can also be adjusted in layout by the above adjustment rules and layout adjustment model. Figure 3 Steps 310 to 320 shown:

[0077] Step 310: adjusting the layout of the first adaptive interface based on a preset adjustment rule;

[0078] Step 320: input the adjusted first adaptive interface into the trained layout adjustment model.

[0079] In this way, by successively using the adjustment rule and the layout adjustment model to adjust the layout of the first adaptive interface, the degree of adaptation between the graphical user interface and the target display device can be improved, and the graphical user interface can be better ensured to conform to the annotation layout.

[0080] In addition, based on any of the above embodiments, the adaptive layout method further includes step 150:

[0081] Step 150: In response to a size adjustment instruction for the second adaptive interface, the size adjustment instruction and the second adaptive interface are input into the trained layout adjustment model to obtain a third adaptive interface output by the layout adjustment model; wherein the third adaptive interface matches the interface size indicated by the size adjustment instruction.

[0082] In this embodiment, the layout adjustment model also has the ability to learn size adjustment instructions. Exemplarily, during the training phase, the layout adjustment model can learn the potential relationship between user operations and the graphical user interface layout through graphical user interface sample data that carries user operation data. That is, the layout adjustment model is supervisedly trained using graphical user interface sample data that carries user operation data. The user operations include, for example, but are not limited to, interface reduction operations, window element size change operations, and interface enlargement operations. It can be seen that the user operations are used to indicate changes in the size of the graphical user interface and / or changes in the size of elements included in the graphical user interface (such as window elements). When the size changes, in order to improve the user's perception, the layout of the graphical user interface should also be adjusted accordingly.

[0083] When executing the adaptive layout method provided in this embodiment, when a size adjustment instruction for the second adaptive interface is received, step 150 is triggered for execution. If no size adjustment instruction for the second adaptive interface is received, step 150 is not executed. The size adjustment instruction may be input by a user or automatically triggered by a target display device. The size adjustment instruction carries the adjusted interface size. For example, for a target display device with a display screen rotation function, when a user changes the display direction of the target display device (for example, the user changes from using the display device "horizontally" to using the display device "vertically"), the target display device may generate a size adjustment instruction for the second adaptive interface in response to the change in display direction.

[0084] In response to the size adjustment instruction, the second adaptive interface and the size adjustment instruction can be input into the trained layout adjustment model. Since the layout adjustment model learns the potential relationship between size change and graphical user interface layout during the training phase, the layout adjustment instruction can adjust the layout of the second adaptive interface according to the size adjustment instruction, including but not limited to interface size, element size, element position, navigation style, etc., and output the adjusted third adaptive interface. The third adaptive interface matches the interface size indicated by the size adjustment instruction.

[0085] It can be seen that this embodiment uses the layout adjustment model to learn the potential relationship between size change and interface layout, so that when a size adjustment instruction is received, the layout adjustment model can be used to adjust the layout of the second adaptive interface, and then the output third adaptive interface matches the interface size indicated by the size adjustment instruction. When the graphical user interface changes in size, it can better adapt to the adjusted size. At the same time, the use of a neural network model to learn the relationship between size change and interface layout can greatly save the cost of interface layout development.

[0086] In addition, based on any of the above embodiments, the layout adjustment model can also be trained using GUI sample data carrying difference information and user feedback information. The difference information is used to characterize the difference between the GUI sample data and the standard layout data. The user feedback information is used to characterize the user's satisfaction with the GUI sample. In this way, the layout adjustment model can not only learn the standard layout style of the GUI, but also learn what kind of layout style is most popular with users or has the best performance.

[0087] Based on this, when executing step 140, the first adaptive interface is input into the trained layout adjustment model, and the layout adjustment model can adjust the first adaptive interface based on the standard layout data and user feedback at the same time, and output the adjusted second adaptive interface. In this way, the second adaptive interface not only conforms to the standard layout, but also conforms to the user's usage habits, and uses a layout style that is popular with users, thereby improving the user experience.

[0088] In addition, based on any of the above embodiments, the graphical user interface also provides a layout editing function, giving the user the operating space to edit the interface layout according to their own preferences and usage habits. Based on this, the adaptive layout method also includes the steps of:

[0089] The second adaptive interface is displayed and stored; in response to the user performing an editing operation on the displayed second adaptive interface, the editing operation data of the user is saved.

[0090] After obtaining the second adaptive interface output by the layout adjustment model, the second adaptive interface can be displayed and the layout data of the second adaptive interface can be stored, so that when the second adaptive interface needs to be displayed and loaded again, the layout data of the second adaptive interface can be directly read from the storage space, and the second adaptive interface can be loaded and displayed based on the layout data without repeatedly executing steps 110 to 140. Of course, if the layout adjustment model continuously optimizes the interface layout based on user feedback, then each time the graphical user interface needs to be displayed, a new second adaptive interface can be regenerated by executing steps 110 to 140, so as to better meet the changing needs of users.

[0091] After the second adaptive interface is displayed, since the layout editing function is provided to the user, the user can edit the layout of the second adaptive interface, including but not limited to adjusting the interface size, element position, element size, navigation bar style, dragging components, adjusting containers, etc. In response to the user's editing operation on the second adaptive interface, the user's editing operation data can be saved. Exemplarily, a Web Storage (browser storage) API (Application Programming Interface), such as LocalStorage or SessionStorage, can be used to store the user's editing operation data.

[0092] Furthermore, in some scenarios, multiple users may use the target display device, and each user may perform different editing operations on the second adaptive interface on the target display device. Therefore, in order to better improve the user experience, when storing the user's editing operation data, the user information, the second adaptive interface, and the editing operation data may be mapped and stored. The user information includes, for example, but is not limited to, information that can be used to uniquely identify the user, such as the user number and user name. In this way, for the same second adaptive interface, editing operation data corresponding to different users will be stored.

[0093] Based on the words, the adaptive layout method may further include the steps of:

[0094] In response to a user's instruction to load the graphical user interface on the target display device, reading the user's editing operation data, adjusting the second adaptive interface based on the editing operation data, and displaying the obtained fourth adaptive interface;

[0095] The editing operation data is data of the user performing editing operations on the second adaptive interface displayed historically.

[0096] When the user inputs a loading instruction for the graphical user interface on the target display device, the layout data of the second adaptive interface and the user's editing operation data can be read. The layout data of the second adaptive interface refers to the layout data corresponding to the second adaptive interface output by the layout adjustment model. The user's editing operation data refers to the data of the user's editing operation when the second adaptive interface is historically displayed. Optionally, if the mapping relationship between user information, the second adaptive interface, and the editing operation data is stored, the editing operation data can be determined based on the user information of the user who currently inputs the loading instruction, the second adaptive interface, and the mapping relationship.

[0097] Subsequently, the second adaptive interface is adjusted based on the editing operation data, specifically, the layout data of the second adaptive interface is modified to obtain an adjusted fourth adaptive interface, and the interface is displayed.

[0098] Optionally, in response to the loading instruction, if the user's editing operation data is not read, the second adaptive interface is directly displayed.

[0099] It can be seen that in this embodiment, by storing the user's editing operation data on the second adaptive interface, the layout of the second adaptive interface can be adjusted based on the editing operation data when loading the graphical user interface, giving the user personalized operating space.

[0100] It can be seen that the adaptive layout method of a graphical user interface provided by this application has the following beneficial effects:

[0101] 1) Enhanced user experience: Through adaptive layout, users can get a consistent and optimized interactive experience on different devices. For example, a single-column view is used on mobile phones, and a multi-column grid view is used on desktop computers, ensuring that it is easy to operate on small mobile phones and large-screen tablet devices.

[0102] 2) Reduce development time and cost: Automated layout analysis and adjustment reduces the workload of manually designing and testing layouts for different devices.

[0103] 3) Optimize performance: By using models for layout adjustments, unnecessary repeated adjustments and loading of resources can be avoided, thereby improving page loading speed and overall performance.

[0104] 4) Adapt to multiple screen sizes: Ensure that all screen sizes from small mobile phones to large desktop monitors are well supported. For example, the size and layout of controls on mobile phones of different sizes will be dynamically adjusted according to the screen size.

[0105] Based on the adaptive layout method of a graphical user interface described in any of the above embodiments, the present application also provides a computer program product, which includes one or more computer programs or instructions. The computer program or instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. When the computer program is executed by a processor, the adaptive layout method of a graphical user interface described in any of the above embodiments is implemented.

[0106] Based on the adaptive layout method of a graphical user interface described in any of the above embodiments, the present application also provides the following Figure 4 A schematic diagram of the structure of an electronic device is shown in FIG. Figure 4At the hardware level, the electronic device includes a processor, an internal bus, a network interface, a memory, and a non-volatile memory, and may also include hardware required for other services. The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it to implement the adaptive layout method of a graphical user interface described in any of the above embodiments.

[0107] The present application also provides a computer storage medium, which stores a computer program. When the computer program is executed by a processor, it can be used to execute the adaptive layout method of a graphical user interface described in any of the above embodiments.

[0108] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of boxes in the block diagram and / or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0109] In addition, the functional modules in the various embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0110] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium, including several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0111] The above description is only an embodiment of the present application and is not intended to limit the scope of protection of the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application should be included in the scope of protection of the present application. It should be noted that similar reference numerals and letters represent similar items in the following drawings, so once an item is defined in one drawing, it does not need to be further defined and explained in the subsequent drawings.

[0112] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0113] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

Claims

1. A method for adaptive layout of a graphical user interface, characterized in that: The method comprises: Acquire initial layout data of the graphical user interface to be laid out, and display information of the target display device; Analyzing the difference between the initial layout data and the preset standard layout data to obtain an analysis result; Based on the analysis result and the display information, adaptively layout the graphical user interface to the target display device to obtain a first adaptive interface; The first adaptive interface is input into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on at least the standard layout data.

2. The method according to claim 1, characterized in that The step of obtaining the initial layout data of the graphical user interface to be laid out includes: Traversing the document object model DOM elements included in the graphical user interface; The DOM element is analyzed to obtain initial layout data of the graphical user interface.

3. The method according to claim 1, characterized in that The step of adaptively laying out the graphical user interface on the target display device based on the analysis result and the display information to obtain a first adaptive interface includes: The graphical user interface is adaptively laid out to the target display device based on the analysis result by using a Cascading Style Sheet (CSS) tool to obtain a first adaptive interface matching the display information.

4. The method according to claim 1, characterized in that: The step of inputting the first adaptive interface into the trained layout adjustment model includes: Adjusting the layout of the first adaptive interface based on a preset adjustment rule; wherein the adjustment rule includes one or more of layout container width, interface element size, and navigation bar style; The adjusted first adaptive interface is input into the trained layout adjustment model.

5. The method according to any one of claims 1 to 4, characterized in that: The method further comprises: In response to a size adjustment instruction for the second adaptive interface, the size adjustment instruction and the second adaptive interface are input into the trained layout adjustment model to obtain a third adaptive interface output by the layout adjustment model; wherein the third adaptive interface matches the interface size indicated by the size adjustment instruction.

6. The method according to any one of claims 1 to 4, characterized in that: The layout adjustment model is trained using GUI sample data carrying difference information and user feedback information, wherein the difference information is used to characterize the difference between the GUI sample data and the standard layout data; The step of inputting the first adaptive interface into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on at least the standard layout data comprises: The first adaptive interface is input into a trained layout adjustment model to obtain a second adaptive interface output by the layout adjustment model after adjusting the first adaptive interface based on the standard layout data and user feedback.

7. The method according to any one of claims 1 to 4, characterized in that: The method further comprises: In response to a user's instruction to load the graphical user interface on the target display device, reading the user's editing operation data, adjusting the second adaptive interface based on the editing operation data, and displaying the obtained fourth adaptive interface; The editing operation data is data of the user performing editing operations on the second adaptive interface displayed historically.

8. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

9. An electronic device, characterized in that: The electronic device comprises: processor; a memory for storing processor-executable instructions; Wherein, when the processor calls the executable instructions, the operation of any method described in claims 1-7 is implemented.

10. A computer-readable storage medium, characterized in that: Computer instructions are stored thereon, and when the computer instructions are executed by a processor, the steps of any method described in claims 1-7 are implemented.

Images