Interface processing method, electronic equipment and related device

Abstract

The invention provides an interface processing method, electronic equipment and a related device, and relates to the technical field of terminals. According to the method, a first color corresponding to a first interface is obtained, and the first color is determined based on the average color of content contained in the first interface. According to an element label corresponding to the first UI element to be displayed, brightness adjustment of the first amplitude is carried out on the first color to obtain a second color, and the element label corresponds to the first amplitude. And displaying the first UI element on the upper layer of the first interface, wherein the color of the first UI element is the second color. Therefore, the colors of the UI elements in the interface can be determined based on the averaged first color of the first interface, so that the problem of relatively high overhead caused by fuzzy item-by-item elements is avoided. Meanwhile, the colors of the related contents in the interface are determined based on the averaged first color, and the immersion of the UI can be ensured to a certain extent.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of terminal technology, and in particular to an interface processing method, electronic equipment, and related devices. Background Art

[0002] In electronic devices, it is usually possible to display additional content on one interface. For example, another interface can be displayed on top of another interface, such as a control center interface or a notification center interface. For another example, a baseboard can be displayed in a local area of an interface, and the baseboard carries UI elements.

[0003] To ensure readability of content displayed on the upper layer of the interface, the lower layer is usually blurred, and then UI elements, baseboards, and other content are displayed on the blurred interface. However, this blurring usually requires pixel-by-pixel processing, which leads to high power consumption. Summary of the Invention

[0004] The embodiments of the present application provide an interface processing method, an electronic device, and related devices to reduce the power consumption of fuzzy processing.

[0005] In a first aspect, an embodiment of the present application provides an interface processing method, comprising:

[0006] Get the first color corresponding to the first interface, wherein the first color is determined based on the average color of the content contained in the first interface. It can be understood that the first interface contains multiple contents (such as text, controls, images, etc.), each of which corresponds to its own color (which may contain multiple colors). For example, the colors contained in these contents can be averaged to obtain the average color introduced here. Alternatively, in one implementation, the first interface can be screenshoted to obtain a static image of the first interface, which contains multiple pixels. The color obtained by averaging the colors of the multiple pixels in the static image is the average color introduced here.

[0007] According to an element label corresponding to a first UI element to be displayed, adjusting the brightness of the first color by a first amplitude to obtain a second color, the element label corresponding to the first amplitude;

[0008] A first UI element is displayed on the first interface, and the color of the first UI element is the second color.

[0009] In this implementation, the colors of UI elements and the background within the interface can be determined based on the averaged first color of the first interface. Furthermore, in full-screen blur scenarios, the first image in the first color can be directly displayed on the first interface, thus avoiding the high overhead associated with pixel-by-pixel blurring. Furthermore, determining the colors of relevant content within the interface based on the averaged first color ensures a more immersive UI experience.

[0010] In a possible implementation, displaying the first UI element on the first interface includes:

[0011] Displaying a first baseplate on the first interface, the color of the first baseplate is a third color, the third color is obtained by adjusting the brightness of the first color by a second amplitude, and the second amplitude corresponds to the first baseplate;

[0012] A first UI element is displayed on the first base panel.

[0013] It is understood that in order to ensure a certain degree of distinction between the color of the base plate and the first image serving as the background, the present application can adjust the brightness of the first color to obtain a third color, and then display the first base plate according to the third color. In other words, the color of each pixel in the first base plate is the third color. This can avoid the first base plate and the first image being indistinguishable, while ensuring that the color effects of the first base plate and the first image are similar, thereby enhancing the immersiveness of the UI.

[0014] In a possible implementation, displaying the first UI element on the first interface includes:

[0015] Displaying a first image on the first interface, wherein the color of the first image is the first color and the size of the first image is the same as the size of the first interface;

[0016] A first UI element is displayed on the first image.

[0017] In this implementation, the baseboard and UI elements are displayed on top of the first image, eliminating the need to blur the first interface and reducing power consumption. Furthermore, because the first color itself accurately reflects the overall color of the first interface, displaying the baseboard and UI elements on top of the first image can also ensure a more immersive UI experience.

[0018] In a possible implementation, the first base plate is located on an upper layer of the first image.

[0019] In one possible implementation, the method further includes:

[0020] Get the color type of the first interface. The color type includes a first type and a second type. The first type is used to indicate that the first interface contains colors of a single color system, and the second type is used to indicate that the first interface contains colors of multiple color systems.

[0021] In one possible implementation, obtaining the color type of the first interface includes:

[0022] The first interface is intercepted to obtain a second image. The second image described here is also the static image obtained after intercepting the first interface as described above.

[0023] classifying the plurality of pixels according to the plurality of preset color categories and the colors of the plurality of pixels in the second image to obtain a plurality of classification results, the classification results including the number of pixels included in each of the plurality of preset color categories;

[0024] Determining, based on the multiple classification results, multiple target colors contained in the second image and information about the proportions of the multiple target colors in the second image, where the target colors are colors corresponding to preset color categories;

[0025] In the case that there is a target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface is determined to be the first type; and in the case that there is no target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface is determined to be the second type.

[0026] In this implementation, the color type of the first interface can be accurately and effectively determined, that is, it can be determined whether the first interface is a single-color first type or a multi-color second type, providing a data basis for subsequent fuzzy processing.

[0027] In a possible implementation, after obtaining the first color corresponding to the first interface, the method further includes:

[0028] If the first color satisfies the first condition, the first color is updated, and the updated first color becomes the target color with the largest proportion information, or the updated first color becomes the main color in the first interface;

[0029] Among them, the first condition includes: the saturation of the first color is lower than the first threshold and the multiple target colors include a target color with a saturation greater than the second threshold, and / or the difference between the hue of the first color and the hue of at least one target color is greater than the third threshold.

[0030] In this implementation, after determining the first color, it is determined whether the first color meets the first condition. If it is determined that the first condition is met, it means that the first color cannot accurately represent or reflect the overall color of the first interface. Therefore, the first color can be updated so that the selected first color can effectively reflect the overall color of the first interface, thereby ensuring the immersiveness of subsequent UI effects.

[0031] In a possible implementation, the color type of the first interface is the second type, where the second type is used to indicate that the first interface includes colors of multiple color systems.

[0032] When the color type of the first interface is the second type, it means that the first interface contains color effects of multiple color systems. In this case, the first color obtained by averaging the colors contained in the first interface is more likely to have the abnormal conditions described above (such as low saturation or large hue differences). For example, when the color type of the first interface is the second type, the color adjustment process described above can be performed to increase the necessity of color adjustment.

[0033] In a possible implementation, after obtaining the first color corresponding to the first interface, the method further includes:

[0034] If the saturation of the first color is greater than or equal to the fourth threshold, the saturation of the first color is reduced to obtain an updated first color.

[0035] In this implementation, it is further determined whether the saturation of the first color is too high. If it is determined that the saturation of the first color is too high, the saturation of the first color can be adjusted to be lowered to improve the performance of the subsequent UI.

[0036] In one possible implementation, the first area in the first interface corresponds to an area in the first interface that is greater than or equal to a second ratio; wherein the first area is the area corresponding to the first base plate, or the first area is the area corresponding to the first image. For example, the first area can also be understood as an area to which a blur effect is applied, but in the technical solution of this application, this blur effect is replaced with a solid color effect. Therefore, the first area is also the area used to display the first base plate, or can also be understood as the area used to display the first image.

[0037] In this implementation, when the first region's area ratio is greater than or equal to the second ratio, it means that a large area of the current interface needs to be displayed in the first color. If the saturation of the first color is relatively high, the overall interface performance will be poor. For example, the color adjustment steps described above can be performed only when the first region's area ratio is greater than or equal to the second ratio, thereby increasing the necessity of performing the color adjustment steps.

[0038] In a possible implementation, before obtaining the first color corresponding to the first interface, the method further includes:

[0039] Get the display mode, which is day mode or night mode;

[0040] After obtaining the first color corresponding to the first interface, the method further includes:

[0041] If the display mode is the night mode, the brightness of the first color is reduced to obtain an updated first color.

[0042] In one possible implementation, when the first interface is a preset interface and the first area is a full-screen area (that is, the first area is an area corresponding to the first image, where the first image corresponds to the full-screen display), the method further includes:

[0043] Displaying a preset image on the first interface, where the preset image is an image obtained by blurring the background image of the preset interface;

[0044] A first UI element and / or a first baseplate is displayed on the preset image.

[0045] In this implementation, because the blur effect of the preset image is pre-generated and stored in the form of an image, there is no need to perform pixel-by-pixel blur processing in this implementation, which can save power consumption. At the same time, because the preset image with a blur effect is displayed under the UI element and the bottom layer, the immersiveness of the UI effect can be further enhanced.

[0046] In a possible implementation, the preset interface is a lock screen interface or a desktop interface.

[0047] In a possible implementation, the element tag includes at least one of the following: text, text type, control, and control type.

[0048] In one possible implementation, obtaining the first color corresponding to the first interface includes:

[0049] Adjusting the average color of the content included in the first interface according to the adjustment strategies corresponding to the plurality of preset display scenes to output the candidate colors corresponding to the plurality of preset display scenes;

