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

Abstract

Embodiments of the present disclosure provide a graphical interface display method, an electronic device, a storage medium, and a program product. In the method, a first device determines a currently connectable second device, and presents a first animation corresponding to a UI element of the second device in a user interface (UI), where the first animation is used to indicate the connectability of the second device. Such a first animation is determined based on a characteristic of the second device, which indicates at least one of the following: a distance between the second device and the first device, connection information between the second device and the first device, and a device type of the second device. Such a first animation can include dynamically changing the appearance of the UI element, or making the UI element move in a predetermined manner in the UI of the first device. Based on such a manner, embodiments of the present disclosure can present corresponding animations according to the characteristics of different connectable devices, so that the user can intuitively and quickly determine the device currently expected to be connected according to the corresponding animations, thereby reducing the interaction cost of the user.

Description

TECHNICAL FIELD

[0001] The present disclosure relates generally to the field of information technology, and more particularly to a graphical interface display method, an electronic device, a computer readable storage medium, and a computer program product. BACKGROUND

[0002] With the rapid development of electronic devices, there are more and more electronic devices, and the contact and interaction between the electronic devices are also more and more. The traditional user interface (UI) or graphic user interface (GUI) cannot provide effective information related to interconnection for the user, which makes the user need to spend more cost to establish the interconnection between the electronic devices or understand the interconnection state between the electronic devices. SUMMARY

[0003] Embodiments of the present disclosure relate to a technical solution for assisting 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.

[0004] In a first aspect of the present disclosure, a graphical interface display method is provided. In the method, a first device determines a second device that is currently connectable, and presents a first animation corresponding to a UI element of the second device in a user interface (UI) of the first device, the first animation being used to indicate the connectability of the second device, wherein the first animation is determined based on a characteristic of the second device, the characteristic indicating at least one of: a distance between the second device and the first device, connection information between the second device and the first device, and a device type of the second device. In addition, the first animation includes at least one of: dynamically changing an appearance of the UI element; or causing the UI element to move in a predetermined manner in the UI of the first device.

[0005] Based on such a manner, embodiments of the present disclosure can present corresponding animations according to the characteristics of different connectable devices, so that the user can intuitively and quickly determine the device that is currently desired to be connected according to the corresponding animations, thereby reducing the interaction cost of the user. In this way, the user can more intuitively understand the characteristics of different second devices that are connectable.

[0006] In some embodiments, the first animation can be determined based on the distance, and the degree of change of the first animation indicates the size of the distance, the degree of change including a frequency or an amplitude of the first animation. In this way, the user can intuitively perceive the distance of different connectable devices through the degree of change of the animation, thereby helping the user to select the device that needs to be connected.

[0007] In some embodiments, the first animation can be determined based on historical connection, and the change degree of the first animation indicates connection information including at least one of connection times, connection frequency, last connection duration, or last connection disconnect time, and the change degree includes frequency or amplitude of the first animation. In this way, the user can intuitively perceive the historical connection information of different connectable devices through the change degree of the animation, thereby helping the user to select the device to be connected

[0008] In some embodiments, the first animation can be determined based on device type, and the change degree of the first animation indicates whether the device type is a screen device, and the change degree includes frequency or amplitude of the first animation. In this way, the user can intuitively perceive the type of different connectable devices through the change degree of the animation, thereby helping the user to select the device to be connected

[0009] In some embodiments, the initial size of the UI element can be determined based on at least one of distance, connection information, and device type. In this way, the user can also intuitively understand the characteristics of different connectable devices through the size, thereby helping the user to select the device for connection.

[0010] In some embodiments, the UI element is a first UI element, and the UI of the first device further includes a second UI element of a third device currently connectable by the first device; if at least one of the following conditions is met, the first UI element is displayed in the UI of the first device with a higher display priority than the second UI element: 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 connection times from the third device to the first device is less than the connection times from the second device to the first device; or, the connection frequency from the third device to the first device is less than the connection frequency from the second device to the first device; or, the last connection duration from the third device to the first device is less than the last connection duration from the second device to the first device; or, the last connection disconnect time from the third device to the first device is later than the last disconnect time from the second device to the first device; or, the third device is a screenless device and the second device is a screen device, wherein the display priority indicates at least one of the following: display size of the UI element, display brightness of the UI element, or display position of the UI element. In this way, the user can intuitively perceive the characteristics of different connectable devices through the display priority, thereby helping the user to select the device to be connected.

[0011] In some embodiments, in response to receiving the selection of the UI element, the first device can initiate establishing the connection with the second device; and present, in the UI of the first device, a second animation corresponding to the UI element, the second animation being used to indicate a progress of the establishing of the connection. In this way, the user can be enabled to intuitively perceive the status of the connection through the animation.

[0012] In some embodiments, in response to receiving the selection of the UI element, the first device can trigger the second device to provide a reminder, the reminder being used to indicate that the second device is selected by the first device for the connection. In this way, the selected device can also be enabled to perceive being selected for establishing the connection.

[0013] In some embodiments, causing the second device to provide the reminder comprises: if the second device is a screen device, presenting, in the UI of the second device, a third animation corresponding to the UI element of the first device, the third animation being used as the reminder. In this way, the selected screen device can be enabled to prompt the current device being selected by the first device for establishing the connection through the animation.

[0014] In some embodiments, if the second device is a screen device, the first device can trigger the second device to present, in the UI provided by the second device, a fourth animation corresponding to the UI element of the first device in response to the establishing of the connection between the first device and the second device being initiated, the fourth animation being used to indicate a progress of the establishing of the connection with the first device. In this way, the selected screen device can be enabled to prompt the progress of the connection between the current device and the first device through the animation.

[0015] In some embodiments, in response to the first device detecting interruption of the connection with the second device, the first device can present, in the UI of the first device, a fifth animation corresponding to the UI element of the second device, the fifth animation being used to indicate the interruption of the connection. In this way, the user can be enabled to perceive the interruption of the connection in time, so as to avoid the user still requesting to perform some operations related to the connection.

[0016] In a second aspect of the present disclosure, an electronic device is provided. The electronic device includes a processor and a memory storing instructions. The instructions, when executed by the processor, cause the electronic device to perform any method according to the first aspect and implementation manners thereof.

[0017] In a third aspect of the present disclosure, a computer-readable storage medium is provided. The computer-readable storage medium stores instructions, which, when executed by an electronic device, cause the electronic device to perform any method according to the first aspect and implementation manners thereof.

[0018] In a fourth aspect of the 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 of the methods of the first aspect and implementations thereof.

[0019] It is to be understood that the description in the Abstract section is not intended to define key or essential features of the disclosure, nor is it intended to limit the scope of the disclosure. Other features of the disclosure will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0020] The above and other objects, features and advantages of embodiments of the disclosure will become more apparent from the following detailed description read in conjunction with the accompanying drawings, in which:

[0021] Figure 1 A schematic diagram showing a hardware structure of an electronic device in which embodiments of the disclosure can be implemented is shown.

[0022] Figure 2 An example interface showing a conventional sharing application interconnection is shown.

[0023] Figures 3A-3G A schematic diagram showing a sharing application interconnection supported by an interconnection animation according to embodiments of the disclosure is shown.

[0024] Figure 4 An example interface showing a conventional Bluetooth interconnection is shown.

[0025] Figures 5A-5F A schematic diagram showing a Bluetooth interconnection supported by an interconnection animation according to embodiments of the disclosure is shown.

