UI processing method and device, electronic equipment and storage medium

Abstract

The invention provides a UI (User Interface) processing method and device, electronic equipment and a storage medium, and the method comprises the following steps: when user interface UI processing is carried out, obtaining multiple pieces of parameter information of a reference element in a current UI; for each parameter, processing the parameter information to obtain an adjacent parameter; and on the basis of the adjacent parameters corresponding to each item of parameter information, constructing adjacent elements corresponding to the reference elements so as to set the adjacent elements on the webpage. When the webpage processing of the UI is carried out, the reference element in the current webpage is determined, and multiple parameter information of the reference element is separated and collected; sequentially processing the parameter information of each parameter according to a dynamic gradient algorithm to generate new parameter information; and the adjacent elements corresponding to the reference elements are constructed according to the adjacent parameters corresponding to the parameter information, so that the efficiency of developing the adjacent elements is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of user interface (UI) processing, and in particular to a UI processing method, device, electronic device and storage medium. Background Art

[0002] The user interface UI provided by the banking system meets the actual business needs of banking employees. During the UI setting process, multiple similar or close icons, buttons, switches, progress bars, search bars and other basic elements are often reasonably laid out to form a complete interface effect.

[0003] In order to quickly develop similar elements, it is often necessary to adjust the basic elements of the interface such as images, web devices or data visualization, determine the color, subject, etc. that are very close to the original color to achieve the adjustment of the basic elements.

[0004] Currently, color balance or tone correction is often performed on basic elements in a UI interface manually to construct new adjacent elements. However, the efficiency of constructing adjacent elements manually is low. Summary of the invention

[0005] In view of this, embodiments of the present invention provide a UI processing method, device, electronic device and storage medium to solve the problem of low efficiency in constructing adjacent elements in the prior art.

[0006] To achieve the above objectives, the embodiments of the present invention provide the following technical solutions:

[0007] A first aspect of an embodiment of the present invention shows a UI processing method, the method comprising:

[0008] When performing user interface UI processing, obtain multiple parameter information of the reference elements in the current UI;

[0009] For each parameter, the parameter information is processed to obtain adjacent parameters;

[0010] A neighboring element corresponding to the reference element is constructed based on the neighboring parameter corresponding to each item of parameter information, so as to set the neighboring element on the web page.

[0011] Optionally, if the parameter information is text parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0012] Extracting text features from the text parameter information;

[0013] Constructing a corresponding text feature space based on the text features;

[0014] Based on the processing of the text feature space and the preset sample text feature space, the similarity between the text feature space and each preset sample text feature space is obtained;

[0015] Sorting the similarities between the text feature space and each preset sample text feature space in descending order;

[0016] The text corresponding to the first-ranked preset sample text feature space is used as a neighboring parameter, and the neighboring text belongs to the neighboring parameter.

[0017] Optionally, if the parameter information is hue parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0018] Converting the color value of the hue parameter information into a first color space value;

[0019] According to the neighbor element requirement, the hue value in the first color space value is processed to obtain a new hue value;

[0020] If the new hue value is determined to be legal based on the angle value corresponding to the new hue value, the new hue value is used as a proximity parameter.

[0021] Optionally, if the parameter information is saturation parameter information, processing the parameter information to obtain a neighboring parameter includes:

[0022] Converting the color value of the saturation parameter information into a second color space value;

[0023] Determine the saturation adjustment direction, adjustment step length and number of adjustment steps according to the neighbor element requirement and the saturation value in the second color space value;

[0024] Processing the saturation value in the second color space value based on the adjustment direction, the adjustment step length and the adjustment step number to obtain a new saturation;

[0025] The new saturation is taken as the neighbor parameter.

[0026] Optionally, if the parameter information is brightness parameter information, processing the parameter information to obtain a proximity parameter includes:

[0027] Converting the color value of the brightness parameter information into a third color space value;

[0028] Determining a brightness adjustment ratio according to neighbor element requirements and a brightness value in the third color space value;

[0029] Adjust the brightness value in the third color space value based on the brightness adjustment ratio to obtain a new brightness value;

[0030] The new brightness value is used as a neighboring parameter.

[0031] Optionally, if the parameter information is transparency parameter information, the parameter information is processed to obtain a proximity parameter, including:

