Card addition method and electronic device

Abstract

The present application relates to the technical field of terminals. Provided are a card addition method and an electronic device, so as to solve the problem of slow card addition efficiency. The method is applied to an electronic device, and comprises: displaying a first interface of an application, the first interface comprising a first functional component; receiving a first operation of a user on the first functional component; and in response to the first operation, displaying a second interface, and displaying a first card on the second interface, wherein the first card is a card corresponding to the first functional component and is used for displaying content corresponding to the first functional component, and the second interface and the first interface are interfaces of different applications. The present application is applied in the card addition process of electronic devices.

Description

Card Adding Methods and Electronic Devices

[0001] This application claims priority to Chinese patent application filed on June 20, 2024, with application number 202410800212.1 and entitled "Method for Adding Cards and Electronic Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of terminal technology, and in particular to a card adding method and an electronic device. Background Technology

[0003] Currently, most electronic devices (such as mobile phones) often use service cards (hereinafter referred to as cards) to provide users with lightweight services. For example, a shopping cart function card of a shopping application (APP) is displayed on the mobile phone interface. When the user selects the card, the electronic device directly jumps from the current interface to the corresponding shopping cart function interface.

[0004] However, adding cards to electronic devices is a cumbersome and inefficient process. Summary of the Invention

[0005] This application provides a card adding method and an electronic device that associates functional components with cards. It can quickly add cards corresponding to functional components based on the user's operation of the functional components in the application interface, visualize the process of adding cards corresponding to the first functional component on the electronic device, improve card adding efficiency, and enhance visual and user experience.

[0006] To achieve the above objectives, this application adopts the following technical solution:

[0007] In a first aspect, this application provides a card adding method applied to an electronic device. The method includes: displaying a first interface of an application, the first interface including a first functional component; receiving a first operation from a user on the first functional component; responding to the first operation, displaying a second interface and displaying a first card on the second interface; the first card is a card corresponding to the first functional component and is used to display content corresponding to the first functional component; the second interface and the first interface are interfaces of different applications.

[0008] In this application, when the electronic device receives a user's first operation on a first functional component in the first interface of the application, it quickly responds based on the association between the functional component and the card, adding the first card corresponding to the first functional component to the second interface. This speeds up the card adding process and improves card adding efficiency.

[0009] According to the first aspect, the first functional component is a functional component capable of providing cards. A functional component is an independent component with a specific function in the application, and each functional component can implement one or more functions.

[0010] According to the first aspect, or any implementation of the first aspect above, before displaying the first card, the method further includes: displaying an animation effect of a screenshot of the first functional component moving from a first position to a second position on the second interface; wherein the first position is the same as the display position of the first functional component in the first interface; and the second position is the display position of the first card to be displayed in the second interface.

[0011] In this application, the screenshot of the first functional component is a static image and does not contain any controls. Moving the screenshot from the first position to the second position enhances the user's interactive experience, vividly demonstrating the card-adding operation through animation. This allows users to clearly see the card-adding process, maintains visual continuity of the interface, guides the user's attention to the second position, helps the user find the required card more quickly, and improves the user's operational efficiency. Moreover, moving the static image can save system energy and performance, avoiding resource waste.

[0012] According to the first aspect, or any implementation of the first aspect above, the method further includes: determining a second position in a second interface based on the card size of the first card.

[0013] According to the first aspect, or any implementation of the first aspect above, the style of the first card is the style selected by the user from the candidate styles, or a pre-set style, or the style with the highest priority among the candidate styles; the second interface is the interface selected by the user for displaying the first card, or a pre-set interface for displaying the first card.

[0014] In some embodiments, in response to a first operation, the electronic device determines the current display position of a first functional component, a screenshot of the first functional component, card information of a first card, and a second interface. The electronic device determines the current display position as a first position, and determines a second position based on the card size in the second interface and the card information of the first card. The electronic device moves the screenshot of the first functional component from the first position to the second position in the second interface, and displays the first card at the second position.

[0015] The current display position of the first functional component is its position on the application's first interface when the user performs the first operation on it. The screenshot of the first functional component is a screenshot image of the first functional component captured by the electronic device when the user performs the first operation on it. The card information of the first card includes its card name, card identifier, card description, and displayed content. The displayed content includes interface elements (such as card name, card data, interactive controls, etc.), card style (such as layout information and display style of interface elements), and card size.

[0016] In this application, the first card contains various controls for users to trigger or operate. After the screenshot is moved, the screenshot is replaced with a card, allowing users to access more functions. This enhances the user's real-time interactive experience, provides richer functionalities and operation options, and improves user comfort.

[0017] According to the first aspect, or any of the above implementations of the first aspect, the priority is determined based on the similarity between the card style and the functional component style.

[0018] In this application, card priority is determined based on the similarity between card style and functional component style; cards with higher similarity have higher priority. When adding cards, similarity between functional component style and card style ensures visual consistency and improves user experience.

[0019] According to the first aspect, or any implementation of the first aspect above, the first operation includes a first trigger operation and a second trigger operation, receiving a first operation from the user on the first functional component, including: receiving a first trigger operation from the user on the first functional component, the first trigger operation being used to trigger the display of an option box of the first functional component; and receiving a second trigger operation from the user on the option box.

[0020] In this application, the options boxes simply and directly inform users of the operations that can be performed, requiring no learning and allowing users to quickly select options; the options boxes also reduce the risk of accidental operation, making it easier for users to understand and operate, and have good interface consistency and applicability.

[0021] According to the first aspect, or any implementation of the first aspect above, before displaying the second interface and displaying the first card on the second interface, the method further includes: displaying a preview interface, the preview interface including at least one candidate style of the card corresponding to the first functional component.

[0022] In some embodiments, the user performs a third trigger operation in the preview interface, and the electronic device responds to the third trigger operation by adding a card corresponding to the first functional component according to the style selected by the user from the candidate styles displayed in the preview interface.

[0023] In this application, the preview interface can intuitively display the card styles corresponding to the first functional component, helping users better understand and select card styles. This allows users to choose styles that meet their aesthetic and functional needs, improving user experience and satisfying diverse user requirements. Moreover, the intuitive display of card images in the preview interface can reduce misunderstandings or unclear points in users' understanding of card styles, improving the effectiveness of interface design and reducing unnecessary subsequent modifications or adjustments.

[0024] According to the first aspect, or any implementation of the first aspect above, the electronic device includes the association between functional components and cards.

[0025] In some embodiments, the association between functional components and cards includes both functional component information and card information. That is, when a functional component and a card are associated, the information of the functional component and the information of the card are also associated. Functional component information includes the functional component name, functional component identifier, function description, input parameters, output results, and display content. The display content includes interface elements (such as function name, function data, interactive controls, etc.), component styles (such as layout information and display styles of interface elements), and component size. Card information includes the card name, card identifier, card description, and display content. The display content includes interface elements (such as card name, card data, interactive controls, etc.), card styles (such as layout information and display styles of interface elements), and card size.

[0026] In some embodiments, cards are used to display content corresponding to functional components.

[0027] In some embodiments, the association between functional components and cards is established through a MenuItem component. This MenuItem component provides the ability to associate functional components with cards within the application. The MenuItem component provides card-related shortcuts to functional components (such as creating card menu options within functional components), allowing users to quickly trigger card-related functions within the application's functional components.

[0028] In this application, the electronic device establishes an association between functional components and cards based on the MenuItem component. By embedding card-related menu options within the functional components, it enables quick access and direct operation, significantly improving user efficiency and smoothness. It also enhances card adding efficiency, eliminating the need for multiple switching or searching within the interface. Users can complete tasks more quickly, reducing operational steps and time costs, thus improving the user experience.

[0029] According to the first aspect, or any implementation of the first aspect above, the electronic device further includes a card management service; in response to the first operation, displaying a second interface and displaying a first card on the second interface includes: in response to the first operation, the card management service obtains card information corresponding to the first functional component based on the association between the functional component and the card; the card management service sends the card information to the application corresponding to the second interface; the application corresponding to the second interface displays the second interface and displays the first card on the second interface based on the card information.

