Method for generating graphical user interface of application and related device

Abstract

The present application provides a method for generating a graphical user interface of an application and a related device. At least one target layer of an application is determined from a plurality of candidate layers, layer effects of the plurality of candidate layers being different; a background layer of the application is generated on the basis of the at least one target layer; and a graphical user interface of the application is generated on the basis of the background layer. By means of the above-mentioned method, the visual effect of a graphical user interface of an application is improved.

Description

Method for generating graphical user interface of application and related device

[0001] This application claims priority to the Chinese invention patent application entitled “Method and Related Devices for Generating a Graphical User Interface for an Application” filed on November 22, 2023, with application number 202311559560.6. The entire contents of that application are incorporated by reference into this application. Technical Field

[0002] The present application relates to the field of computer technology, and in particular to a method for generating a graphical user interface for an application and related devices. Background Art

[0003] An application's graphical user interface (GUI) is typically generated based on a single image background layer. This background layer is typically drawn with a single color or a gradient. However, having a single image background layer, whether a single color or a gradient, can result in poor visual quality for the generated GUI.

[0004] Summary of the Invention

[0005] In view of this, the purpose of this application is to propose a method for generating a graphical user interface of an application and related devices to solve or partially solve the above problems.

[0006] Based on the above-mentioned purpose, the first aspect of the present application provides a method for generating a graphical user interface of an application, including: determining at least one target layer of the application from multiple candidate layers, the layer effects of the multiple candidate layers are different; generating a background layer of the application based on the at least one target layer; and generating a graphical user interface of the application based on the background layer.

[0007] In a second aspect of the present application, an electronic device is provided, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0008] According to a third aspect of the present application, a non-transitory computer-readable storage medium is provided, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the method described in the first aspect.

[0009] In a fourth aspect of the present application, a computer program product is provided, comprising computer program instructions, which, when executed on a computer, cause the computer to execute the method described in the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] In order to more clearly illustrate the technical solutions in this application or related technologies, the following briefly introduces the drawings required for use in the embodiments or related technical descriptions. Obviously, the drawings described below are merely embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0011] FIG1A shows a schematic diagram of an exemplary system according to an embodiment of the present application.

[0012] FIG1B shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0013] FIG1C shows a schematic diagram of a graphical user interface according to an embodiment of the present application.

[0014] FIG1D shows a schematic diagram of yet another graphical user interface according to an embodiment of the present application.

[0015] FIG1E shows a schematic diagram of a graphical user interface according to an embodiment of the present application.

[0016] FIG1F shows a schematic diagram of a graphical user interface according to an embodiment of the present application.

[0017] FIG1G shows a schematic diagram of a graphical user interface according to an embodiment of the present application.

[0018] FIG1H shows a schematic diagram of a graphical user interface according to an embodiment of the present application.

[0019] FIG2A shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0020] FIG2B shows a schematic diagram of an exemplary first target layer according to an embodiment of the present application.

[0021] FIG2C shows a schematic diagram of an exemplary second target layer according to an embodiment of the present application.

[0022] FIG2D shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0023] FIG2E shows a schematic diagram of another exemplary graphical user interface according to an embodiment of the present application.

[0024] FIG3A shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0025] FIG3B shows a schematic diagram of an exemplary third target layer according to an embodiment of the present application.

[0026] FIG3C shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0027] FIG4A shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0028] FIG4B shows a schematic diagram of an exemplary fourth target layer according to an embodiment of the present application.

[0029] FIG4C shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0030] FIG5A shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0031] FIG5B shows a schematic diagram of an exemplary fifth target layer according to an embodiment of the present application.

[0032] FIG5C shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0033] FIG5D shows a partially enlarged schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0034] FIG6A shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0035] FIG6B shows a schematic diagram of an exemplary graphical user interface according to an embodiment of the present application.

[0036] FIG7 shows a schematic diagram of an exemplary background layer according to an embodiment of the present application.

[0037] FIG8 shows a flowchart of an exemplary method for generating a graphical user interface of an application according to an embodiment of the present application.

[0038] FIG9 shows a schematic diagram of an exemplary hardware structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0039] In order to make the objectives, technical solutions and advantages of this application more clear, this application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0040] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should have the usual meanings understood by people with ordinary skills in the field to which this application belongs. The "first", "second" and similar words used in the embodiments of the present application do not indicate any order, quantity or importance, but are only used to distinguish different components. "Include" or "comprise" and similar words mean that the elements or objects appearing before the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0041] As described in the background, an application's graphical user interface (GUI) is typically generated based on a single image background layer. This background layer is typically rendered in a single color or a gradient. However, using a single image background layer, whether a single color or a gradient, can result in poor visual quality for the generated GUI.

[0042] FIG1A shows a schematic diagram of an exemplary system 100 a according to an embodiment of the present application.

[0043] As shown in FIG1A , system 100a may include a terminal device 12, a server 14, and a database server 16. In some embodiments, server 14, in response to a request from terminal device 12, may obtain data from database server 16, process the data, and return the required data to terminal device 12. As an alternative embodiment, server 14 may directly respond to the request from terminal device 12 and return the required data to terminal device 12.

[0044] A medium (eg, a network) providing a communication link may be included between the terminal device 12, the server 14, and the database server 16. The network may include various connection types, such as a wired communication link, a wireless communication link, or a fiber optic cable.

[0045] Various applications (APP, Chinese abbreviation: application) can be installed on the terminal device 12, such as image processing applications, video conferencing applications, reading applications, video applications, social applications, payment applications, web browsers and instant messaging tools, etc. These applications can all be used to display content.

[0046] The terminal device 12 here can be hardware or software. When the terminal device 12 is hardware, it can be various electronic devices with a display screen, including but not limited to smartphones, tablet computers, e-book readers, MP3 players, laptop computers (Laptops) and desktop computers (PCs), etc. When the terminal device 12 is software, it can be installed in the electronic devices listed above. It can be implemented as multiple software or software modules (for example, to provide distributed services), or it can be implemented as a single software or software module. No specific limitation is given here.

[0047] The server 14 may be a server that provides various services, for example, a backend server that supports various applications displayed on the terminal device 12. The database server 16 may also be a database server that provides various services. It will be understood that if the server 14 can implement the relevant functions of the database server 16, the database server 16 may not be provided in the system 100a.