[0032] Converting the color value of the transparency parameter information into a color value with a transparency value;

[0033] Calculate the transparency value in the color value according to the neighbor element requirements to obtain a new transparency value;

[0034] If it is determined that the new transparency value meets the preset range, the new transparency value is used as a proximity parameter.

[0035] Optionally, if the parameter information is other parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0036] Determine new parameter information corresponding to other parameter information according to neighbor element requirements;

[0037] The new parameter information is used as the proximity parameter.

[0038] A second aspect of an embodiment of the present invention shows a UI processing device, the device comprising:

[0039] An acquisition unit, used to acquire multiple parameter information of a reference element in the current UI when performing UI processing;

[0040] A processing unit, used for processing the parameter information for each parameter to obtain a neighboring parameter;

[0041] The integration unit is used to construct a neighboring element corresponding to the reference element based on the neighboring parameters corresponding to each item of parameter information, so as to set the neighboring element on the web page.

[0042] A third aspect of an embodiment of the present invention shows an electronic device, which is used to run a program, wherein the program executes the UI processing method shown in the first aspect of the embodiment of the present invention when running.

[0043] A fourth aspect of an embodiment of the present invention shows a storage medium, which includes a storage program, wherein when the program is running, the device where the storage medium is located is controlled to execute the UI processing method shown in the first aspect of the embodiment of the present invention.

[0044] Based on the above-mentioned embodiment of the present invention, a UI processing method, device, electronic device and storage medium are provided, the method comprising: when performing user interface UI processing, obtaining multiple parameter information of the reference element in the current UI; for each parameter, processing the parameter information to obtain neighboring parameters; constructing neighboring elements corresponding to the reference element based on the neighboring parameters corresponding to each parameter information, so as to set the neighboring elements on the web page. In the embodiment of the present invention, when performing web page processing of the user interface UI, the reference element in the current web page is determined, and multiple parameter information of the reference element is separated and collected; then the parameter information of each parameter is processed in turn according to the dynamic gradient algorithm to generate new parameter information; and the neighboring elements corresponding to the reference element are constructed according to the neighboring parameters corresponding to each parameter information, thereby improving the efficiency of neighboring element development. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0046] Figure 1 A flowchart of a UI processing method according to an embodiment of the present invention is shown;

[0047] Figure 2 A schematic diagram of obtaining multiple parameters of a reference element according to an embodiment of the present invention;

[0048] Figure 3 A schematic diagram of generating neighboring elements from a reference element according to an embodiment of the present invention;

[0049] Figure 4 It is a schematic diagram of the structure of a UI processing device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0050] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0051] The terms "first", "second", "third", "fourth", etc. (if any) in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0052] It should be noted that the descriptions of "first", "second", etc. in the present invention are only used for descriptive purposes and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but they must be based on the ability of ordinary technicians in the field to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.

[0053] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article 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, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0054] See also Figure 1 , is a flow chart of a UI processing method according to an embodiment of the present invention, wherein the method comprises:

[0055] Step S101: when performing user interface UI processing, obtain multiple parameter information of reference elements in the current UI.

[0056] In the specific implementation of step S101, when processing the web page of the user interface UI, when receiving a neighboring element generation instruction triggered by the user, multiple parameter information of the reference element in the current web page is obtained based on the neighboring element generation instruction, that is, parameter information corresponding to each parameter.

[0057] It should be noted that the neighbor element generation instruction carries the neighbor element requirement.

[0058] Baseline elements are the basic elements that make up the user interface (UI) design, mainly including icons, buttons, switches, progress bars, search bars, etc. These elements together form a complete interface effect through the combination of graphics, color matching, material and style, and reasonable layout.

[0059] The neighbor element requirements include hue adjustment rules, saturation adjustment rules, brightness adjustment rules, transparency adjustment rules, adjustment rules corresponding to other parameter information, and the number of neighbor elements that need to be generated at one time.

[0060] The process of acquiring multiple parameter information of the reference element in the current webpage based on the adjacent element generation instruction includes:

[0061] The first method is to use a design tool, such as a vector drawing application, a cloud-based UI design tool, etc., and call the design tool to collect multiple parameter information of the current basic elements in the UI interface.