[0050] A first color is determined from a plurality of selectable colors according to a target display scene corresponding to a first UI element to be displayed, where the target display scene is one of a plurality of preset display scenes.

[0051] In this implementation, the first color can be adaptively determined for different display scenarios to enhance the immersiveness of the UI effect.

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

[0053] In a third aspect, an embodiment of the present application provides a computer-readable storage medium, in which a computer program or instruction is stored. When the computer program or instruction is run on a computer, the computer executes the method described in the first aspect or any possible implementation of the first aspect.

[0054] In a fourth aspect, an embodiment of the present application provides a computer program product comprising a computer program, which, when the computer program is run on a computer, enables the computer to execute the method described in the first aspect or any possible implementation of the first aspect.

[0055] In a fifth aspect, the present application provides a chip or chip system, comprising at least one processor and a communication interface, wherein the communication interface and the at least one processor are interconnected via a line, and the at least one processor is configured to execute a computer program or instruction to perform the method described in the first aspect or any possible implementation of the first aspect. The communication interface in the chip may be an input / output interface, a pin, or a circuit.

[0056] In one possible implementation, the chip or chip system described above in this application further includes at least one memory, in which instructions are stored. The memory may be a storage unit within the chip, such as a register, a cache, etc., or a storage unit of the chip (e.g., a read-only memory, a random access memory, etc.).

[0057] It should be understood that the second to fifth aspects of the present application correspond to the technical solutions of the first aspect of the present application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation methods are similar and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] Figure 1 A schematic diagram of the lock screen interface provided in an embodiment of the present application;

[0059] Figure 2 A schematic diagram of the interface for blur processing provided in an embodiment of the present application;

[0060] Figure 3 A schematic diagram of the fuzzy processing process provided in an embodiment of the present application;

[0061] Figure 4 Schematic diagram of the interface processing method provided in this embodiment Figure 1 ;

[0062] Figure 5 A schematic diagram illustrating an implementation of determining a color type according to an embodiment of the present application;

[0063] Figure 6 Schematic diagram of the interface processing method provided in this embodiment of the application Figure 2 ;

[0064] Figure 7 A processing diagram of the interface processing method provided in an embodiment of the present application;

[0065] Figure 8 Schematic diagram of the implementation of color adjustment provided in the embodiment of this application Figure 1 ;

[0066] Figure 9 A schematic diagram showing the effect of the interface processing method provided in an embodiment of the present application;

[0067] Figure 10 Schematic diagram of the implementation of color adjustment provided in the embodiment of this application Figure 2 ;

[0068] Figure 11 A schematic diagram of the implementation of pre-storing blurred images provided in an embodiment of the present application. DETAILED DESCRIPTION

[0069] For ease of understanding, the following first introduces the relevant terms and concepts involved in the embodiments of the present application:

[0070] 1. UI Elements

[0071] The user interface (UI) involved in the embodiments of the present application may include an image and a UI element located on top of the image, wherein the UI element is located on top of the image and may block part of the image.

[0072] In some embodiments, the UI element being in an upper layer of an image can be understood as: the layer where the UI element is located is in an upper layer of the layer where the image is located. Before displaying the UI, the electronic device can perform layer synthesis processing on the layers included in the UI. For example, the electronic device can perform layer synthesis on the layer where the UI element is located and the layer where the image is located, wherein the electronic device can place the layer where the UI element is located in an upper layer of the layer where the image is located. After the electronic device performs the layer synthesis processing, the UI can be obtained. The electronic device can send the UI for display to display the UI.

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

[0074] In some embodiments, a UI element can be understood as content that a user can see on a UI other than images.

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

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

[0077] For example, you can refer to Figure 1 Understand UI elements, Figure 1 A schematic diagram of the lock screen interface provided in an embodiment of the present application.

[0078] Figure 1 The figure shows the lock screen interface of the electronic device, refer to Figure 1It is clear that the lock screen contents, such as the time (e.g., "10:94"), date (e.g., "July 12"), day of the week (e.g., "Wednesday"), status bar (located in the upper right corner as shown in the figure), notification text (e.g., "Xiao Ming," "Want to have dinner tonight?"), and music player controls (e.g., the play button, previous and next song controls), can all be understood as the UI elements described herein. The images underlying these UI elements (e.g., the lock screen wallpaper, which is not directly shown in the figure, or it can be understood that the figure shows a solid-color lock screen wallpaper) are the background images described above.

[0079] 2. Bottom plate

[0080] The baseplate is a graphic that sits above the image and below the UI elements. It supports UI elements and helps users quickly identify them.

[0081] Take the lock screen interface as an example. The lock screen interface can display the lock screen wallpaper, time, and notification messages. The lock screen wallpaper can be regarded as an image, and the time and notification messages can be regarded as UI elements on the upper layer of the image. Figure 1 , the time "10:49" text is directly on the upper layer of the image, and there is no other graphics between the lower layer of the time and the upper layer of the image, that is, there is no base plate in the lower layer of the time.

[0082] Furthermore, the notification message is carried in a notification frame, which is located below the notification message and above the image. The notification frame can be regarded as the base of the notification message.

[0083] In some embodiments, notification messages may be displayed in the form of a card, a stack of cards, or a capsule. Figure 1 In the example, the notification message includes: music card 101, text message card 102 and incoming call card 103. Among them, the content in the card can be regarded as a UI element, and the rounded rectangle located under the UI element can be regarded as the base of the UI element.

[0084] For example, using caller ID card 103 as an example, the text "Little Red, Missed Call | Ringing for 3 seconds, 9:40" and the phone app icon in the text message card can be considered UI elements, that is, the content shown in 103_b in the figure can be understood as a UI element. In addition, the rounded rectangle carrying the text can be considered the base of the UI element, that is, the rounded rectangle shown in 103_a in the figure can be understood as the base of the caller ID card 103.

[0085] 3. Pixel value

[0086] A pixel value is the numerical value of each pixel in an image, representing the color or grayscale information represented by that pixel. An image can be viewed as a grid of countless pixels, each with a corresponding pixel value that controls its color or brightness.

[0087] In digital image processing, a pixel value is usually a numerical value that represents the color or grayscale of that pixel. Depending on the type of image, the meaning of the pixel value will vary:

[0088] For grayscale images, each pixel value represents the brightness or intensity of that pixel. Typically, grayscale values range from 0 to 255, where 0 represents black, 255 represents white, and other values represent different gray levels (for example, 128 represents medium gray).

[0089] For color images, the value of each pixel is composed of three components, typically the intensities of red (R), green (G), and blue (B). This representation is called the RGB model, and pixel values are typically represented as a triplet (R, G, B). Each component also ranges from 0 to 255, where 0 represents the absence of that color and 255 represents the maximum intensity of that color.

[0090] RGB is a common color model that represents color using three channels (red, green, and blue). Each color channel can have a value ranging from 0 to 255, so each pixel has a three-dimensional pixel value in the RGB model, represented as (R, G, B). Alternatively, pixel values can be expressed using other color models to represent the color of each pixel in a color image. This application does not restrict the choice of color model.

[0091] 4. Immersion

[0092] The sense of immersion can be reflected in the color fusion of the background image and the foreground UI elements. For example, when the color fusion of the background image and the foreground UI elements is good, the user feels that the background image and the foreground UI elements are integrated into one, and the sense of immersion is strong.

[0093] 5. Primary Color

[0094] In UI design, a primary color is typically the most prominent color within an interface, representing the overall visual style. A primary color isn't just the color of visual elements within a UI; it's also the focal point of user perception when interacting with the interface. It enhances interface recognition and helps users quickly perceive the hierarchy of information.

[0095] A primary color can be defined as the dominant, most representative color in a user interface design. It's typically used for key elements of an interface, such as titles, buttons, important reminders, and navigation bars. The choice of a primary color directly impacts the interface's visual navigation and user experience.

[0096] Determining the primary color is usually a comprehensive process. In one implementation, for example, the selection can be based on the following factors:

[0097] Color saturation: Color saturation refers to the purity or intensity of a color. Generally, highly saturated colors appear more vivid and eye-catching, while less saturated colors appear softer and more understated. In UIs, primary colors are often highly saturated to ensure they occupy a prominent position and attract user attention.

[0098] Color Proportion: The proportion of the primary color in the overall UI design is also crucial. Generally speaking, the primary color will occupy a large proportion of the interface, usually appearing in the background color, primary buttons, main titles, and other locations. For example, buttons and important operation areas will use the primary color to ensure that users can clearly identify these important areas visually.

[0099] When determining the primary color, a weighted approach can be used, for example, to comprehensively evaluate factors such as color saturation, brightness, and proportion. Specifically, the relative saturation and brightness of different colors, as well as the area they occupy in the UI design, can be used to weight and determine which color should be used as the primary color.

[0100] For example, if the background of an interface is black and there is a bright red color in the center, then the primary color of the interface may be this bright red color. This application does not limit the specific strategy for selecting the primary color, nor does it limit the factors considered in the primary color selection process. These can be set according to actual needs.

[0101] 6. Electronic devices

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

[0103] In order to better understand the technical solution of this application, the relevant technologies involved in this application are further introduced in detail below.

