Interactive element display method, device, electronic device and storage medium

Abstract

The present disclosure relates to an interactive element display method, device, electronic device and storage medium. The method includes: when a target interactive element is triggered, determining the initial background color corresponding to the target interactive element; obtaining the target background color of the target interactive element according to the initial background color; switching the background color of the target interactive element to display the target background color. The interactive element configuration method provided in the present disclosure can obtain the target color that needs to be switched after the interactive element is triggered by the initial background color of the interactive element when the interactive element is triggered. Compared with the related art that requires developers to set the display style after triggering for each interactive element, the present disclosure can automatically calculate the display style after the interaction is triggered, thereby improving the configuration efficiency of the interactive elements.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to an interactive element display method, device, electronic device and storage medium. Background Art

[0002] With the development of computer technology, a technology has emerged that realizes user interaction through interactive elements displayed on the interface, such as buttons, drop-downs, and table elements. Users can trigger the above interactive elements to perform corresponding interactive behaviors. At this time, after the interactive elements respond to the user's triggering operation, the display of the interactive elements can also be changed accordingly. For example, when a user clicks a button displayed on a certain interface, the button can produce a darker color effect to indicate that the button has been triggered.

[0003] In the related art, developers need to independently set the triggered style for each interactive element displayed on the interface. Therefore, when there are a large number of interactive elements on the interface, developers need to set the styles of the interactive elements multiple times. Currently, the configuration efficiency of interactive elements is low. Summary of the invention

[0004] The present disclosure provides an interactive element display method, device, electronic device and storage medium to at least solve the problem of low configuration efficiency of interactive elements in the related art. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of an embodiment of the present disclosure, there is provided a method for displaying an interactive element, comprising:

[0006] When the target interactive element is triggered, determining an initial background color corresponding to the target interactive element;

[0007] According to the initial background color, obtaining the target background color of the target interactive element;

[0008] The background color of the target interactive element is switched to display the target background color.

[0009] In an exemplary embodiment, obtaining the target background color of the target interactive element based on the initial background color includes: obtaining a first brightness value, saturation, and hue value for the target interactive element based on the initial background color; and obtaining the target background color for the target interactive element based on the first brightness value, saturation, and hue value.

[0010] In an exemplary embodiment, obtaining a target background color for the target interactive element based on the first brightness value, saturation and hue value includes: obtaining a second brightness value for the target interactive element according to the first brightness value, the saturation and the hue value; and obtaining the target background color using the second brightness value, the saturation and the hue value.

[0011] In an exemplary embodiment, the second brightness value for the target interactive element is obtained based on the first brightness value, the saturation and the hue value, including: determining a brightness value adjustment ratio corresponding to the target interactive element based on the saturation and the hue value; and adjusting the first brightness value using the brightness value adjustment ratio to obtain the second brightness value.

[0012] In an exemplary embodiment, after switching the background color of the target interactive element to displaying the target background color, it also includes: when the triggering of the target interactive element ends, switching the background color of the target interactive element from the target background color to displaying the initial background color; or when the target interactive element is triggered again, switching the background color of the target interactive element from the target background color to displaying the initial background color.

[0013] In an exemplary embodiment, when the target interactive element is triggered, before determining the initial background color corresponding to the target interactive element, the method also includes: obtaining the interactive elements to be configured for display on the page; filtering out disabled interactive elements configured with a disabled triggering attribute from the interactive elements to be configured, and using the interactive elements other than the disabled interactive elements in the interactive elements to be configured as the target interactive elements.

[0014] In an exemplary embodiment, determining the initial background color corresponding to the target interactive element includes: acquiring the background color of the target interactive element displayed on the page; and using the background color of the target interactive element displayed on the page as the initial background color corresponding to the target interactive element.

[0015] In an exemplary embodiment, after obtaining the background color of the target interactive element displayed on the page, it also includes: if the target interactive element is configured to be displayed in a transparent color on the page, then obtaining the background color of the page, and using the background color of the page as the background color of the target interactive element displayed on the page.

[0016] According to a second aspect of an embodiment of the present disclosure, there is provided an interactive element configuration device, including:

[0017] an initial color determining unit, configured to determine an initial background color corresponding to the target interactive element when the target interactive element is triggered;