[0062] The second method is to analyze the page source code of the UI. Based on the UI diagram designed based on the web page or mobile application, you can determine multiple parameter information corresponding to the basic elements by analyzing the page source code.

[0063] The third method is to use automated tools for positioning. Specifically, automated use case positioning can be performed through the ID, class name, name, label, selector, etc. of the basic elements to collect multiple parameter information of the current basic elements.

[0064] The fourth method is to observe the UI diagram and analyze and obtain the visual information and design elements of the basic elements, that is, multiple parameter information of the basic elements.

[0065] Based on this, the above collection method can be Figure 2 shown.

[0066] The multiple parameter information of the basic elements collected include parameter information corresponding to parameters such as text, font size, hue, saturation, brightness, transparency, line, size, filling method and animation effect.

[0067] Step S102: for each parameter, the parameter information is processed to obtain adjacent parameters.

[0068] The adjacent parameters include text, font size, hue, saturation, brightness, transparency, line, size, filling method, animation effect and other adjacent parameters.

[0069] In the specific implementation process of step S102, there are multiple implementation methods.

[0070] In a first implementation, if the parameter information is text parameter information, the process of processing the parameter information to obtain the neighboring parameters includes:

[0071] Step S11: extracting text features from the text parameter information;

[0072] It should be noted that the text may be a font or a font size, and the text features include font features and font size features.

[0073] In the specific implementation process of step S11, if it is a font, the font features in the font parameter information are extracted; if it is a font size, the font size features in the font size parameter information are extracted.

[0074] It should be noted that font refers to the style and style of text, and font features include font shape, stroke thickness, slant and weight;

[0075] Font size refers to the size of text. Font size characteristics include size, dimension, character spacing, line spacing and other characteristics.

[0076] Step S12: constructing a corresponding text feature space based on the text features;

[0077] In the specific implementation process of step S12, if it is a font, each font feature is taken as a vector, and a space composed of vectors corresponding to multiple font features is used as the font feature space. Similarly, the font size feature space is obtained.

[0078] Step S13: performing processing based on the text feature space and the preset sample text feature space to obtain the similarity between the text feature space and each preset sample text feature space;

[0079] It should be noted that the preset sample text feature space is set in advance, and the features corresponding to each historical font or font size are vectorized, and the sample text feature space corresponding to each font or font size is constructed.

[0080] In the specific implementation of step S13, vector similarity calculation is performed on the vectors of the text feature space and the preset sample text feature space to obtain the similarity between the text feature space and each preset sample text feature space;

[0081] Step S14: sorting the similarities between the text feature space and each preset sample text feature space in descending order;

[0082] In the specific implementation of step S14, the similarities are sorted in descending order.

[0083] Step S15: taking the text corresponding to the first-ranked preset sample text feature space as a neighboring parameter, and the neighboring text belongs to the neighboring parameter.

[0084] In the process of implementing step S15, if the number of neighboring elements to be generated is determined in the neighbor element requirement, if the number of neighboring elements to be generated is 1, the font or font size corresponding to the first-ranked preset sample text feature space is used as the neighboring text; the neighboring text belongs to the neighboring parameter.

[0085] Optionally, if the number of neighboring elements to be generated is determined in the neighbor element requirement, if the number of neighboring elements to be generated is N, the fonts or font sizes corresponding to the first N preset sample text feature spaces are selected as neighboring text in descending order; the neighboring text belongs to the neighboring parameter.

[0086] Wherein, N is a positive integer greater than or equal to 2.

[0087] In a second implementation, if the parameter information is hue parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0088] Step S21: converting the color value of the hue parameter information into a first color space value;

[0089] In the specific implementation of step S21, the RGB color value of the hue parameter information is converted into an HSL (hue, saturation, brightness) first color space value, and the hue value H in the first color space value is extracted.

[0090] Step S22: processing the hue value in the first color space value according to the neighbor element requirement to obtain a new hue value;

[0091] In the specific implementation of step S22, the hue value of the current color is moved to the left or right by a certain angle according to the requirements of the neighboring elements to obtain the hue value of a new neighboring element.

[0092] It should be noted that the hue adjustment rule set in the neighbor element requirement determines that the hue is moved to the left or right by a certain angle, which is not fixed but random. For example, the last time the hue was moved to the left by 5 hue values, the next time it is moved to the right by 15 hue values.

