Card component display method, graphical user interface and related device

Abstract

The invention discloses a card component display method, a graphical user interface and a related device. The electronic equipment can respond to a sliding operation (such as upward sliding) of a user on an icon of a first application on a desktop, a card assembly corresponding to the first application is temporarily displayed around the icon of the first application in a suspension mode, and display information of a first function in the first application is displayed on the card assembly. When the electronic device receives an input for an area other than the card component on the desktop, the electronic device may turn off displaying the temporarily displayed card component. Therefore, the electronic equipment can be quickly triggered to display the card component corresponding to a certain application on the desktop through one input operation of the user, so that the user can quickly check the card component conveniently, and the display layout of the application icons or the card component on the desktop is not disturbed.

Description

[0001] This application is a divisional application. The application number of the original application is 202110245839.1, and the original application date is March 5, 2021. The entire contents of the original application are incorporated into this application by reference. Technical Field

[0002] The present application relates to the field of human-computer interaction technology, and in particular to a display method of a card component, a graphical user interface and related devices. Background Art

[0003] With the continuous development of communication technology, electronic devices (such as smart phones) are becoming more and more popular and diversified. The usability and friendliness of the human-computer interaction interface between electronic devices and users are receiving more and more attention. The desktop of an electronic device is the operation entrance and important interface carrier of applications on the user's electronic device. The design of the traditional terminal desktop arranges and presents applications in the form of small icons according to the network. In addition to the application icon, the traditional desktop also allows users to add application tool components (widgets) to the desktop. The tool component can display the display information of the application. The user can click on the tool component to trigger the electronic device to directly display the application interface corresponding to the display information.

[0004] At present, traditional tool components have a unified entrance and library. Users can long press a blank area on the desktop of an electronic device to trigger the electronic device to display a tool component control. After the user clicks the tool component control, the electronic device can display a component library interface including multiple tool components. The user can select a tool component and drag it to an area on the desktop of the electronic device. If there is an application icon in the area, the electronic device will transfer the application icon in the area to other locations on the desktop. However, the above steps for adding tool components are cumbersome. Summary of the invention

[0005] The present application provides a card component display method, a graphical user interface and related devices, which can quickly trigger an electronic device to display a card component corresponding to an application through a user's input operation on the desktop, so that the user can quickly view the card component without disrupting the display layout of application icons or card components on the desktop.

[0006] In a first aspect, the present application provides a method for displaying a card component, comprising: an electronic device displays a first interface of a desktop, the first interface including an icon of a first application. The electronic device receives a first sliding operation on the icon of the first application. In response to the first sliding operation, the electronic device displays a first card component corresponding to the first application in a floating manner around the icon of the first application. The first card component includes first display information of a first function in the first application. When the electronic device receives a first input for a first area on the first interface, the electronic device no longer displays the first card component. The first area does not overlap with the display area of ​​the first card component.

[0007] The present application provides a method for displaying a card component. In response to a user's sliding operation on an icon of a first application on a desktop (e.g., sliding upward), an electronic device can temporarily suspend and display a card component corresponding to the first application around the icon of the first application, and the card component displays display information of a first function in the first application. When the electronic device receives input for other areas outside the card component on the desktop, the electronic device can turn off display of the temporarily displayed card component. In this way, an input operation by the user can quickly trigger the electronic device to display a card component corresponding to a certain application on the desktop, which is convenient for the user to quickly view the card component without disrupting the display layout of the application icons or card components on the desktop.

[0008] In a possible implementation, when the electronic device receives the second input, the electronic device adds the first card component to the desktop. After the card component is fixedly added to a blank area of ​​the desktop, if the electronic device receives user input for other blank areas, the user can quickly find the card component corresponding to the application icon from the application icon, and can also quickly add the temporarily displayed card component to the desktop.

[0009] The electronic device may add and display the first card component to a blank area on the first interface of the desktop. Before the first card component is added and displayed to the blank area on the first interface, the blank area on the first interface does not display interface elements such as application icons, application folders, card components, text, etc.

[0010] Optionally, the electronic device can add and display the first card component to a blank area on the second interface of the desktop; wherein, before the first card component is added and displayed to the blank area on the second interface, the blank area on the second interface does not display application icons, application folders, card components, text and other interface elements.

[0011] Optionally, the electronic device can create a third interface on the desktop, and add the first card component to the third interface for display. The third interface can be created on the left page of the first interface or on the right page of the first interface, etc.

[0012] In a possible implementation, in response to the first sliding operation, the electronic device may display the first card component on the first interface of the desktop and may also display the first fixed control corresponding to the first card component. The second input may be an input for the first fixed control.

[0013] In a possible implementation, the process of the electronic device adding and displaying the first card component to the desktop through the received second input may be: the electronic device may receive a first drag operation for the first card component; when the electronic device drags the first card component to the second area on the desktop through the first drag operation, the electronic device adds and displays the first card component to the second area on the desktop. In this way, the user can add the temporarily displayed card component to the designated placement position on the desktop through one operation, simplifying the operation steps for the user to add the card component to the designated placement position on the desktop.

[0014] The electronic device may further display an undo hot zone on the desktop during the first drag operation. When the electronic device drags the first card component to the undo hot zone through the first drag operation, the electronic device undoes adding and displaying the first card component to the desktop. In this way, the user may have an opportunity to undo and return during the process of adding the temporarily displayed card component to the desktop through the drag operation.

[0015] In a possible implementation, when the fifth card component is displayed in the second area, the electronic device can display a second card stack component in the second area, and the second card stack component includes the first card component and the fifth card component. In this way, multiple card components can be combined into one card stack component and placed on the desktop, saving the desktop space.

[0016] In one possible implementation, the process of the electronic device adding and displaying the first card component to the desktop by receiving the second input may be: the electronic device receives a first long press operation for the first card component; in response to the first long press operation, the electronic device displays the second fixed control; the electronic device receives a fourth input for the second fixed control; in response to the fourth input, the electronic device adds and displays the first card component to the desktop.

[0017] In a possible implementation, when the electronic device receives the third input for the first card component, the electronic device displays the fourth interface corresponding to the first function in the first application. In this way, the user can directly trigger the electronic device to directly jump to display the interface of the first function in the first application through the first card component, which simplifies the operation of the user to open the interface of the first function.

[0018] In a possible implementation, the first card component also displays a first control. The electronic device receives a fifth input for the first control. In response to the fifth input, the electronic device controls the first application to perform a first control operation corresponding to the first control. In this way, the user directly controls the first application to perform some control operations on the first card component without first calling up the control interface of these control operations and then triggering the first application to perform these control operations, thereby simplifying the user's operation.

[0019] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device may receive a second drag operation of dragging the first card component displayed in the second area on the desktop to the third area on the desktop. In response to the second drag operation, the electronic device places the first card component from the second area to the third area. In this way, it is convenient for the user to adjust the display position of the card component on the desktop, thereby improving the user experience.

[0020] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device receives a third drag operation for the first card component. During the third drag operation, the electronic device displays a deletion hot zone on the desktop, and the end position of the third drag operation is in the deletion hot zone. In response to the third drag operation, the electronic device removes the first card component from the desktop. In this way, when the user does not want the card component that has been added to the desktop, the card component can be manually deleted.

[0021] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device may receive a second long press operation on the first card component. In response to the second long press operation, the electronic device may display a removal control corresponding to the first card component. After the electronic device receives a sixth input for the removal control, the electronic device removes the first card component from the desktop. In this way, when the user does not want the card component that has been added to the desktop, the card component can be manually deleted.

[0022] In one possible implementation, after the electronic device displays the first card component corresponding to the first application in a floating manner in the area around the icon of the first application, the electronic device displays the first interface of the desktop after receiving the seventh input from the user to switch the first card component corresponding to the first application to the second card component. The electronic device receives a second sliding operation for the icon of the first application. In response to the second sliding operation, the electronic device displays the second card component corresponding to the first application in a floating manner around the icon of the first application, and the second card component is different in style from the first card component. In this way, the user can choose a card component of a style that he or she likes.

[0023] In a possible implementation, after the electronic device displays the first card component corresponding to the first application in a floating manner in the area around the icon of the first application, the electronic device displays the first interface of the desktop after receiving the eighth input from the user to switch the first display information displayed in the first card component to the second display information. The electronic device receives a third sliding operation for the icon of the first application; in response to the third sliding operation, the electronic device displays the first card component corresponding to the first application in a floating manner around the icon of the first application, and displays the second display information on the first card component. In this way, it is convenient for users to switch the display content in the card component.

[0024] In a possible implementation, the first interface also includes an application folder, and the application folder includes an icon of a second application and an icon of a third application, and the electronic device can receive a fourth sliding operation on the application folder. In response to the fourth sliding operation, the electronic device suspends and displays a first card stacking component corresponding to the application folder around the application folder, and the first card stacking component includes a third card component corresponding to the second application and a fourth card component corresponding to the third application. The third card component and the fourth card component can be switched and displayed on the first card stacking component. In this way, the usage space of the interface can be saved.

[0025] In an embodiment of the present application, when the electronic device displays a first card component corresponding to the first application in a floating manner around the icon of the first application, the electronic device no longer displays the application name of the application icon covered by the first card component, and / or the application icon covered by the first card component.

[0026] In a second aspect, the present application provides an electronic device, including one or more processors, a display screen, and one or more memories. The display screen, the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program codes, and the computer program codes include computer instructions. When the one or more processors execute the computer instructions, the electronic device executes the display method of the card component in any possible implementation of any of the above aspects.

[0027] In a third aspect, an embodiment of the present application provides a computer storage medium, including computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes a method for displaying a card component in any possible implementation of any of the above aspects.

[0028] In a fourth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on a computer, it enables the computer to execute the display method of the card component in any possible implementation of any of the above aspects.

[0029] In a fifth aspect, an embodiment of the present application provides a graphical user interface on an electronic device, the electronic device having a display screen, one or more memories, and one or more processors, the one or more processors being used to execute one or more computer programs stored in the one or more memories, the graphical user interface including a graphical user interface displayed when the electronic device executes the above-mentioned first aspect and any possible design of the technical solution of the first aspect.

[0030] In the sixth aspect, an electronic device according to an embodiment of the present application comprises a module / unit for executing the method of the first aspect or any possible design of the first aspect; these modules / units can be implemented by hardware, or corresponding software can be implemented by hardware.

[0031] Among them, for the beneficial effects of the second to sixth aspects, please refer to the beneficial effects of the first aspect and will not be repeated. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application;

[0033] Figure 2 A schematic diagram of a software architecture of an electronic device provided in an embodiment of the present application;

[0034] Figure 3A-3D A schematic diagram of a group of interfaces for adding card components to the desktop provided in an embodiment of the present application;

[0035] Figure 4A-Figure 4K A schematic diagram of an interface of a method for displaying a group of card components provided in an embodiment of the present application;

[0036] Figure 5A-Figure 5N A schematic diagram of a display style of a group of card components provided in an embodiment of the present application;

[0037] Figure 6A-6E A schematic diagram of a set of interfaces for adding card components to the desktop provided in an embodiment of the present application;

[0038] Figure 7A-Figure 7IA schematic diagram of another group of interfaces for adding card components to the desktop provided in an embodiment of the present application;

[0039] Figure 8A-8C A schematic diagram of another group of interfaces for adding card components to the desktop provided in an embodiment of the present application;

[0040] Figure 9A-9H A schematic diagram of a set of interfaces for moving or deleting card components added to the desktop provided in an embodiment of the present application;

[0041] Figures 10A-10H A set of interface schematic diagrams for changing the style of a card component provided in an embodiment of the present application;

[0042] Figures 11A-11F A schematic diagram of a set of interfaces for entering a card management interface provided in an embodiment of the present application;

[0043] Figure 12A-12G A schematic diagram of an interface for editing content in a card component provided in an embodiment of the present application;

[0044] Figure 13A-13E A schematic diagram of a group of interfaces for entering the card center interface provided in an embodiment of the present application;

[0045] Figure 14A-Figure 14C A schematic diagram of an interface for displaying a card component on a group of electronic devices equipped with a folding screen provided in an embodiment of the present application;

[0046] Figures 15A-15F A set of interface schematic diagrams for adding a card component to a service center provided in an embodiment of the present application;

[0047] Fig.16 A schematic flow chart of a method for displaying a card component provided in an embodiment of the present application. DETAILED DESCRIPTION

