UI element display method and electronic device

Abstract

A UI element display method and an electronic device, which can improve the display effect of a UI element of wallpaper on the electronic device, thereby improving the visual experience of a user. The method comprises: in response to an operation of setting first wallpaper for an electronic device, the electronic device displaying a first interface, wherein the first interface comprises the first wallpaper and a UI element, which is displayed on the first wallpaper, the value of a display parameter of the UI element corresponds to at least one of the wallpaper type of the first wallpaper and the wallpaper type of second wallpaper, the second wallpaper is a region of the first wallpaper in which the UI element is located, and a wallpaper type is obtained on the basis of at least one of the brightness and color of wallpaper.

Description

UI element display method and electronic device

[0001] The present application claims priority from the Chinese patent application No. 202410661429.9 filed on May 24, 2024, and entitled "UI element display method and electronic device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of terminal, and in particular to a UI element display method and an electronic device. BACKGROUND

[0003] With the continuous popularity of electronic devices, more and more users pursue higher use experience. Among them, visual experience is the first experience factor considered by users, and the visual experience is related to the display effect of the user interface (UI) elements (such as various elements including but not limited to text, icons, controls, etc.) presented on the wallpaper on the electronic device. However, the display effect of the UI elements currently presented on the wallpaper is generally fixed, which makes the visual experience of the user poor. SUMMARY

[0004] The present application provides a UI element display method and an electronic device, which can improve the display effect of the UI elements on the wallpaper on the electronic device and improve the visual experience of the user.

[0005] To achieve the above-mentioned purpose, the present application adopts the following technical solutions:

[0006] In a first aspect, a UI element display method is provided, applied to an electronic device with a display screen, the method comprising: in response to an operation of setting a first wallpaper for the electronic device, displaying a first interface, the first interface containing the first wallpaper and a UI element displayed on the first wallpaper, a display parameter of the UI element corresponding to at least one of a wallpaper type of the first wallpaper and a wallpaper type of a second wallpaper, the second wallpaper being a region on the first wallpaper where the UI element is located, the wallpaper type being obtained based on at least one of brightness and color of the wallpaper. Wherein, the display parameter of the UI element can be used to determine the display effect of the UI element on the electronic device.

[0007] Based on the technical solution, the value of the parameter of the UI display element presented on the electronic device corresponds to at least one of the wallpaper type of the entire wallpaper in which the UI element is located and the wallpaper type of the partial wallpaper corresponding to the region in which the UI element is located, which makes the value of the UI element display parameter applicable to different types of wallpapers. The value of the UI element display parameter determines the display effect of the UI element, which makes the display effect of the UI element applicable to different types of wallpapers. The wallpaper type can be obtained based on the brightness, color, etc. of the wallpaper, which makes the display effect of the UI element applicable to wallpapers of different brightness and color, improves the display effect of the UI element on the wallpaper, and further improves the visual experience of the user. Moreover, the value of the UI element display parameter can be set based on the wallpaper type, without the need to obtain the initial value of the UI element display parameter through a third-party library, etc., which reduces the implementation complexity.

[0008] In a possible design, the wallpaper type includes at least one of a color type and a pattern type, the color type is obtained based on the color of the wallpaper, and the color type includes a preset reference color and a non-reference color; the pattern type is obtained based on the brightness of the wallpaper, and the pattern type includes an extreme pattern wallpaper and a non-extreme pattern wallpaper, and the non-extreme pattern wallpaper includes at least one of an extremely light wallpaper, a light wallpaper, a normal pattern wallpaper, a dark wallpaper, and an extremely dark wallpaper. In this way, the color type of the wallpaper can be divided into the preset reference color and the non-reference color based on the color of the wallpaper, and the pattern type of the wallpaper can be divided into the extreme pattern wallpaper and the non-extreme pattern wallpaper based on the brightness of the wallpaper. The non-extreme pattern wallpaper can be divided into at least one of the extremely light wallpaper, the light wallpaper, the normal pattern wallpaper, the dark wallpaper, and the extremely dark wallpaper. The wallpaper can be subdivided into the foregoing types based on the color and brightness of the wallpaper, which makes the value of the display parameter of the UI element more detailed, and further makes the display effect of the UI element more applicable to different types of wallpapers and improves the display effect of the UI element on the wallpaper.

[0009] In a possible design, the color type is determined based on the closeness between the color of the wallpaper and the reference color. In this way, the color type of the wallpaper can be divided into the reference color and the non-reference color based on the closeness between the color of the wallpaper and the reference color.

[0010] In a possible design, when the closeness between the color of the wallpaper and the reference color meets a preset condition, the color type of the wallpaper is the reference color; or when the closeness between the color of the wallpaper and the reference color does not meet the preset condition, the color type of the wallpaper is the non-reference color. In this way, the color type of the wallpaper can be determined based on whether the closeness between the color of the wallpaper and the reference color meets the preset condition, which achieves the purpose of dividing different color types.

[0011] In a possible design, the closeness between the color of the wallpaper and the reference color is represented by a Euclidean distance between the color of the wallpaper and the reference color, and the reference color and the color of the wallpaper are both described in the Lab color space. In this way, the closeness between the color of the wallpaper and the reference color is represented based on the Euclidean distance between the color of the wallpaper and the reference color, and the reference color and the color of the wallpaper are both described in the Lab color space, which is more consistent with the color perception of the human eye, and can make the division result of the color type more consistent with the color perception of the human eye, thereby improving the display effect of the UI element when the color type of the wallpaper is displayed based on the division, and improving the visual experience of the user.

[0012] In a possible design, the pattern type is determined based on at least one of a luminance variance of the wallpaper and a lightness degree of the wallpaper, the luminance variance of the wallpaper is used to represent the dispersion degree of the luminance of each pixel point included in the wallpaper, and the lightness degree of the wallpaper is represented by a contrast between the luminance of the wallpaper and the luminance of the reference color. In this way, the pattern type is divided based on the luminance variance of the wallpaper and the lightness degree represented by the contrast between the luminance of the wallpaper and the luminance of the reference color, and the division result of the pattern type is more accurate.

[0013] In a possible design, the reference color is white.

[0014] In a possible design, before the first interface is displayed, the method further includes: obtaining the pattern type of the second wallpaper; and obtaining the color type of the second wallpaper when the pattern type of the second wallpaper is a non-extreme flower wallpaper. In this way, the pattern type of the second wallpaper is obtained first, and then the color type of the second wallpaper is obtained when the pattern type of the second wallpaper is a non-extreme flower wallpaper, that is, the display parameters of the UI element are set in combination with the pattern type and the color type of the wallpaper in the region where the UI element is located, and the influence of the type of the wallpaper in the region where the UI element is located on the display effect of the UI element is fully considered, so that the display effect of the UI element is better. Moreover, when the pattern type of the second wallpaper is an extreme flower wallpaper, the color type of the second wallpaper does not need to be obtained, and the display parameters of the UI element can be directly set, which improves the efficiency of setting the display parameters of the UI element and saves resources.

[0015] In a possible design, after the color type of the second wallpaper is acquired, the method further includes: when the color type of the second wallpaper is a reference color, acquiring the color type of the first wallpaper; and setting the value of the display parameter of the UI element based on the color type of the first wallpaper and the color type of the second wallpaper. In this way, when the color type of the second wallpaper is a reference color, the color type of the first wallpaper also needs to be acquired, that is, in addition to acquiring the color type of the wallpaper in the region where the UI element is located, the color type of the entire wallpaper also needs to be acquired, that is, not only the local color of the wallpaper in the region where the UI element is located is considered, but also the global color of the wallpaper is considered, so that the value setting of the display parameter of the UI element is more comprehensive, and the display effect of the UI element is better and more visually beautiful.

[0016] In a possible design, when the luminance variance of the wallpaper meets the fourth preset condition, the pattern type of the wallpaper is an extreme pattern wallpaper; when the luminance variance of the wallpaper does not meet the fourth preset condition but the lightness degree of the wallpaper meets the first preset range, the pattern type of the wallpaper is an extremely light wallpaper; when the luminance variance of the wallpaper does not meet the fourth preset condition but the lightness degree of the wallpaper meets the second preset range, the pattern type of the wallpaper is a light wallpaper; when the luminance variance of the wallpaper does not meet the fourth preset condition but the lightness degree of the wallpaper meets the third preset range, the pattern type of the wallpaper is a normal pattern wallpaper; when the luminance variance of the wallpaper does not meet the fourth preset condition but meets the fifth preset condition, and the lightness degree of the wallpaper meets the fourth preset range, the pattern type of the wallpaper is a dark wallpaper; and when the luminance variance of the wallpaper does not meet the fourth preset condition and does not meet the fifth preset condition, and the lightness degree of the wallpaper meets the fourth preset range, the pattern type of the wallpaper is an extremely dark wallpaper. In this way, multiple different conditions or ranges are set for the luminance variance and the lightness degree, and then multiple different pattern types can be divided, so that the pattern type division is more detailed.

[0017] In a possible design, the UI element includes one or more of clock text, calendar text, an application icon, a name corresponding to the application icon, a lock screen component, a lock screen application notification bar, a status bar, a signal identifier, and a power level identifier; and the display parameter of the UI element includes one or more of luminance, color, shadow, blur radius, saturation, and transparency.

[0018] In a possible design, the display parameter of the UI element includes brightness; and before the first interface is displayed, the method further includes: obtaining a value of brightness of the second wallpaper; and setting a value of brightness of the UI element based on the value of brightness of the second wallpaper. In this way, the value of brightness of the UI element that is suitable for the brightness of the wallpaper can be set under the brightness of different second wallpapers, and dynamic brightness setting is implemented. Alternatively, the display parameter of the UI element includes color, and before the first interface is displayed, the method further includes: obtaining a value of color of the first wallpaper; and setting a value of color of the UI element based on the value of color of the first wallpaper. In this way, the value of color of the UI element that is suitable for the color of the wallpaper can be set under the color of different entire wallpapers, and dynamic color setting is implemented.

[0019] In a possible design, the value of color of the UI element is the same as the value of color of the first wallpaper. In this way, the color of the UI element is directly set by using the color of the entire wallpaper, so that the color tone of the entire wallpaper is consistent with the color tone of the UI element, and the visual effect is more beautiful.

[0020] In a possible design, the reference color includes black, white and gray, and the display parameter of the UI element includes brightness; when the pattern type of the second wallpaper is an extreme pattern wallpaper, or when the pattern type of the second wallpaper is one of a normal pattern wallpaper, a light color wallpaper, a dark color wallpaper and an extreme dark wallpaper and the color type is a non-reference color, or when the color type of the second wallpaper is one of black and gray, the pattern type is a non-extreme pattern wallpaper, and the color type of the first wallpaper is a reference color, it is indicated that the scene is a dark color system, and the value of brightness of the UI element is a first value; or, when the pattern type of the second wallpaper is an extremely light wallpaper and the color type is a non-reference color, or when the color type of the second wallpaper is white, the pattern type is a non-extreme pattern wallpaper, and the color type of the first wallpaper is a reference color, it is indicated that the scene is a light color system, and the value of brightness of the UI element is a second value; the first value is greater than the second value. In this way, the preset value of brightness of the UI element is different under different wallpaper types. Moreover, the preset brightness of the UI element in the dark color system is greater than the preset brightness of the UI element in the light color system, so that the preset brightness of the UI element can be suitable for different color systems, and the display effect in different color systems can be better.

[0021] In a possible design, the first value is greater than 1, and the second value is less than 1.

[0022] In a possible design, the display parameter of the UI element includes brightness; when the color type of the second wallpaper is reference color and the pattern type is a first type and the color type of the first wallpaper is non-reference color, the brightness of the UI element is greater than the brightness of the second wallpaper; or, when the color type of the second wallpaper is reference color and the pattern type is a second type and the color type of the first wallpaper is non-reference color, the brightness of the UI element is less than the brightness of the second wallpaper; wherein the first type includes one or more of normal flower wallpaper, dark wallpaper, and extremely dark wallpaper, and the second type includes one or more of extremely light type and light color type.

