UI component adjustment method and device, equipment and storage medium

Abstract

Embodiments of the invention provide a UI component adjustment method and apparatus, a device and a storage medium. The method comprises the steps of obtaining a first source file of an initial UI component; obtaining an adjustment value of a target user parameter of the initial UI component; obtaining a parameter mapping table of the initial UI component, adjusting a value of a target attribute parameter of a first source file in the initial UI component based on the parameter mapping table of the initial UI component and an adjustment value of a target user parameter of the initial UI component to obtain a target source file of the initial UI component, and generating a target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used for recording the corresponding relation between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component. According to the method, the operation of adjusting the UI component by the user is simplified, and the efficiency of adjusting the UI component is improved.

Description

Technical Field

[0001] The present application relates to the field of communication technology, and in particular to a method, device, equipment and storage medium for adjusting a UI component. Background Art

[0002] Formulating corresponding design specifications for products is beneficial to product management, ensuring the continuity of product iterations and improving the user experience. For hardware products, corresponding design specifications can be formulated by limiting the parameters of the hardware products. However, it is difficult to explain the design specifications of software products with words alone. For example, the design specifications of UI (User Interface) components are difficult to explain with words alone and need to be explained in combination with design examples.

[0003] In some scenarios, it is necessary to adjust the UI components in the design example. For example, when the designer designs the UI components based on the design specifications, it is necessary to modify the UI components in the design example in combination with the business scenario to obtain the UI components that meet the design specifications in the business scenario. For example, when the design specifications are modified or migrated, the designer needs to modify the UI components in the design example to obtain the UI components that meet the modified design specifications. However, in the prior art, when adjusting the UI components, it is often necessary to use drawing tools to adjust them from the point and line dimensions, which is inconvenient and inefficient. Summary of the invention

[0004] In view of this, the present application provides a method, apparatus, device and storage medium for modifying UI components, so as to solve the problem of inconvenient and low efficiency in adjusting UI components in the prior art.

[0005] In a first aspect, an embodiment of the present application provides a method for adjusting a UI component, the method comprising:

[0006] Get the first source file of the initial UI component;

[0007] Get the adjustment value of the target user parameter of the initial UI component;

[0008] Obtain a parameter mapping table of the initial UI component, adjust the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtain the target source file of the initial UI component, and generate a target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

[0009] In a possible implementation manner of the first aspect, before obtaining the first source file of the initial UI component, the method further includes:

[0010] Obtain an initial UI component, and determine user parameters of the initial UI component;

[0011] The corresponding relationship between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component is determined, and recorded in a parameter mapping table of the initial UI component.

[0012] In a possible implementation manner of the first aspect, determining the user parameter of the initial UI component includes:

[0013] Classifying the initial UI components by features to obtain at least one category of initial UI components;

[0014] For each type of initial UI component in at least one type of initial UI components, determine the user parameters of the type of initial UI components; wherein the user parameters of the type of initial UI components include at least one first user parameter; the first user parameter is the same user parameter of at least a preset number of initial UI components in the type of initial UI components;

[0015] Determining the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component includes:

[0016] Determine, according to the first source file of the initial UI component of the type, a neutral model corresponding to the initial UI component of the type, wherein the neutral model includes at least one attribute parameter in the first source file of at least one initial UI component of the type;

[0017] Determine the correspondence between the user parameters of the initial UI component of this type and the attribute parameters in the neutral model.

[0018] In a possible implementation manner of the first aspect, performing feature classification on the initial UI components to obtain at least one type of initial UI components includes:

[0019] Feature classification is performed according to the functional features and topological structures of the initial UI components to obtain at least one type of initial UI components.

[0020] In a possible implementation manner of the first aspect, performing feature classification on the initial UI components to obtain at least one type of initial UI components includes:

[0021] Determine a target feature vector of an initial UI component; the target feature vector represents image feature information of the initial UI component;

[0022] Determining similarities between the initial UI components based on target feature vectors of the initial UI components;

[0023] According to the similarities between the initial UI components, the initial UI components are clustered to obtain at least one type of initial UI components.

[0024] In a possible implementation manner of the first aspect, clustering the initial UI components according to the similarities between the initial UI components to obtain at least one type of initial UI components includes:

[0025] Determining the number of categories of the initial UI components according to the similarities between the initial UI components;

[0026] Based on the number of categories of the initial UI components, the initial UI components are divided into n categories of initial UI components; wherein n is the value of the number of categories of the initial UI components.

[0027] In a possible implementation manner of the first aspect, performing feature classification on the initial UI components to obtain at least one type of initial UI components includes:

[0028] Classifying the initial UI components into m groups according to their functional features and topological structures; wherein the functional features and topological structures of the initial UI components in each group are the same, and m is an integer greater than 0;

[0029] For each of the m groups, determine a target feature vector of an initial UI component in the group;

[0030] Determine the similarity between the initial UI components in the group based on the target feature vectors of the initial UI components in the group, and determine the number of categories of the initial UI components in the group according to the similarity between the initial UI components in the group;

[0031] When the number of categories of initial UI components in the group reaches a preset value, the initial UI components in the group are divided into k categories of initial UI components based on the number of categories of initial UI components in the group; wherein k is the value of the number of categories of the initial UI components in the group.

[0032] In a possible implementation manner of the first aspect, the method further includes:

[0033] When the number of categories of the initial UI components in the group does not reach a preset value, the initial UI components in the group are determined as one type of initial UI components.

[0034] In a possible implementation manner of the first aspect, the method further includes:

[0035] Determining similarities between first initial UI components of different categories based on the target feature vector of the first initial UI component in each category of initial UI components;

[0036] When the similarity between first initial UI components of different classes is greater than a preset similarity threshold, the classes of the first initial components whose similarity is greater than the preset similarity threshold are merged into the same class.

[0037] In a possible implementation manner of the first aspect, determining a target feature vector of an initial UI component includes:

[0038] Convert the initial UI component to the initial UI component of the target format;

[0039] Extracting feature vectors based on the initial UI component in the target format to obtain a multi-dimensional initial feature vector of the initial UI component;

[0040] Based on the amount of information of the initial UI component contained in the initial feature vector of each dimension of the initial UI component, a target feature vector of the initial UI component is determined in the multidimensional initial feature vector of the initial UI component, wherein the amount of information of the initial UI component contained in the target feature vector reaches a preset information amount threshold, and the dimension of the target feature vector is the minimum dimension in the multidimensional initial feature vector such that the amount of information contained in the initial feature vectors of different dimensions reaches the preset information amount threshold.

[0041] In a possible implementation manner of the first aspect, determining, according to the first source file of the initial UI component of the type, a neutral model corresponding to the initial UI component of the type includes:

[0042] Determine the identity of the attribute tag of the reference source file in the initial UI component of this type; wherein the reference source file is a first source file in the initial UI component of this type; the attribute tag is used to characterize the constituent elements of the initial UI component, and the attribute tag includes at least one attribute parameter;

[0043] According to the reference source file in the first source file of the initial UI component of this type, other first source files of the initial UI component of this type are updated to the second source file; wherein the identity identifier of the attribute tag in the second source file is the same as the identity identifier of the target attribute tag in the reference source file; the target attribute tag in the reference source file refers to the attribute tag with the same name as the attribute tag in the second source file and contains the most first attribute parameters; wherein the first attribute parameter refers to the attribute parameter in the attribute tag whose parameter name is the same as the parameter name of the second attribute parameter of the attribute tag in the second source file and whose attribute value is a valid value; the second attribute parameter refers to the attribute parameter in the attribute tag in the second source file whose attribute value is a valid value; the target attribute tag in the second source file is the same as the parameter name of the attribute parameter whose attribute value is a valid value contained in the target attribute tag in the reference source file;

[0044] Based on the second source file, determine the public attribute parameters, the own attribute parameters and the attribute values ​​of the public attribute parameters in the initial UI component of this type, and build a neutral model of the initial UI component of this type according to the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in the initial UI component of this type; wherein the public attribute parameters refer to the attribute parameters whose attribute values ​​in the attribute tags of the same identity identifier in the second source file of this type have an appearance frequency reaching a first preset frequency threshold; the own attribute parameters refer to the attribute parameters other than the public attribute parameters in the second source file of this type, and the appearance frequency of the other attribute parameters is not less than the second preset frequency threshold; the second preset frequency threshold is less than the first preset frequency threshold;

[0045] The method further comprises:

[0046] Based on the neutral model and the second source file, updating the first source file;

