Interface color control method, device and storage medium

Abstract

The embodiment of the present application provides an interface color control method, device and storage medium, including: aggregating visual elements in a control interface to form at least one visual element set; determining the color level division method required for the visual element set and the color value corresponding to each color level according to the input preset main color value and the number of visual element sets; determining the target color value of the visual element in each visual element set from the color values ​​corresponding to multiple color levels according to the feature information of the visual elements in the visual element set and the preset mapping relationship between the feature information and the color level; and performing interface color control on the control interface using the target color value. In this way, the color selection of the visual elements in the control interface is performed intelligently, without the need for designers to manually match and modify the colors, reducing the steps of manual selection and lowering labor costs.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of interface design, and are related to but not limited to an interface color control method, device, and storage medium. Background Art

[0002] In user interface design, interface colors are mainly composed of primary colors, secondary colors and neutral colors. The primary color determines the color tone of a product. The secondary color often uses similar colors to the primary color. Neutral colors generally use different degrees of gray and are used as basic content such as backgrounds, texts and wireframes.

[0003] At present, designers often combine and piece together popular market colors, or according to their own experience or the commonly used colors of the product during the process of product design. Although many popular market colors have also undergone some market research or color system design, they are often unable to form a complete color system after being pieced together by designers. In particular, they are unable to scientifically select colors from the perspective of color value or color model, which affects the functionality of the colors. As a result, the colors selected by designers do not form a color system, and the colors need to be constantly adjusted. It is impossible to automatically select and match colors according to the layout of the interface and visual elements, which consumes a lot of time and energy. Summary of the Invention

[0004] Based on the problems in the related art, the embodiments of the present application provide an interface color control method, device and storage medium.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] The present invention provides an interface color control method, including:

[0007] In response to the interface color control request, aggregating visual elements in the interface to be controlled to form at least one visual element set;

[0008] Determining, based on the input preset primary color value and the number of the visual element set, a division method of color levels required for the visual element set, and a color value corresponding to each color level in a plurality of color levels obtained based on the division method;

[0009] determining a target color value for each visual element in the visual element set from color values ​​corresponding to the plurality of color levels based on feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color levels;

[0010] The target color value is used to perform interface color control on the interface to be controlled.

[0011] The embodiment of the present application provides an interface color control device, comprising:

[0012] an aggregation module, configured to aggregate visual elements in the interface to be controlled to form at least one visual element set in response to an interface color control request;

[0013] a first determining module configured to determine, based on an input preset primary color value and the number of the visual element set, a color level division method required for the visual element set and a color value corresponding to each color level in a plurality of color levels obtained by the division method;

[0014] a second determining module configured to determine, from color values ​​corresponding to the plurality of color levels, a target color value for each visual element in the visual element set based on feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color levels;

[0015] The control module is used to use the target color value to perform interface color control on the interface to be controlled.

[0016] An embodiment of the present application provides an interface color control device, including:

[0017] The memory is used to store executable instructions; the processor is used to implement the above-mentioned interface color control method when executing the executable instructions stored in the memory.

[0018] An embodiment of the present application provides a computer-readable storage medium storing executable instructions for causing a processor to execute the executable instructions to implement the above-mentioned interface color control method.

[0019] In an embodiment of the present application, the visual elements in the interface to be controlled are aggregated to form at least one visual element set. Based on the input preset primary color value and the number of visual element sets, the color levels are divided and the color values ​​corresponding to each color level are obtained. Based on the characteristic information of the visual elements in the visual element set and the preset mapping relationship between the characteristic information and the color level, the target color value of each visual element set is determined from the color values ​​corresponding to the multiple color levels, and the target color value is used to control the interface color of the interface to be controlled. In this way, by dividing the colors to obtain different color levels, matching the target color levels according to the characteristic information of the visual elements, and intelligently selecting the colors of the visual elements in the interface to be controlled, there is no need for the designer to manually match and modify the colors, thus reducing the steps of manual selection and lowering labor costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0021] Figure 2 This is a schematic diagram of an application scenario of the interface color control method provided in an embodiment of the present application;

[0022] Figure 3 This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0023] Figure 4 This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0024] Figure 5 This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0025] Figure 6 This is an optional flowchart of the color control model training method provided in an embodiment of the present application;

[0026] Figure 7 This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0027] Figure 8 It is the brightness-saturation curve in the interface color control method provided in the embodiment of the present application;

[0028] Figure 9 This is an optional flowchart of the interface color control method provided in the embodiment of the present application;

[0029] Figure 10 This is a schematic diagram of the structure of the interface color control device provided in an embodiment of the present application;

[0030] Figure 11 It is a schematic diagram of the composition structure of the interface color control device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0031] In order to make the purpose, technical solutions and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limiting this application. All other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0032] In the following description, reference is made to "some embodiments," which describe a subset of all possible embodiments. However, it will be understood that "some embodiments" may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict. Unless otherwise defined, all technical and scientific terms used in the embodiments of this application have the same meaning as commonly understood by those skilled in the art to which the embodiments of this application pertain. The terms used in the embodiments of this application are for the purpose of describing the embodiments of this application only and are not intended to limit this application.