[0023] In a possible design, the brightness of the UI element is negatively correlated with the brightness of the second wallpaper.

[0024] In a possible design, when the brightness of the UI element is less than the brightness of the second wallpaper, the brightness of the UI element is a difference between a preset brightness reference value and a first difference value, the first difference value being a difference between the brightness of the second wallpaper and a first preset brightness threshold; or, when the brightness of the UI element is greater than the brightness of the second wallpaper, the brightness of the UI element is a sum of the preset brightness reference value and a second difference value, the second difference value being a difference between a second preset brightness threshold and the brightness of the second wallpaper.

[0025] In a possible design, the display parameter of the UI element includes color; when the pattern type of the second wallpaper is extremely flower wallpaper, or when the pattern type of the second wallpaper is non-extremely flower wallpaper and the color type is non-reference color, or when the pattern type of the second wallpaper is non-extremely flower wallpaper and the color type is reference color and the color type of the first wallpaper is reference color, the color of the UI element is a preset value; or, when the color type of the second wallpaper is reference color and the pattern type is non-extremely flower wallpaper and the color type of the first wallpaper is non-reference color, the color of the UI element is the same as the color of the first wallpaper.

[0026] In a possible design, the preset value is white.

[0027] In a possible design, the display parameter of the UI element includes shadow; when the pattern type of the second wallpaper is extremely flower wallpaper, or when the pattern type of the second wallpaper is normal flower wallpaper and the color type is non-reference color, the UI element is added with a shadow.

[0028] In a second aspect, the present application provides an electronic device having a function of implementing the method according to the first aspect or any one of the designs above. The function can be implemented by hardware or by executing corresponding software by hardware. The hardware or software includes one or more modules corresponding to the above functions.

[0029] In a third aspect, an electronic device is provided, comprising a display screen, a processor and a memory, the display screen, the memory and the processor being coupled, the memory being configured to store program code, the program code comprising instructions, the processor reading the instructions from the memory to cause the electronic device to perform the method according to any one of the aspects above or any one of the designs above.

[0030] In a fourth aspect, a computer readable storage medium is provided, the computer readable storage medium comprising a computer program, when the computer program is run on an electronic device, causing the electronic device to perform the method according to any one of the aspects above or any one of the designs above.

[0031] In a fifth aspect, a computer program product is provided, the computer program product comprising a computer program or instructions, when the computer program or instructions are run on a computer, causing the computer to perform the method according to any one of the aspects above or any one of the designs above.

[0032] In a sixth aspect, the present application provides a chip system, comprising at least one processor and at least one interface circuit, the at least one interface circuit being configured to perform a transceiving function and send instructions to the at least one processor, when the at least one processor executes the instructions, the at least one processor performs the method according to the first aspect or any one of the designs above.

[0033] It should be noted that the technical effects brought by any one of the designs of the second aspect to the sixth aspect above can refer to the technical effects brought by the corresponding design in the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0034] FIG. 1 is a schematic diagram of the effect of a clock text presented on a wallpaper according to the prior art;

[0035] FIG. 2 is a schematic diagram of a UI element display method according to an embodiment of the present application;

[0036] FIG. 3 is a schematic diagram of another UI element display method according to an embodiment of the present application;

[0037] FIG. 4 is a schematic diagram of an interface according to an embodiment of the present application;

[0038] FIG. 5 is a schematic diagram of the structure of an electronic device according to an embodiment of the present application;

[0039] FIG. 6 is a schematic diagram of a model of an RGB color space according to an embodiment of the present application;

[0040] FIG. 7 is a schematic diagram of a model of an XYZ color space according to an embodiment of the present application;

[0041] FIG. 8 is a schematic diagram of a model of a Lab color space according to an embodiment of the present application;

[0042] FIG. 9 is a schematic diagram of a method for determining a color type of a wallpaper according to an embodiment of the present application;

[0043] FIG. 10 is a schematic diagram of a division of a pattern type of a wallpaper according to an embodiment of the present application;

[0044] FIG. 11 is a schematic diagram of a process for determining a relative brightness of a wallpaper according to an embodiment of the present application;

[0045] FIG. 12 is a schematic diagram of a flow of another method for displaying a UI element according to an embodiment of the present application;

[0046] FIG. 13 is a schematic diagram of a scenario of setting a wallpaper for a mobile phone according to an embodiment of the present application;

[0047] FIG. 14 is a schematic diagram of another scenario of setting a wallpaper for a mobile phone according to an embodiment of the present application;

[0048] FIGS. 15 to 21 are schematic diagrams of some effects according to embodiments of the present application;

[0049] FIG. 22a is a schematic diagram of a flow of another method for displaying a UI element according to an embodiment of the present application;

[0050] FIG. 22b is a schematic diagram of a structure of another electronic device according to an embodiment of the present application;

[0051] FIG. 23 is a schematic diagram of a structure of a chip system according to an embodiment of the present application. DETAILED DESCRIPTION

[0052] In the description of the present application, unless otherwise specified, " / " represents a relationship of "or" between the objects associated in front and back, for example, A / B can represent A or B; "and / or" in the present application is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent: A exists alone, A and B exist together, and B exists alone, where A and B can be singular or plural.

[0053] In the description of the present application, unless otherwise specified, "a plurality of" means two or more than two. "At least one of the following" or similar expressions means any combination of the items, including any combination of single or multiple items. For example, at least one of a, b, or c can mean: a, b, c, a and b, a and c, b and c, a and b and c, where a, b, c can be single or multiple.

[0054] In addition, in order to facilitate the clear description of the technical solutions of the embodiments of the present application, in the embodiments of the present application, "first", "second" and the like are used to distinguish the same or similar items with basically the same function and role. The skilled in the art can understand that "first", "second" and the like do not limit the quantity and execution order, and "first", "second" and the like do not necessarily mean different.

[0055] At present, the color, brightness and other parameters of various UI elements (such as various elements including but not limited to text, icons, controls, etc.) presented on the wallpaper of the electronic device are generally fixed. These parameters of the UI elements cannot be adaptively adjusted based on the type of the wallpaper, and thus the display effect of these UI elements on the wallpaper is poor, such as: blurred, etc., resulting in poor visual experience for the user. For example, taking the clock text displayed on the wallpaper as an example, Fig. 1 shows an effect diagram of the clock text presented on a kind of existing wallpaper. As shown in Fig. 1 (1), the clock text 101 (such as 10:00) is presented on the wallpaper 100. As shown in Fig. 1 (2), the clock text 111 (such as 11:00) is presented on the wallpaper 110. The parameters of the clock text 101 and the clock text 111 are the same, while the types of the wallpaper 100 and the wallpaper 110 are different. The clock text 101 and the clock text 111 are both blurred and the display effect is poor.

[0056] It can be understood that in the embodiments of the present application, different fillings are used to represent the effect of the wallpaper, which does not constitute a limitation of the present application.

[0057] To improve the display effect of the UI elements on the wallpaper, in one possible solution, as shown in Fig. 2, the colors of multiple positions of the wallpaper and the colors of the application description text corresponding to the application icon can be detected. In the case that the colors are similar, the color of the application description text corresponding to the application icon is changed. In this solution, the judgment is based on the existing color on the wallpaper, and the overall color of the text and the wallpaper is not considered, which is relatively limited. Moreover, due to the error in color display, accurate color development cannot be achieved. Therefore, this solution cannot effectively improve the display effect of the text on the wallpaper.

[0058] In another possible solution, as shown in FIG. 3, the dominant color of the wallpaper can be extracted, and the transparency of the application icons can be obtained from the theme resource library, and then the color of the application icons is adjusted based on the dominant color of the wallpaper and the transparency of the application icons, so that the application icons can be adapted to the wallpaper color. In this solution, since the transparency of each application icon needs to be obtained from the theme resource library, it needs to rely on a third-party library to implement, which makes the workload of the electronic device large and time-consuming, and the implementation process is complex.

[0059] Based on this, the embodiments of the present application provide a UI element display method, which can not only improve the display effect of the UI element on the wallpaper and improve the user's visual experience, but also reduce the implementation complexity. It can be understood that in the embodiments of the present application, the UI element can be various UIs displayed on the wallpaper. Optionally, the wallpaper can be a lock screen wallpaper, or a desktop wallpaper (i.e., a wallpaper presented when the electronic device is not locked). Exemplarily, the UI element includes but is not limited to the clock text 401, the calendar text 402, the flashlight icon 403, the camera icon 404, the lock screen application notification bar 405, the lock screen application notification bar 406, and the content in the lock screen application notification bar on the lock screen wallpaper 400 shown in (1) of FIG. 4, and optionally, the content in the lock screen application notification bar can be various types of application notification messages. The add control 411, the confirmation control 412, and the menu bar 413 containing various function component identifiers on the lock screen wallpaper 410 shown in (2) of FIG. 4, the application icons (such as the icon 421 of a video application and the icon 422 of a calendar application) displayed on the desktop wallpaper 420 shown in (3) of FIG. 4, the description (such as the name: "weather", "settings", "recorder", etc.) of the application icons, the calendar text, the clock text, and the like, one or more of the signal identifier of the status bar, the clock text, the power level identifier, the charging identifier, and the network identifier (such as 4G, 5G, and LTE) displayed in the lock screen wallpaper, the desktop wallpaper, and the like.

[0060] It can be understood that the lock screen interface shown in FIG. 4 is only an exemplary illustration made for the purpose of understanding the embodiments of the present application, and various UI elements contained therein can be simultaneously presented on the lock screen interface, or one or more UI elements can be additionally called out on the lock screen interface through user operation.

[0061] The technical solutions provided in the embodiments of the present application can be applied in an electronic device, or in a system containing an electronic device.

[0062] Exemplarily, the electronic device can be a mobile phone, a tablet computer, a handheld computer, a netbook, and a personal digital assistant (PDA), an artificial intelligence (AI) device, a wearable device, including but not limited to a smart watch, a smart bracelet, a smart ring, and various devices with a display screen. The operating system installed by the electronic device includes but is not limited to Android, iOS, Windows, or other operating systems. The specific type of the electronic device and the installed operating system are not limited in the present application.

[0063] Exemplarily, FIG. 5 shows a structural schematic diagram of an electronic device provided in an embodiment of the present application.

[0064] As shown in FIG. 5, the electronic device 500 can include a processor 510, a memory 520, and a display screen 530, etc.

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

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

[0067] The memory in the processor 510 can also be provided for storing instructions and data. In some embodiments, the memory in the processor 510 is a cache memory. The memory can save instructions or data that have just been used or are repeatedly used by the processor 510. If the processor 510 needs to use the instructions or data again, it can be directly called from the memory. This avoids repeated access and reduces the waiting time of the processor 510, thereby improving the efficiency of the system.

[0068] In some embodiments, the processor 510 can include one or more interfaces. The one or more interfaces can be used to connect the processor 510 with the memory 520, the display screen 530, etc.

[0069] In some embodiments of the present application, the processor 510 can be configured to determine the type of the wallpaper, and set the effect of the UI element on the wallpaper based on the type of the wallpaper. The type of the wallpaper will be described later.

[0070] The memory 520 can be configured to store computer-executable program code including instructions. The memory 520 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application program (such as an image playing function, etc.) required by the at least one function, etc. The data storage area can store data created during the use of the electronic device 500, etc. The processor 510 executes various function applications and data processing of the electronic device 500 by running the instructions stored in the memory 520 and / or the instructions stored in the memory disposed in the processor.

[0071] The electronic device 500 can realize the display function through the GPU, the display screen 530, and the application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 530 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 510 can include one or more GPUs, which execute program instructions to generate or change display information.

