Card display method and related equipment

Abstract

The invention provides a card display method and related equipment. By means of the method, an interface comprising a card is displayed for a user, operation of the user on the card is detected, a page for editing the card is entered, it is detected that the user selects a card style with a background animation, the background animation of the card style is previewed, then it is detected that the user applies the card style to the card, and the edited card is displayed. The edited card is displayed in the card style, and functions provided by the card before and after editing are not changed. Compared with a static display mode, the method has the advantages that visual experience is richer, and user experience can be improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a card display method and related equipment. Background Art

[0002] Cards, a quick service provided by the intelligent service assistant, can display more content than application icons. Users can set application-specific cards on the desktop or the negative first screen to easily view application-related content. For example, a weather card can display current weather information, and a memo card can display to-do items or reminders. Summary of the Invention

[0003] The present application provides a card display method and related devices, which can enhance visual effects and thus improve user experience.

[0004] In a first aspect, a card display method is applied to an electronic device, the method comprising: displaying a first interface, the first interface comprising a first card, the first card being displayed in a first card style, and the first card comprising first information; in response to a first operation on the first card, displaying a second interface, the second interface comprising a first preview area, a first control, a first style icon corresponding to the first card style, and a second style icon corresponding to the second card style, wherein the first preview area displays a preview effect of the first card style, and the first style icon is in a selected state; in response to a second operation on the second style icon, the second style icon is displayed in a selected state, and a preview effect of the second card style is displayed in the first preview area, the second card style comprising a first animation; in response to a third operation of clicking the first control, displaying a third interface, the third interface comprising a second card, the second card being displayed in a second card style, the second card comprising first information, and playing a second animation in the second card, the second animation having the same content as the first animation, wherein a layer corresponding to the first information is located above a layer where the second animation is located.

[0005] With the above solution, users can set a card style with background animation for the card displayed on the interface. Compared with the static card style, it is more flexible and vivid, and the visual experience is richer. Users can only change the card style for the card on the interface instead of changing the entire card. In addition, since the first card and the second card both include the first information, it can be understood that the functions provided to the user by the first card and the second card remain unchanged. In other words, the card style can be edited specifically for a card with a certain function. In other words, the card style can be changed for a card with a specified function, which simplifies the process of editing the card for the user and can improve the efficiency of editing the card style. Therefore, the user experience can be improved.

[0006] In a possible embodiment, the second card style includes a first foreground style, a second animation and a first background color, the layer where the first background color is located is below the layer where the second animation is located, the second style icon includes a first image, second information and a first background color, the first image is a frame image in the first animation, the second information in the second style icon is displayed as the first foreground style, the second information is part or all of the first information, and the layer where the first background color is located is below the layer where the first image is located.

[0007] The above solution displays the elements associated with the second card style through the second style icon, which can facilitate the user to see the partial display effect of the second card style before previewing the second card style, thereby improving the efficiency of the user in editing the card style.

[0008] In a possible embodiment, the first card style includes a second foreground style, a third animation and a second background color, the layer where the second background color is located is below the layer where the third animation is located, and the first style icon includes a second image, second information and a second background color; wherein, the first information in the first card displays the second foreground style, and the first information in the second card displays the first foreground style; wherein the third animation played in the first card has different content from the second animation, the second image is a frame image in the third animation, and the content of the second image is different from that of the first image; wherein the first card displays the second background color, and the second card displays the first background color; wherein the second foreground style is the same as the first foreground style, and / or the second background color is the same as the first background color.

[0009] The above solution allows users to change the background animation separately when changing the card style, providing users with refined card style editing options and more flexible editing methods. In addition, it provides users with a variety of card styles including background animations, enriching the user's selection range.

[0010] In a possible embodiment, in response to a first operation on a first card, a second interface is displayed, including: in response to a fourth operation of long pressing the first card, a second control is displayed, and the second control is used to trigger editing of the card style of the first card; in response to a fifth operation of clicking the second control, the second interface is displayed.

[0011] The above solution explicitly instructs the user to edit the style of the card through the second control, rather than replacing the entire card, thereby achieving refined editing.

[0012] In a possible embodiment, the first card is a card in a card set, the card set includes multiple cards, the type of the card set is the first card set type, the first card is displayed as the first card set type and the first card style, the type of the card set is used to indicate the combination method of the multiple cards, the second card is displayed as the first card set type and the second card style, the second interface also includes a third control, and the third control is in a selected state; displaying the preview effect of the second style in the first preview area includes: displaying the first preview card in the first preview area, the first preview card is displayed as the first card set type and the second card style, the first preview card includes third information, the third information is part or all of the first information, and playing the first animation in the first preview card.

[0013] The above solution allows you to preview the card set type while previewing the background animation of the card style, allowing users to check the overall effect of the card in a timely manner and improve card editing efficiency.

