Interface processing method, electronic device and related device

Abstract

The present application provides an interface processing method, an electronic device and related devices. In this method, after the electronic device performs saturation processing on the colors of each channel, since the colors of each channel change, there is a color change amount. Different from the prior art, in the embodiments of the present application, for different colors of each channel, the electronic device can also perform different degrees of enhancement processing on the color change amounts of each channel. That is, for different colors of each channel, the electronic device can increase or decrease the change amounts of different colors to different degrees to adjust the saturation of different colors, so as to improve the color penetration, thereby improving the color fusion of the image and the foreground UI elements, and further improving the immersion feeling when the user browses the image and the foreground UI elements.

Description

Technical Field

[0001] Embodiments of the present application relate to the technical field of user interfaces, and in particular, to an interface processing method, an electronic device, and related devices. Background Art

[0002] Many user interfaces (UIs) display images and foreground UI elements. For example, the foreground UI elements may include, but are not limited to, icons, text, etc.

[0003] Currently, in order to enhance the correlation between the foreground UI elements and the image, the electronic device performs processing such as blurring and semi-transparency on the image, and sets the foreground UI elements to a preset color, such as black. In this method, although the user can see the approximate color of the image through blurring and semi-transparency, due to the different penetrabilities of different colors, the color fusion between the image and the foreground UI elements is poor, and the immersion of the user when browsing the image and the foreground UI elements on the interface is insufficient. Summary of the Invention

[0004] Embodiments of the present application provide an interface processing method, an electronic device, and related devices. After the electronic device performs saturation processing on the colors of each channel, it also performs enhancement processing with different degrees on the color change amounts of each channel to adjust the saturation of different colors, so as to improve the penetrability of colors, thereby improving the color fusion between the image and the foreground UI elements, and further improving the immersion of the user when browsing the image and the foreground UI elements.

[0005] In a first aspect, embodiments of the present application provide an interface processing method. The execution subject of the interface processing method may be an electronic device or a chip in the electronic device. The following takes the electronic device as an example for illustration. In this method, after the electronic device performs saturation processing on the colors of each channel, since the colors of each channel change, there are color change amounts. Different from the prior art, in embodiments of the present application, for different colors of each channel, the electronic device can also perform enhancement processing with different degrees on the color change amounts of each channel. That is, for different colors of each channel, the electronic device can increase or decrease the change amounts of different colors with different degrees to adjust the saturation of different colors, so as to improve the penetrability of colors, thereby improving the color fusion between the image and the foreground UI elements, and further improving the immersion of the user when browsing the image and the foreground UI elements.

[0006] The following combines specific scenario examples to illustrate the interface processing method provided by embodiments of the present application:

[0007] Scenario 1: There is no bottom plate below the first UI element

[0008] An electronic device can obtain information about the interface to be displayed. Among them, the interface includes an image and a first user interface (UI) element located above the image. The first pixel in the first UI element corresponds to the second pixel in the image, and the information includes the colors of each channel of the second pixel.

[0009] The electronic device can process the colors of each channel of the second pixel according to the first saturation parameter corresponding to the first UI element, and obtain the first color change amount of each channel of the second pixel before and after processing. Different from the prior art, in the embodiments of the present application, after performing saturation processing on the first UI element, the electronic device can also enhance the first color change amount according to the first enhancement parameter corresponding to the first UI element, and obtain the second color change amount of each channel of the second pixel. The first enhancement parameter includes the enhancement coefficients of each channel, and the enhancement coefficients of different channels are different.

[0010] The electronic device can determine the colors of each channel of the first pixel according to the colors of each channel of the second pixel and the second color change amount. Furthermore, the electronic device displays the first UI element based on the colors of each channel of the first pixel.

[0011] In the embodiments of the present application, for the first UI element without a bottom plate, after performing saturation processing on the colors of each channel, for different colors of each channel, the electronic device can also perform different degrees of enhancement processing on the color change amount of each channel to improve the color penetration, which can improve the color fusion of the image and the foreground UI element, and further improve the immersion feeling when the user browses the image and the foreground UI element.

[0012] In a possible implementation manner, before processing the colors of each channel of the second pixel according to the first saturation parameter corresponding to the first UI element, the electronic device can also process the colors of each channel of the second pixel according to the first grayscale parameter corresponding to the first UI element. Among them, the processing of the first UI element based on the first grayscale parameter can be: grayscale brightening or darkening. After grayscale brightening or darkening the colors of each channel, there is some loss in the saturation of the colors of each channel. Therefore, in the embodiments of the present application, after performing grayscale processing on the first UI element, the electronic device can also perform saturation processing on the colors of each channel, which can enable the colors to produce a transparent or highly transparent effect.

[0013] In this implementation manner, the purpose of grayscale processing is to enhance the contrast between the background image and the foreground UI element, and can also enable the user to accurately identify the first UI element and improve the UI readability.

[0014] In a possible implementation, the first grayscale parameter is a first grayscale function. In order to improve the readability of the first UI element, the following first screening conditions are set in the embodiments of the present application:

[0015] 1), The absolute value of the first offset area corresponding to the first grayscale function is greater than a first area threshold, and the first offset area is: the area where the curve of the first grayscale function deviates from the curve of a preset function, the preset function is a proportional function and is an odd function.

[0016] 2), The first slope of the first grayscale function is greater than a first threshold.

[0017] 3), The first enhancement parameter specifically includes: the positive and negative enhancement coefficients of each channel, where the positive enhancement coefficient is used for: the color change amount of the channel is positive, and the negative enhancement coefficient is used for: the color change amount of the channel is negative.

[0018] When the first offset area is positive, that is, when the electronic device brightens the grayscale of the first UI element, among the first enhancement parameters, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients.

[0019] When the first offset area is negative, that is, when the electronic device darkens the grayscale of the first UI element, among the first enhancement parameters, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients.

[0020] In the embodiments of the present application, for the first UI element without a bottom plate, the electronic device can preset the first screening conditions adapted to the first UI element. Through this first screening condition, the electronic device can screen out the first grayscale function and the first enhancement parameter adapted to the first UI element. In this way, based on this first grayscale function and the first enhancement parameter, the electronic device processes the first UI element, which is more adapted to the first UI element, can improve the fusion of the first UI element and the background image, and improve the user's immersion.

[0021] Scenario 2: There is a bottom plate under the second UI element

[0022] In some embodiments, the interface of the electronic device further includes: a bottom plate on the upper layer of the image, and a second UI element on the upper layer of the bottom plate. The third pixels in the second UI element respectively correspond to the fourth pixels of the bottom plate and the fifth pixels of the image, and the information further includes the colors of each channel of the fifth pixels.

[0023] In this method, since there is a bottom plate under the second UI element, the electronic device not only needs to process the second UI element but also the bottom plate. Among them, the electronic device can process the colors of each channel of the fifth pixel according to the second saturation parameter corresponding to the bottom plate, and obtain the third color change amount of each channel of the fifth pixel before and after processing. The electronic device enhances the third color change amount according to the second enhancement parameter corresponding to the bottom plate to obtain the fourth color change amount of each channel of the fifth pixel, and determines the colors of each channel of the fourth pixel according to the colors of each channel of the fifth pixel and the fourth color change amount.

[0024] After processing the bottom plate, the electronic device can obtain the colors of each channel of the fourth pixel where the image passes through the bottom plate. Further, the electronic device can process the second UI element. Specifically, the electronic device can process the colors of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element, and obtain the fifth color change amount of each channel of the fourth pixel before and after processing. The electronic device can enhance the fifth color change amount according to the third enhancement parameter corresponding to the second UI element to obtain the sixth color change amount of each channel of the fourth pixel, and determines the colors of each channel of the third pixel according to the colors of each channel of the fourth pixel and the sixth color change amount. The electronic device can display the second UI element based on the colors of each channel of the third pixel.

[0025] In a possible scenario, although there is a bottom plate under the second UI element, the second UI element does not completely cover the bottom plate, so there is a scenario where there is no second UI element above the bottom plate. Exemplarily, the bottom plate further includes a sixth pixel, the second UI element does not cover the sixth pixel, the sixth pixel corresponds to the seventh pixel of the image, and the information further includes the colors of each channel of the seventh pixel. In this scenario, the electronic device can only process the bottom plate.

[0026] Specifically, the electronic device can process the colors of each channel of the seventh pixel according to the second saturation parameter, and obtain the seventh color change amount of each channel of the seventh pixel before and after processing. The electronic device can enhance the seventh color change amount according to the second enhancement parameter to obtain the eighth color change amount of each channel of the seventh pixel, and determines the colors of each channel of the sixth pixel according to the colors of each channel of the seventh pixel and the eighth color change amount. Accordingly, the electronic device can display the bottom plate based on the colors of each channel of the sixth pixel.

[0027] Similar to the first UI element, before the electronic device processes the colors of each channel of the fifth pixel according to the second saturation parameter corresponding to the bottom plate, it can also process the colors of each channel of the fifth pixel according to the second grayscale parameter corresponding to the bottom plate. Similarly, before the electronic device processes the colors of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element, it can also process the colors of each channel of the fourth pixel according to the third grayscale parameter corresponding to the second UI element.

[0028] In some embodiments, the second grayscale parameter is a second grayscale function, and the third grayscale parameter is a third grayscale function.

[0029] In a possible implementation, the second grayscale function and the third grayscale function have an inverse adjustment relationship, or the second grayscale function and the third grayscale function have a direct adjustment relationship. In some embodiments, the second offset area corresponding to the second grayscale function can be used to indicate whether the second grayscale function darkens or brightens the grayscale of the bottom plate. Similarly, the third offset area corresponding to the third grayscale function can be used to indicate whether the third grayscale function darkens or brightens the grayscale of the second UI element.

[0030] Wherein, the second offset area is: the area where the curve of the second grayscale function deviates from the curve of a preset function, the preset function is a proportional function and an odd function, and the third offset area is: the curve of the third grayscale function relative to the preset function

[0031] Wherein, when the second offset area is positive, it indicates that the second grayscale function brightens the grayscale of the bottom plate, and when the second offset area is negative, it indicates that the second grayscale function darkens the grayscale of the bottom plate. Similarly, when the third offset area is positive, it indicates that the third grayscale function brightens the grayscale of the bottom plate, and when the third offset area is negative, it indicates that the third grayscale function darkens the grayscale of the bottom plate.

[0032] When the second grayscale function and the third grayscale function have an inverse adjustment relationship, the second grayscale function is used to brighten the grayscale, and the third grayscale function is used to darken the grayscale, or the second grayscale function is used to darken the grayscale, and the third grayscale function is used to brighten the grayscale. When the second grayscale function and the third grayscale function have a direct adjustment relationship, the second grayscale function is used to brighten the grayscale, and the third grayscale function is used to brighten the grayscale, or the second grayscale function is used to darken the grayscale, and the third grayscale function is used to darken the grayscale.

[0033] Therefore, when the second grayscale function and the third grayscale function are in an inverse adjustment relationship, the second offset area corresponding to the second grayscale function is positive, and the third offset area corresponding to the third grayscale function is negative, or the second offset area is negative and the third offset area is positive.

[0034] When the second grayscale function and the third grayscale function are in a positive adjustment relationship, the second offset area is positive and the third offset area is positive; or the second offset area is negative and the third offset area is negative.

[0035] In a possible implementation, in order to improve the readability of the second UI element, the following second screening conditions are set in the embodiments of the present application:

[0036] First, when the second grayscale function and the third grayscale function are in an inverse adjustment relationship, the second screening condition may include:

[0037] 1), the absolute value of the second offset area is greater than the second area threshold, the absolute value of the third offset area is greater than the third area threshold, and the third minimum offset is greater than the first offset threshold, where the third minimum offset is: when x is the same, the absolute value of the minimum difference between the y value of the third grayscale function and the y value of the preset function.

[0038] In this implementation, the purpose of setting it like this is to: improve the contrast between the image and the bottom plate, and between the bottom plate and the second UI element, so as to improve the UI readability.

[0039] 2), the first area threshold is greater than the third area threshold. In other words, compared with the second UI element with a bottom plate, the first area threshold corresponding to the first UI element without a bottom plate is larger.

[0040] 3), the third minimum offset is greater than the second minimum offset, where the second minimum offset is: when x is the same, the absolute value of the minimum difference between the y value of the second grayscale function and the y value of the preset function. In other words, the minimum offset corresponding to the foreground second UI element is greater than the minimum offset corresponding to the background, that is, the degree of brightening or darkening of the foreground grayscale is higher than that of the background. The purpose of setting it like this is to: increase the contrast between the foreground second UI element and the background, which is convenient for improving the readability of the second UI element.

[0041] 4), similar to the principle of 3), the absolute value of the third offset area is greater than the absolute value of the second offset area. In other words, the offset area corresponding to the foreground second UI element is greater than the offset area corresponding to the background.

[0042] Second, when the second grayscale function and the third grayscale function have a positive adjustment relationship, the second screening condition may include:

[0043] 1), the absolute value of the third offset area is greater than the second area threshold, and the third minimum offset is greater than the second offset threshold.

[0044] 2), In some embodiments, in order to improve the readability of the UI element, the ratio of the third slope of the third grayscale function to the second slope of the second grayscale function may be restricted to be greater than the second threshold. In this way, when the second grayscale function and the third grayscale function have a positive adjustment relationship, there is a difference in the grayscale processing degree of the bottom plate and the second UI element by the electronic device, which can improve the readability of the UI element to a certain extent.

[0045] 3), the first area threshold is greater than the third area threshold.

[0046] It should be noted that in the scenario of "the second grayscale function and the third grayscale function have a reverse adjustment relationship" in item (1) and "the second grayscale function and the third grayscale function have a positive adjustment relationship" in item (2), the third offset area and the third minimum offset are calculated within the range of the color values of each channel of the bottom plate.

[0047] In a possible implementation manner, for the scenarios of "the second grayscale function and the third grayscale function have a reverse adjustment relationship" in item (1) and "the second grayscale function and the third grayscale function have a positive adjustment relationship" in item (2) above, the second screening condition may further include restrictions on enhancement parameters, such as the second enhancement parameter and the third enhancement parameter:

[0048] Among them, the second enhancement parameter and the third enhancement parameter specifically include: the positive and negative enhancement coefficients of each channel, where the positive enhancement coefficient is used for: the color change amount of the channel is positive, and the negative enhancement coefficient is used for: the color change amount of the channel is negative.

[0049] The second screening condition may further include:

[0050] 1), when the second grayscale function and the third grayscale function have a reverse adjustment relationship, and when the second offset area is positive, in the second enhancement parameter, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients, and in the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients; or,

[0051] 2), when the second grayscale function and the third grayscale function have a reverse adjustment relationship, and when the second offset area is negative, in the second enhancement parameter and the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients; or,

[0052] 3) When the second grayscale function and the third grayscale function have a positive adjustment relationship, and when the second offset area is positive, among the second enhancement parameter and the third enhancement parameter, the anti-enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients; or,

[0053] 4) When the second grayscale function and the third grayscale function have a positive adjustment relationship, and when the second offset area is negative, among the second enhancement parameter and the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the anti-enhancement coefficients.

[0054] In the embodiment of the present application, for the second UI element with a bottom plate, the electronic device may preset a second screening condition adapted to the bottom plate and the second UI element. Through this second screening condition, the electronic device can screen out the second grayscale function and the second enhancement parameter adapted to the bottom plate, the third grayscale function adapted to the second UI element, and the third enhancement parameter. In this way, the electronic device processes the bottom plate based on the second grayscale function and the second enhancement parameter adapted to the bottom plate, and the electronic device processes the second UI element based on the third grayscale function and the third enhancement parameter of the second UI element, which is more adapted to the bottom plate and the second UI element, can improve the fusion of the second UI element and the background image, and improve the user's immersion.

[0055] Scenario 3: The second UI element includes a first-level sub-element and a second-level sub-element. The first-level sub-element and the second-level sub-element are on the same layer.