[0072] The display screen 530 is configured to display images, videos, etc. The display screen 530 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flex light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diodes (QLED), etc. In some embodiments, the electronic device 500 can include 1 or N display screens 530, and N is a positive integer greater than 1.

[0073] In some embodiments of the present application, the display screen 530 can be configured to display the wallpaper and the UI element on the wallpaper. In some other embodiments of the present application, the display screen 530 can also be configured to receive the operation of the user for setting the wallpaper for the electronic device 500.

[0074] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device can include more or fewer components than those shown in FIG. 5, such as a communication interface and a key. The communication interface can be used for communication between the electronic device and other devices. The key can be a mechanical key or a touch key. Or combine some components, or split some components, or different component arrangement. The illustrated components can be implemented in hardware, software or a combination of software and hardware.

[0075] The technical solutions involved in the following embodiments can be implemented in a device with a structure as shown in FIG. 5.

[0076] The following describes the technical solutions provided by the embodiments of the present application with reference to the accompanying drawings, taking a mobile phone as an example.

[0077] The embodiments of the present application provide a UI element display method, and the mobile phone can set the parameters of the UI elements on the wallpaper based on different types of the wallpaper, that is, the values of the parameters of the UI elements correspond to the types of the wallpaper, so that the display effect of the UI elements can be adapted to different types of the wallpaper, which can improve the display effect of the UI elements on the wallpaper and further improve the visual experience of the user. Moreover, the parameters of the UI elements can be obtained without using a third-party library, which can reduce the implementation complexity.

[0078] In some implementations, the types of the wallpaper can be divided based on different factors (such as color, brightness, etc.). As a specific example, the types of the wallpaper can include one or more of a color type and a pattern type. The color type can refer to a type divided based on the color of the wallpaper. In one possible division result, the color type can include multiple types of black, white, gray, and color. The pattern type can refer to a type divided based on the brightness of the wallpaper. In one possible division result, the pattern type can include extreme pattern wallpaper and non-extreme pattern wallpaper, and the non-extreme pattern wallpaper can include one or more of extremely light wallpaper, light wallpaper, ordinary pattern wallpaper, dark wallpaper, and extremely dark wallpaper.

[0079] It can be understood that in other embodiments, the wallpaper can be divided into more coarse-grained or finer-grained types according to the color and brightness of the wallpaper, or divided into other types, etc. For example, according to the brightness of the wallpaper, a slightly light wallpaper between the extremely light wallpaper and the light wallpaper, and a slightly dark wallpaper between the dark wallpaper and the extremely dark wallpaper can be divided. Alternatively, the extremely light wallpaper and the light wallpaper can be combined into one type, the dark wallpaper and the extremely dark wallpaper can be combined into one type, etc.

[0080] It can be understood that the preset reference colors are black, white and gray, and the non-reference color is color in the embodiments of the present application. In other embodiments, the preset reference colors can be red, green or other colors, and the embodiments of the present application do not make specific limitations.

[0081] The process of determining the color type of the wallpaper is introduced below, taking the color types including black, white, gray and color as an example.

[0082] In some scenarios, the color of the wallpaper is represented based on a color space. It can be understood that the color space in the embodiments of the present application can also be referred to as color mode, color space, color system, etc., which is a mathematical model for representing colors. Common color spaces include RGB color space, XYZ color space, HSV color space, Lab color space, etc. Among them, the RGB color space is a color space that describes colors with red (Red, R), green (Green, G) and blue (Blue, B) as three primary colors. For example, FIG. 6 shows a model diagram of an RGB color space provided in the embodiments of the present application. The RGB color space is based on three basic colors of R, G and B, and different degrees of superposition of the three basic colors can produce rich colors. Red, green and blue represent three basic colors in the visible spectrum, and each color can be divided into 256 levels according to its brightness.

[0083] It can be understood that in the embodiments of the present application, FIGS. 6 to 8 are examples for facilitating understanding, and the actual color space model can be different.

[0084] However, since the RGB color space uses red, green and blue as three primary colors, it cannot match all colors in nature. The International Commission on Illumination theoretically assumes three non-existent primary colors, i.e., theoretical primary colors XYZ. Further, the corresponding XYZ color space is generated based on the theoretical primary colors. The XYZ color space describes colors with XYZ as three primary colors, where X and Y represent colors, and Z represents brightness. The XYZ color space can be obtained by linear transformation of the RGB color space. For example, FIG. 7 shows a model diagram of an XYZ color space provided in the embodiments of the present application.

[0085] Since the RGB color space is linear and mutually orthogonal, but the human eye's visual system is not linear, the RGB color space cannot directly and intuitively reflect the human eye's perception of color. Therefore, the Lab color space is proposed. The Lab color space can describe all the colors perceived by the human eye. For example, FIG. 8 shows a model diagram of a Lab color space according to an embodiment of the present application. As shown in FIG. 8, L represents luminance, with a value range of greater than or equal to 0 and less than or equal to 100, representing the luminance level of each color from black to white. a represents the position of the color on the red-green axis, with a value range of greater than or equal to -128 and less than or equal to +127, a negative value representing a green color, and a positive value representing a red color. b represents the position of the color on the yellow-blue axis, with a value range of greater than or equal to -128 and less than or equal to +127, a negative value representing a blue color, and a positive value representing a yellow color.

[0086] In some embodiments, the color of the wallpaper is described by default in the RGB color space. However, considering that the RGB color space cannot directly reflect the human eye's perception of color, in some embodiments of the present application, the color type of the wallpaper can be divided based on the color of the wallpaper described in the Lab color space, so that the color type of the wallpaper obtained by the division is more consistent with the human eye's perception effect, and thus the display effect of the UI element can be improved when the UI element is displayed based on the color type of the wallpaper obtained by the division, thereby improving the user's visual experience.

[0087] In this embodiment, before dividing the color type of the wallpaper, the color described in the RGB color space can be converted to the color described in the Lab color space. As a specific implementation, the color described in the RGB color space can be first converted to the color described in the XYZ color space, and then the color described in the XYZ color space can be converted to the color described in the Lab color space, thereby realizing the conversion between the RGB color space and the Lab color space.

[0088] For example, the conversion relationship between the RGB color space and the XYZ color space can satisfy formula 1.

[0089] In formula 1, represents the description information of the color in the XYZ color space, represents the description information of the color in the RGB color space.

[0090] According to formula 1, X, Y, Z and the sum of the coefficients can be obtained, as shown in formulas 2 to 7. 11 *R+b 12 *G+b 13 *B Formula 2 Xn = b 11 + b 12 + b 13 = 0.950456 Formula 3 Y = b 21 * R + b 22 * G + b 23 * B Formula 4 Y n = b 21 + b 22 + b 23 = 1.0 Formula 5 Z = b 31 * R + b 32 * G + b 33 * B Formula 6 Z n = b 31 + b 32 + b 33 = 1.088754 Formula 7

[0091] wherein X, Y, Z respectively satisfy Formula 2, Formula 4, Formula 6. The sum of each coefficient respectively satisfies Formula 3, Formula 5, Formula 7.

[0092] Since the values of X n , Y n , Z n respectively representing the sum of coefficients are all close to 1, and the value range of RGB satisfies interval [0, 255]. Then assuming the sum of coefficients is 1, the value range of X, Y, Z also satisfies interval [0, 255]. Further, the mapping of RGB color space and XYZ color space in the same interval range can be realized, so the description of the color described in XYZ color space in Lab color space can be calculated based on the following Formula 8 to Formula 11.

[0093] L * = 116f(Y / Y n ) - 16 Formula 8

[0094] a * = 500[f(X / X n ) - f(Y / Y n )] Formula 9

[0095] b * = 200[f(Y / Y n ) - f(Z / Z n )] Formula 10

[0096] wherein in Formula 8 to Formula 11, L * , a * , b *respectively represent the corresponding descriptions in the Lab color space.

[0097] Then, after converting the colors on the wallpaper described in the RGB color space into the corresponding descriptions in the Lab color space by, for example, the above-mentioned manner, the color type of the wallpaper can be classified based on the colors on the wallpaper described in the Lab color space. It can be understood that when the colors of the wallpaper are described in the Lab color space by default, the above-mentioned operation of converting the RGB color space and the Lab color space can also not be performed.

[0098] In some embodiments, whether two colors are similar (or called similar) can be determined by calculating the color distance of the two colors. The smaller the color distance, the more similar the two colors. Conversely, the greater the difference between the two colors. For example, the color distance of the two colors can be calculated based on formula 12.

[0099] In formula 12, C1 and C2 represent two colors, |C1-C2| represents the color distance of the two colors, C 1,R , C 2,R represents the R value of the two colors in the RGB color space (or simply the R channel of the two colors), C 1,G , C 2,G represents the G value of the two colors in the RGB color space, C 1,B , C 2,B represents the B value of the two colors in the RGB color space.

[0100] In some embodiments of the present application, the color type of the wallpaper can be determined by determining the degree of similarity of the color of the wallpaper to black, or white, or gray. For example: when it is determined that the degree of similarity of the color of the wallpaper to black satisfies a first preset condition, it can be determined that the color type of the wallpaper is black. When it is determined that the degree of similarity of the color of the wallpaper to white satisfies a second preset condition, it can be determined that the color type of the wallpaper is white. When it is determined that the degree of similarity of the color of the wallpaper to gray satisfies a third preset condition, it can be determined that the color type of the wallpaper is gray. When it is determined that the degree of similarity of the color of the wallpaper to black, white, and gray does not satisfy the corresponding preset conditions, it can be determined that the color type of the wallpaper is color.

[0101] In this embodiment, as one possible implementation, in combination with formula 12, the degree of similarity between two colors can also be determined by calculating the color distance (also called Euclidean distance) of the color of the wallpaper to black, or white, or gray, that is, the degree of similarity between two colors can be represented by the color distance between the two colors. For example, the color distance of the color of the wallpaper to black, or white, or gray can satisfy formula 13.

[0102] wherein, in formula 13, ΔE represents the color distance between the color of the wallpaper and any one of black, white, and gray, L1, a1, b1 represent the description corresponding to the color of the wallpaper in the Lab color space, and L2, a2, b2 represent the description corresponding to any one of the aforementioned black, white, and gray in the Lab color space. Optionally, L1 and L2 can be obtained based on the aforementioned formula 8.

[0103] In combination with the manner of determining the closeness between the color of the wallpaper and black, white, and gray described in this embodiment, as a possible implementation, the aforementioned first preset condition can include that the color distance between the color of the wallpaper and black is less than a first threshold value, and an example of the first threshold value can be 10. The aforementioned second preset condition can include that the color distance between the color of the wallpaper and white is less than a second threshold value, and an example of the second threshold value can be 10. The aforementioned third preset condition can include that the color distance between the color of the wallpaper and gray is less than a third threshold value, and an example of the third threshold value can be 2.3. It can be understood that the specific values of the first threshold value, the second threshold value, and the third threshold value can be related to the observation error of the human eye to the color, which can be determined by the developer based on the effect of the wallpaper, and can be the same or different, and the embodiments of the present application do not make specific limitations thereto.

[0104] In this implementation, FIG. 9 shows a flowchart of a method for determining the color type of the wallpaper according to an embodiment of the present application. As shown in FIG. 9, the flowchart includes the following steps:

[0105] S901, obtaining the color of the wallpaper described in the Lab color space.

[0106] It can be understood that when the color of the wallpaper is described by default in a color space other than the Lab color space (such as the RGB color space), the color described in the other color space can be converted into the description in the Lab color space. In the subsequent steps of step S901 described in FIG. 9, the color of the wallpaper described in the Lab color space in step S901 is directly referred to as the color of the wallpaper.

[0107] S902, determining whether the color distance between the color of the wallpaper and black is less than a first threshold value.

[0108] If yes, step S903 is performed. If no, step S904 is performed.