[0014] It should be noted that in this application, any card in the card set can enter the page for editing card style in response to the operation on the card to edit the card style of the card. In particular, for card set types that display multiple cards at the same time (such as Figure 1 In the "Weather Clock + Combination Service" card set type shown, in response to an operation on one of the multiple cards, after entering the card style editing page of the card, the styles of other cards in the multiple cards can also be edited on this page.

[0015] In a possible embodiment, the first card is a card in a card set, the card set includes multiple cards, the type of the card set is the first card set type, the first card is displayed as the first card set type and the first card style, the type of the card set is used to indicate the combination method of multiple cards, and the second card is displayed as the second card set type and the second card style; in response to the first operation on the first card, a second interface is displayed, including: in response to the fourth operation of long pressing the first card, a second control is displayed, the second control is used to trigger editing the card style of the first card; in response to the fifth operation of clicking the second control, a second interface is displayed, the second interface includes the first control, the second preview area and the third control, the third control is in a selected state, and the third control is in the same state as the first card set type type association; in response to the sixth operation on the second interface, the first preview area, the fourth control, the third style icon corresponding to the third card style, the first style icon and the second style icon are displayed on the second interface, the fourth control is associated with the second card set type, the fourth control is in an unselected state, the third style icon is in a selected state, the second preview card is displayed in the first preview area, the second preview card displays the second card set type and the third card style, and the first style icon and the second style icon are both in an unselected state; in response to the seventh operation on the fourth control, the fourth control is displayed in a selected state, the first style icon is displayed in a selected state, the third preview card is displayed in the first preview area, and the third preview card displays the second card set type and the first card style.

[0016] The above solution can change the card style while changing the card set type, making user operation more convenient.

[0017] It is understood that when the first card style has a background animation and the second card has a different card set type than the first card, the first card style and the second card style can be the same or different. In this application, the first card style and the second card style are mainly different as an example. In other cases, the first card style and the second card style are different.

[0018] In a possible embodiment, displaying the second style preview effect in the first preview area includes: displaying a fourth preview card in the first preview area, the fourth preview card being displayed as the second card set type and the second card style, and playing the first animation on the fourth preview card.

[0019] The above solution allows you to preview the cards after changing the card set type and card style directly in the preview area, improving card editing efficiency.

[0020] In a possible embodiment, playing the second animation on the second card includes: stopping playing the second animation after the second card plays the second animation a preset number of times.

[0021] The above solution sets a preset number of times, which can save power consumption compared to continuously playing the second animation.

[0022] In a possible embodiment, after the second card stops playing the second animation, the second card displays a third image, the third image is the last frame in the second animation, and the layer corresponding to the first information is located above the layer where the third image is located. The method also includes: in response to the user's eighth operation, displaying the fourth interface, the fourth interface includes the second card, and stopping playing after the second card plays the second animation a preset number of times; wherein the eighth operation includes: the operation of unlocking the electronic device in the lock screen state, or the operation of restarting the electronic device, or the operation of sliding on other interfaces other than the fourth interface.

[0023] In the above solution, the second animation will be played again after unlocking or restarting the electronic device, or returning to the page including the second card from other pages, which can further enhance the user's visual experience.

[0024] In a possible embodiment, the second card is a card in a card set, and the card set also includes a third card. In response to a third operation of clicking the first control, a third interface is displayed, including: in response to the third operation, a fifth interface is displayed, and the fifth interface includes the third card; in response to a ninth operation of the user sliding the third card, or in response to a tenth operation of the electronic device automatically sliding the third card, a third interface is displayed, and the third interface includes the second card, wherein the position of the third card in the fifth interface is the same as the position of the second card in the third interface.

[0025] The above solution displays the second card by sliding the third card covering the second card, providing more ways to display the card set and giving users more choices.

[0026] In a possible embodiment, in response to the third operation, displaying the fifth interface includes: in response to the third operation, displaying the sixth interface, the sixth interface including a service capsule, the service capsule being associated with the type of the card set; and in response to an eleventh operation of clicking the service capsule, displaying the fifth interface.

[0027] In the above solution, when the card set type involves a service capsule, the capsule needs to be clicked before the card is displayed and the animation plays. Providing more display methods for the card set gives users more options.

[0028] In a possible embodiment, the method also includes: when the second card is displayed on the third interface, a push card is displayed, the push card covers the second card, the push card is associated with the demand scenario, and the push card includes fourth information, which is information provided to the user under the demand scenario; in response to the user's twelfth operation on the push card, the second card is redisplayed, and after the second card plays the second animation a preset number of times, the playback is stopped.

[0029] In the above solution, if the second card is covered by the pushed card, the second card can still play the animation after the user swipes the pushed card, which can further enhance the user's visual experience.

[0030] In a possible embodiment, the first information is associated with a weather function, a clock function, or a calendar function; the first information includes at least one of the following: date information, time information, current location information, and current weather information at the current location.

[0031] That said, let's give a specific example for a card: a weather clock card.

[0032] In a possible embodiment, the method includes: using a desktop application to obtain a first JSON file from a first application, the first JSON file is used to configure a second card style, the first JSON file includes a first foreground resource, a first background resource, a first background color resource and a first animation resource; displaying a second style icon on the second interface based on the first foreground resource, the first background resource and the first background color resource; displaying a preview effect of the second card style in the first preview area, including: displaying a preview effect of the second card style in the first preview area based on the first foreground resource, the first background color resource and the first animation resource.

[0033] The above solution uses the desktop application to obtain the first JSON file from the weather APK in order to preview the card style.

[0034] In a possible embodiment, playing the second animation in the second card includes: using the first application to obtain a first JSON file, the first JSON file is used to configure the second card style, the first JSON file includes a first foreground resource, a first background resource, a first background color resource and a first animation resource; the electronic device is in a screen-on state, and the second card is displayed according to the first JSON file, and the second card displays the second card style, wherein displaying the second card according to the first JSON file includes: playing the second animation in the second card according to the first animation resource.

[0035] The above solution, after obtaining the first JSON file, plays the second animation in the bright screen state, which can improve the user experience.

[0036] In a possible embodiment, obtaining a first JSON file using a first application includes: obtaining a second JSON file, parsing the second JSON file, and generating a correspondence between the second JSON file and the first file identifier, wherein the second JSON file includes the first JSON file; in response to a second operation, storing a second file identifier using a desktop application, the second file identifier corresponds to a second card style, and the first file identifier includes the second file identifier; in response to a third operation, obtaining the first JSON file based on the second file identifier and the correspondence using the first application.

[0037] That is to say, a one-to-one correspondence between the second JSON file and the second file identifier is first established. The second JSON file is used to configure the card style. That is to say, the card style also corresponds one-to-one to the second file identifier. Then, the corresponding first file identifier is stored according to the card style selected by the user. The corresponding first JSON file can be obtained according to the first file identifier.

[0038] In a possible embodiment, playing the second animation according to the first animation resource on the second card includes: playing the second animation according to the first animation resource on the second card when a preset condition is not met; wherein the preset condition includes: the power level of the electronic device is less than or equal to a power threshold; or, the method further includes: detecting a thirteenth operation of the user unlocking the electronic device, and determining that the electronic device is in a screen-on state; the preset condition includes: before detecting the thirteenth operation, also detecting a fourteenth operation of the user unlocking the electronic device, and the interval between the time when the thirteenth operation is detected and the time when the fourteenth operation is detected is less than or equal to a time threshold.

[0039] On the one hand, when the power of the electronic device is low, the animation will not be played, and when the power is sufficient, the animation will be played, which can save power consumption.

[0040] On the other hand, if the interval between two adjacent unlocking times is too short, the animation will not be played when the screen is unlocked for the last time, which can save power consumption.

[0041] In a possible embodiment, after stopping the second animation, the last frame image in the second animation is displayed on the second card. The method also includes: in response to the fifteenth operation of the user locking the screen, setting the animation view corresponding to the second card to the first frame image of the second animation; in response to the sixteenth operation of the user unlocking the electronic device, playing the second animation from the first frame image on the second card.

[0042] In the above solution, the animation stops at the last frame after playback. After locking the screen, it will be set to start from the first frame, so that playback can resume from the first frame after unlocking. This avoids jumping directly from the last frame to the first frame, which visually causes frame skipping, and improves visual smoothness.

[0043] In a second aspect, the present application provides an electronic device comprising one or more processors and one or more memories; wherein the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program code, and the computer program code comprises computer instructions. When the one or more processors execute the computer instructions, the electronic device executes the method described in the first aspect and any possible implementation of the first aspect.

[0044] In a third aspect, an embodiment of the present application provides a chip system, which is applied to an electronic device. The chip system includes one or more processors, which are used to call computer instructions to enable the electronic device to execute the method described in the first aspect and any possible implementation method of the first aspect.

[0045] In a fourth aspect, the present application provides a computer-readable storage medium comprising instructions, which, when executed on an electronic device, enables the electronic device to execute the method described in the first aspect and any possible implementation of the first aspect.

[0046] In a fifth aspect, the present application provides a computer program product comprising instructions, which, when executed on an electronic device, enables the electronic device to execute the method described in the first aspect and any possible implementation of the first aspect.

[0047] It is understandable that the electronic device provided in the second aspect, the chip system provided in the third aspect, the computer storage medium provided in the fourth aspect, and the computer program product provided in the fifth aspect are all used to perform the methods provided in this application. Therefore, the beneficial effects that can be achieved can be referred to the beneficial effects of the corresponding methods and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a set of interfaces of the card display method provided in an embodiment of the present application;

[0049] Figure 2 A schematic diagram of multiple frames of images during playback of a first animation provided by an embodiment of the present application;

[0050] Figure 3 A schematic diagram of style icons associated with two different card styles provided in an embodiment of the present application;

[0051] Figure 4 A schematic diagram of an example of a first card displayed in a dynamic card style provided in an embodiment of the present application;

[0052] Figure 5 A possible implementation of the first operation provided in the embodiment of the present application;

[0053] Figure 6 A schematic diagram of another set of interfaces of the card display method provided in an embodiment of the present application;

[0054] Figure 7 A schematic diagram of another set of interfaces of the card display method provided in an embodiment of the present application;

[0055] Figure 8 A schematic diagram of a set of interfaces of the card display method provided in an embodiment of the present application;

[0056] Figure 9 A schematic diagram of an example interface of the card display method provided in an embodiment of the present application;

[0057] Figure 10 A schematic diagram of a set of interfaces of the card display method provided in an embodiment of the present application;

[0058] Figure 11 A schematic diagram of an example interface of the card display method provided in an embodiment of the present application;

[0059] Figure 12 A schematic diagram of a set of interfaces of the card display method provided in an embodiment of the present application;

[0060] Figure 13 A schematic diagram of an example interface of the card display method provided in an embodiment of the present application;

[0061] Figure 14 A scene diagram of an example of playing a second animation provided in an embodiment of the present application;

[0062] Figure 15 A scene diagram of another example of playing a second animation provided in an embodiment of the present application;

[0063] Figure 16 A scene diagram of another example of playing a second animation provided in an embodiment of the present application;

[0064] Figure 17 A scene diagram of another example of playing a second animation provided in an embodiment of the present application;

[0065] Figure 18 A scene diagram of another example of playing a second animation provided in an embodiment of the present application;

[0066] Figure 19 A schematic diagram of the hardware structure of an electronic device 1000 provided in an embodiment of the present application;

[0067] Figure 20 A diagram of the software system architecture provided for the embodiments of this application;

[0068] Figure 21This is a flowchart illustrating an example of executing a frame animation when a user changes a card style according to an embodiment of the present application;

[0069] Figure 22 This is an example diagram of an interaction in which a frame animation is executed when a user changes a card style according to an embodiment of the present application;

[0070] Figure 23 This is another example of an interaction diagram of executing a frame animation when a user changes a card style according to an embodiment of the present application;

[0071] Figure 24 This is another interactive example diagram of executing frame animation when the user changes the card style provided in an embodiment of the present application. DETAILED DESCRIPTION

[0072] In order to make the objectives, technical solutions and advantages of this application clearer, the implementation methods of this application will be further described in detail below with reference to the accompanying drawings.

[0073] In order to more clearly explain the technical solution of this application, the concepts involved in this application are explained as follows:

[0074] 1. Cards are a smart service that can conveniently display application (APP) information to users. Cards can usually display content related to application push, or they can display content of a service of the application.

[0075] Specifically, cards are primarily displayed on the desktop and negative screen of electronic devices. The content displayed on the cards is derived from data provided by the application after it is launched. Cards can include images, text, links, and other content related to the application.

[0076] The card may include a widget card, such as a YOYO card.

[0077] Among them, the widget card is associated with a third-party application, and its content is generally provided by the third-party application, that is, the content displayed by the widget card follows the third-party application, and can intuitively display the relevant content of the third-party application, or the relevant content of one or several services of the third-party application.

[0078] Among them, YOYO card is a way to display the YOYO suggestion function. The YOYO suggestion function is displayed in two ways: YOYO suggestion card set and APP suggestion. The YOYO suggestion card set will provide real-time intelligent reminder services according to the needs of users, such as schedule, ride (train), boarding and other information, and will not be displayed if it is not in the corresponding scene (the card set on the desktop only displays time, weather and other information if it is not in the corresponding scene). For example, in the YOYO suggestion card set, the YOYO card that provides real-time intelligent reminder services according to the needs of users can be called a push card. In other words, the scene where the push card is displayed can be called the user's demand scene. If you are not in the corresponding scene, the push card will not be displayed, and YOYO cards such as weather clock cards and sports health cards can be displayed.

[0079] This application mainly uses the YOYO card as an example for explanation, and can also be applied to other widget cards; and the YOYO card can also be called an application card or a message card, etc., without limitation.

[0080] 2. A card set includes one or more cards. The card set type indicates the display size and display effect of the one or more cards. If a card set includes multiple cards, the card set type is used to set the combination of multiple cards, or in other words, the card set type is displayed as the combination of multiple cards.

[0081] For example, card set type 1: weather clock + combination service, indicating: the display size of the weather clock card is 2*2, and the display size of the combination service is 2*2; and the display effect of the weather clock and the combination service is that the card set is directly displayed on the desktop or the negative one screen, and the weather clock and the combination service can be displayed at the same time. Among them, the combination service includes at least two cards. For example, the combination service includes a sports health card and a YOYO smart recommendation card. The display size of the sports health card is 2*1, and the display size of the YOYO smart recommendation card is 2*1. For example, the display effects of the weather clock, YOYO smart recommendation card and sports health card can be seen in Figure 1 Card 101, card 102 and card 103 in.

[0082] For example, card set type 2: weather clock card style indicates: the display size of the weather clock card is 4*2, and the display size of other cards in the card set except the weather clock card is also 4*2; and the weather clock display effect is that the card set is directly displayed on the desktop or negative one screen, and one card in the card set is displayed at a time. For example, you can refer to Figure 6 Card 201 in. When the operation of sliding the weather clock card is detected, other cards in the card set except the weather clock card can be displayed; similarly, when the operation of sliding other cards is detected, the weather clock card can be displayed.

[0083] For example, card set type 3: Weather clock + service capsule indicates: the display size of the weather clock card is 4*2, and the display size of other cards in the card set except the weather clock card is also 4*2; and the weather clock display effect is that the service capsule is displayed on the desktop or the negative one screen first, and when the user clicks the service capsule, a card in the card set (which can be a weather clock card or other card) is displayed, and when the user slides the card, another card is displayed. For example, you can refer to Figure 7 Service capsule 371, card 381 and card 391 in.

[0084] 3. Card styles, from top to bottom according to the layer order, include: foreground style, background animation and background color.

[0085] For example, a card is displayed in a certain card style, which means that the first information included in the card is displayed in the foreground style, the background animation of the style is played in the card, and the background color of the card is the background color of the style. Figure 1 Card 131 in.

[0086] 4. The style icon corresponds to the card style. Optionally, the style icon displays the content associated with the card style.

[0087] For example, the style icon includes the second information, image, and background color from top to bottom according to the layer order. The style icon corresponds to the card style. It is understood that the second information is displayed as the foreground style, the image is a frame in the background animation, and the style icon displays the background color. For example, you can refer to Figure 1 The first image 124a, the first animation 122 and the second animation 132 in FIG.

[0088] It should be noted that the size of the image can be different from the size of a frame image in the background animation. The size of the image is displayed according to the size of the style icon, and the size of the background animation is displayed according to the size of the preview card or the actual card.

[0089] The types of the first information are greater than or equal to the types of the second information. For example, the first information includes weather information, clock information, and calendar information; and the second information includes clock information.

[0090] 5. Real cards are the cards that are ultimately displayed on the desktop or the negative one screen. The content in real cards needs to be obtained from the corresponding application of the card. The cards shown above as a certain card style are real cards.

[0091] For example, the real card can be Figure 1 As shown in card 131 in (d).

[0092] 6. Preview cards are cards in preview mode. Preview cards can display the card set type and / or card style of the actual card, making it easier for users to preview the card set type and / or card style of the actual card. Preview cards can only include a portion of the content of the actual card. Of course, for better display effect, the preview card can also display the card content as comprehensively as possible, that is, fill the preview card with the card content as much as possible, so that the preview card's display effect is closer to the actual card.

[0093] It is understandable that loading a preview card does not require launching the application corresponding to the card. The preview card can be created and loaded through the card configuration file. For example, in this application, the desktop application obtains the card JSON file (a file used to configure the card style) from the weather application, and can create and load the preview card based on the JSON file.

[0094] For example, a preview card may include a background animation so that the user can see a preview of the background animation. Optionally, the preview card may also include a background color or third information. The type of the first information is greater than or equal to the type of the third information. For example, the first information includes weather information, clock information, and calendar information; the third information includes clock information. Exemplarily, the third information is of the same type as the second information.

[0095] For example, the preview card can be as follows Figure 1 As shown in the first preview card 112 in (b) of FIG. 1 , the Figure 1 As shown in the first preview card 121 in (c), the preview card can only display part of the content of the real card.

[0096] For example, in the first preview card 121 , all text except “11:30” is represented by a gray box, while in the card 131 , all text is fully displayed.

[0097] In combination with the above, we can see that: for the style icon, real card and preview card corresponding to the same card style, the preview card can include only part of the content of the real card, or it can display the card content as comprehensively as possible; background animation can be played in the preview card and the real card; the style icon does not include background animation, and the style icon includes an image, which is a frame of the background animation; the foreground style and background color displayed by the style icon, real card and preview card are the same; the second information can be the same as the third information.

[0098] Currently, cards on the desktop or the negative one screen all display card information statically, and the visual experience is monotonous.

[0099] In a related technology, an interface displays a widget card, which is used to provide a first function. The first function includes one or more functions, such as a weather function, a clock function, or a calendar function, any one function or a combination of at least two functions. Long press the widget card to enter the widget card replacement page. That is, on this page, the user can replace the entire widget card. For example, the page can display all widget cards that the electronic device can provide. For example, the first function is the weather and time function, and the page displays widget cards that provide weather functions, or clock functions, or weather and time functions, etc. It also displays widget cards that provide office functions (such as notepad, meeting functions), and also displays widget cards that provide audio and video functions (such as video playback functions).

[0100] In other words, in this related technology, widgets displayed on the desktop cannot be directly edited; the only option is to replace the entire widget. This also complicates the user's widget replacement process by mixing widgets that provide the same or different functions as the widget. For example, if a user still needs the widget that provides the primary function but wants to change the widget background, they must first manually filter out the widgets provided on the page and then select their preferred widget background, resulting in a poor user experience.

[0101] In view of this, the present application provides a card display method, which displays an interface including a card to the user, detects the user's operation on the card, enters the page for editing the card, detects the user selecting a card style with background animation, previews the background animation of the card style, and then detects the user applying the card style to the card, displays the edited card, and the edited card is displayed in the card style. In addition, the functions provided by the cards before and after editing remain unchanged.

[0102] With the above solution, users can set a card style with background animation for the cards displayed on the interface, providing a richer visual experience compared to static display methods. Users can change only the card style of the card on the interface instead of replacing the entire card. In other words, they can change the card style of cards with specific functions. Compared with related solutions, this simplifies the user editing process and improves the efficiency of editing card styles. Therefore, it can enhance the user experience.

[0103] In some embodiments, a card includes text information, a background animation, and a background. The background animation is located on a layer below the text information layer, and the background is located on a layer below the background animation layer. A card's card style includes one or more of the following: the text information's foreground style, background color, or background animation. You can change any one or two of these individually, or all three simultaneously.

[0104] Compared with related solutions, the above solution provides users with refined card style editing options, and the way of editing card styles is more flexible.

[0105] The card display method provided by this application is described in detail below with reference to the accompanying drawings.

[0106] Figure 1 A schematic diagram of a set of interfaces for the card display method provided in an embodiment of the present application.

[0107] like Figure 1 As shown in (a) of FIG. 1 , an interface 100 (as a possible example of a first interface) is displayed. In the interface 100 , a card 101 (as a possible example of a first card) is included. The card 101 is displayed in a first card style.

[0108] The first card style may be a static card style or a dynamic card style (a card style with an animation display effect). In the interface 100 , the card 101 is shown as a static card style as an example.

[0109] Among them, card 101 includes first information, and the first information is associated with the function of the first application, or in other words, the first information provides the function of the first application. For example, the first information includes the current date "9 / 10 Tuesday", which provides a calendar function; the first information includes the current time 11:03, which provides a clock function; the first information includes the current location of the electronic device "Taiyuan", the current temperature 17°C, and the current weather is cloudy (indicated by clouds blocking half of the sun in the figure), which provides a weather function. The first information also includes the title of card 101 "YOYO Suggested Weather Clock", indicating that card 101 is a weather clock card in the YOYO suggested card set.

[0110] Interface 100 also includes cards for combined services, such as card 102 and card 103. Card 102 is a sports and health card in the YOYO recommended card set. For example, the sports and health card includes today's step count (such as 2315 steps) and the three-ring exercise status. If it is detected that the user clicks on the sports and health card, the interface of the sports and health application is displayed. Card 103 is a YOYO smart recommendation card. If it is detected that the user clicks on the YOYO smart recommendation card, the interface of the YOYO smart recommendation application is displayed.

[0111] Alternatively, the cards of the combined service may also include cards that provide other functions, such as gallery cards, music cards, etc., which is not limited in this application.

[0112] It is understood that interface 100 shows one type of YOYO suggested card set, namely "Weather Clock + Combined Services." For example, card 101 is 2*2 in size, and cards 102 and 103 are 2*1 in size. YOYO suggested card sets also include other card set types, such as "Weather Clock Card Style" or "Weather Clock + Service Capsule." The following details the combination of other card set types with the card display method provided in embodiments of the present application.

[0113] In response to the first operation on card 101, the following is displayed: Figure 1 The interface 110 shown in (b) in FIG. 10 (as a possible implementation of the second interface) includes a page for editing the card style for the card 101 .

[0114] The page mainly includes three areas: the first area is the preview area, which is used to preview the card style; the second area is the icon area of the weather clock card, which is used to display multiple card styles; the third area includes the "Apply to Desktop" control, which is used to apply the card style selected by the user to the desktop. Optionally, it can also include a fourth area, the style icon area of other cards in the YOYO suggestion card set (such as card 102), which is used to display multiple card styles of other cards.

[0115] For example, in interface 110, the first area includes a first preview area 111 and an incompletely displayed other preview area 113. First preview area 111 includes a first preview card 112 for card 101, preview cards for cards 102 and 103, and a third control 114. Third control 114 is selected, indicating that the card set type of card 101 is "Weather Clock + Combination Service."

[0116] For example, in the interface 110 , the second area includes multiple style icons of a weather clock card.

[0117] The style icon 116 (as an example of a first style icon) is in a selected state, indicating that the current card style of the card 101 is the style displayed by the style icon 116. The first style icon corresponds to the first card style.

[0118] Style icon 117 and style icon 118 are examples of two dynamic card styles. The second style icon corresponds to the second card style. For example, style icon 118 (as an example of the second style icon) includes background color 118a and first image 118b. The first card style is different from the second card style.

[0119] It can be understood that the image in the style icon of the dynamic card style is a frame in the background animation of the dynamic card style.

[0120] For example, in the interface 110 , the third area includes a first control 115 , the name of which is “Apply to Desktop”, and is used to apply the card style selected by the user to the desktop.

[0121] For example, in the interface 110, the fourth area includes multiple style icons of the sports health card, such as style icon 125, style icon 126 and style icon 127, corresponding to style 1, style 2 and style 3, respectively. Style icon 125 is selected, and style icon 125 shows that the number of steps today is 2315 steps. Style icon 126 shows that the calorie consumption is 220 kcal, and style icon 127 shows that the exercise time is 30 minutes. If the user wants to change the card style of the sports health card to style 2, he can click style icon 126 and click the first control 115. In response to the operation of clicking style icon 126, in the first preview area, the preview card of card 102 displays the preview effect of style 2. In response to the operation of clicking the first control 115, the desktop will display card 102', and card 102' is displayed as style 2.

[0122] Optionally, in response to the operation of sliding the fourth area to the left, other styles of icons of the sports health card can also be displayed.

[0123] Optionally, in response to the operation of sliding up the interface 110, the fourth area displays multiple style icons of the YOYO smart recommendation card. Similar to the sports and health card, the user can choose to change the style of the YOYO smart recommendation card.

[0124] For example, the multiple style icons in interface 110 are adapted to the theme of the electronic device. That is, the background animation in the weather clock card can be customized for the user based on the theme currently applied to the electronic device, for the user to select. In other words, if the electronic device applies Theme A and Theme B respectively, the background animation in the card style provided for the first card in interface 110 may be different.

[0125] In response to a second operation on the second style icon, for example, clicking the style icon 118, the following is displayed: Figure 1 The interface 120 shown in (c) in FIG.

[0126] For example, in the interface 120, the style icon 123 (as an example of the first style icon) is unselected, and the style icon 124 (as an example of the second style icon) is selected. The first preview card 121 is displayed in the first preview area 111, and the first animation 122 is played in the first preview card 121.

[0127] Figure 2 A schematic diagram of multiple frames of images during the first animation playback process provided in an embodiment of the present application.

[0128] Figure 2 (a) shows any three frames of images during the playback of the first animation 122, and are arranged from left to right in the playback order. Optionally, the leftmost frame is the first frame of the first animation 122, and the rightmost frame is the last frame of the first animation 122.

[0129] As can be seen from the combination of the style icon 124 and the first animation 122 , the first image 124 a is a frame image in the first animation 122 .

[0130] For example, the first animation 122 is played continuously to facilitate the user to see the animation content clearly, or is played for a preset number of times before being stopped to save power.

[0131] In response to the operation of clicking the first control 115, the following is displayed: Figure 1 The interface 130 shown in (d) (as an example of the third interface).

[0132] For example, interface 130 includes card 131 (as an example of a second card). Card 131 is displayed in the second card style and includes the first information. A second animation 132 is played on card 131. The second animation 132 has the same content as the first animation 122. The second animation 132 and the first animation 122 may be the same or different in size. The layer corresponding to the first information is located above the layer containing the second animation. Card 131 also includes a background color 133, and the layer containing the background color is located below the layer containing the second animation.

[0133] Figure 2 (b) shows any three frames of images during the playback of the second animation 132, and are arranged from left to right in the playback order. Optionally, the leftmost frame is the first frame of the second animation 132, and the rightmost frame is the last frame of the second animation 132.

[0134] As can be seen from the combination of the style icon 124 and the second animation 132 , the first image 124 a is a frame image in the second animation 132 .

[0135] For example, the second animation 132 is played continuously to facilitate the user to see the animation content clearly, or is played for a preset number of times and then stopped to save power. For example, the preset number of times is 1.

[0136] For example, among the multiple card styles available for user selection, different card styles have different animation contents, and thus the images in the style icons corresponding to different card styles are also different.

[0137] Optionally, the card style may include, but is not limited to, one or more of the following: foreground style, background color. Different card styles may have the same or different foreground styles; and different card styles may have the same or different background colors.

[0138] The above solution provides users with refined card style editing options, making the way of editing card styles more flexible.

[0139] Figure 3 This is a schematic diagram of two different style icons provided in an embodiment of the present application. Different style icons correspond to different card styles. The style icons 117 and 118 in the interface 120 are used as examples for illustration.

[0140] like Figure 3 As shown in (a) in FIG. 1 , the background colors and animations of style icon 117 and style icon 118 are different, but the foreground styles are the same.

[0141] like Figure 3 As shown in (b) in FIG. 1 , the foreground styles and animations of style icon 117 and style icon 118 are different, but the background colors are the same.

[0142] like Figure 3 As shown in (c) in FIG. 1 , the background color, animation, and foreground style of style icon 117 and style icon 118 are different.

[0143] Understandable, Figure 1 In the description, the first card style is a static card style. Alternatively, the first card style may also be a dynamic card style.

[0144] Figure 4 A schematic diagram of a first card displayed in a dynamic card style provided in an embodiment of the present application.

[0145] In one possible implementation, the card 10 in the interface 100 is replaced with Figure 4 Card 101' is shown. Animation 104 (as an example of the third animation) is played in card 101'. First preview card 112 in interface 110 can be replaced with first preview card 112'. Animation 112'a is previewed in first preview card 112'. Style icon 116 in interface 110 is selected and replaced with style icon 117. Style icon 117 includes second image 117a. First preview card 123 in interface 120 is replaced with first preview card 123'.

[0146] For example, if the first card style is a dynamic card style, in card 101' (as an example of the first card), the first information is displayed in the first foreground style, and animation 104 is played in the first card. The content of animation 104 is different from that of second animation 132. Style icon 117 is selected and includes second image 117a. Second image 117a is a frame image in animation 104. The content of second image 117a is different from that of first image 118b. In card 131, the first information is also displayed in the first foreground style.

[0147] Alternatively, the style icon 117 may also refer to Figure 3 The possible implementation methods and related descriptions are not detailed here.

[0148] Exemplarily, the first operation can be a manual operation by the user, or it can be achieved through voice control after the user wakes up the voice assistant.

[0149] Figure 5 This is a possible implementation of the first operation provided in the embodiment of the present application.

[0150] like Figure 5 As shown in (a) in the interface 100, in response to the operation of long pressing the first card, the following is displayed: Figure 5 Interface 140 shown in (b) of FIG. Interface 140 includes a drop-down bar 141, which includes a second control 142. For example, second control 142 displays the text "Edit Default Style," indicating that the default style of card 101 can be edited. Second control 142 indicates that the card style and / or card set type of card 101 can be edited.

[0151] like Figure 5 As shown in (b) in FIG, in response to the operation of clicking the second control 142, the interface 110 is displayed.

[0152] That is, the first operation includes long pressing the first card and clicking the second control 142 .

[0153] The above solution enables refined editing and improves the user experience by explicitly instructing users to edit the style of the card instead of replacing the entire card.

[0154] In another possible implementation, the first operation is long pressing the first card.

[0155] Exemplarily, the first card may be a card in the YOYO suggested card set, which includes multiple cards. If the type of the YOYO suggested card set is the first card set type, the first card is displayed as the first card set type and the first card style. If the user does not change the type of the YOYO suggested card set while editing the first card, the second card is displayed as the first card set type and the second card style. Alternatively, if the user changes the type of the YOYO suggested card set while editing the first card, the second card is displayed as the second card set type and the second card style. The second card set type is different from the first card set type.

[0156] It is understandable that the above solution is mainly explained by taking the case where the type of YOYO suggested card set is not changed and the first card set type is "weather clock + combination service". Figures 6 and 7 , introduce the example of not changing the type of YOYO suggested card set, and the first card set type is other card set types. Figures 8 to 13 An example of changing the type of the YOYO suggestion card set is given.

[0157] Figure 6 A schematic diagram of another set of interfaces for the card display method provided in an embodiment of the present application.

[0158] Figure 6 As shown in (a) of FIG. 1 , the interface 200 (as an example of the first interface) includes a card 201 (as an example of the first card). For example, the size of the card 201 is 4*2.

[0159] In response to the long press operation of card 201, the following is displayed: Figure 6 Interface 210 shown in (b) of FIG. Interface 210 includes a drop-down bar 211, which includes a second control 212. For example, second control 212 displays the text "Edit Default Style," indicating that the default style of card 201 can be edited. Second control 212 indicates that the card style and / or card set type of card 201 can be edited.

[0160] In response to the operation of clicking the second control 212, the following is displayed: Figure 6 The interface 220 shown in (c) in FIG. 2 (as a possible implementation of the second interface) includes a page for editing the card style for the card 201 .

[0161] Among them, this page mainly includes three areas, and you can refer to the relevant description of interface 110 above.

[0162] For example, in interface 220, the first area includes a first preview area 221, as well as other preview areas 222 and 223 that are not fully displayed. First preview area 221 includes a preview card for card 201 and a third control 227. Third control 227 is selected, indicating that the card set type of card 201 is "Weather Clock Card Style."

[0163] For example, in the interface 220 , the second area includes multiple style icons of the weather clock card, such as style icon 224 and style icon 225 .

[0164] The style icon 224 (as an example of the first style icon) is in a selected state, indicating that the card style of the card 201 is the style displayed by the style icon 224. The style icon 224 corresponds to the first card style.

[0165] For example, in the interface 220 , the third area includes a first control 226 , the name of which is “Apply to Desktop”, and is used to apply the card style selected by the user to the desktop.

[0166] Among them, the operation of long pressing the card 201 and the operation of clicking the second control 212 can be used as an example of the first operation.

[0167] In response to the user sliding the second area of the interface 220 (eg, sliding left), the following is displayed: Figure 6 Interface 230 shown in (d) in FIG.

[0168] Comparing interface 220 and interface 230 , it can be seen that after detecting the user's sliding operation, other style icons are displayed, such as style icon 225 (as an example of a second style icon) and style icon 231. Among them, style icon 225 is an example of a dynamic card style, including background color 233 and first image 222.

[0169] It can be understood that the image in the style icon of the dynamic card style is a frame in the background animation of the dynamic card style.

[0170] In response to an operation of clicking the style icon 225 (as an example of a second operation), the following is displayed: Figure 6 Interface 240 shown in (e) in FIG.

[0171] For example, the interface 240 includes a first preview area 241, a first preview card 142 is displayed in the first preview area 241, and a first animation 243 is played in the first preview card 142. A style icon 244 (as an example of a second style icon) is in a selected state.

[0172] For details of the first animation 243 , please refer to the above description of the first animation 122 .

[0173] In response to the operation of clicking the first control 226, the following is displayed: Figure 6 Interface 250 shown in (f) in FIG.

[0174] For example, interface 250 includes card 251 (as an example of a second card). Card 251 is displayed in the second card style, includes first information, and plays second animation 252. The second animation 252 has the same content as the first animation 243. The sizes of the second animation 252 and the first animation 243 can be the same or different. The layer corresponding to the first information is located above the layer where the second animation is located.

[0175] The second animation 252 may be specifically described in the above description of the first animation 131 .

[0176] Figure 7 A schematic diagram of another set of interfaces for the card display method provided in an embodiment of the present application.

[0177] Figure 7 As shown in (a) of FIG, interface 300 (as an example of the first interface) includes a fifth control 301. The fifth control 301 can be called a service capsule 301, which is used to open the YOYO suggestion card set. The service capsule can display all or part of the information of any card in the YOYO suggestion card set.

[0178] In response to the operation of clicking the fifth control 301, the following is displayed: Figure 7 Interface 310 shown in (b) in FIG.

[0179] For example, the interface 310 includes a card 311 , such as a sports and health card, and the fifth control 301 displays part of the information in the card 311 .

[0180] In response to the user sliding the card 311 (eg, sliding left, right, up or down, etc.), the display Figure 7 Interface 320 shown in (c) in FIG.

[0181] For example, the interface 320 includes a card 321 (as an example of a first card). For example, the size of the card 321 is 4*2.

[0182] In response to the long press operation of card 321, the following is displayed: Figure 7 Interface 330 shown in (d) of FIG. Interface 330 includes a drop-down bar 332, which includes a second control 333. For example, second control 333 displays the text "Edit Default Style," indicating that the default style of card 321 can be edited. Second control 333 indicates that the card style and / or card set type of card 321 can be edited.

[0183] In response to the operation of clicking the second control 333, the following is displayed: Figure 7 The interface 340 shown in (e) in FIG. 3 (as a possible implementation of the second interface) includes a page for editing the card style for the card 321 .

[0184] Among them, this page mainly includes three areas, and you can refer to the relevant description of interface 110 above.

[0185] For example, in interface 340, the first area includes a first preview area 341 and an incompletely displayed other preview area 345. First preview area 341 includes a preview card for card 321 and a third control 346. Third control 346 is selected, indicating that the card set type of card 321 is "Weather Clock + Service Capsule."

[0186] For example, in interface 340 , the second area includes multiple style icons of the weather clock card, such as style icon 342 and style icon 343 .

[0187] The style icon 342 (as an example of the first style icon) is in a selected state, indicating that the card style of the card 321 is the style displayed by the style icon 342. The style icon 342 corresponds to the first card style.

[0188] For example, in the interface 340 , the third area includes a first control 344 , the name of which is “Apply to Desktop”, and is used to apply the card style selected by the user to the desktop.

[0189] Among them, the operation of long pressing the card 321 and the operation of clicking the second control 333 can be used as an example of the first operation.

[0190] In response to the user sliding the second area of the interface 340 (eg, sliding left), the following is displayed: Figure 7 Interface 350 shown in (f) in FIG.

[0191] Comparing interface 340 and interface 350, it can be seen that after detecting the user's sliding operation, other style icons are displayed, such as style icon 343 (as an example of a second style icon) and style icon 351. Among them, style icon 343 is an example of a dynamic card style, including background color 353 and first image 352.

[0192] It can be understood that the image in the style icon of the dynamic card style is a frame in the background animation of the dynamic card style.

[0193] In response to an operation of clicking the style icon 343 (as an example of a second operation), the following is displayed: Figure 7 Interface 360 shown in (g).

[0194] For example, the interface 360 includes a first preview area 361, a first preview card 362 is displayed in the first preview area 361, and a first animation 363 is played in the first preview card 362. A style icon 364 (as an example of a second style icon) is in a selected state.

[0195] For details of the first animation 363 , please refer to the above description of the first animation 122 .

[0196] In response to the operation of clicking the first control 344, the following is displayed: Figure 7 Interface 370 shown in (h).

[0197] For example, the interface 370 includes a service capsule 371. For details, please refer to the above description of the service capsule 301.

[0198] In response to the operation of clicking the service capsule 371, the following is displayed: Figure 7 Interface 380 shown in (i) (as an example of the fifth interface).

[0199] For example, the interface 380 includes a card 381 , such as a sports and health card, and the service capsule 371 displays part of the information in the card 381 .

[0200] In response to the user sliding the card 381 (e.g., sliding left, right, up or down, etc.), the display Figure 7 Interface 390 shown in (j).

[0201] For example, interface 390 includes card 391 (as an example of a second card). Card 391 is displayed in the second card style, includes first information, and plays second animation 392. The second animation 392 has the same content as the first animation 363. The sizes of the second animation 392 and the first animation 363 can be the same or different. The layer corresponding to the first information is located above the layer where the second animation is located.

[0202] The second animation 392 may be specifically described in the above description of the first animation 131 .

[0203] In another possible implementation, if service capsule 301 displays partial information of card 321, then in response to a click on service capsule 301, card 321 is displayed on interface 310. If service capsule 371 displays partial information of card 391, then in response to a click on service capsule 391, card 391 is displayed on interface 380.

[0204] The following combination Figures 8 to 13An example is given in which the type of the YOYO suggested card set is changed in the second card compared to the first card.

[0205] Figure 8 A schematic diagram of a set of interfaces for the card display method provided in an embodiment of the present application. Figure 8 In this example, the card set type is changed from "Weather Clock + Combination Service" to "Weather Clock Card Style".

[0206] Figure 8 (a) in the figure shows interface 110' (as an example of the second interface). Interface 110' can refer to the above description of interface 110, except that first preview card 112 is replaced by first preview card 112', style icon 116 is replaced from the selected state to the unselected state, and style icon 117 is replaced from the unselected state to the selected state.

[0207] Interface 110' can refer to the above Figure 5 The interface shown is obtained.

[0208] In response to an operation on the interface 110' (eg, left swipe), the following is displayed: Figure 8 Interface 400 shown in (b).

[0209] Interface 400 (as an example of the second interface) displays first preview area 113, fourth control 402, style icon 403 (as an example of the third style icon), and style icon 404 (as an example of the first style icon). First preview area 113 displays second preview card 405. Style icon 403 corresponds to the third card style. Exemplarily, the third card style is the default card style.

[0210] The fourth control 402 in the interface 400 is associated with the second card set type, and the third control 114 in the interface 110' is associated with the first card set. The fourth control is in an unselected state. The third style icon 403 is in a selected state. That is, when the user just slides to the page corresponding to the "Weather Clock Card Style" card set type and has not yet selected the card set type, the first preview area 113 displays the preview effect of the second card set type and the third card style. For example, the first preview area 113 displays the second preview card 405, and the second preview card 405 is used to display the preview effect of the second card set type and the third card style. In other words, the second preview card 405 is used to display the preview effect of the second card set type.

[0211] In response to the operation of clicking the fourth control 402, the following is displayed: Figure 8 Interface 410 shown in (c) in FIG.

[0212] For example, in interface 410, style icon 412 (as an example of the first style icon) is selected, and a third preview card 415 is displayed in the first preview area 411. The third preview card 415 displays the second card set type ("weather clock card style" card set type) and the preview effect of the first card style.

[0213] That is, after the user selects the second card set type, the first preview area displays a preview card, which displays a preview effect of the second card set type and the card style of the first card.

[0214] In response to an operation on the interface 410 (eg, left swipe), the following is displayed: Figure 8 Interface 420 shown in (d).

[0215] In the interface 420 , a style icon 414 (as an example of a second style icon) and other style icons such as the style icon 418 are displayed. The style icon 414 includes a first image 417 .

[0216] Style icon 414 and style icon 418 are both in an unselected state.

[0217] In response to the operation of clicking the style icon 414, the following is displayed: Figure 8 Interface 430 shown in (e) in FIG.

[0218] For example, in the interface 430 , the fourth preview card 411 is displayed in the first preview area 411 , the fourth preview card displays the preview effect of the second card set type and the second card style, the fourth preview card includes the first information, and the first animation 415 is played in the fourth preview card.

[0219] Specifically, Figure 8 The interface 430 shown in (e) and Figure 8 The interface 440 shown in (f) in FIG. 4 is shown in FIG. Figure 6 (e) and Figure 6 The description related to (f) in the above description will not be repeated here.

[0220] Figure 9 Take the example of changing from the "Weather Clock + Service Capsule" card set type to the "Weather Clock Card Style" card set type. Figure 9 The sliding operation in Figure 8 The interface shown in (b) in the figure, the subsequent interfaces can be seen as follows Figure 8 The relevant contents of (c) to (f) are not repeated here, and the card set type from "Weather Clock + Service Capsule" can be changed to "Weather Clock Card Style" card set type.

[0221] Figure 9A schematic diagram of an example interface of the card display method provided in an embodiment of the present application.

[0222] like Figure 9 As shown, interface 340' (as an example of the second interface) can refer to the above description of interface 340, except that the preview card in the first preview area is replaced by preview card 341a, and the style icon 342 is replaced by style icon 342'.

[0223] For details of the style icon 342 ′, please refer to the above description.

[0224] In response to the operation of the sliding interface 340' (eg, right sliding), the following is displayed: Figure 8 The interface shown in (b) in the figure. Please refer to the above for details. Figure 8 The relevant description of (b) in .

[0225] Figure 10 A schematic diagram of a set of interfaces for the card display method provided in an embodiment of the present application. Figure 10 In this example, the card set type is changed from "Weather Clock Card Style" to "Weather Clock + Service Capsule".

[0226] Figure 10 (a) displays the interface 410 .

[0227] In response to the user's operation of sliding the interface 410, the following is displayed: Figure 10 Interface 500 shown in (b).

[0228] Interface 500 (as an example of the second interface) displays a first preview area 501, a fourth control 503, a style icon 504 (as an example of the third style icon), and a style icon 505 (as an example of the first style icon). First preview area 501 displays a service capsule 502. Style icon 504 corresponds to the third card style. Exemplarily, the third card style is the default card style.

[0229] Fourth control 503 in interface 500 is associated with the second card set type, while the "Weather Clock Card Style" control in interface 410 is associated with the first card set type. Fourth control 503 is unselected. Third style icon 504 is selected. In other words, when the user first scrolls to the page corresponding to the "Weather Clock + Service Capsule" card set type and has not yet selected that card set type, first preview area 501 includes service capsule 502, which is used to display a preview of the second card set type.

[0230] In response to the operation of clicking the fourth control 503, the following is displayed: Figure 10 Interface 510 shown in (c) in FIG.

[0231] Figure 10 (c) and Figure 10 (d) in Figure 7 (e) and Figure 7 The interface of (f) is similar. You only need to replace the specific example corresponding to the first style icon. You can refer to the relevant description.

[0232] In addition, Figure 10 After (d), continue to refer to Figure 7 The interfaces shown in (g) to (j).

[0233] Figure 11 Take the example of changing the card set type from "weather clock + combined service" to "weather clock + service capsule" as an example. Figure 11 The sliding operation in (b) shows Figure 10 The interface shown in (b) in the figure, the subsequent interfaces can be seen as follows Figure 10 The relevant contents of (c) and (d) are not repeated here, and the card set type from "Weather Clock + Combination Service" can be changed to "Weather Clock + Service Capsule" card set type.

[0234] Figure 11 A schematic diagram of an example interface of the card display method provided in an embodiment of the present application.

[0235] like Figure 11 As shown in (a) in FIG. 1 , the interface 110 may be specifically described in the above related description.

[0236] In response to an operation on the sliding interface 110 (eg, sliding left), the following is displayed: Figure 11 For details, please refer to the above description of interface 400.

[0237] In response to an operation on the sliding interface 400 (eg, sliding left), the following is displayed: Figure 10 The interface shown in (b).

[0238] Figure 12 A schematic diagram of a set of interfaces for the card display method provided in an embodiment of the present application. Figure 12 In this example, the card set type is changed from "Weather Clock Card Style" to "Weather Clock + Combination Service".

[0239] Figure 12 (a) in FIG. 4 shows an interface 410 (as an example of the second interface). For the interface 410, please refer to the relevant description above.

[0240] In response to an operation on the interface 410 (eg, right swipe), the following is displayed: Figure 12 Interface 600 shown in (b) in FIG.

[0241] Interface 600 (as an example of the second interface) displays first preview area 111, fourth control 602, style icon 603 (as an example of the third style icon), style icon 604 (as an example of the first style icon), and style icon 605 (as an example of the second style icon). First preview area 111 displays second preview card 601. Style icon 603 corresponds to the third card style. Exemplarily, the third card style is the default card style.

[0242] Fourth control 602 in interface 600 is associated with the second card set type, and third control 417 in interface 410 is associated with the first card set type. The fourth control is unselected. Third style icon 603 is selected. In other words, when the user has just swiped to the page corresponding to the "Weather Clock Card Style" card set type and has not yet selected that card set type, first preview area 111 displays second preview card 601. Second preview card 601 is used to display a preview of the second card set type and the third card style. In other words, second preview card 601 is used to display a preview of the second card set type.

[0243] In response to clicking the fourth control 602, the following is displayed: Figure 12 Interface 610 shown in (c) in FIG.

[0244] For example, in interface 610, style icon 614 (as an example of the first style icon) is selected, style icon 613 and style icon 615 are both unselected, and a third preview card 612 is displayed in the first preview area 111. The third preview card 612 displays the second card set type ("weather clock + combination service" card set type) and the preview effect of the first card style.

[0245] That is, after the user selects the second card set type, the first preview area will display a preview effect of the card style of the first card through the preview card.

[0246] In response to an operation of clicking the style icon 605 (as an example of a second style icon), the following is displayed: Figure 12 Interface 620 shown in (d).

[0247] exist Figure 12 For operations and interactions after the interface 620 shown in (d), please refer to Figure 1 The relevant descriptions of (a) and (b) in .

[0248] Figure 13Take the example of changing from the "weather clock + service capsule" card set type to the "weather clock + combined service" card set type. Figure 13 The sliding operation in (b) shows Figure 12 The interface shown in (b) in the figure, the subsequent interfaces can be seen as follows Figure 12 The relevant contents of (c) and (d) are not repeated here, and the card set type from "Weather Clock + Service Capsule" can be changed to "Weather Clock + Combination Service" card set type.

[0249] Figure 13 A schematic diagram of an example interface of the card display method provided in an embodiment of the present application.

[0250] like Figure 13 As shown in (a), interface 630 (as an example of the second interface) can refer to the above description of interface 340, the difference being that the style icon 633 displays a dynamic card style, and an animation is played in the preview card in the first preview area 631.

[0251] In response to the operation of the sliding interface 630 (eg, right sliding), the following is displayed: Figure 13 For details, please refer to the interface 640 shown in (b) above. Figure 11 Description of the interface 400 shown in (b) in FIG.

[0252] For example, after detecting that a user clicks the "Apply to Desktop" control, a second card is displayed on the desktop, and the second card is displayed in the second card style. After the second animation in the second card has played a preset number of times, the second animation stops playing. When playing stops, the second card displays a frame of the second animation, such as the last frame. This can save power consumption of the electronic device. For example, the preset number of times is 1.

[0253] by Figure 1 Taking (d) in FIG. 1 as an example, after playing the second animation 132 once in the card 131 , the playing stops.

[0254] Optionally, after the user clicks the "Apply to Desktop" control to trigger the playing of the second animation of the second card, the playing of the second animation of the second card may also be triggered by other scenarios.

[0255] Scenario 1: Restart the electronic device and display the page where the second card is located.

[0256] Figure 14 A scene diagram of an example of playing the second animation provided in an embodiment of the present application.

[0257] like Figure 14 As shown in (a) of FIG, the restart / shutdown control page is displayed, and in response to the user clicking the restart control operation, the following is displayed: Figure 14 Interface 700 shown in (b) in FIG.

[0258] In the interface 700, a second card 701 is included. When the interface 700 is displayed after the restart, the second animation 702 starts to play. Optionally, the second animation 702 stops playing after playing a preset number of times.

[0259] Scenario 2: Unlock the electronic device in lock screen mode and display the page where the second card is located.

[0260] Figure 15 This is a scene diagram of another example of playing the second animation provided in an embodiment of the present application.

[0261] like Figure 15 As shown in (a), the electronic device is in a locked screen state. In response to the user clicking the unlock button to unlock the electronic device, the following is displayed: Figure 15 For details, please refer to the above description of interface 700.

[0262] Specifically, the interface 700 refers to Figure 14 The description related to (b) in .

[0263] Scenario 3, sliding on other interfaces, including: sliding on other pages on the desktop to return to the page including the second card; or sliding out of a page within an application to return to the page including the second card.

[0264] Figure 16 This is a scene diagram of another example of playing the second animation provided in an embodiment of the present application.

[0265] like Figure 16 As shown in (a) in FIG. 1 , the display interface 130 is shown. For details, please refer to the relevant description above.

[0266] In response to the user's operation of sliding the interface 130 (for example, sliding left), the following is displayed: Figure 16 Interface 710 shown in (b) in FIG.

[0267] For example, the interface 710 is another page of the desktop. In response to the user sliding the interface 710 (for example, sliding right), the following is displayed: Figure 16 For details, please refer to the above description of interface 700.

[0268] It can be understood that after the second animation 132 in the card 131 is played, the last frame is displayed, and the second animation 702 in the card 701 starts playing from the first frame.

[0269] Figure 17 This is a scene diagram of another example of playing the second animation provided in an embodiment of the present application.

[0270] like Figure 17 As shown in (a) in FIG. 1 , the display interface 130 is shown. For details, please refer to the relevant description above.

[0271] In response to the user clicking on the shopping application, interface 720 , ie, the interface of the shopping application, is displayed.

[0272] In response to the user sliding the interface 720 (eg, sliding left, right, or up), the interface 700 is displayed. For details, please refer to the description of the interface 700 above.

[0273] Scenario 4: After the second card is covered by other cards in the YOYO suggestion card set, the second card is redisplayed.

[0274] Among them, other cards can be push cards or non-push cards.

[0275] The user may slide other cards, or the electronic device may automatically slide other cards, so that the second card is redisplayed.

[0276] Figure 18 This is a scene diagram of another example of playing the second animation provided in an embodiment of the present application. Figure 18 For example, the user slides the non-push card so that the non-push card covers the second card, and then the user slides the non-push card so that the second card is redisplayed.

[0277] like Figure 18 As shown in (a) of FIG. 3 , the interface 390 includes a second card 391. A second animation 392 is played on the second card 391. In response to the user sliding the second card 391, the following is displayed: Figure 18 The interface 730 shown in (b) in FIG. 7 (as an example of the fifth interface). The interface 730 includes a sports health card 731. In response to the user sliding the sports health card 731, the following is displayed: Figure 18 Interface 740 shown in (c) of FIG. Interface 740 includes a second card 741 , in which a second animation 742 is played.

[0278] It can be understood that, because the second card displayed the last frame of the second animation when playback stopped before Scenes 1 to 4, in these Scenes 1 to 4, when the electronic device redisplays the second card, playback of the second animation in the second card begins from the first frame. This allows the second animation to play directly from the first frame, avoiding frame skipping, improving visual smoothness and enhancing the viewing experience.

[0279] The following combination Figure 19 and Figure 20 Describe the hardware system and software architecture of the embodiment of the present application.

[0280] Please refer to Figure 19 , Figure 19 FIG1 shows a hardware structure diagram of an electronic device 1000 provided in an embodiment of the present application. Figure 19 The electronic device 1000 may include a processor 1010, an external memory interface 1020, an internal memory 1021, a universal serial bus (USB) interface 1030, a charging management module 1040, a power management module 1041, a battery 1042, an antenna 1, an antenna 2, a mobile communication module 1050, a wireless communication module 1060, an audio module 1070, a speaker 1070A, a receiver 1070B, a microphone 1070C, an earphone interface 1070D, a sensor module 1080, a button 1090, a motor 1091, an indicator 1092, a camera 1093, a display screen 1094, and a subscriber identification module (SIM) card interface 1095, etc. The sensor module 1080 may include a pressure sensor 1080A, a gyroscope sensor 1080B, an air pressure sensor 1080C, a magnetic sensor 1080D, an acceleration sensor 1080E, a distance sensor 1080F, a proximity light sensor 1080G, a fingerprint sensor 1080H, a temperature sensor 1080J, a touch sensor 1080K, an ambient light sensor 1080L, a bone conduction sensor 1080M, etc.

[0281] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 1000. In other embodiments of the present application, the electronic device 1000 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0282] The processor 1010 may include one or more processing units, for example: the processor 1010 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc.

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