[0056] In this scenario, the electronic device processes the second UI element, which can be understood as: the electronic device processes the sub-elements of different levels in the second UI element. Since the user has different requirements for the UI readability of sub-elements of different levels, when the electronic device processes sub-elements of different levels, different grayscale parameters and saturation parameters can be used.

[0057] Among them, the third saturation parameters corresponding to the first-level sub-element and the second-level sub-element are different, and the third grayscale functions corresponding to the first-level sub-element and the second-level sub-element are different.

[0058] In a possible implementation manner, the level of the first-level sub-element is higher than the level of the second-level sub-element, the third saturation parameter corresponding to the first-level sub-element is greater than the third saturation parameter corresponding to the second-level sub-element, and the third slope of the third grayscale function corresponding to the first-level sub-element is greater than the third slope of the third grayscale function corresponding to the first-level sub-element.

[0059] In this implementation, the electronic device performs a greater degree of grayscale processing on the child elements with a higher level, which can improve the brightness processing of the child elements with a higher level to enhance the UI readability of the child elements with a higher level.

[0060] Scenario 4: The second UI element is composed of a third-level child element, a fourth-level child element, and a fifth-level child element stacked vertically. Among them, the third-level child element, the fourth-level child element, and the fifth-level child element are on different layers. Exemplarily, the third-level child element is on the upper layer of the fourth-level child element, and the fourth-level child element is on the upper layer of the fifth-level child element.

[0061] In this scenario, when the electronic device processes the second UI element, it can be understood that the electronic device processes the child elements at different levels in the second UI element. Since the user has different requirements for the UI readability of the child elements at different levels, the electronic device can adopt different grayscale parameters and saturation parameters when processing the child elements at different levels.

[0062] In a possible implementation, the third grayscale functions corresponding to the third-level child element, the fourth-level child element, and the fifth-level child element are different.

[0063] In a possible implementation, when the x value is the same, the y values of the third grayscale function corresponding to the third-level child element, the y values of the third grayscale function corresponding to the fourth-level child element, and the y values of the third grayscale function corresponding to the fifth-level child element form an arithmetic progression.

[0064] In this implementation, when the electronic device processes the child elements at different levels, it can adopt different degrees of grayscale processing, and based on the order from bottom to top, the degree of grayscale processing can increase or decrease in sequence, so as to enable the elements at different levels to present a hierarchical progressive effect.

[0065] In a possible implementation, adding a mask layer to the UI element can improve the readability of the UI element. Therefore, after the electronic device performs the above-mentioned processing on the first UI element, it can perform a mask layer processing on the first UI element. After the electronic device performs a mask layer processing on the first UI element, it can display the first UI element.

[0066] Similarly, in a possible implementation, before the electronic device displays the second UI element, it can also perform a mask layer processing on the second UI element. Similarly, in a possible implementation, before the electronic device displays the bottom plate, it can also perform a mask layer processing on the bottom plate.

[0067] In a second aspect, an embodiment of the present application provides an electronic device, including a processor and a memory. The memory is used to store code instructions, and the processor is used to run the code instructions to execute the method described in the first aspect or any possible implementation manner of the first aspect.

[0068] In a third aspect, an embodiment of the present application provides a computer-readable storage medium, in which a computer program or instruction is stored. When the computer program or instruction runs on a computer, the computer is caused to execute the method described in the first aspect or any possible implementation manner of the first aspect.

[0069] In a fourth aspect, an embodiment of the present application provides a computer program product including a computer program. When the computer program runs on a computer, the computer is caused to execute the method described in the first aspect or any possible implementation manner of the first aspect.

[0070] In a fifth aspect, the present application provides a chip or a chip system. The chip or the chip system includes at least one processor and a communication interface. The communication interface and the at least one processor are interconnected by a line. The at least one processor is used to run a computer program or instruction to execute the method described in the first aspect or any possible implementation manner of the first aspect. Among them, the communication interface in the chip can be an input / output interface, a pin, a circuit, etc.

[0071] In a possible implementation, the chip or the chip system described above in the present application further includes at least one memory, and instructions are stored in the at least one memory. The memory can be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (such as a read-only memory, a random access memory, etc.).

[0072] It should be understood that the second aspect to the fifth aspect of the present application correspond to the technical solutions of the first aspect of the present application, and the beneficial effects obtained by each aspect and the corresponding feasible implementation manners are similar and will not be elaborated herein. Description of the Drawings

[0073] Figure 1 It is a schematic diagram of a lock screen interface;

[0074] Figure 2 It is a schematic diagram of a drop-down control center interface;

[0075] Figure 3 It is a flowchart of an existing interface processing method;

[0076] Figure 4 It is a flowchart of an embodiment of the interface processing method provided by an embodiment of the present application;

[0077] Figure 5A Schematic diagram of an interface for carrying UI elements;

[0078] Figure 5B Schematic diagram of another interface for carrying UI elements;

[0079] Figure 6 Flow schematic diagram of another embodiment of the interface processing method provided by the embodiment of the present application;

[0080] Figure 7 Schematic diagram provided by the embodiment of the present application for illustrating the offset area and the minimum offset;

[0081] Figure 8 Schematic diagram of the colors of each channel and color superposition;

[0082] Figure 9 Flow schematic diagram of another embodiment of the interface processing method provided by the embodiment of the present application;

[0083] Figure 10 Flow schematic diagram of another embodiment of the interface processing method provided by the embodiment of the present application;

[0084] Figure 11 Schematic diagram provided by the embodiment of the present application for illustrating the effective numerical range;

[0085] Figure 12A Schematic diagram of the interface effect during the interface processing provided by the embodiment of the present application;

[0086] Figure 12B Schematic diagram of an effect of the processed interface provided by the embodiment of the present application;

[0087] Figure 13 Schematic diagram of an interface provided by the embodiment of the present application including sub - elements of different levels;

[0088] Figure 14 Schematic diagram of the grayscale function applicable to stacked elements provided by the embodiment of the present application;

[0089] Figure 15 Schematic diagram of the color change of each channel during the interface processing provided by the embodiment of the present application;

[0090] Figure 16 Schematic diagram of another effect of the processed interface provided by the embodiment of the present application;

[0091] Figure 17 Schematic diagram of a structure of an electronic device provided by the embodiment of the present application. Detailed implementation manners

[0092] For ease of understanding, the relevant terms and concepts involved in the embodiments of the present application are introduced below:

[0093] 1. UI element: The user interface (UI) involved in the embodiments of the present application may include an image and UI elements on top of the image. Among them, the UI elements are on top of the image, and the UI elements may cover part of the image.

[0094] In some embodiments, the fact that the UI elements are on top of the image can be understood as: the layer where the UI elements are located is on top of the layer where the image is located. Before displaying the UI, the electronic device can perform layer composition processing on the layers included in the UI. For example, the electronic device can perform layer composition on the layer where the UI elements are located and the layer where the image is located. Among them, the electronic device can place the layer where the UI elements are located on top of the layer where the image is located. After the electronic device performs layer composition processing, the UI can be obtained. The electronic device can send the UI for display to display the UI.

[0095] In some embodiments, it can also be said that the UI includes a background image and foreground UI elements.

[0096] In some embodiments, the UI elements can be understood as the content that users can see on the UI except for the image.

[0097] Exemplarily, taking the desktop as an example, the image can be understood as the wallpaper, and the UI elements may include but are not limited to: the status bar, folders, cards, application icons, text such as time and date, and icons such as weather. Among them, the status bar may include but is not limited to: text such as time, and icons such as signal strength and battery level. Exemplarily, taking the lock screen interface as an example, the image can be understood as the lock screen wallpaper, and the UI elements may include but are not limited to: text such as time, date, and steps, and icons such as flashlight and camera. Exemplarily, taking the chat interface as an example, the image can be understood as the chat background picture or chat wallpaper, and the UI elements may include but are not limited to: the status bar, the other party's name, chat information, message input box, etc.

[0098] It should be understood that the interface processing method provided by the embodiments of the present application is not limited to being applicable to the desktop, lock screen interface, and chat interface, but can also be applicable to other interfaces that include "background image and foreground UI elements".

[0099] 2. Color Channels: Used to store color information. Each image has at least one color channel, and the default number of color channels in an image depends on the color mode, that is, the color mode of an image determines the number of color channels in the image. For example, in the printing four-color mode (cyan, magenta, yellow, black, CMYK), an image by default has 4 color channels, namely cyan, magenta, yellow, and black. In a red, green, blue (RGB) image, there are 3 color channels by default, namely red, green, and blue.

[0100] In the following embodiments, taking the 3 color channels in an RGB image as an example, the interface processing method provided by the embodiments of the present application will be introduced. For other types of images and color channels, the methods in the embodiments of the present application can be referred to.

[0101] 3. Gray Scale Brightening: It can be understood as increasing the brightness of an image. Brightness is related to the color values of each channel. The larger the color values of each channel, the higher the brightness, and the smaller the color values of each channel, the lower the brightness. Accordingly, in other words, gray scale brightening can also be understood as increasing the color values of each channel. Exemplarily, taking green as an example, when the green value is 127, after gray scale brightening, the green value increases. For example, the green value becomes 195.

[0102] In some embodiments, taking the RGB channels as an example, for the color values of each channel, the electronic device can use the same function for processing to increase the color values of each channel. In some embodiments, the electronic device can also convert the colors of each RGB channel to other color spaces, such as the YUV color space, the LUV color space, etc. Taking the YUV color space as an example, Y represents brightness. In this color space, the electronic device can use a function to process Y to achieve the effect of gray scale brightening. Taking the LUV color space as an example, L represents brightness. In this color space, the electronic device can use a function to process L to achieve the effect of gray scale brightening.

[0103] 4. Gray Scale Darkening: It can be understood as reducing the brightness of an image. In other words, gray scale darkening can also be understood as reducing the color values of each channel. Exemplarily, taking green as an example, when the green value is 127, after gray scale darkening, the green value decreases. For example, the green value becomes 70.

[0104] Referring to the description of gray-scale brightening, in some embodiments, taking the RGB channels as an example, for the color values of each channel, the electronic device can use the same function for processing to reduce the color values of each channel. In some embodiments, the electronic device can also convert the colors of the RGB channels to other color spaces, such as the YUV color space, the LUV color space, etc. Taking the YUV color space as an example, Y represents brightness. In this color space, the electronic device can use a function to process Y, and the effect of gray-scale darkening can be achieved. Taking the LUV color space as an example, L represents brightness. In this color space, the electronic device can use a function to process L, and the effect of gray-scale darkening can be achieved.

[0105] 5. Saturation: It refers to the vividness of a color, also known as the purity of a color.

[0106] 6. Saturation processing: After gray-scale brightening or gray-scale darkening of the colors of each channel, there is some loss of saturation of the colors of each channel. At this time, performing saturation processing on the colors of each channel can make the colors produce a transparent or highly transparent effect.

[0107] 7. Bottom board: A graphic that is on the upper layer of the image and under the UI element. The bottom board is used to carry the UI element, facilitating the user to quickly identify the UI element.

[0108] Taking the lock screen interface as an example, the lock screen wallpaper, time, and notification messages can be displayed on the lock screen interface. The lock screen wallpaper can be regarded as an image, and the time and notification messages can be regarded as UI elements on the upper layer of the image. Referring to Figure 1 , the time "10:49" is directly on the upper layer of the image, and there is no other graphic between the lower layer of the time and the upper layer of the image, that is, there is no bottom board under the time. The notification message is carried in the notification box. The notification box is on the lower layer of the notification message and on the upper layer of the image. This notification box can be regarded as the bottom board of the notification message.

[0109] In some embodiments, the notification message can be displayed in the form of a card, a stacked card, or a capsule. Figure 1 Taking the notification message including: music card 11, text message card 12, incoming call card 13, and cards 14 of other applications as an example for illustration. Among them, the content in the card can be regarded as a UI element, and the rounded rectangle for the UI element can be regarded as the bottom board of the UI element. Exemplarily, taking the text message card 12 as an example, the text such as "Amber, where are we going for dinner tonight?" in the text message card can be regarded as a UI element, and the rounded rectangle carrying the text can be regarded as the bottom board of the UI element.

[0110] 8. Immersion: It can be reflected in the color fusion of the background image and the foreground UI elements. Exemplarily, when the color fusion of the background image and the foreground UI elements is good, the user feels that the background image and the foreground UI elements are integrated as one, and the immersion is strong.

[0111] 9. UI Readability: It can be understood as the degree of difficulty for the user to recognize and extract the UI elements on the UI.

[0112] 10. Electronic Device:

[0113] The electronic device in the embodiments of the present application has a display screen, and the display screen can display the UI. The electronic device can be referred to as a user equipment (UE), a terminal, etc. For example, the electronic device can be a mobile phone, a tablet, a personal digital assistant (PDA), a handheld device with wireless communication function, a computing device, a vehicle-mounted device or a wearable device, a virtual reality (VR) terminal device, an augmented reality (AR) terminal device, a wireless terminal in industrial control, a wireless terminal in a smart home, etc. In the embodiments of the present application, the form of the electronic device is not specifically limited.

[0114] In the following embodiments, a mobile phone is taken as an example of the electronic device for illustration.

[0115] The colors of the lock screen wallpapers are diverse. Figure 1 The colors in the lock screen wallpaper are represented by different grayscales. Refer to Figure 1 , the current time appears in a unified white color, and the time "10:49" covers the color of the image, resulting in poor color fusion between the image and the UI elements, and weak user immersion. In addition, the bottom plate in the notification message can be opaque or semi-transparent. When the bottom plate is opaque, the bottom plate will cover the color of the image, resulting in poor color fusion between the image and the UI elements, and weak user immersion. When the bottom plate is semi-transparent, the user can vaguely see the approximate color of the underlying image through the bottom plate. However, due to the different penetrability of different colors, a unified semi-transparent treatment of the bottom plate will also cause the user to vaguely see some colors when looking at the image through the bottom plate, the colors are not clear, and the color fusion between the image and the foreground UI elements is poor, and the user immersion is weak.

[0116] In some embodiments, in order to enhance the relevance between foreground UI elements and images, an electronic device may perform processing such as blurring and semi-transparency on the images, and set the foreground UI elements to a preset color, such as black. Exemplarily, taking the pull-down control center as an example, when the user swipes down from the upper right of the desktop, the electronic device can be triggered to display the pull-down control center interface 201. The pull-down control center interface 201 may include: music cards, video cards, different types of icons, and text, etc. Exemplarily, referring to Figure 2 , the pull-down menu interface 201 may include: wireless local area network (WLAN) icon, Bluetooth icon, sound icon, etc. It should be understood that there is a bottom plate below each icon, and the bottom plate is circular or rounded rectangular.

[0117] In order to enhance the relevance between foreground UI elements and images, the entire interface can be processed with blurring and semi-transparency, and the lines and text in the icons are in a preset color, such as black. Since the foreground UI elements (such as the lines and text in the icons) are in a preset color, the foreground UI elements cover the color of the underlying image, and the user cannot see the color of the image at the UI element, resulting in poor color fusion between the image and the foreground UI elements. In addition, although the user can see the general color of the image through blurring and semi-transparency, due to the different penetrabilities of different colors, it will also result in poor color fusion between the image and the foreground UI elements, and the user's immersion is insufficient when browsing the image and foreground UI elements on the interface.

[0118] Accordingly, an embodiment of the present application provides an interface processing method. Before displaying the interface, an electronic device can process the transparency of the UI elements in the interface and the bottom plate (if any) of the UI elements, improve the penetrability of the color of the underlying image, so that the user can see the color of the underlying image to the greatest extent, and improve the color fusion between the image and the foreground UI elements. In addition, for the problem of different penetrabilities of different colors, in the embodiment of the present application, the enhancement processing of the color change amount can be performed for different channels of colors, and the enhancement processing degrees of the color change amounts of different colors are different. For example, for colors with strong penetrability, the impact on the user's immersion experience is greater, so the enhancement degree of the color change amount can be greater, so as to improve the color fusion between the image and the foreground UI elements and enhance the immersion when browsing the image and foreground UI elements.

