Display method and device, electronic equipment and storage medium

By taking color and adjusting the brightness value of the target interface of the electronic device, and combining the frosted glass effect to process the components, the problem of poor component display effect is solved, and the visual expression and display effect of the components are improved.

CN119440442APending Publication Date: 2025-02-14GUANGDONG OPPO MOBILE TELECOMMUNICATIONS CORP LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202310963440.6
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2023-08-01
Publication Date
2025-02-14

AI Technical Summary

Technical Problem

When existing electronic devices display components, the display effect of the components is poor, making it difficult to balance personalized display and clear display.

Method used

By taking the color on the target interface, obtaining the original color, and adjusting its brightness value to obtain the adjusted color. At the same time, the target component is blurred, and combined with the frosted glass effect, the target component with the frosted glass effect is displayed on the target interface.

Benefits of technology

It achieves the visual expression of components, while enhancing the display effect of components, balancing personalized and clear display.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119440442A_ABST
    Figure CN119440442A_ABST
Patent Text Reader

Abstract

The invention discloses a display method and device, electronic equipment and a storage medium, and relates to the technical field of electronic equipment. The method comprises the steps that a target interface is displayed, the target interface is used for displaying a target assembly, color picking is conducted on the target interface, an original color is obtained, the brightness value of the original color is adjusted to obtain an adjusted color, and fuzzy processing is conducted on the target assembly to obtain the target assembly with the frosted glass effect; and displaying the target component with the frosted glass effect on the target interface by using the adjusting color. According to the method, the brightness value is adjusted after the color of the interface is selected, and the brightness value is combined with the frosted glass effect to display the component, so that personalized display and clear display of the component can be balanced, and the display effect of the component is enhanced while the visual expressive force of the component is enhanced.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the technical field of electronic devices, and more specifically, to a display method, device, electronic device and storage medium. Background Art

[0002] With the development of science and technology, electronic devices are used more and more widely and have more and more functions, and have become one of the necessities in people's daily life. At present, electronic devices can be used to display interfaces and display components in the interfaces, but under the current display mode, the display effect of components is not good. Summary of the invention

[0003] In view of the above problems, the present application proposes a display method, device, electronic device and storage medium to solve the above problems.

[0004] In a first aspect, an embodiment of the present application provides a display method, comprising: displaying a target interface, wherein the target interface is used to display a target component; picking a color for the target interface to obtain an original color; adjusting the brightness value of the original color to obtain an adjusted color, and blurring the target component to obtain a target component with a frosted glass effect, and displaying the target component with a frosted glass effect on the target interface with the adjusted color.

[0005] In a second aspect, an embodiment of the present application provides a display device, comprising: an interface display module, for displaying a target interface, wherein the target interface is used to display a target component; a color picking module, for picking the color of the target interface to obtain an original color; a component display module, for adjusting the brightness value of the original color to obtain an adjusted color, and blurring the target component to obtain a target component with a frosted glass effect, and displaying the target component with a frosted glass effect on the target interface with the adjusted color.

[0006] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory and a processor, wherein the memory is coupled to the processor, the memory stores instructions, and when the instructions are executed by the processor, the processor executes the above method.

[0007] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, in which a program code is stored, and the program code can be called by a processor to execute the above method.

[0008] The display method, device, electronic device and storage medium provided in the embodiments of the present application display a target interface, wherein the target interface is used to display a target component, picks a color of the target interface to obtain an original color, adjusts the brightness value of the original color to obtain an adjusted color, blurs the target component to obtain a target component with a frosted glass effect, and displays the target component with a frosted glass effect on the target interface with the adjusted color, thereby adjusting the brightness value after picking the color of the interface and combining it with the frosted glass effect to display the component, thereby balancing the personalized display and clear display of the component, thereby enhancing the visual expressiveness of the component while enhancing its display effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without paying any creative work.

[0010] Figure 1 A schematic diagram of a flow chart of a display method provided by an embodiment of the present application is shown;

[0011] Figure 2 A first interface schematic diagram of an electronic device provided in an embodiment of the present application is shown;

[0012] Figure 3 A first interface schematic diagram of an electronic device provided in an embodiment of the present application is shown;

[0013] Figure 4 A first interface schematic diagram of an electronic device provided in an embodiment of the present application is shown;

[0014] Figure 5 A first interface schematic diagram of an electronic device provided in an embodiment of the present application is shown;

[0015] Figure 6 A schematic diagram of a flow chart of a display method provided by an embodiment of the present application is shown;

[0016] Figure 7 A schematic diagram of the color selection process provided in an embodiment of the present application is shown;

[0017] Figure 8 This application shows Figure 6 The flowchart of step S250 of the display method shown is shown;

[0018] Fig. 9 A schematic diagram of a flow chart of a display method provided by an embodiment of the present application is shown;

[0019] Fig.10A schematic diagram of a flow chart of a display method provided by an embodiment of the present application is shown;

[0020] Fig.11 A fifth interface schematic diagram of an electronic device provided in an embodiment of the present application is shown;

[0021] Fig.12 A module block diagram of a display device provided by an embodiment of the present application is shown;

[0022] Fig.13 A block diagram of an electronic device according to an embodiment of the present application for executing a display method according to an embodiment of the present application is shown;

[0023] Fig.14 A storage unit for storing or carrying program codes for implementing a display method according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application.

[0025] As a personalized part of the interface display, components can provide practical value while satisfying the lightweight experience, such as satisfying the user's demand for displaying key information and function entrances, while improving the visual expression of the interface. However, when electronic devices currently display components through the interface, the display effect of the components is not good.

[0026] In view of the above problems, the inventors have discovered after long-term research and proposed the display method, device, electronic device and storage medium provided in the embodiments of the present application. By adjusting the brightness value after picking the color of the interface and combining it with the frosted glass effect to display the component, it is possible to balance the personalized display and clear display of the component, thereby enhancing the visual expression of the component while enhancing its display effect. The specific display method is described in detail in the subsequent embodiments.