[0018] A target color determination unit is configured to obtain a target background color of the target interactive element according to the initial background color;

[0019] The target color switching unit is configured to switch the background color of the target interactive element to display the target background color.

[0020] In an exemplary embodiment, the target color determination unit is further configured to obtain a first brightness value, saturation and hue value for the target interactive element based on the initial background color; and obtain a target background color for the target interactive element based on the first brightness value, saturation and hue value.

[0021] In an exemplary embodiment, the target color determination unit is further configured to obtain a second brightness value for the target interactive element based on the first brightness value, the saturation and the hue value; and obtain the target background color using the second brightness value, the saturation and the hue value.

[0022] In an exemplary embodiment, the target color determination unit is further configured to determine a brightness value adjustment ratio corresponding to the target interactive element based on the saturation and the hue value; and adjust the first brightness value using the brightness value adjustment ratio to obtain the second brightness value.

[0023] In an exemplary embodiment, the target color switching unit is further configured to switch the background color of the target interactive element from the target background color to the initial background color after the triggering of the target interactive element ends; or is configured to switch the background color of the target interactive element from the target background color to the initial background color when the target interactive element is triggered again.

[0024] In an exemplary embodiment, the interactive element display device also includes: a target element determination unit, configured to execute acquisition of the interactive elements to be configured for display on the page; filter out disabled interactive elements configured with a disabled trigger attribute from the interactive elements to be configured, and use the interactive elements other than the disabled interactive elements in the interactive elements to be configured as the target interactive elements.

[0025] In an exemplary embodiment, the initial color determination unit is further configured to execute acquisition of the background color of the target interactive element displayed on the page; and use the background color of the target interactive element displayed on the page as the initial background color corresponding to the target interactive element.

[0026] In an exemplary embodiment, the initial color determination unit is further configured to execute if the target interactive element is configured to be displayed in a transparent color on the page, then obtain the background color of the page, and use the background color of the page as the background color of the target interactive element displayed on the page.

[0027] According to a third aspect of an embodiment of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement the interactive element display method as described in any one of the embodiments of the first aspect.

[0028] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the interactive element display method as described in any one of the embodiments in the first aspect.

[0029] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided, wherein the computer program product includes instructions, and when the instructions are executed by a processor of an electronic device, the electronic device is able to execute the interactive element display method as described in any one of the embodiments of the first aspect.

[0030] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0031] When the target interactive element is triggered, determine the initial background color corresponding to the target interactive element; obtain the target background color of the target interactive element based on the initial background color; and switch the background color of the target interactive element to display the target background color. The interactive element configuration method provided by the present disclosure can obtain the target color that needs to be switched after the interactive element is triggered by the initial background color of the interactive element when the interactive element is triggered. Compared with the related art that requires developers to set the display style after triggering for each interactive element, the present disclosure can automatically calculate the display style after the interaction is triggered, thereby improving the configuration efficiency of the interactive elements.

[0032] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0034] Figure 1 The present invention is a flowchart of a method for displaying interactive elements according to an exemplary embodiment.

[0035] Figure 2 The invention is a flow chart showing how to obtain a target background color for a target interactive element according to an exemplary embodiment.

[0036] Figure 3 The figure is a schematic diagram showing the change of the background color of a target interactive element according to an exemplary embodiment.

[0037] Figure 4 is a schematic diagram showing the change of the background color of a target interactive element according to another exemplary embodiment.

[0038] Figure 5 The invention is a flowchart of determining a target interactive element according to an exemplary embodiment.

[0039] Figure 6 It is a block diagram of an interactive element configuration device according to an exemplary embodiment.

[0040] Figure 7 It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0041] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0042] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0043] It should also be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for display, data for analysis, etc.) involved in this disclosure are all information and data authorized by the user or fully authorized by all parties.

[0044] Figure 1 is a flow chart of a method for displaying interactive elements according to an exemplary embodiment. Figure 1 As shown, the interactive element configuration method is used in a terminal and includes the following steps.

[0045] In step S101, when a target interactive element is triggered, an initial background color corresponding to the target interactive element is determined.

