Method and electronic device for displaying an interface

Abstract

The application provides a method for interface display and an electronic device. A user interface of the electronic device can include a light source component capable of simulating a light source in a real world to emit light. The light emitted by the light source component can illuminate a surrounding area and other components in the area, enabling visual interaction between the light source component and the other components, and enabling a user to obtain a more realistic interactive experience in a human-computer interaction process.

Description

Technical Field

[0001] This application relates to the field of terminal device software, and more specifically, to a method for displaying an interface and an electronic device. Background Technology

[0002] Visual interactive animations, through dynamic feedback, help users understand the changing logic of human-computer interaction interfaces. For example, transition animations can clearly define hierarchical relationships, while feedback animations can indicate the results of operations and reduce the learning curve for users using electronic devices. A lack of visual animations may lead to difficulties in understanding or perceptual lag for users, such as abrupt page transitions or unresponsive operations, severely impacting the user experience.

[0003] How to provide visual interactive animations that better conform to the laws of motion in the real world is a question worth considering. Summary of the Invention

[0004] This application provides a method for displaying an interface and an electronic device. The user interface of the electronic device may include a light source component that can simulate the light emitted by a light source in the real world. The light emitted by the light source component can illuminate its surrounding area and other components within the area, realizing visual interaction between the light source component and other components. Users can obtain a more realistic interactive experience during human-computer interaction.

[0005] In a first aspect, a method for displaying an interface is provided, applied to an electronic device. The method includes: displaying a first interface, the first interface including a first component and a second component, the brightness of the first component being a first brightness, the brightness of the second component being a second brightness, and the first brightness being greater than the second brightness; the first interface further including a reference area located on the outer periphery of the first component, the brightness of the reference area being a reference brightness, the reference brightness being greater than the second brightness and less than the first brightness; receiving a first operation applied to the first component; and displaying a second interface, in which the brightness of the first component in the second interface is a third brightness, the third brightness being different from the first brightness.

[0006] In one possible implementation, the brightness of a component can be understood as characteristic values ​​such as the mean and median of the brightness in different regions of the component. The brightness in different regions of the component can be the same or different. In other words, the first brightness, the second brightness, and the reference brightness can be understood as characteristic values ​​of the brightness of the first component, the second component, and the reference region, respectively.

[0007] As a possible example, the brightness of different areas of the first component in the first interface is the first brightness, and the first component roughly presents the uniform light emission effect of an acrylic light-emitting panel in the real world.

[0008] In one possible implementation, the first component may have an illuminated area, within which part or all of the reference region and part or all of the second component may be located. The reference region is at least partially located between the first and second components.

[0009] In one possible implementation, the operator acting on the first component may include any of the following: a finger, a mouse, a stylus, a remote control, etc.

[0010] In one possible implementation, the third brightness can vary depending on the duration, area, and force of the first operation. For example, the first operation could be a pressing operation, a voice operation, etc.

[0011] In one possible implementation, the area of ​​the reference region in the second interface will also change.

[0012] In one possible implementation, the first interface can be the interface of the control center of the electronic device, and the first component and the second component can be two buttons of the control center.

[0013] In this technical solution, the brighter first component can illuminate the reference area. When the second component is within the illumination range of the first component, it can also be illuminated by the first component. This incorporates visual interaction between different components on the user interface, conforming to the motion laws of the real world. When the user operates the first component, its brightness changes, the area of ​​the reference area changes, and the impact of the first component on the display effect (such as brightness) of the second component also changes. This enriches the feedback of the electronic device to user operations and improves the user experience.

[0014] Furthermore, this technical solution utilizes light effects on the display interface of electronic devices to highlight interface elements, create an atmosphere, enhance the interaction between different interface elements, and improve the interface's sophistication and immersion. When users interact with interface elements, the light effects enhance the sense of hierarchy among different elements, which is beneficial for improving human-computer interaction efficiency and user experience. By enhancing the interaction between different interface elements during operation, users can more clearly perceive the feedback from the electronic device to their actions, thus reducing the learning curve for users.

[0015] In conjunction with the first aspect, in some implementations of the first aspect, the brightness of the reference region decreases in a direction away from the first component.

[0016] In one possible implementation, the brightness at different locations within the reference area is negatively correlated with the distance between that location and the first component.

[0017] The intensity of light propagating outward is negatively correlated with the distance from the light source. In this technical solution, the brightness of the reference area is set according to the rule that it is brighter closer to the first component and darker farther away from the first component, which more realistically simulates the light emission of light sources in the real world. The human-computer interaction experience provided by the electronic device is more realistic, the display interface of the electronic device is more refined, and the user can more clearly perceive the feedback of the electronic device to the user's operation, which helps to reduce the learning cost of the user when using the electronic device.

[0018] In conjunction with the first aspect, in some implementations of the first aspect, the reference region includes a halo surrounding the first component.

[0019] In some scenarios, a halo effect can also be called a glow effect or flood effect, used to simulate the effect of light scattering around a light source.

[0020] Generally, a halo can be understood as a blurred area surrounding a light source. In this case, the halo represents the effect of light emitted from the surrounding components on the illuminated area. The halo's display effect can be configured by the application developer; in other words, the aforementioned reference area can be displayed after blurring, or it can be displayed directly without blurring.

[0021] Displaying a halo within the reference area more realistically simulates the emission effect of light sources in the real world. The first component displayed on the interface of the electronic device is closer to a light source in the real world, resulting in a more realistic and refined interface display.

[0022] In conjunction with the first aspect, in some implementations of the first aspect, the first operation is a pressing operation, the brightness of the first sub-region of the first component in the second interface is the fourth brightness, the brightness of the second sub-region of the first component is the fifth brightness, the fourth brightness is less than the fifth brightness, wherein the first sub-region is the area of ​​action of the pressing operation, and the second sub-region is located on the periphery of the first sub-region.

[0023] In one possible implementation, the fourth brightness is less than the first brightness.

[0024] In one possible implementation, the second sub-region is located at the edge of the first component, and the fifth brightness is equal to the first brightness.

[0025] The brightness of the pressed area is adjusted to darken, similar to the feedback effect of pressing a surface light source (such as an acrylic light panel) in the real world, conforming to the laws of motion in the real world. During the user's operation of the first component, the electronic device's interface can present a display effect similar to that of pressing a surface light source in the real world, resulting in a more realistic and refined interface display.

[0026] In conjunction with the first aspect, in some implementations of the first aspect, the brightness of the third sub-region on the first component in the second interface is the sixth brightness, which is greater than the fourth brightness and less than the fifth brightness, wherein the third sub-region is located between the first sub-region and the second sub-region.

[0027] In one possible implementation, the first component on the second interface displays a gradual brightness change effect.

[0028] In one possible implementation, the first component on the second interface displays a water ripple effect.

[0029] In one possible implementation, the first component on the second interface presents a display effect of multiple rings of light with different brightness levels nested in sequence.

[0030] By setting different brightness levels in areas of the first component at different distances from the pressing area, the brightness of different areas can correspond to the deformation of different areas of an acrylic light-emitting panel after being pressed in the real world. This solution more realistically simulates the feedback effect of pressing a surface light source in the real world.

[0031] In conjunction with the first aspect, in some implementations of the first aspect, the brightness of the reference area in the second interface is different from the reference brightness.

[0032] In one possible implementation, the brightness of the reference area in the second interface is less than the reference brightness.

[0033] When the brightness of the first component, which acts as the light source, changes, the brightness of its surrounding area also changes. This display effect is more in line with the motion laws of the real world, enriches the interaction between the first component and other interface elements, and helps to improve the user experience. Users can more clearly perceive the feedback of electronic devices to their operations, which helps to reduce the learning cost for users when using electronic devices.

[0034] In conjunction with the first aspect, in some implementations of the first aspect, the second component includes a first edge located within a reference region, the brightness of the first edge being greater than the brightness of the other portions of the second component excluding the first edge.

[0035] In one possible implementation, the first edge faces the first component.

[0036] In some scenarios, the above display effect can be referred to as edge glow or contour glow.

[0037] Increasing the brightness of the edge of the second component facing the first component can simulate the display effect of the second component being illuminated by the first component, and can more realistically reflect the display effect of the first component illuminating the surrounding area.

[0038] In conjunction with the first aspect, in some implementations of the first aspect, the first edge includes a first segment and a second segment, the first segment being closer to the first component and the second segment being farther away from the first component, and the brightness of the first segment being greater than the brightness of the second segment.

[0039] The portion of the first edge closer to the first component is brighter, while the portion farther from the first component is darker, which better conforms to the attenuation law of light propagation, resulting in a more refined display effect.

[0040] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes: receiving an operation of dragging the first component closer to the second component; displaying a third interface in which the brightness of the first edge is increased; and / or receiving an operation of dragging the first component away from the second component; displaying a fourth interface in which the brightness of the first edge is decreased.

[0041] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes: receiving an operation to drag the second component closer to the first component, thereby displaying the second component with a brightness value higher than the second brightness; or receiving an operation to drag the second component away from the first component, thereby displaying the second component with a brightness value lower than the second brightness.

[0042] Depending on the distance between the first component and the second component, the degree to which the second component is illuminated by the first component varies. This technical solution simulates the movement of light sources closer to or further away from the first edge in the real world by setting different brightness levels at different distances.

[0043] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes: receiving an operation to move the first component from the first region to the second region; displaying a fifth interface in which the brightness of the first region is dimmed and the brightness of the second region is brightened.

[0044] This technical solution simulates the display effect of a moving light source in the real world, where areas closer to the light source are illuminated and areas farther away from the light source are darkened.

[0045] In conjunction with the first aspect, in some implementations of the first aspect, the first component is a sliding adjustment component, which includes a slider, and the area of ​​the reference region in the first interface is a first area. The method further includes: receiving an operation of dragging the slider; displaying a seventh interface, in which the area of ​​the reference region is a second area, which is different from the first area.