[0027] See also Figure 1 , Figure 1 The flowchart of the display method provided by an embodiment of the present application is shown. The method is used to adjust the brightness value after the interface is colored, and combine it with the frosted glass effect to display the component, which can balance the personalized display and clear display of the component, and enhance the visual expression of the component while enhancing its display effect. In a specific embodiment, the display method is applied to Fig.12 The display device 200 and the electronic device 100 ( Fig.13). The following will take an electronic device as an example to illustrate the specific process of this embodiment. Of course, it can be understood that the electronic device used in this embodiment may include a smart phone, a tablet computer, a wearable electronic device, etc., which is not limited here. Figure 1 The process shown is described in detail, and the display method may specifically include the following steps:

[0028] Step S110: displaying a target interface, wherein the target interface is used to display a target component.

[0029] In this embodiment, the electronic device can display a target interface, wherein the target interface can be used to display a target component. Optionally, the target interface may include an application interface, a system desktop, a lock screen interface, etc., and the target component may include an atomic component, a baseboard component, a time component, etc., which are not limited here. Among them, the atomic component includes a component that provides practical information type and an entry type component to meet the user's demand for displaying key information and function entries, such as a music playback control component, a weather component, a memory occupancy component, an icon editing component, etc.; the baseboard component may include, for example, a large desktop folder, a docker background at the bottom of the desktop, and other components for carrying icons; the time component is used to display the current time and the current date, etc., which are not limited here.

[0030] In some embodiments, the electronic device may display the target interface in response to a target instruction indicating displaying the target interface. For example, the electronic device may generate a target instruction when receiving input target voice information, and display the target interface in response to the target instruction; the electronic device may generate a target instruction when receiving a target touch operation acting thereon, and display the target interface in response to the target instruction; the electronic device may generate a target instruction when determining that the current time meets the preset time, and display the target interface in response to the target instruction; the electronic device may generate a target instruction when determining that the current state meets the preset state (such as the lifted state, the flipped state), and display the target interface in response to the target state, etc., which are not limited here.

[0031] Optionally, the electronic device may include a foldable electronic device, and the target interface may include a lock screen interface. Then, the foldable electronic device may display the lock screen interface when in a folded state.

[0032] Optionally, the target interface can be used to display one or more target components. When the target interface displays one target component, the target component can be displayed at a fixed position on the target interface, or the target component can be displayed at a dynamically changed position on the target interface; when the target interface displays multiple target components, the multiple target components can be displayed at a fixed position on the target interface, or the multiple target components can be displayed at a dynamically changed position on the target interface, and the relative arrangement positions between the multiple target components can be fixed or can be changed, which is not limited here.

[0033] Step S120: extracting the color of the target interface to obtain the original color.

[0034] In this embodiment, when the electronic device displays the target interface, it can extract the color of the target interface to obtain the original color. The original color indicates the original hue Hue obtained by extracting the color of the target interface. The hue is the basic attribute of the color, that is, the color name, such as red, yellow, etc.

[0035] In some embodiments, color picking is also called color selection. A color picker is a commonly used screen color picking tool that can select the color of any content in the screen. Optionally, the electronic device can include a color picker. When the target interface is displayed, the color picker can be used to pick the color of the target interface to obtain the original color.

[0036] As an implementable method, when displaying the target interface, the electronic device can extract the color of the entire area of ​​the target interface to obtain the original color; or, when displaying the target interface, the electronic device can extract the color of a partial area of ​​the target interface to obtain the original color.

[0037] Optionally, when the electronic device displays the target interface, the entire area of ​​the target interface of the electronic device can be detected to determine whether the hue of the entire area of ​​the electronic device is the same. If the hue of the entire area of ​​the electronic device is the same, the color of the entire area of ​​the target interface can be picked; or if the hue of the entire area of ​​the electronic device is different, the color of a part of the target interface can be picked.

[0038] Optionally, when the electronic device displays the target interface, the display size of the target component to be displayed on the target interface can be detected to determine whether the display size of the target component reaches the size threshold. If it is determined that the display size of the target component reaches the size threshold, the entire area of ​​the target interface can be color-selected; or, if it is determined that the display size of the target component does not reach the size threshold, the color of a partial area of ​​the target interface can be color-selected.

[0039] Step S130: adjusting the brightness value of the original color to obtain an adjusted color, blurring the target component to obtain a target component with a frosted glass effect, and displaying the target component with a frosted glass effect on the target interface with the adjusted color.

[0040] In this embodiment, when the original color is obtained, the brightness value of the original color can be adjusted, wherein the brightness value (Lightness) is 0-100%.

[0041] Optionally, when the original color is obtained, the brightness of the original color can be increased to obtain an adjusted color; when the original color is obtained, the brightness value of the original color can be reduced to obtain an adjusted color; when the original color is obtained, the brightness value of the original color can be maintained to obtain an adjusted color, etc., which is not limited here.

[0042] In some embodiments, the original color can be split into multiple color levels, and the brightness value of the original color can be adjusted in the multiple color levels to obtain the adjusted color. For example, the original color can be split into 13 color levels (L0, L10, L20, L30, L40, L50, L60, L70, L80, L90, L95, L99, L100), and the brightness value of the original color can be adjusted in the 13 color levels to obtain the adjusted color, such as adjusting the brightness value of the original color to obtain the adjusted color (color level L90), adjusting the brightness value of the original color to obtain the adjusted color (color level L40), etc., which is not limited here.

[0043] In this embodiment, the target component may be blurred to obtain a target component with a frosted glass effect, wherein the target component with a frosted glass effect can make the content displayed on the component produce a beautiful "deformation" effect.

[0044] In some embodiments, performing blur processing on the target component to obtain the target component with a frosted glass effect may include: performing blur processing on the target component based on a Gaussian blur algorithm to obtain the target component with a frosted glass effect.

[0045] In some embodiments, blurring the target component to obtain the target component with a frosted glass effect may include: setting a fixed blurred image as a template, and superimposing the template on the target component to obtain the target component with a frosted glass effect.

[0046] In this embodiment, when the adjusted color and the target component with frosted glass effect are obtained, the target component with frosted glass effect can be displayed on the target interface with the adjusted color. It can be understood that by matching the color of the target interface and adjusting the brightness value of the original color to display the target component, the display effect of the target component can be made clear. At the same time, by blurring the target component so that the target component has a frosted glass effect, the target component can be made more transparent and natural, thereby enhancing the visual expression of the component while enhancing its display effect.

[0047] In some embodiments, when the target component with frosted glass effect is displayed on the target interface with the adjustment color, the display position of the target component on the target interface can remain fixed. Based on this, the target component with frosted glass effect can be displayed on the target interface with the adjustment color.