[0046] Among them, the terminal can be but is not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices. For example, it can be a development device of a developer. When the developer needs to configure the trigger display style of an interactive element that needs to be displayed on the page, it can be implemented through the terminal. The target interactive element refers to the interactive element that needs to be configured with a trigger style, and the initial background color refers to the pre-configured background color of the above-mentioned target interactive element, for example, it can be the background color displayed when the target interactive element is not triggered. Specifically, when the user triggers the target interactive element whose display style is configured, the terminal can first select the interactive element that needs to be triggered as the target interactive element, and after obtaining the target interactive element, the terminal can also obtain the pre-configured background color for the target interactive element as the initial background color.

[0047] In step S102, a target background color of a target interactive element is obtained according to the initial background color.

[0048] The target background color refers to the background color corresponding to when the target interactive element is triggered. Developers can pre-set the correspondence between the target background color of the target interactive element and the initial background color. For example, the color parameters of the target background color and the color parameters of the initial background color can be configured respectively. When the terminal obtains the color parameters of the initial background color, it can obtain the color parameters corresponding to the target background color of the target interactive element based on the color parameters, thereby determining the target background color of the target interactive element, that is, the background color when the target interactive element is triggered.

[0049] In step S103, the background color of the target interactive element is switched to the display target background color.

[0050] After the terminal completes determining the target background color of the target interactive element in step S102, the background color of the target interactive element displayed on the page can be switched to the display target background color, thereby informing the user that the target interactive element has been successfully triggered.

[0051] In the above interactive element display method, when the target interactive element is triggered, the initial background color corresponding to the target interactive element is determined; based on the initial background color, the target background color of the target interactive element is obtained; and the background color of the target interactive element is switched to display the target background color. The interactive element configuration method provided by the present disclosure can obtain the target color that needs to be switched after the interactive element is triggered by the initial background color of the interactive element when the interactive element is triggered. Compared with the related art that requires developers to set the display style after triggering for each interactive element, the present disclosure can automatically calculate the display style after the interaction is triggered, thereby improving the configuration efficiency of the interactive elements.

[0052] In an exemplary embodiment, step S102 may further include: obtaining a first brightness value, saturation and hue value for the target interactive element according to the initial background color; and obtaining a target background color for the target interactive element based on the first brightness value, saturation and hue value.

[0053] The first brightness value, saturation and hue value can be different color dimensions used to characterize the initial background color of the target interactive element, where the hue value can be used to characterize the category of the color, that is, whether the initial background color is specifically red or yellow, etc., and the saturation refers to the purity of the color. When the saturation is higher, the purity of the color will also be higher. The lower the saturation, the color will gradually become gray. The first brightness value refers to the brightness value of the initial background color, which is used to reflect the brightness of the color. After obtaining the initial background color, the terminal can obtain the first brightness value, saturation and hue value corresponding to the target interactive element according to the initial background color, for example, by first obtaining the RGB value of the initial background color, and then converting it into the first brightness value, saturation and hue value based on the RGB value.

[0054] Specifically, developers can pre-configure the correspondence between the target background color of the target interactive element and the first brightness value, saturation, and hue value obtained through the initial background color. For example, the brightness value, saturation, and hue value of the target background color can be configured respectively, and the correspondence between the first brightness value, saturation, and hue value obtained through the initial background color. When the target interactive element is triggered, the terminal can obtain the first brightness value, saturation, and hue value corresponding to the initial background color, and based on the above correspondence, obtain the brightness value, saturation, and hue value corresponding to the target background color of the target interactive element, thereby determining the target background color of the target interactive element, that is, the background color of the target interactive element when it is triggered.

[0055] In this embodiment, the terminal can obtain the target background color that needs to be switched after the interactive element is triggered through the brightness value, saturation and hue value corresponding to the initial background color, and can change the different color dimensions of the background color to obtain the target background color, thereby improving the color accuracy of the obtained target background color.

[0056] In an exemplary embodiment, if Figure 2 As shown, obtaining a target background color for a target interactive element based on the first brightness value, saturation, and hue value may further include:

[0057] In step S201, a second brightness value for a target interactive element is obtained according to the first brightness value, saturation and hue value.

