User interface component style matching method and device, terminal and storage medium

Abstract

The invention provides a user interface component style matching method and device, a terminal and a storage medium, and the method comprises the steps: searching a pre-constructed corresponding relation between a trained style matching model and a platform based on a target platform, and obtaining a target style matching model corresponding to the target platform; inputting a user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component; and applying the target user interface component to the target platform. According to the method, the corresponding relation between the trained style matching model and the platform is pre-constructed, when one user interface component needs to be deployed to one platform, the target style matching model corresponding to the platform is searched, the user interface component is automatically adjusted by utilizing the target style matching model, the platform style is considered, and the user interface component can be automatically adjusted. The styles of the user interface component and the platform are consistent.

Description

Technical Field

[0001] The present invention relates to the field of user interface technology, and in particular to a user interface component style matching method, device, terminal and storage medium. Background Art

[0002] User interface components include icons, text, buttons, pictures and other information. These are the most basic elements in interface design, are universal and suitable for various scenarios.

[0003] In the prior art, when a user interface component needs to be deployed to a platform, the platform style is not considered, resulting in inconsistency between the user interface component and the platform style.

[0004] Therefore, the prior art has defects and needs to be improved and developed. Summary of the invention

[0005] The present application provides a user interface component style matching method, device, terminal and storage medium to solve the technical problem in the related art that when a user interface component needs to be deployed to a platform, the platform style is not considered, resulting in inconsistency between the user interface component and the platform style.

[0006] To achieve the above objectives, this application adopts the following technical solutions:

[0007] A user interface component style matching method, wherein the method comprises:

[0008] Based on the target platform, searching for a correspondence between a pre-built and trained style matching model and the platform to obtain a target style matching model corresponding to the target platform;

[0009] Inputting the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component;

[0010] The target user interface component is applied to the target platform.

[0011] In one embodiment of the present application, the step of constructing the correspondence between the trained style matching model and the platform includes:

[0012] Obtaining pre-collected user interface components of various platforms, and recording platform tags corresponding to the user interface components;

[0013] Performing data preprocessing on each of the user interface components to obtain a training set corresponding to each platform label;

[0014] Construct several initial style matching models;

[0015] Each initial style matching model is trained using the training set corresponding to each platform label. After the training is completed, a trained style matching model corresponding to each platform is obtained and stored as a correspondence between the trained style matching model and the platform.

[0016] In one embodiment of the present application, the user interface components include color, font, icon and layout.

[0017] In one embodiment of the present application, data preprocessing is performed on each of the user interface components to obtain a training set corresponding to each platform label, including:

[0018] Converting the color value corresponding to the color into a unified color space and extracting color distribution statistical features;

[0019] Identify the type, size, line height and word spacing of the font, and convert the type, size, line height and word spacing into font numerical features;

[0020] Scaling, cropping and standardizing the icon to obtain standardized icon features;

[0021] Analyze the relative positions, size ratios and alignments of the components based on the layout to obtain a layout descriptor;

[0022] storing the color distribution statistical features, font numerical features, standardized icon features and layout descriptors corresponding to each of the platform tags as a data set;

[0023] A training set corresponding to each of the platform labels is determined in the data set.

[0024] In one embodiment of the present application, after determining the training set corresponding to each platform label in the data set, the method further includes:

[0025] A validation set and a test set corresponding to each of the platform labels are determined in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained style matching model.

[0026] In one embodiment of the present application, the initial style matching model is constructed based on a generative adversarial network architecture.

[0027] In one embodiment of the present application, applying the target user interface component to the target platform includes:

[0028] The target user interface component is integrated tested and deployed on the target platform.

[0029] The present application also provides a user interface component style matching device, wherein the device comprises:

[0030] A search module, used to search for a correspondence between a pre-built and trained style matching model and the platform based on a target platform, and obtain a target style matching model corresponding to the target platform;

[0031] An input module, used for inputting the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component;