[0048] In some embodiments, when a target component with a frosted glass effect is displayed on a target interface with an adjusted color, the display position of the target component on the target interface can be changed dynamically. Based on this, when the display position of the target component on the target interface changes, the target interface can be color-selected based on the changed display position of the target component to obtain the changed original color, and the brightness value of the changed original color can be adjusted to obtain the changed color, and the target component with a frosted glass effect can be displayed on the target interface with the changed color, so that the color matching of the target component adapts to the change in the display position of the target component.

[0049] As an implementable method, when the display position of the target component on the target interface changes, the position change distance can be determined. If the position change distance reaches a distance threshold, the target interface can be color-selected based on the changed display position of the target component to obtain the changed original color, and the brightness value of the changed original color can be adjusted to obtain the changed color, so that the target component with a frosted glass effect is displayed on the target interface with the changed color, thereby making the color of the target component adapt to the change of the display position of the target component; if the position change distance does not reach the distance, the target component with a frosted glass effect can be displayed on the target interface with the adjusted color.

[0050] See also Figure 2 , Figure 2 FIG. 1 shows a first interface schematic diagram of an electronic device provided in an embodiment of the present application. Figure 2 As shown, the electronic device 100 displays a target interface A, on which a target component B1 and a target component B2 are displayed, wherein the target component B1 is an atomic component and the target component B2 is a time component. It can be understood that the adjustment color corresponding to the target component B1 is adapted to the original color of the target interface, and the adjustment color corresponding to the target component B2 is adapted to the original color of the target interface.

[0051] See also Figure 3 , Figure 3 FIG. 2 shows a second interface schematic diagram of an electronic device provided in an embodiment of the present application. Figure 3 As shown, the electronic device 100 displays a target interface A, on which a target component B3 is displayed, wherein the target component B3 is a bottom panel component (large folder). It can be understood that the adjustment color corresponding to the target component B3 is adapted to the original color of the target interface.

[0052] See also Figure 4 , Figure 4 FIG. 2 shows a third interface schematic diagram of an electronic device provided in an embodiment of the present application. Figure 4 As shown, the electronic device 100 displays a target interface A, on which a target component B4 is displayed, wherein the target component B4 is a baseboard component (docker background at the bottom of the desktop). It can be understood that the adjustment color corresponding to the target component B4 is adapted to the original color of the target interface.

[0053] See also Figure 5 , Figure 5 FIG. 4 shows a fourth interface schematic diagram of an electronic device provided in an embodiment of the present application. Figure 5 As shown, the electronic device 100 displays a target interface A, on which a target component B5 is displayed, wherein the target component B5 is an atomic component (icon editing component). It can be understood that the adjustment color corresponding to the target component B5 is adapted to the original color of the target interface.

[0054] A display method provided by an embodiment of the present application displays a target interface, wherein the target interface is used to display a target component, the target interface is color-selected to obtain an original color, the brightness value of the original color is adjusted to obtain an adjusted color, the target component is blurred to obtain a target component with a frosted glass effect, and the target component with a frosted glass effect is displayed on the target interface with the adjusted color. By adjusting the brightness value after color-selecting the interface and combining it with the frosted glass effect to display the component, a balance can be achieved between personalized display and clear display of the component, thereby enhancing the visual expressiveness of the component while enhancing its display effect.

[0055] See also Figure 6 , Figure 6 The flowchart of the display method provided by an embodiment of the present application is shown in FIG. Figure 6 The process shown is described in detail. In this embodiment, the target component includes a bottom layer and a top layer superimposed on the bottom layer. The display method may specifically include the following steps:

[0056] Step S210: Displaying a target interface, wherein the target interface is used to display a target component.

[0057] Step S220: extracting the color of the target interface to obtain the original color.

[0058] For the detailed description of step S210 to step S220, please refer to step S110 to step S120, which will not be repeated here.

[0059] Step S230: performing a first adjustment on the brightness value of the original color to obtain a first adjusted color, and performing a second adjustment on the brightness value of the original color to obtain a second adjusted color.

[0060] In this embodiment, the target component may include a bottom layer and a top layer superimposed on the bottom layer. Optionally, the bottom layer may be a background layer, and the top layer may be an icon displayed on the background layer. For example, when the target component is a weather component, the icon may be a temperature logo and a temperature value. For example, when the target component is a health component, the icon may be a step value, a heart rate, etc. The shape of the bottom layer may be circular, square, irregular polygon, etc., and the size of the bottom layer may be larger or smaller, etc., which is not limited here.

[0061] In this embodiment, when the original color is obtained, a first adjustment may be made to the brightness value of the original color to obtain a first adjusted color, and a second adjustment may be made to the brightness value of the original color to obtain a second adjusted color. Optionally, the first adjustment may include an increase adjustment, a decrease adjustment, or a maintain adjustment, and the second adjustment may include an increase adjustment, a decrease adjustment, or a maintain adjustment, which is not limited here. Optionally, the first adjusted color and the second adjusted color may be the same, that is, the hue, brightness, contrast, etc. of the first adjusted color and the second adjusted color may be the same, or the first adjusted color and the second adjusted color may be different, that is, the hue, brightness, contrast, etc. of the first adjusted color and the second adjusted color may be different.

[0062] In some embodiments, the difference between the brightness value of the first adjusted color and the brightness value of the second adjusted color is greater than or equal to the color scale difference threshold, so that the ratio between the contrast of the first adjusted color and the contrast of the second adjusted color is greater than or equal to the color scale ratio threshold, meeting the accessibility requirements of color contrast.

[0063] As an implementable manner, the electronic device may pre-set and store a color scale difference threshold and a color scale ratio threshold, wherein the color scale difference threshold is used as a basis for judging the difference between the brightness value of the first adjustment color and the brightness value of the second adjustment color, and the color scale ratio threshold is used as a basis for judging the ratio between the contrast of the first adjustment color and the contrast of the second adjustment color. Based on this, in the present embodiment, when the original color is obtained, a first adjustment may be made to the original color based on the color scale difference threshold and the color scale ratio threshold to obtain the first adjustment color, and a second adjustment may be made to the original color to obtain the second adjustment color, so that the difference between the brightness value of the first adjustment color and the brightness value of the second adjustment color is greater than or equal to the color scale difference threshold, and the ratio between the contrast of the first adjustment color and the contrast of the second adjustment color is greater than or equal to the color scale ratio threshold.