[0109] S903, determining that the color type of the wallpaper is black.

[0110] S904, determining whether the color distance between the color of the wallpaper and white is less than a second threshold value.

[0111] If less, step S905 is performed. If greater than or equal to, step S906 is performed.

[0112] S905, it is determined that the color type of the wallpaper is white.

[0113] Optionally, the execution order of step S902, step S903, and step S904, step S905 is not limited. For example: step S902 and step S903 can be performed first, and then step S904 and step S905 are performed. Alternatively, step S904 and step S905 can be performed first, and then step S902 and step S903 are performed.

[0114] S906, it is determined whether the color distance between the color of the wallpaper and the color of gray is less than a third threshold value.

[0115] If less, step S907 is performed. If greater than or equal to, step S908 is performed.

[0116] S907, it is determined that the color type of the wallpaper is gray.

[0117] S908, it is determined that the color type of the wallpaper is color.

[0118] Since gray is between white and black, when the conditions corresponding to black or white are met, the condition of gray may also be met, but the color is closer to black or white as observed by the human eye. Therefore, first determine whether the color distance between black or white meets the corresponding condition, and in the case where the corresponding condition is met, it is determined that the color type of the wallpaper is black or white, and not gray. This makes the judgment result more consistent with the actual effect observed by the human eye, and further makes the type division of the wallpaper more accurate and improves the visual effect of the user.

[0119] The process of determining the color type of the wallpaper is introduced above, and the process of determining the pattern type to which the wallpaper belongs is introduced below. In the following, the pattern type of the wallpaper includes extreme flower wallpaper and non-extreme flower wallpaper (non-extreme flower wallpaper can include extremely light wallpaper, light wallpaper, ordinary flower wallpaper, dark wallpaper, and extremely dark wallpaper).

[0120] In some embodiments, the pattern type of the wallpaper can be divided based on the brightness of the wallpaper.

[0121] In this embodiment, as a possible implementation, the pattern type of the wallpaper can be classified based on at least one of the luminance variance, the lightness level, etc. of the wallpaper. The luminance variance, the lightness level, etc. of the wallpaper can be obtained based on the luminance of the wallpaper. For example, FIG. 10 shows a diagram of classification of the pattern type of the wallpaper according to an embodiment of the present application. As shown in FIG. 10, the wallpaper can be classified based on the luminance variance of the wallpaper. For example, when the luminance variance of the wallpaper satisfies a fourth preset condition, the pattern type of the wallpaper is an extreme pattern wallpaper. Otherwise, when the luminance variance of the wallpaper does not satisfy the fourth preset condition, the pattern type of the wallpaper is a non-extreme pattern wallpaper. For example, the fourth preset condition can include that the luminance variance is greater than or equal to a first variance threshold.

[0122] Then, the non-extreme pattern wallpaper can be classified based on the lightness level of the wallpaper. For example, when the lightness level of the wallpaper satisfies a first preset range, the pattern type of the wallpaper is a light pattern wallpaper. For example, the first preset range can be greater than 0 and less than 1.5. For example, when the lightness level of the wallpaper satisfies a second preset range, the pattern type of the wallpaper is a light color wallpaper. For example, the second preset range can be greater than or equal to 1.5 and less than 1.9. For example, when the lightness level of the wallpaper satisfies a third preset range, the pattern type of the wallpaper is a normal pattern wallpaper. For example, the third preset range can be greater than or equal to 1.9 and less than or equal to 7. It can be understood that the preset ranges in the present embodiment are only illustrative, and in actual application, the developer can set the preset ranges according to actual needs.

[0123] Further, for the wallpaper whose lightness level does not satisfy the first preset range to the third preset range, the wallpaper can be classified based on the luminance variance of the wallpaper. In other words, for the wallpaper whose lightness level satisfies a fourth preset range, the wallpaper can be classified based on the luminance variance of the wallpaper. The fourth preset range is different from any one of the first preset range to the third preset range. For example, the fourth preset range can be greater than 7. For example, when the luminance variance of the wallpaper satisfies a fifth preset condition, the pattern type of the wallpaper is a dark color wallpaper. Otherwise, when the luminance variance of the wallpaper does not satisfy the fifth preset condition, the pattern type of the wallpaper is an extremely dark wallpaper. For example, the fifth preset condition can include that the luminance variance is greater than or equal to a second variance threshold. The second variance threshold is less than the first variance threshold. For example, the first variance threshold can be 6000, and the second variance threshold can be 3000. The first variance threshold and the second variance threshold can be related to the sensitivity of the human eye to color difference.

[0124] The implementation of determining the luminance variance of the wallpaper will be introduced first. The luminance variance of the wallpaper can be used to represent the dispersion degree of the luminance of each pixel point (or pixel block) included in the wallpaper.

[0125] In some embodiments, the brightness variance of the wallpaper, i.e. the brightness variance of the wallpaper, can be determined based on the brightness corresponding to each pixel point contained in the wallpaper, the number of pixel points.

[0126] In some embodiments, to simplify the calculation operation, when calculating the brightness of the wallpaper, the brightness calculation formula can be transformed. As described above in combination with formula 4, formula 5, formula 8, the brightness L of the wallpaper can be obtained * and the relationship between R, G, B, formula 4, formula 5 is brought into formula 8 to obtain L * and the expression between R, G, B, the constants and coefficients in the expression are removed to obtain the brightness L m and the relationship between R, G, B, as formula 14.

[0127] L m = b 21 *R+b 22 *G+b 23 *B Formula 14

[0128] In combination with formula 1, formula 14 can be transformed into formula 15.

[0129] L m = 0.212671 *R+0.715160 *G+0.072169 *B Formula 15

[0130] In this embodiment, the brightness variance of the wallpaper can be determined based on the brightness corresponding to each pixel point contained in the wallpaper, the number of pixel points, etc. For example, the brightness variance S can be calculated based on formula 16 2 .

[0131] In formula 16, represents the brightness L corresponding to the RGB value of each pixel point contained in the wallpaper m , represents the average value of all , and N represents the number of pixel points contained in the wallpaper.

[0132] In this way, after removing the coefficients, constants, etc. in the brightness of the wallpaper, the brightness variance is calculated, which can simplify the calculation operation, improve the calculation speed, and reduce the complexity of dividing the wallpaper pattern type.

[0133] The implementation of determining the lightness degree of the wallpaper will be further introduced below.

[0134] In some embodiments, the lightness of the wallpaper can be determined based on the lightness of the wallpaper and the lightness of the light color (or the reference color). As a specific implementation, the lightness of the wallpaper can be represented by the contrast between the lightness (e.g., relative lightness) of the wallpaper and the lightness (e.g., relative lightness) of the light color. The relative lightness of the wallpaper can be determined based on the average lightness of the wallpaper, e.g., represented by the average lightness of the wallpaper directly, or represented by a processed value (e.g., normalized value) of the average lightness of the wallpaper. The deeper the color of the wallpaper, the smaller the relative lightness of the wallpaper. Similarly, the relative lightness of the light color can be determined based on the average lightness of the light color. Optionally, the relative lightness of the light color can refer to the relative lightness of white, e.g., the relative lightness of white can be 1. Of course, in other implementations, the light color can also be implemented as other lighter colors, e.g., colors close to white, etc.

[0135] Of course, in other implementations, the lightness of the wallpaper can also be represented by the contrast between the lightness of the wallpaper after other operations and the lightness of the light color after the same operations. In other embodiments, the lightness of the wallpaper can also be represented by the contrast between the relative lightness of the wallpaper and the relative lightness of the dark color, e.g., the dark color can refer to a darker color, e.g., black, or a color close to black, etc.

[0136] As a possible example in this embodiment, the contrast C between the relative lightness of the wallpaper and the relative lightness of the light color can satisfy formula 17.

[0137] In formula 17, L q represents the relative lightness of the light color, L q may be a range contained in greater than or equal to 0 and less than or equal to 1, e.g., L q may be greater than or equal to 0.5 and less than or equal to 1, or L q may also be greater than or equal to 0.6 and less than or equal to 1, etc., L q The specific range of L s represents the relative lightness of the wallpaper, L s may be greater than or equal to 0 and less than or equal to 1. For example, in the case where L q is the relative lightness of white, L q has a value of 1, and accordingly, the range of C is 1:1 to 21:1.

[0138] It can be understood that, for each formula described in the embodiments of the present application, the error can be eliminated by adding a constant, and the adding position of the constant is not limited in the embodiments of the present application, which is uniformly described herein. For example, formula 17 can be changed into formula 18.

[0139] In formula 18, A is a preset constant, and the specific value of the preset constant can be set by a developer according to actual requirements.

[0140] For example, the relative brightness of the wallpaper is represented by the normalized value of the average brightness of the wallpaper. FIG. 11 shows a process of determining the relative brightness of the wallpaper according to an embodiment of the present application. As shown in FIG. 11, the values of R, G and B corresponding to each pixel point in the wallpaper are obtained in sequence, and the values of R, G and B are normalized to obtain the standard values of R, G and B. Optionally, the values of R, G and B can be input into the NormalizeRgb function to perform normalization. Specifically, the NormalizeRgb function divides the values of R, G and B by 255 to scale the values of R, G and B to between 0 and 1. Then, the NormalizeRgb function determines whether the result res obtained by dividing the values of R, G and B by 255 is greater than 0.03928. If yes, the following operation is performed: This is applicable to colors in the high-intensity range. Conversely, if the result res is less than or equal to 0.03928, the following operation is performed: The standard values of R, G and B can be obtained through the above two operations.

[0141] Then, the standard values of R, G and B corresponding to each pixel point are input into formula 15 to obtain the brightness corresponding to each pixel point. In this way, the brightness corresponding to each pixel point is calculated based on formula 15 instead of formula 8, which can simplify the calculation process of the relative brightness of the wallpaper and improve the calculation efficiency. Of course, in other implementations, the brightness corresponding to each pixel point can also be calculated based on formula 8. Finally, the average value of the brightness corresponding to the pixel points in the wallpaper is obtained by calculating the average value of the brightness corresponding to the pixel points based on the number of the pixel points in the wallpaper.

[0142] It can be understood that the process shown in FIG. 11 is to calculate the R, G, and B values corresponding to each pixel point included in the wallpaper by performing normalization processing on each of the R, G, and B values. In other embodiments, the dominant color of the wallpaper can be obtained first, and then normalization processing can be performed on the R, G, and B values corresponding to the dominant color of the wallpaper. The R, G, and B standard values corresponding to the normalized dominant color are brought into the formula 15 described above to obtain the brightness corresponding to the dominant color, and the relative brightness of the wallpaper is directly determined based on the brightness corresponding to the dominant color, such as the relative brightness of the wallpaper can be the brightness corresponding to the dominant color. Similarly, the brightness corresponding to the dominant color can also be calculated based on formula 8, and the relative brightness of the wallpaper is determined based on the brightness corresponding to the dominant color.

[0143] Optionally, in the embodiments of the present application, the R value corresponding to the dominant color of the wallpaper can refer to the average value based on the R values corresponding to all pixel points included in the wallpaper. The G and B values corresponding to the dominant color of the wallpaper are the same.

[0144] Of course, in other embodiments, normalization processing such as shown in FIG. 11 can not be performed, and the brightness corresponding to each pixel point can be directly solved based on the R, G, and B values of each pixel point included in the wallpaper, and then the average value of the brightness corresponding to these pixel points is obtained to obtain the relative brightness of the wallpaper.

[0145] In other embodiments, the pattern type of the wallpaper can also be divided directly based on the brightness of the wallpaper, such as setting different brightness ranges, when the brightness of the wallpaper is in different brightness ranges, the pattern type of the wallpaper is different. For example, the first brightness range corresponds to the extreme wallpaper, the second brightness range corresponds to the extremely light wallpaper, the third brightness range corresponds to the light wallpaper, and so on.