[0048] The following will be combined with the accompanying drawings to clearly and thoroughly describe the technical solutions in the embodiments of the present application. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in the text is only a description of the association relationship of the associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0049] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features, and in the description of the embodiments of the present application, unless otherwise specified, "plurality" means two or more.

[0050] Figure 1 A schematic structural diagram of an electronic device 100 is shown.

[0051] The following is a detailed description of the embodiment using the electronic device 100 as an example. It should be understood that: Figure 1 The electronic device 100 shown is only an example, and the electronic device 100 may have more Figure 1 The more or less components shown in the figure can be combined with two or more components, or can have different component configurations. The various components shown in the figure can be implemented in hardware, software, or a combination of hardware and software including one or more signal processing and / or application specific integrated circuits.

[0052] The electronic device 100 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure 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.

[0053] It is to be understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or separate some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0054] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0055] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0056] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

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

[0058] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple groups of I2C buses. The processor 110 may 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 may be coupled to the touch sensor 180K through the I2C interface, so that the processor 110 communicates with the touch sensor 180K through the I2C bus interface, thereby realizing the touch function of the electronic device 100.

[0059] The I2S interface can be used for audio communication. In some embodiments, the processor 110 can include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to achieve communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit an audio signal to the wireless communication module 160 via the I2S interface to achieve the function of answering a call through a Bluetooth headset.

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

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

[0062] The MIPI interface can be used to connect the processor 110 with 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 via the CSI interface to implement the shooting function of the electronic device 100. The processor 110 and the display screen 194 communicate via the DSI interface to implement the display function of the electronic device 100.

[0063] 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 with the camera 193, the display 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.

[0064] The USB interface 130 is an interface that complies with the USB standard specification, and specifically 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, and can also be used to transfer data between the electronic device 100 and a peripheral device. It can also be used to connect headphones to play audio through the headphones. The interface can also be used to connect other electronic devices, such as AR devices, etc.

[0065] It is understandable that the interface connection relationship between the modules illustrated in the embodiment of the present invention is only a schematic illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0066] The charging management module 140 is used to receive charging input from a charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from a wired charger through the USB interface 130. In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100. While the charging management module 140 is charging the battery 142, it may also power the electronic device through the power management module 141.

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

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

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

[0070] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may 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 from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0071] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0072] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0073] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

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

[0075] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0076] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

[0077] ISP is used to process the data fed back by camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens. The light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on the noise, brightness, and skin color of the image. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, ISP can be set in camera 193.

[0078] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. 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 passes the electrical signal to the ISP to be converted 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 an image signal in a standard RGB, YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0079] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 100 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0080] Video codecs are used to compress or decompress digital videos. The electronic device 100 may support one or more video codecs. Thus, the electronic device 100 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0081] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn. Through NPU, applications such as intelligent cognition of electronic device 100 can be realized, such as image recognition, face recognition, voice recognition, text understanding, etc.

[0082] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0083] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0084] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0085] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0086] The speaker 170A, also called a "speaker", is used to convert an audio electrical signal into a sound signal. The electronic device 100 can listen to music or listen to a hands-free call through the speaker 170A.

[0087] The receiver 170B, also called a "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device 100 receives a call or voice message, the voice can be received by placing the receiver 170B close to the human ear.

[0088] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by putting their mouth close to microphone 170C to input the sound signal into microphone 170C. The electronic device 100 can be provided with at least one microphone 170C. In other embodiments, the electronic device 100 can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify the sound source, realize directional recording function, etc.

[0089] The earphone interface 170D is used to connect a wired earphone and can be a USB interface 130 or a 3.5 mm open mobile terminal platform (OMTP) standard interface or a cellular telecommunications industry association of the USA (CTIA) standard interface.

[0090] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure according to the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 100 can also calculate the touch position according to the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold acts on the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.

[0091] The gyro sensor 180B can be used to determine the motion posture of the electronic device 100. In some embodiments, the angular velocity of the electronic device 100 around three axes (i.e., x, y, and z axes) can be determined by the gyro sensor 180B. The gyro sensor 180B can be used for anti-shake shooting. For example, when the shutter is pressed, the gyro sensor 180B detects the angle of the electronic device 100 shaking, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shaking of the electronic device 100 through reverse movement to achieve anti-shake. The gyro sensor 180B can also be used for navigation and somatosensory game scenes.

[0092] The air pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device 100 calculates the altitude through the air pressure value measured by the air pressure sensor 180C to assist positioning and navigation.

[0093] The magnetic sensor 180D includes a Hall sensor. The electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip leather case. In some embodiments, when the electronic device 100 is a flip phone, the electronic device 100 can detect the opening and closing of the flip cover according to the magnetic sensor 180D. Then, according to the detected opening and closing state of the leather case or the opening and closing state of the flip cover, the flip cover can be automatically unlocked.

[0094] The acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in all directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of the electronic device and is applied to applications such as horizontal and vertical screen switching and pedometers.

[0095] The distance sensor 180F is used to measure the distance. The electronic device 100 can measure the distance by infrared or laser. In some embodiments, when shooting a scene, the electronic device 100 can use the distance sensor 180F to measure the distance to achieve fast focusing.

[0096] The proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector, such as a photodiode. The light emitting diode may be an infrared light emitting diode. The electronic device 100 emits infrared light outward through the light emitting diode. The electronic device 100 uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100. The electronic device 100 can use the proximity light sensor 180G to detect that the user holds the electronic device 100 close to the ear to talk, so as to automatically turn off the screen to save power. The proximity light sensor 180G can also be used in leather case mode and pocket mode to automatically unlock and lock the screen.

[0097] The ambient light sensor 180L is used to sense the ambient light brightness. The electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in a pocket to prevent accidental touches.

[0098] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, access application locks, fingerprint photography, fingerprint call answering, etc.

[0099] The temperature sensor 180J is used to detect temperature. In some embodiments, the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device 100 reduces the performance of a processor located near the temperature sensor 180J to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to avoid abnormal shutdown of the electronic device 100 due to low temperature. In other embodiments, when the temperature is lower than another threshold, the electronic device 100 performs a boost on the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.

[0100] The touch sensor 180K is also called a "touch panel". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0101] The bone conduction sensor 180M can obtain a vibration signal. In some embodiments, the bone conduction sensor 180M can obtain a vibration signal of a vibrating bone block of the vocal part of the human body. The bone conduction sensor 180M can also contact the human pulse to receive a blood pressure beat signal. In some embodiments, the bone conduction sensor 180M can also be set in an earphone and combined into a bone conduction earphone. The audio module 170 can parse out a voice signal based on the vibration signal of the vibrating bone block of the vocal part obtained by the bone conduction sensor 180M to realize a voice function. The application processor can parse the heart rate information based on the blood pressure beat signal obtained by the bone conduction sensor 180M to realize a heart rate detection function.

[0102] The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.

[0103] Motor 191 can generate vibration prompts. Motor 191 can be used for incoming call vibration prompts, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. For touch operations acting on different areas of the display screen 194, motor 191 can also correspond to different vibration feedback effects. Different application scenarios (for example: time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0104] The indicator 192 may be an indicator light, which may be used to indicate the charging status, power changes, messages, missed calls, notifications, etc.

[0105] The SIM card interface 195 is used to connect a SIM card. The SIM card can be connected to and separated from the electronic device 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195. The electronic device 100 can support 1 or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, and the like. Multiple cards can be inserted into the same SIM card interface 195 at the same time. 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 external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as calls and data communications. 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.

[0106] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present invention, the Android system of the layered architecture is taken as an example to exemplify the software structure of the electronic device 100.

[0107] Figure 2 1 is a software structure block diagram of the electronic device 100 according to an embodiment of the present invention.

[0108] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.

[0109] The application layer can include a series of application packages.

[0110] like Figure 2 As shown, the application package may include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message and other applications.

[0111] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0112] like Figure 2 As shown, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

[0113] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0114] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0115] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0116] The phone manager is used to provide communication functions of the electronic device 100, such as management of call status (including connecting, hanging up, etc.).

[0117] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0118] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0119] Android Runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0120] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

[0121] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0122] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0123] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0124] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0125] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0126] A 2D graphics engine is a drawing engine for 2D drawings.

[0127] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0128] The following is an illustrative description of the workflow of the software and hardware of the electronic device 100 in conjunction with capturing a photo scene.

[0129] When the touch sensor 180K receives a touch operation, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into a raw input event (including touch coordinates, timestamp of the touch operation, and other information). The raw input event is stored in the kernel layer. The application framework layer obtains the raw input event from the kernel layer and identifies the control corresponding to the input event. For example, if the touch operation is a touch single-click operation and the control corresponding to the single-click operation is the control of the camera application icon, the camera application calls the interface of the application framework layer to start the camera application, and then starts the camera driver by calling the kernel layer to capture static images or videos through the camera 193.

[0130] The following describes a method for adding a card component to the desktop provided in an embodiment of the present application.

[0131] like Figure 3AAs shown, the electronic device 100 can display a desktop interface 310, in which a page with application icons is displayed, and the page includes multiple application icons (for example, browser application icon, stock application icon, calculator application icon, voice assistant application icon, video application icon, weather application icon 311, theme application icon, map application icon, gallery application icon, memo application icon, setting application icon, etc.). Among them, the page can also include an application folder icon (for example, icon 312 of application folder 1), which can be used to trigger the electronic device 100 to display one or more application icons. Optionally, a page indicator 314 is also displayed below the page with application icons to indicate the total number of pages on the desktop and the positional relationship between the currently displayed page and other pages. For example, the desktop interface 310 can include three pages, and the black dot in the page indicator is on the far left, which can indicate that the currently displayed page is the leftmost page among the three pages. Optionally, a status bar is also displayed above the page where the application icon is placed, and the status bar may include information such as the strength indicator of the communication signal, the battery value, and the time. Further optionally, there may be a tray (dock) area below the page indicator, and the dock area may include one or more tray icons (for example, a dial application icon 313, a message application icon, a contact application icon, a camera application icon, etc.), and the one or more tray icons in the dock area may remain displayed when the page is switched.

[0132] The electronic device 100 may receive a user's long press input on a blank area on the desktop interface 310, and in response to the input operation, Figure 3B As shown, the electronic device 100 can display a component add control 322, a completion control 323, and a delete control corresponding to each application icon (e.g., a delete control 321 on the weather application icon 311) in the interface 310. The completion control 323 can be used to trigger the electronic device 100 to maintain the current page layout of the desktop and stop displaying the component add control 322, the completion control 323, and the delete control corresponding to each application icon in the interface 310. The delete control corresponding to the application icon can be used to trigger the electronic device 100 to uninstall the application corresponding to the application icon and stop displaying the application icon corresponding to the delete control on the desktop.

[0133] The electronic device 100 may receive an input (eg, a click) from a user to add a control 322 to the component. In response to the input, the electronic device 100 may display a Figure 3C The component shown adds page 330 .

[0134] like Figure 3CAs shown, the component adding page 330 includes one or more card components corresponding to application functions (for example, clock component 331, weather component, music component, sports and health component, etc.). Among them, the card component can display the function display information of the application function corresponding to the card component, and the card component can be used to trigger the electronic device 100 to jump to display the interface of the application function corresponding to the card component. For example, the clock component 331 can display time information, and the clock component 331 can be used to trigger the electronic device 100 to jump to display the time interface (including time information) in the clock application. The weather component can display the weather information of the current area where the electronic device 100 is located (including one or more of the current weather, outdoor temperature, air quality, etc. of the specified area), and the weather component can be used to trigger the electronic device 100 to display the weather interface in the weather application (including the weather information of the current area). The music component can display music information (including one or more of the album cover of the music, the name of the music and the name of the singer), and the music component can be used to trigger the electronic device 100 to display the music playback interface (including music information) in the music application, and so on.

[0135] The electronic device 100 may receive a long press and drag operation of the user on the clock component 331. In response to the long press and drag operation, the electronic device 100 may display the clock component on a display such as Figure 3D A designated area in the interface 340 of the desktop is shown.

[0136] like Figure 3D As shown, the text description of the interface 340 of the desktop can refer to the text description of the aforementioned interface 310, which will not be repeated here. If the designated area includes other application icons or card components before the clock component 331 is dragged to the designated area, the electronic device 100 can display the other application icons or card components in the designated area at other locations when detecting that the user drags the clock component 331 to the designated area, and display the clock component 331 in the designated area.