[0064] Optionally, the color scale difference threshold may include 50, and the color scale ratio threshold may include 4.5:1. For example, the brightness value L of the original color is split into 13 color scales, the first adjustment color may include L90, and the second adjustment color may include L40. The brightness value of the first adjustment color and the brightness value of the second adjustment color differ by 50 color scales, so that the contrast ratio of the first adjustment color and the contrast ratio of the second adjustment color are at least 4.5:1, which meets the accessibility requirements of color contrast. Of course, it is understandable that the color scale difference threshold may also include other more values, and the color scale ratio threshold may also include other more values, which are not limited here.

[0065] See also Figure 7 , Figure 7 The schematic diagram of the color selection process provided by the embodiment of the present application is shown. Figure 7 As shown, the electronic device can display a target interface for displaying a target component (including a bottom layer and a top layer superimposed on the bottom layer). At this time, the brightness value L can be split into 13 color levels, and the target interface can be color-selected to obtain the original color of any brightness value L. The original color is first adjusted to obtain the first adjustment color L90, and the original color is second adjusted to obtain the second adjustment color L40. The brightness value of the first adjustment color and the brightness value of the second adjustment color differ by 50 color levels, so that the contrast ratio of the first adjustment color and the contrast ratio of the second adjustment color are at least 4.5:1, and finally the target component is displayed on the target interface. Among them, the target component can also include an intermediate layer arranged between the bottom layer and the top layer, and a mask layer can also be included between the target interface and the bottom layer.

[0066] Step S240: blurring the bottom layer to obtain a bottom layer with a frosted glass effect.

[0067] In this embodiment, for a target control including a bottom layer and a top layer superimposed on the bottom layer, the bottom layer may be blurred to obtain a bottom layer with a frosted glass effect.

[0068] In some embodiments, the bottom layer may be blurred based on a Gaussian blur algorithm to obtain a bottom layer with a frosted glass effect, or a fixed blurred image may be set as a template and the template may be superimposed on the bottom layer to obtain a bottom layer with a frosted glass effect.

[0069] Step S250: displaying the top layer with the first adjusted color, and displaying the bottom layer with a frosted glass effect with the second adjusted color.

[0070] In this embodiment, when the first adjustment color, the second adjustment color, and the bottom layer with a frosted glass effect are obtained, the top layer can be displayed with the first adjustment color, and the bottom layer with a frosted glass effect can be displayed with the second adjustment color. It can be understood that for a target component having a bottom layer and a top layer superimposed on the bottom layer, setting adjustment colors for the top layer and the bottom layer respectively, and adding a frosted glass effect to the bottom layer can make the component appear lighter and clearer.

[0071] Optionally, the target component may further include an intermediate layer (dynamic intermediate layer) disposed between the bottom layer and the top layer. Based on this, displaying the top layer with the first adjustment color and displaying the bottom layer with the frosted glass effect with the second adjustment color may include: performing a fourth adjustment on the brightness value of the original color to obtain a fourth adjustment color, wherein the fourth adjustment color is color-gradient, displaying the top layer with the first adjustment color, displaying the intermediate layer with the fourth adjustment color, and displaying the bottom layer with the frosted glass effect with the second adjustment color. As a method, the fourth adjustment color corresponding to the intermediate layer may be color-gradient based on the first adjustment color corresponding to the top layer.

[0072] Optionally, if the shape of the middle layer is annular, the fourth adjustment color may be radially gradient, wherein radial gradient refers to a circular gradient of the color from the inside to the outside from the starting point to the end point (pulling from the middle to the outside).

[0073] Optionally, the fourth adjustment may include an increase adjustment, a decrease adjustment, or a maintain adjustment, which is not limited here.

[0074] See also Figure 8 , Figure 8 This application shows Figure 6 The following is a flow chart of step S250 of the display method. Figure 8 The process shown is described in detail, and the method may specifically include the following steps:

[0075] Step S251: performing a first adjustment on the transparency of the top layer to obtain a top layer with a first transparency, and performing a second adjustment on the transparency of the bottom layer to obtain a bottom layer with a second transparency, wherein the first transparency is greater than the second transparency.

[0076] In some embodiments, when the bottom layer and the top layer superimposed on the bottom layer of the target component are determined, a first adjustment can be made to the transparency of the top layer to obtain a top layer having a first transparency, and a second adjustment can be made to the transparency of the bottom layer to obtain a bottom layer having a second transparency, wherein the first transparency is greater than the second transparency.

[0077] Optionally, the first adjustment may include an increase adjustment and the second adjustment may include a decrease adjustment; the first adjustment may include an increase adjustment and the second adjustment may include a maintain adjustment; the first adjustment may include an increase adjustment and the second adjustment may include an increase adjustment, and the increase amplitude of the first adjustment is greater than the increase amplitude of the second adjustment; the first adjustment may include a decrease adjustment and the second adjustment may include a decrease adjustment, and the decrease amplitude of the first adjustment is less than the decrease amplitude of the second adjustment; the first adjustment may include a maintain adjustment and the second adjustment may include a decrease adjustment, etc., and no limitation is made here.

[0078] In some embodiments, the target component may further include an intermediate layer disposed between the bottom layer and the top layer, and the transparency of the intermediate layer may be adjusted thirdly to obtain an intermediate layer with a third transparency, wherein the first transparency is greater than the third transparency, and the third transparency is greater than the second transparency.

[0079] Optionally, the first transparency may include 100%, the second transparency may include 24%, the third transparency may include 50%, the third transparency may include 24%, etc. Of course, it is understandable that the first transparency may include other more values, and the second transparency may include other more values, which are not limited here.

[0080] Step S252: displaying a top layer with a first transparency using the first adjusted color, and displaying a bottom layer with a second transparency and a frosted glass effect using the second adjusted color.

[0081] In this embodiment, when a first adjustment color, a top layer with a first transparency, a second adjustment color, a bottom layer with a second transparency and a frosted glass effect are obtained, the top layer with the first transparency can be displayed with the first adjustment color, and the bottom layer with the second transparency and a frosted glass effect can be displayed with the second adjustment color. It can be understood that for a target component having a bottom layer and a top layer superimposed on the bottom layer, setting adjustment colors and transparency for the top layer and the bottom layer, respectively, and adding a frosted glass effect to the bottom layer can make the component appear lighter and clearer.