[0047] The obtaining of the first source file of the initial UI component includes:

[0048] Get the updated first source file.

[0049] In a possible implementation manner of the first aspect, the number of first attribute parameters of the target attribute tag in the reference source file is the same as the number of second attribute parameters of the attribute tag in the second source file.

[0050] In a possible implementation manner of the first aspect, the parameter mapping table is further used to record a correspondence between a value of a user parameter of the initial UI component and a value of an attribute parameter in a first source file of the initial UI component;

[0051] The adjusting the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component includes:

[0052] Determining a target attribute parameter corresponding to the target user parameter based on a correspondence between a user parameter of the initial UI component in the parameter mapping table and an attribute parameter in the first source file of the initial UI component;

[0053] Determining an adjustment value of the target attribute parameter corresponding to the adjustment value of the target user parameter based on a correspondence between a value of the user parameter of the initial UI component in the parameter mapping table and a value of an attribute parameter in the first source file of the initial UI component;

[0054] Based on the adjusted value of the target attribute parameter, the value of the target attribute parameter in the first source file of the initial UI component is adjusted.

[0055] In a second aspect, an embodiment of the present application provides a UI component adjustment device, including:

[0056] A first acquisition unit, used to acquire a first source file of an initial UI component;

[0057] A second acquisition unit, used to acquire an adjustment value of a target user parameter of an initial UI component;

[0058] A processing unit obtains a parameter mapping table of the initial UI component, adjusts the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtains the target source file of the initial UI component, and generates a target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

[0059] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory for storing computer program instructions and a processor for executing the program instructions, wherein when the computer program instructions are executed by the processor, the electronic device is triggered to execute any one of the methods described in the first aspect above.

[0060] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium includes a stored program, wherein when the program is running, the device where the computer-readable storage medium is located is controlled to execute any method described in the first aspect.

[0061] Adopting the scheme provided in the embodiment of the present application, the first source file of the initial UI component is obtained; the adjustment value of the target user parameter of the initial UI component is obtained; the parameter mapping table of the initial UI component is obtained, and based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, the value of the target attribute parameter of the first source file in the initial UI component is adjusted to obtain the target source file of the initial UI component, and the target UI component is generated according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameter of the initial UI component and the attribute parameter in the first source file of the initial UI component. In the embodiment of the present application, after the UI component adjustment device obtains the adjustment value of the user parameter, it adjusts the value of the target attribute parameter corresponding to the target user parameter in the first source file of the initial UI component, thereby obtaining the target UI component that meets the user's needs. In this way, the operation of the user adjusting the UI component is simplified and the efficiency of adjusting the UI component is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0063] Figure 1 A schematic diagram of a scene of a UI component adjustment method in the related art;

[0064] Figure 2 A flowchart of a UI component adjustment method provided in an embodiment of the present application;

[0065] Figure 3 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0066] Figure 4 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0067] Figure 5 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0068] Figure 6 A schematic diagram of a scenario of a UI component adjustment method provided in an embodiment of the present application;

[0069] Figure 7 A schematic diagram of another UI component adjustment method provided in an embodiment of the present application;

[0070] Figure 8A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0071] Fig. 9 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0072] Fig.10 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0073] Fig.11 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0074] Figure 12a-12b A schematic diagram of another UI component adjustment method provided in an embodiment of the present application;

[0075] Fig.13 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0076] Fig.14 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0077] Fig.15 A flowchart of another UI component adjustment method provided in an embodiment of the present application;

[0078] Fig.16 A structural diagram of a UI component adjustment device provided in an embodiment of the present application;

[0079] Fig.17 A structural schematic diagram of another UI component adjustment device provided in an embodiment of the present application;

[0080] Fig.18 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0081] In order to better understand the technical solution of the present application, the embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0082] It should be clear that the described embodiments are only part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.

[0083] The terms used in the embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit the present application. The singular forms "a", "said" and "the" used in the embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings.

[0084] It should be understood that the term "and / or" used in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0085] Formulating corresponding design specifications for products is beneficial to product management, ensuring the continuity of product iterations and improving the user experience. For hardware products, corresponding design specifications can be formulated by limiting the parameters of the hardware products. However, it is difficult to explain the design specifications of software products with words alone. For example, the design specifications of UI (User Interface) components are difficult to explain with words alone and need to be explained in combination with design examples.

[0086] In some scenarios, it is necessary to adjust the UI components in the design example. For example, when the designer designs the UI components based on the design specifications, it is necessary to modify the UI components in the design example in combination with the business scenario to obtain the UI components that meet the design specifications in the business scenario. For example, when the design specifications are modified or migrated, the designer needs to modify the UI components in the design example to obtain the UI components that meet the modified design specifications. However, in the prior art, when adjusting the UI components, it is often necessary to use drawing tools to adjust them from the point and line dimensions, which is inconvenient and inefficient.

[0087] In some technologies, the design draft can be automatically generated based on the AIGC (Artificial Intelligence Generated Content) model and the input parameters. For example, the generated result of the input parameter "webpage illustration material with park as the theme" is as follows: Figure 1 However, this method has limited control over the generated results and it is difficult to generate UI components that meet the design specifications.

[0088] In response to the above problems, the embodiments of the present application provide a method, device, equipment and storage medium for adjusting a UI component, obtaining the first source file of the initial UI component; obtaining the adjustment value of the target user parameter of the initial UI component; obtaining the parameter mapping table of the initial UI component, adjusting the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtaining the target source file of the initial UI component, and generating the target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameter of the initial UI component and the attribute parameter in the first source file of the initial UI component. In the embodiments of the present application, after the UI component adjustment device obtains the adjustment value of the user parameter, it adjusts the value of the target attribute parameter corresponding to the target user parameter in the first source file of the initial UI component, thereby obtaining the target UI component that meets the user's needs. In this way, the user's operation of adjusting the UI component is simplified and the efficiency of adjusting the UI component is improved. The following is a detailed description.

[0089] See also Figure 2 , is a flow chart of a method for adjusting a UI component provided in an embodiment of the present application. Figure 2 As shown, the method includes:

[0090] Step S201: Obtain a first source file of an initial UI component.

[0091] In an embodiment of the present application, a UI component may be a component for constructing a user interface, and may be a visual program unit with a unique interactive function, such as a button, a check box, a text input box, etc. The first source file of the initial UI component may be a code file for describing the initial UI component. In some embodiments, the first source file may be a file in SVG (Scalable Vector Graphics, scalable vector graphics) format.

[0092] For ease of understanding, the embodiment of the present application is described by taking the first source file being a file in SVG format as an example.

[0093] Step S202: Obtain the adjustment value of the target user parameter of the initial UI component.

[0094] In an embodiment of the present application, the user parameters of the initial UI component may be parameters used to characterize the properties of the initial UI component and are easy for the user to understand. In some embodiments, the user parameters of the initial UI component may be pre-set according to user needs.

[0095] In some embodiments, the user may set the adjustment value of the target user parameter according to actual needs. At this time, the UI component adjustment device may obtain the adjustment value of the target user parameter set by the user.

[0096] Step S203, obtain the parameter mapping table of the initial UI component, adjust the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtain the target source file of the initial UI component, and generate the target UI component according to the target source file of the initial UI component.

[0097] The parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

[0098] In an embodiment of the present application, after obtaining the adjustment value of the target user parameter of the initial UI component, the UI component adjustment device can obtain a parameter mapping table of the initial UI component, in which the corresponding relationship between the user parameter of the initial UI component and the attribute parameter in the first source file of the initial UI component is recorded. The UI component adjustment device can determine the target attribute parameter corresponding to the target user parameter based on the parameter mapping table, and adjust the value of the target attribute parameter based on the adjustment value of the target user parameter, thereby obtaining a target source file of the initial UI component that meets the user's needs. After obtaining the target source file of the initial UI component, a corresponding UI component can be generated based on the source file, that is, a target UI component that meets the user's needs.

[0099] In the embodiment of the present application, after the UI component adjustment device obtains the adjustment value of the user parameter, it adjusts the value of the target attribute parameter corresponding to the target user parameter in the first source file of the initial UI component, thereby obtaining a target UI component that meets the user's needs. In this way, the user's operation of adjusting the UI component is simplified and the efficiency of adjusting the UI component is improved.

[0100] In some embodiments, the UI component adjustment device may obtain the parameter mapping table of the initial UI component from its own storage device, or may obtain it from other devices such as a server, which is not limited in the present application.