[0033] Color is an important component in product user interface design. Current color design relies on the experience and accumulation of designers, making it difficult to demonstrate the accuracy and functionality of color use from a parametric perspective, and it is impossible to systematically generate a set of user interface color designs. In addition, during the design process, neutral colors are mostly pure black and pure gray, which are relatively simple in color use and lack coordination with the main color. Neutral colors are usually divided into 6-10 color levels according to their brightness. In traditional color design, pure gray is often used. Its function expression is B=b, where B is the brightness value and b is an interval value from 0 to 100. In this design, the color of neutral colors is independent of hue, and the saturation is always 0. The colors obtained through this design method are relatively simple and do not echo the main color tone of the interface.

[0034] Based on the problems existing in the related art, the embodiments of the present application provide a user interface color design method and system based on the Hue-saturation-brightness (HSB) color model. The method can analyze the design prototype (i.e., the interface to be controlled) output by the designer through image recognition technology, analyze the design prototype to obtain the required color hierarchy model framework, and apply the color scheme output by the color model to the design prototype to obtain a color-assigned design scheme. The embodiments of the present application provide an efficient, scientific, and quantifiable color design scheme for user interface product design, which can combine the emotional and rational expression of color and improve the usability of product color presentation.

[0035] The method provided in the embodiments of this application allows users to input a user interface design prototype, analyze the color system and neutral color hierarchy required for the interface, and establish a mapping relationship between the color hierarchy and the interface prototype. Users can input or select a primary color, and a set of secondary color and neutral color schemes are automatically generated using the color model. The generated color scheme is applied to the user interface design prototype and the color-coded design prototype is output. This can save color design costs and optimize color recognizability and functionality.

[0036] The following describes exemplary applications of the interface color control device provided in embodiments of the present application. The interface color control device provided in embodiments of the present application can be implemented as various types of terminals, such as laptops, tablet computers, desktop computers, and mobile devices, or as a server. The following describes exemplary applications of the interface color control device implemented as a server.

[0037] This application embodiment provides an interface color control method, see Figure 1 , Figure 1 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, which will be combined with Figure 1 The steps shown are explained.

[0038] Step S101: In response to an interface color control request, visual elements in the interface to be controlled are aggregated to form at least one visual element set.

[0039] Here, the interface color control request is used to request interface color control of the interface to be controlled. The interface color control request can be triggered by the designer on the terminal. The terminal sends the interface color control request to the server so that the server responds to the designer's interface color control request to ultimately perform color control on the interface to be controlled. It should be noted that the designer can trigger the interface color control request through the terminal to request the server to perform color control on the interface to be controlled. Among them, the interface to be controlled refers to an interface prototype that has not yet been rendered in color, that is, the interface to be designed refers to an interface with different visual elements, which is an interface in which the functions and the corresponding positions of each function have been determined, but color rendering has not been performed.

[0040] The interface to be controlled can be a design prototype designed by a designer on the terminal, an interface image selected from a preset interface image library, or an interface image formed by stitching together multiple visual elements selected from a preset visual element library. The interface to be controlled can be an image with a certain initial color, or an image without color (i.e., an image formed by black, white, and gray, or an image formed by black and white). The interface to be controlled can be displayed on the current interface of the terminal.

[0041] Here, visual elements refer to elements or controls in the interface to be controlled. Each visual element in the interface to be controlled can be determined according to the boundary of each element in the interface to be controlled by image recognition technology. The interface to be controlled is composed of all visual elements.

[0042] In some embodiments, in order to perform color control on the interface to be controlled, each visual element in the interface to be controlled is classified, visual elements with the same function or the same outline are grouped into one category, and visual elements of the same category are formed into a visual element set.

[0043] Step S102: Determine, based on the input preset primary color value and the number of the visual element set, a color level division method required for the visual element set and a color value corresponding to each color level in the multiple color levels obtained based on the division method.

[0044] It should be noted that the HSB color mode includes hue (H), saturation (S) and brightness (B). The HSB mode uses the three attributes of color to represent color, that is, the three attributes of color are quantified, and the color value includes hue value, brightness value and saturation value. Among them, saturation and brightness are expressed as percentage values ​​(0% to 100%), and hue is expressed as an angle (0° to 360°). The preset main color value in the embodiment of the present application refers to the hue value, that is, for an interface to be controlled, the hue value of the interface color is determined. For example: for an interface, before color control is performed, the hue value of the interface in the HSB mode has been determined, which can be red or blue.

[0045] In some embodiments, inputting a preset primary color value may refer to inputting a preset HSB color value, or may refer to inputting a preset hexadecimal color value, wherein the hexadecimal color value is a code for setting a color value in the software.

[0046] In some embodiments, a color hierarchy refers to dividing brightness by the number of visual element sets under the condition of a determined chromaticity value to obtain different brightness levels, and the color value of each brightness level can be obtained through the brightness hierarchy. For example: after aggregating the visual elements of the control interface, the number of visual element sets obtained is 4. In order to enable color selection for each visual element set, the number of color levels is set to be greater than the number of visual element sets, and the number of color levels is set to 10. That is, the brightness value is divided into ten intervals. Based on the brightness value of each interval, the saturation value corresponding to the brightness value is obtained, and the color value of the brightness interval can be obtained.

[0047] Step S103: Determine a target color value for each visual element in the visual element set from the color values ​​corresponding to the multiple color levels based on the feature information of the visual elements in the visual element set and the preset mapping relationship between the feature information and the color levels.

[0048] In an embodiment of the present application, the characteristic information of each visual element may be content information such as a title, subtitle, unrendered icon, and background, or may be outline information of the visual element. The characteristic information of the visual element may be obtained by identifying each visual element using image recognition technology. Based on the characteristic information of the visual element, a target color level is matched in the color hierarchy, and the color value corresponding to the color level is used as the target color value of the visual element set.