[0058] Among them, the second brightness value may refer to the brightness value corresponding to the target background color displayed by the target interactive element. In this embodiment, the difference between the target background color and the initial background color lies in the difference in brightness value. By changing the brightness value of the interactive element before and after triggering and keeping the saturation and hue values ​​unchanged, the color depth change effect of the target interactive element before and after triggering can be created. Specifically, the terminal may pre-store a correspondence between the second brightness value and the first brightness value, saturation, and hue value, so that the second brightness value of the target interactive element can be calculated through the correspondence using the first brightness value, saturation, and hue value corresponding to the initial background color of the target interactive element.

[0059] In step S202, the target background color is obtained using the second brightness value, saturation and hue value.

[0060] Afterwards, the terminal can determine the target background color for the target interactive element based on the second brightness value determined in step S201, and the saturation and hue values ​​corresponding to the initial background color. Since the target background color differs from the initial background color only in the brightness value, when the target interactive element is triggered, only the brightness value of the background color of the target interactive element is changed, while the saturation and hue values ​​of the background color remain unchanged, thereby presenting an effect of only changing the color depth when the target interactive element is triggered.

[0061] For example, when button A is used as the target interactive element, the brightness value of the initial background color corresponding to it is greater than the brightness value of the target background color corresponding to button A when it is triggered, that is, when the first brightness value is greater than the second brightness value, when button A is pressed and triggered by the user, Figure 3As shown, the background color corresponding to button A will be darkened, and if the brightness value of the corresponding initial background color is less than the brightness value of the corresponding target background color when button A is triggered, that is, the first brightness value is less than the second brightness value, when button A is pressed and triggered by the user, the background color corresponding to button A can be lighter, thereby achieving the color depth change effect when the interactive element is triggered.

[0062] In this embodiment, the second brightness value of the target background color of the target interactive element can be calculated based on the first brightness value, saturation and hue value of the initial background color, while the saturation and hue value of the target background color remain the saturation and hue value of the initial background color unchanged, so that when the target interactive element is triggered, the effect of changing the color depth can be presented.

[0063] Furthermore, step S201 may further include: determining a brightness value adjustment ratio corresponding to the target interactive element according to the saturation and hue values; and adjusting the first brightness value using the brightness value adjustment ratio to obtain a second brightness value.

[0064] The brightness value adjustment ratio is used to characterize the ratio between the second brightness value and the first brightness value of the target interactive element. In this embodiment, the terminal can calculate the brightness value adjustment ratio corresponding to the target interactive element through the saturation and hue value of the initial background color corresponding to the target interactive element, so that the first brightness value can be adjusted according to the obtained brightness value adjustment ratio. For example, the first brightness value can be multiplied by the obtained brightness value adjustment ratio, and the calculated result can be used as the second brightness value.

[0065] For example, the calculation formula for the brightness value adjustment ratio can be as follows:

[0066] L = 0.95-0.2*((H*S) / 360)

[0067] Among them, L represents the brightness value adjustment ratio of the target interactive element, H represents the hue of the initial background color, and S represents the saturation of the initial background color. Through the above formula, the terminal can calculate the brightness value adjustment ratio based on the hue and saturation of the initial background color. The range of this ratio is [0.75,0.95]. Then the terminal can multiply the first brightness value of the initial background color by the brightness value adjustment ratio, that is, adjust the first brightness value to 0.75-0.95 times, so as to obtain the second brightness value after the brightness value is reduced, so that after the target interactive element is triggered, it can present the effect of deepening the background color.

[0068] In this embodiment, the brightness value adjustment ratio can be determined based on the saturation and hue value of the initial background color, so that different brightness value adjustment ratios can be set for the initial background colors of different target interactive elements. At the same time, the setting of the ratio can also adapt to the sensitivity of the human eye to light of different frequencies, thereby presenting a uniform color depth change effect for each target interactive element.

[0069] In an exemplary embodiment, after step S104, it may also include: when the triggering of the target interactive element ends, switching the background color of the target interactive element from the target background color to the initial background color; or when the target interactive element is triggered again, switching the background color of the target interactive element from the target background color to the initial background color.

[0070] If the triggering of the target interactive element ends, the terminal can restore the background color of the target interactive element from the switched target background color to the initial background color. Figure 3 When button A in the example is pressed by the user and triggered, the background color of button A can be switched from the light initial background color to the dark target background color. When button A is released by the user, that is, after the triggering of button A ends, Figure 4 As shown, the darkened target background color can be restored to the lighter initial background color to indicate that the triggering of the target interactive element has been terminated.

