Graphical interface display method, electronic device, medium, and program product

Abstract

Embodiments of this disclosure provide a graphical user interface display method, an electronic device, a storage medium, and a program product. In this method, a first device determines a currently connectable second device and presents a first animation corresponding to UI elements of the second device in a user interface (UI), wherein the first animation indicates the connectability of the second device. This first animation is determined based on characteristics of the second device, indicating at least one of the following: the distance between the second device and the first device, connection information between the second device and the first device, and the device type of the second device. Such a first animation may include dynamically changing the appearance of UI elements or causing UI elements to move in a predetermined manner within the UI of the first device. Based on this approach, embodiments of this disclosure can present corresponding animations according to the characteristics of different connectable devices, enabling users to intuitively and quickly determine the device they wish to connect to based on the corresponding animations, thereby reducing user interaction costs.

Description

[0001] Related application citation

[0002] This application is a divisional application of the invention patent application with application number 202110586365.7, application date May 27, 2021, and invention title "Graphical Interface Display Method, Electronic Device, Medium and Program Product". Technical Field

[0003] This disclosure relates generally to the field of information technology, and more particularly to a graphical interface display method, electronic devices, computer-readable storage media, and computer program products. Background Technology

[0004] With the rapid development of electronic devices, there are more and more devices, and the connections and interactions between them are also increasing. Traditional user interfaces (UI) or graphical user interfaces (GUI) cannot provide users with effective information related to interconnection, which requires users to spend more resources to establish interconnections between electronic devices or understand the interconnection status between them. Summary of the Invention

[0005] The embodiments of this disclosure relate to a technical solution for facilitating interconnection between electronic devices through animation, and specifically provide a graphical interface display method, an electronic device, a computer-readable storage medium, and a computer program product.

[0006] In a first aspect of this disclosure, a graphical user interface display method is provided. In this method, a first device determines a currently connectable second device and presents a first animation corresponding to UI elements of the second device in a user interface (UI). The first animation indicates the connectability of the second device, wherein the first animation is determined based on characteristics of the second device, indicating at least one of the following: the distance between the second device and the first device, connection information between the second device and the first device, and the device type of the second device. Furthermore, the first animation includes at least one of the following: dynamically changing the appearance of UI elements; or moving UI elements within the UI of the first device in a predetermined manner.

[0007] Based on this approach, the embodiments of this disclosure can present corresponding animations according to the characteristics of different connectable devices, enabling users to intuitively and quickly determine the device they wish to connect to based on the corresponding animations, thereby reducing the user's interaction costs. In this way, users can more intuitively understand the characteristics of different connectable second devices.

[0008] In some embodiments, the first animation may be determined based on distance, and the degree of change in the first animation indicates the magnitude of the distance, including the frequency or amplitude of the first animation. In this way, users can intuitively perceive the distance to different connectable devices through the degree of change in the animation, thereby helping them select the device they need to connect to.

[0009] In some embodiments, the first animation may be determined based on historical connections, and the degree of change in the first animation indicates connection information, including at least one of the following: number of connections, connection frequency, duration of the last connection, or time of the last connection termination. The degree of change includes the frequency or amplitude of the first animation. In this way, users can intuitively perceive the historical connection information of different connectable devices through the degree of change in the animation, thereby helping users select the device they need to connect to.

[0010] In some embodiments, the first animation may be determined based on the device type, and the degree of change in the first animation indicates whether the device type is a device with a screen; the degree of change includes the frequency or amplitude of the first animation. In this way, users can intuitively perceive the types of different connectable devices through the degree of change in the animation, thereby helping users select the device they need to connect to.

[0011] In some embodiments, the initial size of a UI element can be determined based on at least one of distance, connectivity information, and device type. This allows users to visually understand the characteristics of different connectable devices through size, thus helping them select the appropriate device for connection.

[0012] In some embodiments, the UI element is a first UI element, and the UI of the first device also includes a second UI element of a third device that the first device can currently connect to. The first UI element is displayed in the UI of the first device with a higher display priority than the second UI element if at least one of the following conditions is met: the distance from the third device to the first device is greater than the distance from the second device to the first device; or, the number of connections between the third device and the first device is less than the number of connections between the second device and the first device; or, the connection frequency between the third device and the first device is less than the connection frequency between the second device and the first device; or, the duration of the last connection between the third device and the first device is less than the duration of the last connection between the second device and the first device; or, the last disconnection time between the third device and the first device is later than the last disconnection time between the second device and the first device; or, the third device is a screenless device and the second device is a device with a screen, wherein the display priority indicates at least one of the following: the display size of the UI element, the display brightness of the UI element, or the display position of the UI element. In this way, users can intuitively perceive the characteristics of different connectable devices through the display priority, thereby helping users select the device they need to connect to.

[0013] In some embodiments, in response to receiving a selection of a UI element, the first device can initiate the establishment of a connection with the second device; and in the UI of the first device, a second animation corresponding to the UI element is displayed, which is used to indicate the progress of the connection establishment. In this way, the user can intuitively perceive the status of the connection through animation.

[0014] In some embodiments, in response to receiving a selection of a UI element, the first device can trigger a second device to provide a notification indicating that the second device has been selected by the first device for connection. In this way, the selected device can also be aware of being selected to establish a connection.

[0015] In some embodiments, enabling the second device to provide a notification includes: if the second device is a device with a screen, displaying a third animation corresponding to a UI element of the first device in the UI of the second device, the third animation serving as a notification. In this way, the selected device with a screen can use animation to indicate that the current device has been selected by the first device to establish a connection.

[0016] In some embodiments, if the second device is a device with a screen, the first device can trigger the second device to display a fourth animation corresponding to a UI element of the first device in its UI in response to the establishment of a connection between the first and second devices. This fourth animation indicates the progress of the connection establishment between the first and second devices. In this way, the selected device with a screen can use animation to indicate the progress of the connection between the current device and the first device.

[0017] In some embodiments, in response to a first device detecting an interruption in the connection with a second device, the first device may display a fifth animation in its own UI corresponding to a UI element of the second device, the fifth animation indicating the interruption of the connection. In this way, the user can promptly perceive the interruption of the connection, thereby avoiding the user requesting to perform any connection-related operations.

[0018] In a second aspect of this disclosure, an electronic device is provided. The electronic device includes a processor and a memory storing instructions. When executed by the processor, the instructions cause the electronic device to perform any method according to the first aspect and its implementation.

[0019] In a third aspect of this disclosure, a computer-readable storage medium is provided. The computer-readable storage medium stores instructions that, when executed by an electronic device, cause the electronic device to perform any method of the first aspect and its implementation.

[0020] In a fourth aspect of this disclosure, a computer program product is provided. The computer program product includes instructions that, when executed by an electronic device, cause the electronic device to perform any method of the first aspect and its implementation.

[0021] It should be understood that the description in the Summary of the Invention section is not intended to limit the key or essential features of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0022] The above and other objects, features, and advantages of embodiments of the present disclosure will become readily apparent from the following detailed description taken in conjunction with the accompanying drawings. Several embodiments of the present disclosure are illustrated in the drawings by way of example and not limitation.

[0023] Figure 1 A schematic diagram of the hardware structure of an electronic device that can implement embodiments of the present disclosure is shown.

[0024] Figure 2 This shows an example interface of a traditional sharing application.

[0025] Figures 3A to 3G A schematic diagram illustrating the use of interconnected animation to support interconnected sharing applications according to an embodiment of the present disclosure is shown.

[0026] Figure 4 This shows a sample interface for traditional Bluetooth connectivity.

[0027] Figures 5A to 5F A schematic diagram illustrating the use of interconnected animation to support Bluetooth interconnection according to an embodiment of the present disclosure is shown.

[0028] Figure 6 An example interface for traditional wireless interconnection is shown.

[0029] Figures 7A to 7E A schematic diagram illustrating the use of interconnected animation to support wireless interconnection according to an embodiment of the present disclosure is shown.

[0030] Figure 8 This shows an example interface for traditional IoT connectivity.

[0031] Figures 9A to 9E A schematic diagram illustrating the use of interconnected animation to support IoT connectivity according to embodiments of the present disclosure is shown.

[0032] Figure 10 A schematic diagram of a system framework for implementing interconnected animation capabilities or functions according to embodiments of the present disclosure is shown.

[0033] Figure 11 A schematic diagram illustrating the relationship between the application side and the UI framework side involved in the interconnected animation capabilities or functions according to embodiments of the present disclosure is shown.

[0034] Figure 12 A schematic diagram illustrating three ways in which interconnected animation capabilities or functions are implemented according to embodiments of the present disclosure is shown.

[0035] Figure 13 An implementation framework for implementing interconnected animations or capabilities according to embodiments of this disclosure is shown.

[0036] Figure 14 A flowchart illustrating an example process of an interface display method according to an embodiment of the present disclosure is shown.

[0037] Throughout all the accompanying drawings, the same or similar reference numerals are used to denote the same or similar components. Detailed Implementation

[0038] The principles and spirit of this disclosure will be described below with reference to several exemplary embodiments illustrated in the accompanying drawings. It should be understood that these specific embodiments are described merely to enable those skilled in the art to better understand and implement this disclosure, and are not intended to limit the scope of this disclosure in any way. In the following description and claims, unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art.

