WO2022184173A1 - 一种卡片组件的显示方法、图形用户界面及相关装置 - Google Patents

一种卡片组件的显示方法、图形用户界面及相关装置 Download PDF

Info

Publication number
WO2022184173A1
WO2022184173A1 PCT/CN2022/079357 CN2022079357W WO2022184173A1 WO 2022184173 A1 WO2022184173 A1 WO 2022184173A1 CN 2022079357 W CN2022079357 W CN 2022079357W WO 2022184173 A1 WO2022184173 A1 WO 2022184173A1
Authority
WO
WIPO (PCT)
Prior art keywords
electronic device
application
card
component
desktop
Prior art date
Application number
PCT/CN2022/079357
Other languages
English (en)
French (fr)
Inventor
杨诗姝
胡越
张凯
王淼
孙雪娇
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Priority to EP22762634.8A priority Critical patent/EP4283454A1/en
Publication of WO2022184173A1 publication Critical patent/WO2022184173A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to the technical field of human-computer interaction, and in particular, to a display method of a card assembly, a graphical user interface and a related device.
  • the desktop of the electronic device is the operation entry and important interface carrier of the application on the user's electronic device.
  • the design of the traditional terminal desktop arranges and presents the applications in the form of small icons according to the network.
  • the traditional desktop also allows users to add application widgets (widgets) to the desktop.
  • the widget can display the display information of the application.
  • the user can click on the widget to trigger the electronic device to directly display and display the display.
  • the application interface corresponding to the information.
  • the traditional tool components have a unified entrance and library, and the user can long press the blank space of the desktop of the electronic device to trigger the electronic device to display the tool component controls.
  • the electronic device may display a component library interface including a plurality of tool components. The user can select and drag a certain tool component to a certain area on the desktop of the electronic device. If there is an application icon in this area, the electronic device will transfer the application icon in this area to another location on the desktop.
  • the above steps of adding tool components are cumbersome.
  • the present application provides a method for displaying a card component, a graphical user interface and a related device, which realize that an electronic device can be quickly triggered to display a card component corresponding to an application through an input operation of a user on a desktop, so as to facilitate the user to quickly view the card components, and does not disrupt the display layout of application icons or card components on the desktop.
  • the present application provides a method for displaying a card component, including: an electronic device displays a first interface of a desktop, and the first interface includes an icon of a first application.
  • the electronic device receives a first sliding operation on the icon of the first application.
  • the electronic device displays the first card component corresponding to the first application by floating around the icon of the first application.
  • the first card component includes first display information of the first function in the first application.
  • the present application provides a display method of a card assembly.
  • the electronic device can temporarily display the card component corresponding to the first application in a floating around the icon of the first application in response to the user's sliding operation (for example, sliding upward) on the icon of the first application on the desktop, and the card component is displayed on the card component. Display information of the first function in the first application.
  • the electronic device may close the temporarily displayed card component. In this way, the electronic device can be quickly triggered to display a card component corresponding to a certain application on the desktop through an input operation of the user, so that the user can quickly view the card component without disturbing the display layout of application icons or card components on the desktop.
  • the electronic device when the electronic device receives the second input, the electronic device adds and displays the first card component to the desktop.
  • the electronic device adds and displays the first card component to the desktop.
  • the electronic device After the card component is fixedly added to the blank area of the desktop, if the electronic device receives the user's input for other blank areas, it is convenient for the user to quickly find the card component corresponding to the application icon from the application icon. Add the temporarily displayed card component to the desktop.
  • the electronic device may add the first card component to be displayed in a blank area on the first interface of the desktop. Wherein, before the first card component is added to the blank area on the first interface, the blank area on the first interface does not display application icons, application folders, card components, text and other interface elements.
  • the electronic device may add the first card component to be displayed in a blank area on the second interface of the desktop; wherein, before the first card component is added and displayed in the blank area on the second interface, the The blank area does not display application icons, application folders, card components, text, and other interface elements.
  • the electronic device may create a new third interface on the desktop, and add and display the first card component to the third interface.
  • the third interface may be newly created on the left page of the first interface or on the right page of the first interface, etc. are not limited.
  • the electronic device when the electronic device displays the first card component on the first interface of the desktop in response to the first sliding operation, the electronic device may also display the first fixed control corresponding to the first card component.
  • the second input may be an input to the first fixed control.
  • the process of adding and displaying the first card component to the desktop by the electronic device through the received second input may be: the electronic device may receive a first drag operation for the first card component; when 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.
  • 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.
  • the electronic device can also display the cancellation hot zone on the desktop.
  • the electronic device drags the first card component to the cancellation hot zone through the first drag operation, the electronic device cancels adding and displaying the first card component to the desktop. In this way, during the process of adding the temporarily displayed card component to the desktop by the user through a drag operation, there is an opportunity to undo the return.
  • the electronic device can display the second card stacking assembly in the second area, and the second card stacking assembly includes the first card assembly and the first card assembly. Five-card set. In this way, a plurality of card components can be combined into a card stacking component and placed on the desktop, thereby saving the usable space of the desktop.
  • the process of adding and displaying the first card assembly to the desktop by the electronic device through the received second input may be: the electronic device receives a first long-press operation for the first card assembly; After 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; and in response to the fourth input, the electronic device adds and displays the first card component to the desktop.
  • the electronic device when the electronic device receives the third input for the first card assembly, the electronic device displays a 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 user's operation of opening the interface of the first function.
  • a first control is also displayed on the first card component.
  • the electronic device receives a fifth input for the first control.
  • the electronic device controls the first application to perform a first control operation corresponding to the first control.
  • the user directly controls the first application to perform some control operations on the first card component, without first calling up the control interface for these control operations, and then triggering the first application to perform these control operations, which simplifies the user's operations.
  • the electronic device may receive the first card component displayed in the second area on the desktop and drag it to the first card component displayed in the third area on the desktop. Second drag operation. In response to the second drag operation, the electronic device places the first card assembly 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.
  • the electronic device receives a third drag operation for the first card component.
  • the electronic device displays the deletion hotspot on the desktop, and the third dragging operation ends at the deletion hotspot.
  • the electronic device removes the first card assembly from the desktop. In this way, when the user does not want the card component that has been added on the desktop, the card component can be deleted manually.
  • the electronic device may receive a second long-press operation for the first card assembly.
  • the electronic device may display a removal control corresponding to the first card assembly.
  • the electronic device removes the first card assembly from the desktop. In this way, when the user does not want the card component that has been added on the desktop, the card component can be deleted manually.
  • the electronic device displays the first card component corresponding to the first application by floating in the area around the icon of the first application
  • the first interface of the desktop is displayed.
  • the electronic device receives a second sliding operation for the icon of the first application.
  • the electronic device displays a second card component corresponding to the first application in a suspended manner around the icon of the first application, and the style of the second card component is different from that of the first card component. In this way, users can choose their preferred style of card components.
  • the electronic device After the electronic device displays the first card component corresponding to the first application by floating in the area around the icon of the first application, the electronic device receives the first presentation displayed by the user in the first card component. After the information is switched to the eighth input of the second display information, the first interface of the desktop is displayed. 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 suspended manner around the icon of the first application, and displays the first card component corresponding to the first application in the first card. Second presentation information is displayed on the component. In this way, it is convenient for the user to switch the displayed content in the card component.
  • the above-mentioned first interface further includes an application folder, and the application folder includes an icon of the second application and an icon of the third application, and the electronic device can receive the fourth application folder for the application folder. Swipe action.
  • the electronic device hovers around the application folder to display a first card stacking component corresponding to the application folder, and the first card stacking component includes a third card component corresponding to the second application and a third card stacking component corresponding to the second application. Apply the corresponding fourth card component.
  • the third card assembly and the fourth card assembly can be switched and displayed on the first card stacking assembly. In this way, the usage space of the interface can be saved.
  • the electronic device when the electronic device displays the first card component corresponding to the first application by floating 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.
  • the present application provides an electronic device including one or more processors, a display screen and one or more memories.
  • the display screen and one or more memories are coupled to one or more processors for storing computer program code, the computer program code comprising computer instructions which, when executed by the one or more processors, cause the computer instructions to be
  • the electronic device executes the display method of the card component in any possible implementation manner of any one of the foregoing aspects.
  • 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 enables the electronic device to perform any of the possible implementations of any of the above aspects. Display method.
  • an embodiment of the present application provides a computer program product that, when the computer program product runs on a computer, enables the computer to execute the method for displaying a card component in any possible implementation manner of any one of the foregoing aspects.
  • the embodiments of the present application provide a graphical user interface on an electronic device, the electronic device has a display screen, one or more memories, and one or more processors, and the one or more processors are used to execute the The one or more computer programs in the one or more memories, and the graphical user interface includes a graphical user interface displayed when the electronic device executes the above-mentioned first aspect and any possible design technical solutions of the first aspect.
  • an electronic device in a sixth aspect, includes modules/units for implementing the above-mentioned first aspect or any possible design method of the first aspect; these modules/units may be implemented by hardware , and can also be implemented by hardware executing corresponding software.
  • FIG. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
  • FIG. 2 is a schematic diagram of a software architecture of an electronic device provided by an embodiment of the present application.
  • 3A-3D are schematic interface diagrams of a group of ways to add card components on a desktop provided by an embodiment of the present application;
  • 4A-4K are schematic interface diagrams of a method for displaying a group of card components according to an embodiment of the present application.
  • 5A-5N are schematic diagrams of display styles of a group of card components provided by an embodiment of the present application.
  • 6A-6E are schematic diagrams of a group of interfaces for adding a card component to a desktop provided by an embodiment of the present application;
  • FIGS. 7A-7I are schematic diagrams of another group of interfaces for adding a card component to a desktop provided by an embodiment of the present application.
  • FIGS. 8A-8C are schematic diagrams of another group of interfaces for adding a card component to a desktop provided by an embodiment of the present application.
  • 9A-9H are interface schematic diagrams for moving or deleting a group of card components that have been added to the desktop provided by an embodiment of the present application;
  • 10A-10H are schematic diagrams of a group of interfaces for changing the style of a card component provided by an embodiment of the present application.
  • 11A-11F are schematic diagrams of a group of interfaces for entering a card management interface provided by an embodiment of the present application.
  • 12A-12G are schematic interface diagrams for editing content in a group of card components provided by an embodiment of the present application.
  • FIGS. 13A-13E are schematic diagrams of a group of interfaces for entering a card center interface provided by an embodiment of the present application.
  • FIGS. 14A-14C are schematic interface diagrams of displaying card components on a group of electronic devices equipped with a folding screen according to an embodiment of the present application;
  • 15A-15F are schematic diagrams of a group of interfaces for adding a card component to a service center provided by an embodiment of the present application.
  • FIG. 16 is a schematic flowchart of a method for displaying a card assembly according to an embodiment of the present application.
  • first and second are only used for descriptive purposes, and should not be construed as implying or implying relative importance or implying the number of indicated technical features. Therefore, the features defined as “first” and “second” may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present application, unless otherwise specified, the “multiple” The meaning is two or more.
  • FIG. 1 shows a schematic structural diagram of an electronic device 100 .
  • the electronic device 100 As an example, it should be understood that the electronic device 100 shown in FIG. 1 is only an example, and the electronic device 100 may have more or fewer components than those shown in FIG. 1 , two or more components may be combined, or Different component configurations are possible.
  • the various components shown in the figures may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and/or application specific integrated circuits.
  • 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.
  • Mobile communication module 150 wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, buttons 190, motor 191, indicator 192, camera 193, display screen 194, And a subscriber identification module (subscriber identification module, SIM) card interface 195 and so on.
  • SIM subscriber identification module
  • 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, and ambient light. Sensor 180L, bone conduction sensor 180M, etc.
  • the structures illustrated in the embodiments of the present invention do not constitute a specific limitation on the electronic device 100 .
  • the electronic device 100 may include more or less components than shown, or combine some components, or separate some components, or arrange different components.
  • the illustrated components may be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), controller, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) Wait.
  • application processor application processor, AP
  • modem processor graphics processor
  • graphics processor graphics processor
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • NPU neural-network processing unit
  • different processing units can be independent devices, and can also be integrated in one or more processors.
  • the controller may be the nerve center and command center of the electronic device 100 .
  • the controller can generate an operation control signal according to the instruction operation code and timing signal, and complete the control of fetching and executing instructions.
  • a memory may also be provided in the processor 110 for storing instructions and data.
  • the memory in processor 110 is cache memory. This memory may hold instructions or data that have just been used or recycled by the processor 110 . If the processor 110 needs to use the instruction or data again, it can be called directly from the memory. Repeated accesses are avoided and the latency of the processor 110 is reduced, thereby increasing the efficiency of the system.
  • the processor 110 may include one or more interfaces.
  • the interface may include an integrated circuit (inter-integrated circuit, I2C) interface, an integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, a pulse code modulation (pulse code modulation, PCM) interface, a universal asynchronous transceiver (universal asynchronous transmitter) receiver/transmitter, UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, subscriber identity module (SIM) interface, and / or universal serial bus (universal serial bus, USB) interface, etc.
  • I2C integrated circuit
  • I2S integrated circuit built-in audio
  • PCM pulse code modulation
  • PCM pulse code modulation
  • UART universal asynchronous transceiver
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB universal serial bus
  • the I2C interface is a bidirectional synchronous serial bus that includes a serial data line (SDA) and a serial clock line (SCL).
  • the processor 110 may contain multiple sets of I2C buses.
  • the processor 110 can be respectively coupled to the touch sensor 180K, the charger, the flash, the camera 193 and the like through different I2C bus interfaces.
  • the processor 110 may couple the touch sensor 180K through the I2C interface, so that the processor 110 and the touch sensor 180K communicate with each other through the I2C bus interface, so as to realize the touch function of the electronic device 100 .
  • the I2S interface can be used for audio communication.
  • the processor 110 may contain multiple sets of I2S buses.
  • the processor 110 may be coupled with the audio module 170 through an I2S bus to implement communication between the processor 110 and the audio module 170 .
  • the audio module 170 can transmit audio signals to the wireless communication module 160 through the I2S interface, so as to realize the function of answering calls through a Bluetooth headset.
  • the PCM interface can also be used for audio communications, sampling, quantizing and encoding analog signals.
  • the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface.
  • the audio module 170 can also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.
  • the UART interface is a universal serial data bus used for asynchronous communication.
  • the bus may be a bidirectional communication bus. It converts the data to be transmitted between serial communication and parallel communication.
  • a UART interface is typically used to connect the processor 110 with the wireless communication module 160 .
  • the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function.
  • the audio module 170 can transmit audio signals to the wireless communication module 160 through the UART interface, so as to realize the function of playing music through the Bluetooth headset.
  • the MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193 .
  • MIPI interfaces include camera serial interface (CSI), display serial interface (DSI), etc.
  • the processor 110 communicates with the camera 193 through a CSI interface, so as to realize the photographing function of the electronic device 100 .
  • the processor 110 communicates with the display screen 194 through the DSI interface to implement the display function of the electronic device 100 .
  • the GPIO interface can be configured by software.
  • the GPIO interface can be configured as a control signal or as a data signal.
  • the GPIO interface may be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and the like.
  • the GPIO interface can also be configured as I2C interface, I2S interface, UART interface, MIPI interface, etc.
  • the USB interface 130 is an interface that conforms to the USB standard specification, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, and the like.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transmit data between the electronic device 100 and peripheral devices. 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.
  • 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 of the electronic device 100 .
  • the electronic device 100 may also adopt different interface connection manners in the foregoing embodiments, or a combination of multiple interface connection manners.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger may be a wireless charger or a wired charger.
  • the charging management module 140 may receive charging input from the wired charger through the USB interface 130 .
  • 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 charges the battery 142 , it can also supply power to the electronic device through the power management module 141 .
  • the power management module 141 is used for connecting 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 times, battery health status (leakage, impedance).
  • the power management module 141 may also be provided in the processor 110 .
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 may be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modulation and demodulation processor, the baseband processor, and the like.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in electronic device 100 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.
  • the antenna 1 can be multiplexed as a diversity antenna of the wireless local area network. In other embodiments, the antenna may be used in conjunction with a tuning switch.
  • the mobile communication module 150 may provide wireless communication solutions including 2G/3G/4G/5G etc. applied on the electronic device 100 .
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA) and the like.
  • the mobile communication module 150 can receive electromagnetic waves from the antenna 1, filter and amplify 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 then turn it into an electromagnetic wave for radiation through the antenna 1 .
  • at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110 .
  • at least part of the functional modules of the mobile communication module 150 may be provided in the same device as at least part of the modules of the processor 110 .
  • the modem processor may include a modulator and a demodulator.
  • the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal.
  • the demodulator is used to demodulate the received electromagnetic wave signal into a low frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing.
  • the low frequency baseband signal is processed by the baseband processor and passed to the application processor.
  • the application processor outputs sound signals through audio devices (not limited to the speaker 170A, the receiver 170B, etc.), or displays images or videos through the display screen 194 .
  • the modem processor may be a stand-alone device.
  • the modem processor may be independent of the processor 110, and may be provided in the same device as the mobile communication module 150 or other functional modules.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellites Wireless communication solutions such as global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared technology (IR).
  • WLAN wireless local area networks
  • BT Bluetooth
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication
  • IR infrared technology
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110.
  • the wireless communication module 160 can also receive the signal to be sent from the processor 110 , perform frequency modulation on it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2 .
  • the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with 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), broadband 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, etc.
  • the GNSS may include global positioning system (global positioning system, GPS), global navigation satellite system (global navigation satellite system, GLONASS), Beidou navigation satellite system (beidou navigation satellite system, BDS), quasi-zenith satellite system (quasi -zenith satellite system, QZSS) and/or satellite based augmentation systems (SBAS).
  • global positioning system global positioning system, GPS
  • global navigation satellite system global navigation satellite system, GLONASS
  • Beidou navigation satellite system beidou navigation satellite system, BDS
  • quasi-zenith satellite system quadsi -zenith satellite system, QZSS
  • SBAS satellite based augmentation systems
  • the electronic device 100 implements a display function through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is a microprocessor for image processing, and is connected to the display screen 194 and the application processor.
  • the GPU is used to perform mathematical and geometric calculations for graphics rendering.
  • Processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.
  • Display screen 194 is used to display images, videos, and the like.
  • 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 (active-matrix organic light).
  • LED diode AMOLED
  • flexible light-emitting diode flexible light-emitting diode (flex light-emitting diode, FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (quantum dot light emitting diodes, QLED) and so on.
  • the electronic device 100 may include one or N display screens 194 , where N is a positive integer greater than one.
  • the electronic device 100 may implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.
  • the ISP is used to process the data fed back by the camera 193 .
  • the shutter is opened, 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 the ISP for processing, and converts it into an image visible to the naked eye.
  • ISP can also perform algorithm optimization on image noise, brightness, and skin tone.
  • ISP can also optimize the exposure, color temperature and other parameters of the shooting scene.
  • the ISP may be provided in the camera 193 .
  • Camera 193 is used to capture still images or video.
  • the object is projected through the lens to generate an optical image onto the photosensitive element.
  • the photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal.
  • the ISP outputs the digital image signal to the DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other formats of image signals.
  • the electronic device 100 may include 1 or N cameras 193 , where N is a positive integer greater than 1.
  • a digital signal processor is used to process digital signals, in addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy and so on.
  • Video codecs are used to compress or decompress digital video.
  • the electronic device 100 may support one or more video codecs.
  • the electronic device 100 can play or record videos of various encoding formats, such as: Moving Picture Experts Group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4 and so on.
  • MPEG Moving Picture Experts Group
  • MPEG2 moving picture experts group
  • MPEG3 MPEG4
  • MPEG4 Moving Picture Experts Group
  • the NPU is a neural-network (NN) computing processor.
  • NN neural-network
  • Applications such as intelligent cognition of the electronic device 100 can be implemented through the NPU, such as image recognition, face recognition, speech recognition, text understanding, and the like.
  • 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 realize the data storage function. For example to save files like music, video etc in external memory card.
  • Internal memory 121 may be used to store computer executable program code, which includes instructions.
  • the processor 110 executes various functional applications and data processing of the electronic device 100 by executing the instructions stored in the internal memory 121 .
  • the internal memory 121 may include a storage program area and a storage data area.
  • the storage program area can store an operating system, an application program required for at least one function (such as a sound playback function, an image playback function, etc.), and the like.
  • the storage data area may store data (such as audio data, phone book, etc.) created during the use of the electronic device 100 and the like.
  • the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, universal flash storage (UFS), and the like.
  • the electronic device 100 may implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, an application processor, and the like. Such as music playback, recording, etc.
  • the audio module 170 is used for converting digital audio information into analog audio signal output, and also for converting analog audio input into digital audio signal. Audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be provided in the processor 110 , or some functional modules of the audio module 170 may be provided in the processor 110 .
  • Speaker 170A also referred to as a "speaker" is used to convert audio electrical signals into sound signals.
  • the electronic device 100 can listen to music through the speaker 170A, or listen to a hands-free call.
  • the receiver 170B also referred to as "earpiece" is used to convert audio electrical signals into sound signals.
  • the voice can be answered by placing the receiver 170B close to the human ear.
  • the microphone 170C also called “microphone” or “microphone” is used to convert sound signals into electrical signals.
  • the user can make a sound by approaching the microphone 170C through a human mouth, and input the sound signal into the microphone 170C.
  • the electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which can implement a noise reduction function in addition to collecting sound signals. In other embodiments, the electronic device 100 may further be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and implement directional recording functions.
  • the earphone jack 170D is used to connect wired earphones.
  • the earphone interface 170D may be the USB interface 130, or may be a 3.5mm open mobile terminal platform (OMTP) standard interface, a cellular telecommunications industry association of the USA (CTIA) standard interface.
  • OMTP open mobile terminal platform
  • CTIA cellular telecommunications industry association of the USA
  • the pressure sensor 180A is used to sense pressure signals, and can convert the pressure signals into electrical signals.
  • the pressure sensor 180A may be provided on the display screen 194 .
  • the capacitive pressure sensor may be comprised of at least two parallel plates of conductive material. When a force is applied to 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 intensity of the touch operation according to the pressure sensor 180A.
  • the electronic device 100 may also calculate the touched position according to the detection signal of the pressure sensor 180A.
  • touch operations acting on the same touch position but with different touch operation intensities may correspond to different operation instructions. For example, when a touch operation whose intensity is less than the first pressure threshold acts on the short message application icon, the instruction for viewing 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, the instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the motion attitude of the electronic device 100 .
  • the angular velocity of electronic device 100 about three axes ie, x, y, and z axes
  • the gyro sensor 180B can be used for image stabilization.
  • the gyro sensor 180B detects the shaking angle of the electronic device 100, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to offset the shaking of the electronic device 100 through reverse motion to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenarios.
  • the air pressure sensor 180C is used to measure air pressure.
  • the electronic device 100 calculates the altitude through the air pressure value measured by the air pressure sensor 180C to assist in positioning and navigation.
  • the magnetic sensor 180D includes a Hall sensor.
  • the electronic device 100 can detect the opening and closing of the flip holster using the magnetic sensor 180D.
  • the electronic device 100 can detect the opening and closing of the flip according to the magnetic sensor 180D. Further, according to the detected opening and closing state of the leather case or the opening and closing state of the flip cover, characteristics such as automatic unlocking of the flip cover are set.
  • the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes).
  • the magnitude and direction of gravity can be detected when the electronic device 100 is stationary. It can also be used to identify the posture of electronic devices, and can be used in applications such as horizontal and vertical screen switching, pedometers, etc.
  • the electronic device 100 can measure the distance through 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.
  • Proximity light sensor 180G may include, for example, light emitting diodes (LEDs) and light detectors, such as photodiodes.
  • the light emitting diodes may be infrared light emitting diodes.
  • the electronic device 100 emits infrared light to the outside through the light emitting diode.
  • Electronic device 100 uses photodiodes 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 may 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.
  • Proximity light sensor 180G can also be used in holster mode, pocket mode automatically unlocks and locks the screen.
  • the ambient light sensor 180L is used to sense 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, so as to prevent accidental touch.
  • the fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, accessing application locks, taking pictures with fingerprints, answering incoming calls with fingerprints, and the like.
  • the temperature sensor 180J is used to detect the temperature.
  • 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 value, the electronic device 100 reduces the performance of the processor located near the temperature sensor 180J in order to reduce power consumption and implement thermal protection.
  • the electronic device 100 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 caused by the low temperature.
  • the electronic device 100 boosts the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K may be disposed 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 a touch operation 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 touch operations may be provided through display screen 194 .
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100 , which is different from the location where the display screen 194 is located.
  • the bone conduction sensor 180M can acquire vibration signals.
  • the bone conduction sensor 180M can acquire the vibration signal of the vibrating bone mass of the human voice.
  • the bone conduction sensor 180M can also contact the pulse of the human body and receive the blood pressure beating signal.
  • the bone conduction sensor 180M can also be disposed in the earphone, combined with the bone conduction earphone.
  • the audio module 170 can analyze the voice signal based on the vibration signal of the vocal vibration bone block obtained by the bone conduction sensor 180M, so as to realize the voice function.
  • the application processor can analyze the heart rate information based on the blood pressure beat signal obtained by the bone conduction sensor 180M, and realize the function of heart rate detection.
  • the keys 190 include a power-on key, a volume key, and the like. Keys 190 may be mechanical keys. It can also be a touch key.
  • the electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100 .
  • Motor 191 can generate vibrating cues.
  • the motor 191 can be used for vibrating alerts for incoming calls, and can also be used for touch vibration feedback.
  • touch operations acting on different applications can correspond to different vibration feedback effects.
  • the motor 191 can also correspond to different vibration feedback effects for touch operations on different areas of the display screen 194 .
  • Different application scenarios for example: time reminder, receiving information, alarm clock, games, etc.
  • the touch vibration feedback effect can also support customization.
  • the indicator 192 can be an indicator light, which can be used to indicate the charging state, the change of the power, and can also be used to indicate a message, a missed call, a notification, and the like.
  • the SIM card interface 195 is used to connect a SIM card.
  • the SIM card can be contacted and separated from the electronic device 100 by inserting into the SIM card interface 195 or pulling out from the SIM card interface 195 .
  • the electronic device 100 may 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 card, Micro SIM card, SIM card and so on. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the plurality of cards may 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 is also compatible with external memory cards.
  • the electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication.
  • the electronic device 100 employs an eSIM, ie: an embedded SIM card.
  • the eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100 .
  • the software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.
  • the embodiment of the present invention takes an Android system with a layered architecture as an example to illustrate the software structure of the electronic device 100 as an example.
  • FIG. 2 is a block diagram of a software structure of an electronic device 100 according to an embodiment of the present invention.
  • the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Layers communicate with each other through software interfaces.
  • the Android system is divided into four layers, which are, from top to bottom, an application layer, an application framework layer, an Android runtime (Android runtime) and a system library, and a kernel layer.
  • the application layer can include a series of application packages.
  • the application package can include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message and so on.
  • the application framework layer provides an application programming interface (application programming interface, API) and a programming framework for applications in the application layer.
  • the application framework layer includes some predefined functions.
  • the application framework layer may include window managers, content providers, view systems, telephony managers, resource managers, notification managers, and the like.
  • a window manager is used to manage window programs.
  • the window manager can get the size of the display screen, determine whether there is a status bar, lock the screen, take screenshots, etc.
  • Content providers are used to store and retrieve data and make these data accessible to applications.
  • the data may include video, images, audio, calls made and received, browsing history and bookmarks, phone book, etc.
  • the view system includes visual controls, such as controls for displaying text, controls for displaying pictures, and so on. View systems can be used to build applications.
  • a display interface can consist of one or more views.
  • the display interface including the short message notification icon may include a view for displaying text and a view for displaying pictures.
  • the phone manager is used to provide the communication function of the electronic device 100 .
  • the management of call status including connecting, hanging up, etc.).
  • the resource manager provides various resources for the application, such as localization strings, icons, pictures, layout files, video files and so on.
  • the notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages, and can disappear automatically after a brief pause without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc.
  • the notification manager can also display notifications in the status bar at the top of the system in the form of graphs or scroll bar text, such as notifications of applications running in the background, and notifications on the screen in the form of dialog windows. For example, text information is prompted in the status bar, a prompt sound is issued, the electronic device vibrates, and the indicator light flashes.
  • Android Runtime includes core libraries and a virtual machine. Android runtime is responsible for scheduling and management of the Android system.
  • the core library consists of two parts: one is the function functions that the java language needs to call, and the other is the core library of Android.
  • the application layer and the application framework layer run in virtual machines.
  • 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 lifecycle management, stack management, thread management, safety and exception management, and garbage collection.
  • a system library can include multiple functional modules. For example: surface manager (surface manager), media library (Media Libraries), 3D graphics processing library (eg: OpenGL ES), 2D graphics engine (eg: SGL), etc.
  • surface manager surface manager
  • media library Media Libraries
  • 3D graphics processing library eg: OpenGL ES
  • 2D graphics engine eg: SGL
  • the Surface Manager is used to manage the display subsystem and provides a fusion of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as still image files.
  • the media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.
  • 2D graphics engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer contains at least display drivers, camera drivers, audio drivers, and sensor drivers.
  • a corresponding hardware interrupt is sent to the kernel layer.
  • the kernel layer processes touch operations into raw input events (including touch coordinates, timestamps of touch operations, etc.). Raw input events are stored at the kernel layer.
  • the application framework layer obtains the original input event from the kernel layer, and identifies the control corresponding to the input event. Taking the touch operation as a touch click operation, and the control corresponding to the click operation is the control of the camera application icon, for example, 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.
  • the camera 193 captures still images or video.
  • the following introduces a method for adding a card component to the desktop provided in the embodiment of the present application.
  • the electronic device 100 may display an interface 310 with a desktop, and the interface 310 displays a page on which application icons are placed, and the page includes a plurality of application icons (eg, browser application icons, stock application icons, 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, settings application icon, etc.).
  • the page may further include an application folder icon (eg, the icon 312 of the application folder 1), and the application folder icon may be used to trigger the electronic device 100 to display one or more application icons.
  • a page indicator 314 is also displayed below the page on which the application icon is placed, to indicate the total number of pages on the desktop and the positional relationship between the currently displayed page and other pages.
  • the desktop interface 310 may include three pages, and the black dot in the page indicator is at the leftmost, which may indicate that the currently displayed page is the leftmost page among the three pages.
  • a status bar is also displayed on the top of the page on which the application icon is placed, and the status bar may include information such as the strength indicator of the communication signal, the power value, and the time.
  • the dock area may include one or more tray icons (for example, the dialer application icon 313, the message application icon, the contact application icon, the camera application icon, etc.), one or more tray icons in the dock area can remain displayed when switching pages.
  • tray icons for example, the dialer application icon 313, the message application icon, the contact application icon, the camera application icon, etc.
  • the electronic device 100 may receive a user's long-press input on a blank area on the interface 310 of the desktop, and in response to the input operation, as shown in FIG. 3B , the electronic device 100 may display the component adding control 322 , the completion control 323 , and A delete control corresponding to each application icon (eg, delete control 321 on weather application icon 311).
  • 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 deletion 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 deletion control on the desktop.
  • the electronic device 100 may receive user input (eg, a click) for the component addition control 322, and in response to the input, the electronic device 100 may display the component addition page 330 as shown in FIG. 3C.
  • user input eg, a click
  • the component adding page 330 includes one or more card components corresponding to application functions (eg, a clock component 331 , a weather component, a music component, a sports health component, etc.).
  • the card component may display function display information of the application function corresponding to the card component, and the card component may be used to trigger the electronic device 100 to jump to display the interface of the application function corresponding to the card component.
  • the clock component 331 may display time information, and the clock component 331 may be used to trigger the electronic device 100 to jump to display the time interface (including the time information) in the clock application.
  • the weather component can display the weather information of the area where the electronic device 100 is currently located (including one or more of the current weather, outdoor temperature, air quality, etc.
  • the weather component can be used to trigger the electronic device 100 to display the weather application.
  • the weather interface (including the weather information of the current area).
  • Music information (including one or more of the album cover of the music, the name of the music, and the name of the singer) can be displayed on the music component, and the music component can be used to trigger the electronic device 100 to display the music playing interface (including the music information) in the music application. ),and many more.
  • the electronic device 100 may receive a user's long-press and drag operation on the clock component 331 , and in response to the long-press and drag operation, the electronic device 100 may display the clock component in a designated area in the interface 340 of the desktop as shown in FIG. 3D .
  • the text description for the interface 340 of the desktop can refer to the text description for the aforementioned interface 310 , which will not be repeated.
  • the electronic device 100 may drag the other application icons in the designated area when detecting that the user drags the clock component 331 to the designated area. Or the card component is displayed in other positions, and the clock component 331 is displayed in the designated area.
  • the embodiment of the present application provides a display method of a card assembly.
  • the electronic device 100 may temporarily display a card component corresponding to the first application in a suspended manner around the icon of the first application in response to the user's sliding operation on the icon of the first application on the desktop (for example, sliding upwards), and the card component displays a card component corresponding to the first application. Display information of the first function in the first application.
  • the electronic device 100 may close the temporarily displayed card component.
  • the electronic device 100 may 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 a card component corresponding to an application by an input operation on the desktop, which is convenient for the user to quickly view the card component and does not disturb the display layout of application icons or card components on the desktop.
  • the electronic device 100 may display the card component corresponding to the first application in response to the user's sliding operation (eg, sliding upward) on the icon of the first application on the desktop.
  • the card component corresponding to the first application can be suspended and displayed around the icon of the first application. Display information of the first function in the first application is displayed on the card component.
  • the display of the card component corresponding to the first application may be temporary. For example, when the electronic device 100 receives an input for other areas on the desktop other than the card component, the electronic device 100 may close the temporarily displayed card component. In this way, it is convenient for the user to quickly view the card component of a certain application, and can also quickly close the temporarily displayed card component.
  • the electronic device 100 may display a desktop interface 310 .
  • the interface 310 For the text description of the interface 310 , reference may be made to the embodiment shown in FIG. 3A , which will not be repeated here.
  • the electronic device 100 may receive a swipe operation (eg, swipe up) for the weather application icon 311 , and in response to the swipe operation, as shown in FIG. 4B , the electronic device 100 may temporarily display the weather component 411 and the fixed controls 412 corresponding to the weather component 411 . .
  • a swipe operation eg, swipe up
  • the electronic device 100 may temporarily display the weather component 411 and the fixed controls 412 corresponding to the weather component 411 .
  • the weather component 411 can be overlaid on the weather application icon 311 and application icons near the weather icon 311 .
  • the weather component 411 may be displayed overlaid on the weather application icon 311, the calculator application icon, the voice assistant application icon, and the theme application icon.
  • the weather component 411 may display and include weather information queried through a weather application.
  • the weather information may include the current weather (for example, "sunny"), outdoor temperature (for example, "30 degrees Celsius”), air quality (for example, "good air”), and the highest temperature of the day in a designated area (for example, "Shenzhen”). (eg, "32 degrees Celsius”), minimum temperature (eg, "25 degrees Celsius”), and the like.
  • the designated regional location may be the current location of the electronic device 100 determined by the electronic device 100 through the weather application, or may be a regional location preset by the user.
  • the fixing control 412 can be used to trigger the electronic device 100 to fix and display the weather component 411 in a certain blank area of the desktop.
  • the electronic device 100 may, after temporarily displaying the above weather component 411, receive an input (for example, a click) from the user for an area other than the area where the weather component 411 is located on the desktop, and in response to the input, as shown in FIG. 4C , The electronic device 100 may turn off the temporarily displayed weather component 411 .
  • an input for example, a click
  • the sliding direction of the above sliding operation may not be limited to upward sliding, and in a possible implementation manner, the sliding operation may also be downward sliding, left sliding, right sliding, and the like.
  • the sliding operation since swiping left and right on the desktop triggers the electronic device 100 to switch and display the page where the application icon is placed on the desktop, swiping down on the desktop may trigger the electronic device 100 to quickly search for application icons. Therefore, in this embodiment of the present application, sliding upward is used as a preferred implementation manner of the above sliding operation, which can prevent the sliding operation from triggering other functions.
  • the starting position of the above sliding operation is on the application icon or within a preset distance near the application icon, and the sliding trajectory of the above sliding operation may be a straight line or a curve.
  • FIG. 4A identifies the relative positions of the top, bottom, left and right sides of the electronic device 100 when the electronic device 100 is placed in the manner shown in the above-mentioned FIG. 4A . These positions are used to describe the positions on the touch screen of the electronic device 100 or the positions on the interface displayed by the electronic device 100 .
  • upward refers to the direction from the bottom to the top
  • downward refers to the direction from the top to the bottom
  • right refers to the direction from the left to the right
  • left refers to the direction from the right to the left.
  • the icon of the first application is not limited to an application icon directly displayed on multiple pages in the desktop, but may also be an application icon displayed in a dock area on the desktop (for example, the above-mentioned dialing application icon 313), or it may be an application icon included in the application folder displayed on the desktop.
  • the electronic device 100 may receive a user's sliding operation (eg, swipe up) on the dialing application icon 313 in the dock area, and in response to the sliding operation, as shown in FIG. 4D , the electronic device 100 may temporarily The dial component 413 and the fixed controls 414 corresponding to the dial component 413 are displayed.
  • a user's sliding operation eg, swipe up
  • the dialing component 413 can be overlaid on the dialing application icon 313 and the application icons near the dialing application icon 313 .
  • the dialing component 413 may be displayed overlaid on the dialing application icon 311 and the information application icon.
  • the dialing component 413 can display dialing controls including a plurality of designated contacts in the dialing application (for example, the dialing control 415 for the contact "Dad”, the dialing control for the contact "Mom”, the dialing control for the contact "Wife”, dial controls for the contact "daughter”, etc.).
  • the designated contact may be a contact whose recent call is detected by the electronic device 100, or may be 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 designated contact can be used to trigger the electronic device 100 to dial the designated contact corresponding to the dialing control. For example, when the electronic device 100 detects that the user clicks on the dialing control 415, the electronic device 100 may dial the contact "Dad".
  • the fixed control 414 can be used to trigger the electronic device 100 to display the dial component 413 fixedly in a certain blank area of the desktop.
  • the electronic device 100 may, after temporarily displaying the above-mentioned dialing component 413, receive an input (for example, a click) by the user for other areas on the desktop other than the area where the dialing component 413 is located, and in response to the input, as shown in FIG. 4E, The electronic device 100 may close the temporarily displayed dial component 413 .
  • an input for example, a click
  • the electronic device 100 may receive an input (eg, click) of the icon 312 of the application folder 1 from the user, and in response to the click operation, the electronic device 100 may display the application folder 1 as shown in FIG. 4F . interface 420.
  • an input eg, click
  • the electronic device 100 may display the application folder 1 as shown in FIG. 4F . interface 420.
  • the interface 420 of the application folder 1 may include a plurality of application icons, for example, a mail application icon, a SIM card application icon, a clock application icon, a sound recorder application icon, a music application icon 421 , a sports health application icon, and the like.
  • the electronic device 100 may receive a user's sliding operation (eg, swipe up) on the music application icon 421, and in response to the sliding operation, as shown in FIG. 4G, the electronic device 100 may temporarily display the music component 422 and Fixed controls 423 corresponding to music components.
  • a user's sliding operation eg, swipe up
  • the electronic device 100 may temporarily display the music component 422 and Fixed controls 423 corresponding to music components.
  • the music component 422 can be overlaid on the music application icon 421 and application icons near the music application icon 421 .
  • the music component 422 may be displayed overlaid on the music application icon 421, the sports health application icon, the SIM card application icon and the clock application icon.
  • Music component 422 may display music information including music specified in the music application, where the music information includes album image 424, music title (eg, "Dreamitpossible"), artist name (eg, "Delacey”), and the like.
  • the music component corresponding to the music application may also display play/pause controls, previous controls, next controls and other playback function controls, and/or lyric information of the specified music.
  • the fixed control 423 can be used to trigger the electronic device 100 to display the music component 422 fixedly in a certain blank area of the desktop.
  • the electronic device 100 may, after temporarily displaying the above-mentioned music component 422, receive an input (such as a click) by the user for an area other than the area where the music component 422 is located on the interface 420, and in response to the input, the electronic device 100 may close the music component 422. Music component 422 temporarily displayed. Wherein, after closing the temporarily displayed music component 422, the electronic device 100 may display the interface 420 shown in the above-mentioned FIG. 4F, or the interface 310 shown in the above-mentioned FIG. 4E.
  • the electronic device 100 may temporarily display the application after detecting the user's sliding operation (for example, swiping up) on the application folder.
  • the corresponding card stacking component in the folder can switch and display the card components corresponding to the multiple applications.
  • the electronic device 100 displays a desktop interface 430 .
  • the interface 430 includes the icon 431 of the application folder 2 .
  • the application folder 2 includes a clock application icon and a music application icon.
  • the electronic device 100 may receive a user's sliding input (eg, swipe up) on the icon 431 of the application folder 2, and in response to the sliding operation, as shown in FIG. 4I, the electronic device 100 may temporarily display the card stacking assembly 440, the card stacking assembly 440 corresponds to fixed controls 441 and indicators 442.
  • a user's sliding input eg, swipe up
  • the electronic device 100 may temporarily display the card stacking assembly 440, the card stacking assembly 440 corresponds to fixed controls 441 and indicators 442.
  • the clock component 443 of the clock application can currently be displayed on the card stacking component 440 , and the current time information can be displayed on the clock component 443 .
  • the indicator 442 can be used to indicate the positional relationship of the card assembly currently displayed on the card stacking assembly 440 relative to other card assemblies in the card stacking assembly 440 .
  • the black dot in the indicator 442 is above the white dot, indicating that the clock component 443 currently displayed on the card stacking component 440 is lined up on top of the other components.
  • the electronic device 100 may receive a user's sliding operation on the card stacking assembly 440 (eg, swipe up), and in response to the sliding operation, as shown in FIG. Music component 444 .
  • a user's sliding operation on the card stacking assembly 440 eg, swipe up
  • FIG. Music component 444 e.g., swipe up
  • the electronic device 100 may receive the user's input on the card component (eg click). In response to the input, the electronic device 100 may display the specified interface in the first application.
  • the electronic device 100 may receive a user click operation on the music component 444, and in response to the click operation, the electronic device 100 may display the music playing interface 450 of the music application as shown in FIG. 4K.
  • the music playing interface 450 includes the music information displayed in the music component 444 (for example, the album image, name, singer, etc. of the specified music).
  • the electronic device 100 may add a card component corresponding to the first application to a blank area on the desktop in response to a user sliding operation (eg, sliding upward) on the icon of the first application on the desktop. In this way, it is convenient for the user to quickly add the card component corresponding to the first application to the desktop.
  • a user sliding operation eg, sliding upward
  • the electronic device 100 may temporarily cover the card group piece corresponding to the first application displayed on the icon of the first application and the icon of the first application around the multiple app icons placed on the area.
  • the size of the card component may be the size that covers multiple adjacent application icons.
  • the size of the card component may be the size that covers one application icon horizontally, two adjacent application icons vertically, or horizontally covers adjacent application icons. 2 application icons, the size of which covers 1 application icon vertically.
  • the size of the card component may cover the size of two adjacent application icons horizontally and vertically cover the size of two adjacent application icons.
  • the size of the card component may be the size that covers two adjacent application icons horizontally and four adjacent application icons vertically, or the size that covers four adjacent application icons horizontally and two adjacent application icons vertically. size.
  • the size of the card component may be a size that covers four adjacent application icons horizontally and vertically covers four adjacent application icons.
  • the electronic device 100 can hide the relevant elements of the application icons covered by the card component when the electronic device 100 temporarily displays the card component for the sake of simplicity and beauty of the interface when the card component is temporarily displayed.
  • the relevant elements of the application icon include, but are not limited to, the application icon, the upper or lower corner label on the application icon, the application name, and the like.
  • FIG. 5A Exemplarily, as shown in FIG. 5A , four application icons are arranged in an array of two horizontal and two vertical.
  • the name of the application icon 1 is displayed below the application icon 1 (for example, "name 1")
  • the bottom of the application icon 521 is displayed with the name of the application icon 512 (for example, "name 2-abcd")
  • the name of the application icon 513 (for example, "Name 3") is displayed below the application icon 513
  • the name of the application icon 514 (for example, "Name 4") is displayed below the application icon 514.
  • the upper right corner of the application icon 2 may display a corner mark 511
  • the lower right corner of the application icon 4 may display a corner mark 512 .
  • the electronic device 100 may temporarily display the card component corresponding to the application icon 3 .
  • the electronic device 100 displays the style of the card component corresponding to the application icon 3, as shown in FIG. 5B or FIG. 5C or FIG. 5D or FIG. 5E.
  • the size of the card component 521 corresponding to the application icon 3 may be the size of covering two adjacent application icons horizontally and vertically covering two adjacent application icons.
  • the electronic device 100 can directly overlay the card component 521 on the application icon 1 , the application icon 2 , the application icon 3 , and the application icon 4 .
  • the name of the application icon 1 can be hidden, and the name of the application icon 2 is partially not hidden because the length exceeds the length of the application icon 2 .
  • the upper subscript 511 of the application icon 2 and the lower subscript 512 of the application icon 4 may also remain displayed.
  • the electronic device 100 can directly overlay the card component 521 on the application icon 1 , the application icon 2 , the application icon 3 , and the application icon 4 .
  • the names of application icon 1 and application icon 2, as well as the superscript 511 of application icon 2 and the superscript 512 of application icon 4 are hidden.
  • the bottom direction of the card component 521 may display the name of the application icon 3 and the name of the application icon 4 .
  • the electronic device 100 can directly overlay the card component 521 on the application icon 1 , the application icon 2 , the application icon 3 , and the application icon 4 .
  • the names of the application icon 1, the application icon 2 and the application icon 4, and the superscript 511 of the application icon 2 and the superscript 512 of the application icon 4 are all hidden.
  • the lower part of the card component 521 may only display the name of the application icon 3 .
  • the name of the application icon 3 may be displayed in the center position of the bottom direction of the card component 521 .
  • the electronic device 100 can overlay the card component 521 on the application icon placement area where the application icon 1 , the application icon 2 , the application icon 3 , and the application icon 4 are located.
  • the application icon 1 , the application icon 2 , the application icon 3 and the related elements of the three application icons are all hidden. Only the name of the application icon 3 is displayed in the bottom direction of the card component 521 .
  • the card component of the first 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 placed to the right or top of the icon of the first application area.
  • the electronic device 100 may display the card component over the icon of the first application and the application icon in the left or bottom direction Placement area.
  • the size of the card component of the first application is to cover two adjacent application icons in the horizontal direction and two adjacent application icons in the vertical direction for description.
  • 8 application icons are arranged in 4 in the left-right direction and 2 in the top-to-bottom direction.
  • 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 .
  • Below the application icon 4 is displayed the name of the application icon 4 (for example, "name 4").
  • Below the application icon 5 is displayed the name of the application icon 5 (for example, "name 5").
  • Below the application icon 6 is displayed the name of the application icon 6 (for example, "name 6").
  • the electronic device 100 can display the card component 531 corresponding to the application icon 8 over the application icon 3 , App Icon 4, App Icon 7, and App Icon 8.
  • the electronic device 100 when the electronic device 100 receives a slide-up operation for the application icon 4, since there is no area where the application icon can be placed in the right and top directions of the application icon 4, the electronic device 100 can overlay and display the card component 541 corresponding to the application icon 4 on the application icon 3 , the application icon 4 , the application icon 7 , and the application icon 8 .
  • the electronic device 100 when the electronic device 100 receives the swipe-up operation for the application icon 3, since there is no area where the application icon can be placed in the top direction of the application icon 3, the electronic device 100 can The card component 551 corresponding to the application icon 3 is overlaid and displayed on the application icon 3 , the application icon 4 , the application icon 7 , and the application icon 8 .
  • other card components have been fixedly displayed around the first application.
  • the electronic device 100 temporarily displays the card components of the first application, the electronic device 100 can cover and display the card components of the first application on the first application. app's icon and parts of this other card component.
  • the card component 1 has been fixedly displayed on the left of the application icon 2, the application icon 1 is displayed in the top direction, there is no area on the right where the application icon can be placed, and the application icon is displayed in the bottom direction.
  • Icon 6 The size of the card component 1 is to cover two adjacent application icons horizontally and vertically cover two adjacent application icons.
  • the name of the card assembly 1 (for example, "component name a") is displayed below the card assembly 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 .
  • Below the application icon 4 is displayed the name of the application icon 4 (for example, "name 4").
  • the name of the application icon 5 (for example, "name 5") is displayed below the application icon 5 .
  • Below the application icon 6 is displayed the name of the application icon 6 (for example, "name 6").
  • Below the application icon 7 is displayed the name of the application icon 7 (for example, "name 7").
  • Below the application icon 8 is displayed the name of the application icon 8 (for example, "name 8").
  • Below the application icon 9 is displayed the name of the application icon 9 (for example, "name 9").
  • Below the application icon 10 is displayed the name of the application icon 10 (for example, "name 10").
  • the electronic device 100 When the electronic device 100 receives the swipe-up operation for the application icon 2, the electronic device 100 can temporarily cover and display the card component 561 corresponding to the application icon 2 on the rightmost two of the application icon 1, the application icon 2 and the card component 1.
  • the application icon is placed on the area.
  • other card components have been fixedly displayed around the first application.
  • the electronic device 100 When the electronic device 100 temporarily displays the card components of the first application, the electronic device 100 can cover and display the card components of the first application in other areas. Does not overlap with other card components that have been pinned to display. In this way, when the card component of the first application is called up and displayed, it is not blocked by the card component that has been fixedly displayed, so as to avoid the display content in the card component of the first application from being blocked.
  • the electronic device 100 may temporarily cover and display the card component 561 corresponding to the application icon 2 on the application icon 5 and the application icon 6. , the application icon 9 and the application icon 10, and a mark 562' is displayed.
  • the mark 562 is used to indicate that the card component 561 is the card component corresponding to the application icon 2 .
  • the electronic device 100 when the electronic device 100 temporarily displays the card components of the first application, the electronic device 100 can also reduce the display size of the card components that have been fixedly displayed. , so that the card components of the first application can be displayed around the first application (not shown in the figure). Alternatively, the electronic device 100 can 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).
  • the temporarily displayed card component can be fixedly added to the electronic device 100 through the user's input. Blank space on the desktop. Wherein, 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 also can quickly add the temporarily displayed card component to the desktop.
  • the electronic device 100 when the electronic device 100 temporarily displays the card component corresponding to the first application, the electronic device 100 may also display the fixed control corresponding to the card component. After the electronic device 100 receives the user's input for the fixed control, the electronic device 100 can fix and display the temporarily displayed card component in a blank area on the desktop that is not occupied by application icons or other components.
  • the electronic device 100 may display a desktop interface 610 .
  • 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 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the text description for the interface 610 may refer to the text description for the interface 310 in the embodiment shown in FIG. 4B , which will not be repeated here.
  • the electronic device 100 can receive the user's input (eg, click) on the fixed control 612, and in response to the input, as shown in FIG. 6B, the electronic device 100 can add the weather component 611 to the interface 610 of the desktop where the weather application icon is located. Blank space in the page. 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.
  • the user's input eg, click
  • the electronic device 100 may add the card component to the blank area of the last page on the desktop.
  • 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.
  • the page displayed in the interface 620 has no blank area for accommodating the weather component 621 .
  • the electronic device 100 can add the weather component 621 to the blank area of the last page on the desktop where the application icon is placed.
  • the electronic device 100 displays the desktop interface 630, and the black dot in the page indicator 634 is used to indicate that the page currently displayed on the interface 630 is the last page on the desktop where the application icon is placed.
  • One or more application icons eg, a search device application icon, a game center application icon, an application market application icon, a reading application icon, etc.
  • a weather component 621 are displayed in the interface 630 .
  • the electronic device 100 may create a new icon on the desktop where the application icon can be placed and the card component page, and add the card component corresponding to the first application to the newly created page.
  • the newly created page may be a new blank page before the page where the icon of the first application is located, or a new blank page after the page where the icon of the first application is located, or may be newly created at the end of the desktop blank page.
  • the electronic device 100 may display the desktop interface 640 .
  • the interface 640 displays a weather component 621 and a page indicator 644 .
  • the black dots in the page indicator 644 are used to indicate that the page displayed on the interface 640 is a newly created page to the right of the page displayed on the interface 620 shown in FIG. 6C .
  • the electronic device 100 may add the card component corresponding to the first application to the Specifies the interface. For example, the electronic device 100 may add a card component to a negative screen, a control center interface, a service center interface, and the like.
  • the electronic device 100 may receive the user's drag operation for the card component. Based on the drag operation, the electronic device 100 may The temporarily displayed card component is added to an empty space on the desktop.
  • the electronic device 100 may display a desktop interface 710 .
  • the electronic device 100 may display the weather component 711 corresponding to the weather application icon on the interface 710 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the weather component 711 corresponding to the weather application icon on the interface 710 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the text description of the interface 710 reference may be made to the text description of the interface 310 in the embodiment shown in FIG. 4B, which is not repeated here.
  • the electronic device 100 may receive the user's drag operation on the card component 711, and in response to the drag operation, the electronic device 100 may 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.
  • 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 can be placed in the area 712 .
  • the electronic device 100 may add the weather component 711 to the area 712 fixedly.
  • the electronic device 100 after the electronic device 100 temporarily displays the card component corresponding to the first application, it can receive the user's drag operation for the card component, and the electronic device 100, based on the drag operation, The card components are combined with other card components that have been added on the desktop into a single card stacking component.
  • the electronic device 100 displays a desktop interface 720 .
  • the electronic device 100 may display the weather component 721 corresponding to the weather application icon on the interface 720 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the interface 720 also displays a clock component 722 that has been added to the desktop.
  • the electronic device 100 can receive the user's drag operation on the weather component 721 , and when dragging the weather component 721 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 and the clock component 722 can be combined into the same card stacking component.
  • the electronic device 100 may display the card stacking component 731 and the indicator 732 on the interface 720 .
  • the weather component 721 may currently be displayed on the card stack component 731 .
  • the indicator 732 can be used to indicate the positional relationship of the card assembly currently displayed on the card stacking assembly 731 relative to other card assemblies in the card stacking assembly 731 .
  • the black power in the indicator 732 is above the white dot, indicating that the weather component 721 currently displayed on the card stacking component 731 is lined up on top of the clock component 722.
  • the electronic device 100 may receive a user's sliding operation (eg, swipe up) on the card stacking assembly 731 , and in response to the sliding operation, as shown in FIG. 7G , the electronic device 100 may switch and display the clock assembly on the card stacking assembly 731 . 722.
  • a user's sliding operation eg, swipe up
  • the electronic device 100 may switch and display the clock assembly on the card stacking assembly 731 . 722.
  • the electronic device 100 when the electronic device 100 adds the temporarily displayed card component to the desktop based on the drag operation, the electronic device 100 may display the undo hotspot. When the temporarily displayed card assembly is dragged near the revocation hotspot, the electronic device 100 may exit from displaying the card assembly. In this way, during the process of adding the temporarily displayed card component to the desktop by the user through a drag operation, there is an opportunity to undo the return.
  • the electronic device 100 displays a desktop interface 710 .
  • the electronic device 100 may display the cancellation hot zone 713 on the interface 710 .
  • the electronic device 100 may exit from displaying the weather component 711 .
  • the electronic device 100 can still temporarily display the weather component 711 again.
  • the electronic device 100 may receive an input (for example, 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, and the shortcut menu includes a desktop add control.
  • the electronic device 100 receives the user's input (eg, click) for adding a control to the desktop, the electronic device 100 can add the card component to a blank area on the desktop that is not occupied by application icons or other components.
  • the electronic device 100 may display a desktop interface 810 .
  • the electronic device 100 may display the weather component 811 corresponding to the weather application icon on the interface 810 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the weather component 811 corresponding to the weather application icon on the interface 810 in response to the user's sliding operation (eg, swiping up) on the weather application icon.
  • the text description of the interface 810 reference may be made to the text description of the interface 310 in the embodiment shown in FIG. 4B, which is not repeated here.
  • the electronic device 100 may receive a long-press operation for the weather component 811 , and in response to the long-press operation, as shown in FIG. 8B , the electronic device 100 may display a shortcut menu 812 corresponding to the weather component 811 .
  • the shortcut menu 812 may include a desktop add control 813 as well as other controls (eg, cross-device use controls, share controls, favorite controls, remove controls, etc.).
  • the desktop adding 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 usage control can be used to trigger the electronic device 100 to provide the weather component 811 for use by other devices.
  • the sharing control can be used to trigger the electronic device 100 to share the information displayed in the weather component 811 to other devices.
  • the save control can be used to trigger the electronic device 100 to save the weather component 811 in a designated interface or in a designated folder.
  • the removal control can be used to trigger the electronic device 100 to exit displaying the weather component 811 .
  • the electronic device 100 may receive an input (eg, a click) for the desktop add control 813, and in response to the input, as shown in FIG. 8C, the electronic device 100 may add the weather component 811 to the weather application in the interface 810 of the desktop. The blank space on the page where the icon is located. 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.
  • an input eg, a click
  • the electronic device 100 can add the weather component 811 to the blank area of the last page on the desktop, or, in the weather On the right side of the page where the app icon is located, create a new page where the app icon and card components can be placed, and add the weather component to the new page.
  • 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.
  • the electronic device 100 may add a weather component 911 on the interface 910 of the desktop.
  • a weather component 911 on the interface 910 of the desktop.
  • the textual description of the interface 910 on the desktop reference may be made to the textual description of the interface 710 shown in FIG. 7C , which is not repeated here.
  • the electronic device 100 can receive the drag operation of the weather component 911.
  • a drop mark can be displayed on the area 912, and the drop mark can be used to prompt the user
  • the weather component 911 can be placed into the area 912 .
  • the placement marker may be the display of a dashed box at the border of area 912 .
  • the electronic device 100 may place the weather component 911 into the area 912 .
  • the card component can be deleted through the user's input. In this way, when the user does not want the card component that has been added on the desktop, the card component can be deleted manually.
  • the electronic device 100 may add a weather component 911 on the interface 910 of the desktop.
  • the electronic device 100 can receive the drag operation of the weather component 911 .
  • the electronic device 100 may display the delete hotspot 913 on the interface 910 .
  • the electronic device 100 can delete the weather component 911 from the desktop.
  • the electronic device 100 may add a weather component 911 on the interface 910 of the desktop.
  • the electronic device 100 can receive the long-press operation of the weather component 911 .
  • electronic device 100 may display removal control 914, as shown in FIG. 9G.
  • FIG. 9H after the electronic device 100 may receive the user's input (eg, click) for the removal control 914 , the electronic device 100 may 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 .
  • the deletion prompt information may be used to prompt the user to delete the weather component 911 from the desktop.
  • the deletion prompt information may be a text prompt of "swipe on the 'weather' application icon to re-add".
  • the electronic device 100 can delete the weather component 911 from the desktop.
  • the electronic device 100 receives an input (eg, a click) for the delete cancel control 924, the electronic device 100 can keep the weather component 911 displayed on the desktop.
  • the electronic device 100 may delete the weather component 911 from the desktop directly in response to the input for removing the control 914 shown in FIG. 9G.
  • the electronic device 100 may display the component management interface of the first application through the user's input.
  • the management interface of the component can switch and display card components of different styles of the first application.
  • 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.
  • the electronic device 100 may display the card component of the default style of the first application. In this way, users can choose their preferred style of card components.
  • the electronic device 100 may display a shortcut menu of the first application, and the shortcut menu may include a management card control. After the electronic device 100 receives the click operation for the management card control, the electronic device 100 may display the component management interface of the first application.
  • the electronic device 100 may display a desktop interface 1010 .
  • the interface 1010 displays a page on which application icons are placed, the page including a plurality of application icons (eg, browser application icon, stock application icon, calculator application icon, voice assistant application icon, music application icon 1011, video application icon icon, Weather app icon, Themes app icon, Maps app icon, Gallery app icon, Clock app icon, Settings app icon, etc.).
  • application icons eg, browser application icon, stock application icon, calculator application icon, voice assistant application icon, music application icon 1011, video application icon icon, Weather app icon, Themes app icon, Maps app icon, Gallery app icon, Clock app icon, Settings app icon, etc.
  • the electronic device 100 may receive an input (eg, long press) of the music application icon 1011 from the user, and in response to the input, the electronic device 100 may display a shortcut menu (shortcut) 1012 as shown in FIG. 10B .
  • an input eg, long press
  • the electronic device 100 may display a shortcut menu (shortcut) 1012 as shown in FIG. 10B .
  • the shortcut menu 1012 may include a management card control 1013 and other functional controls (for example, a song-listening control, a search program control, a music playback control, a recently played control, a share control, a removal control, etc. ).
  • other functional controls for example, a song-listening control, a search program control, a music playback control, a recently played control, a share control, a removal control, etc.
  • the electronic device 100 receives an input (eg, a click) of the management card control 1013 from the user, and in response to the input, the electronic device 100 may display the component management interface 1020 as shown in FIG. 10C .
  • an input eg, a click
  • the electronic device 100 may display the component management interface 1020 as shown in FIG. 10C .
  • the component management interface 1020 may display one or more pages on which the card components of the music application are placed (for example, the currently displayed page contains the music component 1031 ). Styles (including size and/or functional controls) of card components vary on different pages.
  • a page indicator 1023 is displayed below the page on which the card component is placed. The indicator 1023 can be used to indicate the number of styles of card components corresponding to the music application, and the positional relationship between the page currently displayed on the component management interface 1020 and other pages.
  • the component management interface 1020 may include three pages on which card components are placed, and the black electricity in the page indicator 1023 is at the leftmost, which may indicate that the currently displayed page is the leftmost page among the three pages.
  • the component management interface 1020 also includes a main card setting control 1021, a desktop adding control 1022, a main card setting prompt 1024, a return control 1025, and the like.
  • 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.
  • the electronic device 100 may 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 music component 1031 is the default card component of the current music application.
  • the return control 1025 can be used to trigger the electronic device 100 to return to display a previous interface (eg, the desktop interface 1010 shown in FIG. 10B ).
  • the electronic device 100 may receive a user's swipe operation (for example, left swipe) on the page on which the music component 1031 is placed, and in response to the swipe operation, as shown in FIG. 10D , the electronic device 100 may switch the component management interface 1020 to display placement There is a page for music component 1032.
  • the size of the music component 1032 is different from the size of the above-mentioned music component 1031
  • the function controls displayed in the music component 1032 are different from the function controls displayed in the above-mentioned cloud music component 1031 .
  • the size of the above-mentioned music component 1031 can be the size of covering two application icons horizontally and two application icons vertically, and the above-mentioned music component 1031 can display the album image, music name and singer including the specified music in the music application. name.
  • the size of the music component 1032 can be the size of covering 4 application icons horizontally and covering 2 application icons vertically.
  • the music component 1032 can display the album image including the specified music in the music application, music name, singer name, Play/pause controls, previous controls, and next controls.
  • the electronic device 100 When the electronic device 100 switches and displays the page on which the music component 1032 is placed on the component management interface 1020, it can receive the user's input (eg, click) on the main card setting control 1021, and in response to the input, the electronic device 100 can The music component 1032 is set as the default card component of the music application.
  • the electronic device 100 When the electronic device 100 switches and displays the page on which the music component 1032 is placed on the component management interface 1020, it can receive the user's input (eg, click) on the main card setting control 1021, and in response to the input, the electronic device 100 can The music component 1032 is set as the default card component of the music application.
  • the electronic device 100 can display the desktop interface 1010 shown in FIG. 10A .
  • the electronic device 100 may receive a swipe operation (eg, swipe up) for the music application 1011 , and in response to the swipe operation, as shown in FIG. 10F , the electronic device 100 may temporarily display the music component 1032 .
  • swipe operation eg, swipe up
  • the electronic device 100 may, after temporarily displaying the above-mentioned music component 1032, receive an input (such as a click) from the user for an area other than the area where the music component 1032 is located on the interface 1010, and in response to the input, the electronic device 100 may close the music component 1032. Music component 1032 temporarily displayed.
  • the electronic device 100 when the electronic device 100 displays the component management interface of the first application, the electronic device 100 can use the user's input in the component management interface of the first application to display the component management interface of the first application.
  • a card component is added to an empty area of the desktop.
  • the electronic device 100 may display, on the component management interface 1020 , a page where the music component 1032 is placed, a main card setting control 1021 , a desktop adding control 1022 , and the like.
  • a page where the music component 1032 is placed a page where the music component 1032 is placed
  • a main card setting control 1021 a main card setting control 1021
  • a desktop adding control 1022 a desktop adding control
  • Electronic device 100 may receive user input (eg, a click) for the desktop add control 1022, and in response to the input, electronic device 100 may add the music component 1032 to an empty area of the desktop.
  • user input eg, a click
  • the music component 1032 can be displayed in the interface 1010 .
  • the electronic device 100 may also add the music component 1022 to the desktop.
  • Component 1032 is added to another empty area on the desktop. That is to say, the card components of the same style can be added to the desktop multiple times, and multiple card components of the same style can be displayed in different areas on the desktop.
  • the electronic device 100 may also receive a user's sliding operation (eg, slide up) on the icon of the first application, and respond to the sliding operation , the electronic device 100 may continue to temporarily display the card component of the first application near the icon of the first application.
  • a user's sliding operation eg, slide up
  • the electronic device 100 can also receive a user's sliding operation (for example, sliding up) on the icon of the first application, the electronic device 100 can no longer continue.
  • the card component of the first application is displayed.
  • the electronic device 100 may temporarily display the card component of the first application after receiving a swipe operation (eg, swipe up) on the icon for the first application.
  • the electronic device 100 may display a shortcut menu after receiving a long-press operation for the card component of the first application.
  • the shortcut menu may include a management card control. After the electronic device 100 receives the click operation for the management card control, the electronic device 100 may display the component management interface of the first application.
  • the electronic device 100 may display a desktop interface 1110 .
  • the text description for the interface 1110 may refer to the text description for the desktop interface 1010 in the embodiment shown in FIG. 10A , which will not be repeated here.
  • the electronic device 100 may receive a user's sliding operation (eg, swipe up) on the music application icon 1111 , and in response to the sliding operation, as shown in FIG. 11B , the electronic device 100 may display the music component 1121 .
  • the electronic device 100 may also display a fixed control 1122 .
  • the fixed control 1122 can be used to trigger the electronic device 100 to add the music component 1121 to an empty area of the desktop.
  • the electronic device 100 may display the management card control 1123 .
  • the electronic device 100 when the electronic device 100 receives a click operation on the management card control 1123 , the electronic device 100 can display the component management interface 1130 .
  • the text description of the component management interface 1130 reference may be made to the text description of the component management interface 1130 in the embodiment shown in FIG. 10C , which will not be repeated here.
  • the card components of different styles in the above-mentioned component management interface are not limited to be displayed by switching left and right, but can also be displayed by scrolling up and down.
  • the electronic device 100 may display a component management interface 1140 of the music application.
  • the component management interface 1140 can be displayed to include a music component 1141 , a music component 1142 and a music component 1143 .
  • the music component 1141 is stacked on the upper layer of the music component 1142
  • the music component 1142 is stacked on the upper layer of the music component 1143 .
  • the three card components of the music component 1141 , the music component 1142 and the music component 1143 have different styles (including sizes and/or displayed function controls).
  • the component management interface 1140 also includes 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 top layer in the component management interface 1140 as the default card component of the music application.
  • the electronic device 100 may display the default card component.
  • the desktop adding control 1145 can be used to trigger the electronic device 100 to add the card components 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.
  • the component management interface A master card setting prompt 1146 is displayed on 1140, which is used to indicate that the electronic device 100 has set the music component 1141 as the default card component of the music application.
  • the electronic device 100 can receive a user's sliding operation (eg, slide down) on the music component 1141 on the component management interface 1140. As shown in FIG. 11F, the electronic device 100 can display the music component 1142 in a stack on the upper layer of the music component 1143, and The music component 1143 is stacked and displayed on the upper layer of the music component 1141 .
  • the electronic device 100 may edit the display content in the card component through the user's input. In this way, it is convenient for the user to switch the displayed content in the card component.
  • the electronic device 100 may display a desktop interface 1210 .
  • the text description for the interface 1210 of the desktop may refer to the text description for the interface 1010 in the embodiment shown in FIG. 10A , which is not repeated here.
  • the electronic device 100 may receive a user's sliding operation (eg, swipe up) on the weather application icon 1211 in the interface 1210 , and in response to the sliding operation, as shown in FIG. 12B , the electronic device 100 may temporarily display the weather component 1211 .
  • the weather component 1211 may overlay and display on the weather application icon 1211 and application icons around the weather application icon 1211 (eg, a calculator application icon, a voice assistant application icon and a theme application icon).
  • the weather component 1211 currently displays the weather information of the "Shenzhen" area.
  • the weather information may include the current weather (for example, "sunny"), outdoor temperature (for example, “30 degrees Celsius”), air quality (for example, "good air”) and the highest temperature of the day (for example, "good air") in a designated area (for example, "Shenzhen”). One or more of "32 degrees Celsius”) and a minimum temperature (eg, "25 degrees Celsius”), and the like.
  • the electronic device 100 may also display the 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 the blank area of the desktop.
  • the electronic device 100 can display the edit city control 1221 .
  • the electronic device 100 may also display the card management control while displaying the edit city control 1221 .
  • the card management control can be used to trigger the electronic device 100 to display the component management interface of the weather application.
  • the electronic device 100 may receive a user input (eg, a click) for the edit city control 1221, and in response to the input, the electronic device 100 may display a city edit interface 1230 as shown in FIG. 12D.
  • a user input eg, a click
  • the electronic device 100 may display a city edit interface 1230 as shown in FIG. 12D.
  • the city editing interface 1230 includes a plurality of city options and city adding controls 1233 , for example, the “Shenzhen” city option 1231 , the “Yunnan” city option, the “Beijing” city option and the “Shanghai” city Option 1232 and so on.
  • the city add control 1233 can be used to add other city options to the city editing interface 1230 .
  • the electronic device 100 may receive user input (eg, a 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.
  • user input eg, a click
  • the electronic device 100 may display weather information for the "Shanghai" city in the weather component.
  • the electronic device 100 can display the weather information of the city “Shanghai” in the weather component 1211 .
  • the electronic device 100 may display the city editing control 1243 after the user performs a long-press operation on the clock component 1241 .
  • 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.
  • 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 the component management interface of the clock application.
  • the electronic device 100 may display the album selection control 1253 after the user performs a long-press operation on the music component 1251 .
  • the album selection control 1253 can be used to trigger the electronic device 100 to replace the music information displayed in the music component 1251, where the music information includes album image, music name, artist name and so on.
  • the electronic device 100 may also display a card management control while displaying the album selection control 1253, and the card management control may be used to trigger the electronic device 100 to display the component management interface of the music application.
  • the electronic device 100 may trigger the display of a card component center interface through user input on the desktop, where all card components on the electronic device 100 are displayed in the card component center interface.
  • the card components in the card component center interface can be arranged in a specified order.
  • the electronic device 100 may display a desktop interface 1310 .
  • the text description for the interface 1310 may refer to the text description for the desktop interface 1010 in the embodiment shown in FIG. 10A , which will not be repeated here.
  • the electronic device 100 may receive the user's input for the blank area on the interface 1310 of the desktop (eg, two-finger sliding toward each other), and in response to the input, the electronic device 100 may display the page adjustment interface 1320 as shown in FIG. 13B .
  • the page adjustment interface 1320 includes a card center control 1341, a page with application icons placed on the desktop (such as page 1331), and other functional controls (such as wallpaper setting controls, switching effect controls, and desktop settings). controls and page indicators, etc.).
  • a plurality of application icons are displayed on this page 1331 .
  • the electronic device 100 receives the user's left swipe operation on the page 1331 , the electronic device 100 can switch and display a page on the right of the page 1331 with a preset switching effect on the page adjustment interface 1320 .
  • the electronic device 100 may receive user input (eg, a click) for the card center control 1341, and in response to the input, the electronic device 100 may display the card assembly center interface 1350 as shown in FIG. 13C.
  • user input eg, a click
  • the card component center interface 1350 includes a search box 1352 and a set of card components classified according to application types.
  • 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.
  • the card component sets classified according to application types include a card component set corresponding to a system application, a card component corresponding to a music application, and a card component corresponding to a sports health application.
  • the electronic device 100 may stack the card assemblies of the application.
  • the default card component of the application is displayed on the card stacking component, and the number of types of card components corresponding to the application is displayed below the card stacking component.
  • the card stacking component 1351 of the music application is displayed on the card component center interface 1350 .
  • the lower part of the card stacking component 1351 displays the number of types (eg, 3 types) of card components corresponding to the music application.
  • the electronic device 100 may arrange the multiple card components of the application in the display column of the application.
  • the electronic device 100 may receive user input (eg, a single click) on the card stacking assembly 1351, and in response to the input, the electronic device 100 may display the card assembly presentation interface 1360 as shown in FIG. 13D.
  • user input eg, a single click
  • the card component display interface 1360 includes a music component 1361 , a music component 1362 , a music component 1363 and a desktop add control 1364 .
  • the music component 1361 is stacked on the upper layer of the music component 1362
  • the music component 1362 is stacked on the upper layer of the music component 1363 .
  • the three card components of the music component 1361 , the music component 1362 and the music component 1363 have different styles (including sizes and/or displayed function controls).
  • the desktop adding control 1364 can be used to add the card components stacked and displayed on the top layer on the card component display interface 1360 to a blank area on the desktop for display.
  • the electronic device 100 may receive a user's sliding operation (eg, slide down) on the music component 1361 on the card component display interface 1360 .
  • a user's sliding operation eg, slide down
  • the electronic device 100 Swipe operation (eg, slide down)
  • the music component 1362 is stacked and displayed on the upper layer of the music component 1143
  • the music component 1363 is stacked and displayed on the upper layer of the music component 1361.
  • the card components of different styles in the above-mentioned card component display interface are not limited to scroll display up and down, but can also be displayed by switching left and right.
  • the card components may be displayed in a specified order in the above-mentioned card component center interface.
  • the electronic device 100 may preferentially display the card component corresponding to the application installed at the factory at the top of the center interface of the card component.
  • the electronic device 100 may display the card component corresponding to the application installed in the most recent preset time period at the top of the center interface of the card component.
  • 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 (for example, one or more of usage time, usage frequency, location and scene, etc.). .
  • a card component corresponding to an application that has been used for a long time is displayed on the top of the central interface of the card component
  • a card component corresponding to an application that has been used for a short time is displayed on the bottom of the central interface of the card component.
  • a card component corresponding to an application that is frequently used is displayed at the top of the central interface of the card component
  • a card component corresponding to an application that is used less frequently is displayed at the bottom of the central interface of the card component.
  • some system applications on the electronic device 100 do not have corresponding application icons on the desktop, but these system applications correspond to card components, such as battery components, health-use device components, and the like.
  • the electronic device 100 may temporarily display the card component of the system application through the user's sliding operation (for example, sliding up) on the setting application icon.
  • the electronic device 100 may display the card components of the system application in the above-mentioned card component center interface, and support the user to add the card components of the system application in the above-mentioned card component center interface to the desktop.
  • the size of the card component displayed on the desktop also changes with the change in the distance between application icons.
  • the display screen of the electronic device 100 can be folded.
  • 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
  • the interface 1410 of the desktop is on the first screen.
  • the interface 1410 displays a page including a page with application icons placed.
  • the page includes a plurality of application icons (eg, browser application icon, stock application icon, calculator application icon, voice assistant application icon, video application icon, weather application icon) , Themes app icon, Maps app icon, Gallery app icon, Notes app icon, Settings app icon, etc.).
  • the page may further include an application folder icon (eg, the icon 312 of the application folder 1), and the application folder icon may be used to trigger the electronic device 100 to display one or more application icons.
  • an application folder icon eg, the icon 312 of the application folder 1
  • the application folder icon may be used to trigger the electronic device 100 to display one or more application icons.
  • a page indicator 1413 is also displayed below the page on which the application icon is placed, to indicate the total number of pages on the desktop and the positional relationship between the currently displayed page and other pages.
  • the desktop interface 1410 may include four pages, and the black dot in the page indicator is at the leftmost, which may indicate that the currently displayed page is the leftmost page among the four pages.
  • a tray (dock) area below the page indicator, and the dock area may include one or more tray icons (for example, a dialer application icon, a message application icon, a contact application icon, and a camera application icon). etc.), one or more tray icons in that dock area can remain displayed across page transitions.
  • tray icons for example, a dialer application icon, a message application icon, a contact application icon, and a camera application icon. etc.
  • the electronic device 100 may temporarily display the weather component 1411 on the interface 1410 of the desktop after receiving the user's sliding operation (eg, sliding up) on the weather application icon.
  • the weather component 1411 is displayed overlaid on the weather application icon, the calculator application icon, the voice assistant application icon and the theme application icon.
  • the electronic device 100 may 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 the desktop. blank area.
  • the electronic device 100 may display the desktop interface 1420 on the display screen.
  • the interface elements in the interface 1420 are the same as the interface elements in the interface 1410 shown in FIG. 14A. Wherein, because the distance between application icons in the interface 1420 becomes larger, the size of the music component 1411 also becomes larger, but the music component 1411 is still covered and displayed on the weather application icon, calculator application icon, voice assistant on the app icon and theme app icon.
  • the electronic device 100 may combine two adjacent pages with application icons on the desktop displayed on the first screen in the folded state into one page, displayed on the display.
  • the electronic device 100 may display the desktop interface 1430 on the display screen.
  • the interface 1430 of the desktop includes the interface elements displayed in the interface 1410 shown in FIG. 14A and the interface elements in a page on the right side of the page displayed on the interface 1410 .
  • a page on the right side of the page displayed on the above interface 1410 may display a device search application, a game center application, an application market application, a reading application, a sports health component, a clock component, and the like.
  • the distance between the application icons in the non-dock area on the desktop interface 1430 remains unchanged, so the size of the music component 1411 also remains unchanged, and the music The component 1411 is still displayed overlaid on the above weather application icon, calculator application icon, voice assistant application icon and theme application icon.
  • the electronic device 100 may add the card component corresponding to the first application to the Specify the shortcut interface (such as the service center interface). Wherein, the electronic device 100 triggers the display of the specified shortcut interface through a specified 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.
  • the electronic device 100 may display a desktop interface 1510 .
  • the interface 1510 displays a weather application icon 1511 .
  • the text description of the interface 620 shown in FIG. 6C which will not be repeated here.
  • the electronic device 100 may receive a user's sliding operation on the desktop (eg, swipe diagonally from the bottom left of the desktop to the top right), and in response to the sliding operation, the electronic device 100 may display the service center interface 1520 shown in 15B.
  • a user's sliding operation on the desktop eg, swipe diagonally from the bottom left of the desktop to the top right
  • the electronic device 100 may display the service center interface 1520 shown in 15B.
  • the service center interface 1520 is displayed including one or more service options and card components that have been added to the service center interface.
  • the one or more service options include a courier service option, a music service option, an alarm clock service option, and the like.
  • the card components that have been added to the interface of the service center include sports health components, music components, clock components, battery components and so on.
  • the electronic device 100 may receive a user's swipe operation (eg, click) on the weather application icon 1511 , and in response to the swipe operation, as shown in FIG. 15D , the electronic device 100 may temporarily display the weather component 1512 .
  • a user's swipe operation eg, click
  • the weather component 1512 can be displayed overlaid on the weather application icon and the calculator application icon.
  • the electronic device 100 may receive a user's long-press operation on the weather component 1512, and in response to the long-press operation, the electronic device 100 may display a shortcut menu 1513 as shown in FIG. 15E.
  • the shortcut menu 1513 is displayed including an add to service center control 1514 .
  • other functional controls are also displayed in the shortcut menu 1513, for example, use controls across devices, share controls, add to desktop controls, remove controls, and so on.
  • the add to service center control 1514 may be used to trigger the electronic device 100 to add the weather component 1512 to the service center interface.
  • the cross-device usage control can be used to trigger the electronic device 100 to provide the weather component 1512 for use by other devices.
  • the sharing control can be used to trigger the electronic device 100 to share the information displayed in the weather component 1512 to other devices.
  • the desktop add control can be used to trigger the electronic device 100 to add the weather component 1512 to an empty area on the desktop.
  • the electronic device 100 can display the service center interface 1520 again.
  • the weather component 1512 is displayed at 1520.
  • FIG. 16 shows a schematic flowchart of a method for displaying a card assembly provided in an embodiment of the present application.
  • the method includes:
  • the electronic device displays a first interface of the desktop, where the first interface includes an icon of a first application.
  • the first interface may be the interface 310 of the desktop shown in FIG. 4A
  • the icon of the first application may be an icon (for example, the weather application icon 311, etc.) on a page on which the application icon is placed on the desktop, wherein, It can also be an icon in the dock area (eg dialer application icon 313).
  • the first interface can also be the interface 420 displayed by opening an application folder (such as application folder 1) on the desktop as shown in FIG. 4F, and the icon of the first application can be an application icon (such as a music application) included in the application folder. icon 421).
  • an application folder such as application folder 1
  • the icon of the first application can be an application icon (such as a music application) included in the application folder. icon 421).
  • the electronic device receives a first sliding operation on the icon of the first application.
  • the electronic device displays a first card component corresponding to the first application by floating around the icon of the first application.
  • the first card component includes first display information of the first function in the first application.
  • the first application may be a weather application, and the first card component may be the weather component 411 shown in FIG. 4B above.
  • the first application may be a dialing application, and the first card component may be the dialing component 413 shown in FIG. 4C.
  • the first application may be a music application, and the first card component may be the music component 422 shown in FIG. 4G above, and so on.
  • the electronic device When the electronic device receives the first input for 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 assembly.
  • the display of the first card component corresponding to the first application may be temporary. For example, when the electronic device receives an input for areas other than the first card component on the desktop, the electronic device may close the temporary display of the first card component. A card component. In this way, it is convenient for the user to quickly view the card component of a certain application, and can also quickly close the temporarily displayed card component.
  • the electronic device when the electronic device receives the second input, the electronic device adds and displays the first card component to the desktop.
  • the electronic device adds and displays the first card component to the desktop.
  • the electronic device After the card component is fixedly added to the blank area of the desktop, if the electronic device receives the user's input for other blank areas, it is convenient for the user to quickly find the card component corresponding to the application icon from the application icon. Add the temporarily displayed card component to the desktop.
  • the electronic device may add the first card component to be displayed in a blank area on the first interface of the desktop. Wherein, before the first card component is added to the blank area on the first interface, the blank area on the first interface does not display application icons, application folders, card components, text and other interface elements.
  • the first interface may be the desktop interface 610 shown in FIG. 6B
  • the first card component may be a weather component 611
  • the weather component 611 may be added to a blank area of the interface 610 .
  • specific content reference may be made to the foregoing embodiments, which will not be repeated here.
  • the electronic device may add the first card component to be displayed in a blank area on the second interface of the desktop; wherein, before the first card component is added and displayed in the blank area on the second interface, the The blank area does not display application icons, application folders, card components, text, and other interface elements.
  • the second interface of the desktop may be the interface 630 when the desktop shown in FIG. 6D displays the last page on which the application icon is placed.
  • the foregoing embodiments which will not be repeated here.
  • the electronic device may create a new third interface on the desktop, and add and display the first card component to the third interface.
  • the third interface may be newly created on the left page of the first interface or on the right page of the first interface, etc. are not limited.
  • the third interface may be the interface 640 shown in FIG. 6E above.
  • the electronic device when the electronic device displays the first card component on the first interface of the desktop in response to the first sliding operation, the electronic device may also display the first fixed control corresponding to the first card component.
  • the second input may be an input to the first fixed control.
  • the process of adding and displaying the first card component to the desktop by the electronic device through the received second input may be: the electronic device may receive a first drag operation for the first card component; when 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.
  • 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.
  • the electronic device can also display the cancellation hot zone on the desktop.
  • the electronic device drags the first card component to the cancellation hot zone through the first drag operation, the electronic device cancels adding and displaying the first card component to the desktop. In this way, during the process of adding the temporarily displayed card component to the desktop by the user through a drag operation, there is an opportunity to undo the return.
  • the electronic device can display the second card stacking assembly in the second area, and the second card stacking assembly includes the first card assembly and the first card assembly. Five-card set. In this way, a plurality of card components can be combined into a card stacking component and placed on the desktop, thereby saving the usable space of the desktop.
  • the first card assembly may be the weather assembly 721 shown in FIG. 7D
  • the fifth card assembly may be the clock assembly 722 in the embodiment shown in FIG. 7D
  • the second card stacking assembly may be the above-mentioned FIG. 7F or The card stacking assembly 731 in the embodiment shown in Figure 7G.
  • FIG. 7D For specific content, reference may be made to the embodiments shown in the foregoing FIG. 7D to FIG. 7G , which will not be repeated here.
  • the process of adding and displaying the first card assembly to the desktop by the electronic device through the received second input may be: the electronic device receives a first long-press operation for the first card assembly; After 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; and in response to the fourth input, the electronic device adds and displays the first card component to the desktop.
  • the first card component may be the weather component 811 in the embodiment shown in FIG. 8B
  • the second fixed control may be the desktop add control 813 in the embodiment shown in FIG. 8B.
  • FIGS. 8A to 8C For specific content, reference may be made to the foregoing embodiments in FIGS. 8A to 8C , which will not be repeated here.
  • the electronic device when the electronic device receives the third input for the first card assembly, the electronic device displays a 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 user's operation of opening the interface of the first function.
  • the first application may be a music application
  • the first function may be a music playback function in the music application
  • the fourth interface may be a music playback interface 450 corresponding to the music playback function in the embodiment shown in FIG. 4K.
  • the foregoing embodiments which will not be repeated here.
  • a first control is also displayed on the first card component.
  • the electronic device receives a fifth input for the first control.
  • the electronic device controls the first application to perform a first control operation corresponding to the first control.
  • the user directly controls the first application to perform some control operations on the first card component, without first calling up the control interface for these control operations, and then triggering the first application to perform these control operations, which simplifies the user's operations.
  • the first card component may be the dial component 413 in the embodiment shown in FIG. 4D
  • the first control may be the above-mentioned contact “Dad” dial control 415 .
  • the first control operation may be a dialing operation for the contact "Dad”.
  • the electronic device may receive the first card component displayed in the second area on the desktop and drag it to the first card component displayed in the third area on the desktop. Second drag operation. In response to the second drag operation, the electronic device places the first card assembly 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.
  • the electronic device receives a third drag operation for the first card component.
  • the electronic device displays the deletion hotspot on the desktop, and the third dragging operation ends at the deletion hotspot.
  • the electronic device removes the first card assembly from the desktop. In this way, when the user does not want the card component that has been added on the desktop, the card component can be deleted manually.
  • the electronic device may receive a second long-press operation for the first card assembly.
  • the electronic device may display a removal control corresponding to the first card assembly.
  • the electronic device removes the first card assembly from the desktop. In this way, when the user does not want the card component that has been added on the desktop, the card component can be deleted manually.
  • the electronic device displays the first card component corresponding to the first application by floating in the area around the icon of the first application
  • the first interface of the desktop is displayed.
  • the electronic device receives a second sliding operation for the icon of the first application.
  • the electronic device displays a second card component corresponding to the first application in a suspended manner around the icon of the first application, and the style of the second card component is different from that of the first card component. In this way, users can choose their preferred style of card components.
  • the electronic device After the electronic device displays the first card component corresponding to the first application by floating in the area around the icon of the first application, the electronic device receives the first presentation displayed by the user in the first card component. After the information is switched to the eighth input of the second display information, the first interface of the desktop is displayed. 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 suspended manner around the icon of the first application, and displays the first card component corresponding to the first application in the first card. Second presentation information is displayed on the component. In this way, it is convenient for the user to switch the displayed content in the card component.
  • the above-mentioned first interface further includes an application folder, and the application folder includes an icon of the second application and an icon of the third application, and the electronic device can receive the fourth application folder for the application folder. Swipe action.
  • the electronic device hovers around the application folder to display a first card stacking component corresponding to the application folder, and the first card stacking component includes a third card component corresponding to the second application and a third card stacking component corresponding to the second application. Apply the corresponding fourth card component.
  • the third card assembly and the fourth card assembly can be switched and displayed on the first card stacking assembly. In this way, the usage space of the interface can be saved.
  • the first interface may be the desktop interface 430 shown in FIG. 4H
  • 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
  • the third application may be. is the music app in app folder 2.
  • the first card stacking assembly may be the card stacking assembly 440 shown in FIG. 4I or FIG. 4J
  • the third card assembly may be the clock assembly 443
  • the fourth card assembly may be the music assembly 444 .
  • FIGS. 4H to 4K For specific content, reference may be made to the foregoing embodiments shown in FIGS. 4H to 4K , which will not be repeated here.
  • the electronic device when the electronic device displays the first card component corresponding to the first application by floating 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.
  • the electronic device when the electronic device displays the first card component corresponding to the first application by floating 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.
  • Embodiments of the present application provide a method for displaying a card assembly.
  • the electronic device can temporarily display the card component corresponding to the first application in a floating around the icon of the first application in response to the user's sliding operation (for example, sliding upward) on the icon of the first application on the desktop, and the card component is displayed on the card component. Display information of the first function in the first application.
  • the electronic device may close the temporarily displayed card component.
  • the electronic device can also add the temporarily displayed card component to a designated area on the desktop. In this way, an input operation by a user on the desktop can quickly trigger the electronic device to display a card component corresponding to an application, which is convenient for the user to quickly view the card component without disturbing the display layout of application icons or card components on the desktop.
  • the methods provided by the embodiments of the present application are introduced from the perspective of an electronic device as an execution subject.
  • the electronic device may include a hardware structure and/or software modules, and implement the above functions in the form of a hardware structure, a software module, or a hardware structure plus a software module. Whether one of the above functions is performed 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.
  • Embodiments of the present application further provide an electronic device, including: a display screen, a processor, a memory, an application program, and a computer program.
  • the various devices described above may be connected by one or more communication buses.
  • the one or more computer programs are stored in the above-mentioned memory and 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 cause the electronic device to execute the above-mentioned various Each step of the interface display method in the embodiment.
  • the above-mentioned processor may be the processor 110 shown in FIG. 1
  • the above-mentioned memory may be the internal memory 120 shown in FIG. 1 and/or an external memory connected to the electronic device
  • the above-mentioned display screen may be shown in FIG. 1
  • the display screen 130 shown in 1 is not limited in this embodiment of the present application.
  • an embodiment of the present application also provides a graphical user interface (graphical user interface, GUI) on an electronic device, where the graphical user interface specifically includes a graphical user interface displayed by the electronic device when executing the above method embodiments.
  • GUI graphical user interface
  • the terms “when” or “after” can be interpreted to mean “if” or “after” or “in response to determining" or “in response to detecting ...”.
  • the phrases “in determining" or “if detecting (the stated condition or event)” can be interpreted to mean “if determining" or “in response to determining" or “on detecting (the stated condition or event)” or “in response to the detection of (the stated condition or event)”.
  • the above-mentioned embodiments it may be implemented in whole or in part by software, hardware, firmware or any combination thereof.
  • 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, all or part of the processes or functions described in the embodiments of the present invention are generated.
  • the computer may be a general purpose computer, special purpose computer, computer network, or other programmable device.
  • the computer instructions may be stored in or transmitted from one computer readable storage medium to another computer readable storage medium, for example, the computer instructions may be downloaded from a website site, computer, server or data center Transmission to another website site, computer, server, or data center is by wire (eg, coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (eg, infrared, wireless, microwave, etc.).
  • the computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that includes an integration of one or more available media.
  • the usable media may be magnetic media (eg, floppy disks, hard disks, magnetic tapes), optical media (eg, DVD), or semiconductor media (eg, Solid State Disk (SSD)), and the like.
  • magnetic media eg, floppy disks, hard disks, magnetic tapes
  • optical media eg, DVD
  • semiconductor media eg, Solid State Disk (SSD)

Abstract

提供了一种卡片组件的显示方法、图形用户界面及相关装置。电子设备（100）可以响应于用户在桌面上第一应用的图标（311）上的滑动操作，例如向上滑动，暂时在第一应用的图标（311）周围悬浮显示第一应用对应的卡片组件（411），卡片组件（411）上显示有第一应用（311）中第一功能的展示信息。当电子设备接（100）收到针对桌面上卡片组件之外其他区域的输入时，电子设备可以关闭显示暂时显示的卡片组件（411）。这样，可以在桌面上通过用户的一个输入操作快速触发电子设备显示出某一应用对应的卡片组件，方便用户快速查看卡片组件，也不打乱桌面上应用图标或卡片组件的显示布局。

Description

一种卡片组件的显示方法、图形用户界面及相关装置
本申请要求于2021年03月05日提交中国专利局、申请号为202110245839.1、申请名称为“一种卡片组件的显示方法、图形用户界面及相关装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及人机交互技术领域，尤其涉及一种卡片组件的显示方法、图形用户界面及相关装置。
背景技术
随着通讯技术的不断发展，电子设备(例如智能手机)越来越大众化、多样化，对于电子设备与用户进行交互的人机交互界面，其可用性与友好性越来越受到关注。电子设备的桌面是用户电子设备上应用的操作入口和重要界面载体。传统终端桌面的设计将应用按照网络以小图标的形式排列呈现。除了应用图标之外，传统桌面还允许用户添加应用的工具组件(widgets)到桌面上，该工具组件可以显示有应用的展示信息，用户可以通过点击该工具组件，触发电子设备直接显示与该展示信息对应的应用界面。
目前，传统的工具组件有统一的入口和库，用户可以长按电子设备的桌面空白处，触发电子设备显示出工具组件控件。当用户点击该工具组件控件之后，电子设备可以显示出包括有多个工具组件的组件库界面。用户可以选中某一工具组件拖动到电子设备的桌面上的某一区域。若该区域存在应用图标，电子设备会将该区域的应用图标转移至桌面的其他位置。然而，上述添加工具组件的步骤繁琐。
发明内容
本申请提供了一种卡片组件的显示方法、图形用户界面及相关装置，实现了可以在桌面上通过用户的一个输入操作快速触发电子设备显示出某一应用对应的卡片组件，方便用户快速查看卡片组件，也不打乱桌面上应用图标或卡片组件的显示布局。
第一方面，本申请提供了一种卡片组件的显示方法，包括：电子设备显示桌面的第一界面，第一界面包括第一应用的图标。电子设备接收对第一应用的图标的第一滑动操作。响应于第一滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件。其中，第一卡片组件包括有第一应用中第一功能的第一展示信息。当电子设备接收到针对第一界面上第一区域的第一输入时，电子设备不再显示第一卡片组件。其中，第一区域与第一卡片组件的显示区域不重叠。
通过本申请提供了一种卡片组件的显示方法。电子设备可以响应于用户在桌面上第一应用的图标上的滑动操作(例如向上滑动)，暂时在第一应用的图标周围悬浮显示该第一应用对应的卡片组件，该卡片组件上显示有该第一应用中第一功能的展示信息。当电子设备接收到针对桌面上该卡片组件之外其他区域的输入时，电子设备可以关闭显示该暂时显示的卡片组件。这样，可以在桌面上通过用户的一个输入操作快速触发电子设备显示出某一应用对应的卡片组件，方便用户快速查看卡片组件，也不打乱桌面上应用图标或卡片组件的显示布局。
在一种可能的实现方式中，当电子设备接收到第二输入时，电子设备将第一卡片组件添加显示到桌面。其中，当卡片组件固定添加到桌面的空白区域后，若电子设备接收到用户针对其他空白区域的输入时，这样，可以方便用户快速从应用图标找到该应用图标对应的卡片组件，也可以快速的将暂时显示出的卡片组件，固定添加至桌面上。
其中，电子设备可以将第一卡片组件添加显示到桌面的第一界面上的空白区域。其中，在第一卡片组件被添加显示到第一界面上的空白区域之前，第一界面上的空白区域不显示有应用图标、应用文件夹、卡片组件、文字等等界面元素。
可选的，电子设备可以将第一卡片组件添加显示到桌面的第二界面上的空白区域；其中，在第一卡片组件被添加显示到第二界面上的空白区域之前，第二界面上的空白区域不显示有应用图标、应用文件夹、卡片组件、文字等等界面元素。
可选的，电子设备可以在桌面上新建第三界面，并将第一卡片组件添加显示到第三界面。其中，第三界面可以新建在第一界面的左一页或者新建在第一界面的右一页，等等不限定。
在一种可能的实现方式中，电子设备在响应于第一滑动操作，在桌面的第一界面显示第一卡片组件的同时，还可以显示第一卡片组件对应的第一固定控件。该第二输入可以为针对第一固定控件的输入。
在一种可能的实现方式中，电子设备通过接收到的第二输入将第一卡片组件添加显示到桌面的过程可以是：电子设备可以接收到针对第一卡片组件的第一拖动操作；当电子设备通过第一拖动操作将第一卡片组件拖动至桌面上第二区域时，电子设备将第一卡片组件添加显示到桌面上的第二区域。这样，用户可以通过一个操作，将暂时显示的卡片组件添加到桌面上的指定放置位置，简化了用户添加卡片组件到桌面上指定放置位置的操作步骤。
其中，电子设备可以在第一拖动操作的过程中，还可以在所述桌面上显示撤销热区。当电子设备通过第一拖动操作将第一卡片组件拖动至所述撤销热区时，电子设备撤销将第一卡片组件添加显示到桌面。这样，可以在用户通过拖动操作将该暂时显示的卡片组件添加至桌面的过程中有撤销返回的机会。
在一种可能的实现方式中，当第二区域中显示有第五卡片组件时，电子设备在可以在第二区域显示第二卡片堆叠组件，第二卡片堆叠组件包括有第一卡片组件和第五卡片组件。这样，可以将多个卡片组件合成一个卡片堆叠组件放置到桌面上，节约了桌面的使用空间。
在一种可能的实现方式中，电子设备通过接收到的第二输入将第一卡片组件添加显示到桌面的过程可以是：电子设备接收到针对第一卡片组件的第一长按操作；响应于第一长按操作，电子设备显示第二固定控件；电子设备接收到针对第二固定控件的第四输入；响应于第四输入，电子设备将第一卡片组件添加显示到桌面。
在一种可能的实现方式中，当电子设备接收针对第一卡片组件的第三输入时，电子设备显示与第一应用中第一功能对应的第四界面。这样，用户可以直接通过第一卡片组件触发电子设备直接跳转显示第一应用中第一功能的界面，简化了用户打开第一功能的界面的操作。
在一种可能的实现方式中，第一卡片组件上还显示包括有第一控件。电子设备接收到针对第一控件的第五输入。响应于所述第五输入，电子设备控制第一应用执行与第一控件对应的第一控制操作。这样，用户直接在第一卡片组件上控制第一应用执行一些控制操作，而不用先调出这些控制操作的控制界面，再触发第一应用执行这些控制操作，简化了用户的操作。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备可以接收将显示在桌面上第二区域的第一卡片组件拖动至桌面上第三区域的第二拖动操作。响应于第二拖动操作，电子设备将第一卡片组件从第二区域放置到第三区域。这样，可以方便用户调整卡片组件在桌面上的显示位置，提高用户体验。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备接收针对第一卡片组件的第三拖动操作。电子设备在第三拖动操作的过程中，在桌面上显示删除热区，第三拖动操作的结束位置在删除热区。响应于第三拖动操作，电子设备将第一卡片组件从桌面上移除。这样，可以在用户不想要桌面上已添加的卡片组件时，手动将该卡片组件删除。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备可以接收针对第一卡片组件的第二长按操作。响应于第二长按操作，电子设备可以显示第一卡片组件对应的移除控件。在电子设备接收针对移除控件的第六输入后，电子设备将第一卡片组件从桌面移除。这样，可以在用户不想要桌面上已添加的卡片组件时，手动将该卡片组件删除。
在一种可能的实现方式中，在电子设备在第一应用的图标周围区域悬浮显示第一应用对应的第一卡片组件后，电子设备在接收到用户将第一应用对应的第一卡片组件切换为第二卡片组件的第七输入后，显示出桌面的第一界面。电子设备接收到针对第一应用的图标的第二滑动操作。响应于第二滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第二卡片组件，第二卡片组件与第一卡片组件的样式不同。这样，可以让用户选择自己喜欢样式的卡片组件。
在一种可能的实现方式中，在电子设备在第一应用的图标周围区域悬浮显示第一应用对应的第一卡片组件后，电子设备在接收到用户将第一卡片组件中显示的第一展示信息切换为第二展示信息的第八输入后，显示出桌面的第一界面。电子设备接收到针对第一应用的图标的第三滑动操作；响应于第三滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件，并在第一卡片组件上显示第二展示信息。这样，可以方便用户切换卡片组件中的显示内容。
在一种可能的实现方式中，上述第一界面上还包括应用文件夹，应用文件夹中包括有第二应用的图标和第三应用的图标，电子设备可以接收到针对应用文件夹的第四滑动操作。响应于第四滑动操作，电子设备在应用文件夹的周围悬浮显示与应用文件夹对应的第一卡片堆叠组件，第一卡片堆叠组件包括有与第二应用对应的第三卡片组件和与第三应用对应的第四卡片组件。其中，第三卡片组件和第四卡片组件可以在第一卡片堆叠组件上切换显示。这样， 可以节约界面的使用空间。
在本申请实施例中，当电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件时，电子设备不再显示被第一卡片组件覆盖的应用图标的应用名称，和/或，被第一卡片组件覆盖的应用图标。
第二方面，本申请提供了一种电子设备，包括一个或多个处理器、显示屏和一个或多个存储器。该显示屏、一个或多个存储器与一个或多个处理器耦合，一个或多个存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，当一个或多个处理器执行计算机指令时，使得电子设备执行上述任一方面任一项可能的实现方式中的卡片组件的显示方法。
第三方面，本申请实施例提供了一种计算机存储介质，包括计算机指令，当计算机指令在电子设备上运行时，使得电子设备执行上述任一方面任一项可能的实现方式中的卡片组件的显示方法。
第四方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述任一方面任一项可能的实现方式中的卡片组件的显示方法。
第五方面，本申请实施例提供了一种电子设备上的图形用户界面，电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，一个或多个处理器用于执行存储在所述一个或多个存储器中的一个或多个计算机程序，图形用户界面包括电子设备执行上述第一方面及其第一方面任一可能设计的技术方案时显示的图形用户界面。
第六方面，本申请实施例的一种电子设备，所述电子设备包括执行上述第一方面或者第一方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。
其中，第二方面至第六方面的有益效果，请参见第一方面的有益效果，不重复赘述。
附图说明
图1为本申请实施例提供的一种电子设备的结构示意图；
图2为本申请实施例提供的一种电子设备的软件架构示意图；
图3A-图3D为本申请实施例提供的一组在桌面添加卡片组件的方式的界面示意图；
图4A-图4K为本申请实施例提供的一组卡片组件的显示方法的界面示意图；
图5A-图5N为本申请实施例提供的一组卡片组件的显示样式示意图；
图6A-图6E为本申请实施例提供的一组添加卡片组件到桌面的界面示意图；
图7A-图7I为本申请实施例提供的另一组添加卡片组件到桌面的界面示意图；
图8A-图8C为本申请实施例提供的另一组添加卡片组件到桌面的界面示意图；
图9A-图9H为本申请实施例提供的一组移动或删除已添加到桌面上卡片组件的界面示意图；
图10A-图10H为本申请实施例提供的一组更改卡片组件的样式的界面示意图；
图11A-图11F为本申请实施例提供的一组进入卡片管理界面的界面示意图；
图12A-图12G为本申请实施例提供的一组编辑卡片组件中内容的界面示意图；
图13A-图13E为本申请实施例提供的一组进入卡片中心界面的界面示意图；
图14A-图14C为本申请实施例提供的一组配置有折叠屏的电子设备上显示卡片组件的界面示意图；
图15A-图15F为本申请实施例提供的一组将卡片组件添加到服务中心的界面示意图；
图16为本申请实施例提供的一种卡片组件的显示方法的流程示意图。
具体实施方式
下面将结合附图对本申请实施例中的技术方案进行清除、详尽地描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；文本中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，另外，在本申请实施例的描述中，“多个”是指两个或多于两个。
以下，术语“第一”、“第二”仅用于描述目的，而不能理解为暗示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征，在本申请实施例的描述中，除非另有说明，“多个”的含义是两个或两个以上。
图1示出了电子设备100的结构示意图。
下面以电子设备100为例对实施例进行具体说明。应该理解的是，图1所示电子设备100仅是一个范例，并且电子设备100可以具有比图1中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
电子设备100可以包括：处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。
可以理解的是，本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多 个处理器中。
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。
I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。
I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。
PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。
UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如：处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。
MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(display serial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。
GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193，显示屏194，无线通信模块160，音频模块170，传感器模块180等。GPIO接口还可以被配置为I2C接口，I2S接口，UART接口，MIPI接口等。
USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用 于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。
可以理解的是，本发明实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处 理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(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，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidou navigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellite system，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如 借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。
受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。
麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。
耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。
压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。
磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。
接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动 信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。
按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。
马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。
SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。
电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本发明实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。
图2是本发明实施例的电子设备100的软件结构框图。
分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。
应用程序层可以包括一系列应用程序包。
如图2所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。
当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用框架层的接口，启动相机应用，进而通过调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。
下面介绍本申请实施例中提供的一种在桌面添加卡片组件的方式。
如图3A所示，电子设备100可以显示有桌面的界面310，该界面310中显示了一个放置有应用图标的页面，该页面包括多个应用图标(例如，浏览器应用图标、股票应用图标、计算器应用图标、语音助手应用图标、视频应用图标、天气应用图标311、主题应用图标、地图应用图标、图库应用图标、备忘录应用图标、设置应用图标，等等)。其中，该页面还可以包括有应用夹图标(例如应用夹1的图标312)，该应用夹图标可用于触发电子设备100显示出一个或多个应用图标。可选的，该放置有应用图标的页面的下方还显示包括有页面指示符 314，以表明桌面上页面总数，以及当前显示的页面与其他页面的位置关系。例如，桌面的界面310可以包括有三个页面，该页面指示符中的黑点在最左边，可以表示当前显示页面为三个页面中最左边的一个页面。可选的，该放置有应用图标的页面的上方还显示包括有状态栏，该状态栏中可以包括有通信信号的强度指示符、电量值、时间等信息。进一步可选的，页面指示符的下方可以有托盘(dock)区域，该dock区域中可以包括有一个或多个托盘图标(例如，拨号应用图标313、信息应用图标、联系人应用图标、相机应用图标等等)，该dock区域中的一个或多个托盘图标可以在页面切换时保持显示。
电子设备100可以接收用户针对桌面的界面310上空白区域的长按输入，响应于该输入操作，如图3B所示，电子设备100可以在界面310中显示组件添加控件322、完成控件323、以及在每个应用图标对应的删除控件(例如，天气应用图标311上的删除控件321)。其中，该完成控件323可用于触发电子设备100保持桌面当前的页面布局，并停止在界面310中显示组件添加控件322、完成控件323、以及在每个应用图标对应的删除控件。该应用图标对应的删除控件可用于触发电子设备100卸载该应用图标对应的应用，并停止在桌面上显示该删除控件对应的应用图标。
电子设备100可以接收用户针对该组件添加控件322的输入(例如单击)，响应于该输入，电子设备100可以显示如图3C所示的组件添加页面330。
如图3C所示，该组件添加页面330包括一个或多个应用功能对应的卡片组件(例如，时钟组件331、天气组件、音乐组件、运动健康组件等等)。其中，卡片组件上可以显示有该卡片组件对应应用功能的功能展示信息，该卡片组件可用于触发电子设备100跳转显示该卡片组件对应应用功能的界面。例如，时钟组件331上可以显示出时间信息，时钟组件331可用于触发电子设备100跳转显示出时钟应用中的时间界面(包括有时间信息)。天气组件上可以显示电子设备100当前所处地区的天气信息(包括指定地区位置当前的天气、室外温度、空气质量等中的一个或多个)，天气组件可用于触发电子设备100显示天气应用中的天气界面(包括有当前所处地区的天气信息)。音乐组件上可以显示音乐信息(包括音乐的专辑封面、音乐的名称和歌手名称中的一个或多个)，音乐组件可用于触发电子设备100显示出音乐应用中的音乐播放界面(包括有音乐信息)，等等。
电子设备100可以接收用户针对时钟组件331的长按拖动操作，响应于该长按拖动操作，电子设备100可以将时钟组件显示在如图3D所示的桌面的界面340中的指定区域。
如图3D所示，针对该桌面的界面340的文字说明可以参考针对前述界面310的文字描述，不再赘述。若在拖动时钟组件331到指定区域之前，该指定区域包括其他应用图标或卡片组件，电子设备100可以在检测到用户拖动到时钟组件331到指定区域时，将指定区域中的其他应用图标或卡片组件显示在其他位置，并在指定区域显示该时钟组件331。
由上述在桌面添加卡片组件的方式可以看出，用户添加卡片组件的操作步骤复杂，且用户无法短时间内从众多的卡片组件中找寻到自己想要添加到桌面的卡片组件。在桌面添加新的卡片组件后，打乱了电子设备100原有桌面上应用图标或卡片组件的显示布局。
因此，本申请实施例提供了一种卡片组件的显示方法。电子设备100可以响应于用户在桌面上第一应用的图标上的滑动操作(例如向上滑动)，暂时在第一应用的图标周围悬浮显示该第一应用对应的卡片组件，该卡片组件上显示有该第一应用中第一功能的展示信息。当电子设备100接收到针对桌面上该卡片组件之外其他区域的输入时，电子设备100可以关闭显示该暂时显示的卡片组件。其中，电子设备100也可将暂时显示的卡片组件，添加显示在桌 面上的指定区域。这样，可以在桌面上通过用户的一个输入操作快速触发电子设备100显示出某一应用对应的卡片组件，方便用户快速查看卡片组件，也不打乱桌面上应用图标或卡片组件的显示布局。
下面结合应用场景，具体介绍本申请实施例中提供的一种卡片组件的显示方法。
在一些应用场景中，电子设备100可以响应于用户在桌面上第一应用的图标上的滑动操作(例如向上滑动)，显示出该第一应用对应的卡片组件。其中，该第一应用对应的卡片组件可以悬浮显示在第一应用的图标周围。该卡片组件上显示有该第一应用中第一功能的展示信息。该第一应用对应的卡片组件的显示可以是暂时的，例如当电子设备100接收到针对桌面上该卡片组件之外其他区域的输入时，电子设备100可以关闭显示该暂时显示的卡片组件。这样，可以方便用户快速查看某一应用的卡片组件，也可以快速关闭该暂时显示的卡片组件。
示例性的，如图4A所示，电子设备100可以显示有桌面的界面310，针对该界面310的文字说明可以参考上述图3A所示实施例，在此不再赘述。
电子设备100可以接收针对天气应用图标311的滑动操作(例如向上滑动)，响应于该滑动操作，如图4B所示，电子设备100可以暂时显示出天气组件411和天气组件411对应的固定控件412。
如图4B所示，该天气组件411可以覆盖在天气应用图标311以及天气图标311附近的应用图标上。例如，天气组件411可以覆盖显示在天气应用图标311、计算器应用图标、语音助手应用图标和主题应用图标上。该天气组件411可以显示包括有通过天气应用查询到的天气信息。其中，该天气信息可以包括有指定地区位置(例如“深圳”)当前的天气(例如“晴”)、室外温度(例如“30摄氏度”)、空气质量(例如“空气优”)以及当日最高温度(例如“32摄氏度”)和最低温度(例如“25摄氏度”)等中的一个或多个。该指定地区位置可以是电子设备100通过天气应用确定出电子设备100当前所处的位置，也可以是用户预先设置的一个地区位置。该固定控件412可用于触发电子设备100将天气组件411固定显示在桌面的某一空白区域。
电子设备100可以在暂时显示出上述天气组件411后，接收到用户针对桌面上该天气组件411所处区域之外的其他区域的输入(例如点击)，响应于该输入，如图4C所示，电子设备100可以关闭该暂时显示的天气组件411。
在本申请实施例中，上述滑动操作的滑动方向可以不限于向上滑动，可能的实现方式中，该滑动操作还可以是向下滑动、向左滑动、向右滑动等等。在一些实施例中，由于在桌面上向左、向右滑动是触发电子设备100切换显示桌面上放置应用图标的页面，在桌面上向下滑动可能触发电子设备100快捷搜索应用图标的功能。因此，本申请实施例中将向上滑动作为上述滑动操作的一种优选的实现方式，可以防止该滑动操作触发其他功能。
需要说明的是，上述滑动操作的起始位置是在应用图标的上或应用图标的附近的预设距离内，上述滑动操作的滑动轨迹可以是直线或曲线。上述图4A中标识了电子设备100在上述图4A所示的方式放置时，顶部，底部，左侧和右侧的相对位置。这些位置用于说明电子设备100的触控屏上的位置，或电子设备100显示的界面上的位置。另外，向上是指从底部往顶部的方向，向下是指从顶部往底部的方向，向右是指从左侧往右侧的方向，向左是指从右侧往左侧的方向。后续附图的描述中，也适用该位置的说明。
在本申请实施例中，上述第一应用的图标不限于是上述桌面中多个页面上直接显示的应 用图标，还可以是桌面上托盘(dock)区域中显示的应用图标(例如上述拨号应用图标313)，也可以是桌面上显示的应用夹中包括的应用图标。
示例性的，如图4C所示，电子设备100可以接收用户针对dock区域中拨号应用图标313的滑动操作(例如上滑)，响应于该滑动操作，如图4D所示，电子设备100可以暂时显示出拨号组件413和拨号组件413对应的固定控件414。
如图4D所示，该拨号组件413可以覆盖在拨号应用图标313以及拨号应用图标313附近的应用图标上。例如，拨号组件413可以覆盖显示在拨号应用图标311以及信息应用图标上。该拨号组件413可以显示包括有拨号应用中多个指定联系人的拨号控件(例如，联系人“爸爸”的拨号控件415、联系人“妈妈”的拨号控件、联系人“老婆”的拨号控件、联系人“女儿”的拨号控件等等)。其中，该指定联系人可以是电子设备100检测到最近通话的联系人，还可以是电子设备100响应于用户的输入，预先添加到拨号组件413中的联系人。该指定联系人的拨号控件，可以用于触发电子设备100拨号给该拨号控件对应的指定联系人。例如，当电子设备100检测到用户点击该拨号控件415时，电子设备100可以向联系人“爸爸”的拨号。其中，该固定控件414可用于触发电子设备100将拨号组件413固定显示在桌面的某一空白区域。
电子设备100可以在暂时显示出上述拨号组件413后，接收到用户针对桌面上该拨号组件413所处区域之外的其他区域的输入(例如点击)，响应于该输入，如图4E所示，电子设备100可以关闭该暂时显示的拨号组件413。
又示例性的，如图4E所示，电子设备100可以接收用户针对应用夹1的图标312的输入(例如点击)，响应于该点击操作，电子设备100可以显示如图4F所示应用夹1的界面420。
如图4F所示，应用夹1的界面420可以包括多个应用图标，例如，邮件应用图标、SIM卡应用图标、时钟应用图标、录音机应用图标、音乐应用图标421、运动健康应用图标等等。
电子设备100可以接收用户针对音乐应用图标421的滑动操作(例如上滑)，响应于该滑动操作，如图4G所示，电子设备100可以在音乐应用图标421上暂时覆盖显示出音乐组件422和音乐组件对应的固定控件423。
如图4G所示，该音乐组件422可以覆盖在音乐应用图标421以及音乐应用图标421附近的应用图标上。例如，音乐组件422可以覆盖显示在音乐应用图标421、运动健康应用图标、SIM卡应用图标和时钟应用图标上。音乐组件422可以显示包括有音乐应用中指定音乐的音乐信息，其中，该音乐信息包括专辑图像424、音乐名称(例如“Dreamitpossible”)、歌手名称(例如“Delacey”)等等。可选的，音乐应用对应的音乐组件中还可以显示有播放/暂停控件、上一首控件、下一首控件等等播放功能控件，和/或，指定音乐的歌词信息。其中，该固定控件423可用于触发电子设备100将音乐组件422固定显示在桌面的某一空白区域。
电子设备100可以在暂时显示出上述音乐组件422后，接收到用户针对界面420上该音乐组件422所处区域之外其他区域的输入(例如点击)，响应于该输入，电子设备100可以关闭该暂时显示的音乐组件422。其中，电子设备100在关闭该暂时显示的音乐组件422后，可以显示出如上述图4F所示的界面420，或者如图上述图4E所示的界面310。
在一种可能的实现方式中，当应用夹中包括有多个应用的图标时，电子设备100可以在检测到用户作用于应用夹的滑动操作(例如上滑)后，暂态显示出该应用夹中对应的卡片堆叠组件。其中，该卡片堆叠组件中可以切换显示有该多个应用各自对应的卡片组件。
示例性的，如图4H所示，电子设备100显示有桌面的界面430。该界面430中包括有应用夹2的图标431。其中该应用夹2中包括有时钟应用图标和音乐应用图标。针对该界面430中其他界面元素的文字说明可以参考上述图3A所示实施例中针对桌面的界面310的描述，在此不再赘述。
电子设备100可以接收用户针对应用夹2的图标431的滑动输入(例如上滑)，响应于该滑动操作，如图4I所示，电子设备100可以暂时显示出卡片堆叠组件440、该卡片堆叠组件440对应的固定控件441和指示符442。
如图4I所示，该卡片堆叠组件440上当前可以显示时钟应用的时钟组件443，时钟组件443上可以显示有当前的时间信息。该指示符442可用于指示卡片堆叠组件440上当前显示的卡片组件相对于卡片堆叠组件440中其他卡片组件的位置关系。例如，指示符442中的黑点在白点的上方，表示当前卡片堆叠组件440上显示的时钟组件443排在其他组件的顶部。
电子设备100可以接收用户针对该卡片堆叠组件440的滑动操作(例如上滑)，响应于该滑动操作，如图4J所示，电子设备100可以在卡片堆叠组件440上切换显示出音乐应用对应的音乐组件444。其中，针对该音乐组件444的文字说明可以参考上述图4G所示实施例中针对音乐组件422的文字说明，在此不再赘述。
在本申请实施例中，当电子设备100响应于针对第一应用的滑动操作(例如上滑)，暂时显示出第一应用对应的卡片组件后，电子设备100可以接收用户针对该卡片组件的输入(例如单击)。响应于该输入，电子设备100可以显示出第一应用中的指定界面。
示例性的，如图4J，电子设备100可以接收到用户针对音乐组件444的单击操作，响应于单击操作，电子设备100可以显示如图4K所示音乐应用的音乐播放界面450。其中，该音乐播放界面450包括有该音乐组件444中显示的音乐信息(例如，指定音乐的专辑图像、名称、歌手等等)。
在一种可能的实现方式中，电子设备100可以响应于用户在桌面上第一应用的图标上的滑动操作(例如向上滑动)，将第一应用对应的卡片组件添加到桌面上的空白区域。这样，可以方便用户快速将第一应用对应的卡片组件添加到桌面上。
在本申请实施例中，电子设备100在接收到用户针对第一应用的图标的滑动操作后，可以将第一应用对应的卡片组片暂时覆盖显示在第一应用的图标以及第一应用的图标周围的多个应用图标放置区域上。其中，卡片组件的尺寸可以是覆盖相邻多个应用图标的尺寸，例如，卡片组件的尺寸可以是横向覆盖1个应用图标、纵向覆盖相邻2个应用图标的尺寸大小，或者横向覆盖相邻2个应用图标、纵向覆盖1个应用图标的尺寸大小。又例如，卡片组件的尺寸可以横向覆盖相邻2个应用图标、纵向覆盖相邻2个应用图标的尺寸大小。又例如，卡片组件的尺寸可以是横向覆盖相邻2个应用图标、纵向覆盖相邻4个应用图标的尺寸大小，或者横向覆盖相邻4个应用图标、纵向覆盖相邻2个应用图标的尺寸大小。又例如，卡片组件的尺寸可以是横向覆盖相邻4个应用图标、纵向覆盖相邻4个应用图标的尺寸大小。
其中，为了电子设备100暂时显示出卡片组件时，界面的简洁与美观，电子设备100可以在暂时显示出卡片组件时，对卡片组件覆盖到的应用图标的相关元素进行隐藏。其中，应用图标的相关元素包括但不限于应用图标、应用图标上的上角标或下角标、应用名称等等。
示例性的，如图5A所示，4个应用图标成横向2个、纵向2个阵列排列。其中，应用图标1的下方显示有该应用图标1的名称(例如，为“名称1”)，应用图标521的下方显示有 该应用图标512的名称(例如，为“名称2-abcd”)，应用图标513的下方显示有该应用图标513的名称(例如，为“名称3”)，应用图标514的下方显示有该应用图标514的名称(例如，为“名称4”)。应用图标2的右上角可以显示有角标511、应用图标4的右下角可以显示有角标512。
当电子设备100检测到用户针对应用图标513的上滑操作时，电子设备100可以暂时显示出应用图标3对应的卡片组件。其中，电子设备100显示出该应用图标3对应的卡片组件的样式，可以如图5B或图5C或图5D或图5E所示。
如图5B所示，应用图标3对应的卡片组件521的尺寸大小可以是横向覆盖相邻2个应用图标、纵向覆盖相邻2个应用图标的尺寸大小。电子设备100可以直接将该卡片组件521可以覆盖在应用图标1、应用图标2、应用图标3和应用图标4上。其中，应用图标1的名称可以被隐藏，应用图标2的名称由于长度超过了应用图标2的长度，有部分未被隐藏。应用图标2的上角标511和应用图标4的下角标512也可以保持显示。
如图5C所示，电子设备100可以直接将该卡片组件521可以覆盖在应用图标1、应用图标2、应用图标3和应用图标4上。其中，应用图标1和应用图标2的名称、以及应用图标2的角标511和应用图标4的角标512都被隐藏。卡片组件521的底部方向可以显示有应用图标3的名称和应用图标4的名称。
如图5D所示，电子设备100可以直接将该卡片组件521可以覆盖在应用图标1、应用图标2、应用图标3和应用图标4上。其中，应用图标1、应用图标2和应用图标4的名称、以及应用图标2的角标511和应用图标4的角标512都被隐藏。卡片组件521的下方可以只显示有应用图标3的名称。可选的，应用图标3的名称可以显示在卡片组件521的底部方向的居中位置。
如图5E所示，电子设备100可以将该卡片组件521可以覆盖在应用图标1、应用图标2、应用图标3和应用图标4所在的应用图标放置区域上。其中，应用图标1、应用图标2、应用图标3以及这三个应用图标的相关元素都被隐藏。卡片组件521的底部方向只显示有应用图标3的名称。
在本申请实施例中，当电子设备100暂时显示出第一应用的卡片组件时，第一应用的卡片组件优先覆盖第一应用的图标以及第一应用的图标右方或顶部方向的应用图标放置区域。在第一应用的图标的右方的区域或顶部方向区域不足以容纳第一应用的卡片组件时，电子设备100可以将卡片组件覆盖显示在第一应用的图标以及左方或底部方向的应用图标放置区域。如下示例性的以第一应用的卡片组件的尺寸大小是横向覆盖相邻2个应用图标、纵向覆盖相邻2个应用图标，进行说明。
示例性的，如图5F、图5G所示，8个应用图标成左右方向4个、顶部到底部方向2个排列。其中，应用图标1的下方显示有该应用图标1的名称(例如，为“名称1”)。应用图标2的下方显示有该应用图标2的名称(例如，为“名称2”)。应用图标3的下方显示有该应用图标3的名称(例如，为“名称3”)。应用图标4的下方显示有该应用图标4的名称(例如，为“名称4”).应用图标5的下方显示有该应用图标5的名称(例如，为“名称5”)。应用图标6的下方显示有该应用图标6的名称(例如，为“名称6”)。应用图标7的下方显示有该应用图标7的名称(例如，为“名称7”)。应用图标8的下方显示有该应用图标8的名称(例如，为“名称8”)。当电子设备100接收到针对应用图标8的上滑操作时，由于应用图标8的右方没有可放置应用图标的区域，电子设备100可以将应用图标8对应的卡片组件 531覆盖显示在应用图标3、应用图标4、应用图标7和应用图标8上。
又示例性的，如图5H、图5I所示，当电子设备100接收到针对应用图标4的上滑操作时，由于应用图标4的右方和顶部方向没有可放置应用图标的区域，电子设备100可以将应用图标4对应的卡片组件541覆盖显示在应用图标3、应用图标4、应用图标7和应用图标8上。
又示例性的，如图5J、图5K所示，当电子设备100接收到针对应用图标3的上滑操作时，由于应用图标3的顶部方向没有可放置应用图标的区域，电子设备100可以将应用图标3对应的卡片组件551覆盖显示在应用图标3、应用图标4、应用图标7和应用图标8上。
在一些实施例中，第一应用的周围已经固定显示有其他卡片组件，当电子设备100暂时显示出第一应用的卡片组件时，电子设备100可以将第一应用的卡片组件覆盖显示在第一应用的图标以及该其他卡片组件的部分区域上。
示例性的，如图5L、图5M所示，应用图标2的左方已经固定显示有卡片组件1，顶部方向显示有应用图标1，右方没有可放置应用图标的区域，底部方向显示有应用图标6。其中，卡片组件1的尺寸大小为横向覆盖相邻2个应用图标、纵向覆盖相邻2个应用图标。卡片组件1的下方显示有该卡片组件1的名称(例如，“组件名称a”)。应用图标1的下方显示有该应用图标1的名称(例如，为“名称1”)。应用图标2的下方显示有该应用图标2的名称(例如，为“名称2”)。应用图标3的下方显示有该应用图标3的名称(例如，为“名称3”)。应用图标4的下方显示有该应用图标4的名称(例如，为“名称4”)。应用图标5的下方显示有该应用图标5的名称(例如，为“名称5”)。应用图标6的下方显示有该应用图标6的名称(例如，为“名称6”)。应用图标7的下方显示有该应用图标7的名称(例如，为“名称7”)。应用图标8的下方显示有该应用图标8的名称(例如，为“名称8”)。应用图标9的下方显示有该应用图标9的名称(例如，为“名称9”)。应用图标10的下方显示有该应用图标10的名称(例如，为“名称10”)。当电子设备100接收到针对应用图标2的上滑操作时，电子设备100可以将应用图标2对应的卡片组件561暂时覆盖显示在应用图标1、应用图标2以及卡片组件1的最右方两个应用图标放置区域上。
在一些实施例中，第一应用的周围已经固定显示有其他卡片组件，当电子设备100暂时显示出第一应用的卡片组件时，电子设备100可以将第一应用的卡片组件覆盖显示在其他区域与已经固定显示的其他卡片组件不重叠。这样，可以使得第一应用的卡片组件在被调出显示时，不被已经固定显示的卡片组件所遮挡，避免第一应用的卡片组件中的显示内容被遮挡。
示例性的，如图5N所示，当电子设备100接收到针对应用图标2的上滑操作时，电子设备100可以将应用图标2对应的卡片组件561暂时覆盖显示在应用图标5、应用图标6、应用图标9和应用图标10上，并显示出标记562,。其中，该标记562用于表示该卡片组件561是应用图标2对应的卡片组件。
可选的，若第一应用的周围已经固定显示有其他卡片组件，当电子设备100暂时显示出第一应用的卡片组件时，电子设备100也可以减小该已经固定显示的卡片组件的显示尺寸，使得第一应用的卡片组件能显示在第一应用的周围(图中未示出)。或者，电子设备100也可以减小第一应用的卡片组件的显示尺寸，使得第一应用的卡片组件能显示在第一应用的周围(图中未示出)。
在一些应用场景中，电子设备100在暂时在第一应用的图标周围悬浮显示该第一应用对 应的卡片组件后，可以通过用户的输入将该暂时显示的卡片组件，固定添加在电子设备100的桌面上的空白区域。其中，当卡片组件固定添加到桌面的空白区域后，若电子设备100接收到用户针对其他空白区域的输入时，电子设备100仍然保持在桌面上显示该卡片组件。这样，可以方便用户快速从应用图标找到该应用图标对应的卡片组件，也可以快速的将暂时显示出的卡片组件，固定添加至桌面上。
其中，电子设备100在暂时显示出第一应用对应的卡片组件时，还可以显示该卡片组件对应的固定控件。当电子设备100接收到用户针对该固定控件的输入后，电子设备100可以将该暂时显示的卡片组件，固定显示在桌面上未被应用图标或其他组件占用的空白区域。
示例性的，如图6A所示，电子设备100可以显示出桌面的界面610。电子设备100可以响应于用户针对天气应用图标的滑动操作(例如上滑)，在该界面610上显示出该天气应用图标对应的天气组件611和固定控件612。其中，针对界面610的文字说明可以参考前述图4B所示实施例中针对界面310的文字说明，在此不再赘述。
电子设备100可以接收用户针对固定控件612的输入(例如单击)，响应于该输入，如图6B所示，电子设备100可以将该天气组件611添加到该桌面的界面610中天气应用图标所在页面中的空白区域。天气组件611被添加到桌面的空白区域后，若电子设备100接收到用户针对其他空白区域的输入时，电子设备100仍然保持在桌面上显示该天气组件611。
当桌面中第一应用的图标所在页面中不存在可容纳该第一应用对应的卡片组件的空白区域时，电子设备100可以将该卡片组件添加在桌面中最后一个页面的空白区域。
示例性的，如图6C所示，电子设备100显示出桌面的界面620。该界面620暂时显示有天气应用图标对应的天气组件621和固定控件622。该界面620中所显示的页面中已无可容纳该天气组件621的空白区域。在电子设备100接收到用户针对该固定控件622后，如图6D所示，电子设备100可以将该天气组件621添加到桌面的最后一个放置应用图标的页面中的空白区域。
如图6D所示，电子设备100显示出桌面的界面630，页面指示符634中的黑点用于指示该界面630当前显示的页面为桌面上的最后一个放置应用图标的页面。该界面630中显示有一个或多个应用图标(例如查找设备应用图标、游戏中心应用图标、应用市场应用图标、阅读应用图标等等)和天气组件621。
在一种可能的实现方式中，当桌面中第一应用的图标所在页面中不存在可容纳该第一应用对应的卡片组件的空白区域时，电子设备100可以在桌面上新建一个可放置应用图标和卡片组件的页面，并将第一应用对应的卡片组件添加到该新建的页面中。
其中，该新建的页面可以是新建在第一应用的图标所在的页面之前的一个空白页面，或者，新建在第一应用的图标所在的页面之后的一个空白页面，也可以是新建在桌面最后一页的空白页面。
如图6E所示，在电子设备100接收到用户针对上述图6C所示固定控件622的输入后，电子设备100可以显示出桌面的界面640。其中，该界面640中显示有天气组件621和页面指示符644。其中，该页面指示符644中的黑点用于表示该界面640显示的页面为上述图6C所示的界面620显示的页面右边新建的页面。
在一种可能的实现方式，当桌面中第一应用的图标所在页面中不存在可容纳该第一应用对应的卡片组件的空白区域时，电子设备100可以将第一应用对应的卡片组件添加至指定界面。例如，电子设备100可以将卡片组件添加至负一屏，控制中心界面，服务中心界面，等 等。
在一种可能的实现方式中，电子设备100在暂时显示出第一应用对应的卡片组件后，可以接收到用户针对该卡片组件的拖动操作，电子设备100基于该拖动操作，可以将该暂时显示出的卡片组件添加到桌面上的空白区域。
示例性的，如图7A所示，电子设备100可以显示出桌面的界面710。电子设备100可以响应于用户针对天气应用图标的滑动操作(例如上滑)，在该界面710上显示出该天气应用图标对应的天气组件711。其中，针对界面710的文字说明可以参考前述图4B所示实施例中针对界面310的文字说明，在此不再赘述。
电子设备100可以接收用户针对该卡片组件711的拖动操作，响应于该拖动操作，电子设备100可以基于该拖动操作，将电子设备100固定在该拖动操作的结束位置。这样，用户可以通过一个操作，将暂时显示的卡片组件添加到桌面上的指定放置位置，简化了用户添加卡片组件到桌面上指定放置位置的操作步骤。
如图7B所示，当该拖动操作在区域712停留时，电子设备100可以在该区域712上显示放置提示，该放置提示可用于提示用户可将该天气组件711放置在该区域712中。
如图7C所示，当该拖动操作的结束位置在区域712附近时，电子设备100可以将该天气组件711固定添加到该区域712。
在一种可能的实现方式中，当电子设备100在暂时显示出第一应用对应的卡片组件后，可以接收到用户针对该卡片组件的拖动操作，电子设备100基于该拖动操作，将该卡片组件与桌面上已添加的其他卡片组件合并到一个卡片堆叠组件中。
示例性的，如图7D所示，电子设备100显示出桌面的界面720。电子设备100可以响应于用户针对天气应用图标的滑动操作(例如上滑)，在该界面720上显示出该天气应用图标对应的天气组件721。其中，该界面720中还显示有已添加到桌面的时钟组件722。
如图7E所示，电子设备100可以接收用户针对该天气组件721的拖动操作，当拖动该天气组件721到时钟组件722的附近时，将电子设备100可以在时钟组件722周围显示放置提示，该放置提示用于提示用户该天气组件721可以与该时钟组件722合并至同一个卡片堆叠组件中。
如图7F所示，当该拖动操作的结束位置在时钟组件722附近时，电子设备100可以在该界面720上显示出卡片堆叠组件731以及指示符732。该卡片堆叠组件731上当前可以显示天气组件721。该指示符732可用于指示卡片堆叠组件731上当前显示的卡片组件相对于卡片堆叠组件731中其他卡片组件的位置关系。例如，指示符732中的黑电在白点的上方，表示当前卡片堆叠组件731上显示的天气组件721排在时钟组件722的顶部。
电子设备100可以接收到用户针对该卡片堆叠组件731的滑动操作(例如上滑)，响应于该滑动操作，如图7G所示，电子设备100可以在该卡片堆叠组件731上切换显示出时钟组件722。
在本申请实施例中，当电子设备100基于该拖动操作将暂时显示的卡片组件添加至桌面的过程中，电子设备100可以显示撤销热区。当该暂时显示的卡片组件被拖动到该撤销热区附近时，电子设备100可以退出显示该卡片组件。这样，可以在用户通过拖动操作将该暂时显示的卡片组件添加至桌面的过程中有撤销返回的机会。
示例性的，如图7H、图7I所示，电子设备100显示出桌面的界面710，针对该界面710的文字说明可以参考前述图7A所示实施例的文字部分，在此不再赘述。在该暂时显示的天气组件711被用户拖动的过程中，电子设备100可以在该界面710上显示出撤销热区713。当该天气组件711被拖动至该撤销热区713附近时，电子设备100可以退出显示该天气组件711。其中，当电子设备100退出显示该天气组件711后，接收到用户针对天气应用的滑动操作(例如上滑)，电子设备100仍然可以再次暂时显示出该天气组件711。
在一种可能的实现方式中，电子设备100在暂时显示出第一应用对应的卡片组件后，电子设备100可以接收到针对该卡片组件的输入(例如长按)，响应于该输入，电子设备100可以显示出该卡片组件对应的快捷菜单，该快捷菜单中包括有桌面添加控件。当电子设备100接收到用户针对该桌面添加控件的输入(例如单击)后，电子设备100可以将该卡片组件添加到桌面上未被应用图标或其他组件占用的空白区域。
示例性的，如图8A所示，电子设备100可以显示出桌面的界面810。电子设备100可以响应于用户针对天气应用图标的滑动操作(例如上滑)，在该界面810上显示出该天气应用图标对应的天气组件811。其中，针对界面810的文字说明可以参考前述图4B所示实施例中针对界面310的文字说明，在此不再赘述。
电子设备100可以接收到针对该天气组件811的长按操作，响应于该长按操作，如图8B所示，电子设备100可以显示出该天气组件811对应的快捷菜单812。
如图8B所示，该快捷菜单812可以包括桌面添加控件813以及其他控件(例如跨设备使用控件、分享控件、收藏控件、移除控件等等)。其中，该桌面添加控件813可用于触发电子设备100将该天气组件811添加到桌面上的空白区域。该跨设备使用控件可用于触发电子设备100将该天气组件811提供给其他设备使用。该分享控件可用于触发电子设备100将该天气组件811中显示的信息分享给其他设备。该收藏控件可用于触发电子设备100将该天气组件811收藏至指定界面中或指定文件夹中。该移除控件可用于触发电子设备100退出显示该天气组件811。
电子设备100可以接收到针对该桌面添加控件813的输入(例如单击)，响应于该输入，如图8C所示，电子设备100可以将该天气组件811添加到该桌面的界面810中天气应用图标所在页面中的空白区域。天气组件811被添加到桌面的空白区域后，若电子设备100接收到用户针对其他空白区域的输入时，电子设备100仍然保持在桌面上显示该天气组件811。
可选的，当桌面中天气应用图标所在页面中不存在可容纳该天气组件811的空白区域时，电子设备100可以将该天气组件811添加到桌面中最后一个页面的空白区域，或者，在天气应用图标所在页面右边新建一个可放置应用图标和卡片组件的页面，并将天气组件添加到该新建的页面中。
在一些实施例中，电子设备100在将卡片组件添加到桌面后，可以通过用户的输入，调整卡片组件在桌面上的位置。这样，可以方便用户调整卡片组件在桌面上的显示位置，提高用户体验。
示例性的，如图9A所示，电子设备100可以在桌面的界面910上添加有天气组件911。针对桌面的界面910的文字说明可以参考前述图7C所示界面710的文字描述，在此不赘述。
如图9B所示，电子设备100可以接收到该天气组件911的拖动操作，当该天气组件911被拖动到区域912时，区域912上可以显示有放置标记，该放置标记可用于提示用户该天气 组件911可以放置到该区域912中。例如，该放置标记可以是在区域912的边界显示虚线框。
如图9C所示，当针对天气组件911的拖动操作的结束位置在区域912附近时，电子设备100可以将该天气组件911放置到该区域912中。
在一些实施例中，电子设备100在将卡片组件添加到桌面后，可以通过用户的输入，删除该卡片组件。这样，可以在用户不想要桌面上已添加的卡片组件时，手动将该卡片组件删除。
示例性的，如图9D所示，电子设备100可以在桌面的界面910上添加有天气组件911。针对桌面的界面910的文字说明可以参考前述图7C所示界面710的文字描述，在此不赘述。电子设备100可以接收到该天气组件911的拖动操作。当该天气组件911被拖动的过程中，电子设备100可以在界面910上显示出删除热区913。当该天气组件911被拖动至该删除热区913的附近结束拖动时，如图9E所示，电子设备100可以将该天气组件911从桌面上删除。
又示例性的，如图9F所示，电子设备100可以在桌面的界面910上添加有天气组件911。针对桌面的界面910的文字说明可以参考前述图7C所示界面710的文字描述，在此不赘述。电子设备100可以接收到该天气组件911的长按操作。响应于该长按操作，如图9G所示，电子设备100可以显示出移除控件914。如图9H所示，当电子设备100可以接收到用户针对该移除控件914的输入(例如单击)后，电子设备100可以显示出删除提示框921。该删除提示框921中包括有删除提示信息、删除确定控件923、删除取消控件924。其中，该删除提示信息可用于提示用户即将该天气组件911从桌面上删除。例如，该删除提示信息可以是“在‘天气’应用图标上滑可重新添加”的文字提示。当电子设备100接收到针对该删除确定控件923的输入(例如单击)后，电子设备100可以将该天气组件911从桌面上删除。当电子设备100接收到针对该删除取消控件924的输入(例如单击)后，电子设备100可以保持该天气组件911在桌面上显示。
可选的，电子设备100可以直接响应于针对上述图9G所示移除控件914的输入，将该天气组件911从桌面上删除。
在一些应用场景中，电子设备100可以通过用户的输入，显示出第一应用的组件管理界面。其中，该组件的管理界面中可以切换显示有第一应用的不同样式的卡片组件。电子设备100可以通过用户在该组件管理界面中的输入，更改第一应用对应卡片组件的默认样式。在电子设备100接收到用户针对该第一应用的图标的滑动操作(例如上滑)时，电子设备100可以显示出该第一应用的默认样式的卡片组件。这样，可以让用户选择自己喜欢样式的卡片组件。
具体的，电子设备100可以在接收到针对第一应用的图标上的长按操作后，显示出第一应用的快捷菜单，该快捷菜单中可以包括有管理卡片控件。当电子设备100接收到针对该管理卡片控件的单击操作后，电子设备100可以显示出第一应用的组件管理界面。
示例性的，如图10A所示，电子设备100可以显示出桌面的界面1010。该界面1010中显示了一个放置有应用图标的页面，该页面包括多个应用图标(例如，浏览器应用图标、股票应用图标、计算器应用图标、语音助手应用图标、音乐应用图标1011、视频应用图标、天气应用图标、主题应用图标、地图应用图标、图库应用图标、时钟应用图标、设置应用图标，等等)。其中，针对该界面1010中未详述的文字部分，可以参考上述图3A所示界面310的文字说明，在此不再赘述。
电子设备100可以接收到用户针对该音乐应用图标1011的输入(例如长按)，响应于该输入，电子设备100可以显示出如图10B所示的快捷菜单(shortcut)1012。
如图10B所示，该快捷菜单1012可以包括有管理卡片控件1013和其他功能控件(例如，听歌识曲控件、搜索节目控件、播放音乐控件、最近播放控件、分享控件、移除控件等等)。
电子设备100接收到用户针对该管理卡片控件1013的输入(例如单击)，响应于该输入，电子设备100可以显示出如图10C所示的组件管理界面1020。
如图10C所示，该组件管理界面1020中可以显示出一个或多个放置有音乐应用的卡片组件的页面(例如，当前显示的页面中放置有音乐组件1031)。不同页面上的卡片组件的样式(包括尺寸大小和/或功能控件)不同。该放置卡片组件的页面的下方显示有页面指示符1023。该指示符1023可用于表示音乐应用对应卡片组件的样式个数，以及组件管理界面1020上当前显示的页面与其他页面的位置关系。例如，组件管理界面1020可以包括有三个放置有卡片组件的页面，该页面指示符1023中的黑电在最左边，可以表示当前显示的页面为三个页面中最左边的一个页面。该组件管理界面1020中还显示包括有主卡片设置控件1021、桌面添加控件1022、主卡片设置提示1024、返回控件1025，等等。其中，该主卡片设置控件1021可用于触发电子设备100将组件管理界面1020当前显示的卡片组件设置为音乐应用的默认卡片组件。当电子设备100接收到针对音乐应用图标的滑动操作(例如上滑)时，电子设备100可以显示出该默认卡片组件。该桌面添加控件1022可用于触发电子设备100将组件管理界面1020当前显示的卡片组件添加到桌面的空白区域。主卡片设置提示1024可用于表示音乐应用的默认卡片组件为组件管理界面1020上当前显示的卡片组件，例如，当前音乐应用的默认卡片组件为该音乐组件1031。该返回控件1025可用于触发电子设备100返回显示上一级界面(例如上述图10B所示的桌面的界面1010)。
电子设备100可以接收用户针对该放置有音乐组件1031的页面的滑动操作(例如左滑)，响应于该滑动操作，如图10D所示，电子设备100可以在组件管理界面1020上切换显示出放置有音乐组件1032的页面。其中，该音乐组件1032的尺寸与上述音乐组件1031的尺寸大小不同，且音乐组件1032中显示的功能控件与上述云音乐组件1031中显示的功能控件不同。
例如，上述音乐组件1031的尺寸大小可以是横向覆盖2个应用图标、纵向覆盖2个应用图标的尺寸大小，上述音乐组件1031上可以显示包括有音乐应用中指定音乐的专辑图像、音乐名称和歌手名称。该音乐组件1032的尺寸大小可以是横向覆盖4个应用图标、纵向覆盖2个应用图标的尺寸大小，该音乐组件1032上可以显示包括有音乐应用中指定音乐的专辑图像、音乐名称、歌手名称、播放/暂停控件、上一首控件和下一首控件。
电子设备100可以在组件管理界面1020上切换显示出放置有音乐组件1032的页面时，接收用户针对该主卡片设置控件1021的输入(例如单击)，响应于该输入，电子设备100可以将该音乐组件1032设置为音乐应用的默认卡片组件。
如图10E所示，在电子设备100将该音乐组件1032设置为音乐应用的默认卡片组件后，电子设备100可以显示出图10A所示的桌面的界面1010。电子设备100可以接收到针对音乐应用1011的滑动操作(例如上滑)，响应于该滑动操作，如图10F所示，电子设备100可以暂时显示出该音乐组件1032。
电子设备100可以在暂时显示出上述音乐组件1032后，接收到用户针对界面1010上该音乐组件1032所处区域之外其他区域的输入(例如点击)，响应于该输入，电子设备100可以关闭该暂时显示的音乐组件1032。
在一种可能的实现方式中，在电子设备100显示出第一应用的组件管理界面时，电子设备100可以通过用户在该第一应用的组件管理界面中的输入，将组件管理界面中显示的卡片组件添加到桌面的空白区域。
示例性的，如图10G所示，电子设备100可以在组件管理界面1020上显示出放置有音乐组件1032的页面、主卡片设置控件1021和桌面添加控件1022等等。其中，针对该组件管理界面1020的文字描述，可以参考前述图10D所示实施例，在此不再赘述。
电子设备100可以接收到用户针对该桌面添加控件1022的输入(例如单击)，响应于该输入，电子设备100可以将该音乐组件1032添加到桌面的空白区域。
如图10H所示，电子设备100返回显示上述桌面的界面1010时，可以在该界面1010中显示出该音乐组件1032。
可选的，电子设备100在将该音乐组件1032添加到桌面上的某一空白区域后，当电子设备100继续接收到用户针对该桌面添加控件1022的输入时，电子设备100还可以将该音乐组件1032添加到桌面上的另一空白区域。也即是说，同样式的卡片组件支持被多次添加到桌面，桌面上可以在不同区域显示出多个同样式的卡片组件。
在本申请实施例中，当第一应用的卡片组件被添加到桌面上固定后，电子设备100还可以接收到用户针对第一应用的图标的滑动操作(例如上滑)，响应于该滑动操作，电子设备100还可以继续在第一应用的图标附近暂时显示出第一应用的卡片组件。
可选的，当第一应用的卡片组件被添加到桌面上固定后，当电子设备100还可以接收到用户针对第一应用的图标的滑动操作(例如上滑)，电子设备100可以不再继续显示出第一应用的卡片组件。
在一种可能的实现方式中，电子设备100可以在接收到针对第一应用的图标上的滑动操作(例如上滑)后，暂时显示出第一应用的卡片组件。电子设备100可以在接收到针对该第一应用的卡片组件的长按操作后，显示出快捷菜单。该快捷菜单中可以包括有管理卡片控件。当电子设备100接收到针对该管理卡片控件的单击操作后，电子设备100可以显示出第一应用的组件管理界面。
示例性的，如图11A所示，电子设备100可以显示出桌面的界面1110。其中，针对该界面1110的文字说明可以参考前述图10A所示实施例中针对桌面的界面1010的文字说明，在此不再赘述。
电子设备100可以接收用户针对该音乐应用图标1111的滑动操作(例如上滑)，响应于该滑动操作，如图11B所示，电子设备100可以显示出音乐组件1121。可选的，电子设备100还可以显示出固定控件1122。该固定控件1122可用于触发电子设备100将该音乐组件1121添加到桌面的空白区域。
如图11B所示，当电子设备100接收到用户针对该音乐组件1121的长按操作时，电子设备100可以显示出该管理卡片控件1123。
如图11C、图11D所示，当电子设备100接收到针对该管理卡片控件1123的单击操作时，电子设备100可以显示出组件管理界面1130。其中，针对该组件管理界面1130的文字说明，可以参考上述图10C所示实施例中针对组件管理界面1130的文字说明，在此不再赘述。
在本申请实施例中，上述组件管理界面中不同样式的卡片组件，不限于左右切换显示， 还可以上下滚动显示。
示例性的，如图11E所示，电子设备100可以显示出音乐应用的组件管理界面1140。该组件管理界面1140可以显示包括有音乐组件1141、音乐组件1142和音乐组件1143。其中，该音乐组件1141堆叠在音乐组件1142的上层、该音乐组件1142堆叠在音乐组件1143的上层。该音乐组件1141、该音乐组件1142和该音乐组件1143这三个卡片组件的样式(包括尺寸大小和/或显示出的功能控件)各不相同。该组件管理界面1140上还显示包括有主卡片设置控件1144、桌面添加控件1145和主卡片设置提示1146。该主卡片设置控件1144可用于触发电子设备100将组件管理界面1140当前堆叠显示在最上层的卡片组件设置为音乐应用的默认卡片组件。当电子设备100接收到针对音乐应用图标的滑动操作(例如上滑)时，电子设备100可以显示出该默认卡片组件。该桌面添加控件1145可用于触发电子设备100将组件管理界面1140当前堆叠显示在最上层的卡片组件添加到桌面的空白区域。主卡片设置提示1146可用于表示音乐应用的默认卡片组件为组件管理界面1140上显示在最上层的卡片组件，例如，音乐组件1141当前堆叠显示在三个卡片组件的最上层时，该组件管理界面1140上显示有主卡片设置提示1146，用于表明电子设备100已将该音乐组件1141设置为音乐应用的默认卡片组件。
电子设备100可以接收到用户针对该组件管理界面1140上音乐组件1141的滑动操作(例如下滑)，如图11F所示，电子设备100可以将该音乐组件1142堆叠显示在音乐组件1143的上层，将音乐组件1143堆叠显示在音乐组件1141的上层。
在一些应用场景中，电子设备100可以在显示出第一应用的卡片组件后，通过用户的输入，编辑卡片组件中的显示内容。这样，可以方便用户切换卡片组件中的显示内容。
示例性的，如图12A所示，电子设备100可以显示出桌面的界面1210。其中，针对该桌面的界面1210的文字说明可以参考前述图10A所示实施例中针对界面1010的文字描述，在此不再赘述。
电子设备100可以接收到用户针对该界面1210中天气应用图标1211的滑动操作(例如上滑)，响应于该滑动操作，如图12B所示，电子设备100可以暂时显示出天气组件1211。其中，该天气组件1211可以覆盖显示在天气应用图标1211以及天气应用图标1211周围的应用图标(例如计算器应用图标、语音助手应用图标和主题应用图标)上。该天气组件1211上当前显示有“深圳”地区的天气信息。该天气信息可以包括有指定地区位置(例如“深圳”)当前的天气(例如“晴”)、室外温度(例如“30摄氏度”)、空气质量(例如“空气优”)以及当日最高温度(例如“32摄氏度”)和最低温度(例如“25摄氏度”)等中的一个或多个。可选的，电子设备100在暂时显示出该天气组件1211的同时，还可以显示出固定控件1212。该固定控件1212可用于触发电子设备100将天气组件1211添加到桌面的空白区域。
如图12C所示，当电子设备100可以接收到用户针对该天气组件1211长按操作后，电子设备100可以显示出编辑城市控件1221。可选的，电子设备100还可以在显示出编辑城市控件1221的同时显示出卡片管理控件。该卡片管理控件可用于触发电子设备100显示出天气应用的组件管理界面。
电子设备100可以接收到用户针对该编辑城市控件1221的输入(例如单击)，响应于该输入，电子设备100可以显示如图12D所示的城市编辑界面1230。
如图12D所示，该城市编辑界面1230中显示包括有多个城市选项和城市添加控件1233，例如，“深圳”城市选项1231、“云南”城市选项、“北京”城市选项和“上海”城市选项1232 等等。该城市添加控件1233可用于添加其他城市选项至该城市编辑界面1230上。
电子设备100可以接收用户针对该“上海”城市选项1232的输入(例如单击)，响应于该输入，电子设备100可以将“上海”城市的天气信息显示在天气组件中。
如图12E所示，电子设备100在获取到“上海”城市的天气信息后，可以将“上海”城市的天气信息显示在该天气组件1211中。
又示例性的，如图12F所示，电子设备100可以在用户针对时钟组件1241的长按操作后，显示出城市编辑控件1243。其中，该城市编辑控件1243可用于触发电子设备100更换时钟组件1241上显示的时钟所属的时区城市。可选的，电子设备100还可以在显示出城市编辑控件1243的同时，显示出卡片管理控件，该卡片管理控件可用于触发电子设备100显示出时钟应用的组件管理界面。
又示例性的，如图12G所示，电子设备100可以在用户针对音乐组件1251的长按操作后，显示出专辑选择控件1253。其中，该专辑选择控件1253可用于触发电子设备100更换音乐组件1251中显示的音乐信息，其中，该音乐信息包括专辑图像、音乐名称、歌手名称等等。可选的，电子设备100还可以在显示出专辑选择控件1253的同时，显示出卡片管理控件，该卡片管理控件可用于触发电子设备100显示出音乐应用的组件管理界面。
在一些应用场景中，电子设备100可以在桌面上通过用户的输入，触发显示出卡片组件中心界面，其中，卡片组件中心界面中显示有电子设备100上的全部卡片组件。其中，卡片组件中心界面中卡片组件的可以按照指定顺序排列。
示例性的，如图13A所示，电子设备100可以显示出桌面的界面1310。其中，针对该界面1310的文字说明可以参考前述图10A所示实施例中针对桌面的界面1010的文字说明，在此不再赘述。
电子设备100可以接收到用户针对该桌面的界面1310上空白区域的输入(例如双指相向滑动)，响应于该输入，电子设备100可以显示出如图13B所示的页面调整界面1320。
如图13B所示，该页面调整界面1320上显示包括有卡片中心控件1341、桌面上放置有应用图标的页面(例如页面1331)以及其他功能控件(例如，壁纸设置控件、切换效果控件、桌面设置控件和页面指示符等等)。该页面1331中显示有多个应用图标。当电子设备100接收到用户在该页面1331的左滑操作时，电子设备100可以在该页面调整界面1320上以预设切换效果切换显示出该页面1331的右边一个页面。
电子设备100可以接收用户针对该卡片中心控件1341的输入(例如单击)，响应于该输入，电子设备100可以显示出如图13C所示的卡片组件中心界面1350。
如图13C所示，该卡片组件中心界面1350显示包括有搜索框1352和按照应用类型分类的卡片组件集合。该搜索框1352可用于接收用户输入的文字信息，并触发电子设备100基于用户输入的该文字信息，搜索显示出该文字信息对应的卡片组件。
例如，按照应用类型分类的卡片组件集合包括系统应用对应的卡片组件集合、音乐应用对应的卡片组件、运动健康应用对应的卡片组件。当应用的卡片组件有多种时，电子设备100可以将该应用的卡片堆叠组件。该卡片堆叠组件上显示有该应用的默认卡片组件，该卡片堆叠组件下方显示有该应用对应的卡片组件的种类数。例如，该卡片组件中心界面1350上显示有音乐应用的卡片堆叠组件1351。该卡片堆叠组件1351的下方显示有该音乐应用对应卡片组件的种类数量(例如3种)。可选的，当应用的卡片组件有多种时，电子设备100可以将该应用的多种卡片组件排列在该应用的展示栏中。
电子设备100可以接收用户针对该卡片堆叠组件1351的输入(例如单击)，响应于该输入，电子设备100可以显示出如图13D所示的卡片组件展示界面1360。
如图13D所示，该卡片组件展示界面1360上显示包括有音乐组件1361、音乐组件1362、音乐组件1363和桌面添加控件1364。其中，该音乐组件1361堆叠在音乐组件1362的上层、该音乐组件1362堆叠在音乐组件1363的上层。该音乐组件1361、该音乐组件1362和该音乐组件1363这三个卡片组件的样式(包括尺寸大小和/或显示出的功能控件)各不相同。该桌面添加控件1364可用于将该卡片组件展示界面1360上堆叠显示在最上层的卡片组件添加到桌面上的空白区域上显示。
电子设备100可以接收到用户针对该卡片组件展示界面1360上音乐组件1361的滑动操作(例如下滑)，如图13E所示，电子设备100可以通过用户在该卡片组件展示界面1360上音乐组件1361的滑动操作(例如下滑)，将该音乐组件1362堆叠显示在音乐组件1143的上层，将音乐组件1363堆叠显示在音乐组件1361的上层。可选的，上述卡片组件展示界面中不同样式的卡片组件，不限于上下滚动显示，还可以左右切换显示。
在本申请实施例中，卡片组件在上述卡片组件中心界面中可以按照指定顺序排列显示。其中，电子设备100可以将出厂时已安装应用对应的卡片组件优先显示在该卡片组件中心界面的最顶部。
可选的，电子设备100可以将最近预设时间段内安装的应用对应的卡片组件显示在该卡片组件中心界面的最顶部。
可选的，电子设备100可以基于应用的历史使用数据(例如使用时间、使用频次和地点场景等等中的一个或多个)，在上述卡片组件中心界面中对各应用类型的卡片组件进行排序。例如，使用时间长的应用对应的卡片组件显示在该卡片组件中心界面的偏顶部，使用时间短的应用对应的卡片组件显示在该卡片组件中心界面的偏底部。又例如，使用频次多的应用对应的卡片组件显示在该卡片组件中心界面的偏顶部，使用频次少的应用对应的卡片组件显示在该卡片组件中心界面的偏底部。
在一些实施例中，电子设备100上一些系统应用在桌面上没有对应的应用图标，但这些系统应用对应有卡片组件，例如电量组件、健康使用设备组件，等等。电子设备100可以将该通过用户在设置应用图标的滑动操作(例如上滑)，暂时显示出该系统应用的卡片组件。可选的，电子设备100可以将该系统应用的卡片组件显示在上述卡片组件中心界面中，并支持用户将上述卡片组件中心界面中该系统应用的卡片组件，添加到桌面上。
在一些应用场景中，当电子设备100的桌面上应用图标之间的间隔距离有变化时，桌面上显示的卡片组件的大小也会跟随应用图标之间的间隔距离的变化而变化。
示例性的，如图14A所示，电子设备100的显示屏可以折叠，当电子设备100处于折叠状态时，电子设备100的显示屏可以被划分为第一屏和第二屏，电子设备100可以在第一屏上桌面的界面1410。该界面1410上显示包括有一个放置有应用图标的页面该页面包括多个应用图标(例如，浏览器应用图标、股票应用图标、计算器应用图标、语音助手应用图标、视频应用图标、天气应用图标、主题应用图标、地图应用图标、图库应用图标、备忘录应用图标、设置应用图标，等等)。其中，该页面还可以包括有应用夹图标(例如应用夹1的图标312)，该应用夹图标可用于触发电子设备100显示出一个或多个应用图标。可选的，该放置 有应用图标的页面的下方还显示包括有页面指示符1413，以表明桌面上页面总数，以及当前显示的页面与其他页面的位置关系。例如，桌面的界面1410可以包括有四个页面，该页面指示符中的黑点在最左边，可以表示当前显示页面为四个页面中最左边的一个页面。进一步可选的，页面指示符的下方可以有托盘(dock)区域，该dock区域中可以包括有一个或多个托盘图标(例如，拨号应用图标、信息应用图标、联系人应用图标、相机应用图标等等)，该dock区域中的一个或多个托盘图标可以在页面切换时保持显示。
电子设备100可以在接收到用户在天气应用图标上的滑动操作(例如上滑)后，在该桌面的界面1410上暂时显示出天气组件1411。该天气组件1411覆盖显示在天气应用图标、计算器应用图标、语音助手应用图标和主题应用图标上。可选的，电子设备100在显示出该天气组件1411的同时，还可以显示出该天气组件1411对应的固定控件1412，该固定控件1412可用于触发电子设备100将该天气组件1411添加到桌面的空白区域。
如图14B所示，当电子设备100的显示屏从折叠态切换到展开态时，电子设备100可以在显示屏上显示出桌面的界面1420。其中，该界面1420中的界面元素与上述图14A所示的界面1410中的界面元素相同。其中，由于该界面1420中应用图标之间的间隔距离变大了，该音乐组件1411的尺寸也变大了，但是该音乐组件1411仍然覆盖显示在上述天气应用图标、计算器应用图标、语音助手应用图标和主题应用图标上。
可选的，当电子设备100的显示屏从折叠态切换到展开态时，电子设备100可以将折叠态下第一屏显示的桌面中相邻两个放置有应用图标的页面合成为一页，显示在显示屏上。
示例性的，如图14C所示，当电子设备100的显示屏从折叠态切换到展开态时，电子设备100可以在显示屏显示出桌面的界面1430。其中，该桌面的界面1430包括有上述图14A所示界面1410中显示的界面元素以及该界面1410所显示页面的右边一个页面中的界面元素。例如，上述界面1410所显示页面的右边一个页面中可以显示有查找设备应用、游戏中心应用、应用市场应用、阅读应用、运动健康组件和时钟组件等等。其中，由于电子设备100的显示屏从折叠态切换至展开态时，桌面的界面1430上非dock区的应用图标之间的间隔距离不变，因此，音乐组件1411的尺寸也不变，且音乐组件1411仍然覆盖显示在上述天气应用图标、计算器应用图标、语音助手应用图标和主题应用图标上。
在一些应用场景中，电子设备100在通过用户在第一应用的图标上的滑动操作(例如上滑)暂时显示出第一应用对应的卡片组件后，可以将第一应用对应的卡片组件添加到指定快捷界面(例如服务中心界面)中。其中，电子设备100在可以桌面上通过指定输入，触发显示出该指定快捷界面。这样，可以方便用户在指定快捷界面上快速查看第一应用对应的卡片组件。
示例性的，如图15A所示，电子设备100可以显示出桌面的界面1510。其中，该界面1510上显示有天气应用图标1511。针对该界面1510中未详述的部分，可以参考前述图6C所示界面620的文字说明，在此不再赘述。
电子设备100可以接收到用户针对该桌面的滑动操作(例如，从桌面的左底部斜向右顶部滑动)，响应于该滑动操作，电子设备100可以显示出15B所示的服务中心界面1520。
如图15B所示，该服务中心界面1520显示包括有一个或多个服务选项以及已添加到该服务中心界面的卡片组件。该一个或多个服务选项包括有快递服务选项、音乐服务选项、闹钟服务选项等等。已添加到该服务中心界面的卡片组件包括有运动健康组件、音乐组件、时钟组件、电量组件等等。
如图15C所示，电子设备100可以接收用户针对该天气应用图标1511的滑动操作(例如单击)，响应于该滑动操作，如图15D所示，电子设备100可以暂时显示出天气组件1512。
如图15D所示，该天气组件1512可以覆盖显示在天气应用图标和计算器应用图标上。电子设备100可以接收用户针对该天气组件1512的长按操作，响应于该长按操作，电子设备100可以显示如图15E所示的快捷菜单1513。
如图15E所示，该快捷菜单1513显示包括有添加到服务中心控件1514。可选的，该快捷菜单1513中还显示包括有其他功能控件，例如，跨设备使用控件、分享控件、添加到桌面控件、移除控件等等。其中，该添加到服务中心控件1514可用于触发电子设备100将该天气组件1512添加到服务中心界面。该跨设备使用控件可用于触发电子设备100将该天气组件1512提供给其他设备使用。该分享控件可用于触发电子设备100将该天气组件1512中显示的信息分享给其他设备。该桌面添加控件可用于触发电子设备100将该天气组件1512添加到桌面上的空白区域。
如图15F所示，当电子设备100接收到用户针对上述添加到服务中心控件1514的输入(例如单击)后，电子设备再次显示出服务中心界面1520时，电子设备100可以在该服务中心界面1520上显示出该天气组件1512。
下面介绍本申请实施例中提供的一种卡片组件的显示方法。
图16示出了本申请实施例中提供的一种卡片组件的显示方法的流程示意图。
如图16所示，该方法包括：
S1601、电子设备显示桌面的第一界面，第一界面包括第一应用的图标。
示例性的，第一界面可以为上述图4A所示桌面的界面310，第一应用的图标可以是桌面上放置有应用图标的页面中的图标(例如，天气应用图标311等等)，其中，也可以是dock区域中的图标(例如拨号应用图标313)。第一界面也可以是上述图4F所示打开桌面上应用文件夹(例如应用夹1)显示出的界面420，第一应用的图标可以是针对该应用文件夹中包括的应用图标(例如音乐应用图标421)。具体内容，可以参考前述实施例，在此不再赘述。
S1602、电子设备接收对第一应用的图标的第一滑动操作。
S1603、响应于第一滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件。其中，第一卡片组件包括有第一应用中第一功能的第一展示信息。
示例性的，例如，第一应用可以是天气应用，第一卡片组件可以是上述图4B所示的天气组件411。又例如，第一应用可以是拨号应用，第一卡片组件可以是上述图4C所示的拨号组件413。又例如，第一应用可以是音乐应用，第一卡片组件可以是上述图4G中所示的音乐组件422，等等。具体内容，可以参考前述实施例，在此不再赘述。
S1604、当电子设备接收到针对第一界面上第一区域的第一输入时，电子设备不再显示第一卡片组件。其中，第一区域与第一卡片组件的显示区域不重叠。
其中，该第一应用对应的第一卡片组件的显示可以是暂时的，例如当电子设备接收到针对桌面上第一卡片组件之外其他区域的输入时，电子设备可以关闭显示该暂时显示的第一卡片组件。这样，可以方便用户快速查看某一应用的卡片组件，也可以快速关闭该暂时显示的卡片组件。
在一种可能的实现方式中，当电子设备接收到第二输入时，电子设备将第一卡片组件添 加显示到桌面。其中，当卡片组件固定添加到桌面的空白区域后，若电子设备接收到用户针对其他空白区域的输入时，这样，可以方便用户快速从应用图标找到该应用图标对应的卡片组件，也可以快速的将暂时显示出的卡片组件，固定添加至桌面上。
其中，电子设备可以将第一卡片组件添加显示到桌面的第一界面上的空白区域。其中，在第一卡片组件被添加显示到第一界面上的空白区域之前，第一界面上的空白区域不显示有应用图标、应用文件夹、卡片组件、文字等等界面元素。
示例性的，第一界面可以是如上述图6B所示桌面的界面610，第一卡片组件可以是天气组件611，该天气组件611可以被添加到该界面610的空白区域。具体内容，可以参考前述实施例，在此不再赘述。
可选的，电子设备可以将第一卡片组件添加显示到桌面的第二界面上的空白区域；其中，在第一卡片组件被添加显示到第二界面上的空白区域之前，第二界面上的空白区域不显示有应用图标、应用文件夹、卡片组件、文字等等界面元素。
示例性的，桌面的第二界面可以是上述图6D所示桌面显示最后一页放置有应用图标的页面时的界面630。具体内容，可以参考前述实施例，在此不再赘述。
可选的，电子设备可以在桌面上新建第三界面，并将第一卡片组件添加显示到第三界面。
其中，第三界面可以新建在第一界面的左一页或者新建在第一界面的右一页，等等不限定。示例性的，第三界面可以为如上述图6E所示的界面640。
在一种可能的实现方式中，电子设备在响应于第一滑动操作，在桌面的第一界面显示第一卡片组件的同时，还可以显示第一卡片组件对应的第一固定控件。该第二输入可以为针对第一固定控件的输入。具体内容，可以参考前述图6A-图6E所示实施例，在此不再赘述。
在一种可能的实现方式中，电子设备通过接收到的第二输入将第一卡片组件添加显示到桌面的过程可以是：电子设备可以接收到针对第一卡片组件的第一拖动操作；当电子设备通过第一拖动操作将第一卡片组件拖动至桌面上第二区域时，电子设备将第一卡片组件添加显示到桌面上的第二区域。这样，用户可以通过一个操作，将暂时显示的卡片组件添加到桌面上的指定放置位置，简化了用户添加卡片组件到桌面上指定放置位置的操作步骤。
具体内容，可以参考前述图7A-图7C所示实施例，在此不再赘述。
其中，电子设备可以在第一拖动操作的过程中，还可以在所述桌面上显示撤销热区。当电子设备通过第一拖动操作将第一卡片组件拖动至所述撤销热区时，电子设备撤销将第一卡片组件添加显示到桌面。这样，可以在用户通过拖动操作将该暂时显示的卡片组件添加至桌面的过程中有撤销返回的机会。
具体内容，可以参考前述图7H-图7I所示实施例，在此不再赘述。
在一种可能的实现方式中，当第二区域中显示有第五卡片组件时，电子设备在可以在第二区域显示第二卡片堆叠组件，第二卡片堆叠组件包括有第一卡片组件和第五卡片组件。这样，可以将多个卡片组件合成一个卡片堆叠组件放置到桌面上，节约了桌面的使用空间。
示例性的，第一卡片组件可以是上述图7D所示的天气组件721、第五卡片组件可以是上述图7D所示实施例中的时钟组件722，第二卡片堆叠组件可以是上述图7F或图7G所示实施例中的卡片堆叠组件731。具体内容，可以参考前述图7D-图7G所示实施例，在此不再赘 述。
在一种可能的实现方式中，电子设备通过接收到的第二输入将第一卡片组件添加显示到桌面的过程可以是：电子设备接收到针对第一卡片组件的第一长按操作；响应于第一长按操作，电子设备显示第二固定控件；电子设备接收到针对第二固定控件的第四输入；响应于第四输入，电子设备将第一卡片组件添加显示到桌面。
示例性的，第一卡片组件可以是上述图8B所示实施例中的天气组件811，第二固定控件可以上述图8B所示实施例中的桌面添加控件813。具体内容，可以参考前述图8A-图8C实施例，在此不再赘述。
在一种可能的实现方式中，当电子设备接收针对第一卡片组件的第三输入时，电子设备显示与第一应用中第一功能对应的第四界面。这样，用户可以直接通过第一卡片组件触发电子设备直接跳转显示第一应用中第一功能的界面，简化了用户打开第一功能的界面的操作。
示例性的，第一应用可以音乐应用，第一功能可以是音乐应用中的音乐播放功能，第四界面可以上述图4K所示实施例中的音乐播放功能对应的音乐播放界面450。具体内容，可以参考前述实施例，在此不再赘述。
在一种可能的实现方式中，第一卡片组件上还显示包括有第一控件。电子设备接收到针对第一控件的第五输入。响应于所述第五输入，电子设备控制第一应用执行与第一控件对应的第一控制操作。这样，用户直接在第一卡片组件上控制第一应用执行一些控制操作，而不用先调出这些控制操作的控制界面，再触发第一应用执行这些控制操作，简化了用户的操作。
示例性的，第一卡片组件可以是上述图4D所示实施例中的拨号组件413，第一控件可以是上述联系人“爸爸”拨号控件415。该第一控制操作可以是针对联系人“爸爸”的拨号操作。具体内容，可以参考前述实施例，在此不再赘述。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备可以接收将显示在桌面上第二区域的第一卡片组件拖动至桌面上第三区域的第二拖动操作。响应于第二拖动操作，电子设备将第一卡片组件从第二区域放置到第三区域。这样，可以方便用户调整卡片组件在桌面上的显示位置，提高用户体验。
具体内容，可以参考前述图9A-图9C所示实施例，在此不再赘述。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备接收针对第一卡片组件的第三拖动操作。电子设备在第三拖动操作的过程中，在桌面上显示删除热区，第三拖动操作的结束位置在删除热区。响应于第三拖动操作，电子设备将第一卡片组件从桌面上移除。这样，可以在用户不想要桌面上已添加的卡片组件时，手动将该卡片组件删除。
具体内容，可以参考前述图9D-图9E所示实施例，在此不再赘述。
在一种可能的实现方式中，在电子设备将第一卡片组件添加显示到桌面后，电子设备可以接收针对第一卡片组件的第二长按操作。响应于第二长按操作，电子设备可以显示第一卡片组件对应的移除控件。在电子设备接收针对移除控件的第六输入后，电子设备将第一卡片 组件从桌面移除。这样，可以在用户不想要桌面上已添加的卡片组件时，手动将该卡片组件删除。
具体内容，可以参考前述图9F-图9H所示实施例，在此不再赘述。
在一种可能的实现方式中，在电子设备在第一应用的图标周围区域悬浮显示第一应用对应的第一卡片组件后，电子设备在接收到用户将第一应用对应的第一卡片组件切换为第二卡片组件的第七输入后，显示出桌面的第一界面。电子设备接收到针对第一应用的图标的第二滑动操作。响应于第二滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第二卡片组件，第二卡片组件与第一卡片组件的样式不同。这样，可以让用户选择自己喜欢样式的卡片组件。
具体内容，可以参考前述图10A-图10F所示实施例，在此不再赘述。
在一种可能的实现方式中，在电子设备在第一应用的图标周围区域悬浮显示第一应用对应的第一卡片组件后，电子设备在接收到用户将第一卡片组件中显示的第一展示信息切换为第二展示信息的第八输入后，显示出桌面的第一界面。电子设备接收到针对第一应用的图标的第三滑动操作；响应于第三滑动操作，电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件，并在第一卡片组件上显示第二展示信息。这样，可以方便用户切换卡片组件中的显示内容。
具体内容，可以参考前述图12A-图12G所示实施例，在此不再赘述。
在一种可能的实现方式中，上述第一界面上还包括应用文件夹，应用文件夹中包括有第二应用的图标和第三应用的图标，电子设备可以接收到针对应用文件夹的第四滑动操作。响应于第四滑动操作，电子设备在应用文件夹的周围悬浮显示与应用文件夹对应的第一卡片堆叠组件，第一卡片堆叠组件包括有与第二应用对应的第三卡片组件和与第三应用对应的第四卡片组件。其中，第三卡片组件和第四卡片组件可以在第一卡片堆叠组件上切换显示。这样，可以节约界面的使用空间。
示例性的，第一界面可以上述图4H所示的桌面的界面430，应用文件夹可以是该界面430中的应用夹2，第二应用可以是应用夹2中的时钟应用，第三应用可以是应用夹2中的音乐应用。第一卡片堆叠组件可以是上述图4I或图4J所示的卡片堆叠组件440，第三卡片组件可以是时钟组件443，第四卡片组件可以是音乐组件444。具体内容，可以参考前述图4H-图4K所示实施例，在此不再赘述。
在本申请实施例中，当电子设备在第一应用的图标周围悬浮显示与第一应用对应的第一卡片组件时，电子设备不再显示被第一卡片组件覆盖的应用图标的应用名称，和/或，被第一卡片组件覆盖的应用图标。具体内容，可以参考上述图5A-图5N所示实施例，在此不再赘述。
通过本申请实施例提供了一种卡片组件的显示方法。电子设备可以响应于用户在桌面上第一应用的图标上的滑动操作(例如向上滑动)，暂时在第一应用的图标周围悬浮显示该第一应用对应的卡片组件，该卡片组件上显示有该第一应用中第一功能的展示信息。当电子设备接收到针对桌面上该卡片组件之外其他区域的输入时，电子设备可以关闭显示该暂时显示的卡片组件。其中，电子设备也可将暂时显示的卡片组件，添加显示在桌面上的指定区域。这 样，可以在桌面上通过用户的一个输入操作快速触发电子设备显示出某一应用对应的卡片组件，方便用户快速查看卡片组件，也不打乱桌面上应用图标或卡片组件的显示布局。
以上各个实施例可以单独使用，也可以相互结合使用，以实现不同的技术效果。
上述本申请提供的实施例中，从电子设备作为执行主体的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能，电子设备可以包括硬件结构和/或软件模块，以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行，取决于技术方案的特定应用和设计约束条件。
本申请实施例还提供了一种电子设备，包括：显示屏、处理器、存储器、应用程序以及计算机程序。上述各器件可以通过一个或多个通信总线连接。其中，该一个或多个计算机程序被存储在上述存储器中并被配置为被该一个或多个处理器执行，该一个或多个计算机程序包括指令，上述指令可以用于使电子设备执行上述各实施例中界面显示方法的各个步骤。
示例性的，上述处理器具体可以为图1所示的处理器110，上述存储器具体可以为图1所示的内部存储器120和/或与电子设备连接的外部存储器，上述显示屏具体可以为图1所示的显示屏130，本申请实施例对此不做任何限制。
另外，本申请实施例还提供了一种电子设备上的图形用户界面(graphical user interface，GUI)，该图形用户界面具体包括电子设备在执行上述各方法实施例时显示的图形用户界面。
以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid State Disk(SSD))等。在不冲突的情况下，以上各实施例的方案都可以组合使用。

Claims (20)

  1. 一种卡片组件的显示方法，其特征在于，包括：
    电子设备显示桌面的第一界面，所述第一界面包括第一应用的图标；
    所述电子设备接收对第一应用的图标的第一滑动操作；
    响应于所述第一滑动操作，所述电子设备在所述第一应用的图标周围悬浮显示与所述第一应用对应的第一卡片组件，所述第一卡片组件包括有所述第一应用中第一功能的第一展示信息；
    当所述电子设备接收到针对所述第一界面上第一区域的第一输入时，所述电子设备不再显示所述第一卡片组件，其中，所述第一区域与所述第一卡片组件的显示区域不重叠。
  2. 根据权利要求1所述的方法，其特征在于，包括：
    当所述电子设备接收到第二输入时，所述电子设备将所述第一卡片组件添加显示到所述桌面。
  3. 根据权利要求2所述的方法，其特征在于，所述电子设备将所述第一卡片组件添加显示到所述桌面，具体包括：
    所述电子设备将所述第一卡片组件添加显示到所述桌面的第一界面上的空白区域，或所述桌面的第二界面上的空白区域；或，
    所述电子设备在所述桌面上新建第三界面，并将所述第一卡片组件添加显示到所述第三界面。
  4. 根据权利要求1-3任一项所述的方法，其特征在于，包括：
    当所述电子设备接收到针对所述第一卡片组件的第三输入时，所述电子设备显示与所述第一应用中所述第一功能对应的第四界面。
  5. 根据权利要求2或3所述的方法，其特征在于，所述方法还包括：
    响应于所述第一滑动操作，所述电子设备显示所述第一卡片组件对应的第一固定控件；其中，所述第二输入为针对所述第一固定控件的输入。
  6. 根据权利要求2所述的方法，其特征在于，当所述电子设备接收到第二输入时，所述电子设备将所述第一卡片组件添加显示到所述桌面，具体包括：
    所述电子设备接收到针对所述第一卡片组件的第一拖动操作；
    当所述电子设备通过所述第一拖动操作将所述第一卡片组件拖动至所述桌面上第二区域时，所述电子设备将所述第一卡片组件添加显示到所述桌面上的第二区域。
  7. 根据权利要求2或3所述的方法，其特征在于，当所述电子设备接收到第二输入时，所述电子设备将所述第一卡片组件添加显示到所述桌面，具体包括：
    所述电子设备接收到针对所述第一卡片组件的第一长按操作；
    响应于所述第一长按操作，所述电子设备显示第二固定控件；
    所述电子设备接收到针对所述第二固定控件的第四输入；
    响应于所述第四输入，所述电子设备将所述第一卡片组件添加显示到所述桌面。
  8. 根据权利要求1-7中任一项所述的方法，其特征在于，所述第一卡片组件上还显示包括有第一控件；所述方法还包括：
    所述电子设备接收到针对所述第一控件的第五输入；
    响应于所述第五输入，所述电子设备控制所述第一应用执行与所述第一控件对应的第一控制操作。
  9. 根据权利要求1-8中任一项所述的方法，其特征在于，在所述电子设备将所述第一卡片组件添加显示到所述桌面后，所述方法还包括：
    所述电子设备接收将显示在所述桌面上第二区域的所述第一卡片组件拖动至所述桌面上第三区域的第二拖动操作；
    响应于所述第二拖动操作，所述电子设备将所述第一卡片组件从所述第二区域放置到所述第三区域。
  10. 根据权利要求1-9中任一项所述的方法，其特征在于，在所述电子设备将所述第一卡片组件添加显示到所述桌面后，所述方法还包括：
    所述电子设备接收针对所述第一卡片组件的第三拖动操作；
    所述电子设备在所述第三拖动操作的过程中，在所述桌面上显示删除热区，所述第三拖动操作的结束位置在所述删除热区；
    响应于所述第三拖动操作，所述电子设备将所述第一卡片组件从所述桌面上移除。
  11. 根据权利要求6所述的方法，其特征在于，所述方法还包括：
    所述电子设备在所述第一拖动操作的过程中，在所述桌面上显示撤销热区；
    当所述电子设备通过所述第一拖动操作将所述第一卡片组件拖动至所述撤销热区时，所述电子设备撤销将所述第一卡片组件添加显示到所述桌面。
  12. 根据权利要求1-9中任一项所述的方法，其特征在于，在所述电子设备将所述第一卡片组件添加显示到所述桌面后，所述方法还包括：
    所述电子设备接收针对所述第一卡片组件的第二长按操作；
    响应于所述第二长按操作，所述电子设备显示所述第一卡片组件对应的移除控件；
    所述电子设备接收针对所述移除控件的第六输入；
    响应于所述第六输入，所述电子设备将所述第一卡片组件从所述桌面移除。
  13. 根据权利要求1-12中任一项所述的方法，其特征在于，在所述电子设备在所述第一应用的图标周围区域悬浮显示所述第一应用对应的第一卡片组件后，所述方法还包括：
    所述电子设备在接收到用户将所述第一应用对应的所述第一卡片组件切换为第二卡片组件的第七输入后，显示出所述桌面的第一界面；
    所述电子设备接收到针对所述第一应用的图标的第二滑动操作；
    响应于所述第二滑动操作，所述电子设备在所述第一应用的图标周围悬浮显示与所述第一应用对应的第二卡片组件，所述第二卡片组件与所述第一卡片组件的样式不同。
  14. 根据权利要求1-12中任一项所述的方法，其特征在于，在所述电子设备在所述第一应用的图标周围区域悬浮显示所述第一应用对应的第一卡片组件后，所述方法还包括：
    所述电子设备在接收到用户将所述第一卡片组件中显示的第一展示信息切换为第二展示信息的第八输入后，显示出所述桌面的第一界面；
    所述电子设备接收到针对所述第一应用的图标的第三滑动操作；
    响应于所述第三滑动操作，所述电子设备在所述第一应用的图标周围悬浮显示与所述第一应用对应的第一卡片组件，并在所述第一卡片组件上显示所述第二展示信息。
  15. 根据权利要求1-14中任一项所述的方法，其特征在于，所述第一界面上还包括应用文件夹，所述应用文件夹中包括有第二应用的图标和所述第三应用的图标，所述方法还包括：
    所述电子设备接收到针对所述应用文件夹的第四滑动操作；
    响应于所述第四滑动操作，所述电子设备在所述应用文件夹的周围悬浮显示与所述应用文件夹对应的第一卡片堆叠组件，所述第一卡片堆叠组件包括有与所述第二应用对应的第三卡片组件和与所述第三应用对应的第四卡片组件。
  16. 根据权利要求6所述的方法，其特征在于，所述电子设备将所述第一卡片组件添加显示到所述桌面上的第二区域，具体包括：
    当所述第二区域中显示有第五卡片组件时，所述电子设备在所述第二区域显示第二卡片堆叠组件，所述第二卡片堆叠组件包括有所述第一卡片组件和所述第五卡片组件。
  17. 根据权利要求1-16任一项所述的方法，其特征在于，所述方法包括：
    当所述电子设备在所述第一应用的图标周围悬浮显示与所述第一应用对应的第一卡片组件时，所述电子设备不再显示被所述第一卡片组件覆盖的应用图标的应用名称，和/或，被所述第一卡片组件覆盖的应用图标。
  18. 一种电子设备，其特征在于，包括：一个或多个处理器、显示屏、一个或多个存储器；其中，所述显示屏、一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述计算机程序代码包括计算机指令，当所述一个或多个处理器在执行所述计算机指令时，使得所述电子设备执行如权利要求1-17中任一项所述的方法。
  19. 一种计算机存储介质，包括计算机指令，其特征在于，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1-17中任一项所述的方法。
  20. 一种计算机程序产品，其特征在于，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行如权利要求1-17中任一项所述的方法。
PCT/CN2022/079357 2021-03-05 2022-03-04 一种卡片组件的显示方法、图形用户界面及相关装置 WO2022184173A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
EP22762634.8A EP4283454A1 (en) 2021-03-05 2022-03-04 Card widget display method, graphical user interface, and related apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110245839.1 2021-03-05
CN202110245839.1A CN115033140A (zh) 2021-03-05 2021-03-05 一种卡片组件的显示方法、图形用户界面及相关装置

Publications (1)

Publication Number Publication Date
WO2022184173A1 true WO2022184173A1 (zh) 2022-09-09

Family

ID=83118409

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/079357 WO2022184173A1 (zh) 2021-03-05 2022-03-04 一种卡片组件的显示方法、图形用户界面及相关装置

Country Status (3)

Country Link
EP (1) EP4283454A1 (zh)
CN (1) CN115033140A (zh)
WO (1) WO2022184173A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116483507A (zh) * 2023-06-21 2023-07-25 荣耀终端有限公司 连续操作方法及装置
CN116627293A (zh) * 2023-07-26 2023-08-22 荣耀终端有限公司 一种桌面内容整理方法及装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130007666A1 (en) * 2011-06-28 2013-01-03 Hon Hai Precision Industry Co., Ltd. Electronic device with touch screen device, method of moving function icon and computer readable storage media comprising computer executable instructions
CN102929479A (zh) * 2012-09-27 2013-02-13 东莞宇龙通信科技有限公司 应用图标的显示方法及通信终端
CN103034445A (zh) * 2012-12-13 2013-04-10 广东欧珀移动通信有限公司 一种移动终端设备自定义解锁界面的方法及移动终端设备
CN104142798A (zh) * 2013-05-10 2014-11-12 北京三星通信技术研究有限公司 启动应用程序的方法及触摸屏智能终端设备
US20200264742A1 (en) * 2010-04-28 2020-08-20 Huawei Device Co., Ltd. Method and apparatus for adding icon to interface of android system, and mobile terminal

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105117249B (zh) * 2015-08-20 2019-10-18 Oppo广东移动通信有限公司 一种android终端添加桌面插件的方法及装置
CN105930036A (zh) * 2016-05-05 2016-09-07 珠海市魅族科技有限公司 桌面插件添加方法和装置
CN107092421B (zh) * 2017-04-12 2020-03-27 广州三星通信技术研究有限公司 显示应用的控件的方法及装置
CN110221762A (zh) * 2019-04-28 2019-09-10 华为技术有限公司 一种展示桌面小工具的方法及电子设备
CN111966251B (zh) * 2020-02-11 2021-08-13 荣耀终端有限公司 卡片显示方法、电子设备及计算机可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200264742A1 (en) * 2010-04-28 2020-08-20 Huawei Device Co., Ltd. Method and apparatus for adding icon to interface of android system, and mobile terminal
US20130007666A1 (en) * 2011-06-28 2013-01-03 Hon Hai Precision Industry Co., Ltd. Electronic device with touch screen device, method of moving function icon and computer readable storage media comprising computer executable instructions
CN102929479A (zh) * 2012-09-27 2013-02-13 东莞宇龙通信科技有限公司 应用图标的显示方法及通信终端
CN103034445A (zh) * 2012-12-13 2013-04-10 广东欧珀移动通信有限公司 一种移动终端设备自定义解锁界面的方法及移动终端设备
CN104142798A (zh) * 2013-05-10 2014-11-12 北京三星通信技术研究有限公司 启动应用程序的方法及触摸屏智能终端设备

Also Published As

Publication number Publication date
EP4283454A1 (en) 2023-11-29
CN115033140A (zh) 2022-09-09

Similar Documents

Publication Publication Date Title
WO2021018067A1 (zh) 一种悬浮窗口的管理方法及相关装置
WO2021103981A1 (zh) 分屏显示的处理方法、装置及电子设备
CN110362244B (zh) 一种分屏方法及电子设备
CN113645351B (zh) 应用界面交互方法、电子设备和计算机可读存储介质
WO2020134869A1 (zh) 电子设备的操作方法和电子设备
WO2021000881A1 (zh) 一种分屏方法及电子设备
WO2021000804A1 (zh) 锁定状态下的显示方法及装置
WO2021036571A1 (zh) 一种桌面的编辑方法及电子设备
CN114461111B (zh) 启动功能的方法及电子设备
CN114706664A (zh) 跨设备任务处理的交互方法、电子设备及存储介质
CN114363462B (zh) 一种界面显示方法、电子设备及计算机可读介质
WO2022068483A1 (zh) 应用启动方法、装置和电子设备
WO2020238759A1 (zh) 一种界面显示方法和电子设备
CN109819306B (zh) 一种媒体文件裁剪的方法、电子设备和服务器
WO2021078032A1 (zh) 用户界面的显示方法及电子设备
WO2022184173A1 (zh) 一种卡片组件的显示方法、图形用户界面及相关装置
CN113452945A (zh) 分享应用界面的方法、装置、电子设备及可读存储介质
CN113746961A (zh) 显示控制方法、电子设备和计算机可读存储介质
WO2021190524A1 (zh) 截屏处理的方法、图形用户接口及终端
CN112637477A (zh) 一种图像处理方法及电子设备
WO2021037034A1 (zh) 一种应用状态切换方法及终端设备
CN113438366A (zh) 信息通知的交互方法、电子设备和存储介质
CN114173005A (zh) 一种应用布局控制方法及相关装置
CN113497888A (zh) 照片预览方法、电子设备和存储介质
WO2023160455A1 (zh) 删除对象的方法及电子设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 22762634

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2022762634

Country of ref document: EP

Effective date: 20230822

WWE Wipo information: entry into national phase

Ref document number: 18548837

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE