Intelligent visual interface adaptive design system

Abstract

The invention relates to the field of interface design, in particular to an intelligent visual interface self-adaptive design system. The technical problem to be solved is that the steps of a user visual interaction interface are repeated and numerous, and the knowledge background requirement for designers is high. Comprising a display module, an operation module, an analysis module and a prediction module. The display module is used for displaying the interface design content, generating a father-son set relation based on the position relation and the element type of the visual elements in the interface design content, and further generating and displaying a multi-level list. An analysis module is used for analyzing existing interface design content or keywords provided by designers or visual interface pictures, a new visual interface is generated, the more the newly generated visual interface conforms to the design style of the designers, the more the visual interface conforms to the style requirements of the designers, and the design efficiency is improved. And furthermore, a design reference better conforming to the interface design content is provided for designers, and the design efficiency of the designers is improved.

Description

Technical Field

[0001] The present invention relates to the field of interface design, and in particular to an intelligent visual interface adaptive design system. Background Art

[0002] The user visual interaction interface, referred to as the visual interface, is a platform for users to interact with machines through visual elements. An excellent visual interface allows users to get the most desired results with the least operations and have a good browsing experience on different devices. However, the design of visual interfaces often involves repetitive and numerous steps, resulting in low development efficiency and requiring designers to have a high knowledge background, which leads to a large amount of human resources being wasted. Summary of the invention

[0003] Technical issues to be solved In order to overcome the shortcomings of the user visual interaction interface having many repetitive steps and requiring designers to have a high knowledge background, the technical problem to be solved by the present invention is to provide an intelligent visual interface adaptive design system to assist designers in designing.

[0004] Technical Solution In order to solve the above technical problems, the present invention provides such an intelligent visual interface adaptive design system, including a display module, an operation module, an analysis module and a prediction module; The display module is used to display the interface design content, and can generate a parent-child relationship based on the position relationship and element type of the visual elements in the interface design content, and further generate and display a multi-level list. The element types of visual elements include buttons, texts, input boxes, menus, pictures, and videos; The operation module is used to move the interface design content or multi-level list displayed by the display module through operation instructions, thereby re-layouting the existing interface design content; The analysis module is used to analyze the existing interface design content or keywords or visual interface images provided by the designer, generate a visual interface, and generate a visual interface template based on the completed visual interface, save the record of the frequency of use of the operation instructions in the common instruction column, and adjust the display order of the operation instructions in the common instruction column; The prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called.

[0005] Preferably, the display module generates a parent-child relationship based on the position relationship and element type of the visual elements in the interface design content, and further generates and displays a multi-level list, specifically including the following steps: S11: The display module determines whether the element types of adjacent visual elements have a functional relationship based on different element types of adjacent visual elements in the interface design content. The functional relationship indicates the functional linkage between two visual elements. If the functional relationship of the element types of adjacent visual elements is obvious, the adjacent visual elements are divided into a group. Based on the positional relationship of the visual elements in the interface design content, it is determined whether the adjacent visual elements have an array relationship or follow a block distribution. If the adjacent visual elements have an array relationship or follow a block distribution, the adjacent visual elements are divided into a group. A visual element cannot belong to multiple groups at the same time. The priority of determining that the visual elements are in the same group based on the functional relationship is higher. S12: adding an outer frame to the visual elements belonging to the same group, and limiting the display range of the group of visual elements through the outer frame. In this case, the outer frame is the parent set of the group of visual elements, and the group of visual elements is a subset of the outer frame. The positioning of the group of visual elements is changed from absolute positioning relative to the entire visual interface to relative positioning relative to the inside of the outer frame. S13: the outer frame is regarded as a new visual element, and it is determined that the outer frame contains all functions of its subset, and the visual elements that have been grouped are ignored, and the above steps S11 and S12 are repeated, so that the outer frame regarded as a visual element and other ungrouped visual elements are divided into a new group and contained by a larger, new outer frame, and the outer frame regarded as a visual element is retained, until all visual elements are contained by a largest new outer frame; S14: Based on the inclusion relationship between the large outer frame and the small outer frame, and between the outer frame and the visual elements, a multi-level list is generated. The multi-level list can express the functional relationship and positional relationship between the visual elements more clearly, and the multi-level list will be displayed on one side of the interface design content in the display module.