[0101] As a possible implementation, Figure 3 As shown, the parameter mapping table is also used to record the corresponding relationship between the value of the user parameter of the initial UI component and the value of the attribute parameter in the first source file of the initial UI component; based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, adjusting the value of the target attribute parameter of the first source file in the initial UI component includes:

[0102] Step S2031: Determine target attribute parameters corresponding to target user parameters based on the correspondence between the user parameters of the initial UI component in the parameter mapping table and the attribute parameters in the first source file of the initial UI component.

[0103] In an embodiment of the present application, a target attribute parameter corresponding to a target user parameter may be one or more. For example, assuming that the initial UI component is a table component, the target user parameter is the cell row height, and the target attribute parameter corresponding to the target user parameter may be the height attribute parameter of the rectangular element corresponding to the cell in the first source file. For example, assuming that the initial UI component is a button component, and the target user parameter is the button state of the target button, the target attribute parameter corresponding to the target user parameter may be the color attribute parameter of the rectangular element corresponding to the target button in the first source file, and the font color attribute parameter of the text element corresponding to the text in the target button.

[0104] Step S2032: Determine the adjustment value of the target attribute parameter corresponding to the adjustment value of the target user parameter based on the correspondence between the value of the user parameter of the initial UI component in the parameter mapping table and the value of the attribute parameter in the first source file of the initial UI component.

[0105] In an embodiment of the present application, the value of the target user parameter and the value of the corresponding target attribute parameter may be the same or different. As described in the above example, the target user parameter is the button state of the target button, and the target attribute parameter corresponding to the target user parameter may be the color attribute parameter of the rectangular element corresponding to the target button in the first source file, and the font color attribute parameter of the text element corresponding to the text in the target button. The adjustment value of the target attribute parameter is the selected state, the adjustment value of the color attribute parameter of the rectangular element corresponding to the target button is blue, and the adjustment value of the font color attribute parameter of the text element corresponding to the text in the target button is white.

[0106] Step S2033: Based on the adjusted value of the target attribute parameter, adjust the value of the target attribute parameter in the first source file of the initial UI component.

[0107] In the embodiment of the present application, after the adjustment value of the target attribute parameter is determined, the value of the target attribute parameter in the first source file of the initial UI component is adjusted to the corresponding adjustment value.

[0108] See also Figure 4 , is a flow chart of a method for adjusting a UI component provided in an embodiment of the present application. Figure 4 As shown, the method includes:

[0109] Step S401: Acquire an initial UI component and determine user parameters of the initial UI component.

[0110] In the embodiment of the present application, the initial UI component may be a UI component that can be adjusted by the user, and the user parameter of the initial UI component may be determined according to the adjustment requirements of the user. The value of the user parameter of the initial UI component is adjustable by the user.

[0111] In some embodiments, the parameters that the user needs to adjust may be determined based on the design specification of the initial UI component, and the parameters may be determined as the user parameters of the initial UI component.

[0112] In some embodiments, the historical modification frequency of the initial UI component attribute parameter may be obtained, and the attribute parameter whose historical modification frequency exceeds the modification frequency threshold may be determined as a corresponding parameter that is easy for the user to understand and is determined as the user parameter.

[0113] In some embodiments, the initial UI component may be a UI component that complies with design specifications.

[0114] In some embodiments, a UI component that conforms to the design specification can be obtained from a design page that conforms to the design specification. The design page includes at least one design component. The UI component that conforms to the design specification can be obtained from the design page that conforms to the design specification by annotation, and annotation information of the UI component can be obtained, and the annotation information is used to characterize the functional characteristics of the UI component. After the annotation is completed, the UI component corresponding to the annotation information whose occurrence frequency exceeds a threshold can be determined as the initial UI component.

[0115] In some embodiments, the occurrence frequency of the annotation information may be sorted, and the UI components corresponding to the annotation information sorted within the target sorting range may be determined as the initial UI components. For example, the occurrence frequency of the annotation information may be sorted from high to low, and the UI components corresponding to the annotation information sorted in the top 50 may be determined as the initial UI components.

[0116] In some embodiments, the UI components in the design pages that at least partially conform to the design specifications can be determined by manual annotation, and the annotation information of the UI components can be determined. A neural network model can be trained based on the design pages, the UI components in the design pages, and the annotation information of the UI components to obtain a design page UI component perception model. Fig.15 As shown, based on the design page UI component perception model, the UI components in the design pages that at least partially conform to the design specifications can be determined, and the annotation information of these UI components can be determined, which can reduce manual participation and improve annotation efficiency.

[0117] Step S402: Determine the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component, and record them in a parameter mapping table of the initial UI component.

[0118] In an embodiment of the present application, the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component can be determined based on the correspondence between the role corresponding to the user parameters of the initial UI component and the role of the attribute parameters in the first source file of the initial UI component. In some embodiments, the attribute parameters in the first source file having the same role as the user parameters of the initial UI component can be determined as the corresponding attribute parameters.

[0119] Step S403: Obtain the first source file of the initial UI component.

[0120] Please refer to step S201 for details, which will not be described again here.

[0121] Step S404: Obtain the adjustment value of the target user parameter of the initial UI component.

[0122] Please refer to step S201 for details, which will not be described again here.

[0123] Step S405, obtain the parameter mapping table of the initial UI component, adjust the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtain the target source file of the initial UI component, and generate the target UI component according to the target source file of the initial UI component.

[0124] Please refer to step S201 for details, which will not be described again here.

[0125] As a possible implementation, Figure 5 and Fig.15 As shown, a method for adjusting a UI component includes:

[0126] Step S501: Obtain an initial UI component.

[0127] Please refer to step S401 for details, which will not be repeated here.

[0128] Step S502: classify the initial UI components by features to obtain at least one category of initial UI components.

[0129] In the embodiment of the present application, initial UI components having the same type of features may be determined as a type of initial UI components.

[0130] Step S503: for each type of initial UI component in at least one type of initial UI components, determine the user parameters of the type of initial UI component.

[0131] Among the user parameters of this type of initial UI component, there is at least one first user parameter, and the first user parameter is the same user parameter of at least a preset number of initial UI components in this type of initial UI component.

[0132] For details, please refer to step S401, which will not be described again here.

[0133] It should be noted that, for each of at least one type of initial UI components, the user parameters of at least a preset number of initial UI components in the initial UI component of this type all include the first user parameter.

[0134] For example, Figure 6 As shown, for a type of initial UI component of the table class, the design specifications of this type of initial UI component stipulate parameters such as style, size, header background, stripes, etc., among which the historical modification frequency of parameters such as cell line height, cell content indentation distance, font size, etc. exceeds the modification frequency threshold, and these parameters can be determined as user parameters.

[0135] Step S504: Determine a neutral model corresponding to the initial UI component of the type according to the first source file of the initial UI component of the type, where the neutral model includes at least one property parameter in the first source file of at least one initial UI component of the type.

[0136] In an embodiment of the present application, for each type of initial UI component in at least one type of initial UI components, the neutral model corresponding to the type of initial UI component may include at least one attribute parameter corresponding to a user parameter of the type of initial UI component. Alternatively, the neutral model corresponding to the type of initial UI component may include all attribute parameters in the first source file of the type of initial UI component.

[0137] Step S505: determine the correspondence between the user parameters of the initial UI component of this type and the attribute parameters in the neutral model, and record them in a parameter mapping table of the initial UI component of this type.

[0138] Please refer to step S402 for details, which will not be described again here.

[0139] It should be noted that, for each type of initial UI component in at least one type of initial UI components, the user parameters of this type of initial UI components may include the user parameters of at least some of the initial UI components in this type of initial UI components, and the neutral model of this type of initial UI components may include at least some of the attribute parameters in the first source file of at least some of the initial UI components in this type of initial UI components.

[0140] For each type of initial UI component in at least one type of initial UI components, the parameter mapping table of the type of initial UI components can be applied to at least some of the initial UI components in the type of initial UI components. In this way, the efficiency of determining the correspondence between the user parameters of the initial UI components and the attribute parameters in the first source file of the initial UI components can be improved.

[0141] In order to make the classification result of the feature classification of the initial UI components conform to the design knowledge and facilitate the user's understanding, as a possible implementation method, the above step S502 classifies the initial UI components by features to obtain at least one type of initial UI components including:

[0142] Feature classification is performed according to functional features and topological structures of the initial UI components to obtain at least one type of initial UI components.