[0039] As used herein, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc., may refer to different or the same objects and are used only to distinguish the objects referred to, without implying a particular spatial order, temporal order, order of importance, etc., of the objects referred to. In some embodiments, values, processes, selected items, determined items, devices, apparatuses, means, parts, components, etc., are referred to as "best", "lowest", "highest", "minimum", "maximum", etc. It should be understood that such descriptions are intended to indicate that a selection can be made from a number of available functional options, and that such selection is not necessarily better, lower, higher, smaller, larger, or otherwise preferred than other options in any other respect or in all respects. As used herein, the term "determine" can cover a wide variety of actions. For example, "determine" can include calculation, computation, processing, derivation, investigation, search (e.g., searching in a table, database, or other data structure), ascertainment, etc. Furthermore, "determine" can include receiving (e.g., receiving information), accessing (e.g., accessing data in memory), etc. Moreover, "determine" can include parsing, selecting, choosing, creating, etc.

[0040] Example device

[0041] Figure 1 A schematic diagram of the hardware structure of an electronic device 100 that may implement embodiments of the present disclosure is shown. Figure 1As shown, the 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, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity light 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.

[0042] It should be understood that the structures illustrated in the embodiments of this disclosure do not constitute a specific limitation on the electronic device 100. In other embodiments of this disclosure, 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.

[0043] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution.

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

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

[0046] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple I2C buses. The processor 110 can couple to the touch sensor 180K, charger, flash, camera 193, etc., through different I2C bus interfaces. For example, the processor 110 can couple to the touch sensor 180K through the I2C interface, enabling the processor 110 and the touch sensor 180K to communicate through the I2C bus interface, thereby realizing the touch function of the electronic device 100.

[0047] The I2S interface can be used for audio communication. In some embodiments, the processor 110 may include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to enable communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the I2S interface to enable the function of answering phone calls through a Bluetooth headset.

[0048] The PCM interface can also be used for audio communication, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 can be coupled via the PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 via the PCM interface, enabling the function of answering phone calls through a Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

[0049] The UART interface is a universal serial data bus used for asynchronous communication. This bus can be a bidirectional communication bus. It converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is typically used to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 via the UART interface to implement Bluetooth functionality. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the UART interface to enable music playback through Bluetooth headphones.

[0050] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to enable the electronic device 100 to capture images. The processor 110 and the display screen 194 communicate via the DSI interface to enable the electronic device 100 to display images.

[0051] The GPIO interface can be configured via software. It can be configured as a control signal or a data signal. In some embodiments, the GPIO interface can be used to connect the processor 110 to a camera 193, a display screen 194, a wireless communication module 160, an audio module 170, a sensor module 180, etc. The GPIO interface can also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, etc.

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

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

[0054] 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 a 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 100 via the power management module 141.

[0055] 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, and supplies power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160. 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.

[0056] The wireless communication function of electronic device 100 can be implemented through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor, and baseband processor. Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in 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 tuning switches.

[0057] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G / 6G, 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. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0058] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through audio devices (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0059] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLAN) (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.

[0060] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), 5G and subsequent evolution standards, BT, GNSS, WLAN, NFC, FM, and / or IR technologies. GNSS may include Global Positioning System (GPS), Global Navigation Satellite System (GLONASS), BeiDou Navigation Satellite System (BDS), Quasi-Zenith Satellite System (QZSS), and / or Satellite-Based Augmentation System (SBAS).

[0061] 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 performs mathematical and geometric calculations and is used for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0062] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

[0063] Electronic device 100 can achieve shooting functions through an ISP, camera 193, video codec, GPU, display 194, and application processor. The ISP processes data fed back from the camera 193. For example, when taking a picture, the shutter is opened, light is transmitted through the lens to the camera's photosensitive element, the light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, converting it into a visible image. The ISP can also perform algorithmic optimization of image noise, brightness, and skin tone. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be located within the camera 193.

[0064] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0065] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0066] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0067] NPU stands for Neural Network (NN) Computing Processor. 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.

[0068] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0069] Internal memory 121 can be used to store computer executable program code, which includes instructions. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.). The data storage area may store data created during the use of electronic device 100 (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. Processor 110 executes various functional applications and data processing of electronic device 100 by running instructions stored in internal memory 121 and / or instructions stored in memory located in the processor.

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

[0071] The SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to make contact with and separate from the electronic device 100. The electronic device 100 can support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc. Multiple cards can be inserted into the same SIM card interface 195 simultaneously. The multiple cards can be of the same or different types. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to realize functions such as calls and data communication. In some embodiments, the electronic device 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0072] The software system of electronic device 100 can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This disclosure uses a layered architecture mobile operating system as an example to illustrate the software structure of electronic device 100.

[0073] Basic principles

[0074] As discussed above, with the rapid development of the Internet and IoT (Internet of Things) technologies, more and more functions rely on interconnectivity between devices. For example, people may expect to use interconnectivity to cast content played on their mobile phones to their living room TV, or users may expect to use Bluetooth to send files from one device to another. With the development of technology, such interconnectivity scenarios are becoming increasingly common in people's daily lives.

[0075] Such interconnectivity can bring numerous conveniences to users and improve the efficiency of people's production or life. However, it also brings additional costs to users, as they need to establish connections between different devices through a series of interactions. For example, people need to perform a series of interactions on the UI (User Interface) provided by the devices to achieve interconnection between different devices. However, as the scenarios for interconnection become increasingly diverse, users may need to spend more time finding the desired device to connect to from among many connectable devices, which will bring unexpected time costs to users.

[0076] Traditional UIs typically list connectable devices, but users may find it difficult to select the desired device from a large pool of options within a short timeframe. For example, in scenarios involving sharing and interconnecting applications, many connectable devices may share the same identifier (e.g., device model), which can be extremely confusing for users trying to choose the correct one.

[0077] According to embodiments of this disclosure, a user interface display scheme is provided. Specifically, a first device determines a currently connectable second device and presents a first animation of UI elements of the second device in a user interface (UI) to indicate the connectability of the second device. The first animation is determined based on characteristics of the second device, which indicate at least one of the following: the distance between the second device and the first device, connection information between the second device and the first device, and the device type of the second device. As one possible implementation, the first animation includes at least one of the following: dynamically changing the appearance of the UI elements; or moving the UI elements in the UI in a predetermined manner.

[0078] Based on this approach, the embodiments of this disclosure can present corresponding animations according to the characteristics of different connectable devices, enabling users to intuitively and quickly determine the device they wish to connect to based on the corresponding animations, thereby reducing the user's interaction costs.

[0079] The following will describe the interface display scheme according to the embodiments of this disclosure in different scenarios.

[0080] Example scenario: Interconnected sharing applications

[0081] The following description, in conjunction with the accompanying drawings, illustrates an example application of the disclosed solution in a shared application interconnection scenario.

[0082] Figure 2 A sample interface 200 for traditional sharing applications is shown. Figure 2 In the example, a mobile phone is used as the example device to present an example interface for interconnection 200. For example... Figure 2 As shown, users can perform data transfers by launching a sharing app (such as Huawei Share) on their phone. Figure 2 In the example, interface 200 provides five currently connectable devices, each represented by a corresponding UI element 210.

[0083] exist Figure 2 In this scenario, currently connectable devices can include the "living room TV", "HUAWEI P40", "master bedroom projector", "HUAWEI P40", and "second bedroom TV". It can be seen that different types of devices can be represented by different UI elements 210.

[0084] However, as interconnected scenarios become increasingly diverse, devices of the same type and with the same identifier may appear in the list of selectable devices. For example, in... Figure 2 In the example, both mobile devices are labeled "HUAWEI P40" and are both in a connectable state. In this case, if a user wants to establish a connection with one of these devices, the user needs to incur additional costs to distinguish between the two devices, which will bring additional interaction costs to the user.

[0085] For example, such as Figure 2 As shown, if the user cannot identify the desired device from the currently displayed connectable devices on interface 200, the user can, for example, click "No Receiver Found" to obtain more connectable devices. It should be understood that... Figure 2 The specific interface elements shown (e.g., the specific content of the text or the design of the icons) are merely examples; other forms of interfaces are also possible.

[0086] Figure 3AAn example interface 300A according to an embodiment of this disclosure is shown. Figure 3A As shown, the first device can provide an interface 300A to the user, in which UI elements corresponding to multiple currently connectable second devices determined by the first device can be presented.

[0087] For example, in interface 300A, UI element 310 corresponding to the device "TV in the living room", UI element 320 corresponding to the device "HUAWEI P40", UI element 330 corresponding to the device "projector in the master bedroom", UI element 340 corresponding to the device "HUAWEI P40", and image element 350 corresponding to the device "TV in the second bedroom" can be presented for users to select to establish a shared user connection.

[0088] Unlike the traditional interface 200, in interface 300A, different UI elements 310-350 can have different sizes. In some embodiments, the first device can determine the characteristics of the second device and determine the size of its corresponding UI element based on the characteristics of the second device.

[0089] In some embodiments, this characteristic can indicate the distance between the first device and the second device. For example, the first device can determine the distance based on the communication latency between the two devices. It should be understood that the first device can also determine the distance to the currently connectable second device based on any other suitable method, and this disclosure is not intended to limit it.

