Display method and electronic device

Abstract

This application provides a display method and an electronic device, belonging to the field of terminal technology, applied to electronic devices. It helps improve the interactive effect of operations within an interface, helps users intuitively perceive the operation location, and thus helps improve the success rate of operations. The method includes: displaying a first interface; displaying a first control and a second control in the first interface; the first control and the second control being located in a first container; responding to a first operation in the first container, displaying a first light effect in a first target area of ​​the first interface; the first target area is determined based on the first operation position of the first operation; wherein, the first operation position is the real-time operation position of the first operation, and when the first operation acts on the first control, the first target area includes the area where the first control is located, and part or all of the area where the second control is located; in the first light effect, the brightness of the area where the first control is located is higher than the brightness of the area where the second control is located.

Description

[0001] This application claims priority to Chinese Patent Application No. 202610352229.4, filed on March 20, 2026, entitled "Display Method and Electronic Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal technology, and in particular to display methods and electronic devices. Background Technology

[0003] Currently, electronic devices have become indispensable in people's daily lives and work, greatly facilitating these processes. However, a current issue exists where the interaction between electronic devices and the user's intended location can be unsatisfactory, potentially leading to accidental touches. Summary of the Invention

[0004] This application provides a display method and an electronic device for optimizing the interactive effect of operations and helping to improve the accuracy of operations.

[0005] Firstly, embodiments of this application provide a display method, which can be executed by an electronic device. The method includes: An electronic device displays a first interface; the first interface displays a first control and a second control; the first control and the second control are located in a first container. Subsequently, in response to a first operation in the first container, the electronic device displays a first light effect within a first target area of ​​the first interface. The first target area is determined based on the first operation position of the first operation; the first operation position is the real-time operation position of the first operation. When the first operation is applied to the first control, the first target area includes the area where the first control is located, and part or all of the area where the second control is located; in the first light effect, the brightness of the area where the first control is located is higher than the brightness of the area where the second control is located.

[0006] In summary, on the one hand, this method displays light effects based on the user's operation position, allowing the light effects to move along with the user's operation position. This provides real-time indication of the operation position, helping users to more intuitively perceive the location, improving the interactive experience during operation, and preventing operation failures and accidental touches caused by unclear or inaccurate display of the operation position. Furthermore, when the first operation is applied to the first control, the target area of ​​the light effect also includes the area where the first control is located, achieving a three-in-one spatial coordination of the control position, light effect position, and operation position in the first interface.

[0007] On the other hand, the brightness varies across different areas within the light effect, with areas closer to the operation position being brighter than those farther away. This contrast in brightness within the light effect helps to more accurately highlight the operation position. Furthermore, when the first operation is applied to a control, the light effect not only illuminates that control but also other controls around it, enhancing the spatial sense of the user interface and contributing to a more immersive experience for users interacting with the interface.

[0008] In one possible implementation, the first light effect includes: the brightness is highest at the first operating position within the first target area, and the brightness decreases with distance from the first operating position. Optionally, the center of the first light effect is the first operating position.

[0009] In this way, the lighting effect can simulate the attenuation of a point light source from the center to the periphery, making the lighting effect more spatially continuous and physically realistic, thereby helping to improve the interactive effect of user operation and enhance the user's operating experience.

[0010] In one possible implementation, the first light effect further includes: in the first target area, the brightness is highest at the first edge position of the first container, and the brightness decreases as it moves further away from the first edge position, where the first edge position is the projection position of the first operation position on the edge of the first container.

[0011] Since the edges of the container are less likely to be obscured by fingers when the user is using touch, this light effect can display higher brightness at the edges of the container, thus helping the user to locate the first operation position based on the light effect.

[0012] In one possible implementation, when the first operation is applied to the first control, the electronic device may also display a first animation effect of the second control moving toward the first control; when the first operation ends, a second animation effect of the second control returning to its original position is displayed.

[0013] In this implementation, the electronic device can display motion effects of other controls moving towards the control being manipulated by the user. This provides the user with clues about the currently active control through the movement direction of other controls, helping to further improve the accuracy of user actions. Furthermore, this method allows controls unrelated to user actions to respond to them, enriching the interactive effects and achieving multimodal feedback in the user interface. In addition, the motion effects reflect the deformation of the arrangement of multiple controls within a container under the influence of user actions, simulating the deformation caused by pressing an object in the real physical world, making the first motion effect correspond to the real physical world.

[0014] Optionally, when the first operation is applied to the first control within the first container, the electronic device displays a second animation effect. This second animation effect can be achieved by moving the display element of the second control towards the first container. In this case, as the second control moves closer to the first control, its sensing area remains unchanged; the electronic device only needs to render the display element of the second control to the new display position. This helps reduce the computational load of implementing the movement animation effect and helps avoid overlap between the sensing areas of the operated control and the control to be moved, preventing errors in the electronic device's judgment of user operations.

[0015] In one possible implementation, the number of controls between the first control and the second control is less than or equal to a number threshold; or, the distance between the first control and the second control is less than or equal to a first distance threshold.

[0016] This implementation reduces the number of controls to be moved by using a quantity threshold or a distance threshold, thereby reducing the computational burden on the electronic device during the display of the first animation effect. Furthermore, in this implementation, the second control closest to the first control within the first container moves towards the first control, while the positions of other controls remain unchanged, thus helping to maintain the neat arrangement of controls within the container.

[0017] In one possible implementation, the first distance threshold is based on the operation time of the first operation. The operation time refers to the duration during which the first operation acts on the first control. Optionally, the first distance threshold increases with the operation time. Thus, when the user selects a control, the number of controls to be moved can gradually increase with the operation time, making the movement animation more dynamic.

[0018] In one possible implementation, the movement distance of the second control is determined based on at least one of the following: the distance between the original position of the second control and the position of the first control, the direction of the first control relative to the second control, or the operation time.

[0019] This implementation allows the motion effects to map operation information such as the operation time of the first operation. In this way, the motion effects can intuitively reflect the "press intensity" of the user's operation, that is, "how hard" the user presses (in this implementation, the longer the operation time, the greater the press intensity), which helps to enhance the user's sense of control over the operation and also helps to respond to the user's operation in multiple dimensions.

[0020] In one possible implementation, when the operation position of the first operation changes from the first operation position to the second operation position, the electronic device can also adjust the display layout of the first container on the first interface; wherein the display layout includes at least one of the following: display size or display position.

[0021] This implementation adjusts the container's display layout as the user interacts, mapping the tactile feedback of the user's actions to the dynamic visual changes in the container's layout. This provides a more intuitive visual representation of the user's actions, enabling interaction at the container level. Furthermore, this implementation enhances the interactivity of the initial operation, improving the user experience.

[0022] In one possible implementation, the electronic device adjusts the display layout of the first container on the first interface by: the electronic device determining the display parameters of the first container based on a second operation position; wherein the display parameters of the first container include scaling parameters for the display size of the first container, or offset parameters for the display position of the first container. Then, the electronic device adjusts the display layout of the first container on the first interface based on the display parameters of the first container.

[0023] This implementation determines the container's display parameters based on the operation position. This allows effects such as shrinking and offsetting the container's display area to visually reflect the operation position when the container's layout is adjusted according to these parameters. In this way, the implementation responds to the first operation at the container level, enriching the user's interactive experience and improving the overall user experience.

[0024] In one possible implementation, the electronic device determines the display parameters of the first container based on the second operating position. This can be achieved by the electronic device determining the display parameters based on the distance between the second operating position and a reference point of the first container.

[0025] This implementation method enables changes in the container's display layout to reflect changes in operation information such as the operation position during the first operation, thereby converting operation information into intuitive visual effects and helping to enhance the user's sense of control over the first operation.

[0026] In one possible implementation, after the first operation ends, the electronic device can also display a third animation showing the dynamic expansion and contraction of the first container until the first container returns to its original display layout.

[0027] This implementation method displays a restoration animation that restores the original display layout of the container after the user's operation ends, allowing the container to naturally and smoothly return to its original display layout, which helps to improve the user experience.

[0028] In one possible implementation, when the operating position moves out of the first container, the first target area is determined based on the edge position of the operating position on the edge of the first container. For example, the edge position is the projection point of the operating position on the edge of the first container.

[0029] This implementation method displays light effects based on the container's edge position when the operation location exceeds the container's boundaries, helping to indicate that the operation location has exceeded the limits and assisting the user in locating the user's relative position within the container. Furthermore, this method can also indicate the direction the operation location needs to return to within the container, providing a good prompting effect.

[0030] In one possible implementation, the electronic device may further respond to the first operation by determining the effective area of ​​the first light effect based on the first operation position; then, the electronic device determines the first target area based on at least one control displayed within the effective area of ​​the first light effect, and determines the brightness of the area where the at least one control is located based on the distance between the at least one control and the first operation position.

[0031] Optionally, the first effective area of ​​the first light effect is a circular area, a rectangular area, or a rhomboid area centered on the first operation position; the electronic device responds to the first operation position being in the sensing area of ​​the first control, determines the effective area of ​​the first light effect according to the first operation position, and determines the first target area according to the overlap between the area where each control is located in the first interface and the effective area.

[0032] This implementation method enables the target area to be dynamically determined based on changes in the operating position, thereby achieving the effect of the light effect moving dynamically with the operating position.

[0033] In one possible implementation, a third control is also displayed in the first interface, the third control being located in the second container; the electronic device may also respond to a second operation on the third control by displaying a second light effect in a second target area of ​​the first interface; the second target area is determined according to the operation position of the second operation, and when the first control is within the influence range of the second light effect, the second target area includes the area where the third control is located, as well as part or all of the area where the first control is located; in the second light effect, the brightness of the area where the third control is located is higher than the brightness of the area where the first control is located.

[0034] This implementation allows the light effects generated by user operations to be displayed on controls of multiple containers, which helps to enhance the spatial sense of the user interface and thus construct a visual perception field where multiple controls are interconnected in the user interface, thereby improving the immersion and operational efficiency of the user interface.

[0035] In one possible implementation, if the operation position of the second action extends beyond the area where the third control is located and is far away from the third control, the electronic device can further reduce the brightness of the second light effect. This implementation helps reduce the impact of the light effect on other displayed content in the user interface after the user's operation position has moved away from the control.

[0036] Optionally, if the brightness of the second light effect is less than or equal to the brightness threshold, the second light effect disappears.

[0037] In one possible implementation, the screen width of the electronic device is greater than or equal to a width threshold, and the electronic device can also respond to a swipe operation within the first interface by moving the first container in the direction of the swipe operation; when the swipe operation ends, the electronic device maintains the latest moved position of the first container unchanged.

[0038] This implementation allows the display position of the container to be adjusted via a sliding operation, improving the flexibility of the container's display position. For example, the container can be moved from the center of the user interface to the edge of the user interface via a sliding operation, thereby changing the container from a "two-handed operation" mode to a "one-handed operation" mode, which helps to improve the ease of operation of the controls in the container for users with different grip postures.

[0039] In one possible implementation, the transparency of the first container is greater than 0 and less than 100%. Optionally, the first interface may also display text, images, application icons, or videos, wherein the displayed content includes first display content that overlaps with the display area and the area where the first container is located, and the first display content can be seen through the first container.

[0040] This implementation helps reduce the obstruction of content displayed in the user interface by the container, thereby expanding the readable area of ​​the content displayed in the user interface.

[0041] Optionally, the clarity of the first displayed content is lower than that of other displayed content in the first interface. In this way, the visual principle of objects appearing larger when closer and smaller when farther away is simulated, achieving the display effect of the container floating above the displayed content, which helps to enhance the sense of hierarchy in the user interface.

[0042] In one possible implementation, the electronic device may further acquire the transparency of a first container; wherein the transparency is used to indicate the degree to which the first container reveals the displayed content in the first interface; based on the transparency of the first container, the displayed content overlapping the first interface in the display area is rendered; acquiring the transparency of the first container includes: acquiring the transparency of the first container in response to a third operation for configuration; or, acquiring ambient brightness information and determining the transparency of the first container based on the ambient brightness information.

[0043] This allows the container's transparency to adapt to the user's requirements and the display environment, thereby helping to improve the display effect of the content revealed by the container.