[0284] Processor 1010 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 1010 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 1010. If processor 1010 needs to use the same instruction or data again, it can directly access the memory. This avoids duplicate accesses, reduces processor 1010 latency, and thus improves system efficiency.

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

[0286] The MIPI interface can be used to connect the processor 1010 to peripheral devices such as the display 1094 and the camera 1093. MIPI interfaces include the camera serial interface (CSI) and the display serial interface (DSI). In some embodiments, the processor 1010 and the camera 1093 communicate via the CSI interface to implement the camera function of the electronic device 1000. The processor 1010 and the display 1094 communicate via the DSI interface to implement the display function of the electronic device 1000.

[0287] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 1000. In other embodiments of the present application, the electronic device 1000 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0288] Electronic device 1000 implements display functionality through a GPU, display screen 1094, and an application processor. The GPU is a microprocessor for image processing that connects display screen 1094 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 1010 may include one or more GPUs that execute program instructions to generate or modify display information.

[0289] Display screen 1094 is used to display images, videos, and the like. Display screen 1094 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a MiniLED, a MicroLED, a Micro-oLed, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 1000 may include one or N display screens 1094, where N is an integer greater than one.

[0290] The electronic device 1000 can implement a shooting function through an ISP, a camera 1093, a video codec, a GPU, a display screen 1094, and an application processor.

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

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