[0049] Here, the preset mapping relationship between the characteristic information and the color level can be pre-set by the user, and the color level corresponding to the visual element with specific characteristic information can be determined according to the preset mapping relationship. For example: the preset mapping relationship can be that the color level corresponding to the visual element whose characteristic information is an icon is the primary color; the color level corresponding to the visual element whose characteristic information is the background is the neutral color; the color level corresponding to the visual element whose characteristic information is the title is the auxiliary color.

[0050] In some embodiments, the preset primary color value may be input after each set of visual elements is matched to the color level, or the preset primary color value may be input while each set of visual elements is matched to the color level, or the preset primary color value may be input in advance before each set of visual elements is matched to the color level.

[0051] Step S104: Using the target color value to perform interface color control on the interface to be controlled.

[0052] In an embodiment of the present application, after obtaining the target color value, each visual element in the visual element set is rendered according to the target color value corresponding to each visual element set to achieve interface color control of the interface to be controlled.

[0053] In an embodiment of the present application, the visual elements in the interface to be controlled are aggregated to form at least one visual element set. Based on the input preset primary color value and the number of visual element sets, the color hierarchy is divided and the color value corresponding to each color hierarchy is obtained. Based on the characteristic information of the visual elements in the visual element set, the target color value for each visual element set is determined from the color values ​​corresponding to the multiple color hierarchies. The target color value is then used to control the interface color of the interface to be controlled. In this way, the color hierarchy is divided based on the preset primary color value and the number of visual element sets, resulting in a complete color system. This allows for scientific color selection of the control interface, forming an ideal color matching scheme, reducing the number of manual selection steps, and improving color selection efficiency and color matching accuracy.

[0054] See also Figure 2 , Figure 2Schematic diagram of an application scenario of the interface color control method provided in an embodiment of the present application. To achieve color control of the interface to be controlled, the interface color control system 20 provided in an embodiment of the present application includes a terminal 100, a network 200, and a server 300. A designer sends an interface color control request to the server 300 via the network 200 on the terminal 100. After receiving the interface color control request, the server can use the method of the embodiment of the present application to aggregate the visual elements in the interface to be controlled to form at least one visual element set. Based on the input preset primary color value and the number of visual element sets, the server divides the color levels and obtains the color values ​​corresponding to each color level. Based on the characteristic information of the visual elements in the visual element set, the server determines the target color value of each visual element set from the color values ​​corresponding to the multiple color levels. The target color value is used to control the interface color of the interface to be controlled, forming a rendering interface and sending the rendering interface to the terminal 100 via the network 200. After the terminal 100 receives the rendering interface, the terminal 100 can directly display the received rendering interface on the current interface 100-1.

[0055] Based on the above embodiments, the present application further provides an interface color control method. Figure 3 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, such as Figure 3 As shown, step S101 can be implemented by the following steps:

[0056] Step S301: extract feature information of each visual element in the interface to be controlled to obtain feature information of each visual element.

[0057] In some embodiments, feature information can be extracted from each visual element in the interface to be controlled using image recognition technology to obtain feature information of each visual element in the interface to be controlled. Here, each visual element can be identified using image recognition technology to determine feature information of each visual element. Feature information can include content information such as a title, subtitle, unrendered icons, and background, as well as outline information.

[0058] Step S302: Classify all visual elements in the interface to be controlled according to the outline and content of the visual elements to form at least one visual element class.

[0059] In some embodiments, all visual elements in the interface to be controlled are classified by the outline and content of the visual elements. Elements or controls with the same outline in the interface to be controlled can be classified into one category, or visual elements can be classified according to the content of each visual element. For example, the function of each visual element is determined according to the content of the visual element, and whether the visual element is a headline, a subheading, a background or text content is determined. Visual elements with the same function are classified into one category to form at least one visual element category.

[0060] Step S303: Aggregate the visual elements corresponding to each visual element class into the same visual element set.

[0061] In the embodiment of the present application, the visual elements corresponding to a visual element class are placed into the same visual element set to form at least one visual element set.

[0062] In the embodiments of the present application, visual elements in the control interface are sorted, and visual elements with the same characteristic information are formed into a visual element set. When rendering colors, the visual elements in the same visual element set are rendered using the same color value. In this way, the visual element classification method provided by the embodiments of the present application reduces the steps of color design for each visual element, and is more scientific and efficient in color rendering of the control interface.

[0063] In some embodiments, it is necessary to layer colors according to brightness. Based on the above embodiments, the present application further provides an interface color control method. Figure 4 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, such as Figure 4 As shown, step S102 can be implemented by the following steps:

[0064] Step S401: Determine the number of the color levels according to the number of the visual element sets; wherein the number of the color levels is greater than or equal to the number of the visual element sets.

[0065] In some embodiments, in order to enable color selection for each visual element set, when layering colors, the number of color levels is set to be greater than or equal to the number of the visual element sets.

[0066] Step S402: Obtain preset maximum brightness and preset minimum brightness corresponding to the multiple color levels.

[0067] Here, the preset maximum brightness and the preset minimum brightness refer to the maximum value and the minimum value of the brightness value when layered according to brightness. In the embodiment of the present application, the brightness value may range from 0 to 100.

[0068] Step S403 : Divide the brightness interval formed by the preset maximum brightness and the preset minimum brightness into a plurality of brightness sub-intervals by adopting the equal-value division method or the non-equal-value division method according to the number of the color levels.