[0032] An application module is used to apply the target user interface component to the target platform.

[0033] In one embodiment of the present application, the user interface component style matching device further includes:

[0034] An acquisition module, used to acquire pre-collected user interface components of various platforms and record platform tags corresponding to the user interface components;

[0035] A preprocessing module, used to perform data preprocessing on each of the user interface components to obtain a training set corresponding to each platform label;

[0036] A construction module, used to construct several initial style matching models;

[0037] The training module is used to train each initial style matching model using the training set corresponding to each platform label. After the training is completed, a trained style matching model corresponding to each platform is obtained and stored as a corresponding relationship between the trained style matching model and the platform.

[0038] In one embodiment of the present application, the user interface components include color, font, icon and layout.

[0039] In one embodiment of the present application, the preprocessing module includes:

[0040] A color conversion unit, used to convert the color value corresponding to the color into a unified color space and extract color distribution statistical features;

[0041] A font conversion unit, used to identify the type, size, line height and character spacing of the font, and convert the type, size, line height and character spacing into font numerical features;

[0042] An icon conversion unit, used for scaling, cropping and standardizing the icon to obtain standardized icon features;

[0043] A layout conversion unit, configured to analyze the relative positions, size ratios and alignments of the components based on the layout to obtain a layout descriptor;

[0044] A storage unit, used to store the color distribution statistical features, font numerical features, standardized icon features and layout descriptors corresponding to each of the platform tags as a data set;

[0045] A determination unit is used to determine the training set corresponding to each of the platform labels in the data set.

[0046] In one embodiment of the present application, the user interface component style matching device further includes:

[0047] A determination module is used to determine a validation set and a test set corresponding to each of the platform labels in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained style matching model.

[0048] In one embodiment of the present application, the initial style matching model is constructed based on a generative adversarial network architecture.

[0049] In one embodiment of the present application, the application module is also used to perform integration testing and deployment on the target user interface component on the target platform.

[0050] The present application also provides a terminal, which includes: a memory, a processor, and a user interface component style matching program stored in the memory and executable on the processor, wherein the user interface component style matching program implements the steps of the user interface component style matching method described above when executed by the processor.

[0051] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program can be executed to implement the steps of the user interface component style matching method as described above.

[0052] Beneficial effects of the present invention: The method of the embodiment of the present invention obtains the target style matching model corresponding to the target platform by searching for the correspondence between the pre-built trained style matching model and the platform based on the target platform; inputs the user interface component to be adjusted into the target style matching model to obtain the adjusted target user interface component; and applies the target user interface component to the target platform. The present application pre-builds the correspondence between the trained style matching model and the platform. When a user interface component needs to be deployed to a platform, it searches for the target style matching model corresponding to the platform, and uses the target style matching model to automatically adjust the user interface component, taking into account the platform style, so that the user interface component is consistent with the style of the platform. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1It is a flow chart of a preferred embodiment of the user interface component style matching method in the present invention.

[0054] Figure 2 It is a functional principle block diagram of a preferred embodiment of the user interface component style matching device in the present invention.

[0055] Figure 3 It is a functional principle block diagram of a preferred embodiment of the terminal in the present invention. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the present invention clearer and more specific, the present invention is further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0057] The user interface component style matching method, device, terminal and storage medium of the embodiment of the present application are described below with reference to the accompanying drawings. In view of the problem that in the related art mentioned in the above background technology, when a user interface component needs to be deployed to a platform, the platform style is not considered, resulting in the inconsistency between the style of the user interface component and the platform, the present application provides a user interface component style matching method, in which the correspondence between the pre-built and trained style matching model and the platform is searched based on the target platform to obtain the target style matching model corresponding to the target platform; the user interface component to be adjusted is input into the target style matching model to obtain the adjusted target user interface component; and the target user interface component is applied to the target platform. The present application pre-builds the correspondence between the trained style matching model and the platform, and when a user interface component needs to be deployed to a platform, the target style matching model corresponding to the platform is searched, and the target style matching model is used to automatically adjust the user interface component, taking the platform style into consideration, so that the user interface component is consistent with the style of the platform.