[0044] In one possible implementation, the display form of the first container includes at least one of the following: an overall display form, or a combined display form; wherein, in the combined display form, the first container is displayed as at least two sub-containers, and the areas of any two sub-containers do not overlap. This helps to avoid the feeling of emptiness at the edges of the interface caused by centering the container, thereby helping to improve the display effect of the user interface.

[0045] In one possible implementation, the first light effect is displayed in the light effect layer, the first control and the second control are displayed in the user interface (UI) layer, the light effect layer is set below the user interface layer, and the first light effect illuminates the first target area from below.

[0046] Secondly, another display method is provided, which is executed by an electronic device. The display method of the first aspect can be used in combination with the display method provided in the second aspect, or each can be used independently. The method includes: the electronic device displaying a first interface; the first interface displaying a first control; the first control being located in a first container; the electronic device, in response to a first operation on the first control, displaying a first light effect that moves from a first area of ​​the first container to the operation position of the first operation; wherein a second light effect is displayed at the first area.

[0047] In summary, the electronic device responds to user operations by displaying a light effect that moves from other areas to the user's selected location, thus enhancing the interactive experience and improving user satisfaction. Furthermore, in this embodiment, the light effect is movable, quickly attracting the user's attention and helping them efficiently pinpoint the first control selected. This also helps to promptly detect errors in the user's operation, reducing the negative impact of accidental touches.

[0048] In one possible implementation, a second control is also displayed in the first interface, and the second control is located in the first container; the first area includes the area where the second control is located.

[0049] In one possible implementation, during the movement from the first region of the first container to the operating position of the first operation, the brightness of the first light effect increases, or the shape of the first light effect changes.

[0050] This helps to improve the display effect of the first lighting effect.

[0051] In one possible implementation, after displaying a first light effect indicating movement from a first area of ​​a first container to the operation position of a first operation, the method further includes: displaying a third light effect on a first control; the third light effect being used to identify that the first operation has selected the first control; wherein the color of the third light effect is the same as the color of the second light effect; or, the color of the third light effect is determined based on at least one of the color of a display element of the first control and the theme color of the first control, wherein the display element includes at least one of the following: an image or text.

[0052] This helps to improve the harmony between the color of the third light effect and the first control, and helps to improve the interface display effect.

[0053] In one possible implementation, the transparency of the first container is greater than 0 and less than 100.

[0054] Thirdly, a display method is also provided, which can be executed by an electronic device. The method includes: the electronic device displaying a first interface; the first interface displaying a first control and a second control; then, in response to a first operation on the first control, the electronic device displaying a first light effect in a target area; the target area is determined based on the operation position of the first operation, and includes part or all of the area where the first control is located and the area where the second control is located within the target area; in the first light effect, the brightness in the area where the first control is located is higher than the brightness in the area where the second control is located.

[0055] Fourthly, an electronic device is also provided, comprising: a processor, a memory, and one or more programs; wherein the one or more programs are stored in the memory, and the one or more programs include instructions that, when executed by the processor, cause a mobile terminal to perform the methods provided by any of the first to third aspects described above.

[0056] Fifthly, a computer-readable storage medium is also provided for storing a computer program that, when run on a computer, causes the computer to perform the methods provided in any of the first to third aspects described above.

[0057] Sixthly, a computer program product is also provided, comprising a computer program that, when run on a computer, causes the computer to perform the method provided in any of the first to third aspects described above.

[0058] In a seventh aspect, a chip is also provided, which is used to perform the methods provided in this application, such as those provided in the first to third aspects above.

[0059] For the technical effects that can be achieved in aspects four through six above, please refer to the description of the technical effects that can be achieved in the corresponding design schemes in aspects one, two or three above. This application will not repeat them here. Attached Figure Description

[0060] Figure 1 A schematic diagram illustrating the classification of terminal devices with different display screens provided for exemplary embodiments of this application; Figure 2 A schematic diagram of the structure of an electronic device provided as an exemplary embodiment of this application; Figure 3A A software architecture diagram of an electronic device provided as an exemplary embodiment of this application; Figure 3B A schematic diagram illustrating the implementation of the light effect provided in an exemplary embodiment of this application; Figure 4 A schematic diagram of the type of the first container provided for an exemplary embodiment of this application; Figure 5 A flowchart illustrating a display method provided for an exemplary embodiment of this application; Figure 6A A schematic diagram illustrating the effect of a first light effect provided in an exemplary embodiment of this application; Figure 6B A schematic diagram illustrating the effect of a first light effect provided in an exemplary embodiment of this application; Figure 6C A schematic diagram illustrating the effect of a first light effect provided in an exemplary embodiment of this application; Figure 7 A schematic diagram illustrating the determination of a first target region provided for an exemplary embodiment of this application; Figure 8 A flowchart illustrating a display method provided for an exemplary embodiment of this application; Figure 9 A schematic diagram illustrating the motion effect of a control, provided as an exemplary embodiment of this application; Figure 10 A comparative schematic diagram showing the movement distance of the second control provided in an exemplary embodiment of this application; Figure 11 A schematic diagram illustrating the change in the display size of the first container provided for an exemplary embodiment of this application; Figure 12 A schematic diagram showing the second operation execution process provided for an exemplary embodiment of this application; Figure 13 A flowchart illustrating a display method provided for an exemplary embodiment of this application; Figure 14 A schematic diagram illustrating the effect of a first light effect of movement provided as an exemplary embodiment of this application; Figure 15 Schematic diagrams of the second and third light effects provided for exemplary embodiments of this application; Figure 16 A schematic diagram illustrating the color effect of the third light effect provided in an exemplary embodiment of this application; Figure 17 A schematic diagram showing the transparency effect of the first container provided for an exemplary embodiment of this application; Figure 18 A comparative schematic diagram of different transparency levels of the first container provided for an exemplary embodiment of this application; Figure 19 A schematic diagram illustrating the effect of moving the display position of the first container as an exemplary embodiment of this application; Figure 20 A schematic diagram illustrating the effect of the display form of the first container provided for an exemplary embodiment of this application; Figure 21 A schematic diagram of the structure of an electronic device provided as an exemplary embodiment of this application. Detailed Implementation

[0061] The system architecture and business scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of network architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.

[0062] It should be understood that in the embodiments of this application, "at least one (item)" refers to one or more, "more than one" refers to two or more, "at least two (items)" refers to two or three or more, and "and / or" is used to describe the association relationship of related objects, indicating that there can be three relationships. For example, "A and / or B" can represent: only A exists, only B exists, and A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the related objects before and after are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple. It should be understood that in the embodiments of this application, "B corresponding to A" means that B is associated with A. For example, B can be determined based on A. It should also be understood that determining B based on A does not mean determining B solely based on A; B can also be determined based on A and / or other information.

[0063] The directional terms mentioned in the embodiments of this application, such as "up", "down", "left", "right", "inner", and "outer", are only for reference to the directions in the accompanying drawings. Therefore, the directional terms used are for better and clearer explanation and understanding of the embodiments of this application, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the embodiments of this application.

[0064] References to "one embodiment," "in some examples," or "some embodiments" as described in the embodiments of this application mean that one or more embodiments of this specification include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in some examples," "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0065] The display method provided in this application can be applied to terminal devices. A terminal device can be any device with a display screen. For example, a terminal device can be a mobile phone, tablet computer, laptop computer, personal computer (PC), ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), or other portable devices; or it can be a wearable device such as a watch or bracelet; or it can be a large-screen device such as a smart screen or television; or it can be an in-vehicle display device; or it can be a virtual reality (VR) device, augmented reality (AR) device, mixed reality (MR) device, etc. In short, this application does not limit the specific type of terminal device.

[0066] Figure 1 This is a schematic diagram illustrating the classification of terminal devices with different display screens provided for exemplary embodiments of this application. For example, as shown... Figure 1As shown, based on size, terminal devices are divided into three types: small, medium, and large. From small to large, the size of the terminal devices increases progressively. Small terminal devices include watches, single-screen phones, and small tablets; medium terminal devices include foldable phones and tablets; and large terminal devices include multi-foldable phones, such as foldable phones. For example,... Figure 1 The dimensions of the terminal devices shown include square-screen terminal devices with an aspect ratio greater than 0.8 and portrait-screen terminal devices. Specifically, the aspect ratio of square-screen terminal devices is greater than or equal to 0.8 and less than or equal to 1.2; the aspect ratio of portrait-screen terminal devices is 1.2. The display effect of the interface differs in terminal devices with different aspect ratios.

[0067] The display method provided in this application embodiment can be applied to terminal devices with high to medium aspect ratios to improve the interactive effect of user operations on these terminal devices, thereby reducing the problem of inaccurate user operations.

[0068] Figure 2 A schematic diagram of an electronic device is shown. The electronic device can be, for example, the terminal device mentioned earlier. Figure 2 As shown, the electronic device may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0069] Processor 110 may include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the nerve center and command center of the electronic device. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. Processor 110 may also include memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has recently used or is recurring.

[0070] Optionally, the processor 110 can be used to execute the display method provided in the embodiments of this application. For example, the processor 110 displays the light effect of the user operation through the display screen 194 to indicate the operation position of the user operation, thereby improving the interactive effect of the first operation.

[0071] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0072] The wireless communication function of the electronic device can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor. Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in conjunction with a tuning switch.

[0073] In some embodiments, antenna 1 of the electronic device is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling the electronic device to communicate with networks and other devices via wireless communication technology.

[0074] The display screen 194 is used to display the application's interface, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device may include one or more display screens 194.

[0075] The electronic device 100 can perform shooting functions through an ISP, a camera 193, a video codec, a GPU, a display 194, and an application processor. The ISP is used to process the data fed back by the camera 193.

[0076] Internal memory 121 can be used to store executable program code, including instructions. Processor 110 executes various functional applications and data processing of the electronic device by running the instructions stored in internal memory 121. Internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, general-purpose flash memory, etc.

[0077] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor 110 through the external memory interface 120 to perform data storage functions.

[0078] Electronic devices can implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, and an application processor. Examples include music playback and recording. The audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 170 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 170 can be located in the processor 110, or some functional modules of the audio module 170 can be located in the processor 110. The speaker 170A, also called a "loudspeaker," is used to convert audio electrical signals into sound signals. The receiver 170B, also called a "handpiece," is used to convert audio electrical signals into sound signals. The microphone 170C, also called a "microphone" or "voice transducer," is used to convert sound signals into electrical signals. The headphone jack 170D is used to connect wired headphones.

[0079] Pressure sensor 180A senses pressure signals and converts them into electrical signals. Gyroscope sensor 180B can be used to determine the motion posture of electronic devices. Barometric pressure sensor 180C measures air pressure. Magnetic sensor 180D includes a Hall effect sensor. Electronic devices can use magnetic sensor 180D to detect the opening and closing of flip covers. Accelerometer 180E detects the magnitude of acceleration in various directions (typically three axes) of the electronic device. Distance sensor 180F measures distance. Proximity sensor 180G may include, for example, a light-emitting diode (LED) and a photodetector, such as a photodiode. The LED may be an infrared LED. The electronic device emits infrared light through the LED.

[0080] An ambient light sensor 180L is used to sense ambient light intensity. For example, in an embodiment of this application, the electronic device determines the material parameters of the first container in the first interface based on the ambient light intensity sensed by the ambient light sensor 180L, as detailed in the embodiments below.

[0081] The fingerprint sensor 180H is used to collect fingerprints. The temperature sensor 180J is used to detect temperature. The touch sensor 180K, also known as a "touch panel," can be placed on the display screen 194. The touch sensor 180K and the display screen 194 together form a touch screen, also known as a "touchscreen." The bone conduction sensor 180M can acquire vibration signals. Buttons 190 include power buttons, volume buttons, etc. Buttons 190 can be mechanical buttons or touch buttons. The motor 191 can generate vibration alerts. The motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. The indicator 192 can be an indicator light, used to indicate charging status, battery level changes, messages, missed calls, notifications, etc. The SIM card interface 195 is used to connect the SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to achieve contact and separation with the electronic device.