[0093] Optionally, if the number of neighbor elements is 1, the above method is directly executed. If the number of neighbor elements is N, the hue value of the current color is moved N angles to the left or right according to the hue adjustment rule to obtain the hue values ​​of N new neighbor elements.

[0094] Step S23: Determine whether the new hue value is legal based on the angle value corresponding to the new hue value. If the new hue value is legal based on the angle value corresponding to the new hue value, execute step S24; if not, map the angle value to the range of 0 to 360 degrees.

[0095] It should be noted that on the color wheel, the hue values ​​of all colors are expressed in advance as angle values ​​between 0 and 360 degrees.

[0096] In the process of implementing step S23, the new hue value is compared to the color wheel to determine the angle value corresponding to the new hue value; the angle value is subjected to modulo operation to determine whether there is a remainder. If so, the angle value is mapped to a hue range of 0 to 360 degrees, and step S24 is also executed with the new hue value to ensure that the calculated color value is legal; if not, step S24 is executed.

[0097] Step S24: taking the new hue value as a neighboring parameter.

[0098] In the specific implementation of step S24, the new hue value is used as the adjacent hue, and the adjacent hue belongs to the adjacent parameter.

[0099] In a third implementation, if the parameter information is saturation parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0100] Step S31: converting the color value of the saturation parameter information into a second color space value;

[0101] In the specific implementation of step S31, the RGB color value of the saturation parameter information is converted into an HSL (hue, saturation, brightness) second color space value, and the saturation S in the second color space value is extracted.

[0102] Step S32: determining a saturation adjustment direction, an adjustment step length and an adjustment step number according to a neighbor element requirement and a saturation value in the second color space value;

[0103] In the specific implementation of step S32, the saturation adjustment rule in the neighbor element requirement is searched according to the saturation in the second color space value to determine the saturation adjustment direction, adjustment step length and number of adjustment steps corresponding to the saturation in the second color space value;

[0104] Optionally, if the number of neighbor elements is 1, the above method is directly executed; if the number of neighbor elements is N, the N saturation adjustment directions, adjustment steps and adjustment steps corresponding to the saturation in the second color space value are determined according to the saturation adjustment rules, so as to subsequently generate N new saturations.

[0105] It should be noted that the saturation adjustment rule sets the corresponding relationship between different saturations and adjustment directions, adjustment step lengths, and adjustment step numbers.

[0106] It should be noted that in the color model, saturation refers to the purity of the color, that is, the degree of gray contained in the color. If the saturation is 0, it is gray; if the saturation is 100%, it is a pure color.

[0107] The step size refers to the magnitude of each saturation operation or adjustment. By setting the step size parameter, you can control the magnitude of the saturation adjustment and the color effect.

[0108] Saturation is measured in steps, and it takes a few steps to get the saturation to 100%.

[0109] The direction of the adjustment is whether to increase or decrease saturation.

[0110] Step S33: processing the saturation value in the second color space value based on the adjustment direction, the adjustment step length and the adjustment step number to obtain a new saturation;

[0111] In the process of specifically implementing step S33, the saturation value in the second color space value is adjusted according to the adjustment direction, adjustment step size and number of adjustment steps using a linear interpolation method to obtain a new saturation value, so that a similar color can be generated subsequently by adjusting the saturation of the original color. That is, the saturation value in the second color space value is used as x of the linear interpolation method, the new saturation value is used as y, the adjustment direction is used as a sign, the adjustment step size and the number of adjustment steps are used as variable parameters, and based on this, the linear interpolation method is substituted to calculate a new saturation value as y.

[0112] Among them, the linear interpolation method is a method of estimating the value of a function at a certain point based on the known saturation value in the second color space value.

[0113] Step S34: taking the new saturation as a neighboring parameter.

[0114] In the specific implementation of step S34, the new saturation is used as the neighboring saturation, and the neighboring saturation belongs to the neighboring parameter.

[0115] In a fourth implementation, if the parameter information is brightness parameter information, the parameter information is processed to obtain a neighboring parameter, including:

[0116] Step S41: converting the color value of the brightness parameter information into a third color space value;