[0104] At present, in the UI of electronic devices, there are many interfaces that are expressed by fuzzy means. For example, when it is necessary to display other content (herein referred to as the first content) on the upper layer of an interface (herein referred to as the first interface), the first interface can usually be blurred to improve the readability of the first content. It is understandable that if the first interface is not specially processed, the images and UI elements in the first interface will overlap with the UI elements of the first content, which will result in poor readability of the first content. The readability introduced here can be understood as the difficulty for users to identify or extract UI elements on the UI.

[0105] In one implementation, for example, another interface can be displayed on top of the first interface. That is, the first content described above can be another interface, such as the control center interface or the notification center interface. In this case, the entire first interface needs to be blurred. Alternatively, a baseboard can be displayed on top of a local area of the first interface, and the baseboard can carry UI elements. In this case, the local area of the first interface needs to be blurred.

[0106] The following combination Figure 2 Some possible scenarios of blur processing are explained. Figure 2 A schematic diagram of the interface for fuzzy processing provided in an embodiment of the present application.

[0107] Figure 2 (a) in the figure illustrates a lock screen interface of an electronic device. For example, the lock screen interface can be understood as a first interface, which can then trigger the display of first content on an upper layer of the lock screen interface.

[0108] In one implementation, for example, the electronic device may trigger the display of a message on the upper layer of the lock screen interface in response to a user operation. Figure 2 The control center interface shown in (b) of FIG. The user operation may be, for example, a swipe down from the upper right corner of the lock screen interface. This embodiment does not limit the specific implementation of the user operation that triggers the display of the control center.

[0109] Reference Figure 2 As shown in (b), when the control center interface is displayed above the lock screen, the underlying lock screen is blurred to ensure readability of the control center interface. The blurred effect of the lock screen shown in the figure is only an example; the specific blurring effect can be determined based on actual needs.

[0110] and in Figure 2 In the case shown in (b), the interface of the control center may include, for example, the base panel (the rounded rectangle shown in the figure) and UI elements (such as texts such as song 1, singer A, and controls such as play button, previous song, next song, etc.) of the music player 201, and may also include base panels and UI elements corresponding to multiple functional controls, such as the WiFi control 202, Bluetooth control 203, do not disturb control, flashlight control, etc. shown in the figure, which will not be repeated here.

[0111] In another implementation, for example, the electronic device may trigger the display of a message on the upper layer of the lock screen interface in response to a user operation. Figure 2 The interface of the notification center shown in (c) in FIG. The user operation may be, for example, a swipe down from the upper left corner of the lock screen interface. This embodiment does not limit the specific implementation of the user operation that triggers the display of the notification center.

[0112] Reference Figure 2 In (c), it can be determined that when the Notification Center interface is displayed on top of the lock screen, the underlying lock screen is blurred to ensure readability of the Notification Center interface. The blurred effect of the lock screen shown in the figure is only an example; the specific blurring effect can be determined based on actual needs.

[0113] and in Figure 2 In the case shown in (c), the interface of the notification center may, for example, include the base plate (the rounded rectangle shown in the figure) and UI elements (such as texts such as Song 1, Singer A, and controls such as Play, Previous Song, Next Song, etc.) of the music player 204, and the interface of the notification center may also include base plates and UI elements corresponding to multiple notification cards, and the notification cards may include the SMS card 205 and the incoming call card 206 shown in the figure.

[0114] The above two implementations both directly display another interface on top of the lock screen interface. Therefore, the above two implementations directly blur the entire lock screen interface. The following will introduce the implementation of blurring a local area of the lock screen interface.

[0115] In another implementation, the electronic device may display the lock screen interface on top of the lock screen interface. Figure 2At least one notification card and / or at least one operation card shown in (d) in the figure. For example, the electronic device may display a notification card on the lock screen interface when there is a message that needs to be notified (such as receiving a new message, or there are certain messages that need to prompt the user). Alternatively, the electronic device may also display an operation card for a specific application (such as a music player application or a video player application) on the lock screen interface when the specific application is in the foreground state, so that the user can perform quick operations on the lock screen interface.

[0116] In this case, the notification card and the operation card are displayed directly on top of the lock screen interface, and the notification card and the operation card only occupy a partial area of the lock screen interface. In this case, it is necessary to blur the partial area corresponding to the notification card and the operation card in the first interface, while displaying the rest of the area normally, to achieve a reasonable display of the lock screen interface and ensure the readability of the notification card and the operation card.

[0117] Reference Figure 2 It can be determined from (d) that, for example, the music player operation card 207, the text message notification card 208, and the incoming call notification card 209 can be displayed on the upper layer of the lock screen interface. Among them, the operation card 207, the notification card 208, and the notification card 209 each correspond to their own base plate and UI elements. The specific implementation can be understood with reference to the diagram and will not be repeated here. It can also be determined with reference to the diagram that the local area corresponding to the location of the operation card 207, the notification card 208, and the notification card 209 in the first interface is blurred, while the rest of the area except the area where these cards are located is displayed normally.

[0118] The above combination Figure 2 Several scenarios for blurring have been described, but it is understood that blurring is not limited to these scenarios. For example, users can trigger the display of the Control Center and Notification Center interfaces described above from any interface. Furthermore, when opening a folder on the desktop, blurring is also required. This application does not limit the specific scenarios for blurring, and blurring can be arbitrarily configured based on actual needs.

[0119] Based on the above introduction, the following briefly introduces the process of fuzzy processing. In one implementation, the fuzzy processing process includes:

[0120] 1. Determine the area to be blurred in the first interface.

[0121] When a complete interface needs to be displayed on the upper layer of the first interface, it can be understood that the entire area of the first interface is the area to be blurred. Figure 2 (b) and Figure 2In the case shown in (c), it can be understood that the entire area corresponding to the first interface needs to be blurred.

[0122] Alternatively, when the upper layer of the first interface needs to display a card that only occupies a part of the area, it can be understood that the area in the first interface where the card needs to be displayed is the area to be blurred. Figure 2 In the case shown in (d), it can be understood that the area covered by the operation card 207, the notification card 208 and the notification card 209 in the upper layer of the first interface is the area that needs to be blurred.

[0123] 2. Perform blurring processing on the area to be blurred in the first interface to obtain pixel values corresponding to each pixel point in the area.

[0124] The specific implementation of the blurring process can be set according to actual needs and is not limited in this embodiment. It is understood that after blurring the area to be blurred in the first image, the blurred pixel values corresponding to each pixel in the area can be obtained. The blurred pixel values determine the colors of each pixel in the area, and the colors of these pixels constitute the blurred effect of the area.

[0125] You can refer to Figure 3 Understand fuzzy processing. Figure 3 A schematic diagram of the fuzzy processing process provided in an embodiment of the present application.

[0126] For example, in the first interface, the area 301 is determined to be the area to be blurred, and then the area 301 to be blurred can be firstly intercepted in the first interface to obtain Figure 3 The partial image corresponding to the area 301 in the first interface shown in 302.

[0127] Then, the partial image 302 of the first interface corresponding to the area to be blurred 301 is blurred, thereby obtaining Figure 3 The blurred image corresponding to the area 301 indicated by 303 in FIG. 3 , wherein the image 303 can be understood as an image composed of the blurred pixel values of each pixel point in the blurred area.

[0128] 3. Adjust the brightness of the bottom plate (if any) and UI elements to be displayed on the upper layer of the first interface pixel by pixel, and then display the bottom plate (if any) and UI elements.

[0129] In this embodiment, in order to enhance the contrast between the UI elements and the base plate (if any) displayed on the upper layer of the first interface and the first interface, the brightness of each UI element and the base plate (if any) located in the blurred area can also be adjusted to improve the distinction between the content displayed on the upper layer of the first interface and the first interface.

[0130] At the same time, referring to the above diagram, it can be confirmed that in order to enhance the immersiveness of the UI effect, the blur effect of the first interface can usually be seen through the base plate and UI elements. For example, the brightness of the upper UI elements and the base plate can be adjusted based on the pixel values of each pixel in the blurred area. Since each pixel in the blurred area corresponds to its own pixel value, real-time calculations need to be performed pixel by pixel for the base plate and UI elements to ensure the final UI effect.

[0131] In one implementation, for a card to be displayed, assuming that it includes a base plate and UI elements, the processing process for the card to be displayed may include, for example: first, determining the pixel values of the pixel points corresponding to the position of the base plate in the blurred area, and then performing pixel-by-pixel brightness adjustment (for example, increasing the brightness) based on these pixel values, so as to determine the pixel values of each pixel point corresponding to the base plate.

[0132] Reference Figure 3 For example, the brightness of the image 303 after blurring corresponding to the region 301 can be enhanced pixel by pixel, thereby obtaining Figure 3 The display effect of the base plate shown in 304 is shown in FIG. 304 , where different grayscales are used to represent different colors in the base plate.

[0133] Secondly, in the base plate, the pixel values corresponding to the position of the UI element are determined, and then the brightness is adjusted pixel by pixel based on these pixel values (for example, dimming the brightness) to determine the pixel values of each pixel point corresponding to the UI element.

[0134] For example, refer to Figure 3 For example, based on the pixel points included in the bottom plate shown in 304, the pixel values corresponding to the UI element "Song 1" can be dimmed to obtain Figure 3 The display effect of the UI element "Song 1" shown in 305 in the card. Afterwards, similar processing is performed on each UI element in the card to determine the pixel value corresponding to each UI element in the card. For example, Figure 3 306 in the figure shows the display effects corresponding to the various UI elements on the upper layer of the base plate.