[0058] See also Figure 1 The user interface component style matching method described in the embodiment of the present invention comprises the following steps:

[0059] Step S100: searching for a correspondence between a pre-built and trained style matching model and the platform based on a target platform to obtain a target style matching model corresponding to the target platform.

[0060] Specifically, when the target platform of a mobile application is iOS, a design style that matches the iOS system style is selected for the application interface. The embodiment of the present application searches a pre-built model library, which contains a variety of pre-trained style matching models, each of which is labeled with the platform they are applicable to (such as Android, iOS, Web, etc.).

[0061] The embodiment of the present application directly selects a model optimized for a specific platform, which can greatly reduce the workload of designers and developers in adjusting the interface style. Using a model consistent with the target platform style can ensure that the application interface matches the platform style expected by the user.

[0062] In the embodiment of the present application, the step of constructing the “correspondence between the trained style matching model and the platform” in step S100 includes:

[0063] Step S10: obtaining pre-collected user interface components of various platforms, and recording platform tags corresponding to the user interface components;

[0064] Step S20: performing data preprocessing on each of the user interface components to obtain a training set corresponding to each platform label;

[0065] Step S30: constructing several initial style matching models;

[0066] Step S40: Use the training sets corresponding to the platform labels to train the initial style matching models respectively. After the training is completed, the trained style matching models corresponding to the platforms are obtained and stored as the corresponding relationship between the trained style matching models and the platforms.

[0067] Specifically, user interface components from different platforms, such as iOS, Android, Web, etc., are collected and organized in advance. Each component is clearly labeled with the platform label to which it belongs. For example, a button with a rounded rectangle and a specific shadow effect is labeled "iOS", while another button with a different color scheme and border is labeled "Android". This ensures that there is sufficient and clearly labeled data for subsequent training and model building.

[0068] The collected user interface components are subjected to a series of data preprocessing operations, such as size normalization, color space conversion, feature extraction, etc. The processed data are organized into different training sets according to their platform labels. For example, all components marked as "iOS" will form a training set for training the style matching model corresponding to the iOS platform. Data preprocessing can eliminate noise and redundant information in the original data and improve the learning efficiency and accuracy of the model; and, through feature extraction and conversion, the original data is converted into a form that is easy for the model to understand and process, which helps to build a more efficient and accurate style matching model.

[0069] The training set is used to train the initial style matching model. Each model will be trained for its corresponding platform label until the predetermined training goal is achieved (such as loss function convergence, accuracy reaching the target, etc.). After the training is completed, each trained model and its corresponding platform label will be stored to form a corresponding relationship between the trained style matching model and the platform.

[0070] Each model of the embodiments of the present application is trained for its corresponding platform and can therefore more accurately capture the style features of the platform.

[0071] In one embodiment of the present application, the user interface components include color, font, icon and layout.

[0072] Specifically, user interface components are the basic elements that make up the user interface, and together they determine the look and feel of the application. Colors can trigger users' emotional responses, and appropriate color matching can create an atmosphere that matches the theme of the application. Through color contrast and saturation, the information hierarchy in the interface can be clearly divided, guiding the user's line of sight and operation process. For example, in an e-commerce application, in order to create a warm and comfortable shopping environment, the application platform may choose to use a light background color (such as beige or light gray), and match it with bright product pictures and button colors (such as orange or red) to attract users' attention.

[0073] Appropriate fonts and font sizes can ensure that the text content is clear and readable, reducing the reading burden of users. The importance and hierarchical relationship of information can be more effectively conveyed through the selection and use of fonts (such as bold, italics, underline, etc.). In addition, a unified font style helps maintain the overall beauty and consistency of the interface and enhance the user's visual experience. For example, in a news reading application, in order to provide a clear and easy-to-read reading experience, the application platform may choose a simple, sans-serif font (such as Roboto or Helvetica) as the main text font, and use bold or different sizes of fonts on titles and important information to highlight them.

