Display method, user interface, and related apparatus

Abstract

The present application discloses a display method, a user interface, and a related apparatus. In the method, a pixel value of a first interface element in a foreground layer can be set on the basis of a pixel value in a first background of a background layer of a first user interface. In this way, colors of interface elements contained in the user interface can be flexibly set, and it is also ensured that compared with the color of the background layer, the colors of the interface elements are not overly contrasting, thereby improving the visual display effect of the user interface.

Description

Display method, user interface and related apparatus

[0001] The present application claims priority to the Chinese patent application No. 202411303295.X, filed on September 18, 2024, entitled "Display method, user interface and related apparatus", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of terminals and computers, and in particular to a display method, a user interface and related apparatus. BACKGROUND

[0003] In the field of terminals, in order to improve the experience of users when interacting with products, terminal development teams continuously improve the visual effects of terminal interaction interfaces, aiming to design more attractive and visually appealing interaction interfaces. SUMMARY

[0004] The present application provides a display method, a user interface and related apparatus, which realizes the optimization of the display effect of the user interface and improves the visual experience of the user.

[0005] In a first aspect, an embodiment of the present application provides a display method, which is applied to an electronic device, and the method comprises: detecting a first operation; displaying a first user interface, the first user interface comprising a first background and a first interface element located on an upper layer of the first background, a pixel value of the first interface element being determined according to a pixel value in the first background.

[0006] Implementing the method provided by the first aspect can realize the flexible setting of the color of the interface element contained in the user interface, while ensuring that the color of the interface element located in the foreground layer does not deviate too much from the color of the background layer, thereby optimizing the visual aesthetics of the user interface.

[0007] In combination with the first aspect, in a possible implementation manner, the pixel value of the first interface element is determined according to a pixel value of a first region in the first background, and the first region comprises a region where the first interface element is located.

[0008] That is, the color of the first interface element can be determined according to the color of the region where the first interface element is located in the first background, so that the first interface element and the first background are more harmonious in picture display.

[0009] In a possible implementation manner of the first aspect, the pixel value of the first interface element is a pixel value obtained by adjusting a pixel value of the first region in the first background according to the first parameter, and the first parameter comprises one or more of a brightness parameter, a saturation parameter, a contrast parameter, a lightness parameter, a sharpness parameter, a sharpness parameter, an exposure parameter, and a hue parameter.

[0010] That is, the color of the first interface element can be determined by adjusting the display effects such as brightness, saturation, contrast, lightness, sharpness, sharpness, exposure, and hue, so as to enrich the display effect of the first interface element.

[0011] In a possible implementation manner of the first aspect, the first interface element comprises a first pixel point, and the first background comprises a second pixel point, and the first pixel point and the second pixel point have the same position on the first user interface; after the first operation is detected, before the first user interface is displayed, the method further comprises: determining a pixel value of the first pixel point based on a preset pixel value of the first pixel point, a pixel value of the second pixel point, and the first parameter.

[0012] In this way, the color of the first interface element is associated with the preset color of the first interface element and the color of the first background, so as to avoid that the color of the finally displayed first interface element is too abrupt.

[0013] In a possible implementation manner of the first aspect, the pixel value of the first pixel point is determined based on the preset pixel value of the first pixel point, the pixel value of the second pixel point, and the first parameter, and specifically comprises: adjusting an RGB value of the second pixel point based on the first parameter to obtain a first RGB value; adjusting the first RGB value based on the saturation parameter to obtain a second RGB value; mixing the second RGB value and the RGB value in the preset pixel value to obtain a third RGB value; mixing the RGB value of the second pixel point and the third RGB value with the Alpha value in the preset pixel value as a mixing ratio to obtain a fourth RGB value; and determining the fourth RGB value as the RGB value in the pixel value of the first pixel point.

[0014] It can be seen that the pixel value of the first pixel point can be obtained by sequentially performing brightness processing, saturation processing, and pixel value mixing processing on the second pixel point, which realizes flexible modification of the pixel value of the pixel point by introducing external parameters, and avoids that the color of the user interface is set by the electronic device in a fixed manner.

[0015] In a possible implementation manner of the first aspect, the pixel value of the first pixel point further comprises a first Alpha value, and the first Alpha value is an Alpha value of the second pixel point or a preset value.

[0016] With reference to the first aspect, in a possible implementation manner, after the saturation adjustment is performed on the first RGB value based on the first parameter to obtain the second RGB value, before the third RGB value is obtained by mixing the second RGB value and the preset RGB value, the method further includes: performing normalization processing on the second RGB value.

[0017] The normalization processing on the second RGB value can reduce the range of the numerical value of the second RGB value, and reduce the operation amount of the electronic device.

[0018] With reference to the first aspect, in a possible implementation manner, the brightness adjustment is performed on the RGB value of the second pixel point based on the first parameter to obtain the first RGB value, and specifically includes: inputting the RGB value of the second pixel point into a first equation to obtain the first RGB value, and a coefficient of the first equation is a brightness parameter in the first parameter.

[0019] For example, the brightness parameter in the first parameter can include one or more, and the first equation can be a linear equation, a quadratic equation or a cubic equation.

[0020] With reference to the first aspect, in a possible implementation manner, the brightness parameter is a preset parameter of the electronic device, or the brightness parameter is a parameter set by a user, or the brightness parameter is a parameter transmitted by an application corresponding to the first user interface.

[0021] With reference to the first aspect, in a possible implementation manner, the saturation adjustment is performed on the first RGB value based on the first parameter to obtain the second RGB value, and specifically includes: in a case where a saturation parameter in the first parameter is greater than a first threshold, increasing a difference between three channel numerical values in the first RGB value to obtain the second RGB value; or in a case where the saturation parameter in the first parameter is less than the first threshold, reducing the difference between the three channel numerical values in the first RGB value to obtain the second RGB value.

[0022] With reference to the first aspect, in a possible implementation manner, the first RGB value includes three values, and one value corresponds to one channel, the difference between the three channel numerical values in the first RGB value is increased to obtain the second RGB value, and specifically includes: increasing a maximum value in the three values, and reducing values other than the maximum value in the three values to obtain the second RGB value; or the difference between the three channel numerical values in the first RGB value is reduced to obtain the second RGB value, and specifically includes: increasing a minimum value in the three values, and reducing values other than the minimum value in the three values to obtain the second RGB value.

[0023] With reference to the first aspect, in a possible implementation manner, the saturation parameter is a preset parameter of the electronic device, or the saturation parameter is a parameter set by a user, or the saturation parameter is a parameter transmitted by an application corresponding to the first user interface.

[0024] With reference to the first aspect, in a possible implementation manner, the first user interface further includes a second interface element located on a layer above the first background, a pixel value of the second interface element is a pixel value obtained by adjusting a pixel value of a second region in the first background according to a second parameter, and the second region includes a region where the second interface element is located; and the first parameter and the second parameter are different.

[0025] That is, in the same user interface, the color of different interface elements can be determined based on different color parameters, so that different interface elements can have different display effects, thereby enriching the visual effect of the interface elements.

[0026] With reference to the first aspect, in a possible implementation manner, the first user interface is a user interface corresponding to a control center, or a user interface corresponding to a notification center, or a lock screen, or a negative one screen.

[0027] It can be seen that the display method provided in the embodiments of the present application can be applied to a user interface such as a user interface corresponding to a control center, a user interface corresponding to a notification center, a lock screen, or a negative one screen.

[0028] With reference to the first aspect, in a possible implementation manner, the first user interface is a user interface corresponding to a control center or a notification center, and before the first operation is detected, the method further includes: displaying a second user interface; and the first background is an image obtained by blurring a first image, and the first image is the same as display content of the second user interface.

[0029] It can be understood that if the first user interface is a user interface corresponding to a control center or a notification center, the first background can also be the first image, or the first background can also be a background of the second user interface, or the first background can also be an image obtained by blurring the background of the second user interface, and the embodiments of the present application do not limit the source of the first background.

[0030] With reference to the first aspect, in a possible implementation manner, the first user interface is a lock screen, and the first background is a lock screen background preset by the electronic device or a lock screen background set by a user.

[0031] That is, the background of the lock screen can be a background preset by the electronic device or a background set by the user.

[0032] With reference to the first aspect, in a possible implementation manner, the first user interface is a negative one screen, and before the first operation is detected, the method further includes: displaying a third user interface; and the first background is an image obtained by blurring a second image, and the second image is the same as display content of a background of the third user interface.

[0033] That is, if the first user interface is a home screen, the first background can be an image blurred from a background of a third user interface, which can be a user interface displayed before the first user interface. For example, the third user interface can be a home page.

[0034] In a second aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory, and the processor executes the computer program to implement the method described in the first aspect or any one of the implementation manners of the first aspect.

[0035] In a third aspect, an embodiment of the present application provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the method described in the first aspect or any one of the implementation manners of the first aspect.

[0036] In a fourth aspect, an embodiment of the present application provides a computer program product, which comprises a computer program, and the computer program is executed by a processor to implement the method described in the first aspect or any one of the implementation manners of the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0037] FIGS. 1A-1B are some user interfaces involved when the electronic device 100 displays the interface corresponding to the control center according to an embodiment of the present application;