[0026] Figure 6 An example interface showing a conventional wireless interconnection is shown.

[0027] Figures 7A-7E A schematic diagram showing a wireless interconnection supported by an interconnection animation according to embodiments of the disclosure is shown.

[0028] Figure 8 An example interface showing a conventional IoT interconnection is shown.

[0029] Figures 9A-9E A schematic diagram showing an IoT interconnection supported by an interconnection animation according to embodiments of the disclosure is shown.

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

[0031] Figure 11A schematic diagram showing the relationship between the application side and the UI framework side involved in interconnecting animation capabilities or functions according to an embodiment of the present disclosure is shown.

[0032] Figure 12 A schematic diagram showing a specific description of three ways of implementing interconnecting animation capabilities or functions according to an embodiment of the present disclosure is shown.

[0033] Figure 13 A schematic diagram showing an implementation framework for implementing interconnecting animation or capabilities according to an embodiment of the present disclosure is shown.

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

[0035] Throughout the drawings, identical or similar reference numerals are used to represent identical or similar components. DETAILED DESCRIPTION

[0036] The principles and spirits of the present disclosure will be described below with reference to several exemplary embodiments shown in the drawings. It should be understood that the description of these specific embodiments is only to enable those skilled in the art to better understand and implement the present disclosure, and not to limit the scope of the present disclosure in any way. In the following description and claims, unless otherwise defined, all technical and scientific terms used herein have the meanings commonly understood by those of ordinary skill in the art.

[0037] As used herein, the terms “includes,” “including,” “has,” “having,” “contains,” “containing,” “comprises,” “comprising,” “characterized by,” and the like can be used interchangeably. As used herein, the term “based on” can be understood as “based, at least in part, on.” As used herein, the terms “one embodiment,” “an embodiment,” “an example embodiment,” “some embodiments,” and / or the like can refer to one or more embodiments that do not necessarily have to include all of the same features or functionalities. As used herein, the term “first,” “second,” and / or the like can refer to different or the same objects, and can be used interchangeably. As used herein, the terms “optimal,” “minimum,” “maximum,” “best,” and / or the like can refer to a selection of values, processes, selected items, determined items, devices, apparatuses, means, components, assemblies, and / or the like that can be selected from among a number of useable options, and such selection need not be better, lower, higher, smaller, larger, or otherwise preferred in all or in another respect than other selections. As used herein, the term “determining” can encompass a wide variety of actions. For example, “determining” can include calculating, computing, processing, deriving, investigating, looking up (e.g., looking up in a table, a database or another data structure), ascertaining and the like. Also, “determining” can include receiving (e.g., receiving information), accessing (e.g., accessing data in a memory) and the like. Also, “determining” can include resolving, selecting, choosing, establishing and the like.

[0038] Example Device

[0039] Figure 1 A schematic diagram showing a hardware structure of an electronic device 100 in which an embodiment of the present disclosure can be implemented is shown. As shown in FIG. 1, the electronic device 100 can include a bus 110 that connects a processor 120, a memory 130, a subscriber identification module (SIM) card 140, a storage 150, an audio codec 160, a communication interface 170, a sensor 180, a user interface 190, and a display 195. Figure 1As shown, the electronic device 100 can 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 interface 170D, a sensor module 180, a key 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 can include a pressure sensor 180A, a gyro sensor 180B, a barometric sensor 180C, a magnetic sensor 180D, an acceleration 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.

[0040] It should be understood that the structure shown by the embodiments of the present disclosure does not constitute a specific limitation on the electronic device 100. In other embodiments of the present disclosure, the electronic device 100 can include more or fewer components than those shown, or combine certain components, or split certain components, or different arrangement of components. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0041] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices, or can be integrated in one or more processors. The controller can generate operation control signals according to instruction operation codes and timing signals, complete the control of fetching instructions and executing instructions.

[0042] The processor 110 can also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can hold instructions or data that the processor 110 has just used or is using repeatedly. If the processor 110 needs to use the instructions or data again, it can call them directly from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thus improving the efficiency of the system.

[0043] In some embodiments, the processor 110 can include one or more interfaces. The interfaces can 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.

[0044] 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 can include multiple sets of I2C buses. The processor 110 can be coupled to the touch sensor 180K, the charger, the flash, the camera 193, etc. through different I2C bus interfaces. For example, the processor 110 can be coupled to the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through the I2C bus interface, realizing the touch function of the electronic device 100.

[0045] The I2S interface can be used for audio communication. In some embodiments, the processor 110 can include multiple sets of I2S buses. The processor 110 can be coupled to the audio module 170 through the I2S bus, realizing the communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can deliver audio signals to the wireless communication module 160 through the I2S interface, realizing the function of answering the phone through the Bluetooth headset.

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

[0047] The UART interface is a universal serial data bus used for asynchronous communication. The bus can be a bidirectional communication bus. It converts data to be transmitted between serial communication and parallel communication. In some embodiments, the UART interface is usually 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 through the UART interface, realizing the Bluetooth function. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the UART interface, realizing the function of playing music through a Bluetooth headset.

[0048] The MIPI interface can be used to connect the processor 110 and peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI), a display serial interface (DSI), etc. In some embodiments, the processor 110 and the camera 193 communicate through the CSI interface, realizing the shooting function of the electronic device 100. The processor 110 and the display screen 194 communicate through the DSI interface, realizing the display function of the electronic device 100.

[0049] The GPIO interface can be configured by software. The GPIO interface can be configured as a control signal or as a data signal. In some embodiments, the GPIO interface can be used to connect the processor 110 and the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the 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.

[0050] The USB interface 130 is an interface that meets the USB standard specification, which can be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. The USB interface 130 can be used to connect a charger to charge the electronic device 100, or to transmit data between the electronic device 100 and a peripheral device. It can also be used to connect a headset to play audio through the headset. The interface can also be used to connect other electronic devices, such as AR devices, etc.

[0051] It can be understood that the interface connection relationship between the modules in the embodiments of the present disclosure is only illustrative and does not constitute a structural limitation of the electronic device 100. In other embodiments of the present disclosure, the electronic device 100 can also use different interface connection modes or a combination of multiple interface connection modes in the above embodiments.

[0052] The charging management module 140 is configured to receive 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 can receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 can receive wireless charging input through a wireless charging coil of the electronic device 100. The charging management module 140 can charge the battery 142 and also supply power to the electronic device 100 through the power management module 141.

[0053] The power management module 141 is configured to connect 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 to supply power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be configured to monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage, impedance). In other embodiments, the power management module 141 can also be disposed in the processor 110. In other embodiments, the power management module 141 and the charging management module 140 can also be disposed in the same device.

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

[0055] The mobile communication module 150 can provide a solution for wireless communication including 2G / 3G / 4G / 5G / 6G, etc. applied to the electronic device 100. The mobile communication module 150 can include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves by the antenna 1, and perform filtering, amplification, etc. on the received electromagnetic waves, and transfer to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor, and radiate as electromagnetic waves through the antenna 1. In some embodiments, at least part of the function modules of the mobile communication module 150 can be disposed in the processor 110. In some embodiments, at least part of the function modules of the mobile communication module 150 can be disposed in the same device as at least part of the modules of the processor 110.