[0143] In the embodiment of the present application, the functional features of the initial UI component can reflect the design knowledge of the designer and the high-level semantic information of the initial UI component. Feature classification based on the functional features and topological structure of the initial UI component can increase the influence of human factors in feature classification, so that the classification result meets expectations.

[0144] In some embodiments, the functional characteristics of the initial UI component may be determined based on the annotation information of the initial UI component.

[0145] In some embodiments, the topological structure of the initial UI component may be determined by parsing the code structure of the first source file of the initial UI component, or may be determined manually.

[0146] In some embodiments, the UI component adjustment apparatus performs feature classification based on functional features and topological structures of the initial UI components.

[0147] In some embodiments, feature classification may be performed manually based on preset rules according to functional features and topological structures of the initial UI components to obtain at least one type of initial UI components.

[0148] like Figure 7 As shown, the functional features of the button group UI component, the radio button block UI component and the operation block UI component are all selected functions, and the topological structures are all one-dimensional horizontal arrangements. Therefore, the button group UI component, the radio button block UI component and the operation block UI component are determined as a type of initial UI component, that is, a one-dimensional horizontal arrangement structural element.

[0149] In order to facilitate the subsequent steps of determining the neutral model corresponding to each of at least one type of initial UI components, the initial UI components can be feature classified based on machine vision as a possible implementation method, such as Figure 8As shown, step S502 classifies the initial UI components by features, and obtains at least one type of initial UI components including:

[0150] Step S801: Determine the target feature vector of the initial UI component.

[0151] The target feature vector represents the image feature information of the initial UI component.

[0152] In the embodiment of the present application, the target feature vector of the initial UI component may represent the image feature information of the initial UI component, and thus the initial UI component may be feature classified based on the target feature vector of the initial UI component.

[0153] As a possible implementation, Fig. 9 As shown, determining the target feature vector of the initial UI component includes:

[0154] Step S8011: Convert the initial UI component into an initial UI component in a target format.

[0155] In an embodiment of the present application, in order to facilitate the extraction of feature vectors from the initial UI component, the initial UI component may be converted into an initial UI component of a target format. In some embodiments, the target format may be an image format, such as a PNG (Portable Network Graphic Format) format.

[0156] Step S8012: extract feature vectors based on the initial UI component in the target format to obtain a multi-dimensional initial feature vector of the initial UI component.

[0157] In the embodiment of the present application, the multi-dimensional initial feature vector of the initial UI component may represent the image feature information of the initial UI component.

[0158] In some embodiments, assuming that the target format is an image format, feature vectors of the initial UI components in the image format can be extracted based on the ViT (Vision Transformer) model, and the initial UI components in the image format can be converted into a 1000-dimensional embedded vector, that is, a 1000-dimensional initial feature vector.

[0159] Step S8013: Based on the amount of information of the initial UI component contained in each dimensional initial feature vector of the initial UI component, determine a target feature vector of the initial UI component in the multi-dimensional initial feature vector of the initial UI component.

[0160] The amount of information of the initial UI components contained in the target feature vector reaches a preset information threshold, and the dimension of the target feature vector is the minimum dimension of the multidimensional initial feature vector in which the amount of information contained in the initial feature vectors of different dimensions reaches the preset information threshold.

[0161] In an embodiment of the present application, a partial-dimensional initial feature vector can be determined in the multi-dimensional initial feature vector of the initial UI component, and the partial-dimensional initial feature vector can be determined as the target feature vector. The dimension of the target feature vector is the minimum dimension that makes the target feature vector contain information about the initial UI component that reaches a preset information threshold. In this way, the characterization effect of the target feature vector on the image feature information of the initial UI component is still within expectations, and the amount of calculation in subsequent steps can be reduced, thereby reducing the computing power requirements of the UI component adjustment device.

[0162] In some embodiments, the preset information amount threshold may be set to 90% of the information amount contained in the multi-dimensional initial feature vector.

[0163] In some embodiments, a PCA (Principal Component Analysis) method may be used to determine a target feature vector of the initial UI component from the multi-dimensional feature vector of the initial UI component.

[0164] In some embodiments, the data of each dimension of the multi-dimensional initial feature vector is sorted from high to low based on the amount of information of the initial UI components it contains, and the first x dimensions of data can be determined as the target feature vector, where x is the value of the minimum dimension that enables the amount of information of the initial UI components contained in the target feature vector to reach a preset information amount threshold.

[0165] As described in the above example, after obtaining the 1000-dimensional initial feature vector of the initial UI component and sorting the amount of information of the initial UI component contained in each dimension of the 1000-dimensional initial feature vector of the initial UI component from high to low, assuming that the minimum dimension value that can make the amount of information of the initial UI component contained in the target feature vector reach the preset information amount threshold is 15, then the first 15 dimensions of the 1000-dimensional initial feature vector of the initial UI component are determined as the target feature vector of the initial UI component.

[0166] Step S802: Determine the similarity between the initial UI components based on the target feature vectors of the initial UI components.

[0167] In the embodiment of the present application, the target feature vector of the initial UI component may represent the image feature information of the initial UI component, and thus the similarity between the target feature vectors of the initial UI components may be determined as the similarity between the initial UI components.

[0168] In some embodiments, the similarity between the target feature vectors of the initial UI components may be a cosine similarity between the target feature vectors of the initial UI components.

[0169] Step S803: clustering the initial UI components according to the similarities between the initial UI components to obtain at least one type of initial UI components.

[0170] In the embodiment of the present application, the similarity between the initial UI components can represent the approximation between the image feature information of the initial UI components. Therefore, the initial UI components can be clustered according to the similarity between the initial UI components to obtain at least one category of initial UI components.

[0171] As a possible implementation, Figure 8 As shown, according to the similarity between the initial UI components, the initial UI components are clustered to obtain at least one type of initial UI components including:

[0172] Step S8031: Determine the number of categories of initial UI components according to the similarities between the initial UI components.

[0173] In the embodiment of the present application, before clustering the initial UI components based on some clustering methods, the number of categories of the initial UI components needs to be determined first. For example, for the k-means clustering algorithm, the number of categories of the initial UI components needs to be determined first.

[0174] In some embodiments, a hierarchical clustering method may be used to determine the number of categories of initial UI components according to the similarities between the initial UI components.

[0175] Step S8032: based on the number of categories of the initial UI components, divide the initial UI components into n categories of initial UI components.

[0176] Where n is the value of the number of categories of the initial UI components.

[0177] In an embodiment of the present application, after determining the number of categories of initial UI components, the initial UI components can be divided into initial UI components of the number of categories. In some embodiments, the initial UI components can be divided into n categories of initial UI components based on a k-means clustering algorithm.

[0178] In order to make the classification results of the feature classification of the initial UI components conform to the design knowledge, easy for users to understand, and easy for subsequent steps to determine the neutral model corresponding to each type of initial UI components in at least one type of initial UI components, the feature classification of the initial UI components can be performed based on machine vision and design knowledge. As a possible implementation method, Fig.11As shown, step S502 classifies the initial UI components by features, and obtains at least one type of initial UI components including:

[0179] Step S1101 , classify the initial UI components according to their functional features and topological structures, and divide the initial UI components into m groups.

[0180] The functional characteristics and topological structure of the initial UI components in each group are the same, and m is an integer greater than 0.

[0181] Specifically, the above steps may be referred to for feature classification according to the functional features and topological structures of the initial UI components to obtain at least one type of initial UI components, which will not be described in detail here.

[0182] In some embodiments, the user parameters of the initial UI components are determined from the perspective of user understanding, while the classification of the functional features and topological structures of the initial UI components is performed from the perspective of design knowledge. Therefore, in order to facilitate user understanding, the initial UI components can be classified according to the functional features and topological structures of the initial UI components, and after the initial UI components are divided into m groups, the user parameters of each group of initial UI components can be determined.

[0183] Step S1102: for each of the m groups, determine the target feature vector of the initial UI component in the group.

[0184] Please refer to step S801 for details, which will not be described again here.

[0185] Step S1103: determining the similarity between the initial UI components in the group based on the target feature vectors of the initial UI components in the group, and determining the number of categories of the initial UI components in the group according to the similarity between the initial UI components in the group.

[0186] For details, please refer to step S802 and step S8031, which will not be repeated here.