[0146] The type of the wallpaper and the way to determine the type of the wallpaper are introduced above. The process of setting the display effect of the UI element on the wallpaper by the mobile phone based on the type of the wallpaper is introduced below.

[0147] Optionally, in the embodiments of the present application, when setting the display effect of the UI element on the wallpaper, the parameters of the UI element can be set to make the UI element achieve the corresponding display effect. The parameters of the UI element are used to determine the display effect of the UI element on the mobile phone. For example, the parameters of the UI element can include one or more of color, brightness, shadow, blur radius, saturation, transparency, etc.

[0148] In some embodiments, the mobile phone can set one or more parameters of UI elements based on one or more parameters of the wallpaper. For example, one or more parameters of the wallpaper may include at least one of brightness and color. One or more parameters of the UI elements may include at least one of brightness, color, color, brightness, shadow blur radius, saturation, and transparency.

[0149] In this embodiment, as one possible implementation, taking the wallpaper parameters including color and the UI element parameters including color as an example, the color of the UI element displayed on the wallpaper can be determined based on the overall wallpaper color. Specifically, the main color of the entire wallpaper can be determined based on the overall wallpaper color, and then the color of the UI element can be set based on the main color of the entire wallpaper. For example, the main color of the entire wallpaper can be directly set as the color of the UI element. In this way, the overall tone of the wallpaper and the tone of the UI element can be consistent, making it more visually appealing. Of course, in other embodiments, the color of the UI element can also be determined based on the color of the wallpaper corresponding to the UI element. It can be understood that in this embodiment, the wallpaper corresponding to the UI element can be a part of the entire wallpaper where the UI element is located, and this part can cover the display position of the UI element on the entire wallpaper.

[0150] As another possible implementation, taking the example that both wallpaper and UI element parameters include brightness, the brightness of the UI element displayed on the wallpaper can be determined based on the brightness of the wallpaper corresponding to the UI element. Optionally, in this implementation, the brightness of the UI element can be negatively correlated with the brightness of the wallpaper corresponding to the UI element. Optionally, the brightness of the wallpaper corresponding to the UI element can be represented by the brightness of the main color of the wallpaper corresponding to the UI element, or by the average brightness of the pixels contained in the wallpaper corresponding to the UI element.

[0151] In this implementation, in some embodiments, the brightness of the UI element can be set based on the brightness of the wallpaper corresponding to the UI element and the wallpaper type. As one possible implementation, when the pattern type of the wallpaper corresponding to the UI element satisfies Type 1, the phone can dim the brightness of the UI element. Optionally, in this embodiment, dimming the brightness of the UI element can mean setting the brightness of the UI element to be less than the brightness of the wallpaper corresponding to the UI element. For example, Type 1 can include at least one of very light wallpaper and light-colored wallpaper.

[0152] As one possible implementation, when the wallpaper pattern type corresponding to a UI element satisfies Type 1, the mobile phone can dim the brightness of the UI element. Optionally, in this embodiment, dimming the brightness of a UI element can mean setting the brightness of the UI element to be less than the brightness of the wallpaper corresponding to that UI element. For example, Type 1 can include at least one of very light wallpaper and light-colored wallpaper.

[0153] In this implementation, as a specific example, the brightness of the darkened UI element can be determined based on a plurality of the preset brightness threshold 1, the brightness of the wallpaper corresponding to the UI element, the brightness reference value, and the like. In this example, the preset brightness threshold 1 can be determined based on the display effect of the UI element. For example, the preset brightness threshold 1 can be 70.

[0154] In this example, as a possible implementation, the brightness reference value can be a preset value, that is, the preset value is irrelevant to the brightness of the wallpaper corresponding to the UI element. Similarly, in this implementation, the preset value can also be determined based on the display effect of the UI element. For example, the preset value can be 100. In this implementation, the brightness of the darkened UI element can be determined based on the preset brightness threshold 1, the brightness of the wallpaper corresponding to the UI element, and the brightness reference value. As a specific example, the brightness of the darkened UI element can be a normalized value of the difference between the preset value and the difference value 1, where the difference value 1 is the difference between the brightness of the wallpaper corresponding to the UI element and the preset brightness threshold 1. Of course, in the example of the present application, the brightness can also not be normalized, or the brightness of the darkened UI element can also be obtained through other operation operations. For example, taking the preset brightness threshold 1 as 70, the preset value as 100, and the brightness of the wallpaper corresponding to the UI element as 90 as an example, the difference value 1 is 20, and the brightness of the darkened UI element is a normalized value of 80, that is, 0.8.

[0155] As another possible implementation, the brightness reference value can also be the brightness of the wallpaper corresponding to the UI element. In this implementation, the brightness of the darkened UI element can be determined based on the preset brightness threshold 1 and the brightness of the wallpaper corresponding to the UI element. For example, the brightness of the darkened UI element can be a normalized value of the difference between the brightness of the wallpaper corresponding to the UI element and the preset brightness threshold 1.

[0156] In this example, as another possible implementation, when the pattern type of the wallpaper corresponding to the UI element satisfies type 2, the phone can brighten the brightness of the UI element. Optionally, in the example of the present application, the phone brightening the brightness of the UI element can mean setting the brightness of the UI element to be greater than the brightness of the wallpaper of the UI element. For example, type 2 can include at least one of a dark wallpaper, an extremely dark wallpaper, and a normal pattern wallpaper.

[0157] In this implementation, as a specific example, the brightness of the brightened UI element can also be determined based on a plurality of the preset brightness threshold 2, the brightness of the wallpaper corresponding to the UI element, the brightness reference value, and the like. Similarly, in this example, the preset brightness threshold 2 can also be determined based on the display effect of the UI element. For example, the preset brightness threshold 2 can be 100. The introduction of the brightness reference value can be referred to the above corresponding introduction.

[0158] Taking the preset value of the luminance reference value as an example, in this embodiment, as a possible implementation, the luminance of the brightened UI element can also be determined based on the preset luminance threshold 2, the luminance of the wallpaper corresponding to the UI element, and the luminance reference value. As a specific embodiment, the luminance of the brightened UI element can be the normalized value of the sum of the preset value and the difference 2. Of course, the luminance can also not be normalized, or the luminance of the brightened UI element can also be obtained through other operation operations. Wherein, the difference 2 is the difference between the preset luminance threshold 2 and the luminance of the wallpaper corresponding to the UI element. For example: taking the preset luminance threshold 2 as 100, the preset value as 100, and the luminance of the wallpaper corresponding to the UI element as 30 as an example, then the difference 2 is 70, and the luminance of the brightened UI element is 1.7.

[0159] Optionally, the preset values used in the scenarios of darkening the UI element and brightening the UI element can be the same or different. The above embodiments are all examples of 100.

[0160] Similarly, as another possible implementation, the luminance reference value can also be the luminance of the wallpaper corresponding to the UI element. In this implementation, the luminance of the brightened UI element can also be determined based on the preset luminance threshold 2 and the luminance of the wallpaper corresponding to the UI element. For example, the luminance of the brightened UI element can be the normalized value of the sum of the luminance of the wallpaper corresponding to the UI element and the preset luminance threshold 2.

[0161] Optionally, the luminance of the wallpaper corresponding to the UI element can be represented by the average luminance of the wallpaper corresponding to the UI element. Optionally, the main color of the wallpaper corresponding to the UI element can be determined first, and the average luminance of the wallpaper corresponding to the UI element can be calculated based on the main color of the wallpaper of the UI element and the above formula 8. The average luminance of the wallpaper corresponding to the UI element can also be calculated in the manner described in FIG. 11, that is, by first determining the luminance corresponding to each pixel point contained in the wallpaper corresponding to the UI element, and then calculating the average luminance of the wallpaper corresponding to the UI element based on the luminance corresponding to each pixel point and the number of these pixel points. Alternatively, the color of the wallpaper corresponding to the UI element represented in the RGB color space can also be converted into a description in the HSL color space, such as hue (H), saturation (S), and lightness (L), by calling the HSLuv library, to obtain the luminance of the wallpaper corresponding to the UI element. For example, the RGB value of the main color of the wallpaper corresponding to the UI element can be converted into the HSL value, and then the average luminance of the wallpaper corresponding to the UI element can be obtained.

[0162] For example, FIG. 12 shows a flowchart of a UI element display method provided by an embodiment of the present application. Taking a mobile phone executing the method as an example, as shown in FIG. 12, the method includes the following steps:

[0163] S1201, the mobile phone receives a user operation.

[0164] The user operation is an operation for setting various wallpapers (such as lock screen wallpapers, desktop wallpapers, and wallpapers on various UI interfaces) for the mobile phone. For example, the user operation can be a key operation, a gesture operation, a voice operation, or the like.

[0165] For example, FIG. 13 shows a scenario for setting a wallpaper for a mobile phone according to an embodiment of the present application. As shown in FIG. 13, the user can perform the user operation through an application for setting a wallpaper installed on the mobile phone. Taking the application for setting a wallpaper as a settings application for example, as shown in (1) of FIG. 13, the mobile phone can display a running interface 1300 of the settings application, and the running interface 1300 can include one or more options, and different options can be used to perform different setting operations. The one or more options include a desktop and wallpaper option 1301, and the desktop and wallpaper option 1301 can be used to set a wallpaper.

[0166] For example, when the mobile phone detects a click operation of the user on the desktop and wallpaper option 1301, in response to the operation, as shown in (2) of FIG. 13, the mobile phone can present a desktop and wallpaper interface 1310, and the desktop and wallpaper interface 1310 can include one or more controls, such as a wallpaper control 1311, a magazine lock screen control, an off-screen display control, and the like. The user can set a wallpaper through the wallpaper control 1311, the magazine lock screen control, or the like. Taking the wallpaper control 1311 as an example, when the mobile phone detects a click operation of the user on the wallpaper control 1311, in response to the operation, as shown in (3) of FIG. 13, the mobile phone can present one or more wallpapers for the user to select, and optionally, the one or more wallpapers can include system-provided wallpapers or user-defined wallpapers. The user can select one of the wallpapers to set as one or more of a desktop wallpaper and a lock screen wallpaper of the mobile phone.

[0167] For example, FIG. 14 shows another scenario for setting a wallpaper for a mobile phone according to an embodiment of the present application. In this example, the user can directly perform a wallpaper switching operation on an interface presenting a dynamic wallpaper, and the wallpaper switching operation is the operation for setting a wallpaper for the mobile phone. As shown in FIG. 14, the mobile phone can display a lock screen interface 1400, and the wallpaper applied by the lock screen interface 1400 is a dynamic wallpaper. The user can perform a left or right swipe operation on the lock screen interface 1400 to switch the wallpaper, and in response to the operation of the user, the mobile phone can directly switch the set lock screen wallpaper.

[0168] It can be understood that FIG. 13 and FIG. 14 only show two examples of setting a wallpaper for a mobile phone, and the wallpaper can also be set in other manners, which are not limited in the embodiments of the present application.

[0169] S1202, the mobile phone acquires a pattern type to which the wallpaper of the region corresponding to the UI element belongs.

[0170] For example, the mobile phone can determine the wallpaper of the region corresponding to the UI element (hereinafter referred to as the wallpaper corresponding to the UI element) based on the size, shape, position displayed on the display screen, etc. of the UI element. Optionally, the wallpaper corresponding to the UI element (which can be referred to as a second wallpaper) can be a partial region of the wallpaper set in step S1201. For example, taking the clock text as an example, as shown in FIG. 1, the wallpaper corresponding to the clock text can be the wallpaper of the region identified by the rectangular frame 102.

[0171] Optionally, the pattern type of the wallpaper corresponding to the UI element can be determined by the mobile phone or can be determined by other devices and sent to the mobile phone. For details of the implementation of determining the pattern type of the wallpaper corresponding to the UI element, refer to the above description of the implementation of determining the pattern type of the wallpaper.