[0082] Optionally, the target component may further include an intermediate layer with a third transparency disposed between the bottom layer and the top layer. Based on this, displaying the top layer with a first transparency with a first adjustment color, and displaying the bottom layer with a second transparency and a frosted glass effect with a second adjustment color may include: displaying the top layer with a first transparency with a first adjustment color, displaying the intermediate layer with a third transparency with a fourth adjustment color, and displaying the bottom layer with a second transparency and a frosted glass effect with a second adjustment color.

[0083] The display method provided by an embodiment of the present application displays a target interface for displaying a target component, extracts the color of the target interface to obtain the original color, performs a first adjustment on the brightness value of the original color to obtain a first adjusted color, performs a second adjustment on the brightness value of the original color to obtain a second adjusted color, blurs the bottom layer to obtain a bottom layer with a frosted glass effect, displays the top layer with the first adjusted color, and displays the bottom layer with a frosted glass effect with the second adjusted color. Figure 1 The display method shown in this embodiment also makes adjustments to components having a top layer and a bottom layer, and makes different adjustments to the brightness values ​​corresponding to the top layer and the bottom layer, as well as adds a frosted glass effect to the bottom layer, so that the components can display a light style while also being clearer.

[0084] See also Fig. 9 , Fig. 9 The flowchart of the display method provided by an embodiment of the present application is shown in FIG. Fig. 9 The process shown is described in detail. In this embodiment, the target component includes a bottom layer and a top layer superimposed on the bottom layer. The display method may specifically include the following steps:

[0085] Step S310: Displaying a target interface, wherein the target interface is used to display a target component.

[0086] Step S320: extracting the color of the target interface to obtain the original color.

[0087] For the detailed description of step S310 to step S320, please refer to step S110 to step S120, which will not be repeated here.

[0088] Step S330: If the brightness value of the original color is less than the brightness threshold, a first adjustment is performed on the brightness value of the original color to obtain the first adjusted color, and a second adjustment is performed on the brightness value of the original color to obtain the second adjusted color.

[0089] In some embodiments, the electronic device may pre-set and store a brightness threshold value, which is used as a basis for judging the brightness value of the original color of the target interface. If the brightness value of the original color of the target interface is less than the brightness threshold value, it can be considered that when the target component is displayed after the color is picked according to the normal color picking logic, the target component can be clearly displayed, and the color can be picked normally and the target component can be displayed; if the brightness value of the original color of the target interface is greater than or equal to the brightness threshold value, it can be considered that when the target component is displayed after the color is picked according to the normal color picking logic, it is difficult to ensure the clear display of the target component, and the target component can be displayed using the inverted color picking logic.

[0090] In this embodiment, when the original color is obtained, the brightness value of the original color may be obtained, and the brightness value of the original color may be compared with a brightness threshold to determine whether the brightness value is less than the brightness threshold.

[0091] As an implementable method, when it is determined that the brightness value is less than the brightness threshold, it can be considered that when the target component is displayed after color picking according to the normal color picking logic, the clear display of the target component can be guaranteed, and the brightness value of the original color can be adjusted by a first adjustment to obtain a first adjusted color, and the brightness value of the original color can be adjusted by a second adjustment to obtain a second adjusted color, and finally the top layer is displayed with the first adjusted color, and the bottom layer with a frosted glass effect is displayed with the second adjusted color.

[0092] Step S340: blurring the bottom layer to obtain a bottom layer with a frosted glass effect.

[0093] Step S350: displaying the top layer with the first adjusted color, and displaying the bottom layer with a frosted glass effect with the second adjusted color.

[0094] For the detailed description of step S340 to step S350, please refer to step S240 to step S250, which will not be repeated here.

[0095] Step S360: If the brightness value of the original color is greater than or equal to the brightness threshold, a third adjustment is performed on the brightness value of the original color to obtain a third adjusted color, and a second adjustment is performed on the brightness value of the original color to obtain the second adjusted color, wherein the brightness value of the third adjusted color is less than the brightness value of the first adjusted color.

[0096] As an implementable method, when it is determined that the brightness value is greater than or equal to the brightness threshold, it can be considered that when the target component is displayed after color picking according to the normal color picking logic, it is difficult to ensure the clear display of the target component. In this case, the brightness value of the original color can be adjusted for the third time to obtain a third adjusted color, and the brightness value of the original color can be adjusted to obtain a second adjusted color, wherein the brightness value of the third adjusted color is less than the brightness value of the first adjusted color to ensure the clear display of the target component.

[0097] In some embodiments, the third adjustment color and the second adjustment color may be the same, that is, the hue, brightness, contrast, etc. of the second adjustment color and the third adjustment color may be the same, or the third adjustment color and the second adjustment color may be different, that is, the hue, brightness, contrast, etc. of the third adjustment color and the second adjustment color may be different.

[0098] Optionally, the brightness threshold may include L80, the first adjustment color may include L90, the second adjustment color may include L40, and the third adjustment color may include L40. Of course, it is understandable that the brightness threshold may include other more values, the first adjustment color may include other more values, the second adjustment color may include other more values, and the third adjustment color may include other more values, which are not limited here.

[0099] Step S370: blurring the bottom layer to obtain a bottom layer with a frosted glass effect.

[0100] In this embodiment, for a target control including a bottom layer and a top layer superimposed on the bottom layer, the bottom layer may be blurred to obtain a bottom layer with a frosted glass effect.

[0101] In some embodiments, the bottom layer may be blurred based on a Gaussian blur algorithm to obtain a bottom layer with a frosted glass effect, or a fixed blurred image may be set as a template and the template may be superimposed on the bottom layer to obtain a bottom layer with a frosted glass effect.

[0102] Step S380: displaying the top layer with the third adjusted color, and displaying the bottom layer with a frosted glass effect with the second adjusted color.