[0046] In one possible implementation, the direction of the dragging operation of the slider is a first direction, and the second area is greater than the first area; or, the direction of the dragging operation of the slider is the opposite direction of the first direction, and the second area is less than the first area.

[0047] In other words, the above scheme can also be expressed as: receiving an operation to drag the slider along a first direction; displaying a seventh interface, in which the area of ​​the reference region is greater than the area of ​​the reference region in the first interface; and / or receiving an operation to drag the slider in the opposite direction of the first direction; displaying an eighth interface, in which the area of ​​the reference region is smaller than the area of ​​the reference region in the first interface.

[0048] In one possible implementation, the slider component can be a volume control button or a brightness control button.

[0049] By adjusting the length of the slider, the area of ​​the light source component changes, and correspondingly, the range illuminated by the light source component also changes. This technical solution more realistically simulates the change in the illumination range as the light source is adjusted in the real world.

[0050] In conjunction with the first aspect, in some implementations of the first aspect, the first component is a segmented button component, which includes a first button item and a second button item. The method further includes: receiving an operation to select the second button item; displaying a ninth interface, in which the brightness of the second button item is the first brightness, and the brightness of the first button item is less than the first brightness.

[0051] In this technical solution, the selected button item in the segmented button component is used as a light source component, which can more accurately reflect the user's operation.

[0052] In conjunction with the first aspect, in some implementations of the first aspect, the first component is a quick switch component, and before displaying the first interface, the method further includes: receiving an operation to turn on the quick switch component.

[0053] In one possible implementation, the first component is a quick switch component in the control center or lock screen interface of an electronic device.

[0054] In conjunction with the first aspect, in some implementations of the first aspect, the operation of turning off the shortcut switch component is received; a sixth interface is displayed, in which the brightness of the first component and the brightness of the second component are the same.

[0055] In this technical solution, the light source attribute is activated when the quick switch component is turned on, and the light source attribute is deactivated when the quick switch component is turned off. The quick switch component is similar to a light source switch in the real world, and the interactive feedback provided by the electronic device is more realistic and clear.

[0056] For detailed explanations and descriptions of the beneficial effects of the following technical solutions, please refer to the relevant content in the first aspect; they will not be repeated hereafter.

[0057] In a second aspect, an electronic device is provided, including a memory and a processor, the memory storing computer program instructions, the processor executing the program instructions to cause the electronic device to implement the methods of the first aspect and any possible implementation thereof.

[0058] Thirdly, a vehicle is provided, including a memory and a processor, the memory storing computer program instructions, the processor executing the program instructions to cause an electronic device to implement the methods of the first aspect and any possible implementation thereof.

[0059] Fourthly, a display device is provided, the display device including functional modules for implementing the methods of the first aspect and any possible implementation thereof.

[0060] Fifthly, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a computer, enables the implementation of the methods in the first aspect and any possible implementation thereof.

[0061] In a sixth aspect, a computer program product is provided, the computer program product including computer program code, which, when run on a computer, causes the methods in the first aspect and any possible implementation thereof to be executed.

[0062] In a seventh aspect, a computer-readable storage medium is provided that stores computer program code, which, when run on a computer, causes the methods in the first aspect and any possible implementation thereof to be executed.

[0063] Eighthly, a chip is provided, including a processor for reading instructions stored in a memory, wherein when the processor executes the instructions, the chip implements the methods of the first aspect and any possible implementation thereof. Attached Figure Description

[0064] Figure 1 This is a schematic diagram of the hardware architecture of an electronic device provided in an embodiment of this application.

[0065] Figure 2 This is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application.

[0066] Figure 3 This is a schematic diagram of an interface display method provided in an embodiment of this application.

[0067] Figure 4 This is a schematic diagram of another interface display method provided in an embodiment of this application.

[0068] Figure 5 This is a schematic diagram of various methods for displaying tapped areas provided in the embodiments of this application.

[0069] Figure 6 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0070] Figure 7 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0071] Figure 8 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0072] Figure 9 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0073] Figure 10 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0074] Figure 11 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0075] Figure 12 and Figure 13 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0076] Figure 14 This is a flowchart of a method for displaying an interface provided in an embodiment of this application.

[0077] Figure 15 This is a flowchart of another interface display method provided in the embodiments of this application.

[0078] Figure 16 This is a flowchart of another interface display method provided in the embodiments of this application.

[0079] Figure 17 This is a schematic diagram of another interface display method provided in the embodiments of this application.

[0080] Figure 18 This is a schematic block diagram of an interface display device provided in an embodiment of this application.

[0081] Figure 19 This is a schematic block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0082] The technical solutions in this application will now be described with reference to the accompanying drawings.

[0083] The terminology used in the following embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to also include expressions such as “one or more,” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one, two, or more than two. The term “and / or” is used to describe the relationship between related objects, indicating that three relationships may exist; for example, A and / or B can indicate: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character “ / ” generally indicates that the preceding and following related objects are in an “or” relationship.

[0084] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "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.

[0085] The methods provided in this application can be applied to mobile phones, tablets, wearable devices, in-vehicle devices (such as in-vehicle displays), augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), and large-screen electronic devices such as smart screens. This application does not impose any restrictions on the specific type of electronic device.

[0086] For example, Figure 1A schematic diagram of the structure of electronic device 100 is shown. Electronic device 100 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, antenna 1, 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.

[0087] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0088] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0089] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0090] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0091] 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.

[0092] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0093] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0094] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0095] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, external memory, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0096] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0097] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with a tuning switch.

[0098] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.

[0099] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0100] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0101] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniature LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1.

[0102] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0103] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0104] Electronic device 100 can implement audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0105] 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 may be located in the processor 110, or some functional modules of the audio module 170 may be located in the processor 110.

[0106] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0107] The electronic device provided in this application embodiment can run an operating system (OS). This operating system can be various operating systems currently used in the industry, such as an operating system based on OpenHarmony, such as HarmonyOS; or other operating systems such as Android. TM An operating system can refer to the iOS mobile operating system; it can also refer to various open-source operating systems or their derivatives, such as Linux OS and other embedded operating systems; or it can refer to future new operating systems, such as AI operating systems based on artificial intelligence. 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 interactions. In electronic devices, the operating system occupies a pivotal position, connecting to the physical hardware layer below and providing a runtime environment for application software above.

[0108] 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 is a suite of software, or frameworks, that provides various services to application developers, such as databases, multimedia, and graphics, or capabilities like distributed scheduling and system expansion. For example, the middleware layer can also be broadly divided into 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 core capabilities of the system, providing services to applications through the framework layer. The kernel layer is the layer between hardware and software. The kernel layer can 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.

[0109] The basic functions of 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, exemplarily, Figure 2 The architecture of HarmonyOS is illustrated, and those skilled in the art can deduce the implementation of the embodiments of this application under other specific operating systems, such as Android. TM Implementation under the operating system.

[0110] The software architecture of electronic devices 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. The layers communicate with each other through software interfaces. System functions can be tailored, added, or combined at the subsystem level depending on the deployment scenario of different device forms. Each subsystem can also be tailored, added, or combined at the functional level.

[0111] The Kernel Abstraction Layer (KAL) provides basic kernel capabilities to 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.

[0112] 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, etc.

[0113] 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.

[0114] 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:

[0115] The system's basic capability subsystems provide fundamental capabilities for the operation, scheduling, and migration of distributed applications across multiple devices. For example, they may include distributed soft bus, distributed data management, distributed task scheduling, and the Ark multi-language runtime. They may also include multi-modal input subsystems, graphics subsystems, security subsystems, and AI subsystems.

[0116] Basic software service subsystems: provide common and general software services; for example, event notification subsystem, telephone service subsystem, multimedia subsystem, etc.

[0117] Enhanced software service subsystem suite: Provides differentiated capability-enhancing software services for different devices; for example, it may include proprietary business subsystems for smart screens, wearable devices, and IoT devices.

[0118] Hardware service subsystem set: provides hardware services; for example, it 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.

[0119] 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.

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

[0121] 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 RPC (Remote Procedure Call) and other communication capabilities.

[0122] 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.