[0006] Preferably, the operation module moves the interface design content or the multi-level list displayed by the display module through the operation instruction, thereby rearranging the existing interface design content, including the following contents: The designer moves the visual elements in the interface design content to the target position in the interface design content through operation instructions, or moves the outer frame corresponding to the visual elements in the interface design content through operation instructions, so that all visual elements in the outer frame move synchronously with the outer frame. If the outer frame that needs to be adjusted is moved to another outer frame, the outer frame whose position is adjusted will become a subset of the other outer frame. Alternatively, the designer moves the visual elements or outer frames in the multi-level list to another outer frame through operation instructions, so that the visual elements or the outer frame belong to the subset of another outer frame, then the visual elements or the outer frame displayed in the display module will move synchronously to realize the movement of the visual elements.

[0007] Preferably, the analysis module is used to analyze the keywords provided by the designer and generate a visual interface, including the following steps: S21: the analysis module converts the keywords provided by the designer into digital vectors corresponding thereto, and the length of the digital vectors converted from each keyword is the same; S22: Build a Transformer model based on the length of the digital vector and introduce the existing visual interface training set for pre-training; S23: A multi-level list containing multiple visual elements is obtained by inputting the existing visual interface training set into the Transformer model, and the multi-level list is transformed into a visual interface to generate a new visual interface.

[0008] Preferably, the analysis module analyzes the visual interface picture provided by the designer and generates a visual interface, including the following steps: S31: The analysis module extracts the boundary contours of the visual elements in the visual interface image through Canny edge detection, so that the edge features of the visual elements are more obvious, and extracts the geometric shapes and positional relationships of the visual elements in the visual interface image through the edge features of the visual elements; S32: Cut the visual interface along the geometric shape of the visual element to obtain the specific content of the visual element, and repeat the above steps S11 to S14 for the cut visual element to obtain an editable new visual interface and a corresponding multi-level list.

[0009] Preferably, the analysis module analyzes the existing interface design content and generates a visual interface, including the following contents: The analysis module takes a screenshot of the existing interface design content, and obtains the characteristic color, visual element distribution and visual element size of the existing interface design content through a convolutional neural network, thereby obtaining the keywords of the existing interface design content, and repeats the above steps S21 to S23 to obtain a new visual interface.

[0010] Preferably, the analysis module generates a visual interface template based on the completed visual interface, comprising the following steps: S41: the analysis module extracts the completed multi-level list of the visual interface, and replaces all text information contained in the visual elements in the multi-level list with template texts, and replaces all image information contained in the visual elements in the multi-level list with template images; S42: The analysis module will then check the frames or visual elements in the multi-level list that belong to the same frame and represent the array distribution. Only one frame or visual element that meets the conditions of belonging to the same frame and representing the array distribution will be retained, and the other frames or visual elements will be deleted, thereby realizing the generation of a visual interface template. The visual interface template can be directly called, modified and adjusted by the designer, and imported into the visual interface training set of the Transformer model to further optimize the Transformer model, thereby optimizing the generation of a new visual interface by the analysis module.

[0011] Preferably, the visual interface template is used as a training set to further optimize the generation of a new visual interface by the analysis module, including the following steps: S51: The analysis module obtains the characteristic color, visual element distribution and visual element size of the visual interface template through a convolutional neural network based on the visual interface template, and then obtains the keywords of the visual interface template; S52: Taking the keywords of the visual interface template as input content and the multi-level list corresponding to the visual interface template as output reference, the Transformer model is trained, so that the new visual interface generated by the Transformer model is more in line with the design style of the designer.