[0048] The server 14 and database server 16 herein can also be hardware or software. When they are hardware, they can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When they are software, they can be implemented as multiple software programs or software modules (for example, to provide distributed services), or as a single software program or software module. No specific limitation is imposed herein.

[0049] It should be noted that the method for generating a graphical user interface for an application provided in the embodiment of the present application can be executed by system 100a. Specifically, it can be executed interactively between terminal device 12, server 14, and database server 16. It is understood that if terminal device 12 has the functions of server 14 and database server 16, the method can also be executed by terminal device 12. It should be understood that the number of terminal devices, users, servers, and database servers in Figure 1A is merely illustrative. Any number of terminal devices, users, servers, and database servers can be used as needed.

[0050] User 18 can use the application installed on terminal device 12 to implement the method for generating an application graphical user interface according to an embodiment of the present application. In an exemplary application scenario, user 18 can open the application installed on terminal device 12 and, by clicking on the application in terminal device 12, send a request to server 14 for data used to generate the application graphical user interface. Server 14 can be the server corresponding to the application. After receiving the request, server 14 can obtain the corresponding data used to generate the application graphical user interface from database server 16 based on the request and generate the application graphical user interface based on the data. At the same time, server 14 can return the graphical user interface data to terminal device 12 so that the graphical user interface can be displayed on terminal device 12.

[0051] 1B shows a schematic diagram of an exemplary graphical user interface 100 b according to an embodiment of the present application. The graphical user interface 100 b can be applied to an application program.

[0052] As shown in FIG1B , the graphical user interface 100b may include a navigation area 102, a content area 104, and a function area 106. The navigation area 102 may be used to implement functions such as information search and account switching. The content area 104 may be used to display dialog boxes and brief information. The function area 106 may be used to implement functions such as closing the graphical user interface 100b, enlarging or reducing the graphical user interface 100b, and minimizing the graphical user interface 100b.

[0053] 1C shows a schematic diagram of a graphical user interface 110c according to an embodiment of the present application. The graphical user interface 110c can be applied to an application program.

[0054] As shown in FIG1C , the layers used to generate the graphical user interface 110c may include a background layer 112. Background layer 112 is typically drawn from a single image, and the color of background layer 112 is typically drawn as a solid color (one color) or as a layer with a gradient color. As shown in FIG1C , the transparency of background layer 112 drawn as a gradient color increases from edge 120 to edge 122. For example, the color of background layer 112 is darker near edge 120, and lighter near edge 122.

[0055] When generating the graphical user interface 110c, after drawing the background layer 112, the layer of the navigation area 114 and the layer of the function area 116 can be drawn on the background layer 112 near the edge 120, and the layer of the content area 118 can be drawn on the background layer 112 near the edge 122.

[0056] As mentioned above, the background layer 112 is generally drawn from a single image. When the user stretches the GUI 110c (stretching can increase the size of the GUI 110c), the color gradient background layer 112 may have problems such as unstable color contrast.

[0057] FIG1D shows a schematic diagram of yet another graphical user interface 110 c according to an embodiment of the present application.

[0058] As shown in FIG1D , since the background layer 112 is drawn from a single image, when the user stretches the graphical user interface 110c, the gradient color of the background layer 112 will be disordered. For example, as shown in FIG1C , the dark portion of the background layer 112 near the edge 120 should fill the navigation area 114. The light portion of the background layer 112 near the edge 120 should be located under the layer of the content area 118. However, when the user stretches the graphical user interface 110c, as shown in FIG1D , the light portion of the background layer 112 near the edge 120 will be exposed from under the layer of the content area 118, and a partial light background 124 will be presented in the navigation area 114, so that the navigation area 114 cannot be filled with the dark background, and the navigation area 114 has an unstable contrast problem. As a result, the graphical user interface 110c gives the user a bad visual experience and a poor user experience.

[0059] 1E shows a schematic diagram of a graphical user interface 110d according to an embodiment of the present application. The graphical user interface 110d can be applied to an application.

[0060] To avoid the contrast instability issue caused by the aforementioned gradient-colored background layer, the background layer can be rendered as a solid color layer. As shown in FIG1E , background layer 112 can be rendered as a single solid color layer. Since background layer 112 is a single color, no matter how much the user expands the size of graphical user interface 110d, the contrast of navigation area 114 will not be unstable.

[0061] However, the single-color background layer 112 makes the graphical user interface 110d appear visually harsh. As shown in FIG1E , the content area 118 drawn on the background layer 112 is divided into two parts by a gap (gutter bar) 126 of the background layer 112. Since the background layer 112 is drawn in a single color, the color of the gap 126 is consistent with the color of the navigation area 114. When the single color of the background layer 112 is darker, the dark gap 126 divides the content area 118 more fragmented. At the same time, the single-color background layer 112 is visually harsh, resulting in a poor user experience.

[0062] In some scenarios, the graphical user interface of an application may include different layer effects for different operating systems used by terminal devices.

[0063] 1F shows a schematic diagram of a graphical user interface 110 e according to an embodiment of the present application. The graphical user interface 110 e can be applied to an application.

[0064] As shown in FIG1F , when the operating system of the terminal device used to generate the graphical user interface 110 e is a target operating system (e.g., a Windows operating system), the function area 116 can be drawn at a top position (e.g., position 128) near the edge 122 on the background layer 112. However, when the background layer 112 is drawn as a layer with a gradient color, the color of the background layer 112 near the edge 122 is lighter (e.g., the color at position 128 in FIG1F ), which makes the content in the function area 116 less obvious, resulting in a poor user experience.

[0065] As described above, the user can generate the graphical user interface of the embodiment of the present application by opening the application installed in the terminal device. The graphical user interface of the application can be displayed on the graphical user interface of the terminal device.

[0066] 1G shows a schematic diagram of a graphical user interface 110 f according to an embodiment of the present application. The graphical user interface 110 f can be applied to an application.