[0137] As can be seen from the above method of adding a card component to the desktop, the operation steps for the user to add a card component are complicated, and the user cannot find the card component he wants to add to the desktop from a large number of card components in a short time. After adding a new card component to the desktop, the display layout of the application icons or card components on the original desktop of the electronic device 100 is disrupted.

[0138] Therefore, an embodiment of the present application provides a method for displaying a card component. The electronic device 100 can temporarily display a card component corresponding to the first application in a suspended manner around the icon of the first application in response to a user's sliding operation on the icon of the first application on the desktop (for example, sliding upward), and the card component displays display information of the first function in the first application. When the electronic device 100 receives input for other areas outside the card component on the desktop, the electronic device 100 can turn off display of the temporarily displayed card component. Among them, the electronic device 100 can also add the temporarily displayed card component to a designated area displayed on the desktop. In this way, the electronic device 100 can be quickly triggered to display the card component corresponding to a certain application on the desktop through an input operation of the user, which is convenient for the user to quickly view the card component without disrupting the display layout of the application icons or card components on the desktop.

[0139] The following describes in detail a method for displaying a card component provided in an embodiment of the present application in combination with an application scenario.

[0140] In some application scenarios, the electronic device 100 may display a card component corresponding to the first application in response to a user's sliding operation on the icon of the first application on the desktop (e.g., sliding upward). The card component corresponding to the first application may be displayed in a floating manner around the icon of the first application. The card component displays display information of the first function in the first application. The display of the card component corresponding to the first application may be temporary. For example, when the electronic device 100 receives input for other areas outside the card component on the desktop, the electronic device 100 may close the display of the temporarily displayed card component. In this way, it is convenient for users to quickly view the card component of a certain application, and it is also possible to quickly close the temporarily displayed card component.

[0141] For example, Figure 4A As shown, the electronic device 100 may display a desktop interface 310. For a text description of the interface 310, please refer to the above Figure 3A The illustrated embodiments will not be described in detail here.

[0142] The electronic device 100 may receive a sliding operation (eg, sliding upward) on the weather application icon 311, and in response to the sliding operation, Figure 4B As shown, the electronic device 100 can temporarily display the weather component 411 and the fixed control 412 corresponding to the weather component 411.

[0143] like Figure 4BAs shown, the weather component 411 can be covered on the weather application icon 311 and the application icons near the weather icon 311. For example, the weather component 411 can be covered and displayed on the weather application icon 311, the calculator application icon, the voice assistant application icon and the theme application icon. The weather component 411 can display weather information including that queried through the weather application. Among them, the weather information may include the current weather (e.g., "sunny"), outdoor temperature (e.g., "30 degrees Celsius"), air quality (e.g., "excellent air"), and one or more of the highest temperature (e.g., "32 degrees Celsius") and the lowest temperature (e.g., "25 degrees Celsius") of the specified regional location (e.g., "Shenzhen") of the electronic device 100. The specified regional location can be the current location of the electronic device 100 determined by the weather application, or it can be a regional location pre-set by the user. The fixed control 412 can be used to trigger the electronic device 100 to fix the weather component 411 on a blank area of ​​the desktop.

[0144] After temporarily displaying the weather component 411, the electronic device 100 may receive a user input (eg, a click) on an area other than the area where the weather component 411 is located on the desktop, and in response to the input, Figure 4C As shown, the electronic device 100 can turn off the temporarily displayed weather component 411.

[0145] In the embodiment of the present application, the sliding direction of the above sliding operation may not be limited to sliding upwards. In possible implementations, the sliding operation may also be sliding downwards, sliding to the left, sliding to the right, etc. In some embodiments, since sliding to the left or right on the desktop triggers the electronic device 100 to switch to display the page where the application icon is placed on the desktop, sliding downward on the desktop may trigger the electronic device 100 to quickly search for application icons. Therefore, in the embodiment of the present application, sliding upwards is used as a preferred implementation of the above sliding operation, which can prevent the sliding operation from triggering other functions.

[0146] It should be noted that the starting position of the above sliding operation is above the application icon or within a preset distance near the application icon, and the sliding track of the above sliding operation can be a straight line or a curve. Figure 4A The electronic device 100 is identified in the above Figure 4A The relative positions of the top, bottom, left and right sides when placed in the manner shown. These positions are used to illustrate the positions on the touch screen of the electronic device 100, or the positions on the interface displayed by the electronic device 100. In addition, upward refers to the direction from the bottom to the top, downward refers to the direction from the top to the bottom, rightward refers to the direction from the left to the right, and leftward refers to the direction from the right to the left. The description of the position also applies to the description of the subsequent figures.

[0147] In an embodiment of the present application, the icon of the first application is not limited to the application icon directly displayed on multiple pages in the desktop, but can also be an application icon displayed in the dock area on the desktop (such as the dial application icon 313), or it can be an application icon included in the application folder displayed on the desktop.

[0148] For example, Figure 4C As shown, the electronic device 100 may receive a sliding operation (eg, sliding up) from the user on the dial application icon 313 in the dock area, and in response to the sliding operation, Figure 4D As shown, the electronic device 100 can temporarily display the dial component 413 and the fixed control 414 corresponding to the dial component 413.

[0149] like Figure 4D As shown, the dialing component 413 can be covered on the dialing application icon 313 and the application icon near the dialing application icon 313. For example, the dialing component 413 can be displayed on the dialing application icon 313 and the information application icon. The dialing component 413 can display a dialing control including multiple specified contacts in the dialing application (for example, the dialing control 415 of the contact "Dad", the dialing control of the contact "Mom", the dialing control of the contact "Wife", the dialing control of the contact "Daughter", etc.). Among them, the specified contact can be a contact detected by the electronic device 100 for the most recent call, or a contact pre-added to the dialing component 413 by the electronic device 100 in response to the user's input. The dialing control of the specified contact can be used to trigger the electronic device 100 to dial the specified contact corresponding to the dialing control. For example, when the electronic device 100 detects that the user clicks the dialing control 415, the electronic device 100 can dial the contact "Dad". The fixed control 414 can be used to trigger the electronic device 100 to display the dialing component 413 fixedly in a blank area on the desktop.

[0150] After temporarily displaying the dial component 413, the electronic device 100 may receive a user input (eg, a click) on an area other than the area where the dial component 413 is located on the desktop, and in response to the input, such as Figure 4E As shown, the electronic device 100 can close the temporarily displayed dial component 413.

[0151] Another example is Figure 4E As shown, the electronic device 100 may receive a user input (eg, click) on the icon 312 of the application folder 1. In response to the click operation, the electronic device 100 may display the following Figure 4F Interface 420 of application folder 1 is shown.

[0152] like Figure 4FAs shown, the interface 420 of the application folder 1 may include multiple application icons, for example, an email application icon, a SIM card application icon, a clock application icon, a recorder application icon, a music application icon 421, a sports and health application icon, and the like.

[0153] The electronic device 100 may receive a sliding operation (eg, sliding up) of the user on the music application icon 421, and in response to the sliding operation, Figure 4G As shown, the electronic device 100 can temporarily overlay and display the music component 422 and the fixed control 423 corresponding to the music component on the music application icon 421.

[0154] like Figure 4G As shown, the music component 422 can be overlaid on the music application icon 421 and the application icons near the music application icon 421. For example, the music component 422 can be overlaid and displayed on the music application icon 421, the sports health application icon, the SIM card application icon and the clock application icon. The music component 422 can display music information including the specified music in the music application, wherein the music information includes an album image 424, a music name (e.g., "Dreamxxxxx"), a singer name (e.g., "Dexxxx"), and the like. Optionally, the music component corresponding to the music application can also display playback function controls such as play / pause controls, previous controls, next controls, and / or lyrics information of the specified music. Among them, the fixed control 423 can be used to trigger the electronic device 100 to fix the music component 422 on a blank area of ​​the desktop.

[0155] After temporarily displaying the music component 422, the electronic device 100 may receive a user input (e.g., a click) on an area other than the area where the music component 422 is located on the interface 420. In response to the input, the electronic device 100 may close the temporarily displayed music component 422. After closing the temporarily displayed music component 422, the electronic device 100 may display the music component 422 as described above. Figure 4F The interface 420 shown, or as shown above Figure 4E Interface 310 is shown.

[0156] In a possible implementation, when an application folder includes icons of multiple applications, the electronic device 100 can temporarily display the corresponding card stack component in the application folder after detecting a sliding operation (e.g., sliding up) performed by the user on the application folder. The card stack component can switch to display the card components corresponding to the multiple applications.

[0157] For example, Figure 4HAs shown, the electronic device 100 displays a desktop interface 430. The interface 430 includes an icon 431 of an application folder 2. The application folder 2 includes a clock application icon and a music application icon. For text descriptions of other interface elements in the interface 430, please refer to the above Figure 3A The description of the desktop interface 310 in the illustrated embodiment will not be repeated here.

[0158] The electronic device 100 may receive a sliding input (eg, sliding upward) from the user to the icon 431 of the application folder 2, and in response to the sliding operation, such as Fig. 4I As shown, the electronic device 100 can temporarily display a card stacking component 440 , a fixed control 441 corresponding to the card stacking component 440 , and an indicator 442 .

[0159] like Fig. 4I As shown, the card stack component 440 can currently display a clock component 443 of a clock application, and the clock component 443 can display current time information. The indicator 442 can be used to indicate the positional relationship of the card component currently displayed on the card stack component 440 relative to other card components in the card stack component 440. For example, the black dot in the indicator 442 is above the white dot, indicating that the clock component 443 currently displayed on the card stack component 440 is arranged on top of other components.

[0160] The electronic device 100 may receive a user's sliding operation (eg, sliding up) on the card stacking component 440, and in response to the sliding operation, Figure 4J As shown, the electronic device 100 can switch and display the music component 444 corresponding to the music application on the card stack component 440. The text description of the music component 444 can refer to the above Figure 4G The textual description of the music component 422 in the illustrated embodiment will not be repeated here.

[0161] In the embodiment of the present application, after the electronic device 100 temporarily displays the card component corresponding to the first application in response to a sliding operation (e.g., sliding up) on the first application, the electronic device 100 can receive a user input (e.g., a single click) on the card component. In response to the input, the electronic device 100 can display a specified interface in the first application.

[0162] For example, Figure 4J , the electronic device 100 may receive a single click operation of the user on the music component 444, and in response to the single click operation, the electronic device 100 may display the following Figure 4K The music playing interface 450 of the music application shown in the figure includes the music information displayed in the music component 444 (for example, the album image, name, singer, etc. of the specified music).

[0163] In a possible implementation, the electronic device 100 can add a card component corresponding to the first application to a blank area on the desktop in response to a user's sliding operation (e.g., sliding upward) on the icon of the first application on the desktop. In this way, the user can quickly add the card component corresponding to the first application to the desktop.

[0164] In an embodiment of the present application, after receiving a sliding operation of the user on the icon of the first application, the electronic device 100 can temporarily cover and display the card group corresponding to the first application on the icon of the first application and the multiple application icon placement areas around the icon of the first application. Among them, the size of the card component can be the size covering multiple adjacent application icons, for example, the size of the card component can be the size covering 1 application icon horizontally and 2 adjacent application icons vertically, or the size covering 2 adjacent application icons horizontally and 1 application icon vertically. For another example, the size of the card component can cover 2 adjacent application icons horizontally and 2 adjacent application icons vertically. For another example, the size of the card component can cover 2 adjacent application icons horizontally and 4 adjacent application icons vertically, or the size covering 4 adjacent application icons horizontally and 2 adjacent application icons vertically. For another example, the size of the card component can cover 4 adjacent application icons horizontally and 4 adjacent application icons vertically. For another example, the size of the card component can cover 4 adjacent application icons horizontally and 4 adjacent application icons vertically.

[0165] In order to make the interface simple and beautiful when the electronic device 100 temporarily displays the card component, the electronic device 100 can hide the related elements of the application icon covered by the card component when the card component is temporarily displayed. The related elements of the application icon include but are not limited to the application icon, the superscript or subscript on the application icon, the application name, etc.