[0172] In one possible case, the pattern type of the wallpaper corresponding to the UI element can be an extreme flower wallpaper. In this case, the mobile phone can perform step S1203.

[0173] S1203, the mobile phone sets the color of the UI element to white and adds a shadow to the UI element.

[0174] In another possible case, the pattern type of the wallpaper corresponding to the UI element can be a non-extreme flower wallpaper, such as one of an extremely light wallpaper, a light wallpaper, a normal flower wallpaper, a dark wallpaper, and an extremely dark wallpaper. In this case, the mobile phone can perform step S1204 and subsequent steps.

[0175] In this step, the mobile phone can also set the brightness of the UI element to a preset brightness 1. In the embodiments of the present application, the preset brightness 1 can be a brightness value greater than the reference brightness. For example, taking the reference brightness as the normalized brightness value 1 as an example, the preset brightness 1 can be 1.3, etc. It can be understood that in the embodiments of the present application, the sizes of the preset brightness 1 and the reference brightness can be determined by the developer according to the actual display effect of the UI element.

[0176] In this way, by judging the pattern type of the wallpaper corresponding to the UI element, in the case of an extreme flower wallpaper, the UI element is directly colored and the preset brightness is set, etc. The required rendering effect can be quickly obtained, the efficiency can be improved, and the resources can be saved.

[0177] S1204, the mobile phone acquires a color type to which the wallpaper corresponding to the UI element belongs.

[0178] As a possible implementation, the color type to which the wallpaper corresponding to the UI element belongs can be determined based on the dominant color of the wallpaper corresponding to the UI element, that is, the dominant color of the wallpaper corresponding to the UI element is used to represent the color of the wallpaper corresponding to the UI element. Alternatively, the dominant color of the wallpaper corresponding to the UI element can be represented by the average of the RGB values of all the pixel points included in the wallpaper corresponding to the UI element.

[0179] Similarly, the operation of determining the color type to which the wallpaper corresponding to the UI element belongs can be performed by the mobile phone or by another device, and the mobile phone obtains the color type to which the wallpaper corresponding to the UI element belongs from the other device. For the implementation of determining the color type to which the wallpaper corresponding to the UI element belongs, refer to the specific implementation of determining the color type of the wallpaper described above.

[0180] In a possible case, the color type to which the wallpaper corresponding to the UI element belongs can be any one of black, white, and gray. In this case, the mobile phone can perform step S1205.

[0181] S1205, the mobile phone obtains the color type to which the entire wallpaper belongs.

[0182] It can be understood that the entire wallpaper (which can be referred to as a first wallpaper) can be the wallpaper set for the mobile phone by the user operation described in step S1201.

[0183] As a possible implementation, the color type to which the entire wallpaper belongs can also be determined based on the dominant color of the entire wallpaper. That is, the dominant color of the entire wallpaper is used to represent the color of the entire wallpaper. Alternatively, the dominant color of the entire wallpaper can be represented by the average of the RGB values of all the pixel points included in the entire wallpaper.

[0184] For other descriptions of step S1205, refer to the related descriptions of step S1204.

[0185] In a possible case, the color type to which the entire wallpaper belongs can be any one of black, white, and gray. In this case, the mobile phone can perform steps S1206 to S1207.

[0186] S1206, in the case where the color type to which the wallpaper corresponding to the UI element belongs is black or gray, the mobile phone sets the color of the UI element to white.

[0187] In this step, the mobile phone can also set the UI element to a preset brightness 1. For this specific implementation, refer to the specific implementation of step S1203. Alternatively, in this step, the mobile phone can not add a shadow to the UI element.

[0188] It can be understood that the embodiments of the present application are all taken as an example of setting the UI element as white (which can be taken as an example of preset value), and in other embodiments, it can also be set as other preset colors, such as colors close to white and the like.

[0189] S1207, in the case that the color type to which the wallpaper corresponding to the UI element belongs is white, the phone sets the brightness of the UI element as a preset brightness 2.

[0190] The preset brightness 2 is less than the preset brightness 1. In the embodiments of the present application, the preset brightness 2 can be a brightness value less than the reference brightness. For example, still taking the reference brightness as the normalized brightness value 1, the preset brightness 2 can be 0.7 and the like. It can be understood that in the embodiments of the present application, the size of the preset brightness 2 can also be determined by the developer according to the actual display effect of the UI element.

[0191] Optionally, in step S1207, the phone can also set the color of the UI element as white. Optionally, in this step, the phone can not add a shadow to the UI element.

[0192] In another possible case, the color type to which the entire wallpaper belongs can be color. In this case, the phone can perform step S1208.

[0193] S1208, the phone sets one or more parameters corresponding to the UI element based on one or more parameters of the wallpaper.

[0194] For example, the one or more parameters in step S1208 can include at least one of color, brightness and the like. For the implementation of this step, reference can be made to the implementation of setting one or more parameters of the UI element based on one or more parameters of the wallpaper described above.

[0195] Optionally, in step S1208, the phone does not add a shadow to the UI element.

[0196] In another possible case, the color type to which the wallpaper corresponding to the UI element belongs can be color. In this case, the phone can perform steps S1209 to S1211.

[0197] S1209, in the case that the pattern type of the wallpaper corresponding to the UI element is ordinary flower wallpaper, the phone sets the brightness of the UI element as the preset brightness 1 and adds a shadow to the UI element.

[0198] S1210, in the case that the pattern type of the wallpaper corresponding to the UI element is any one of light color wallpaper, dark color wallpaper and extremely dark wallpaper, the phone sets the brightness of the UI element as the preset brightness 1.

[0199] Optionally, in step S1210, the phone does not add a shadow to the UI element.

[0200] In this way, the effect of the UI element is set in combination with the color type of the wallpaper corresponding to the UI element and the color type of the entire wallpaper, such as directly setting the effect of the UI element based on the color of the wallpaper when the color type of the entire wallpaper is color, and then performing secondary judgment based on the color type of the wallpaper corresponding to the UI element when the color type of the entire wallpaper is one of black, white, gray, and the like, so that different settings are performed in different scenarios, the judgment process is more detailed, and the display effect of the UI element can be further improved.

[0201] S1211, in the case where the pattern type of the wallpaper corresponding to the UI element is very light wallpaper, the phone sets the brightness of the UI element to a preset brightness 2.

[0202] Optionally, in step S1211, the phone does not add a shadow to the UI element.

[0203] Optionally, in steps S1209 to S1211, the phone can also set the color of the UI element to white.

[0204] It can be understood that the phone can set the display effect of the UI element based on multiple conditions such as the pattern type and color type of the wallpaper of the region corresponding to the UI element, and the pattern type and color type of the entire wallpaper, and the present embodiment does not limit the order of execution of the foregoing conditions. In FIG. 12, the order is taken as an example, in which the pattern type of the wallpaper of the region corresponding to the UI element is used first, then the color type of the wallpaper of the region corresponding to the UI element, and then the color type of the entire wallpaper.

[0205] Optionally, in the flow shown in FIG. 12, in addition to setting the color, shadow, and brightness of the UI element, the phone can also set one or more of the transparency, blur radius, and saturation of the UI element. For example, for the scenario described in step S1209, the phone can set the blur radius of the UI element to a first preset radius, such as 50 or the like. For the scenario described in step S1211, the phone can set the blur radius of the UI element to a second preset radius, such as 20 or the like. The specific setting range of this parameter can be determined by the developer according to the display effect of the UI element, and the present embodiment does not limit the specific setting range.

[0206] In this way, the UI element is rendered according to the color type and the pattern type of the wallpaper corresponding to the UI element, more factors are considered, the calculation is more accurate, the color type of the wallpaper can reflect the depth of the color of the wallpaper, that is, the effect required by the UI element can be determined based on the depth of the color of the wallpaper, algorithm redundancy can be reduced, and more accurate parameter setting of the UI element can be obtained, so that the display effect of the UI element is better, and the visual effect of the user is better.

[0207] Further, after the mobile phone executes the process shown in FIG. 12, the mobile phone can also display the wallpaper and the UI element located on the wallpaper.

[0208] In the following, taking the clock and the calendar text as examples, FIGS. 15 to 21 show some effect diagrams provided by the embodiments of the present application. It can be understood that FIGS. 15 to 21 only show the difference between the display effect of the clock and the calendar text after the technical solution provided by the embodiments of the present application is applied and the existing effect, and the filling and the pattern in FIGS. 15 to 21 only represent the effect of the wallpaper and do not have actual meaning.

[0209] Optionally, (2) in FIG. 15 to (2) in FIG. 21 can be taken as an example of the first interface.