[0119] As for why the above problems exist in the prior art, the reasons for the problems in the prior art will be described below by introducing the interface processing method in the prior art, so as to clearly distinguish the differences between the prior art and the interface processing method provided by the embodiment of the present application.

[0120] Figure 3 FIG. is a schematic flowchart of an existing interface processing method. Referring to Figure 3, the interface processing method may include:

[0121] Step 1: Blur the lower-layer image.

[0122] In some embodiments, when there is no bottom plate under the UI element, the interface may include: an image and a UI element on top of the image.

[0123] In some embodiments, when there is a bottom plate under the UI element, the interface may include: an image, a bottom plate on top of the image, and a UI element on top of the bottom plate.

[0124] Before displaying the interface, the electronic device may blur the lower-layer image of the UI element. In some embodiments, when there is no bottom plate under the UI element, the electronic device may blur the lower-layer image blocked by the UI element. In some embodiments, when there is a bottom plate under the UI element, the electronic device may blur the lower-layer image blocked by the bottom plate.

[0125] Among them, the purpose of the blur processing is: to more clearly display the UI element. It can be imagined that when the lower-layer image is blurred, the upper-layer UI element is clearer than the lower-layer image, so that the user can accurately identify the UI element.

[0126] The embodiments of the present application do not limit the method of blurring the lower-layer image.

[0127] Step 2: Brighten or darken the gray scale.

[0128] The concept of brightening or darkening the gray scale can be referred to the description in the foregoing embodiments. The purpose of brightening or darkening the gray scale is: to enhance the contrast between the background image and the foreground UI element, and can also enable the user to accurately identify the UI element and improve the UI readability.

[0129] In the prior art, a function for brightening or darkening the gray scale may be preset in the electronic device, and the electronic device may use this function to perform brightening or darkening processing on the colors of each channel in the image.

[0130] Step 3: Saturation processing.

[0131] After brightening or darkening the gray scale of the colors of each channel, there is some loss of the saturation of the colors of each channel. At this time, performing saturation processing on the colors of each channel can enable the colors to produce a transparent or highly transparent effect.

[0132] In the prior art, saturation parameters can be preset in an electronic device, and all colors of each channel are processed according to a unified saturation parameter. The problem with this method is that since the penetrability of different colors is different, processing all colors according to a unified saturation parameter still results in different penetrabilities of different colors after processing, which will lead to poor color fusion of the image and the foreground UI elements.

[0133] Step 4: Mask layer.

[0134] The mask layer can be understood as: setting a covering layer, such as a bottom plate, below the UI element.

[0135] In some embodiments, Step 4 is an optional step. For UI elements without a bottom plate, this Step 4 does not need to be executed. In some embodiments, for UI elements without a bottom plate, mask layer processing can also be performed to improve the readability of the UI elements. For UI elements with a bottom plate, such as when the UI element is an icon, text, etc., the electronic device can perform mask layer processing on the UI element so that the mask layer is displayed below the UI element. The mask layer is like Figure 1 、 Figure 2 the rounded rectangle, or circle, etc. in

[0136] Figure 4 FIG. is a schematic flowchart of an embodiment of the interface processing method provided by an embodiment of the present application. It should be understood that Figure 4 the differences between the interface processing method in the present application and the interface processing method in the prior art are briefly introduced above. The detailed content of the interface processing method provided by the embodiments of the present application can be referred to the description in the following embodiments.

[0137] Refer to Figure 4 and the interface processing method provided by the embodiments of the present application may include:

[0138] Step 1A: Blurring the lower-layer image.

[0139] Step 2A: Brightening or darkening the gray scale.

[0140] Step 3A: Saturation processing.

[0141] In some embodiments, Steps 1A - 3A can refer to the description in Steps 1 - 3.

[0142] Step 3B: Enhancement processing.

[0143] After the electronic device performs saturation processing on the colors of each channel, due to the change in the colors of each channel, there is a color change amount. Different from the prior art, in the embodiments of the present application, for different colors of each channel, the electronic device can also perform enhancement processing on the color change amounts of each channel to different degrees. That is, for different colors of each channel, the electronic device can increase or decrease the change amounts of different colors to different degrees to adjust the saturation of different colors and improve the color penetration.

[0144] For example, the electronic device can increase the change amount of the color of some channels and decrease the change amount of the color of some channels to further adjust the saturation of the colors of each channel. The purpose of performing enhancement processing on the color change amounts of each channel to different degrees in the embodiments of the present application is that since the color penetration of different channels is different, the electronic device can perform saturation processing with different degrees of increase for different colors to improve the color penetration, which can improve the color fusion of the image and the foreground UI elements, and further improve the immersion feeling when the user browses the image and the foreground UI elements.

[0145] Step 4A: Mask layer.

[0146] In some embodiments, Step 4 is an optional step, and the description in Step 4 can be referred to.

[0147] The following describes the interface processing method provided by the embodiments of the present application in combination with specific embodiments. These embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0148] In the embodiments of the present application, before displaying the interface, the electronic device can process the UI elements and the bottom plate (if any) in the interface. After the electronic device processes the interface, it can send the processed interface for display to display the interface. The following embodiments describe the process of the electronic device processing the UI elements and the bottom plate (if any) in the interface, and reference can be made to Figure 6 and the related description of the first screening condition.

[0149] The types of UI elements on the interface are diverse. Exemplarily, for example, UI elements can include those with a bottom plate and those without a bottom plate. For UI elements with a bottom plate and UI elements without a bottom plate, the electronic device can use different interface processing methods for processing. Additionally, exemplarily, UI elements can be: text, icons, capsules, cards, stacked cards, etc. For different types of UI elements, the electronic device can use different interface processing methods for processing.

[0150] Exemplarily, taking the lock screen interface as an example, reference can be made to Figure 5A, the lock screen interface may include: text such as time and date, lock screen icon 51, flashlight icon 52, camera icon 53, and music capsule 54. Among them, the music capsule 54 is used to carry information about the audio currently played by the electronic device, and the information of the audio may include, but is not limited to: audio name, picture of the audio album, singer name, etc.

[0151] Summary Figure 5A , the lock screen interface may include various types of UI elements, such as text, icons, capsules, etc. Among them, text such as time and date, and the lock screen icon 51 do not have a bottom plate, while the flashlight icon 52, camera icon 53, and music capsule 54 have a bottom plate.

[0152] Exemplarily, taking the lock screen interface as an example, referring to Figure 5B , the lock screen interface may include: text such as time and date, music card 51B, text message card 52B, incoming call card 53B, and stacked cards 54B of other applications.

[0153] Summary Figure 5B , the lock screen interface may include various types of UI elements, such as text, cards, etc. Among them, text such as time and date do not have a bottom plate, while the music card 51B, text message card 52B, incoming call card 53B, and stacked cards 54B of other applications have a bottom plate.

[0154] It should be understood that in the embodiments of the present application Figure 5A , Figure 5B , and in the following embodiments Figure 16 , the album pictures, application icons, etc. are represented by circles and rectangles.

[0155] In the following embodiments, the method for the electronic device to process UI elements without a bottom plate is first introduced, then the method for the electronic device to process UI elements with a bottom plate is introduced, and subsequently, the method for the electronic device to process different types of UI elements is introduced.

[0156] Scenario 1: UI elements without a bottom plate

[0157] Figure 6 It is a schematic flowchart of another embodiment of the interface processing method provided by the embodiments of the present application. Referring to Figure 6 , the interface processing method provided by the embodiments of the present application may include:

[0158] S601, obtaining information of the interface to be displayed, the interface includes an image and a first UI element on the upper layer of the image, the first pixel in the first UI element corresponds to the second pixel in the image, and the information includes the colors of each channel of the second pixel.

[0159] Before the electronic device displays an interface, it can obtain information about the interface to be displayed. In this example, it is assumed that there is no bottom board for the UI element. Therefore, the interface can include an image and a first UI element on top of the image. In the embodiments of the present application, the first UI element being on top of the image can be understood as: the layer where the first UI element is located is on top of the layer where the image is located.

[0160] It should be understood that before the electronic device displays an interface, it can perform layer composition processing on the layers that make up the interface. The electronic device can compose the layer where the first UI element is located and the layer where the image is located in the order of the upper and lower layers, and place the layer where the first UI element is located on top of the layer where the image is located to obtain the interface. The electronic device can send the interface for display to display the interface.

[0161] The layer where the first UI element is located can include at least one UI element. In some embodiments, UI elements without a bottom board in the interface can be regarded as the first UI element.

[0162] The first UI element can occupy multiple pixels. For example, the first UI element can occupy "multiple pixels in the layer where the first UI element is located". In the embodiments of the present application, taking the first UI element occupying the first pixel as an example, the interface processing method provided by the embodiments of the present application is described.

[0163] In the embodiments of the present application, the first pixel corresponds to a second pixel in the image. The first pixel corresponding to the second pixel in the image can be understood as: the first pixel in the layer where the first UI element is located corresponds to the second pixel in the layer where the image is located. It can also be understood as: the first pixel and the second pixel are in the same position in the interface, but the first pixel and the second pixel are in different layers of the interface. Among them, the first pixel is in the upper layer where the first UI element is located, and the second pixel is in the lower layer where the image is located.

[0164] In some embodiments, the first pixel can include at least one pixel. For example, each pixel in the first pixel can be regarded as the first pixel. Correspondingly, the second pixel can include at least one pixel. In the embodiments of the present application, taking the first pixel and the second pixel as examples, the processing method of the electronic device for UI elements without a bottom board is described.

[0165] In some embodiments, the information of the interface includes the colors of each channel of the second pixel. Exemplarily, taking the channels of the interface including RGB channels as an example, the information of the interface can include: the red value of the R channel, the green value of the G channel, and the blue value of the B channel in the second pixel. In some embodiments, the red value, the green value, and the blue value can be in the range of 0 - 255.

[0166] In some embodiments, the information of the interface may include the colors of each channel of each pixel in the image, as well as the colors of each channel of each pixel of the UI elements (including the first UI element) on the upper layer of the image. In this example, the information of the interface may include the colors of each channel of the second pixel in the image, as well as the colors of each channel of the first pixel in the first UI element.

[0167] S602. Blur the second pixel of the image.

[0168] In some embodiments, S602 is an optional step. Exemplarily, when the second pixel of the lower-layer image is already in a blurred state, the electronic device does not need to execute S602. In this example, when the image is already in a blurred state, the information of the interface may include the blur-related parameters of the image, and the electronic device can check whether the information of the interface contains the blur-related parameters of the image to determine whether the image has been blurred.

[0169] S602 can refer to the description in step 1 above.

[0170] S603. Perform grayscale processing on the second pixel of the image.

[0171] In some embodiments, S603 is an optional step. S603 can refer to the description in step 2 above.

[0172] Among them, the grayscale processing may include brightening or darkening the grayscale. In some embodiments, whether the electronic device brightens or darkens the grayscale of the image may be preset, or the electronic device may select to brighten or darken the grayscale of the image according to the type of the UI element. In some embodiments, S603 may also refer to the relevant descriptions in the following first screening condition, second screening condition, and third screening condition.

[0173] S604. According to the first saturation parameter corresponding to the first UI element, process the colors of each channel of the second pixel to obtain the first color change amount of each channel of the second pixel before and after processing.

[0174] In some embodiments, for different types of UI elements, different saturation parameters may be preset in the electronic device. The saturation parameter is used to process the colors of each channel of the second pixel corresponding to the UI element. In the embodiments of the present application, the electronic device may select the first saturation parameter corresponding to the first UI element according to the type of the first UI element, and process the colors of each channel of the second pixel to obtain the first color change amount of each channel of the second pixel before and after processing.

[0175] Among them, the electronic device processes the colors of each channel of the second pixel using the first saturation parameter. It can be understood that the electronic device increases or decreases the saturation of the colors of each channel. The increase or decrease in saturation will affect the colors of each channel of the second pixel, and further cause changes in the color values of each channel of the second pixel, that is, there is a color change amount. In the embodiments of the present application, the change amount of the colors of each channel of the second pixel after being processed by the first saturation parameter can be referred to as the first color change amount.

[0176] In some embodiments, multiple saturation parameters and screening conditions corresponding to different types of UI elements can be preset in the electronic device. Among them, the screening conditions are used to: screen out the saturation parameter corresponding to the UI element from multiple saturation parameters. It should be understood that the screening conditions are pre-set conditions adapted to the UI element. Therefore, the saturation parameter screened out through the screening conditions is adapted to the UI element, which can improve the accuracy of processing the saturation of the UI element.

[0177] In this embodiment, the electronic device can determine the screening conditions corresponding to the first UI element according to the type of the first UI element. The electronic device can screen out the saturation parameter corresponding to the first UI element from multiple saturation parameters according to the screening conditions corresponding to the first UI element. The electronic device can process the colors of each channel of the second pixel according to the saturation parameter corresponding to the first UI element to obtain the first color change amount of each channel of the second pixel before and after processing.

[0178] Among them, the screening conditions corresponding to different types of UI elements can refer to the relevant descriptions in the first screening condition, the second screening condition, and the third screening condition.

[0179] In the embodiments of the present application, for different types of UI elements, the purpose of the electronic device using different saturation parameters for processing is that: the types of UI elements are different, the importance of UI elements on the interface is different, and the immersive experience brought to users is different. The electronic device processes the colors of each channel of the second element corresponding to the UI element using the saturation parameter adapted to the UI element, which can be more adapted to the type of the UI element, highlight important UI elements, and improve the immersive experience of users.

[0180] S605, enhance the first color change amount according to the first enhancement parameter corresponding to the first UI element to obtain the second color change amount of each channel of the second pixel. The first enhancement parameter includes enhancement coefficients of each channel, and the enhancement coefficients of different channels are different.

[0181] For the image underlying the first UI element, after the electronic device processes it using a unified first saturation parameter, the colors of each channel of the second pixel of the image change, that is, there is a first color change amount. Since the penetrability of different colors is different, in the embodiments of the present application, the first color change amounts of different colors can be enhanced to adjust the saturation of different colors, and further adjust the penetrability of different colors.

[0182] It should be understood that lights of different colors have different wavelengths. The longer the wavelength, the stronger the penetrability of the color. Among different colors, red, yellow, and green have longer wavelengths. Correspondingly, the penetrability of red, yellow, and green is also strong. In addition, yellow can be regarded as a superimposed color of red and green, and yellow will enhance the psychological tension of users. Therefore, if the penetrability of yellow is further enhanced, it will bring an uneasy feeling to users.

[0183] In some embodiments, because the red and green colors have a greater impact on the user's immersion experience, in different scenarios, the electronic device can enhance the first color change amounts of the colors of the red and green channels to a greater extent, and enhance the other colors to a smaller extent or not at all, so as to enhance the penetrability of the colors of the red and green channels, so that users can see the colors in the image more clearly, improve the fusion of the foreground UI element and the background, and enhance the user's immersion experience.

[0184] In some embodiments, enhancement parameters can be preset in the electronic device, and the enhancement parameters can include enhancement coefficients for each channel. Among them, the enhancement coefficient is used to enhance the first color change amount of the corresponding channel. In the embodiments of the present application, the enhancement coefficients of different channels are different. That is, the enhancement coefficients corresponding to the colors of different channels are different, that is, the electronic device enhances the first color change amounts of different channels to different extents.

[0185] In this embodiment, the electronic device can enhance the first color change amounts of each channel according to the enhancement coefficients of each channel to obtain the second color change amounts of each channel of the second pixel.

[0186] S606. Determine the colors of each channel of the first pixel according to the colors of each channel of the second pixel and the second color change amount.

[0187] In some embodiments, the second color change amount of each channel of the second pixel can be positive or negative. Exemplarily, when the electronic device increases the saturation of the color of each channel, the second color change amount of each channel of the second pixel can be positive, and when the electronic device decreases the saturation of the color of each channel, the second color change amount of each channel of the second pixel can be negative. The electronic device can obtain the adjusted color of each channel of the second pixel by adding the second color change amount of each channel of the second pixel to the color of each channel of the second pixel. The adjusted color of each channel of the second pixel can be regarded as the color of each channel of the first pixel to be displayed.