[0056] The modem processor can include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium-high frequency signal. The demodulator is configured to demodulate a 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. The low-frequency baseband signal processed by the baseband processor is transmitted to the application processor. The application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the microphone 170B, etc.), or displays an image or a video through the display screen 194. In some embodiments, the modem processor can be a separate device. In other embodiments, the modem processor can be independent of the processor 110, and disposed in the same device as the mobile communication module 150 or other function modules.

[0057] The wireless communication module 160 can provide a solution for wireless communication, including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) network), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc., which are applied on the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0058] In some embodiments, the antenna 1 and the mobile communication module 150 of the electronic device 100 are coupled, and the antenna 2 and the wireless communication module 160 are coupled, so that the electronic device 100 can communicate with a network and other devices through wireless communication technology. The wireless communication technology can 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 technology, etc. The GNSS can include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou satellite navigation system (BDS), quasi-zenith satellite system (QZSS), and / or satellite-based augmentation system (SBAS).

[0059] The electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, which is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs, which execute program instructions to generate or change display information.

[0060] 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 can include 1 or N display screens 194, N being a positive integer greater than 1.

[0061] The electronic device 100 can implement a photographing function through an ISP, a camera 193, a video codec, a GPU, a display 194, and an application processor, etc. The ISP is used to process data fed back by the camera 193. For example, when taking a photo, the shutter is opened, light is transmitted to the camera photosensitive element through the lens, the optical signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing to convert it into an image visible to the naked eye. The ISP can also perform algorithm optimization on the noise, brightness, and skin color of the image. The ISP can also optimize the exposure, color temperature, and other parameters of the shooting scene. In some embodiments, the ISP can be disposed in the camera 193.

[0062] The camera 193 is used to capture still images or videos. Objects generate optical images through lenses and project them onto photosensitive elements. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into a standard RGB, YUV, or other format image signal. In some embodiments, the electronic device 100 can include one or N cameras 193, where N is a positive integer greater than 1.

[0063] The digital signal processor is used to process digital signals, in addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy, etc.

[0064] The video codec is used to compress or decompress digital videos. The electronic device 100 can support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as moving picture experts group (MPEG) 1, MPEG 2, MPEG 3, MPEG 4, etc.

[0065] The NPU is a neural-network (NN) computing processor that learns from the structure of biological neural networks, such as the transmission mode between human brain neurons, to quickly process input information and continuously self-learn. Through the NPU, the electronic device 100 can implement intelligent cognitive applications such as image recognition, face recognition, voice recognition, and text understanding, etc.

[0066] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to extend the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as music, videos, and the like are stored in the external memory card.

[0067] The internal memory 121 can be used to store computer-executable program code including instructions. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application required for a function (such as a sound play function, an image play function, and the like), and the like. The data storage area can store data created during use of the electronic device 100 (such as audio data, a phonebook, and the like), and the like. In addition, the internal memory 121 can include a high-speed random access memory, and can further include a nonvolatile memory such as at least one of a magnetic disk storage device, a flash memory device, a universal flash storage (UFS), and the like. The processor 110 performs various function applications and data processing of the electronic device 100 by executing instructions stored in the internal memory 121 and / or instructions stored in a memory disposed in the processor.

[0068] The electronic device 100 can implement an audio function through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, the application processor, and the like. For example, music play, recording, and the like.

[0069] 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 achieve contact and separation with the electronic device 100. The electronic device 100 can support one or N SIM card interfaces, N being a positive integer greater than 1. The SIM card interface 195 can support a Nano SIM card, a Micro SIM card, a SIM card, and the like. The same SIM card interface 195 can simultaneously insert multiple cards. The types of the multiple cards can be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 can also be compatible with an external memory card. The electronic device 100 interacts with a network through the SIM card to implement a call and data communication function, and the like. 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.

[0070] The software system of the electronic device 100 can employ a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. Embodiments of the present disclosure exemplarily illustrate the software structure of the electronic device 100 by taking one mobile operating system of the layered architecture as an example.

[0071] Basic Principles

[0072] As discussed above, with the rapid development of the Internet and IoT (Internet of Thing) technology, more and more functions rely on the interconnection between devices. For example, people can expect to cast the content played by a mobile phone to a living room TV through interconnection technology, or users can expect to send a file from one device to another device through Bluetooth interconnection. With the development of technology, such interconnection scenarios are increasingly common in people's daily life.

[0073] Such interconnection can bring a lot of convenience to users and improve the efficiency of people's production or life. However, such interconnection also brings additional costs to users, who need to establish interconnection 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 device to achieve interconnection of different devices. However, as the scenarios of interconnection become more and more abundant, users can need to spend more time to find the desired connected device from a large number of connectable devices, which will bring an undesirable time cost to users.

[0074] Traditional UIs usually simply list connectable devices, however, it can be difficult for users to select the desired connected device from a large number of devices in a short period of time. For example, in the scenario of sharing application interconnection, a large number of connectable devices can have the same identifier (e.g., device model), which will greatly confuse users in selecting the required device.

[0075] According to embodiments of the present disclosure, a scheme of interface display is provided. Specifically, a first device determines a second device currently connectable, and presents a first animation of a UI element of the second device in a user interface (UI) to indicate the connectability of the second device, wherein the first animation is determined based on a characteristic of the second device, the characteristic indicating at least one of: a distance between the second device and the first device, connection information between the second device and the first device, and a device type of the second device. As one possible implementation, the first animation includes at least one of: dynamically changing an appearance of the UI element; or causing the UI element to move in the UI in a predetermined manner.

[0076] Based on such a manner, embodiments of the present disclosure can present corresponding animations according to the characteristics of different connectable devices, so that the user can intuitively and quickly determine the device currently desired to be connected according to the corresponding animations, thereby reducing the interaction cost of the user.

[0077] The interface display scheme according to embodiments of the present disclosure will be described below in combination with different scenarios.

[0078] Example Scenario: Sharing Application Interconnection

[0079] The example application of the scheme of the present disclosure in the sharing application interconnection scenario will be described below in combination with the accompanying drawings.

[0080] Figure 2 An example interface 200 of the traditional sharing application interconnection is shown. In the example shown in Figure 2 , a mobile phone is taken as an example device to present the example interface 200 of the interconnection. As shown in Figure 2 , the user can perform the transmission of data by starting the sharing application (for example, Huawei Share) on the mobile phone. In the example shown in Figure 2 , the interface 200 provides 5 devices that can be currently connected, and each device is represented by a corresponding UI element 210.

[0081] In the scenario shown in Figure 2 , the currently connectable devices can include “living room TV”, “HUAWEI P40”, “master bedroom projection”, “HUAWEI P40” and “secondary bedroom TV”. As can be seen, different types of devices can be represented by different UI elements 210.

[0082] However, as the interconnection scenario becomes more and more rich, some devices of the same type and with the same identity can appear in the list of selectable devices. For example, in the example shown in Figure 2 , two mobile phone devices both have “HUAWEI P40” represented, and both are in a connectable state. In this case, if the user desires to establish a connection with one of the devices, the user needs to spend additional cost to distinguish the two devices, which will bring additional interaction cost to the user.

[0083] Exemplarily, as shown in Figure 2 , if the user cannot determine the device desired to be connected from the currently presented connectable devices in the interface 200, the user can also obtain more connectable devices by clicking “Cannot find receiver”, for example. It should be understood that Figure 2 the specific interface elements (for example, the specific content of the text or the design of the icon) shown are only exemplary, and other forms of interfaces are also possible.