[0030] According to the first aspect, or any implementation of the first aspect above, the electronic device further includes a card management service; the animation of a screenshot of the first functional component moving from a first position to a second position is displayed on the second interface, including: in response to the first operation, the card management service determines the card information of the first card, the current display position of the first functional component, and the screenshot of the first functional component according to the stored association relationship between the functional component and the card; the card management service sends the card information of the first card, the current display position of the first functional component, and the screenshot of the first functional component to the application corresponding to the second interface; the application corresponding to the second interface determines the current display position of the first functional component as the first position when the screenshot of the first functional component is displayed on the second interface, and displays the animation of the screenshot of the first functional component moving from the first position to the second position on the second interface.

[0031] According to the first aspect, or any of the above implementations of the first aspect, the second interface is either the desktop interface or the interface of the negative one screen.

[0032] In some embodiments, the second interface may also be the interface of an application that can display cards in an electronic device (such as an activity center interface, a status bar interface, etc.).

[0033] In a second aspect, this application provides a card adding device, which includes a processor and a memory coupled to the processor. The memory is used to store computer-readable instructions, and when the processor reads the computer-readable instructions from the memory, the card adding device causes the card adding device to perform the method as described in the first aspect and any embodiment of the first aspect.

[0034] Thirdly, this application provides a card adding system, the card adding system comprising: a processor and a memory coupled to the processor, the memory being used to store computer-readable instructions, wherein when the processor reads the computer-readable instructions from the memory, the card adding system causes the card adding system to perform the method as described in the first aspect and any embodiment of the first aspect.

[0035] Fourthly, this application provides an electronic device comprising: a processor and a memory coupled to the processor, the memory storing computer program code including computer instructions, wherein when the processor reads the computer instructions from the memory, the electronic device performs the method as described in the first aspect and any embodiment of the first aspect.

[0036] Fifthly, this application provides a chip system including at least one processor and at least one interface circuit. The at least one interface circuit is used to perform transceiver functions and send instructions to the at least one processor. The at least one processor executes the instructions and performs the method as described in the first aspect and any embodiment of the first aspect.

[0037] In a sixth aspect, this application provides a computer-readable storage medium including a computer program or instructions that, when executed on a computer, cause the computer to perform a method as described in the first aspect and any one of the embodiments of the first aspect.

[0038] In a seventh aspect, this application provides a computer program product comprising: a computer program or instructions that, when executed on a computer, cause the computer to perform a method as described in the first aspect and any one of the embodiments of the first aspect.

[0039] The technical effects corresponding to any implementation method of aspects two through seven, and all other aspects, can be found in the first aspect and the technical effects corresponding to any implementation method of the first aspect mentioned above, and will not be repeated here. Attached Figure Description

[0040] Figure 1 is a schematic diagram of a card in an electronic device provided in an embodiment of this application;

[0041] Figure 2 is a schematic diagram of the card implementation principle in the electronic device provided in the embodiment of this application;

[0042] Figure 3 is a schematic diagram of the process of adding a card in the related technology provided in the embodiments of this application;

[0043] Figure 4 is a schematic diagram of the structure of the electronic device provided in an embodiment of this application;

[0044] Figure 5 is a schematic diagram of the operating system architecture of the electronic device provided in the embodiments of this application;

[0045] Figure 6 is a schematic diagram of a card adding scenario provided in an embodiment of this application;

[0046] Figure 7 is a flowchart illustrating the card adding method provided in an embodiment of this application;

[0047] Figure 8 is a schematic diagram of a card adding scenario provided in an embodiment of this application;

[0048] Figure 9 is a schematic diagram of the card adding scenario provided in the embodiment of this application;

[0049] Figure 10 is a schematic diagram of a card-adding scenario provided in an embodiment of this application;

[0050] Figure 11 is a schematic diagram of the card adding device provided in an embodiment of this application;

[0051] Figure 12 is a schematic diagram of the chip system provided in an embodiment of this application. Detailed Implementation

[0052] The technical solutions of the embodiments of this application are described below with reference to the accompanying drawings. In the description of the embodiments of this application, the terminology used in the following embodiments is for the purpose of describing specific embodiments only and is not intended to be a limitation of this application. As used in the specification and appended claims of this application, the singular expressions “a,” “an,” “the,” “the,” “the,” and “this” are intended to include expressions such as “one or more,” unless the context clearly indicates otherwise. It should also be understood that in the following embodiments of this application, “at least one” and “one or more” refer to one or more (including two).

[0053] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized. The term "connection" includes direct connections and indirect connections, unless otherwise stated. "First" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated.

[0054] In the embodiments of this application, the words "exemplarily" or "for example" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplarily" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design solutions. Specifically, the use of the words "exemplarily" or "for example" is intended to present the relevant concepts in a specific manner.

[0055] To better understand the technical solution of this application, the technical terms involved in this application will be explained first.

[0056] 1. Meta-services (feature abilities, FAs) are a novel service delivery method and a new type of application. Meta-services are characterized by independent entry points and no installation required, providing users with one or more convenient services. An app's functionality can be implemented by multiple FAs, with different FAs used to perform different functions. For example, a shopping app might have FAs for product browsing, shopping cart functionality, and payment functionality, etc.

[0057] 2. Service cards, also known as "cards," are a form of interface representation in Software Architecture (FA), providing a more granular, atomic service capability than apps. Cards, in an interactive format, directly display the services or content that users care about most on the electronic device's interface (such as the desktop, negative one screen, activity center interface, etc.), enabling convenient access to services through lightweight interaction. Cards can also be understood as extended display components of apps, placing important information, services, or operations from the front of the app. Users can tap the card to jump to the corresponding app or a specific service interface within the app, thus achieving direct service access and reducing the number of experience layers.

[0058] The cards are typically rounded rectangles, similar to credit cards, but other shapes are also possible. Optionally, each app can configure cards as needed. An app can configure at least one card. In some scenarios, the card may display one or more functional controls to allow users to perform related operations on the card.

[0059] The cards can be 1x1, 1x2, 2x2, 2x4, 4x4, or 6x4 in size. 1x1 can represent the size of an app icon on an electronic device's home screen. For example, each screen on an electronic device's home screen can hold 4x5 or 4x6 app icons.

[0060] In some scenarios, cards can also be called widgets, small components, window gadgets, etc. The embodiments of this application do not limit the form of cards.

[0061] For example, referring to Figure 1, the electronic device is a mobile phone, and different cards such as card 101, card 102, card 103, and card 104 are displayed on the phone's desktop. Card 101 corresponds to the music playback function of the third-party app "XX Music," and can display the currently playing music, the current playback progress, or control functions such as switching music, pausing music, and adjusting volume. Card 102 corresponds to the multi-day weather forecast function of the system app "Weather," and can display the current weather conditions and the weather conditions for the next few days. Card 103 corresponds to the third-party app "XX Map," and can display an electronic map, the user's current location, and search controls for searching geographical locations. Card 104 corresponds to the system app "Health," and can display the user's current step count and exercise duration.

[0062] Referring to Figure 2, this is a schematic diagram illustrating the card implementation principle in an electronic device. The electronic device includes a card user 201, a card management service 202, and a card provider 203. Communication connections exist between the card user 201, the card management service 202, and the card provider 203.

[0063] In this system, the card user 201 is used to display cards. Typically, the card user 201 can be a user interface (UI) or system application of an electronic device, such as the desktop, the negative one screen, or the activity center. The card user 201 interacts with the card management service 202 to manage operations such as adding, deleting, and updating cards. For example, when a user adds a card to their phone's desktop, the desktop responds to the user's action by determining the target display position of the card based on the available space on the desktop and the card size, and then adds the card to that target display position.