[0082] Understandable Figure 2 The components shown do not constitute a specific limitation on the electronic device. The electronic device in the embodiments of the present invention may include components such as... Figure 2 More or fewer parts. Furthermore, Figure 2 The combination / connection relationships between the components can also be adjusted and modified.

[0083] The electronic device provided in this application embodiment can run an operating system (OS). This operating system can be various operating systems used in industry, such as operating systems developed based on OpenHarmony, like HarmonyOS; or other operating systems such as Android™, iOS mobile operating systems; it can also be various open-source operating systems or their derivatives, such as Linux OS, and other embedded operating systems; or it can be a future new operating system, such as an AI operating system based on artificial intelligence (AI). An operating system is a set of interconnected system software programs that manage and control the operation of electronic devices, utilize and run hardware and software resources, and provide public services to organize user interaction. In electronic devices, the operating system connects downwards to the physical devices at the hardware layer and provides a runtime environment for application software upwards.

[0084] An operating system typically includes a kernel layer, a middleware layer, and an application layer. The application layer includes applications, which can include system applications and third-party applications. The middleware layer includes a suite of software providing various services to application developers, or frameworks providing services such as databases, multimedia, and graphics, or capabilities such as distributed scheduling and system scaling. For example, the middleware layer may include a framework layer and / or a system service layer. The framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The system service layer includes the system's core capabilities, providing services to applications through the framework layer. The kernel layer is the layer between hardware and software. The kernel layer may include hardware drivers and the operating system kernel. In addition to providing hardware drivers, the kernel layer also supports functions such as memory management and system process management.

[0085] The electronic devices we use in our daily lives come in various types and forms, and are applied in a wide range of scenarios. Therefore, based on the different forms and functions of electronic devices, different application scenarios, and different user needs, the operating systems used in these devices may also differ. The basic functions implemented by the electronic device provided in this application can be implemented using a general-purpose operating system or a dedicated operating system. To more clearly illustrate the implementation of the embodiments of this application under a specific operating system, the architecture of HarmonyOS is shown below. Those skilled in the art can deduce the implementation of the embodiments of this application under other specific operating systems, such as Android™.

[0086] Figure 3A This is a software structure diagram of an electronic device provided in an embodiment of this application. The electronic device may be, for example, the terminal device mentioned above. Figure 3A As shown, the software architecture of an electronic device can be divided into several layers. In some embodiments, from bottom to top, these layers are: kernel layer, system service layer, framework layer, and application layer. Layers communicate with each other through software interfaces. System functions can be tailored, added, or combined at the subsystem granularity in different device deployment scenarios, and each subsystem can also be tailored, added, or combined at the functional granularity.

[0087] The kernel layer includes the kernel abstract layer (KAL), kernel subsystem, and driver subsystem.

[0088] The kernel abstraction layer provides basic kernel capabilities to the upper layers by shielding the differences between multiple kernels, including but not limited to process / thread management, memory management, file system, network management, and peripheral device management.

[0089] Kernel Subsystem: Supports the selection of a suitable OS kernel for different resource-constrained devices, including but not limited to Linux kernel, HarmonyOS kernel, LiteOS (Lite Operating System), etc.

[0090] Driver Subsystem: The driver framework is the foundation for the open system hardware ecosystem, providing unified peripheral access capabilities and a framework for driver development and management. The driver framework includes: display drivers, camera drivers, audio drivers, Bluetooth drivers, sensor drivers, etc.

[0091] The system service layer comprises the core capabilities of the system, providing services to applications through the framework layer. This layer includes, but is not limited to, the following subsystems: The system's basic capability subsystem set provides fundamental capabilities for the operation, scheduling, and migration of distributed applications across multiple devices. This set may include distributed soft bus, distributed data management, distributed task scheduling, and Ark multi-language runtime; it may also include multi-modal input subsystem, graphics subsystem, security subsystem, and AI subsystem.

[0092] The graphics subsystem mainly includes modules such as UI components, layout, animation, fonts, input events, window management, and rendering. The graphics service provides graphics rendering and display output functions, and internally, through the rational utilization of system hardware resources, it provides a smooth and efficient display experience. In this embodiment, the electronic device uses the graphics subsystem to achieve a light effect centered on the user's operation location within the user interface.

[0093] Basic software service subsystem set: provides public and general software services; the basic software service subsystem set may include event notification subsystem, telephone service subsystem, multimedia subsystem, etc.

[0094] Enhanced Software Service Subsystem Set: Provides differentiated enhanced software services for different devices; the enhanced software service subsystem set may include proprietary business subsystems for smart screens, proprietary business subsystems for wearables, proprietary business subsystems for the Internet of Things (IoT), etc.

[0095] Hardware service subsystem set: Provides hardware services; the hardware service subsystem set may include location service subsystem, unified identity and access management (IAM) subsystem, wearable proprietary hardware service subsystem, biometric identification, IoT proprietary hardware service subsystem, etc.

[0096] Distributed task scheduling enables distributed service management (discovery, synchronization, registration, and invocation), supporting remote startup, remote invocation, remote connection, and migration of applications across devices.

[0097] Distributed data management enables data synchronization, data storage, data sharing, and data access across all scenarios and devices.

[0098] The distributed soft bus provides communication-related capabilities for seamless interconnection between multiple devices, including: WLAN service capabilities, Bluetooth service capabilities, soft bus, inter-process communication (remote procedure call, RPC), and StarFlash communication capabilities.

[0099] Ark Multilingual Runtime is a unified compilation runtime platform designed to support the joint compilation and execution of multiple programming languages ​​and multiple chip platforms.

[0100] The framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The framework layer includes: the ArkUI framework (which provides a complete infrastructure for developing the user interface (UI) of system applications, including UI functionalities such as components, layouts, animations, and interactive events, as well as a real-time interface preview tool), the user application framework, and the Ability framework (an Ability is a lightweight application; the Ability framework schedules and manages the operation and lifecycle of Abilities). Different devices may run different operating systems, and therefore support different APIs.

[0101] ArkUI provides a complete infrastructure for UI development of system applications, including UI functions (such as components, layouts, animations, and interactive events) and real-time interface preview tools. The ArkUI framework offers at least two development paradigms: a declarative development paradigm based on ArkTS (referred to as "declarative development paradigm") and a JS-compatible web-like development paradigm (referred to as "web-like development paradigm").

[0102] The Ability framework enables the scheduling and management of the operation and lifecycle of Abilities (meta-capabilities). An Ability is a fundamental component of an application, the smallest unit for system-scheduled applications, and a component capable of performing an independent function. An application can contain one or more Abilities.

[0103] Abilities are divided into two types: FA (Feature Ability) and PA (Particle Ability). An application can consist of one or more FAs or PAs. FAs have a user interface (UI) and provide the ability to interact with the user; while PAs do not have a UI and provide the ability to run background tasks and a unified data access abstraction.

[0104] The multimodal input subsystem integrates input from multiple dimensions. Specifically, the multimodal input subsystem receives device input events, such as those from keyboards, mice, touchscreens, and touchpads, based on the kernel subsystem and driver framework. After normalizing and standardizing the input events, it distributes them to the ArkUI framework. The ArkUI framework then encapsulates the events and forwards them to the application, or distributes the events to the application through other interfaces.

[0105] The HarmonyOS API is a series of open capabilities provided to support HarmonyOS application development. The HarmonyOS API can be set at the framework layer or independently of the framework layer. The HarmonyOS API includes audio services (Audio API), push services (Push API), and account services, among others.

[0106] The application layer hosts applications. Applications can include system applications and extended / third-party applications. System applications can include the desktop, control bar, settings, contacts, phone, camera, etc., while extended / third-party applications can include social applications, travel applications, etc.

[0107] For example, the electronic device includes an operation detection module, a light source management module, a lighting calculation module, and a material rendering module to implement the display method provided in this application embodiment, so as to realize a first lighting effect that moves with the first operation position following the first operation in the first interface. The functions of each of the above modules are briefly described below.

[0108] The operation detection module is configured to detect a first operation and obtain the operation parameters of the first operation position. The first operation includes operations such as sliding and clicking. The operation parameters include, but are not limited to, the coordinates of the first operation position, the sliding vector, and the operation duration.

[0109] The light source management module is configured to generate and maintain a first light source based on a first operating position. For example, the light source management module maintains the light source parameters of the first light source in real time. These light source parameters include, but are not limited to, at least one of the following: center position, illumination radius, attenuation curve, or color temperature.

[0110] The lighting calculation module is configured to traverse all registered controls in the first interface, calculate the distance between each control and the center position, determine the first target area for displaying the first lighting, determine the lighting intensity according to the preset attenuation function, and map the lighting intensity to the rendering parameters of the component.

[0111] The material rendering module is configured to adjust the brightness, highlights, background blur, and edge light intensity of the component based on the lighting calculation results and the transparency parameters of the first container.

[0112] In addition, the electronic device may also include a positioning module configured to adjust the display position of the first container according to the sliding operation; and an animation control module that manages the animation curves of lighting transitions, component deformations and position movements to ensure that all dynamic effects are smooth and natural.

[0113] As exemplarily, the display effect provided in this application embodiment can be achieved through a lighting effect immersive component set in the graphics subsystem. The lighting effect immersive component can be a component built into the OS or a component built into an application. Application types include, but are not limited to, music, communication, utility, finance, and social media applications. For example, as... Figure 3B As shown, the immersive light effect component includes a UI layer, a light effect interaction layer, a material container layer, and a projection & gradient mask layer.

[0114] The UI layer contains display elements for at least one control. These display elements include at least one of an icon and text. Furthermore, developers can input display elements via tools such as a builder to personalize the control's appearance. For example, developers can input information using templates (symbols), scalable vector graphics (SVG), or images.

[0115] The lighting feedback layer, located below the UI layer, is used to create lighting effects. Interactive lighting effects can utilize an embedded display row (EDR) interactive light source layer to simulate pressed light sources, selected light sources, and other lighting effects. This allows electronic devices to simulate and follow light sources based on different interactive gestures such as pressing, sliding, and clicking. The lighting feedback layer and the material container layer are interconnected and influence each other.

[0116] The material container layer is used to achieve three levels of adjustable immersive light-sensing material, as well as projection and gradient masking effects, to achieve the visual design effect of the container floating above the displayed content in the first interface.

[0117] Projection and gradient overlays are used to enhance the floating effect of components and the readability of information content. For example, projection and gradient overlays are used to adjust the display effect of the edge of the first container with light effects.

[0118] The technical solutions provided in the embodiments are described in detail below with reference to the accompanying drawings.

[0119] Currently, electronic devices can provide feedback through vibration, display style, and other means. For example, when a user's operation is within the sensing area of ​​a control, the device can vibrate to indicate that the control has been selected. Similarly, the display style of the selected control may change after the user's operation. However, in actual operation, because the user's finger may obstruct the displayed content, the user cannot intuitively perceive the precise relationship between their finger and the control, making it difficult to determine whether the user's operation is accurate. This can easily lead to accidental touches and affect the accuracy of the user's operation. Furthermore, in the above methods, the user cannot intuitively perceive the precise spatial relationship between their finger and the control. When the finger slides across the user interface, only the affected control responds, while surrounding controls remain unchanged. This results in a fragmented overall spatial perception of the user interface, leading to poor interactive effects and impacting the user experience.

[0120] In view of this, the present application provides a display method. Specifically, in response to a first operation, an electronic device displays a first light effect at the operation position of the first operation. The first light effect can move with the first operation position, and the brightness of the control closer to the first operation position within the first light effect is different from the brightness of the control farther from the first operation position.

[0121] By displaying light effects based on the user's operation location, the light effects move in sync with the user's actions. This provides real-time feedback on the operation location, helping users intuitively perceive it and improving the interactive experience. It also helps prevent operation failures and accidental touches caused by unclear or inaccurate display of the operation location. In this method, when the first operation is applied to the first control, the target area of ​​the light effect also includes the area where the first control is located, achieving a unified spatial coordination of the control position, light effect position, and operation position within the first interface.