[0012] Preferably, the analysis module records and saves the usage frequency of the operation instructions in the common instruction column, and adjusts the display order of the operation instructions in the common instruction column, including the following steps: S61: The analysis module records the number of times the designer uses the operation instruction every day, and determines the designer's forgetfulness of the operation instruction based on the Ebbinghaus forgetting curve in the same time period according to whether the designer uses the operation instruction every day. The forgetfulness degree is used as a weight, and the forgetfulness degree is multiplied by the frequency of use of the operation instruction and accumulated over multiple periods to obtain a ranking score. The operation instructions are arranged in the commonly used instruction column in descending order according to the ranking score, so that the designer can quickly call the operation instruction with less number of uses without defining a shortcut key for the operation instruction. S62: The formula for ranking integral is: in, represents the ranking integral of the operation instructions, Indicates the maximum number of days to record the frequency of operation instructions. express The frequency of operation instructions used days ago, Indicates Days ago, the designer calculated the probability of forgetting how to use the operating instructions based on the Ebbinghaus forgetting curve.

[0013] Preferably, the prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called, including the following steps: S71: The prediction module determines whether the visual element currently edited by the designer has a functional relationship, an array relationship, or follows a block distribution with the adjacent visual elements, so as to predict the visual elements that the designer may edit later. The relationship between the predicted visual element and the currently edited visual element is based on the functional relationship first, followed by the array relationship, and finally the block distribution. The predicted visual element will be displayed in a semi-transparent form in the display module, and a button will pop up in the lower right corner of the predicted visual element. If the designer needs to keep the visual element, the designer presses the button to keep the predicted visual element in the existing interface design content, and the predicted visual element will be combined into a visual element template, and this step is repeated until the designer stops editing the visual element; S72: After the predicted visual element is added to the interface design content by the designer, the visual element template corresponding to the visual element will be saved in a menu that can be quickly called, so that the designer can quickly call the visual element template in the form of copying or moving.

[0014] (3) Beneficial effects 1. The analysis module is used to analyze the existing interface design content or keywords or visual interface images provided by the designer to generate a new visual interface. The more the newly generated visual interface conforms to the designer's design style, the more the visual interface conforms to the designer's style requirements, thereby providing the designer with a design reference that is more in line with the interface design content and improving the designer's design efficiency.

[0015] 2. When designers directly move the outer frame, all visual elements will move synchronously with the outer frame, thereby moving visual elements in batches and adjusting the parent-child relationship of visual elements, realizing rapid adjustment of visual elements, and thus improving the design efficiency of designers.

[0016] 3. By sorting the operation instructions in the commonly used instruction column based on the sorting score through the analysis module, it can effectively prevent the operation instructions that are used less frequently from being squeezed out of the commonly used instruction column during frequent operations, thereby avoiding wasting time on searching for operation instructions that are used less frequently, thereby improving the design efficiency of designers. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a schematic diagram of the composition structure of the present invention; Figure 2A schematic diagram of a process for generating a visual interface for the analysis module of the present invention; Figure 3 It is a schematic diagram of the flow of the analysis module of the present invention optimizing the model according to the visual interface. DETAILED DESCRIPTION

[0018] The present invention will be further described below in conjunction with the accompanying drawings and embodiments. Example

[0019] An intelligent visual interface adaptive design system, such as Figure 1-Figure 3 As shown, it includes a display module, an operation module, an analysis module and a prediction module; The display module is used to display the interface design content, and can generate a parent-child relationship based on the position relationship and element type of the visual elements in the interface design content, and further generate and display a multi-level list. The element types of visual elements include buttons, texts, input boxes, menus, pictures, and videos; The operation module is used to move the interface design content or multi-level list displayed by the display module through operation instructions, thereby re-layouting the existing interface design content; The analysis module is used to analyze the existing interface design content or keywords or visual interface images provided by the designer, generate a visual interface, and generate a visual interface template based on the completed visual interface, save the record of the frequency of use of the operation instructions in the common instruction column, and adjust the display order of the operation instructions in the common instruction column; The prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called.