[0123] The framework layer provides application programming interfaces and programming frameworks for applications in the application layer. Examples include the ArkUI framework (which provides a complete infrastructure for UI development 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.

[0124] 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. Examples include: Audio API (audio service), Push API (push service), and Account API (account service).

[0125] Applications can include system apps and extended / third-party apps. System apps can include the desktop, control bar, settings, contacts, phone, camera, etc., while extended / third-party apps can include social apps, travel apps, etc.

[0126] like Figure 3 The diagram illustrates a method for displaying an interface according to an embodiment of this application, wherein the schematic diagram is located on the left side. Figure 3-1 An interface 10a of a desktop application on an electronic device (such as a mobile phone) is shown. This interface 10a can display icons for one or more applications, such as icon 11 for the "Health" application. In response to a user pressing icon 11, the electronic device can display a diagram on the right. Figure 3-2 The interface shown is 10b.

[0127] In interface 10b, the electronic device highlights icon 11. Specifically, the electronic device can blur the icon 11 in areas other than the area where it is located on interface 10b, thereby reducing the visibility of icons and other interface elements such as icons of other applications on interface 10b, or in other words, only icon 11 is visible on interface 10b.

[0128] Figure 3 In the illustrated interaction scheme, the electronic device highlights the icon for user interaction, while blurring all other content to make the user ignore this uninterrupted information as much as possible. This scheme ignores the interaction between the interacted and uninterrupted objects, which contradicts the visual interaction based on the laws of motion in the real world.

[0129] Figure 4The illustration shows another interface display method provided in this application embodiment. Components on the interface of the electronic device can simulate light sources in the real world, propagating light into the vicinity of their location. When a user operates the component, the display method of the component and the propagation method of the light emitted by the component can change to some extent. For ease of explanation, in the following examples, components possessing the above attributes will be referred to as light source components, and components lacking the above attributes will be referred to as non-light source components.

[0130] It is understood that the naming of the light source component and the non-light source component mentioned above is merely exemplary. In some other examples, the light source component may also be called the light-emitting component, the first component, etc., and the non-light source component may also be called the light-receiving component, the second component, etc.

[0131] Here, we will first explain the meaning of the components on the user interface.

[0132] Components, also known as controls or parts, are the basic units for building graphical user interfaces. They can be viewed as small modules with specific functions and appearances, which can be combined to create complex user interfaces.

[0133] Depending on their function, components can be categorized into basic components, navigation components, input components, display components, and feedback components. For example, basic components may include icons, text, and buttons; navigation components may include tab bars and sidebars; input components may include forms and text boxes; display components may include lists and cards; and feedback components may include dialog boxes and notifications.

[0134] Typically, a component can include one or more interface elements, including but not limited to text, icons, buttons, input boxes, selectors, etc.

[0135] Components can have various attributes, which can be customized by the application developer when using the component. For example, component attributes can include, but are not limited to, shape, behavior, and state. The component's shape can be a circle, square, rounded rectangle, heart, etc.; the component's behavior can be understood as the feedback action the component performs when the user interacts with it, for example, the button component's color might change when the user clicks it; the component's state can include normal state, focused state, hover state, active state, loading state, and disabled state, etc., and components in different states can have different visual appearances and interaction logic.

[0136] For example, Figure 3Icon 11 can be considered a component that contains interface elements such as text and graphics. Its shape is a rounded rectangle. When the user clicks icon 11, icon 11 can be hovered over, and its shape can be slightly enlarged to highlight it.

[0137] In some examples, in addition to the general properties of the components described above, the light source component provided in this application may also have light source properties.

[0138] Here, the light source attribute refers to the component's ability to emit light like a light source in the real world, illuminating its own area and the surrounding area. In other words, a component with a light source attribute is brighter than a component without a light source attribute; the area where a component with a light source attribute is located is brighter than the area where a component without a light source attribute is located; and the area within a certain range near the area where a component with a light source attribute is located is brighter, while the same area near the area where a component without a light source attribute is located is darker.

[0139] For example, such as Figure 4 The illustration in Figure 4-1 As shown, interface 20a includes the aforementioned light source components and non-light source components.

[0140] For example, in interface 20a, the "driving mode" component (hereinafter referred to as component 212) is a light source component, and the "door lock" component (hereinafter referred to as component 214) is a non-light source component.

[0141] Comparatively, component 212 has higher brightness, while component 214 has lower brightness; the rounded rectangular area (area 222) where component 212 is located has higher brightness, while the rounded rectangular area (area 224) where component 214 is located has lower brightness; the rectangular area 226 located to the right of area 222 with a distance of d1 from the right boundary of area 222 has higher brightness, while the rectangular area 228 located to the right of area 224 with a distance of d1 from the right boundary of area 224 has lower brightness.

[0142] For example, in interface 20a, the "One-click Window Closure" component (hereinafter referred to as component 216) is a light source component, and the "Light Language" component (hereinafter referred to as component 218) is a non-light source component.

[0143] Comparatively, module 216 has higher brightness, while module 218 has lower brightness; the rounded rectangular area where module 216 is located has higher brightness, while the rounded rectangular area where module 218 is located has lower brightness; the brightness of a certain range near the area where module 216 is located is higher, while the brightness of the same range near the area where module 218 is located is lower.

[0144] In some examples, light source properties may include one or more sub-properties that can be used to indicate the "emitting" characteristics of the light source component.

[0145] For example, the above sub-attributes may include one or more of the following: color temperature (or color), luminous intensity (light intensity), attenuation amplitude, attenuation distance, etc.

[0146] The color temperature sub-attribute can be used to indicate the color of light emitted by a light source component. For example, if the color temperature is below 3000K, the light emitted by the light source component is a warm color (such as light containing red, orange, or yellow components), and the area where the light source component is located and a certain range around the light source component can display a warm color. For example, if the color temperature is greater than or equal to 3000K and less than or equal to 5000K, the light emitted by the light source component is a neutral color (such as white light), and the area where the light source component is located and a certain range around the light source component can display white. For yet another example, if the color temperature is greater than 5000K, the light emitted by the light source component is a cool color (such as light containing blue components), and the area where the light source component is located and a certain range around the light source component can display a cool color.

[0147] It is understandable that the color temperature sub-attribute of the light source component can determine the color of the light source component itself, the color of the area where the light source component is located, and the color of the area within a certain range near the area where the light source component is located.

[0148] The luminous intensity sub-attribute can be used to indicate the strength of the light emitted by a light source component. One possibility is that a higher luminous intensity value indicates a brighter light source. With the same attenuation level, a higher luminous intensity value means stronger light emitted by the light source, a longer propagation distance, and a larger illuminated area. For example, a low luminous intensity value results in weaker light emitted from the light source, a shorter propagation distance, and a smaller illuminated area; conversely, a high luminous intensity value results in stronger light emitted from the light source, a longer propagation distance, and a larger illuminated area.

[0149] In some examples, the luminous intensity is the same at different locations on the light source component, or in other words, different parts of the light source component emit light uniformly. In other words, the brightness is essentially the same at different locations on the light source component. For example, Figure 4 The illustration in Figure 4-1The light intensity is the same at different positions on components 212 and 216, and the brightness is the same at different positions in the region 222 where component 212 is located, and the brightness is also the same at different positions in the region where component 216 is located. Components 212 and 216 can be regarded as a kind of surface light source, roughly presenting the light-emitting effect of acrylic light-emitting panels in the real world.

[0150] In other examples, the luminous intensity varies at different locations on the light source component; in other words, different parts of the light source component emit light non-uniformly. In other words, the brightness varies at different locations on the light source component. For example, Figure 4 The illustration in Figure 4-2 The light emission intensity varies at different locations on component 216, with weaker intensity in the central area and stronger intensity in the surrounding edge areas. For example, the central area of ​​component 216 may have a stronger light emission intensity, while the surrounding edge areas may have a weaker light emission intensity.

[0151] Typically, a component has a certain area (or, in other words, the component corresponds to a certain area on the user interface). The luminous intensity of a light source component can be understood as the mean, median, or other characteristic values ​​of the luminous intensity of different areas of the component. Similarly, the brightness of a component can be understood as the mean, median, or other characteristic values ​​of the brightness of different areas of the component.

[0152] The attenuation amplitude sub-attribute indicates the magnitude of the decrease in light intensity emitted by a light source component. Under the same luminous intensity, a larger attenuation amplitude value results in a shorter propagation distance for the emitted light and a smaller illuminated area. For example, a fast attenuation amplitude results in a shorter propagation distance and a smaller illuminated area; conversely, a slow attenuation amplitude results in a longer propagation distance and a larger illuminated area.

[0153] In some examples, the attenuation amplitude sub-property has a constant value. In this case, the attenuation amplitude sub-property has the same value at locations at different distances from the light source component.

[0154] In other examples, the value of the attenuation magnitude sub-property varies with the distance from the edge of the light source component; for example, the closer to the edge of the light source component, the larger the value of the attenuation magnitude sub-property.

[0155] For example, the luminous intensity of the light source component is I0, the luminous intensity of the light at a reference point at a distance r from the light source component is I(r), and the attenuation amplitude sub-attribute is F(r).

[0156]

[0157] Where A is a constant greater than zero.

[0158] According to the above formula, the farther away from the light source component, the weaker the light intensity. It can be understood that there exists a distance threshold where, when the distance between the reference point and the light source component exceeds this threshold, the light intensity emitted by the light source component at the reference point is negligible. This distance threshold can be called the attenuation distance. The area enclosed by all reference points corresponding to this attenuation distance can be called the illumination range of the light source component. The brightness within the illumination range is higher than the brightness outside the illumination range, and the brightness outside the illumination range is not affected by the light source component (or, in other words, the influence of the light source component on the brightness of the area outside the illumination range is negligible).

[0159] The attenuation distance sub-attribute can be used to indicate the illumination range of a light source component or the farthest distance the light emitted by the light source component can travel. For example, the attenuation distance sub-attribute can be set to a value of 10 pixels wide. In this case, the light emitted by the light source component can travel as far as 10 pixels wide from its edge, and the illumination range of the light source component is the area enclosed by points extending outward from its edge by 10 pixels.

[0160] refer to Figure 4 The illustration in Figure 4-2 The area 221 enclosed by the dashed line on the periphery of component 212 can be regarded as the illumination range of component 212. The distance between the dashed line and the corresponding position of the outer boundary of component 212 is distance L. Here, distance L can be regarded as an example of the above-mentioned attenuation distance sub-attribute.

[0161] In one possible example, the area between the outer contour of the light source component and the boundary of the illuminated range can be presented with a glare or glow effect or a bloom effect, simulating light scattering to create a soft halo around the light source, enhancing the realism and attractiveness of the scene.

[0162] refer to Figure 4 The illustration in Figure 4-1 For example, components 212 and 216 are both light source components, and both of these components exhibit a faint halo around them. This halo can indicate the attenuation and scattering of light emitted by the light source components as it propagates outward. In addition, the edges of the "trunk" component and the "rear fog light" component facing component 212 have a bright edge. This bright edge can be used to indicate that component 212 illuminates the area around it and other components located in that area. The edges of the "front trunk" component and the "parking assist" component facing component 216 also have a bright edge, which can indicate that component 216 illuminates the area around it and other components located in that area.

[0163] In some scenarios, the aforementioned bright edge can also be referred to as edge illumination or contour illumination. In this application embodiment, the bright edge is the main focus of the description.

[0164] For example, the color temperature sub-attribute of component 212 can be 4000K, and the light it emits is white light. The area where component 212 is located and a certain range around it also appears white. The color temperature sub-attribute of component 216 can be 6000K, and the light it emits is light blue light. The area where component 216 is located and a certain range around it also appears light blue.

[0165] For example, the luminous intensity sub-attribute of both component 212 and component 216 is set to medium, and the brightness of component 212 and component 216 is basically equal.

[0166] For example, the value of the attenuation amplitude sub-property of component 212 is... The light intensity in region 226, which is a distance d1 from the right boundary of component 212, can be

[0167] In some examples, the light source properties of a light source component can change in response to user actions, or in other words, the light source properties of a light source component when the user interacts with the light source component can be different from the light source properties when the user does not interact with the light source component.

[0168] For example, when a user taps the light source component, the light intensity at the tapped location on the light source component weakens, and the brightness dims. For example, as... Figure 4 The illustration in Figure 4-2 As shown, when the user taps point Pt in the area where component 216 is located, the brightness of the area where point Pt is located dims.

[0169] For example, when a user taps the light source component, the light intensity of the tapped area on the light source component weakens, and the brightness dims. For example, as Figure 4 The illustration in Figure 4-2 As shown, the user applies force to area 230 on component 216. Area 230 is roughly circular, and the overall light intensity of area 230 weakens and the brightness dims.

[0170] In some scenarios, areas on a light source component where the light intensity weakens (or the brightness dims) can be interpreted as areas displaying shadows. Therefore, the above solution can also be understood as the appearance of a shadow on the area of ​​the light source component that the user clicks when the user taps it. For example, Figure 4 The illustration in Figure 4-2 When a user taps area 230 on component 216, a shadow appears in area 230, with the shadow being darker in the middle and lighter at the edges.

[0171] Figure 5 The diagrams illustrate three distribution patterns of luminous intensity in the tapped area, with the area circled in dashed lines representing the tapped area.

[0172] In one possible example, such as Figure 5 The illustration in Figure 5-1 As shown, the brightness of the tapped area can gradually change from the center to the edge, and the brightness of the tapped area can gradually increase from the center to the edge, presenting a brightness gradient effect.

[0173] In another possible example, such as Figure 5 The illustration in Figure 5-2 As shown, the central area of ​​the tapped region has the weakest light intensity and the darkest brightness. The outer perimeter of the central area includes multiple annular regions, where the light intensity and brightness gradually decrease and darken away from the central area. The light intensity (or brightness) of the transition area between the central area and the adjacent annular region is greater than that of the two side areas (the central area and the annular region adjacent to the central area), and the light intensity (or brightness) of the transition area between two adjacent annular regions is greater than that of the two side areas (two adjacent annular regions). The tapped area roughly presents a water ripple (or wave) display effect.

[0174] In yet another possible example, such as Figure 5 The illustration in Figure 5-3 As shown, the central area of ​​the tapped region has the weakest light intensity and the darkest brightness. The outer perimeter of the central area includes multiple ring-shaped regions, each with the same light intensity and brightness. Among these ring-shaped regions, those closer to the central area have weaker light intensity and dimmer brightness, while those farther from the central area have stronger light intensity and brighter brightness. The tapped region roughly presents a ring-shaped color gradation display effect.

[0175] exist Figure 5 Among the various distribution methods of light intensity in the tapped areas shown, the tapped areas include multiple different light intensities and brightness levels. The display effect of the tapped areas is closer to the effect of a press-pad-like light source in the real world, making the feedback of electronic devices to user operations more realistic and providing a better user experience.

[0176] Understandable, Figure 5 This application merely provides an example of how the display effect of a light source component changes when the user interacts with it, and does not limit the scope of the application. In some other examples, when the user taps the light source component, the brightness of the tapped area may increase, while the brightness of the area surrounding the tapped area may decrease.

[0177] In addition to clicking on the light source component, users can also drag or move it. When a user drags the light source component to a target location, the interface containing the light source component can roughly present an effect similar to moving a light source in the real world. For example, the area the light source component passes through during its movement will be illuminated, the brightness of the area away from the light source component will be dimmed, and the brightness of the area closer to the light source component will be brightened.

[0178] As an example, such as Figure 6 As shown, when the user presses and drags component 216, component 216 can move from the initial area 232 to the target area 234 according to the user's operation path. During the movement, as component 216 moves away, the brightness of the initial area 232 gradually dims; as component 216 moves closer, the brightness of the target area 234 gradually brightens.

[0179] When component 216 moves closer, the brightness of the area near path 242 increases. For example, when component 216 moves from the initial area 232 to the vicinity of the "front trunk" component, the "front trunk" component and its surrounding area are illuminated, and the brightness increases. When component 216 moves further away, the brightness of the area near path 242 decreases. For example, when component 216 moves from a position near the "headlight control" component to a position near the target area 234, the brightness of the "headlight control" component and its surrounding area gradually decreases.

[0180] In addition, when the user long-presses and drags component 216, the brightness of the tapped area of ​​component 216 will also be displayed. Figure 5 Any of the various display effects shown.

[0181] Similarly, when the user long-presses and drags component 212, the brightness of the area away from component 212 gradually decreases, while the brightness of the area near component 212 gradually increases. In other words, the area traversed by component 212 along its movement path is illuminated when component 212 is near it, and is no longer illuminated when component 212 is far away.

[0182] In some examples, during movement, components 212 and 216 can display not only effects related to the light source properties but also other changes related to component properties. This application does not limit these changes to component properties. For example, during movement, components 212 and 216 may be slightly enlarged. Another example is that during movement, components 212 and 216 may appear to be floating. Yet another example is that during movement, the outer edges of the outlines of components 212 and 216 may be blurred.

[0183] In one possible example, during movement, the light source component may be in a suspended state, and the area illuminated by the light source component may decrease. For example, during the movement of component 212, component 212 is in a suspended state, and its illuminated area is reduced. Figure 4 Region 236 is reduced to region Ar1 (not shown in the figure), and the area of ​​region Ar1 is smaller than the area of ​​region 236.

[0184] As the light source component moves, the electronic device can display an effect similar to a moving light source in the real world. The light source component can affect the display effect of nearby interface elements, making the interactive effect of the electronic device more realistic and improving the user experience.

[0185] Figure 7 The image shows another graphical user interface provided in an embodiment of this application. The interface includes a segmented button component, which is an example of the light source component mentioned above. During the user's adjustment of the segmented button component, the light source properties of the segmented button component can change according to the user's operation.

[0186] refer to Figure 7 The interface includes a segmented button component for "driving modes" (hereinafter referred to as component 252). Component 252 includes a container 252a, a "Eco" button item (hereinafter referred to as button item 252-1), a "Comfort" button item (hereinafter referred to as button item 252-2), a "Sport" button item (hereinafter referred to as button item 252-3), and a "Personalization" button item (hereinafter referred to as button item 252-4). Users can select a driving mode by selecting any of the above button items.

[0187] In some examples, the luminous portion of component 252 changes as the user selects different button items; specifically, the button item selected by the user can be a light source component.

[0188] For example, such as Figure 7 As shown, when button item 252-2 is selected, it can be a light source component; or, when button item 252-2 is selected, its light source properties are activated. In this case, button item 252-2 can display the effect of the light source component described above.

[0189] For example, button 252-2 can emit light like a light source in the real world. For example, button 252-2 can illuminate its own area and surrounding areas (such as the area where button 252-1 is located, the area where button 252-3 is located, etc.). For another example, the area where button 252-2 is located is brighter. Yet another example is that a halo effect is displayed within a certain range around button 252-2.

[0190] In one possible example, if the light source property of button item 252-2 is activated, the portion of container 252a near button item 252-2 can be illuminated. (Continue to reference...) Figure 7 The upper edge of container 252a near button item 252-2 and the lower edge of container 252a near button item 252-2 both have a certain length of bright edge 10, which is used to indicate that these two parts of container 252a are illuminated by button item 252-2.

[0191] As one implementation, the bright edge 10 is brightest in the middle area near button item 252-2 and darkest in the middle area away from button item 252-2, roughly exhibiting an axially symmetrical shape. Or, in other words, the bright edge 10 gradually darkens from the middle outwards.

[0192] Similarly, when button item 252-3 is selected, it can display the effect of a light source component, brightening its own area and illuminating adjacent button items 252-2 and 252-4. The upper and lower edges of container 252a near button item 252-3 will show a bright edge. When the user switches between button items 252-1, 252-2, 252-3, and 252-4, the bright edge 10 roughly shows a movement from the vicinity of one button item to the vicinity of another as the user selects.

[0193] Continue to refer to Figure 7 The interface also includes a “Vehicle Mode” segmented button component, which also includes multiple button items. When these button items are selected, they can also display the effect of the light source component. For related information, please refer to the aforementioned introduction of component 252.

[0194] Figure 8 The image shown illustrates another graphical user interface provided in this application embodiment, which includes a sliding adjustment button (or a sliding adjustment component). During user operation of the sliding adjustment button, the light source properties of the button can change according to the user's actions, resulting in a more realistic interface display that conforms to the user experience in the real world.

[0195] refer to Figure 8 The interface includes a volume control button (hereinafter referred to as component 254), which may include a container 254a and a slider 254b. The user can increase or decrease the volume by dragging the slider 254b.

[0196] In some examples, the slider 254b of component 254 can be considered as an example of the light source component mentioned above.

[0197] For example, such as Figure 8 The illustration in Figure 8-1 As shown, when the right edge of slider 254b is located at the leftmost end of container 254a, the length of slider 254b is 0, the volume percentage is 0%, and component 254 only displays container 254a, not slider 254b. When the right edge of slider 254b is located at the rightmost end of container 254a, the length of slider 254b is 100 units, the volume percentage is 100%, and the length of slider 254b is approximately the same as the length of container 254a.

[0198] When the length of slider 254b is not zero, slider 254b exhibits the display effect of the aforementioned light source component. For example, slider 254b can emit light like a light source in the real world. For example, slider 254b can illuminate its own area and the area around it (such as the lower edge of the "music playback" component located above slider 254b). Another example is that the area where slider 254b is located is brighter. Yet another example is that a halo effect is displayed within a certain range around slider 254b.

[0199] Continue to refer to Figure 8 The illustration in Figure 8-1 When the user adjusts the volume to 18%, the length of slider 254b is 18 units, and this 18-unit length slider 254b displays the effect of a light source component. The lower edge of the "Music Playback" component (hereinafter referred to as component 256) near this length of slider 254b includes a bright edge 12 to indicate that it is illuminated by slider 254. The bright edge 12 is located approximately directly above slider 254b, and its brightness gradually decreases from the center to both sides. The lower right edge of component 256, away from slider 254b, may not include a bright edge, indicating that this part is not illuminated by slider 254b.

[0200] Combination Figure 8 The illustration in Figure 8-1 and indication Figure 8-2 As the user drags slider 254b to the right to adjust the volume from 18% to 50%, the length of slider 254b gradually increases, and the area it illuminates gradually expands. For example, as shown in the illustration... Figure 8-1 In the diagram, the central area of ​​container 254a is not illuminated and does not contain a halo; this is for illustrative purposes only. Figure 8-2 In the image, the central area of ​​container 254a is illuminated, creating a halo effect. For example, see the illustration. Figure 8-2 In the middle, the lower left edge region of component 256 includes a bright edge 12; schematic Figure 8-2 In the middle, most of the lower edge of component 256 is highlighted with a bright edge 14, indicating that most of the lower edge of component 156 is illuminated by slider 254b.

[0201] In addition to light source components that illuminate other components, the display interface of an electronic device may also include non-light source components that can be illuminated. In some examples, when not illuminated by the light source components, the brightness of the non-light source components is an initial brightness, which is lower than the brightness of the light source components.

[0202] For example, such as Figure 4 As shown, components 214 and 218, as well as the "headlight control" component and the "parking assistance" component, are all non-light source components. The brightness of these components (or the brightness of the area where these components are located) is lower than that of the light source components (components 212 and 216).

[0203] For example, such as Figure 7 As shown, when not selected, button items 252-1, 252-3, and 252-4 of component 252 are all non-light source components. The brightness of these components (or the brightness of the area where these components are located) is lower than that of the light source component (button item 252-2).

[0204] For example, such as Figure 8 As shown, component 256 is a non-light source component, and the brightness of this component (or the brightness of the area where the component is located) is dimmer than the brightness of slider 254b.

[0205] Similar to light source components having light source properties, non-light source components can have non-light source properties.

[0206] In some examples, non-light source properties can be used to indicate that a non-light source component does not emit light like a light source in the real world, or non-light source properties can be used to determine the aforementioned initial brightness of a non-light source component.

[0207] For example, using a light source component brightness of 100% as a reference, Figure 4 In this context, the non-light source properties of component 214 can indicate that the initial brightness of component 214 is 50%; Figure 7 In the middle, the non-light source property of the unselected button item 252-1 can indicate that the brightness of button item 252-1 is 55%; Figure 8 In the diagram, the non-light source properties of component 256 can indicate that the brightness of the area where component 256 is located is 45%.

[0208] In some examples, non-light source properties can be used to indicate the display effect of a non-light source component when it is within the illumination range of a light source component. Specifically, non-light source properties can be used to indicate whether the edges and / or content areas of a non-light source component are illuminated when it is within the illumination range of a light source component.

[0209] For example, non-light source properties can be used to indicate whether the edges of a non-light source component are illuminated (or whether the edges emit light) when it is within the illumination range of a light source component.

[0210] For example, such as Figure 4 The illustration in Figure 4-1 As shown, the non-light source properties of the "charging port" component can indicate that its edges are illuminated when it is within the illumination range of the light source component. Thus, the side of the "charging port" component facing component 212 can display a bright edge when illuminated by component 212. The non-light source properties of the "vehicle power off" component can indicate that its edges are not illuminated when it is within the illumination range of the light source component. Thus, the side of the "vehicle power off" component facing component 212 can not display a bright edge when illuminated by component 212.

[0211] For example, such as Figure 7 As shown, the non-light source properties of container 252a can indicate that its edges are illuminated when it is within the illumination range of the light source component, so that container 252a can display a bright edge 10 when the selected button item 252-2 is illuminated.

[0212] For example, such as Figure 8 As shown, the non-light source properties of component 256 can indicate that its edges are illuminated when it is within the illumination range of the light source component, so that component 256 can display a bright edge 12 or a bright edge 14 when it is illuminated by component 254.

[0213] For example, non-light source properties can be used to indicate whether the content area of ​​a non-light source component is illuminated when it is within the illumination range of a light source component.

[0214] For example, such as Figure 9 The illustration in Figure 9-1 As shown, component 258 is a light source component, and the menu component (hereinafter referred to as component 260) is a non-light source component. The non-light source attribute of component 260 indicates that its content area is illuminated when it is within the illumination range of the light source component. Thus, when illuminated by component 258, the brightness of a portion of component 260 closer to component 258 (the middle right area 30) is higher than the brightness of the rest of component 260. In other words, the content displayed in the middle right area 30 of component 260 can be illuminated by component 258.

[0215] For example, non-light source properties can be used to indicate that the content area and edges of a non-light source component are illuminated when it is within the illumination range of a light source component.

[0216] For example, such as Figure 9 The illustration in Figure 9-2As shown, component 258 is a light source component, and the menu component (hereinafter referred to as component 260) is a non-light source component. The non-light source attribute of component 260 can indicate that its edges are illuminated when it is within the illumination range of the light source component. Thus, when illuminated by component 258, the side of component 260 facing component 258 (the right side) can display a bright edge 16. Specifically, the middle area of ​​the bright edge 16 is closer to component 258 and has a brighter brightness; the upper and lower parts are farther from component 258 and have a dimmer brightness. The non-light source attribute of component 260 can also indicate that its content area is illuminated when it is within the illumination range of the light source component. Thus, when illuminated by component 258, the brightness of a portion of component 260 on the side closer to component 258 (the middle right area 30) is higher than the brightness of other parts of component 260. In other words, the content displayed in the middle right area 30 of component 260 can be illuminated by component 258.

[0217] In some examples, non-light source properties can be used to indicate whether a non-light source component blocks light emitted by a light source component, or in other words, non-light source properties can be used to determine whether light on one side of a non-light source component can pass through the non-light source component to reach the other side of the non-light source component.

[0218] like Figure 10 As shown, components 262, 264, 268, and 270 are all non-light source components, while component 266 is a light source component. Component 266 is located between components 264 and 268, component 262 is located on the side of component 264 away from component 266, and component 270 is located on the side of component 268 away from component 266.

[0219] For example, the non-light source property of component 264 can indicate that component 264 does not block the light emitted by the light source component. In this way, the side of component 264 closer to component 266 and the side farther away from component 266 can display bright edges 18a and 18b respectively. Component 262, located to the left of component 264, is also within the illumination range of component 266, and its side closer to component 266 can also display bright edge 20.

[0220] One possibility is that the brightness of bright edge 18a (e.g., the average brightness at different locations) can be higher than that of bright edge 18b, and the brightness of bright edge 18b (e.g., the average brightness at different locations) can be higher than that of bright edge 20.

[0221] For example, the non-light source properties of component 268 can instruct component 268 to block the light emitted by the light source component, so that the side of component 268 closer to component 266 can display a bright edge 22, while the side farther from component 266 does not display a bright edge, and component 270 located to the right of component 268 also does not display a bright edge.

[0222] In one possible example, if the non-light source component's non-light source property indicates that the non-light source component blocks the light emitted by the light source component, then the boundary of the area illuminated by the light source component (or the light propagation distance) may not exceed the boundary of the adjacent non-light source component. For example, Figure 10 The distance that the light emitted by the middle component 266 to the right travels does not exceed the left side of the component 268.

[0223] In another possible example, if the non-light source component's non-light source property indicates that the non-light source component does not block the light emitted by the light source component, then the boundary of the area illuminated by the light source component (or the light propagation distance) can exceed the boundary of the adjacent non-light source component. For example, Figure 10 The light emitted by the middle component 266 to the left travels a distance exceeding the right side of the component 264.

[0224] It is understandable that non-light source components, like light source components, have the properties of general components, such as shape, behavior, and state as mentioned above. For related content, please refer to the description above.

[0225] Similar to light source components, non-light source components can also be moved under user operation. When a non-light source component moves from outside the illumination range of the light source component to within the illumination range, the non-light source component can be illuminated, and the brightness of the entire or part of the non-light source component increases; when a non-light source component moves from within the illumination range of the light source component to outside the illumination range, the brightness of the entire or part of the non-light source component decreases.

[0226] For example, combined Figure 4 and Figure 11 Component 212 is a light source component, and component 223 is a non-light source component. Figure 4 In the middle, component 223 is located outside the illumination range of component 212, component 223 is not illuminated, and no bright edge appears on its outer periphery. Figure 11 In the process, component 223 moves closer to component 212 under user operation (such as dragging) and enters the illumination range of component 212. Component 223 displays a bright edge display effect on both sides (top and left edges) near component 212 to indicate that the top and left edges of component 212 are illuminated.

[0227] Users can input information into electronic devices in various ways to operate the light source components or non-light source components on the interface. For example, a user can tap a light source component (or non-light source component) with their finger; or, a user can operate the light source component (or non-light source component) using one or more methods such as a stylus, mouse, remote control, or voice commands. In other words, the type of operating object acting on the light source component (or non-light source component) can be one or more of a finger, stylus, mouse, remote control, or voice commands. In other words, the user's action on the light source component (or non-light source component) can be a pressing operation, a voice operation, etc., and this application does not limit this.

[0228] To provide a more realistic interactive experience, electronic devices can control the light source components to present different display effects for different operating objects.

[0229] In some examples, the display effect presented by the light source component varies depending on the size of the operating area of ​​the operating body on the light source component. When the operating area is large, the area of ​​the light intensity (or brightness) changing on the light source component can be large; when the operating area is small, the area of ​​the light intensity (or brightness) changing on the light source component can be small.

[0230] For example, refer to Figure 5 When users operate the light source component by touching and tapping the display screen of an electronic device, the operating area is larger. Figure 5 The radius of the circular dashed box used to mark the tapped area is larger; when users operate the light source component by tapping the display screen of electronic devices such as mice or styluses, the operating area is smaller. Figure 5 The radius of the circular dashed box used to identify points in a region is smaller.

[0231] In some examples, for the same operating body, the light source component can exhibit different display effects when the force exerted by the operating body on the electronic device varies. When the force is greater, the change in luminous intensity (or brightness) on the light source component is larger; when the force is smaller, the change in luminous intensity (or brightness) on the light source component is smaller.

[0232] For example, refer to Figure 4 The illustration in Figure 4-2 When the force applied by the user to the display screen of the electronic device is greater than the pressure threshold, the brightness of point Pt on the light source component decreases by a greater amount (e.g., 50%); when the force applied by the user to the display screen of the electronic device is less than or equal to the pressure threshold, the brightness of point Pt on the light source component decreases by a smaller amount (e.g., 20%).

[0233] In some examples, for the same operating body, the light source component can exhibit different display effects depending on the duration of the operating body's action on the electronic device. For shorter durations, the area of ​​the light source component where the luminous intensity (or brightness) changes can be smaller, and / or the magnitude of the change in luminous intensity (or brightness) can be smaller; for longer durations, the area of ​​the light source component where the luminous intensity (or brightness) changes can be larger, and / or the magnitude of the change in luminous intensity (or brightness) can be larger.

[0234] For example, refer to Figure 5 When the user operates the light source component for a shorter period than the duration threshold, the area of ​​change in luminous intensity on the light source component is relatively small. Figure 5 The radius of the circular dashed box used to identify the area is smaller; when the user operates the light source component for a time longer than or equal to a time threshold, the area of ​​change in luminous intensity on the light source component is larger. Figure 5 The radius of the circular dashed box used to identify points in a region is larger.

[0235] For example, refer to Figure 4 The illustration in Figure 4-2 When the user operates the light source component for a shorter time than the duration threshold, the brightness change at point Pt can be relatively small; when the user operates the light source component for a longer time than or equal to the duration threshold, the brightness change at point Pt can be relatively large.

[0236] The interface display method provided in this application can be applied to electronic devices with medium-sized screens, such as mobile phones, tablets, in-vehicle displays, and laptops; it can also be applied to electronic devices with smaller screens, such as watches, wristbands, and smart glasses; and it can also be applied to electronic devices with larger screens, such as smart screens, projectors, and televisions. This application does not impose any limitations on this application. To improve the display effect of electronic devices with different screen sizes and enable users to obtain a similar interactive experience on different types of electronic devices, the interface display method provided in this application can be optimized for the screen size of electronic devices.

[0237] For example, for devices with larger screen sizes, the light from the light source component can travel a longer distance, resulting in a larger illuminated area; conversely, for devices with smaller screen sizes, the light from the light source component can travel a shorter distance, resulting in a smaller illuminated area. Figure 4 For example, the display area of ​​the halo around component 212 can be relatively large on large-screen devices such as smart screens and TVs; while the display area of ​​the halo around component 212 can be relatively small on small-screen devices such as watches and bracelets.

[0238] The display effect of light emitted by the light source component after acting on other components requires the computing and storage resources of electronic devices. For large-screen devices, computing and storage resources are relatively abundant, and appropriately increasing the illumination range of the light source component can present a more refined display effect and improve the user experience. For small-screen devices, computing and storage resources are relatively limited, and appropriately reducing the illumination range of the light source component can help save power consumption of this type of electronic device.

[0239] For example, while controlling power consumption, a good display effect can be maintained. For devices with smaller screen sizes, when the user operates the light source component, the change range of the light intensity (or brightness) of the operating area on the light source component can be larger, so as to better present the operation feedback and improve the user experience.

[0240] Figure 12 and Figure 13 The example illustrates the display effect of the interface display method provided in the embodiments of this application on a mobile phone.

[0241] Figure 12 The diagram shows the interface of the control center of an electronic device. The interface includes multiple control items (or quick switches), such as "Bluetooth", "brightness", "volume", "ring", "flight mode", etc. Any of these control items can be a light source component or a non-light source component as mentioned above.

[0242] As an example, the following explanation uses the "ringing" control (hereinafter referred to as component 302), "brightness" control (hereinafter referred to as component 306), and "volume" control (hereinafter referred to as component 304) as light source components, and the other control items as non-light source components. It should be noted that this example should not be construed as a limitation of this application.

[0243] refer to Figure 12 The brightness of component 302 is higher than that of the nearby "flashlight" control, "scan" control, and "mobile data" control.

[0244] Component 302 is capable of emitting light to illuminate its surrounding area, and its outer periphery displays a halo. For example, the "flashlight" control, "scan" control, and "mobile data" control are all located within the illumination range of component 302, and the side of the "flashlight" control facing component 302, the side of the "scan" control facing component 302, and the side of the "mobile data" control facing component 302 all display a bright edge.

[0245] During the process of moving component 302 away from its current location (e.g., moving it closer to the "Bluetooth" control), the "Flashlight" control, "Scan" control, and "Mobile Data" control gradually move out of the illumination range of component 302. Figure 12 The bright edges around these control items gradually disappear.

[0246] Continue to refer to Figure 12 The brightness of slider 304a in component 304 is higher than the brightness of container 304b and the brightness of nearby "Do Not Disturb" control, "Scan" control, and "Rotate Lock" control.

[0247] The slider 304a can emit light to illuminate its surrounding area, and its outer perimeter displays a halo. For example, the "Do Not Disturb" control is located within the illuminated area of ​​component 304, and the side of the "Do Not Disturb" control facing component 304 displays a bright edge.

[0248] When adjusting the volume using the slider 304a on the sliding component 304, as the user drags the right edge of the slider 304a to the left, the length of the slider 304a shortens, the area of ​​the slider 304a decreases, and the area of ​​the slider 304a that can emit light outwards shrinks. Correspondingly, the area of ​​the halo around the slider 304a becomes smaller, and the illumination range of the slider 304a shrinks. Conversely, as the user drags the right edge of the slider 304a to the right, the length of the slider 304a lengthens, the area of ​​the slider 304a increases, and the area of ​​the slider 304a that can emit light outwards expands. Correspondingly, the area of ​​the halo around the slider 304a becomes larger, and the illumination range of the slider 304a expands. In this case, the "rotation lock" control can enter the illumination range of the slider 304a, and its side facing the slider 304a can display a bright edge.

[0249] The display effect of component 306 is similar to that of component 304. When the slider of component 306 is dragged, the illumination range of component 306 can change, and the length of the bright edge of other components located near component 306 will also change.

[0250] Figure 13 The diagram shows the lock screen interface of an electronic device. The interface includes a "flashlight" switch button, a "camera" switch button, and a "media" control button. These three buttons can be light source components or non-light source components. The following explanation uses the "flashlight" switch button (hereinafter referred to as component 312) as a light source component and the "camera" switch button and the "media" control button (hereinafter referred to as component 314) as non-light source components.

[0251] like Figure 13 The illustration in Figure 13-1In the default state, or in other words, when the user does not turn on the "flashlight" switch, the light source attribute of component 312 is not activated, and it presents the display effect of a non-light source component. Specifically, the brightness of component 312 is the same as that of a non-light source component, and component 312 does not illuminate the area around it.

[0252] like Figure 13 The illustration in Figure 13-2 When the user taps component 312, the light source property of component 312 is activated, so component 312 presents the display effect of a light source component. Specifically, the brightness of component 312 is the same as the brightness of the light source component and is higher than the brightness of the non-light source component. It can emit light and spread it to the surroundings, and the outer periphery of component 312 shows a halo.

[0253] Furthermore, when the light source property of component 312 is activated and the user taps component 312, the brightness of the area of ​​component 312 that the user taps can dim, roughly presenting the effect described above. Figure 5 Any of the various display effects shown.

[0254] like Figure 13 The illustration in Figure 13-3 When the user ends the tapping operation, component 312 displays the effect of the light source component described above, with its area emitting uniform light, roughly resembling the display effect of an acrylic panel. The right side of component 314, located within the illumination range of component 312, is illuminated, displaying a bright edge 24.

[0255] Figure 14 The present application provides an interface display method in which, for a light source component, the electronic device can determine the display effect of the light source component based on the light source attributes of the light source component and whether the light source component is operated by the user.

[0256] S101, the electronic device identifies the first component as a light source component.

[0257] The first component can be a component included in the system application of the electronic device, or a component included in a third-party application installed on the electronic device. In other words, the interface display method provided in this application can be applied to both system applications of the electronic device and third-party applications.

[0258] The electronic device can determine that the first component is a light source component based on a declaration about the type of the first component recorded in the data or code related to the first component in the application. This declaration can be an explicit declaration or an implicit declaration.

[0259] In some examples, the first component may include any of the following: button, navigation bar, menu, text box, tab, slider, checkbox, etc., which are not limited in this application.

[0260] S102, the electronic device determines the light source properties of the first component.

[0261] Electronic devices can obtain the light source properties of the first component in a variety of ways, such as component declaration or metadata mapping.

[0262] Light source properties refer to the ability of a component to emit light like a light source in the real world, illuminating its location and surrounding area. Light source properties can include one or more sub-properties, which are used to describe the luminous characteristics of a light source component with light source properties. Examples include color temperature, luminous intensity, attenuation level, and attenuation distance.

[0263] For details regarding the properties of the light source, please refer to the previous text; they will not be repeated here.

[0264] It should be noted that the naming of light source attributes in this application is for ease of understanding and explanation only, and should not be construed as a limitation of this application. In some other examples, light source attributes may also be referred to as first attribute, first component attribute, first characteristic, first parameter, etc.

[0265] S103, the electronic device determines whether the first component is operated by the user. If the first component is not operated by the user, step S104a is executed; if the first component is operated by the user, step S104b is executed.

[0266] It is understandable that different types of first components result in different user operations that can be performed on them. For example, the aforementioned user operations may include tapping, dragging, swiping, and inputting.

[0267] For example, the first component can be component 212 mentioned above. In this case, the user's operation can be a tap or a drag operation.

[0268] For example, the first component can be component 254 mentioned above. In this case, the user's operation can be a swipe operation.

[0269] For example, the first component could be a text box, in which case the user's action could be an input action.

[0270] S104a, the electronic device displays the first effect.

[0271] The first effect is used to indicate the display effect of the first component when it is not interacted with by the user. For a light source component, the first effect can refer to the display effect where the brightness of the first component is higher than that of non-light source components. In some examples, the first effect can also indicate that the brightness of a certain area around the first component is higher, or that a halo appears around the first component.

[0272] For example, the first effect can refer to uniform brightness in the area where the first component is located or uniform light emission from the first component.

[0273] S104b, the electronic device displays a second effect.

[0274] The second effect is used to indicate the display effect of the first component when it is interacted with by the user.

[0275] For example, the second effect may include the display effect of the first component before it is pressed by the user, for example, Figure 5 The display effect can be any one of the following: a gradual brightness change, a water ripple effect, or a halo effect.

[0276] For example, the second effect may include the display effect when the first component is dragged, for example, Figure 6 The central component 216 is in a floating state, its area is slightly enlarged, and the illuminated area is reduced, creating a display effect.

[0277] For example, the second effect may include the display effect when the first component is swiped, for example, Figure 8 When the slider of the middle component 254 is slid to the left, the light-emitting area becomes smaller, resulting in a smaller illuminated area.

[0278] It should be noted that the naming of steps S101, etc., is only for identifying different steps and is not intended to indicate the execution order of these steps. In some other examples, the above steps may be executed in other orders, and this application does not impose any restrictions on this. For example, steps S101 and S102 may be executed in one step.

[0279] The light source component can emit light to the surroundings just like a light source in the real world. The light can illuminate the surrounding area. The electronic device can display the interaction effects between the light source component and other components. When the user operates the light source component, the aforementioned interaction effects can change accordingly. The interface display of the electronic device is more delicate and realistic, which helps to improve the user experience.

[0280] Figure 15 Another interface display method provided in this application embodiment allows the electronic device to determine the display effect of a non-light source component based on whether it is located within the illumination range of the light source component.

[0281] S201, the electronic device determines that the second component is a non-light source component.

[0282] The second component can be a component included in the system application of the electronic device, or a component included in a third-party application installed on the electronic device. In other words, the interface display method provided in this application can be applied to both system applications and third-party applications of the electronic device.

[0283] The electronic device can determine that the second component is a non-light source component based on a declaration about the type of the second component recorded in the data or code related to the second component in the application. This declaration can be an explicit declaration or an implicit declaration.

[0284] In some examples, the second component may include any of the following: button, navigation bar, menu, text box, tab, slider, checkbox, etc., which are not limited in this application.

[0285] S202, the electronic device determines the non-light source properties of the second component.

[0286] Electronic devices can obtain non-light source properties of a second component in a variety of ways, such as component declarations or metadata mapping.

[0287] Non-light source properties can be used to indicate that a non-light source component does not emit light like a light source in the real world, or they can be used to determine the aforementioned initial brightness of the non-light source component. In some examples, non-light source properties can also be used to indicate whether a non-light source component displays a bright edge when it is within the illumination range of a light source component. Alternatively, non-light source properties can be used to indicate whether a non-light source component blocks the light emitted by the light source component.

[0288] For information on non-light source properties, please refer to the previous text; it will not be repeated here.

[0289] It should be noted that the naming of non-light source attributes in this application is for ease of understanding and explanation only, and should not be construed as a limitation of this application. In some other examples, non-light source attributes may also be referred to as second attributes, second component attributes, second characteristics, second parameters, etc.

[0290] S203, the electronic device determines whether the second component is within the illumination range. If the second component is not within the illumination range, step S204a is executed; if the second component is within the illumination range, step S204b is executed.

[0291] Here, the illumination range can refer to the illumination range of the light source component that is on the same interface as the second component. This illumination range can change according to the user's operation, or in other words, the illumination range can be dynamic.

[0292] For example, such as Figure 4 The illustration in Figure 4-2As shown, when the user presses component 216, the illumination range of component 216 can be reduced.

[0293] For example, such as Figure 6 As shown, when the user drags component 216, the illumination range of component 216 can change with the position of component 216.

[0294] For example, such as Figure 7 As shown, when the selected button item in component 252 is switched from button item 252-2 to button item 252-1, the illumination range of component 252 can change.

[0295] For example, such as Figure 8 As shown, when the length of the slider 254a of component 254 changes, the illumination range of the slider 254a also changes.

[0296] It is understandable that the illumination range of the light source component is fixed at a given moment.

[0297] S204a, Electronic devices display a third effect.

[0298] The third effect is used to indicate the display effect of the second component when it is not within the illuminated area. For example, the third effect may include the brightness of the second component being the initial brightness, and the third effect may also include the fact that the edges of the second component do not include bright edges.

[0299] For example, such as Figure 4 The illustration in Figure 4-1 As shown, the "brightness" component is not located within the illumination range of component 216. The brightness of the "brightness" component is darker than that of component 216, and its edges do not show a bright edge. This display effect can be regarded as an example of a third effect.

[0300] S204b, Electronic device displays the fourth effect.

[0301] The fourth effect is used to indicate the display effect of the second component within the illumination range. For example, the fourth effect may include the brightness of the second component (greater than the initial brightness), and the third effect may also include a bright edge on the side of the second component closer to the light source component, or a bright edge on the side of the second component farther from the light source component (within the illumination range).

[0302] For example, such as Figure 10 As shown, component 264 is located within the illumination range of component 266. The side of component 264 closer to component 266 displays a bright edge 18a, and the side of component 264 farther from component 266 displays a bright edge 18b. This display effect can serve as an example of the fourth effect described above.

[0303] For example, such as Figure 10 As shown, component 268 is located within the illumination range of component 266. The side of component 268 closer to component 266 displays a bright edge 22, while the side of component 268 farther from component 266 does not display a bright edge. This display effect can also serve as an example of the fourth effect mentioned above.

[0304] S205, confirming that the light source assembly is operated and / or the second assembly is moved.

[0305] It should be noted that the naming of steps S201, etc., is only for identifying different steps and is not intended to indicate the execution order of these steps. In some other examples, the above steps may be executed in other orders, and this application does not impose any restrictions on this. For example, steps S201 and S202 may be executed in one step.

[0306] When the light source component or the second component moves, the second component, which was not within the illumination range before the movement, may be within the illumination range after the movement, and vice versa. Therefore, when it is determined that the light source component and / or the second component has been operated, the electronic device can re-determine whether the second component is within the illumination range, i.e., execute the content of step S203.

[0307] Figure 16 The present invention illustrates another interface display method provided in this application embodiment. For an interface that includes light source components and non-light source components, the electronic device can identify the type and attributes of the components respectively, determine the display effect of each type of component, and thus display the target interface.

[0308] S401, the electronic device identifies the light source components and non-light source components in the target interface.

[0309] The electronic device can determine which components in the target interface are light source components and which are non-light source components based on the declaration information of the application using light source components and / or non-light source components. For related details, please refer to steps S101 and S201 above.

[0310] S402, the electronic device determines the light source properties of the light source component and the non-light source properties of the non-light source component.

[0311] Electronic devices can determine the light source attributes of light source components and the non-light source attributes of non-light source components based on component declarations or metadata mapping. For a detailed explanation of light source and non-light source attributes, please refer to steps S102 and S202 above.

[0312] S403, the electronic device determines the display effect of the light source component and the display effect of the non-light source component.

[0313] In some examples, the electronic device can determine the display effect of the light source component based on the light source properties of the light source component, and determine the display effect of the non-light source component based on the light source properties and the non-light source properties of the non-light source component and the relative position of the non-light source component and the light source component.

[0314] For example, an electronic device can determine the points where the intensity of light emitted by the light source component decreases to 0 (or approximately zero) during propagation based on the luminous intensity and attenuation amplitude of the light source component. These points can be interconnected to form the illumination range of the light source component.

[0315] For example, the electronic device can determine whether a non-light source component is within the illumination range based on the aforementioned illumination range and the relative position of the non-light source component to the light source component. If the non-light source component is not within the illumination range, it is displayed as if unilluminated (as in the third effect described above). If the non-light source component is within the illumination range, the electronic device can determine the light intensity at the location of the non-light source component based on the distance between the non-light source component and the light source component, as well as the luminous intensity and attenuation of the light source component. This light intensity can be converted into the incremental brightness increase of the non-light source component relative to the light source component. Combined with the initial brightness of the non-light source component, the electronic device can determine the brightness of the non-light source component.

[0316] S404, Electronic device displays target interface.

[0317] In some examples, when an electronic device detects an interface refresh signal (such as a vertical sync signal), it can update the data used to draw the target interface, thereby displaying the refreshed target interface.

[0318] When a user operates the light source component, the light source properties of the light source component may change, which in turn will change the influence of the light source component on the nearby area and the non-light source components in the nearby area. In this case, the electronic device can determine the light source properties of the light source component after the user's operation and the display effect of the light source component. This part can be referred to in steps S102, S103 and S104b above.

[0319] When the light source properties (such as luminous intensity and attenuation) of the light source component change, the display effect of the non-light source components may also change. For example, after the luminous intensity of the light source component decreases, the non-light source components that were originally within the illumination range of the light source component may no longer be within the changed illumination range. This part can be found in steps S203, S204a, and S204b above.

[0320] When the user moves a non-light source component, the determination of whether the non-light source component is within the illumination range of the light source component may change, and the display effect of the corresponding non-light source component will also change. Please refer to step S205 above for related details.

[0321] When the light source component and / or non-light source component are operated by the user, the electronic device can perform the steps S302 to S304 above to update the target interface after the user operation.

[0322] In one possible example, such as Figure 17 As shown, application developers can configure the light source or non-light source properties of components through the application programming interface (API). For example, developers can configure component A as a light source component by calling `hdsEffect.HdsEffectBuilder().pointLightSource`. Based on this, developers can use `.pointLightSource` to configure one or more of the following properties of component A: its emission color, illumination range, emission intensity, and halo size.

[0323] For example, developers can configure component B as a non-light source component by calling hdsEffect.HdsEffectBuilder().pointLightIlluminated. Based on this, developers can call .pointLightIlluminated to set the lighting effect of component B, including the illumination type (illuminatedType) when component B is illuminated, such as edges being illuminated and / or the content area being illuminated.

[0324] For example, developers can use `.pressShadow` to set the press effect of component A or component B, as mentioned above. Figure 5 Any of the various pressing effects shown.

[0325] It should be noted that the emission color, illumination range, emission intensity, and halo size of the aforementioned light source components, the light reception type of non-light source components, and the pressing effect of light source and non-light source components can all change according to the value of the component's state variable. In other words, developers can adjust the properties of the aforementioned light source components or non-light source components by configuring the values ​​of the variables.

[0326] It is understandable that, in addition to the light source properties or non-light source properties mentioned above, components can also include general properties, such as shape, behavior, and state as described above. Developers can also adjust these properties by calling the application programming interface (such as .visualEffect) of these general properties of the component.

[0327] It should be noted that the naming of steps S301, etc., is only for identifying different steps and is not intended to indicate the order in which these steps are executed. In some other examples, the above steps may be executed in other orders, and this application does not impose any restrictions on this. For example, steps S301 and S302 may be executed in one step.

[0328] The method displayed in the above interface utilizes the light source components and / or non-light source components provided in the above examples, and therefore possesses the beneficial effects brought by the light source components and / or non-light source components. For related content, please refer to the introduction above.

[0329] Based on the same concept, such as Figure 18 As shown in the illustration, this application also provides an interface display device 1800. This device 1800 can possess the functions of an electronic device described in the above method embodiments and can be used to execute the steps performed by the functions of the electronic device in the above method embodiments. This function can be implemented in hardware, or in software, or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the above functions.

[0330] In one possible implementation, the interface display device 1800 may include an acquisition module 1810 and a processing module 1820, which are coupled to each other.

[0331] In some examples, the acquisition module 1810 can be used to support the electronic device in the foregoing embodiments in acquiring user clicks or drags of light source components or non-light source components, etc.

[0332] The processing module 1820 is used to support the electronic device in performing the processing actions in the above method embodiments, such as displaying an interface for clicking or dragging light source components or non-light source components.

[0333] Optionally, the interface display device 1800 may also include a storage unit 1830 for storing program code and data of the interface display device 1800.

[0334] Figure 19 An electronic device 1900 provided in this application embodiment is shown in the figure. The electronic device 1900 includes at least one processor 1910 and a transceiver 1920. The processor 1910 is coupled to a memory and is used to execute instructions stored in the memory to control the transceiver 1920 to transmit and / or receive signals.

[0335] Optionally, the electronic device 1900 also includes a memory 1930 for storing instructions.

[0336] In some embodiments, the processor 1910 and the memory 1930 can be combined into a single processing device, with the processor 1910 executing program code stored in the memory 1930 to achieve the aforementioned functions. Specifically, the memory 1930 can be integrated into the processor 1910 or independent of it.

[0337] In some embodiments, transceiver 1920 may include a receiver and a transmitter.

[0338] The transceiver 1920 may further include an antenna, and the number of antennas may be one or more. The transceiver 1920 may be a communication interface or an interface circuit.

[0339] When the electronic device 1900 is a chip, the chip includes a transceiver module and a processing module. The transceiver module can be an input / output circuit or a communication interface; the processing module can be a processor, microprocessor, or integrated circuit integrated on the chip.

[0340] This embodiment also provides a computer-readable storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the aforementioned method steps to implement the interface display method in the above embodiment.

[0341] This embodiment also provides a computer program product that, when run on a computer, causes the computer to perform the aforementioned related steps to implement the interface display method in the above embodiment.

[0342] Furthermore, embodiments of this application also provide an apparatus, which may specifically be a chip, component, or module. This apparatus may include a connected processor and a memory. The memory stores computer execution instructions. When the apparatus is running, the processor can execute the computer execution instructions stored in the memory to cause the chip to perform the interface display methods described in the above-described method embodiments.

[0343] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software 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 this application.

[0344] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0345] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0346] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0347] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0348] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0349] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A method for displaying an interface, applied to an electronic device, characterized in that, The method includes: The first interface is displayed, which includes a first component and a second component. The brightness of the first component is a first brightness, and the brightness of the second component is a second brightness. The first brightness is greater than the second brightness. The first interface further includes a reference area located on the outer periphery of the first component. The brightness of the reference area is a reference brightness, which is greater than the second brightness and less than the first brightness. Receive a first operation applied to the first component; The second interface is displayed, in which the brightness of the first component is a third brightness, which is different from the first brightness.