[0069] In some embodiments, brightness sub-intervals mean that after the number of color levels is determined, the brightness values ​​can be divided according to equal division or non-equal division to form multiple brightness sub-intervals. For example: when the number of color levels is determined to be 10 according to the number of visual element sets, when equal division is used, the brightness interval size of each brightness sub-interval can be determined to be 10, that is, every 10 brightness values ​​are divided into one color level, that is, the brightness value of the color level can be 10, 20, 30... to 100; when non-equal division is used, the brightness value corresponding to each color level can be set to any value less than 100, and the sum of the ten brightness values ​​is equal to 100.

[0070] Step S404: Determine the saturation value corresponding to each brightness sub-interval.

[0071] In the embodiment of the present application, a relationship between brightness and saturation is established. As the brightness decreases, the saturation of the color increases. In order to more clearly express the relationship between brightness and saturation, the embodiment of the present application proposes a calculation formula between brightness and saturation, see the following formula (1):

[0072] B=a / (S+b)+c (1)

[0073] Where B is the brightness value; S is the saturation value; a, b, and c are constants. Different values ​​of a, b, and c determine the steepness of the trend between brightness and saturation. According to the above formula (1), after the brightness value of the color level is determined, the saturation value corresponding to the brightness value can be obtained.

[0074] Step S405 : Determine each of the brightness sub-intervals and the corresponding saturation value as color values ​​corresponding to the same color level.

[0075] In some embodiments, the color value corresponding to each color level includes a chromaticity value, a brightness value, and a saturation value. After obtaining the brightness value and saturation value of the brightness sub-interval, the brightness value and saturation value of the brightness sub-interval, and the preset chromaticity value are determined as the color value corresponding to the color level.

[0076] By layering colors, the present embodiment of the application can obtain a systematic and scientific color system of primary colors, neutral colors, and auxiliary colors. This system determines the color hierarchy and corresponding color values ​​suitable for the interface to be controlled based on the interface to be controlled and a common primary color value. In this way, the present embodiment of the application quantifies color values ​​and selects the color values ​​required for visual elements through scientific methods, reducing the cost of trial and error in color design and improving the accuracy and user usability of the color design of the interface to be controlled.

[0077] Based on the above embodiments, the present application further provides an interface color control method. Figure 5 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, such as Figure 5 As shown, step S103 can be implemented by the following steps:

[0078] Step S501: Determine the visual element attributes corresponding to each visual element set according to the outlines and contents of the visual elements in the visual element set.

[0079] In the embodiments of the present application, a visual element attribute may refer to the function of each visual element. Based on the outline and content of the visual elements in the visual element set, each visual element can be determined to be a headline, subheading, background, or text content, and the function of the visual element can be obtained. For example, if a visual element is a headline, it can be determined that the function of the visual element is to convey important information. When selecting a color for the visual element, a color with a lower brightness value will be selected to attract the user's attention.

[0080] Step S502: Match a specific number of color levels corresponding to the visual element set from the multiple color levels based on the visual element attributes of the visual element set, the attribute information of each color level, and the preset mapping relationship between the visual element attributes and the attribute information of the color level.

[0081] In some embodiments, each color level corresponds to an attribute information, where the attribute information may refer to whether each color level corresponds to a primary color, a neutral color, or a secondary color, wherein each attribute information may correspond to multiple color levels.

[0082] In an embodiment of the present application, a specific number of color levels can be determined for each visual element set based on the visual element attributes of the visual element set, the attribute information of each color level, and the preset mapping relationship between the visual element attributes and the attribute information of the color level. For example, when it is determined that the visual elements in the visual element set are all icons based on the visual element attributes of the visual element set, and in the preset mapping relationship, when the visual element attribute is an icon, there is a mapping relationship between the visual element and the color level whose attribute information is the main color, then the color level attribute information corresponding to the visual element set is determined to be the main color, wherein the color level with the main color attribute information has 3 color levels, that is, the visual element set matches 3 color levels corresponding to the visual element set among multiple color levels, and the specific number here is 3.

[0083] In some embodiments, the specific number may also be one. When the specific number is one, the matched color level is determined as the target color level.

[0084] In some embodiments, the specific number may be multiple. When the specific number is multiple, a color level is determined as the target color level from the multiple color levels, wherein a color level may be randomly determined as the target color level from the specific number of color levels; or, according to a preset screening rule, a color level is selected as the target color level from the specific number of color levels. For example, the preset screening rule here may refer to screening out the color level with the maximum brightness value from the multiple color levels as the target color level, or screening out the color level with the maximum saturation value from the multiple color levels as the target color level, or screening out the color level at the middle level from the multiple color levels as the target color level. Of course, other screening rules may also be preset to screen the target color level, which is not limited in the embodiments of the present application.

[0085] In some embodiments, when the specific number is multiple, a target color level may be selected using a color control model. The target color level may be selected by following the steps below:

[0086] Step S5021: When the specific number is multiple, input the visual element set into a color control model.

[0087] Step S5022: sort each of the visual element sets according to the visual element attributes of the visual element sets through the sorting layer of the color control model to obtain a visual element set sequence.

[0088] Step S5023: Through the matching layer of the color control model, according to the order of the visual element sets in the visual element set sequence and the hierarchical order of the specific number of color levels, one color level is matched for each of the visual element sets from the specific number of color levels as the target color level.