[0135] After determining the pixel values corresponding to the base of the card and the pixel values corresponding to the UI elements of the card, the card can be displayed based on these pixel values, thereby realizing the display of the card on the upper layer of the first interface. The final display effect of the card can be referred to Figure 3 The situation indicated by 306 is understood.

[0136] Based on the processing process described above, it can be determined that the current blurring process requires pixel-by-pixel processing of the blurred area and the UI elements and baseboard (if any) located in the blurred area. Moreover, this blurring process is performed in real time. For example, when a card is slid, the position of the card in the interface will also change, and the blur effect of the corresponding card bottom layer will also need to be adaptively changed to adapt to the interface content corresponding to the card bottom layer. Therefore, the current blurring process has the problem of high power consumption.

[0137] On this basis, the present application provides an interface processing method, which can effectively reduce the power consumption caused by blurring while ensuring a certain degree of immersiveness of the UI effect. The interface processing method provided by the present application is described below with reference to specific embodiments.

[0138] In the technical solution of the present application, different processing methods may correspond to different color types of the content contained in the first interface. Therefore, the implementation of determining the color type of the first interface will be first introduced in conjunction with specific embodiments. Figure 4 Schematic diagram of the interface processing method provided in this embodiment Figure 1 .

[0139] like Figure 4 As shown, the method includes:

[0140] 1. Obtain a second image corresponding to the first interface.

[0141] In this embodiment, in the process of determining the color type of the first interface, it is necessary to analyze the colors in the first interface. Therefore, for example, an image corresponding to the first interface can be first obtained to facilitate subsequent color analysis-related processing based on the image. In one implementation, for example, the first interface can be captured to obtain a second image. The capture described here can also be understood as taking a screenshot of the first interface, and the obtained second image is the current static image of the first interface.

[0142] 2. Count the colors corresponding to the multiple pixels in the second interface to obtain statistical results.

[0143] After acquiring the second image, the colors corresponding to the plurality of pixels in the second interface can be determined. For example, the pixel value of the pixel can be used to represent the color of the pixel. After the colors of the pixels in the second image are counted, the statistical results can be obtained, for example, by referring to Figure 4 Understand statistical results.

[0144] like Figure 4 As shown, the statistical results may include the number of pixels corresponding to each color. For example, for color 1, the number of corresponding pixels is 20, which means that there are 20 pixels in the second image whose color is color 1. For another example, for color 2, the number of corresponding pixels is 40, which means that there are 40 pixels in the second image whose color is color 2. The understanding of the number of pixels for other colors is similar and will not be repeated here.

[0145] 3. Classify multiple pixels according to the statistical results to determine the classification results.

[0146] In this embodiment, when pixel values are used to represent colors, it is understood that as long as the pixel values of two pixels are not exactly the same, the two pixels will be counted into different color sets. However, there may be colors in the image that are close but not exactly the same. For example, the color 1 introduced above may be dark red, for example, the corresponding pixel value is (150, 0, 0), and the color 2 introduced above may be bright red, for example, the corresponding pixel value is (255, 0, 0). In this case, based on the pixel values, color 1 and color 2 are two different colors, but both colors can be understood as red as a whole.

[0147] Therefore, in the present application, multiple preset color categories can be pre-set, and then multiple pixel points can be further classified based on the statistical results and the multiple preset color categories to obtain classification results. For example, the preset color categories can include the following categories: red category, orange category, yellow category, green category, cyan category, blue category, and purple category. Alternatively, the color classification method corresponding to the preset color category can also be arbitrarily set according to actual needs. For example, it can only include red category, green category, and blue category. In short, each preset color category corresponds to a color, and the present application does not limit the implementation of the preset color category.

[0148] In one implementation, for example, the correspondence between various pixel values and preset color categories can be pre-set. Then, based on the number of pixel points corresponding to each pixel value contained in the statistical results, the number of pixel points corresponding to multiple preset color categories can be determined to obtain classification results for multiple pixel points.

[0149] For example, assuming that based on the preset correspondence relationship, it can be determined that the pixel value corresponding to color 1 corresponds to color category a, and the pixel value corresponding to color 2 corresponds to color category a, then it can be determined that the 20 pixels corresponding to color 1 and the 40 pixels corresponding to color 2 all belong to the pixels corresponding to color category a. And there may be pixels of other colors that also belong to the pixels corresponding to color category a. After that, the number of multiple pixels corresponding to color category a is counted to determine the number of pixels corresponding to color category a. By performing similar processing on each preset color category, the number of pixels corresponding to each of the multiple preset color categories can be determined, thereby obtaining the classification results introduced above.

[0150] In another implementation, for example, clustering processing can also be performed based on the pixel values contained in the statistical results, and then the preset color category corresponding to the clustering result is determined based on the pixel values contained in the clustering result, so as to determine which preset color category each pixel value in the statistical result belongs to, and thus determine the number of pixel points corresponding to multiple preset color categories, so as to obtain a classification result for multiple pixel points.

[0151] Among them, when determining the preset color category corresponding to the clustering result based on the pixel values contained in the clustering result, for example, a similarity calculation can be performed based on the pixel value of the central cluster point in the clustering result and the pixel value corresponding to the preset color category to determine which specific preset color category the clustering result corresponds to.

[0152] For example, assuming that after clustering the pixel values contained in the statistical results, the pixel values corresponding to color 1 and the pixel values corresponding to color 2 are divided into the same cluster set, and then, for example, based on the pixel value of the central cluster point in this cluster set, the preset color category corresponding to the cluster set is determined to be color category a. Then, it can be determined that the 20 pixels corresponding to color 1 and the 40 pixels corresponding to color 2 are all pixels corresponding to color category a. And there may be pixels of other colors that also belong to color category a. Then, the number of multiple pixels corresponding to color category a is counted to determine the number of pixels corresponding to color category a. By performing similar processing on each preset color category, the number of pixels corresponding to each of the multiple preset color categories can be determined, thereby obtaining the classification result introduced above.

[0153] 4. Determine the color type of the first interface based on the classification results.

[0154] After obtaining the classification results, the color type of the first interface can be determined based on the classification results. In this embodiment, the classification results include the number of pixels corresponding to each of the multiple preset color categories, and it can be understood that each preset color category actually corresponds to a color. Therefore, for example, the multiple target colors included in the second image can be first determined based on the classification results.

[0155] In one implementation, the color corresponding to the preset color category whose number of pixels is not zero can be determined in the classification results as the target color contained in the second image. Alternatively, the color corresponding to the preset color category whose number of pixels is greater than or equal to a first number can be determined in the classification results as the target color contained in the second image, where the first number can be, for example, 10 or 20. The first number can be understood as a threshold for determining whether the color corresponding to the preset color category is used as the target color. This embodiment does not limit the selection of the first number.

[0156] The following describes the former implementation of determining the target color as an example. For example, it is assumed that the classification results are as shown in Table 1 below:

[0157] Table 1

[0158] Preset color categories Number of pixels Color category a (red) 300 Color category b (orange) 400 Color category c (yellow) 0 Color category d (green) 0 Color category e (cyan) 0 Color category f (blue) 0 Color category g (purple) 300

[0159] Based on the above example, we can determine that the number of pixels in color category a, color category b, and color category g is non-zero. Therefore, for example, we can determine that the colors corresponding to these three color categories are the target colors contained in the second image. In other words, we can determine that the target colors contained in the second image include: red, orange, and purple. In other words, the second image primarily contains colors from these three color families.

[0160] In addition, this embodiment can also determine the percentage information of each target color in the second image. In one implementation, the target color in this embodiment corresponds to a preset color category. Then, for example, the number of pixels corresponding to the target color can be determined in the classification results. Then, the ratio of the number of pixels corresponding to the target color to the total number of pixels in the second image can be calculated to determine the percentage information of the target color in the second image.

[0161] For example, in the example described in Table 1 above, it can be determined that the number of pixels corresponding to the target color red is 300 (because the target color red is the color corresponding to color category a, and the number of pixels of color category a is 300), and assuming that the total number of pixels in the second image is 1000, then it can be determined that the proportion of the target color red in the second image is 30%. For another example, it can be determined that the number of pixels corresponding to the target color orange is 400, then it can be determined that the proportion of the target color orange in the second image is 40%. For another example, it can be determined that the number of pixels corresponding to the target color purple is 300, then it can be determined that the proportion of the target color purple in the second image is 30%.

[0162] Afterwards, the color type of the first interface can be determined based on the proportion information corresponding to each target color.

[0163] In one implementation, when there is a target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface can be determined to be the first type. The first type can also be understood as a single color type. It can be understood that when there is a target color whose proportion information is greater than or equal to the first proportion, it means that a large area of the current first interface is the target color, so the color type of the first interface can be determined to be a single color type, that is, the first interface as a whole presents a single color.

[0164] Furthermore, in the absence of a target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface is determined to be the second type, where the second type can also be understood as a multi-color type. It can be understood that when there is no target color whose proportion information is greater than or equal to the first proportion, it means that the proportions of the various target colors in the current first interface are in a relatively balanced state, and therefore the color type of the first interface can be determined to be the multi-color type, that is, the first interface as a whole presents multiple colors.