[0090] In some embodiments, the first device can determine the size of the UI element corresponding to the second device based on the distance between the first device and the second device. For example, the UI element corresponding to the second device, which is closer, may have a larger display size. Figure 3A As an example, UI element 340 has a smaller display size than UI element 320 to indicate that the distance between the second device "HUAWEI P40" corresponding to UI element 320 and the first device is less than the distance between the second device "HUAWEI P40" corresponding to UI element 340 and the first device.

[0091] This approach helps users more effectively identify the second device they wish to connect to. For example, a user might be in the living room and want to sync data with another phone, which could correspond to UI element 320. Meanwhile, in the master bedroom, there might also be another phone available for connection, which could correspond to UI element 340. Based on the size of the UI elements, users can quickly select the second device they wish to connect to from two devices with the same identifier.

[0092] In some embodiments, this feature may also indicate connection information between the first device and the second device, including but not limited to at least one of the following: number of connections, connection frequency, duration of the last connection, or the time when the last connection was disconnected.

[0093] In some embodiments, the first device can determine the display size of the UI element corresponding to the second device based on connection information. For example, the first device can determine the probability that the second device may be selected based on the connection information. Such probability can be determined based on one or more of the following: historical connection count, connection frequency within a preset time period, duration of the last connection, and the time of the last connection termination. For example, a second device with more historical connections may have a greater probability of being selected. Further, the first device can determine the display size of the UI element corresponding to the second device based on this probability.

[0094] For example, in Figure 3A In the example, the second device "HUAWEI P40" corresponding to UI element 320 is a device that the first device has recently connected to, while the second device "HUAWEI P40" corresponding to UI element 340 is a device that the first device has not recently connected to. Therefore, the display size of UI element 320 can be larger than that of UI element 340, so that users can visually determine that the second device "HUAWEI P40" corresponding to UI element 320 is the device they wish to select.

[0095] In some embodiments, this feature may also indicate the type of the second device. For example, such a type may include: a mobile phone, tablet, wristband, large screen, headphones, speaker, glasses, automotive, watch, or other types. Alternatively, such a type may also be used to indicate whether the second device is a device with a screen.

[0096] The type of the first device, such as the second device, determines the display size of the corresponding UI elements. For example, devices with screens can have larger display sizes than devices without screens, to encourage users to prioritize sharing on devices with screens.

[0097] Alternatively, the first device can determine the display size of the corresponding UI elements based on the type of the second device and the current usage scenario. For example, if a user expects to project an image onto another device at home, the first device could, for instance, make the UI elements corresponding to the second device, which has a larger screen, have a larger display size.

[0098] In some embodiments, the first device may also comprehensively determine the size of the UI element corresponding to the second device based on a combination of multiple characteristics discussed above. For example, the first device may comprehensively determine the probability of the corresponding second device being selected based on a combination of multiple factors including distance, connection information, and device type, and determine the display size of the UI element corresponding to the second device based on that probability.

[0099] For example, this probability can be determined based on a weighted sum of the quantified values ​​of the different characteristics mentioned above, where the different characteristics can be associated with different weights, for example. It should be understood that such different weights can be set according to actual needs. For example, such weights can also be determined based on user input, such as the user specifying that they prefer to be recommended devices that are closer. Alternatively, the user can define other appropriate types of characteristics, for example, the user might define that the signal strength of a second device is also considered when determining the display size of the corresponding UI element.

[0100] In some embodiments, the first device may also indicate one or more of the above characteristics of the second device by the display priority of different UI elements, wherein the display priority may indicate at least one of the following: the display size of the UI element, the display brightness of the UI element, or the display position of the UI element. Taking display position as an example of display priority, UI elements corresponding to the second device that are farther away from the first device may have a higher priority, for example, being displayed at the top of the display list. Alternatively, UI elements corresponding to the second device that have been connected to the first device more often may have a higher priority, for example, being displayed at the top of the display list. Or, UI elements corresponding to devices with screens may have a higher priority compared to screenless devices, for example, being displayed at the top of the display list.

[0101] In some embodiments, the first device may also adjust other display characteristics of UI elements based on a combination of one or more of the characteristics discussed above to indicate different characteristics of different second devices. Such display characteristics may include, but are not limited to, transparency or brightness, etc. For example, UI elements corresponding to a closer second device may have lower transparency, while UI elements corresponding to a more distant second device may have higher transparency.

[0102] In some embodiments, the first device can also indicate different characteristics of the second device by adjusting multiple display features. For example, for a closer second device, the first device can set its corresponding UI elements to have a larger size and lower transparency. For a more distant second device, the first device can set its corresponding UI elements to have a smaller size and higher transparency. In this way, users can intuitively perceive the characteristics of different second devices through visual features.

[0103] However, in practical use, such static display distinctions may be insufficient to adequately alert users. Currently, animations are applied to various aspects of terminal interaction to improve the user-friendliness of the interaction. Embodiments of this disclosure improve user interaction efficiency by applying animations to device interconnection scenarios.

[0104] Figure 3B An example interface 300B for presenting interconnected animations according to an embodiment of this disclosure is shown. Figure 3B As shown, the first device interface 300B displays animations corresponding to multiple UI elements. For example, UI elements 310 to 350 can periodically jump up and down within the interface 300B.

[0105] It should be understood that such bouncing animations are merely illustrative, and any other appropriate animations may be applied. Examples of such animations include, but are not limited to: dynamically changing the appearance of a UI element or moving a UI element within the UI in a predetermined manner. For example, dynamically changing the appearance of a UI element may include: dynamically changing the size of the UI element, dynamically changing the color of the UI element, dynamically changing the transparency of the UI element, or dynamically changing the brightness of the UI element, etc. Moving a UI element in a predetermined manner may include: translation animation or rotation animation. Figure 3B The bouncing animation shown is a type of motion animation.

[0106] In some embodiments, the first device may determine the degree of change in the animation based on one or more of the characteristics discussed above. Such degree of change may, for example, include the frequency or amplitude of the animation. For example, for a translation animation, the degree of change may include the amplitude or rate of translation. For a rotation animation, the degree of change may include the amplitude or rate of rotation. For a scaling animation, the degree of change may include the scaling ratio or the scaling rate. For a color change animation, the degree of change may include the degree of difference in color change or the rate of color change. For an opacity change animation, the degree of change may include the degree of difference in opacity change or the rate of opacity change. For a brightness change animation, the degree of change may include the degree of difference in brightness change or the rate of brightness change.

[0107] Furthermore, the degree of such variation can be controlled by adjusting the animation parameters to allow animations of the same type to be displayed differently. For example, such parameters can include time parameters, amplitude parameters, curve parameters, speed parameters, etc.

[0108] For example, with Figure 3B As an example, the first device can determine the jumping amplitude of different UI elements based on the distance between different second devices and the first device. Figure 3C Figure 300C illustrates the change in jump distance over time for an interconnected animation according to an embodiment of this disclosure. (As shown...) Figure 3C As shown, multiple lines 360-1 to 360-5 are used to describe the animations corresponding to UI elements 310 to 350 respectively.

[0109] Specifically, such as Figure 3C As shown, at time t1, UI elements 310 to 350 can be at the starting point, meaning the jump distance is 0. At time t2, UI elements 310 to 350 all jump to the maximum distance, which can correspond to the state displayed on interface 300B, for example. At time t3, UI elements 310 to 350 can jump back to the starting point.

[0110] like Figure 3C As shown, different UI elements can have different maximum jump distances. For example, the maximum distance for UI element 310 is D0, for UI element 320 it is D1, for UI element 330 it is D2, for UI element 340 it is D3, and for UI element 350 it is D4. It can be seen that UI element 320 has a more dramatic animation than UI element 340, for example, to indicate that the second device corresponding to UI element 320 is closer.

[0111] It should be understood that Figure 3C The jump distance shown as a change over time is merely illustrative. For example, the change in jump distance over time could be a straight line, curve, or broken line. This disclosure is not intended to be limiting. In some embodiments, one or more parameters of the jump distance change over time can be user-defined. For example, a user can input one or more parameters related to the process through an interface, thereby customizing the animation process. As another example, such one or more parameters can also be configurable by the upper-level application.

[0112] In some embodiments, the degree of change in the animation can also be determined solely based on connection information or device type. Alternatively, the first device can also determine the degree of change in the animation effect of the UI element corresponding to the second device based on two or more of the following: distance, connection information, and device type.

[0113] For example, the first device can determine the probability of selecting multiple second devices based on the methods discussed above, and determine the degree of change in the animation of UI elements applied to the second devices based on that probability. In this way, embodiments of this disclosure can use animation to indicate the characteristics of different second devices, making it easier for users to select the device they currently wish to connect to from multiple second devices.

[0114] In some embodiments, the type of animation applied to UI elements can be determined based on user input or rules specified by upper-level developers. For example, a user can configure a scaling animation instead of a bouncing animation to indicate the characteristics of a currently connectable second device.

[0115] In some embodiments, the differentiation in how animations are presented based on certain characteristics can be determined based on user input or rules specified by upper-level developers. For example, developers of sharing applications can configure rules to present rotation animations with different rotation rates based on the device type of a second device.

[0116] The above describes the animation of the matching phase in a sharing application interconnection scenario. In some embodiments, the user can select a second device to establish a connection through a UI interface. For example, in response to detecting the user's selection of UI element 320, the first device can initiate the establishment of a connection with the second device "HUAWEI P40".