[0293] The sensor module 1080 may include 10 or more sensors, which may be of the same type or of different types. Figure 19 The sensor module 1080 shown is only an exemplary division method. There may be other division methods, which are not limited in this application.

[0294] Touch sensor 1080K, also known as a "touch panel," can be provided on display screen 1094. The touch sensor 1080K and display screen 1094 form a touch screen, also known as a "touch screen." Touch sensor 1080K is used to detect touch operations applied thereto or in the vicinity thereof. The touch sensor can transmit the detected touch operations to an application processor to determine the type of touch event. Visual output related to the touch operations can be provided via display screen 1094. In other embodiments, touch sensor 1080K can also be provided on the surface of the electronic device, at a location different from that of display screen 1094.

[0295] Pressure sensor 1080A is used to sense pressure signals and convert them into electrical signals. Touch sensor 1080K, also known as a touch-sensitive device, can be disposed on display screen 1094. Touch sensor 1080K and display screen 1094 form a touch screen, also known as a touchscreen. In other embodiments, touch sensor 1080K can also be disposed on the surface of device 1000, in a different location from display screen 1094.

[0296] The motor 1091 can generate vibrations. The motor 1091 can be used for incoming call notifications or for touch feedback.

[0297] Figure 20 This is a diagram of the software system architecture provided for the embodiments of this application.