[0188] S607, display the first UI element based on the color of each channel of the first pixel.

[0189] After the electronic device determines the color of each channel of the first pixel, it can display the first UI element based on the color of each channel of the first pixel. Exemplarily, for example, the electronic device can display the first pixel of the first UI element based on the color of each channel of the first pixel.

[0190] In the embodiments of the present application, for the first UI element without a bottom plate, after the electronic device performs saturation processing on the color of each channel, for different colors of each channel, the electronic device can also perform different degrees of enhancement processing on the color change amount of each channel to improve the color penetration, so as to improve the color fusion of the image and the foreground UI element, and further improve the immersion feeling when the user browses the image and the foreground UI element.

[0191] To facilitate understanding of the processing method in the embodiments of the present application, the following first introduces the relevant terms involved in the embodiments of the present application:

[0192] 1) Gray scale parameter

[0193] The gray scale parameter is used to process the color of each channel. For example, it is used to brighten or darken the gray scale of the color of each channel of the pixel.

[0194] In some embodiments, the gray scale parameter can exist in the form of a gray scale function. Exemplarily, the curve of the gray scale function can be a straight line, a curve, etc. For example, multiple gray scale functions can be preset in the electronic device, and different gray scale functions can be applicable to different types of UI elements and bottom plates.

[0195] 2) Offset area

[0196] The area by which the curve of the gray scale function deviates from the curve of the preset function. The preset function is a proportional function and an odd function. Exemplarily, the preset function is "y = x".

[0197] It should be understood that Figure 7The curve of the preset function is represented by a dashed line, and the curve of the grayscale function is represented by a solid line. The abscissa is the color value of each channel before grayscale processing, and the ordinate is the color value of each channel after grayscale processing. Among them, the range of the color values of the abscissa and the ordinate is both 0 - 255.

[0198] Exemplarily, Figure 7 In [reference], a shows the curve of the grayscale function 1 and the curve of the preset function. Among them, the curve of the grayscale function 1 is a straight line. Referring to Figure 7 In a of [reference], there is an intersection point a between the curve of the grayscale function 1 and the curve of the preset function. The abscissa of a is x1. When x < x1, the y value of the preset function is greater than the y value of the grayscale function 1, that is, the preset function is above the grayscale function 1. When x > x1, the y value of the preset function is less than the y value of the grayscale function 1, that is, the grayscale function 1 is above the preset function. The electronic device can calculate the area S1 formed between the curve of the grayscale function 1 and the curve of the preset function when "the grayscale function 1 is above the preset function", and the area S2 formed between the curve of the grayscale function 1 and the curve of the preset function when "the preset function is above the grayscale function 1". The electronic device can subtract the area S2 when "the preset function is above the grayscale function 1" from the area S1 when "the grayscale function 1 is above the preset function" to obtain the offset area S. For example, the offset area S = S1 - S2.

[0199] It can be understood that when there are multiple intersection points between the curve of the grayscale function and the curve of the preset function, the electronic device can calculate the sum S1' of the areas formed between the curve of the grayscale function and the curve of the preset function when all "the grayscale function is above the preset function", and calculate the sum S2' of the areas formed between the curve of the grayscale function and the curve of the preset function when all "the preset function is above the grayscale function". The electronic device subtracts the area when "the preset function is above the grayscale function 1" from the area when "the grayscale function 1 is above the preset function" to obtain the offset area.

[0200] Exemplarily, Figure 7 In b of [reference], it shows the curve of the grayscale function 2 and the curve of the preset function. Among them, the curve of the grayscale function 2 is a curve. Referring to Figure 7 In b of [reference], there is no intersection point between the curve of the grayscale function 2 and the curve of the preset function. The grayscale function 2 is always above the preset function. In this example, the electronic device can calculate the area S0 formed between the curve of the grayscale function 2 and the curve of the preset function within the range of x from 0 to 255, and this S0 can be used as the offset area S. For example, S = S0.

[0201] In the embodiments of the present application, for each grayscale function preset in the electronic device, each grayscale function has a corresponding offset area.

[0202] In some embodiments, when the offset area is positive, the grayscale function is used for grayscale brightening, that is, the grayscale function is used to increase the color values of each channel. When the offset area is negative, the grayscale function is used for grayscale darkening, that is, the grayscale function is used to decrease the color values of each channel.

[0203] 3) Minimum offset

[0204] The minimum offset refers to: in the curves of the grayscale function and the preset function, when x is the same, the minimum difference between the y value of the grayscale function and the y value of the preset function. Taking "subtracting the y value of the preset function from the y value of the grayscale function to calculate the difference" as an example, since the difference between the y value of the grayscale function and the y value of the preset function can be positive or negative, the minimum offset in the embodiments of the present application refers to: the minimum "absolute value of the difference", that is, the absolute value of the minimum difference between the y value of the grayscale function and the y value of the preset function.

[0205] Exemplarily, referring to Figure 7 a in, because there is an intersection point a between the curve of the grayscale function 1 and the curve of the preset function, at the intersection point a, the absolute value of the difference between the y value of the grayscale function and the y value of the preset function is the smallest, which is 0. In other words, the minimum offset between the grayscale function 1 and the preset function is 0.

[0206] Exemplarily, referring to Figure 7 b in, because there is no intersection point between the curve of the grayscale function 2 and the curve of the preset function, the electronic device can calculate the minimum difference between the y value of the grayscale function and the y value of the preset function, which is the minimum offset. Referring to Figure 7 b in, for example, the minimum offset between the grayscale function and the preset function is d.

[0207] In the embodiments of the present application, for each grayscale function preset in the electronic device, each grayscale function has a corresponding minimum offset.

[0208] 4) Saturation parameter (n)

[0209] The saturation parameter is used to process the colors of each channel and enable adjustment of the saturation of the colors of each channel.

[0210] Taking the R channel as an example, in some embodiments, the electronic device can use the following formula 1 to process the color of the R channel:

[0211] R(n) = R × (a × (1 - n) + n) + G × (b × (1 - n)) + B × (c × (1 - n)) Formula 1

[0212] Wherein, n represents a saturation parameter (such as the first saturation parameter), and R, G, and B respectively represent the color values of the red channel, the color values of the green channel, and the color values of the blue channel. a, b, and c are the coefficients of the red channel, the coefficients of the green channel, and the coefficients of the blue channel respectively. Exemplarily, a can be 0.2412016, b can be 0.6922296, and c can be 0.0665688.

[0213] Wherein, R(n) is the color value of the red channel after being processed by the saturation parameter.

[0214] After obtaining R(n), the electronic device can calculate the first color change amount of the red channel based on R(n) and R. The first color change amount ΔR of the red channel can be as shown in Formula 2 below:

[0215] ΔR = R(n) - R Formula 2

[0216] Similarly, for the green channel, the electronic device can process the color of the G channel using the following Formula 3:

[0217] G(n) = G×(b×(1 - n) + n) + R×(a×(1 - n)) + B×(c×(1 - n)) Formula 3

[0218] Wherein, G(n) is the color value of the green channel after being processed by the saturation parameter.

[0219] After obtaining G(n), the electronic device can calculate the first color change amount of the green channel based on G(n) and G. The first color change amount ΔG of the green channel can be as shown in Formula 4 below:

[0220] ΔG = G(n) - G Formula 4

[0221] Similarly, for the blue channel, the electronic device can process the color of the B channel using the following Formula 5:

[0222] B(n) = B×(c×(1 - n) + n) + R×(a×(1 - n)) + G×(b×(1 - n)) Formula 5

[0223] Wherein, B(n) is the color value of the blue channel after being processed by the saturation parameter.

[0224] After obtaining B(n), the electronic device can calculate the first color change amount of the blue channel based on B(n) and B. The first color change amount ΔB of the blue channel is as shown in Formula 6 below:

[0225] ΔB = B(n) - B Formula 6

[0226] It can be understood that the formulas for calculating the colors of each channel after grayscale processing in Formula 1, Formula 3, and Formula 5 are for illustrative purposes. In the embodiments of the present application, other formulas or other matrix forms can also be used to brighten or darken the colors of each channel of the pixels.

[0227] 5) Enhancement coefficients (P1, P2, P3, P4, P5, P6)

[0228] As described above, the enhancement coefficients can include the enhancement coefficients of each channel. The enhancement coefficients of different channels are different.

[0229] In some embodiments, the enhancement coefficients can specifically include: the positive and negative enhancement coefficients of each channel. Among them, the positive enhancement coefficient is used for: the color change amount of the channel is positive, and the negative enhancement coefficient is used for: the color change amount of the channel is negative.

[0230] Exemplarily, for example, after saturation processing, the color value of the channel increases, that is, the first color change amount of the channel is positive. Correspondingly, the electronic device can use the positive enhancement coefficient of the channel to enhance the first color change amount to obtain the second color change amount. Among them, the second color change amount is also positive.

[0231] Exemplarily, for example, after saturation processing, the color value of the channel decreases, that is, the first color change amount of the channel is negative. Correspondingly, the electronic device can use the negative enhancement coefficient of the channel to enhance the first color change amount to obtain the second color change amount. Among them, the second color change amount is also negative.

[0232] In some embodiments, referring to Figure 8 , taking the three colors red (R), green (G), and blue (B) of the RGB channel as an example, red superimposed on green gives yellow (Y), red superimposed on blue gives magenta (M), and green superimposed on blue gives cyan (C). Exemplarily, the positive enhancement coefficient of the R channel is P1, the negative enhancement coefficient is P2, the positive enhancement coefficient of the G channel is P3, the negative enhancement coefficient is P4, the positive enhancement coefficient of the B channel is P4, and the negative enhancement coefficient is P5.

[0233] Among them, P1 affects red, P3 affects green, and P5 affects blue. P2 affects the second tendency color cyan of red. Correspondingly, P4 affects the second tendency color magenta of green, and P6 affects the second tendency color yellow of blue. Among them, the second tendency color of the color can be regarded as: the complementary color of the color, that is, the color obtained without the participation of this color in the superposition. Exemplarily, taking red as an example, red superimposed on green gives yellow, and red superimposed on blue gives magenta. Then cyan (obtained by superimposing green and blue) has nothing to do with red, and cyan can be regarded as the second tendency color of red, or the complementary color of red.

[0234] According to the description in the above embodiments, since the colors of the red and green channels have a greater impact on the user's immersion, the electronic device can set different P1, P2, P3, and P4 to adjust the colors of the red and green channels and the second tendency colors of the colors of the red and green channels. Exemplarily, when the requirement is to improve the penetration of red and green, and the requirement for the penetration of cyan and magenta is not high, the electronic device can set P1 and P3 to larger values, and compared with P1 and P3, P2 and P4 can be set to smaller values. Exemplarily, when the penetration of red and green is relatively strong itself, and the requirement is to improve the penetration of cyan and magenta, the electronic device can set P2 and P4 to larger values, and compared with P2 and P4, P1 and P3 can be set to smaller values.

[0235] Based on the above introduction of terms 1)-5), the processing process of the electronic device for the first UI element without a bottom plate will be introduced in detail as follows:

[0236] In some embodiments, such as Figure 5A the text such as time and date shown in Figure 5B the text such as time and date shown in Figure 6 This type of UI element has no bottom plate, and the electronic device can use the method shown in

[0237] To improve the transparency of the image, that is, to enable the user to feel the image color penetrating from the first UI element and further improve the user's immersion, in some embodiments, for the first UI element without a bottom plate, there are some restrictions on the screening conditions for the grayscale processing in S603, the saturation processing in S604, and the enhancement processing parameters in S605. It is precisely these restrictions on the screening conditions that can enable the enhancement processing effect and enhance the user's immersion.

[0238] In some embodiments, in S603, the electronic device can process the colors of each channel of the second pixel according to the first grayscale parameter corresponding to the first UI element.

[0239] In some embodiments, the grayscale parameter may include a color value for darkening or brightening. Or, in some embodiments, the grayscale parameter may be a grayscale function. Hereinafter, taking the grayscale parameter as a grayscale function as an example for explanation, exemplarily, the first grayscale parameter may be a first grayscale function.

[0240] It should be understood that multiple grayscale functions can be preset in the electronic device. Before processing the colors of each channel of the second pixel, the electronic device can select a first grayscale function adapted to the first UI element from the multiple grayscale functions. In some embodiments, a first screening condition can be preset in the electronic device, and the first screening condition is adapted to UI elements without a bottom plate (such as the first UI element). In this embodiment, the electronic device can screen the first grayscale function adapted to the first UI element from the multiple grayscale functions according to the first screening condition.

[0241] Taking the first grayscale function as an example, in some embodiments, the first screening condition is as follows:

[0242] 1) The absolute value of the first offset area corresponding to the first grayscale function is greater than the first area threshold. Exemplarily, for example, the first area threshold can be 55 / 255. The purpose of such a setting is to ensure the effect of grayscale brightening or darkening and improve the readability of the first UI element.

[0243] 2) The first slope of the first grayscale function is greater than the first threshold. Exemplarily, for example, the first threshold can be 0.4.

[0244] In some embodiments, when the first grayscale function is not a straight line, the first slope can be: the minimum slope or the average slope of the first grayscale function. Or, in some embodiments, when the first grayscale function is not a straight line, the first slope can be: the slope of the line connecting the starting points of the first grayscale function.

[0245] The purpose of such a setting is to improve the transparency of the first UI element, that is, to enhance the color penetration at the second pixel of the image. In this way, the user can see the color at the second pixel through the first UI element.

[0246] Next, the first screening condition is continued to be introduced. The first screening condition is also used to limit the setting of the first enhancement parameter:

[0247] In some embodiments, when the first offset area is positive, that is, when the electronic device performs grayscale brightening processing on the image, the color values of each channel of the second pixel increase, the brightness increases, and the color penetration of each channel increases. At this time, the penetration of red and green is relatively strong. In this scenario, the electronic device can set the anti-enhancement coefficients of the red channel and the green channel to larger values and the positive enhancement coefficients to smaller values in the first enhancement parameter. Among them, the anti-enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients.

[0248] The purpose of such a setting is as follows: When the electronic device performs grayscale brightening processing on the image, the penetrability of red and green can be increased. At this time, the penetrability of red and green is relatively strong itself. Therefore, the penetrability of other colors can be enhanced to improve the overall color penetrability at the second pixel. Therefore, when the electronic device performs enhancement processing on the colors of each channel, the P1 and P3 that affect red and green can be set to smaller values, while the P2 and P4 that affect cyan and magenta can be set to larger values. That is, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients, that is, P2 and P4 are larger values, and P1 and P3 are smaller values. In some embodiments, for example, P1 is less than P2 and less than P4, and P3 is less than P2 and less than P4.

[0249] In some embodiments, when the first offset area is negative, that is, when the electronic device performs grayscale darkening processing on the image, the color values of each channel of the second pixel decrease, the brightness decreases, and the penetrability of the colors of each channel weakens. At this time, because red and green are the main colors that affect the user's immersion, and at this time the penetrability of red and green decreases. In order to improve the user's immersion, first of all, the penetrability of red and green needs to be enhanced. Therefore, in this scenario, the electronic device can set the positive enhancement coefficients of the red channel and the green channel to larger values and the negative enhancement coefficients to smaller values in the first enhancement parameter. Among them, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients.

[0250] The purpose of such a setting is as follows: When the electronic device performs grayscale darkening processing on the image, the penetrability of red and green can be weakened. Because red and green are the main colors that affect the user's immersion, and at this time the penetrability of red and green decreases. In order to enhance the user's immersion to the greatest extent possible, when the electronic device performs enhancement processing on the colors of each channel, the P1 and P3 that affect red and green can be set to larger values, while for other colors, such as cyan and magenta, the penetrability weakens and has a relatively small impact on the user's immersion experience. Therefore, the electronic device can set the P2 and P4 that affect cyan and magenta to smaller values. That is, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients, that is, P1 and P3 are larger values, and P2 and P4 are smaller values. In some embodiments, for example, P2 is less than P1 and less than P3, and P4 is less than P1 and less than P3.