[0038] FIG. 2 is a schematic diagram of a principle of setting a color of an interface element by the electronic device 100 according to an embodiment of the present application;

[0039] FIGS. 3A-3B are some other user interfaces involved when the electronic device 100 displays the interface corresponding to the control center according to an embodiment of the present application;

[0040] FIG. 4 is a user interface 20 displayed by the electronic device 100 in a process of opening the control center by a user according to an embodiment of the present application;

[0041] FIGS. 5A-5C are some user interfaces related to setting a display effect of an interface element by the electronic device 100 according to an embodiment of the present application;

[0042] FIG. 6 is a user interface 30 according to an embodiment of the present application;

[0043] FIG. 7 is a user interface 40 according to an embodiment of the present application;

[0044] FIG. 8 is a flowchart of a display method according to an embodiment of the present application;

[0045] FIG. 9 is a flowchart of a method of determining a color of an interface element by the electronic device 100 according to an embodiment of the present application;

[0046] FIG. 10 is a detailed method flow diagram of determining a pixel value of a pixel point by the electronic device 100 according to an embodiment of the present application;

[0047] FIG. 11 is a hardware structure diagram of the electronic device 100 according to an embodiment of the present application;

[0048] FIG. 12 is a software structure block diagram of the electronic device 100 according to an embodiment of the present application. DETAILED DESCRIPTION

[0049] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings.

[0050] The term "user interface (UI)" in the embodiments of the present application is a medium interface for interaction and information exchange between an application program or an operating system and a user, which realizes conversion between an internal form of information and a form acceptable by the user. The user interface is source code written in a specific computer language such as Java and extensible markup language (XML), and the interface source code is parsed, rendered and finally presented as content recognizable by the user on the electronic device. A commonly used form of the user interface is a graphic user interface (GUI), which refers to a user interface related to computer operation displayed in a graphic manner. It can be a visual interface element such as text, icon, button, menu, tab, text box, dialog box, status bar, navigation bar, Widget and the like displayed in the display screen of the electronic device.

[0051] In the terminal field, the control center provides a shortcut for quickly accessing various settings and application programs. The user can quickly open the control center through a pull-down operation. However, the control center of most terminals at present is relatively simple in the color design of interface elements. A common way is to lower the transparency of interface elements located in the foreground layer, so that the color of the interface elements is mixed with the color of the background layer in vision, and the overall color of the interface where the control center is located is relatively uniform.

[0052] However, this color adjustment method is relatively rigid, the color is relatively single, and the visual effect is poor.

[0053] The display method provided in the embodiments of the present application can set the pixel value of the interface element of the foreground layer according to the pixel value of the background layer in the user interface, flexibly set the color of the interface element contained in the user interface, and ensure that the color of the interface element does not deviate too much compared with the color of the background layer, thereby improving the visual experience of the user.

[0054] Exemplarily, the user interface can be a control center corresponding interface, a notification center corresponding interface, a lock screen interface, a negative one screen, and the like.

[0055] It can be seen that the display method provided by the embodiments of the present application can exist in various application scenarios:

[0056] 1) applied to the control center corresponding interface

[0057] The control center can be used to provide quick access to shortcuts of various settings and application programs. For example, the settings can include but are not limited to: mobile data, WLAN, personal hotspot, flight mode, Bluetooth, and the like, and the application programs can include but are not limited to: music application, settings application, and the like.

[0058] Exemplarily, the control center corresponding interface can be quickly opened through a pull-down operation, for example, a sliding operation from the top of the display screen to the bottom.

[0059] The display method provided by the embodiments of the present application can set the pixel value of the interface element located in the foreground layer according to the pixel value of the background located in the background layer in the control center corresponding interface, so that the control center corresponding interface is more visually beautiful.

[0060] Specifically, the related user interface of the control center can be referred to subsequent FIG. 1A-FIG. 1B, FIG. 2, FIG. 3A-FIG. 3B, FIG. 4, FIG. 5A-FIG. 5C, which will not be expanded here.

[0061] 2) applied to the notification center corresponding interface

[0062] The notification center can be used to display the notification messages pushed by various applications. For example, weather information pushed by a weather application, chat messages pushed by an instant messaging application, and the like.

[0063] Exemplarily, the notification center corresponding interface can be quickly opened through a pull-down operation, for example, a sliding operation from the top of the display screen to the bottom.

[0064] The display method provided by the embodiments of the present application can set the pixel value of the interface element located in the foreground layer according to the pixel value of the background located in the background layer in the notification center corresponding interface, so that the notification center corresponding interface is more visually beautiful.

[0065] In a possible implementation, the notification center and the control center can be displayed in the same user interface at the same time. That is, a user can open a user interface containing the notification center and the control center through a user operation, for example, a pull-down operation, the user can quickly adjust settings of mobile data, WLAN, personal hotspot, flight mode, Bluetooth, and the like through the user interface, quickly open an application such as a music application, a settings application, and the like, and can also view a notification message pushed by an application through the user interface.

[0066] In a possible implementation, the notification center and the control center can also be displayed in different user interfaces, and the user can open the interface corresponding to the notification center or the control center through different operations. For example, a sliding operation from the top of the right side of the display screen downward can be used to trigger opening of the interface corresponding to the control center, and a sliding operation from the top of the left side of the display screen downward can be used to trigger opening of the interface corresponding to the notification center.

[0067] 3) Applied to a lock screen interface

[0068] The lock screen interface refers to a user interface displayed when a device is in a lock screen state, and the lock screen interface can be used to display time, date, notification messages, and the like.

[0069] Exemplarily, the lock screen interface can be quickly opened through an operation on a power key when the device is in an off-screen state.

[0070] The display method provided in the embodiments of this application can set a pixel value of an interface element located in a foreground layer according to a pixel value of a background located in a background layer in the lock screen interface, so that the lock screen interface is more visually beautiful.

[0071] Specific description of the lock screen interface can be referred to FIG. 6 below, which is not described here in detail.

[0072] 4) Applied to a negative one screen

[0073] The negative one screen refers to a special page located on the left side of a main page of a device, and the negative one screen centrally displays some shortcut functions, message reminders, and convenient entrances of commonly used applications, to provide a user with a more convenient operation experience.

[0074] Exemplarily, the negative one screen can be quickly opened through an operation of sliding the main page to the right.

[0075] The display method provided in the embodiments of this application can set a pixel value of an interface element located in a foreground layer according to a pixel value of a background located in a background layer in the negative one screen, so that the negative one screen is more visually beautiful.

[0076] Specific description of the negative one screen can be referred to FIG. 7 below, which is not described here in detail.

[0077] It can be understood that, in addition to the application scenarios mentioned above, the display method provided in the embodiments of the present application can also be applied to other user interfaces, and the embodiments of the present application do not limit this.

[0078] FIGS. 1A-1B are some user interfaces involved when the electronic device 100 displays the interface corresponding to the control center according to the embodiments of the present application.

[0079] FIG. 1A shows an exemplary user interface 10 for an application menu on the electronic device 100. Exemplarily, the user interface 10 can be the home page of the electronic device 100, which can be used to display time, date, weather and the like, and display one or more application icons through which the user can quickly open the application.

[0080] As shown in FIG. 1A, the electronic device 100 can detect that the user performs a downward sliding operation on the top end of the user interface 10, and in response to the operation, the electronic device 100 can open the interface corresponding to the control center, i.e., the user interface 20 shown in FIG. 1B.

[0081] As shown in FIG. 1B, the user interface 20 can include a settings icon 201, a music playing window 202, a settings item 203, a settings bar 204 and the like.

[0082] The settings icon 201 can be used to trigger the opening of the settings application, the music playing window 202 can be used to control the playing, switching, pausing of music and trigger the opening of the music application, etc. The settings item 203 and the settings bar 204 can each include one or more settings items, which can be used to implement the settings of one or more functions, such as setting WLAN, Bluetooth, ringtone, mobile data, near field communication (NFC), screen display brightness, etc.

[0083] In addition, the user interface 20 can also include a background 205 located in the background layer, which can be an image obtained by blurring the screenshot of the user interface 10 shown in FIG. 1A.

[0084] It can be understood that the background 205 can also be a screenshot of the user interface 10 shown in FIG. 1A, or the background 205 can also be a background image of the user interface 10 shown in FIG. 1A, or the background 205 can also be an image obtained by blurring the background image of the user interface 10 shown in FIG. 1A, and the embodiments of the present application do not limit the source of the background 205.

[0085] In the user interface 20 shown in FIG. 1B, the colors of the interface elements in the foreground layer, such as the setting icon 201, the music playing window 202, the setting item 203, and the setting bar 204, are determined according to the color of the background 205, which makes the colors in the user interface 20 shown in FIG. 1B overall unified, harmonious in tone, and better in visual effect.

[0086] For better understanding, FIG. 2 shows a schematic diagram of the principle of the electronic device 100 setting the colors of the interface elements, taking the user interface 20 shown in FIG. 1B as an example.

[0087] The image shown in (a) of FIG. 2 can be a screenshot of the user interface 10 shown in FIG. 1A, obtaining an image 1.

[0088] The background layer shown in (b) of FIG. 2 can be the background layer of the user interface 20 shown in FIG. 1B, which can include an image obtained by blurring the image 1 shown in (a) of FIG. 2.