[0064] The card management service 202 is used to manage cards. It is a resident agent service provided by the system to manage cards added to the system. The card management service 202 has capabilities such as managing cards, using cards, and periodically updating cards. For example, it can interact with card provider 203 to obtain card information; based on this information, it can perform management operations such as creating, storing, updating, and deleting cards. It can also interact with card user 201, providing stored card information for user use (such as querying or adding cards). Furthermore, it can periodically refresh cards, updating data to ensure timely updates, such as updating cards for multi-day weather forecasts every 24 hours. The card management service 202 can also manage the lifecycle of cards added to electronic devices, such as managing the entire process from card creation to deletion. Finally, it can manage card users, such as managing the cards displayed by different users.

[0065] Card provider 203 is used to provide cards. Card provider 203 can be an app that provides the content displayed on the cards. Card provider 203 is also used to manage the generation and updating of cards. For example, it controls the displayed content of the cards, controls the layout, control click events, and card updates.

[0066] In some examples, users add cards by first opening the electronic device's card management interface, which contains all the cards currently available for addition. For instance, cards are displayed by application category. The user browses the cards in the card management interface, selects the card to be added, and then selects an interface to which the card will be added. The electronic device responds to the user's action by adding the card to the selected interface.

[0067] For example, when an electronic device receives a user's selection of a card function control in a settings app, it displays the card management interface shown in Figure 3(a). Alternatively, when a user performs a long press or pinch-to-open action on any location on the desktop to enter the desktop editing interface, the electronic device displays the card management interface shown in Figure 3(a) in response to the user's selection of a card function control in the desktop editing interface. Or, when a user selects a card function control in an interface such as the activity center or the negative one screen, the electronic device displays the card management interface shown in Figure 3(a). This card management interface includes all cards provided by apps installed on the electronic device that offer card functionality. The user can swipe through the cards in the card management interface and select the card they want to add (such as the card corresponding to the music playback function in a third-party app "XX Music"). Alternatively, the user can search for the card they want to add and select it. The electronic device then displays the card adding interface shown in Figure 3(b) in response to the user's selection. The card adding interface includes a preview image of the card, allowing the user to swipe and view cards of different styles / sizes. The card adding interface also includes adding interface controls (such as adding to the desktop and / or adding to the negative one screen). The electronic device receives a selection operation from the user on the card adding interface, targeting the target interface (such as the desktop). It then adds the card currently displayed on the card adding interface to the target interface (such as the desktop), displaying the interface shown in Figure 3(c). This interface is the desktop, and a new card corresponding to the music playback function of the third-party app "XX Music" is added to the desktop.

[0068] However, in this example, adding a card requires opening a specific card management interface. Users must select the desired card from multiple options, making the process cumbersome, complex, and inefficient. Furthermore, the card management interface typically displays a preview image of the card, with layouts and data often based on templates. The actual card displayed on the target interface may have a different layout to fit the space and arrangement of the target interface. Alternatively, the card displayed on the target interface may show real-time or dynamic data, updating based on the latest data. Users cannot see the actual display of the card in the card management interface.

[0069] In other examples, the user opens an application containing cards and drags the cards to a designated area. The electronic device adds the cards to the desktop in response to the user's dragging action.

[0070] However, in the above-mentioned method of adding cards, the functional components in the application are displayed in card form, and users can only trigger the addition of a card by dragging the card. Here, a functional component refers to an independent module or component with a specific function. During application development, developers need to process and convert the functional components in the application into cards, changing their display format, which increases the workload and complexity of development. Moreover, triggering the addition operation by dragging a card requires new users to learn how to do it, increasing the learning cost and the risk of accidental touches. In addition, dragging requires a certain degree of accuracy; if it cannot be dragged accurately to the intended area, it may not trigger accurately, reducing user operation efficiency.

[0071] To address the aforementioned technical problems, this application provides a card-adding method. The method includes: when an electronic device receives a user's first operation on a first functional component in a first interface of an application, quickly responding based on the association between the functional component (i.e., an independent module or component with a specific function in the application) and the card, adding the first card corresponding to the first functional component to a second interface. The second interface and the first interface are interfaces of different applications. Displaying a first card in the electronic device that closely resembles the actual display effect of the first functional component in the application ensures visual consistency, speeds up card adding, improves card adding efficiency, and enhances the user experience.

[0072] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments.

[0073] The card adding method provided in this application can be applied to electronic devices including a display screen. Electronic devices can also be referred to as terminal equipment, terminal, user equipment (UE), mobile station (MS), mobile terminal (MT), etc.

[0074] For example, the electronic device in the embodiments of this application may be a mobile phone, tablet computer, desktop computer, laptop computer, handheld computer, notebook computer, smart drawing board, smart TV, gaming device, camera, ultra-mobile personal computer (UMPC), netbook, personal computer (PC), and personal digital assistant (PDA) device, etc. The embodiments of this application do not impose special limitations on the specific form of the electronic device.

[0075] Figure 4 shows a schematic diagram of the hardware structure of electronic device 400. Electronic device 400 may include processor 410, internal memory 420, antenna, communication module 430, sensor module 440, display screen 450, etc.

[0076] The structures illustrated in this application embodiment do not constitute a limitation on the electronic device 400. It may include more or fewer components than illustrated, or combine or separate certain components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of both.

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

[0078] The controller can be the nerve center and command center of the electronic device 400. The controller can generate operation control signals based on the instruction opcode and timing signals to control the fetching and execution of instructions.

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

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

[0081] Internal memory 420 can be used to store computer executable program code, which includes instructions. Processor 410 executes various functional applications and data processing of electronic device 400 by running the instructions stored in internal memory 420. Memory 420 may include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function, etc. The data storage area may store data created during the use of electronic device 400, etc. In addition, memory 420 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, other volatile solid-state storage devices, universal flash storage (UFS), etc. For example, internal memory 420 may store APPs installed by users in electronic devices.

[0082] The communication module 430 and antenna are used to realize the wireless communication function of the electronic device 400. The communication module 430 can provide wireless communication solutions for electronic devices 100, including 2G / 3G / 4G / 5G, as well as wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, and other wireless communication solutions for electronic devices 100.

[0083] The sensor module 440 may specifically include pressure sensors and touch sensors, etc.

[0084] A pressure sensor is used to sense pressure signals and convert them into electrical signals. In some embodiments, the pressure sensor may be located on the display screen 450. There are many types of pressure sensors, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. When a touch operation is applied to the display screen 450, the electronic device 400 detects the intensity of the touch operation based on the pressure sensor. The electronic device 400 can also calculate the touch location based on the detection signal from the pressure sensor.

[0085] A touch sensor, also known as a "touch panel," can be located on the display screen 450. The touch sensor and the display screen 450 together form a touchscreen, also called a "touch display." The touch sensor detects touch operations applied to or near it. The touch sensor can then transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 450. In some embodiments, the touch sensor may also be located on the surface of the electronic device 400, in a different position than the display screen 450.

[0086] Electronic device 400 implements display functions through a graphics processing unit (GPU), a display screen 450, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 450 and the application processor. The GPU performs mathematical and geometric calculations and is used for graphics rendering. Processor 410 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0087] The display screen 450 is used to display images, videos, etc. The display screen includes a display panel. The display panel can be an LCD (liquid crystal display), OLED (organic light-emitting diode), active-matrix organic light-emitting diode (AMOLED), flexible light-emitting diode (FLED), MiniLED, MicroLED, Micro-OLED, quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 400 may include one or N displays, where N is a positive integer greater than 1.

[0088] When implementing a card-adding method according to an embodiment of this application based on the electronic device shown in Figure 4, the pressure sensor and touch sensor in the electronic device 400 receive user operations, and the display screen 450 displays a first interface of the application. The pressure sensor and touch sensor in the electronic device 400 receive a first operation by the user on a first functional component in the application interface, and the display screen 450 displays a second interface, showing a first card corresponding to the first functional component in the second interface. The first card is used to display the content corresponding to the first functional component, and the second interface and the first interface are interfaces of different applications.

[0089] The card-adding method of this application will be described in detail below with reference to specific embodiments and accompanying drawings. The following embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments.

[0090] Referring to Figure 5, this is a schematic diagram of the architecture of an operating system for an electronic device 400 according to an embodiment of this application. The operating system of the electronic device 400 may include an application layer, a framework layer, and a system service layer.