[0117] In some embodiments, the first device may also present a new animation in the UI corresponding to the selected UI element to indicate the progress of the connection establishment. Figure 3D An example interface 300D according to an embodiment of this disclosure is shown. For example... Figure 3D As shown, the first device can display a progress animation 370-1 corresponding to the selected UI element 320 in the interface 300D. Such a progress animation 370-1 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0118] Figure 3E Another example interface 300E according to an embodiment of this disclosure is shown. For example... Figure 3E As shown, the first device can display a progress animation 370-2 corresponding to the selected UI element 320 in the interface 300E. Such a progress animation 370-2 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0119] In some embodiments, the animation used to indicate the progress of connection establishment may include, for example, animations of dynamically changing numbers or other display ratios. For example, the first device may indicate the progress of connection establishment by adjusting the color of a portion of the UI element 320. For example, the UI element 320 may reflect the progress of connection establishment by the ratio of black and colored portions. For example, in the initial connection establishment phase, the entire UI element 320 may be black and white, and as the connection establishment continues, the UI element may gradually change to color, and when the connection is finally established, the entire UI element may be in color.

[0120] It should be understood that other appropriate animations to represent progress are also possible, and this disclosure is not intended to limit the specific form of the animation. In some embodiments, the specific animation type may be determined, for example, based on user input or rules specified by the developer.

[0121] In some embodiments, the present disclosure may also generate a notification at the selected second device to indicate that the second device has been selected by the first device for connection. In some embodiments, if the second device corresponding to the UI element is a device with a screen, the selection of the UI element by the first device may trigger the second device to generate a notification in its provided UI. Such a notification may include, for example, a notification in screen-off mode, a floating window notification in screen-on mode, etc.

[0122] In some embodiments, if the second device is a device with a screen and the same sharing application is open, the second device may, for example, display UI elements of multiple devices that it can currently connect to in its UI. When the first device selects to connect to the second device, this selection may trigger the second device to display animations corresponding to the UI elements of the first device in its provided UI, indicating that the second device is currently selected by the first device.

[0123] Figure 3F An interface 300F presented at a second device according to an embodiment of this disclosure is shown. Figure 3F As shown, the second device may, for example, display UI elements of multiple currently connectable devices in interface 300F. If the first device selects the second device for connection, the second device may display an animation in interface 300F corresponding to the UI element 380 of the first device (e.g., "HUAWEI P40PRO"). For example, the UI element 380 may be displayed with a bouncing animation effect to indicate that the first device has selected the second device for connection.

[0124] In some embodiments, if the second device is a screenless device, the second device may notify the first device that it has been selected for connection, for example, by means of voice or vibration.

[0125] In some embodiments, during the connection establishment phase, if the second device is a device with a screen and a sharing application is open, in response to the initiation of the connection establishment between the first and second devices, the second device can display animations in its UI corresponding to UI elements of the first device to indicate the progress of the connection establishment with the first device. For example, in Figure 3E and 3F Similar to animations 370-1 and 370-2 shown, the second device can also have a progress animation of the UI element 380 during the connection establishment phase to indicate the progress of the first and second devices.

[0126] According to embodiments of this disclosure, during the connection establishment phase, presenting a progress animation helps the user better understand the connection establishment progress. Furthermore, by presenting a corresponding animation at the selected second device (if it is a device with a screen), the selected device can better understand the connection status.

[0127] In some embodiments, the present disclosure can also detect connection interruptions and render animations accordingly. For example, if a first device detects a connection interruption with a second device, the first device can render animations corresponding to UI elements in the UI to indicate the connection interruption.

[0128] Figure 3G An example interface 300G according to an embodiment of this disclosure is shown. For example... Figure 3G As shown, when a connection interruption with the second device is detected, the first device can gray out UI element 320 in interface 300G to indicate a connection interruption with the second device "HUAWEI P40" corresponding to UI element 320.

[0129] In some embodiments, the animation used to indicate a connection interruption may also include other types of animation, such as a cracking or black-and-white display of a UI element. This disclosure is not intended to limit the specific form of the animation.

[0130] In some embodiments, such an interruption may include an interruption unrelated to the user's operation of the first device. For example, the prompted interruption may include an interruption caused by the active disconnection of the second device, or an interruption automatically caused by excessive distance.

[0131] In some embodiments, if the second device is a device with a screen, the second device may also present an animation similarly to indicate an interruption of the connection with the first device.

[0132] This approach helps users better understand the connection status and avoids unfriendly interactions caused by performing certain operations during connection interruptions.

[0133] The above discussion, combined with application scenarios, explored different animations for different interconnection stages. By providing these animations, users of the devices can better establish interconnections between devices or understand the status of the connection.

[0134] Furthermore, it should be understood that although the above description of different animations in sharing application interconnection uses a mobile phone as an example, any other suitable screen device (e.g., large-screen devices, smartwatches, smart glasses, etc.) can perform the process discussed above to present corresponding animations to help users establish connections between devices or understand the status of the connection.

[0135] Example scenario: Bluetooth interconnection

[0136] The following description, in conjunction with the accompanying drawings, illustrates an example application of the solution disclosed herein in a Bluetooth interconnection scenario.

[0137] Figure 4 A sample interface 400 for traditional Bluetooth connectivity is shown. Figure 4 In the example, a mobile phone is used as the example device to present an example interface for interconnection 400. For example... Figure 4 As shown, users can connect devices via Bluetooth. Figure 4 In the example, interface 400 provides five currently connectable devices, each represented by a corresponding UI element 410.

[0138] exist Figure 4 In this scenario, currently connectable devices can include the "living room TV", "HUAWEI P40", "master bedroom projector", "HUAWEI P40", and "second bedroom TV". As can be seen, different types of devices can be represented by different UI elements 410.

[0139] As mentioned above Figure 2 Similarly, as interconnected scenarios become increasingly diverse, devices of the same type and with the same identifiers may appear in the list of selectable devices. For example, in... Figure 4 In the example, both mobile devices are labeled "HUAWEI P40" and are both in a connectable state. In this case, if a user wants to establish a connection with one of these devices, the user needs to incur additional costs to distinguish between the two devices, which will bring additional interaction costs to the user.

[0140] Figure 5A An example interface 500A according to an embodiment of this disclosure is shown. For example... Figure 5A As shown, in interface 500A, the first device can display animations corresponding to the UI elements of the second device (e.g., UI elements 510 to 550). Figure 5AAs shown, the animation can include left and right shaking animation.

[0141] It should be understood that the first device can be referenced as described above. Figures 3A to 3G The method discussed for determining the characteristics of a second device determines those characteristics (e.g., distance, connectivity information, or device type) and renders corresponding animations based on those characteristics. Examples of such animations include, but are not limited to, dynamically changing the appearance of a UI element or moving a UI element within the UI in a predetermined manner. For example, dynamically changing the appearance of a UI element can include: dynamically changing the size of the UI element, dynamically changing the color of the UI element, dynamically changing the transparency of the UI element, or dynamically changing the brightness of the UI element, etc. Moving a UI element in a predetermined manner can include: translation animation or rotation animation. Figure 5A The shaking animation shown is a type of displacement animation.

[0142] In some embodiments, the first device may determine the degree of change in the animation based on one or more of the characteristics discussed above. Such degree of change may, for example, include the frequency or amplitude of the animation. For example, for a translation animation, the degree of change may include the amplitude or rate of translation. For a rotation animation, the degree of change may include the amplitude or rate of rotation. For a scaling animation, the degree of change may include the scaling ratio or the scaling rate. For a color change animation, the degree of change may include the degree of difference in color change or the rate of color change. For an opacity change animation, the degree of change may include the degree of difference in opacity change or the rate of opacity change. For a brightness change animation, the degree of change may include the degree of difference in brightness change or the rate of brightness change.

[0143] Furthermore, the degree of such variation can be controlled by adjusting the animation parameters to allow animations of the same type to be displayed differently. For example, such parameters can include time parameters, amplitude parameters, curve parameters, speed parameters, etc.

[0144] For example, with Figure 5A As an example, the first device can determine the shaking amplitude of different UI elements based on the distance between different second devices and the first device. Figure 5B A graph 500B shows the change of wobbling distance over time in an interconnected animation according to an embodiment of this disclosure. (As shown...) Figure 5B As shown, multiple lines 560-1 to 560-5 are used to describe the animations corresponding to the UI elements 510 to 550, respectively.

[0145] Specifically, such as Figure 5BAs shown, at time t1, UI elements 510 to 550 can be at the starting point, meaning the shaking distance is 0. At time t2, UI elements 510 to 550 have all shaken to their maximum distance, which could correspond to the state displayed on interface 500A. At time t3, UI elements 510 to 550 can shake back to the starting point.

[0146] It should be understood that Figure 5B The swaying distance shown is merely illustrative. For example, the swaying distance over time could be any other curve, line, or straight line. This disclosure is not intended to be limiting. In some embodiments, one or more parameters of the swaying distance over time process can be user-defined. For example, a user can input one or more parameters related to this process through an interface, thereby customizing the animation process. As another example, such one or more parameters can also be configurable by the upper-level application.

[0147] like Figure 5B As shown, different UI elements can have different maximum wobbling distances. For example, the maximum distance for UI element 510 is D0, for UI element 520 it is D1, for UI element 530 it is D2, for UI element 540 it is D3, and for UI element 550 it is D4. It can be seen that UI element 520 has a larger wobbling distance than UI element 540, for example, to indicate that the second device corresponding to UI element 520 is closer.