[0089] The foreground layer shown in (c) of FIG. 2 can be the foreground layer of the user interface 20 shown in FIG. 1B, which can include one or more interface elements, wherein the color of any interface element is a color obtained by adjusting a preset color of the interface element according to the image included in the background layer shown in (b) of FIG. 2.

[0090] The user interface shown in (d) of FIG. 2 is a user interface 20 obtained by the electronic device 100 superimposing the foreground layer shown in (c) of FIG. 2 and the background layer shown in (b) of FIG. 2. The user interface 20 is the user interface 20 shown in FIG. 1B.

[0091] As can be seen, in the user interface 20, the color of the interface element in the foreground layer is determined according to the color of the background layer and the preset color of the interface element.

[0092] Further, the color of the background layer can refer to the color of a specified region in the background layer, which can include the region where the interface element is located in the foreground layer.

[0093] As for a single pixel point, taking a pixel point Q1 in the foreground layer shown in (c) of FIG. 2 as an example, the pixel point Q1 is a pixel point Q displayed in the user interface 20, and the pixel value of the pixel point Q1 is determined according to the pixel value of a pixel point Q2 shown in (b) of FIG. 2 and the preset pixel value of the pixel point Q1.

[0094] For details about how the electronic device 100 determines the color of the interface element displayed in the user interface based on the color of the background layer and the preset color of the interface element, please refer to the subsequent content.

[0095] As can be seen from FIGS. 1A-1B and FIG. 2, since the color of the foreground layer in the user interface 20 is determined according to the color of the background layer, if the content of the background layer in the user interface 20 changes, the color of the interface elements contained in the foreground layer in the user interface 20 will also change.

[0096] FIGS. 3A-3B are another user interface involved when the electronic device 100 displays the interface corresponding to the control center according to an embodiment of the present application.

[0097] FIG. 3A shows an exemplary user interface 10 for an application menu on the electronic device 100. Compared with FIG. 1A, the background of the user interface 10 shown in FIG. 3A is different, which makes the electronic device 100 determine a different background for the user interface 20 when the user interface 10 shown in FIG. 3A detects that the user opens the control center, and at this time, the electronic device 100 displays the user interface 20 shown in FIG. 3B as the interface corresponding to the control center.

[0098] As shown in FIG. 3B, the user interface 20 includes interface elements such as a settings icon 201, a music playing window 202, a settings item 203, a settings bar 204, and a background 205. For specific descriptions of these interface elements, refer to the related descriptions in the above-mentioned FIG. 1B, which will not be repeated here.

[0099] As can be seen by comparing FIG. 1B and FIG. 3B, since the background 205 in the user interface 20 shown in FIG. 1B and FIG. 3B is different, the color of the music playing window 202 shown in FIG. 1B is different from that of the music playing window 202 shown in FIG. 3B, the color of the settings item 203 shown in FIG. 1B is different from that of the settings item 203 shown in FIG. 3B, and the color of the settings bar 204 shown in FIG. 1B is different from that of the settings bar 204 shown in FIG. 3B.

[0100] It can be seen that the display method provided by the embodiments of the present application can make the color of the interface elements in the interface corresponding to the control center change along with the background of the interface.

[0101] Further, in the process of the user opening the control center through the sliding operation, the electronic device 100 can first display the background layer of the user interface 20, i.e., the background 205, and the interface elements in the foreground layer of the user interface 20 can move along with the sliding operation of the user, thereby presenting the effect that the content of the control center gradually unfolds along with the sliding operation of the user. In this case, in the process of the interface elements in the user interface 20 moving along with the sliding operation, the colors of these interface elements can change along with their positions on the user interface 20.

[0102] Exemplarily, FIG. 4 shows the user interface 20 displayed by the electronic device 100 in the process of the user opening the control center through the sliding operation.

[0103] As shown in FIG. 4, during the process that the user opens the control center by the sliding operation, the setting bar 204 and the background 205 are displayed in the user interface 20. The position of the setting bar 204 can follow the downward movement shown in FIG. 4 until the control center is completely opened, and the setting bar 204 finally stops at the position of the setting bar 204 shown in FIG. 3B. During the process that the setting bar 204 moves downward, the interface elements located above the setting bar 204, such as the setting icon 201, the music playing window 202, and the setting item 203, appear from the top of the user interface 20 and move downward until the control center is completely opened, and these interface elements finally stop at the corresponding positions in the user interface 20 shown in FIG. 3B.

[0104] As can be seen by comparing FIG. 3B and FIG. 4, the color of the setting bar 204 shown in FIG. 4 is different from the color of the setting bar 204 shown in FIG. 3B. In the internal implementation, since the color of the setting bar 204 is determined according to the color of the pixel point on the background 205 where the setting bar 204 is located, the color of the setting bar 204 shown in FIG. 4 is different from the color of the setting bar 204 shown in FIG. 3B because the positions of the setting bar 204 in the user interface 20 are different.

[0105] It can be seen that the color of the interface element in the user interface 20 changes with the position of the interface element on the background, which enhances the interactive effect of the user opening the control center and improves the visual experience of the user.

[0106] In some embodiments, the user can also manually set the color parameters of different interface elements in the interface corresponding to the control center, so that different interface elements in the same interface can have different display effects. The color parameters can include but are not limited to one or more of the following: brightness parameter, saturation parameter, contrast parameter, lightness parameter, definition parameter, sharpness parameter, exposure parameter, and hue parameter, etc. Correspondingly, the display effects can include but are not limited to one or more of the following: brightness, saturation, contrast, lightness, definition, sharpness, exposure, and hue, etc.

[0107] FIGS. 5A-5C are related user interfaces provided by the embodiments of the present application, in which the electronic device 100 sets the display effects of the interface elements based on the user operation.

[0108] FIG. 5A is a user interface 20 corresponding to the control center. In addition to the interface elements shown in FIG. 3B, the user interface 20 shown in FIG. 5A can also include an edit icon 206, which can be used to set the display effects of the interface elements contained in the user interface 20.

[0109] As for the interface elements not expanded in the user interface 20 shown in FIG. 5A, such as the music playing window 202, the setting item 203, the setting bar 204, and the like, please refer to the related content of FIG. 3B described above, which will not be repeated here.

[0110] As shown in FIG. 5A, the electronic device 100 can detect a user operation, such as a click operation, acting on the edit icon 206, and in response to the operation, the electronic device 100 can enter an editing state of the user interface 20, i.e., display the user interface 20 shown in FIG. 5B.

[0111] It can be understood that in addition to the user operation acting on the edit icon 206 shown in FIG. 5A, the electronic device 100 can also enter the editing state of the user interface 20 through other interaction modes, such as triggering the entering of the editing state of the user interface 20 through a long-press operation acting on the user interface 20, and the present application embodiments do not limit the interaction mode.

[0112] In the user interface 20 shown in FIG. 5B, compared with FIG. 5A, the upper right corner of the interface elements such as the music playing window 202, the setting item 203, and the setting bar 204 are newly added with a selection icon 207, and the electronic device 100 can detect a selection operation acting on any one of the interface elements, and select and deselect the interface element, wherein when the interface element is selected, the selection icon 207 displayed in the upper right corner of the interface element can be newly added with a selected mark, and correspondingly, when the interface element is not selected, the selection icon 207 displayed in the upper right corner of the interface element does not contain the selected mark.

[0113] Exemplarily, in the user interface 20 shown in FIG. 5B, the setting bar 204 is selected, and the music playing window 202 and the setting item 203 are not selected.

[0114] In addition, in the user interface 20 shown in FIG. 5B, adjustment option 208, determination option 209, and cancel option 210 are further included. The adjustment option 208 can include one or more display effect adjustment progress bars, which can be used to change the numerical value of the color parameter corresponding to the display effect. For example, dragging the adjustment progress bar to the right can be used to trigger an increase in the numerical value of the color parameter, and dragging the adjustment progress bar to the left can be used to trigger a decrease in the numerical value of the color parameter. For example, in the user interface 20 shown in FIG. 5B, the display effect can include brightness and saturation, and the change in the display effect can be applied to the selected interface element in the user interface 20 shown in FIG. 5B. That is, the user can change the display effect of the selected interface element in the user interface 20, i.e., the brightness and saturation of the setting bar 204, through the adjustment option 208. The determination option 209 can be used to determine the display effect of the selected interface element in the user interface 20 based on the numerical value set in the adjustment option 208, and the cancel option 210 can be used to exit the editing state of the user interface 20 and cancel the adjustment of the display effect of the selected interface element in the user interface 20 based on the numerical value set in the adjustment option 208.

[0115] For example, if the electronic device 100 adjusts the display effect of the setting bar 204, such as saturation, based on user operation through the user interface 20 shown in FIG. 5B, the electronic device 100 can display the user interface 20 shown in FIG. 5C.

[0116] As shown in FIG. 5C, in the user interface 20, the display effect of the setting bar 204 is different from the display effect of the music playing window 202 and the setting item 203.

[0117] As can be seen from FIGS. 5A-5C, in the user interface corresponding to the control center, different interface elements can have different display effects, and the display effect can be set by the user. In this way, the user can customize the visual effect of the user interface, and improve the user's freedom in setting the display effect of the interface.