2. The method according to claim 1, characterized in that, The brightness of the reference area decreases in the direction away from the first component.

3. The method according to claim 2, characterized in that, The reference area includes a halo that surrounds the first component.

4. The method according to any one of claims 1 to 3, characterized in that, The first operation is a press operation. In the second interface, the brightness of the first sub-region of the first component is the fourth brightness, and the brightness of the second sub-region of the first component is the fifth brightness. The fourth brightness is less than the fifth brightness. The first sub-region is the area where the pressing operation is performed, and the second sub-region is located on the outer periphery of the first sub-region.

5. The method according to claim 4, characterized in that, In the second interface, the brightness of the third sub-region on the first component is the sixth brightness, which is greater than the fourth brightness and less than the fifth brightness. The third sub-region is located between the first sub-region and the second sub-region.

6. The method according to any one of claims 1 to 5, characterized in that, The brightness of the reference area in the second interface is different from the reference brightness.

7. The method according to any one of claims 1 to 6, characterized in that, The second component includes a first edge located within the reference region, and the brightness of the first edge is greater than the brightness of the other parts of the second component excluding the first edge.

8. The method according to claim 7, characterized in that, The first edge includes a first segment and a second segment, the first segment being closer to the first component and the second segment being farther away from the first component, and the brightness of the first segment being greater than the brightness of the second segment.