[0166] For example, Figure 5A As shown, the four application icons are arranged in two horizontal and two vertical arrays. The name of application icon 1 (e.g., "Name 1") is displayed below application icon 1, the name of application icon 2 (e.g., "Name 2-abcd") is displayed below application icon 2, the name of application icon 3 (e.g., "Name 3") is displayed below application icon 3, and the name of application icon 4 (e.g., "Name 4") is displayed below application icon 4. A superscript 511 may be displayed at the upper right corner of application icon 2, and a superscript 512 may be displayed at the lower right corner of application icon 4.

[0167] When the electronic device 100 detects a user's upward sliding operation on the application icon 3, the electronic device 100 may temporarily display the card component corresponding to the application icon 3. The style of the card component corresponding to the application icon 3 displayed by the electronic device 100 may be as follows: Figure 5B or Figure 5C or Figure 5D or Figure 5E shown.

[0168] like Figure 5B As shown, the size of the card component 521 corresponding to the application icon 3 can be the size that covers two adjacent application icons horizontally and vertically. The electronic device 100 can directly cover the card component 521 on the application icon 1, the application icon 2, the application icon 3 and the application icon 4. Among them, the name of the application icon 1 can be hidden, and the name of the application icon 2 is partially not hidden because its length exceeds the length of the application icon 2. The superscript 511 of the application icon 2 and the subscript 512 of the application icon 4 can also remain displayed.

[0169] like Figure 5C As shown, the electronic device 100 can directly cover the card component 521 on the application icon 1, the application icon 2, the application icon 3 and the application icon 4. Among them, the names of the application icon 1 and the application icon 2, and the corner mark 511 of the application icon 2 and the corner mark 512 of the application icon 4 are all hidden. The name of the application icon 3 and the name of the application icon 4 can be displayed at the bottom of the card component 521.

[0170] like Figure 5D As shown, the electronic device 100 can directly cover the card component 521 on the application icon 1, the application icon 2, the application icon 3 and the application icon 4. Among them, the names of the application icon 1, the application icon 2 and the application icon 4, as well as the corner mark 511 of the application icon 2 and the corner mark 512 of the application icon 4 are all hidden. Only the name of the application icon 3 can be displayed below the card component 521. Optionally, the name of the application icon 3 can be displayed in the center of the bottom direction of the card component 521.

[0171] like Figure 5E As shown, the electronic device 100 can cover the card component 521 on the application icon placement area where application icon 1, application icon 2, application icon 3 and application icon 4 are located. Among them, application icon 1, application icon 2, application icon 3 and related elements of these three application icons are all hidden. Only the name of application icon 3 is displayed at the bottom of the card component 521.

[0172] In an embodiment of the present application, when the electronic device 100 temporarily displays the card component of the first application, the card component of the first application preferentially covers the icon of the first application and the application icon placement area to the right or top of the icon of the first application. When the area to the right of the icon of the first application or the area in the top direction is not sufficient to accommodate the card component of the first application, the electronic device 100 can cover the card component displayed on the icon of the first application and the application icon placement area to the left or bottom. The following example uses the size of the card component of the first application to cover two adjacent application icons horizontally and two adjacent application icons vertically for explanation.

[0173] For example, Fig. 5F , Figure 5G As shown, the eight application icons are arranged in four directions from left to right and two directions from top to bottom. Among them, the name of application icon 1 is displayed below application icon 1 (for example, "Name 1"). The name of application icon 2 is displayed below application icon 2 (for example, "Name 2"). The name of application icon 3 is displayed below application icon 3 (for example, "Name 3"). The name of application icon 4 is displayed below application icon 4 (for example, "Name 4"). The name of application icon 5 is displayed below application icon 5 (for example, "Name 5"). The name of application icon 6 is displayed below application icon 6 (for example, "Name 6"). The name of application icon 7 is displayed below application icon 7 (for example, "Name 7"). The name of application icon 8 is displayed below application icon 8 (for example, "Name 8"). When electronic device 100 receives a swipe up operation for application icon 8, since there is no area to the right of application icon 8 to place the application icon, electronic device 100 can display the card component 531 corresponding to application icon 8 overlaying application icon 3, application icon 4, application icon 7 and application icon 8.

[0174] Another example is Figure 5H , Fig.5I As shown, when the electronic device 100 receives a swipe up operation for application icon 4, since there is no area to the right and top of application icon 4 to place the application icon, the electronic device 100 can display the card component 541 corresponding to application icon 4 overlaying application icon 3, application icon 4, application icon 7 and application icon 8.

[0175] Another example is Figure 5J , Figure 5KAs shown, when the electronic device 100 receives a swipe up operation for application icon 3, since there is no area on the top of application icon 3 to place the application icon, the electronic device 100 can display the card component 551 corresponding to application icon 3 overlaying application icon 3, application icon 4, application icon 7 and application icon 8.

[0176] In some embodiments, other card components are fixedly displayed around the first application. When the electronic device 100 temporarily displays the card component of the first application, the electronic device 100 can display the card component of the first application over the icon of the first application and part of the area of ​​the other card components.

[0177] For example, Figure 5L , Figure 5M As shown, a card component 1 is fixedly displayed on the left side of the application icon 2, an application icon 1 is displayed in the top direction, there is no area on the right side where the application icon can be placed, and an application icon 6 is displayed in the bottom direction. Among them, the size of the card component 1 is to cover two adjacent application icons horizontally and vertically. The name of the card component 1 (for example, "component name a") is displayed below the card component 1. The name of the application icon 1 (for example, "name 1") is displayed below the application icon 1. The name of the application icon 2 (for example, "name 2") is displayed below the application icon 2. The name of the application icon 3 (for example, "name 3") is displayed below the application icon 3. The name of the application icon 4 (for example, "name 4") is displayed below the application icon 4. The name of the application icon 5 (for example, "name 5") is displayed below the application icon 5. The name of the application icon 6 (for example, "name 6") is displayed below the application icon 6. The name of the application icon 7 (for example, "name 7") is displayed below the application icon 7. The name of application icon 8 (e.g., "Name 8") is displayed below application icon 8. The name of application icon 9 (e.g., "Name 9") is displayed below application icon 9. The name of application icon 10 (e.g., "Name 10") is displayed below application icon 10. When electronic device 100 receives a swipe-up operation for application icon 2, electronic device 100 may temporarily cover and display card component 561 corresponding to application icon 2 on application icon 1, application icon 2, and the two rightmost application icon placement areas of card component 1.

[0178] In some embodiments, other card components are already fixedly displayed around the first application. When the electronic device 100 temporarily displays the card component of the first application, the electronic device 100 can cover and display the card component of the first application in other areas without overlapping with the other card components that have been fixedly displayed. In this way, when the card component of the first application is called out for display, it will not be blocked by the card components that have been fixedly displayed, thereby preventing the display content in the card component of the first application from being blocked.

[0179] For example, Figure 5N As shown, when the electronic device 100 receives a swipe-up operation for application icon 2, the electronic device 100 can temporarily cover and display the card component 561 corresponding to application icon 2 on application icon 5, application icon 6, application icon 9 and application icon 10, and display a mark 562. The mark 562 is used to indicate that the card component 561 is the card component corresponding to application icon 2.

[0180] Optionally, if other card components are already fixedly displayed around the first application, when the electronic device 100 temporarily displays the card component of the first application, the electronic device 100 may also reduce the display size of the already fixedly displayed card component so that the card component of the first application can be displayed around the first application (not shown in the figure). Alternatively, the electronic device 100 may also reduce the display size of the card component of the first application so that the card component of the first application can be displayed around the first application (not shown in the figure).

[0181] In some application scenarios, after the electronic device 100 temporarily displays the card component corresponding to the first application in a floating manner around the icon of the first application, the temporarily displayed card component can be fixedly added to a blank area on the desktop of the electronic device 100 through user input. Among them, after the card component is fixedly added to the blank area of ​​the desktop, if the electronic device 100 receives user input for other blank areas, the electronic device 100 still keeps displaying the card component on the desktop. In this way, it is convenient for the user to quickly find the card component corresponding to the application icon from the application icon, and it is also possible to quickly and fixedly add the temporarily displayed card component to the desktop.

[0182] When the electronic device 100 temporarily displays the card component corresponding to the first application, it can also display the fixed control corresponding to the card component. When the electronic device 100 receives the user's input for the fixed control, the electronic device 100 can display the temporarily displayed card component in a blank area on the desktop that is not occupied by application icons or other components.

[0183] For example, Fig. 6AAs shown, the electronic device 100 may display a desktop interface 610. In response to a user's sliding operation (e.g., sliding up) on a weather application icon, the electronic device 100 may display a weather component 611 and a fixed control 612 corresponding to the weather application icon on the interface 610. The text description of the interface 610 may refer to the aforementioned Figure 4B The textual description of the interface 310 in the illustrated embodiment will not be repeated here.

[0184] The electronic device 100 may receive a user input (eg, a click) for the fixed control 612, and in response to the input, Figure 6B As shown, the electronic device 100 can add the weather component 611 to a blank area of ​​the page where the weather application icon is located in the desktop interface 610. After the weather component 611 is added to the blank area of ​​the desktop, if the electronic device 100 receives user input for other blank areas, the electronic device 100 still keeps displaying the weather component 611 on the desktop.

[0185] When there is no blank area on the page where the icon of the first application on the desktop is located to accommodate the card component corresponding to the first application, the electronic device 100 can add the card component to the blank area of ​​the last page on the desktop.

[0186] For example, Figure 6C As shown, the electronic device 100 displays a desktop interface 620. The interface 620 temporarily displays a weather component 621 and a fixed control 622 corresponding to the weather application icon. There is no blank area in the page displayed in the interface 620 to accommodate the weather component 621. After the electronic device 100 receives the user's request for the fixed control 622, Fig.6D As shown, the electronic device 100 can add the weather component 621 to a blank area in the last page of the desktop where the application icon is placed.

[0187] like Fig.6D As shown, the electronic device 100 displays a desktop interface 630, and the black dot in the page indicator 634 is used to indicate that the page currently displayed in the interface 630 is the last page on the desktop where the application icon is placed. The interface 630 displays one or more application icons (such as a search device application icon, a game center application icon, an application market application icon, a reading application icon, etc.) and a weather component 621.

[0188] In one possible implementation, when there is no blank area on the page where the icon of the first application on the desktop is located to accommodate the card component corresponding to the first application, the electronic device 100 can create a new page on the desktop to place the application icon and the card component, and add the card component corresponding to the first application to the newly created page.

[0189] The newly created page may be a blank page created before the page where the icon of the first application is located, or a blank page created after the page where the icon of the first application is located, or a blank page created on the last page of the desktop.

[0190] like Fig. 6E As shown, when the electronic device 100 receives the user's Figure 6C After the fixed control 622 is input, the electronic device 100 can display the desktop interface 640. The interface 640 displays the weather component 621 and the page indicator 644. The black dot in the page indicator 644 is used to indicate that the page displayed on the interface 640 is the above-mentioned Figure 6C The interface 620 shown shows a newly created page on the right side of the displayed page.

[0191] In a possible implementation, when there is no blank area on the page where the icon of the first application on the desktop is located that can accommodate the card component corresponding to the first application, the electronic device 100 can add the card component corresponding to the first application to the designated interface. For example, the electronic device 100 can add the card component to the negative one screen, the control center interface, the service center interface, and so on.

[0192] In one possible implementation, after temporarily displaying the card component corresponding to the first application, the electronic device 100 may receive a drag operation from the user on the card component. Based on the drag operation, the electronic device 100 may add the temporarily displayed card component to a blank area on the desktop.

[0193] For example, Fig. 7A As shown, the electronic device 100 may display a desktop interface 710. In response to a user's sliding operation (e.g., sliding up) on a weather application icon, the electronic device 100 may display a weather component 711 corresponding to the weather application icon on the interface 710. The text description of the interface 710 may refer to the aforementioned Figure 4B The textual description of the interface 310 in the illustrated embodiment will not be repeated here.

[0194] The electronic device 100 can receive a user's drag operation on the weather component 711. In response to the drag operation, the electronic device 100 can fix the electronic device 100 at the end position of the drag operation based on the drag operation. In this way, the user can add the temporarily displayed card component to the designated placement position on the desktop through one operation, which simplifies the operation steps for the user to add the card component to the designated placement position on the desktop.

[0195] like Figure 7BAs shown, when the drag operation stays in area 712 , the electronic device 100 may display a placement prompt on the area 712 , and the placement prompt may be used to prompt the user that the weather component 711 may be placed in the area 712 .