[0117] In the specific implementation of step S31, the RGB color value of the brightness parameter information is converted into an HSL (hue, saturation, brightness) third color space value, and the brightness L in the third color space value is extracted.

[0118] Step S42: determining a brightness adjustment ratio according to neighbor element requirements and the brightness value in the third color space value;

[0119] In the specific implementation of step S42, the brightness adjustment rule in the neighbor element requirement is searched according to the brightness value in the third color space value to determine the brightness adjustment ratio corresponding to the brightness in the third color space value;

[0120] Optionally, if the number of neighbor elements is 1, the above method is directly executed; if the number of neighbor elements is N, N brightness adjustment ratios corresponding to the brightness in the third color space value are determined according to the brightness adjustment rule to subsequently generate N new brightnesses.

[0121] It should be noted that the brightness adjustment rule sets different corresponding relationships between brightness and adjustment ratios.

[0122] Brightness can be expressed by the Lightness value in the HSL color model. The larger the Lightness value, the brighter the color. The value range is generally 0 to 100.

[0123] Step S43: adjusting the brightness value in the third color space value based on the brightness adjustment ratio to obtain a new brightness value;

[0124] In the process of implementing step S43, if the brightness adjustment ratio is to increase by a certain ratio, that is, the color of the basic element needs to be brightened, the brightness value in the third color space value is increased by the brightness adjustment ratio to obtain a new brightness value; if the brightness adjustment ratio is to decrease by a certain ratio, that is, the color of the basic element needs to be darkened, the brightness value in the third color space value is subtracted from the brightness adjustment ratio to obtain a new brightness value, so that a similar color can be generated subsequently by adjusting the brightness of the original color.

[0125] Step S44: taking the new brightness value as a proximity parameter.

[0126] In the specific implementation of step S44, the new brightness value is used as the neighboring brightness, and the neighboring brightness belongs to the neighboring parameter.

[0127] In a fifth implementation, if the parameter information is transparency parameter information, the parameter information is processed to obtain a proximity parameter, including:

[0128] Step S51: converting the color value of the transparency parameter information into a color value with a transparency value;

[0129] In the specific implementation process of step S51, the RGB color value of the transparency parameter information is converted into an RGBA color value with transparency information, and then the transparency value A is taken out.

[0130] Step S52: calculating the transparency value in the color value according to the neighbor element requirement to obtain a new transparency value;

[0131] In the specific implementation of step S52, according to the transparency value in the color value, the transparency adjustment rule in the neighbor element requirement is searched to determine the transparency adjustment variable corresponding to the transparency value; the transparency adjustment variable and the transparency value in the color value are substituted into the linear interpolation method to obtain a new transparency value;

[0132] It should be noted that the transparency adjustment rule sets the corresponding relationship between different transparencies and transparency adjustment variables.

[0133] Optionally, if the number of neighbor elements is 1, the above method is directly executed; if the number of neighbor elements is N, N transparency adjustment variables are determined according to the transparency adjustment rule, so as to subsequently generate N new transparencies.

[0134] Step S53: Determine whether the new transparency value is within a preset range. If so, execute step S54; if not, return to step S52 to recalculate the transparency value.

[0135] It should be noted that the preset range, that is, the range of transparency values ​​is from 0 to 1, so the calculated new transparency value also needs to be limited to ensure that it is within the legal range.

[0136] In the specific implementation of step S53, it is determined whether the new transparency value is greater than the first endpoint 0 of the preset range and less than the second endpoint 1 of the preset range. If so, step S54 is executed; if not, step S52 is returned to recalculate the transparency value.

[0137] Step S54: taking the new transparency value as a proximity parameter.

[0138] In the specific implementation of step S44, the new transparency value is used as the neighboring transparency, and the neighboring transparency belongs to the neighboring parameter.

[0139] In a sixth implementation, if the parameter information is other parameter information, processing the parameter information to obtain a neighboring parameter includes:

[0140] It should be noted that other parameter information includes the dimensions, size, filling method, and animation effect of lines and basic elements.

[0141] Step S61: determining new parameter information corresponding to other parameter information according to neighbor element requirements;

[0142] In the specific implementation of step S61, the corresponding adjustment rule in the neighbor element requirement is searched according to the other parameter information to determine the new parameter information corresponding to the other parameter information;