[0103] In this embodiment, when the third adjustment color, the second adjustment color, and the bottom layer with frosted glass effect are obtained, the top layer can be displayed with the third adjustment color, and the bottom layer with frosted glass can be displayed with the second adjustment color. It can be understood that for a target component having a bottom layer and a top layer superimposed on the bottom layer, when the brightness value of the target interface is greater than the brightness threshold, the inverted color logic can be used to reduce the brightness value of the top layer, so as to ensure clear display of the target component.

[0104] Optionally, the target component may further include an intermediate layer (dynamic intermediate layer) disposed between the bottom layer and the top layer. Based on this, displaying the top layer with the third adjustment color and displaying the bottom layer with the frosted glass effect with the second adjustment color may include: performing a fourth adjustment on the brightness value of the original color to obtain a fourth adjustment color, wherein the fourth adjustment color is color-gradient, displaying the top layer with the third adjustment color, displaying the intermediate layer with the fourth adjustment color, and displaying the bottom layer with the frosted glass effect with the second adjustment color. As a method, the fourth adjustment color corresponding to the intermediate layer may be a color gradient based on the third adjustment color corresponding to the top layer.

[0105] A display method provided by an embodiment of the present application displays a target interface for displaying a target component, extracts the color of the target interface to obtain the original color, and if the brightness value of the original color is less than a brightness threshold, performs a first adjustment on the brightness value of the original color to obtain a first adjusted color, and performs a second adjustment on the brightness value of the original color to obtain a second adjusted color, blurs the bottom layer to obtain a bottom layer with a frosted glass effect, displays the top layer with the first adjusted color, and displays the bottom layer with a frosted glass effect with the second adjusted color; if the brightness value of the original color is greater than or equal to the brightness threshold, performs a third adjustment on the brightness value of the original color to obtain a third adjusted color, and performs a second adjustment on the brightness value of the original color to obtain the second adjusted color, wherein the brightness value of the third adjusted color is less than the brightness value of the first adjusted color, blurs the bottom layer to obtain a bottom layer with a frosted glass effect, displays the top layer with the third adjusted color, and displays the bottom layer with a frosted glass effect with the second adjusted color. Compared to Figure 1 The display method shown in this embodiment also uses inverted color logic to lower the brightness value corresponding to the top layer when the brightness value of the interface is large to ensure clear display.

[0106] See also Fig.10 , Fig.10 The flowchart of the display method provided by an embodiment of the present application is shown in FIG. Fig.10 The process shown is described in detail, and the display method may specifically include the following steps:

[0107] Step S410: displaying a target interface, wherein the target interface is used to display a target component.

[0108] For the detailed description of step S410, please refer to step S110, which will not be repeated here.

[0109] Step S420: Determine the position of the target component to be displayed on the target interface.

[0110] In this embodiment, when a target interface for displaying a component is displayed, a position of the target component to be displayed on the target interface may be determined.

[0111] In some embodiments, the electronic device may be provided with a default display position of the target component in the target interface. Based on this, when the target interface for displaying the component is displayed, the default display position of the target interface can be obtained, and the default display position is determined as the position of the target component to be displayed in the target interface. As a way, the display position of the target component in the target interface can be fixed, then the default display position is the fixed display position of the target component in the target interface, then, when the target interface for displaying the component is displayed, the fixed display position can be obtained, and the fixed display position is determined as the position of the target component to be displayed in the target interface. As another way, the display position of the target component in the target interface can be changed dynamically, then the default display position is the initial display position of the target component in the target interface, then, when the target interface for displaying the component is displayed, the initial display position can be obtained, and the initial display position is determined as the position of the target component to be displayed in the target interface.

[0112] In some embodiments, when displaying a target interface for displaying a target component, the color difference between different areas of the target interface can be obtained. When the color difference is large (such as the color difference between different areas is greater than a difference threshold), the position of the target component to be displayed on the target interface can be determined; when the color difference is small (such as the color difference between different areas is less than or equal to the difference threshold), the target interface can be directly color-selected to obtain the original color.

[0113] Step S430: determining a color picking area in the target interface based on the position to be displayed.

[0114] In this embodiment, when the position of the target component to be displayed on the target interface is determined, a color picking area can be determined on the target interface based on the position to be displayed.

[0115] As an implementable method, when the position of the target component to be displayed on the target interface is determined, the first interface area corresponding to the position to be displayed on the target interface can be determined, and the first interface area can be determined as the color picking area. That is, the size and shape of the color picking area are consistent with the size and shape of the target component.

[0116] As another feasible method, when the position of the target component to be displayed on the target interface is determined, a second interface area can be obtained by expanding the position to be displayed on the target interface as the origin, and the second interface area is determined as the color picking area. That is, the size of the color picking area is larger than the size of the target component, and the shape of the color picking area can be consistent with the target component or inconsistent with the target component.

[0117] Step S440: Pick a color for the target interface in the color picking area to obtain the original color.

[0118] In this embodiment, when a color picking area is determined, the target interface can be picked in the color picking area to obtain the original color, thereby ensuring a clear display of the target component.

[0119] In some embodiments, the number of the target components can be multiple, and the color picking areas corresponding to the multiple target components are different. Based on this, the target interface can be color picked in the color picking areas corresponding to the multiple target components to obtain the original colors corresponding to the multiple target components, so that the color difference in the target interface is relatively large, and when the multiple target components are displayed in different areas of the target interface, it can be ensured that the target components in different areas can be displayed clearly.

[0120] For example, assuming that the multiple target components include atomic components and time components, and the atomic components are used to be displayed in the top area of ​​the target interface, and the time components are used to be displayed in the bottom area of ​​the target interface. Then, for the atomic components, the top area of ​​the target interface can be color-selected, and for the time components, the bottom area of ​​the target interface can be color-selected to ensure clear display of the atomic components and the time components.

[0121] Step S450: adjusting the brightness value of the original color to obtain an adjusted color, blurring the target component to obtain a target component with a frosted glass effect, and displaying the target component with a frosted glass effect on the target interface with the adjusted color.

[0122] For the detailed description of step S450, please refer to step S130, which will not be repeated here.

[0123] See also Fig.11 , Fig.11 FIG. 5 shows a fifth interface schematic diagram of an electronic device provided in an embodiment of the present application. Fig.11 As shown, the electronic device 100 displays a target interface A, on which a target component B6 and a target component B7 are displayed, wherein the adjustment color corresponding to the target component B6 is adapted to the original hue of the interface at its display position, and the adjustment color corresponding to the target component B7 is adapted to the original hue of the interface at its display position.