[0071] Alternatively, after the triggering of the target interactive element ends, the background color displayed by the target interactive element remains the target background color, and if the target interactive element is triggered again, the background color can be restored from the displayed target background color to the initial background color for display. For example, when button A is pressed and triggered by the user, the background color of button A can be switched from the light initial background color to the dark target background color, and when button A is released by the user, that is, after the triggering of button A ends, button A is still displayed with the target background color until button A is pressed and triggered by the user again, then the darkened target background color can be restored to the lighter initial background color.

[0072] In this embodiment, after the triggering of the target interaction button is completed, the target background color displayed during the triggering can be further restored to the initial background color displayed before the triggering is performed, thereby informing the user that the triggering of the target interaction element has been terminated. Alternatively, when the target interaction button is triggered again, the displayed target background color can be restored to the initial background color displayed before the triggering is performed, thereby informing the user that the triggering state of the target interaction button has changed again.

[0073] In an exemplary embodiment, if Figure 5As shown, before step S101, the following may also be included:

[0074] In step S501, an interactive element to be configured for display on a page is obtained.

[0075] Among them, the interactive elements to be configured refer to all interactive elements displayed on the page. In this embodiment, not all interactive elements displayed on the page are target interactive elements that can be triggered and responded to by the user to change the displayed background color. Therefore, the terminal needs to first determine the target interactive element from the interactive elements to be configured displayed on the page, and then implement the target background color configuration of the target interactive element. To determine the target interactive element, the terminal needs to first determine the interactive element to be configured that can be used for display on a certain page.

[0076] In step S502, disabled interactive elements configured with a disabled trigger attribute are screened out from the interactive elements to be configured, and the interactive elements other than the disabled interactive elements in the interactive elements to be configured are taken as target interactive elements.

[0077] A disabled interactive element refers to an interactive element to be configured whose attribute is a disabled trigger attribute. The disabled trigger attribute can be used to characterize that the interactive element to be configured cannot be triggered by the user when displayed on the page. Since there are some interactive elements to be configured displayed on the page that cannot be triggered by the user, for example, it can be an interactive element that is pre-set to be displayed on the page and can only be triggered by the user after the user performs a certain operation, or it can be an interactive element that cannot be triggered by the user because the trigger condition of the interactive element is not met due to the user performing a certain operation, etc. The above-mentioned interactive elements to be configured that are displayed on the page but cannot be triggered by the user can all be disabled interactive elements with a disabled trigger attribute. The terminal can exclude the disabled interactive elements from the interactive elements to be configured so that the remaining interactive elements to be configured can be used as target interactive elements. For example, the disabled interactive elements with the disabled attribute can be excluded through the attribute non-selector to determine the target interactive elements.

[0078] In this embodiment, the terminal may also filter out disabled interactive elements with disabled triggering attributes and exclude them from the interactive elements to be configured, thereby accurately and quickly determining the target interactive elements that need to switch colors when triggered.

[0079] Furthermore, step S101 may further include: acquiring the background color of the target interactive element displayed on the page; and using the background color of the target interactive element displayed on the page as the initial background color corresponding to the target interactive element.

[0080] The background color refers to the background color actually displayed on the page of the target interactive element. In this embodiment, the initial background color of the target interactive element can be the background color displayed on the page of the target interactive element. Therefore, when the target interactive element is triggered to switch to the target background color, the terminal can obtain the background color of the current target interactive element displayed on the page in real time and determine the target background color. This can ensure that the target background color after switching is calculated based on the background color displayed on the page of the target interactive element, so as to ensure that the target background color is compatible with the background color displayed on the page of the target interactive element.

[0081] In this embodiment, the initial background color is not the color pre-set by the developer for the terminal, but is obtained by the terminal in real time by obtaining the background element actually displayed on the page by the target interactive element, thereby ensuring that the target background color after the color switch is compatible with the background color displayed on the page by the target interactive element.

[0082] In addition, after obtaining the background color of the target interactive element displayed on the page, it also includes: if the target interactive element is configured to be displayed in a transparent color on the page, then the background color of the page is obtained, and the background color of the page is used as the background color of the target interactive element displayed on the page.