[0118] It can be understood that, in addition to setting the display effect of different interface elements in the user interface by the user, the electronic device 100 can also be preconfigured with color parameters of different interface elements, so that the user interface displayed by the electronic device 100 can present a preset display effect. In addition, the electronic device 100 can also preconfigure different color parameters for different interface elements, so that different interface elements in the same interface can present different display effects, enriching the visual effect of the user interface.

[0119] It should be noted that FIGS. 1A-1B, FIG. 2, FIGS. 3A-3B, FIG. 4, FIGS. 5A-5C all take the example that the electronic device 100 is in the home page of opening the control center, in other embodiments of the present application, the electronic device 100 can also detect the operation of opening the control center when displaying other user interfaces, trigger the display of the interface corresponding to the control center, at this time, the background of the interface corresponding to the control center should be the image after the specified image is blurred, the specified image is the screenshot of the user interface displayed when the operation of opening the control center is detected, for example, if the electronic device 100 is in the home page of displaying the setting application, detects the operation of opening the control center, the specified image can be the screenshot of the home page of the setting application.

[0120] It can be understood that in other embodiments, the interface corresponding to the control center and the interface corresponding to the notification center can be the same interface, in which case the above-mentioned interface corresponding to the control center can also contain the notification messages pushed by each application. Alternatively, the interface corresponding to the control center and the interface corresponding to the notification center can also be different interfaces, and the color of the interface element located in the foreground layer in the interface corresponding to the notification center can also be determined according to the color of the background layer. The specific principle is similar to the above-mentioned principle of determining the color of the interface element corresponding to the control center, which will not be described here.

[0121] In some embodiments, the display method provided by the embodiments of the present application can also be applied to the lock screen interface.

[0122] FIG. 6 is a user interface 30 provided by an embodiment of the present application.

[0123] As shown in FIG. 6, the user interface 30 can be a lock screen interface, and the user interface 30 can include a time and date indicator 301, one or more application icons 302, a camera icon 303, and a background 304. Among them:

[0124] The time and date indicator 301 can be used to display the time and date.

[0125] The one or more application icons 302 can be used to display one or more application icons, which can be icons of applications that have pushed notification messages in the electronic device 100. That is, the user can know the applications that have pushed notification messages in the electronic device 100 through the application icons displayed in the one or more application icons 302.

[0126] The camera icon 303 can be used to trigger the opening of the camera application.

[0127] The background 304 is located below the time and date indicator 301, the one or more application icons 302, and the camera icon 303, and can be a preset background of the device or a background set by the user. The source of the background 304 is not limited in the embodiments of the present application.

[0128] In (a) of FIG. 6, the user interface 30 without the display method provided by the embodiments of the present application is shown, and in (b) of FIG. 6, the user interface 30 with the display method provided by the embodiments of the present application is shown.

[0129] In the user interface 30 shown in (a) of FIG. 6, the color of the one or more application icons 302 is not determined according to the color of the background 304, and in the user interface 30 shown in (b) of FIG. 6, the color of the one or more application icons 302 is determined according to the color of the background 304.

[0130] As can be seen by comparing (a) of FIG. 6 and (b) of FIG. 6, the visual effect of the lock screen interface with the display method provided by the embodiments of the present application is better, and the color of the overall picture is more harmonious.

[0131] In some embodiments, the display method provided by the embodiments of the present application can also be applied to a minus one screen.

[0132] FIG. 7 is a user interface 40 provided by the embodiments of the present application.

[0133] As shown in FIG. 7, the user interface 40 can be a minus one screen, and the user interface 40 can include a toolbar 401, a service card 402, a service card 403, and a background 404.

[0134] The toolbar 401 can be used to display options corresponding to one or more tools. The tools can include a scan, a payment code, a mobile phone recharge, and the like, and the user can quickly use the tools through the options displayed in the toolbar 401.

[0135] The service card 402 can be used to display the use time of each application.

[0136] The service card 403 can be used to display related information of a parking service, including a parking location, a parking time, a distance, and the like.

[0137] The background 404 is located below the toolbar 401, the service card 402, the service card 403, and other interface elements, and can be an image blurred from the background of the main page. The source of the background 404 is not limited in the embodiments of the present application.

[0138] In (a) of FIG. 7, the user interface 40 is not applied with the display method provided by the embodiments of the present application, and in (b) of FIG. 7, the user interface 40 is applied with the display method provided by the embodiments of the present application.

[0139] In the user interface 40 shown in (a) of FIG. 7, the colors of the service cards 402 and 403 are not determined according to the color of the background 404, and in the user interface 40 shown in (b) of FIG. 7, the colors of the service cards 402 and 403 are determined according to the color of the background 404.

[0140] As can be seen from the comparison between (a) of FIG. 7 and (b) of FIG. 7, the visual effect of the negative one screen is better when the display method provided by the embodiments of the present application is applied, and the colors of the overall screen are more harmonious.

[0141] It can be understood that, similar to the above description of the control center, the colors of the interface elements in the lock screen interface or the negative one screen can also change in synchronization with the change of the positions of the interface elements on the background, and different interface elements can have different display effects, which can be set by the user or preset by the system, and thus will not be described herein again. In addition, the user interfaces shown in FIGS. 1A-1B, 2, 3A-3B, 4, 5A-5C, 6, and 7 are only exemplary and do not constitute a limitation on the embodiments of the present application.

[0142] FIG. 8 is a flowchart of a display method provided by the embodiments of the present application.

[0143] As shown in FIG. 8, the display method can include the following steps.

[0144] S101. The electronic device 100 detects a first operation.

[0145] The first operation can be used to trigger the opening of a first user interface.

[0146] Exemplarily, the first user interface can be a user interface corresponding to a control center, or a user interface corresponding to a notification center, or a lock screen interface, or a negative one screen.

[0147] Exemplarily, the first operation can be a touch operation on a touch screen, a physical operation on a button, a voice instruction, or the like, and the embodiments of the present application do not limit the form of the first operation.

[0148] For example, if the first user interface is a control center or a notification center corresponding interface, the first operation can be a pull-down operation acting on the top end of the display screen. Referring to FIGS. 1A-1B, the first operation can be the operation shown in FIG. 1A, and the first user interface can be the user interface 20 shown in FIG. 1B. Alternatively, referring to FIGS. 3A-3B, the first operation can be the operation shown in FIG. 3A, and the first user interface can be the user interface 20 shown in FIG. 3B or FIG. 5C.

[0149] For another example, if the first user interface is a lock screen interface, the first operation can be an operation acting on a power key. Illustratively, the lock screen interface can be the user interface 30 shown in (b) of FIG. 6.

[0150] For another example, if the first user interface is a home screen, the first operation can be an operation of swiping right on the home screen. Illustratively, the home screen can be the user interface 40 shown in (b) of FIG. 7.

[0151] S102. The electronic device 100 displays a first user interface, which includes a first background and a first interface element located on an upper layer of the first background, a pixel value of the first interface element being determined according to a pixel value in the first background. The first interface element can be a visible interface element such as text, a picture, an icon, a button, a menu, a tab, a text box, a dialog box, a status bar, a navigation bar, a Widget, etc. The first interface element can include one or more interface elements.

[0152] In the first user interface, the first interface element can be located in a foreground layer, and the first background can be located in a background layer.

[0153] Illustratively, referring to FIG. 1B, the first interface element can include the music playing window 202, the settings item 203, the settings bar 204, etc., and the first background can be the background 205.

[0154] If the first user interface is a control center or a notification center corresponding interface, the background of the interface, i.e., the first background, can display an image obtained by performing blur processing on the picture content of the interface displayed before the interface.

[0155] In detail, if the first user interface is a control center or a notification center corresponding interface, before the electronic device 100 detects the first operation, the electronic device 100 can display a second user interface, and in this case, the first background can be an image obtained by performing blur processing on a first image, the first image being the same as the display content of the second user interface.

[0156] Illustratively, referring to FIGS. 1A-1B, if the first user interface is the user interface 20 shown in FIG. 1B, the second user interface can be the user interface 10 shown in FIG. 1A.

[0157] If the first user interface is a lock screen interface, the first background can be a preset lock screen background of the electronic device 100, or a lock screen background set by a user.

[0158] If the first user interface is a home screen, the background of the interface, i.e., the first background, can be an image obtained by performing blur processing on the background of the home screen.

[0159] In detail, if the first user interface is a home screen, the electronic device 100 can display a third user interface before detecting the first operation, and the first background can be an image obtained by performing blur processing on a second image, the second image being the same as the display content of the background of the third user interface. For example, the third user interface can be used to display the home screen of the electronic device 100.

[0160] For example, the pixel value of the first interface element can be determined according to the pixel value of the first region in the first background, where the first region can include the region where the first interface element is located.

[0161] In a specific example, the first region is the region where the first interface element is located, that is, the pixel value of the first interface element is determined according to the pixel value of the pixel point in the first background at the location of the first interface element.

[0162] Specifically, the pixel value of the first interface element is a pixel value obtained by adjusting the pixel value of the first region in the first background according to the first parameter, and the first parameter includes one or more of the following: a brightness parameter, a saturation parameter, a contrast parameter, a lightness parameter, a definition parameter, a sharpness parameter, an exposure parameter, and a hue parameter.