[0124] A display method provided by an embodiment of the present application displays a target interface for displaying a target component, determines the position of the target component to be displayed on the target interface, determines a color picking area in the target interface based on the position to be displayed, picks color for the target interface in the color picking area to obtain the original color, adjusts the brightness value of the original color to obtain the adjusted color, blurs the target component to obtain a target component with a frosted glass effect, and displays the target component with a frosted glass effect on the target interface with the adjusted color. Figure 1The display method shown in the figure, this embodiment also adopts a local segment color selection method to ensure clear display of the component.

[0125] See also Fig.12 , Fig.12 The module block diagram of the display device provided by an embodiment of the present application is shown below. Fig.12 The block diagram shown in the figure is used to illustrate that the display device 200 includes: an interface display module 210, a color picking module 220 and a component display module 230, wherein:

[0126] The interface display module 210 is used to display a target interface, wherein the target interface is used to display a target component.

[0127] The color picking module 220 is used to pick the color of the target interface to obtain the original color.

[0128] Furthermore, the color picking module 220 includes: a to-be-displayed position determination submodule, a color picking region determination submodule, and an original color acquisition submodule, wherein:

[0129] The to-be-displayed position determination submodule is used to determine the to-be-displayed position of the target component on the target interface.

[0130] The color picking area determination submodule is used to determine the color picking area on the target interface based on the position to be displayed.

[0131] The original color acquisition submodule is used to pick the color of the target interface in the color picking area to obtain the original color.

[0132] Furthermore, there are multiple target components, and the multiple target components correspond to different color picking areas. The original color acquisition submodule includes: an original color acquisition unit, wherein:

[0133] The original color obtaining unit is used to obtain the original colors corresponding to the target components by performing color extraction on the target interface in the color extraction areas corresponding to the multiple target components.

[0134] The component display module 230 is used to adjust the brightness value of the original color to obtain an adjusted color, blur the target component to obtain a target component with a frosted glass effect, and display the target component with a frosted glass effect on the target interface with the adjusted color.

[0135] Further, the target component includes a bottom layer and a top layer superimposed on the bottom layer, and the component display module 230 includes: an original color adjustment submodule, a fuzzy processing submodule and a component display submodule, wherein:

[0136] The original color adjustment submodule is used to perform a first adjustment on the brightness value of the original color to obtain a first adjusted color, and to perform a second adjustment on the brightness value of the original color to obtain a second adjusted color.

[0137] Further, the original color adjustment submodule includes: a first original color adjustment unit, wherein:

[0138] The first original color adjustment unit is used to perform a first adjustment on the brightness value of the original color to obtain the first adjusted color if the brightness value of the original color is less than a brightness threshold, and to perform a second adjustment on the brightness value of the original color to obtain the second adjusted color.

[0139] Furthermore, the original color adjustment submodule further includes: a second original color adjustment unit and a first component display unit, wherein:

[0140] The second original color adjustment unit is used to perform a third adjustment on the brightness value of the original color to obtain a third adjusted color if the brightness value of the original color is greater than or equal to the brightness threshold, and to perform a second adjustment on the brightness value of the original color to obtain the second adjusted color, wherein the brightness value of the third adjusted color is less than the brightness value of the first adjusted color.

[0141] The first component display unit is used to display the top layer with the third adjusted color and to display the bottom layer with a frosted glass effect with the second adjusted color.

[0142] The fuzzy processing submodule is used to perform fuzzy processing on the bottom layer to obtain a bottom layer with a frosted glass effect.

[0143] The component display submodule is used to display the top layer with the first adjusted color, and to display the bottom layer with a frosted glass effect with the second adjusted color.

[0144] Furthermore, the target component further includes an intermediate layer disposed between the bottom layer and the top layer, and the component display submodule includes: a third original color adjustment unit and a second component display unit, wherein:

[0145] The third original color adjustment unit is used to perform a fourth adjustment on the brightness value of the original color to obtain a fourth adjusted color, wherein the fourth adjusted color is a color gradient.

[0146] The second component display unit is used to display the top layer with the first adjustment color, display the middle layer with the fourth adjustment color, and display the frosted glass effect with the second adjustment color.

[0147] Furthermore, the component display submodule includes: a transparency adjustment unit and a third component display unit, wherein:

[0148] The transparency adjustment unit is used to make a first adjustment to the transparency of the top layer to obtain a top layer with a first transparency, and to make a second adjustment to the transparency of the bottom layer to obtain a bottom layer with a second transparency, wherein the first transparency is greater than the second transparency.

[0149] The third component display unit is used to display the top layer with the first transparency using the first adjusted color, and to display the bottom layer with the second transparency and frosted glass effect using the second adjusted color.

[0150] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here.

[0151] In several embodiments provided in the present application, the coupling between modules may be electrical, mechanical or other forms of coupling.

[0152] In addition, each functional module in each embodiment of the present application can be integrated into a processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The above integrated modules can be implemented in the form of hardware or software functional modules.

[0153] See also Fig.13 , which shows a structural block diagram of an electronic device 100 provided in an embodiment of the present application. The electronic device 100 may be an electronic device capable of running applications, such as a smart phone, a tablet computer, an e-book, etc. The electronic device 100 in the present application may include one or more of the following components: a processor 110, a memory 120, and one or more applications, wherein the one or more applications may be stored in the memory 120 and configured to be executed by one or more processors 110, and the one or more programs are configured to execute the method described in the aforementioned method embodiment.

[0154] Among them, the processor 110 may include one or more processing cores. The processor 110 uses various interfaces and lines to connect various parts of the entire electronic device 100, and executes various functions and processes data of the electronic device 100 by running or executing instructions, programs, code sets or instruction sets stored in the memory 120, and calling data stored in the memory 120. Optionally, the processor 110 can be implemented in at least one hardware form of digital signal processing (Digital Signal Processing, DSP), field programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). The processor 110 can integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU) and a modem. Among them, the CPU mainly processes the operating system, user interface and application programs; the GPU is responsible for rendering and drawing the content to be displayed; and the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 110, but may be implemented separately through a communication chip.