[0091] The structure illustrated in this application does not constitute a limitation on the operating system of the electronic device 400. It may include more or fewer modules than illustrated, or combine some modules, or split some modules, or have different module arrangements.

[0092] In this embodiment, the application layer may include system applications and / or third-party applications. Applications in the application layer can be categorized into two types: card providers and card users. For example, card providers may include system applications and / or third-party applications. Card users may include desktop launchers, system applications, and / or third-party applications.

[0093] In this embodiment, the framework layer provides a user program framework for application cards. For example, the NAPIKit development kit is a set of development tools and frameworks. Taking application cards as an example, NAPIKit helps developers build and customize cards for electronic devices. NAPIKit provides a series of application programming interfaces (APIs) and components, enabling developers to easily create and manage cards and integrate them with the system.

[0094] In this application embodiment, NAPIKit provides a new menu item component. The menu item component is used by developers to add card-related menu options to the functional components of the application, thereby associating the functional components of the application with cards.

[0095] Understandably, an application's functionality can be divided into different components (or modules), each responsible for implementing a specific function. An application's functional components can be understood as independent components within the application that perform specific functions. For example, a shopping app might have product browsing, shopping cart, and payment functional components. A music app might have music playback functional components, and so on.

[0096] Understandably, cards are used to display information about specific functional components of an application on the interface. For example, shopping apps have product browsing cards and shopping cart cards. Music apps have music playback cards.

[0097] Understandably, cards are designed to facilitate direct user access to application functions. Therefore, cards are typically designed for important functions within the application, rather than for every single function. In other words, only some functional components in the application have cards. Application components can be categorized into those that provide cards and those that do not.

[0098] Understandably, in existing technologies, functional components and cards operate independently within an application, with the application managing both cards and functional components separately. This application provides a MenuItem component that enables the association between functional components and cards within an application. During development, developers use this MenuItem component to establish the association between functional components and their corresponding cards. This allows users to directly add the corresponding cards when using functional components, accelerating card addition efficiency.

[0099] It is understandable that the association between functional components and cards includes both functional component information and card information. That is, when a functional component and a card are associated, the information of the functional component and the information of the card are also linked.