[0122] On the other hand, the light effect can differentiate the brightness of different areas within the first effect and provide a distance indicator for the operation position. This helps the user determine that the brightness of the closer area to the operation position is higher than that of the farther area. Therefore, the contrast in brightness within the light effect helps the user adjust the operation position promptly if there is a deviation. This helps improve the accuracy of the first operation and reduce the rate of accidental touches. Furthermore, the display method provided in this application embodiment also enhances the user experience. When the first operation is applied to a control, the light effect not only illuminates that control but also helps to illuminate other controls around it, enhancing the user interface's interactivity with the first operation and creating a sense of space. This contributes to a more immersive user experience during the first operation.

[0123] For ease of understanding, the following embodiments of this application will take an electronic device as an example to specifically illustrate the display method provided in the embodiments of this application.

[0124] As described above, in the display method provided in this application embodiment, the electronic device can respond to a first operation by displaying a light effect around the operation position of the first operation, thereby indicating the operation position of the first operation and enhancing the interactivity during the first operation. Wherein, The first operation operates within a container, which contains at least one interactive control. This container can also be called a component or a tab. Figure 4 As shown, the types of containers include, but are not limited to, the title bar 410, bottom tab 420, playback component 430, or toolbar in the display interface. The shapes of the containers include, but are not limited to, rectangles, squares, capsules, etc.

[0125] Controls include, but are not limited to, search controls, content switching controls, and playback controls. Controls can also be called components, tabs, or buttons. Specifically, search controls are used to find the information the user needs; content controls are used to switch the displayed interface, or to switch the content displayed on the interface; and playback controls are used to play music, videos, etc. For example, a playback control may include a minimized window of a music or video application.

[0126] The first operation is a user operation supported by any application in the electronic device; wherein, the application includes, but is not limited to, system applications, third-party applications, mini-programs, and browsers. Optionally, the first operation includes, but is not limited to, click operations, swipe operations, long press operations, etc. In the embodiments of this application, different lighting effects can be displayed according to the different types of first operations and the number of controls contained in the container to adapt to the interaction needs of various operating environments.

[0127] The following examples illustrate the light effect display for user operations in two main scenarios: Scenario 1 and Scenario 2. Optionally, Scenario 1 and Scenario 2 can be implemented as display methods independently, or they can be combined to implement display methods.

[0128] Scenario 1: The container supports multiple functions, and these functions can be implemented through different controls located within the container. The electronic device responds to a first operation within the first container by displaying a first lighting effect.

[0129] The following is combined Figure 5 Please provide an explanation of situation 1, such as... Figure 5 As shown, the display method includes steps 510 and 520.

[0130] Step 510: The electronic device displays a first interface; the first interface displays a first control and a second control; the first control and the second control are located in a first container.

[0131] Optionally, the first interface is the display interface of the application, such as the first interface including the main interface of the application, sub-interfaces of the main interface, etc. The first interface displays a first container. In case 1, the first container can be used to implement multiple functions, which can be implemented through the first control and the second control included in the first container.

[0132] In scenario 1, the first container can be a bottom tab at the bottom of the first interface, and the first and second controls can be tab items, sub-tabs, search boxes, segmentation buttons, etc., within the bottom tab. For example, the first and second controls may have different functions; for instance, the first control might be used to adjust the displayed content on the first interface, while the second control might be used to switch from the first interface to a second interface, which could be a sub-interface of the first interface. It should be understood that the functions of the first and second controls are related to the type of application and the type of the first container. The above examples are merely illustrations of the functions of the first and second controls and do not represent limitations on their functionality.

[0133] Step 520: In response to a first operation in the first container, the electronic device displays a first light effect in a first target area of ​​the first interface; the first target area is determined based on the first operation position of the first operation.

[0134] Wherein, the first operation position is the real-time operation position of the first operation. When the first operation is applied to the first control, the first target area includes the area where the first control is located and part or all of the area where the second control is located. In the first lighting effect, the brightness of the area where the first control is located is higher than the brightness of the area where the second control is located. For example, the first control and the second control are adjacent or close to each other within the first container.

[0135] In scenario 1, the first operation includes sliding, dragging with the mouse, long-pressing, or clicking.

[0136] For example, when the first operation is a sliding operation, the electronic device updates the first target area in response to the change in the operation position of the first operation, and displays the first effect in the updated first target area, thereby achieving the responsiveness of the first light effect.

[0137] In Case 1, the first lighting effect is supported as either Effect 1 or Effect 2. In Effect 1, the center of the first target area is the first operation position, and in Effect 2, the vertex of the first target area is the edge position obtained by projecting the first operation position onto the first container.

[0138] Effect 1: In the first target area, the brightness is highest at the first operating position, and the brightness decreases as the distance from the first operating position increases.

[0139] For example, such as Figure 6A As shown, under effect 1, the first lighting effect can be implemented as a point light source effect 612 with brightness gradually decreasing from the first operating position 611 to the surrounding areas. This point light source effect can be implemented using a spatially attenuated point light source model. For example, after the electronic device detects the first operating position (x, y), the electronic device can create a virtual point light source at (x, y) in the screen coordinate system, and implement the first lighting effect through this virtual point light source.

[0140] The intensity of the virtual point light source can be continuously reduced from the first operation position outwards, so that the first light effect illuminates the area around the first operation position, and the brightness gradually decreases as one moves away from the first operation position. In this way, the first light effect displayed on the first interface has spatial continuity and physical realism, which helps to improve the interactive effect of the first operation and thus enhances the user's operating experience.

[0141] For example, such as Figure 6B As shown, under effect 1, the first light effect can also be implemented as multiple halo effects 613 with different brightness centered on the first operation position. The brightness is the same at all points within the same halo 613, thereby reducing the computational burden required for the electronic device to display the first light effect. The multiple haloes 613 are nested together, and their widths can be equal or unequal. For adjacent halo 1 and halo 2 among the multiple haloes, the outer radius of halo 1 is equal to the inner radius of halo 2. After the operation position is updated, the position of the virtual point light source also moves, allowing the first light effect to move dynamically according to the first operation.

[0142] In one example, the larger the outer radius of the halo, the brighter the halo; conversely, the smaller the outer radius of the halo, the lower the brightness of the halo.

[0143] Under effect 1, the brightness change of the first light effect in the first target area can help the user locate the first operation position, thereby improving the accuracy of the first operation and reducing the risk of accidental touch of the first operation.

[0144] Effect 2: In the first target area, the brightness is highest at the first edge of the first container, and decreases with distance from the first edge. The first edge can be the projection of the first operating position onto the edge of the first container. For example, if the first operating position is located above the first container, the first edge can be the projection of the first operating position onto the top edge of the first container.

[0145] For example, such as Figure 6C As shown, under effect 2, the first light effect can be implemented as a spotlight effect 615 with the first edge position 614 as the vertex and the brightness continuously decreasing. For example, under effect 2, the first target area can be located inside the first container.

[0146] The process of determining the first target area is described below. Optionally, in response to a first operation, the electronic device determines the effective area of ​​the first light effect based on the first operation position; then, the electronic device determines the first target area based on at least one control displayed within the effective area of ​​the first light effect, and determines the brightness of the area where the at least one control is located based on the distance between the at least one control and the first operation position.

[0147] The shape of the effective area of ​​the first light effect is preset, such as a fan-shaped area or a circular area with a radius of R virtual pixels (vp), where R is a positive integer.

[0148] For example, such as Figure 7 As shown, the electronic device determines the first operating position 711 as the center point of the effective area 712 of the first light effect, and determines the effective area of ​​the first light effect; then, the electronic device determines the first target area based on the overlap between the effective area of ​​the first light effect and the area where each component in the first interface is located.

[0149] For example, the electronic device iterates through the various controls registered in the first interface (such as...). Figure 7 (Controls 1, 2, 3, and 4 in the image). For each control, the electronic device determines the distance between the location of the control and the first operating position; when the distance between the location of the control and the first operating position is less than or equal to the effective radius of the first light effect, it indicates that part or all of the area where the control is located is within the effective area of ​​the first light effect. Then, the electronic device can determine the first target area 713 based on the overlapping area between the control and the effective area of ​​the first light effect.

[0150] The first target area may include the area inside the first container and the area outside the first container that is within the effective area of ​​the first light effect. For example, Figure 7 As shown, the first target area 713 includes the area 714 where control 1 is located, the overlapping area 715 where control 2 is located and the effective area of ​​the first light effect, and the overlapping area 716 where control 4 is located and the effective area of ​​the first light effect.

[0151] For example, the first target area 713 also includes an overlapping area 717 between the area where the first container is located and the area where the first light effect is effective.

[0152] Subsequently, the electronic device can also determine the rendering parameters of the component based on the attenuation function of the first light effect. The attenuation function of the first light effect can be determined based on the point light source model in the above embodiment. For example, the rendering parameters include at least one of the following: brightness enhancement coefficient, specular reflection intensity parameter, rim light intensity parameter, etc.

[0153] This results in different brightness levels in the areas where different controls are located within the light effect, enabling multiple controls to respond to user operations. This light effect can simulate the uniform illumination of surrounding objects by a light source in the physical world, forming a continuous spatial light field distribution among multiple controls. This makes the controls in the user interface visually interconnected, forming an organic whole space, which helps to improve the display effect of the first interface.

[0154] When the first operation is a sliding operation, the electronic device can determine a new first target area when the first operation position changes, so that the first light effect moves with the operation position. In this way, the electronic device can ensure the consistency of light effect calculation when the operation position changes, so that during the first operation, the user can observe the continuous movement of the light effect in the first interface, with multiple controls in the container being lit up and then dimmed one by one, forming a complete light and shadow flow path, which helps to improve the spatial continuity of the user operation.

[0155] In summary, this method displays light effects based on the user's operation location, allowing the light effects to move along with the user's operation location. This provides real-time feedback on the operation location, helping users to intuitively perceive the location and improving the interactive experience. It also helps avoid operation failures and accidental touches caused by unclear or inaccurate display of the operation location. Furthermore, when the first operation is applied to the first control, the target area of ​​the light effect also includes the area where the first control is located, achieving a unified spatial coordination of the control position, light effect position, and operation position within the first interface.

[0156] On the other hand, the brightness varies across different areas within the light effect, with areas closer to the operation position being brighter than those farther away. This contrast in brightness within the light effect helps to more accurately highlight the operation position. Furthermore, when the first operation is applied to a control, the light effect not only illuminates that control but also other controls around it, enhancing the spatial sense of the user interface and contributing to a more immersive experience for users interacting with the interface.

[0157] For electronic devices with different screen sizes, the location of the same control on the same page may differ. In this context, compared to user actions affecting controls and responding by changing the control's display effect, in this embodiment, the display position of the light effect does not depend on the control's position. This achieves independence between the control layout and the light effect display on the user interface, ensuring consistency in the display effect across various electronic devices and exhibiting good universality. From a user operation adaptation perspective, the display method provided in this embodiment allows users to directly adapt to the light effect corresponding to their user operations when using the same application across devices. This reduces the need for users to adapt to the interaction effects of their user operations across devices, thereby helping to lower the learning cost for users across devices.

[0158] Figure 8 This is a schematic flowchart illustrating a display method provided for an exemplary embodiment of this application. For example, as shown... Figure 8 As shown, the electronic device responds to the first operation by displaying a first light effect 810 that follows the first operation, displaying a first motion effect 820 for the second control, and adjusting the display layout 830 of the first container to achieve a multi-dimensional response to the first operation. The portion concerning the display of the first light effect 810 that follows the first operation is referenced... Figure 5 Corresponding embodiments. Displaying the first animation effect 820 of the second control and adjusting the display layout 830 of the first container are optional interactive effects provided in this application embodiment. For example, when the first operation is a sliding operation, the electronic device can also respond to changes in the operation position by repeatedly executing the display of the first light effect 810 following the first operation, the display of the first animation effect 820 of the second control, and the adjustment of the display layout 830 of the first container; until the first operation ends. For example, Figure 8 The second animation 840 is used to eliminate the first animation after the first operation (such as a click operation or a swipe operation) ends, and the third animation 850 is used to restore the display layout of the first container after the first operation ends.

[0159] The following sections describe the specific implementation of the first animation 820 for displaying the second control and the display layout 830 for adjusting the first container.

[0160] First, an example of the first animation 820 for displaying the second control will be introduced.