[0089] In some embodiments, each attribute information of a color level can correspond to multiple color levels. When visual element sets with different attributes are matched to a color level with the same attribute information, the visual element sets with different attributes can be sorted, and a target color level can be determined in multiple color levels based on the obtained visual element set sequence. For example, when a visual element set with the attribute of a main title and a subtitle matches a color level with the attribute information of an auxiliary color, where there are 6 color levels of auxiliary colors, the order of the auxiliary color levels can be determined based on the brightness value of the color level. At the same time, the sorting layer of the color control model sorts the visual element sets according to their functions. The information conveyed by the main title is more important, so the main title is placed before the subtitle, thereby obtaining a visual element set sequence. Through the matching layer of the color control model, according to the order of the visual element sets in the visual element set sequence and the hierarchical order of a specific number of color levels, a color level is matched for each visual element set from the specific number of color levels as the target color level.

[0090] Step S503: Determine the color value corresponding to the target color level of each visual element set as the target color value of each visual element in the corresponding visual element set.

[0091] In an embodiment of the present application, the color value corresponding to the target color level is determined as the target color value of each visual element in the corresponding visual element set, and each visual element in the corresponding visual element set is rendered according to the target color value to obtain a rendering interface.

[0092] The embodiment of the present application automatically matches the ideal color value for each visual element in the color hierarchy through the attributes of the visual element set and the attribute information of the color hierarchy, thereby saving color design costs and optimizing color functionality.

[0093] Based on the above embodiments, the training method of the color control model provided in the embodiments of the present application is: Figure 6 This is an optional flow chart of the color control model training method provided in the embodiment of the present application, such as Figure 6 As shown, the color control model can be trained through the following steps:

[0094] Step S601: Input the sample interface to be controlled and the sample interface into the color control model.

[0095] Here, the sample interface to be controlled has undergone image recognition to obtain a sample visual element set, wherein the sample visual element set refers to a visual element set after aggregating the visual elements in the interface to be controlled; the sample interface refers to the interface after ideal rendering of the interface to be controlled.

[0096] Step S602: sorting each of the visual element sets according to the visual element attributes of the visual element sets through the sorting layer of the color control model to obtain a visual element set sequence.

[0097] Step S603: Through the matching layer of the color control model, according to the order of the visual element sets in the visual element set sequence and the hierarchical order of the specific number of color levels, one color level is matched for each of the visual element sets from the specific number of color levels as the target color level.

[0098] Step S604: performing color rendering on the interface to be controlled according to the target color level to obtain a sample target rendering interface.

[0099] Step S605: Input the sample target rendering interface into the preset loss model to obtain the loss result.

[0100] Step S606: According to the loss result, the parameters in the processing layer and the matching layer are modified to obtain a trained color control model.

[0101] In an embodiment of the present application, the preset loss model includes a loss function, and the similarity between the sample target rendering interface and the sample interface is calculated by the loss function, and the obtained similarity is determined as the loss result.

[0102] In some embodiments, when there are multiple sets of sample visual elements in the sample target rendering interface, the similarity between the sample target rendering interface and the sample interface can take any value between 0 and 100%. As long as the similarity is greater than 80%, it means that the sample target rendering interface achieves the ideal color rendering result, indicating that the parameters of the color control model are correct and do not need to be corrected. Therefore, there is no need to further train the preset diagnostic model, that is, the continued training of the preset diagnostic model can be stopped.

[0103] In some embodiments, when the similarity is less than 80%, it indicates that the color control model cannot accurately render the ideal color, and therefore further training of the color control model is required.

[0104] In some embodiments, convergence conditions for the color control model training process can also be set. For example, the convergence condition can be that when the training time reaches a time threshold, the training of the color control model is stopped, or the convergence condition can be that when the number of training times reaches a number threshold, the training of the color control model is stopped, or the convergence condition can be that when the similarity between the sample target rendering interface output by the color control model and the sample interface is greater than 80%, the training of the color control model is stopped.

[0105] In the embodiment of the present application, the parameters in the color control model are corrected to obtain a trained color control model. In this way, when selecting color values ​​for visual elements in the control interface, the color values ​​are selected through the trained color control model, thereby improving the scientificity and accuracy of the color selection.

[0106] The following describes an exemplary application of the embodiments of the present application in a practical application scenario. Figure 7 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, such as Figure 7 As shown, the interface color control method provided in the embodiment of the present application can also be implemented by the following steps:

[0107] Step S701: Analyze the interface to be controlled of the product, analyze the types of colors required by the user interface, and establish different levels of color hierarchy.

[0108] Step S702: Create a mapping relationship between color levels and different user interface visual elements.

[0109] Step S703: Input the HSB color value or hexadecimal color value of the main color.

[0110] Step S704: Calculate the corresponding primary color, secondary color, and neutral color scheme using the model formula.

[0111] Step S705: assign colors to the user interface prototype according to the mapping relationship, and output the new color scheme user interface prototype.

[0112] In some embodiments, the HSB expression of the color value is (H, S, B), where H is hue, with a value of (0≤H≤359); B is brightness, with a value range of (0≤B≤100); and S is saturation, with a value range of (0≤S≤100). Figure 8 It is a two-dimensional HSB color model that can express the relationship between B (brightness) and S (saturation) when H (hue) is fixed.

[0113] In the embodiment of the present application, a connection is established between the hue value (i.e., chromaticity value), brightness value, and saturation value. As the brightness value decreases, the saturation value of the color tends to increase. In this way, the generated color retains both the brightness and hue characteristics of the base color; and by reducing the saturation of the color as the brightness increases, the color becomes lighter and the hue characteristics are weakened.