[0084] Figure 3AAn example interface 300A according to embodiments of the present disclosure is shown. As shown, the first device can provide the user with the interface 300A in which UI elements corresponding to a plurality of second devices currently connectable as determined by the first device can be presented. Figure 3A

[0085] For example, in the interface 300A, a UI element 310 corresponding to the device “TV in living room”, a UI element 320 corresponding to the device “HUAWEI P40”, a UI element 330 corresponding to the device “Projector in master bedroom”, a UI element 340 corresponding to the device “HUAWEI P40”, and a UI element 350 corresponding to the device “TV in secondary bedroom” can be presented for selection by the user to establish a share user interconnection.

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

[0087] In some embodiments, the 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 appreciated that the first device can also determine the distance to the currently connectable second devices based on any other appropriate manner, which is not intended to be limited by the present disclosure.

[0088] In some embodiments, the first device can determine the size of the UI element corresponding to the second device according to the distance between the first device and the second device, for example, the UI element corresponding to the second device with a closer distance can have a larger display size. For example, Figure 3A As an example, the UI element 340 has a smaller display size than the UI element 320 to indicate that the distance between the second device “HUAWEI P40” corresponding to the UI element 320 and the first device is smaller than the distance between the second device “HUAWEI P40” corresponding to the UI element 340 and the first device.

[0089] Based on such a manner, the user can be helped to more effectively determine the second device that the user desires to connect. For example, the user can currently be in the living room and desire to synchronize data with another mobile phone, which can correspond to the UI element 320, for example. At this time, in the master bedroom, there can also be a mobile phone in a connectable state, which can correspond to the UI element 340, for example. Based on the size of the UI elements, the user can quickly select the second device that the user currently desires to connect from the two second devices with the same identity.

[0090] ​In some embodiments, the characteristic can also indicate connection information of the first device and the second device, including but not limited to at least one of the following: connection times, connection frequency, duration of the last connection, or time of disconnection of the last connection.

[0091] In some embodiments, the first device can determine the display size of the UI element corresponding to the second device based on the connection information. For example, the first device can determine the probability of the second device being selected based on the connection information, which can be determined based on one or more of the following: connection times in history, connection frequency within a preset time duration, and duration of the last connection, time of disconnection of the last connection. For example, the second device with more connection times in history can 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 the probability.

[0092] For example, in the example of FIG. 3, Figure 3A In the example of FIG. 3, the second device “HUAWEI P40” corresponding to the UI element 320 is a device that the first device has connected to recently, while the second device “HUAWEI P40” corresponding to the UI element 340 is a device that the first device has not connected to recently. Therefore, the display size of the UI element 320 can be greater than that of the UI element 340, so that the user can intuitively determine from the visual that the second device “HUAWEI P40” corresponding to the UI element 320 is the device that is expected to be selected.

[0093] In some embodiments, the characteristic can also indicate the type of the second device. Exemplarily, such type can include, for example: mobile phone, tablet, bracelet, large screen, earphone, sound box, glasses, car, watch, or other types. Alternatively, such type can also be used to indicate whether the second device is a device with a screen.

[0094] The first device determines the display size of the corresponding UI element based on, for example, the type of the second device. For example, a device with a screen can have a greater display size than a device without a screen, to recommend the user to preferentially select a device with a screen for sharing.

[0095] Alternatively, the first device can also determine the display size of the corresponding UI element based on, for example, the type of the second device and the current use scenario. For example, if the user expects to project a picture to another device in the home, the first device can cause the UI element corresponding to the second device with a larger screen to have a greater display size.

[0096] In some embodiments, the first device can also determine the size of the UI element corresponding to the second device based on a combination of multiple ones of the above discussed characteristics. For example, the first device can determine a probability that the corresponding second device is selected according to a combination of multiple ones of the distance, the connection information and the device type, and determine the display size of the UI element corresponding to the second device based on the probability.

[0097] By way of example, the probability can be determined based on a weighted sum of the quantified values of the different characteristics, where different characteristics can be associated with different weights, for example. It should be appreciated that such different weights can be set according to actual needs. For example, the weights can also be determined according to user input, e.g., a user can specify through input that he or she prefers devices closer in distance to be recommended more. Alternatively, the user can also define other appropriate types of characteristics, e.g., the user can define that the signal strength of the second device is also considered when determining the display size of the corresponding UI element.

[0098] In some embodiments, the first device can also indicate one or more of the above characteristics of the second device through the display priority of the different UI elements, where the display priority can indicate at least one of the following, for example: the display size of the UI element, the display brightness of the UI element, or the display position of the UI element. By way of example of the display position as the display priority, the UI element corresponding to the second device that is further away from the first device can have a higher priority, e.g., be displayed at a more front position in the display list. Or, the UI element corresponding to the second device that has more connection times with the first device can have a higher priority, e.g., be displayed at a more front position in the display list. Or, the UI element corresponding to the second device that has a screen can have a higher priority, e.g., be displayed at a more front position in the display list, compared to the second device that has no screen.

[0099] In some embodiments, the first device can also adjust other display features of the UI elements according to a combination of one or more of the above discussed characteristics, to indicate different characteristics of different second devices. Such display features can include, but are not limited to, transparency or brightness, etc. For example, the UI element corresponding to the second device that is closer in distance can have a lower transparency, while the UI element corresponding to the second device that is further in distance can have a higher transparency.

[0100] In some embodiments, the first device can also indicate different characteristics of the second device by adjusting a plurality of display features. For example, for a closer second device, the first device can set its corresponding UI element to have a larger size and a lower transparency. For a farther second device, the first device can set its corresponding UI element to have a smaller size and a higher transparency. Based on such a manner, the user can intuitively perceive the characteristics of different second devices through visual features.

[0101] However, in actual use, such static display differentiation can be difficult to sufficiently remind the user. Currently, some animations are applied to many aspects of terminal interaction to improve the friendliness of the interaction. Embodiments of the present disclosure improve the interaction efficiency of the user by applying animations to the device interconnection scenario.

[0102] Figure 3B An example interface 300B presenting interconnection animations is shown according to embodiments of the present disclosure. As shown, a plurality of UI elements corresponding to animations are presented in the first device interface 300B. For example, the UI elements 310-350 can periodically jump up and down in the interface 300B. Figure 3B

[0103] It should be understood that such a jumping animation is only illustrative, and any other appropriate animation can also be applied. Examples of such animations include, but are not limited to, dynamically changing the appearance of a UI element or causing a UI element to move in a UI in a predetermined manner. For example, dynamically changing the appearance of a UI element can include an animation that dynamically changes the size of the UI element, an animation that dynamically changes the color of the UI element, an animation that dynamically changes the transparency of the UI element, or an animation that dynamically changes the brightness of the UI element, and the like. Causing a UI element to move in a predetermined manner can include a translation animation or a rotation animation. Figure 3B The jumping animation shown in FIG. 3B belongs to a type of translation animation.

[0104] In some embodiments, the first device can determine a degree of variation of the animation based on one or more of the characteristics discussed above. Such a degree of variation may, for example, include the frequency or amplitude of the animation. For example, for a translation animation, the degree of variation can include the displacement amplitude or displacement rate of the translation animation. For a rotation animation, the degree of variation can include the rotation amplitude or rotation rate of the rotation animation. For a scaling animation, the degree of variation can include the scaling ratio or scaling rate. For a color change animation, the degree of variation can include the difference degree of color change or the rate of color change. For a transparency transformation animation, the degree of variation can include the difference degree of transparency change or the rate of transparency change. For a brightness transformation animation, the degree of variation can include the difference degree of brightness change or the rate of brightness change. ​

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

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

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

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

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

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

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

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

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