[0161] In scenario 1, the first container contains multiple controls, including the first control and the second control. To further indicate the location of the first operation, the electronic device can also display a motion effect of other controls moving towards that control when the first operation is applied to a control within the first container. This allows the direction of movement of the other controls to indicate which control the first operation is applied to.

[0162] Optionally, the movement effect can simulate the attraction of a force field generated by the first operation. This force field is virtual, meaning that other controls in the first container can move towards the control on which the first control is acting. For example, they can move horizontally or vertically towards the first control.

[0163] Furthermore, the movement effect can also simulate the force field repulsion generated by the first operation. Correspondingly, other controls in the first container can move away from the control affected by the first operation. For example, they can move horizontally or vertically away from the first control.

[0164] The following example illustrates the movement effect of the second control (hereinafter referred to as the first animation) by taking the first operation acting on the first operation, whereby the second control in the first container moves towards the first control. Exemplarily, in this embodiment, the types of operations include, but are not limited to, swipe operations, click operations, and long-press operations.

[0165] In one possible implementation, the electronic device responds to a first operation in the first container by displaying a first motion effect that moves the second control toward the first control.

[0166] Optionally, when the first operation is applied to the first control, the electronic device displays a first animation effect. In this embodiment, the first operation applied to the first control means that the first operation position is located within the sensing area of ​​the first control. During the continuous application of the first operation to the first control, the first animation effect is continuously displayed until the movement distance of the second control reaches a movement distance threshold, or the first operation position changes to another area outside the sensing area of ​​the first control, or the first operation is completed.

[0167] The movement distance threshold can be preset. For example, the movement distance threshold can be less than or equal to the maximum movement distance at which the second control does not overlap with other controls in the first container.

[0168] For example, in the first animation, the second control can approach the first control at a constant speed or at a variable speed. For instance, the closer the second control is to the first control, the slower its movement speed. Or, the closer the second control is to the first control, the faster its movement speed, thus simulating a more realistic force field attraction effect.

[0169] In this embodiment, the change in the movement speed of the control to be moved reflects the duration of the user's operation on the control. When the operation position remains in the sensing area of ​​the control for an extended period, the user is prompted to end the operation as soon as possible, thereby shortening the operation time and improving the user's operation efficiency.

[0170] In this embodiment, the first animation effect can be achieved by moving the position of the display element of the second control. For example, the display element of the second control includes at least one of the following and combinations thereof: the icon of the second control, the text of the second control, or the border outline of the second control, etc.; wherein the text of the second control is used to indicate the name of the second control, the function of the second control, etc.

[0171] Figure 9 This is a schematic diagram illustrating the motion effect of a control, provided as an exemplary embodiment of this application. For example, as shown... Figure 9 As shown, when the first control 911 is located to the left of the second control 912, and the first operation is applied to the first control 911, the icon of the second control 912 moves to the left. Similarly, when another first control 913 is located to the right of the second control 912, and the first operation is applied to the first control 913, the icon of another second control 914 moves to the right.

[0172] Compared to directly adjusting the bounding box of the control to be moved, this embodiment only moves the display elements of the first control, simplifying the movement logic of the second control and helping to reduce the computational overhead of the movement animation. In this way, the sensing area of ​​the control to be moved remains unchanged, thus avoiding the overlap of sensing areas of some controls within the container caused by moving the control itself, which could affect the electronic device's judgment of user operations.

[0173] In this embodiment, when the first operation ends, the electronic device detects that the operation signal of the first operation has disappeared; afterwards, the electronic device can display a second animation effect that restores the second control to its original position. The second animation effect can be implemented by the second control moving away from the first control until it returns to its original position before moving.

[0174] The following is an exemplary description of the process by which an electronic device determines the movement parameters of a second control when the first operation is applied to the first control.

[0175] In this embodiment, the movement of the second control toward the first control can be viewed as the second control being attracted by the force field of the first operation. Before displaying the second animation effect, the electronic device can, in response to the first operation acting on the first control, determine at least one control to be moved in the first container based on the radius of the force field of the first operation. The radius of the force field characterizes the effective range of the second animation effect. The radius of the force field can be reflected by the number of controls spaced apart from the first control, or by the distance between the positions of the first operation.

[0176] Optionally, when the force field radius of the first operation is a number threshold used to characterize the number of controls between the first control and other controls, the number of controls between each control to be moved and the first control is less than or equal to the number threshold; the electronic device can determine at least one control to be moved from the first container based on the first control and the number threshold.

[0177] For example, the first container contains four controls, arranged from left to right: control 1, control 2, control 3, and control 4, with a quantity threshold of 2. When the first operation is applied to control 1, controls 2 and 3 are the controls to be moved, and the electronic device displays controls 2 and 3 moving to the left. When the first operation is applied to control 2, controls 1, 3, and 4 are all the controls to be moved, and the electronic device displays the first animation of control 1 moving to the right, control 3 moving to the left, and control 4 moving to the left.

[0178] The quantity threshold can be a preset positive integer, such as the quantity threshold being equal to 1, 2, 3, ..., etc.

[0179] Furthermore, the quantity threshold can also be related to the number of controls in the first container. For example, the electronic device determines the quantity threshold by subtracting the influence threshold from the number of controls in the first container. The influence threshold is a preset value used to indicate the number of controls exceeding the radius of the force field of the first operation. For example, if the number of controls in the first container is 3 and the influence threshold is 2, then the quantity threshold is 1 (3-2).

[0180] Optionally, when the radius of the force field of the first operation is a first distance threshold between the first operation position and the first operation position, the distance between the control to be moved and the first operation position is less than or equal to the first movement threshold. Controls in the first container whose distance from the first operation position is greater than the first distance are not attracted by the force field of the first operation.

[0181] In this embodiment, the first distance threshold can be dynamically changed. Optionally, the electronic device determines the first distance threshold based on the operation time of the first operation.

[0182] The operation time refers to the continuous duration of the first operation applied to the first control. Optionally, the first distance threshold increases with the increase of the operation time. In the initial stage of the first operation applied to the first control, the first distance threshold can be a preset distance threshold. As the operation time increases, the first distance threshold continuously increases until the first distance threshold reaches the maximum distance threshold.

[0183] Thus, as the operation time increases, more and more controls gradually move closer to the control that the user is operating on, thereby simulating the effect that the attraction of the user operation increases with the increase of the operation time, making the movement effect of the controls in the first container that are not operated by the user more physically realistic.

[0184] At least one control to be moved may include a second control. The number of controls spaced between the first control and the second control is less than or equal to a quantity threshold; or, the distance between the first control and the second control is less than or equal to a first distance threshold. The quantity threshold is used to indicate the range of influence of the first operation.

[0185] In this embodiment, the electronic device selects at least one control to be moved from the first container based on the force field radius of the first operation, which helps to reduce the number of controls to be moved, thereby reducing the computational burden on the electronic device during the display of the first animation. Furthermore, within the first container, the second control closest to the first control moves towards the first control while the positions of other controls remain unchanged, maintaining the arrangement rules of the controls within the first container and thus helping to maintain the neatness of the control arrangement within the first container.

[0186] In this embodiment of the application, the movement distance of the second control towards the first control in the first animation is related to the first control. In one possible implementation, the movement distance of the second control is determined based on at least one of the following: the distance between the original position of the second control and the first operation position, the direction of the first control relative to the second control, or the operation time.

[0187] The movement distance of the second control can be the distance by which the second control moves closer to the first control per unit movement time.

[0188] Optionally, the force field attraction effect of the first operation attenuates outwards along the radius of the force field, having a stronger effect on the second control near the first operation location and a weaker effect on the second control farther away from the first operation location. For example... Figure 10 As shown, if the distance between the original position of the second control 1012 and the first operation position 1011 is small, then the movement distance of the second control 1012 is large; correspondingly, if the distance between the original position of the other second control 1013 and the first operation position 1011 is large, then the movement distance of the other second control 1013 is greater.

[0189] In one example, in response to a first operation applied to a first control, the electronic device determines the movement coefficient of the second control based on the distance between the original position of the second control and the position of the first operation. The movement coefficient of the second control can be any value within the range [0, 100%]. The movement coefficient of the second control is determined based on the distance between the original position of the second control and the position of the first control; the movement coefficient is also called the influence strength coefficient. In the embodiments of this application, the greater the distance between the original position of the second control and the position of the first control, the greater the attenuation of the movement coefficient of the second control; the smaller the movement distance of the second control.

[0190] After determining the movement coefficient of the second control, the electronic device can determine the movement distance of the second control based on the movement coefficient K. For example, the electronic device determines the movement distance of the second control based on the product of the movement coefficient K and the unit movement value L. For instance, the movement distance of the second control = K L+Z. Where Z is the compensation amount for the movement distance. Z can be a preset positive number or 0.

[0191] After determining the movement distance of the second control, the electronic device moves the display element of the second control closer to the first control based on this movement distance, thereby displaying the second animation effect. While the first operation continues to act on the first control, the electronic device can also determine a new movement distance in the second space based on the distance between the latest position of the second control and the position of the first operation. The latest position of the second control refers to the position of the display element of the second control after it has moved closer to the first control.

[0192] Because the distance between the latest position of the second control and the first operation position has decreased, the movement coefficient of the second control increases, and the new movement distance of the second control also increases. Afterwards, the electronic device can restart the process of moving the display element of the second control closer to the first control from the direction of the second control's movement distance, until the first operation no longer applies to the first control, or the second operation is completed.

[0193] In this embodiment, during the continuous process of the first operation acting on the first control, the movement animation can be continuously displayed, and as the control to be moved gradually approaches the first control, the movement distance of the control to be moved continuously increases, making the movement animation of the control to be moved more physically realistic.

[0194] In this embodiment, the movement coefficient of the second control can also dynamically change with the operation time. In one example, the movement coefficient of the second control can continuously increase as the operation time increases. The operation time reflects the intensity of the first operation, referring to the duration of the first operation's effect on the first control, such as the time the first operation lingers on the first control. For example, a longer operation time indicates a greater intensity of the first operation, resulting in a larger movement coefficient and a greater movement distance for the second control, thus causing it to approach the first control faster.

[0195] For example, within the operation time range of [0, 300ms], the movement coefficient of the second control gradually increases from 0 to 100%. After 300ms, the movement coefficient of each second control is the same, all being 100%. That is to say, the movement coefficient of each second control is the same after the operation time reaches 300ms. Therefore, after 300ms, the movement distance of each second control can be the same, thus achieving the effect of multiple second controls moving closer to the first control at a uniform speed.

[0196] Optionally, the electronic device can determine whether the movement distance of the second control is valid based on the distance between the original position of the second control and the position of the first control. When the latest position of the second control does not overlap with the positions of other controls, the electronic device moves the display element of the second control according to the movement distance of the second control; conversely, when the latest position of the second control would overlap with the positions of other controls (such as the first control), the electronic device cancels the movement of the display element of the second control, in which case the first animation is canceled.

[0197] This implementation allows the motion effects to map operation information such as the operation time of the first operation. In this way, the motion effects can intuitively reflect the "press intensity" of the user's operation, that is, "how hard" the user presses (in this implementation, the longer the operation time, the greater the press intensity), which helps to enhance the user's sense of control over the operation and also helps to respond to the user's operation in multiple dimensions.

[0198] In addition, the motion effects are used to reflect the changes in the arrangement of controls within the first container under the influence of user operations, thereby simulating the deformation caused by pressing a physical object in the real physical world, so that the motion effects can correspond to the real physical world and enhance the realism of the motion effects.

[0199] The following is an exemplary description of adjusting the display layout 830 of the first container.

[0200] To enhance the interactivity of the first operation, the electronic device can also display dynamic movement and scaling effects of the first container during the operation, allowing the first container to respond to the first operation. In this way, a dynamic response to the first operation is achieved within the first interface, creating an interactive effect where "wherever the user's finger (corresponding to the touch operation) lands is where the interface responds," which helps to enhance the user's immersive experience.

[0201] In this embodiment of the application, when the operation position of the first operation changes from the first operation position to the second operation position, the electronic device may also display a third effect of the display layout switching of the first container on the first interface; wherein, the display layout includes at least one of the following: display size or display position.