[0148] In some embodiments, the degree of change in the animation can also be determined solely based on connection information or device type. Alternatively, the first device can also determine the degree of change in the animation of the UI element corresponding to the second device based on two or more of the following: distance, connection information, and device type.

[0149] The above describes the animation of the matching phase in a sharing application interconnection scenario. In some embodiments, the user can select a second device to establish a connection through a UI interface. For example, in response to detecting the user's selection of UI element 520, the first device can initiate the establishment of a connection with the second device "HUAWEI P40".

[0150] In some embodiments, the first device may also present a new animation in the UI corresponding to the selected UI element to indicate the progress of the connection establishment. Figure 5C An example interface 500C according to an embodiment of this disclosure is shown. For example... Figure 5CAs shown, the first device can display a progress animation 570-1 corresponding to the selected UI element 520 in the interface 500C. Such a progress animation 570-1 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0151] Figure 5D Another example interface 500D according to an embodiment of this disclosure is shown. For example... Figure 5D As shown, the first device can display a progress animation 570-2 corresponding to the selected UI element 520 in the interface 500D. Such a progress animation 570-2 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0152] In some embodiments, the animation used to indicate the progress of connection establishment may also include, for example, animations of dynamically changing numbers or other display ratios. For example, the first device may indicate the progress of connection establishment by adjusting the color of a portion of the UI element 520. For example, the UI element 520 may reflect the progress of connection establishment by the ratio of black and colored portions. For example, in the initial connection establishment phase, the entire UI element 520 may be black and white, and as the connection establishment continues, the UI element may gradually change to color, and when the connection is finally established, the entire UI element may be in color.

[0153] It should be understood that other appropriate animations to represent progress are also possible, and this disclosure is not intended to limit the specific form of the animation. In some embodiments, the specific animation type may be determined, for example, based on user input or rules specified by the developer.

[0154] In some embodiments, the present disclosure may also generate a notification at the selected second device to indicate that the second device has been selected by the first device for connection. In some embodiments, if the second device corresponding to the UI element is a device with a screen, the selection of the UI element by the first device may trigger the second device to generate a notification in its provided UI. Such a notification may include, for example, a notification in screen-off mode, a floating window notification in screen-on mode, etc.

[0155] In some embodiments, if the second device is a device with a screen and the Bluetooth application is open, the second device may, for example, display UI elements of multiple devices that it can currently connect to in its UI. When the first device chooses to connect to the second device, this choice may trigger the second device to display animations corresponding to the UI elements of the first device in its provided UI.

[0156] Figure 5E An interface 500E presented at a second device according to an embodiment of this disclosure is shown. Figure 5EAs shown, the second device may, for example, display UI elements of multiple currently connectable devices in interface 500E. If the first device selects the second device for connection, the second device may display an animation in interface 500E corresponding to the UI element 580 of the first device (e.g., "HUAWEI P40PRO"). For example, the second device may display the UI element 580 with a bouncing animation effect to indicate that the first device has selected the second device for connection.

[0157] In some embodiments, if the second device is a screenless device, the second device may notify the first device that it has been selected for connection, for example, by means of voice or vibration.

[0158] In some embodiments, during the connection establishment phase, if the second device is a device with a screen and has a Bluetooth application open, in response to the initiation of the connection establishment between the first and second devices, the second device can display animations in its UI corresponding to UI elements of the first device to indicate the progress of the connection establishment with the first device. For example, in Figure 5C and 5D Similar to animations 570-1 and 570-2, the second device can also display a progress animation corresponding to UI element 580 during the connection establishment phase to indicate the progress between the first and second devices. For example... Figure 5E As shown, the second device can display a progress bar in relation to UI element 580 to indicate the connection progress between the first and second devices.

[0159] According to embodiments of this disclosure, during the connection establishment phase, presenting a progress animation helps the user better understand the connection establishment progress. Furthermore, by presenting a corresponding animation at the selected second device (if it is a device with a screen), the selected device can better understand the connection status.

[0160] In some embodiments, embodiments of this disclosure can also detect connection interruptions and render animations accordingly. For example, if a first device detects a connection interruption with a second device, the first device can render an animation in the UI corresponding to the corresponding UI element to indicate the connection interruption.

[0161] Figure 5F An example interface 500F according to an embodiment of this disclosure is shown. For example... Figure 5F As shown, when a connection interruption with the second device is detected, the first device can display a cracking animation corresponding to UI element 520 in interface 500F to indicate the connection interruption with the second device "HUAWEI P40" corresponding to UI element 520.

[0162] In some embodiments, the animation used to indicate a connection interruption may also include other types of animation, such as graying out a UI element. This disclosure is not intended to limit the specific form of the animation.

[0163] In some embodiments, such an interruption may include an interruption unrelated to the user's operation of the first device. For example, the prompted interruption may include an interruption caused by the active disconnection of the second device, or an interruption automatically caused by excessive distance.

[0164] In some embodiments, if the second device is a device with a screen, the second device may also present an animation similarly to indicate an interruption of the connection with the first device.

[0165] In this way, the embodiments of this disclosure can help users better understand the status of the connection and avoid the problem of unfriendly interaction caused by performing certain operations during connection interruption.

[0166] The above discussion, using Bluetooth interconnection scenarios, covered different animations for different interconnection stages. By providing these animations, users can better establish Bluetooth interconnection between devices or understand the status of the Bluetooth connection.

[0167] Furthermore, it should be understood that although the above description of different animations in Bluetooth connectivity uses a mobile phone as an example, any other suitable device with a screen (e.g., large-screen devices, smartwatches, smart glasses, etc.) can perform the process discussed above to present corresponding animations to help users establish connections between devices or understand the connection status.

[0168] Example scenario: Wireless interconnection

[0169] The following description, in conjunction with the accompanying drawings, illustrates an example application of the disclosed solution in a wireless interconnection scenario.

[0170] Figure 6 A sample interface 600 for traditional Bluetooth connectivity is shown. Figure 6 In the example, a mobile phone is used as the example device to present an example interface for interconnection, 600. For example... Figure 6 As shown, users can connect devices via Bluetooth. Figure 6 In the example, interface 600 provides four currently connectable access devices, each represented by a corresponding UI element 610.

[0171] exist Figure 6 In this scenario, the currently connectable access devices can include "Router A", "Router B", "Router C", and "Router D". As mentioned above... Figure 2Similarly, as interconnected scenarios become increasingly diverse, users may find it difficult to select the access device they wish to connect to from the currently available access devices, which will bring additional interaction costs to users.

[0172] Figure 7A An example interface 700A according to an embodiment of this disclosure is shown. For example... Figure 7A As shown, in interface 700A, the first device can display animations corresponding to the UI elements of the second device (e.g., UI elements 710 to 740). Figure 7A As shown, the animation can include left and right shaking animation.

[0173] It should be understood that the first device can be referenced as described above. Figures 3A to 3G The method discussed for determining the characteristics of a second device determines those characteristics (e.g., distance, connectivity information, or device type) and renders corresponding animations based on those characteristics. Examples of such animations include, but are not limited to, dynamically changing the appearance of a UI element or moving a UI element within the UI in a predetermined manner. For example, dynamically changing the appearance of a UI element can include: dynamically changing the size of the UI element, dynamically changing the color of the UI element, dynamically changing the transparency of the UI element, or dynamically changing the brightness of the UI element, etc. Moving a UI element in a predetermined manner can include: translation animation or rotation animation. Figure 7A The shaking animation shown is a type of displacement animation.

[0174] In some embodiments, the first device may determine the degree of change in the animation based on one or more of the characteristics discussed above. Such degree of change may, for example, include the frequency or amplitude of the animation. For example, for a translation animation, the degree of change may include the amplitude or rate of translation. For a rotation animation, the degree of change may include the amplitude or rate of rotation. For a scaling animation, the degree of change may include the scaling ratio or the scaling rate. For a color change animation, the degree of change may include the degree of difference in color change or the rate of color change. For an opacity change animation, the degree of change may include the degree of difference in opacity change or the rate of opacity change. For a brightness change animation, the degree of change may include the degree of difference in brightness change or the rate of brightness change.

[0175] Furthermore, the degree of such variation can be controlled by adjusting the animation parameters to allow animations of the same type to be displayed differently. For example, such parameters can include time parameters, amplitude parameters, curve parameters, speed parameters, etc.

[0176] For example, with Figure 7AAs an example, the first device can determine the shaking amplitude of different UI elements based on the distance between different second devices and the first device. Figure 7B A graph 700B shows the change of wobbling distance over time in an interconnected animation according to an embodiment of this disclosure. (As shown...) Figure 7B As shown, multiple lines 750-1 to 750-4 are used to describe the animations corresponding to the UI elements 710 to 740, respectively.

[0177] Specifically, such as Figure 7C As shown, at time t1, UI elements 710 to 740 can be at the starting point, meaning the shaking distance is 0. At time t2, UI elements 710 to 740 have all shaken to their maximum distance, which could correspond to the state displayed on interface 700A. At time t3, UI elements 710 to 740 can shake back to the starting point.

[0178] like Figure 7B As shown, different UI elements can have different maximum shaking distances. For example, the maximum distance for UI element 710 is D0, for UI element 720 it is D1, for UI element 730 it is D2, and for UI element 740 it is D3. It can be seen that UI element 710 has a greater shaking distance than UI element 720, indicating that the second device corresponding to UI element 710 is closer.