[0196] like Figure 7C As shown, when the end position of the drag operation is near the area 712 , the electronic device 100 can fix the weather component 711 to the area 712 .

[0197] In one possible implementation, after temporarily displaying the card component corresponding to the first application, the electronic device 100 may receive a drag operation from the user on the card component. Based on the drag operation, the electronic device 100 merges the card component with other card components added to the desktop into a card stack component.

[0198] For example, Fig.7D As shown, the electronic device 100 displays a desktop interface 720. In response to a user's sliding operation (e.g., sliding up) on a weather application icon, the electronic device 100 can display a weather component 721 corresponding to the weather application icon on the interface 720. The interface 720 also displays a clock component 722 that has been added to the desktop.

[0199] like Fig. 7E As shown, the electronic device 100 can receive a user's dragging operation on the weather component 721. When the weather component 721 is dragged to the vicinity of the clock component 722, the electronic device 100 can display a placement prompt around the clock component 722. The placement prompt is used to prompt the user that the weather component 721 can be merged with the clock component 722 into the same card stack component.

[0200] like Figure 7F As shown, when the end position of the drag operation is near the clock component 722, the electronic device 100 can display the card stack component 731 and the indicator 732 on the interface 720. The weather component 721 can be currently displayed on the card stack component 731. The indicator 732 can be used to indicate the positional relationship of the card component currently displayed on the card stack component 731 relative to other card components in the card stack component 731. For example, the black dot in the indicator 732 is above the white dot, indicating that the weather component 721 currently displayed on the card stack component 731 is arranged on top of the clock component 722.

[0201] The electronic device 100 may receive a user's sliding operation (eg, sliding up) on the card stacking component 731, and in response to the sliding operation, Figure 7G As shown, the electronic device 100 can switch to display the clock component 722 on the card stacking component 731.

[0202] In the embodiment of the present application, when the electronic device 100 adds the temporarily displayed card component to the desktop based on the drag operation, the electronic device 100 can display an undo hot zone. When the temporarily displayed card component is dragged near the undo hot zone, the electronic device 100 can exit displaying the card component. In this way, the user can have an opportunity to undo and return when adding the temporarily displayed card component to the desktop through the drag operation.

[0203] For example, Figure 7H , Fig.7I As shown, the electronic device 100 displays a desktop interface 710. For a text description of the interface 710, please refer to the aforementioned Fig. 7A The text portion of the illustrated embodiment will not be repeated here. While the temporarily displayed weather component 711 is being dragged by the user, the electronic device 100 may display a revocation hotspot 713 on the interface 710. When the weather component 711 is dragged near the revocation hotspot 713, the electronic device 100 may exit displaying the weather component 711. When the electronic device 100 exits displaying the weather component 711 and receives a sliding operation (e.g., swiping up) from the user on the weather application, the electronic device 100 may still temporarily display the weather component 711 again.

[0204] In a possible implementation, after the electronic device 100 temporarily displays the card component corresponding to the first application, the electronic device 100 may receive an input (e.g., a long press) for the card component, and in response to the input, the electronic device 100 may display a shortcut menu corresponding to the card component, wherein the shortcut menu includes a desktop add control. When the electronic device 100 receives the user's input (e.g., a single click) for the desktop add control, the electronic device 100 may add the card component to a blank area on the desktop that is not occupied by application icons or other components.

[0205] For example, Fig. 8A As shown, the electronic device 100 may display a desktop interface 810. In response to a user's sliding operation (e.g., sliding up) on a weather application icon, the electronic device 100 may display a weather component 811 corresponding to the weather application icon on the interface 810. The text description of the interface 810 may refer to the aforementioned Figure 4B The textual description of the interface 310 in the illustrated embodiment will not be repeated here.

[0206] The electronic device 100 may receive a long press operation on the weather component 811, and in response to the long press operation, Figure 8B As shown, the electronic device 100 can display a shortcut menu 812 corresponding to the weather component 811.

[0207] like Figure 8B As shown, the shortcut menu 812 may include a desktop add control 813 and other controls (such as a cross-device use control, a sharing control, a collection control, a removal control, etc.). Among them, the desktop add control 813 can be used to trigger the electronic device 100 to add the weather component 811 to a blank area on the desktop. The cross-device use control can be used to trigger the electronic device 100 to provide the weather component 811 to other devices for use. The sharing control can be used to trigger the electronic device 100 to share the information displayed in the weather component 811 with other devices. The collection control can be used to trigger the electronic device 100 to collect the weather component 811 in a specified interface or a specified folder. The removal control can be used to trigger the electronic device 100 to exit displaying the weather component 811.

[0208] The electronic device 100 may receive an input (eg, a click) for adding a control 813 to the desktop, and in response to the input, Figure 8C As shown, the electronic device 100 can add the weather component 811 to the blank area of ​​the page where the weather application icon is located in the desktop interface 810. After the weather component 811 is added to the blank area of ​​the desktop, if the electronic device 100 receives user input for other blank areas, the electronic device 100 still keeps displaying the weather component 811 on the desktop.

[0209] Optionally, when there is no blank area on the page where the weather application icon is located on the desktop to accommodate the weather component 811, the electronic device 100 can add the weather component 811 to the blank area of ​​the last page on the desktop, or, create a new page on the right side of the page where the weather application icon is located to place the application icon and card component, and add the weather component to the newly created page.

[0210] In some embodiments, after adding the card component to the desktop, the electronic device 100 can adjust the position of the card component on the desktop through the user's input. In this way, it is convenient for the user to adjust the display position of the card component on the desktop, thereby improving the user experience.

[0211] For example, Fig. 9A As shown, the electronic device 100 can add a weather component 911 to the desktop interface 910. For a text description of the desktop interface 910, please refer to the aforementioned Figure 7C The text description of the interface 710 is not repeated here.

[0212] like Fig. 9BAs shown, the electronic device 100 may receive a drag operation of the weather component 911. When the weather component 911 is dragged to the area 912, a placement mark may be displayed on the area 912, and the placement mark may be used to prompt the user that the weather component 911 may be placed in the area 912. For example, the placement mark may be a dotted frame displayed at the boundary of the area 912.

[0213] like Fig. 9C As shown, when the end position of the drag operation on the weather component 911 is near the area 912 , the electronic device 100 can place the weather component 911 in the area 912 .

[0214] In some embodiments, after adding the card component to the desktop, the electronic device 100 can delete the card component through the user's input. In this way, when the user does not want the card component added to the desktop, the card component can be manually deleted.

[0215] For example, Fig.9D As shown, the electronic device 100 can add a weather component 911 to the desktop interface 910. For a text description of the desktop interface 910, please refer to the aforementioned Figure 7C The text description of the interface 710 is not repeated here. The electronic device 100 may receive the drag operation of the weather component 911. When the weather component 911 is dragged, the electronic device 100 may display a deletion hotspot 913 on the interface 910. When the weather component 911 is dragged to the vicinity of the deletion hotspot 913 and the dragging ends, as shown in FIG. Fig.9E As shown, the electronic device 100 can delete the weather component 911 from the desktop.

[0216] Another example is Fig.9F As shown, the electronic device 100 can add a weather component 911 to the desktop interface 910. For a text description of the desktop interface 910, please refer to the aforementioned Figure 7C The text description of the interface 710 is not repeated here. The electronic device 100 can receive a long press operation of the weather component 911. In response to the long press operation, Figure 9G As shown, the electronic device 100 may display a removal control 914. Figure 9HAs shown, when the electronic device 100 can receive the user's input (such as a single click) for the removal control 914, the electronic device 100 can display a deletion prompt box 921. The deletion prompt box 921 includes deletion prompt information, a deletion confirmation control 923, and a deletion cancellation control 924. Among them, the deletion prompt information can be used to prompt the user to delete the weather component 911 from the desktop. For example, the deletion prompt information can be a text prompt "Swipe on the 'Weather' application icon to add it again." When the electronic device 100 receives an input (such as a single click) for the deletion confirmation control 923, the electronic device 100 can delete the weather component 911 from the desktop. When the electronic device 100 receives an input (such as a single click) for the deletion cancellation control 924, the electronic device 100 can keep the weather component 911 displayed on the desktop.

[0217] Optionally, the electronic device 100 may directly respond to the above Figure 9G The input of the removal control 914 is shown to delete the weather component 911 from the desktop.

[0218] In some application scenarios, the electronic device 100 can display the component management interface of the first application through user input. Among them, the card components of different styles of the first application can be switched in the component management interface. The electronic device 100 can change the default style of the card component corresponding to the first application through the user's input in the component management interface. When the electronic device 100 receives a sliding operation (such as sliding up) from the user on the icon of the first application, the electronic device 100 can display the card component of the default style of the first application. In this way, the user can choose the card component of his favorite style.

[0219] Specifically, after receiving a long press operation on the icon of the first application, the electronic device 100 may display a shortcut menu of the first application, wherein the shortcut menu may include a management card control. After receiving a single click operation on the management card control, the electronic device 100 may display a component management interface of the first application.

[0220] For example, Fig. 10A As shown, the electronic device 100 can display a desktop interface 1010. The interface 1010 displays a page with application icons, which includes multiple application icons (for example, a browser application icon, a stock application icon, a calculator application icon, a voice assistant application icon, a music application icon 1011, a video application icon, a weather application icon, a theme application icon, a map application icon, a gallery application icon, a clock application icon, a setting application icon, etc.). For the text part not described in detail in the interface 1010, please refer to the above Figure 3AThe text description of the interface 310 is not repeated here.

[0221] The electronic device 100 may receive a user input (eg, long press) on the music application icon 1011, and in response to the input, the electronic device 100 may display the following Fig. 10B The shortcut menu (shortcut) 1012 is shown.

[0222] like Fig. 10B As shown, the shortcut menu 1012 may include a management card control 1013 and other functional controls (for example, a song identification control, a program search control, a music play control, a recently played control, a share control, a remove control, etc.).

[0223] The electronic device 100 receives a user input (eg, a click) for the management card control 1013. In response to the input, the electronic device 100 may display the following Fig. 10C Component management interface 1020 is shown.

[0224] like Fig. 10CAs shown, the component management interface 1020 may display one or more pages with card components of the music application (for example, the currently displayed page has a music component 1031). The styles of the card components on different pages (including size and / or function controls) are different. A page indicator 1023 is displayed below the page where the card component is placed. The page indicator 1023 can be used to indicate the number of styles of the card components corresponding to the music application, and the positional relationship between the currently displayed page and other pages on the component management interface 1020. For example, the component management interface 1020 may include three pages with card components placed thereon, and the black light in the page indicator 1023 is on the far left, which may indicate that the currently displayed page is the leftmost page of the three pages. The component management interface 1020 also displays a main card setting control 1021, a desktop add control 1022, a main card setting prompt 1024, a return control 1025, and the like. Among them, the main card setting control 1021 can be used to trigger the electronic device 100 to set the card component currently displayed on the component management interface 1020 as the default card component of the music application. When the electronic device 100 receives a sliding operation (such as sliding up) on the music application icon, the electronic device 100 can display the default card component. The desktop adding control 1022 can be used to trigger the electronic device 100 to add the card component currently displayed on the component management interface 1020 to the blank area of ​​the desktop. The main card setting prompt 1024 can be used to indicate that the default card component of the music application is the card component currently displayed on the component management interface 1020. For example, the default card component of the current music application is the music component 1031. The return control 1025 can be used to trigger the electronic device 100 to return to display the previous interface (such as the above Fig. 10B The desktop interface 1010 is shown).

[0225] The electronic device 100 may receive a sliding operation (eg, left sliding) from the user on the page where the music component 1031 is placed, and in response to the sliding operation, Fig. 10D As shown, the electronic device 100 can switch to display a page with a music component 1032 on the component management interface 1020. The size of the music component 1032 is different from that of the music component 1031, and the function controls displayed in the music component 1032 are different from those displayed in the cloud music component 1031.

[0226] For example, the size of the music component 1031 may be such that it covers two application icons horizontally and two application icons vertically, and the album image, music name, and singer name of the music specified in the music application may be displayed on the music component 1031. The size of the music component 1032 may be such that it covers four application icons horizontally and two application icons vertically, and the album image, music name, singer name, play / pause control, previous song control, and next song control of the music specified in the music application may be displayed on the music component 1032.