[0163] For example, if the first parameter is a brightness parameter, the first parameter can be used to set the brightness of the first interface element.

[0164] For example, the first parameter can be a preset parameter of the electronic device 100, or a parameter set by a user, or a parameter transmitted by an application corresponding to the first user interface, and the source of the first parameter is not limited in the embodiments of the present application.

[0165] For example, if the first parameter is a parameter set by a user, the electronic device 100 can provide an entry for setting the first parameter, so that the user can customize the display effect of the first user interface. For example, referring to FIGS. 5A-5C, the electronic device 100 can provide the adjustment option 208 shown in FIG. 5B in the user interface 20, and the electronic device 100 can detect an operation acting on the adjustment option 208 to set the color parameter for adjusting the display effect of the setting bar 204.

[0166] In an internal implementation, the electronic device 100 can first obtain a color parameter for setting the display effect of the first interface element, and then pass the color parameter to an entry processing function of the blending mechanism. The entry processing function can encapsulate the color parameter as a whole, and pass the encapsulated color parameter as an object downstream. After that, the blending mechanism can switch to a specified mode, for example, switching BlendMode to highlight mode. In the specified mode, the factory class in the blending mechanism can create a new processing class, for example, a highlight processing class. The processing class can create a specific implementation class corresponding to the calculation formula, for example, a highlight specific implementation class. The calculation formula is a formula required to set the display effect of the first interface element. The highlight specific implementation class can be used to implement the assembly of the calculation formula, for example, applying the color parameter to the calculation formula to generate a complete calculation formula. Finally, the electronic device 100 uses the complete calculation formula and the pixel value of the pixel point in the first background at the position of the first interface element to calculate the pixel value of each pixel point in the first interface element, thereby obtaining the color of the first interface element.

[0167] For the calculation formula and the use of the calculation formula, please refer to the related content of FIG. 10 below. Here, it is not expanded.

[0168] In a specific implementation, the electronic device 100 can traverse each pixel point in the first interface element, calculate the pixel value of the pixel point, and thereby determine the color of the first interface element.

[0169] FIG. 9 exemplarily shows a method flow diagram for the electronic device 100 to determine the color of the interface element, taking the first interface element in the first user interface as an example.

[0170] S201. The electronic device 100 traverses each pixel point in the first interface element.

[0171] The electronic device 100 can execute steps S201-S203 before displaying the first user interface after detecting the first operation. That is, after the electronic device 100 detects the operation for triggering the opening of the first user interface, the electronic device 100 can determine the pixel value of the interface element in the first user interface, and then display the first user interface.

[0172] S202. For the first pixel point traversed, the electronic device 100 determines the pixel value of the first pixel point based on the preset pixel value of the first pixel point, the pixel value of the second pixel point in the first background, and the first parameter. The positions of the first pixel point and the second pixel point on the first user interface are the same.

[0173] Exemplarily, referring to FIG. 2, the first pixel point can be pixel point Q1, the second pixel point can be pixel point Q2, and the preset pixel value of the first pixel point can be the preset pixel value of pixel point Q1.

[0174] The preset pixel value of the first pixel point refers to the initial color of the first interface element preset by the electronic device 100, that is, each pixel point in the first interface element has a preset pixel value.

[0175] In this way, when the electronic device 100 is about to display the first interface element in the first user interface, the final color of the first interface element when the first user interface is displayed is determined according to the initial color of the first interface element and the background color in the first user interface, so that the color of the first interface element is associated with the initial color of the first interface element and the color of the first background, and the color of the finally displayed first interface element is avoided to be too abrupt.

[0176] For a detailed description of the first parameter, refer to the related content in the above step S102, which will not be repeated here.

[0177] For a detailed process in which the electronic device 100 determines the pixel value of the first pixel point, refer to FIG. 10 below, which will not be repeated here.

[0178] S203. The electronic device 100 obtains the pixel value of each pixel point in the first interface element.

[0179] The electronic device 100 can obtain the pixel value of each pixel point in the first interface element by traversing each pixel point in the first interface element and calculating the pixel value of the pixel point, so as to determine the color of the first interface element.

[0180] It can be understood that the first interface element can refer to any interface element in the first user interface, and for any interface element in the first user interface that needs to adjust the color based on the background, the color of the interface element can be calculated according to the processes of steps S201-S203.

[0181] In some embodiments, different color parameters can be used when determining the colors of different interface elements in the first user interface. In this way, the display effect of the first user interface can be enriched.

[0182] For example, the first user interface can further include a second interface element located on the upper layer of the first background. The pixel value of the second interface element can be a pixel value obtained by adjusting the pixel value of a second region in the first background according to a second parameter, where the second region can include a region where the second interface element is located.

[0183] The second parameter can include one or more of a brightness parameter, a saturation parameter, a contrast parameter, a lightness parameter, a sharpness parameter, a exposure parameter, and a hue parameter, and the first parameter and the second parameter can be different.

[0184] In one specific example, the second region can be a region where the second interface element is located, that is, the pixel value of the second interface element is determined according to the pixel value of a pixel point in the first background at the location of the second interface element.

[0185] FIG. 10 illustrates a detailed method flow diagram of determining a pixel value of a pixel point by the electronic device 100 according to an embodiment of the present application.

[0186] S301. The electronic device 100 adjusts the RGB value of the second pixel point based on a first parameter to obtain a first RGB value.

[0187] A pixel value of a pixel point is represented by 32 bits, in which the red, green, and blue channels (red, green, and blue) and the transparency channel (alpha) each occupy 8 bits. Among them, the red, green, and blue channels in a pixel value constitute an RGB value, and the transparency channel constitutes an Alpha value.

[0188] Among them, the second pixel point is a pixel point in the first background, the pixel value of the second pixel point is composed of an RGB value and an Alpha value, and the first parameter is a color parameter for setting the display effect of the first interface element.

[0189] In a specific implementation, the electronic device 100 can input the RGB value of the second pixel point into the first equation to obtain the first RGB value, where the coefficient of the first equation is the brightness parameter in the first parameter.

[0190] The first equation can be a one-variable n-th order equation. For example, the first equation can be represented by the following formula 1:

[0191] dst1.rgb = f(dst.rgb) Formula 1

[0192] Among them, dst1.rgb represents the first RGB value, dst.rgb represents the RGB value of the second pixel point, and f(dst.rgb) is the first equation.

[0193] For example, f(dst.rgb) = rate*dst.rgb + degree, where rate and degree are brightness parameters. For another example, f(dst.rgb) = quad*dst.rgb 2+ quad * dst.rgb + degree, where cubic, quad, rate, and degree are luminance parameters. 3 + quad * dst.rgb + degree, where cubic, quad, rate, and degree are luminance parameters. 2 + quad * dst.rgb + degree, where cubic, quad, rate, and degree are luminance parameters.

[0194] If the luminance parameter is greater than 0, the luminance adjustment is specifically to increase the luminance, and if the luminance parameter is less than 0, the luminance adjustment is specifically to decrease the luminance.

[0195] For example, the luminance parameter can be a parameter preset by the electronic device 100, or can be a parameter set by a user, or can be a parameter transmitted by an application corresponding to the first user interface.

[0196] S302. The electronic device 100 adjusts the saturation of the first RGB value based on the first parameter to obtain a second RGB value.

[0197] The electronic device 100 can adjust the saturation of the first RGB value based on the saturation parameter in the first parameter to obtain the second RGB value.

[0198] Specifically, in a case where the saturation parameter is greater than a first threshold, the difference between the three-channel values in the first RGB value can be increased to obtain the second RGB value, and at this time, the saturation of the second RGB value is higher than the saturation of the first RGB value; in a case where the saturation parameter is less than the first threshold, the difference between the three-channel values in the first RGB value can be reduced to obtain the second RGB value, and at this time, the saturation of the second RGB value is less than the saturation of the first RGB value.

[0199] The first threshold can be a parameter preset by the electronic device 100, for example, the first threshold = 1.

[0200] The first RGB value includes three values, one value corresponding to one channel, specifically: a value corresponding to a red channel, a value corresponding to a green channel, and a value corresponding to a blue channel.

[0201] In a possible implementation, increasing the difference between the three-channel values in the first RGB value can mean increasing the maximum value of the three values and reducing the values other than the maximum value; reducing the difference between the three-channel values in the first RGB value can mean increasing the minimum value of the three values and reducing the values other than the minimum value.

[0202] Exemplarily, the saturation parameter can be a preset parameter of the electronic device 100, or a parameter set by a user, or a parameter passed in by an application corresponding to the first user interface.

[0203] In a specific implementation, the electronic device 100 can first calculate the delta coefficient by using the first RGB value and the saturation parameter, and then determine the second RGB value based on the delta coefficient.

[0204] The delta coefficient can be determined by the following formula 2: delta = dot(dst1.rgb, base) * (1-sat) + dst1.rgb * sat - dst1.rgb formula 2

[0205] In the formula 2, dot() represents dot product operation, base is a three-dimensional vector composed of three constants, which can be a preset parameter, a parameter set by a user, or a parameter passed in by an application corresponding to the first user interface, sat represents the saturation parameter, and dst1.rgb represents the first RGB value.