[0143] It should be noted that the corresponding relationship between other parameter information and new parameter information is set in the adjustment rule of other parameter information.

[0144] For example: line parameter information, new parameter information corresponding to the line parameter information is determined according to the corresponding adjustment rules in the neighbor element requirements, wherein the new parameter information refers to lines that have a certain proximity relationship with each other on the screen, are visually close to each other or have similar properties, and produce visually coherent, flowing or contrasting effects.

[0145] Optionally, if the number of neighbor elements is 1, the above method is directly executed; if the number of neighbor elements is N, N new other parameter information is determined according to the adjustment rule of other parameter information.

[0146] Step S62: Use the new parameter information as the proximity parameter.

[0147] In the process of specifically implementing step S44, the new lines are taken as adjacent lines, and the adjacent lines belong to the adjacent parameters; the new basic element size is taken as the adjacent size, and the adjacent basic element size belongs to the adjacent parameters; the new basic element size is taken as the adjacent size, and the adjacent basic element size belongs to the adjacent parameters; the new filling method is taken as the adjacent filling method, and the adjacent filling method belongs to the adjacent parameters; the new animation effect is taken as the adjacent animation effect, and the adjacent animation effect belongs to the adjacent parameters.

[0148] Step S103: constructing a neighboring element corresponding to the reference element based on the neighboring parameters corresponding to each item of parameter information, so as to set the neighboring element on the UI.

[0149] In the process of implementing step S103, the multiple neighboring parameters, namely, neighboring fonts, neighboring font sizes, neighboring hues, neighboring saturation, neighboring brightness, neighboring transparency, neighboring lines, neighboring dimensions, neighboring sizes, neighboring fill methods, and neighboring animation effects are integrated to generate neighboring elements and output, so that the neighboring elements can be set on the UI.

[0150] Optionally, if the number of neighbor elements is N, one parameter information of each parameter is integrated to obtain one neighbor element, and then N neighbor elements are obtained.

[0151] Adjacent elements include adjacent colors, adjacent icons, adjacent menus, adjacent sliders, and other adjacent elements required for page UI design. They are very similar in style, hue, tone, emotional characteristics, and filling methods to the base elements. Adjacent elements can create rich textures and layers in UI design.

[0152] The dynamic gradient algorithm is a variant of the gradient descent algorithm. It adjusts the calculation and direction of the gradient according to the dynamic changes of the data. In each iteration, the model parameters are updated according to the gradient information of the objective function, so as to gradually approach the optimal solution. The dynamic gradient algorithm calculates the neighboring elements related to the benchmark elements by calculating the font, font size, hue, saturation, brightness, transparency, line, size, size, filling method, animation effect and other parameters. As the design unit elements in UI design, the existing neighboring elements can reduce the design cost, unify the design style and ensure the design effect.

[0153] In order to better understand the process shown in step S101 to step S103 of the above embodiment of the present invention, Figure 3 Provide explanation.

[0154] The above-mentioned processing is performed on multiple parameter information of the benchmark element, such as font, font size, hue, saturation, brightness, transparency, line, size, size, filling method, animation effect, etc., to obtain adjacent elements obtained by integrating the multiple parameter information such as the processed font, font size, hue, saturation, brightness, transparency, line, size, size, filling method, animation effect, etc.

[0155] The UI processing shown in the present invention is applicable to various color-related application scenarios, such as image processing, data visualization, web design, etc. in banking systems. The algorithm parameters can be adjusted according to different scenarios to achieve various customized effects.

[0156] In an embodiment of the present invention, a method for generating neighboring elements based on a dynamic gradient algorithm is shown. When processing a web page of a user interface UI, a reference element in the current web page is determined, and multiple parameter information such as font, font size, hue, saturation, brightness, transparency, line, size, fill mode, animation effect, etc. of the reference element is separated and collected; then the parameter information of each parameter is processed in turn according to the dynamic gradient algorithm to generate new parameter information; and each parameter information is corresponding to the neighboring parameter to construct the neighboring element corresponding to the reference element, thereby improving the efficiency of UI development and the accuracy of neighboring element generation, thereby reducing the cost of UI design.