[0165] The first ratio may be, for example, 80% or 90%. This embodiment does not limit the specific setting of the first ratio, and the first ratio may be selected according to actual needs.

[0166] For example, you can combine Figure 5 Let's understand the implementation of determining color type with a specific example. Figure 5 A schematic diagram of an implementation of determining color type provided in an embodiment of the present application.

[0167] like Figure 5As shown in 501, assuming that the multiple target colors contained in the second image are red, green, yellow and blue, and the proportions of each target color are shown in the figure. Then it can be determined that the proportion of green, 85%, is greater than the first proportion (assuming it is 80%), so it can be determined that the color type of the first interface is the first type. In the current example, it can be understood that the first interface as a whole is green.

[0168] As well as Figure 5 As shown in 502, assuming that the multiple target colors contained in the second image are red, yellow, blue and purple, and the proportion of each target color is shown in the figure. Then it can be determined that there is currently no target color whose proportion is greater than or equal to the first proportion (assuming it is 80%), so it can be determined that the color type of the first interface is the second type. In the current example, it can be understood that the color distribution of red, yellow, blue and purple in the first interface is relatively uniform, that is, these colors are relatively obvious and observable colors in the first interface.

[0169] Based on the implementation method introduced above, the color type of the first interface can be accurately and effectively determined, that is, it can be determined whether the first interface is the first type with a single color or the second type with multiple colors, thereby providing a data basis for subsequent fuzzy processing.

[0170] Based on the above introduction, the following describes the fuzzy processing in this application in combination with specific embodiments. Figure 6 Schematic diagram of the interface processing method provided in this embodiment of the application Figure 2 .

[0171] In one implementation, the obfuscation process may include: Figure 6 The following steps are shown:

[0172] S601: Take an average color based on the colors of the content included in the first interface to determine a first color.

[0173] In the technical solution of the present application, the first color can be determined by taking an average based on the color of the content contained in the first interface. For example, the first color can be the color after taking the average as described herein. The content contained in the first interface may include UI elements, a base plate, and an image serving as a background in the first interface. Alternatively, the content contained in the first interface may also only include an image serving as a background in the first interface. The present application does not impose any restrictions on which content in the first interface is specifically selected for the average color processing, and it can be arbitrarily selected according to actual needs.

[0174] In one implementation, when the first interface is of the first type, because the colors of a large area in the first interface are of the same color family, the first color determined after averaging can more accurately reflect the overall color of the first interface. Therefore, in this case, the colors of subsequent UI elements and the base (if any) can be determined based on the first color.

[0175] S604: Display the first image in the first color, with the size of the first image being the same as the size of the first interface.

[0176] With reference to the above introduction, it can be determined that in a scenario where the first interface needs to be blurred full screen, it is usually necessary to first perform full screen blurring on the first interface, so that the baseboard (if any) and UI elements are displayed in sequence on the basis of the blurred first interface. It can also be determined that this blurring process itself has the problem of high power consumption. Therefore, in the technical solution of the present application, after determining the first color, a first image can be directly generated according to the first color, wherein the size of the first image is the same as the size of the first interface, and the color of each pixel in the first image is the first color.

[0177] Afterwards, the baseboard and UI elements are displayed on top of the first image, eliminating the need to blur the first interface and reducing power consumption. Furthermore, because the first color itself accurately reflects the overall color of the first interface, displaying the baseboard and UI elements on top of the first image can also ensure a certain degree of UI immersion.

[0178] For example, you can refer to Figure 7 Understand the first image, Figure 7 A processing diagram of the interface processing method provided in an embodiment of the present application.

[0179] exist Figure 7 The hierarchical structure of the first interface itself is first shown in the figure. Taking the lock screen interface as an example, Figure 7 The layer 1 shown in (a) is the lock screen wallpaper of the lock screen interface, where layer 1 is the bottom layer. Then, layer 2 can be displayed on the upper layer of layer 1, where layer 2 can be, for example, the UI elements of the lock screen interface, such as text elements such as clock, time, week, and control elements such as flashlight control and camera control. Then, stacking layer 2 (also known as the second layer) on top of layer 1, you can get the following Figure 7 The effect shown in (b) is shown in Figure 7 What is shown in (b) is the display effect of the first interface.

[0180] With reference to the above introduction, it can be determined that after the first color is determined based on the content in the first interface, a first image can be generated, the size of the first image is the same as the size of the first interface, and the color of the first image is the first color. In this embodiment, the first image is displayed on the first interface, for example, the first image can be stacked on top of the hierarchical structure of the first interface itself, that is, the first image can be used as layer 3 (which can also be understood as the third layer), where layer 2 is displayed on layer 1, and layer 3 is displayed on layer 2. The effect is like Figure 7 As shown in (c) in .

[0181] However, it is understandable that the display of the first image is performed in a scenario where the first interface needs to be blurred full screen. In a scenario where the blur effect only needs to be achieved in the upper layer of a local area in the first interface, there is no need to execute the current S604 step.

[0182] S605: Adjust the brightness of the first color to obtain a third color, and display the first baseboard according to the third color.

[0183] With reference to the above introduction, it can be determined that some UI elements may need to be displayed on the upper layer of the base plate. At the same time, in order to ensure that there is a certain degree of distinction between the color of the base plate and the first image serving as the background, in this embodiment, the brightness of the first color can be adjusted to obtain a third color, and then the first base plate can be displayed according to the third color, that is, the color of each pixel in the first base plate is the third color. In this way, it is possible to avoid the indistinguishability of the first base plate and the first image, while ensuring that the color effects of the first base plate and the first image are similar, so as to enhance the immersion of the UI. The first base plate can be understood as any base plate in the interface, and this embodiment does not impose any restrictions on this.

[0184] In one implementation, for example, a corresponding second amplitude can be pre-set for the first floor to be displayed, and then the brightness of the second amplitude can be adjusted based on the first color to obtain a third color. For example, the second amplitude corresponding to each floor in the interface can be the same, or a corresponding second amplitude can be set for each floor, which is not limited in this embodiment.

[0185] The brightness adjustment described here can be brightness increase or brightness decrease, and this embodiment does not limit this. The processing method for brightness adjustment required for the first bottom plate can be pre-set according to actual needs.

[0186] For example, you can refer to Figure 7To understand the above process, in one implementation, for example, the first base plate can be stacked on the upper layer of the first image, that is, the first base plate (there can be multiple base plates) can be used as layer 4 (also understood as the fourth layer), wherein layer 2 is displayed on layer 1, layer 3 is displayed on layer 2, and layer 4 is displayed on layer 3. The effect is as follows: Figure 7 As shown in (d) in the figure. It can be understood that the technical solution of this application is to increase the brightness of the first color to obtain a third color, and then display each baseboard according to the third color. Figure 7 (d) shows that the colors corresponding to the respective base plates are all the third color, and the circular or rounded rectangular frames in the figure represent the base plates.

[0187] S606: Adjust the brightness of the first color to obtain a second color, and display the first UI element according to the second color.

[0188] And in this embodiment, it is also necessary to determine the color corresponding to each UI element to be displayed. Similar to the above introduction, in order to ensure that there is a certain degree of distinction between the UI element, the base plate and the first image, the brightness of the first color can be adjusted in this embodiment to obtain the second color, and then the first UI element is displayed according to the second color, that is, the color of each pixel corresponding to the first UI element is the second color. In this way, it is possible to avoid the situation where the base plate, UI elements and images cannot be distinguished, while ensuring that the color effects of the background image, base plate and UI elements are similar, so as to enhance the immersion of the UI. The first UI element can be understood as any UI element in the interface, and this embodiment does not limit this.

[0189] In one implementation, for example, a first amplitude corresponding to the first UI element to be displayed can be pre-set, and then the brightness of the first amplitude can be adjusted based on the first color to obtain a second color. For example, because there are many types of UI elements in the interface, for example, multiple element tags can be pre-set, and then the corresponding adjustment amplitude can be set for each element tag. In other words, the first amplitude corresponds to the element tag of the first UI element.

[0190] The element tag may include, for example, at least one of the following: text, text type, control, and control type.

[0191] For example, the adjustment amplitude for UI elements whose element labels are text can be set to amplitude a, and the adjustment amplitude for UI elements whose element labels are controls can be set to amplitude b, so as to achieve different degrees of brightness adjustment for different types of UI elements, so as to distinguish and display different types of UI elements in the interface.

[0192] For another example, the text type described herein can be used to indicate the level of text in an interface, and the control type described herein can be used to indicate the level of controls in an interface. For example, for UI elements whose element labels contain text and are at level one, the adjustment amplitude can be set to amplitude a. Furthermore, for UI elements whose element labels contain text and are at level two, the adjustment amplitude can be set to amplitude b. Furthermore, for UI elements whose element labels contain controls and are at level one, the adjustment amplitude can be set to amplitude c. Furthermore, for UI elements whose element labels contain controls and are at level two, the adjustment amplitude can be set to amplitude d.