[0067] As shown in FIG1G , text content 132 may be displayed in the graphical user interface 130 of the terminal device. The graphical user interface 110 f of the application is displayed on the graphical user interface 130 of the terminal device. The background layer 112 of the graphical user interface 110 f may be drawn with different levels of transparency. As shown in FIG1G , when the transparency of the background layer 112 drawn from a single image is high, the text content 132 displayed in the graphical user interface 130 of the terminal device will be displayed in the navigation area 114 through the background layer 112. For example, part 134 of the text content 132 will be displayed in the navigation area 114 through the background layer 112. The part 134 that is displayed through the background layer 112 will cause the content of the navigation area 114 to become confusing. When the content of the navigation area 114 overlaps with the part 134 that is displayed through the background layer 112, the content displayed in the navigation area 114 will not be clear enough, which is not conducive to the user's identification of the content in the navigation area 114, resulting in a poor user experience.

[0068] Moiré is an irregular texture that can appear on an image. It can occur when an image is scaled, or when the end device's display resolution is low, causing gradient banding (uneven color) in the application's graphical user interface.

[0069] 1H shows a schematic diagram of a graphical user interface 110g according to an embodiment of the present application. The graphical user interface 110g can be applied to an application.

[0070] As shown in FIG1H , when the user scales the graphical user interface 110 g (scaling may reduce the size of the graphical user interface 110 g), irregular textures (e.g., moiré patterns) may appear on the background layer 112, such as the texture at position 136 on the background layer 112. Such textures may affect the display quality of the background layer 112, thereby affecting the user's visual experience.

[0071] To avoid these issues, developers are required to periodically update the background layer used to build the application's graphical user interface. However, since the updated background layer is drawn from a single image, the aforementioned issues persist even after the update. Furthermore, irregular updates increase application maintenance costs.

[0072] In light of this, the present application provides a method and related apparatus for generating a graphical user interface for an application. The method determines at least one target layer for the application from multiple candidate layers, each with different layer effects. Based on the at least one target layer, a background layer for the application is generated, and based on the background layer, the graphical user interface for the application is generated. This method improves the visual effects of the graphical user interface for the application.

[0073] In the embodiments of the present application, the background layer can be generated using at least one target layer from among multiple candidate layers. However, when multiple target layers are used to generate the background layer, this can affect the operational performance of the terminal device. Therefore, when generating a graphical user interface, whether to use multiple layers to generate the background layer of the graphical user interface can be determined based on the performance of the terminal device.

[0074] In some embodiments, the performance data of the terminal device can be obtained. When the performance data of the terminal device is greater than or equal to a first threshold, the terminal device is determined to be a high-end machine (with better performance), and multiple layers can be used to generate the background layer of the graphical user interface of the application. The performance data of the terminal device can be the memory value of the terminal device. For example, when the memory value of the terminal device is greater than or equal to 5GiB, the terminal device can be determined to be a high-end machine. In some embodiments, when the performance data of the terminal device is less than the first threshold, the terminal device can be determined to be a low-end machine (with poor performance). At this time, a single layer can be used to generate the background layer of the graphical user interface to avoid the problem of using multiple layers on a low-end machine affecting the operating effect of the low-end machine. As an optional embodiment, it is also possible to determine whether the terminal device is running in low-end mode through command line parameters when the terminal device is started.

[0075] FIG2A shows a schematic diagram of an exemplary background layer 200 according to an embodiment of the present application. Background layer 200 may be a first background layer. Background layer 200 may be used to generate a graphical user interface of an application.

[0076] When it is determined that the performance of the terminal device is good, as shown in FIG2A , in some embodiments, a first target layer 202 and a second target layer 204 may be determined from multiple candidate layers to generate a background layer 200. The first target layer 202 may be a window layer corresponding to the entire window of the application's graphical user interface, and the second target layer 204 may be a navigation layer corresponding to the navigation area of ​​the application's graphical user interface.

[0077] FIG2B shows a schematic diagram of an exemplary first target layer 202 according to an embodiment of the present application.

[0078] As shown in FIG2B , in some embodiments, the first target layer 202 can be drawn as a layer with a relatively soft color. For example, as shown in FIG2B , the first target layer 202 has a relatively large grayscale value (lighter color). The grayscale value of the first target layer 202 can be drawn to be greater than a second threshold. The second threshold can be customized according to user needs and is not limited in this embodiment of the present application. The second target layer 204 can be drawn as two parts with different effects.

[0079] FIG2C shows a schematic diagram of an exemplary second target layer 204 according to an embodiment of the present application.

[0080] As shown in FIG2C , in some embodiments, the second target layer 204 may be drawn as a first portion 2041 and a second portion 2042. The first portion 2041 may be drawn in one color (e.g., a first color), the second portion 2042 may be drawn in the same color as the first portion 2041, and the transparency of the second portion 2042 may increase gradually from the first edge 230 to the second edge 222. For example, the transparency of the second portion 2042 may be drawn to change from 100% to 0% from the first edge 230 to the second edge 222.

[0081] Returning to Figure 2A , when generating background layer 200, in some embodiments, first target layer 202 may be drawn, and second target layer 204 may be drawn on top of first target layer 202. Thus, because first portion 2041 of second target layer 204 is drawn in a single color, the color of first portion 2041 is less likely to change with changes in background layer 200, resulting in a more stable color. Furthermore, because second portion 2042 of second target layer 204 has a gradually increasing transparency, first target layer 202 can be seen through second portion 2042. This allows for a more diverse color palette for background layer 200 while improving the color stability of background layer 200.

[0082] After the background layer 200 is generated, a graphical user interface can be generated using the background layer 200 .

[0083] Fig. 2D shows a schematic diagram of an exemplary graphical user interface 210 according to an embodiment of the present application. Fig. 2E shows a schematic diagram of yet another exemplary graphical user interface 210 according to an embodiment of the present application. The graphical user interface 210 may be applied to an application.

[0084] As shown in FIG. 2D , in some embodiments, the graphical user interface 210 may include a navigation area 214 , a function area 216 , and a content area 218 .

[0085] 2D , in some embodiments, a length 228 of the second portion 2042 of the second target layer 204 can be drawn from the first edge 230 to the second edge 222. Alternatively, the length 228 of the second portion 2042 can be drawn from the first edge 230 to a position between the first edge 230 and the second edge 222.

[0086] As shown in FIG2D , in some embodiments, the layer of the navigation area 214 of the graphical user interface 210 can be drawn on the first portion 2041 of the second target layer 204. As shown by the length 224 of the first portion 2041 from the edge 220 to the first edge 230 in FIG2D , the first portion 2041 can fill the navigation area 214 and can be located below a portion of the content area 218.