[0020] It is worth noting that operation instructions include mouse clicks, mouse movements, command lines, and command buttons.

[0021] The display module generates a parent-child relationship based on the position relationship and element type of the visual elements in the interface design content, and further generates and displays a multi-level list, which specifically includes the following steps: S11: The display module determines whether the element types of adjacent visual elements have a functional relationship based on different element types of adjacent visual elements in the interface design content. If the functional relationship of the element types of adjacent visual elements is obvious, the adjacent visual elements are divided into a group. Based on the positional relationship of the visual elements in the interface design content, the display module determines whether the adjacent visual elements have an array relationship or follow a block distribution. If the adjacent visual elements have an array relationship or follow a block distribution, the adjacent visual elements are divided into a group. A visual element cannot belong to multiple groups at the same time. The priority of determining that the visual elements are in the same group based on the functional relationship is higher. It is worth noting that the functional relationship indicates the functional linkage between two visual elements, such as an input box and a button. When the input box and the button are combined together, they have the effect of executing commands according to the content of the input box. In this case, it is recognized that there is a functional linkage between the input box and the button.

[0022] S12: adding an outer frame to the visual elements belonging to the same group, and limiting the display range of the group of visual elements through the outer frame. In this case, the outer frame is the parent set of the group of visual elements, and the group of visual elements is a subset of the outer frame. The positioning of the group of visual elements is changed from absolute positioning relative to the entire visual interface to relative positioning relative to the inside of the outer frame. S13: the outer frame is regarded as a new visual element, and it is determined that the outer frame contains all functions of its subset, and the visual elements that have been grouped are ignored, and the above steps S11 and S12 are repeated, so that the outer frame regarded as a visual element and other ungrouped visual elements are divided into a new group and contained by a larger, new outer frame, and the outer frame regarded as a visual element is retained, until all visual elements are contained by a largest new outer frame; S14: Based on the inclusion relationship between the large outer frame and the small outer frame, and between the outer frame and the visual elements, a multi-level list is generated. The multi-level list can express the functional relationship and positional relationship between the visual elements more clearly, and the multi-level list will be displayed on one side of the interface design content in the display module.

[0023] It is worth noting that the outer frame is content that is only visible to designers when designing a visual interface, and the outer frame is only visible in the display module. The outer frame only affects the position layout of visual elements but does not affect the display of visual interface content, which helps designers sort out the positional relationship between different visual elements.

[0024] The operation module moves the interface design content or multi-level list displayed by the display module through operation instructions, and then re-layouts the existing interface design content, including the following: The designer moves the visual elements in the interface design content to the target position in the interface design content through operation instructions, or moves the outer frame corresponding to the visual elements in the interface design content through operation instructions, so that all visual elements in the outer frame move synchronously with the outer frame. If the outer frame that needs to be adjusted is moved to another outer frame, the outer frame whose position is adjusted will become a subset of the other outer frame. Alternatively, the designer moves the visual elements or outer frames in the multi-level list to another outer frame through operation instructions, so that the visual elements or the outer frame belong to the subset of another outer frame, then the visual elements or the outer frame displayed in the display module will move synchronously to realize the movement of the visual elements.

[0025] It is worth noting that directly moving the outer frame will cause all visual elements to move synchronously with the outer frame, thereby moving visual elements in batches and adjusting the parent-child relationship of visual elements, realizing rapid adjustment of visual elements, and thus improving the design efficiency of designers.