[0100] Taking the 24-hour weather forecast function component and 24-hour weather forecast card as examples, the functional component information of the 24-hour weather forecast function component includes the function component name (e.g., 24-hour weather forecast function component), function component identifier (e.g., id123), function description (e.g., providing weather forecast information for the next 24 hours), input parameters (e.g., city name, latitude and longitude, time information, weather information, etc.), output results (e.g., a data structure containing the 24-hour weather conditions of a certain city), and display content (e.g., the text, images, and other information actually displayed by the 24-hour weather forecast function component). The display content includes interface elements (e.g., function name: 24-hour forecast; function data (text and / or image information): city name, time, temperature, weather condition icons, weather curves, etc.; interactive controls (e.g., refresh control, more details control, etc.), component style (e.g., layout information and display style of interface elements), and component size.

[0101] The card information for a 24-hour weather forecast card includes the card name (e.g., 24-hour weather forecast card), card identifier (e.g., id321), card description (e.g., displaying the weather conditions for the next 24 hours), and displayed content (e.g., the actual text, images, and other information displayed on the 24-hour weather forecast card). The displayed content includes interface elements (e.g., 24-hour weather data for a specific city (temperature, weather condition icons, weather curves, etc.), interactive controls (e.g., refresh controls, more details controls, etc.), card style (e.g., layout information and display style of interface elements), and card size.

[0102] Understandably, cards are used to display the content corresponding to functional components.

[0103] Optionally, during application development, developers can create cards for certain functional components and establish associations between the components and the cards. For example, they can associate the identifier of a functional component with the corresponding card identifier. Developers can also create card menu options within these functional components using the MenuItem component, providing shortcuts to the cards. For example, menu options might include "Add to Desktop," "Add to -1 Screen," or "More Cards." In response to a user selecting a menu option, the electronic device can add the card corresponding to that functional component to the interface indicated by the menu option, or allow the user to view all the cards provided by the application to determine which card they want to add.

[0104] For example, a developer might create a weather app that includes components such as a 24-hour weather forecast, today's weather, and multi-day weather forecasts. The developer creates corresponding cards for the 24-hour and multi-day weather forecast components, such as "24-hour Weather Forecast Card" and "Multi-day Weather Forecast Card." The developer then associates the components with these cards, such as "24-hour Weather Forecast Component - 24-hour Weather Forecast Card" and "Multi-day Weather Forecast Component - Multi-day Weather Forecast Card." The developer uses a MenuItem component to create shortcuts related to these cards within the 24-hour and multi-day weather forecast components. For example, the developer might add one or more menu options to the 24-hour weather forecast component, such as "Add to Desktop," "Add to -1 Screen," or "More Cards."

[0105] Optionally, when developers create cards for functional components, they can also set different styles and sizes of cards for the functional components.

[0106] For example, the functional components that can provide cards in the application and the association relationships of cards in the application are shown in Table 1.

[0107] Table 1

[0108] It is understood that the above example uses an application, application A, as an example. Application A contains functional components that provide cards, including functional component 1 and functional component 2. The card corresponding to functional component 1 in the application is card 1, and the cards corresponding to functional component 2 are card 2 and card 3. Card 2 and card 3 can be cards of different styles / sizes corresponding to functional component 2. In the embodiments of this application, the association between functional components and cards can be one-to-one or one-to-many, and this application does not impose any restrictions on this.

[0109] Optionally, when developers create cards for functional components, they can set the display effect of the cards to match the display effect of the functional components. That is, the display effect of the cards should be similar to that of the functional components to ensure visual consistency between the functional components and the cards.

[0110] Optionally, if a functional component corresponds to multiple cards, when determining the association between the functional component and the cards, a priority can be set based on the display effects of the cards and the functional components. For example, the higher the similarity between the display effects of the cards and the functional components, the higher the priority, and the higher the priority card will be added first when adding cards later. In this way, when adding cards, the display effects of the functional components and the cards are similar, which can ensure visual consistency and improve the user experience. It is understood that the embodiments of this application do not limit the specific implementation method of card priority.

[0111] Optionally, if a functional component corresponds to multiple cards, the card style can be preset when adding cards. This way, when a user triggers the electronic device to add a card corresponding to a functional component, the card can be added directly according to the preset style, speeding up the card addition process.

[0112] Optionally, if a functional component corresponds to multiple cards, when the user triggers the electronic device to add a card corresponding to the functional component, the electronic device displays cards of different styles corresponding to that functional component. The electronic device adds cards in response to the style selected by the user.

[0113] Understandably, the card styles of multiple cards corresponding to a functional component can also be described as candidate styles for the user to choose from.

[0114] Optionally, during application development, developers can use the MenuItem component to create shortcuts for managing all cards in the application. For example, the MenuItem component can be used to create card-related menu options (such as "More Cards") within the application's more functional controls.

[0115] This application links functional components and cards within the application, providing shortcuts for cards to these components via the MenuItem component. This allows users to quickly trigger card-related functions within the functional components. This simplifies user operations, enabling users to quickly add cards corresponding to the functional component using clear menu options, improving card addition efficiency and enhancing the user experience. Furthermore, the display of the cards is similar to that of the functional components, maintaining visual consistency and achieving a WYSIWYG (What You See Is What You Get) effect.

[0116] Figure 6(a) shows the main interface of a weather application installed on an electronic device. This interface displays today's weather function component 601, 24-hour weather forecast function component 602, multi-day weather forecast function component 603, and more function controls 604. The 24-hour weather forecast function component 602 also includes function control 605, and the multi-day weather forecast function component 603 also includes function control 606.

[0117] Understandably, control 604 is a function control specifically designed for the weather application, allowing users to view various menu options related to the weather application. Control 605 is a function control designed for the 24-hour weather forecast function, allowing users to view various menu options related to the 24-hour weather forecast function, as well as menu options for other functions within the weather application. Similarly, control 606 is a function control designed for the multi-day weather forecast function, allowing users to view various menu options related to the multi-day weather forecast function, as well as menu options for other functions within the weather application.

[0118] For example, in response to a user's selection of function control 605 (e.g., clicking function control 605), the electronic device displays an option box near the 24-hour weather forecast function component 602, which includes menu options for various functions. As shown in Figure 6(b), the option box 607 is overlaid on the right side of the 24-hour weather forecast function component 602 in the interface. Alternatively, as shown in Figure 6(c), the interface displays the 24-hour weather forecast function component 602 and the option box 608. Or, in response to a user's preset operation on the 24-hour weather forecast function component 602 (e.g., long press, preset gesture, etc.), the electronic device displays the interface shown in Figure 6(b) or Figure 6(c).

[0119] For example, in response to the user's selection of the more functions control 604, the electronic device displays a menu of more functions near the more functions control 604. As shown in Figure 6(d), the more functions option box 609 is displayed on the interface.

[0120] In this embodiment of the application, NAPIKit provides a new API that allows developers to interact with the card management service of the electronic device and transmit card information, functional component information, and the association between functional components and cards in the application to the card management service of the electronic device.

[0121] In this embodiment, the system service layer is a collection of core capabilities of the operating system, providing services to applications through the framework layer.

[0122] In this embodiment, the card management service can reside in the framework layer and the system service layer. The card management service is used to manage cards. Specifically, the card management service manages card creation, storage, and deletion through the basic card management service framework. It manages card refresh through card refresh and the entire process from card creation to deletion through card lifecycle management. It monitors all events within the card's lifecycle through event management. It manages the configuration information of the monitored cards through configuration management. Finally, it manages the cards in the monitored card user's database through the card user's database and manages the card user's updates and uninstallation.

[0123] In this embodiment, the Activity Manager Service (AMS) can reside in both the framework layer and the system service layer. AMS is responsible for managing and scheduling the application's lifecycle, the startup, destruction, and switching of activities, and the management of application processes. The Package Manager Service (PMS) can reside in both the framework layer and the system service layer. PMS is responsible for tasks such as installing, uninstalling, updating, and managing permissions of application packages. The Binder Driver and Service Management Service (BMS) can reside in both the framework layer and the system service layer. BMS is responsible for managing inter-process communication (IPC) and the registration, discovery, and invocation of services.

[0124] For example, the package management service is responsible for installing application packages. It provides an API to allow applications or system services on an electronic device to query information about installed applications. This application information includes basic application information (application name, package name, version number, etc.), application component information (such as MenuItem components), application resource information (such as functional component information, card information, relationships between functional components and cards, layout files, etc.), application permission information (such as required permissions and user-authorized permissions), and application installation information (such as installation path, installation time, etc.). The card management service interacts with the package management service via the API to obtain functional component information, card information, and relationships between functional components and cards from the application information.

[0125] It is understandable that after an application is installed, the electronic device stores the associations between the application's functional components and cards.

[0126] The modules in the aforementioned operating system are divided according to functional logic, but other division methods may also exist. Furthermore, the modules can have other names. Each module can be implemented in hardware, software, or a combination of both. The specific implementation method (hardware, software, or a combination) for a particular module depends on the specific application and design constraints of the technical solution. Different modules can be implemented with different hardware, and multiple modules can be implemented with the same hardware; this application does not specifically limit this.

[0127] Figure 7 shows a flowchart of a card-adding method provided in an embodiment of this application. It should be noted that this method is not limited to the specific order described in Figure 7 and below. It should be understood that in other embodiments, the order of some steps in this method can be interchanged according to actual needs, or some steps can be omitted or deleted. The method includes the following steps:

[0128] S701, A first interface for an electronic device display application, the first interface including a first functional component.

[0129] In this embodiment, the electronic device is an electronic device with a display function. The first interface of the application is the display interface of the application when the user interacts with the application installed on the electronic device. The application is selected by the user and is capable of providing cards.

[0130] In some embodiments, the electronic device can receive user input to launch an app (e.g., a user touches the app icon on the electronic device). In response to this operation, the electronic device displays the app interface. For example, the electronic device receives a user's click on the app icon, launches the app, and displays the app interface in response to the click.

[0131] For example, as shown in Figure 8(a), this is the desktop displayed on an electronic device according to an embodiment of this application. The desktop may include multiple app icons, such as clock app icons, calendar app icons, gallery app icons, memo app icons, and smart home app icons.

[0132] When the user clicks the smart home app icon shown in Figure 8(a), the electronic device recognizes the application as a smart home app. Responding to the user's click, the electronic device launches the smart home app and displays the app interface shown in Figure 8(b).

[0133] In this embodiment of the application, the first interface includes a first functional component, which is a functional component capable of providing cards.

[0134] Understandably, the first interface displays one or more functional components of the application. A functional component is an independent component within the application that performs a specific function; each functional component can implement one or more functions.

[0135] In this embodiment, the functional component information includes the functional component name, functional component identifier, functional description, input parameters, output results, and display content. The display content includes interface elements, component style, and component size.

[0136] Specifically, functional components are displayed based on the content being displayed. For example, functional components include interface elements (such as function name, function data (such as function description information, real-time function data, etc.), interactive controls, etc.), component styles (such as layout information of interface elements, display styles, etc.), and component sizes.

[0137] In this embodiment, the electronic device includes a relationship between functional components and cards. This relationship is established through a MenuItem component.

[0138] Understandably, this application provides a MenuItem component, which enables the association between functional components and cards within an application. Functional components in the application can be categorized into those that provide cards and those that do not. Whether a functional component in the application has a corresponding card is set by the developer during development. When developing a functional component that provides cards, the developer uses the MenuItem component to establish the association between the functional component and its corresponding card. The MenuItem component then creates card menu options for that functional component, providing quick access to card-related information within the functional component.

[0139] It's understandable that the association between functional components and cards includes both functional component information and card information. That is, when a functional component and a card are associated, the information of the functional component and the information of the card are also linked. Card information includes card name, card identifier, card description, and displayed content. Display content includes interface elements (such as card name, card data, interactive controls, etc.), card style (such as layout information and display style of interface elements), and card size. Cards are used to display the content corresponding to the functional component.

[0140] For example, see Figure 8(b), which shows the interface of a smart home app provided in an embodiment of this application. The app interface displays multiple functional components, such as a table lamp, a speaker, an air purifier, a router, and a smart socket.

[0141] Among the smart home apps, the functional components that can provide cards include table lamp, speaker, and air purifier components. Router and smart socket components do not have card functionality. Taking the table lamp component as an example, the function name displayed on the component is "Table Lamp," and the function data includes a table lamp icon and the real-time brightness of the lamp. The table lamp component also displays interactive controls such as timer controls, brightness adjustment controls, and on / off controls.

[0142] S702, The electronic device receives a first operation from the user on the first functional component.

[0143] In this embodiment, the first operation includes a user actively triggering a preset operation to add a card corresponding to the first functional component to the electronic device. The preset operation includes pre-set shortcut operations or voice commands. For example, shortcut operations via gestures or button combinations, or voice commands issued to the phone via a voice assistant. This embodiment does not limit the specific implementation of the preset operation.

[0144] It is understood that the first operation mentioned above may include one or more operations.

[0145] In some embodiments, the first operation includes multiple operations. The first operation includes a first triggering operation and a second triggering operation.

[0146] The first triggering operation includes a preset operation where the user actively triggers the electronic device to display an option box for the first functional component. The second triggering operation includes a preset operation where the user interacts with a first menu option in the option box, triggering the electronic device to add a card corresponding to the first functional component based on the first menu option. The preset operations include pre-set shortcut operations or voice commands.

[0147] For example, the first triggering operation can be a preset operation by the user on the first functional component (such as a long press). For instance, the electronic device receives the preset operation by the user on the first functional component and, in response to the preset operation, displays an option box for the first functional component. The option box includes a first menu option, which is a menu option related to the card function.

[0148] It is understood that the option box of the first functional component of an electronic device includes menu options for that first functional component, and may also include menu options for the application. This allows the user to view or trigger the electronic device to execute the function corresponding to the menu option.

[0149] Understandably, since the first functional component is one that provides cards, and during application development, a card menu option was created for this functional component using the MenuItem component, the user triggers the first functional component to display an options box containing the first menu options.

[0150] For example, based on Figure 8(b) above, when a user long-presses the desk lamp function component, the electronic device responds to the long-press operation and displays the interface shown in Figure 8(c). This interface includes an option box for the desk lamp function component. This option box includes menu options such as Add to Desktop, Add to Negative One Screen, More Cards, and Add to Favorites. The first menu option can be any one of Add to Desktop, Add to Negative One Screen, or More Cards.

[0151] For example, the first triggering operation can be a preset operation (such as a click operation) performed by the user on a functional control in the first functional component. For instance, the electronic device receives a preset operation from the user on a functional control in the first functional component and, in response to the preset operation, displays an option box for the first functional component. This option box includes a first menu option, which is a menu option related to the card function.

[0152] For example, based on the example in Figure 6(a) above, when a user clicks on the function control 605 in the interface shown in Figure 6(a), the electronic device receives the user's operation on the function control 605. In response to this operation, the electronic device may display the option box 607 shown in Figure 6(b). Alternatively, it may display the option box 608 shown in Figure 6(c). Or, it may display the option box shown in Figure 9(a). The option boxes shown in Figure 6(b), Figure 6(c), or Figure 9(a) include multiple first menu options related to the card function, such as "Add to Desktop" and "Add to Negative One Screen".

[0153] It is understandable that the menu options in the option boxes corresponding to each functional component in the APP, as well as the method of triggering the display of the option boxes for each functional component, are set by the developer during the APP development stage. This application embodiment does not limit the display method or the content displayed in the option boxes.

[0154] For example, the second triggering operation can be a preset operation (such as a click operation) performed by the user on the first menu option in the option box. For instance, the electronic device receives a preset operation from the user on the first menu option in the option box, and in response to the preset operation, the electronic device adds a card corresponding to the first functional component according to the first menu option.

[0155] The first menu option is the menu option related to the card function selected by the user. The first menu option is used to indicate the second interface of the card corresponding to the first functional component.

[0156] For example, based on the example shown in Figure 8(c) above, when a user clicks "Add to Desktop" in the option box of the desk lamp function component, the electronic device receives the user's "Add to Desktop" operation. In response to this operation, the electronic device adds the card corresponding to the desk lamp function component to the desktop.

[0157] For example, as shown in Figure 9(a), when a user clicks "Add to Desktop" in the option box of the 24-hour weather forecast function component, the electronic device receives the user's "Add to Desktop" operation. In response to this operation, the electronic device adds the card corresponding to the 24-hour weather forecast function component to the desktop.

[0158] It is understandable that the electronic device responds to the user's first and second trigger operations and adds the card corresponding to the first functional component according to the first menu option.

[0159] In other embodiments, the first operation may include a first trigger operation, a second trigger operation, and a third trigger operation. It is understood that the relevant descriptions of the first and second trigger operations are given above and will not be repeated here.

[0160] Optionally, after the electronic device receives the user's preset operation on the first menu option in the option box, the electronic device may also display a preview interface, which displays the card corresponding to the first functional component.

[0161] The preview interface includes candidate card styles corresponding to at least one first functional component. A candidate style can be understood as different styles of a card for a given first functional component. The candidate card styles are styles supported by the electronic device.

[0162] Understandably, the preview interface displayed on the electronic device provides cards with different candidate styles, from which the user can select a style, and the electronic device adds cards based on the style selected from the candidate styles.

[0163] Optionally, the preview interface may also include information about the first menu option, and may also include a confirmation control for adding the item.

[0164] The third trigger operation includes preset actions by the user on the preview interface. For example, preset actions such as selecting a card style in the preview interface and confirming the addition of a control. Preset actions include pre-set shortcuts or voice commands. The third trigger operation is used to instruct the electronic device to add the card corresponding to the first functional component based on the style selected by the user from the candidate styles displayed in the preview interface.

[0165] Optionally, the preview interface can fill the entire screen or not, and be overlaid on the application's first screen.

[0166] For example, the third triggering operation can be a preset operation (such as a click operation) performed by the user on the preview interface to trigger the electronic device to add a card. In response to the preset operation, the electronic device adds the card corresponding to the first functional component according to the style selected by the user from the candidate styles displayed on the preview interface.

[0167] For example, in response to a second trigger operation, the electronic device displays a preview interface as shown in Figure 8(d). This preview interface is overlaid on the smart home app's interface. The preview interface includes various candidate styles of lamp cards (i.e., cards corresponding to the lamp's functional components), and the user can swipe left and right on the screen to view different candidate styles. The preview interface also includes information for the first menu option "Add to Desktop," and the instruction "Select Service Card." It also includes a confirmation add control. The electronic device receives the user's click on the confirmation add control, determines the style of the currently displayed lamp card as the user-selected style, and adds the card to the desktop according to the user-selected style.

[0168] It is understood that the above embodiments are described using the example of a first operation including multiple operations. In practical applications, the first operation may include more or fewer operations than the first trigger operation, the second trigger operation, and the third trigger operation, which will not be elaborated here.

[0169] In some other embodiments, the first operation includes an operation as an example. This first operation includes a fourth trigger operation, which includes a preset operation whereby the user directly triggers a preset operation to add a card corresponding to the first functional component to the electronic device. For example, the preset operation is a preset gesture or a shortcut operation.

[0170] For example, the first functional component of an electronic device displays a "Add to Desktop" control, and the electronic device receives user input to this control. In response to this input, the card corresponding to the first functional component is directly added to the desktop.

[0171] For example, electronic devices may pre-configure the correspondence between shortcut gestures and functions. For instance, an electronic device might pre-configure a user's double-click operation on a functional component to add the corresponding card to the negative one screen. When the electronic device responds to the user's double-click operation on a first functional component, it adds the card corresponding to that first functional component to the negative one screen.

[0172] It is understood that the embodiments of this application do not limit the specific implementation of the first operation.

[0173] In this application, the options boxes simply and directly inform users of the operations that can be performed, requiring no learning and allowing users to quickly select options; the options boxes also reduce the risk of accidental operation, making it easier for users to understand and operate, and have good interface consistency and applicability.

[0174] S703. In response to the first operation, the electronic device displays a second interface and a first card on the second interface; the first card is a card corresponding to the first functional component and is used to display the content corresponding to the first functional component; the second interface and the first interface are interfaces of different applications.

[0175] In the embodiments of this application, the electronic device includes the association between functional components and cards.

[0176] In this embodiment, the second interface is either a user-selected interface for displaying the first card, or a pre-set interface for displaying the first card. For example, the second interface is a desktop interface, a negative one screen interface, or an interface of an application in an electronic device that can display cards (such as an activity center interface, status bar interface, etc.).

[0177] The first card is the card corresponding to the first functional component to be displayed on the second interface.

[0178] In some embodiments, in response to a first operation, the electronic device determines the current display position of a first functional component, a screenshot of the first functional component, card information of a first card, and a second interface. The electronic device determines the current display position as a first position, and determines a second position based on the card size in the second interface and the card information of the first card. The electronic device moves the screenshot of the first functional component from the first position to the second position in the second interface, and displays the first card at the second position.

[0179] The current display position of the first functional component is the display position of the first functional component in the first interface of the application when the user performs the first operation on the first functional component.

[0180] The screenshot of the first functional component is a screenshot image of the first functional component obtained by the electronic device when the user performs the first operation on the first functional component.

[0181] The card information for the first card includes the card name, card identifier, card description, and displayed content. The displayed content includes interface elements (such as card name, card data, and interactive controls), card style (such as layout information and display style of interface elements), and card size.

[0182] The first position is the initial position of the screenshot of the first functional component displayed in the second interface, and the first position is the same as the current display position of the first functional component in the first interface. The second position is the final position of the screenshot of the first functional component displayed in the second interface, and the second position is the display position of the first card to be displayed in the second interface.

[0183] It is understandable that the current display position is the display position in the first interface of the application, and the first position and the second position are the display positions in the second interface.

[0184] Optionally, the style of the first card can be the style selected by the user from the candidate styles, a pre-defined style, or the style with the highest priority among the candidate styles. The priority is determined based on the similarity between the card style and the functional component style.

[0185] Optionally, if the first functional component corresponds to a card, then that card is designated as the first card.

[0186] Optionally, if the first functional component corresponds to multiple cards, the electronic device determines the first card according to preset rules. For example, the first card can be determined based on priority. Alternatively, the first card can be determined based on a preset style. The preset style can be a user-defined card style or a default style pre-configured in the application when adding cards.

[0187] Optionally, the electronic device determines the first card based on the style selected by the user from the candidate styles.

[0188] Understandably, in this application, the card replacing the screenshot is preferably a card with a style similar to the component style of the first functional component. In this way, the electronic device, responding to user input, adds a card with a display effect similar to that of the first functional component to the second interface, visually displaying the card addition process, ensuring visual consistency and improving the user experience.

[0189] Optionally, before displaying the first card on the second interface, the method further includes: displaying an animation effect on the second interface showing the screenshot of the first functional component moving from a first position to a second position. That is, in the second interface, the screenshot of the first functional component is moved from the first position to the second position using an animation effect.

[0190] For example, in response to the first operation, the electronic device identifies a first functional component and its current display position using image recognition technology or a user interface automation testing tool. The electronic device acquires a screenshot of the first functional component using screenshot technology. Based on the stored association between functional components and cards, the electronic device obtains card information for all cards corresponding to the first functional component. The electronic device determines the card information for the first card based on a user-selected style, a pre-set style, or a priority. The electronic device determines the user-selected interface or a pre-defined interface as the second interface. The electronic device determines the second position based on the layout information of the second interface (such as the position, size, and spacing of each component in the second interface) and the card size in the card information of the first card. The electronic device displays a screenshot of the first functional component in the second interface from the first position to the second position, based on the first position which is the same as the current display position. For example, the screenshot movement transition can be achieved through animation effects. The electronic device generates a first card based on the card information of the first card and displays the first card in the second position.

[0191] Understandably, if the electronic device determines that the second position is the same as the first position, there is no need to move the screenshot of the first functional component.

[0192] Understandably, the screenshot of the first functional component is just a static image and does not contain any controls. Moving the screenshot from the first position to the second position enhances the user experience by vividly demonstrating the card-adding operation with animation. This allows users to clearly see the card-adding process, maintains visual continuity of the interface, guides user attention to the second position, helps users find the required cards more quickly, and improves user efficiency. Moreover, moving the static image saves system power and performance, avoiding resource waste.

[0193] Understandably, the first card contains various controls for users to trigger or operate. After the screenshot is moved, replacing it with a card allows users to access more functions, enhancing the real-time interactive experience, providing richer features and operation options, and improving user comfort.

[0194] Understandably, the first card displayed on the second interface is the card after real-time data has been added, and the content in the card may be the same as or different from the content in the screenshot of the first functional component.

[0195] For example, in response to the user's "Add to Desktop" action in Figure 8(c), the electronic device displays the interface shown in Figure 10(a). This interface is the desktop, which contains a screenshot of the desk lamp functional component and multiple app icons. The screenshot of the desk lamp functional component is overlaid on the smart home app icon.

[0196] It's understandable that the screenshot showing the desk lamp component on the desktop (i.e., the first position) is the position of the desk lamp component in the smart home app interface when the user performs the first action. In other words, in response to the user's first action, the electronic device visually maintains the same position as the desk lamp component, but the interface background transitions from the smart home app interface to the desktop.

[0197] As shown in Figure 10(a), the screenshot of the desk lamp function component is overlaid on the smart home APP icon. Therefore, it is necessary to move the screenshot of the desk lamp function component to an empty area on the desktop where the icon is not displayed. Figure 10(b) shows the interface after the screenshot of the desk lamp function component has been moved to the second position. The screenshot of the desk lamp function component stops moving down to the second position. The electronic device replaces the screenshot of the desk lamp function component with the desk lamp card (i.e., the first card) corresponding to the first function component so that the user can operate the desk lamp card.

[0198] For example, in response to the user's "Add to Desktop" operation in Figure 9(a), the electronic device displays the desktop shown in Figure 9(b). This desktop displays a screenshot of the 24-hour weather forecast function component. The screenshot's display position on the desktop is the same as the position of the 24-hour weather forecast function component in the weather app when the user triggers the addition of the corresponding card. As shown in Figure 9(b), the screenshot does not overlap with other icons on the desktop. If the second position is the same as the first position, there is no need to move the screenshot. If the second position is different from the first position, the screenshot is moved from the position shown in Figure 9(b) to the position shown in Figure 9(c). As shown in Figure 9(c), the desktop layout is more aesthetically pleasing after moving the screenshot.

[0199] In this application, the electronic device responds to the user's first operation on the first functional component in the application interface, and visualizes the process of adding the card corresponding to the first functional component to the electronic device, thereby improving the efficiency of card addition and enhancing the visual and user experience.

[0200] Understandably, the above describes the card addition method in detail using electronic devices as an example. The following describes the card addition method using the interaction of various modules in electronic devices as an example.

[0201] Specifically, in response to a user action, the application displays its first interface. The application then generates a card-adding event and sends it to the card management service. This card-adding event may include information about a first functional component (such as the component's identifier) ​​and information about a second interface. The first functional component information is determined based on the user's action in the first operation that triggers the card-adding function, and the second interface information is determined based on the second interface indicated by the first operation.

[0202] In response to the first operation, the card management service determines the card information of the first card based on the stored association between functional components and cards (for example, first determining all corresponding card identifiers based on the first functional component identifier in the first functional component information, and then retrieving the corresponding card information based on the card identifiers. Then, it determines the card information of the first card from the card information according to priority). In response to the card addition event and application interaction, the card management service determines the current display position of the first functional component and a screenshot of the first functional component.

[0203] The card management service sends the card information of the first card, the current display position of the first functional component, and a screenshot of the first functional component to the application (such as the desktop) corresponding to the second interface information. This application determines the current display position of the first functional component as the first position for the screenshot of the first functional component to be displayed in the second interface. Based on the card discovery information in the first card's card information and the second interface information indicating the second interface, a second position is determined, and an animation showing the screenshot of the first functional component moving from the first position to the second position is displayed in the second interface.

[0204] The application corresponding to the second interface information replaces the screenshot of the first functional component with the first card. For example, the application corresponding to the second interface information interacts with the card management service to obtain the first card (e.g., obtain the first card based on the card information of the first card), and replaces the screenshot of the first functional component with the first card, thereby completing the card addition.

[0205] The foregoing mainly describes the solutions provided by the embodiments of this application from a methodological perspective. To achieve the above functions, it includes corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0206] This application embodiment can divide the above-described electronic device into functional modules based on the method example described above. For example, each function can be divided into its own functional modules, or two or more functions can be integrated into one processing module. The integrated modules can be implemented in hardware or as software functional modules. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0207] Based on the same inventive concept, this application provides a card adding device. The card adding device provided in this application is applied to the electronic device shown in FIG4. FIG11 is a schematic diagram of the structure of a card adding device provided in this application. The card adding device can be used to implement the methods described in the above method embodiments. For example, the card adding device may specifically include: a processing module 1101, an acquisition module 1102, and a display module 1103.