[0087] Because first portion 2041 is a fixed, single color, drawing the navigation area 214 layer on first portion 2041 can avoid the unstable contrast of navigation area 114 that occurs when stretching GUI 110c generated using background layer 112 of a single image as shown in FIG1D . For example, as shown in FIG2E , when the user stretches GUI 210, navigation area 214 does not display the light-colored background 124 shown in FIG1D . Utilizing background layer 200 to generate GUI 210 makes the contrast of navigation area 214 more stable, improves the visual quality of the GUI, and thus enhances the user experience.

[0088] As shown in FIG2D , in some embodiments, the layer of the content area 218 of the graphical user interface 210 can be drawn on the second portion 2042 of the second target layer 204. Because the second portion 2042 is partially transparent and the first target layer 202 is drawn as a lighter layer, drawing the layer of the content area 218 on the second portion 2042 allows the first target layer 202 to penetrate the second portion 2042 of the second target layer 204, thereby dividing the content area 218 into multiple content partitions. For example, as shown in FIG2D , the gap 226 formed by the first target layer 202 penetrating the second portion 2042 can divide the content area 218 into a first content partition 2181 and a second content partition 2182. Because the first target layer 202 and the first portion 2041 of the second target layer 204 are drawn in different colors, the color of the graphical user interface 210 is diversified and more vivid. Furthermore, the lighter color of the gap 226 avoids the problem of the darker gap 126 in FIG1E , which fragments the content area 118. The graphical user interface generated by using the background layer 200 improves the visual effect of the interface, thereby providing a better user experience.

[0089] FIG3A shows a schematic diagram of an exemplary background layer 300 according to an embodiment of the present application. Background layer 300 may be a second background layer. Background layer 300 may be used to generate a graphical user interface of an application.

[0090] As described above, the graphical user interface of an application can include different layer effects for different operating systems used by the terminal device. When the operating system used by the terminal device is a target operating system (e.g., a Windows operating system), as shown in FIG3A , in some embodiments, a first target layer 202, a second target layer 204, and a third target layer 302 can be determined from multiple candidate layers to generate a background layer 300. The third target layer 302 can be the top layer, corresponding to the functional area of ​​the graphical user interface of the application.

[0091] FIG3B shows a schematic diagram of an exemplary third target layer 302 according to an embodiment of the present application.

[0092] As shown in FIG3B , the third target layer 302 can be drawn as a third portion 3021 and a fourth portion 3022. The third portion 3021 can be drawn in a single color (e.g., the second color), and the fourth portion 3022 can be drawn in the same color as the third portion 3021. Furthermore, the transparency of the fourth portion 3022 can gradually increase from the third edge 306 to the fourth edge 304. For example, the transparency of the fourth portion 3022 can be drawn to change from 100% to 0% from the third edge 306 to the fourth edge 304. As an alternative embodiment, the third target layer 302 can be a gradient color image (e.g., the third portion 3021 and the fourth portion 3022 are drawn as a single image).

[0093] Returning to FIG. 3A , when generating the background layer 300, in some embodiments, the first target layer 202 may be drawn, the second target layer 204 may be drawn on the first target layer 202, and the third target layer 302 may be drawn on the second target layer 204. Thus, because the third portion 3021 of the third target layer 302, drawn on the topmost layer, is rendered in a single color, the contrast of the third portion 3021 is more stable. This avoids the problem of the background layer 112 becoming lighter near the top of the edge 122, as shown in FIG. 1F , which could affect the visual effect of the functional area 116 when the content of the functional area 116 is rendered in a light color. Furthermore, because the fourth portion 3022 of the third target layer 302 is drawn with increasing transparency, when the third target layer 302 is drawn on the topmost layer of the background layer 300, the fourth portion 3022 does not obscure the layer effects of the first target layer 202 and the second target layer 204.

[0094] After the background layer 300 is generated, a graphical user interface can be generated using the background layer 300 .

[0095] 3C shows a schematic diagram of an exemplary graphical user interface 310 according to an embodiment of the present application. The graphical user interface 310 can be applied to an application program.

[0096] As shown in FIG3C , in some embodiments, the width of the third portion 3021 of the third target layer 302 can be drawn from edge 322 to the third edge 306 to fill the area where the functional area 316 is located. The width 318 of the fourth portion 3022 of the third target layer 302 can be drawn from the third edge 306 to the fourth edge 304. As an alternative embodiment, the width 318 of the fourth portion 3022 can be drawn from the third edge 306 to a position between the third edge 306 and the fourth edge 304. Because the fourth portion 3022 is drawn as a portion with a gradual transparency, the fourth portion 3022 drawn on the top layer of the background layer 300 does not obstruct the layer effects of the first target layer 202 and the second target layer 204.

[0097] In some embodiments, when the resource used to draw the third target layer 302 is an image with a gradient color, the width 320 of the third target layer 302 may be drawn from the edge 322 to the fourth edge 304. As an alternative embodiment, the width of the third target layer 302 may also be drawn from the edge 322 to a position between the edge 322 and the fourth edge 304.

[0098] 3C , in some embodiments, the layer of the function area 316 of the graphical user interface 310 may be drawn on the third portion 3021 of the third target layer 302. The third portion 3021 may fill the function area 316 and may be located below a portion of the content area 218.

[0099] Because third portion 3021 is drawn in a single color, the contrast is relatively stable. When the content of function area 316 is drawn in a dark color, third portion 3021 can be drawn in a light color. When the content of function area 316 is drawn in a light color, third portion 3021 can be drawn in a dark color. This creates a clearer color contrast between third portion 3021 and the content of function area 316, making it easier for users to identify the content of function area 316. This avoids the problem, as shown in FIG. 1F , where the color of the content of function area 116 is too close to the color of the top of background layer 112 near edge 122, making it difficult for users to identify the content of function area 116. This improves the visual quality of the graphical user interface, resulting in a better user experience.

[0100] FIG4A shows a schematic diagram of an exemplary background layer 400 according to an embodiment of the present application. Background layer 400 may be a third background layer. Background layer 400 may be used to generate a graphical user interface of an application.

[0101] The frosted glass effect includes translucency and blur. For different operating systems used by terminal devices, it is necessary to determine whether the operating system used by the terminal device supports the target function for implementing the frosted glass effect for the graphical user interface.