[0251] In summary, in the embodiments of the present application, for the first UI element without a bottom plate, the electronic device may preset a first screening condition adapted to the first UI element. Through the first screening condition, the electronic device can screen out a first grayscale function and a first enhancement parameter adapted to the first UI element. In this way, based on the first grayscale function and the first enhancement parameter, the electronic device processes the first UI element, making it more adapted to the first UI element, improving the fusion of the first UI element and the background image, and enhancing the user's sense of immersion.

[0252] Scenario 2: The UI element has a bottom plate

[0253] In the above embodiments, the first UI element without a bottom plate is taken as an example. In the following embodiments, the second UI element in the interface with a bottom plate is taken as an example for introduction. Different from the first UI element, there is a bottom plate under the second UI element. Therefore, when the electronic device processes the second UI element, it also needs to process the bottom plate, which can be referred to Figure 9 for the description in.

[0254] Figure 9 is a schematic flowchart of another embodiment of the interface processing method provided by the embodiments of the present application. Referring to Figure 9 , the interface processing method provided by the embodiments of the present application may include:

[0255] S901, obtain information of the interface to be displayed. The interface further includes an image, a bottom plate above the image, and a second UI element above the bottom plate. The third pixels in the second UI element respectively correspond to the fourth pixels of the bottom plate and the fifth pixels of the image. The information further includes the colors of each channel of the fifth pixels.

[0256] Before the electronic device displays the interface, it may obtain information of the interface to be displayed. Among them, in this example, the second UI element has a bottom plate, so the interface may include an image, a bottom plate above the image, and a second UI element above the bottom plate. It should be understood that this interface is the same interface as that in S601. In other words, the interface may include an image and a first UI element above the image, and the interface may further include a bottom plate above the image and a second UI element above the bottom plate.

[0257] Among them, the bottom plate being above the image can be understood as: the layer of the bottom plate is above the layer of the image. Similarly, the second UI element being above the bottom plate can be understood as: the layer where the second UI element is located is above the layer where the bottom plate is located. In this example, the second UI element may block part of the bottom plate, and the bottom plate may block part of the image.

[0258] It should be understood that before the display interface of the electronic device, layer composition processing can be performed on the layers that make up the interface. The electronic device can perform layer composition on the layer where the second UI element is located, the layer of the bottom plate, and the layer of the image in the order of the upper and lower layers of the layers, and place the layer where the second UI element is located on the upper layer of the layer of the bottom plate, and place the layer where the bottom plate is located on the upper layer of the layer of the image to obtain the interface. The electronic device can send the interface for display to display the interface.

[0259] For the third pixel, the fourth pixel, and the fifth pixel, reference can be made to the descriptions of the first pixel and the second pixel above, and the third pixel in the second UI element corresponds to the fourth pixel of the bottom plate and the fifth pixel of the image respectively. The description of the correspondence between the pixels can refer to the relevant description of the correspondence between the first pixel and the second pixel in S901.

[0260] In some embodiments, the information of the interface includes the colors of each channel of the fifth pixel. Exemplarily, taking the channels of the interface including RGB channels as an example, the information of the interface can include: the red value of the R channel, the green value of the G channel, and the blue value of the B channel in the fifth pixel.

[0261] It should be understood that the following S902 - S906 are the processing processes of the electronic device for the bottom plate, and S907 - S911 are the processing processes of the electronic device for the second UI element. It should be understood that the processing process of the electronic device for the bottom plate is similar to that for the second UI element, except for the pixels targeted. Exemplarily, when the electronic device processes the bottom plate, it targets the fifth pixel in the image under the bottom plate, while when the electronic device processes the second UI element, it targets the fourth pixel in the bottom plate under the second element. The purpose of such a setting is: the purpose of the electronic device to process the bottom plate is to see the colors in the image under the bottom plate through the bottom plate, so the electronic device processes the fifth pixel in the image under the bottom plate. Similarly, the purpose of the electronic device to process the second UI element is to be able to see the penetrated colors below through the second UI element, so the electronic device processes the fourth pixel in the image under the second UI element.

[0262] S902, perform blur processing on the fifth pixel of the image.

[0263] S903, perform grayscale processing on the fifth pixel of the image.

[0264] S902 - S903 can refer to the descriptions in S602 - S603.

[0265] S904, process the colors of each channel of the fifth pixel according to the second saturation parameter corresponding to the bottom plate to obtain the third color change amount of each channel of the fifth pixel before and after processing.

[0266] S905. Enhance the third color variation according to the second enhancement parameter corresponding to the base layer to obtain the fourth color variation of each channel of the fifth pixel.

[0267] S906. Determine the color of each channel of the fourth pixel according to the color of each channel of the fifth pixel and the fourth color variation.

[0268] In some embodiments, the second saturation parameter corresponding to the base layer and the second enhancement parameter can be preset in the electronic device. In this example, the electronic device can process the color of each channel of the fifth pixel according to the second saturation parameter corresponding to the base layer, and enhance the third color variation according to the second enhancement parameter corresponding to the base layer, so that the electronic device can determine the color of each channel of the fourth pixel.

[0269] In some embodiments, S904 - S906 can refer to the process of the electronic device processing the second pixel of the image in S604 - S606. The difference from S604 - S606 is that: Figure 6 In the shown embodiment, there is no base layer for the first UI element, and the image is directly below the first UI element. Therefore, the processing of the first UI element by the electronic device is for the second pixel of the image. In the embodiments of the present application, there is a base layer below the second UI element, and the image is below the base layer. Therefore, the processing of the base layer by the electronic device is for the fifth pixel of the image, and the processing of the second UI element by the electronic device is for the fourth element of the base layer.

[0270] After the electronic device determines the color of each channel of the fourth pixel of the base layer, the electronic device can process the second UI element:

[0271] S907. Blur the fourth pixel of the base layer.

[0272] S908. Perform grayscale processing on the fourth pixel of the base layer.

[0273] In S907 - S908, the blurring process and grayscale process of the base layer by the electronic device can refer to the descriptions of the blurring process and grayscale process of the image by the electronic device in S602 - S603.

[0274] S909. Process the color of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element to obtain the fifth color variation of each channel of the fourth pixel before and after processing.

[0275] S910. Enhance the fifth color variation according to the third enhancement parameter corresponding to the second UI element to obtain the sixth color variation of each channel of the fourth pixel.

[0276] S911. Determine the colors of each channel of the third pixel based on the colors of each channel of the fourth pixel and the sixth color change amount.

[0277] S909 - S911 can refer to the descriptions in S604 - S606. The difference from S604 - S606 is that: there is an image under the first UI element, so the electronic device processes the first UI element for the second pixel in the underlying image, while there is a bottom plate under the second UI element, and the image is under the bottom plate, so the electronic device processes the second UI element for the fourth element of the bottom plate.

[0278] Referring to the description in S604, in some embodiments, for different types of UI elements, different saturation parameters can be preset in the electronic device. In the embodiments of the present application, the electronic device can select the third saturation parameter corresponding to the second UI element according to the type of the second UI element, and process the colors of each channel of the fourth pixel of the bottom plate to obtain the fifth color change amount of each channel of the fourth pixel before and after processing.

[0279] In some embodiments, multiple saturation parameters and screening conditions corresponding to different types of UI elements can be preset in the electronic device. In this embodiment, the electronic device can determine the screening conditions corresponding to the second UI element according to the type of the second UI element. The electronic device can screen out the third saturation parameter corresponding to the second UI element from multiple saturation parameters according to the screening conditions corresponding to the second UI element. The electronic device can process the colors of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element to obtain the fifth color change amount of each channel of the fourth pixel before and after processing.

[0280] S912. Apply a mask layer to the third pixel.

[0281] Different from the above Figure 6 shown embodiment is that there is no bottom plate under the first UI element, while there is a bottom plate under the second UI element. Therefore, the electronic device can apply a mask layer at the third pixel to obtain a bottom plate (such as a rounded rectangle under text).

[0282] S913. Display the second UI element based on the colors of each channel of the third pixel.

[0283] S913 can refer to the description in S607.

[0284] In the embodiments of the present application, for the second UI element with a bottom plate, the electronic device can process the bottom plate and the second UI element respectively to improve the penetrability of the image through the bottom plate and the second UI element, so as to improve the user's immersion.

[0285] Figure 9The examples in it introduce an example where a second UI element exists on the upper layer of the bottom board. In some embodiments, there is no second UI element on the upper layer of the bottom board, that is, there is no UI element blocking the bottom board. Exemplarily, referring to Figure 5A In the flashlight icon 52 and the camera icon 53 in it, the circle below the icon can be regarded as the bottom board, and the icon can be regarded as the second UI element. Among them, the position where the flashlight icon 52 and the camera icon 53 are displayed blocks the lower bottom board, but at the position where no icon is displayed, there is no UI element on the upper layer of the bottom board. Exemplarily, referring to Figure 5B In the text message card 52 in it, the rounded rectangle can be regarded as the bottom board, and the text message content can be regarded as the second UI element. In the area of the text message card 52 where there is no text message content, the lower bottom board is not blocked, that is, there is no UI element on the upper layer of the bottom board.

[0286] In this scenario, since there is no second UI element on the upper layer of the bottom board, the bottom board is not blocked, and the user can see the bottom board. The electronic device can adopt the following Figure 10 way to determine the colors of each channel at the bottom board, and then display the bottom board.

[0287] In some embodiments, the bottom board further includes a sixth pixel, and the second UI element does not block the sixth pixel. That is, there is no UI element on the upper layer of the sixth element, and the user can directly see the bottom board at the sixth element on the interface. In this example, the sixth pixel corresponds to the seventh pixel of the image. Among them, the information of the interface further includes the colors of each channel of the seventh pixel.

[0288] Figure 10 Shows the processing process of the electronic device for the bottom board where there is no UI element on the upper layer:

[0289] S1001, perform blurring processing on the seventh pixel of the image.

[0290] S1002, perform grayscale processing on the seventh pixel of the image.

[0291] S1001 - S1002 can refer to the description in S602 - S603.

[0292] S1003, according to the second saturation parameter, process the colors of each channel of the seventh pixel to obtain the seventh color change amount of each channel of the seventh pixel before and after processing.

[0293] S1004, according to the second enhancement parameter, enhance the seventh color change amount to obtain the eighth color change amount of each channel of the seventh pixel.

[0294] S1005, according to the colors of each channel of the seventh pixel and the eighth color change amount, determine the colors of each channel of the sixth pixel.

[0295] S1006, display the bottom board based on the colors of each channel of the sixth pixel.

[0296] S1003 - S1005 can refer to the descriptions in S904 - S906.

[0297] It should be understood that Figure 10 the processing of the bottom board by the electronic device in Figure 9 has no distinction in the order of precedence from the processing of the bottom board by the electronic device in

[0298] In the embodiments of the present application, since there are no UI elements on the upper layer of the sixth pixel of the bottom board, after the electronic device processes the bottom board, there is no need to overlay the process of processing UI elements on the bottom board. The electronic device can directly display the bottom board based on the colors of each channel of the sixth pixel.

[0299] In the embodiments of the present application, for the second UI element with a bottom board, the electronic device can process the bottom board and the second UI element. Among them, during the process of the electronic device processing the bottom board and the second UI element, after the electronic device performs saturation processing on the colors of each channel, for different colors of each channel, the electronic device can also perform different degrees of enhancement processing on the color change amount of each channel to improve the color penetration, so as to improve the color fusion of the image and the foreground UI element, and further improve the immersion feeling when the user browses the image and the foreground UI element.

[0300] The following details the processing process of the electronic device for the second UI element with a bottom board based on the term introduction in 1) - 5) of the above embodiments:

[0301] When the electronic device processes the bottom board, the electronic device can use the second grayscale parameter corresponding to the bottom board to process the colors of each channel of the pixels (such as the fifth pixel and the seventh pixel) in the image. The meaning of the second grayscale parameter can refer to the description of the grayscale parameter. In some embodiments, the second grayscale parameter can be a second grayscale function, and for the bottom board, the bottom board corresponds to the second grayscale function.

[0302] Among them, the lower layer of the bottom board is an image, and the range of the color values of each channel in the image is 0 - 255. Therefore, the electronic device can calculate the second offset area and the second minimum offset corresponding to the second grayscale function within the range of 0 - 255 based on the second grayscale function and the preset function. The specific calculation process can refer to the descriptions of "offset area" and "minimum offset" in 2) of the above terms.

[0303] Similarly, when the electronic device processes the second UI element, the electronic device may use the third grayscale parameter corresponding to the second UI element to process the colors of each channel of the fourth pixel in the bottom plate. The meaning of the third grayscale parameter may refer to the description of the grayscale parameter. In some embodiments, the third grayscale parameter may be a third grayscale function. For the second UI element, the second UI element corresponds to the third grayscale function.

[0304] It should be noted that the difference between the second UI element and the bottom plate, and the first UI element without the bottom plate is that: the layer below the bottom plate is an image, and the layer below the first UI element is also an image, and the range of the color values of each channel in the image is 0 - 255. While the layer below the second UI element is the bottom plate, when the electronic device processes the bottom plate, the range of the color values of each channel in the bottom plate will change. For example, the range of the color values of each channel in the bottom plate is not necessarily 0 - 255 and can become smaller. In some implementations, the range of the color values of each channel in the processed bottom plate can be referred to as the effective value range.

[0305] Therefore, different from calculating the first offset area, the first minimum offset, the second offset area, and the second minimum offset, when the electronic device calculates the third offset area and the third minimum offset corresponding to the third grayscale function, the electronic device needs to calculate according to the third grayscale function and the effective value range, rather than according to the range of "0 - 255".

[0306] In other words, the third offset area and the third minimum offset are calculated within the range of the color values of each channel in the bottom plate.

[0307] Next, the effective value range and the process of the electronic device calculating the third offset area and the third minimum offset based on the third grayscale function and the effective value range will be introduced. It should be understood that multiple grayscale functions, as well as the offset area and the minimum offset corresponding to the grayscale function, can be preset in the electronic device, where the offset area and the minimum offset are calculated based on the range of "0 - 255". When the electronic device determines the third grayscale function corresponding to the second UI element among multiple grayscale functions, the electronic device can calculate the third offset area and the third minimum offset based on the third grayscale function and the effective value range.

[0308] 6) Effective value range, third offset area, third minimum offset

[0309] Refer to Figure 11 , Figure 11 shows the curve of the third grayscale function and the curve of the preset function. Among them, the curve of the third grayscale function is shown as a straight line. Exemplarily, for example, after the electronic device processes the bottom plate, the effective value range can be 75 - 200, Figure 11The effective numerical range is represented by a solid arrow.

[0310] Within the effective numerical range, the electronic device can calculate the third offset area and the third minimum offset based on the third grayscale function. Refer to Figure 11 , within the effective numerical range, there is no intersection between the curve of the third grayscale function and the curve of the preset function. The curve of the third grayscale function is above the preset function. The electronic device can calculate the area S0 formed between the curve of the third grayscale function and the curve of the preset function within the range where x ranges from 75 to 200. This S0 can be used as the third offset area S. For example, S = S0.

[0311] Similarly, within the effective numerical range, the electronic device can calculate "the difference between the y value of the third grayscale function and the y value of the preset function when x is the same", to obtain the third minimum offset d, as Figure 11 shown.

[0312] To facilitate the understanding of the interface processing method in the following embodiments, the following terms 7)-8) are introduced here:

[0313] 7) The second grayscale function and the third grayscale function have a positive adjustment relationship

[0314] The grayscale function is used for grayscale brightening or darkening, and grayscale brightening and grayscale darkening have an inverse adjustment relationship.

[0315] The second grayscale function and the third grayscale function have a positive adjustment relationship, which is used to indicate that both the second grayscale function and the third grayscale function are used for grayscale brightening, or both are used for grayscale darkening.

[0316] 8) The second grayscale function and the third grayscale function have an inverse adjustment relationship