[0157] Based on the UI processing method shown in the above embodiment of the present invention, the embodiment of the present invention also discloses a UI processing device. Figure 4 As shown, the device comprises:

[0158] The acquisition unit 401 is used to acquire multiple parameter information of the reference element in the current UI when performing UI processing;

[0159] The processing unit 402 is used to process the parameter information for each parameter to obtain a neighboring parameter;

[0160] The integration unit 403 is configured to construct a neighboring element corresponding to the reference element based on the neighboring parameter corresponding to each item of parameter information, so as to set the neighboring element on the UI.

[0161] The specific principles and execution processes of each unit in the UI processing device disclosed in the above embodiment of the present invention are the same as the corresponding contents in the UI processing method provided in the above embodiment of the present invention. Please refer to the corresponding parts of the UI processing method disclosed in the above embodiment of the present invention, and will not be repeated here.

[0162] In an embodiment of the present invention, a method for generating neighboring elements based on a dynamic gradient algorithm is shown. When processing a web page of a user interface UI, a reference element in the current web page is determined, and multiple parameter information such as font, font size, hue, saturation, brightness, transparency, line, size, fill mode, animation effect, etc. of the reference element is separated and collected; then the parameter information of each parameter is processed in turn according to the dynamic gradient algorithm to generate new parameter information; and each parameter information is corresponding to the neighboring parameter to construct the neighboring element corresponding to the reference element, thereby improving the efficiency of UI development and the accuracy of neighboring element generation.

[0163] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is text parameter information, the processing unit 402 for processing the parameter information to obtain the adjacent parameters is specifically configured to:

[0164] Extracting text features from the text parameter information;

[0165] Constructing a corresponding text feature space based on the text features;

[0166] Based on the processing of the text feature space and the preset sample text feature space, the similarity between the text feature space and each preset sample text feature space is obtained;

[0167] Sorting the similarities between the text feature space and each preset sample text feature space in descending order;

[0168] The text corresponding to the first-ranked preset sample text feature space is used as a neighboring parameter, and the neighboring text belongs to the neighboring parameter.

[0169] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is hue parameter information, the processing unit 402 for processing the parameter information to obtain the adjacent parameters is specifically used for:

[0170] Converting the color value of the hue parameter information into a first color space value;

[0171] According to the neighbor element requirement, the hue value in the first color space value is processed to obtain a new hue value;

[0172] If the new hue value is determined to be legal based on the angle value corresponding to the new hue value, the new hue value is used as a proximity parameter.

[0173] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is saturation parameter information, the processing unit 402 for processing the parameter information to obtain the neighboring parameter is specifically configured to:

[0174] Converting the color value of the saturation parameter information into a second color space value;

[0175] Determine the saturation adjustment direction, adjustment step length and number of adjustment steps according to the neighbor element requirement and the saturation value in the second color space value;

[0176] Processing the saturation value in the second color space value based on the adjustment direction, the adjustment step length and the adjustment step number to obtain a new saturation;

[0177] The new saturation is taken as the neighbor parameter.

[0178] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is brightness parameter information, the processing unit 402 for processing the parameter information to obtain the proximity parameter is specifically configured to:

[0179] Converting the color value of the brightness parameter information into a third color space value;

[0180] Determining a brightness adjustment ratio according to neighbor element requirements and a brightness value in the third color space value;

[0181] Adjust the brightness value in the third color space value based on the brightness adjustment ratio to obtain a new brightness value;

[0182] The new brightness value is used as a neighboring parameter.

[0183] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is transparency parameter information, the processing unit 402 for processing the parameter information to obtain the proximity parameter is specifically configured to:

[0184] Converting the color value of the transparency parameter information into a color value with a transparency value;

[0185] Calculate the transparency value in the color value according to the neighbor element requirements to obtain a new transparency value;

[0186] If it is determined that the new transparency value meets the preset range, the new transparency value is used as a proximity parameter.

[0187] Optionally, based on the UI processing device shown in the above embodiment of the present invention, if the parameter information is other parameter information, the processing unit 402 for processing the parameter information to obtain the adjacent parameters is specifically configured to:

[0188] Determine new parameter information corresponding to other parameter information according to neighbor element requirements;

[0189] The new parameter information is used as the proximity parameter.

[0190] An embodiment of the present application provides an electronic device, which includes a processor and a memory, wherein the memory is used to store program codes and data for UI processing, and the processor is used to call program instructions in the memory to execute the steps shown in the UI processing method in the above embodiment.

[0191] An embodiment of the present invention provides a storage medium, and a vehicle includes the electronic device provided by the above-mentioned embodiment of the present application, and the electronic device is used to execute the UI processing method disclosed in the embodiment of the present application.

[0192] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can refer to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system or system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can refer to the partial description of the method embodiment. The system and system embodiments described above are merely schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without creative work.

[0193] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0194] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A UI processing method, characterized in that: The method comprises: When performing user interface UI processing, obtain multiple parameter information of the reference elements in the current UI; For each parameter, parameter information corresponding to the parameter is processed to obtain adjacent parameters; A neighboring element corresponding to the reference element is constructed based on each item of parameter information corresponding to a neighboring parameter, so as to set the neighboring element on the web page.

2. The method according to claim 1, characterized in that: If the parameter information is text parameter information, the parameter information corresponding to the parameter is processed to obtain adjacent parameters, including: Extracting text features from the text parameter information; Constructing a corresponding text feature space based on the text features; Based on the processing of the text feature space and the preset sample text feature space, the similarity between the text feature space and each preset sample text feature space is obtained; Sorting the similarities between the text feature space and each preset sample text feature space in descending order; The characters corresponding to the first-ranked preset sample character feature space are taken as neighboring characters, and the neighboring characters belong to the neighboring parameters.

3. The method according to claim 1, characterized in that If the parameter information is hue parameter information, the parameter information is processed to obtain adjacent parameters, including: Converting the color value of the hue parameter information into a first color space value; According to the neighbor element requirement, the hue value in the first color space value is processed to obtain a new hue value; If the new hue value is determined to be legal based on the angle value corresponding to the new hue value, the new hue value is used as a proximity parameter.

4. The method according to claim 1, characterized in that: If the parameter information is saturation parameter information, the parameter information is processed to obtain a neighboring parameter, including: Converting the color value of the saturation parameter information into a second color space value; Determine the saturation adjustment direction, adjustment step length and number of adjustment steps according to the neighbor element requirement and the saturation value in the second color space value; Processing the saturation value in the second color space value based on the adjustment direction, the adjustment step length and the adjustment step number to obtain a new saturation; The new saturation is taken as the neighbor parameter.

5. The method according to claim 1, characterized in that If the parameter information is brightness parameter information, the parameter information is processed to obtain a neighboring parameter, including: Converting the color value of the brightness parameter information into a third color space value; Determining a brightness adjustment ratio according to neighbor element requirements and a brightness value in the third color space value; Adjust the brightness value in the third color space value based on the brightness adjustment ratio to obtain a new brightness value; The new brightness value is used as a neighboring parameter.

6. The method according to claim 1, characterized in that If the parameter information is transparency parameter information, the parameter information is processed to obtain a proximity parameter, including: Converting the color value of the transparency parameter information into a color value with a transparency value; Calculate the transparency value in the color value according to the neighbor element requirements to obtain a new transparency value; If it is determined that the new transparency value meets the preset range, the new transparency value is used as a proximity parameter.

7. The method according to claim 1, characterized in that If the parameter information is other parameter information, the parameter information is processed to obtain adjacent parameters, including: Determine new parameter information corresponding to other parameter information according to neighbor element requirements; The new parameter information is used as the proximity parameter.

8. A UI processing device, characterized in that: The device comprises: An acquisition unit, used to acquire multiple parameter information of a reference element in the current UI when performing UI processing; A processing unit, configured to process parameter information corresponding to each parameter to obtain adjacent parameters; The integration unit is used to construct adjacent elements corresponding to the reference element based on the adjacent parameters corresponding to each parameter information, so as to set the adjacent elements on the web page.

9. An electronic device, characterized in that: The electronic device is used to run a program, wherein the program executes the UI processing method according to any one of claims 1 to 7 when running.

10. A storage medium, characterized in that: The storage medium includes a storage program, wherein when the program is running, the device where the storage medium is located is controlled to execute the UI processing method according to any one of claims 1 to 7.

Images