[0102] When the operating system of the terminal device application supports the target function, as shown in FIG4A , in some embodiments, the first target layer 202, the second target layer 204, the third target layer 302, and the fourth target layer 402 can be determined from multiple candidate layers to generate the background layer 400. The fourth target layer 402 can be a blurred layer.

[0103] FIG4B shows a schematic diagram of an exemplary fourth target layer 402 according to an embodiment of the present application.

[0104] As shown in FIG. 4B , in some embodiments, the fourth target layer 402 may be drawn with semi-transparent and blurred layer effects.

[0105] Returning to Figure 4A , when generating background layer 400, in some embodiments, fourth target layer 402 may be drawn, first target layer 202 may be drawn on fourth target layer 402, second target layer 204 may be drawn on first target layer 202, and third target layer 302 may be drawn on second target layer 204. Furthermore, first target layer 202, second target layer 204, and third target layer 302 may be drawn with different levels of transparency to achieve the effect of fourth target layer 402, located in background layer 400, obscuring content in a graphical user interface of a terminal device.

[0106] Fig. 4C shows a schematic diagram of an exemplary graphical user interface 410 according to an embodiment of the present application. The graphical user interface 410 can be applied to an application program.

[0107] As described above, referring to FIG. 1G , when the transparency of the background layer 112 is high, the text content 132 displayed in the graphical user interface 130 of the terminal device will be displayed in the navigation area 114 through the background layer 112 .

[0108] To create a transparent visual effect for the graphical user interface, in some embodiments, the first target layer 202, the second target layer 204, and the third target layer 302 can be drawn with different transparencies. However, this can lead to the problem that, as described above, the text content displayed in the graphical user interface of the terminal device will show through the background layer, affecting the legibility of the content in the graphical user interface. It is understood that general international standards require a contrast ratio of 4.7 / 1 for graphical user interfaces.

[0109] In view of this, as shown in Figure 4C, the graphical user interface 410 is generated using the background layer 400. The translucent and blurred layer effects of the fourth target layer 402 drawn on the bottom layer in the background layer 400 effectively block the text content 418. For example, the text content 418 is not displayed in the navigation area 214 through the background layer 400.

[0110] Because different areas of the graphical user interface 410 (e.g., the navigation area 214, the content area 218, and the function area 216) can be adapted to different degrees of frosted glass effects, in some embodiments, the first target layer 202, the second target layer 204, and the third target layer 302 can be drawn with different degrees of transparency. For example, if the navigation area 214 of the graphical user interface 410 requires a darker visual effect, the second target layer 204 can be drawn with a lower degree of transparency. If the content area 218 requires a more transparent visual effect, the first target layer 202 and the layers of the content area 218 can be drawn with a higher degree of transparency. Thus, due to the presence of the fourth target layer 402, even if the first target layer 202 and the layers of the content area 218 are drawn with a higher degree of transparency to achieve a transparent visual effect for the content area 218, the recognizability of the content in the content area 218 will not be affected, and thus the user's ability to recognize the content in the graphical user interface 410 will not be affected.

[0111] FIG5A shows a schematic diagram of an exemplary background layer 500 according to an embodiment of the present application. Background layer 500 may be a fourth background layer. Background layer 500 may be used to generate a graphical user interface of an application.

[0112] As mentioned above, moiré is an irregular texture that can appear on an image. Moiré is more likely to appear when an image is scaled, or when a terminal device has a low display resolution, resulting in gradient color banding (uneven color) in a graphical user interface.

[0113] When texture exists in the graphical user interface, as shown in FIG5A , in some embodiments, a first target layer 202, a second target layer 204, a third target layer 302, a fourth target layer 402, and a fifth target layer 502 may be determined from multiple candidate layers to generate a background layer 500. The fifth target layer 502 may be a particle layer or a variegated layer.

[0114] FIG5B shows a schematic diagram of an exemplary fifth target layer 502 according to an embodiment of the present application.

[0115] As shown in FIG5B , in some embodiments, the fifth target layer 502 may be drawn as a layer with a grainy visual effect. The fifth target layer 502 may neutralize the texture of the graphical user interface or make the color of the graphical user interface uniform.

[0116] Returning to Figure 5A, when generating the background layer 500, in some embodiments, the fourth target layer 402 can be drawn, the first target layer 202 can be drawn on the fourth target layer 402, the second target layer 204 can be drawn on the first target layer 202, the third target layer 302 can be drawn on the second target layer 204, and the fifth target layer 502 can be drawn on the third target layer 302 to generate the background layer 500.

[0117] Fig. 5C shows a schematic diagram of an exemplary graphical user interface 510 according to an embodiment of the present application. The graphical user interface 510 can be applied to an application program.

[0118] As described above, referring to FIG. 1H , the texture at position 136 on the background layer 112 causes the color of part of the GUI 110 g to be uneven, affecting the display quality of the GUI 110 g and the user's visual experience.

[0119] As shown in FIG5C , in the graphical user interface 510 generated using the background layer 500 , the fifth target layer 502 can neutralize the texture so that the graphical user interface 510 presents a visual effect of uniform color, thereby improving the display quality of the graphical user interface 510 and enhancing the user's visual experience.

[0120] FIG5D shows a partially enlarged schematic diagram of an exemplary graphical user interface 510 according to an embodiment of the present application.

[0121] 5D , the visual effect of the graphical user interface 510 generated using the background layer 500 can be seen in the exemplary visual effect shown at position 518. It can be seen that the texture at position 518 is relatively uniform, neutralizing the texture at position 136 in FIG 1H .

[0122] As described above, when the terminal device is a high-end device, multiple layers can be determined from multiple candidate layers to generate a background layer for the application's graphical user interface. However, when the terminal device is a low-end device, using multiple layers to generate the background layer can affect the terminal device's operating speed. Therefore, in some embodiments, a single layer can be used to generate the background layer for low-end devices.

[0123] FIG6A shows a schematic diagram of an exemplary background layer 600 according to an embodiment of the present application. Background layer 600 may be a fifth background layer. Background layer 600 may be used to generate a graphical user interface of an application.

[0124] As shown in FIG6A , in some embodiments, when it is determined that the performance data of the terminal device is less than a first threshold, a sixth target layer 602 may be determined from multiple candidate layers, and the background layer 600 may be generated using the sixth target layer 602. Since the sixth target layer 602 is a single layer, the data volume of the single-layer sixth target layer 602 is relatively small, so it does not occupy a large amount of memory on the terminal device and does not affect the operating data of the terminal device.