[0179] It should be understood that Figure 7B The swaying distance shown over time is merely illustrative. For example, the change in swaying distance over time could be any other polyline, straight line, or curved polyline. This disclosure is not intended to be limiting. In some embodiments, one or more parameters of the swaying distance change over time can be user-defined. For example, a user can input one or more parameters related to this process through an interface, thereby customizing the animation process. As another example, such one or more parameters can also be configurable by the upper-level application.

[0180] In some embodiments, the degree of change in the animation can also be determined solely based on historical connections or device type. Alternatively, the first device can also determine the degree of change in the animation of the UI element corresponding to the second device based on two or more of distance, historical connections, and device type.

[0181] The above describes the animation of the matching phase in a shared application interconnection scenario. In some embodiments, a user can select a second device to establish a connection via a UI interface. Exemplarily, in response to detecting a user selection of UI element 710, the first device can initiate the establishment of a connection with the second device, "Router A".

[0182] In some embodiments, the first device may also present a new animation in the UI corresponding to the selected UI element to indicate the progress of the connection establishment. Figure 7C An example interface 700C according to an embodiment of this disclosure is shown. For example... Figure 7C As shown, the first device can display a progress animation 760-1 corresponding to the selected UI element 710 in the interface 700C. Such a progress animation 760-1 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0183] Figure 7D Another example interface 700D according to an embodiment of this disclosure is shown. For example... Figure 7D As shown, the first device can display a progress animation 760-2 corresponding to the selected UI element 710 in the interface 700D. Such a progress animation 760-2 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0184] In some embodiments, the animation used to indicate the progress of connection establishment may include, for example, animations of dynamically changing numbers or other display ratios. For example, the first device may indicate the progress of connection establishment by adjusting the color of a portion of the UI element 710. For example, the UI element 710 may reflect the progress of connection establishment by the ratio of black and colored portions. For example, in the initial connection establishment phase, the entire UI element 710 may be black and white, and as the connection establishment continues, the UI element may gradually change to color, and when the connection is finally established, the entire UI element may be in color.

[0185] It should be understood that other appropriate animations to represent progress are also possible, and this disclosure is not intended to limit the specific form of the animation. In some embodiments, the specific animation type may be determined, for example, based on user input or rules specified by the developer.

[0186] In some embodiments, the present disclosure may also generate a notification at the selected second device to indicate that the second device has been selected by the first device for connection. In some embodiments, if the second device corresponding to the UI element is a device with a screen, the selection of the UI element by the first device may trigger the second device to generate a notification in its provided UI. Such a notification may include, for example, a notification in screen-off mode, a floating window notification in screen-on mode, etc.

[0187] In some embodiments, if the second device is a device with a screen and a wireless application is enabled, the second device may, for example, display UI elements of multiple devices that it can currently connect to in its UI. When the first device chooses to connect to the second device, this choice may trigger the second device to display an animation in its provided UI corresponding to the UI elements of the first device.

[0188] In some embodiments, if the second device is a screenless device, the second device may notify the first device that it has been selected for connection, for example, by means of voice or vibration.

[0189] In some embodiments, during the connection establishment phase, if the second device is a device with a screen and has a wireless application open, in response to the initiation of the connection establishment between the first and second devices, the second device can display animations in its UI corresponding to UI elements of the first device to indicate the progress of the connection establishment. For example, in Figure 7C and 7D Similar to animations 760-1 and 760-2, the second device can also display animations corresponding to the UI elements of the first device during the connection establishment phase to indicate the progress of the first and second devices.

[0190] According to embodiments of this disclosure, during the connection establishment phase, presenting a progress animation helps the user better understand the connection establishment progress. Furthermore, by presenting a corresponding animation at the selected second device (if it is a device with a screen), the selected device can better understand the connection status.

[0191] In some embodiments, embodiments of this disclosure are also capable of detecting connection interruptions and rendering animations accordingly. For example, if a first device detects a connection interruption with a second device, the first device may render animations corresponding to UI elements in the UI to indicate the connection interruption.

[0192] Figure 7E An example interface 700E according to an embodiment of this disclosure is shown. For example... Figure 7E As shown, when a connection interruption with the second device is detected, the first device can display a blurred animation corresponding to UI element 710 in interface 700E to indicate the connection interruption with the first device "Router A" corresponding to UI element 710.

[0193] In some embodiments, the animation used to indicate a connection interruption may also include other types of animation, such as graying out a UI element. This disclosure is not intended to limit the specific form of the animation.

[0194] In some embodiments, such an interruption may include an interruption unrelated to the user's operation of the first device. For example, the prompted interruption may include an interruption caused by the active disconnection of the second device, or an interruption automatically caused by excessive distance.

[0195] In some embodiments, if the second device is a device with a screen, the second device may also present an animation similarly to indicate an interruption of the connection with the first device.

[0196] In this way, the embodiments of this disclosure can help users better understand the status of the connection and avoid the problem of unfriendly interaction caused by performing certain operations during connection interruption.

[0197] The above discussion of different animations at different stages of wireless interconnection scenarios helps users better establish wireless interconnection between devices or understand the status of wireless connections.

[0198] Furthermore, it should be understood that although the above description of different animations in wireless connectivity uses a mobile phone as an example, any other suitable device with a screen (e.g., large-screen devices, smartwatches, smart glasses, etc.) can perform the process discussed above to present corresponding animations to help users establish connections between devices or understand the status of the connection.

[0199] Example scenario: IoT interconnection

[0200] The following description, in conjunction with the accompanying drawings, illustrates an example application of the solution disclosed herein in an IoT interconnection scenario.

[0201] Figure 8 An example interface 800 for traditional IoT interconnection is shown. Figure 8 In the example, a mobile phone is used as the example device to present an example interface for interconnection, 800. For example... Figure 8 As shown, the example interface 800 can be, for example, the negative one screen of a mobile phone interface, which provides three currently connectable IoT devices (e.g., speakers) in the form of cards, with each speaker represented by a corresponding UI element 810.

[0202] exist Figure 8 In this scenario, the currently connectable access devices can include three IoT devices named "speakers". As mentioned above... Figure 2 Similarly, as interconnected scenarios become increasingly diverse, users may find it difficult to select the IoT device they wish to connect to from the currently available IoT devices, which will impose additional interaction costs on users.

[0203] Figure 9A An example interface 900A according to an embodiment of this disclosure is shown. For example... Figure 9A As shown, in interface 900A, the first device can display animations corresponding to the UI elements of the second device (e.g., UI elements 910 to 930). Figure 9A As shown, the animation can include left and right swinging animation.

[0204] It should be understood that the first device can be referenced as described above. Figures 3A to 3G The method discussed for determining the characteristics of a second device determines those characteristics (e.g., distance, connectivity information, or device type) and renders corresponding animations based on those characteristics. Examples of such animations include, but are not limited to, dynamically changing the appearance of a UI element or moving a UI element within the UI in a predetermined manner. For example, dynamically changing the appearance of a UI element can include: dynamically changing the size of the UI element, dynamically changing the color of the UI element, dynamically changing the transparency of the UI element, or dynamically changing the brightness of the UI element, etc. Moving a UI element in a predetermined manner can include: translation animation or rotation animation.

[0205] In some embodiments, the first device may determine the degree of change in the animation based on one or more of the characteristics discussed above. Such degree of change may, for example, include the frequency or amplitude of the animation. For example, for a translation animation, the degree of change may include the amplitude or rate of translation. For a rotation animation, the degree of change may include the amplitude or rate of rotation. For a scaling animation, the degree of change may include the scaling ratio or the scaling rate. For a color change animation, the degree of change may include the degree of difference in color change or the rate of color change. For an opacity change animation, the degree of change may include the degree of difference in opacity change or the rate of opacity change. For a brightness change animation, the degree of change may include the degree of difference in brightness change or the rate of brightness change.

[0206] Furthermore, the degree of such variation can be controlled by adjusting the animation parameters to allow animations of the same type to be displayed differently. For example, such parameters can include time parameters, amplitude parameters, curve parameters, speed parameters, etc.

[0207] For example, with Figure 9A As an example, the first device can determine the maximum swing angle of different UI elements based on the distance between the second device and the first device. Figure 9B Figure 900B shows the change of the swing angle over time in an interconnected animation according to an embodiment of this disclosure. (As shown...) Figure 9B As shown, multiple lines 940-1 to 940-3 are used to describe the animations corresponding to the UI elements 910 to 930, respectively.

[0208] Specifically, such as Figure 9B As shown, at time t1, UI elements 910 to 930 can be at the starting point, that is, the swing angle is 0. At time t2, UI elements 910 to 930 all swing to the maximum swing angle, which can correspond to the state displayed by interface 900A, for example. At time t3, UI elements 910 to 940 can swing back to the starting point.

[0209] like Figure 9B As shown, different UI elements can have different maximum swing angles. For example, the maximum swing angle of UI element 910 is A0, the maximum swing angle of UI element 920 is A1, and the maximum swing angle of UI element 930 is A2. It can be seen that UI element 910 has a more dramatic animation (i.e., a larger swing angle) than UI element 920, to indicate that the second device corresponding to UI element 910 is closer.