[0114] 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".

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

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

[0117] In some embodiments, the animation for indicating the progress of the connection establishment may, for example, also include a dynamically changing number or other scale presentation animation. For example, the first device may, by adjusting the color of a portion of the UI element 320, indicate the progress of the connection establishment. For example, the UI element 320 may, by the proportion of the black portion and the colored portion, reflect the progress of the connection establishment. For example, at the beginning of the connection establishment stage, the entire UI element 320 may, for example, be black and white, and as the connection establishment continues, the UI element may change to color part by part, and at the final completion of the connection, the entire UI element may, for example, be colored.

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

[0119] In some embodiments, embodiments of the present disclosure may, in some embodiments, also generate a reminder at the selected second device to indicate that the second device is selected by the first device for connection. In some embodiments, if the second device corresponding to the UI element is a screen device, the selection of the UI element by the first device may trigger the second device to generate a reminder in the UI provided by the second device. Such a reminder may, for example, include a notification in the screen-off state, a floating window reminder in the screen-on state, and the like.

[0120] In some embodiments, if the second device is a screen device and the same sharing application is opened, the second device may, for example, at this time, present in the UI the UI elements of a plurality of devices that it can currently connect to. When the first device selects the second device for connection, the selection may trigger the second device to present in the UI provided by the second device the animation corresponding to the UI element of the first device to indicate that the second device is currently selected by the first device.

[0121] Figure 3F An interface 300F presented at the second device according to embodiments of the present disclosure is shown. As shown, the second device may, for example, present in the interface 300F the UI elements of a plurality of currently connectable devices. If the first device selects the second device for connection, the second device may, in the interface 300F, present an animation corresponding to the UI element 380 of the first device (for example, “HUAWEI P40 PRO”). For example, the UI element 380 may be presented by a bouncing animation effect to indicate that the first device selects the second device for connection. Figure 3F

[0122] In some embodiments, if the second device is a screenless device, the second device may, for example, remind the second device that it is selected by the first device for connection by voice or vibration, and the like. ​

[0123] In some embodiments, in the connection establishing stage, if the second device is a screen device and the sharing application is opened, the second device can present an animation corresponding to the UI element of the first device in its UI to indicate the progress of the connection establishment with the first device, in response to the establishment of the connection between the first device and the second device. For example, the first device can present an animation 370-1 as shown in FIG. 3I, to indicate the progress of the connection establishment with the second device. Figure 3E and 3F Similarly to the animations 370-1 and 370-2 shown in FIG. 3I and FIG. 3J, the second device can also present a progress animation of the presentation of the UI element 380 to indicate the progress of the connection between the first device and the second device.

[0124] According to embodiments of the present disclosure, in the connection establishing stage of the device, by presenting the progress animation, the user can better understand the progress of the connection establishment. In addition, by presenting the corresponding animation at the selected second device (if it is a screen device), the selected device can better understand the connection situation.

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

[0126] Figure 3G An example interface 300G according to embodiments of the present disclosure is shown. As shown in Figure 3G When detecting the interruption of the connection with the second device, the first device can gray out the UI element 320 in the interface 300G to indicate the interruption of the connection with the second device “HUAWEI P40” corresponding to the UI element 320.

[0127] In some embodiments, the animation for indicating the interruption of the connection can also include other types of animations, for example, the splitting or black-and-white display of the UI element, etc. The present disclosure is not intended to limit the specific form of the animation.

[0128] In some embodiments, such interruption can include an interruption irrelevant to the operation of the user on the first device. For example, the prompted interruption can include an interruption due to the active disconnection of the second device, or an automatic interruption due to the too long distance, etc.

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

[0130] In this way, the user can better understand the status of the connection, and avoid the problem of unfriendly interaction caused by still performing certain operations in the interruption of the connection.

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

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

[0133] Example Scenario: Bluetooth Interconnection

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

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

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

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

[0138] 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 a left-right shaking animation.

[0139] It should be appreciated that the first device can determine the characteristics of the second device (e.g., distance, connection information, or device type, etc.) in accordance with the method discussed above with reference to Figures 3A-3G The method discussed above can be used to determine the characteristics of the second device (e.g., distance, connection information, or device type, etc.) and present a corresponding animation based on the determined characteristics. Examples of such animations include, but are not limited to, dynamically changing the appearance of a UI element or causing a UI element to move in a predetermined manner in the UI. For example, dynamically changing the appearance of a UI element can include an animation that dynamically changes the size of the UI element, an animation that dynamically changes the color of the UI element, an animation that dynamically changes the transparency of the UI element, or an animation that dynamically changes the brightness of the UI element, etc. Causing a UI element to move in a predetermined manner can include a translation animation or a rotation animation. Figure 5A The shaking animation shown in FIG. 5A is a type of translation animation.

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

[0141] Further, such a degree of variation can be controlled by adjusting parameters of the animation, so that animations of the same type can have different displays. For example, such parameters can include a time parameter, an amplitude parameter, a curve parameter, a rate parameter, etc.

[0142] For example, the first device can determine the shaking amplitude of different UI elements based on the distance of different second devices from the first device. Figure 5A As an example, the first device can determine the shaking amplitude of different UI elements based on the distance of different second devices from the first device. Figure 5B FIG. 5B shows a diagram 500B of the shaking distance of the interconnection animation over time according to an embodiment of the present disclosure. As shown, the diagram 500B includes a plurality of lines 560-1 to 560-5, each of which is used to describe a corresponding animation corresponding to a corresponding UI element 510 to 550, respectively. Figure 5B

[0143] Specifically, as shown in FIG. 5B, the shaking distance of the UI element 510 over time is described by the line 560-1, the shaking distance of the UI element 520 over time is described by the line 560-2, the shaking distance of the UI element 530 over time is described by the line 560-3, the shaking distance of the UI element 540 over time is described by the line 560-4, and the shaking distance of the UI element 550 over time is described by the line 560-5. Figure 5B ​As shown, at time t1, the UI elements 510-550 can be at the starting point, i.e., the shaking distance is 0. At time t2, the UI elements 510-550 are all shaken to the maximum distance, which can correspond to the state displayed by the interface 500A, for example. At time t3, the UI elements 510-550 can be shaken back to the starting point.

[0144] It should be understood that Figure 5B The change of the shaking distance with time shown in FIG. 6 is only illustrative. For example, the change of the shaking distance with time can be other curves, broken lines, or straight lines. The present disclosure is not intended to be limited in this regard. In some embodiments, one or more parameters of the change of the shaking distance with time can be user-defined, for example. For example, the user can input one or more parameters related to the process through an interface, thereby realizing customization of the animation process. As another example, such one or more parameters can also be configured by an upper application, for example.

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

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

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

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

[0149] Figure 5D Another example interface 500D is shown according to embodiments of the present disclosure. As shown, the first device can present a progress animation 570-2 corresponding to the selected UI element 520 in the interface 500D. Such a progress animation 570-2 may, for example, be presented through a dynamically changing progress bar to indicate the progress of the current connection establishment. Figure 5D