[0114] In some embodiments, in order to more clearly express the rational relationship between colors, the embodiments of the present application are Figure 8 In the HSB two-dimensional model, the relationship formula between B (brightness value) and S (saturation value) is introduced, as shown in the above calculation formula (1):

[0115] In some embodiments, taking the example of a neutral color requiring 10 levels of brightness, assuming H = 206, a = 1000, b = 8, and c = 0, the relationship between brightness and saturation can be obtained as follows:

[0116] B=1000 / (S+8) (2)

[0117] Figure 8 is the brightness-saturation curve in the interface color control method provided in the embodiment of the present application, Figure 8 is the function curve of formula (2), such as Figure 8 As shown, after dividing the brightness into 10 equal parts, the saturation value corresponding to the brightness value of each color level is obtained, and the resulting color is as follows Figure 8 Each dot on the middle curve corresponds to a different color level, that is, each dot has a different color value. For example: dot 801 has an H of 206, a B of 100, and an S of 100; dot 802 has an H of 206, a B of 90, and an S of 3.1; dot 803 has an H of 206, a B of 80, and an S of 4.5; and so on to dot 810, where H is 206, B is 10, and S is 90.

[0118] Figure 9 This is an optional flow chart of the interface color control method provided in the embodiment of the present application, such as Figure 9 As shown, Figure 9 As an example of the internal working mechanism of this method system, after the design prototype (i.e., the interface to be controlled) is input, the interface color control system identifies the corresponding components (i.e., visual elements) and the required color levels through image recognition and AI algorithms (i.e., color control model), generates a color mapping between the components and the color levels, and according to the input main color value (i.e., the preset main color value), substitutes the main color value into the function (i.e., the relationship formula between the brightness value and the saturation value) to calculate the output mapping color value, and applies the color scheme to the design prototype (i.e., the interface to be controlled) according to the mapping relationship, and outputs the design scheme.

[0119] like Figure 9 As shown, Figure 9 Figure a in the middle is the original user interface design prototype (i.e., the interface to be controlled), where 901 to 905 represent different visual elements, 901 is a large icon; 902 is a small icon; 903 is the background; 904 is a small title; and 905 is a large title.

[0120] Figure 9 Figure b in the middle shows the mapping relationship between visual elements and color levels. In this embodiment of the application, colors are divided into ten color levels according to brightness, and are divided into 1 to 10 levels according to brightness values. The smaller the number, the higher the brightness, that is, the brightness value of color level 1 is greater than the brightness value of color level 2. Here, the corresponding color level can be determined according to the attributes of each visual element. For example, an icon requires a color level with high brightness, and a title requires a color level with low brightness. In some embodiments, the color value of each color level can be determined according to the preset main color value first, and then the corresponding color level can be determined according to the attributes of each visual element. Figure 9 The middle dot 910 is the color when the color level is 1, the dot 920 is the color when the color level is 2, and so on and so forth to the dot when the color level is 10.

[0121] Figure 9 Figure c in the middle is a legend of the output color scheme and the output user interface color scheme (i.e., the rendering interface). In the embodiment of the present application, after determining the mapping relationship between the visual elements and the color levels, the preset main color value is input to obtain the color value of each color level. According to the relationship between the visual elements and the color levels, the color value corresponding to the color value of 1-1 is rendered to 901-1; the color value similar to the color value of 1-1 is rendered to 902-1; the color value corresponding to the color value of 1-2 is rendered to 903-1; the color value corresponding to the color value of 1-4 is rendered to 904-1; the color value corresponding to the color value of 1-5 is rendered to 904-1, and a rendering interface is obtained to realize color control of the interface to be controlled.

[0122] The interface color control method provided in the embodiment of the present application can obtain the color hierarchy and type suitable for the design prototype by analyzing the design prototype; can create a mapping relationship between color and user interface elements; can reasonably adopt color design models and design formulas to make the color scheme have certain rational characteristics; can automatically replace and assign the color of the design prototype, and output the interface prototype of the new color scheme.

[0123] By analyzing the user interface prototype, the embodiment of the present application can derive the functional components or elements used in the user interface prototype, reasonably allocate the colors required for different component elements of the design prototype through scientific methods, and establish a mapping relationship between colors and prototype elements; the embodiment of the present application can automatically assign a scientific and reasonable color design scheme to the design prototype, thereby improving the color functionality and usability of the product; the embodiment of the present application can output a corresponding color scheme through the corresponding color model formula by adjusting relevant constants; the embodiment of the present application can reduce the trial and error cost of color, and improve the accuracy of color design and user usability.

[0124] Figure 10 This is a schematic diagram of the structure of the interface color control device provided in the embodiment of the present application. Figure 10 As shown, the interface color control device 100 includes:

[0125] An aggregation module 101 is used to aggregate visual elements in the interface to be controlled in response to an interface color control request to form at least one visual element set; a first determination module 102 is used to determine, based on an input preset primary color value and the number of the visual element sets, a color level division method required for the visual element set and a color value corresponding to each color level in the multiple color levels obtained based on the division method; a second determination module 103 is used to determine, based on feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color level, a target color value of each visual element in the visual element set from the color values ​​corresponding to the multiple color levels; a control module 104 is used to perform interface color control on the interface to be controlled using the target color value.