[0210] FIG. 15 is an effect diagram of the clock and the calendar text in the case where the pattern type of the wallpaper (such as wallpaper 1500) corresponding to the clock and the calendar text is an extreme pattern wallpaper. In (1) in FIG. 15, an existing effect diagram is shown. After the blur radius of the clock text and the calendar text 1501 is set to 50, the saturation is set to 1.5, the brightness is set to 1.3, the font color is set to white (such as #ffffff can be used to represent), the font transparency is set to 0, and the shadow is added by executing the scheme shown in FIG. 12, (2) in FIG. 15 shows an effect diagram provided by the embodiments of the present application.

[0211] It can be understood that in the embodiments of the present application, the set values of some parameters (such as blur radius, saturation, brightness, and transparency) of the clock and the calendar text shown in FIGS. 15 to 21 are only exemplary and do not constitute a limitation on the embodiments of the present application.

[0212] It can also be understood that in the embodiments of the present application, the display effect of the clock and the calendar text is set at the same time as an example, and in other embodiments, the display effect of the clock and the calendar text can be set respectively.

[0213] Fig. 16 is a schematic diagram of the effect of the clock and calendar text in the case where the color type of the wallpaper (such as wallpaper 1600) corresponding to the clock and calendar text is color, and the pattern type is ordinary floral wallpaper. In Fig. 16, (1) is a schematic diagram of an existing effect. Assuming that the dominant color of the wallpaper 1600 is {"red": 40, "green": 32, "blue": 24, "alpha": 255}, based on the formula 13 described above, the color distance ΔE1 between the dominant color of the wallpaper 1600 and black is 14.82049425368101, the color distance ΔE2 between the dominant color of the wallpaper 1600 and white is 87.37830307317371, and the color distance ΔE3 between the dominant color of the wallpaper 1600 and gray is 7.2548525481370305, and thus it can be determined that the color type of the wallpaper 1600 is color. Similarly, by calculating the luminance variance and lightness of the wallpaper 1600, it can be determined that the wallpaper 1600 is ordinary floral wallpaper. Further, by executing the scheme shown in Fig. 12, the blur radius of the clock text and the calendar text 1601 is set to 50, the saturation is set to 1.5, the brightness is set to 1.3, the font color is set to white, the font transparency is set to 0, and a shadow is added, and then (2) in Fig. 16 shows a schematic diagram of an effect provided by an embodiment of the present application.

[0214] It can be understood that in the embodiments of the present application, "red", "green", and "blue" respectively represent the values of R, G, and B in the RGB color space corresponding to the color. The value of "alpha" represents the transparency.

[0215] Fig. 17 is a schematic diagram of the effect of the clock and calendar text in the case where the color of the wallpaper (such as wallpaper 1700) corresponding to the clock and calendar text is color, and the pattern type is very deep wallpaper. In Fig. 17, (1) is a schematic diagram of an existing effect. Assuming that the dominant color of the wallpaper 1700 is {"red": 24, "green": 32, "blue": 24, "alpha": 255}, based on the formula 13 described above, the color distance ΔE1 between the dominant color of the wallpaper 1700 and black is 13.303081712236756, the color distance ΔE2 between the dominant color of the wallpaper 1700 and white is 89.05892918934688, and the color distance ΔE3 between the dominant color of the wallpaper 1700 and gray is 7.135654958011681, and thus it can be determined that the color type of the wallpaper 1700 is color. Similarly, by calculating the luminance variance and lightness of the wallpaper 1700, it can be determined that the wallpaper 1700 is very deep wallpaper. Further, by executing the scheme shown in Fig. 12, the blur radius of the clock text and the calendar text 1701 is set to 50, the saturation is set to 1.5, the brightness is set to 1.3, the font color is set to white, the font transparency is set to 0, and no shadow is added, and then (2) in Fig. 17 shows a schematic diagram of an effect provided by an embodiment of the present application.

[0216] Fig. 18 is a schematic diagram of the effect of the clock and calendar text in the case where the color of the wallpaper (such as wallpaper 1800) corresponding to the clock and calendar text is colored, and the pattern type of the wallpaper is very light wallpaper. In Fig. 18, (1) is a schematic diagram of an existing effect. For example, if the main color of the wallpaper 1800 is {"red": 200, "green": 216, "blue": 232, "alpha": 255}, then the color distance ΔE1 between the main color of the wallpaper 1800 and black is 86.18494105155094, the color distance ΔE2 between the main color of the wallpaper 1800 and white is 17.471189652988212, and the color distance ΔE3 between the main color of the wallpaper 1800 and gray is 9.912463292814712, and thus it can be determined that the color type of the wallpaper 1800 is colored. Similarly, by calculating the brightness variance and lightness of the wallpaper 1800, it can be determined that the wallpaper 1800 is very light wallpaper. Further, by performing the scheme shown in Fig. 12, the blur radius of the clock text and the calendar text 1801 is set to 20, the saturation is set to 1.5, the brightness is set to 0.6, the font color is set to white, the font transparency is set to 0, and no shadow is added, and then (2) in Fig. 18 shows a schematic diagram of an effect provided by an embodiment of the present application. It can be understood that in Figs. 15 to 20, although the color of the clock and calendar text is white, due to the influence of the shadow, brightness or other parameters, the effect presented may also be different.

[0217] Fig. 19 is a schematic diagram of the effect of the clock and calendar text in the case where the pattern type of the wallpaper (such as wallpaper 1900) corresponding to the clock and calendar text is dark wallpaper, and the color type of the wallpaper corresponding to the clock and calendar text is black, and the color type of the entire wallpaper (such as wallpaper 1910) is also black. In Fig. 19, (1) is a schematic diagram of an existing effect. For example, if the main color of the wallpaper 1900 is {"red": 16, "green": 16, "blue": 16, "alpha": 255}, then the color distance ΔE1 between the main color of the wallpaper 1900 and black is 4.680445234629055, the color distance ΔE2 between the main color of the wallpaper 1900 and white is 95.31955476537146, and the color distance ΔE3 between the main color of the wallpaper 1900 and gray is 0.000002172841958421875, and since ΔE1 is satisfied first, then it can be determined that the color type of the wallpaper 1900 is black.

[0218] Assuming the main color of the wallpaper 1910 is {"red": 24, "green": 16, "blue": 24, "alpha": 255}, the color distance ΔE1 between the main color of the wallpaper 1910 and black is 8.577264915338299, the color distance ΔE2 between the main color of the wallpaper 1910 and white is 94.52026763212658, and the color distance ΔE3 between the main color of the wallpaper 1910 and gray is 6.411600698450731, calculated based on the formula 13 described above, and it is determined that the color type of the wallpaper 1910 is also black. Similarly, by calculating the brightness variance and lightness of the wallpaper 1900, it is determined that the wallpaper 1900 is a dark wallpaper. Further, by performing the scheme shown in FIG. 12, the blur radius of the clock text and the calendar text 1901 is set to 50, the saturation is set to 1.5, the brightness is set to 1.3, the font color is set to white, the font transparency is set to 0, and no shadow is added, and the effect schematic diagram provided by the embodiment of the present application is shown in (2) of FIG. 19.

[0219] FIG. 20 is an effect schematic diagram of the clock and the calendar text in the case where the pattern type of the wallpaper corresponding to the clock and the calendar text (such as the wallpaper 2000) is light and very light wallpaper, and the color type of the wallpaper corresponding to the clock and the calendar text is white, and the color type of the entire wallpaper (such as the wallpaper 2010) is also white. In FIG. 20, (1) is a prior effect schematic diagram. Assuming that the main color of the wallpaper 2000 is {"red": 240, "green": 240, "blue": 240, "alpha": 255}, the color distance ΔE1 between the main color of the wallpaper 2000 and black is 94.79624952280146, the color distance ΔE2 between the main color of the wallpaper 2000 and white is 5.203750477228334, and the color distance ΔE3 between the main color of the wallpaper 2000 and gray is 0.000017145288019517784, calculated based on the formula 13 described above, and since ΔE2 is satisfied first, it is determined that the color type of the wallpaper 2000 is white.

[0220] Assuming the main color of the wallpaper 2010 is {"red": 240, "green": 240, "blue": 240, "alpha": 255}, the color distance ΔE1 between the main color of the wallpaper 2010 and black is 94.79624952280146, the color distance ΔE2 between the main color of the wallpaper 2010 and white is 5.203750477228334, and the color distance ΔE3 between the main color of the wallpaper 2010 and gray is 0.000017145288019517784, since ΔE2 is satisfied first, it can be determined that the color type of the wallpaper 2010 is also white. Similarly, by calculating the brightness variance and the lightness of the wallpaper 2000, it can be determined that the wallpaper 2000 is a very light wallpaper. Further, by performing the scheme shown in FIG. 12, the blur radius of the clock text and the calendar text 2001 is set to 20, the saturation is set to 1.5, the brightness is set to 0.7, the font color is set to white, the font transparency is set to 0, and no shadow is added, FIG. 20(2) is a schematic diagram of an effect provided by an embodiment of the present application.

[0221] FIG. 21 is a schematic diagram of an effect of a clock and a calendar text in a scenario where the pattern type of the wallpaper corresponding to the clock and the calendar text (such as the wallpaper 2100) is a normal flower wallpaper, and the color type of the wallpaper corresponding to the clock and the calendar text is gray, and the color type of the entire wallpaper (such as the wallpaper 2110) is colorful. In FIG. 21(1) is a schematic diagram of an effect provided by an existing technology. Assuming the main color of the wallpaper 2100 is {"red": 32, "green": 32, "blue": 32, "alpha": 255}, the color distance ΔE1 between the main color of the wallpaper 2100 and black is 12.250031043191246, the color distance ΔE2 between the main color of the wallpaper 2100 and white is 87.74996895680965, and the color distance ΔE3 between the main color of the wallpaper 2100 and gray is 0.000004371582263659266, it can be determined that the color type of the wallpaper 2100 is gray.

[0222] Assuming the dominant color of the wallpaper 2110 is {"red": 32, "green": 32, "blue": 24, "alpha": 255}, the color distance ΔE1 between the dominant color of the wallpaper 2110 and black is 13.305727592484635, the color distance ΔE2 between the dominant color of the wallpaper 2110 and white is 88.1898784747354, and the color distance ΔE3 between the dominant color of the wallpaper 2110 and gray is 5.752552125000557, and thus it can be determined that the color type of the wallpaper 2110 is color. Similarly, by calculating the brightness variance and lightness of the wallpaper 2100, it can be determined that the wallpaper 2100 is a normal floral wallpaper. Further, by performing step S1208 shown in FIG. 12, the dominant color of the wallpaper 2110 is used as the color of the clock and the calendar text 2101. Then, the HSL value of the dominant color of the wallpaper 2100 can be obtained by calling the HSLuv library, such as {"hsLuvH": "53.7", "hsLuvS": "35.0", "hsLuvL": "36.2"}. It can be understood that in the embodiments of the present application, "hsLuvH", "hsLuvS", and "hsLuvL" represent the values of H, S, and L of the HSL color space, respectively.

[0223] Further, the brightness of the wallpaper 2100 can be obtained as 36.2. Since the pattern type of the wallpaper 2100 is a normal floral wallpaper, which satisfies the above type 2, the brightness of the clock and the calendar text 2101 is brightened. For example, the difference between 36.2 and the preset brightness threshold 2 (for example, 100) is 63.8, and thus the brightness of the clock and the calendar text 2101 is 1.6 by increasing 63.8 based on the brightness reference value (for example, the preset value 100) and normalizing. Further, the blur radius of the clock and the calendar text 2101 is set to 50, the saturation is set to 1.5, the brightness is set to 1.6, the font color is set to #202018, the font transparency is set to 0, and no shadow is added, and thus FIG. 21 (2) is an effect diagram provided by the embodiments of the present application.

[0224] For example, FIG. 22a shows a flow diagram of another UI element display method provided by the embodiments of the present application, which can be applied to an electronic device with a display screen. As shown in FIG. 22a, the method includes the following steps:

[0225] S2201, receiving an operation of setting a first wallpaper for the electronic device.

[0226] For example, the operation can be various key operations, gesture operations, voice operations, etc. For details of the operation, reference can be made to the related description of step S1201 shown in FIG. 12.

[0227] S2202, in response to the operation, the electronic device displays a first interface.

[0228] The first interface includes the first wallpaper and a UI element displayed on the first wallpaper, and a value of a display parameter of the UI element corresponds to at least one of a wallpaper type of the first wallpaper and a wallpaper type of the second wallpaper. The value of the display parameter of the UI element determines a display effect of the UI element on the electronic device. The second wallpaper is a region on the first wallpaper where the UI element is located, and the wallpaper type is obtained based on at least one of brightness and color of the wallpaper.

[0229] In some embodiments, the wallpaper type includes at least one of a color type and a pattern type, the color type is obtained based on a color of the wallpaper, and the color type includes a preset reference color and a non-reference color. Alternatively, the color type can be determined based on a degree of similarity between the color of the wallpaper and the reference color. For example, when the degree of similarity between the color of the wallpaper and the reference color meets a preset condition, the color type of the wallpaper is the reference color. Or, when the degree of similarity between the color of the wallpaper and the reference color does not meet the preset condition, the color type of the wallpaper is the non-reference color. In some embodiments, the degree of similarity between the color of the wallpaper and the reference color is represented by a Euclidean distance between the color of the wallpaper and the reference color, and the reference color and the color of the wallpaper are both described in a Lab color space. For details of this specific implementation, refer to the description above.

[0230] The pattern type can be obtained based on brightness of the wallpaper, and for details of the pattern type and implementation of determining the pattern type, refer to the description above.

[0231] In some embodiments, before performing step S2202 shown in FIG. 22a, the electronic device can further obtain a pattern type of the second wallpaper, and when the pattern type of the second wallpaper is a non-extreme pattern, obtain a color type of the second wallpaper.

[0232] In some embodiments, after obtaining the color type of the second wallpaper, when the color type of the second wallpaper is the reference color, the electronic device can further obtain a color type of the first wallpaper, and set a value of the display parameter of the UI element based on the color type of the first wallpaper and the color type of the second wallpaper.

[0233] In some embodiments, the display parameter of the UI element includes brightness, and before performing step S2202 shown in FIG. 22a, the electronic device can further obtain a value of brightness of the second wallpaper, and set a value of the brightness of the UI element based on the value of the brightness of the second wallpaper. Or, the display parameter of the UI element includes color, and before performing step S2202 shown in FIG. 22a, the electronic device can further obtain a value of color of the first wallpaper, and set a value of the color of the UI element based on the value of the color of the first wallpaper.

[0234] The above mainly introduces the schemes provided by the embodiments of the present application from the perspective of the method. It can be understood that, in order to implement the above functions, the electronic device comprises a hardware structure and / or a software module corresponding to the execution of each function. The units and algorithm steps of each example described in combination with the embodiments disclosed in the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a certain function is implemented in hardware or computer driven hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the technical solutions of the embodiments of the present application.

[0235] The embodiments of the present application can divide the functional modules of the electronic device according to the above method examples. For example, each functional module can be divided according to each function, or two or more functions can be integrated in one processing unit. The integrated unit can be in the form of hardware or software functional module. It should be noted that the division of the units in the embodiments of the present application is illustrative, and is only a logical functional division. Actual implementation can have another division manner.

[0236] As shown in FIG. 22b, it is a structural schematic diagram of an electronic device provided by the embodiments of the present application. The electronic device 2200 can be used to implement the methods described in the above various method embodiments. For example, the electronic device 2200 can specifically include a processing unit 2201 and a display unit 2202.

[0237] The processing unit 2201 is configured to support the electronic device 2200 to perform the processing functions described in any one of FIGS. 1 to 22a.

[0238] The display unit 2202 is configured to support the electronic device 2200 to perform the display functions described in any one of FIGS. 1 to 22a.

[0239] Optionally, the electronic device 2200 shown in FIG. 22b can also include a communication unit (not shown in FIG. 22b), which is configured to support the electronic device 2200 to perform the steps of communication between the electronic device and other electronic devices in the embodiments of the present application.

[0240] Optionally, the electronic device 2200 shown in FIG. 22b can also include a storage unit 2203, which stores programs or instructions. When the processing unit 2201 executes the programs or instructions, the electronic device 2200 shown in FIG. 22b can perform the methods shown in the above method embodiments.

[0241] The technical effects of the electronic device 2200 shown in FIG. 22b can refer to the technical effects of the methods shown in the above method embodiments, which will not be repeated here. The processing unit 2201 involved in the electronic device 2200 shown in FIG. 22b can be implemented by a processor or a processor-related circuit component, and can be a processor or a processing module. The communication unit can be implemented by a transceiver or a transceiver-related circuit component, and can be a transceiver or a transceiving module. The display unit 2202 can be implemented by a display screen-related component.

[0242] The embodiments of the present application also provide a chip system, as shown in FIG. 23, which includes at least one processor 2301 and at least one interface circuit 2302. The processor 2301 and the interface circuit 2302 can be interconnected by a line. For example, the interface circuit 2302 can be used to receive signals from other devices. For another example, the interface circuit 2302 can be used to send signals to other devices (such as the processor 2301). Illustratively, the interface circuit 2302 can read instructions stored in a memory and send the instructions to the processor 2301. When the instructions are executed by the processor 2301, the electronic device can perform each step performed by the electronic device in the above embodiments. Of course, the chip system can also include other discrete devices, which are not limited in the embodiments of the present application.

[0243] Optionally, the processor in the chip system can be one or more. The processor can be implemented by hardware or software. When implemented by hardware, the processor can be a logic circuit, an integrated circuit, etc. When implemented by software, the processor can be a general-purpose processor, which is implemented by reading software codes stored in a memory.

[0244] Optionally, the memory in the chip system can also be one or more. The memory can be integrated with the processor, or can be separately arranged from the processor, which is not limited in the present application. Illustratively, the memory can be a non-transient processor, such as a read-only memory (ROM), which can be integrated on the same chip as the processor, or can be separately arranged on different chips, and the type of the memory and the arrangement of the memory and the processor are not limited in the present application.

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

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

[0247] The embodiments of the present application also provide a computer storage medium, which stores computer instructions, and when the computer instructions run on an electronic device, the electronic device executes the method in the above method embodiments.

[0248] The embodiments of the present application provide a computer program product, which includes a computer program or instructions, and when the computer program or instructions run on a computer, the computer executes the method in the above method embodiments.

[0249] In addition, the embodiments of the present application also provide a device, which can be a chip, a component or a module. The device can include a processor and a memory connected to each other. The memory is used to store computer execution instructions. When the device runs, the processor can execute the computer execution instructions stored in the memory, so that the device executes the method in the above method embodiments.

[0250] The electronic device, the computer storage medium, the computer program product or the chip provided by the embodiments of the present application are all used to execute the corresponding method provided above, so the beneficial effects that can be achieved are referable to the beneficial effects in the corresponding method provided above, which will not be described here.

[0251] Through the description of the above embodiments, those skilled in the art can understand that, for the convenience and brevity of description, only the division of the above functional modules is exemplified, and in actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0252] In several embodiments provided in the present application, it should be understood that the disclosed device and method can be implemented in other ways. The embodiments can be combined or referred to each other without conflict. The device embodiments described above are only schematic, for example, the division of the modules or units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed each other can be indirect coupling or communication connection through some interface, device or unit, which can be electrical, mechanical or other forms.