[0074] Icons can intuitively express the meaning of functions, reduce the need for text descriptions, and make the interface more concise and clear. Users can quickly identify and operate functions through icons, which improves usage efficiency. In addition, icons are not restricted by language, which helps the international promotion of applications. For example, in a social application, in order to facilitate users to quickly identify and operate various functions, the application platform may use a series of intuitive and easy-to-understand icons to represent different functional modules (such as messages, Moments, settings, etc.).

[0075] Reasonable layout can organize the information elements in the interface in an orderly manner, so that users can easily find the required content. Clear layout and navigation structure can help users quickly locate the target page or function. For example, in a music player application, the application platform may use a card layout to display the song list. Each card contains the song cover, title and artist information. Users can browse different songs by sliding the card.

[0076] Therefore, each platform has its own unique colors, fonts, icons, and layout, which in turn forms a unique style.

[0077] In one embodiment of the present application, step S20 specifically includes:

[0078] Step S21, converting the color value corresponding to the color into a unified color space, and extracting color distribution statistical features;

[0079] Step S22, identifying the type, size, line height and character spacing of the font, and converting the type, size, line height and character spacing into font numerical features;

[0080] Step S23, scaling, cropping and standardizing the icon to obtain standardized icon features;

[0081] Step S24, analyzing the relative positions, size ratios and alignments of the components based on the layout to obtain a layout descriptor;

[0082] Step S25, storing the color distribution statistical features, font numerical features, standardized icon features and layout descriptors corresponding to each of the platform tags as a data set;

[0083] Step S26: Determine the training set corresponding to each platform label in the data set.

[0084] Specifically, the collected user interface components contain a variety of color values, which may come from different color spaces (such as RGB, HSV, etc.). In step S21, these color values ​​are uniformly converted to the same color space (such as HSV) for subsequent processing and analysis. Then, the color distribution statistical features are extracted, such as the color mean, standard deviation, main color ratio, etc. These features can reflect the color usage in the interface. In this way, the unified color space can eliminate the conversion errors between different color spaces, ensure the consistency and comparability of color features, and the color distribution statistical features can quantify the color usage in the interface and provide useful information for subsequent model training.

[0085] In the user interface component, font information is crucial to maintaining the consistency and readability of the interface. In step S22, OCR (optical character recognition) technology or font recognition algorithm is used to identify the font type, and the font size, line height and word spacing are measured. This information is then converted into numerical features, such as font ID (if there is a corresponding ID in the font library), font size (in pixels or points), the ratio of line height to font size, the ratio of word spacing to font size, etc. The embodiment of the present application converts the font information into numerical features, so that the font features can be directly processed and learned by the model, and the font numerical features can more accurately reflect the font usage in the interface, which helps to improve the accuracy of the style matching model.

[0086] Icons are important elements in user interfaces, and they are usually used to represent functions or operations. However, the collected icons may have different sizes and resolutions. In step S23, the icons are scaled to have a uniform size, the icons are cropped, unnecessary blank areas are removed, and the icons are converted to grayscale images or edge detection and other processes are performed to extract standardized icon features. The embodiment of the present application ensures that all icons have the same size in subsequent processing through scaling processing, which is convenient for comparison and analysis. The redundant information (such as blank areas) in the icons is removed through cropping processing, making the icon features more compact and effective. The key features of the icons can be extracted through standardization processing (such as graying, edge detection), which helps the model to better understand and recognize icons.