[0126] In some embodiments, the aggregation module is further used to extract feature information of each visual element in the interface to be controlled to obtain feature information of each visual element; based on the feature information, the visual elements in the interface to be controlled are aggregated to form the at least one visual element set.

[0127] In some embodiments, the feature information includes at least: the outline and content of the visual element; the aggregation module is also used to: classify all visual elements in the interface to be controlled according to the outline and content of the visual element to form at least one visual element class; and aggregate the visual elements corresponding to each of the visual element classes into the same visual element set.

[0128] In some embodiments, the division method includes an equal-value division method or a non-equal-value division method; the color value includes at least a saturation value and a brightness value; the first determination module is also used to determine the number of the color levels according to the number of the visual element sets; wherein the number of the color levels is greater than or equal to the number of the visual element sets; obtain the preset maximum brightness and the preset minimum brightness corresponding to the multiple color levels; according to the number of the color levels, use the equal-value division method or the non-equal-value division method to divide the brightness interval formed by the preset maximum brightness and the preset minimum brightness to form multiple brightness sub-intervals; determine the saturation value corresponding to each of the brightness sub-intervals; determine each of the brightness sub-intervals and the corresponding saturation value as the color value corresponding to the same color level.

[0129] In some embodiments, the second determination module is further used to: determine the target color level of each of the visual element sets from the multiple color levels based on the characteristic information of the visual elements in the visual element set and the preset mapping relationship between the characteristic information and the color level; and determine the color value corresponding to the target color level of each of the visual element sets as the target color value of each visual element in the corresponding visual element set.

[0130] In some embodiments, each color level corresponds to an attribute information; the second determination module is also used to: determine the visual element attributes corresponding to each visual element set based on the outline and content of the visual elements in the visual element set; match a specific number of color levels corresponding to the visual element set from the multiple color levels according to the visual element attributes of the visual element set, the attribute information of each color level, and the preset mapping relationship between the visual element attributes and the attribute information of the color level; when the specific number is one, determine the matched color level as the target color level; when the specific number is multiple, determine one color level from the specific number of color levels as the target color level.

[0131] In some embodiments, the second determination module is further used to: when the specific number is multiple, input the visual element set into the color control model; through the sorting layer of the color control model, sort each of the visual element sets according to the visual element attributes of the visual element set to obtain a visual element set sequence; through the matching layer of the color control model, according to the order of the visual element sets in the visual element set sequence and the level order of the specific number of color levels, match a color level as the target color level for each of the visual element sets from the specific number of color levels.

[0132] In some embodiments, the second determination module is further used to: when the specific number is multiple, randomly determine a color level from the specific number of color levels as the target color level; or, according to preset screening rules, select a color level from the specific number of color levels as the target color level.

[0133] It should be noted that the description of the device embodiment of the present application is similar to the description of the method embodiment described above, and has similar beneficial effects as the method embodiment, so it will not be repeated. For technical details not disclosed in the device embodiment, please refer to the description of the method embodiment of the present application for understanding.

[0134] It should be noted that in the embodiment of the present application, if the above-mentioned interface color control method is implemented in the form of a software function module and sold or used as an independent product, it can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application, or the part that contributes to the relevant technology, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a terminal to execute all or part of the methods described in each embodiment of the present application. The aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk or an optical disk. In this way, the embodiment of the present application is not limited to any specific combination of hardware and software.

[0135] Correspondingly, the embodiment of the present application provides an interface color control device, Figure 11 This is a schematic diagram of the structure of the interface color control device provided in the embodiment of the present application. Figure 11 As shown, the interface color control device 110 includes at least: a processor 111 and a computer-readable storage medium 112 configured to store executable instructions. The processor 111 generally controls the overall operation of the interface color control device. The computer-readable storage medium 112 is configured to store instructions and applications executable by the processor 111 and can also cache data to be processed or processed by the processor 111 and various modules in the interface color control device 110. This can be implemented using flash memory (FLASH) or random access memory (RAM).

[0136] The embodiment of the present application provides a storage medium storing executable instructions, wherein the executable instructions are stored. When the executable instructions are executed by a processor, the processor will execute the method provided by the embodiment of the present application, for example, Figure 1 The method shown.

[0137] In some embodiments, the storage medium can be a computer-readable storage medium, such as a ferroelectric random access memory (FRAM), a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a flash memory, a magnetic surface memory, an optical disc, or a compact disc read-only memory (CD-ROM); it can also be various devices including one or any combination of the above memories.

[0138] In some embodiments, executable instructions may be in the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0139] By way of example, executable instructions may, but need not necessarily, correspond to a file in a file system, may be stored as part of a file storing other programs or data, such as one or more scripts in a Hypertext Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinating files (e.g., files storing one or more modules, subroutines, or code portions). By way of example, executable instructions may be deployed for execution on one computing device, or on multiple computing devices located at one site, or on multiple computing devices distributed across multiple sites and interconnected by a communication network.

[0140] The above description is merely an embodiment of the present application and is not intended to limit the scope of protection of the present application. Any modifications, equivalent replacements, and improvements made within the spirit and scope of the present application are included in the scope of protection of the present application.

[0141] It should be understood that "one embodiment" or "an embodiment" mentioned throughout the specification means that the specific features, structures or characteristics related to the embodiment are included in at least one embodiment of the present application. Therefore, "in one embodiment" or "in an embodiment" appearing throughout the specification does not necessarily refer to the same embodiment. In addition, these specific features, structures or characteristics can be combined in one or more embodiments in any suitable manner. It should be understood that in the various embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are for description only and do not represent the advantages and disadvantages of the embodiments.