[0206] Further, the electronic device 100 can determine the second RGB value by using the following formula 3:

[0207] In the formula 3, dst1.rgb represents the first RGB value, dst2.rgb represents the second RGB value, posRgb represents the positive RGB adjustment coefficient, and negRgb represents the negative RGB adjustment coefficient.

[0208] As can be seen from the formula 3, if delta>0, the positive color adjustment can be performed on dst1.rgb, so as to obtain dst2.rgb, and if delta<0, the negative color adjustment can be performed on dst1.rgb, so as to obtain dst2.rgb.

[0209] It should be noted that in the formula 2 and the formula 3, the delta coefficient can be a three-dimensional vector, and when determining the second RGB value, the electronic device 100 can independently calculate the value of each channel of the second RGB value according to the size of each value contained in the delta coefficient.

[0210] For example, assuming that delta=(a, b, c), when calculating the second RGB value, the electronic device 100 can determine whether the value of the red channel in the second RGB value is obtained by performing positive color adjustment on the value of the red channel in the first RGB value or negative color adjustment on the value of the red channel in the first RGB value by judging whether a is greater than 0, wherein if a>0, the value of the red channel in the second RGB value is obtained by performing positive color adjustment on the value of the red channel in the first RGB value, and if a<0, the value of the red channel in the second RGB value is obtained by performing negative color adjustment on the value of the red channel in the first RGB value. Similarly, the electronic device 100 can determine whether the value of the green channel in the second RGB value is obtained by performing positive color adjustment on the value of the green channel in the first RGB value or negative color adjustment on the value of the green channel in the first RGB value by judging whether b is greater than 0, and the electronic device 100 can determine whether the value of the blue channel in the second RGB value is obtained by performing positive color adjustment on the value of the blue channel in the first RGB value or negative color adjustment on the value of the blue channel in the first RGB value by judging whether c is greater than 0.

[0211] For example, the electronic device 100 can implement the above formula 3 by using the mix() and step() functions.

[0212] S303. The electronic device 100 performs normalization processing on the second RGB value.

[0213] Specifically, the electronic device 100 can truncate the values contained in the second RGB value to the range of 0 to 1, so that the larger values contained in the second RGB value can be adjusted to smaller values, and the computational amount of the electronic device 100 can be reduced.

[0214] For example, the electronic device 100 can implement the normalization processing on the second RGB value by using the clamp() function.

[0215] It can be understood that step S303 is an optional step, that is, after obtaining the second RGB value by step S302, the electronic device 100 can directly execute step S304 to calculate the third RGB value by using the second RGB value which is not subjected to normalization processing. In addition, in addition to performing normalization processing after obtaining the second RGB value, the electronic device 100 can also perform normalization processing at other steps, for example, the electronic device 100 can perform normalization processing between step S301 and step S302, that is, perform normalization processing on the first RGB value obtained in step S301, and the execution time of the normalization processing is not limited in the embodiments of the present application.

[0216] S304. The electronic device 100 mixes the second RGB value and the preset RGB value of the first pixel point to obtain a third RGB value.

[0217] The first pixel point is a pixel point contained in the first interface element. The electronic device 100 contains a preset pixel value of the first pixel point, and the preset pixel value of the first pixel point includes a preset RGB value and a preset Alpha value.

[0218] The electronic device 100 can mix the second RGB value and the preset RGB value of the first pixel point according to a preset ratio to obtain a third RGB value.

[0219] The preset ratio can be a parameter preset by the electronic device 100, a parameter set by the user, or a parameter transmitted by an application corresponding to the first user interface.

[0220] For example, the electronic device 100 can determine the third RGB value according to the following formula 4: dst3.rgb = dst2.rgb * x + src.rgb * (1-x) Formula 4

[0221] Wherein, dst3.rgb represents the third RGB value, dst2.rgb represents the second RGB value, src.rgb represents the preset RGB value of the first pixel point, and x represents the preset ratio.

[0222] For example, the electronic device 100 can implement the mixing of the second RGB value and the preset RGB value of the first pixel point through the mix() function.

[0223] It can be understood that if the electronic device 100 performs step S303 before performing step S304, the second RGB value mentioned in step S304 is the second RGB value after performing the normalization processing. If the electronic device 100 does not perform step S303 before performing step S304, the second RGB value mentioned in step S304 is the second RGB value without performing the normalization processing.

[0224] S305. The electronic device 100 mixes the RGB value of the second pixel point and the third RGB value according to the preset Alpha value of the first pixel point as a mixing ratio to obtain a fourth RGB value.

[0225] Similar to the description in step S304, the electronic device 100 can determine the fourth RGB value according to the following formula 5: dst4.rgb = dst.rgb * y + dst3.rgb * (1-y) Formula 5

[0226] Wherein, dst4.rgb represents the fourth RGB value, dst.rgb represents the RGB value of the second pixel point, dst3.rgb represents the third RGB value, and y represents the preset Alpha value of the first pixel point.

[0227] Exemplarily, the electronic device 100 can implement the mixing of the RGB value of the second pixel point and the third RGB value through a mix() function.

[0228] S306. The electronic device 100 determines the fourth RGB value as the RGB value in the pixel value of the first pixel point.

[0229] In addition, the pixel value of the first pixel point further includes a first Alpha value, which can be the Alpha value of the second pixel point or a preset value.

[0230] When the first Alpha value is the Alpha value of the second pixel point, if the transparency of the first background is 0, the Alpha value of the second pixel point is 1, that is, the first Alpha value is 1. When the first Alpha value is the preset value, the preset value can be a parameter preset by the electronic device 100, for example, the preset value is 1.

[0231] In this way, through steps S301-S306, the electronic device 100 can calculate the pixel value of the first pixel point. The first pixel point can refer to any pixel point in the first interface element, and the electronic device 100 can determine the pixel value of any pixel point in the first interface element according to the above steps S301-S306 when the electronic device 100 traverses any pixel point in the first interface element, so as to finally determine the color of the first interface element and realize the display of the first interface element in the first user interface.

[0232] Exemplarily, in the internal implementation, after the electronic device 100 obtains the instruction to display the first user interface, the electronic device 100 can create an object for carrying a color parameter (for example, a first parameter), such as a filter, and then start drawing a view. In the process of drawing the first interface element, the electronic device 100 can set the color parameter based on the created object, and generate a related calculation formula (for example, the above formulas 1-5) required for calculating the pixel value of the first pixel point, and then set the object carrying the color parameter to the drawing canvas, and the object sets the related calculation formula to the brush, so as to realize the drawing of the first interface element.

[0233] It can be seen that the display method provided by the embodiment of the present application can introduce various color parameters, flexibly set the display effect of each interface element contained in the user interface, and improve the visual effect of the user interface.

[0234] As can be seen from the above steps S301-S306, the pixel value of the first pixel point is obtained by sequentially performing brightness processing, saturation processing, pixel value mixing processing and the like on the pixel value of the second pixel point. The pixel processing manner mentioned in the above steps S301-S306 is only an example, for example, the electronic device 100 can first perform saturation processing on the pixel value of the second pixel point, and then perform brightness processing, or the electronic device 100 can additionally add contrast processing on the pixel value of the second pixel point. It should be understood that if the pixel value of the first pixel point is obtained by adjusting the pixel value of the second pixel point by the first parameter, it should be within the protection scope of the embodiments of the present application.

[0235] FIG. 11 is a schematic diagram of a hardware structure of the electronic device 100 provided in the embodiments of the present application.

[0236] The electronic device 100 can be a mobile phone, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, a wearable device, an in-vehicle device, a smart home device, and / or a smart city device, and the specific type of the electronic device is not specially limited in the embodiments of the present application.

[0237] The electronic device 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyro sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0238] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than illustrated, or combine certain components, or split certain components, or different arrangement of components. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0239] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units can be independent devices, or can be integrated in one or more processors.

[0240] The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions.

[0241] The processor 110 can also include memory that stores instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The cache memory can hold instructions and data that the processor 110 has recently used or is likely to use again. If the processor 110 needs to use that instruction or data again, it can be retrieved directly from the cache memory. This avoids repeated accesses to the main memory, reducing the latency of the processor 110 and improving the efficiency of the system.

[0242] In some embodiments, the processor 110 can be configured to determine the pixel values of the first interface element contained in the first user interface based on the pixel values of the first background in the first user interface, to improve the visual effect of the user interface. For details of the detailed calculation process of the processor 110 on the pixel values of the first interface element, please refer to the above method flow, which will not be repeated here.

[0243] The charging management module 140 is configured to receive charging input from a charger.

[0244] The power management module 141 is configured to connect the battery 142 and the charging management module 140. The power management module 141 receives input from the battery 142 and / or the charging management module 140 to power the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160.

[0245] The wireless communication function of the electronic device 100 can be realized by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.

[0246] The antenna 1 and the antenna 2 are configured to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization of the antennas. For example, the antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0247] The mobile communication module 150 can provide a solution for wireless communication including 2G / 3G / 4G / 5G, etc. applied to the electronic device 100. The mobile communication module 150 can include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves by the antenna 1, and perform filtering, amplification, etc. on the received electromagnetic waves, and transfer the same to the modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor, and radiate the same as electromagnetic waves through the antenna 1. In some embodiments, at least part of the functional modules of the mobile communication module 150 can be disposed in the processor 110. In some embodiments, at least part of the functional modules of the mobile communication module 150 can be disposed in the same device as at least part of the modules of the processor 110.