[0125] After the background layer 600 is generated, a graphical user interface can be generated using the background layer 600 .

[0126] FIG6B shows a schematic diagram of an exemplary graphical user interface 610 according to an embodiment of the present application.

[0127] As shown in FIG6B , to soften the visual effect of a graphical user interface 610 generated using a background layer 600, in some embodiments, a lighter sixth target layer 602 may be drawn. For example, the sixth target layer 602 may be drawn in a third color, which may be a color with a larger grayscale value. Furthermore, in some embodiments, the sixth target layer 602 may be drawn with a higher transparency to avoid the problem of a dark background layer causing the graphical user interface to have a harsh visual effect.

[0128] FIG7 shows a schematic diagram of an exemplary background layer 700 according to an embodiment of the present application.

[0129] As shown in FIG7 , in some embodiments, the visual effect displayed by background layer 700 may be the visual effect produced by the superposition of first target layer 202, second target layer 204, third target layer 302, fourth target layer 402, and fifth target layer 502. It can be seen that the presence of a gradient color in background layer 700 makes the colors of background layer 700 more vivid and diverse; the presence of fifth target layer 502 makes the colors of background layer 700 more uniform and the overall visual effect softer.

[0130] It should be noted that the visual effects of the layers or graphical user interfaces shown in any of the above embodiments are merely exemplary, and the visual effects presented by the layers or graphical user interfaces shown in any of the above embodiments in actual applications should also be included in the scope of protection of this application.

[0131] This application provides a method and related apparatus for generating a graphical user interface for an application. This method determines at least one target layer for the application from multiple candidate layers, each with different layer effects. Based on the at least one target layer, a background layer for the application is generated, and the graphical user interface for the application is generated based on the background layer. This method improves the visual effects of the graphical user interface for the application. Using the background layer described in any of the above embodiments to generate a graphical user interface avoids the aforementioned issue of increasing application maintenance costs due to irregular background layer updates.

[0132] Figure 8 illustrates a flow chart of an exemplary method 800 for generating a graphical user interface for an application, according to an embodiment of the present application. Method 800 can be implemented by system 100a. For example, user 18 can click on an application on terminal device 12 to generate a request to server 14 for displaying the application's graphical user interface. In response to the request, server 14 can retrieve data from database 16 for generating a background layer for the graphical user interface. Server 14 can then generate a graphical user interface based on the data and return the graphical user interface data to terminal device 12, so that the application's graphical user interface can be displayed to user 18 on terminal device 12.

[0133] As shown in FIG. 8 , method 800 may include the following steps.

[0134] In step 802, at least one target layer of the application may be determined from a plurality of candidate layers, wherein the layer effects of the plurality of candidate layers are different. Background layers generated by different layer effects can generate a graphical user interface with more vivid and diverse visual effects.

[0135] In some embodiments, determining at least one target layer of the application from a plurality of candidate layers further includes: obtaining performance data of a terminal device (e.g., terminal device 12); wherein the terminal device is used to generate a graphical user interface of the application (e.g., an application installed on the terminal device 12); and in response to the performance data being greater than or equal to a first threshold (e.g., the first threshold may be 5 GiB), determining a first target layer (e.g., first target layer 202 in FIG. 2A ) and a second target layer (e.g., second target layer 204 in FIG. 2A ) of the application from the plurality of candidate layers. When the performance of the terminal device is good, generating a graphical user interface with multiple layers does not affect the operating speed of the terminal device.

[0136] In some embodiments, determining at least one target layer for the application from a plurality of candidate layers further comprises: in response to the operating system of the terminal device being a target operating system (e.g., a Windows operating system), determining a third target layer for the application (e.g., third target layer 302 in FIG. 3A ) from the plurality of candidate layers. For different operating systems applied by the terminal device, the graphical user interface of the application may include different layer effects. Therefore, the third target layer is used for the corresponding target operating system to overcome problems arising when the graphical user interface is applied to the target operating system.

[0137] In some embodiments, determining at least one target layer of the application from multiple candidate layers further includes: in response to the terminal device including a target function (e.g., a function for achieving a frosted glass effect), determining a fourth target layer of the application (e.g., fourth target layer 402 in FIG. 4A ) from the multiple candidate layers; wherein the target function is used to achieve a translucent effect and a blurred effect of the graphical user interface. When the terminal device supports the target function, the fourth target layer, in combination with the target function, can achieve a visual effect of obscuring background content of the graphical user interface of the terminal device.

[0138] In some embodiments, determining at least one target layer for the application from the plurality of candidate layers further includes: in response to the presence of texture (e.g., moiré) in the graphical user interface, determining a fifth target layer for the application (e.g., fifth target layer 502 in FIG. 5A ) from the plurality of candidate layers; wherein the fifth target layer is used to neutralize the texture of the graphical user interface. The fifth target layer used to neutralize the texture can make the graphical user interface color uniform and visually softer.

[0139] In some embodiments, determining at least one target layer for the application from the plurality of candidate layers further includes: in response to the performance data being less than the first threshold, determining a sixth target layer for the application from the plurality of candidate layers (e.g., sixth target layer 602 in FIG. 6A ). For low-end machines with poor performance, using multiple layers to generate a graphical user interface can affect the operating speed of the low-end machine. Therefore, for low-end machines with poor performance, a single-layer sixth target layer can be used to generate the graphical user interface to avoid the aforementioned problem.

[0140] In step 804 , a background layer of the application may be generated based on the at least one target layer.

[0141] In some embodiments, generating the background layer of the application based on the at least one target layer further includes: drawing the first target layer; and drawing the second target layer on the first target layer to generate the first background layer of the application (e.g., background layer 200 in FIG. 2A ). The color of the background layer generated based on the first target layer and the second target layer can be diversified while improving the color stability of the background layer.

[0142] In some embodiments, generating the background layer of the application based on the at least one target layer further includes: drawing the third target layer on the second target layer to generate a second background layer of the application (e.g., background layer 300 in FIG. 3A ). The second background layer corresponding to the target operating system can overcome the problem of low contrast between the background color and the functional area content, which makes it difficult for users to recognize the functional area content, thereby improving the visual effect of the graphical user interface.