[0317] The second grayscale function and the third grayscale function have an inverse adjustment relationship, which is used to indicate that the second grayscale function is used for grayscale brightening and the third grayscale function is used for grayscale darkening, or the second grayscale function is used for grayscale darkening and the third grayscale function is used for grayscale brightening.

[0318] In some embodiments, as Figure 5A shown, the flashlight icon 52, the camera icon 53, and the music capsule 54 have a bottom plate, as Figure 5B shown, the music card 51B, the text message card 52B, the incoming call card 53B, and the stacked cards 54B of other applications have a bottom plate. These UI elements can be called the second UI elements. The electronic device can adopt the method in Figure 9 to process the bottom plate with UI elements on the upper layer and the second UI elements, and display the second UI elements. In addition, the electronic device can also adopt the method in Figure 10 to process the bottom plate without UI elements on the upper layer and display the bottom plate.

[0319] In order to improve the transparency of the image, that is, enable the user to feel that the image color penetrates from the UI element, and further improve the user's immersion. In some embodiments, for the second UI element with a bottom plate, the grayscale processing of the image in S903 and S1002, the grayscale processing of the bottom plate in S908, the saturation processing of the image in S904 and S1003, the saturation processing of the bottom plate in S909, and the enhancement processing parameters in S905, S910, and S1004 all have some restrictions on the screening conditions. It is precisely these restrictions on the screening conditions that can enable the enhancement processing effect and enhance the user's immersion.

[0320] First, the screening conditions for the second grayscale parameter and the third grayscale parameter in the second screening condition are introduced as follows:

[0321] In S903 and S1002, the electronic device can process the colors of each channel of the fifth pixel and the seventh pixel according to the second grayscale parameter corresponding to the bottom plate. In S908, the electronic device can process the colors of each channel of the fourth pixel according to the third grayscale parameter corresponding to the second UI element. In the following embodiments, the second grayscale parameter is taken as the second grayscale function, and the third grayscale parameter is taken as the third grayscale function for illustration.

[0322] In the embodiments of the present application, multiple grayscale functions can be preset in the electronic device. Before the electronic device processes the colors of each channel of the fifth pixel of the image and the colors of each channel of the seventh pixel of the image, the electronic device can select the second grayscale function adapted to the bottom plate from multiple grayscale functions. Similarly, before the electronic device processes the colors of each channel of the fourth pixel of the bottom plate, the electronic device can select the third grayscale function adapted to the second UI element from multiple grayscale functions.

[0323] In some embodiments, the electronic device can preset the second screening condition, and the second screening condition includes the screening conditions for the second grayscale function and the third grayscale function. In this embodiment, the electronic device can screen the second grayscale function adapted to the bottom plate and the third grayscale function adapted to the second UI element from multiple grayscale functions according to the second screening condition.

[0324] In some embodiments, the second screening condition may include the following screening conditions:

[0325] 1) Case 1:

[0326] For Figure 5BFor the second UI elements such as the music card 51B, the text message card 52B, the incoming call card 53B, and the stacked card 54B of other applications shown, the size of this type of second UI element is large, its importance level in the interface is high, and it has a great impact on the user's immersive experience. In order to achieve the effect of color penetration, the screening conditions can be restricted as follows: the second grayscale function and the third grayscale function have an inverse adjustment relationship, which can better highlight the difference between the background image and the foreground second UI element and improve the UI readability.

[0327] The inverse adjustment relationship between the second grayscale function and the third grayscale function is used to indicate:

[0328] The second grayscale function is used for grayscale brightening, and the third grayscale function is used for grayscale darkening. In this example, it can be simply understood as: bright background and dark foreground. Or,

[0329] The second grayscale function is used for grayscale darkening, and the third grayscale function is used for grayscale brightening. In this example, it can be simply understood as: dark background and bright foreground.

[0330] The grayscale darkening or grayscale brightening is represented by the offset area. In Case 1, when the second grayscale function and the third grayscale function have an inverse adjustment relationship, the second offset area is positive, the third offset area is negative, or the second offset area is negative, and the third offset area is positive.

[0331] In order to improve the screening accuracy of the second grayscale function and the third grayscale function, in some embodiments, when the second grayscale function and the third grayscale function have an inverse adjustment relationship, the screening conditions can also be restricted as follows:

[0332] The absolute value of the second offset area is greater than the second area threshold, the absolute value of the third offset area is greater than the third area threshold, and the third minimum offset amount is greater than the first offset amount threshold. Exemplarily, the second area threshold can be 0.1, the third area threshold can be 25 / 255, and the first offset amount threshold can be 10 / 255. The purpose of such settings is to improve the contrast between the image and the bottom plate, and between the bottom plate and the second UI element, so as to improve the UI readability.

[0333] In some embodiments, the first area threshold is greater than the third area threshold. In other words, compared with the second UI element with a bottom plate, the first area threshold corresponding to the first UI element without a bottom plate is larger. For example, the first area threshold is 55 / 255, and the third area threshold can be 25 / 255. In other words, the degree of grayscale processing of the first UI element without a bottom plate by the electronic device is greater than that of the second UI element with a bottom plate. The purpose of such a setting is that, compared with the second UI element with a bottom plate, the bottom plate has a certain covering effect on the image, which can enhance the readability of the second UI element. However, there is no bottom plate under the first UI element. Therefore, in the embodiments of the present application, it is necessary to set the degree of grayscale processing of the first UI element to be greater, which can improve the readability of the first UI element so that the user can accurately identify the first UI element.

[0334] In some embodiments, the absolute value of the third minimum offset corresponding to the third grayscale function is greater than the absolute value of the second minimum offset corresponding to the second grayscale function. In other words, the minimum offset corresponding to the foreground second UI element is greater than that of the background. The purpose of such a setting is to increase the contrast between the foreground second UI element and the background, which is convenient for improving the readability of the second UI element.

[0335] In the embodiments of the present application, in case 1, when the second grayscale function and the third grayscale function are in an inverse adjustment relationship, since the grayscale processing of the background and the foreground is opposite, the UI readability can be enhanced.

[0336] Case 2:

[0337] For Figure 5A For second UI elements such as the flashlight icon 52, the camera icon 53, and the music capsule 54 shown, the size of this type of second UI element is small, and its importance on the interface is low. The user has a low requirement for the readability of these second UI elements. In order to improve the penetrability of the image under these second UI elements, the second grayscale function and the third grayscale function can be in a positive adjustment relationship. Exemplarily, both the second grayscale function and the third grayscale function are used for grayscale brightening or both are used for grayscale darkening.

[0338] Taking the offset area to represent grayscale darkening or grayscale brightening, in case 2, when the second grayscale function and the third grayscale function are in a positive adjustment relationship, the second offset area is positive, the third offset area is positive, or the second offset area is negative, and the third offset area is negative.

[0339] In order to improve the screening accuracy of the second grayscale function and the third grayscale function, in some embodiments, when the second grayscale function and the third grayscale function are in a positive adjustment relationship, the screening conditions can also be restricted:

[0340] The absolute value of the third offset area is greater than the second area threshold, and the third minimum offset is greater than the second offset threshold. Exemplarily, the second area threshold may be 0.1, and the second offset threshold may be 10 / 255.

[0341] In some embodiments, in order to improve the readability of the UI element, the ratio of the third slope of the third grayscale function to the second slope of the second grayscale function may be restricted to be greater than the second threshold. In this way, when the second grayscale function and the third grayscale function have a positive adjustment relationship, there is a difference in the degree of grayscale processing of the bottom plate and the second UI element by the electronic device, which can improve the readability of the UI element to a certain extent. Exemplarily, for example, the second threshold may be 0.4.

[0342] In some embodiments, the first area threshold is greater than the third area threshold.

[0343] In the embodiments of the present application, for different types of second UI elements with a bottom plate, second screening conditions are preset in the electronic device. The second screening conditions limit the screening conditions for the second grayscale function and the third grayscale function, as shown in the above cases 1 and 2. The electronic device can select the second grayscale function and the third grayscale function from multiple grayscale functions according to the type of the second UI element with a bottom plate and the corresponding second screening conditions.

[0344] 2) Next, the second screening condition is continued to be introduced. The second screening condition is also used to limit the second enhancement parameter and the third enhancement parameter:

[0345] In the embodiments of the present application, in S905, the electronic device uses the second enhancement parameter to perform enhancement processing on the third color change amount of each channel of the fifth pixel. In S1004, the electronic device uses the second strong enhancement parameter to process the seventh color change amount of each channel of the seventh pixel. In S910, the electronic device uses the third strong enhancement parameter to process the sixth color change amount of each channel of the fourth pixel.

[0346] In some embodiments, when the second grayscale function and the third grayscale function are in reverse adjustment, two display effects can be presented: one is a bright background and a dark foreground, and the other is a dark background and a bright foreground.

[0347] Taking the bright backplane and dark foreground as an example, in this scenario, the second grayscale function is used for grayscale brightening, and the third grayscale function is used for grayscale darkening. That is, when the second offset area is positive and the third offset area is negative, the electronic device performs grayscale brightening processing on the image, and the color values of each channel of the fifth pixel and the seventh pixel increase, the brightness increases, and the penetrability of the colors of each channel increases. At this time, the penetrability of red and green is relatively strong itself, so the penetrability of other colors can be enhanced to improve the overall color penetrability.

[0348] In this scenario, in the second enhancement parameter, the electronic device can set the anti-enhancement coefficients of the red channel and the green channel to larger values and the positive enhancement coefficients to smaller values. Among them, the anti-enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients. Therefore, when the electronic device performs enhancement processing on the colors of each channel of the fifth pixel and the seventh pixel, the P1 and P3 that affect red and green can be set to smaller values, while the P2 and P4 that affect cyan and magenta can be set to larger values, that is, the anti-enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients, that is, P2 and P4 are larger values, and P1 and P3 are smaller values. In some embodiments, for example, P1 is less than P2 and less than P4, and P3 is less than P2 and less than P4.

[0349] Similarly, in this scenario, the electronic device performs gray-scale darkening processing on the bottom plate, the color values of each channel of the fourth pixel decrease, the brightness decreases, and the penetrability of the color of each channel weakens. At this time, because red and green are the main colors affecting the user's immersion, and at this time because the penetrability of red and green decreases, in order to improve the user's immersion, it is necessary to first enhance the penetrability of red and green. Therefore, in this scenario, in the third enhancement parameter, the electronic device can set the positive enhancement coefficients of the red channel and the green channel to larger values and the anti-enhancement coefficients to smaller values. Among them, the positive enhancement coefficients of the red channel and the green channel are greater than the anti-enhancement coefficients. Therefore, when the electronic device performs enhancement processing on the colors of each channel of the fourth channel, the P1 and P3 that affect red and green can be set to larger values, while for other colors, such as cyan and magenta, whose penetrability weakens and has less impact on the user's immersion experience, the electronic device can set the P2 and P4 that affect cyan and magenta to smaller values, that is, the positive enhancement coefficients of the red channel and the green channel are greater than the anti-enhancement coefficients, that is, P1 and P3 are larger values, and P2 and P4 are smaller values. In some embodiments, for example, P2 is less than P1 and less than P3, and P4 is less than P1 and less than P3.

[0350] Taking a dark background and a bright foreground as an example, in this scenario, the second gray-scale function is used for gray-scale darkening, and the third gray-scale function is used for gray-scale brightening, that is, when the second offset area is negative and the third offset area is positive, the electronic device performs gray-scale darkening processing on the image, and the color values of each channel of the fifth pixel and the seventh pixel decrease, the brightness decreases, and the penetrability of the color of each channel weakens. At this time, because red and green are the main colors affecting the user's immersion, and at this time because the penetrability of red and green decreases, in order to improve the user's immersion, it is necessary to first enhance the penetrability of red and green. Therefore, in this scenario, in the second enhancement parameter and the third enhancement parameter, the electronic device can set the positive enhancement coefficients of the red channel and the green channel to larger values and the anti-enhancement coefficients to smaller values. Among them, the positive enhancement coefficients of the red channel and the green channel are greater than the anti-enhancement coefficients.

[0351] In this scenario, the electronic device performs gray-scale darkening processing on the image, which can weaken the penetrability of red and green. Since red and green are the main colors affecting the user's immersion, at this time, because the penetrability of red and green decreases, in order to enhance the user's immersion to the greatest extent possible, when the electronic device performs enhancement processing on the colors of each channel, it can set P1 and P3 that affect red and green to larger values. For other colors, such as cyan and magenta, whose penetrability weakens and has less impact on the user's immersion experience, the electronic device can set P2 and P4 that affect cyan and magenta to smaller values. That is, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients, that is, P1 and P3 are larger values, and P2 and P4 are smaller values. In some embodiments, for example, P2 is less than P1 and less than P3, and P4 is less than P1 and less than P3.

[0352] In some embodiments, when the second gray-scale function and the third gray-scale function are adjusted positively, two display effects can be presented: one is a bright background and a bright foreground, and the other is a dark background and a dark foreground.

[0353] Taking the bright backplane and bright foreground as an example, in this scenario, the second gray-scale function is used for gray-scale brightening, and the third gray-scale function is used for gray-scale brightening. That is, when the second offset area is positive and the third offset area is positive, the electronic device performs gray-scale brightening processing on the image. The color values of each channel of the fifth pixel and the seventh pixel increase, the brightness increases, and the penetrability of the colors of each channel increases. In addition, the color values of each channel of the fourth pixel increase, the brightness increases, and the penetrability of the colors of each channel increases.

[0354] In this scenario, the penetrability of red and green in the image is relatively strong, and the penetrability of red and green in the bottom plate is also relatively strong. Therefore, the penetrability of other colors can be enhanced to improve the overall color penetrability. Therefore, the electronic device can set the negative enhancement coefficients of the red channel and the green channel to larger values and the positive enhancement coefficients to smaller values in the second enhancement parameter and the third enhancement parameter. The specific settings can refer to the relevant descriptions above.

[0355] Taking the dark backplane and dark foreground as an example, in this scenario, the second gray-scale function is used for gray-scale darkening, and the third gray-scale function is used for gray-scale darkening. That is, when the second offset area is negative and the third offset area is negative, the electronic device performs gray-scale darkening processing on the image. The color values of each channel of the fifth pixel and the seventh pixel decrease, the brightness decreases, and the penetrability of the colors of each channel weakens. In addition, the color values of each channel of the fourth pixel decrease, the brightness decreases, and the penetrability of the colors of each channel weakens.

[0356] In this scenario, since red and green are the main colors affecting the user's immersion, and at this time the penetration of red and green decreases, in order to improve the user's immersion, it is necessary to first enhance the penetration of red and green. Therefore, in this scenario, in the second enhancement parameter and the third enhancement parameter, the electronic device can set the positive enhancement coefficient of the red channel and the green channel to a larger value and the negative enhancement coefficient to a smaller value. The specific setting can refer to the relevant description above.

[0357] In summary, in the embodiment of the present application, for the second UI element with a bottom plate, the electronic device can preset a second screening condition adapted to the bottom plate and the second UI element. Through this second screening condition, the electronic device can screen out the second grayscale function and the second enhancement parameter adapted to the bottom plate, the third grayscale function adapted to the second UI element, and the third enhancement parameter. In this way, the electronic device processes the bottom plate based on the second grayscale function and the second enhancement parameter adapted to the bottom plate, and processes the second UI element based on the third grayscale function and the third enhancement parameter of the second UI element, which is more adapted to the bottom plate and the second UI element, can improve the fusion of the second UI element and the background image, and improve the user's immersion.

[0358] The following takes two examples to introduce the processing process of the electronic device for the second UI element with a bottom plate:

[0359] Example 1: The second grayscale function and the third grayscale function have an inverse adjustment relationship, which is applicable to second UI elements such as Figure 5B the music card 51B, the text message card 52B, the incoming call card 53B, and the stacked card 54B of other applications shown. It should be understood that Figure 12A in [the figure], the card is a rounded rectangle as an example, each rounded rectangle represents a card, and the text "OK" on the card represents the second UI element carried by the card.