[0298] like Figure 20 As shown, a software system using a layered architecture is divided into several layers, each with distinct roles and divisions of labor. Layers communicate with each other via software interfaces. In some embodiments, the software system can be divided into four layers: from top to bottom, the application layer, the application framework layer, the Java system service layer, the system runtime layer, and the Linux kernel layer.

[0299] The application layer can include multiple applications. Figure 20As shown, the application layer may include weather, desktop and other applications. It is understood that the applications included in the application layer may be third-party applications or system applications. For example, the application layer may also include gallery, call, map, navigation, WLAN, Bluetooth, video, short message ( Figure 20 not shown).

[0300] Specifically, the weather application may include multiple modules.

[0301] The resource module is mainly used to provide card style resources.

[0302] Card view class, mainly used to initialize the view.

[0303] Immersive card view class, mainly used to perform frame animation.

[0304] Data parsing tool class, mainly used to parse data of card style resources.

[0305] Animation implementation thread, mainly used for playing animation.

[0306] Desktop application, mainly used to obtain the card style selected by the user and trigger the execution frame animation.

[0307] For example, the user can check the weather and time through the weather clock card. The weather clock card can be displayed in the display screen 194 to be presented to the user.

[0308] Taking the weather application as an example, the interface of the weather application can include a view. View is the basic element that constitutes the interface. View can contain rich controls that can respond to user operation events. For example, when the system interacts with the user, the system will pass the event to the View module, and then the View module will respond accordingly. In other words, View is the basic building block of the user interface component, responsible for image interface rendering and event processing. Optionally, View occupies a rectangular area on the screen. For example, View is Figure 1 The area where the second animation 132 in (d) is located, or Figure 1 The area where the second card 131 is located in (d) is shown. The user can operate the interface through the View module.