[0026] The analysis module is used to analyze the keywords provided by the designer and generate a visual interface, including the following steps: S21: the analysis module converts the keywords provided by the designer into digital vectors corresponding thereto, and the length of the digital vectors converted from each keyword is the same; S22: Build a Transformer model based on the length of the digital vector and introduce the existing visual interface training set for pre-training; S23: A multi-level list containing multiple visual elements is obtained by inputting the existing visual interface training set into the Transformer model, and the multi-level list is transformed into a visual interface to generate a new visual interface.

[0027] It is worth noting that the Transformer model is a deep learning model based on the self-attention mechanism, which can generate a piece of text based on specific vocabulary. After training, the Transformer model can generate multi-level lists. Common multi-level list structures include json, xml, html and SQL tables.

[0028] The analysis module analyzes the visual interface image provided by the designer and generates a visual interface, including the following steps: S31: The analysis module extracts the boundary contours of the visual elements in the visual interface image through Canny edge detection, so that the edge features of the visual elements are more obvious, and extracts the geometric shapes and positional relationships of the visual elements in the visual interface image through the edge features of the visual elements; S32: Cut the visual interface along the geometric shape of the visual element to obtain the specific content of the visual element, and repeat the above steps S11 to S14 for the cut visual element to obtain an editable new visual interface and a corresponding multi-level list.

[0029] It is worth noting that Canny edge detection is an efficient image processing technology. It determines the edge by calculating the gradient amplitude and direction of each pixel in the image, then uses non-maximum suppression and double threshold processing to refine the edge, and finally extracts continuous and clear image edges through edge connection, which facilitates grouping of image edges.

[0030] The analysis module analyzes the existing interface design content and generates a visual interface, including the following: The analysis module takes a screenshot of the existing interface design content, and obtains the characteristic color, visual element distribution and visual element size of the existing interface design content through a convolutional neural network, thereby obtaining the keywords of the existing interface design content, and repeats the above steps S21 to S23 to obtain a new visual interface.

[0031] The analysis module generates a visual interface template based on the completed visual interface, including the following steps: S41: the analysis module extracts the completed multi-level list of the visual interface, and replaces all text information contained in the visual elements in the multi-level list with template texts, and replaces all image information contained in the visual elements in the multi-level list with template images; S42: The analysis module checks the outer frames or visual elements in the multi-level list that belong to the same outer frame and represent the array distribution. Only one outer frame or visual element that meets the conditions of belonging to the same outer frame and representing the array distribution will be retained, and the other outer frames or visual elements will be deleted, thereby realizing the generation of a visual interface template. The visual interface template can be directly called, modified and adjusted by the designer, and imported into the visual interface training set of the Transformer model to further optimize the Transformer model, thereby optimizing the generation of a new visual interface by the analysis module.

[0032] It is worth noting that buttons, texts and input boxes can set text attributes and can edit text information. If the parent set of the visual element has other subsets besides the visual element, the content of the template text is "title". Otherwise, if the parent set of the visual element does not have other subsets besides the visual element, the content of the template text is "text".

[0033] The visual interface template is used as a training set to further optimize the generation of new visual interfaces by the analysis module, including the following steps: S51: The analysis module obtains the characteristic color, visual element distribution and visual element size of the visual interface template through a convolutional neural network based on the visual interface template, and then obtains the keywords of the visual interface template; S52: Taking the keywords of the visual interface template as input content and the multi-level list corresponding to the visual interface template as output reference, the Transformer model is trained, so that the new visual interface generated by the Transformer model is more in line with the design style of the designer.

[0034] It is worth noting that the more the newly generated visual interface conforms to the designer's design style, the more the visual interface conforms to the designer's style requirements, thereby providing the designer with a design reference that is more in line with the interface design content and improving the designer's design efficiency.