[0193] For example, you can refer to Figure 7 To understand the above process, in one implementation, for example, the first UI element can be stacked on the upper layer of the first base plate, that is, the first UI element (there can be multiple UI elements) can be used as layer 5 (which can also be understood as the fifth layer), wherein layer 2 is displayed on layer 1, layer 3 is displayed on layer 2, layer 4 is displayed on layer 3, and layer 5 is displayed on layer 4. The effect is as follows: Figure 7 As shown in (e) in the figure. It can be understood that the technical solution of the present application is to dim the brightness on the basis of the first color to obtain the second color corresponding to each UI element, and then display each UI element according to the second color corresponding to each UI element. Figure 7 (e) in the figure shows that each UI element corresponds to its own second color.

[0194] For example, for the UI elements "Song 1" and "Singer A", if the element labels of both UI elements contain "text", and assuming that the UI element "Song 1" also contains an element label at the text level one, and assuming that the UI element "Singer A" also contains an element label at the text level two, then the first amplitudes corresponding to the two UI elements may be different. For example, the adjustment amplitude corresponding to the element label at the text level one is greater than the adjustment amplitude corresponding to the element label at the text level two. Therefore, it can be observed in the figure that the UI element "Song 1" is darker in color than the UI element "Singer A". The adjustments for the rest of the text are similar and will not be repeated here.

[0195] In the above Figure 7 Based on the above introduction, we can also understand that the multi-layered hierarchical structure of the first interface itself is considered as a whole, that is, the first interface itself is a whole interface, and then the first image (if any), the first baseboard (if any), and the first UI element are displayed in sequence on the upper layer of the first interface. The upper layer of the first interface mentioned here refers to the upper layer of the first interface itself, or it can also be understood as the upper layer of the top layer of the hierarchical structure of the first interface.

[0196] The following can be combined Figure 8 To understand, Figure 8 Schematic diagram of the implementation of color adjustment provided in the embodiment of this application Figure 1 .exist Figure 8 The figure also schematically shows that the brightness adjustment is performed on the basis of the first color, thereby obtaining the third color and the second color corresponding to each UI element. For example, the brightness can be increased on the basis of the first color, thereby obtaining Figure 8 The third color shown is the color corresponding to the bottom plate. For another example, the brightness can be reduced based on the first color to obtain Figure 8 The second color A shown, wherein the second color A can be, for example, the color corresponding to the UI element as the first-level text (the corresponding element label includes text and text level one). For another example, the brightness can be reduced based on the first color to obtain Figure 8 The second color B shown, where the second color B can be, for example, the color corresponding to the UI element as the second level text (the corresponding element label includes text and text level 2). The understanding of the second colors corresponding to other UI elements is similar and will not be repeated here.

[0197] After following the steps described above, you can get Figure 7 The interface shown in (e) is the effect of displaying the control center interface on the upper layer of the first interface. Referring to the diagram, it can be determined that this can avoid the overhead caused by the need to perform pixel-by-pixel blurring while ensuring the UI immersion.

[0198] And also refer to Figure 9 Understand the remaining scenarios. Figure 9 A schematic diagram of the effect of the interface processing method provided in an embodiment of the present application.

[0199] exist Figure 9 (a) shows the lock screen interface of the electronic device, and Figure 9 (b) shows the effect of displaying the control center interface on the upper layer of the lock screen interface, as well as Figure 9 (c) shows the effect of displaying the notification center interface on the upper layer of the lock screen interface, as well as Figure 9 (d) in the figure shows the effect of displaying cards in part of the upper area of the lock screen interface. Figure 9 It can be understood that in (d), when the area to be blurred is not the full-screen area of the lock screen interface, there is no need to display the first picture introduced above, and only the base plate and UI elements need to be displayed.

[0200] In summary, the technical solution of this embodiment can determine the colors of UI elements and the base panel within the interface based on the averaged first color of the first interface. Furthermore, in full-screen blur scenarios, the first image of the first color can be directly displayed on top of the first interface, thus avoiding the high overhead caused by pixel-by-pixel blurring. Furthermore, determining the colors of relevant content within the interface based on the averaged first color can ensure a certain degree of UI immersion.

[0201] In addition, Figure 6 Two color adjustment strategies are also shown in the following. These two color adjustment strategies are explained separately below.

[0202] First, we introduce the color adjustment strategy A. Figure 6 As shown in S602 in FIG. 1 , it includes:

[0203] S602: When the first color satisfies the first condition, update the first color.

[0204] For example, the first interface may contain one or more colors of the color system. However, the first color obtained after averaging the colors contained in the first interface may appear gray. In this case, the first color obtained by averaging cannot accurately express the color effect of the first interface, and accordingly, the subsequent UI immersive effect cannot be achieved.

[0205] For another example, the first interface includes one or more colors of a color system. However, the first color obtained after averaging the colors included in the first interface may differ significantly from the hue of the colors included in the first interface. For example, if the first interface includes red and blue with relatively high purity, the first color obtained after averaging may be purple, and the hue difference between purple and red and blue is relatively large. In this case, the first color obtained by averaging cannot accurately express the color effect of the first interface, and accordingly, the subsequent UI immersion effect cannot be achieved.

[0206] Therefore, the present application also pre-sets a first condition to correct some first colors under abnormal performance when the color type of the first interface is the second type.

[0207] In one implementation, the first condition includes: the saturation of the first color is lower than a first threshold, and the multiple target colors include a target color with a saturation greater than a second threshold, where the first threshold may be lower than the second threshold. Furthermore, the difference between the hue of the first color and the hue of at least one target color is greater than a third threshold.

[0208] For example, you can refer to Figure 10Understand the current implementation, Figure 10 Schematic diagram of the implementation of color adjustment provided in the embodiment of this application Figure 2 .

[0209] Figure 10 For example, the embodiment of this application provides Figure 10 As shown, for example, the wallpaper of the lock screen interface includes three target colors, namely color a, color b, color c and color d. Then, the first color is obtained by averaging the content included in the lock screen interface.

[0210] In one case, if the saturation of the first color is above the first threshold, it may appear grayish or pale. Furthermore, if one of the three target colors on the lock screen has a saturation greater than the second threshold, it indicates that the lock screen itself contains relatively bright or vivid colors. Therefore, the averaged first color will differ from the target color on the lock screen, and the first color cannot represent the lock screen color.

[0211] In another case, if the difference between the hue of the first color and the hue of at least one target color in the lock screen interface is greater than the third threshold, it means that there is a large gap between the hue of the first color and the hue of the color in the lock screen interface. In this case, the first color also cannot represent the color of the lock screen interface.

[0212] In actual implementation, for example, the first condition regarding hue can be set as follows: the difference between the hue of the first color and the hue of any target color is greater than a third threshold. Alternatively, the first condition regarding hue can be set as follows: the difference between the hue of the first color and the hue of each target color is greater than the third threshold. The specific setting method can be selected according to actual needs and is not limited in this embodiment.

[0213] When the first condition is met, the first color can be updated. In this embodiment, you can choose to update the first color to the main color in the first interface, or you can choose to update the first color to the target color with the largest proportion in the first interface. Both colors can accurately reflect the color of the lock screen interface. Therefore, updating the first color to this type of color can effectively enhance the immersion of subsequent UI effects.

[0214] In one implementation, when the color type of the first interface is the second type, which means that the first interface contains color effects of multiple color systems, the first color obtained by averaging the colors contained in the first interface is more likely to exhibit the aforementioned anomalies (e.g., low saturation or a large hue difference). For example, when the color type of the first interface is the second type, step S602 described above can be performed to increase the necessity of executing step S602.

[0215] However, in another implementation, the color adjustment strategy A described in S602 above is not limited to being executed for the first interface whose color type is the second type. When the color type of the first interface is the first type, executing the color adjustment strategy A described above can also effectively enhance the immersiveness of subsequent UI effects. In other words, the technical solution of this application does not need to limit the color type of the first interface. As long as the first color meets the first condition described above, the color adjustment strategy A described here can be executed to enhance the UI performance.

[0216] The specific scenario in which the color adjustment strategy A introduced here is executed can be set according to actual needs, and this embodiment does not limit this.

[0217] It should be understood that after executing the color adjustment strategy A, the subsequent implementation of S604 to S606 is performed based on the updated first color, that is, the first color mentioned in these steps is the updated first color.

[0218] In summary, the technical solution of this embodiment determines whether the first color meets the first condition after determining the first color. If it is determined that the first condition is met, it means that the first color cannot accurately represent or reflect the overall color of the first interface. Therefore, the first color can be updated so that the selected first color can effectively reflect the overall color of the first interface, thereby ensuring the immersiveness of subsequent UI effects.

[0219] Next, we will introduce the color adjustment strategy B. Figure 6 As shown in S603 in FIG. 1 , it includes:

[0220] S603: When the first color satisfies the second condition, reduce the saturation of the first color.

[0221] For example, the second condition includes: if the saturation of the first color is greater than or equal to a fourth threshold, then reducing the saturation of the first color to obtain an updated first color. This can prevent the interface from displaying at excessive saturation in scenarios with ambiguous requirements, thereby improving the aesthetics and comfort of the UI effect.

[0222] For example, you can refer to Figure 10 It is understood that after executing step 602, if it is further determined that the saturation of the first color is greater than the fourth threshold, the saturation of the first color can be reduced to obtain an updated first color. The subsequent steps S604 to S606 are performed based on the first color with reduced saturation.