[0202] Optionally, in this embodiment, the first operation is a sliding operation, wherein the second operation position and the first operation position are the real-time operation positions of the first operation at different times. The electronic device can detect the latest operation position of the first operation at regular intervals (e.g., 1 millisecond) to obtain the second operation position; when the second operation position is detected to be different from the previously detected first operation position, the electronic device displays a third animation effect. In this embodiment, the switching of the display layout includes moving the first container and scaling the display size of the first container.

[0203] The display layout of the first container can change as the first operation slides. Exemplarily, the display layout includes a display size, such as... Figure 11 As shown, during the continuous process of the first operation, the third animation includes (1) the first container switching from the first display size 11111 to the second display size 1112; (2) the second display size 1112 switching to the third display size 1113.

[0204] During the first operation, the display size and position of the first container can change synchronously to dynamically change the display layout of the first container as the first operation slides, creating an interactive effect where the first container jumps or shakes in response to the first operation. For example, the display position of the first container may shift to the right, and the display size of the first container may shrink. Or, the display position of the first container may shift to the upper left, and the display size of the first container may increase.

[0205] In this embodiment of the application, the electronic device can adjust the display layout of the first container on the first interface by: the electronic device determining the display parameters of the first container according to the second operation position; then, the electronic device can adjust the display layout of the first container on the first interface according to the display parameters of the first container.

[0206] The display parameters of the first container include scaling parameters for the display size of the first container, or offset parameters for the display position of the first container. The scaling parameters may include a scaling ratio of the display size of the first container relative to its original size, and the offset parameters may include an offset parameter of the display position of the first container relative to its original position.

[0207] In this embodiment, the electronic device adjusts the display layout of the first container according to the first operation. By switching the display layout of the first container, a tactile-visual mapping for the first operation can be achieved, thereby helping the user to perceive the first operation more intuitively. Furthermore, this embodiment enhances the interactivity of the first operation process, thus improving the user's operating experience.

[0208] In this embodiment, the electronic device can determine display parameters based on the distance between the second operating position and a reference point of the first container. The reference point of the first container can be the center point of the first container, or any point within the display area of ​​the first container. The offset parameter can be used to characterize the offset position relative to the origin of the container coordinate system. The container coordinate system can have the center point of the first container as its origin, the horizontal rightward direction as the positive x-axis, and the vertical upward direction as the positive y-axis.

[0209] For example, the greater the distance between the second operation position and the reference point of the first container, the greater the scaling ratio of the display size; that is, the larger the display size of the first container is when the first operation slides to a position farther away from the origin of the container coordinate system; and the smaller the display size of the first container is when the first operation slides to a position closer to the origin of the container coordinate system.

[0210] For example, the offset direction of the display position is related to the sliding direction of the first operation; for instance, the offset direction of the display position is consistent with the sliding direction of the first operation.

[0211] In this way, the contraction and offset of the first container can reflect the sliding direction and sliding distance of the first operation, which helps to improve the interactive effect of the first operation.

[0212] In one possible implementation, to improve the smoothness of switching the display layout of the first container, the display parameters can be determined based on the distance between the second operation position and the reference point of the first container, and the region to which the second operation position belongs in the container coordinate system.

[0213] Specifically, different regions in the container coordinate system correspond to different display parameter determination methods. When the distance between the second operation position 1 and the reference point of the first container is equal to the distance between the second operation position 2 and the reference point of the first container, since the regions in the container coordinate system where the second operation position 1 and the second operation position 2 are located are different, the electronic device determines different display parameters based on the second operation position 1 and the second operation position 2 respectively. This results in different display layouts of the first container and different display layout switching processes when the second operation position moves to different regions. This helps to improve the richness of display parameter values, making the container's display layout change more flexible during user operation.

[0214] For example, the container coordinate system can be divided into four quadrants according to the x-axis and y-axis, with each quadrant corresponding to a different method for determining display parameters. For instance, the scaling parameter for display size may have a different range of values ​​in different quadrants, or the offset direction and offset threshold of the display position may differ.

[0215] Table 1. Display Parameter Determination Method

[0216] As shown in row 3 of Table 1, the rightward offset threshold is 2vp in the first and fourth quadrants of the container coordinate system. This means that when the second operating position is in the first or fourth quadrant, the first container can be offset horizontally to the right by a maximum of 2vp. For example, as the distance between the second operating position and the reference point of the first container increases, the horizontal rightward offset parameter gradually increases until it reaches 2vp.

[0217] Similarly, in the first and fourth quadrants of the container coordinate system, the offset parameter can range from 102% to 98%. For example, as the distance between the second operating position and the reference point of the first container increases, the offset parameter gradually decreases from 102% to 98%.

[0218] As shown in row 5 of Table 1, the upward offset threshold in the first and second quadrants of the container coordinate system is 2vp. That is, when the second operating position is in the first or second quadrant, the first container can be offset horizontally upward by a maximum of 2vp. For example, as the distance between the second operating position and the reference point of the first container increases, the horizontal upward offset parameter gradually increases until it reaches 2vp.

[0219] Similarly, in the first and second quadrants of the container coordinate system, the offset parameter can range from 98% to 103%. For example, as the distance between the second operating position and the reference point of the first container increases, the offset parameter gradually increases from 98% to 103%.

[0220] Optionally, when the second operation position is outside the first container, the electronic device can project the second operation position onto the edge of the first container to obtain a second edge position. The determination of the second edge position is similar to that of the first edge position, as detailed in the above embodiment, and will not be repeated here. Then, the electronic device determines the display parameters of the first container based on the distance between the second edge position and a reference point of the first container. Thus, when the user swipes out of the container, the display layout of the container changes to indicate to the user that the operation is still directed at the first container and that the user's operation has exceeded its boundaries.

[0221] In this embodiment of the application, when the first operation ends, the electronic device displays a third animation effect of the first container dynamically expanding and contracting until the first container returns to its original display layout. Exemplarily, the third animation effect includes multiple rounds of size adjustment until the display size of the first container is adjusted to achieve the effect of the first container bouncing back to its original display layout.

[0222] Optionally, each round of size adjustment includes at least one increase in the display size of the first container and at least one decrease in the display size of the first container. During one round of size adjustment, the display size of the first container fluctuates around its original display size. During each round of size adjustment, increasing and decreasing the display size of the first container alternates.

[0223] As the size adjustment cycles increase, the increase and decrease in the display size of the first container gradually decrease until it returns to its original size. This allows the container's display layout to elastically shrink back to its original layout after the user's operation ends. The dynamic effect, simulated by elastic physics, enhances the realism of the user's operation and visually indicates that the operation is complete. Furthermore, this method allows the container to naturally and smoothly return to its original display layout, improving the overall interface display.

[0224] In one possible implementation, a third control is also displayed in the first interface, the third control being located in the second container; the electronic device may also respond to a second operation on the third control by displaying a second light effect in a second target area of ​​the first interface; the second target area is determined according to the operation position of the second operation, and when the first control is within the influence range of the second light effect, the second target area includes the area where the third control is located, as well as part or all of the area where the first control is located; in the second light effect, the brightness of the area where the third control is located is higher than the brightness of the area where the first control is located.

[0225] Optionally, the second operation can be a click operation or a swipe operation. The second container is a single-control container, meaning that the second container can achieve a single function through the third control. For example, the second container can be the central background panel in the title bar of the first interface, and the third control is a control set in the circular background panel.

[0226] The second lighting effect is similar to the first. For details, please refer to [link / reference]. Figure 5 The corresponding implementation examples will not be described in detail here.

[0227] In one possible implementation, unlike the display of the first light effect, when the operation position of the second operation extends beyond the area where the third control is located and is far away from the third control, the electronic device reduces the brightness of the second light effect. For example, when the brightness of the second light effect is less than or equal to a brightness threshold, the electronic device can also cancel the display of the second light effect. This helps to reduce the interference of the second light effect on other displayed content in the first interface.

[0228] Figure 12 This is a schematic diagram illustrating the execution process of a second operation, provided as an exemplary embodiment of this application. In this embodiment, the second operation is a sliding operation. When the second operation slides to the first container, the second operation can be considered as the first operation described in the above embodiments. For example, as... Figure 12 As shown in (a), the second operation acts on the third control 1211, and a second light effect 1212 is displayed at the operation position of the second operation. Afterwards, the second operation slides out of the third control 1211, as shown... Figure 12 As shown in (b), the second light effect 1213 with reduced brightness is displayed at the operation position of the second operation. As the second operation continues to slide, as... Figure 12 As shown in (c), the second operation acts on another third control 1214, and another second light effect 1215 is displayed at the new operation position. When the second operation slides to the first container 1216, the second operation can be regarded as the first operation in the above embodiment. For example, as Figure 12 As shown in (c), when the second operation is applied to the first control 1217, a second light effect is displayed around the first control 1217. When the second operation moves out of the first container 1216, the second light effect moves to the edge of the first container 1216. For example, as... Figure 12 As shown in (d), when the second operation position 1218 of the second operation is outside the first container 1216, the electronic device displays the second light effect with the first projection position 1219 as the center.

[0229] In this embodiment, the lighting effects on multiple controls within the first interface are continuously changed during the second operation, so that there are no jumps in the display of the light effect, thereby achieving a visual effect of the light effect flowing with the operation, which helps to improve the user's operating experience.

[0230] Scenario 2: The container supports multiple functions, and these functions can be implemented through different controls located within the container. The electronic device responds to the first operation by displaying the first lighting effect.

[0231] In scenario 2, the first operation can be a click, double-click, or long-press operation.

[0232] For example, Figure 13 This is a flowchart illustrating a display method provided for an exemplary embodiment of this application. Figure 13 As shown, the display method includes steps 1310 and 1320.

[0233] Step 1310: The electronic device displays a first interface; the first interface displays a first control, which is located in a first container.

[0234] In scenario 2, the first container can be a bottom tab of the first interface or a toolbar; the first container includes at least two controls, including a first control; the first control can be any tab item in the bottom tab. The first container in scenario 2 is similar to the first container in scenario 1, as detailed in the description of "Scenario 1," and will not be repeated here.

[0235] Optionally, the first operation can be a swipe operation, a click operation, a double-click operation, etc. For example, the first operation in case 2 can be the same operation as the first operation in case 1, or it can be a different operation. If the first operation in case 1 is the same as the first operation in case 2, the first light effect in case 1 is displayed during the first operation, while the first light effect in case 2 can be displayed at the end of the first operation.

[0236] Step 1320: In response to a first operation on a first control, the electronic device displays a first light effect that moves from a first region of the first container to the operation position of the first operation; wherein a second light effect is displayed at the first region.

[0237] In this embodiment of the application, when the display jumps from other interfaces to the first interface, a second light effect can be displayed in the first area of ​​the first container. The effect of the second light effect can be similar to the effect of the first light effect in case 1.

[0238] The first region can be any region within the first container; for example, the first region is a region that does not overlap with any control within the first container. Alternatively, the first region can be the region within the first container where the second control is located. For example, as shown... Figure 14 As shown in (a) or (b), the second light effect 1411 is a point light source light effect in which the light intensity decreases from the center to the surrounding area.

[0239] In this embodiment, the color of the first light effect can be preset, or the color of the first light effect can be the same as the color of the second light effect. The color of the second light effect can be determined based on the theme color of the application, or it can be determined based on the color of the display element of the second control. The method for determining the color of the second light effect is similar to the method for determining the color of the third light effect in the embodiments below; please refer to the embodiments below for details.

[0240] When the first operation is a sliding operation, the electronic device can display a first light effect that moves from the first area to the operation position of the first operation when the first operation ends. In order to achieve multi-dimensional response to the first operation, the electronic device can also display a first animation effect or adjust the display layout of the first container during the continuation of the first operation. For details on this part, please refer to Case 1, which will not be repeated here.

[0241] In this embodiment, the electronic device responds to user operations by displaying a light effect that moves from other areas to the user's selected location, thus enhancing the interactive experience and improving user experience. Furthermore, in this embodiment, the first animation is movable, quickly attracting the user's attention and helping them efficiently pinpoint the first control selected. This also helps to promptly detect errors in user operation, reducing the negative impact of accidental touches.