[0035] The analysis module records and saves the usage frequency of the operation instructions in the common instruction column, and adjusts the display order of the operation instructions in the common instruction column, including the following steps: S61: The analysis module records the number of times the designer uses the operation instruction every day, and determines the designer's forgetfulness of the operation instruction based on the Ebbinghaus forgetting curve in the same time period according to whether the designer uses the operation instruction every day. The forgetfulness degree is used as a weight, and the forgetfulness degree is multiplied by the frequency of use of the operation instruction and accumulated over multiple periods to obtain a ranking score. The operation instructions are arranged in the commonly used instruction column in descending order according to the ranking score, so that the designer can quickly call the operation instruction with less number of uses without defining a shortcut key for the operation instruction. S62: The formula for ranking integral is: in, represents the ranking integral of the operation instructions, Indicates the maximum number of days to record the frequency of operation instructions. The optimal maximum number of days is 90 days. express The frequency of operation instructions used days ago, Indicates Days ago, the designer calculated the probability of forgetting how to use the operating instructions based on the Ebbinghaus forgetting curve.

[0036] It is worth noting that the Ebbinghaus forgetting curve is a curve that describes the forgetting of information over time. The Ebbinghaus forgetting curve is nonlinear, and its curve trend can be described as an exponential decay function. Its formula can be written as: in, Indicates that the designer is in time The memory retention ratio of the operation command is The initial memory reserve ratio for designers, is the time, measured in days, The designer's memory decays to the original memory The time required.

[0037] It is worth noting that sorting the operation instructions in the commonly used instruction column based on the sorting score can effectively prevent the operation instructions that are used less frequently from being squeezed out of the commonly used instruction column during frequent operations, thereby avoiding wasting time on searching for operation instructions that are used less frequently, thereby improving the design efficiency of designers.

[0038] The prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called, including the following steps: S71: The prediction module determines whether the visual element currently edited by the designer has a functional relationship, an array relationship, or follows a block distribution with the adjacent visual elements, so as to predict the visual elements that the designer may edit later. The relationship between the predicted visual element and the currently edited visual element is based on the functional relationship first, followed by the array relationship, and finally the block distribution. The predicted visual element will be displayed in a semi-transparent form in the display module, and a button will pop up in the lower right corner of the predicted visual element. If the designer needs to keep the visual element, the designer presses the button to keep the predicted visual element in the existing interface design content, and the predicted visual element will be combined into a visual element template, and this step is repeated until the designer stops editing the visual element; S72: After the predicted visual element is added to the interface design content by the designer, the visual element template corresponding to the visual element will be saved in a menu that can be quickly called, so that the designer can quickly call the visual element template in the form of copying or moving.

[0039] It is worth noting that since a group of visual elements can be called in batches, the time spent on importing visual elements individually can be reduced, thereby improving the design efficiency of designers.

[0040] The above-mentioned embodiments only express the preferred implementation modes of the present invention, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present invention. It should be pointed out that, for a person skilled in the art, several modifications, improvements and substitutions can be made without departing from the concept of the present invention, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the present invention patent shall be subject to the attached claims.

Claims

1. An intelligent visual interface adaptive design system, characterized in that: It includes a display module, an operation module, an analysis module and a prediction module; the display module is used to display the interface design content, and can generate a parent-child relationship based on the position relationship and element type of the visual elements in the interface design content, and further generate and display a multi-level list. The element types of visual elements include buttons, texts, input boxes, menus, pictures and videos; the operation module is used to move the interface design content or multi-level list displayed by the display module through operation instructions, and then re-layout the existing interface design content; The analysis module is used to analyze the existing interface design content or keywords or visual interface images provided by the designer, generate a visual interface, and generate a visual interface template based on the completed visual interface, record and save the usage frequency of the operation instructions in the common instruction column, and adjust the display order of the operation instructions in the common instruction column; The prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called.