[0150] In some embodiments, the animation for indicating the progress of the connection establishment may, for example, also include a dynamically changing number or other scale presentation. For example, the first device can indicate the progress of the connection establishment by adjusting the color of a portion of the UI element 520. For example, the UI element 520 can reflect the progress of the connection establishment through the proportion of the black portion and the colored portion. For example, at the beginning of the connection establishment stage, the entire UI element 520 may, for example, be black and white, as the connection establishment continues, the UI element can change to color portion by portion, and at the final completion of the connection, the entire UI element may, for example, be colored.

[0151] It should be appreciated that other suitable animations for presenting the progress are also possible, and the present disclosure is not intended to limit the specific form of the animation. In some embodiments, the specific animation type may, for example, also be determined based on user input or developer-specified rules.

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

[0153] In some embodiments, if the second device is a screen device and the Bluetooth application is opened, the second device may, for example, present UI elements of a plurality of devices that it can currently connect to in the UI at this time. When the first device selects to connect with the second device, the selection can trigger the second device to present an animation corresponding to the UI element of the first device in the UI provided by the second device.

[0154] Figure 5E An interface 500E presented at the second device is shown according to embodiments of the present disclosure. As shown, the second device may, for example, present an animation corresponding to the UI element of the first device in the interface 500E. Figure 5E ​As shown, the second device may, for example, present UI elements of a plurality of currently connectable devices in interface 500E. If the first device selects the second device for connection, the second device may, for example, present an animation corresponding to UI element 580 of the first device (e.g., “HUAWEI P40 PRO”) in interface 500E. For example, the second device may, for example, present the UI element 580 with a bouncing animation effect to indicate that the first device selects the second device for connection.

[0155] In some embodiments, if the second device is a screenless device, the second device may, for example, remind the second device being selected by the first device for connection through voice or vibration, etc.

[0156] In some embodiments, in the connection establishment phase, if the second device is a screen device and the Bluetooth application is opened, in response to the establishment of the connection between the first device and the second device being initiated, the second device may, for example, present an animation corresponding to the UI element of the first device in its UI to indicate the progress of the establishment of the connection with the first device. For example, as shown in Figure 5C and 5D Similar to the animations 570-1 and 570-2 shown, the second device may, for example, also present a progress animation corresponding to the UI element 580 in the connection establishment phase to indicate the progress of the first device and the second device. As shown in Figure 5E As shown, the second device may, for example, display a progress bar in relation to the UI element 580 to indicate the progress of the connection between the first device and the second device.

[0157] According to embodiments of the present disclosure, in the connection establishment phase of the device, by presenting the progress animation, the user can better understand the progress of the establishment of the connection. In addition, by presenting the corresponding animation at the selected second device (if it is a screen device), the selected device can better understand the connection situation.

[0158] In some embodiments, embodiments of the present disclosure can also detect the interruption of the connection and present the animation accordingly. For example, if the first device detects the interruption of the connection with the second device, the first device may, for example, present an animation corresponding to the corresponding UI element in the UI to indicate the interruption of the connection.

[0159] Figure 5F An example interface 500F according to embodiments of the present disclosure is shown. As shown in Figure 5F When detecting the interruption of the connection with the second device, the first device may, for example, present a split animation corresponding to the UI element 520 in the interface 500F to indicate the interruption of the connection with the second device “HUAWEI P40” corresponding to the UI element 520.

[0160] In some embodiments, the animation for indicating the disconnection can also include other types of animations, e.g., a dimmed display of the UI element, etc. The present disclosure is not intended to limit the specific form of the animation.

[0161] In some embodiments, such disconnection can include a disconnection irrelevant to the operation of the user on the first device. For example, the prompted disconnection can include a disconnection due to an active disconnection of the second device, or a disconnection automatically caused by too long a distance, etc.

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

[0163] In this way, the embodiments of the present disclosure can help the user to better understand the status of the connection, and avoid the problem of unfriendly interaction caused by still performing certain operations in the disconnection of the connection.

[0164] The different animations in different connection stages are discussed above in the context of Bluetooth interconnection. By providing these animations, the user of the device can be better assisted to establish Bluetooth interconnection between devices or to understand the status of the Bluetooth connection.

[0165] In addition, it should be understood that although the above describes different animations in Bluetooth interconnection by taking a mobile phone as an example, any other appropriate screen device (e.g., a large-screen device, a smart watch, smart glasses, etc.) can perform the process discussed above to present corresponding animations to assist the user to establish connection between devices or to understand the status of the connection.

[0166] Example Scenario: Wireless Interconnection

[0167] The example application of the scheme of the present disclosure in the context of wireless interconnection will be described below in conjunction with the accompanying drawings.

[0168] Figure 6 An example interface 600 of traditional Bluetooth interconnection is shown. In Figure 6 In the example of a mobile phone as an example device, the example interface 600 of interconnection is presented. As Figure 6 shown, the user can perform connection of devices through Bluetooth. In Figure 6 the example, the interface 600 provides 4 access devices that can be currently connected, each of which is represented by a corresponding UI element 610.

[0169] In Figure 6 the context, the currently connectable access devices can include “A router”, “B router”, “C router” and “D router”. As discussed above in conjunction with 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.

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

[0171] It should be understood that the first device can be referenced as described above. Figures 3A-3G The method discussed for determining the characteristics of the second device determines the characteristics of the second device (e.g., distance, connection information, or device type), and renders a corresponding animation based on the determined 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.

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

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

[0174] For example, with Figure 7AAs an example, the first device can determine the shaking amplitude of different UI elements based on the distance of different second devices from the first device. Figure 7B A plot 700B of shaking distance of interconnection animation over time is shown according to an embodiment of the present disclosure. As shown, a plurality of lines 750-1 to 750-4 are used to respectively describe the animation corresponding to the respective UI elements 710 to 740. Figure 7B

[0175] Specifically, as shown, at time t1, the UI elements 710 to 740 can be at the starting point, i.e., the shaking distance is 0. At time t2, the UI elements 710 to 740 are all shaken to the maximum distance, which can correspond to the state displayed by the interface 700A, for example. At time t3, the UI elements 710 to 740 can be shaken back to the starting point. Figure 7C

[0176] As shown, different UI elements can have different maximum shaking distances. For example, the maximum distance of the UI element 710 is D0, the maximum distance of the UI element 720 is D1, the maximum distance of the UI element 730 is D2, and the maximum distance of the UI element 740 is D3. It can be seen that the UI element 710 has a larger animation than the UI element 720 in terms of shaking distance, to indicate that the second device corresponding to the UI element 710 has a closer distance. Figure 7B It should be understood that the shaking distance over time shown in FIG. 7B is only illustrative. For example, the shaking distance over time can be other broken lines, straight lines, or curved broken lines. The present disclosure is not intended to be limited in this regard. In some embodiments, one or more parameters of the shaking distance over time process can be user-defined, for example. For example, the user can input one or more parameters related to the process through the interface, thereby realizing the customization of the animation process. As another example, such one or more parameters can also be configured by an upper application, for example.

[0177] Figure 7B In some embodiments, the degree of change of the animation can also be determined based on the historical connection or the device type alone. Alternatively, the first device can also determine the degree of change of the animation of the UI element corresponding to the second device based on two or more of the distance, the historical connection, and the device type.

[0178] The above describes the animation in the matching stage in the sharing application interconnection scenario. In some embodiments, the user can select a second device to establish a connection through the UI interface. Illustratively, in response to detecting the user's selection of the UI element 710, the first device can initiate the establishment of a connection with the second device "A router".