[0253] The units described as separate components can or can not be physically separate, and the components shown as units can be one physical unit or multiple physical units, that is, can be located in one place, or can be distributed to multiple different places. Part or all of the units can be selected according to actual needs to achieve the purpose of the embodiment scheme.

[0254] In addition, each functional unit in each embodiment of the present application can be integrated in one processing unit, or each unit can exist physically, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of software functional unit.

[0255] The integrated unit, if realized in the form of software functional unit and sold or used as an independent product, can be stored in a readable storage medium. Based on such understanding, the technical scheme of the embodiment of the present application essentially or the part of the prior art that makes a contribution or all or part of the technical scheme can be embodied in the form of a software product, which is stored in a storage medium and includes a plurality of instructions for causing an apparatus (which can be a single chip microcomputer, a chip, etc.) or a processor to execute all or part of the steps of the method of each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various storage medium that can store program codes.

[0256] The above merely provides the specific implementation of the present application, but the protection scope of the present application is not limited thereto, any person skilled in the art can easily think of the changes or replacements within the technical range disclosed by the present application, which should be covered in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A UI element display method, characterized by, Applied to an electronic device with a display screen, the method comprises: In response to an operation of setting a first wallpaper for the electronic device, a first interface is displayed, the first interface containing the first wallpaper and a UI element displayed on the first wallpaper, a value of a display parameter of the UI element corresponding to at least one of a wallpaper type of the first wallpaper and a wallpaper type of a second wallpaper, the second wallpaper being an area on the first wallpaper where the UI element is located, the wallpaper type being obtained based on at least one of brightness and color of the wallpaper.

2. The method of claim 1, wherein, The wallpaper type comprises at least one of a color type and a pattern type, the color type being obtained based on color of the wallpaper, the color type comprising a preset reference color and a non-reference color; the pattern type being obtained based on brightness of the wallpaper, the pattern type comprising an extreme pattern wallpaper and a non-extreme pattern wallpaper, the non-extreme pattern wallpaper comprising at least one of an extremely light wallpaper, a light wallpaper, a normal pattern wallpaper, a dark wallpaper and an extremely dark wallpaper.

3. The method of claim 2, wherein, The color type is determined based on a degree of similarity between color of the wallpaper and the reference color.

4. The method of claim 3, wherein: when the degree of similarity between the color of the wallpaper and the reference color meets a preset condition, the color type of the wallpaper is the reference color; or when the degree of similarity between the color of the wallpaper and the reference color does not meet the preset condition, the color type of the wallpaper is the non-reference color.

5. The method according to claim 3 or 4, characterized in that, The degree of similarity between the color of the wallpaper and the reference color is represented by a Euclidean distance between the color of the wallpaper and the reference color, the reference color and the color of the wallpaper being described in a Lab color space.

6. The method of claim 2, wherein, The pattern type is determined based on at least one of a brightness variance of the wallpaper and a lightness degree of the wallpaper, the brightness variance of the wallpaper being used to represent a degree of dispersion of brightness of each pixel point contained in the wallpaper, the lightness degree of the wallpaper being represented by a contrast between brightness of the wallpaper and brightness of a reference color.

7. The method according to any one of claims 2-6, characterized in that, Before the first interface is displayed, the method further comprises: obtaining the pattern type of the second wallpaper; when the pattern type of the second wallpaper is the non-extreme pattern wallpaper, obtaining the color type of the second wallpaper.

8. The method of claim 7, wherein, After the color type of the second wallpaper is obtained, the method further comprises: when the color type of the second wallpaper is the reference color, obtaining the color type of the first wallpaper; setting the value of the display parameter of the UI element based on the color type of the first wallpaper and the color type of the second wallpaper.

9. The method according to any one of claims 1-8, characterized in that, The UI element comprises one or more of clock text, calendar text, application icons, names corresponding to the application icons, lock screen components, lock screen application notification bars, status bars, signal identifiers and power indicators; the display parameter of the UI element comprises one or more of brightness, color, shadow, blur radius, saturation and transparency.

10. The method of claim 9, wherein: The display parameter of the UI element includes brightness; before displaying the first interface, the method further includes: obtaining the value of brightness of the second wallpaper; setting the value of brightness of the UI element based on the value of brightness of the second wallpaper; Or, the display parameter of the UI element includes color, before displaying the first interface, the method further includes: obtaining the value of color of the first wallpaper, setting the value of color of the UI element based on the value of color of the first wallpaper.

11. The method of claim 10, wherein, The value of color of the UI element is the same as the value of color of the first wallpaper.

12. The method according to any one of claims 2-11, characterized in that, The reference color includes black, white, and gray, and the display parameter of the UI element includes brightness; When the pattern type of the second wallpaper is extreme flower wallpaper, or when the pattern type of the second wallpaper is one of normal flower wallpaper, light color wallpaper, dark color wallpaper, and extreme deep wallpaper and the color type is non-reference color, or when the color type of the second wallpaper is one of black and gray, the pattern type is non-extreme flower wallpaper, and the color type of the first wallpaper is reference color, the value of brightness of the UI element is a first value; Or, When the pattern type of the second wallpaper is extreme light wallpaper and the color type is non-reference color, or when the color type of the second wallpaper is white, the pattern type is non-extreme flower wallpaper, and the color type of the first wallpaper is reference color, the value of brightness of the UI element is a second value; The first value is greater than the second value.

13. The method according to any one of claims 2-12, characterized in that, The display parameter of the UI element includes brightness; When the color type of the second wallpaper is reference color, the pattern type is a first type, and the color type of the first wallpaper is non-reference color, the value of brightness of the UI element is greater than the value of brightness of the second wallpaper; Or, When the color type of the second wallpaper is reference color, the pattern type is a second type, and the color type of the first wallpaper is non-reference color, the value of the UI element is less than the value of brightness of the second wallpaper; The first type includes one or more of normal flower wallpaper, dark color wallpaper, and extreme deep wallpaper, and the second type includes one or more of extreme light type and light color type.

14. The method of any one of claims 2-13, wherein, The display parameter of the UI element includes color; When the pattern type of the second wallpaper is extreme flower wallpaper, or when the pattern type of the second wallpaper is non-extreme flower wallpaper and the color type is non-reference color, or when the pattern type of the second wallpaper is non-extreme flower wallpaper, the color type is reference color, and the color type of the first wallpaper is reference color, the value of color of the UI element is a preset value; Or, When the color type of the second wallpaper is reference color, the pattern type is non-extreme flower wallpaper, and the color type of the first wallpaper is non-reference color, the value of color of the UI element is the same as the value of color of the first wallpaper.

15. The method of any one of claims 2-14, wherein, The display parameter of the UI element includes shadow; When the pattern type of the second wallpaper is extreme flower wallpaper, or when the pattern type of the second wallpaper is normal flower wallpaper and the color type is non-reference color, the UI element is added with a shadow.

16. An electronic device, comprising: It includes: A display screen, a processor and a memory, the display screen, the memory and the processor being coupled, the memory being configured to store program code, the program code comprising instructions, the processor being configured to read the instructions from the memory to cause the electronic device to perform the method according to any one of claims 1-15.

17. A computer-readable storage medium, characterized in that, The computer readable storage medium comprises a computer program, which, when executed on an electronic device, causes the electronic device to perform the method according to any one of claims 1-15.

18. A computer program product, characterised in that, The computer program product comprises a computer program or instructions, which, when executed on a computer, cause the computer to perform the method according to any one of claims 1-15.

Images