[0242] For example, during the movement towards the operating position of the first operation, the brightness of the first light effect can be continuously increased. For instance... Figure 14 As shown in (a) or (b), when the first light effect 1412 moves to the first light effect 1413, the brightness of the first light effect increases. This makes the first light effect more eye-catching, thus helping the user to more quickly identify the first control selected in the first operation on the first interface.

[0243] Optionally, when the first operation ends, the electronic device determines the first control from among multiple controls displayed on the first interface; for example, when the operation position of the first operation is located in the sensing area of ​​the first control, and the first operation ends, and the first operation is an operation on the first control, then the electronic device determines that the first operation selected the first control. Afterwards, the electronic device determines the initial illumination parameters of the first light effect based on the distance between the first control and the second control, and continuously increases the light intensity parameters of the first light effect during its movement. The light intensity parameters include the light intensity of the virtual point light source used to indicate the first light effect. The virtual point light source can be 6500K standard white light, or it can be configured according to actual needs, and is not limited here.

[0244] For example, the brightness of the first light effect is at its maximum when the center of the first light effect moves to the operating position of the first operation. For instance, when the center of the first light effect moves to the operating position of the first operation, the electronic device sets the brightness of the virtual point light source to be greater than 1, thereby achieving an ultra-bright effect, where 1 represents the highest brightness that the display screen of the display electronic device can exhibit.

[0245] Optionally, during the display of the first light effect, the electronic device can cancel the display of the second light effect. To improve the smoothness of the disappearance of the second light effect, the electronic device can display the first transition light effect and cancel the display of the second light effect after the first light effect moves away from the first area. Furthermore, during the display of the first transition light effect, the electronic device can also display the first light effect at the first area, thereby achieving a gradual appearance effect of the first light effect.

[0246] After displaying a first light effect indicating movement from the first position to the position of the first click operation, the electronic device may also display a third light effect on the first control; the third light effect is used to indicate that the first operation selected the first control. Optionally, such as Figure 14 As shown in (a) or (b), before the third light effect 1415 is displayed, the electronic device may display a second transition light effect 1414. The color of the second transition light effect 1414 may be the same as the third light effect 1415. During the display of the second transition light effect 1414, the electronic device may also display the third light effect 1415 and de-display the first light effect 1413, so as to smoothly transition from the interactive light effect of the operation to the prompt light effect used to indicate the selection of the control.

[0247] In this embodiment, the third light effect can be an elliptical or circular halo. The display area of ​​the third light effect can be larger than or equal to the size of the bounding box of the icon and text of the first control, thereby ensuring that the illumination range of the third light effect completely covers the first control. The brightness of the third light effect can decrease from the center to the periphery of the display area of ​​the third light effect, thereby forming a soft diffuse reflection effect.

[0248] In achieving the third effect, the electronic device can generate a static light source below the display area of ​​the icon and text of the first control, with the light source positioned at the center of that area. From a display layer perspective, this static light source can be set above the material layer and below the UI layer of the first interface, so as to achieve the visual effect of the third light effect illuminating the icon and text of the first control from below.

[0249] After the first operation ends, the third light effect can continue to be displayed. For example, when the electronic device responds to a new first operation and displays another first light effect that moves from the first control area to the operation position of the new first operation, the electronic device can cancel the display of the third light effect. That is, the area where the first control is located can be used as the first area when the next first operation occurs. Alternatively, when the display duration of the third light effect exceeds a display duration threshold, the electronic device cancels the display of the third light effect.

[0250] By displaying a third light effect, the user can be prompted with the result of the first operation, making the result more intuitive.

[0251] In the embodiments of this application, such as Figure 15 As shown in (a) or (b), the color of the third light effect 1512 can be the same as the color of the second light effect 1511.

[0252] To enhance the visual connection between the third light effect and the selected first control, the color of the third light effect can also be determined based on the color of the display elements of the first control, wherein the display elements include at least one of the following: an image or text.

[0253] When the first control is selected in the first operation, the electronic device acquires the display elements of the first control and extracts the color of the third light effect from the display color of the first control. For example, when the icon of the first control is a vector icon, the electronic device uses the fill color of the icon of the first control as the color of the third light effect. As another example, when the icon of the first control is a bitmap icon, the electronic device determines the color of the third light effect based on the colors of each area within the icon of the first control. Alternatively, the electronic device acquires the color values ​​of multiple pixels in the first control and performs clustering calculations on these color values ​​to obtain cluster center values; the electronic device can then use the color corresponding to the cluster center value as the color of the third light effect. In this case, the sum of the numerical differences between the cluster center value and the multiple color values ​​is minimized; in this scenario, the color of the third light effect can be a color not included in the icon of the first control, but the color of the third light effect will be more harmonious with the color of the icon of the first control.

[0254] After the electronic device acquires the color of the third lighting effect, it can create a static light source and adjust it to match the lighting effect. For example, the adjustment may include at least one of the following: Keep the hue of the third light effect unchanged.

[0255] Reduce transparency by 70-80% to avoid overly saturated colors that can cause visual fatigue.

[0256] Brightness is increased by 30-50%, giving static light sources a soft glow rather than simple colored illumination.

[0257] For example, such as Figure 16 As shown in (a) or (b), the color of the third light source 1611 is a pale version of the icon color 1612. For example, a blue icon corresponds to a pale blue halo.

[0258] Optionally, when the display elements of the first control include icons and text, the electronic device can also weight the icon color and text color to obtain the color of the third light effect. Alternatively, the electronic device can create a first static light source for the icon color and a second static light source for the text color, and obtain the color of the third light effect by superimposing the first and second static light sources.

[0259] In the embodiments of this application, the shape of the first light effect may also change during the movement of the first light effect. For example, the shape of the first light effect may be stretched during the movement to simulate the deformation effect of the light effect during the movement in the real physical world.

[0260] In one possible implementation, an electronic display first interface is provided; the first interface displays a first control and a second control; in response to a first operation on the first control, a first light effect is displayed in a target area; the target area is determined according to the operation position of the first operation, and includes part or all of the area where the first control and the area where the second control are located within the target area; in the first light effect, the brightness in the area where the first control is located is higher than the brightness in the area where the second control is located. Optionally, the first control and the second control can be located in the same container or in different containers, and the first operation is a touch operation such as a click operation or a swipe operation. For details not described in this embodiment, please refer to the descriptions of Situations 1 and 2 above.

[0261] This application embodiment can also adjust the material effect of the first container to make the first container display a light-sensitive material effect. Optionally, in this application embodiment, controls in the user interface, such as controls, buttons, search boxes, etc. in the container, can also display a light-sensitive material effect. For specific implementation methods, please refer to the following description of the first container, which will not be repeated here.

[0262] Typically, the first interface also displays text, images, videos, and other content, and the first container may obscure or partially obscure the content displayed on the first interface. In this embodiment, the transparency of the first container is greater than 0 and less than 100%, allowing the portion of the content overlapping with the first container to be displayed within the first container. This method achieves the effect of the displayed content penetrating the first container, thereby expanding the readable area of ​​the first interface.

[0263] Figure 17 This is a schematic diagram illustrating the transparency effect of a first container provided for an exemplary embodiment of this application. Exemplarily, Figure 17 As shown in (a), (b), (c) and (d), the first container also displays part of the content of the first interface.

[0264] For example, the clarity of the content displayed within the first container is lower than the clarity of the unobstructed content displayed on the first interface. This simulates the effect that the first container is close to the user, while the portion of the content visible through the first container is far from the user, thus conforming to the visual principle of "nearer objects appear larger, farther objects appear smaller," and achieving the visual effect that the container floats above the content displayed on the first interface. This helps to enhance the realism and three-dimensionality of the first container.

[0265] In one possible implementation, the electronic device is further configured to acquire material parameters of the first container; wherein the material parameters indicate the degree to which the first container is transparent to the displayed content on the first interface; and the first container is displayed according to the material parameters of the first container. Exemplarily, the material parameters include at least one of the following: transparency, refractive index, edge blur, etc. The refractive index indicates the angle of refraction when the displayed content passes through the first container, and the edge blur indicates the degree of shadow at the edge of the first container, thereby enhancing the three-dimensional floating effect of the first container on the first interface.

[0266] In this embodiment of the application, the electronic device obtains the material parameters of the first container, including: in response to a third operation for configuring parameters, the electronic device obtains the material parameters of the first container; or, the electronic device obtains ambient brightness information and determines the material parameters of the first container based on the ambient brightness information.

[0267] For example, such as Figure 18 As shown in (a) or (b), the electronic device provides at least three material parameters: High-power mode: used to simulate the refraction effect of light in crystals, creating strong visual tension by enhancing the contrast of highlights and the splitting of edge light.

[0268] The medium mode uses Gaussian blur combined with an intelligent brightening and darkening algorithm, and generates fine-tuning of brightness and darkness based on the background content. At the same time, it enhances spatial boundary perception by simulating the Fresnel effect through ambient light outlining.

[0269] The soft mode is used to create a uniform frosted texture and reduce visual noise.

[0270] For example, in the configuration interface of the first container in the electronic device, selection controls for the three types of transparency mentioned above can be displayed. The third operation for configuring parameters can be implemented as a click operation on the selection control for the target transparency. The target transparency can be any one of the three types of transparency mentioned above. The second operation for configuring parameters in this embodiment can also be implemented in the same way.