[0143] In some embodiments, generating the background layer of the application based on the at least one target layer further includes: drawing the fourth target layer before drawing the first target layer; drawing the first target layer, the second target layer, and the third target layer with different levels of transparency to generate a third background layer of the application (e.g., background layer 400 in FIG. 4A ); wherein the fourth target layer has a semi-transparent and blurred layer effect. The semi-transparent and blurred layer effect of the third background layer can obscure the background content of the graphical user interface of the terminal device, thereby improving the visual effect of the graphical user interface.

[0144] In some embodiments, generating the background layer of the application based on the at least one target layer further includes drawing the fifth target layer on the third target layer to generate a fourth background layer of the application (e.g., background layer 500 in FIG. 5A ). The fourth background layer can neutralize the texture present in the graphical user interface, thereby improving the visual effect of the graphical user interface.

[0145] In some embodiments, the sixth target layer is rendered as a third color (e.g., a color with a larger grayscale value), and generating the background layer of the application based on the at least one target layer further includes rendering the sixth target layer to generate a fifth background layer of the application (e.g., background layer 600 in FIG. 6A ). The fifth background layer generated from a single layer can be applied to low-end computers, thereby not affecting the operating speed of low-end computers and not occupying a large amount of low-end computer memory.

[0146] In step 806 , a graphical user interface of the application may be generated based on the background layer.

[0147] In some embodiments, the second target layer includes a first portion (e.g., first portion 2041 in Figures 2C and 2D), the first portion is drawn in a first color, the graphical user interface of the application includes a navigation area (e.g., navigation area 214 in Figure 2D), and generating the graphical user interface of the application based on the background layer further includes: drawing the layer of the navigation area on the first portion based on the first background layer to generate the graphical user interface of the application (e.g., graphical user interface 210 in Figure 2D). The contrast of the navigation area in the graphical user interface is more stable, thereby improving the user experience.

[0148] In some embodiments, the second target layer further includes a second portion (e.g., second portion 2042 in Figures 2C and 2D ), the second portion is painted in the first color, and the transparency of the second portion increases from a first edge close to the first portion (e.g., first edge 230 in Figures 2C and 2D ) to a second edge away from the first portion (e.g., second edge 222 in Figures 2C and 2D ). The graphical user interface includes a content area (e.g., content area 218 in Figure 2D ), and generating the graphical user interface of the application based on the background layer further includes: drawing the layer of the content area in the second portion based on the first background layer to generate the graphical user interface of the application (e.g., graphical user interface 210 in Figure 2D ); wherein the grayscale value of the first target layer is greater than a second threshold, and the first target layer divides the content area into multiple content partitions (e.g., first content partition 2181 and second content partition 2182 in Figure 2D ) through the second portion. Because the first portions of the first target layer and the second target layer are painted in different colors, the colors of the graphical user interface are diversified and more vivid. In addition, since the color of the gap is lighter, the problem of darker-colored gaps dividing the content area is avoided.

[0149] In some embodiments, the third target layer includes a third portion (e.g., third portion 3021 in FIG. 3B ) and a fourth portion (e.g., fourth portion 3022 in FIG. 3B ). The third portion is drawn in the second color, the fourth portion is drawn in the second color, and the transparency of the fourth portion increases from a third edge close to the third portion (e.g., third edge 306 in FIG. 3B ) to a fourth edge away from the third portion (e.g., fourth edge 304 in FIG. 3B ). The graphical user interface of the application includes a function area (e.g., function area 316 in FIG. 3C ). Generating the graphical user interface of the application based on the background layer further includes: drawing the function area on the third portion based on the second background layer to generate the graphical user interface of the application (e.g., graphical user interface 310 in FIG. 3C ). The graphical user interface generated based on the second background layer avoids the problem that the color of the content in the function area is close to the color of the background layer, making it difficult for users to recognize the content in the function area, thereby improving the visual effect of the graphical user interface.

[0150] In the embodiments of the present application, the background layer can be generated using at least one target layer from among multiple candidate layers. However, when multiple target layers are used to generate the background layer, this can affect the operational performance of the terminal device. Therefore, when generating a graphical user interface, whether to use multiple layers to generate the background layer of the graphical user interface can be determined based on the performance of the terminal device.

[0151] It should be noted that the method of the embodiment of the present application can be performed by a single device, such as a computer or server. The method of this embodiment can also be applied in a distributed scenario and performed by multiple devices working together. In such a distributed scenario, one of the multiple devices may only perform one or more steps of the method of the embodiment of the present application, and the multiple devices will interact with each other to complete the method.

[0152] It should be noted that the above description is limited to some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in an order different from that described in the above embodiments and still achieve the desired results. Furthermore, the processes depicted in the accompanying drawings do not necessarily require the specific order or sequential order shown to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0153] Based on the same technical concept, corresponding to method 800 described in any of the above embodiments, the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and runnable on the processor, wherein the processor implements method 800 as described in any of the above embodiments when executing the program.

[0154] FIG9 shows a schematic diagram of the hardware structure of an exemplary electronic device according to an embodiment of the present application. The device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other within the device via the bus 1050.

[0155] The processor 1010 can be implemented using a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0156] The memory 1020 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage devices, dynamic storage devices, etc. The memory 1020 can store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 1020 and is called and executed by the processor 1010.

[0157] The input / output interface 1030 is used to connect to an input / output module to enable information input and output. The input / output module can be configured as a component within the device (not shown) or can be externally connected to the device to provide corresponding functions. Input devices may include a keyboard, mouse, touch screen, microphone, various sensors, etc., while output devices may include a display, speaker, vibrator, indicator light, etc.

[0158] The communication interface 1040 is used to connect to a communication module (not shown) to enable communication between the device and other devices. The communication module can communicate via a wired method (such as USB, network cable, etc.) or a wireless method (such as mobile network, WiFi, Bluetooth, etc.).

[0159] The bus 1050 comprises a path for transmitting information between the various components of the device (eg, the processor 1010 , the memory 1020 , the input / output interface 1030 , and the communication interface 1040 ).

[0160] It should be noted that although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040, and the bus 1050, in a specific implementation, the device may also include other components necessary for normal operation. In addition, it will be understood by those skilled in the art that the above device may only include the components necessary to implement the embodiments of this specification, and does not necessarily include all the components shown in the figure.