[0187] In an embodiment of the present application, in order to improve the accuracy of classification, after feature classification is performed according to the functional features and topological structure of the initial UI components, it can be further determined from the perspective of machine vision whether the grouping results of feature classification based on the functional features and topological structure of the initial UI components need to be adjusted. The UI component adjustment device can determine whether to adjust the grouping results for each group in the m groups based on the number of categories of the initial UI components in the group, and the following steps are performed differently for different numbers of categories. When the number of categories of the initial UI components in the group reaches a preset value, step S1104a is executed; when the number of categories of the initial UI components in the group does not reach the preset value, step S1104b is executed.

[0188] Step S1104a: when the number of categories of initial UI components in the group reaches a preset value, the initial UI components in the group are divided into k categories of initial UI components based on the number of categories of initial UI components in the group.

[0189] Wherein, k is the value of the number of categories of initial UI components in the group.

[0190] In the embodiment of the present application, when the number of categories of the initial UI components in the group reaches a preset value, it indicates that the initial UI components in the group need to be further classified based on the similarity between the target feature vectors of the initial UI components in the group. The initial UI components in the group are divided into k categories of initial UI components based on the number of categories of the initial UI components in the group. For details, refer to step S8032, which will not be repeated here.

[0191] In some embodiments, the preset value can be set to 2, that is, when the number of categories of initial UI components in the group reaches 2, the initial UI components in the group are divided into k categories of initial UI components based on the number of categories of initial UI components in the group.

[0192] In some embodiments, assuming that the user parameters of the group of initial UI components are determined in the above steps, after the initial UI components in the group are divided into k categories of initial UI components, the user parameters of the group of initial UI components can be determined as the user parameters of each category of initial UI components of the k categories of initial UI components.

[0193] In some embodiments, for each type of initial UI components in the k types of initial UI components, the user parameters of the type of initial UI components may be determined based on the user parameters of other groups of initial UI components.

[0194] For example, assuming the preset value is 2, Fig.12a FIG. 1 shows a group of initial UI components. When the number of categories of the initial UI components in the group is 3, k=3. The initial UI components in the group can be divided into the following categories based on the number of categories of the initial UI components in the group: Figure 12b The 3 categories of initial UI components are shown.

[0195] Step S1104b: when the number of categories of the initial UI components in the group does not reach a preset value, the initial UI components in the group are determined as one category of initial UI components.

[0196] In an embodiment of the present application, when the number of categories of initial UI components in the group does not reach a preset value, it means that there is no need to perform further classification processing on the initial UI components in the group based on the similarity between the target feature vectors of the initial UI components in the group, that is, the initial UI components in the group can be determined as a type of initial UI components.

[0197] In some embodiments, the preset value may be set to 2, that is, when the number of categories of the initial UI components in the group is 1, the initial UI components in the group are determined as a type of initial UI components.

[0198] In some embodiments, assuming that the user parameters of the group of initial UI components are determined in the above steps, the user parameters of the group of initial UI components may be determined as the user parameters of this type of initial UI components.

[0199] Step S1105: determining similarities between first initial UI components of different categories based on the target feature vector of the first initial UI component in each category of initial UI components.

[0200] In an embodiment of the present application, the first initial UI component in each type of initial UI component may be any initial UI component in the type of initial UI component. In some embodiments, the cosine similarity between the target feature vectors of the first initial UI components of different types may be determined as the similarity between the first initial UI components of different types.

[0201] Step S1106: When the similarity between first initial UI components of different categories is greater than a preset similarity threshold, the categories of the first initial components whose similarity is greater than the preset similarity threshold are merged into the same category.

[0202] In the embodiment of the present application, the similarity between different initial UI components in each class of initial UI components is high, so the similarity between the first initial UI components of different classes can reflect the similarity between the initial UI components of different classes. If the similarity between the first initial UI components of different classes is greater than the preset similarity threshold, it means that the similarity between the initial UI components of different classes is high, and the classes where the first initial components with similarity greater than the preset similarity threshold belong can be merged into the same class.

[0203] In some embodiments, the user parameters of the initial UI components of these classes may be determined as the user parameters of the initial UI components of the merged class.

[0204] In order to summarize the property parameters with the same effect as the first source file of the initial UI component of this type, as a possible implementation method, Fig.13 As shown, step S504 determines, according to the first source file of the initial UI component of this type, that the neutral model corresponding to the initial UI component of this type includes:

[0205] Step S1301: Determine the identity of the attribute tag of the reference source file in the initial UI component of this type.

[0206] The reference source file is a first source file in the initial UI component of this type; the attribute tag is used to characterize the constituent elements of the initial UI component, and the attribute tag includes at least one attribute parameter.

[0207] In the embodiment of the present application, the attribute tag is used to characterize the constituent elements of the initial UI component, such as a rectangle (rect), a circle (circle), a path (path), etc. The attribute parameters in the attribute tag are used to characterize the attribute characteristics of the element corresponding to the attribute tag. For example, the height attribute parameter in the rectangle attribute tag is used to characterize the height of the rectangle.

[0208] The attribute parameter is included in the attribute tag, which determines the identity of the attribute tag, that is, determines the identity of the attribute parameter included in the attribute tag. The identities of different attribute tags with the same name in the reference source file are different.

[0209] In some embodiments, a first source file may be randomly selected from the first source files of the initial UI component of this type, and the first source file may be determined as the reference source file.

[0210] In order to make the reference source file contain the largest number of property parameters, in some embodiments, the largest first source file among the first source files of the initial UI components of this type may be determined as the reference source file of the initial UI components of this type.

[0211] In some embodiments, for each attribute tag of a name, if the number of attribute tags of the name contained in the base source file is less than the maximum number of attribute tags of the name contained in the first source file of the initial UI component of this type, the attribute tags of the name are added to the base source file so that the number of attribute tags of the name contained in the base source file is the maximum number of attribute tags of the name contained in the first source file of the initial UI component of this type.

[0212] In some embodiments, after determining the identity of the attribute tag of the reference source file of the initial UI component of this type, the identity of other first source files can be determined based on the reference source file. For each of the other first source files, for each attribute tag in each of the other first source files, if the number of attribute tags containing the name in the other first source files is less than the number of attribute tags containing the name in the reference source file, then the identity of the attribute tag in the other first source file can be determined as the identity of an attribute tag of the name in the reference source file. If the attribute parameters contained in the attribute tag in the other first source file contain attribute parameters that are not contained in the attribute tag of the identity in the reference source file, then the attribute parameters are added to the attribute tag of the identity in the reference source file.

[0213] Step S1302: according to the reference source file in the first source file of the initial UI component of this type, update the other first source files of the initial UI component of this type into the second source files.

[0214] Among them, the identity identifier of the attribute tag in the second source file is the same as the identity identifier of the target attribute tag in the reference source file; the target attribute tag in the reference source file refers to the attribute tag with the same name as the attribute tag in the second source file and contains the most first attribute parameters; wherein the first attribute parameter refers to the attribute parameter in the attribute tag whose parameter name is the same as the parameter name of the second attribute parameter of the attribute tag in the second source file and whose attribute value is a valid value; the second attribute parameter refers to the attribute parameter in the attribute tag in the second source file whose attribute value is a valid value.

[0215] The other first source files are other first source files except the reference source file in the first source files of the initial UI component of this type. The target attribute tag in the second source file has the same parameter name as the attribute parameter whose attribute value is a valid value contained in the target attribute tag in the reference source file.

[0216] In the embodiment of the present application, after determining the identity of the attribute tag of the reference source file of the initial UI component of this type, the identity of the attribute tag of another first source file can be determined based on the reference source file of the initial UI component of this type. For each of the attribute tags in the other first source file, the corresponding target attribute tag is determined from the attribute tags with the same name as the attribute tag in the reference source file, and the identity of the target attribute tag is determined as the identity of the attribute tag.

[0217] In this way, the identity identifiers of attribute tags with the same function in different source files in the group of initial UI components can be made the same.

[0218] In some embodiments, in order to facilitate comparison of the attribute values ​​of the attribute parameters, the attribute values ​​of the attribute parameters with the same name and the same identity contained in the attribute tags of the same name in different second source files of the initial UI component of this type are described in the same way. For example, the attribute value description methods of the d attribute parameter in the path attribute tags (path) with the same identity in different second source files are the same, all of which are arc description methods, or all of which are Bezier curve description methods, or all of which are the same as the attribute value description methods of the d attribute parameter in the reference source file.

[0219] In some embodiments, if the attribute value description method of the d attribute parameter in the path attribute tag in the first source file is a Bezier curve description method, the attribute value of the corresponding arc description method can be determined based on the key control points of the Bezier curve in the attribute value of the d attribute parameter.