[0087] The layout determines the arrangement and spatial relationship of each component in the interface. In step S24, the interface layout is analyzed, and the relative position (such as coordinates), size ratio (such as the ratio of width, height to the total size of the interface) and alignment (such as left alignment, center alignment, etc.) between each component are recorded. This information is then encoded into a layout descriptor for subsequent processing and model training. The layout descriptor of the embodiment of the present application can quantify the layout information in the interface, and provide the model with clear instructions about component arrangement and spatial relationship. By learning and understanding the layout descriptor, the model can better adapt to interfaces of different layout styles and improve generalization ability.

[0088] The color distribution statistical features, font numerical features, standardized icon features, and layout descriptors corresponding to each platform label are integrated together to form a complete data set, which is convenient for subsequent data management and model training. The data set contains data from multiple platforms and supports the simultaneous training of style matching models corresponding to multiple platforms.

[0089] In an embodiment of the present application, step S26 further includes: determining a validation set and a test set corresponding to each of the platform tags in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained style matching model.

[0090] Specifically, based on a data set containing multiple platform labels (such as platform A, platform B, platform C, etc.), each platform label has corresponding color distribution statistical features, font numerical features, standardized icon features and layout descriptors. The training set has been divided according to the platform label in step S26. Next, it is necessary to further divide the validation set and the test set from the remaining data. For each platform label, a part of the data is set aside from the training set as the validation set. This part of the data should not completely overlap with the training set, but it does not need to include all unique samples in the entire data set. For example, approximately 20% of the samples in the training set can be randomly selected as the validation set. When dividing the test set from the data set, the test set should be completely independent of the training set and the validation set to ensure the objectivity and accuracy of the evaluation results. Typically, the test set will contain a small portion of the samples in the entire data set that have not been used for training or verification. For example, the remaining 10% of the data set can be selected as the test set.

[0091] The validation set is used to adjust the model's hyperparameters (such as learning rate, number of iterations, regularization coefficient, etc.) during model training. By observing the performance changes of the model on the validation set, the optimal hyperparameter combination can be found to improve the generalization ability of the model. The test set is used to evaluate the performance of the model after it is trained. Since the test set is completely independent of the training set and the validation set, it provides a true evaluation of the model's performance on unseen data. By using the training set, validation set, and test set at the same time, the model can be comprehensively evaluated and improved for its shortcomings, which helps to enhance the generalization ability of the model and enable it to adapt to a wider range of data sets and application scenarios.

[0092] In one embodiment of the present application, the initial style matching model is constructed based on a generative adversarial network architecture.

[0093] Specifically, the Generative Adversarial Networks (GANs) architecture has powerful generative capabilities. GANs consists of two networks, the generator and the discriminator. Through continuous adversarial training, the generator can gradually generate more realistic samples. This ability enables the GANs-based style matching model to generate images or design elements that are highly close to the target style. In addition, GANs can learn and capture subtle features between different styles, such as color, texture, lines, etc., thereby achieving high-quality image or design element style transfer.

[0094] like Figure 1 As shown, the user interface component style matching method also includes the following steps:

[0095] Step S200: input the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component.

[0096] Specifically, the user interface components that need to be adjusted are input into the target style matching model, and the target style matching model will automatically adjust these components according to the style features learned during its training to meet the design specifications of the target platform.

[0097] The automated processing of the embodiments of the present application greatly reduces the burden on developers in interface design. The model is trained based on a large amount of data and algorithms, and can accurately simulate the style characteristics of the target platform to achieve highly consistent interface design.

[0098] like Figure 1 As shown, the user interface component style matching method also includes the following steps:

[0099] Step S300: Apply the target user interface component to the target platform.

[0100] In the embodiment of the present application, the step S300 specifically includes: performing integration testing and deployment on the target user interface component on the target platform.

[0101] Specifically, the user interface components adjusted by the style matching model will be integrated into the target platform. These components will fully comply with the design language and style guidelines of the target platform to ensure that the overall style and user experience of the application are consistent with the target platform.

[0102] In one embodiment, if Figure 2 As shown, based on the above user interface component style matching method, the present invention also provides a user interface component style matching device, including:

[0103] A search module 100 is used to search for a correspondence between a pre-built and trained style matching model and a platform based on a target platform, and obtain a target style matching model corresponding to the target platform;

[0104] An input module 200, used for inputting the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component;

[0105] The application module 300 is used to apply the target user interface component to the target platform.

[0106] In one embodiment of the present application, the user interface component style matching device further includes:

[0107] An acquisition module, used to acquire pre-collected user interface components of various platforms and record platform tags corresponding to the user interface components;

[0108] A preprocessing module, used to perform data preprocessing on each of the user interface components to obtain a training set corresponding to each platform label;

[0109] A construction module, used to construct several initial style matching models;

[0110] The training module is used to train each initial style matching model using the training set corresponding to each platform label. After the training is completed, a trained style matching model corresponding to each platform is obtained and stored as a corresponding relationship between the trained style matching model and the platform.

[0111] In one embodiment of the present application, the user interface components include color, font, icon and layout.

[0112] In one embodiment of the present application, the preprocessing module includes:

[0113] A color conversion unit, used to convert the color value corresponding to the color into a unified color space and extract color distribution statistical features;

[0114] A font conversion unit, used to identify the type, size, line height and character spacing of the font, and convert the type, size, line height and character spacing into font numerical features;

[0115] An icon conversion unit, used for scaling, cropping and standardizing the icon to obtain standardized icon features;

[0116] A layout conversion unit, configured to analyze the relative positions, size ratios and alignments of the components based on the layout to obtain a layout descriptor;

[0117] A storage unit, used to store the color distribution statistical features, font numerical features, standardized icon features and layout descriptors corresponding to each of the platform tags as a data set;

[0118] A determination unit is used to determine the training set corresponding to each of the platform labels in the data set.

[0119] In one embodiment of the present application, the user interface component style matching device further includes:

[0120] A determination module is used to determine a validation set and a test set corresponding to each of the platform labels in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained style matching model.

[0121] In one embodiment of the present application, the initial style matching model is constructed based on a generative adversarial network architecture.

[0122] In one embodiment of the present application, the application module is also used to perform integration testing and deployment on the target user interface component on the target platform.

[0123] It should be noted that the above explanations of the user interface component style matching method embodiment are also applicable to the user interface component style matching device of this embodiment, and will not be repeated here.

[0124] The present invention discloses a user interface component style matching device, which searches for the correspondence between a pre-built trained style matching model and the platform based on a target platform to obtain a target style matching model corresponding to the target platform; inputs the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component; and applies the target user interface component to the target platform. This application pre-builds a correspondence between a trained style matching model and the platform, and when a user interface component needs to be deployed to a platform, searches for the target style matching model corresponding to the platform, and uses the target style matching model to automatically adjust the user interface component, taking into account the platform style, so that the user interface component is consistent with the style of the platform.

[0125] Figure 3 A schematic diagram of the structure of a terminal provided in an embodiment of the present application. The terminal may include:

[0126] A memory 501 , a processor 502 , and a computer program stored in the memory 501 and executable on the processor 502 .

[0127] When the processor 502 executes the program, the user interface component style matching method provided in the above embodiment is implemented.

[0128] Furthermore, the terminal further includes:

[0129] The communication interface 503 is used for communication between the memory 501 and the processor 502 .

[0130] The memory 501 is used to store computer programs that can be executed on the processor 502 .

[0131] The memory 501 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0132] If the memory 501, the processor 502 and the communication interface 503 are implemented independently, the communication interface 503, the memory 501 and the processor 502 can be connected to each other through a bus and communicate with each other. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one line is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0133] Optionally, in a specific implementation, if the memory 501, the processor 502 and the communication interface 503 are integrated on a chip, the memory 501, the processor 502 and the communication interface 503 can communicate with each other through an internal interface.

[0134] The processor 502 may be a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present application.