[0083] If the target interactive element is configured to be displayed in a transparent color on the page, that is, the target interactive element itself is not configured with a background color, then the background color presented to the user at this time is the background color of the page itself. Therefore, the terminal can also use the background color of the page itself as the background color of the target interactive element displayed on the page when the background color of the target interactive element is transparent.

[0084] In this embodiment, if the background color of the target interactive element is configured to be transparent, the terminal can also use the background color of the page as the initial background color, thereby ensuring that when the target interactive element is transparent, the target background color after the color switching and the background color of the target interactive element presented on the page are compatible.

[0085] In an exemplary embodiment, an automatic color deepening touch feedback technology solution based on the HSL color model is also provided, which proposes an automatic calculation interaction style, omits event monitoring to improve performance, and abstracts business logic into components, so that the front-end touch feedback can have higher usability, stronger scalability and better performance. The specific implementation of the solution can be shown as follows:

[0086] 1. Add a special class name to the interactive element and set its :active style to a CSS variable. Note that CSS variables can be set on the current element or its parent element. Since disabled elements generally do not need interactive styles, the disabled attribute is used here without a selector to exclude the case when the element is disabled.

[0087] 2. Get the current background color of the interactive element and convert the color from RGB to HSL mode. If the current element background color is transparent, the theme background color will be used by default.

[0088] 3. Adjust the obtained HSL color dimension and adjust the brightness and saturation in a certain proportion. Set the proportion (0.95–0.75) according to the depth of the current background color to achieve the target effect. The proportion calculation formula can be shown as follows:

[0089] L = 0.95-0.2*((H*S) / 360)

[0090] 4. Encapsulate it into a Vue instruction, receive the interactive element, and assign the HSL color value obtained in the previous step to a CSS variable; set the CSS variable on the current element. Then the :active style of the current element will take effect according to this color value.

[0091] 5. Users can use it out of the box. They only need to declare a command to call the encapsulated Vue command to realize the color configuration of interactive elements.

[0092] It should be understood that, although the various steps in the flowchart of the present disclosure are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least a portion of the steps in the figure may include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a portion of the steps or stages in other steps.

[0093] It can be understood that the same / similar parts between the various embodiments of the above method in this specification can refer to each other, and each embodiment focuses on the differences from other embodiments. For related points, please refer to the description of other method embodiments.

[0094] Figure 6 is a block diagram of an interactive element configuration device according to an exemplary embodiment. Figure 6The device includes an initial color determining unit 601, a target color determining unit 602 and a target color switching unit 603.

[0095] The initial color determining unit 601 is configured to determine the initial background color corresponding to the target interactive element when the target interactive element is triggered;

[0096] The target color determination unit 602 is configured to obtain a target background color of a target interactive element according to an initial background color;

[0097] The target color switching unit 603 is configured to switch the background color of the target interactive element to a display target background color.

[0098] In an exemplary embodiment, the target color determination unit 602 is further configured to obtain a first brightness value, saturation and hue value for the target interactive element based on the initial background color; and obtain a target background color for the target interactive element based on the first brightness value, saturation and hue value.

[0099] In an exemplary embodiment, the target color determination unit 602 is further configured to obtain a second brightness value for the target interactive element based on the first brightness value, saturation and hue value; and obtain the target background color using the second brightness value, saturation and hue value.

[0100] In an exemplary embodiment, the target color determination unit 602 is further configured to determine a brightness value adjustment ratio corresponding to the target interactive element according to the saturation and hue value; and adjust the first brightness value using the brightness value adjustment ratio to obtain a second brightness value.

[0101] In an exemplary embodiment, the target color switching unit 603 is further configured to execute, when the triggering of the target interactive element ends, switching the background color of the target interactive element from the target background color to the initial background color; or is configured to execute, when the target interactive element is triggered again, switching the background color of the target interactive element from the target background color to the initial background color.

[0102] In an exemplary embodiment, the interactive element display device also includes: a target element determination unit, configured to execute acquisition of the interactive elements to be configured for display on the page; filter out disabled interactive elements configured with a disabled trigger attribute from the interactive elements to be configured, and use the interactive elements other than the disabled interactive elements in the interactive elements to be configured as target interactive elements.