[0220] In some embodiments, the structures of the group tag attributes (group) in different second source files of the initial UI component of this type are the same.

[0221] In some embodiments, the absolute coordinates of each element in the group can be determined based on the group attribute tags in other first source files and the attribute values ​​of the relative coordinate attribute parameters in the group attribute tags, and the attribute values ​​of the relative coordinate attribute parameters in the group attribute tags of other first source files can be determined based on the absolute coordinates of each element and the group attribute tags in the reference source file, so that the structure of the group attribute tags in the second source file is the same as the structure of the group tag attributes in the reference source file.

[0222] For example, Fig.14 As shown, step S1301 determines the identity of the attribute tag of the reference source file in the initial UI component of this type and step S1302 updates other first source files of the initial UI component of this type to second source files according to the reference source file in the first source file of the initial UI component of this type, including the following steps:

[0223] Step S1401: determine a reference source file from the first source file of the initial UI component of this type, and determine an identity of an attribute tag of the reference source file.

[0224] Step S1402: for each attribute tag of other first source files of the initial UI component of this type, determine an attribute tag in the base source file that has the same name as the attribute tag.

[0225] Step S1403: Determine whether the name of the attribute tag is path.

[0226] If the name of the attribute tag is a path, execute the following steps S1404-S1407; if the name of the attribute tag is not a path, execute the following steps S1406-S1407.

[0227] Step S1404: If the name of the attribute tag is a path attribute tag, and if the description method of the d attribute parameter of the attribute tag is a Bezier curve description method, determine the attribute value of the corresponding arc description method according to the key control point in the attribute value of the d attribute parameter of the attribute tag.

[0228] Step S1405: Update the attribute value to the attribute value of the corresponding arc description method.

[0229] Step S1406: Determine the identity of the attribute tag in the other first source file as the identity of the attribute tag of the name in the reference source file.

[0230] Step S1407: determine the target attribute tag in the reference source file, and based on the identity of the target attribute tag, update the identity of the attribute tag in other first source files to obtain the corresponding second source file.

[0231] As a possible implementation manner, the number of first attribute parameters of the target attribute tag in the reference source file is the same as the number of second attribute parameters of the attribute tag in the second source file.

[0232] In an embodiment of the present application, in order to improve the accuracy of determining the identity, the number of first attribute parameters of the target attribute tag in the reference source file is the same as the number of second attribute parameters of the attribute tag in the second source file. In this way, the target attribute tag of the reference source file and the attribute tag of the second source file contain attribute parameters whose attribute values ​​are valid values ​​with the same names and the same number. For example, suppose the attribute tag of the second source file contains three attribute parameters whose attribute values ​​are valid values, and the names of these three attribute parameters are A, B, and C. The attribute tag with the same name as in the reference source file, which contains attribute parameters named A, B, and C, and whose attribute values ​​of the attribute parameters named A, B, and C are all valid values, and the number of attribute parameters whose attribute values ​​are valid values ​​is 3, can be determined as the target attribute tag.

[0233] Step S1303: Based on the second source file, determine the public attribute parameters, the own attribute parameters and the attribute values ​​of the public attribute parameters in the initial UI component of this type, and construct a neutral model of the initial UI component of this type according to the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in the initial UI component of this type.

[0234] Among them, public attribute parameters refer to attribute parameters whose attribute values ​​in the attribute tags of the same identity identifier in the second source file of the class have an appearance frequency reaching the first preset frequency threshold; proprietary attribute parameters refer to other attribute parameters in the second source file of the class except public attribute parameters, and the appearance frequency of other attribute parameters is not less than the second preset frequency threshold; the second preset frequency threshold is less than the first preset frequency threshold.

[0235] In an embodiment of the present application, for an attribute parameter in an attribute tag of the same identity in the second source file of the class, it is determined whether the attribute parameter has an attribute value whose occurrence frequency reaches a first preset frequency threshold, and if so, the attribute parameter is determined as a public attribute parameter, and the attribute value is determined as the attribute value of the public attribute parameter. If the attribute parameter does not have an attribute value whose occurrence frequency reaches the first preset frequency threshold and the occurrence frequency of the attribute parameter is not less than the second preset frequency threshold, the attribute parameter is determined as a private attribute parameter.

[0236] The neutral model of this type of initial UI component includes its own attribute parameters and public attribute parameters, wherein the attribute value of the public attribute parameter is its corresponding attribute value, and the attribute value of the own attribute parameter is invalid content.

[0237] In some embodiments, the second preset frequency threshold may be set to a value greater than 0, so that when constructing the neutral model, attribute parameters that are included in only a few second source files are discarded.

[0238] In some embodiments, the second preset frequency threshold may be set to 0, so that when constructing the neutral model, all attribute parameters of the second source file of the initial UI component of this type may be retained.

[0239] By building a neutral model based on the second source file in this way, the repeated attribute parameters in the second source file of this type of initial UI component can be extracted, the number of attribute parameters in the neutral model can be reduced, and the efficiency of determining the correspondence between the user parameters of this type of initial UI component and the corresponding attribute parameters in the neutral model can be improved.

[0240] Public attribute parameters generally correspond to the topological structure characteristics of the initial UI component of this type, and the topological structure characteristics reflect the functional characteristics of the initial UI component of this type; while private attribute parameters generally correspond to visual style characteristics such as color and line thickness. Therefore, after determining the public attribute parameters and private attribute parameters, the identification of functional characteristics and visual style characteristics is realized, creating conditions for the subsequent separation of functional characteristics and visual style characteristics.

[0241] As a possible implementation manner, after determining the public attribute parameters, the own attribute parameters and the attribute values ​​of the public attribute parameters in this type of initial UI component based on the second source file, and constructing the neutral model of this type of initial UI component according to the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in this type of initial UI component, in order to make the first source file of this type of initial UI component correspond to the neutral model, the method also includes: updating the first source file based on the neutral model and the second source file.

[0242] In an embodiment of the present application, the attribute values ​​of the own attribute parameters in the updated first source file can be determined based on the second source file, and the updated first source file can be obtained based on the public attribute parameters and their attribute values ​​in the neutral model, as well as the above-mentioned own attribute parameters and their attribute values. The updated first source file includes public attribute parameters and own attribute parameters, wherein the attribute values ​​of the public attribute parameters in the updated first source file are the same as the attribute values ​​of the public attribute parameters in the neutral model, and the attribute values ​​of the own attribute parameters in the updated first source file are the same as the attribute values ​​of the own attribute parameters in the second source file. In this way, the updated first source file has a corresponding relationship with the neutral model, and the corresponding relationship between the attribute parameters in the updated first source file and the user parameters of the initial UI component is the corresponding relationship between the attribute parameters of the neutral model and the user parameters of this type of initial UI component.

[0243] At this time, the above step S201 of obtaining the first source file of the initial UI component includes: obtaining the updated first source file.

[0244] In the embodiment of the present application, the correspondence between the attribute parameters in the updated first source file and the user parameters of the initial UI component is the correspondence between the attribute parameters of the neutral model and the user parameters of the initial UI component of this type.

[0245] For example, Figure 6 As shown, the attribute parameter in the neutral model corresponding to the user parameter cell row height is the height attribute parameter (height) in the rectangle attribute tag (rect) with the identity identifier (id) being cell_1_bk; the attribute parameter in the neutral model corresponding to the user parameter cell content indent distance is the x attribute parameter in the rectangle attribute tag (rect) with the identity identifier (id) being cell_1_bk; the attribute parameter in the neutral model corresponding to the user parameter font size is the font attribute parameter (font) in the text attribute tag (text) with the identity identifier (id) being cell_1_bk.

[0246] refer to Fig.16 , is a structural diagram of a UI component adjustment device provided in an embodiment of the present application. Fig.16 As shown, the device comprises:

[0247] The first acquisition unit 1601 is used to acquire a first source file of an initial UI component.

[0248] The second acquisition unit 1602 is used to acquire the adjustment value of the target user parameter of the initial UI component.

[0249] Processing unit 1603 obtains a parameter mapping table of the initial UI component, adjusts the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtains the target source file of the initial UI component, and generates a target UI component according to the target source file of the initial UI component.

[0250] The parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