[0208] The processing module 1101 is used to support the card adding device in performing any of the processing functions in Figures 5-10. In this embodiment of the application, taking the card adding device applied to an electronic device as an example, the processing module 1101 is used to respond to the first operation, display a second interface, and display the first card on the second interface.

[0209] The acquisition module 1102 is used to support the card adding device in performing the acquisition function of any one of Figures 5-10. In this embodiment, the acquisition module 1102 is used to receive a first operation by the user on the first functional component.

[0210] The display module 1103 is used to support the card adding device in performing the display function of any one of Figures 5-10. In this embodiment, the display module 1103 is used to display a first interface of the application, which includes a first functional component. The display module 1103 is also used to display a second interface and display a first card on the second interface; the first card is a card corresponding to the first functional component and is used to display the content corresponding to the first functional component; the second interface and the first interface are interfaces of different applications.

[0211] The technical effects of the card adding device shown in Figure 11 can be referred to the technical effects of the method described in the above method embodiments, and will not be repeated here. The processing module 1101 involved in the card adding device shown in Figure 11 can be implemented by a processor or processor-related circuit components, and can be a processor or processing module. The display module 1103 can be implemented by display screen-related components.

[0212] This application also provides a chip system, as shown in FIG12. The chip system 1200 includes at least one processor 1201 and at least one interface circuit 1202. As an example, when the chip system 1200 includes one processor and one interface circuit, the processor can be the processor 1201 shown in the solid box in FIG12 (or the processor 1201 shown in the dashed box), and the interface circuit can be the interface circuit 1202 shown in the solid box in FIG12 (or the interface circuit 1202 shown in the dashed box). When the chip system 1200 includes two processors and two interface circuits, the two processors include the processor 1201 shown in the solid box and the processor 1201 shown in the dashed box in FIG12, and the two interface circuits include the interface circuit 1202 shown in the solid box and the interface circuit 1202 shown in the dashed box in FIG12. This is not a limitation.