[0227] When the electronic device 100 switches to display a page on which the music component 1032 is placed on the component management interface 1020, it can receive user input (e.g., a single click) for the main card setting control 1021. In response to the input, the electronic device 100 can set the music component 1032 as the default card component of the music application.

[0228] like Fig.10E As shown, after the electronic device 100 sets the music component 1032 as the default card component of the music application, the electronic device 100 may display Fig. 10A The electronic device 100 may receive a sliding operation (eg, sliding up) for the music application 1011, and in response to the sliding operation, Fig.10F As shown, the electronic device 100 can temporarily display the music component 1032.

[0229] After temporarily displaying the music component 1032, the electronic device 100 may receive user input (e.g., a click) on an area other than the area where the music component 1032 is located on the interface 1010. In response to the input, the electronic device 100 may close the temporarily displayed music component 1032.

[0230] In one possible implementation, when the electronic device 100 displays the component management interface of the first application, the electronic device 100 can add the card component displayed in the component management interface to the blank area of ​​the desktop through the user's input in the component management interface of the first application.

[0231] For example, Figure 10G As shown, the electronic device 100 can display a page with a music component 1032, a main card setting control 1021, and a desktop adding control 1022 on the component management interface 1020. Fig. 10D The illustrated embodiments will not be described in detail here.

[0232] The electronic device 100 may receive a user input (eg, a single click) for adding the desktop control 1022 , and in response to the input, the electronic device 100 may add the music component 1032 to a blank area of ​​the desktop.

[0233] like Fig. 10H As shown, when the electronic device 100 returns to the interface 1010 displaying the above desktop, the music component 1032 can be displayed in the interface 1010.

[0234] Optionally, after adding the music component 1032 to a blank area on the desktop, the electronic device 100 may also add the music component 1032 to another blank area on the desktop when the electronic device 100 continues to receive input from the user to add a control 1022 to the desktop. In other words, the same type of card component can be added to the desktop multiple times, and multiple card components of the same type can be displayed in different areas on the desktop.

[0235] In an embodiment of the present application, after the card component of the first application is added to the desktop and fixed, the electronic device 100 can also receive a sliding operation (for example, swiping up) from the user on the icon of the first application. In response to the sliding operation, the electronic device 100 can also continue to temporarily display the card component of the first application near the icon of the first application.

[0236] Optionally, after the card component of the first application is added to the desktop and fixed, when the electronic device 100 can also receive a sliding operation (such as swiping up) from the user on the icon of the first application, the electronic device 100 may no longer continue to display the card component of the first application.

[0237] In a possible implementation, the electronic device 100 may temporarily display the card component of the first application after receiving a sliding operation (e.g., sliding up) on the icon of the first application. The electronic device 100 may display a shortcut menu after receiving a long press operation on the card component of the first application. The shortcut menu may include a management card control. When the electronic device 100 receives a single click operation on the management card control, the electronic device 100 may display the component management interface of the first application.

[0238] For example, Fig.11A As shown, the electronic device 100 can display a desktop interface 1110. For the text description of the interface 1110, please refer to the aforementioned Fig. 10A The textual description of the desktop interface 1010 in the illustrated embodiment will not be repeated here.

[0239] The electronic device 100 may receive a sliding operation (eg, sliding up) from the user on the music application icon 1111, and in response to the sliding operation, Fig. 11B As shown, the electronic device 100 may display a music component 1121. Optionally, the electronic device 100 may also display a fixed control 1122. The fixed control 1122 may be used to trigger the electronic device 100 to add the music component 1121 to a blank area of ​​the desktop.

[0240] like Fig. 11B As shown, when the electronic device 100 receives a long press operation from the user on the music component 1121 , the electronic device 100 may display the management card control 1123 .

[0241] like Fig. 11C , Fig.11D As shown, when the electronic device 100 receives a single click operation on the management card control 1123, the electronic device 100 may display a component management interface 1130. For a text description of the component management interface 1130, please refer to the above Fig. 10C The textual description of the component management interface 1130 in the illustrated embodiment will not be repeated here.

[0242] In an embodiment of the present application, card components of different styles in the above-mentioned component management interface are not limited to being displayed by switching left and right, but can also be displayed by scrolling up and down.

[0243] For example, Fig.11EAs shown, the electronic device 100 can display a component management interface 1140 of a music application. The component management interface 1140 can display a music component 1141, a music component 1142, and a music component 1143. Among them, the music component 1141 is stacked on the upper layer of the music component 1142, and the music component 1142 is stacked on the upper layer of the music component 1143. The styles (including size and / or displayed function controls) of the three card components of the music component 1141, the music component 1142, and the music component 1143 are different. The component management interface 1140 also displays a main card setting control 1144, a desktop adding control 1145, and a main card setting prompt 1146. The main card setting control 1144 can be used to trigger the electronic device 100 to set the card component currently stacked and displayed on the uppermost layer of the component management interface 1140 as the default card component of the music application. When the electronic device 100 receives a sliding operation (e.g., sliding up) for the music application icon, the electronic device 100 can display the default card component. The desktop adding control 1145 can be used to trigger the electronic device 100 to add the card component currently stacked and displayed on the top layer of the component management interface 1140 to the blank area of ​​the desktop. The main card setting prompt 1146 can be used to indicate that the default card component of the music application is the card component displayed on the top layer of the component management interface 1140. For example, when the music component 1141 is currently stacked and displayed on the top layer of three card components, the main card setting prompt 1146 is displayed on the component management interface 1140 to indicate that the electronic device 100 has set the music component 1141 as the default card component of the music application.

[0244] The electronic device 100 may receive a user's sliding operation (eg, sliding down) on the music component 1141 on the component management interface 1140, such as Fig.11F As shown, the electronic device 100 can display the music component 1142 stacked on the upper layer of the music component 1143, and can display the music component 1143 stacked on the upper layer of the music component 1141.

[0245] In some application scenarios, after displaying the card component of the first application, the electronic device 100 can edit the displayed content in the card component through the user's input, so that it is convenient for the user to switch the displayed content in the card component.

[0246] For example, Fig. 12A As shown, the electronic device 100 can display a desktop interface 1210. For a text description of the desktop interface 1210, please refer to the aforementioned Fig. 10A The text description of the interface 1010 in the illustrated embodiment will not be repeated here.

[0247] The electronic device 100 may receive a sliding operation (eg, sliding up) from the user on the weather application icon 1211 in the interface 1210, and in response to the sliding operation, Fig. 12B As shown, the electronic device 100 can temporarily display a weather component 1211. The weather component 1211 can be displayed over the weather application icon 1211 and the application icons around the weather application icon 1211 (such as a calculator application icon, a voice assistant application icon, and a theme application icon). The weather component 1211 currently displays weather information for the "Shenzhen" area. The weather information may include the current weather (such as "sunny"), outdoor temperature (such as "30 degrees Celsius"), air quality (such as "excellent air"), and the highest temperature (such as "32 degrees Celsius") and lowest temperature (such as "25 degrees Celsius") of the day. Optionally, the electronic device 100 can also display a fixed control 1212 while temporarily displaying the weather component 1211. The fixed control 1212 can be used to trigger the electronic device 100 to add the weather component 1211 to a blank area on the desktop.

[0248] like Fig. 12C As shown, when the electronic device 100 receives a user's long press operation on the weather component 1211, the electronic device 100 may display an edit city control 1221. Optionally, the electronic device 100 may also display a card management control while displaying the edit city control 1221. The card management control may be used to trigger the electronic device 100 to display a component management interface of the weather application.

[0249] The electronic device 100 may receive a user input (eg, a click) for the edit city control 1221. In response to the input, the electronic device 100 may display the following information: Fig.12D The city editing interface 1230 is shown.

[0250] like Fig.12D As shown, the city editing interface 1230 includes a plurality of city options and a city adding control 1233, for example, a “Shenzhen” city option 1231, a “Yunnan” city option, a “Beijing” city option, and a “Shanghai” city option 1232, etc. The city adding control 1233 can be used to add other city options to the city editing interface 1230.

[0251] The electronic device 100 may receive a user input (eg, a single click) for the “Shanghai” city option 1232 , and in response to the input, the electronic device 100 may display weather information for the “Shanghai” city in the weather component.

[0252] like Fig.12EAs shown, after acquiring the weather information of the city “Shanghai”, the electronic device 100 can display the weather information of the city “Shanghai” in the weather component 1211 .

[0253] Another example is Fig.12F As shown, the electronic device 100 can display a city editing control 1243 after the user performs a long press operation on the clock component 1241. A fixed control 1242 is displayed on the clock component 1242. The city editing control 1243 can be used to trigger the electronic device 100 to change the time zone city to which the clock displayed on the clock component 1241 belongs. Optionally, the electronic device 100 can also display a card management control while displaying the city editing control 1243, and the card management control can be used to trigger the electronic device 100 to display a component management interface of the clock application.

[0254] Another example is Figure 12G As shown, the electronic device 100 can display an album selection control 1253 after the user performs a long press operation on the music component 1251. A fixed control 1252 is displayed on the music component 1251. The album selection control 1253 can be used to trigger the electronic device 100 to change the music information displayed in the music component 1251, wherein the music information includes an album image, a music name, a singer name, etc. Optionally, the electronic device 100 can also display a card management control while displaying the album selection control 1253, and the card management control can be used to trigger the electronic device 100 to display a component management interface of the music application.

[0255] In some application scenarios, the electronic device 100 can trigger the display of a card component center interface through user input on the desktop, wherein the card component center interface displays all card components on the electronic device 100. The card components in the card component center interface can be arranged in a specified order.

[0256] For example, Fig.13A As shown, the electronic device 100 can display a desktop interface 1310. For a text description of the interface 1310, please refer to the aforementioned Fig. 10A The textual description of the desktop interface 1010 in the illustrated embodiment will not be repeated here.

[0257] The electronic device 100 may receive an input from the user on a blank area on the desktop interface 1310 (eg, two fingers sliding toward each other), and in response to the input, the electronic device 100 may display the following Fig. 13B Page adjustment interface 1320 is shown.

[0258] like Fig. 13BAs shown, the page adjustment interface 1320 displays a card center control 1341, a page with application icons placed on the desktop (e.g., page 1330), and other functional controls (e.g., wallpaper setting controls, switching effect controls, desktop setting controls, and page indicators, etc.). Multiple application icons are displayed in the page 1330. When the electronic device 100 receives a left swipe operation of the user on the page 1330, the electronic device 100 can switch to display a page to the right of the page 1330 on the page adjustment interface 1320 with a preset switching effect.

[0259] The electronic device 100 may receive a user input (eg, a click) for the card center control 1341, and in response to the input, the electronic device 100 may display the following Fig. 13C The card component center interface 1350 is shown.

[0260] like Fig. 13C As shown, the card component center interface 1350 includes a search box 1352 and a card component set classified by application type. The search box 1352 can be used to receive text information input by the user and trigger the electronic device 100 to search and display the card component corresponding to the text information based on the text information input by the user.

[0261] For example, the card component set classified by application type includes a card component set corresponding to system applications, a card component corresponding to music applications, and a card component corresponding to sports and health applications. When there are multiple card components for an application, the electronic device 100 can stack the card components of the application. The default card component of the application is displayed on the card stack component, and the number of types of card components corresponding to the application is displayed below the card stack component. For example, a card stack component 1351 of a music application is displayed on the card component center interface 1350. The number of types of card components corresponding to the music application (for example, 3 types) is displayed below the card stack component 1351. Optionally, when there are multiple card components for an application, the electronic device 100 can arrange the multiple card components of the application in a display column of the application.

[0262] The electronic device 100 may receive a user input (eg, a click) for the card stacking component 1351, and in response to the input, the electronic device 100 may display a display such as Fig.13D The card component display interface 1360 is shown.

[0263] like Fig.13DAs shown, the card component display interface 1360 displays a music component 1361, a music component 1362, a music component 1363 and a desktop add control 1364. Among them, the music component 1361 is stacked on the upper layer of the music component 1362, and the music component 1362 is stacked on the upper layer of the music component 1363. The styles (including size and / or displayed function controls) of the three card components of the music component 1361, the music component 1362 and the music component 1363 are different. The desktop add control 1364 can be used to add the card component stacked and displayed on the top layer on the card component display interface 1360 to a blank area on the desktop for display.