[0251] As a possible implementation method, the parameter mapping table is also used to record the correspondence between the values ​​of the user parameters of the initial UI component and the values ​​of the attribute parameters in the first source file of the initial UI component. The processing unit 1603 is specifically used to determine the target attribute parameters corresponding to the target user parameters based on the correspondence between the user parameters of the initial UI component in the parameter mapping table and the attribute parameters in the first source file of the initial UI component; determine the adjustment value of the target attribute parameter corresponding to the adjustment value of the target user parameter based on the correspondence between the values ​​of the user parameters of the initial UI component in the parameter mapping table and the values ​​of the attribute parameters in the first source file of the initial UI component; and adjust the value of the target attribute parameter in the first source file of the initial UI component based on the adjustment value of the target attribute parameter.

[0252] As a possible implementation, Fig.17 As shown, the UI component adjustment device also includes:

[0253] The first determining unit 1604 is configured to obtain an initial UI component and determine a user parameter of the initial UI component.

[0254] The second determining unit 1605 is used to determine the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component, and record the correspondence in the parameter mapping table of the initial UI component.

[0255] As a possible implementation manner, the first determining unit 1604 is specifically configured to perform feature classification on the initial UI components to obtain at least one category of initial UI components; and for each category of initial UI components in the at least one category of initial UI components, determine user parameters of the category of initial UI components.

[0256] Among them, there is at least one first user parameter in the user parameters of this type of initial UI component; the first user parameter is the same user parameter of at least a preset number of initial UI components in this type of initial UI component.

[0257] The second determination unit 1605 is specifically used to determine a neutral model corresponding to the initial UI component of this type based on the first source file of the initial UI component of this type, where the neutral model includes at least one attribute parameter in the first source file of at least one initial UI component of this type; and determine the correspondence between the user parameters of the initial UI component of this type and the attribute parameters in the neutral model.

[0258] As a possible implementation manner, the first determining unit 1604 is specifically configured to perform feature classification according to functional features and topological structures of the initial UI components to obtain at least one type of initial UI components.

[0259] As a possible implementation method, the first determination unit 1604 is specifically used to determine the target feature vector of the initial UI component; the target feature vector represents the image feature information of the initial UI component; based on the target feature vector of the initial UI component, the similarity between the initial UI components is determined; according to the similarity between the initial UI components, the initial UI components are clustered to obtain at least one category of initial UI components.

[0260] As a possible implementation manner, the first determining unit 1604 is specifically configured to determine the number of categories of initial UI components according to similarities between the initial UI components; and divide the initial UI components into n categories of initial UI components based on the number of categories of the initial UI components.

[0261] Where n is the value of the number of categories of the initial UI components.

[0262] As a possible implementation method, the first determination unit 1604 is specifically used to perform feature classification according to functional features and topological structures of the initial UI components, and divide the initial UI components into m groups; wherein the functional features and topological structures of the initial UI components in each group are the same, and m is an integer greater than 0; for each of the m groups, determine the target feature vector of the initial UI components in the group; based on the target feature vector of the initial UI components in the group, determine the similarity between the initial UI components in the group, and based on the similarity between the initial UI components in the group, determine the number of categories of the initial UI components in the group; when the number of categories of the initial UI components in the group reaches a preset value, divide the initial UI components in the group into k categories of initial UI components based on the number of categories of the initial UI components in the group; wherein k is the value of the number of categories of the initial UI components in the group.

[0263] As a possible implementation manner, the first determining unit 1604 is specifically configured to determine the initial UI components in the group as one type of initial UI components when the number of categories of the initial UI components in the group does not reach a preset value.

[0264] As a possible implementation method, the first determination unit 1604 is specifically used to determine the similarity between first initial UI components of different classes based on the target feature vector of the first initial UI component in each class of initial UI components; when the similarity between the first initial UI components of different classes is greater than a preset similarity threshold, the classes of the first initial components whose similarity is greater than the preset similarity threshold are merged into the same class.

[0265] As a possible implementation method, the first determination unit 1604 is specifically used to convert the initial UI component into an initial UI component in a target format; extract a feature vector based on the initial UI component in the target format to obtain a multi-dimensional initial feature vector of the initial UI component; based on the amount of information of the initial UI component contained in the initial feature vector of each dimension of the initial UI component, determine the target feature vector of the initial UI component in the multi-dimensional initial feature vector of the initial UI component, wherein the amount of information of the initial UI component contained in the target feature vector reaches a preset information amount threshold, and the dimension of the target feature vector is the minimum dimension in the multi-dimensional initial feature vector in which the amount of information contained in the initial feature vectors of different dimensions reaches the preset information amount threshold.

[0266] As a possible implementation, the second determination unit 1605 is specifically used to determine the identity of the attribute tag of the reference source file in the initial UI component of this type; wherein the reference source file is a first source file in the initial UI component of this type; the attribute tag is used to characterize the constituent elements of the initial UI component, and the attribute tag contains at least one attribute parameter; according to the reference source file in the first source file of the initial UI component of this type, other first source files of the initial UI component of this type are updated to the second source file; wherein the identity of the attribute tag in the second source file is the same as the identity of the target attribute tag in the reference source file; the target attribute tag in the reference source file refers to the attribute tag with the same name as the attribute tag in the second source file and containing the most first attribute parameters; wherein the first attribute parameter refers to the attribute parameter in the attribute tag whose parameter name is the same as the parameter name of the second attribute parameter of the attribute tag in the second source file, and whose attribute value is a valid value; the second attribute parameter refers to the attribute parameter in the second source file The attribute parameter whose attribute value in the tag is a valid value; the other first source files are other first source files in the first source file of the initial UI component of this type except the reference source file; the target attribute tag in the second source file is the same as the parameter name of the attribute parameter whose attribute value is a valid value contained in the target attribute tag in the reference source file; based on the second source file, determine the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in the initial UI component of this type, and build a neutral model of the initial UI component of this type according to the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in the initial UI component of this type; wherein the public attribute parameters refer to the attribute parameters whose attribute values ​​in the attribute tags of the same identity identifier in the second source file of this type have an appearance frequency reaching a first preset frequency threshold; the own attribute parameters refer to the attribute parameters other than the public attribute parameters in the second source file of this type, and the appearance frequency of the other attribute parameters is not less than the second preset frequency threshold; the second preset frequency threshold is less than the first preset frequency threshold.

[0267] The second determining unit 1605 is further specifically configured to update the first source file based on the neutral model and the second source file.

[0268] The first acquisition unit 1601 is specifically configured to acquire an updated first source file.

[0269] As a possible implementation manner, the number of first attribute parameters of the target attribute tag in the reference source file is the same as the number of second attribute parameters of the attribute tag in the second source file.

[0270] Corresponding to the above embodiments, the present application also provides an electronic device. Fig.18 A schematic diagram of the structure of an electronic device provided in an embodiment of the present invention, the electronic device 1800 may include: a processor 1801, a memory 1802 and a communication unit 1803. These components communicate through one or more buses, and those skilled in the art can understand that the structure of the electronic device shown in the figure does not constitute a limitation on the embodiment of the present invention, it can be a bus structure or a star structure, and can also include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0271] The communication unit 1803 is used to establish a communication channel so that the electronic device can communicate with other devices, receive user data sent by other devices or send user data to other devices.

[0272] The processor 1801 is the control center of the electronic device. It uses various interfaces and lines to connect various parts of the entire electronic device. It runs or executes software programs and / or modules stored in the memory 1802, and calls data stored in the memory to perform various functions of the electronic device and / or process data. The processor can be composed of an integrated circuit (IC), for example, it can be composed of a single packaged IC, or it can be composed of multiple packaged ICs with the same or different functions. For example, the processor 1801 can include only a central processing unit (CPU). In an embodiment of the present invention, the CPU can be a single computing core or multiple computing cores.

[0273] The memory 1802 is used to store the execution instructions of the processor 1801. The memory 1802 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0274] When the execution instructions in the memory 1802 are executed by the processor 1801, the electronic device 1800 can execute Figure 2 , Figure 4 or Figure 5 Some or all of the steps in the illustrated embodiments.

[0275] In a specific implementation, the present invention further provides a computer storage medium, wherein the computer storage medium may store a program, and when the program is executed, the program may include some or all of the steps in each embodiment of the method for adjusting the UI component provided by the present invention. The storage medium may be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc.

[0276] Those skilled in the art can clearly understand that the technology in the embodiments of the present invention can be implemented by means of software plus a necessary general hardware platform. Based on this understanding,

[0277] The technical solutions in the embodiments of the present invention may essentially be embodied in the form of a software product or the part that contributes to the prior art. The computer software product may be stored in a storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., and may include a number of instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the various embodiments of the present invention or certain parts of the embodiments.