9. The method according to claim 7 or 8, characterized in that, The method further includes: Receive the operation of dragging the first component closer to the second component; A third interface is displayed, in which the brightness of the first edge is increased; and / or, Receive the operation of dragging the first component away from the second component; A fourth interface is displayed, in which the brightness of the first edge is reduced.

10. The method according to any one of claims 1 to 9, characterized in that, The method further includes: Receive the operation to move the first component from the first region to the second region; The fifth interface is displayed, in which the brightness of the first area is dimmed and the brightness of the second area is brightened.

11. The method according to any one of claims 1 to 10, characterized in that, The first component is a sliding adjustment component, which includes a slider. The area of ​​the reference area in the first interface is a first area. The method further includes: Receive the operation of dragging the slider; The seventh interface is displayed, in which the area of ​​the reference region is a second area, which is different from the first area.

12. The method according to any one of claims 1 to 10, characterized in that, The first component is a segmented button component, which includes a first button item and a second button item. The method further includes: Receive the action of selecting the second button item; The ninth interface is displayed, in which the brightness of the second button item is the same as the first brightness, and the brightness of the first button item is less than the first brightness.

13. The method according to any one of claims 1 to 10, characterized in that, The first component is a quick switch component. Before displaying the first interface, the method further includes: receiving an operation to activate the quick switch component.

14. The method according to claim 13, characterized in that, The method further includes: Receive the operation to turn off the shortcut switch component; The sixth interface is displayed, in which the brightness of the first component and the brightness of the second component are the same.

15. An electronic device, characterized in that, The device includes a memory and a processor, the memory storing program instructions and the processor executing the program instructions to cause the electronic device to perform the method of any one of claims 1 to 14.

16. A vehicle, characterized in that, The system includes a memory and a processor, the memory storing program instructions and the processor executing the program instructions to cause the vehicle to perform the method of any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, It contains a computer program that, when executed by a computer, enables the implementation of the method according to any one of claims 1 to 14.

18. A computer program product, characterized in that, It includes computer program code that, when run on a computer, causes the method described in any one of claims 1 to 14 to be performed.

19. A display device, characterized in that, Includes modules for implementing the method of any one of claims 1 to 14.

20. A chip, characterized in that, The device includes a processor and a memory, wherein the processor is configured to read instructions from the memory, and when the processor executes the instructions, causes the chip to implement the method of any one of claims 1 to 14.

Images