[0179] The above describes the animation in the matching stage in the sharing application interconnection scenario. In some embodiments, the user can select a second device to establish a connection through the UI interface. Illustratively, in response to detecting the user's selection of the UI element 710, the first device can initiate the establishment of a connection with the second device "A router".

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

[0181] Another example interface 700D is shown according to embodiments of the present disclosure. As shown, the first device can present in the interface 700D a progress animation 760-2 corresponding to the selected UI element 710. Such progress animation 760-2 may, for example, be presented through a dynamically changing progress bar to indicate the progress of the current connection establishment. Figure 7D Figure 7D

[0182] In some embodiments, the animation for indicating the progress of the connection establishment may, for example, also include a dynamically changing number or other scale presentation animation. For example, the first device can indicate the progress of the connection establishment by adjusting the color of a portion of the UI element 710. For example, the UI element 710 can reflect the progress of the connection establishment through the proportion of the black portion and the colored portion. For example, at the beginning of the connection establishment stage, the entire UI element 710 may, for example, be black and white, as the connection establishment continues, the UI element can change to color part by part, and at the final completion of the connection, the entire UI element may, for example, be colored.

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

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

[0185] ​​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.

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

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

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

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

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

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

[0192] In some embodiments, such interruption can include an interruption irrelevant to the operation of the user on the first device. For example, the prompted interruption can include an interruption due to active disconnection of the second device, or an automatic interruption due to too far distance, etc.

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

[0194] In this way, embodiments of the present disclosure can help the user to better understand the state of the connection, and avoid the problem of unfriendly interaction caused by still performing certain operations in the interruption of the connection.

[0195] The above discusses different animations in different interconnection stages in the scenario of wireless interconnection. By providing these animations, the user of the device can be better assisted to establish wireless interconnection between devices or understand the state of the wireless connection.

[0196] In addition, it should be understood that although the above describes different animations in wireless interconnection by taking a mobile phone as an example, any other appropriate screen device (for example, a large-screen device, a smart watch, smart glasses, etc.) can perform the process discussed above to present corresponding animations to assist the user to establish connection between devices or understand the state of the connection.

[0197] Example Scenario: IoT Interconnection

[0198] The following will describe an example application of the scheme of the present disclosure in the scenario of IoT interconnection by taking a mobile phone as an example.

[0199] Figure 8 An example interface 800 of traditional IoT interconnection is shown. In the example interface 800, three IoT devices (for example, a sound box) that can be currently connected are provided in the form of cards, and each sound box is represented by a corresponding UI element 810. Figure 8 Figure 8 As shown, the example interface 800 can be, for example, a minus one screen of the interface of the mobile phone, which provides three IoT devices (for example, a sound box) that can be currently connected in the form of cards, and each sound box is represented by a corresponding UI element 810.

[0200] In the scenario of Figure 8 , the currently connectable access devices can include three IoT devices named “sound box”. As discussed above in connection with Figure 2 , as the interconnection scenario becomes more and more rich, the user can have difficulty in selecting the IoT device that the user currently desires to connect from the currently connectable IoT devices, which will bring additional interaction cost to the user.

[0201] Figure 9A An example interface 900A according to an embodiment of the present disclosure is shown. As shown, the example interface 900A can be, for example, a minus one screen of the interface of the mobile phone, which provides three IoT devices (for example, a sound box) that can be currently connected in the form of cards, and each sound box is represented by a corresponding UI element 910.​Figure 9A As shown, in the interface 900A, the first device can present an animation corresponding to the UI elements (e.g., the UI elements 910-930) of the second device. As Figure 9A As shown, the animation can include a left-right swing animation.

[0202] It should be appreciated that the first device can determine the characteristics (e.g., the distance, the connection information, or the device type, etc.) of the second device according to the method discussed above with reference to Figures 3A-3G determine the corresponding animation based on the determined characteristics. Examples of such animations include, but are not limited to, dynamically changing the appearance of the UI elements or making the UI elements move in the UI in a predetermined manner. For example, dynamically changing the appearance of the UI elements can include an animation that dynamically changes the size of the UI elements, an animation that dynamically changes the color of the UI elements, an animation that dynamically changes the transparency of the UI elements, or an animation that dynamically changes the brightness of the UI elements, etc. Making the UI elements move in a predetermined manner can include a translation animation or a rotation animation.

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

[0204] Further, such a degree of change can be controlled by adjusting the parameters of the animation, so that the same type of animation can have a differentiated display. For example, such parameters can include a time parameter, an amplitude parameter, a curve parameter, a rate parameter, etc.

[0205] For example, the first device can determine the maximum swing angle of different UI elements based on the distance between the different second devices and the first device. Figure 9A As an example, the first device can determine the maximum swing angle of different UI elements based on the distance between the different second devices and the first device. Figure 9B A swing angle of interconnection animation over time diagram 900B according to an embodiment of the present disclosure is shown. As Figure 9B As shown, the plurality of lines 940-1 to 940-3 are respectively used to describe the animation corresponding to the corresponding UI elements 910 to 930.

[0206] In particular, asFigure 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.

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

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

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

[0210] 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".

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

[0212] Figure 9D Another example interface 900D is shown, in accordance with embodiments of the present disclosure. As shown, the first device can present a progress animation 950-2 corresponding to the selected UI element 910 in the interface 900D. Such a progress animation 950-2 may, for example, be presented through a dynamically changing progress bar to indicate the progress of the current connection establishment. Figure 9D

[0213] In some embodiments, the animation for indicating the progress of the connection establishment may, for example, also include a dynamically changing number or other scale presentation. For example, the first device can indicate the progress of the connection establishment by adjusting the color of a portion of the UI element 910. For example, the UI element 910 can reflect the progress of the connection establishment through the proportion of the black portion and the colored portion. For example, at the beginning of the connection establishment stage, the entire UI element 910 may, for example, be black and white, as the connection establishment continues, the UI element can change to color portion by portion, and at the end of the connection establishment, the entire UI element may, for example, be colored.

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

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

[0216] In some embodiments, if the second device is a screen device and the IoT connection application is opened, the second device may, for example, present UI elements of a plurality of devices that it can currently connect to in the UI. When the first device selects to connect with the second device, the selection can trigger the second device to present an animation corresponding to the UI element of the first device in the UI provided by the second device. For example, if the user selects the UI element 910 in the interface of the first device, if the second device corresponding to the UI element is a screen-equipped soundbar, the second device can be caused to present an animation corresponding to the UI element of the first device in the UI provided by the second device.

[0217] In some embodiments, if the second device is a screenless device, the second device may, for example, remind the second device that it is selected by the first device for connection through voice or vibration, etc.​

[0218] In some embodiments, in the connection establishing phase, if the second device is a screen device and the IoT connection application is opened, in response to the establishment of the connection between the first device and the second device being initiated, the second device can present an animation corresponding to the UI element of the first device in its UI to indicate the progress of the connection establishment. Exemplarily, in the connection establishing phase, the second device can present an animation 950-1 corresponding to the UI element of the first device to indicate the progress of the connection establishment. Figure 9C and 9D Similar to the animations 950-1 and 950-2 shown in FIG. 9O, the second device can also present an animation corresponding to the UI element of the first device in the connection establishing phase to indicate the progress of the first device and the second device.

[0219] According to embodiments of the present disclosure, in the connection establishing phase of the device, by presenting the progress animation, the user can better understand the progress of the connection establishment. In addition, by presenting the corresponding animation at the selected second device (if it is a screen device), the selected device can better understand the connection situation.

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