[0223] In one implementation, it can be set that the execution is only required when the area ratio of the first region is greater than or equal to the second ratio. Figure 6 S603 shown in .

[0224] Here we first introduce the first area. In this embodiment, the first area is the area where the blur effect needs to be applied (the technical solution of this application is equivalent to replacing the blur effect with a solid color effect). In the several scenarios introduced above, if it is necessary to display another full-screen interface on the upper layer of the first interface, then the full-screen area of the first interface is the first area introduced here. Alternatively, if it is necessary to display cards in a partial area of the upper layer of the first interface, then the area for displaying the cards is the first area introduced here. Therefore, it can also be understood that the first area is the area corresponding to the first base plate, that is, the area for displaying the first base plate. Or the first area is the area corresponding to the first image, that is, the area for displaying the first image.

[0225] In this embodiment, the area ratio of the first region within the first interface can be determined based on the area size of the first region and the area size of the first interface. A second ratio can also be pre-set to determine whether the first region currently requiring blurring is larger or smaller. The specific setting of the second ratio can be arbitrarily determined based on actual needs and is not limited in this embodiment.

[0226] If the first region's area ratio is greater than or equal to the second ratio, it means that a large area of the current interface needs to be displayed in the first color. If the saturation of the first color is high, the overall interface performance will be poor. Therefore, if it is determined that the first region's area ratio is greater than or equal to the second ratio, step S603 is executed to increase the necessity of executing S603.

[0227] On this basis, for example, it can be further limited to execute the above-mentioned step S602 only when the color type of the first interface is the second type, so as to enhance the necessity of executing the step S602.

[0228] However, it should be understood that the conditions for executing color adjustment strategy B described above are not necessarily limiting. For example, in other implementations, there may be no requirements for the area of the first region, and no requirements for the color type of the first interface. In other words, regardless of the color type of the first interface, and regardless of the area ratio of the first region, as long as the first color meets the second condition described here, the current step S603 can be selected to avoid the final first color being too saturated, resulting in poor UI performance.

[0229] In other scenarios, the area of the first region to be blurred in the interface may change dynamically. For such scenarios of dynamically changing first regions, the steps described in S603 can also be performed. This can reduce the saturation of the first color to adapt to the UI effect of the dynamically changing first region in different positions.

[0230] It should be understood that after executing the color adjustment strategy B, the subsequent implementation of S604 to S606 is performed based on the updated first color, that is, the first color mentioned in these steps is the updated first color.

[0231] In summary, the technical solution of this embodiment can further determine whether the saturation of the first color is too high. If it is determined that the saturation of the first color is too high, you can choose to reduce the saturation of the first color to improve the performance of subsequent UI.

[0232] It is also necessary to understand that the color adjustment strategy A and the color adjustment strategy B introduced above can both be included in the execution steps of the fuzzy processing, or only one of the color adjustment strategies can be included, that is, the color adjustment strategy A and the color adjustment strategy B introduced above are in an and / or relationship.

[0233] Based on the content of the above embodiment, when the area ratio of the first region to be blurred is greater than or equal to the second threshold, the technical solution of this application will first display the first image in the first color on the upper layer of the first interface, and then display the base plate and UI elements in sequence on the upper layer of the first image. Although this can achieve a certain degree of UI immersion, in order to further enhance the effect of UI immersion, this application also proposes the following processing method:

[0234] Some preset interfaces in electronic devices have fixed or pre-retrieved background images, such as the lock screen or desktop interface. If the first interface is the preset interface and the first area to be blurred is the full-screen area (i.e., the blur effect is applied to the entire screen), the background image of the first interface can be pre-blurred to obtain a blurred preset image. The preset image can then be displayed first on top of the first interface, followed by the various base panels and UI elements displayed sequentially on top of the preset image.

[0235] You can refer to Figure 11 Understand the current implementation, Figure 11 A schematic diagram of the implementation of pre-storing blurred images provided in an embodiment of the present application.

[0236] exist Figure 11 The interface shown in (a) is the lock screen interface. It can be understood that the background image of the lock screen interface is usually fixed, or can be predetermined, that is, the wallpaper image. Therefore, the background image of the lock screen interface can be blurred in advance to obtain Figure 11 The preset image shown in (b) in FIG. 1 , wherein the preset image is an image obtained by blurring the background image of the lock screen interface, and then the preset image is pre-stored.

[0237] When another interface needs to be displayed on the upper layer of the first interface, for example, a preset image can be displayed on the upper layer of the first interface first, and then various bottom panels and UI elements can be displayed in sequence on the upper layer of the preset image, so as to obtain Figure 11 The display effect shown in (c) in the figure.

[0238] In such an implementation, because the blur effect of the preset image is pre-generated and stored in the form of an image, there is no need to perform pixel-by-pixel blur processing in this implementation, which can achieve the purpose of saving power consumption. At the same time, because the preset image with a blur effect is displayed under the UI element and the bottom layer, the immersiveness of the UI effect can be further enhanced.

[0239] It can also be understood that in this implementation, there is no need to display the first image described above.

[0240] It is further understood that current electronic devices generally have a day mode (light) and a night mode (dark). In the night mode, the brightness of the entire UI elements and the bottom panel of the interface is lower than that in the day mode. Therefore, the first color can be further adjusted according to the display mode of the electronic device.

[0241] In one implementation, when the display mode is night mode, after determining the first color, the brightness of the first color can be reduced to obtain an updated first color. Subsequent processing is performed based on the updated first color. The specific degree of brightness reduction can be preset according to actual needs and is not limited in this embodiment.

[0242] Accordingly, when the display mode is daytime mode, after determining the first color, subsequent processing can be performed directly based on the first color. Alternatively, the brightness of the first color can be increased to obtain an updated first color. The implementation is similar to that described above and will not be repeated here.

[0243] In the technical solutions described in the above embodiments, the first color is equivalent to the average color of the content contained in the first interface. Subsequently, based on the first color, further color adjustment is performed according to the content to be displayed to adapt to different display scenarios.

[0244] However, in another implementation, the technical solution of the present application can also be implemented as follows: after averaging the content contained in the first interface to obtain the average color, color adjustment can be performed based on different display scenarios based on the average color, thereby outputting multiple selected colors at one time.

[0245] Then, according to the display scenario of the content to be displayed, a specific color is selected from multiple colors to be selected as the first color, and then the steps S604 to S606 described above are executed according to the first color to display the corresponding content (interface or card) on the upper layer of the first interface.

[0246] This implementation will be further described below. For example, multiple preset display scenes may be pre-set, and corresponding adjustment strategies may be pre-set for each preset display scene.

[0247] The preset display scene may be composed of one or more of the following elements: display mode, color type of the interface, and the first area corresponding thereto.

[0248] Display modes can be thought of as daytime (light) and nighttime (dark) modes for electronic devices. In nighttime mode, the overall brightness of UI elements and the background should be lower than in daytime mode. The color type described here refers to the color type of the first interface, and the first area is the area above the first interface that displays other interfaces or cards.

[0249] For example, the preset display scene includes the three elements described above. For example, there are the following preset display scenes:

[0250] Daytime mode, the color type of the first interface is the first type, and the area ratio of the first area is greater than or equal to the second ratio;

[0251] Daytime mode, the color type of the first interface is the first type, and the area ratio of the first area is less than the second ratio;

[0252] Daytime mode, the color type of the first interface is the second type, and the area ratio of the first area is greater than or equal to the second ratio;

[0253] Daytime mode, the color type of the first interface is the second type, and the area ratio of the first area is less than the second ratio;

[0254] Night mode, the color type of the first interface is the first type, and the area ratio of the first area is greater than or equal to the second ratio;

[0255] Night mode, the color type of the first interface is the first type, and the area ratio of the first area is less than the second ratio;

[0256] Night mode, the color type of the first interface is the second type, and the area ratio of the first area is greater than or equal to the second ratio;

[0257] Night mode, the color type of the first interface is the second type, and the area ratio of the first area is less than the second ratio;

[0258] The specific implementation of the adjustment strategy corresponding to each preset display scene can be set according to actual needs. For example, because the overall brightness of the day mode should be higher than the overall brightness of the night mode, if the preset display scene includes the night mode, the adjustment strategy should include a process of reducing the brightness.

[0259] For another example, when the color type of the first interface is the second type, the average color is more likely to have the aforementioned problems of low saturation or large hue deviation. In the case where the preset display scenario includes the color type of the first interface being the second type, the adjustment strategy may include, for example, the color adjustment strategy A described above.

[0260] For another example, when the area of the first region to be blurred accounts for a greater than or equal to second ratio, color conflicts are more likely to occur when displaying the background and UI elements using the average color. Therefore, if the area of the first region in the preset display scene accounts for a greater than or equal to second ratio, the adjustment strategy may include, for example, color adjustment strategy B described above.

[0261] In actual implementation, the adjustment strategies included in each preset display scene, as well as the specific adjustment ranges within the adjustment strategies, can be set based on actual needs. In short, after averaging the colors in the first interface to obtain an average color, the average color can be further adjusted based on the adjustment strategies corresponding to each preset display scene to obtain the candidate colors corresponding to each preset display scene.