[0264] The electronic device 100 may receive a user's sliding operation (eg, sliding down) on the music component 1361 on the card component display interface 1360, such as Fig.13E As shown, the electronic device 100 can display the music component 1362 on the upper layer of the music component 1143 and the music component 1363 on the upper layer of the music component 1361 by the user sliding the music component 1361 on the card component display interface 1360 (e.g., sliding down). Optionally, the card components of different styles in the above card component display interface are not limited to scrolling up and down, but can also be switched left and right.

[0265] In the embodiment of the present application, the card components can be displayed in the above card component center interface in a specified order. Among them, the electronic device 100 can preferentially display the card components corresponding to the applications installed at the factory at the top of the card component center interface.

[0266] Optionally, the electronic device 100 may display the card components corresponding to the applications installed within the most recent preset time period at the top of the central interface of the card components.

[0267] Optionally, the electronic device 100 may sort the card components of each application type in the above-mentioned card component center interface based on the historical usage data of the application (such as one or more of usage time, usage frequency, location scenario, etc.). For example, the card components corresponding to applications with long usage time are displayed at the top of the card component center interface, and the card components corresponding to applications with short usage time are displayed at the bottom of the card component center interface. For another example, the card components corresponding to applications with high usage frequency are displayed at the top of the card component center interface, and the card components corresponding to applications with low usage frequency are displayed at the bottom of the card component center interface.

[0268] In some embodiments, some system applications on the electronic device 100 do not have corresponding application icons on the desktop, but these system applications have corresponding card components, such as power components, health use device components, and so on. The electronic device 100 can temporarily display the card component of the system application through the user's sliding operation (e.g., sliding up) in the setting application icon. Optionally, the electronic device 100 can display the card component of the system application in the above-mentioned card component center interface, and support the user to add the card component of the system application in the above-mentioned card component center interface to the desktop.

[0269] In some application scenarios, when the spacing distance between application icons on the desktop of the electronic device 100 changes, the size of the card component displayed on the desktop will also change with the change in the spacing distance between the application icons.

[0270] For example, Fig.14A As shown, the display screen of the electronic device 100 can be folded. When the electronic device 100 is in a folded state, the display screen of the electronic device 100 can be divided into a first screen and a second screen, and the electronic device 100 can display an interface 1410 of the desktop on the first screen. The interface 1410 displays a page with application icons, which includes multiple application icons (for example, a browser application icon, a stock application icon, a calculator application icon, a voice assistant application icon, a video application icon, a weather application icon, a theme application icon, a map application icon, a gallery application icon, a memo application icon, a setting application icon, etc.). Among them, the page can also include an application folder icon (for example, an icon 312 of application folder 1), which can be used to trigger the electronic device 100 to display one or more application icons. Optionally, a page indicator 1413 is also displayed below the page with application icons to indicate the total number of pages on the desktop and the positional relationship between the currently displayed page and other pages. For example, the interface 1410 of the desktop can include four pages, and the black dot in the page indicator is on the far left, which can indicate that the currently displayed page is the leftmost page among the four pages. Further optionally, there may be a dock area below the page indicator, which may include one or more tray icons (for example, a dial application icon, a message application icon, a contact application icon, a camera application icon, etc.), and one or more tray icons in the dock area may remain displayed when the page is switched.

[0271] After receiving a user's sliding operation (e.g., sliding up) on the weather application icon, the electronic device 100 can temporarily display a weather component 1411 on the interface 1410 of the desktop. The weather component 1411 is displayed over the weather application icon, the calculator application icon, the voice assistant application icon, and the theme application icon. Optionally, while displaying the weather component 1411, the electronic device 100 can also display a fixed control 1412 corresponding to the weather component 1411, and the fixed control 1412 can be used to trigger the electronic device 100 to add the weather component 1411 to a blank area of ​​the desktop.

[0272] like Fig. 14B As shown, when the display screen of the electronic device 100 switches from the folded state to the unfolded state, the electronic device 100 can display a desktop interface 1420 on the display screen. The interface elements in the interface 1420 are similar to those in the above Fig.14A The interface elements in the interface 1410 are the same. In particular, since the distance between the application icons in the interface 1420 is increased, the size of the weather component 1411 is also increased, but the weather component 1411 is still displayed over the weather application icon, calculator application icon, voice assistant application icon and theme application icon.

[0273] Optionally, when the display screen of the electronic device 100 switches from the folded state to the unfolded state, the electronic device 100 may combine two adjacent pages with application icons placed on the desktop displayed on the first screen in the folded state into one page, and display it on the display screen.

[0274] For example, Fig. 14C As shown, when the display screen of the electronic device 100 is switched from the folded state to the unfolded state, the electronic device 100 can display a desktop interface 1430 on the display screen. The desktop interface 1430 includes the above Fig.14A The interface elements displayed in the interface 1410 shown and the interface elements in a page to the right of the page displayed by the interface 1410. For example, a page to the right of the page displayed by the above interface 1410 may display a search device application, a game center application, an application market application, a reading application, a sports health component, a clock component, etc. Among them, since the spacing distance between the application icons in the non-dock area on the interface 1430 of the desktop remains unchanged when the display screen of the electronic device 100 switches from the folded state to the unfolded state, the size of the weather component 1411 remains unchanged, and the weather component 1411 is still displayed on the above weather application icon, calculator application icon, voice assistant application icon and theme application icon.

[0275] In some application scenarios, after the electronic device 100 temporarily displays the card component corresponding to the first application through the user's sliding operation (e.g., sliding up) on the icon of the first application, the card component corresponding to the first application can be added to a designated shortcut interface (e.g., a service center interface). The electronic device 100 can trigger the display of the designated shortcut interface through a designated input on the desktop. In this way, it is convenient for the user to quickly view the card component corresponding to the first application on the designated shortcut interface.

[0276] For example, Fig.15A As shown, the electronic device 100 can display a desktop interface 1510. Among them, the interface 1510 displays a weather application icon 1511. For the parts not described in detail in the interface 1510, please refer to the aforementioned Figure 6C The text description of the interface 620 is not repeated here.

[0277] The electronic device 100 may receive a sliding operation of the user on the desktop (for example, sliding diagonally from the left bottom to the right top of the desktop), and in response to the sliding operation, the electronic device 100 may display the following Fig. 15B The service center interface 1520 is shown.

[0278] like Fig. 15B As shown, the service center interface 1520 displays one or more service options and card components that have been added to the service center interface. The one or more service options include express service options, music service options, alarm service options, etc. The card components that have been added to the service center interface include sports and health components, music components, clock components, power components, etc.

[0279] like Fig. 15C As shown, the electronic device 100 may receive a sliding operation (eg, a single click) from the user on the weather application icon 1511, and in response to the sliding operation, Fig.15D As shown, the electronic device 100 may temporarily display the weather component 1512 .

[0280] like Fig.15D As shown, the weather component 1512 can be displayed over the weather application icon and the calculator application icon. The electronic device 100 can receive a long press operation of the user on the weather component 1512, and in response to the long press operation, the electronic device 100 can display the following Fig.15E The shortcut menu 1513 is shown.

[0281] like Fig.15EAs shown, the shortcut menu 1513 displays an add to service center control 1514. Optionally, the shortcut menu 1513 also displays other functional controls, such as cross-device use controls, sharing controls, add to desktop controls, remove controls, etc. Among them, the add to service center control 1514 can be used to trigger the electronic device 100 to add the weather component 1512 to the service center interface. The cross-device use control can be used to trigger the electronic device 100 to provide the weather component 1512 to other devices for use. The sharing control can be used to trigger the electronic device 100 to share the information displayed in the weather component 1512 with other devices. The desktop add control can be used to trigger the electronic device 100 to add the weather component 1512 to a blank area on the desktop.

[0282] like Fig.15F As shown, when the electronic device 100 receives the user input (such as a single click) for the above-mentioned addition to the service center control 1514, when the electronic device displays the service center interface 1520 again, the electronic device 100 can display the weather component 1512 on the service center interface 1520.

[0283] A method for displaying a card component provided in an embodiment of the present application is described below.

[0284] Fig.16 A schematic flow chart of a card component display method provided in an embodiment of the present application is shown.

[0285] like Fig.16 As shown, the method includes:

[0286] S1601: The electronic device displays a first interface of the desktop, where the first interface includes an icon of a first application.

[0287] Exemplarily, the first interface may be the above Figure 4A In the desktop interface 310 shown, the icon of the first application can be an icon in a page on the desktop where application icons are placed (for example, a weather application icon 311, etc.), or an icon in the dock area (for example, a dial application icon 313). The first interface can also be the above Figure 4F As shown in the interface 420 displayed by opening an application folder (eg, application folder 1) on the desktop, the icon of the first application may be an application icon (eg, music application icon 421) included in the application folder. For specific contents, please refer to the above embodiments and will not be repeated here.

[0288] S1602: The electronic device receives a first sliding operation on an icon of a first application.

[0289] S1603: In response to the first sliding operation, the electronic device displays a first card component corresponding to the first application in a floating manner around the icon of the first application, wherein the first card component includes first display information of a first function in the first application.

[0290] For example, the first application may be a weather application, and the first card component may be the above-mentioned Figure 4B The weather component 411 shown. For another example, the first application may be a dial application, and the first card component may be the above Figure 4C The dial component 413 is shown. For another example, the first application may be a music application, and the first card component may be the above Figure 4G The music component 422 shown in FIG. 4 is shown in FIG. 4 , etc. For the specific content, reference may be made to the aforementioned embodiment and no further description will be given here.

[0291] S1604: When the electronic device receives a first input to the first area on the first interface, the electronic device no longer displays the first card component, wherein the first area does not overlap with the display area of ​​the first card component.

[0292] The display of the first card component corresponding to the first application may be temporary. For example, when the electronic device receives input to other areas on the desktop other than the first card component, the electronic device may close the temporarily displayed first card component. In this way, it is convenient for the user to quickly view the card component of a certain application, and also to quickly close the temporarily displayed card component.

[0293] In a possible implementation, when the electronic device receives the second input, the electronic device adds the first card component to the desktop. After the card component is fixedly added to a blank area of ​​the desktop, if the electronic device receives user input for other blank areas, the user can quickly find the card component corresponding to the application icon from the application icon, and can also quickly add the temporarily displayed card component to the desktop.

[0294] The electronic device may add and display the first card component to a blank area on the first interface of the desktop. Before the first card component is added and displayed to the blank area on the first interface, the blank area on the first interface does not display interface elements such as application icons, application folders, card components, text, etc.

[0295] Exemplarily, the first interface may be as described above. Figure 6B In the illustrated desktop interface 610, the first card component may be a weather component 611, and the weather component 611 may be added to a blank area of ​​the interface 610. For specific contents, reference may be made to the aforementioned embodiment, which will not be described in detail here.

[0296] Optionally, the electronic device can add and display the first card component to a blank area on the second interface of the desktop; wherein, before the first card component is added and displayed to the blank area on the second interface, the blank area on the second interface does not display application icons, application folders, card components, text and other interface elements.

[0297] Exemplarily, the second interface of the desktop can be the above Fig.6D The desktop shown is an interface 630 when the last page with application icons is displayed. For the specific content, please refer to the above embodiment, which will not be described in detail here.

[0298] Optionally, the electronic device may create a new third interface on the desktop, and add the first card component to display on the third interface.

[0299] The third interface can be newly created on the left page of the first interface or on the right page of the first interface, etc. Fig. 6E Interface 640 is shown.

[0300] In a possible implementation, the electronic device may display a first fixed control corresponding to the first card component while displaying the first card component on the first interface of the desktop in response to the first sliding operation. The second input may be an input for the first fixed control. For details, please refer to the aforementioned Figure 6A-6E The illustrated embodiments will not be described in detail here.

[0301] In a possible implementation, the process of the electronic device adding and displaying the first card component to the desktop through the received second input may be: the electronic device may receive a first drag operation for the first card component; when the electronic device drags the first card component to the second area on the desktop through the first drag operation, the electronic device adds and displays the first card component to the second area on the desktop. In this way, the user can add the temporarily displayed card component to the designated placement position on the desktop through one operation, simplifying the operation steps for the user to add the card component to the designated placement position on the desktop.

[0302] For details, please refer to the above Figure 7A-7C The illustrated embodiments will not be described in detail here.

[0303] The electronic device may further display an undo hot zone on the desktop during the first drag operation. When the electronic device drags the first card component to the undo hot zone through the first drag operation, the electronic device undoes adding and displaying the first card component to the desktop. In this way, the user may have an opportunity to undo and return during the process of adding the temporarily displayed card component to the desktop through the drag operation.