2. The intelligent visual interface adaptive design system according to claim 1, characterized in that: The display module generates a parent-child relationship based on the positional relationship and element type of the visual elements in the interface design content, and further generates and displays a multi-level list, which specifically includes the following steps: S11: The display module determines whether the element types of adjacent visual elements have a functional relationship based on the different element types of adjacent visual elements in the interface design content. The functional relationship indicates the functional linkage between two visual elements. If the functional relationship between the element types of adjacent visual elements is more obvious, the adjacent visual elements are divided into a group, and based on the positional relationship of the visual elements in the interface design content, it is determined whether the adjacent visual elements have an array relationship or follow a block distribution. If the adjacent visual elements have an array relationship or follow a block distribution, the adjacent visual elements are divided into a group, wherein a visual element cannot belong to multiple groups at the same time, and the priority of judging that the visual elements are in the same group through the functional relationship is higher; S12: Adding frames to the visual elements belonging to the same group, through The display range of the group of visual elements is limited by the outer frame. At this time, the outer frame is the superset of the group of visual elements, and the group of visual elements is a subset of the outer frame, and the positioning of the group of visual elements is changed from absolute positioning relative to the entire visual interface to relative positioning relative to the inside of the outer frame; S13: the outer frame is regarded as a new visual element, and it is determined that the outer frame contains all the functions of its subset, and the visual elements that have been grouped are ignored. The above steps S11 and S12 are repeated to divide the outer frame regarded as a visual element and other ungrouped visual elements into a new group and are contained by a larger, new outer frame. At the same time, the outer frame regarded as a visual element is retained until all visual elements are contained by a largest new outer frame; S14: Based on the inclusion relationship between the large outer frame and the small outer frame, and the outer frame and the visual element, a multi-level list is generated. The multi-level list can express the functional relationship and positional relationship between the visual elements more clearly, and the multi-level list will be displayed on one side of the interface design content in the display module.

3. The intelligent visual interface adaptive design system according to claim 2, characterized in that: The operation module moves the interface design content or multi-level list displayed by the display module through operation instructions, and then rearranges the existing interface design content, including the following contents: the designer moves the visual elements in the interface design content to the target position in the interface design content through operation instructions, or moves the outer frame corresponding to the visual elements in the interface design content through operation instructions, so that all visual elements in the outer frame move synchronously with the outer frame. If the outer frame that needs to be adjusted is moved to another outer frame, the outer frame whose position is adjusted will become a subset of the other outer frame. Alternatively, the designer moves the visual elements or the outer frame in the multi-level list to another outer frame through operation instructions, so that the visual element or the outer frame belongs to a subset of another outer frame. Then, the visual element or the outer frame displayed in the display module will move synchronously to realize the movement of the visual element.

4. The intelligent visual interface adaptive design system according to claim 3, characterized in that: The analysis module is used to analyze the keywords provided by the designer and generate a visual interface. The method comprises the following steps: S21: the analysis module converts the keywords provided by the designer into corresponding digital vectors, and the length of the digital vectors converted from each keyword is the same; S22: a Transformer model is constructed based on the length of the digital vector, and an existing visual interface training set is introduced for pre-training; S23: a multi-level list containing multiple visual elements is obtained by inputting the keywords into the Transformer model, and the multi-level list is transformed into a visual interface, thereby generating a new visual interface.

5. The intelligent visual interface adaptive design system according to claim 4, characterized in that: The analysis module analyzes the visual interface pictures provided by the designer and generates a visual interface. The method comprises the following steps: S31: the analysis module extracts the boundary contours of the visual elements in the visual interface image through Canny edge detection, so as to make the edge features of the visual elements more obvious, and extracts the geometric shapes and positional relationships of the visual elements in the visual interface image through the edge features of the visual elements; S32: the visual interface is cut along the geometric shapes of the visual elements to obtain the specific contents of the visual elements, and the above steps S11 to S14 are repeated for the cut visual elements to obtain an editable visual interface and a corresponding multi-level list.

6. The intelligent visual interface adaptive design system according to claim 5, characterized in that: The analysis module analyzes the existing interface design content and generates a visual interface, including the following: The analysis module takes a screenshot of the existing interface design content, and obtains the characteristic color, visual element distribution and visual element size of the existing interface design content through a convolutional neural network, thereby obtaining the keywords of the existing interface design content, and repeats the above steps S21 to S23 to obtain a new visual interface.