[0360] Referring to Figure 12A a in [the figure], the electronic device can blur the image under the bottom plate, and the user can faintly see the colors in the image under the bottom plate. Referring to Figure 12A b in [the figure], the electronic device can perform grayscale processing on the bottom plate and the second UI element. In this example, the electronic device can perform grayscale processing on the bottom plate using the second grayscale function and perform grayscale processing on the second UI element using the third grayscale function. The second grayscale function and the third grayscale function have an inverse adjustment relationship.

[0361] Because the second grayscale function and the third grayscale function have an inverse adjustment relationship, it is possible to present a bright background and a dark foreground, or a dark background and a bright foreground. A bright background and a dark foreground means that the electronic device uses the second grayscale function to brighten the grayscale of the fifth and seventh elements in the image, and uses the third grayscale function to darken the grayscale of the fourth element in the bottom plate. A dark background and a bright foreground means that the electronic device uses the second grayscale function to darken the grayscale of the fifth and seventh elements in the image, and uses the third grayscale function to brighten the grayscale of the fourth element in the bottom plate.

[0362] Figure 12A In b of, to illustrate the difference between the two processing methods, take the example that a bright background and a dark foreground are presented in the square 1201, and a dark background and a bright foreground are presented in the square 1202. Figure 12A In b of, taking two pixels as an example, it shows the grayscale brightening process of the pixels by the electronic device. Exemplarily, the grayscale function is "y = 0.4244x + 137.01". The electronic device calculates the color data of each channel of the pixel 1 using the grayscale function to obtain the new color values of each channel of the pixel 1. Correspondingly, the color values of each channel of the pixel 1 increase, and the brightness of the pixel 1 becomes brighter. Exemplarily, the electronic device calculates the color data of each channel of the pixel 2 using the grayscale function to obtain the new color values of each channel of the pixel 2. Correspondingly, the color values of each channel of the pixel 2 increase, and the brightness of the pixel 2 becomes darker.

[0363] After the electronic device performs grayscale processing on the bottom plate and the second UI element, the electronic device can process the fifth and seventh elements in the image according to the second saturation parameter of the bottom plate, and use the third saturation parameter of the second UI element to process the fourth element in the bottom plate. Because after the electronic device brightens or darkens the grayscale of the color of each channel, there is some loss of the saturation of the color of each channel. At this time, performing saturation processing on the color of each channel can make the color produce a transparent effect.

[0364] Figure 12A c in shows a schematic diagram of the effect after the electronic device performs saturation processing on the bottom plate and the second UI element. Compared with Figure 12A b in, the colors in the background can be seen more clearly through the bottom plate and the second UI element, but the color penetration is still relatively low.

[0365] Figure 12AThe comparison effect diagram of the processing algorithm in the prior art and the processing algorithm in this application is shown at position c. In the prior art, a unified saturation parameter is used to process the colors of each channel in the pixel. In the embodiments of this application, on the one hand, for the bottom plate and the second UI element, the electronic device can use different saturation parameters for processing. On the other hand, after the electronic device processes the bottom plate and the second UI element with the saturation parameter, the electronic device can also use an enhancement parameter to further process the color change amount of each channel, so as to improve the color penetration in the image and achieve a high-transparency effect, that is, the user can clearly see the colors of the image through the bottom plate and the second UI element.

[0366] Figure 12A c in it shows the color values of each channel of pixel 1 and pixel 3 respectively after being processed by the prior art and this application, as well as the color changes before and after. Compared with the prior art, in the embodiments of this application, the color penetration in the image can be improved, so as to achieve a high-transparency effect and increase the immersive experience of the user.

[0367] Figure 12A d in it shows the schematic diagram of the effect after the electronic device performs enhancement processing on the bottom plate and the second UI element. Compared with Figure 12A c in it, the color penetration in the image is enhanced, and the user can more clearly see the colors in the image through the bottom plate and the second UI element.

[0368] It can be understood that because Figure 12A is displayed in grayscale in it, the color penetration in the image can be compared with "the grayscale of the color in the image and the grayscale of the color at the covered area of the second UI element and the bottom plate".

[0369] Referring to Figure 12A the enlarged area shown in d in it, it can be seen that: the colors at the second UI element and the bottom plate are no longer the same color, but the colors corresponding to the underlying image. In addition, the color penetration at the second UI element and the bottom plate is high, and the colors in the underlying image can be seen.

[0370] Example 2:

[0371] The second grayscale function and the third grayscale function have a positive adjustment relationship and are applicable to second UI elements such as the flashlight icon 52, the camera icon 53, and the music capsule 54 shown in Figure 5A for example.

[0372] Figure 12BIn a of , taking the play icon and the camera icon 53 in the music capsule 54 as examples, in the embodiments of the present application, the electronic device can process the bottom plate (such as the circle in the lower layer of the image) and the second UI element, and the processing method can refer to the description in the above embodiments. Since the second grayscale function and the third grayscale function have a positive adjustment relationship, the effects of a bright background and a bright foreground, or a dark background and a dark foreground can be presented. Figure 12B Taking the bright background and bright foreground in a as an example, that is, the electronic device uses the second grayscale function to brighten the grayscale of the fifth pixel and the seventh pixel in the image, and uses the third grayscale function to brighten the grayscale of the fourth pixel in the bottom plate.

[0373] Since the second grayscale function and the third grayscale function have a positive adjustment relationship, and after the saturation processing and enhancement processing in the embodiments of the present application, the second UI element can present a highly transparent effect, and the color fusion of the second UI element, the bottom plate and the image is improved.

[0374] Similarly, Figure 12B Taking the time and weather icons with a bottom plate in b as an example, since the second grayscale function and the third grayscale function have a positive adjustment relationship, and after the saturation processing and enhancement processing in the embodiments of the present application, the second UI element can present a highly transparent effect, and the color fusion of the second UI element, the bottom plate and the image is improved.

[0375] Similarly, for the first UI element with a bottom plate, the electronic device can perform grayscale processing, saturation processing, and enhancement processing on the first UI element, and can also achieve the purpose of the first UI element presenting a highly transparent effect, and the color fusion of the first UI element and the image is improved, as Figure 12B shown in c of .

[0376] In the above embodiments, taking the first UI element and the second UI element as examples, the method of the electronic device using the same processing method to process the same UI element is described. In some embodiments, there may be sub-elements at different levels in the UI element. In some embodiments, the sub-elements at different levels in the same UI element can be understood as elements with different content types.

[0377] Exemplarily, referring to Figure 13 the text message card in , the text message card includes a text message application icon 1301 and text message content 1302. Among them, the text message card can be regarded as a UI element. Referring to Figure 13 the text message content 1302 may include: the sender's name such as "Amber", the sent content such as "The plan has changed...", and the sent time "10:10". Among them, taking the text message content 1302 including sub-elements at different levels as an example, the sender's name, the sent content, and the sent time can be regarded as sub-elements at different levels.

[0378] Among them, the user has different requirements for the UI readability of sub-elements at different levels. Exemplarily, the user has the highest requirement for the UI readability of the sender's name because based on the sender's name, the user can determine whether to seriously read the content of the text message. The user has the second highest requirement for the UI readability of the content of the text message because the text message card cannot fully display the content of the text message, and the user can only generally understand the content of the text message on the text message card. The user has the lowest requirement for the UI readability of the sending time.

[0379] Taking the second UI element as an example, in some embodiments, the sender's name can be used as the first-level sub-element, the content of the text message can be used as the second-level sub-element, and the sending time can be used as the third-level sub-element. That is to say, the second UI element can include the first-level sub-element, the second-level sub-element, and the third-level sub-element.

[0380] In this example, the sub-elements at different levels are in the same layer. Exemplarily, the first-level sub-element, the second-level sub-element, and the third-level sub-element are in the same layer, and there is no occlusion or overlap between the first-level sub-element, the second-level sub-element, and the third-level sub-element. For example, the first-level sub-element does not occlude the second-level sub-element and the third-level sub-element.

[0381] It can be understood that the electronic device processes the second UI element, which can be understood as: the electronic device processes the sub-elements at different levels in the second UI element. Because the user has different requirements for the UI readability of the sub-elements at different levels, when the electronic device processes the sub-elements at different levels, different grayscale parameters and saturation parameters can be used.

[0382] In the following embodiments, taking the first-level sub-element and the second-level sub-element in the second UI element as examples, the processing method of the sub-elements at different levels in the same UI element by the electronic device is introduced:

[0383] In some embodiments, the third saturation parameters corresponding to the first-level sub-element and the second-level sub-element are different, and the third grayscale functions corresponding to the first-level sub-element and the second-level sub-element are different. Exemplarily, the first-level sub-element corresponds to saturation parameter 1, and the second-level parameter corresponds to saturation parameter 2. Since both the first-level sub-element and the second-level sub-element are included in the second UI element, both saturation parameter 1 and saturation parameter 2 can be referred to as the third saturation parameter, but saturation parameter 1 and saturation parameter 2 are different. Similarly, exemplarily, the first-level sub-element corresponds to grayscale function 1, and the second-level sub-element corresponds to grayscale function 2. Since both the first-level sub-element and the second-level sub-element are included in the second UI element, both grayscale function 1 and grayscale function 2 can be referred to as the third grayscale function, but grayscale function 1 and grayscale function 2 are different.

[0384] In some embodiments, for sub-elements at different levels in a UI element, different levels of saturation parameters and third screening conditions of the grayscale function corresponding to the sub-elements are also preset in the electronic device. It should be understood that after the electronic device filters out the grayscale function, saturation parameter, and enhancement parameter corresponding to the UI element according to the first screening condition or the second screening condition, when there are sub-elements at different levels in the UI element, the electronic device can also filter out the grayscale function and saturation parameter that are adapted to the sub-elements at different levels from the already filtered grayscale function and saturation parameter according to the third screening condition.

[0385] Taking the example that the level of the first-level sub-element is higher than that of the second-level sub-element. For example, the first-level sub-element is the sender's name, and the second-level sub-element is the sender's content. In some embodiments, the third screening condition is as follows:

[0386] 1) The third saturation parameter corresponding to the first-level sub-element is greater than the third saturation parameter corresponding to the second-level sub-element. That is, the higher the level, the greater the corresponding saturation parameter. In this way, the electronic device has a greater degree of saturation processing for the sub-element with a higher level, enabling the sub-element with a higher level to have higher readability.

[0387] Exemplarily, for example, saturation parameter 1 is greater than saturation parameter 2. For example, taking saturation parameter 1 as n1 and saturation parameter as n2, n1 > n2. The purpose of such a setting is to improve the saturation processing of the important first-level sub-element to improve the UI readability of the first-level sub-element.

[0388] 2) The third slope of the third grayscale function corresponding to the first-level sub-element is greater than the third slope of the third grayscale function corresponding to the second-level sub-element. Among them, the concept of the third slope can refer to the relevant description of the first slope. Exemplarily, for example, the third slope of grayscale function 1 is greater than the third slope of grayscale function 2.

[0389] Or,

[0390] The absolute value of the third offset area of the third grayscale function corresponding to the first-level sub-element is greater than the absolute value of the third offset area of the third grayscale function corresponding to the second-level sub-element.

[0391] Among them, the third slope of the third grayscale function corresponding to the first-level sub-elements is greater than the third slope of the third grayscale function corresponding to the first-level sub-elements, or the absolute value of the third offset area of the third grayscale function corresponding to the first-level sub-elements is greater than the absolute value of the third offset area of the third grayscale function corresponding to the first-level sub-elements. Both can indicate that the electronic device has a greater degree of grayscale processing for the sub-elements with a higher level, which can improve the brightness processing of the sub-elements with a higher level to improve the UI readability of the sub-elements with a higher level.

[0392] In some embodiments, the first UI element may include sub-elements of different levels, and the grayscale function and saturation parameter corresponding to the sub-elements may refer to the third screening condition.

[0393] It can be understood that for sub-elements of different levels, the selection of the enhancement parameter is related to the type of the UI element, and the relevant descriptions in the first screening condition and the second screening condition in the above embodiments may be referred to.

[0394] In the embodiments of the present application, for sub-elements at different levels in the same UI element, the electronic device may preset a third screening condition, and based on this third screening condition, the electronic device can screen out the grayscale function and saturation parameter adapted to sub-elements of different levels, so that the display of the UI element meets the UI readability requirements of the user.

[0395] In some embodiments, the second UI element may be a stacked element. A stacked element can be understood as: a stacked element formed by stacking multiple UI elements. The stacked element may include but is not limited to: stacked cards, stacked folder icons, etc.

[0396] Exemplarily, the second UI element is composed of a third-level sub-element, a fourth-level sub-element, and a fifth-level sub-element stacked up and down. Among them, the third-level sub-element is on the upper layer of the fourth-level sub-element, and the fourth-level sub-element is on the upper layer of the fifth-level sub-element.

[0397] In this example, sub-elements of different levels are in different layers. Among them, the fact that the third-level sub-element is on the upper layer of the fourth-level sub-element can be understood as: the layer where the third-level sub-element is located is on the upper layer of the layer where the fourth-level sub-element is located. The fact that the fourth-level sub-element is on the upper layer of the fifth-level sub-element can be understood as: the layer where the fourth-level sub-element is located is on the upper layer of the layer where the fifth-level sub-element is located. Among them, the sub-elements in the upper layer will block the sub-elements in the lower layer.

[0398] In this embodiment, the third gray-scale functions corresponding to the third-level sub-elements, the fourth-level sub-elements, and the fifth-level sub-elements are different. Exemplarily, for example, the third-level sub-elements correspond to the gray-scale function 3, the fourth-level sub-elements correspond to the gray-scale function 4, and the fifth-level sub-elements correspond to the gray-scale function 5. Since the third-level sub-elements, the fourth-level sub-elements, and the fifth-level sub-elements are all included in the second UI element, the gray-scale function 3, the gray-scale function 4, and the gray-scale function 5 can all be referred to as the third gray-scale function.

[0399] In some embodiments, in order to enable users to see the differences between sub-elements of different levels so that they can distinguish sub-elements of different levels, the gray-scale function 3, the gray-scale function 4, and the gray-scale function 5 are all different.

[0400] In some embodiments, since the third-level sub-elements are on the upper layer of the fourth-level sub-elements, and the fourth-level sub-elements are on the upper layer of the fifth-level sub-elements, in order to enable users to feel a progressive feeling, the following fourth screening conditions can be set for the third gray-scale functions corresponding to the third-level sub-elements, the fourth-level sub-elements, and the fifth-level sub-elements respectively:

[0401] When the x values are the same, the y values of the third gray-scale function corresponding to the third-level sub-elements, the y values of the third gray-scale function corresponding to the fourth-level sub-elements, and the y values of the third gray-scale function corresponding to the fifth-level sub-elements form an arithmetic sequence. That is to say, when the electronic device processes sub-elements in different levels, different gray-scale processing degrees can be adopted, and based on the order from bottom to top, the gray-scale processing degrees can increase or decrease in sequence, so that elements of different levels can present a progressive effect.

[0402] In some embodiments, since the third-level sub-elements are on the top layer and have the greatest impact on the user's immersion experience, the slope of the third gray-scale function (such as the gray-scale function 3) corresponding to the third-level sub-elements can be set to be the largest, the slope of the third gray-scale function (such as the gray-scale function 4) corresponding to the fourth-level sub-elements is the second largest, and the slope of the third gray-scale function (such as the gray-scale function 5) corresponding to the fifth-level sub-elements is the smallest. With such a setting, the electronic device has the greatest gray-scale processing degree for the third-level sub-elements on the upper layer, which can improve the UI readability of the third-level sub-elements.

[0403] In some embodiments, it can also be said that the slopes of the third gray-scale functions corresponding to the third-level sub-elements, the slopes of the third gray-scale functions corresponding to the fourth-level sub-elements, and the slopes of the third gray-scale functions corresponding to the fifth-level sub-elements form an arithmetic sequence. Exemplarily, Figure 14 Figure a shows a schematic diagram of the third gray-scale function corresponding to the third-level sub-elements, the third gray-scale function corresponding to the fourth-level sub-elements, and the third gray-scale function corresponding to the fifth-level sub-elements.Figure 14 Another schematic diagram showing the third grayscale function corresponding to the third-level sub-elements, the third grayscale function corresponding to the fourth-level sub-elements, and the third grayscale function corresponding to the fifth-level sub-elements is shown in b of .