[0309] For example, Figure 20As shown in the figure, the application framework layer includes the view system, the Android Graphics Shading Language (AGSL) library, and shaders. Shaders are used in the drawing process, including programmable shaders (RuntimeShaders).

[0310] It is understandable that Shader may also include other subclasses. Here, only the two subclasses of RuntimeShader involved in the embodiments of this application are used as examples for illustration.

[0311] The view system is the user interface system for Android applications. It's responsible for displaying the application's user interface. Developers use the view system to create various user interfaces, such as buttons, text fields, and drop-down boxes.

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

[0313] The application layer and application framework layer run in a virtual machine. The virtual machine executes Java files in the application layer and application framework layer as binary files. The virtual machine performs functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0314] The system runtime layer may include graphics hardware, which is used to abstract the hardware. Figure 20 As shown, the graphics hardware may include an external function library (external library) and a hardware abstraction layer library (HAL library).

[0315] External function libraries may include 3D graphics libraries (e.g., OpenGL ES) and business programming languages. The 3D graphics libraries can be used to implement 3D graphics drawing, image rendering, compositing, and layer processing. The business programming languages serve as an interface between the OpenGL ES and the native platform windowing system.

[0316] The Hardware Abstraction Layer library includes the hardware compositor (HWComposer) and the gralloc library. The hardware compositor is used to compose and display multiple layers containing multiple image frames. The gralloc library is used to allocate a graphics buffer and map it to the application's address space in the application layer, allowing graphics to be written to the buffer.

[0317] Among them, the hardware abstraction layer is the encapsulation of the hardware driver, providing a unified universal interface for the upper layer. The hardware abstraction layer can include camera HAL, display HAL, audio HAL and sensor HAL, etc. ( Figure 20 not shown).

[0318] Optionally, Figure 20 The external function libraries shown in may also include a 2D graphics engine (for example, the skia graphics library (SGL)), a display composition system (surface flinger) module, a media library (MediaLibraries), a browser kernel (Webkit), an Android runtime (Android Runtime), and a core library.

[0319] The Android Runtime consists of the core library and the virtual machine. The Android Runtime is responsible for scheduling and management of the Android system.

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

[0321] The 2D graphics engine is a drawing engine for 2D graphics. The surface flinger is also known as a layer blending module. The surface flinger module blends layers and sends the blended layers to the display, allowing the window content to appear on the screen. Each animation effect in the surface flinger module corresponds to a layer instance.

[0322] The kernel layer (or driver layer) is the bottom layer of the software stack. The driver layer is used to manage and control hardware devices. The driver layer can include graphics processor drivers (GPU drivers), camera drivers, display drivers, Binder drivers ( Figure 20 Not shown), audio driver and sensor driver and other driving modules.

[0323] Figure 20In the software architecture shown in Figure 1, the application layer and the system service layer can communicate across processes. This communication can be achieved using an inter-process communication mechanism (Binder) or by relying on a Binder driver.

[0324] It should be understood that Figure 20 The hierarchical structure shown does not constitute a specific limitation on the software system of the device 1000. In other embodiments of the present application, the software system of the device 1000 may include Figure 20 The layered architecture shown may be more or less than the architecture shown, or each layer of the software system of the apparatus 1000 may include more than Figure 20 The components shown may have more or fewer structures, and the embodiments of the present application are not limited thereto.

[0325] To facilitate understanding of the implementation process of frame animation when the user changes the card style in the embodiment of the present application, the following is combined with Figure 21 The flowchart shown in Figures 22 to 24 The timing diagram shown in FIG.

[0326] Figure 21 This is an example diagram of the process of executing frame animation when the user changes the card style provided in an embodiment of the present application.

[0327] It should be understood that Figure 21 The process provided in can be applied to Figure 18 In. Figure 18 As an example, assume that a weather application is installed in the device 1000. Figure 20 In the software architecture layer of the device 1000 shown, Figure 21 The resource module, data analysis module, implementation module and animation implementation module all belong to the weather application. The weather application can be located in Figure 20 The application layer in the software system.

[0328] like Figure 21 As shown, it includes 5 logical modules: resource module, data analysis module, desktop module, implementation module and animation implementation module.

[0329] In the resource module, for example, the weather application's resources (asserts) store the JSON file used to configure the card style.

[0330] For example, in the weather Android application package (APK), a configuration file named assets / cardstack_card_styles.json is defined. This configuration file configures multiple card styles for each card stack type. For example, assuming the card type is "Weather Clock + Combination Service," and that the card stack type includes N card styles (N ≥ 2, where N is an integer), the JSON file corresponding to the first card style among the N card styles is as follows:

[0331] {

[0332] "settings_styles_value":"2x2_1",

[0333] "style_static_foreground_res_name":"foreground_res_01",

[0334] "style_static_background_res_name":"background_res_01",

[0335] "style_static_background_color":"background_color_01",

[0336] "style_dynamic_background_res":"jellyfish_card_frame_anim"

[0337] }

[0338] Among them, settings_style_value represents the value corresponding to the card style, and the value assigned to this field is 2x2_1. Among them, 2x2 is the size of the card in the "Weather Clock + Combination Service" card set type. For example, 2x4 corresponds to two card set types, such as 2x4 is the size of the card in the "Weather Clock Card Style" card set type or the "Weather Clock + Service Capsule" card set type. The 1 in 2x2_1 represents the card style with an index or identifier of 1 in the card set type corresponding to 2x2. For example, each set of card styles is identified by a number. Similarly, 2x4_5 represents the card style with an index or identifier of 5 in the card set type corresponding to 2x4.

[0339] Wherein, style_static_foreground_res_name represents the name of the foreground resource of the card. For example, the value assigned to this field is foreground_res_01. For example, the foreground resource indicated by the value assigned to this field is used to display the first information, the second information, or the third information as the foreground style.

[0340] Among them, style_static_background_res_name represents the name of the card's background resource. For example, the value assigned to this field is background_res_01. For example, when displaying the card style with a style icon, the background resource indicated by the value assigned to this field is used to display the image in the style icon (such as the first image 118b above).

[0341] Among them, style_static_background_color is the background color resource of the card. For example, the value assigned to this field is background_color_01. For example, the background color resource indicated by the value assigned to this field is used to display the background color of the card (including preview cards or real cards) (such as background color 133 above), or the background color used to display the style icon.

[0342] Style_dynamic_background_res is the animation resource of the card. For example, the value assigned to this field is jellyfish_card_frame_anim. For example, the animation resource indicated by the value assigned to this field is used to display the animation (for example, the first animation 122 or the second animation 132) in the card (including the preview card or the real card).

[0343] It can be understood that by assigning different values to the above fields, JSON files corresponding to different card styles can be set.

[0344] A1. The data parsing module obtains the JSON file from the resource module, parses the card style in the JSON file, and obtains the style object (StyleData).

[0345] Among them, by parsing the card style, you can get the JSON file of the card style corresponding to each card set type.