[0304] For details, please refer to the above Figure 7H-Figure 7I The illustrated embodiments will not be described in detail here.

[0305] In a possible implementation, when the fifth card component is displayed in the second area, the electronic device can display a second card stack component in the second area, and the second card stack component includes the first card component and the fifth card component. In this way, multiple card components can be combined into one card stack component and placed on the desktop, saving the desktop space.

[0306] Exemplarily, the first card component may be the above Fig.7D The weather component 721 and the fifth card component shown can be the above Fig.7D In the embodiment shown, the clock assembly 722, the second card stacking assembly may be the above Figure 7F or Figure 7G The card stacking assembly 731 in the illustrated embodiment. For details, please refer to the aforementioned Figure 7D-7G The illustrated embodiments will not be described in detail here.

[0307] In one possible implementation, the process of the electronic device adding and displaying the first card component to the desktop by receiving the second input may be: the electronic device receives a first long press operation for the first card component; in response to the first long press operation, the electronic device displays the second fixed control; the electronic device receives a fourth input for the second fixed control; in response to the fourth input, the electronic device adds and displays the first card component to the desktop.

[0308] Exemplarily, the first card component may be the above Figure 8B In the weather component 811 of the illustrated embodiment, the second fixed control can be as described above. Figure 8B The desktop add control 813 in the illustrated embodiment. For details, please refer to the aforementioned Figure 8A-8C The embodiments are not described in detail here.

[0309] In a possible implementation, when the electronic device receives the third input for the first card component, the electronic device displays the fourth interface corresponding to the first function in the first application. In this way, the user can directly trigger the electronic device to directly jump to display the interface of the first function in the first application through the first card component, which simplifies the operation of the user to open the interface of the first function.

[0310] For example, the first application may be a music application, the first function may be a music playing function in the music application, and the fourth interface may be the above-mentioned Figure 4K The music playing function in the illustrated embodiment corresponds to the music playing interface 450. For details, please refer to the above embodiments and will not be described in detail here.

[0311] In a possible implementation, the first card component also displays a first control. The electronic device receives a fifth input for the first control. In response to the fifth input, the electronic device controls the first application to perform a first control operation corresponding to the first control. In this way, the user directly controls the first application to perform some control operations on the first card component without first calling up the control interface of these control operations and then triggering the first application to perform these control operations, thereby simplifying the user's operation.

[0312] Exemplarily, the first card component may be the above Figure 4D In the dialing component 413 in the illustrated embodiment, the first control may be the contact "Dad" dialing control 415. The first control operation may be a dialing operation for the contact "Dad". For the specific content, please refer to the above embodiment and will not be repeated here.

[0313] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device may receive a second drag operation of dragging the first card component displayed in the second area on the desktop to the third area on the desktop. In response to the second drag operation, the electronic device places the first card component from the second area to the third area. In this way, it is convenient for the user to adjust the display position of the card component on the desktop, thereby improving the user experience.

[0314] For details, please refer to the above Figure 9A-9C The illustrated embodiments will not be described in detail here.

[0315] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device receives a third drag operation for the first card component. During the third drag operation, the electronic device displays a deletion hot zone on the desktop, and the end position of the third drag operation is in the deletion hot zone. In response to the third drag operation, the electronic device removes the first card component from the desktop. In this way, when the user does not want the card component that has been added to the desktop, the card component can be manually deleted.

[0316] For details, please refer to the above Figure 9D-9E The illustrated embodiments will not be described in detail here.

[0317] In a possible implementation, after the electronic device adds and displays the first card component to the desktop, the electronic device may receive a second long press operation on the first card component. In response to the second long press operation, the electronic device may display a removal control corresponding to the first card component. After the electronic device receives a sixth input for the removal control, the electronic device removes the first card component from the desktop. In this way, when the user does not want the card component that has been added to the desktop, the card component can be manually deleted.

[0318] For details, please refer to the above Figure 9F-9H The illustrated embodiments will not be described in detail here.

[0319] In one possible implementation, after the electronic device displays the first card component corresponding to the first application in a floating manner in the area around the icon of the first application, the electronic device displays the first interface of the desktop after receiving the seventh input from the user to switch the first card component corresponding to the first application to the second card component. The electronic device receives a second sliding operation for the icon of the first application. In response to the second sliding operation, the electronic device displays the second card component corresponding to the first application in a floating manner around the icon of the first application, and the second card component is different in style from the first card component. In this way, the user can choose a card component of a style that he or she likes.

[0320] For details, please refer to the above Figures 10A-10F The illustrated embodiments will not be described in detail here.

[0321] In a possible implementation, after the electronic device displays the first card component corresponding to the first application in a floating manner in the area around the icon of the first application, the electronic device displays the first interface of the desktop after receiving the eighth input from the user to switch the first display information displayed in the first card component to the second display information. The electronic device receives a third sliding operation for the icon of the first application; in response to the third sliding operation, the electronic device displays the first card component corresponding to the first application in a floating manner around the icon of the first application, and displays the second display information on the first card component. In this way, it is convenient for users to switch the display content in the card component.

[0322] For details, please refer to the above Figure 12A-12G The illustrated embodiments will not be described in detail here.

[0323] In a possible implementation, the first interface also includes an application folder, and the application folder includes an icon of a second application and an icon of a third application, and the electronic device can receive a fourth sliding operation on the application folder. In response to the fourth sliding operation, the electronic device suspends and displays a first card stacking component corresponding to the application folder around the application folder, and the first card stacking component includes a third card component corresponding to the second application and a fourth card component corresponding to the third application. The third card component and the fourth card component can be switched and displayed on the first card stacking component. In this way, the usage space of the interface can be saved.

[0324] Exemplarily, the first interface can be as described above Figure 4HIn the desktop interface 430 shown, the application folder may be the application folder 2 in the interface 430, the second application may be the clock application in the application folder 2, and the third application may be the music application in the application folder 2. The first card stacking component may be the above Fig. 4I or Figure 4J The card stack assembly 440 shown, the third card assembly may be a clock assembly 443, and the fourth card assembly may be a music assembly 444. For details, please refer to the aforementioned Figure 4H-4K The illustrated embodiments will not be described in detail here.

[0325] In the embodiment of the present application, when the electronic device displays the first card component corresponding to the first application in a floating manner around the icon of the first application, the electronic device no longer displays the application name of the application icon covered by the first card component and / or the application icon covered by the first card component. For details, please refer to the above Figure 5A-Figure 5N The illustrated embodiments will not be described in detail here.

[0326] A method for displaying a card component is provided through an embodiment of the present application. In response to a user's sliding operation on the icon of a first application on the desktop (e.g., sliding upward), the electronic device can temporarily suspend and display a card component corresponding to the first application around the icon of the first application, and the card component displays display information of the first function in the first application. When the electronic device receives input for other areas outside the card component on the desktop, the electronic device can turn off display of the temporarily displayed card component. Among them, the electronic device can also add the temporarily displayed card component to a designated area on the desktop. In this way, the electronic device can be quickly triggered to display the card component corresponding to a certain application on the desktop through an input operation of the user, which is convenient for the user to quickly view the card component without disrupting the display layout of the application icons or card components on the desktop.

[0327] The above embodiments may be used alone or in combination with each other to achieve different technical effects.

[0328] In the embodiments provided by the present application, the method provided by the embodiments of the present application is introduced from the perspective of the electronic device as the execution subject. In order to implement the functions in the methods provided by the embodiments of the present application, the electronic device may include a hardware structure and / or a software module, and implement the above functions in the form of a hardware structure, a software module, or a hardware structure plus a software module. Whether a function of the above functions is executed in the form of a hardware structure, a software module, or a hardware structure plus a software module depends on the specific application and design constraints of the technical solution.

[0329] The embodiment of the present application also provides an electronic device, including: a display screen, a processor, a memory, an application program, and a computer program. The above-mentioned devices can be connected via one or more communication buses. Among them, the one or more computer programs are stored in the above-mentioned memory and are configured to be executed by the one or more processors, and the one or more computer programs include instructions, and the above-mentioned instructions can be used to enable the electronic device to perform each step of the interface display method in the above-mentioned embodiments.

[0330] Exemplarily, the processor may be Figure 1 The processor 110 shown in the figure, the above-mentioned memory can be specifically Figure 1 The internal memory 120 shown and / or the external memory connected to the electronic device, the display screen may be Figure 1 The display screen 130 shown is not limited in any way in the embodiment of the present application.

[0331] In addition, an embodiment of the present application further provides a graphical user interface (GUI) on an electronic device, and the graphical user interface specifically includes a graphical user interface displayed by the electronic device when executing the above-mentioned method embodiments.

[0332] As used in the above embodiments, the term "when..." or "after..." may be interpreted to mean "if..." or "after..." or "in response to determining..." or "in response to detecting...", depending on the context. Similarly, the phrase "upon determining..." or "if (the stated condition or event) is detected" may be interpreted to mean "if determining..." or "in response to determining..." or "upon detecting (the stated condition or event)" or "in response to detecting (the stated condition or event)", depending on the context.

[0333] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented by software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present invention is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center to another website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more available media integrated. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk Solid State Disk (SSD)), etc. In the absence of conflict, the solutions of the above embodiments can be used in combination.

Claims

1. A method for displaying a card component, characterized in that: include: The electronic device displays a first interface of the desktop, wherein the first interface includes an icon of a first application; The electronic device receives a first input operation on an icon of a first application; In response to the first input operation, the electronic device displays a first card component and a first fixed control corresponding to the first application, wherein the first card component includes first display information of a first function in the first application; When the electronic device receives a second input operation for the first fixed control, the electronic device adds and displays the first card component to a blank area on the first interface of the desktop, or a blank area on the second interface of the desktop; or, the electronic device creates a third interface on the desktop, and adds and displays the first card component to the third interface.

2. The method according to claim 1, characterized in that The electronic device displays a first card component corresponding to the first application, including: The electronic device displays the first card component in a floating manner.

3. The method according to claim 1 or 2, characterized in that: The method further comprises: When the electronic device receives a third input operation on the first area on the first interface, the electronic device no longer displays the first card component, wherein the first area does not overlap with the display area of ​​the first card component.

4. The method according to any one of claims 1 to 3, characterized in that The first card component also displays a first control; the method further includes: The electronic device receives a fourth input operation for the first control; In response to the fourth input operation, the electronic device controls the first application to perform a first control operation corresponding to the first control.

5. The method according to any one of claims 1 to 4, characterized in that After the electronic device displays a first card component corresponding to the first application, the method further includes: After receiving a fifth input operation of the user switching the first card component corresponding to the first application to a second card component, the electronic device displays the first interface of the desktop; The electronic device receives a sixth input operation for the icon of the first application; In response to the sixth input operation, the electronic device displays a second card component corresponding to the first application, and the second card component is different in style from the first card component.

6. The method according to any one of claims 1 to 5, characterized in that After the electronic device displays a first card component corresponding to the first application, the method further includes: After receiving a seventh input operation of the user switching the first display information displayed in the first card component to the second display information, the electronic device displays the first interface of the desktop; The electronic device receives an eighth input operation for the icon of the first application; In response to the eighth input operation, the electronic device displays the first card component and displays the second presentation information on the first card component.

7. The method according to any one of claims 1 to 6, characterized in that The first interface also includes an application folder, and the application folder includes an icon of the second application and an icon of the third application. The method further includes: The electronic device receives a ninth input operation for the application folder; In response to the ninth input operation, the electronic device displays a first card stacking component corresponding to the application folder, wherein the first card stacking component includes a third card component corresponding to the second application and a fourth card component corresponding to the third application.

8. The method according to any one of claims 1 to 7, characterized in that: The method comprises: When the electronic device displays the first card component corresponding to the first application, the electronic device displays the first interface in a blurred manner.

9. An electronic device, characterized in that: include: One or more processors, a display screen, and one or more memories; wherein the display screen, the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program codes, and the computer program codes include computer instructions, and when the one or more processors execute the computer instructions, the electronic device executes the method as described in any one of claims 1 to 8.

10. A computer storage medium comprising computer instructions, characterized in that: When the computer instructions are executed on an electronic device, the electronic device is caused to execute the method as claimed in any one of claims 1 to 8.

Images