[0404] In the embodiments of the present application, for sub-elements at different levels in the same UI element, a fourth screening condition for screening sub-elements can be preset. Based on this fourth screening condition, the electronic device can screen out grayscale functions suitable for sub-elements at different levels, enabling the display of the UI element to meet the user's UI readability requirements.

[0405] In summary, whether the electronic device processes different types of UI elements or processes sub-elements at different levels in the UI element, the processing process of the electronic device can include Figure 4 the steps 1A - 4A shown in . It should be understood that Figure 15 shows the processing steps with the change of the color of each channel in . It should be understood that Figure 4 the processing steps in . It should be understood that Figure 15 does not show steps 1A and 4A, but shows steps 2A, 3A, and 3B.

[0406] After the processing of step 1A, the color of each channel of the pixel is as shown in a of . Figure 15 as shown in a of . Figure 15 Taking the channels of the pixel including RGB three channels as an example in , as shown in (1) of . Taking grayscale brightening as an example, the electronic device can use a grayscale function to process the color of each channel of the pixel. After grayscale brightening, the color of each channel of the pixel is as shown in b of . It should be understood that the curve of the grayscale function can be as shown in (2) of . Figure 15 as shown in (1) of . Taking grayscale brightening as an example, the electronic device can use a grayscale function to process the color of each channel of the pixel. After grayscale brightening, the color of each channel of the pixel is as shown in b of . It should be understood that the curve of the grayscale function can be as shown in (2) of . Figure 15 as shown in b of . It should be understood that the curve of the grayscale function can be as shown in (2) of . Figure 15 as shown in (2) of .

[0407] The electronic device can use a saturation parameter to perform saturation processing on the color of each channel of the pixel. After saturation processing, the color of each channel of the pixel is as shown in c of . It should be understood that Figure 15 as shown in c of . It should be understood that Figure 15 taking the saturation processing of the color of each channel of the pixel with a 3×3 saturation matrix in (3) of as an example, the specific saturation processing process can refer to the descriptions in formulas 1, 3, and 5 above. After the electronic device performs saturation processing on the color of each channel of the pixel, the electronic device can also use an enhancement parameter to process the color change amount of each channel of the pixel to improve the color penetration, improve the fusion of the background image color and the foreground UI element, and improve the user's immersion. Referring to (4) of , taking the enhancement parameter as a function as an example, different channels correspond to different enhancement parameters, that is, the electronic device has different enhancement degrees for different color change amounts. Figure 15 as shown in (4) of , taking the enhancement parameter as a function as an example, different channels correspond to different enhancement parameters, that is, the electronic device has different enhancement degrees for different color change amounts.

[0408] The implementation principle and technical effects of the embodiments of the present application can be referred to the descriptions in the above embodiments, which will not be elaborated here.

[0409] In summary, Figure 16 The schematic diagrams of several interfaces processed by the embodiments of the present application are shown. Refer to Figure 16 a and b in Figure 6 The elements on the lock screen interface can be regarded as the first UI elements. The electronic device uses the method shown in

[0410] Refer to Figure 16 c in Figure 6 The time, date, and other texts on the lock screen interface can be regarded as the first UI elements, and the cards and stacked cards can be regarded as the second UI elements. For the first UI elements, the electronic device uses the method shown in Figure 9 、 Figure 10 The method shown in

[0411] Similarly, refer to Figure 16 d in Figure 6 The time, date, and other texts on the lock screen interface can be regarded as the first UI elements, and the cards can be regarded as the second UI elements. For the first UI elements, the electronic device uses the method shown in Figure 9 、 Figure 10 The method shown in

[0412] It should be noted that the data involved in the present application (including but not limited to the data for analysis, stored data, displayed data, etc.) are all information and data authorized by users or fully authorized by all parties. And the collection, use, and processing of relevant data need to comply with the relevant laws, regulations, and standards of relevant countries and regions, and corresponding operation entrances are provided for users to choose to authorize or refuse.

[0413] In one embodiment, the embodiments of the present application further provide an electronic device. Refer to Figure 17, the electronic device may include: a processor 1701 (such as a CPU) and a memory 1702. The memory 1702 may include high-speed random access memory (RAM), and may also include non-volatile memory (NVM), such as at least one disk memory. Various instructions can be stored in the memory 1702 to complete various processing functions and implement the method steps of this application.

[0414] Optionally, the electronic device involved in this application may further include: a power supply 1703, a communication bus 1704, and a communication port 1705. The above communication port 1705 is used to enable the electronic device to connect and communicate with other peripherals. In the embodiment of this application, the memory 1702 is used to store computer-executable program code, and the program code includes instructions; when the processor 1701 executes the instructions, the instructions cause the processor 1701 of the electronic device to perform the actions in the above method embodiment, and its implementation principle and technical effects are similar and will not be elaborated here.

[0415] Optionally, the electronic device involved in this application may further include: a display screen 1706. The display screen 1706 is used to display the interface of the electronic device.

[0416] It should be noted that the modules or components described in the above embodiments may be one or more integrated circuits configured to implement the above methods, for example: one or more application specific integrated circuits (ASICs), or, one or more digital signal processors (DSPs), or, one or more field programmable gate arrays (FPGAs), etc. Again, when a certain module above is implemented in the form of a processing element scheduling program code, the processing element may be a general-purpose processor, such as a central processing unit (CPU) or other processors that can call program code, such as a controller. Again, these modules may be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0417] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of the present application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center by wire (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access or a data storage device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)).

[0418] The term "plurality" in this document refers to two or more. The term "and / or" in this document is merely a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " in this document generally represents an "or" relationship between the associated objects before and after; in a formula, the character " / " represents a "division" relationship between the associated objects before and after. In addition, it should be understood that in the description of the present application, terms such as "first" and "second" are only used for the purpose of distinguishing descriptions, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order.

[0419] It can be understood that in the embodiments of the present application, the various numerical numbers involved are only for the convenience of description and are not used to limit the scope of the embodiments of the present application.

[0420] It can be understood that in the embodiments of the present application, the magnitudes of the sequence numbers of the above processes do not mean the order of execution. The order of execution of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.

Claims

1. An interface processing method, characterized in that, Applied to an electronic device, the method includes: Obtain information of an interface to be displayed, where the interface includes an image and a first user interface (UI) element located above the image. The first pixel in the first UI element corresponds to the second pixel in the image, and the information includes the colors of each channel of the second pixel. Process the colors of each channel of the second pixel according to the first saturation parameter corresponding to the first UI element to obtain the first color change amount of each channel of the second pixel before and after processing. Enhance the first color change amount according to the first enhancement parameter corresponding to the first UI element to obtain the second color change amount of each channel of the second pixel. The first enhancement parameter includes enhancement coefficients for each channel, and the enhancement coefficients for different channels are different. Determine the colors of each channel of the first pixel according to the colors of each channel of the second pixel and the second color change amount. Display the first UI element based on the colors of each channel of the first pixel.

2. The method according to claim 1, wherein The interface further includes a bottom plate located above the image and a second UI element located above the bottom plate. The third pixel in the second UI element corresponds to the fourth pixel of the bottom plate and the fifth pixel of the image respectively. The information further includes the colors of each channel of the fifth pixel. The method further includes: Process the colors of each channel of the fifth pixel according to the second saturation parameter corresponding to the bottom plate to obtain the third color change amount of each channel of the fifth pixel before and after processing. Enhance the third color change amount according to the second enhancement parameter corresponding to the bottom plate to obtain the fourth color change amount of each channel of the fifth pixel. Determine the colors of each channel of the fourth pixel according to the colors of each channel of the fifth pixel and the fourth color change amount. Process the colors of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element to obtain the fifth color change amount of each channel of the fourth pixel before and after processing. Enhance the fifth color change amount according to the third enhancement parameter corresponding to the second UI element to obtain the sixth color change amount of each channel of the fourth pixel. Determine the colors of each channel of the third pixel according to the colors of each channel of the fourth pixel and the sixth color change amount. Display the second UI element based on the colors of each channel of the third pixel.

3. The method according to claim 2, wherein The bottom plate further includes a sixth pixel, and the second UI element does not block the sixth pixel. The sixth pixel corresponds to the seventh pixel of the image. The information further includes the colors of each channel of the seventh pixel. The method further includes: Process the colors of each channel of the seventh pixel according to the second saturation parameter to obtain the seventh color change amount of each channel of the seventh pixel before and after processing. Enhance the seventh color change amount according to the second enhancement parameter to obtain the eighth color change amount of each channel of the seventh pixel. Determine the colors of each channel of the sixth pixel according to the colors of each channel of the seventh pixel and the eighth color change amount. Display the base plate based on the colors of each channel of the sixth pixel.

4. The method according to claim 1, characterized in that, Before processing the colors of each channel of the second pixel according to the first saturation parameter corresponding to the first UI element, it further includes: Processing the colors of each channel of the second pixel according to the first grayscale parameter corresponding to the first UI element.

5. The method according to claim 4, wherein The first grayscale parameter is a first grayscale function, and the absolute value of the first offset area corresponding to the first grayscale function is greater than the first area threshold. The first offset area is: the area where the curve of the first grayscale function deviates from the curve of a preset function. The preset function is a proportional function and is an odd function.

6. The method according to claim 5, wherein The first slope of the first grayscale function is greater than the first threshold.

7. The method according to claim 6, wherein The first enhancement parameter specifically includes: the positive and negative enhancement coefficients of each channel. Among them, the positive enhancement coefficient is used for: when the color change amount of the channel is positive, and the negative enhancement coefficient is used for: when the color change amount of the channel is negative; When the first offset area is positive, among the first enhancement parameters, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients. When the first offset area is negative, among the first enhancement parameters, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients.

8. The method according to claim 2 or 3, characterized in that, Before processing the colors of each channel of the fifth pixel according to the second saturation parameter corresponding to the base plate, it further includes: Processing the colors of each channel of the fifth pixel according to the second grayscale parameter corresponding to the base plate. Before processing the colors of each channel of the fourth pixel according to the third saturation parameter corresponding to the second UI element, it includes: Processing the colors of each channel of the fourth pixel according to the third grayscale parameter corresponding to the second UI element.

9. The method according to claim 8, wherein The second grayscale parameter is a second grayscale function, the third grayscale parameter is a third grayscale function, and the second grayscale function and the third grayscale function have an inverse adjustment relationship, or the second grayscale function and the third grayscale function have a positive adjustment relationship; Among them, when the second grayscale function and the third grayscale function have an inverse adjustment relationship: The second offset area corresponding to the second grayscale function is positive, the third offset area corresponding to the third grayscale function is negative. The second offset area is: the area where the curve of the second grayscale function deviates from the curve of a preset function. The preset function is a proportional function and is an odd function. The third offset area is: the area where the curve of the third grayscale function deviates from the curve of the preset function; or, The second offset area is negative, and the third offset area is positive; Among them, when the second grayscale function and the third grayscale function have a positive adjustment relationship: The second offset area is positive, and the third offset area is positive; or, The second offset area is negative, and the third offset area is negative.

10. The method according to claim 9, wherein When the second grayscale function and the third grayscale function are in an inverse adjustment relationship, the absolute value of the second offset area is greater than the second area threshold, the absolute value of the third offset area is greater than the third area threshold, and the third minimum offset is greater than the first offset threshold, where the third minimum offset is: when x is the same, the absolute value of the minimum difference between the y value of the third grayscale function and the y value of the preset function.

11. The method according to claim 10, wherein The third minimum offset is greater than the second minimum offset, where the second minimum offset is: when x is the same, the absolute value of the minimum difference between the y value of the second grayscale function and the y value of the preset function.

12. The method according to claim 9, characterized in that, When the second grayscale function and the third grayscale function are in a positive adjustment relationship, the absolute value of the third offset area is greater than the second area threshold, and the third minimum offset is greater than the second offset threshold, where the third minimum offset is: when x is the same, the absolute value of the minimum difference between the y value of the third grayscale function and the y value of the preset function.

13. The method according to claim 10 or 11, characterized in that The first area threshold is greater than the third area threshold.

14. The method according to claim 13, wherein The ratio of the third slope of the third grayscale function to the second slope of the second grayscale function is greater than the second threshold.

15. The method according to any one of claims 10-12, 14, characterized in that, The third offset area and the third minimum offset are calculated within the range of the color values of each channel of the bottom plate.

16. The method according to any one of claims 9-12 and 14, characterized in that The second enhancement parameter and the third enhancement parameter specifically include: the positive and negative enhancement coefficients of each channel, where the positive enhancement coefficient is used for: when the color change amount of the channel is positive, and the negative enhancement coefficient is used for: when the color change amount of the channel is negative; When the second grayscale function and the third grayscale function are in an inverse adjustment relationship, and when the second offset area is positive, in the second enhancement parameter, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients, and in the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients; or, When the second grayscale function and the third grayscale function are in an inverse adjustment relationship, and when the second offset area is negative, in the second enhancement parameter and the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients; or, When the second grayscale function and the third grayscale function are in a positive adjustment relationship, and when the second offset area is positive, in the second enhancement parameter and the third enhancement parameter, the negative enhancement coefficients of the red channel and the green channel are greater than the positive enhancement coefficients; or, When the second grayscale function and the third grayscale function are in a positive adjustment relationship, and when the second offset area is negative, in the second enhancement parameter and the third enhancement parameter, the positive enhancement coefficients of the red channel and the green channel are greater than the negative enhancement coefficients.

17. The method according to claim 9, wherein The second UI element includes a first-level sub-element and a second-level sub-element. The third saturation parameters corresponding to the first-level sub-element and the second-level sub-element are different, and the third grayscale functions corresponding to the first-level sub-element and the second-level sub-element are different.

18. The method according to claim 17, wherein, The level where the first-level sub-element is located is higher than the level where the second-level sub-element is located. The third saturation parameter corresponding to the first-level sub-element is greater than the third saturation parameter corresponding to the second-level sub-element. The third slope of the third grayscale function corresponding to the first-level sub-element is greater than the third slope of the third grayscale function corresponding to the first-level sub-element.

19. The method according to claim 9, wherein The second UI element is composed of a third-level sub-element, a fourth-level sub-element, and a fifth-level sub-element stacked vertically. The third-level sub-element is on the upper layer of the fourth-level sub-element, and the fourth-level sub-element is on the upper layer of the fifth-level sub-element; The third grayscale functions corresponding to the third-level sub-element, the fourth-level sub-element, and the fifth-level sub-element are different from each other.

20. The method according to claim 19, wherein When the x value is the same, the y values of the third grayscale function corresponding to the third-level sub-element, the y values of the third grayscale function corresponding to the fourth-level sub-element, and the y values of the third grayscale function corresponding to the fifth-level sub-element form an arithmetic sequence.

21. The method according to claim 1, characterized in that Before displaying the first UI element, it further includes: Performing a masking process on the first UI element.

22. The method according to claim 3, characterized in that, Before displaying the second UI element, it includes: Performing a masking process on the second UI element; Before displaying the bottom plate, it further includes: Performing a masking process on the bottom plate.

23. An electronic device, characterized in that, The electronic device includes: one or more processors and a memory; The memory is coupled to the one or more processors. The memory is used to store computer program code, and the computer program code includes computer instructions. The one or more processors call the computer instructions to cause the electronic device to execute the method according to any one of claims 1-22.

24. A chip system, characterized in that, The chip system is applied to an electronic device. The chip system includes one or more processors, and the one or more processors are used to call computer instructions to cause the electronic device to execute the method according to any one of claims 1-22.

25. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes computer instructions. When the computer instructions run on an electronic device, they cause the electronic device to execute the method according to any one of claims 1-22.

26. A computer program product, characterized in that, The computer program product includes computer program code. When the computer program code runs on an electronic device, it causes the electronic device to execute the method according to any one of claims 1-22.

Images