[0142] It should be noted that, in this article, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method or device. In the absence of further restrictions, an element defined by the statement "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element. In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the units is only a logical function division. In actual implementation, there may be other division methods, such as: multiple units or components can be combined, or can be integrated into another system, or some features can be ignored, or not executed.

[0143] The above is merely an embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for controlling interface color, characterized in that: include: In response to the interface color control request, aggregating visual elements in the interface to be controlled to form at least one visual element set; Determining, based on the input preset primary color value and the number of the visual element set, a division method of color levels required for the visual element set, and a color value corresponding to each color level in a plurality of color levels obtained based on the division method; determining a target color level for each of the visual element sets from the plurality of color levels according to feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color levels; determining a color value corresponding to the target color level of each of the visual element sets as a target color value of each visual element in the corresponding visual element set; Performing interface color control on the interface to be controlled using the target color value; Wherein, each color level corresponds to an attribute information; Determining a target color level for each of the visual element sets from the plurality of color levels based on feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color levels includes: determining, according to the outlines and contents of the visual elements in the visual element set, visual element attributes corresponding to each visual element set; matching a specific number of color levels corresponding to the visual element set from the plurality of color levels based on visual element attributes of the visual element set, attribute information of each color level, and a preset mapping relationship between the visual element attributes and the attribute information of the color levels; When the specific number is one, the matched color level is determined as the target color level; When the specific number is plural, one color level among the specific number of color levels is determined as the target color level.

2. The method according to claim 1, characterized in that The aggregating the visual elements in the interface to be controlled to form at least one visual element set includes: Extracting feature information of each visual element in the interface to be controlled to obtain feature information of each visual element; According to the feature information, visual elements in the interface to be controlled are aggregated to form the at least one visual element set.

3. The method according to claim 2, characterized in that The characteristic information includes at least: the outline and content of the visual element; The aggregating the visual elements in the interface to be controlled according to the feature information to form at least one visual element set includes: Classifying all visual elements in the interface to be controlled according to the outline and content of the visual elements to form at least one visual element class; The visual elements corresponding to each visual element class are aggregated into the same visual element set.

4. The method according to claim 1, wherein The division method includes an equal value division method or a non-equal value division method; the color value includes at least a saturation value and a brightness value; The step of determining, based on the input preset primary color value and the number of the visual element set, a division method of color levels required for the visual element set and a color value corresponding to each color level in a plurality of color levels obtained based on the division method, includes: Determining the number of the color levels according to the number of the visual element sets; wherein the number of the color levels is greater than or equal to the number of the visual element sets; Obtaining preset maximum brightness and preset minimum brightness corresponding to the multiple color levels; Dividing the brightness interval formed by the preset maximum brightness and the preset minimum brightness into a plurality of brightness sub-intervals by using the equal-value division method or the non-equal-value division method according to the number of the color levels; Determining a saturation value corresponding to each brightness sub-interval; Each of the brightness sub-intervals and the corresponding saturation value are determined as color values ​​corresponding to the same color level.

5. The method according to claim 1, characterized in that When the specific number is plural, determining one color level from the specific number of color levels as the target color level includes: When the specific number is a plurality, inputting the set of visual elements into a color control model; sorting each of the visual element sets according to the visual element attributes of the visual element sets through the sorting layer of the color control model to obtain a visual element set sequence; Through the matching layer of the color control model, according to the order of the visual element sets in the visual element set sequence and the level order of the specific number of color levels, one color level is matched for each of the visual element sets as the target color level from the specific number of color levels.

6. The method according to claim 1, characterized in that When the specific number is plural, determining one color level from the specific number of color levels as the target color level includes: When the specific number is multiple, randomly determining a color level from the specific number of color levels as the target color level; or, When the specific number is plural, one color level is selected from the specific number of color levels as the target color level according to a preset screening rule.

7. An interface color control device, characterized in that: include: an aggregation module, configured to aggregate visual elements in the interface to be controlled to form at least one visual element set in response to an interface color control request; a first determining module configured to determine, based on an input preset primary color value and the number of the visual element set, a color level division method required for the visual element set and a color value corresponding to each color level in a plurality of color levels obtained by the division method; a second determining module, configured to determine a target color level for each of the visual element sets from the plurality of color levels based on feature information of the visual elements in the visual element set and a preset mapping relationship between the feature information and the color levels; determining a color value corresponding to the target color level of each of the visual element sets as a target color value of each visual element in the corresponding visual element set; A control module, configured to perform interface color control on the interface to be controlled using the target color value; Wherein, each color level corresponds to an attribute information; said determining the target color level of each visual element set from the multiple color levels according to the feature information of the visual elements in the visual element set and the preset mapping relationship between the feature information and the color level includes: determining the visual element attributes corresponding to each visual element set according to the outline and content of the visual elements in the visual element set; matching a specific number of color levels corresponding to the visual element set from the multiple color levels according to the visual element attributes of the visual element set, the attribute information of each color level, and the preset mapping relationship between the visual element attributes and the attribute information of the color level; when the specific number is one, determining the matched color level as the target color level; when the specific number is multiple, determining one color level from the specific number of color levels as the target color level.

8. A computer-readable storage medium, characterized in that Executable instructions are stored, which are used to cause a processor to execute the executable instructions to implement the interface color control method according to any one of claims 1 to 6.

Images