[0155] The memory 120 may include a random access memory (RAM) or a read-only memory (ROM). The memory 120 may be used to store instructions, programs, codes, code sets or instruction sets. The memory 120 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for implementing functions (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the following various method embodiments, etc. The data storage area may also store data (such as a phone book, audio and video data, chat record data) created by the electronic device 100 during use.

[0156] See also Fig.14 , which shows a structural block diagram of a computer-readable storage medium provided in an embodiment of the present application. The computer-readable medium 300 stores program codes, which can be called by a processor to execute the method described in the above method embodiment.

[0157] The computer readable storage medium 300 may be an electronic memory such as a flash memory, an EEPROM (electrically erasable programmable read-only memory), an EPROM, a hard disk, or a ROM. Optionally, the computer readable storage medium 300 includes a non-transitory computer-readable storage medium. The computer readable storage medium 300 has storage space for program code 310 that performs any method steps in the above method. These program codes can be read from or written to one or more computer program products. The program code 310 can be compressed, for example, in an appropriate form.

[0158] In summary, the display method, device, electronic device and storage medium provided by the embodiments of the present application display a target interface, wherein the target interface is used to display a target component, picks a color of the target interface to obtain an original color, adjusts the brightness value of the original color to obtain an adjusted color, blurs the target component to obtain a target component with a frosted glass effect, and displays the target component with a frosted glass effect on the target interface with the adjusted color, thereby adjusting the brightness value after picking the color of the interface and combining it with the frosted glass effect to display the component, which can balance the personalized display and clear display of the component, thereby enhancing the visual expressiveness of the component while enhancing its display effect.

[0159] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A display method, characterized in that: The method comprises: Displaying a target interface, wherein the target interface is used to display a target component; Picking the color of the target interface to obtain the original color; The brightness value of the original color is adjusted to obtain an adjusted color, and the target component is blurred to obtain a target component with a frosted glass effect, and the target component with a frosted glass effect is displayed on the target interface with the adjusted color.

2. The method according to claim 1, characterized in that: The target component includes a bottom layer and a top layer superimposed on the bottom layer, the brightness value of the original color is adjusted to obtain an adjusted color, the target component is blurred to obtain a target component with a frosted glass effect, and the target component with a frosted glass effect is displayed on the target interface with the adjusted color, including: Performing a first adjustment on the brightness value of the original color to obtain a first adjusted color, and performing a second adjustment on the brightness value of the original color to obtain a second adjusted color; Performing blurring processing on the bottom layer to obtain a bottom layer with a frosted glass effect; The top layer is displayed in the first adjusted color, and the bottom layer having a frosted glass effect is displayed in the second adjusted color.

3. The method according to claim 2, characterized in that The difference between the brightness value of the first adjustment color and the brightness value of the second adjustment color is greater than or equal to the color scale difference threshold, so that the ratio between the contrast of the first adjustment color and the contrast of the second adjustment color is greater than or equal to the color scale ratio threshold.

4. The method according to claim 3, characterized in that The color scale difference threshold includes 50, and the color scale ratio threshold includes 4.5:

1.

5. The method according to claim 2, characterized in that: The first adjustment is performed on the brightness value of the original color to obtain the first adjusted color, and the second adjustment is performed on the brightness value of the original color to obtain the second adjusted color, including: If the brightness value of the original color is less than the brightness threshold, a first adjustment is performed on the brightness value of the original color to obtain the first adjusted color, and a second adjustment is performed on the brightness value of the original color to obtain the second adjusted color.

6. The method according to claim 5, characterized in that The method further comprises: If the brightness value of the original color is greater than or equal to the brightness threshold, performing a third adjustment on the brightness value of the original color to obtain a third adjusted color, and performing a second adjustment on the brightness value of the original color to obtain the second adjusted color, wherein the brightness value of the third adjusted color is less than the brightness value of the first adjusted color; The top layer is displayed with the third adjusted color, and the bottom layer having a frosted glass effect is displayed with the second adjusted color.

7. The method according to claim 6, characterized in that The first adjustment color includes L90, the second adjustment color includes L40, and the third adjustment color includes L40.

8. The method according to claim 2, characterized in that: The target component further includes an intermediate layer disposed between the bottom layer and the top layer, and the method of displaying the top layer with the first adjusted color and displaying the bottom layer with a frosted glass effect with the second adjusted color includes: Performing a fourth adjustment on the brightness value of the original color to obtain a fourth adjusted color, wherein the fourth adjusted color is a color gradient; The top layer is displayed with the first adjusted color, the middle layer is displayed with the fourth adjusted color, and the bottom layer having a frosted glass effect is displayed with the second adjusted color.

9. The method according to any one of claims 2 to 8, characterized in that: The step of displaying the top layer with the first adjusted color and displaying the bottom layer with the frosted glass effect with the second adjusted color includes: Performing a first adjustment on the transparency of the top layer to obtain a top layer with a first transparency, and performing a second adjustment on the transparency of the bottom layer to obtain a bottom layer with a second transparency, wherein the first transparency is greater than the second transparency; The top layer is displayed with the first adjustment color and has a first transparency, and the bottom layer is displayed with the second adjustment color and has a second transparency and a frosted glass effect.

10. The method according to any one of claims 1 to 8, characterized in that: The step of extracting the color of the target interface to obtain the original color includes: Determine the position of the target component to be displayed on the target interface; Determine a color picking area on the target interface based on the position to be displayed; The target interface is color-picked in the color-picking area to obtain the original color.

11. The method according to claim 10, characterized in that There are multiple target components, and the multiple target components correspond to different color picking areas. Picking the color of the target interface in the color picking area to obtain the original color includes: The target interface is color-selected in the color-selected areas corresponding to the multiple target components to obtain the original colors corresponding to the multiple target components.

12. A display device, characterized in that: The device comprises: An interface display module, used to display a target interface, wherein the target interface is used to display a target component; A color picking module, used to pick the color of the target interface to obtain the original color; The component display module is used to adjust the brightness value of the original color to obtain an adjusted color, and to blur the target component to obtain a target component with a frosted glass effect, and to display the target component with a frosted glass effect on the target interface with the adjusted color.

13. An electronic device, characterized in that: The method comprises a memory and a processor, wherein the memory is coupled to the processor, the memory stores instructions, and when the instructions are executed by the processor, the processor executes the method according to any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores program codes, which can be called by a processor to execute the method according to any one of claims 1 to 11.