[0278] In this specification, the same or similar parts between the various embodiments can be referred to each other. In particular, for the device embodiment and the terminal embodiment, since they are basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description in the method embodiment.

Claims

1. A method for adjusting a UI component, characterized in that: The method comprises: Get the first source file of the initial UI component; Get the adjustment value of the target user parameter of the initial UI component; Obtain a parameter mapping table of the initial UI component, adjust the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtain the target source file of the initial UI component, and generate a target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

2. The method according to claim 1, characterized in that Before obtaining the first source file of the initial UI component, it also includes: Obtain an initial UI component, and determine user parameters of the initial UI component; The corresponding relationship between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component is determined, and recorded in a parameter mapping table of the initial UI component.

3. The method according to claim 2, characterized in that Determining the user parameters of the initial UI component includes: Classifying the initial UI components by features to obtain at least one category of initial UI components; For each type of initial UI component in at least one type of initial UI components, determine the user parameters of the type of initial UI components; wherein the user parameters of the type of initial UI components include at least one first user parameter; the first user parameter is the same user parameter of at least a preset number of initial UI components in the type of initial UI components; Determining the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component includes: Determine, according to the first source file of the initial UI component of the type, a neutral model corresponding to the initial UI component of the type, wherein the neutral model includes at least one attribute parameter in the first source file of at least one initial UI component of the type; Determine the correspondence between the user parameters of the initial UI component of this type and the attribute parameters in the neutral model.

4. The method according to claim 3, characterized in that The feature classification of the initial UI components to obtain at least one type of initial UI components includes: Feature classification is performed according to the functional features and topological structures of the initial UI components to obtain at least one type of initial UI components.

5. The method according to claim 3, characterized in that: The feature classification of the initial UI components to obtain at least one type of initial UI components includes: Determine a target feature vector of an initial UI component; the target feature vector represents image feature information of the initial UI component; Determining similarities between the initial UI components based on target feature vectors of the initial UI components; According to the similarities between the initial UI components, the initial UI components are clustered to obtain at least one type of initial UI components.

6. The method according to claim 5, characterized in that According to the similarity between the initial UI components, the initial UI components are clustered to obtain at least one type of initial UI components, including: Determining the number of categories of the initial UI components according to the similarities between the initial UI components; Based on the number of categories of the initial UI components, the initial UI components are divided into n categories of initial UI components; wherein n is the value of the number of categories of the initial UI components.

7. The method according to claim 3, characterized in that The feature classification of the initial UI components to obtain at least one type of initial UI components includes: Classifying the initial UI components into m groups according to their functional features and topological structures; wherein the functional features and topological structures of the initial UI components in each group are the same, and m is an integer greater than 0; For each of the m groups, determine a target feature vector of an initial UI component in the group; Determine the similarity between the initial UI components in the group based on the target feature vectors of the initial UI components in the group, and determine the number of categories of the initial UI components in the group according to the similarity between the initial UI components in the group; When the number of categories of initial UI components in the group reaches a preset value, the initial UI components in the group are divided into k categories of initial UI components based on the number of categories of initial UI components in the group; wherein k is the value of the number of categories of the initial UI components in the group.

8. The method according to claim 7, characterized in that Also includes: When the number of categories of the initial UI components in the group does not reach a preset value, the initial UI components in the group are determined as one type of initial UI components.

9. The method according to claim 8, characterized in that Also includes: Determining similarities between first initial UI components of different categories based on the target feature vector of the first initial UI component in each category of initial UI components; When the similarity between first initial UI components of different classes is greater than a preset similarity threshold, the classes of the first initial components whose similarity is greater than the preset similarity threshold are merged into the same class.

10. The method according to any one of claims 5 to 7, characterized in that: Determining the target feature vector of the initial UI component includes: Convert the initial UI component to the initial UI component of the target format; Extracting feature vectors based on the initial UI component in the target format to obtain a multi-dimensional initial feature vector of the initial UI component; Based on the amount of information of the initial UI component contained in the initial feature vector of each dimension of the initial UI component, a target feature vector of the initial UI component is determined in the multidimensional initial feature vector of the initial UI component, wherein the amount of information of the initial UI component contained in the target feature vector reaches a preset information amount threshold, and the dimension of the target feature vector is the minimum dimension in the multidimensional initial feature vector such that the amount of information contained in the initial feature vectors of different dimensions reaches the preset information amount threshold.

11. The method according to claim 3, characterized in that Determining the neutral model corresponding to the initial UI component of the type according to the first source file of the initial UI component of the type includes: Determine the identity of the attribute tag of the reference source file in the initial UI component of this type; wherein the reference source file is a first source file in the initial UI component of this type; the attribute tag is used to characterize the constituent elements of the initial UI component, and the attribute tag includes at least one attribute parameter; According to the reference source file in the first source file of the initial UI component of this type, other first source files of the initial UI component of this type are updated to the second source file; wherein, the identity identifier of the attribute tag in the second source file is the same as the identity identifier of the target attribute tag in the reference source file; the target attribute tag in the reference source file refers to the attribute tag with the same name as the attribute tag in the second source file and contains the most first attribute parameters; wherein, the first attribute parameter refers to the attribute parameter whose parameter name in the attribute tag is the same as the parameter name of the second attribute parameter in the attribute tag in the second source file and whose attribute value is a valid value; the second attribute parameter refers to the attribute parameter whose attribute value in the attribute tag in the second source file is a valid value; the other first source files are other first source files in the first source file of the initial UI component of this type except the reference source file; the target attribute tag in the second source file is the same as the parameter name of the attribute parameter whose attribute value is a valid value contained in the target attribute tag in the reference source file; Based on the second source file, determine the public attribute parameters, the own attribute parameters and the attribute values ​​of the public attribute parameters in the initial UI component of this type, and build a neutral model of the initial UI component of this type according to the attribute values ​​of the public attribute parameters, the own attribute parameters and the public attribute parameters in the initial UI component of this type; wherein the public attribute parameters refer to the attribute parameters whose attribute values ​​in the attribute tags of the same identity identifier in the second source file of this type have an appearance frequency reaching a first preset frequency threshold; the own attribute parameters refer to the attribute parameters other than the public attribute parameters in the second source file of this type, and the appearance frequency of the other attribute parameters is not less than the second preset frequency threshold; the second preset frequency threshold is less than the first preset frequency threshold; The method further comprises: Based on the neutral model and the second source file, updating the first source file; The obtaining of the first source file of the initial UI component includes: Get the updated first source file.

12. The method according to claim 11, characterized in that The number of first attribute parameters of the target attribute tag in the reference source file is the same as the number of second attribute parameters of the attribute tag in the second source file.

13. The method according to claim 1, characterized in that The parameter mapping table is also used to record the corresponding relationship between the value of the user parameter of the initial UI component and the value of the attribute parameter in the first source file of the initial UI component; The adjusting the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component includes: Determining a target attribute parameter corresponding to the target user parameter based on a correspondence between a user parameter of the initial UI component in the parameter mapping table and an attribute parameter in the first source file of the initial UI component; Determining an adjustment value of the target attribute parameter corresponding to the adjustment value of the target user parameter based on a correspondence between a value of the user parameter of the initial UI component in the parameter mapping table and a value of an attribute parameter in the first source file of the initial UI component; Based on the adjusted value of the target attribute parameter, the value of the target attribute parameter in the first source file of the initial UI component is adjusted.

14. A UI component adjustment device, characterized in that: include: A first acquisition unit, used to acquire a first source file of an initial UI component; A second acquisition unit, used to acquire an adjustment value of a target user parameter of an initial UI component; A processing unit obtains a parameter mapping table of the initial UI component, adjusts the value of the target attribute parameter of the first source file in the initial UI component based on the parameter mapping table of the initial UI component and the adjustment value of the target user parameter of the initial UI component, obtains the target source file of the initial UI component, and generates a target UI component according to the target source file of the initial UI component; wherein the parameter mapping table is used to record the correspondence between the user parameters of the initial UI component and the attribute parameters in the first source file of the initial UI component.

15. An electronic device, characterized in that: It comprises a memory for storing computer program instructions and a processor for executing the program instructions, wherein when the computer program instructions are executed by the processor, the electronic device is triggered to execute the method according to any one of claims 1 to 13.

16. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein when the program is executed, the device where the computer-readable storage medium is located is controlled to execute the method according to any one of claims 1 to 13.

Images