[0135] This embodiment also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the above user interface component style matching method is implemented.

[0136] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or N embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0137] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0138] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or N executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes additional implementations, in which the order shown or discussed may not be followed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.

[0139] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can read instructions from an instruction execution system, device or apparatus and execute instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purpose of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses. More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or N wirings (electronic devices), a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), a fiber optic device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be paper or other suitable medium on which the program is printed, since the program may be obtained electronically by optically scanning the paper or other medium and then editing, interpreting or otherwise processing in a suitable manner if necessary and then storing it in a computer memory.

[0140] It should be understood that the various parts of the present application can be implemented by hardware, software, firmware or a combination thereof. In the above embodiment, the N steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. If implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0141] A person skilled in the art may understand that all or part of the steps in the above-mentioned embodiment method may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0142] In addition, each functional unit in each embodiment of the present application may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0143] The storage medium mentioned above may be a read-only memory, a magnetic disk or an optical disk, etc. Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limiting the present application. A person of ordinary skill in the art may change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A user interface component style matching method, characterized in that: The method comprises: Based on the target platform, searching for a correspondence between a pre-built and trained style matching model and the platform to obtain a target style matching model corresponding to the target platform; Inputting the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component; The target user interface component is applied to the target platform.

2. The user interface component style matching method according to claim 1, characterized in that: The steps to construct the correspondence between the trained style matching model and the platform include: Obtaining pre-collected user interface components of various platforms, and recording platform tags corresponding to the user interface components; Performing data preprocessing on each of the user interface components to obtain a training set corresponding to each platform label; Construct several initial style matching models; Each initial style matching model is trained using the training set corresponding to each platform label. After the training is completed, a trained style matching model corresponding to each platform is obtained and stored as a correspondence between the trained style matching model and the platform.

3. The user interface component style matching method according to claim 2, characterized in that: The user interface components include colors, fonts, icons, and layout.

4. The user interface component style matching method according to claim 3, characterized in that: Data preprocessing is performed on each of the user interface components to obtain a training set corresponding to each platform label, including: Converting the color value corresponding to the color into a unified color space and extracting color distribution statistical features; Identify the type, size, line height and word spacing of the font, and convert the type, size, line height and word spacing into font numerical features; Scaling, cropping and standardizing the icon to obtain standardized icon features; Analyze the relative positions, size ratios and alignments of the components based on the layout to obtain a layout descriptor; storing the color distribution statistical features, font numerical features, standardized icon features and layout descriptors corresponding to each of the platform tags as a data set; A training set corresponding to each of the platform labels is determined in the data set.

5. The user interface component style matching method according to claim 4, characterized in that: After determining the training sets corresponding to the platform labels in the data set, the method further includes: A validation set and a test set corresponding to each of the platform labels are determined in the data set, wherein the validation set is used to adjust the hyperparameters of the model, and the test set is used to evaluate the performance of the trained style matching model.

6. The user interface component style matching method according to claim 2, characterized in that: The initial style matching model is constructed based on a generative adversarial network architecture.

7. The user interface component style matching method according to claim 1, characterized in that: Applying the target user interface component to the target platform includes: The target user interface component is integrated tested and deployed on the target platform.

8. A user interface component style matching device, characterized in that: The device comprises: A search module, used to search for a correspondence between a pre-built and trained style matching model and the platform based on a target platform, and obtain a target style matching model corresponding to the target platform; An input module, used for inputting the user interface component to be adjusted into the target style matching model to obtain an adjusted target user interface component; An application module is used to apply the target user interface component to the target platform.

9. A terminal, characterized in that: include: A memory, a processor, and a user interface component style matching program stored in the memory and executable on the processor, wherein the user interface component style matching program, when executed by the processor, implements the steps of the user interface component style matching method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program can be executed to implement the steps of the user interface component style matching method according to any one of claims 1 to 7.

Images