[0262] Afterwards, the first color is selected from a plurality of candidate colors according to the target display scene corresponding to the first UI element to be displayed. It can be understood that the target display scene is also one of the multiple preset display scenes introduced above. For example, the target display scene can be determined based on one or more of the display mode of the current electronic device, the color type of the first interface, and the area ratio of the first area. Afterwards, the candidate color corresponding to the target display scene is used as the first color, and the first UI element and the base plate (if any) are subsequently displayed according to the first color. In this way, the first color can be adaptively determined for different display scenes to enhance the immersiveness of the UI effect.

[0263] Based on the contents introduced in the above embodiments, the technical solutions in this application can also pre-set application scenarios, for example, and only execute the technical solutions introduced in the above embodiments when specific scenario conditions are met. When specific scenario conditions are not met, for example, the blur effect can still be achieved according to the original blur processing solution to enhance the UI immersion.

[0264] In one implementation, specific scenario conditions may include at least one of the following: the chip parameters of the electronic device meet preset conditions (the preset conditions can be set according to actual needs, and the overall principle is that the preset conditions are used to indicate that the chip of the electronic device is a low-end chip, then the preset conditions can be, for example, that the chip parameters are less than the corresponding threshold value), the device temperature of the electronic device is greater than or equal to the preset temperature, the remaining power of the electronic device is less than or equal to the preset problem, and the number of whitelist applications currently started in the electronic device is greater than or equal to the preset number.

[0265] When the scenario conditions described above are met, it can be understood that the electronic device is currently not suitable for performing operations with high power consumption. Therefore, the technical solution introduced in this application can be implemented to reduce the power consumption caused by fuzzy processing and avoid abnormal situations such as freezing and heating of the electronic device.

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

[0267] An embodiment of the present application provides an electronic device, which includes: a processor and a memory; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory, so that the electronic device performs the above method.

[0268] The present embodiment provides a chip. The chip includes a processor configured to invoke a computer program stored in a memory to execute the technical solution of the above embodiment. The implementation principles and technical effects are similar to those of the above-mentioned related embodiments and will not be further described here.

[0269] The embodiments of the present application also provide a computer-readable storage medium. The computer-readable storage medium stores a computer program. When the computer program is executed by a processor, the above-mentioned method is implemented. The methods described in the above embodiments can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. If implemented in software, the functions can be stored as one or more instructions or codes on a computer-readable medium or transmitted on a computer-readable medium. Computer-readable media can include computer storage media and communication media, and can also include any medium that can transfer a computer program from one place to another. The storage medium can be any target medium that can be accessed by a computer.

[0270] In one possible implementation, a computer-readable medium may include random access memory (RAM), read-only memory (ROM), compact disc read-only memory (CD-ROM) or other optical disk storage, magnetic disk storage or other magnetic storage devices, or any other medium designed to carry or store the desired program code in the form of instructions or data structures and accessible by a computer. Moreover, any connection is appropriately referred to as a computer-readable medium. For example, if a coaxial cable, fiber optic cable, twisted pair, digital subscriber line (DSL), or wireless technologies such as infrared, radio, and microwave are used to transmit software from a website, server, or other remote source, the coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. Disk and disc, as used herein, include optical discs, laser discs, optical discs, digital versatile discs (DVDs), floppy disks, and Blu-ray discs, where disks typically reproduce data magnetically, while optical discs reproduce data optically using lasers. Combinations of the above should also be included within the scope of computer-readable media.

[0271] An embodiment of the present application provides a computer program product, which includes a computer program. When the computer program is executed, the computer executes the above method.

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

[0273] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When software is used for implementation, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. 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 via a wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) method. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrations. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid state disk (SSD)).

[0274] The term "plurality" in this article refers to two or more. The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent three situations: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the previous and next associated objects are in an "or" relationship; in the formula, the character " / " indicates that the previous and next associated objects are in a "division" relationship. In addition, it should be understood that in the description of this application, words such as "first" and "second" are only used for the purpose of distinguishing the description, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying order.

[0275] It will be understood that the various numerical numbers involved in the embodiments of the present application are merely distinctions for the convenience of description and are not intended to limit the scope of the embodiments of the present application.

[0276] It can be understood that in the embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

Claims

1. An interface processing method, characterized in that: The method comprises: Obtaining a first color corresponding to a first interface, wherein the first color is determined based on an average color of content included in the first interface; According to an element label corresponding to a first UI element to be displayed, adjusting the brightness of the first color by a first amplitude to obtain a second color, the element label corresponding to the first amplitude; The first UI element is displayed on the first interface, and the color of the first UI element is the second color.

2. The method according to claim 1, characterized in that The displaying the first UI element on the first interface includes: Displaying a first bottom panel on the first interface, wherein the color of the first bottom panel is a third color, the third color being obtained by adjusting the brightness of the first color by a second amplitude, the second amplitude corresponding to the first bottom panel; The first UI element is displayed on the first base panel.

3. The method according to claim 1 or 2, characterized in that The displaying the first UI element on the upper layer of the first interface includes: Displaying a first image on the first interface, where the color of the first image is the first color and the size of the first image is the same as the size of the first interface; The first UI element is displayed on the first image.

4. The method according to claim 3, characterized in that The first base plate is located on an upper layer of the first image.

5. The method according to any one of claims 1 to 4, characterized in that The method further comprises: Get the color type of the first interface, where the color type includes a first type and a second type, where the first type is used to indicate that the first interface contains colors of a single color system, and the second type is used to indicate that the first interface contains colors of multiple color systems.

6. The method according to claim 5, characterized in that The obtaining of the color type of the first interface includes: intercepting the first interface to obtain a second image; classifying the plurality of pixels in the second image according to a plurality of preset color categories and respective colors of the plurality of pixels to obtain a plurality of classification results, the classification results including the number of pixels included in each of the plurality of preset color categories; Determining, based on the multiple classification results, multiple target colors contained in the second image and information about the proportions of the multiple target colors in the second image, wherein the target colors are colors corresponding to the preset color categories; In the case that there is a target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface is determined to be the first type; and in the case that there is no target color whose proportion information is greater than or equal to the first proportion, the color type of the first interface is determined to be the second type.

7. The method according to claim 6, characterized in that After obtaining the first color corresponding to the first interface, the method further includes: If the first color satisfies the first condition, the first color is updated, and the updated first color becomes the target color with the largest proportion information, or the updated first color becomes the main color in the first interface; Among them, the first condition includes: the saturation of the first color is lower than a first threshold and the multiple target colors include a target color with a saturation greater than a second threshold, and / or the difference between the hue of the first color and the hue of at least one of the target colors is greater than a third threshold.

8. The method according to claim 7, characterized in that The color type of the first interface is the second type, wherein the second type is used to indicate that the first interface includes colors of multiple color systems.

9. The method according to any one of claims 1 to 8, characterized in that After obtaining the first color corresponding to the first interface, the method further includes: If the saturation of the first color is greater than or equal to a fourth threshold, the saturation of the first color is reduced to obtain an updated first color.

10. The method according to claim 9, characterized in that The area of the first region in the first interface corresponding to the first interface accounts for a proportion greater than or equal to a second proportion; The first area is an area corresponding to the first base plate, or the first area is an area corresponding to the first image.

11. The method according to any one of claims 1 to 10, characterized in that Before obtaining the first color corresponding to the first interface, the method further includes: Acquire a display mode, where the display mode is a day mode or a night mode; After obtaining the first color corresponding to the first interface, the method further includes: If the display mode is a night mode, the brightness of the first color is reduced to obtain an updated first color.

12. The method according to claim 10 or 11, characterized in that When the first interface is a preset interface and the first area is a full-screen area, the method further includes: Displaying a preset image on the first interface, wherein the preset image is an image obtained by blurring the background image of the preset interface; The first UI element and / or the first base plate are displayed on the preset image.

13. The method according to claim 12, characterized in that The preset interface is a lock screen interface or a desktop interface.

14. The method according to any one of claims 1 to 13, characterized in that The element tag includes at least one of the following: text, text type, control, and control type.

15. The method according to any one of claims 1 to 14, characterized in that The obtaining of the first color corresponding to the first interface includes: Adjusting the average color of the content included in the first interface according to the adjustment strategies corresponding to the plurality of preset display scenes, so as to output the candidate colors corresponding to the plurality of preset display scenes; The first color is determined from the multiple colors to be selected according to a target display scene corresponding to the first UI element to be displayed, and the target display scene is one of the multiple preset display scenes.

16. An electronic device, characterized in that: The electronic device includes: one or more processors and memory; The memory is coupled to the one or more processors, and is configured to store computer program codes, where the computer program codes include computer instructions. The one or more processors call the computer instructions to enable the electronic device to execute the method according to any one of claims 1 to 15.

17. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions so that the electronic device executes the method as described in any one of claims 1-15.

18. A computer-readable storage medium, characterized in that The computer-readable storage medium comprises computer instructions, and when the computer instructions are executed on an electronic device, the electronic device is caused to perform the method according to any one of claims 1 to 15.

19. A computer program product, characterized in that The computer program product comprises a computer program code, and when the computer program code is run on an electronic device, the electronic device is caused to perform the method according to any one of claims 1 to 15.

Images