[0210] It should be understood that Figure 9B The swing angle variation over time shown is merely illustrative. For example, the swing distance variation over time could be a straight line, curve, or broken line. This disclosure is not intended to be limiting. In some embodiments, one or more parameters of the swing angle variation over time process can be user-defined. For example, a user can input one or more parameters related to the process through an interface to customize the animation process. As another example, such one or more parameters can also be configurable by the upper-level application.

[0211] In some embodiments, the degree of change in the animation can also be determined solely based on historical connections or device type. Alternatively, the first device can also determine the degree of change in the animation of the UI element corresponding to the second device based on two or more of distance, historical connections, and device type.

[0212] The above describes the animation of the matching phase in a shared application interconnection scenario. In some embodiments, a user can select a second device to establish a connection via a UI interface. Exemplarily, in response to detecting a user selection of UI element 910, the first device can initiate the establishment of a connection with the second device, "Router A".

[0213] In some embodiments, the first device may also present a new animation in the UI corresponding to the selected UI element to indicate the progress of the connection establishment. Figure 9C An example interface 900C according to an embodiment of this disclosure is shown. For example... Figure 9C As shown, the first device can display a progress animation 950-1 corresponding to the selected UI element 910 in the interface 900C. Such a progress animation 950-1 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0214] Figure 9D Another example interface 900D according to an embodiment of this disclosure is shown. For example... Figure 9D As shown, the first device can display a progress animation 950-2 corresponding to the selected UI element 910 in the interface 900D. Such a progress animation 950-2 can be displayed, for example, through a dynamically changing progress bar to indicate the current progress of establishing a connection.

[0215] In some embodiments, the animation used to indicate the progress of connection establishment may include, for example, animations of dynamically changing numbers or other display ratios. For example, the first device may indicate the progress of connection establishment by adjusting the color of a portion of the UI element 910. For example, the UI element 910 may reflect the progress of connection establishment by the ratio of black and colored portions. For example, in the initial connection establishment phase, the entire UI element 910 may be black and white, and as the connection establishment continues, the UI element may gradually change to color, and when the connection is finally established, the entire UI element may be in color.

[0216] It should be understood that other appropriate animations to represent progress are also possible, and this disclosure is not intended to limit the specific form of the animation. In some embodiments, the specific animation type may be determined, for example, based on user input or rules specified by the developer.

[0217] In some embodiments, the present disclosure may also generate a notification at the selected second device to indicate that the second device has been selected by the first device for connection. In some embodiments, if the second device corresponding to the UI element is a device with a screen, the selection of the UI element by the first device may trigger the second device to generate a notification in its provided UI. Such a notification may include, for example, a notification in screen-off mode, a floating window notification in screen-on mode, etc.

[0218] In some embodiments, if the second device is a device with a screen and an IoT connectivity application is open, the second device can, for example, display UI elements of multiple devices it can currently connect to in its UI. When the first device selects to connect to the second device, this selection can trigger the second device to display an animation corresponding to the UI element of the first device in its provided UI. For example, if the user selects UI element 910 in the interface of the first device, and if the second device corresponding to the UI element is a speaker with a screen, the second device can display an animation corresponding to the UI element of the first device in its provided UI.

[0219] In some embodiments, if the second device is a screenless device, the second device may notify the first device that it has been selected for connection, for example, by means of voice or vibration.

[0220] In some embodiments, during the connection establishment phase, if the second device is a device with a screen and has an IoT connectivity application open, in response to the initiation of the connection establishment between the first and second devices, the second device can display animations in its UI corresponding to UI elements of the first device to indicate the progress of the connection establishment. For example, in... Figure 9C and 9D Similar to animations 950-1 and 950-2, the second device can also display animations corresponding to the UI elements of the first device during the connection establishment phase to indicate the progress between the first and second devices.

[0221] According to embodiments of this disclosure, during the connection establishment phase, presenting a progress animation helps the user better understand the connection establishment progress. Furthermore, by presenting a corresponding animation at the selected second device (if it is a device with a screen), the selected device can better understand the connection status.

[0222] In some embodiments, embodiments of this disclosure are also capable of detecting connection interruptions and rendering animations accordingly. For example, if a first device detects a connection interruption with a second device, the first device may render animations corresponding to UI elements in the UI to indicate the connection interruption.

[0223] Figure 9E An example interface 900E according to an embodiment of this disclosure is shown. For example... Figure 9E As shown, when a connection interruption with the second device is detected, the first device can display a blurring animation corresponding to UI element 910 in interface 900E to indicate the connection interruption with the second device "speaker" corresponding to UI element 910.

[0224] In some embodiments, the animation used to indicate a connection interruption may also include other types of animation, such as graying out a UI element. This disclosure is not intended to limit the specific form of the animation.

[0225] In some embodiments, such an interruption may include an interruption unrelated to the user's operation of the first device. For example, the prompted interruption may include an interruption caused by the active disconnection of the second device, or an interruption automatically caused by excessive distance.

[0226] In some embodiments, if the second device is a device with a screen, the second device may also present an animation similarly to indicate an interruption of the connection with the first device.

[0227] In this way, the embodiments of this disclosure can help users better understand the status of the connection and avoid the problem of unfriendly interaction caused by performing certain operations during connection interruption.

[0228] The above discussion of different animations at different stages of wireless interconnection scenarios helps device users better establish IoT interconnection between devices or understand the status of IoT connections.

[0229] Furthermore, it should be understood that although the above description of different animations in IoT interconnection uses a mobile phone as an example, any other suitable device with a screen (e.g., large-screen devices, smartwatches, smart glasses, etc.) can perform the process discussed above to present corresponding animations to help users establish connections between devices or understand the status of the connections.

[0230] System Implementation

[0231] Figure 10 A schematic diagram of a system framework 1000 for implementing interconnected animation effects or functions according to embodiments of the present disclosure is shown. In some embodiments, the animation capabilities of the UI framework are implemented based on the overall architecture of the electronic device's operating system (e.g., Android or HarmonyOS), and may include mainstream four-layer logic processing, with the data processing flow presented to the user from the bottom up. Users can primarily use and experience the animation functions at the application layer. In embodiments of the present disclosure, the interaction relationship between the desktop and the UI framework capabilities is as follows: Figure 10 As described. Specifically, such as Figure 10 As shown, the system framework 1000 may include an application layer 1010, an application framework layer 1030, a hardware abstraction layer 1050, and a kernel layer 1070. The application layer 1010 may include interconnected applications 1012, such as sharing applications, Bluetooth applications, wireless applications, or IoT applications. The interconnected applications 1012 involve various operations 1014. Operations 1014 may include, for example, matching, establishing a connection, disconnecting, or others as discussed above. The application framework layer 1030 may include system services 1032 and extended services 1034. System services 1032 may include various system services, such as Service 1033. Extended services 1034 may include various extended services, such as HwSDK 1035. The hardware abstraction layer (HAL) 1050 may include HAL 3.0 1052 and the Algorithm 1054. The kernel layer 1070 may include drivers 1072 and physical devices 1074. Physical device 1074 can provide raw parameter streams to driver 1072, while driver 1072 can provide functional processing parameter streams to physical device 1074. For example... Figure 10As further shown, the UI framework 1020 for implementing the interconnected animation 1025 can be implemented between the application layer 1010 and the application framework layer 1030. The UI framework 1020 may include platform capabilities 1022 and system capabilities 1024, both of which can be used to provide the interconnected animation 1025. The interconnected animation 1025 can then be provided to the operation 1014 of the application layer 1010.

[0232] Figure 11 A schematic diagram illustrating the relationship between the application side and the UI framework side involved in the interconnected animation effects capabilities or functions according to embodiments of this disclosure is shown. Figure 11 As shown, the application side 1110 may include an interconnected application 1115, which involves operations such as matching 1112, establishing a connection 1114, disconnecting 1116, and others 1118. The UI framework side 1150 may include UI framework animation 1152, which can implement interconnected animation capabilities 1154. The interconnected animation capabilities 1154 can be implemented through AAR format 1151, JAR format 1153, and system interface 1155, etc. The application side 1110 can call the interconnected animation effects capabilities or functions provided by the UI framework side 1150 through integration 1130 and calling 1140, etc. Through the interaction between the application side 1110 and the UI framework side 1150, the embodiments of this disclosure can provide corresponding animations according to different operations, thereby helping users to achieve interconnection between devices or understand the connection status.

[0233] Figure 12 A schematic diagram illustrating three specific ways in which the interconnected animation effect capability or function is implemented according to embodiments of the present disclosure is shown. Figure 12As shown, the relationship 1201 between AAR format 1151 and the system of electronic device 100 is as follows: AAR format 1151 is a binary-formatted capability package, providing integration capabilities to the application side of the system. It can freely control its version rhythm and does not follow the system. The relationship 1203 between JAR format 1153 and the system of electronic device 100 is as follows: JAR format 1153 is a binary-formatted capability package, providing capabilities to all components in the system. It can freely control its version rhythm and does not follow the system. The relationship 1205 between system interface 1155 and the system of electronic device 100 is as follows: System interface 1155 is the framework layer interface in the system version, providing capabilities to all components in the system and following system upgrades. More specifically, the integration method can refer to AAR and JAR packages, and the calling method can refer to the system interface. Therefore, the application scenarios of the embodiments of this disclosure are not limited to any specific scenario; only the way the interconnected animation effects are displayed may differ. That is to say, the functions of the various methods described above can be implemented through AAR format files, JAR format files, and / or the system interface of electronic device 100. In this way, the ability or function of interconnected animation effects can be easily and conveniently implemented and provided to interconnected applications of electronic devices, such as sharing applications, Bluetooth applications, wireless applications, or IoT applications.