[0213] Processor 1201 and interface circuit 1202 can be interconnected via lines. For example, interface circuit 1202 can be used to receive signals. As another example, interface circuit 1202 can be used to send signals to other devices (e.g., processor 1201). Exemplarily, interface circuit 1202 can read instructions stored in memory and send the instructions to processor 1201. When the instructions are executed by processor 1201, the steps in the above embodiments can be performed. Of course, the chip system may also include other discrete devices, and this application embodiment does not specifically limit this.

[0214] Optionally, there can be one or more processors in the chip system. The processor can be implemented in hardware or software. When implemented in hardware, the processor can be a logic circuit, integrated circuit, etc. When implemented in software, the processor can be a general-purpose processor that reads software code stored in memory.

[0215] Optionally, the chip system may also include a memory (not shown in Figure 12). There may be one or more memories, which may be integrated with the processor or disposed separately from it; this application does not limit this. For example, the memory may be a non-transient processor, such as read-only memory (ROM), which may be integrated with the processor on the same chip or disposed separately on different chips. This application does not specifically limit the type of memory or the arrangement of the memory and processor.

[0216] For example, the chip system can be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a micro controller unit (MCU), a programmable logic device (PLD), or other integrated chips.

[0217] It should be understood that each step in the above method embodiments can be completed by integrated logic circuits in the processor hardware or by instructions in software form. The method steps disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or being executed by a combination of hardware and software modules in the processor.