[0103] In an exemplary embodiment, the initial color determination unit 601 is further configured to execute acquiring the background color of the target interactive element displayed on the page; and using the background color of the target interactive element displayed on the page as the initial background color corresponding to the target interactive element.

[0104] In an exemplary embodiment, the initial color determination unit 601 is further configured to execute if the target interactive element is configured to be displayed in a transparent color on the page, then obtain the background color of the page, and use the background color of the page as the background color of the target interactive element displayed on the page.

[0105] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0106] Figure 7 is a block diagram of an electronic device 700 for interactive element configuration according to an exemplary embodiment. For example, the electronic device 700 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0107] Reference Figure 7 , the electronic device 700 may include one or more of the following components: a processing component 702 , a memory 704 , a power component 706 , a multimedia component 708 , an audio component 710 , an input / output (I / O) interface 712 , a sensor component 714 , and a communication component 716 .

[0108] The processing component 702 generally controls the overall operation of the electronic device 700, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 702 may include one or more processors 720 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 702 may include one or more modules to facilitate the interaction between the processing component 702 and other components. For example, the processing component 702 may include a multimedia module to facilitate the interaction between the multimedia component 708 and the processing component 702.

[0109] The memory 704 is configured to store various types of data to support operations on the electronic device 700. Examples of such data include instructions for any application or method operating on the electronic device 700, contact data, phone book data, messages, pictures, videos, etc. The memory 704 may be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as a static random access memory (SRAM), an electrically erasable programmable read-only memory (EEPROM), an erasable programmable read-only memory (EPROM), a programmable read-only memory (PROM), a read-only memory (ROM), a magnetic memory, a flash memory, a magnetic disk, an optical disk, or a graphene memory.

[0110] The power supply component 706 provides power to the various components of the electronic device 700. The power supply component 706 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the electronic device 700.

[0111] The multimedia component 708 includes a screen that provides an output interface between the electronic device 700 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 708 includes a front camera and / or a rear camera. When the electronic device 700 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0112] The audio component 710 is configured to output and / or input audio signals. For example, the audio component 710 includes a microphone (MIC), and when the electronic device 700 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 704 or sent via the communication component 716. In some embodiments, the audio component 710 also includes a speaker for outputting an audio signal.

[0113] I / O interface 712 provides an interface between processing component 702 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: a home button, a volume button, a start button, and a lock button.

[0114] The sensor assembly 714 includes one or more sensors for providing various aspects of status assessment for the electronic device 700. For example, the sensor assembly 714 can detect the open / closed state of the electronic device 700, the relative positioning of the components, such as the display and keypad of the electronic device 700, and the sensor assembly 714 can also detect the position change of the electronic device 700 or the components of the electronic device 700, the presence or absence of contact between the user and the electronic device 700, the orientation or acceleration / deceleration of the device 700, and the temperature change of the electronic device 700. The sensor assembly 714 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 714 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 714 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0115] The communication component 716 is configured to facilitate wired or wireless communication between the electronic device 700 and other devices. The electronic device 700 can access a wireless network based on a communication standard, such as WiFi, a carrier network (such as 2G, 3G, 4G or 5G), or a combination thereof. In an exemplary embodiment, the communication component 716 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 716 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0116] In an exemplary embodiment, the electronic device 700 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above methods.

[0117] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory 704 including instructions, and the above instructions can be executed by the processor 720 of the electronic device 700 to perform the above method. For example, the computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0118] In an exemplary embodiment, a computer program product is further provided. The computer program product includes instructions. The instructions can be executed by the processor 720 of the electronic device 700 to complete the above method.

[0119] It should be noted that the above-mentioned devices, electronic devices, computer-readable storage media, computer program products, etc. may also include other implementation methods according to the description of the method embodiments. The specific implementation methods can refer to the description of the relevant method embodiments, which will not be described one by one here.

[0120] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims.