7. The intelligent visual interface adaptive design system according to claim 6, characterized in that: The analysis module generates a visual interface template based on the completed visual interface, including the following steps: S41: the analysis module extracts the multi-level list of the completed visual interface, and replaces all the text information contained in the visual elements in the multi-level list with the template text, and replaces all the image information contained in the visual elements in the multi-level list with the template image; S42: the analysis module checks the outer frames or visual elements in the multi-level list that belong to the same outer frame and represent the array distribution. Only one outer frame or visual element that meets the conditions of belonging to the same outer frame and representing the array distribution will be retained, and the other outer frames or visual elements will be deleted, thereby realizing the generation of the visual interface template. The visual interface template can be directly called and modified by the designer, and imported into the visual interface training set of the Transformer model to further optimize the Transformer model, thereby optimizing the generation of the new visual interface by the analysis module.

8. The intelligent visual interface adaptive design system according to claim 7, characterized in that: The visual interface template is used as a training set to further optimize the analysis module's generation of new visual interfaces. The method comprises the following steps: S51: the analysis module obtains the characteristic color, visual element distribution and visual element size of the visual interface template through a convolutional neural network based on the visual interface template, and then obtains the keywords of the visual interface template; S52: the keywords of the visual interface template are used as input content and the multi-level list corresponding to the visual interface template is used as an output reference to train the Transformer model, so that the new visual interface generated by the Transformer model is more in line with the design style of the designer.

9. The intelligent visual interface adaptive design system according to claim 1, characterized in that: The analysis module records and saves the usage frequency of the operation instruction in the common instruction column, and adjusts the display order of the operation instruction in the common instruction column, including the following steps: S61: The analysis module records the number of times the designer uses the operation instruction every day, and determines the designer's forgetfulness of the operation instruction based on the Ebbinghaus forgetting curve in the same time period according to whether the designer uses the operation instruction every day, and uses the forgetfulness as a weight to multiply the forgetfulness and the usage frequency of the operation instruction and accumulate them in multiple cycles to obtain a ranking score. The operation instructions are arranged in the common instruction column in descending order according to the ranking score, so that the designer can quickly call the operation instruction with less usage without defining a shortcut key for the operation instruction; S62: The formula for the ranking score is: in, represents the ranking integral of the operation instructions, Indicates the maximum number of days to record the frequency of operation instructions. express The frequency of operation instructions used days ago, Indicates Days ago, the designer calculated the probability of forgetting how to use the operating instructions based on the Ebbinghaus forgetting curve.

10. The intelligent visual interface adaptive design system according to claim 1, characterized in that: The prediction module is used to predict the subsequent unfinished interface design content based on the existing interface design content. If the predicted interface design content is added to the existing interface design content, the predicted interface design content will be combined into a visual element template and added to a menu that can be quickly called, including the following steps: S71: The prediction module determines whether the visual element has a functional relationship, an array relationship, or follows a block distribution with the adjacent visual elements based on the visual element currently edited by the designer, so as to predict the visual elements that the designer may edit later. The relationship between the predicted visual element and the currently edited visual element is based on the functional relationship first, followed by the array relationship, and finally the block distribution. According to the block distribution, the predicted visual elements will be displayed in a semi-transparent form in the display module, and a button will pop up in the lower right corner of the predicted visual element. If the designer needs to retain the visual element, the designer presses the button to retain the predicted visual element in the existing interface design content, and the predicted visual elements will be combined into a visual element template, and this step will be repeated until the designer stops editing the visual element; S72: After the predicted visual element is added to the interface design content by the designer, the visual element template corresponding to the visual element will be saved in a menu that can be quickly called, so that the designer can quickly call the visual element template by copying or moving.

Images