[0161] The electronic device of the above embodiment is used to implement the corresponding method 800 in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0162] Based on the same technical concept, corresponding to method 800 described in any of the above embodiments, the present application also provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute method 800 as described in any of the above embodiments.

[0163] The computer-readable media of this embodiment include permanent and non-permanent, removable and non-removable media, and information storage can be achieved by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0164] The computer instructions stored in the storage medium of the above embodiment are used to enable the computer to execute method 800 as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0165] Based on the same inventive concept, corresponding to method 800 described in any of the above embodiments, the present application further provides a computer program product, including computer program instructions. When the computer program instructions are executed on a computer, the computer executes method 800 described in any of the above embodiments. In some embodiments, the computer program instructions can be executed by one or more processors of a computer to cause the computer and / or the processor to execute method 800. Corresponding to the execution subject corresponding to each step in each embodiment of method 800, the processor executing the corresponding step can belong to the corresponding execution subject.

[0166] The computer program product of the above embodiment is used to enable the computer and / or the processor to execute method 800 as described in any of the above embodiments, and has the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0167] It is understandable that before using the technical solutions of each embodiment of the present disclosure, the type, scope of use, usage scenarios, etc. of the personal information involved will be informed to the user in an appropriate manner, and the user's authorization will be obtained.

[0168] For example, in response to a user's active request, a prompt message is sent to the user to clearly inform the user that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the electronic device, application, server, storage medium, or other software or hardware that performs the operation of the disclosed technical solution based on the prompt message.

[0169] As an optional but non-limiting implementation, in response to a user's active request, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. Furthermore, the pop-up window may also contain a selection control for the user to select "agree" or "disagree" to provide personal information to the electronic device.

[0170] It is understandable that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0171] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. Within the scope of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.

[0172] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power supply / ground connection with the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the following fact, that is, the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented in the embodiments of the present application (that is, these details should be fully within the scope of understanding of those skilled in the art). When specific details (e.g., circuits) are set forth to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered to be illustrative rather than restrictive.

[0173] Although the present invention has been described in conjunction with specific embodiments thereof, many alternatives, modifications, and variations of these embodiments will be apparent to those skilled in the art based on the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may utilize the embodiments discussed.

[0174] The embodiments of the present application are intended to cover all such substitutions, modifications, and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of this application.

Claims

1. A method for generating a graphical user interface of an application, comprising: Determining at least one target layer of the application from a plurality of candidate layers, wherein the layer effects of the plurality of candidate layers are different; generating a background layer of the application according to the at least one target layer; A graphical user interface of the application is generated according to the background layer.

2. The method of claim 1, wherein: The step of determining at least one target layer of the application from a plurality of candidate layers further comprises: Acquiring performance data of a terminal device; wherein the terminal device is used to generate a graphical user interface of the application; In response to the performance data being greater than or equal to a first threshold, determining a first target layer and a second target layer of the application from the plurality of candidate layers.

3. The method of claim 2, wherein: Generating the background layer of the application according to the at least one target layer further comprises: Draw the first target layer; The second target layer is drawn on the first target layer to generate a first background layer of the application.

4. The method of claim 3, wherein: The second target layer includes a first portion, the first portion is drawn in a first color, the graphical user interface of the application includes a navigation area, and the generating the graphical user interface of the application according to the background layer further includes: The layer of the navigation area is drawn in the first part according to the first background layer to generate a graphical user interface of the application.

5. The method of claim 4, wherein: The second target layer also includes a second portion, the second portion is drawn in the first color and the transparency of the second portion increases from a first edge close to the first portion to a second edge far from the first portion, the graphical user interface includes a content area, and generating the graphical user interface of the application according to the background layer further includes: According to the first background layer, the layer of the content area is drawn in the second part to generate a graphical user interface of the application; wherein the grayscale value of the first target layer is greater than a second threshold, and the first target layer divides the content area into multiple content partitions through the second part.

6. The method of claim 4, wherein: The determining at least one target layer of the application from the plurality of candidate layers further comprises: in response to the operating system of the terminal device being a target operating system, determining a third target layer of the application from the plurality of candidate layers; Generating the background layer of the application according to the at least one target layer further includes: drawing the third target layer on the second target layer to generate a second background layer of the application.

7. The method of claim 6, wherein: The third target layer includes a third part and a fourth part, the third part is drawn as a second color, the fourth part is drawn as the second color, and the transparency of the fourth part increases from a third edge close to the third part to a fourth edge far from the third part, the graphical user interface of the application includes a function area, and generating the graphical user interface of the application according to the background layer further includes: The function area is drawn on the third part according to the second background layer to generate a graphical user interface of the application.

8. The method of claim 6, wherein: The step of determining at least one target layer of the application from a plurality of candidate layers further comprises: In response to the terminal device including a target function, a fourth target layer of the application is determined from the multiple candidate layers; wherein the target function is used to achieve a translucent effect and a blur effect of the graphical user interface.

9. The method of claim 8, wherein: Generating the background layer of the application according to the at least one target layer further comprises: Before drawing the first target layer, drawing the fourth target layer; The first target layer, the second target layer and the third target layer are drawn with different transparency to generate a third background layer of the application; wherein the fourth target layer has a semi-transparent and blurred layer effect.

10. The method of claim 6, wherein: The determining of at least one target layer of the application from a plurality of candidate layers further comprises: in response to the graphical user interface having a texture, determining a fifth target layer of the application from a plurality of candidate layers; wherein the fifth target layer is used to neutralize the texture of the graphical user interface; Generating the background layer of the application according to the at least one target layer further includes: drawing the fifth target layer on the third target layer to generate a fourth background layer of the application.

11. The method of claim 2, wherein: The step of determining at least one target layer of the application from a plurality of candidate layers further comprises: In response to the performance data being less than the first threshold, determining a sixth target layer for the application from the plurality of candidate layers.

12. The method of claim 11, wherein: The sixth target layer is drawn as a third color, and the generating the background layer of the application according to the at least one target layer further comprises: The sixth target layer is drawn to generate a fifth background layer of the application.

13. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 12 is implemented.

14. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to make a computer execute the method according to any one of claims 1 to 12.

15. A computer program product, wherein: The method comprises computer program instructions, which, when executed on a computer, cause the computer to execute the method according to any one of claims 1 to 12.

Images