[0121] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying interactive elements, characterized in that: include: When the target interactive element is triggered, determining an initial background color corresponding to the target interactive element; The initial background color is the background color displayed when the target interactive element is not triggered; According to the initial background color, obtaining the target background color of the target interactive element; The target background color is the background color corresponding to the target interactive element when it is triggered; including: obtaining a first brightness value, saturation and hue value for the target interactive element according to the initial background color; determining a brightness value adjustment ratio corresponding to the target interactive element according to the saturation and the hue value; adjusting the first brightness value using the brightness value adjustment ratio to obtain a second brightness value; obtaining a target background color for the target interactive element using the second brightness value, saturation and hue value; the first brightness value is different from the second brightness value; Switching the background color of the target interactive element to display the target background color; The brightness value adjustment ratio is calculated by the following calculation formula: L=0.95-0.2*((H*S) / 360) Wherein, L represents the brightness value adjustment ratio, H represents the hue value, and S represents the saturation.

2. The method according to claim 1, characterized in that After the background color of the target interactive element is switched to display the target background color, the method further includes: When the triggering of the target interactive element ends, the background color of the target interactive element is switched from the target background color to the initial background color; or When the target interactive element is triggered again, the background color of the target interactive element is switched from the target background color to the initial background color.

3. The method according to claim 1, characterized in that: When the target interactive element is triggered, before determining the initial background color corresponding to the target interactive element, the method further includes: Get the interactive element to be configured for display on the page; Disabled interactive elements configured with a disabled triggering attribute are screened out from the interactive elements to be configured, and interactive elements other than the disabled interactive elements in the interactive elements to be configured are used as the target interactive elements.

4. The method according to claim 1, characterized in that: The determining the initial background color corresponding to the target interactive element includes: Get the background color of the target interactive element displayed on the page; The background color of the target interactive element displayed on the page is used as the initial background color corresponding to the target interactive element.

5. The method according to claim 4, characterized in that After obtaining the background color of the target interactive element displayed on the page, the method further includes: If the target interactive element is configured to be displayed in a transparent color on the page, the background color of the page is acquired, and the background color of the page is used as the background color of the target interactive element displayed on the page.

6. An interactive element display device, characterized in that: include: an initial color determining unit, configured to determine an initial background color corresponding to the target interactive element when the target interactive element is triggered; The initial background color is the background color displayed when the target interactive element is not triggered; A target color determination unit is configured to obtain a target background color of the target interactive element according to the initial background color; the target background color is the background color corresponding to when the target interactive element is triggered; and is further configured to obtain a first brightness value, saturation, and hue value for the target interactive element according to the initial background color; Determine a brightness adjustment ratio corresponding to the target interactive element according to the saturation and the hue value; adjust the first brightness value using the brightness adjustment ratio to obtain a second brightness value; obtain a target background color for the target interactive element using the second brightness value, saturation and hue value; the first brightness value is different from the second brightness value; A target color switching unit, configured to switch the background color of the target interactive element to display the target background color; The brightness value adjustment ratio is calculated by the following calculation formula: L=0.95-0.2*((H*S) / 360) Wherein, L represents the brightness value adjustment ratio, H represents the hue value, and S represents the saturation.

7. The device according to claim 6, characterized in that The target color switching unit is further configured to switch the background color of the target interactive element from the target background color to the initial background color after the triggering of the target interactive element ends; or is configured to switch the background color of the target interactive element from the target background color to the initial background color when the target interactive element is triggered again.

8. The device according to claim 7, characterized in that Also includes: A target element determination unit, configured to execute acquisition of an interactive element to be configured for display on a page; Disabled interactive elements configured with a disabled triggering attribute are screened out from the interactive elements to be configured, and interactive elements other than the disabled interactive elements in the interactive elements to be configured are used as the target interactive elements.

9. The device according to claim 7, characterized in that The initial color determination unit is further configured to execute acquisition of the background color of the target interactive element displayed on the page; and use the background color of the target interactive element displayed on the page as the initial background color corresponding to the target interactive element.

10. The device according to claim 9, characterized in that The initial color determination unit is further configured to execute, if the target interactive element is configured to be displayed in a transparent color on the page, obtaining the background color of the page, and using the background color of the page as the background color of the target interactive element displayed on the page.

11. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the interactive element display method according to any one of claims 1 to 5.

12. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the interactive element display method according to any one of claims 1 to 5.

13. A computer program product, comprising instructions, characterized in that: When the instruction is executed by a processor of an electronic device, the electronic device is enabled to execute the interactive element display method as described in any one of claims 1 to 5.

Images