[0271] In this embodiment, the display position of the first container on the first interface is adjustable. For example, as shown... Figure 19 As shown in (a), the first container 1910 can be displayed centered in the first interface; subsequently, the electronic device responds to a sliding operation within the sensing area of ​​the first interface, moving the first container in the direction of the sliding operation. Figure 19 As shown in (b), when the sliding operation ends, the electronic device is in the adjusted position (e.g., Figure 19 The first container is displayed on the right side of the first interface shown in (b).

[0272] The first container can be displayed within the sensing area of ​​the first interface. For example, the first container is displayed below the first interface, and the sensing area of ​​the first interface can be a rectangular area starting from the lower boundary of the first interface.

[0273] In this embodiment, the movement of the first container by the electronic device includes any one of horizontal movement, vertical movement, or superimposed movement. Superimposed movement is diagonal movement, which is obtained by superimposing horizontal and vertical movements. In order to reduce the obstruction of other controls or containers in the first interface after the first container is moved, the movement of the first container can be horizontal or vertical, and there are no other controls or containers on the movement path of the first container.

[0274] In this embodiment, the swipe operation can be configured on electronic devices with a screen width greater than or equal to a width threshold. The width threshold is preset, for example, it could be equal to 600 vp. When a user holds an electronic device with a large screen width (such as a tablet or foldable phone) with one hand, if the first container is displayed centered on the first interface, the user's fingers are limited, making it difficult to operate controls located at the far end of the holding hand within the first container. For example, if the user holds the electronic device with their right hand, at least one operation control displayed relatively to the left within the first container is difficult for the user's right-hand fingers to reach. In this scenario, the swipe operation can adjust the difficult-to-operate area of ​​the first container to an easily operable area, facilitating subsequent operation of the controls within the first container.

[0275] The following example, using the first container as the bottom tab and its horizontal movement, illustrates how to determine the display position of the first container. The display position of the first container is related to the position of the sliding operation, and can be determined using any of the following methods 1-3.

[0276] Method 1: The center point of the first container is the position for the sliding operation.

[0277] For example, when the operation position of the sliding operation is (x1, y1), the electronic device moves the center point of the first container to (x1, y1), which helps to quickly adjust the display position of the first container to the position desired by the user, thus helping to shorten the operation time of the sliding operation.

[0278] Method 2: The center point of the first container is mapped based on the operation position of the sliding operation. In Method 2, the electronic device can determine the mapping ratio based on the horizontal coordinate of the operation position of the sliding operation and the width of the electronic device's display screen; then, the electronic device determines the horizontal offset of the first container based on the mapping ratio.

[0279] The horizontal coordinate of the sliding operation position is determined according to the screen coordinate system, which can be based on the lower left corner of the electronic device's display screen as the origin, with the positive direction of the x-axis pointing horizontally to the right. The horizontal offset of the first container is the offset relative to its original display position.

[0280] For example, the electronic device multiplies the mapping ratio by the movement threshold of the first container to obtain the horizontal offset of the first container. Furthermore, the electronic device can also multiply the horizontal offset of the first container by a damping coefficient to obtain an adjusted horizontal offset. The damping coefficient is used to control the movement sensitivity of the first container as it follows the sliding operation.

[0281] The damping coefficient can be a decimal in the preset range of (0,1). The larger the damping coefficient, the more sensitive the first container is to the sliding operation and the better the responsiveness. Conversely, the smaller the damping coefficient, the slower the first container is to the sliding operation and the smoother the movement of the first container.

[0282] For example, if the width of the electronic device's display screen is 1000, the horizontal coordinate of the sliding operation position is 750, the movement threshold of the first container is 600, and the damping coefficient is 0.8, then the mapping ratio is 0.75, and the horizontal offset is 360 (0.75). 600 0.5).

[0283] This method helps improve the smoothness of container movement, and by determining the horizontal offset based on the operation position of the sliding operation, it helps to quickly move the container to the position desired by the user, thereby helping to shorten the operation time of the sliding operation.

[0284] Method 3: The center point of the first container is determined based on the sliding distance of the sliding operation.

[0285] For example, the electronic device determines the horizontal offset of the first container based on the horizontal sliding distance of the swipe operation. For instance, the horizontal offset of the first container is equal to the horizontal sliding distance of the swipe operation multiplied by a sliding coefficient. The sliding coefficient can be greater than 1 to reduce the sliding distance of the swipe operation when moving the first container to the user's desired position, thereby helping to improve the efficiency of adjusting the display position of the first container.

[0286] This embodiment demonstrates how a simple swipe operation can "summon" the first container to an area easily accessible to the user, thus resolving the issue of poor accessibility of controls within the first container during certain grip positions, making it difficult for users to touch the sensor areas of the controls. This improves the ease of operation of controls within the first container without requiring a change in the user's grip posture. Furthermore, it supports personalized configuration of the container's display position, allowing it to dynamically adapt to the operational needs of different users, achieving dynamic adaptation of the container's display position to user requirements.

[0287] To further improve the accessibility of controls within the first container, the electronic device also supports adjusting the display layout of at least two controls included in the first control.

[0288] Optionally, when the sliding operation is performed within the folded area of ​​the container, the method further includes: switching at least two controls in the first container from a first display layout to a second display layout. These at least two controls include a first control and a second control. Specifically, in the first display layout, the number of controls displayed horizontally (or vertically) within the first container is less than the number of controls displayed horizontally (or vertically) within the first container in the second display layout.

[0289] For example, the first container contains 6 controls. In the first display layout, the 6 controls are displayed side by side within the first container. In the second layout, the 6 controls can be displayed in separate rows within the first container, such as 6 controls displayed in two rows, with 3 controls in each row. For example, the width of the first container is 328 vp. After switching the display layout of the controls in the first container, the width of the first container can be reduced to 164 vp or less.

[0290] In this embodiment, after the first container moves from the center of the first interface to the edge of the first interface, the electronic device reduces the display width of the first container by changing the display layout of at least two controls within the first container. This helps to concentrate the controls within the first container within the area reachable by the user's fingers. Thus, it helps to improve the operability and accessibility of the controls within the container.

[0291] In one possible implementation, the display form of the first container includes at least one of the following: an overall display form, a folded form, or a combined display form; wherein, in the combined display form, the first container is displayed as at least two sub-containers, and the areas of any two sub-containers do not overlap.

[0292] Optionally, the overall display form includes, for example: Figure 20 The centered shape shown in (a) is as follows: Figure 20 The loose morphology shown in (b) and as Figure 20 (c) shows the layered structure.

[0293] In the centered view, the multiple controls in the first container are more closely packed, and the display size of the first container is smaller.

[0294] In the loose configuration, the distance between multiple controls in the first container is relatively wide, and the display size of the first container is larger, which helps to reduce the gap between the first container and the edge of the first interface.

[0295] Optionally, the combined display form includes, for example: Figure 20 The upper and lower combination shown in (c) and as shown in Figure 20 (e) shows a left-right combination. In a top-bottom combination, at least two child containers are stacked vertically. In a left-right combination, at least two child containers are arranged horizontally. For example, the number of controls contained in the at least two child containers may be equal or unequal.

[0296] Optionally, such as Figure 20 The folding configuration shown in (d) is such that the controls in the first container are folded, only a portion of the controls are displayed in the first container, and the display size of the first container is reduced. This allows the display area to be left for other controls, containers, or display content in the first interface, which helps to reduce the obstruction of the display content in the first interface by the first container.

[0297] It is understood that, in order to achieve the aforementioned functions, each of the devices includes corresponding hardware structures and / or software modules for performing each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, the present invention can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present invention.

[0298] Based on the same concept, embodiments of this application also provide an electronic device, such as... Figure 21 As shown, the device includes a processor 1001, a memory 1002, a transceiver 1003, and a display screen 1004. For example, the aforementioned devices can be connected via one or more communication buses. The one or more computer programs are stored in the memory 1002 and configured to be executed by the processor 1001. These computer programs include instructions that can be used to cause the electronic device to perform the steps executed by the electronic device in the methods described in the above embodiments.

[0299] For example, the processor 1001 described above can specifically be... Figure 1 The processor 110 shown. The memory 1002 described above can specifically be... Figure 1 The internal memory 101 shown and / or external memory connected to the electronic device. Specifically, the transceiver 1003 described above can be... Figure 1 The mobile communication module 150 and / or wireless communication module 160 are shown. The aforementioned display screen 1004 can specifically be... Figure 1 The display screen 194 shown is not limited in this embodiment of the application.

[0300] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)). Where there is no conflict, the solutions in the above embodiments can be combined.

[0301] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0302] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0303] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0304] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0305] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A display method, characterized in that, The method includes: A first interface is displayed; the first interface displays a first control and a second control; the first control and the second control are located in a first container; in response to a first operation in the first container, a first light effect is displayed in a first target area of ​​the first interface; the first target area is determined according to the first operation position of the first operation; wherein, the first operation position is the real-time operation position of the first operation, and when the first operation is applied to the first control, the first target area includes the area where the first control is located, and part or all of the area where the second control is located; in the first light effect, the brightness of the area where the first control is located is higher than the brightness of the area where the second control is located.

2. The method according to claim 1, characterized in that, The first light effect includes: In the first target area, the brightness of the first operating position is the highest, and the brightness decreases as it moves further away from the first operating position; or, in the first target area, the brightness of the first edge of the first container is the highest, and the brightness decreases as it moves further away from the first edge, where the first edge is the projection position of the first operating position onto the edge of the first container.

3. The method according to claim 1 or 2, characterized in that, The method further includes: When the first operation is applied to the first control, a first animation effect is displayed, showing the second control moving closer to the first control; when the first operation ends, a second animation effect is displayed, showing the second control returning to its original position.

4. The method according to claim 3, characterized in that, The number of controls between the first control and the second control is less than or equal to a number threshold; or, the distance between the first control and the second control is less than or equal to a first distance threshold.

5. The method according to claim 1, characterized in that, The first distance threshold is determined based on the operation time of the first operation.

6. The method according to any one of claims 3-5, characterized in that, The movement distance of the second control is determined based on at least one of the following: the distance between the original position of the second control and the position of the first operation position, the direction of the first control relative to the second control, or the operation time.

7. The method according to any one of claims 1-6, characterized in that, The method further includes: when the operation position of the first operation changes from the first operation position to the second operation position, adjusting the display layout of the first container on the first interface; wherein the display layout includes at least one of the following: display size or display position.

8. The method according to claim 7, characterized in that, Adjusting the display layout of the first container on the first interface includes: determining the display parameters of the first container according to the second operation position; wherein the display parameters of the first container include scaling parameters of the display size of the first container, or offset parameters of the display position of the first container; and adjusting the display layout of the first container on the first interface according to the display parameters of the first container.

9. The method according to claim 8, characterized in that, Determining the display parameters of the first container based on the second operating position includes: determining the display parameters based on the distance between the second operating position and a reference point of the first container.

10. The method according to any one of claims 7-9, characterized in that, The method further includes: when the first operation ends, displaying a third dynamic effect of the first container dynamically expanding and contracting until the first container returns to its original display layout.

11. The method according to any one of claims 1-10, characterized in that, The method further includes: in response to the first operation, determining the effective area of ​​the first light effect based on the first operation position; determining the first target area based on at least one control displayed within the effective area of ​​the first light effect; and determining the brightness of the area where the at least one control is located based on the distance between the at least one control and the first operation position.

12. The method according to any one of claims 1-11, characterized in that, The first interface also displays a third control, which is located in the second container; the method further includes: in response to a second operation on the third control, displaying a second light effect in a second target area of ​​the first interface; the second target area is determined according to the operation position of the second operation, and when the first control is within the influence range of the second light effect, the second target area includes the area where the third control is located, as well as part or all of the area where the first control is located; in the second light effect, the brightness of the area where the third control is located is higher than the brightness of the area where the first control is located.

13. The method according to claim 12, characterized in that, The method further includes: reducing the brightness of the second light effect when the operation position of the second operation exceeds the area where the third control is located and is far away from the third control.

14. The method according to any one of claims 1-13, characterized in that, The transparency of the first container is greater than 0 and less than 100.

15. The method according to claim 14, characterized in that, The method further includes: in response to a third operation for configuring parameters, obtaining the transparency of the first container; or, obtaining ambient brightness information, determining the transparency of the first container based on the ambient brightness information; and displaying the first container in a first interface based on the transparency of the first container.

16. The method according to any one of claims 1-15, characterized in that, The display form of the first container includes at least one of the following: an overall display form, or a combined display form; wherein, in the combined display form, the first container is displayed as at least two sub-containers, and the areas of any two sub-containers do not overlap.

17. A display method, characterized in that, The method includes: displaying a first interface; displaying a first control in the first interface, the first control being located in a first container; and displaying a first light effect that moves from a first area of ​​the first container to the operation position of the first operation in response to a first operation on the first control; wherein a second light effect is displayed in the first area.

18. The method according to claim 17, characterized in that, The first interface also displays a second control, which is located in the first container; the first area includes the area where the second control is located.

19. The method according to claim 17 or 18, characterized in that, During the movement from the first region of the first container to the operating position of the first operation, the brightness of the first light effect increases, or the shape of the first light effect changes.

20. The method according to any one of claims 17-19, characterized in that, After displaying a first light effect that moves from the first area of ​​the first container to the operation position of the first operation, the method further includes: displaying a third light effect on the first control; the third light effect being used to indicate that the first operation has selected the first control; wherein the color of the third light effect is the same as the color of the second light effect; or, the color of the third light effect is determined based on at least one of the color of the display element of the first control and the theme color of the first control, wherein the display element includes at least one of the following: an image or text.

21. The method according to any one of claims 17-20, characterized in that, The transparency of the first container is greater than 0 and less than 100.

22. The method according to claim 21, characterized in that, The method further includes: in response to a second operation for configuring parameters, obtaining the transparency of the first container; or, obtaining ambient brightness information, determining the transparency of the first container based on the ambient brightness information; and displaying the first container in a first interface based on the transparency of the first container.

23. The method according to any one of claims 17-22, characterized in that, The display form of the first container includes at least one of the following: an overall display form, or a combined display form; wherein, in the combined display form, the first container is displayed as at least two sub-containers, and the areas of any two sub-containers do not overlap.

24. A display method, characterized in that, The method includes: displaying a first interface; the first interface displaying a first control and a second control; in response to a first operation on the first control, displaying a first light effect in a target area; the target area being determined based on the operation position of the first operation, and the target area being part or all of the area where the first control is located and the area where the second control is located, wherein in the first light effect, the brightness in the area where the first control is located is higher than the brightness in the area where the second control is located.

25. An electronic device, characterized in that, include: A processor, a memory, and one or more programs; wherein the one or more programs are stored in the memory, and the one or more programs include instructions that, when executed by the processor, cause the electronic device to perform the method as described in any one of claims 1-24.

26. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1-24.

27. A computer program product, characterized in that, Includes a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1-24.

Images