[0346] You can use the Map method to obtain a style object. A Map is an STL associative container that associates keywords with their values. For example, Map(keyword,keyword's value). It provides one-to-one data processing (each keyword can appear only once in a map).

[0347] Table 1

[0348]

[0349] Table 1 shows an example of StyleData. As shown in Table 1, two maps are generated in the StyleData class. Specifically, a one-to-one correspondence between a keyword String and its value, Style, is established for the 2x2 and 2x4 card sets, respectively. Electronic devices can retrieve Styles from the StyleData class using the set or get methods. Within each map, for each card style, there is a one-to-one correspondence between a keyword String and its value, Style.

[0350] The one-to-one correspondence between the keyword String and the keyword value Style may be specifically shown in Table 2.

[0351] Table 2

[0352]

[0353]

[0354] As shown in Table 2, each field in Style can be used as a keyword string to correspond to the value of each field in the JSON file. The electronic device can obtain the keyword string corresponding to the value of each field in Style through the set method or get method.

[0355] That is to say, each set of styledata can expand to 6 sets of styles, and each set of style indicates a set of weather clock card styles (that is, the set of JSON files above).

[0356] It is understandable that the data parsing module can obtain the JSON above when the weather APK is installed (or updated) on the mobile phone. Therefore, the data parsing module can be executed after the weather APK is installed. Even if the current electronic device has no cards set up, the user adds a new card, or the user deletes an existing card on the device, it will not affect the processing of the data parsing module.

[0357] A2, Launcher gets the JSON file from the resource module.

[0358] like Figure 21As shown, in the desktop module, the arrow pointing from the Launcher to the settings field corresponds to the following solution. Upon detecting that the user is editing a card style, the desktop will preview the corresponding background animation based on the obtained JSON file and write the user's selected card style to the settings field. Alternatively, after the user clicks the "Apply to Desktop" control, the user's selected card style will be written to the settings field. Writing the user's selected card style to the settings field can be understood as writing the keyword corresponding to the user's selected card style to the settings field.

[0359] like Figure 21 As shown, in the desktop module, the arrow from the Launcher to the setTag() method corresponds to the following scenario. The Launcher monitors the trigger conditions for playing the animation and, upon detecting the trigger conditions, sends instructions to the implementation module via the setTag() method, notifying it when to execute the animation. For example, the trigger condition could be detecting that the user clicks the "Apply to Desktop" control, or any of the scenarios 1 to 4 above.

[0360] A3: The implementation module obtains the card style identifier (styletype, such as the keyword written into the setting field by Launcher) through the setting field.

[0361] A4: The implementation module obtains the style object from the data parsing module and obtains the animation resource from the style object according to the card style identifier.

[0362] Specifically, the implementation module searches for a corresponding set of JSON files (used to display the card style selected by the user) in the above Map according to styletype, and the set of JSON files includes resources for implementing frame animation, such as an XML file.

[0363] A5: After detecting the trigger condition, the Launcher sends a command to the implementation module through the setTag() method, notifying it of the timing for animation execution. The implementation module executes the frame animation based on the command and animation resources.

[0364] Specifically, A6, the implementation module instructs the animation implementation module to implement the frame animation.

[0365] For example, define each frame of the frame animation according to the XML file used to implement frame animation: card_frame_anim.xml, then set the animation based on imageView.setlmage Drawable, and then call animationDrawable.addFram() and animationDrawable.start() to implement the animation.

[0366] It is understandable that in this application, the animation in the card can also be implemented through other animation forms, such as attribute animation, etc., and this application does not limit this.

[0367] It is understandable that the JSON file in A1 or A2 can be called a second JSON file, which includes JSON files corresponding to multiple card set types, and the JSON file corresponding to each card set type includes JSON files corresponding to multiple card styles.

[0368] In A1, the second JSON file is parsed to generate a correspondence between the second JSON file and the first file identifier, that is, a correspondence between multiple second JSON files and multiple first file identifiers.

[0369] In A2, the desktop application writes the keyword corresponding to the card style selected by the user into the setting field, which can be understood as the desktop application storing the second file identifier, the second file identifier is included in the first file identifier, and the second file identifier corresponds to the first JSON file in the second JSON file.

[0370] In A4, the implementation module finds the corresponding first JSON file according to the second file identifier.

[0371] In A5, when the electronic device is in the screen-on state, a second card is generated according to the first JSON file, the second card is displayed in a second card style, and a second animation is played in the second card according to the first animation resource.

[0372] The desktop also previews the first animation for the user in the first preview area according to the first JSON file.

[0373] The following combination Figures 22 to 24 This section introduces an example of performing frame animation when the user changes the card style. Figure 22 The interaction diagram is mainly used to implement the following solutions: display the second card and play the animation according to the card style selected by the user; Figure 23 exist Figure 22 The foundation also includes: the underlying interaction of the solution where the second card is not displayed on the desktop; Figure 24 exist Figure 22 On this basis, it also includes: the underlying interaction of the solution in which the second card is displayed again after the second card is not displayed on the desktop.

[0374] Figure 22 The embodiment of the present application provides an interactive example diagram of executing a frame animation when the user changes the card style. Figure 22As shown, the resource module belongs to the weather application, and the card view class, immersive card view class, data parsing tool class, and animation implementation thread all belong to the view of the weather application. Among them, the card view class inherits from the view of the weather application, and the immersive card view class inherits from the card view class.

[0375] B1, transfer the card stack_card styles (cardstack_card_styles.json) between the resource module and the data parsing tool class (Utils).

[0376] That is to say, the data parsing tool class obtains the card set_card style from the resource (that is, the JSON file used to display the card style above).

[0377] B2, the data parsing tool class obtains the resource card style content.

[0378] The data parsing tool class obtains the asset card style content (getAssetsCardStyleContent) based on the card set_card style.

[0379] B3, the data parsing tool class is converted into a corresponding relationship (convertToMap).

[0380] The data parsing tool class converts the resource card style content into a one-to-one correspondence between the above keywords and their values.

[0381] B4, transfer card set_card style between resource module and desktop.

[0382] In other words, the desktop gets assets / cardstack_card_styles.json by accessing the asserts resource of weather.

[0383] B5, desktop indicator card stack view (HnIndicatorStackView).

[0384] When a user edits a card style, the desktop previews the corresponding background animation based on the card set and card style. The selected card style is also written to the settings field. Alternatively, after the user clicks the "Apply to Desktop" control, the selected card style is written to the settings field. Writing the selected card style to the settings field can be understood as writing the keyword corresponding to the selected card style to the settings field.

[0385] B6, card view class (DualCityWidgetHomeView) performs view initialization.

[0386] When the user clicks "Apply to Desktop", the onAttachToWindow method is called to the weather based on the subclass ImmersionDualCityWidgetHomeView in View.

[0387] B7, the immersive card view class (ImmersionDualCityWidgetHomeView) performs view initialization.

[0388] Furthermore, based on ImmersionDualCityWidgetHomeView, the onAttachToWindow method is called to the weather.

[0389] B8, animation implementation thread starts thread.

[0390] For example, based on handlerThread.start() to start the thread.

[0391] B9, register the receiver for the immersive card view class.

[0392] Exemplarily, the receiver is a screen-off broadcast receiver, which is used to monitor the lock screen and screen-off states of the electronic device so that animation can be played in the screen-on state.

[0393] B10, immersive card view class initialization frame animation.

[0394] The immersive card view class obtains the card style identifier (styletype, such as the keyword written to the setting field by Launcher) through the setting field.

[0395] B11, the data parsing tool class obtains the card style resource (getCardStyleResource).

[0396] The data parsing tool class obtains the style object from the data parsing module and obtains the card style resources in the style object according to the card style identifier.

[0397] It is understandable that the immersive card view class initializes the frame animation based on the card style resource. In other words, B11 can be executed before or during B10.

[0398] Optionally, before or after B10 , it is further determined whether the electronic device can play animation on the second card.

[0399] For example, the immersive card view class obtains the animation layer parameters of the electronic device and uses them to determine whether the device can play the animation in the second card. The animation layer parameters are determined by the device model and are typically preconfigured in the operating system via an XML file. For example, if the value corresponding to the animation layer parameter is false, the animation cannot be played; if the value corresponding to the animation layer parameter is true, the animation can be played.

[0400] B12, the card view class calls the setTag() method.

[0401] After the Launcher detects that the user clicks the "Apply to Desktop" control, the setTag() method is initiated through the card view class to trigger the immersive card view class to perform frame animation.

[0402] For example, the Launcher can determine whether to initiate the setTag() method through the card view class based on whether two conditions are met: Condition 1: Whether the electronic device is in the screen-on state; Condition 2: Whether the user clicks the "Apply to Desktop" control. The Launcher is responsible for determining whether these two conditions are met. If so, the Launcher initiates the setTag() method through the card view class.

[0403] B13, the immersive card view class performs frame animation.

[0404] Optionally, before B13 triggers B14, in order to save power consumption and ensure the endurance of the electronic device, it is possible to determine whether a preset condition is met. If the preset condition is not met, the frame animation is executed, otherwise the frame animation is not executed.

[0405] For example, the preset conditions include condition 3. Condition 3 is that the power level of the electronic device is less than or equal to a power threshold (e.g., 20% of the total power level). For example, the electronic device monitors the power level. The current power level is obtained at regular intervals, and the percentage of the power level to the total power level is compared with the power threshold. If the power level is lower than the power threshold, B14 will not be triggered. Otherwise, B14 will be triggered.

[0406] For example, the preset conditions include Condition 4. Condition 4 states that the time difference between two consecutive unlocking operations does not exceed a time threshold. Assume that the electronic device records the time when it detects the user unlocking operation, detects the fourth operation of the user unlocking the electronic device, and determines that the electronic device is in the screen-on state; and before detecting the fourth operation, detects the fifth operation of the user unlocking the electronic device, and the interval between the time of detecting the fourth operation and the time of detecting the fifth operation is less than or equal to the time threshold, then B14 will not be triggered; otherwise, B14 will be triggered.

[0407] In some embodiments, each time the user unlocks the page containing the second card and displays it, the second animation will play on the second card. This is still triggered by the desktop calling the setTag() method via the card view class. Therefore, condition 4 can also be replaced by whether the interval between two consecutive trigger instructions received by the immersive card view class to play the video is less than or equal to the time threshold.

[0408] Alternatively, the preset conditions include condition 3 and condition 4.

[0409] B14, animation implements thread to play animation.

[0410] For example, the animation implementation thread calls animation.start() and animation.end() in backgroundHandler. For example, animation.start() and animation.end() are called at a preset interval. The preset interval is, for example, 2 seconds. The preset interval is the duration of the animation.

[0411] It can be understood that the immersive card view class calls the animation implementation thread to execute the animation process.

[0412] B15, the animation implementation thread stops playing the animation.

[0413] For example, the animation implementation thread calls animationDrawable.stop() to release the resources used to play the animation.

[0414] Optional, B16, the immersive card view class performs view cleanup (onDetachedFromWindow).

[0415] Optional, B17, immersive card view class unregisters the receiver (unregisterReceiver).

[0416] B17 corresponds to B9. For example, the receiver is a screen-off broadcast receiver.

[0417] It can be understood that B1 to B15 can generate a second card and play the second animation in the second card. If the electronic device does not display the second card after B14 or B15 (for example, scenarios 1 to 4 above), it can be understood that the second card has been destroyed, and the weather application view created by B6 to B15 will also be destroyed. Then B16 and B17 are executed.

[0418] In addition to scenarios 1 to 4, the electronic device may not display the second card in other scenarios. For example, if the user edits the card style and / or card set type of the second card, the view of the second card will also be destroyed.

[0419] Figure 23 This is another interactive example diagram of executing frame animation when the user changes the card style provided in an embodiment of the present application.

[0420] like Figure 23 As shown, B1 to B17 can be found in Figure 22 Related description.

[0421] C1, animation implementation thread receives broadcast.

[0422] For example, the broadcast may be a broadcast indicating that any one of scenarios 1 to 4 is satisfied. For example, a lock screen broadcast (ACTION_SCREEN_OFF) is received.

[0423] C2, the animation implementation thread sets the frame animation view to the first frame.

[0424] Therefore, if the second card is displayed again later (for example, when the screen is turned on), the second animation starts playing directly from the first frame to avoid frame skipping, which can improve visual smoothness and enhance the visual experience.

[0425] Figure 24 This is another interactive example diagram of executing frame animation when the user changes the card style provided in an embodiment of the present application.

[0426] like Figure 24 As shown, B1 to B17 can be found in Figure 22 Related description.

[0427] Optionally, execute C1 and C2. C1 and C2 can be found in Figure 23 Related description.

[0428] It is understandable that after B17, the second card is deregistered, and the view corresponding to the second card is also deregistered. If a new card (the second card or another card) is to be displayed again, the weather application needs to re-establish the view to display the new card. The card set type and / or card style of the other card is different from that of the second card.

[0429] D1 to D12 are used to establish the view corresponding to the new card and play the corresponding animation on the new card. Optionally, D13 and D14 are executed to cancel the view corresponding to the new card. For details, please refer to the relevant descriptions of B4 to B17 and will not be repeated here.

[0430] The present invention provides a chip system comprising one or more processors configured to retrieve and execute instructions stored in a memory, thereby executing the method of the present invention. The chip system may be composed of a chip or may include a chip and other discrete devices.

[0431] Among them, the chip system may include an input circuit or interface for sending information or data, and an output circuit or interface for receiving information or data.

[0432] The present application also provides a computer program product, which, when executed by a processor, implements the method described in any method embodiment of the present application.

[0433] The computer program product can be stored in a memory and finally converted into an executable target file that can be executed by a processor through preprocessing, compilation, assembly and linking.

[0434] The present application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a computer, implements the method described in any method embodiment of the present application. The computer program can be a high-level language program or an executable target program.

[0435] The computer-readable storage medium may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link DRAM (SLDRAM), and direct RAM bus random access memory (DR RAM).

[0436] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and equipment and the technical effects produced can refer to the corresponding processes and technical effects in the aforementioned method embodiments, and will not be repeated here.

[0437] In the several embodiments provided in this application, the disclosed systems, devices and methods can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not executed. The device embodiments described above are merely schematic, and the division of units is only a logical function division. There may be other division methods in actual implementation, and multiple units or components may be combined or integrated into another system. In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the above coupling includes electrical, mechanical or other forms of connection.

[0438] It should be understood that in the various embodiments of the present application, the size of the serial number of each process does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0439] It should be understood that the term "plurality" used herein refers to two or more. The term "and / or" in this document simply describes a relationship between related objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists alone, A and B exist simultaneously, or B exists alone. Furthermore, the character " / " in this document generally indicates that the related objects are in an "or" relationship.