[0234] Figure 13 An implementation framework 1300 for implementing interconnected animations or capabilities according to an embodiment of this disclosure is shown. For example... Figure 13 As shown, the frame 1300 includes multiple stages. First, it can identify the device type 1310 of the current device. Such device type 1310 can include: mobile phone, tablet, wristband, large screen, headphones, speaker, glasses, car accessory, or watch, etc. Alternatively, such device type 1310 can also indicate whether it is a device with a screen.

[0235] like Figure 13 As shown, connection phase 1320 can also be defined, and different animations can be applied to different connection phases 1320, as discussed above. Such connection phases 1320 may include matching, establishing a connection, disconnecting, or other phases discussed above.

[0236] In some embodiments, a motion effect type setting 1330 corresponding to the connection phase 1320 may also be determined. Such motion effect types may include, for example, jitter, breakage, color metamorphosis, scaling, or other custom motion effect types.

[0237] In some embodiments, a human factors rule table 1350 may also be obtained to implement the differentiated representation of motion effects 1340. Such a human factors rule table may be determined based on user habits, for example, users typically expect to use devices that are closer during the connection establishment phase, and therefore devices that are closer will have larger jump amplitudes. It should be understood that such a human factors rule table 1350 may be specified by the user or by the application developer.

[0238] In some embodiments, a differentiated presentation 1340 can be implemented by parametrically controlling the motion effects 1360. Specifically, the type of motion effect to be used can be determined based on the device type 1310, connection stage 1320, and motion effect type setting 1330, and the parameters of the motion effect can be adjusted according to the human factors rule table 1350, thereby achieving a personalized motion effect presentation, which helps users establish connections between devices or understand the status of the connection.

[0239] Example process

[0240] Figure 14 A flowchart illustrating an example process 1400 of a graphical interface method according to an embodiment of the present disclosure is shown. Process 1400 may, for example, be performed by a first device (e.g., referring to...). Figure 1 The equipment under discussion (100) is used for implementation.

[0241] like Figure 14 As shown in box 1410, the first device determines the second device that can be connected at present.

[0242] In box 1420, the first device presents a first animation corresponding to a UI element of the second device in the user interface (UI). The first animation is used to indicate the connectivity of the second device, wherein the first animation is determined based on the characteristics of the second device, which indicate at least one of the following: the distance between the second device and the first device, the connection information between the second device and the first device, and the device type of the second device; wherein the first animation includes at least one of the following: dynamically changing the appearance of the UI element; or, causing the UI element to move in a predetermined manner in the UI of the first device.

[0243] In some embodiments, the first animation is determined based on distance, and the degree of change in the first animation indicates the magnitude of the distance, including the frequency or amplitude of the first animation.

[0244] In some embodiments, the first animation is determined based on the number of connections, and the degree of change in the first animation indicates connection information, including the number of connections, connection frequency, and duration of the last connection. In some embodiments, the first animation is determined based on the device type, and the degree of change in the first animation indicates whether the device type is a device with a screen, including the frequency or amplitude of the first animation.

[0245] In some embodiments, the initial size of a UI element is determined based on at least one of distance, connectivity information, and device type.

[0246] In some embodiments, the UI element is a first UI element, and the UI of the first device also includes a second UI element of a third device that the first device can currently connect to; the first UI element is displayed in the UI of the first device with a higher display priority than the second UI element if at least one of the following conditions is met: the distance from the third device to the first device is greater than the distance from the second device to the first device; or, the number of connections between the third device and the first device is less than the number of connections between the second device and the first device; or, the connection frequency between the third device and the first device is less than the connection frequency between the second device and the first device; or, the duration of the last connection between the third device and the first device is less than the duration of the last connection between the second device and the first device; or, the last disconnection time between the third device and the first device is later than the last disconnection time between the second device and the first device; or, the third device is a screenless device and the second device is a screen-equipped device, wherein the display priority indicates at least one of the following: the display size of the UI element, the display brightness of the UI element, or the display position of the UI element.

[0247] In some embodiments, process 1400 further includes: in response to receiving a selection of a UI element, the first device initiates the establishment of a connection with the second device; and in the UI of the first device, a second animation corresponding to the UI element is presented, the second animation being used to indicate the progress of the connection establishment.

[0248] In some embodiments, process 1400 further includes: in response to receiving a selection of a UI element, the first device triggers the second device to provide an alert, the alert indicating that the second device has been selected by the first device for connection.

[0249] In some embodiments, the second device provides a reminder by: if the second device is a device with a screen, displaying a third animation corresponding to a UI element of the first device in the UI of the second device, the third animation serving as a reminder.

[0250] In some embodiments, process 1400 further includes: if the second device is a device with a screen, the first device triggers the second device to respond to the first device initiating the establishment of a connection with the second device by displaying a fourth animation corresponding to a UI element of the first device in the UI of the second device, the fourth animation being used to indicate the progress of the connection establishment with the first device.

[0251] In some embodiments, process 1400 further includes: in response to the first device detecting an interruption in the connection with the second device, the first device presents a fifth animation in its own UI corresponding to a UI element of the second device, the fifth animation indicating the interruption of the connection.

[0252] Based on the process discussed above, the embodiments of this disclosure can present corresponding animations according to the characteristics of different connectable devices, enabling users to intuitively and quickly determine the device they wish to connect to based on the corresponding animations, thereby reducing the user's interaction costs.

Claims

1. A graphical user interface display method, comprising: The first device determines the currently connectable second and third devices; as well as The first device presents a first animation corresponding to a first UI element representing the second device and a second animation corresponding to a second UI element representing the third device in the user interface (UI). The first animation is used to indicate the connectivity of the second device, and the second animation is used to indicate the connectivity of the third device. The first animation is determined based on a first characteristic of the second device, the first characteristic indicating at least one of the following: the distance between the second device and the first device, the connection information between the second device and the first device, and the device type of the second device; The second animation is determined based on a second characteristic of the third device, which indicates at least one of the following: the distance between the third device and the first device, the connection information between the third device and the first device, and the device type of the third device; The first animation includes at least one of the following: Dynamically change the appearance of the first UI element; or, The first UI element is moved in a predetermined manner within the UI of the first device; The second animation includes at least one of the following: Dynamically change the appearance of the second UI element; or, The second UI element moves in a predetermined manner within the UI of the first device.

2. The method of claim 1, wherein the first animation is determined based on the distance, and the degree of change of the first animation indicates the magnitude of the distance, the degree of change including the frequency or amplitude of the first animation; the second animation is determined based on the distance, and the degree of change of the first animation indicates the magnitude of the distance, the degree of change including the frequency or amplitude of the second animation.

3. The method of claim 1, wherein the first animation is determined based on the number of connections, and the degree of change of the first animation indicates the connection information, the connection information including at least one of the following: number of connections, connection frequency, duration of the last connection, or time of the last connection disconnection, and the degree of change includes the frequency or amplitude of the first animation; The second animation is determined based on the number of connections, and the degree of change of the second animation indicates the connection information, which includes at least one of the following: number of connections, connection frequency, duration of the last connection, or time of the last connection termination. The degree of change includes the frequency or amplitude of the second animation.

4. The method of claim 1, wherein the first animation is determined based on the device type, and the degree of variation of the first animation indicates whether the device type is a device with a screen, the degree of variation including the frequency or amplitude of the first animation; The second animation is determined based on the device type, and the degree of change in the second animation indicates whether the device type is a device with a screen, the degree of change including the frequency or amplitude of the second animation.

5. The method according to any one of claims 1 to 4, wherein the initial size of the first UI element is determined based on at least one of the distance, the connection information, and the device type; and the initial size of the second UI element is determined based on at least one of the distance, the connection information, and the device type.

6. The method according to any one of claims 1 to 4, further comprising: In response to receiving a selection of the first UI element, the first device initiates the establishment of a connection with the second device; as well as In the UI of the first device, a third animation corresponding to the first UI element is presented, and the third animation indicates the progress of the connection establishment.

7. The method according to claim 6, further comprising: In response to receiving the selection of the first UI element, the first device triggers the second device to provide an alert, the alert indicating that the second device has been selected by the first device for connection.

8. The method of claim 7, wherein the second device provides the reminder by: If the second device is a device with a screen, a fourth animation corresponding to a third UI element representing the first device is presented in the UI of the second device, and the fourth animation is used as the reminder.

9. The method according to claim 6, further comprising: If the second device is a device with a screen, the first device triggers the second device to respond to the first device initiating the establishment of a connection with the second device, and a fifth animation corresponding to a third UI element representing the first device is presented in the UI of the second device. The fifth animation is used to indicate the progress of the connection establishment with the first device.

10. The method of claim 6, further comprising: In response to the first device detecting an interruption in the connection with the second device, the first device displays a sixth animation in its own UI corresponding to the first UI element representing the second device, the sixth animation indicating the interruption of the connection.

11. An electronic device comprising: A processor and a memory storing instructions, which, when executed by the processor, cause the electronic device to perform the method according to any one of claims 1 to 10.

12. A computer-readable storage medium storing instructions that, when executed by an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 10.

13. A computer program product comprising instructions that, when executed by an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 10.

Images