[0248] The modem processor can include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is configured to demodulate a received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low-frequency baseband signal processed by the baseband processor is transmitted to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the microphone 170B, etc.), or displays an image or a video through the display screen 194. In some embodiments, the modem processor can be a separate device. In other embodiments, the modem processor can be independent of the processor 110, and disposed in the same device as the mobile communication module 150 or other functional modules.

[0249] The wireless communication module 160 can provide a solution for wireless communication, including wireless local area networks (WLAN) (such as a wireless fidelity (Wi-Fi) network), Bluetooth (BT), a global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, and the like, which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, demodulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0250] In some embodiments, the antenna 1 and the mobile communication module 150 of the electronic device 100 are coupled, and the antenna 2 and the wireless communication module 160 are coupled, so that the electronic device 100 can communicate with a network and other devices through wireless communication technology.

[0251] The electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor, and the like. The GPU is a microprocessor for image processing, which is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information.

[0252] The display screen 194 is used to display images, videos, and the like. In some embodiments, the electronic device can include one or N display screens 194, N being a positive integer greater than 1.

[0253] In some embodiments, the display screen 194 can be used to display a first user interface including a first background and a first interface element located on the upper layer of the first background. The first user interface can be a control center corresponding interface, a notification center corresponding interface, a lock screen interface, or a negative one screen, for example. See the related content of FIGS. 1A-1B, 2, 3A-3B, 4, 5A-5C, and 7 for details.

[0254] The electronic device 100 can implement a photographing function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor, and the like.

[0255] ISP is used to process the data feedback by the camera 193. The ISP can also optimize the noise, brightness, etc. of the image through algorithm.

[0256] The camera 193 is used to capture still images or videos. In some embodiments, the electronic device 100 can include 1 or N cameras 193, N being a positive integer greater than 1.

[0257] The digital signal processor is used to process digital signals, in addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy, etc.

[0258] The video codec is used to compress or decompress digital video. The electronic device 100 can support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as: moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0259] The NPU is a neural-network (NN) calculation processor, which can quickly process input information by borrowing the structure of biological neural network, such as borrowing the transmission mode between human brain neurons, and can also constantly self-learn. Through the NPU, the electronic device 100 can realize intelligent cognition and other applications, such as: image recognition, face recognition, voice recognition, text understanding, etc.

[0260] The internal memory 121 can include one or more random access memories (RAMs) and one or more non-volatile memories (NVMs).

[0261] The random access memory can be directly read and written by the processor 110, and can be used to store executable programs (such as machine instructions) of the operating system or other programs running, and can also be used to store user and application data, etc.

[0262] The non-volatile memory can also store executable programs and store user and application data, etc., which can be loaded into the random access memory in advance for the processor 110 to directly read and write.

[0263] In some embodiments, the internal memory 121 can be configured to store a calculation formula related to a pixel value of a pixel, a color parameter, and a color adjustment algorithm. The color adjustment algorithm can be configured to calculate the pixel value of the pixel according to the calculation formula related to the pixel value and the color parameter.

[0264] The external memory interface 120 can be configured to connect an external nonvolatile memory, so as to expand the storage capacity of the electronic device 100. The external nonvolatile memory communicates with the processor 110 through the external memory interface 120, so as to realize a data storage function. For example, files such as music and videos are stored in the external nonvolatile memory.

[0265] The electronic device 100 can realize an audio function through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, an application processor, and the like. For example, music playing, recording, and the like.

[0266] The touch sensor 180K is also referred to as a "touch device". The touch sensor 180K can be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also referred to as a "touch panel". The touch sensor 180K is configured to detect a touch operation acting on or near the touch sensor 180K. The touch sensor 180K can transmit the detected touch operation to the application processor to determine a touch event type. A visual output related to the touch operation can be provided through the display screen 194.

[0267] In some embodiments, the electronic device 100 can detect a touch operation of a user acting on the touch sensor 180K, and trigger opening of a specified user interface, for example, a first user interface.

[0268] The electronic device can be a portable terminal device, such as a mobile phone, a tablet computer, a wearable device, and the like, which is equipped with an iOS, an Android, a Microsoft, or another operating system. The electronic device can also be a non-portable terminal device, such as a laptop computer having a touch-sensitive surface or a touch panel, a desktop computer having a touch-sensitive surface or a touch panel, and the like. The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. Embodiments of the present application take the Android system with a layered architecture as an example to exemplarily illustrate the software structure of the electronic device 100.

[0269] FIG. 12 is a software structure block diagram of the electronic device 100 provided by embodiments of the present application.

[0270] A layered architecture divides software into a number of layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.

[0271] The application layer can include a series of application packages.

[0272] As shown in FIG. 12, the application package can include browser, camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, SystemUI, and the like.

[0273] Among them, SystemUI is a system-level application responsible for managing and presenting important interface elements of the user interface. Specifically, SystemUI can be used to provide interface elements and interaction methods that can interact with the user, such as the status bar, the navigation bar, and the like.

[0274] In the embodiments of the present application, SystemUI can be used to manage the drawing of the first user interface.

[0275] The application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications of the application layer. The application framework layer includes some pre-defined functions.

[0276] As shown in FIG. 12, the application framework layer can include window manager, content provider, view system, phone manager, resource manager, notification manager, color processing module, and the like.

[0277] The color processing module can be used to provide the ability to manage color parameters, wherein the color parameters are parameters required by the electronic device 100 when determining the pixel value of the first interface element based on the pixel value of the first background, and the color parameters can be used to adjust the display effect of the first interface element, which can include one or more of the following: brightness, saturation, contrast, lightness, sharpness, sharpness, exposure, and hue, etc.

[0278] Exemplarily, the color processing module can be a hardware accelerated UI (HWUI). In a specific implementation, the HWUI can use a filter mechanism to configure color adjustment algorithms to the brush drawn by the interface element that needs to be adjusted in color.

[0279] The window manager is used to manage windows programs. The window manager can acquire the display screen size, determine whether there is a status bar, lock the screen, and capture the screen, etc.

[0280] The content provider is used to store and acquire data, and make the data accessible to the application program. The data can include video, image, audio, dialed and received phone, browsing history and bookmark, phone book, etc.

[0281] The view system includes visual controls, such as a control for displaying text, a control for displaying pictures, etc. The view system can be used to build an application program. A display interface can be composed of one or more views. For example, a display interface including a short message notification icon can include a view for displaying text and a view for displaying pictures.

[0282] The phone manager is used to provide the communication function of the electronic device 100. For example, the management of the call state (including connection, hang-up, etc.).

[0283] The resource manager provides various resources for the application program, such as localized strings, icons, pictures, layout files, video files, etc.

[0284] The notification manager makes the application program display notification information in the status bar, which can be used to convey a type of message that can automatically disappear after a short stay without user interaction. For example, the notification manager is used to inform the completion of downloading, message reminders, etc. The notification manager can also be a notification in the form of a chart or a scroll bar text appearing in the top status bar of the system, such as a notification of an application program running in the background, and can also be a notification in the form of a dialogue window appearing on the screen. For example, prompting text information in the status bar, issuing a prompt sound, the electronic device vibrating, the indicator light flashing, etc.

[0285] The Android runtime includes the core library and the virtual machine. The Android runtime is responsible for the scheduling and management of the Android system.

[0286] The core library contains two parts: one part is the function function called by the java language, and the other part is the core library of Android.

[0287] The application program layer and the application program framework layer run in the virtual machine. The virtual machine executes the java files of the application program layer and the application program framework layer into binary files. The virtual machine is used to perform the management of the object life cycle, the management of the stack, the management of the thread, the management of the security and the exception, and the garbage collection, etc.

[0288] The system library can include a plurality of functional modules. For example, a surface manager, media libraries, a three-dimensional graphics processing library (e.g., OpenGL ES), a two-dimensional graphics engine (e.g., SGL), etc.

[0289] The surface manager is used to manage the display subsystem and provides a plurality of applications with a fusion of 2D and 3D layers.

[0290] The media libraries support a plurality of commonly used audio, video format playback and recording, and static image files, etc. The media libraries can support a plurality of audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0291] The three-dimensional graphics processing library is used to implement three-dimensional graphics drawing, image rendering, synthesis, and layer processing, etc.

[0292] The two-dimensional graphics engine is a drawing engine for 2D drawing.

[0293] In the embodiments of the present application, the two-dimensional graphics engine can be used to apply the color parameter to the color adjustment algorithm and generate related rendering instructions for calculating the color of the first interface element.

[0294] Exemplarily, the two-dimensional graphics engine can be Skia. In a specific implementation, Skia can utilize the color adjustment algorithm and the color parameter to process the pixel value of the first pixel point in the first interface element and the pixel value of the second pixel point in the first background, so as to obtain the pixel value of the first pixel point displayed on the first user interface.

[0295] The kernel layer is a layer between hardware and software. The kernel layer at least includes a display driver, a camera driver, an audio driver, and a sensor driver.