[0218] This application also provides a computer storage medium storing computer instructions. When the computer instructions are executed on an electronic device, the electronic device performs the method described in the above-described method embodiments.

[0219] Computer-readable storage media include, but are not limited to, any of the following: USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, and other media capable of storing program code.

[0220] This application provides a computer program product, which includes a computer program or instructions that, when run on a computer, cause the computer to perform the methods described in the above-described method embodiments.

[0221] In addition, this application also provides an apparatus, which may specifically be a chip, component or module. The apparatus may include a connected processor and a memory. The memory is used to store computer execution instructions. When the apparatus is running, the processor can execute the computer execution instructions stored in the memory to cause the apparatus to perform the methods in the above-described method embodiments.

[0222] In addition, this application also provides a system, which may specifically be a chip, component or module. The system may include a connected processor and a memory. The memory is used to store computer execution instructions. When the system is running, the processor can execute the computer execution instructions stored in the memory to enable the system to perform the methods in the above-described method embodiments.

[0223] In this embodiment, the electronic device, computer storage medium, computer program product or chip are all used to execute the corresponding method provided above. Therefore, the beneficial effects that can be achieved can be referred to the beneficial effects of the corresponding method provided above, and will not be repeated here.

[0224] The steps of the methods or algorithms described in conjunction with the embodiments of this application can be implemented in hardware or by a processor executing software instructions. The software instructions can consist of corresponding software modules, which can be stored in random access memory (RAM), flash memory, read-only memory, erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, portable hard disks, compact disc read-only memory (CD-ROM), or any other form of storage medium well known in the art. An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can reside in an application-specific integrated circuit (ASIC).

[0225] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, the division of the above functional modules is only used as an example. In practical applications, the above functions can be assigned to different functional modules as needed; that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0226] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. The embodiments can be combined with or referenced to each other without conflict. The apparatus embodiments described above are merely illustrative; for example, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or card addition shown or discussed may be through some interfaces; the indirect coupling or card addition of devices or units may be electrical, mechanical, or other forms.

[0227] The units described as separate components may or may not be physically separate. A component shown as a unit can be one or more physical units; that is, it can be located in one place or distributed in multiple different locations. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0228] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0229] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solutions of the embodiments of this application, essentially or in other words, the parts that contribute to the prior art, or all or part of the technical solutions, can be embodied in the form of a software product. The software product is stored in a storage medium and includes several instructions to cause a device (which may be a microcontroller, chip, etc.) or processor to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

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

Claims

1. A card adding method, applied to an electronic device, characterized in that, include: Display the first interface of the application, the first interface including a first functional component; Receive the user's first operation on the first functional component; In response to the first operation, a second interface is displayed, and a first card is displayed on the second interface; the first card is the card corresponding to the first functional component, used to display the content corresponding to the first functional component; the second interface and the first interface are interfaces of different applications.

2. The method according to claim 1, characterized in that, Before displaying the first card, the method further includes: The second interface displays an animation showing the screenshot of the first functional component moving from a first position to a second position. Wherein, the first position is the same as the display position of the first functional component in the first interface; the second position is the display position of the first card to be displayed in the second interface.

3. The method according to claim 2, characterized in that, The method further includes: The second position is determined in the second interface based on the size of the first card.

4. The method according to any one of claims 1 to 3, characterized in that, The style of the first card is either the style selected by the user from the candidate styles, or a pre-set style, or the style with the highest priority among the candidate styles; The second interface is either the interface selected by the user to display the first card, or a pre-set interface to display the first card.

5. The method according to claim 4, characterized in that, The priority is determined based on the similarity between the card style and the functional component style.

6. The method according to any one of claims 1 to 5, characterized in that, The first operation includes a first trigger operation and a second trigger operation. The receiving of the user's first operation on the first functional component includes: Receive the first trigger operation from the user on the first functional component, the first trigger operation being used to trigger the display of the option box of the first functional component; Receive the user's second trigger operation on the option box.

7. The method according to claim 4, characterized in that, Before displaying the second interface and the first card on the second interface, the method further includes: The preview interface displays a preview interface, which includes at least one candidate style for the card corresponding to the first functional component.

8. The method according to any one of claims 1 to 7, characterized in that, The electronic device includes the association between functional components and cards.

9. The method according to any one of claims 1 to 8, characterized in that, The electronic device also includes card management services; The step of displaying a second interface in response to the first operation, and displaying the first card on the second interface, includes: In response to the first operation, the card management service obtains the card information corresponding to the first functional component based on the association between the functional component and the card; The card management service sends the card information to the application corresponding to the second interface; The application corresponding to the second interface displays the second interface, and displays the first card on the second interface based on the card information.

10. The method according to any one of claims 1 to 9, characterized in that, The second interface is the desktop interface, or the interface of the negative one screen.

11. An electronic device, characterized in that, include: A processor and a memory, the memory being coupled to the processor, the memory being used to store computer program code, the computer program code including computer instructions, wherein when the processor reads the computer instructions from the memory, the electronic device causes the electronic device to perform the method as described in any one of claims 1-10.

12. A chip system, characterized in that, The method includes at least one processor and at least one interface circuit, the at least one interface circuit being used to perform transceiver functions and send instructions to the at least one processor, the at least one processor executing the instructions, and the at least one processor performing the method as described in any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a computer program or instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1-10.

14. A computer program product, characterized in that, The computer program product includes: a computer program or instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1-10.

Images