[0440] The terms (or numbers) "first", "second", ... etc. that appear in the embodiments of the present application are only used for descriptive purposes, that is, they are only used to distinguish different objects, such as different "coordinates", etc., and cannot be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, the features defined as "first", "second", ... etc. may explicitly or implicitly include one or more features. In the description of the embodiments of the present application, "at least one (item)" refers to one or more. "Multiple" means two or more. "At least one of the following (item)" or similar expressions refers to any combination of these items, including any combination of a single (item) or plural (items).

[0441] In short, the above description is only a preferred embodiment of the technical solution of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of this application shall be included in the scope of protection of this application.

Claims

1. A card display method, applied to an electronic device, characterized in that: The method comprises: Displaying a first interface, the first interface includes a first card, the first card is displayed in a first card style, and the first card includes first information; In response to a first operation on the first card, displaying a second interface, the second interface including a first preview area, a first control, a first style icon corresponding to the first card style, and a second style icon corresponding to the second card style, wherein the first preview area displays a preview effect of the first card style, and the first style icon is selected; In response to a second operation on the second style icon, displaying the second style icon in a selected state, and displaying a preview effect of the second card style in the first preview area, where the second card style includes a first animation; In response to the third operation of clicking the first control, a third interface is displayed, the third interface includes a second card, the second card is displayed in the second card style, the second card includes the first information, and a second animation is played in the second card. The second animation has the same content as the first animation, wherein the layer corresponding to the first information is located above the layer where the second animation is located.

2. The method according to claim 1, wherein The second card style includes a first foreground style, the second animation and a first background color. The layer where the first background color is located is below the layer where the second animation is located. The second style icon includes a first image, second information and a first background color. The first image is a frame image in the first animation. The second information in the second style icon is displayed as the first foreground style. The second information is part or all of the first information. The layer where the first background color is located is below the layer where the first image is located.

3. The method according to claim 2, wherein The first card style includes a second foreground style, a third animation, and a second background color, the layer containing the second background color is located below the layer containing the third animation, and the first style icon includes a second image, the second information, and the second background color; The first information in the first card displays the second foreground style, and the first information in the second card displays the first foreground style; The third animation played in the first card has different contents from the second animation, the second image is a frame of the third animation, and the second image has different contents from the first image; Wherein, the first card displays the second background color, and the second card displays the first background color; The second foreground style is the same as the first foreground style, and / or the second background color is the same as the first background color.

4. The method according to any one of claims 1 to 3, characterized in that The displaying of the second interface in response to the first operation on the first card includes: In response to a fourth operation of long pressing the first card, displaying a second control, where the second control is used to trigger editing of a card style of the first card; In response to a fifth operation of clicking the second control, the second interface is displayed.

5. The method according to claim 4, wherein The first card is a card in a card set, the card set includes multiple cards, the type of the card set is a first card set type, and the card set type is used to indicate the combination method of the multiple cards. The first card is displayed in the first card set type and the first card style, and the second card is displayed in the first card set type and the second card style. The second interface also includes a third control, and the third control is in a selected state; The displaying of the second-style preview effect in the first preview area includes: displaying a first preview card in the first preview area, the first preview card being displayed as the first card set type and the second card style, the first preview card including third information, the third information being part or all of the first information, and playing the first animation in the first preview card.

6. The method according to any one of claims 1 to 3, characterized in that The first card is a card in a card set, the card set includes multiple cards, the type of the card set is a first card set type, and the card set type is used to indicate the combination method of the multiple cards. The first card is displayed as the first card set type and the first card style, and the second card is displayed as the second card set type and the second card style. The displaying of the second interface in response to the first operation on the first card includes: In response to a fourth operation of long pressing the first card, displaying a second control, where the second control is used to trigger editing of a card style of the first card; In response to a fifth operation of clicking the second control, the second interface is displayed, where the second interface includes the first control, a second preview area, and a third control, where the third control is selected and associated with the first card set type; In response to a sixth operation on the second interface, the first preview area, the fourth control, the third style icon corresponding to the third card style, the first style icon, and the second style icon are displayed on the second interface, the fourth control is associated with the second card set type, the fourth control is unselected, the third style icon is selected, the first preview area displays a second preview card, the second preview card is displayed as the second card set type and the third card style, and the first style icon and the second style icon are both unselected; In response to a seventh operation on the fourth control, the fourth control is displayed as a selected state, the first style icon is displayed as a selected state, a third preview card is displayed in the first preview area, and the third preview card displays the second card set type and the first card style.

7. The method according to claim 6, wherein The displaying of the preview effect of the second style in the first preview area includes: A fourth preview card is displayed in the first preview area, the fourth preview card displays the second card set type and the second card style, and the first animation is played on the fourth preview card.

8. The method according to any one of claims 1 to 7, characterized in that Playing the second animation on the second card includes: After the second card plays the second animation for a preset number of times, the playing stops.

9. The method according to any one of claims 1 to 8, characterized in that After the second card stops playing the second animation, the second card displays a third image, where the third image is the last frame of the second animation, and the layer corresponding to the first information is located above the layer where the third image is located. The method further includes: In response to an eighth operation of the user, a fourth interface is displayed, wherein the fourth interface includes the second card, and the second card stops playing the second animation after playing the second animation a preset number of times; The eighth operation includes: unlocking the electronic device in a locked state, restarting the electronic device, or sliding on an interface other than the fourth interface.

10. The method according to any one of claims 1 to 8, characterized in that The second card is a card in a card set, the card set also includes a third card, and the third interface is displayed in response to the third operation of clicking the first control, including: In response to the third operation, displaying a fifth interface, wherein the fifth interface includes a third card; In response to the ninth operation of the user sliding the third card, or in response to the tenth operation of the electronic device automatically sliding the third card, the third interface is displayed, and the third interface includes the second card, wherein the position of the third card in the fifth interface is the same as the position of the second card in the third interface.

11. The method according to claim 10, wherein The displaying of a fifth interface in response to the third operation includes: In response to the third operation, displaying a sixth interface, the sixth interface including a service capsule, the service capsule being associated with the type of the card set; In response to an eleventh operation of clicking the service capsule, the fifth interface is displayed.

12. The method according to any one of claims 1 to 8, characterized in that The method further comprises: When the second card is displayed on the third interface, a push card is displayed, the push card covers the second card, the push card is associated with the demand scenario, and the push card includes fourth information, the fourth information being information provided to the user in the demand scenario; In response to the user's twelfth operation on the pushed card, the second card is redisplayed, and after the second animation of the second card is played a preset number of times, the playing is stopped.

13. The method according to any one of claims 1 to 12, characterized in that The first information is associated with a weather function, a clock function, or a calendar function; the first information includes at least one of the following: date information, time information, current location information, and current weather information at the current location.

14. The method according to claim 1, wherein The method comprises: Obtaining a first JSON file from the first application using a desktop application, where the first JSON file is used to configure the second card style, and the first JSON file includes a first foreground resource, a first background resource, a first background color resource, and a first animation resource; Displaying the second style icon on the second interface according to the first foreground resource, the first background resource, and the first background color resource; Displaying the preview effect of the second card style in the first preview area includes: displaying the preview effect of the second card style in the first preview area according to the first foreground resource, the first background color resource, and the first animation resource.

15. The method according to claim 1, wherein Playing the second animation on the second card includes: Using a first application to obtain a first JSON file, where the first JSON file is used to configure the second card style, and the first JSON file includes a first foreground resource, a first background resource, a first background color resource, and a first animation resource; The electronic device is in a screen-on state, and displays the second card according to the first JSON file, and the second card displays the second card style, wherein displaying the second card according to the first JSON file includes: playing the second animation in the second card according to the first animation resource.

16. The method according to claim 15, wherein The obtaining the first JSON file by using the first application includes: Obtain a second JSON file, parse the second JSON file, and generate a correspondence between the second JSON file and the first file identifier, wherein the second JSON file includes the first JSON file; In response to the second operation, storing a second file identifier using a desktop application, where the second file identifier corresponds to the second card style, and the first file identifier includes the second file identifier; In response to the third operation, the first application is used to obtain the first JSON file according to the second file identifier and the corresponding relationship.

17. The method according to claim 15 or 16, wherein: Playing the second animation in the second card according to the first animation resource includes: If the preset condition is not met, playing the second animation in the second card according to the first animation resource; The preset conditions include: the power level of the electronic device is less than or equal to a power threshold; Alternatively, the method further includes: detecting a thirteenth operation of the user unlocking the electronic device, and determining that the electronic device is in a screen-on state; the preset condition includes: before detecting the thirteenth operation, also detecting a fourteenth operation of the user unlocking the electronic device, and the interval between the time when the thirteenth operation is detected and the time when the fourteenth operation is detected is less than or equal to a time threshold.

18. The method according to claim 8, wherein After stopping the playing of the second animation, displaying the last frame image of the second animation on the second card, the method further includes: In response to the user's fifteenth operation of locking the screen, setting the animation view corresponding to the second card to the first frame image of the second animation; In response to a sixteenth operation of the user unlocking the electronic device, the second animation is played starting from the first frame image on the second card.

19. An electronic device, characterized in that: The electronic device includes: one or more processors, and a memory; The memory is coupled to the one or more processors, and the memory is used to store computer program code, where the computer program code includes computer instructions. The one or more processors call the computer instructions to enable the electronic device to perform the method according to any one of claims 1 to 18.

20. A chip system, characterized in that: The chip is applied to an electronic device, and the chip system includes one or more processors, and the one or more processors are used to call computer instructions to enable the electronic device to execute the method as described in any one of claims 1 to 18.

21. A computer-readable storage medium, characterized in that The computer-readable storage medium comprises instructions, which, when executed on an electronic device, cause the electronic device to perform the method according to any one of claims 1 to 18.

Images