[0296] It should be understood that each step in the above method embodiments can be completed by integrated logic circuits of hardware in the processor or instructions in the form of software. The method steps disclosed in the embodiments of the present application can be directly embodied as hardware processor execution completion, or executed by a combination of hardware and software modules in the processor.

[0297] The present application also provides an electronic device, which can include a memory, a processor, and a computer program stored on the memory, and the processor executes the computer program to implement the method performed by the electronic device in any one of the above embodiments.

[0298] The application further provides a chip system, comprising a processing circuit and an interface circuit, the interface circuit is configured to receive computer instructions and transmit the computer instructions to the processing circuit, and the processing circuit is configured to execute the computer instructions to implement the method performed by the electronic device in any one of the above embodiments.

[0299] The application further provides a chip system, comprising at least one processor, which is configured to implement the method performed by the electronic device in any one of the above embodiments. In a possible design, the chip system further comprises a memory, which is configured to store program instructions and data, and the memory is located in or out of the processor.

[0300] The chip system can be composed of a chip, or can include the chip and other discrete devices.

[0301] Optionally, the processor in the chip system can be one or more. The processor can be implemented by hardware or software. When implemented by hardware, the processor can be a logic circuit, an integrated circuit, or the like. When implemented by software, the processor can be a general-purpose processor, which is configured to read software code stored in the memory to implement the processor.

[0302] Optionally, the memory in the chip system can also be one or more. The memory can be integrated with the processor, or can be arranged separately from the processor, and the embodiments of the application do not limit the memory. For example, the memory can be a non-transient processor, for example, a read-only memory (ROM), which can be integrated on the same chip as the processor, or can be arranged on different chips respectively, and the embodiments of the application do not limit the type of the memory and the arrangement manner of the memory and the processor.

[0303] For example, the chip system can be a field programmable gate array (FPGA), can be an application specific integrated circuit (ASIC), can be a system on chip (SoC), can be a central processor unit (CPU), can be a network processor (NP), can be a digital signal processor (DSP), can be a micro controller unit (MCU), can be a programmable logic device (PLD), or can be another integrated chip.

[0304] The application further provides a computer readable storage medium, which stores a computer program. The computer program is executed by a processor to implement the method performed by the electronic device in any one of the above embodiments.

[0305] The application further provides a computer program product, which includes a computer program. The computer program is executed by a processor to implement the method performed by the electronic device in any one of the above embodiments.

[0306] The embodiments of the application can be combined in any manner to achieve different technical effects.

[0307] In the above embodiments, all or part of the embodiments can be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments can be implemented 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, all or part of the processes or functions described in the embodiments are generated. 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 through wired (such as coaxial cable, optical fiber, digital subscriber line) or wireless (such as infrared, wireless, microwave, etc.) mode. The computer readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. integrated with one or more available media. The available media can be magnetic media (such as floppy disk, hard disk, magnetic tape), optical media (such as DVD), or semiconductor media (such as solid state disk (SSD)) and the like.

[0308] Those of ordinary skill in the art can understand that all or part of the processes in the above embodiments can be implemented by a computer program to instruct the relevant hardware to complete. The program can be stored in a computer readable storage medium, and when executed, the program can include the processes of the above method embodiments. The storage medium includes ROM or random access memory (RAM), magnetic disk or optical disk and other media that can store program codes.

[0309] In the description of the embodiments of the present application, unless otherwise specified, " / " means the meaning of or, for example, A / B can mean A or B; the text "and / or" is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B, which can mean: A exists alone, A and B exist together, and B exists alone, in addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0310] The terms "first", "second" are only for the purpose of description, and cannot be understood as implying or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include one or more of the features, in the description of the embodiments of the present application, unless otherwise specified, the meaning of "multiple" is two or more than two.

[0311] In summary, the above only describes the embodiments of the technical scheme of the present application, and is not used to limit the protection scope of the present application. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present application shall be included in the protection scope of the present application.

Claims

A display method characterized by comprising: The method is applied to an electronic device, and the method comprises: detecting a first operation; displaying a first user interface, the first user interface comprising a first background and a first interface element on an upper layer of the first background, a pixel value of the first interface element being determined according to a pixel value in the first background. The method of claim 1, wherein The pixel value of the first interface element is determined according to the pixel value of a first region in the first background, and the first region comprises a region where the first interface element is located. The method according to claim 2, characterized in that The pixel value of the first interface element is a pixel value obtained by adjusting the pixel value of the first region in the first background according to a first parameter, and the first parameter comprises one or more of the following: a brightness parameter, a saturation parameter, a contrast parameter, a lightness parameter, a definition parameter, a sharpness parameter, an exposure parameter, and a hue parameter. The method according to claim 3, characterized in that The first interface element comprises a first pixel point, and the first background comprises a second pixel point, and the first pixel point and the second pixel point have the same position on the first user interface. After detecting the first operation and before displaying the first user interface, the method further comprises: determining the pixel value of the first pixel point based on a preset pixel value of the first pixel point, a pixel value of the second pixel point, and the first parameter. The method according to claim 4, characterized in that Determining the pixel value of the first pixel point based on the preset pixel value of the first pixel point, the pixel value of the second pixel point, and the first parameter specifically comprises: adjusting the RGB value of the second pixel point based on the first parameter to obtain a first RGB value; adjusting the first RGB value based on the saturation parameter to obtain a second RGB value; mixing the second RGB value and the RGB value in the preset pixel value of the first pixel point to obtain a third RGB value; mixing the RGB value of the second pixel point and the third RGB value as a mixing ratio of the Alpha value in the preset pixel value of the first pixel point to obtain a fourth RGB value; determining the fourth RGB value as the RGB value in the pixel value of the first pixel point. The method according to claim 5, characterized in that The pixel value of the first pixel point further comprises a first Alpha value, and the first Alpha value is the Alpha value of the second pixel point or a preset value. The method according to claim 5 or 6, characterized in that After adjusting the first RGB value based on the saturation parameter to obtain a second RGB value, and before mixing the second RGB value and the preset RGB value to obtain a third RGB value, the method further comprises: normalizing the second RGB value. The method according to any one of claims 5-7, characterized in that Adjusting the RGB value of the second pixel point based on the first parameter to obtain a first RGB value specifically comprises: inputting the RGB value of the second pixel point into a first equation to obtain the first RGB value, and a coefficient of the first equation is a brightness parameter in the first parameter. The method of claim 8, wherein The brightness parameter is a parameter preset by the electronic device, or the brightness parameter is a parameter set by a user, or the brightness parameter is a parameter transmitted by an application corresponding to the first user interface. The method according to any one of claims 5-9, characterized in that According to the first parameter, saturation adjustment is performed on the first RGB value to obtain a second RGB value, specifically including: In a case where a saturation parameter in the first parameter is greater than a first threshold, a difference between three channel values in the first RGB value is increased to obtain a second RGB value; In a case where the saturation parameter in the first parameter is less than the first threshold, the difference between the three channel values in the first RGB value is reduced to obtain a second RGB value. The method of claim 10, wherein The first RGB value includes three values, one value corresponding to one channel, The difference between the three channel values in the first RGB value is increased to obtain a second RGB value, specifically including: The maximum value in the three values is increased, and the values other than the maximum value in the three values are reduced to obtain a second RGB value; The difference between the three channel values in the first RGB value is reduced to obtain a second RGB value, specifically including: The minimum value in the three values is increased, and the values other than the minimum value in the three values are reduced to obtain a second RGB value. The method according to claim 10 or 11, characterized in that The saturation parameter is a parameter preset by the electronic device, or the saturation parameter is a parameter set by a user, or the saturation parameter is a parameter transmitted by an application corresponding to the first user interface. The method according to claim 3, characterized in that The first user interface further includes a second interface element located on the upper layer of the first background, A pixel value of the second interface element is a pixel value obtained by adjusting a pixel value of a second region in the first background according to a second parameter, the second region including a region where the second interface element is located; wherein the first parameter and the second parameter are different. The method according to any one of claims 1-13, characterized in that The first user interface is an interface corresponding to a control center, or an interface corresponding to a notification center, or a lock screen, or a negative one screen. The method according to any one of claims 1 to 14, characterized in that The first user interface is an interface corresponding to a control center or a notification center, and before the first operation is detected, the method further includes: Displaying a second user interface; Wherein the first background is an image after a first image is blurred, and the first image is the same as display content of the second user interface. The method according to any one of claims 1 to 15, characterized in that The first user interface is a lock screen, and the first background is a lock screen background preset by the electronic device or a lock screen background set by a user. The method according to any one of claims 1 to 16, characterized in that The first user interface is a negative one screen, and before the first operation is detected, the method further includes: Displaying a third user interface; Wherein the first background is an image after a second image is blurred, and the second image is the same as display content of a background of the third user interface. An electronic device, characterized by comprising: Including: A memory, a processor, and a computer program stored on the memory, the processor executing the computer program to implement the method of any one of claims 1-17. A computer-readable storage medium, characterized by A computer program is stored thereon, and the computer program is executed by a processor to implement the method of any one of claims 1-17. A computer program product, characterized in that The computer program product includes a computer program, and the computer program is executed by a processor to implement the method of any one of claims 1-17.

Images