[0221] Figure 9E An example interface 900E according to embodiments of the present disclosure is shown. As shown in FIG. 9O, in response to detecting the interruption of the connection with the second device, the first device can present a blur animation corresponding to the UI element 910 in the interface 900E to indicate the interruption of the connection with the second device “sound box” corresponding to the UI element 910. Figure 9E

[0222] In some embodiments, the animation for indicating the interruption of the connection can also include other types of animations, such as the gray display of the UI element, etc. The present disclosure is not intended to limit the specific form of the animation.

[0223] In some embodiments, such interruption can include an interruption unrelated to the operation of the user on the first device. For example, the prompted interruption can include an interruption due to the active disconnection of the second device, or an automatic interruption due to too far a distance, etc.

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

[0225] ​In this way, embodiments of the present disclosure can help users better understand the connection status, avoiding the problem of unfriendly interaction caused by still performing certain operations in the connection interruption.

[0226] The different animations in different interconnection stages are discussed above in the context of wireless interconnection. By providing these animations, the user of the device can be better assisted to establish the IoT interconnection between devices or understand the status of the IoT connection.

[0227] In addition, it should be understood that although the above describes different animations in IoT interconnection by taking a mobile phone as an example, any other suitable screen device (for example, a large-screen device, a smart watch, smart glasses, etc.) can perform the process discussed above to present the corresponding animations to assist the user to establish the connection between devices or understand the status of the connection.

[0228] System Implementation

[0229] Figure 10 A schematic diagram of a system framework 1000 for implementing the interconnection animation effect capability or function according to an embodiment of the present disclosure is shown. In some embodiments, the animation effect capability of the UI framework is implemented based on the overall architecture of the operating system (for example, Android or Harmony) of the electronic device, which can contain the logic processing of the mainstream 4 layers, and the data processing flow is presented to the user from the bottom layer. The user can mainly use and experience the animation effect function in the application layer. In an embodiment of the present disclosure, the interaction relationship of the desktop and the capability of the UI framework is as Figure 10 depicted. Specifically, as Figure 10 shown, the system framework 1000 can include an application layer 1010, an application framework layer 1030, a hardware abstraction layer 1050, and a kernel layer 1070. The application layer 1010 can include an interconnection application 1012, such as a sharing application, a Bluetooth application, a wireless application, or an IoT application, etc. The interconnection application 1012 involves various operations 1014. The operations 1014 can include, for example, matching, connection establishment, connection disconnection, or others as discussed above. The application framework layer 1030 can include system services 1032 and extension services 1034. The system services 1032 can include various system services, such as Service 1033. The extension services 1034 can include various extension services, such as HwSDK 1035. The hardware abstraction layer (HAL) 1050 can include HAL 3.0 1052 and algorithm Algo 1054. The kernel layer 1070 can include a driver 1072 and a physical device 1074. The physical device 1074 can provide a raw parameter stream to the driver 1072, and the driver 1072 can provide a function processing parameter stream to the physical device 1074. As 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.

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

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

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

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

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

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

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

[0237] Example Process

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

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

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

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

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

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

[0244] In some embodiments, the UI element is a first UI element, the UI of the first device further includes a second UI element of a third device currently connectable by the first device; 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 from the third device to the first device is less than the number of connections from the second device to the first device; or, the connection frequency from the third device to the first device is less than the connection frequency from the second device to the first device; or, the last connection duration from the third device to the first device is less than the last connection duration from the second device to the first device; or, the last disconnection time from the third device to the first device is later than the last disconnection time from the second device to the first device; or, the third device is a screen-less device and the second device is a screen-equipped device, wherein the display priority indicates at least one of the following: a display size of the UI element, a display brightness of the UI element, or a display position of the UI element.

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

[0246] In some embodiments, the process 1400 further includes: in response to receiving the selection of the UI element, the first device triggers the second device to provide a reminder, the reminder being used to indicate that the second device is selected by the first device for connection.

[0247] In some embodiments, the second device providing the reminder includes: if the second device is a screen-equipped device, presenting, in the UI of the second device, a third animation corresponding to the UI element of the first device, the third animation being used as the reminder.

[0248] In some embodiments, the process 1400 further includes: if the second device is a screen-equipped device, the first device triggers the second device to present, in the UI of the second device, a fourth animation corresponding to the UI element of the first device in response to the first device initiating establishing a connection with the second device, the fourth animation being used to indicate a progress of the establishing of the connection with the first device.

[0249] In some embodiments, the process 1400 further includes: in response to the first device detecting interruption of the connection with the second device, the first device presenting, in its own UI, a fifth animation corresponding to the UI element of the second device, the fifth animation being used to indicate the interruption of the connection.

[0250] Based on the above discussed process, embodiments of the present disclosure are able to present corresponding animations according to characteristics of different connectable devices, so that the user is able to intuitively determine the device currently desired to be connected according to the corresponding animations, thereby reducing the interaction cost of the user.

Claims

1. A graphical user interface display method, comprising: The first device determines the second device that can be connected at present; as well as The first device displays a first animation corresponding to a UI element of the second device in its user interface (UI). This first animation is used to indicate the connectivity of the second device. The first animation is determined based on the characteristics of the second device, and the degree of change of the first animation is determined based on the characteristics of the second device, wherein the characteristics 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; The first animation includes at least one of the following: Dynamically change the appearance of the UI element; or, The UI element is moved 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.

3. The method of claim 1, wherein the first animation is determined based on the connection information, 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.

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.

5. The method according to any one of claims 1 to 4, wherein the initial size of the 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, wherein the UI element is a first UI element, and the UI of the first device further 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 times the third device connects to the first device is less than the number of times the second device connects to 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 time the third device disconnected from the first device was later than the last time the second device disconnected from the first device; or, the third device is a screen-less device and the second device is a screen-equipped device, wherein the display priority indicates at least one of: a display size of the UI element, a display brightness of the UI element, or a display position of the UI element. 7.The method of any one of claims 1-4, further comprising: in response to receiving the selection of the UI element, the first device initiating establishment of a connection with the second device; and presenting, in a UI of the first device, a second animation corresponding to the UI element, the second animation indicating a progress of the establishment of the connection. 8.The method of claim 7, further comprising: in response to receiving the selection of the UI element, the first device triggering the second device to provide a reminder, the reminder indicating that the second device is selected by the first device for connection. 9.The method of claim 8, wherein the second device providing the reminder comprises: if the second device is a screen-equipped device, presenting, in a UI of the second device, a third animation corresponding to a UI element of the first device, the third animation serving as the reminder. 10.The method of claim 7, further comprising: if the second device is a screen-equipped device, the first device triggering the second device to present, in a UI of the second device, a fourth animation corresponding to a UI element of the first device, the fourth animation indicating a progress of the establishment of the connection with the first device, in response to the first device initiating establishment of a connection with the second device. 11.The method of claim 7, further comprising: in response to the first device detecting interruption of the connection with the second device, the first device presenting, in its own UI, a fifth animation corresponding to the UI element of the second device, the fifth animation indicating the interruption of the connection.

12. An electronic device comprising: a processor, and a memory storing instructions that, when executed by the processor, cause the electronic device to perform the method of any one of claims 1-11. 13.A computer-readable storage medium storing instructions that, when executed by an electronic device, cause the electronic device to perform the method of any one of claims 1-11. 14.A computer program product comprising instructions that, when executed by an electronic device, cause the electronic device to perform the method of any one of claims 1-11.

Images