Card display method, electronic device, and computer-readable storage medium

Abstract

The electronic device in this application includes a display, a processor, a memory, and a computer program stored in the memory. When executed by the processor, the computer program causes the electronic device to perform the following steps: displaying a current screen of a home screen, where the current screen of the home screen displays several icons and a background; detecting a user input on a first icon among the several icons; and displaying a first card on the current screen, where the first card does not fill the current screen. The first icon corresponds to a first application. The first card includes first card content including a portion of content included in an Mth interface displayed after the first application is launched and N controls, each of which is used to launch a corresponding application, where the application corresponds to a corresponding icon displayed on the home screen before the first card was displayed, and the first card is different from all or any portion of the Mth interface displayed after the first application is launched, where M and N are positive integers. Users can not only intuitively retrieve card content, but also directly launch some secondary applications and perform operations directly on the current screen of the home screen.

Description

[Technical field]

[0002] The present application relates to the field of information display, and in particular to a card display method, an electronic device, and a computer-readable storage medium. [Background technology]

[0003] Cards enable users to intuitively and conveniently browse related information or perform specific functions of applications on electronic devices, and are therefore widely used. However, currently, cards are displayed at fixed positions, lacking sufficient flexibility, and displaying and switching cards is complicated, resulting in high management costs, and cards occupy the space of icons, affecting the layout on the home screen or blocking icons, which brings inconvenience to the operation of applications corresponding to these icons. Summary of the Invention

[0004] In order to solve the aforementioned technical problems existing in the prior art, the present application provides a card display method, an electronic device, and a computer-readable storage medium, which enable a user to display and switch cards and operate other applications on a current screen of a home screen with only simple operations, thereby promoting flexible card positions, low management costs, and ease of operation, and improving user experience. [Means for solving the problem]

[0005] According to a first aspect, an electronic device is provided. The electronic device includes a display, one or more processors, a memory, and one or more computer programs. The one or more computer programs are stored in the memory, and when executed by the one or more processors, the one or more computer programs cause the electronic device to perform the following steps: displaying a current screen of a home screen, the current screen displaying several icons; detecting a first user input for a first icon of the several icons; and displaying a first card on the current screen in response to the first user input, the first card not filling the current screen. The first icon is a first folder icon, the first folder icon includes at least a first application icon, the first application icon corresponds to a first application, or the first icon is a first application icon, the first application icon corresponds to the first application. The first card includes at least: first card content, where M is a positive integer greater than or equal to 1, including a portion of the content included in the Mth layer interface displayed after the first application is launched; and N controls, where each control is used to launch a corresponding application, where the application corresponds to a corresponding icon displayed on the home screen before the first card is displayed, where N is a positive integer greater than or equal to 1. The first card is different from all and any portion of the Mth interface displayed after the first application is launched. The first card being different from all and any portion of the Mth interface displayed after the first application is launched means that the first card is different from the entire Mth interface displayed after the first application is launched and different from any portion of the Mth interface displayed after the first application is launched.In this way, a user input on the first icon can display the first card on the current screen without the need to switch from the current screen to another screen, thereby facilitating a relatively low card management cost and a relatively flexible position for displaying the card. In addition, since the range defined for the first card content is limited, the first card may be displayed with the content of only key information, allowing intuitive and quick acquisition of the key information. Moreover, since the first card is displayed on the current screen of the home screen and does not fill the current screen, the user can still intuitively acquire the information displayed in the area other than the first card on the current screen, and can directly perform operations on the current screen, for example, touch an icon displayed in the area other than the first card on the current screen to launch a corresponding application, or swipe left and right on the background displayed in the area other than the first card on the current screen of the home screen to switch to another screen. In addition, by using each of the N controls on the first card, the user can also directly launch a corresponding application. In other words, the user can not only intuitively obtain the first card content, but also directly launch an application corresponding to one of the N controls, and can directly perform operations on the current screen. This promotes the user's convenience in these three aspects and balances the convenience in the three aspects. Furthermore, the first card is always displayed on the current screen unless the display of the first card is stopped. In this way, if the user needs to use the first card content all the time in the near future, after the first card is displayed on the current screen, the user can directly use the first card content on the current screen without the need to perform the first user input again. The technical features included in this technical solution are closely related to each other and form an inseparable whole. Due to such a whole, this technical solution brings about the beneficial technical effects mentioned above. This applies to all solutions corresponding to the following embodiments and will not be mentioned again.

[0006] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the area occupied by the first card on the current screen is a first area, and before the first card is displayed, the N icons are located in the first area, or the N icons are located in an area other than the first area on the current screen, or the N icons are located on a screen of the home screen other than the current screen, or any part of the N icons is located in any of these three areas. In this way, before the first card is displayed, the N icons corresponding to the N controls on the first card can be located in the first area on the current screen, or in an area other than the first area, or on a screen of the home screen other than the current screen. Therefore, an application corresponding to any icon displayed on the home screen can be launched from the first card, which is more convenient for the user.

[0007] According to the first aspect or any one of the aforementioned implementations of the first aspect, the first user input is performed by a one-step operation, the first card content occupies a maximum percentage of the area of ​​the first card, the area of ​​the first card content is equal to or greater than the area of ​​the first icon, the area occupied by the first card on the current screen is a first area, the current screen also displays a background, before the first card is displayed, N controls correspond to N icons, the N icons are displayed in the first area, the first area includes only a first portion of the background, the first icon, and the N icons, and the number of icons included in the first area is equal to N+1. In this way, the card can be displayed by performing only one operation on the current screen, thereby greatly reducing the cost of card management steps, etc., providing the user with operation convenience, improving the user experience, and clarifying that the first card content is displayed more prominently so that the user can intuitively and quickly obtain the first card content; the position where the first card is displayed on the current screen is the position on the current screen, and the first icon, the N icons, and the background before the first card is displayed are displayed on the current screen. 1It is further clarified that the position includes the part of. In this way, it is more convenient for the user to obtain the positional relationship between the first card, the first icon, and the N icons.

[0008] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, M is a positive integer equal to or greater than 2. In this way, through user input, the second layer interface, the third layer interface, or a deeper layer interface displayed after the first application is launched can be directly displayed on the card, reducing operation steps and providing convenience to the user. For example, the Alipay payment code interface is the Alipay second layer interface, which is directly displayed through user input. Other interfaces deeper than the second layer interface can also be directly displayed through user input.

[0009] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: detecting a second user input for one of the N controls; in response to the second user input, displaying an S-th layer interface to be displayed after an application corresponding to one of the N controls is launched, where S is a positive integer equal to or greater than 1; detecting a back operation; and in response to the back operation, displaying a current screen, where the content displayed on the current screen is the content displayed on the current screen before the second user input is responded to. In this way, a way is provided for accessing the S-th layer interface to be displayed after an application corresponding to one of the N controls is launched from the first card. This way provides the user with an easy operation and enables fast switching to the S-th layer interface to be displayed after an application corresponding to one of the N controls is launched. In addition, a method is also provided for returning from the Sth layer interface displayed after an application corresponding to one of the N controls is launched to the content displayed on the current screen before the second user input is responded to, i.e., to the state where the first card is displayed on the current screen. This method provides ease of operation to the user and enables fast switching to the state where the first card is displayed on the current screen.

[0010] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: detecting a third user input for the first card on the current screen, and displaying in the first area the content that was displayed in the first area before the first user input was responded to in response to the third user input. In this way, the display of the first card on the current screen can be stopped via the third user input without the need to switch from the current screen to another screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and enabling quick switching to a state of displaying the content that was displayed in the first area before the first user input was responded to.

[0011] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: displaying L icons in an area other than the first area on the current screen, where L is a positive integer equal to or greater than 1; detecting a fourth user input on one of the L icons; displaying an interface to be displayed after an application corresponding to one of the L icons is launched in response to the fourth user input; detecting a back operation; and displaying a current screen in response to the back operation, where the content displayed on the current screen is the content displayed on the current screen before the fourth user input is responded to. In this way, after the first card is displayed on the current screen, the user can launch the corresponding application by performing an operation on one of the L icons displayed in an area other than the first area on the current screen, which provides convenience of operation. In addition, a way is provided for returning to the content displayed on the current screen before the fourth user input is responded to, i.e., returning to a state where the first card is displayed on the current screen, from the interface displayed after an application corresponding to one of the L icons is launched. This approach provides ease of operation for the user and allows for fast switching to a state where the first card is displayed on the current screen.

[0012] According to the first aspect or any one of the preceding embodiments of the first aspect, the first card further includes a first control, the first control is used to launch a first application, the first control is a control that is displayed after the first icon is reduced in size by a first factor, the N controls are controls that are displayed after the N icons are reduced in size by a second factor, an area of ​​the first control is greater than an area of ​​any one of the N controls, the first control, the N controls, and the first card content are displayed at a top left corner, a top right corner, and a bottom center of the first card, respectively, and a first user input is provided. The force is a first voice input or a first gesture input, the first gesture input is a gesture input whose origin is located at the first icon and whose swipe direction is upward, the first card changes with the first gesture input, the second user input and the fourth user input are a second voice input and a fourth voice input or a second gesture input and a fourth gesture input, respectively, the second gesture input and the fourth gesture input are touch inputs, and the third gesture input is implemented by one-step operation, the third gesture input is a gesture input whose origin is located at the first card and whose swipe direction is opposite to that of the first gesture input. In this way, the user can know from the first card that the applications corresponding to the N controls can also be launched from the first card. In addition, the first control is prominently displayed to occupy a larger area so that the user knows more clearly that the first card content corresponds to the first control. Moreover, preferred ways for distribution and display of the first control, the N controls, and the first card content on the first card are provided. In addition, two specific ways for user input are clarified, requiring only operation on the current screen without the need to switch from the current screen to another screen of the home screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and improving the user experience. Furthermore, for the implementation of the third gesture input, the first gesture input is provided. A preferred, easy to use and memorable way is provided that can be memorized by the user in conjunction with one gesture input way.

[0013] According to the first aspect or any one of the preceding embodiments of the first aspect, the electronic device further performs the following steps: detecting a fifth user input on a second icon of the number of icons, and displaying a second card on the current screen in response to the fifth user input, where the second card does not fill the current screen, wherein the second icon is a second folder icon, the second folder icon includes at least a second application icon, the second application icon corresponds to the second application, or the second icon is a second application icon, the second application icon corresponds to the second application. The second card includes at least: second card content, the second card content corresponding to the second application and including a portion of the content included in the Pth tier interface displayed after the second application is launched, P being a positive integer greater than or equal to 1; and K controls, each of the K controls being used to launch a corresponding application, the application corresponding to a corresponding icon that was displayed on the home screen before the second card was displayed, K being a positive integer greater than or equal to 1. The second card is distinct from all and any portion of the Pth tier interface displayed after the second application is launched. The area of ​​the second card content is greater than the area of ​​the second icon. The area occupied by the second card on the current screen is the second area. The second area and the first area do not overlap and the current screen continues to display the first card, or the second area and the first area overlap and the current screen stops displaying the first card. In this way, the second card can be displayed on the current screen, and the technical effect of displaying the second card on the current screen is the same as the technical effect of displaying the first card on the current screen. In addition, the scope defined for the second card content is further limited, and some redundant information is excluded, allowing a concise second card content to be obtained or used by the user. In other words, when the second card is displayed on the current screen, When the first card is displayed on the current screen and does not fill the current screen, the user can not only intuitively obtain the second card content, but also directly launch the fourth application and directly perform operations on the current screen. This promotes convenience in these three aspects and balances convenience in the three aspects. Furthermore, the first card and the second card can both be displayed on the current screen, and the operation procedure used to display the second card and the first card is the same, but different contents are displayed on the second card and the first card, and the icon on which the second card is displayed is different from the icon on which the first card is displayed. The display of the first card and the display of the second card may be independent of each other without affecting each other. Moreover, the second card will always be displayed on the current screen unless the display of the second card is stopped. In this way, if the user needs to always use the second card content in the near future, after the second card is displayed on the current screen, the user can directly use or obtain the second card content corresponding to the second icon, which is on the current screen, without the need to perform the fifth user input again. Additionally, the changes clarify the conditions under which both a first and second card will be displayed, and how a first and second card will be displayed if both are not supported.

[0014] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: The fifth user input is implemented by a one-step operation, the second card content occupies the largest proportion of the area of ​​the second card, the area of ​​the second card content is equal to or larger than the area of ​​the second icon, before the second card is displayed, the K controls correspond to the K icons, and the K icons are displayed in a second area, the second area only includes the second part of the background, the second icon, and the K icons, and the number of icons included in the second area is equal to K+1. In this way, before the second card is displayed, the K icons corresponding to the K controls on the second card may be located in the second area on the current screen, or in an area other than the second area, or on a screen of the home screen other than the current screen. Therefore, an application corresponding to any icon displayed on the home screen can be launched from the second card, which is more convenient for the user.

[0015] According to the first aspect or any one of the above-mentioned implementations of the first aspect, the electronic device includes the following steps: detecting a sixth user input for one of the K controls; and in response to the sixth user input, displaying a Qth layer interface to be displayed after an application corresponding to one of the K controls is launched, where Q is a positive integer equal to or greater than 1; detecting a back operation; and in response to the back operation, displaying a current screen, where the content displayed on the current screen is the Qth layer interface. 6and a step of: accessing the second card from the second card to the Qth layer interface displayed after an application corresponding to one of the K controls is launched, the Qth layer interface being the content that was displayed on the current screen before the sixth user input was responded to. In this way, a manner is provided for accessing from the second card to the Qth layer interface displayed after an application corresponding to one of the K controls is launched. This manner provides ease of operation for the user and enables fast switching to the Qth layer interface displayed after an application corresponding to one of the K controls is launched. In addition, a manner is also provided for returning from the Qth layer interface displayed after an application corresponding to one of the K controls is launched to the content that was displayed on the current screen before the sixth user input was responded to. This manner provides ease of operation for the user.

[0016] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: detecting a seventh user input for the second card on the current screen; and, in response to the seventh user input, displaying in the second area the content that was displayed in the second area before the fifth user input was responded to. In this way, the display of the second card on the current screen can be stopped via the seventh user input without the need to switch from the current screen to another screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and preventing the display of the second card from being displayed in the second area before the fifth user input was responded to. 2 This allows the user to quickly switch to a state that represents the content that was displayed in the previous region.

[0017] According to the first aspect or any one of the above-mentioned embodiments of the first aspect, the electronic device further performs the following steps: displaying R icons in an area other than the second area on the current screen, where R is a positive integer equal to or greater than 1; detecting an eighth user input for one of the R icons; displaying an interface to be displayed after an application corresponding to one of the R icons is launched in response to the eighth user input; detecting a back operation; and displaying the current screen in response to the back operation, where the content displayed on the current screen is the content displayed on the current screen before the eighth user input is responded to. In this way, after the second card is displayed on the current screen, the user can launch the corresponding application by performing an operation on one of the R icons displayed in an area other than the second area on the current screen, which provides convenience of operation. In addition, a way is provided for returning to the content displayed on the current screen before the eighth user input is responded to from the interface to be displayed after an application corresponding to one of the R icons is launched. This way provides the user with ease of operation.

[0018] According to the first aspect or any one of the preceding embodiments of the first aspect, the second card further includes a second control, the second control being used to launch a second application, the second control being a control that is displayed after the second icon is reduced in size by a third factor, and the K controls being controls that are displayed after the K icons are reduced in size by a fourth factor, an area of ​​the second control being greater than an area of ​​any one of the K controls, and a shape of the first card is a shape of the second card. a shape of the second card is the same as that of the first card, a size of the first card is the same as that of the second card, the first magnification is the same as the third magnification, and the second magnification is the same as the fourth magnification; the second control, the K controls, and the second card content are displayed at the top left corner, the top right corner, and the bottom center of the second card, respectively; the fifth user input is a fifth voice input or a fifth gesture input, the fifth gesture input being a gesture input having an origin located at the second icon and a swipe direction of upwards, and the second card changes with the fifth gesture input; the sixth user input, the seventh user input, and the eighth user input are a sixth voice input, a seventh voice input, and an eighth voice input, or a sixth gesture input, a seventh gesture input, and an eighth gesture input, respectively; the sixth gesture input and the eighth gesture input are touch inputs; The seventh gesture input is performed by a one-step operation, The seventh gesture input is a gesture input whose origin is located on the second card and whose swipe direction is opposite to that of the fifth gesture input. In this way, the user can know from the second card that the application corresponding to the K controls can also be launched from the second card. In addition, the second control is prominently displayed to occupy a larger area so that the user can more clearly know that the second card content corresponds to the second control. Moreover, a preferred manner is provided for distributing and displaying the second control, the K controls, and the second card content on the second card. In addition, two specific manners for user input are clarified, which only require operation on the current screen without the need to switch from the current screen to another screen of the home screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and improving the user experience. Furthermore, for the implementation of the seventh gesture input, a preferred manner that is easy to use and easy to remember is provided, which can be memorized by the user together with the manner of the fifth gesture input.

[0019] According to a second aspect, a card display method is provided. The method is applied to an electronic device including a display, and includes the steps of: displaying a current screen of a home screen on the display, the current screen displaying several icons; detecting a first user input for a first icon of the several icons; and displaying a first card on the current screen in response to the first user input, the first card not filling the current screen. The first icon is a first folder icon, the first folder icon includes at least a first application icon, the first application icon corresponds to the first application, or the first icon is a first application icon, the first application icon corresponds to the first application. The first card includes at least: first card content, where M is a positive integer greater than or equal to 1, including a portion of the content included in the Mth layer interface displayed after the first application is launched; and N controls, where each control is used to launch a corresponding application, where the application corresponds to a corresponding icon displayed on the home screen before the first card is displayed, where N is a positive integer greater than or equal to 1. The first card is different from all and any part of the Mth interface displayed after the first application is launched. The first card being different from all and any part of the Mth interface displayed after the first application is launched means that the first card is different from the entire Mth interface displayed after the first application is launched and different from any part of the Mth interface displayed after the first application is launched. In this way, a user input on the first icon can display the first card on the current screen without the need to switch from the current screen to another screen, thereby facilitating a relatively low card management cost and a relatively flexible position for displaying the card.In addition, since the range defined for the first card content is limited, the first card may be displayed with the content of only the key information, enabling intuitive and quick acquisition of the key information. Moreover, since the first card is displayed on the current screen of the home screen and does not fill the current screen, the user can still intuitively acquire the information displayed in the area other than the first card on the current screen, and can directly perform operations on the current screen, for example, touch an icon displayed in the area other than the first card on the current screen to launch a corresponding application, or swipe left and right on the background displayed in the area other than the first card on the current screen of the home screen to switch to another screen. In addition, by using one of the N controls on the first card, the user can also directly launch a corresponding application. In other words, the user can not only intuitively acquire the first card content, but also directly launch an application corresponding to one of the N controls, and can also directly perform operations on the current screen. This promotes the user's convenience in these three aspects and balances the convenience in the three aspects. In addition, unless the display of the first card is stopped, the first card is always displayed on the current screen. In this way, if the user needs to use the first card content all the time in the near future, after the first card is displayed on the current screen, the user can directly use the first card content on the current screen without needing to perform the first user input again.

[0020] According to a second aspect, the method includes: a first user input is performed by a one-step operation; the first card content occupies the largest percentage of the area of ​​the first card; The area of ​​the first card content is equal to or greater than the area of ​​the first icon; The area occupied by the first card on the current screen is the first area, The current screen also displays the background, Before the first card is displayed, the N controls correspond to the N icons, and the N icons are displayed in a first area, the first area only includes a first part of the background, the first icon, and the N icons, and the number of icons included in the first area is equal to N+1. In this way, the card can be displayed by performing only one operation on the current screen, thereby greatly reducing the cost of card management steps, etc., providing the user with operation convenience, improving the user experience, making it clear that the first card content is displayed more prominently, so that the user can intuitively and quickly obtain the first card content, and the position where the first card is displayed on the current screen is the position on the current screen where the first card is displayed, and the first icon, the N icons, and the first part of the background before the first card is displayed are displayed in the first area. 1 It is further clarified that the position includes the part of. In this way, it is more convenient for the user to obtain the positional relationship between the first card, the first icon, and the N icons.

[0021] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes the steps of detecting a second user input for one of the N controls, and in response to the second user input, displaying an S-th tier interface to be displayed after an application corresponding to one of the N controls is launched, where S is a positive integer equal to or greater than 1, detecting a back operation, and in response to the back operation, displaying a current screen, where the content displayed on the current screen is the content displayed on the current screen before the second user input is responded to. In this way, a manner is provided for accessing the S-th tier interface to be displayed after an application corresponding to one of the N controls is launched from a first card. This manner provides a user with ease of operation and enables fast switching to the S-th tier interface to be displayed after an application corresponding to one of the N controls is launched. In addition, a manner is also provided for returning from the S-th tier interface to the content displayed on the current screen before the second user input is responded to, i.e., returning to a state where the first card is displayed on the current screen. This approach provides ease of operation for the user and allows for fast switching to a state where the first card is displayed on the current screen.

[0022] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes the steps of detecting a third user input for a first card on a current screen, and displaying in the first area, in response to the third user input, a content that was displayed in the first area before the first user input was responded to. In this way, the display of the first card on the current screen can be stopped via the third user input without the need to switch from the current screen to another screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and enabling a quick switch to a state of displaying the content that was displayed in the first area before the first user input was responded to.

[0023] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes the steps of displaying L icons in an area other than the first area on the current screen, where L is a positive integer equal to or greater than 1; detecting a fourth user input on one of the L icons; displaying an interface to be displayed after an application corresponding to one of the L icons is launched in response to the fourth user input; detecting a back operation; and displaying a current screen in response to the back operation, where the content displayed on the current screen is the content displayed on the current screen before the fourth user input is responded to. In this way, after the first card is displayed on the current screen, the user can launch the corresponding application by performing an operation on one of the L icons displayed in an area other than the first area on the current screen, which provides convenience of operation. In addition, a way is provided for returning from the interface displayed after an application corresponding to one of the L icons is launched to the content displayed on the current screen before the fourth user input is responded to, i.e., returning to a state where the first card is displayed on the current screen. This approach provides ease of operation for the user and allows for fast switching to a state where the first card is displayed on the current screen.

[0024] According to the second aspect or any one of the preceding embodiments of the second aspect, the method includes: the first card further includes a first control, the first control is used to launch a first application, the first control is a control on which the first icon is displayed after being reduced in size by a first factor, and the N controls are: A control in which N icons are displayed after being reduced in size by a second factor, The area of ​​the first control is greater than the area of ​​any one of the N controls; The first control, the N controls, and the first card content are displayed in the top left corner, top right corner, and bottom center of the first card, respectively; the first user input is a first voice input or a first gesture input, the first gesture input is a gesture input having an origin located at the first icon and a swipe direction of an upward direction, and the first card changes with the first gesture input; the second user input and the fourth user input are a second voice input and a fourth voice input, or a second gesture input and a fourth gesture input, respectively; the second gesture input and the fourth gesture input are touch inputs; The third gesture input is performed by a one-step operation, The third gesture input is a gesture input whose origin is located on the first card and whose swipe direction is opposite to that of the first gesture input. In this way, the user can know from the first card that the application corresponding to the N controls can also be launched from the first card. In addition, the first control is prominently displayed to occupy a larger area so that the user can more clearly know that the first card content corresponds to the first control. Moreover, a preferred manner is provided for distributing and displaying the first control, the N controls, and the first card content on the first card. In addition, two specific manners for user input are clarified, which require only operation on the current screen without the need to switch from the current screen to another screen of the home screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and improving the user experience. Furthermore, a preferred manner is provided for implementing the third gesture input, which is easy to use and easy to remember, and can be memorized by the user together with the manner of the first gesture input.

[0025] According to the second aspect or any one of the preceding embodiments of the second aspect, the method includes detecting a fifth user input on a second icon of the number of icons, and displaying a second card on the current screen in response to the fifth user input, where the second card does not fill the current screen. The second icon is a second folder icon, where the second folder icon includes at least a second application icon, where the second application icon corresponds to the second application, or the second icon is a second application icon, where the second application icon corresponds to the second application. The second card includes at least a second card content, where the second card content corresponds to the second application and includes a portion of the content included in the P-th layer interface displayed after the second application is launched, where P is a positive integer greater than or equal to 1, and K controls, where each of the K controls is used to launch a corresponding application, where the application corresponds to a corresponding icon that was displayed on the home screen before the second card was displayed, where K is a positive integer greater than or equal to 1. The second card is different from all and any part of the P-th layer interface that is displayed after the second application is launched. The area of ​​the second card content is greater than the area of ​​the second icon. The area occupied by the second card on the current screen is the second area. The second area and the first area do not overlap, and the current screen continues to display the first card, or the second area and the first area overlap, and the current screen stops displaying the first card. In this way, the second card may be displayed on the current screen, and the technical effect of displaying the second card on the current screen is the same as the technical effect of displaying the first card on the current screen. In addition, the scope defined for the second card content is further limited, and some of the redundant information is excluded, allowing the concise second card content to be obtained or used by the user. In other words, if the second card is displayed on the current screen and does not fill up the current screen, The user can not only intuitively obtain the second card content, but also directly launch the fourth application, and can directly perform operations on the current screen. This promotes convenience in these three aspects and balances convenience in the three aspects. Furthermore, the first card and the second card can both be displayed on the current screen, and the operation procedure used to display the second card and the first card is the same, but different contents are displayed on the second card and the first card, and the icon on which the second card is displayed is different from the icon on which the first card is displayed. The display of the first card and the display of the second card may be independent of each other without affecting each other. Moreover, the second card will always be displayed on the current screen unless the display of the second card is stopped. In this way, if the user needs to always use the second card content in the near future, after the second card is displayed on the current screen, the user can directly use or obtain the second card content corresponding to the second icon on the current screen without the need to perform the fifth user input again. Additionally, the changes clarify the conditions under which both a first and second card will be displayed, and how a first and second card will be displayed if both are not supported.

[0026] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes: the fifth user input is implemented by a one-step operation, the second card content occupies the largest proportion of the area of ​​the second card, the area of ​​the second card content is equal to or larger than the area of ​​the second icon, before the second card is displayed, K controls correspond to K icons, and the K icons are displayed in a second area, the second area only includes a second part of the background, the second icon, and the K icons, and the number of icons included in the second area is equal to K+1. In this way, before the second card is displayed, the K icons corresponding to the K controls on the second card may be located in the second area on the current screen, or in an area other than the second area, or on a screen of the home screen other than the current screen. Therefore, an application corresponding to any icon displayed on the home screen can be launched from the second card, which is more convenient for the user.

[0027] According to the second aspect or any one of the aforementioned implementations of the second aspect, the method includes the steps of detecting a sixth user input for one of the K controls, and in response to the sixth user input, displaying a Qth tier interface to be displayed after an application corresponding to one of the K controls is launched, where Q is a positive integer greater than or equal to 1; detecting a back operation; and in response to the back operation, displaying a current screen, where the content displayed on the current screen is a content of the Qth tier. 6and a step of: accessing the Qth layer interface displayed after an application corresponding to one of the K controls is launched from the second card, the Qth layer interface being the content that was displayed on the current screen before the sixth user input was responded to. In this way, a manner is provided for accessing the Qth layer interface displayed after an application corresponding to one of the K controls is launched from the second card. This manner provides ease of operation for the user and enables fast switching to the Qth layer interface displayed after an application corresponding to one of the K controls is launched. In addition, a manner is also provided for returning from the Qth layer interface displayed after an application corresponding to one of the K controls is launched to the content that was displayed on the current screen before the sixth user input was responded to. This manner provides ease of operation for the user.

[0028] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes detecting a seventh user input for a second card on a current screen, and displaying in the second area, in response to the seventh user input, a content that was displayed in the second area before the fifth user input was responded to. In this way, the display of the second card on the current screen can be stopped via the seventh user input without the need to switch from the current screen to another screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and preventing the display of the second card from being displayed in the second area before the fifth user input was responded to. 2 This allows the user to quickly switch to a state that represents the content that was displayed in the previous region.

[0029] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes the steps of: displaying R icons in an area other than the second area on the current screen, where R is a positive integer equal to or greater than 1; detecting an eighth user input on one of the R icons; displaying an interface to be displayed after an application corresponding to one of the R icons is launched in response to the eighth user input; detecting a back operation; and displaying a current screen in response to the back operation, where the content displayed on the current screen is the content displayed on the current screen before the eighth user input is responded to. In this way, after the second card is displayed on the current screen, the user can launch the corresponding application by performing an operation on one of the R icons displayed in an area other than the second area on the current screen, which provides convenience of operation. In addition, a way is provided for returning to the content displayed on the current screen before the eighth user input is responded to from the interface displayed after an application corresponding to one of the R icons is launched. This way provides the user with ease of operation.

[0030] According to the second aspect or any one of the preceding embodiments of the second aspect, the method comprises: the second card further comprising a second control; a second control is used to launch a second application, the second control being a control in which the second icon is displayed after being reduced in size by a third factor; K controls are the controls in which K icons are displayed after being reduced in size by the fourth factor, the area of ​​the second control is greater than the area of ​​any one of the K controls; The shape of the first card is the same as the shape of the second card, and the size of the first card is the same as the size of the second card; the first magnification is equal to the third magnification, the second magnification is equal to the fourth magnification; The second control, the K controls, and the second card content are displayed in the top left corner, top right corner, and bottom center of the second card, respectively; the fifth user input is a fifth speech input or a fifth gesture input, the fifth gesture input being a gesture input having an origin located at the second icon and a swipe direction of upwards, the second card changing with the fifth gesture input; the sixth user input, the seventh user input, and the eighth user input are a sixth voice input, a seventh voice input, and an eighth voice input, or a sixth gesture input, a seventh gesture input, and an eighth gesture input, respectively; the sixth gesture input and the eighth gesture input are touch inputs; The seventh gesture input is performed by a one-step operation, The seventh gesture input is a gesture input whose origin is located on the second card and whose swipe direction is opposite to that of the fifth gesture input. In this way, the user can know from the second card that the application corresponding to the K controls can also be launched from the second card. In addition, the second control is prominently displayed to occupy a larger area so that the user can more clearly know that the second card content corresponds to the second control. Moreover, a preferred manner is provided for distributing and displaying the second control, the K controls, and the second card content on the second card. In addition, two specific manners for user input are clarified, which require only operation on the current screen without the need to switch from the current screen to another screen of the home screen, thereby greatly reducing the cost of card management steps, etc., providing ease of operation, and improving the user experience. Furthermore, for the implementation of the seventh gesture input, a preferred manner that is easy to use and easy to remember is provided, which can be memorized by the user together with the manner of the fifth gesture input.

[0031] According to the second aspect or any one of the aforementioned implementations of the second aspect, when the first folder icon includes E first application icons, where E is a positive integer equal to or greater than 2, the method includes: detecting a first switching user input; and in response to the first switching user input, switching from a first card content of the first card to another first card content, where the first card content and the another first card content respectively correspond to two of the E first application icons. In this way, when the first folder icon includes a plurality of first application icons, the first card content of the first card can be changed based on the first switching user input made by the user.

[0032] According to the second aspect or any one of the above-mentioned implementations of the second aspect, when the second folder icon includes F second application icons, F being a positive integer equal to or greater than 2, the method includes: detecting a second switching user input; and switching from a second card content of the second card to another second card content in response to the second switching user input, the second card content and the another second card content corresponding to two of the F second application icons, respectively. In this way, when the second folder icon includes a plurality of second application icons, the second card content of the second card can be changed based on the switching user input made by the user. In this way, when the second folder icon includes a plurality of second application icons, the second card content of the second card can be changed based on the second switching user input made by the user.

[0033] According to the second aspect or any one of the above-mentioned implementations of the second aspect, when at least one of the E first application icons corresponds to a plurality of first cards, the method includes detecting a third switching user input, and switching the plurality of first cards in response to the third switching user input. In this way, when at least one first application icon included in the first folder icon corresponds to a plurality of first cards, the plurality of first cards can be switched based on the third switching user input by the user.

[0034] According to the second aspect or any one of the above-mentioned implementations of the second aspect, when at least one of the F second application icons corresponds to a plurality of second cards, the method includes detecting a fourth switching user input, and switching the plurality of second cards in response to the fourth switching user input. Thus, when at least one second application icon included in the second folder icon corresponds to a plurality of second cards, the plurality of second cards may be switched based on the fourth switching user input by the user.

[0035] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the first card floats on the current screen, and the first card further includes a fixation button, and after the fixation button is touched, the first card is fixed on the current screen. In this way, another way is provided for displaying the first card on the current screen, so that at least two options are provided to the user. The user can choose whether to float the first card on the current screen or to fix the first card on the current screen based on the user's preference.

[0036] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the second card floats on the current screen, and the second card further includes a fixation button, and after the fixation button is touched, the second card is fixed on the current screen. In this way, another way is provided for displaying the second card on the current screen, so that at least two options are provided to the user. The user can choose whether to float the second card on the current screen or to fix the second card on the current screen based on the user's preference.

[0037] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, after the first card is pinned to the current screen, the pin button of the first card changes to a close button, and after the close button is touched, the display of the first card is stopped, or the first card further includes a close button, and after the close button is touched, the display of the first card is stopped. Thus, two embodiments for stopping the display of the first card are provided. The user stops the display of the first card by using the close button.

[0038] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, after the second card is fixed on the current screen, the fix button of the second card changes to a close button, and after the close button is touched, the display of the second card is stopped, or the second card further includes a close button, and after the close button is touched, the display of the second card is stopped. Thus, two embodiments for stopping the display of the second card are provided. The user stops the display of the second card by using the close button.

[0039] According to the second aspect or any one of the above-mentioned implementations of the second aspect, when the first icon is a first application icon and the first application icon corresponds to a plurality of first cards, the method includes detecting a fifth switching user input and switching the plurality of first cards in response to the fifth switching user input. In this way, when the first icon is a first application icon and corresponds to a plurality of first cards, the plurality of first cards can be switched based on the fifth switching user input made by the user.

[0040] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the method includes the steps of: detecting a sixth switching user input for the first control and one of the N controls; and in response to the sixth switching user input, exchanging positions of the one of the N controls and the first control and adjusting the magnification to fit the adjusted positions, where the first card content is updated, and the updated first card content corresponds to the adjusted first control. In this way, by exchanging positions of the first control and one of the N controls, the user can conveniently and flexibly update the first card content to display the updated first card content, and thus feels more convenient and flexible.

[0041] According to the second aspect or any one of the preceding embodiments of the second aspect, the N controls are initially displayed on the first card in the form of a sphere, and after the sphere is touched, the first card displays the N controls. In this way, another operation manner is provided, such that the N controls expand for display only when the N controls need to expand for display, and shrink into a sphere when the N controls do not need to expand for display, thereby saving more display space for displaying other content included in the first card.

[0042] According to the second aspect or any one of the preceding embodiments of the second aspect, the method includes detecting a ninth user input to the first control or any one of the N controls, and displaying, in response to the ninth user input, content on the display to be displayed after the first application or an application corresponding to any one of the N controls is launched. In this way, it is convenient for a user to launch the first application corresponding to the first control on the first card or an application corresponding to any one of the N controls on the first card.

[0043] According to the second aspect or any one of the aforementioned implementations of the second aspect, the method includes the steps of: detecting that a touch device is placed above the first control or any one of the N controls in a direction perpendicular to a current screen, and detecting that an input to the first control or any one of the N controls is released in that direction; or detecting that a touch device is placed above the first control or any one of the N controls in a direction perpendicular to the current screen, and that the first control or any one of the N controls is enlarged, and detecting that an input to the first control or any one of the N controls is released in that direction; or detecting that a touch device is placed above any one of the N controls in a direction perpendicular to the current screen, and that any one of the N controls is enlarged, and detecting a touch input to any one of the enlarged controls; and displaying, in response to the input, content on the display that is to be displayed after an application corresponding to the first application or any one of the N controls is launched. In this way, a way is provided for launching an application corresponding to the first control or any one of the N controls, thereby allowing a user to more conveniently, quickly and flexibly launch a first application corresponding to the first control on the first card or an application corresponding to any one of the N controls on the first card.

[0044] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, after the first card is selected and dragged to another area other than the first area on the current screen, if there is another first icon in the other area according to the relative position of the first icon in the first area, the first card changes to another first card, the another first card includes another first card content, and the another first card content corresponds to the another first icon. In this way, after the first card is dragged to another area on the current screen that meets a certain condition, the first card is automatically changed and updated, thereby providing more convenience to the user.

[0045] According to the second aspect or any one of the aforementioned implementations of the second aspect, the method includes the steps of detecting a tenth user input on the current screen; in response to the tenth user input, putting the current screen into an edit state, the first card being transparent or semi-transparent, and the first control and / or one of the N controls being restored to a size and position of the first icon and / or a size and position of a corresponding icon among the N icons on the current screen existing before the first user input is responded to; detecting that any one or more icons in the first area on the current screen have been dragged out of the first area and released, or detecting that any one or more icons outside the first area on the current screen have been dragged into the first area and released; in response to the detection result, ceasing to display the first card; and arranging and displaying icons in the first area according to an arrangement scheme of icons on the home screen. In this way, a manner is provided in which the display of the first card is stopped when an icon in the first area is dragged out of the first area and released, or when an icon outside the first area is dragged into the first area and released, after the current screen enters an editing state. Therefore, it is convenient for a user to stop displaying the first card in such a manner. Furthermore, a corresponding operation may be performed on the second card to obtain a corresponding result. The operation performed on the second card and the obtained result respectively correspond to the operation performed on the first card and the obtained result, and therefore the details are not described again in this specification.

[0046] According to the second aspect or any one of the aforementioned implementations of the second aspect, the method includes the steps of detecting an eleventh user input on the current screen; in response to the eleventh user input, putting the current screen into an edit state, the card being transparent or semi-transparent, and the first control and / or one of the N controls being restored to a size and position of the first icon and / or a size and position of a corresponding icon among the N icons on the current screen existing before the first user input is responded to; detecting that any one or more icons within the first area on the current screen have been dragged out of the first area and released, or detecting that any one or more icons outside the first area on the current screen have been dragged into the first area and released; and in response to the detection result, updating the first card accordingly, wherein a first card content of the updated first card corresponds to the updated first icon. In this way, when an icon in the first area is dragged out of the first area and released, or when an icon outside the first area is dragged into the first area and released, after the current screen enters an edit state, a way is provided for updating the first card. Therefore, it is convenient for the user to update the first card in this way. Furthermore, a corresponding operation may be performed on the second card to obtain a corresponding result. The operation performed on the second card and the obtained result respectively correspond to the operation performed on the first card and the obtained result, and therefore the details are not described again in this specification.

[0047] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the first card is moved on the current screen by a drag gesture. In this way, an operation method is provided, and the first card is not dragged after being unfixed by using a gesture such as a long press, but is directly dragged on the current screen by a drag gesture. Therefore, it is more convenient for the user to operate and the user experience is improved. Furthermore, a corresponding operation may be performed on the second card to obtain a corresponding result. The operation performed on the second card and the obtained result respectively correspond to the operation performed on the first card and the obtained result, and therefore the details are not described again in this specification.

[0048] According to the second aspect or any one of the above-mentioned implementations of the second aspect, after the first card is selected and dragged to an area on the current screen other than the first card and / or the second card, and released, the content contained in the first card remains unchanged. Thus, when the first card is dragged to an area on the current screen other than the first card and / or the second card, no automatic switch to displaying the new first card is performed.

[0049] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the shapes of the first card and the second card are preset. Preferably, the shapes of the first card and the second card are preset to be the same. In this way, the cards seen by the user have the same shape, providing a good user experience.

[0050] According to the second aspect or any one of the preceding embodiments of the second aspect, the first card is in the shape of a rounded rectangle, the rounded rectangle covering several rows and several columns of icons arranged on the home screen, in this way the shape of the first card is kept consistent with the arrangement of icons in the non-first card area on the current screen.

[0051] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the first card further includes a first sub-control, an area occupied by the first sub-control on the first card is a first sub-area, an area occupied by the first card content on the first card is a third area, the first sub-area is outside the third area, after a twelfth user input on the first sub-control is detected, displaying the first card content is stopped, a second sub-control corresponding to the first card content is displayed in the second sub-area, a third card content corresponding to the first sub-control is displayed in the third area, the second sub-area is outside the third area, the first card content and the third card content respectively correspond to different functions and / or different information of the first application. In this way, this allows a user to switch between card contents corresponding to different functions and / or different information of the first application by using the user input on the first sub-control.

[0052] According to the second aspect or any one of the preceding embodiments of the second aspect, the first sub-region and the second sub-region are the same or the first sub-region and the second sub-region are different.

[0053] According to the second aspect or any one of the above-mentioned embodiments of the second aspect, the first card content further includes a second sub-control, the area occupied by the first card content on the first card is a third area, and after a thirteenth user input to the second sub-control is detected, the display of the first card content is stopped, and a fourth card content corresponding to the second sub-control is displayed in the third area. In this way, different card contents can be switched by using the control included in the card content, providing further convenience to the user.

[0054] According to the second aspect or any one of the foregoing embodiments of the second aspect, the electronic device includes a smart device such as, but not limited to, a mobile phone, a tablet computer, a watch, a band, a computer, glasses, a helmet, a television, or an in-vehicle device.

[0055] It should be noted that any one of the embodiments of the second aspect is also applicable to the first aspect, unless otherwise specified, and any one of the embodiments of the first aspect is also applicable to the second aspect, unless otherwise specified.

[0056] According to a third aspect, an electronic device is provided. device The electronic device includes a display module that displays a current screen of a home screen of the electronic device, the current screen displaying a number of icons, and a detection module configured to detect a first user input for a first icon of the number of icons. The display module is further configured to display a first card on the current screen in response to the first user input, the first card not filling the current screen. The first icon is a first folder icon, the first folder icon includes at least a first application icon, the first application icon corresponds to the first application, or the first icon is a first application icon, the first application icon corresponds to the first application. The first card includes at least a first card content including a portion of a content included in an interface of an Mth layer that is displayed after the first application is launched, where M is a positive integer greater than or equal to 1, and N controls each used to launch a corresponding application, where the application corresponds to a corresponding icon that was displayed on the home screen before the first card was displayed, where N is a positive integer greater than or equal to 1. The first card is distinct from all and any portion of the Mth interface that is displayed after the first application is launched.

[0057] The implementation of the third aspect corresponds to the implementation of the second aspect, respectively. For the technical effects corresponding to the third aspect and any one of the embodiments of the third aspect, please refer to the technical effects corresponding to the second aspect and any one of the embodiments of the second aspect, and the details will not be described again in this specification.

[0058] According to a fourth aspect, there is provided a computer-readable storage medium comprising instructions which, when executed on an electronic device, cause the electronic device to perform a card display method according to the second aspect and any one of the implementations of the second aspect.

[0059] In addition, for the embodiments and corresponding technical effects of the fourth aspect, please refer to the embodiments and corresponding technical effects of the second aspect, and details will not be described again in this specification.

[0060] According to a fifth aspect, there is provided a graphical user interface system on an electronic device, the electronic device having a display, a memory, and one or more processors, the one or more processors configured to execute one or more computer programs stored in the memory, the graphical user interface including a graphical user interface displayed when the electronic device executes the method according to the second aspect and any one of the embodiments of the second aspect.

[0061] According to a sixth aspect, there is provided a computer program product, which, when executed on a computer, causes the computer to perform the card display method according to the second aspect and any one of the implementations of the second aspect.

[0062] In addition, for the embodiments and corresponding technical effects of the sixth aspect, please refer to the embodiments and corresponding technical effects of the second aspect, and details will not be described again in this specification.

[0063] According to a seventh aspect, an electronic system is provided, including an electronic device and a server. The electronic device includes a display and a communication interface. The server includes one or more processors, one or more memories, and one or more computer programs. The one or more computer programs are stored in the one or more memories. When the one or more processors execute the one or more computer programs, the electronic system performs a card display method according to the second aspect and any one of the embodiments of the second aspect.

[0064] In addition, for the embodiments and corresponding technical effects of the seventh aspect, please refer to the embodiments and corresponding technical effects of the second aspect, and details will not be described again in this specification.

[0065] In order to more clearly describe the technical solutions in the prior art and the embodiments of the present application, the following briefly describes the accompanying drawings necessary to describe the prior art and the embodiments of the present application. Obviously, the accompanying drawings in the following description relate to some embodiments of the present application, and those skilled in the art can derive other drawings from these accompanying drawings without creative efforts. [Brief description of the drawings]

[0066] [Figure 1] FIG. 13 is a schematic diagram of a user interface for providing a pop-up window display. [Diagram 2] FIG. 1 is a schematic diagram of a user interface for card management operations provided. [Diagram 3] 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application; [Figure 4] FIG. 2 is a block diagram of the software structure of an electronic device according to an embodiment of the present application. [Diagram 5] FIG. 2 is a schematic diagram of the software procedure of the card display method according to an embodiment of the present application. [Figure 6a] 1 is a schematic flowchart of a card display method according to an embodiment of the present application. [Figure 6b] 1 is a schematic flowchart of a card display method according to an embodiment of the present application. [Figure 7] FIG. 2 is a schematic structural diagram of layers in a card display method according to an embodiment of the present application. [Figure 8] FIG. 2 is a schematic diagram of the generation of a card layer substrate in a card display method according to an embodiment of the present application. [Figure 9] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 10] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 11] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 12] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 13] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 14] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 15] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 16] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 17] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 18] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 19] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 20] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 21]FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 22] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 23] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 24] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 25] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 26] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 27] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 28] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 29] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 30] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 31] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 32] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 33] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 34] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 35] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 36]FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 37] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 38] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Figure 39] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 40] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 41] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 42] FIG. 2 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application; [Diagram 43] 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application; DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0067] The following clearly and completely describes the technical solutions in the embodiments of the present application with reference to the accompanying drawings. Obviously, the described embodiments are only some, but not all, of the embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative efforts shall fall within the protection scope of the present application.

[0068] Please note that descriptions such as "first" and "second" in the embodiments of the present application are used to distinguish different icons, contents, modules, applications, etc., and do not indicate an order. Unless otherwise specified, "first" and "second" indicate different objects. For example, a first application is different from a second application.

[0069] Generally speaking, a card is an information carrier with a closed outline, intuitively and quickly providing important or closely related information in a compressed form, and is used for displaying and exchanging such information. In practice, cards are mainly displayed on the minus one screen of a home screen of an electronic device. FIG. 1 is used as an example to explain the concept of a home screen. In FIG. 1, the user interface 102 includes a navigation bar area 1022, a status bar area 1026, and a second screen of a home screen located between the navigation bar area 1022 and the status bar area 1026. The second screen of a home screen includes a fixed icon area 1023, a page indicator area 1024, and a swipeable page area 1025. Similarly, the minus one screen of a home screen, the first screen of a home screen, and the third screen of a home screen all include a fixed icon area, a page indicator area, and a swipeable page area. It can be seen from the page indicator area 1024 that the home screen as a whole includes a minus one screen, a first screen, a second screen, and a third screen. Thus, in FIG. 1, the minus one home screen, the first home screen, the second home screen, and the third home screen constitute the home screen. In the home screen, the swipeable page area included in the screen other than the second home screen can display one or more icons. In some optional embodiments, the navigation bar may be hidden, in some optional embodiments, the status bar may be hidden, and in some optional embodiments, the navigation bar and the status bar are integrated into one. The minus one home screen is located on a user interface that is displayed when the electronic device displays the home screen and the home screen is swiped to the leftmost side. The first home screen, the second home screen, the third home screen, and so on are located on a user interface that is displayed sequentially after the home screen is swiped to the right, starting from the minus one home screen. It should be noted that FIG. 1 is merely an example and is not used to limit the scope of the home screen in this application.

[0070] A card is usually in the shape of a rounded rectangle similar to a credit card. Of course, the card may have another shape as an alternative. Cards are widely used because they allow users of electronic devices to obtain information and perform operations more conveniently and intuitively. However, currently, cards are displayed at fixed positions, are not flexible enough, and displaying and switching between cards is complicated, resulting in high management costs, and cards only display information of a single application and are not convenient enough to operate another application. Therefore, it is necessary to provide a card display method that features ease of operation, flexible display position, and convenience of operating other applications.

[0071] FIG. 1 is explained by using the quick access to the payment code function of Alipay as an example. In FIG. 1a, the user long presses the Alipay icon 1021 displayed on the user interface 102. Then, the user interface 102 changes to the user interface 104. The user interface 104 displays a pop-up window 1041 located above the Alipay icon 1021. Then, the user touches the Alipay payment code 10410 in the pop-up window 1041, thereby implementing the quick access to the payment code function of the Alipay application. In this way, there is no need to switch to another screen of the home screen, and the user only needs to perform the operation on the second screen of the home screen, and the second screen of the home screen is the current screen. However, this operation requires two steps and is still not convenient enough. In addition, after the payment code of the Alipay application is launched, the payment code occupies the entire second screen of the home screen and forms a payment code interface. If the user wants to switch to another application displayed on the user interface, the user needs to first exit the payment code interface and then touch another icon on the user interface. This is not convenient enough. Furthermore, when the user is prompted to enter a password, a pop-up window on the user interface 104 shown in FIG. 1041 If the user wishes to view or touch the content or icon obscured by the icon, the user may touch another location on the user interface 104, for example, a blank location on the user interface 104, to open a pop-up window before viewing or touching the obscured content or icon. 1041 This operation is relatively complicated and requires a popup window. 1041may not always be displayed on the user interface 104. For example, when a user launches an application once and the user returns, the user interface 102 does not display the pop-up window 1041. To quickly access the Alipay payment code, the user may need to re-click the Alipay icon 1021 displayed on the user interface 102. This operation is relatively complicated.

[0072] FIG. 2 is a schematic diagram of a user interface for switching between displaying different cards in the card display method provided. User The interface 200 displays the minus one screen of the home screen. An example is used in which the display of the card 2002 on the interface 200 is cancelled. When the user touches the button 2001 on the interface 200 shown in FIG. 2a, the interface 200 shown in FIG. 2a changes to the interface 201 shown in FIG. 2b. Then, when the user touches the button 2011 on the interface 201 shown in FIG. 2b, the interface 201 shown in FIG. 2b changes to the interface 202 shown in FIG. 2c. Then, the user touches the button 2021 on the interface 202 shown in FIG. 2c. After the user returns to the minus one screen of the home screen, the minus one screen of the home screen no longer displays the card 2002, as shown in FIG. 2d. Therefore, in order to manage the display and switching of different cards, the user needs to first access the setting interface, and then browse and set on the setting interface. This operation is relatively complicated.

[0073] The card display method provided in the embodiment of the present application can be applied to the electronic device 100 shown in Fig. 3. Fig. 3 is a schematic configuration diagram of the electronic device 100.

[0074] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a loudspeaker 170A, a telephone receiver 170B, a microphone 170C, an earphone jack 170D, a sensor module 180, keys 190, a motor 191, an indicator 192, a camera 193, a display 194, a subscriber identification module (SIM) card interface 195, and the like. The sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

[0075] It may be understood that the structure shown in this embodiment of the application is not a specific limitation of the electronic device 100. In some other embodiments of the application, the electronic device 100 may include more or fewer components than shown in the figures, may combine some components, may split some components, or may have a different arrangement of components. The components shown in the figures may be implemented in hardware, software, or a combination of software and hardware.

[0076] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be separate components or may be integrated into one or more processors.

[0077] The controller can generate operation control signals according to the instruction operation codes and timing signals, and complete the control of instruction fetching and execution.

[0078] A memory may further be provided within the processor 110 to store instructions and data. In some embodiments, the memory within the processor 110 is a cache. The cache may store instructions or data that have been recently or repeatedly used by the processor 110. When the processor 110 needs to use the instructions or data again, the processor 110 may directly retrieve the instructions or data from the cache. This avoids repeated accesses and reduces the latency of the processor 110, thereby improving the efficiency of the system.

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

[0080] The USB interface 130 is an interface conforming to the USB standard, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc. It may be understood that the interface connection relationship between modules shown in this embodiment of the present application is merely an example for explanation, and does not limit the structure of the electronic device 100. In some other embodiments of the present application, the electronic device 100 may alternatively use an interface connection method different from the interface connection method in the above-mentioned embodiment, or a combination of multiple interface connection methods.

[0081] The charging management module 140 is configured to receive a charging input from a charger. The power management module 141 is configured to connect to the battery 142, the charging management module 140, and the processor 110. The wireless communication function of the electronic device 100 may be implemented by using an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, a modem processor, a baseband processor, etc.

[0082] Antenna 1 and Antenna 2 are configured to transmit and receive electromagnetic wave signals. Each antenna of electronic device 100 may be configured to cover one or more communication frequency bands. In addition, different antennas may be multiplexed to improve antenna utilization. For example, Antenna 1 may be multiplexed into a diversity antenna used in a wireless local area network. In some other embodiments, the antennas may be used in combination with a tuning switch.

[0083] The mobile communication module 150 can provide wireless communication solutions for use on the electronic device 100, including 2G, 3G, 4G, 5G, etc. The mobile communication module 150 can include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves by using the antenna 1, process the received electromagnetic waves, such as filtering and amplifying, and send the processed electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 can further amplify the signal modulated by the modem processor, convert the signal into electromagnetic waves, and radiate the electromagnetic waves by using the antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be provided in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 may be provided in the same device as at least some modules of the processor 110.

[0084] The modem processor may include a modulator and a demodulator. The modulator is configured to modulate a low-frequency baseband signal to be transmitted into a medium-frequency signal or a high-frequency signal. The demodulator is configured to demodulate a received electromagnetic signal into a low-frequency baseband signal. The demodulator then transmits the low-frequency baseband signal obtained by demodulation to the baseband processor for processing. After being processed by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs a sound signal by using an audio device (not limited to loudspeaker 170A, telephone receiver 170B, etc.) or displays an image or video by using display 194. In some embodiments, the modem processor may be a separate device. In some other embodiments, the modem processor may be separate from the processor 110 and be located in the same device as the mobile communication module 150 or another functional module.

[0085] The wireless communication module 160 can provide wireless communication solutions for the electronic device 100, including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc. The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves by using the antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signal, and transmits the processed signal to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, perform frequency modulation and amplification on the signals, convert the signals into electromagnetic waves, and radiate electromagnetic waves by using the antenna 2.

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

[0087] The electronic device 100 performs display functions by using a GPU, a display 194, an application processor, etc. The GPU is an image processing microprocessor and connects to the display 194 and the application processor. The GPU is configured to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions that generate or modify display information.

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

[0089] The electronic device 100 can implement the photographing function by using an ISP, a camera 193, a video codec, a GPU, a display 194, an application processor, and the like.

[0090] The ISP is configured to process data fed back by a camera 193. The camera 193 is configured to capture still images or videos. An optical image of an object is generated by using a lens and projected onto a photosensitive element.

[0091] The digital signal processor is configured to process digital signals, including digital image signals and other digital signals, for example, if the electronic device 100 is performing frequency selection, the digital signal processor is configured to perform a Fourier transform or the like on the energy of the frequencies.

[0092] A video codec is configured to compress or decompress digital video. Electronic device 100 may support one or more types of video codecs. In this manner, electronic device 100 can play or record video in multiple encoding formats, e.g., moving picture experts group (MPEG) 1, MPEG 2, MPEG 3, MPEG 4.

[0093] NPU is a neural-network (NN) computing processor. By learning from the structure of biological neural networks, such as the mode of communication between neurons in the human brain, NPU can rapidly process input information and constantly self-learn.

[0094] The external memory interface 120 may be configured to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 by using the external memory interface 120 to perform data storage functions. Files, such as music and videos, are stored on the external memory card.

[0095] The internal memory 121 may be configured to store computer executable program code, the executable program code including instructions. The internal memory 121 may include a program storage area and a data storage area. The program storage area may store an operating system, an application program required by at least one function (e.g., a sound playback function or an image playback function), and the like. The data storage area may store data created during use of the electronic device 100 (e.g., audio data or a phone book), and the like. In addition, the internal memory 121 may include a high-speed random access memory, and may further include a non-volatile memory, for example, at least one magnetic disk storage device, a flash memory device, or a universal flash storage (UFS). The processor 110 executes various functional applications and data processing of the electronic device 100 by executing instructions stored in the internal memory 121 and / or instructions stored in a memory provided in the processor.

[0096] The electronic device 100 can implement audio functions, such as music playback or recording, by using an audio module 170, a loudspeaker 170A, a telephone receiver 170B, a microphone 170C, an earphone jack 170D, an application processor, and the like.

[0097] The pressure sensor 180A is configured to sense a pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A may be disposed on the display 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. The capacitive pressure sensor may include at least two parallel plates having a conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the strength of the pressure based on the change in capacitance. When a touch operation is performed on the display 194, the electronic device 100 detects the strength of the touch operation by using the pressure sensor 180A. The electronic device 100 can also calculate a touch position based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations performed on the same touch position but with different touch operation strengths may correspond to different operation commands. For example, when a touch operation with a touch operation strength less than a first pressure threshold is performed on an icon of a short message application, a command for viewing a short message is executed, and when a touch operation with a touch operation strength equal to or greater than the first pressure threshold is performed on an icon of the short message application, a command for creating a short message is executed.

[0098] The gyro sensor 180B may be configured to determine the motion attitude of the electronic device 100. The air pressure sensor 180C is configured to measure air pressure. In some embodiments, the electronic device 100 calculates altitude by using the air pressure value measured by the air pressure sensor 180C to assist in positioning and navigation. The magnetic sensor 180D includes a Hall sensor. The acceleration sensor 180E can detect the magnitude of acceleration of the electronic device 100 in various directions (typically three axes). The distance sensor 180F is configured to measure distance. The electronic device 100 can measure distance by using infrared or laser. In some embodiments, in a photography scenario, the electronic device 100 can measure distance by using the distance sensor 180F to perform fast focusing. The proximity light sensor 180G can include, for example, a light emitting diode (LED) and a photodetector, for example, a photodiode. The ambient light sensor 180L is configured to sense the brightness of ambient light. The fingerprint sensor 180H is configured to capture a fingerprint. By using the characteristics of the captured fingerprint, the electronic device 100 can perform fingerprint-based unlocking, accessing application locks, fingerprint-based photographing, fingerprint-based answering of calls, etc. The temperature sensor 180J is configured to detect temperature.

[0099] The touch sensor 180K may also be referred to as a "touch device." The touch sensor 180K may be disposed on the display 194, and the touch sensor 180K and the display 194 form a touch screen, also referred to as a "touch control screen." The touch sensor 180K detects touch operations performed on or near the touch sensor 180K. The touch sensor may forward the detected touch operations to an application processor to determine the type of touch event. A visual output associated with the touch operation may be provided by using the display 194. In some other embodiments, the touch sensor 180K may alternatively be disposed on the surface of the electronic device 100 and positioned at a different location than the display 194.

[0100] The SIM card interface 195 is configured to connect a SIM card. The SIM card may be inserted into or removed from the SIM card interface 195 to achieve contact or separation with the electronic device 100. The electronic device 100 may support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 may support a Nano SIM card, a Micro SIM card, a SIM card, etc. Multiple SIM cards may be inserted into the same SIM card interface 195. The multiple SIM cards may be of the same type or different types. The SIM card interface 195 may also be compatible with different types of SIM cards. The SIM card interface 195 may be compatible with an external memory card. The electronic device 100 interacts with a network through the SIM card to perform functions such as calling and data communication. In some embodiments, the electronic device 100 uses an eSIM card, i.e., an embedded SIM card. The eSIM card may be embedded in the electronic device 100 or may not be separate from the electronic device 100. The software system of the electronic device 100 may use a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture.

[0101] The embodiments of the present application provide a card display method, an electronic device, and a computer-readable storage medium, allowing a user to quickly display and switch cards on a current screen of a home screen through only a simple operation, even only a one-step operation, without having much influence on the current layout of icons, thereby promoting ease of operation and improving user experience. The current screen of the home screen is any screen of the home screen, and may be any one of the minus one screen of the home screen, the first screen of the home screen, the second screen of the home screen, the third screen of the home screen, etc.

[0102] FIG. 4 is a block diagram of the software structure of the electronic device 100 according to an embodiment of the present invention. The layered architecture divides the software into several layers, each of which has a clear role and responsibility. The layers communicate with each other by using software interfaces. In some embodiments, the Android system is divided into five layers, from top to bottom: an application layer, a system framework layer, a system library and runtime layer, a hardware abstraction layer, and a kernel layer. The application layer can include a series of application packages. As shown in FIG. 4, the application package can include applications such as a home screen manager, contacts, calendar, short messages, and music. The home screen manager is used to manage and display icons of all common applications, and card information corresponding to all common applications, and there are no icons on the home screen. When a user triggers a card display operation, the home screen manager loads and displays the card information. Common applications such as contacts and calendar are applications that have icons that can be tapped on the home screen, and are used to provide data related to the card display.

[0103] The system framework layer provides an application programming interface (API) and a programming framework for applications in the application layer, and includes various components and services to support developers' Android development. The system framework layer includes some predefined functions. As shown in FIG. 4, the system framework layer can include a view system, an input manager, a card service manager, a resource manager, a window manager, a content provider, etc. The view system includes visual controls, such as a control where a character is displayed and a control where a picture is displayed. The view system may be used to build an application. The display interface can include one or more views. The window manager is used to manage window programs. The window manager can obtain the size of the display screen, determine whether a status bar exists or not, lock the screen, take a screen shot, etc. The input manager is used to manage and dispatch touch events. The card service manager is used to receive and store card information issued by an application (App) on the home screen, and provides an interface for the home screen program to inquire about the card information of the App. The Android system is used as an example. The card service manager acts as a service process resident in the Android system, and can provide a remote call interface for receiving card information issued by an app, and another remote call interface for a home screen program to inquire about card information. The card service manager stores a unique ID of an app and card information corresponding to the app. The card information corresponding to an app is made public and stored in the form of a data structure. The unique ID of an app is the application package name (PackageName) of the app, The resource manager may be a file system name, or may be a hash code of the application package name. The resource manager provides various resources for the application, e.g., localized strings, icons, pictures, layout files, and video files. The window manager is used to manage window programs. The window manager may get the size of the display screen, determine if a status bar is present, lock the screen, take screen shots, etc. The content provider is used to store and retrieve data and allow the data to be accessed by the application. Data may include video, images, audio, calls made and received, browsing history, bookmarks, phone book, etc.

[0104] The system library and runtime layer includes a system library and an Android Runtime. The system library may include multiple functional modules, such as a browser kernel, a 3D graphics library (e.g., OpenGL ES), and a font library. The browser kernel is responsible for interpreting the syntax of a web page (e.g., application HTML or JavaScript under a standard generalized markup language) and rendering (displaying) the web page. The 3D graphics library is used to implement three-dimensional graphics drawing, image rendering, compositing, layer processing, etc. The font library is used to implement input of different fonts. The Android Runtime includes a core library and a virtual machine. The Android Runtime is responsible for scheduling and management of the Android system. The core library includes the functional functions that the java language needs to call and the core library of Android. The application layer and the application framework layer run on a virtual machine. The virtual machine executes the java files of the application layer and the application framework layer as binary files. The virtual machine is used to execute functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0105] The Hardware Abstraction Layer is an abstraction interface for device kernel drivers and provides an application programming interface for higher level Java API frameworks to access underlying devices. The HAL contains multiple library modules, each of which implements an interface for a particular type of hardware component.

[0106] The kernel layer is a layer between the hardware and the software. The kernel layer includes at least a camera driver, a display driver, a Bluetooth driver, an audio driver, a sensor driver, a touch driver, and a WLAN. The kernel layer is the foundation of the Android system. The final implementation of the functions of the Android system is completed by using the kernel layer.

[0107] FIG. 5 is a schematic diagram of a software procedure of a card display method according to an embodiment of the present application. As shown in FIG. 5, applications related to the home screen and executed in the application layer of the electronic device are classified into two categories: a home screen manager 502 and general applications such as weather 504 and calendar 505. Optionally, card information is pre-configured for the general applications such as weather 504 and calendar 505, and under certain conditions, the general applications transfer card information corresponding to the general applications to a card service manager 503 in the system framework layer. In some embodiments, pre-configuring card information for the general applications includes pre-configuring card information in the general applications by using a RemoteViews data structure. For example, RemoteViews and their coordinate layouts are defined, and data information such as text color, text content, icons, and operations for user inputs are set for the RemoteViews. In some embodiments, pre-configuring card information for the general applications includes pre-configuring card information for card layouts in the general applications by using an xml file data structure.

[0108] Below is a pseudocode fragment for pre-populating card information in a generic application by using the RemoteViews data structure. RemoteViews remoteView=new RemoteViews(getPackageName(),R.layout.layout_notification) remoteView.setTextColor(R.id.re_text,Color.RED) remoteView.setTextViewText(R.id.re_text,''remote view demo'') remoteView.setImageViewResource(R.id.re_image,R.drawable.btn_me_share) remoteView.setOnClickPendingIntent(R.id.re_image,pendingIntent)

[0109] Below is a pseudo code fragment for populating card information for card layout in a generic application by using an xml file data structure. <LinearLayout xmlns:android=''http: / / schemas.android.com / apk / res / android'' android:layout_width=''fill_parent'' android:layout_height=''fill_parent''> < ImageView android:contentDescription=''@string / app_name'' android:id=''@+id / re_image'' android:layout_width=''wrap_content'' android:layout_height=''wrap_contebnt'' android:src=''@drawable / btn_me_share'' / > <TextView android:id=''@+id / re_text'' android:layout_width=''wrap_content'' android:layout_height=''wrap_content'' android:textColor=''@color / red'' android:text=''remote view demo'' / >

[0110] You can extend the xml file definitions as needed.

[0111] After the above presetting is completed, the general application transfers the card information corresponding to the general application to the card service manager 503 of the system framework layer under a certain condition, for example, when the data of the general application changes or after the electronic device is powered on. The card service manager 503 receives and stores the card information. The card service manager 503 can store the ID corresponding to each icon and the card information corresponding to the ID in the form of a list. The home screen manager determines whether to make an inquiry about the card based on the user input, and generates and displays the card on the current screen of the home screen of the electronic device based on the inquiry result. The user input may be a user gesture input or a user voice command input. The user gesture may be a user gesture on the touch screen or an air swipe gesture above the current screen of the home screen. For example, the user inputs a first gesture on the touch screen of the electronic device. The touch screen detects the first gesture and reports the first gesture to the home screen manager 502 of the application layer via the input manager 501 of the system framework layer. The home screen manager 502 receives the first gesture and determines whether the first gesture matches a preset gesture. If the first gesture matches the preset gesture, the home screen manager 502 obtains a first icon used as a reference for card display based on the first gesture, and then obtains an ID corresponding to the first icon. The home screen manager 502 queries the card service manager 503 for card information corresponding to the ID based on the ID. The card service manager 503 communicates the card information corresponding to the ID to the home screen manager 502. The home screen manager 502 generates and displays a card based on the card information corresponding to the received ID.

[0112] Optionally, card service manager 503 does not need to be provided in the system framework layer. General applications such as weather 504 and calendar 505 are provided with their respective card service managers. Home screen manager 502 queries the card service managers of general applications such as weather 504 and calendar 505 based on the ID for card information corresponding to the ID. General applications whose ID is the same as the ID communicate card information corresponding to the ID to home screen manager 502 via the card service manager of the general application, and general applications whose ID is different from the ID do not communicate card information to home screen manager 502 via the card service manager of the general application. Home screen manager 502 generates a card based on the card information corresponding to the received ID.

[0113] The pre-setting may be a pre-setting performed by an electronic device manufacturer on applications developed by itself before shipping an electronic device. For example, an electronic device that has just been shipped has no applications installed other than those developed by the electronic device manufacturer. In another example, an electronic device manufacturer and a third-party application provider have negotiated and agreed that the third-party applications built into the electronic device and downloaded from an application marketplace will be pre-set as described above. Of course, some of the applications installed in the electronic device may be pre-set, and some may not be pre-set.

[0114] 6a and 6b are schematic diagrams of the implementation process of the card display method according to an embodiment of the present application. FIG. 6a is a schematic diagram of the implementation process of the card display method. As shown in FIG. 6a, in S601, after the electronic device is powered on, the card service manager scans the general application App to obtain a list of Apps that provide card information, and instructs the App to update the card information, or the data of the general application App on the home screen is changed. In S602, the App assembles the card information, and transfers the ID of the general application App and the card information corresponding to the ID to the card service manager, and the card service manager obtains and stores the ID and the card information corresponding to the ID, and the ID corresponds to the App as well as the card information. In step S603, the home screen manager detects a user input. In S604, it is determined whether the user input is consistent with the preset input, and if the user input is not consistent with the preset input, the process returns to S604, and if the user input is consistent with the preset input, S605 is executed. In S605, the home screen manager determines an ID corresponding to a first icon used as a criterion for card display based on the user input, queries the card service manager for corresponding card information, and retrieves the corresponding card information. In S606, a card is generated based on the card information and displayed on the current screen of the home screen of the electronic device.

[0115] The user input may be a user gesture input or a user voice command input. The user gesture may be a user gesture on a touch screen or an air swipe gesture above a current screen of a home screen. An example is used in which the user inputs a first gesture on the touch screen of the electronic device.

[0116] In response to this, S604 specifically determines whether the first gesture satisfies a preset gesture, and if the first gesture does not satisfy the preset gesture, the process returns to S604, and S605 specifically is that the home screen manager determines, based on the first gesture, an ID corresponding to a first icon used as a criterion for card display, queries the card service manager for corresponding card information, and reads out the corresponding card information.

[0117] Optionally, determining whether the first gesture matches a preset gesture is, in particular, determining whether a swipe direction of the first gesture matches the preset swipe direction.

[0118] Optionally, the home screen manager determines, based on the first gesture, an ID corresponding to a first icon used as a basis for card display, queries the card service manager for corresponding card information, and reads out the corresponding card information, specifically, the home screen manager determines, based on the starting point of the first gesture, an ID corresponding to a first icon used as a basis for card display, queries the card service manager for corresponding card information, and reads out the corresponding card information.

[0119] Fig. 6b is a schematic flow chart of the sub-steps of step S606 in Fig. 6a. In S6061, the card information is parsed into a card view, and the default shape and default size of the card view are obtained. In S6062, the area covered by the card displayed based on the first icon, i.e., the first area, is obtained based on the default shape and default size of the card view and the first icon used as the reference for card display, and the icon displayed in the first area is obtained after all cards on the current screen of the home screen of the electronic device are restored to the icon state, and the current screen of the home screen does not display any cards. In S6063, an animation is performed to display the card view. In S6064, an animation is performed to shrink and display the icon corresponding to the first area, i.e., the icon is displayed on the card in the form of a control after being reduced in size, in which case the icon is not located in the first area.

[0120] In some embodiments, S6064 may not be included.After the card is displayed, the icon corresponding to the first region is obscured by the card and a control corresponding to the icon is displayed on the card.

[0121] The card information includes a default shape, a default size, and card content of the displayed card view. The card content includes element content. The element content is content included in a content interface or a function interface displayed after a general application corresponding to the card information is launched. The content interface includes a content simplified interface. The function interface includes a function simplified interface. The content of the content simplified interface is less than the content of the content interface. The content of the function simplified interface is less than the content of the function interface.

[0122] Optionally, the first icon used as a basis for the card display is determined based on the origin of the first gesture.

[0123] Optionally, the card information of the common applications may include card views of the same or different default shapes and / or default sizes. Preferably, the card information of the common applications includes card views of the same default shapes and the same default sizes. For each common application pre-setting, the same default shapes and default sizes are recommended for the card views.

[0124] Optionally, furthermore, after the card is displayed on the current screen of the home screen, the shape and size of the card may be changed based on user input.

[0125] Optionally, S6063 and S6064 may be integrated into a single step of executing an animation for displaying a card view and an animation for displaying a reduced version of the icons displayed in the first area. In other words, the animation for displaying a card view and the animation for displaying a reduced version of the icons displayed in the first area are executed simultaneously, and the order does not matter. Alternatively, the animation for displaying a card view and the animation for displaying a reduced version of the icons displayed in the first area may be integrated into a single animation that displays a card view and displays a reduced version of the icons displayed in the first area, S6063 and S6064 is performed in a combined step.

[0126] Optionally, S6063 and S6064 The animations may be reversed, i.e. the animation for shrinking and displaying the icons displayed in the first area is performed before the animation for displaying the card view.

[0127] It should be noted that the process shown in FIG. 6b is just one embodiment of further subdivision of step S606 of FIG. 6a, and S606 of FIG. 6a may have other embodiments of subdivision.

[0128] FIG. 7 is a schematic structural diagram of layers in a card display method according to an embodiment of the present application. As shown in FIG. 7a, the card display method provided in this embodiment of the present application includes three layers, namely, an icon layer 701, a card layer 702, and a wallpaper layer 703. The icon layer 701 includes an icon displayed on the current screen of the home screen of the electronic device. The card layer 702 includes a card displayed on the current screen of the home screen of the electronic device. The wallpaper layer 703 includes a wallpaper displayed on the current screen of the home screen of the electronic device. If there is no icon on the current screen of the home screen of the electronic device, the current screen of the home screen of the electronic device does not have an icon layer. Similarly, if there is no card and / or wallpaper on the current screen of the home screen of the electronic device, the current screen of the home screen of the electronic device does not have a card layer and / or a wallpaper layer. In the following, the area division on the card 7021 is further described using the card 7021 included in the card layer as an example.

[0129] As shown in FIG. 7b, when divided by the display area, the card 7021 includes a card title bar 70213 and a card content area 70214. The card title bar 70213 includes a first control area 70211 and a second control area 70212. The area occupied by the card 7021 on the current screen of the home screen of the electronic device is the first area. After all cards on the current screen of the home screen of the electronic device are restored to the icon state, the icons displayed in the first area include the first icon and other icons. In some embodiments, the first control area 70211 displays only a first control corresponding to the first icon, and the second control area 70212 displays N controls corresponding to the other icons. In some embodiments, the first control area 70211 does not display controls corresponding to any icons, the second control area 70212 displays controls corresponding to other icons, or the second control area 70212 displays controls corresponding to any icon other than the first icon and the other icons.

[0130] The first control displayed in the first control area 70211 may be a control that is displayed after an application icon or a folder icon is reduced in size by a particular factor. The N controls displayed in the second control area 70212 are controls that are displayed after the N icons are reduced in size by another factor. The N icons include application icons and / or folder icons. The content displayed in the card content area 70214 is associated with the first icon and the first control.

[0131] Optionally, the card title bar 70213 is located at the top of the card 7021 and the card content area 70214 is located at the bottom of the card 7021. In this case, the card title bar 70213 is arranged horizontally. Optionally, the card title bar 70213 is located at the bottom of the card 7021 and the card content area 70214 is located at the top of the card 7021. In this case, the card title bar 70213 is arranged horizontally. Optionally, the card title bar 70213 is located at the left part of the card 7021 and the card content area 70214 is located at the right part of the card 7021. In this case, the card title bar 70213 is arranged longitudinally. Optionally, the card title bar 70213 is located at the top of the card 7021 and the card content area 70214 is located at the bottom of the card 7021. In this case, the card title bar 70213 is arranged longitudinally.

[0132] Optionally, the first control area 70211 is located at a left part of the card title bar 70213, and the second control area 70212 is located at a right part of the card title bar 70213. Optionally, the first control area 70211 is located at a right part of the card title bar 70213, and the second control area 70212 is located at a left part of the card title bar 70213. Optionally, the first control area 70211 is located at a top part of the card title bar 70213, and the second control area 70212 is located at a bottom part of the card title bar 70213. Optionally, the first control area 70211 is located at a bottom part of the card title bar 70213, and the second control area 70212 is located at a top part of the card title bar 70213.

[0133] That the card title bar 70213 or the card content area 70214 is located at the top, bottom, left or right of the card 7021 means that the card title bar 70213 or the card content area 70214 is located at the top, bottom, left or right within the area of ​​the card 7021. That the first control area 70211 or the second control area 70212 is located at the top, bottom, left or right of the card title bar 70213 means that the first control area 70211 or the second control area 70212 is located at the top, bottom, left or right within the area of ​​the card title bar 70213.

[0134] Optionally, the second control area 70212 may alternatively be located outside the card title bar 70213, for example, in an upper portion of the area of ​​the card title bar 70213. Optionally, a floating sphere is provided in an upper portion of the area of ​​the card 7021, and the second control area 70212 is displayed only after the floating sphere is touched.

[0135] In addition to the above-mentioned ways, all other ways that can be recognized by a person skilled in the art fall within the protection scope of the embodiments of the present application, and the details will not be described here.

[0136] As shown in FIG. 7c, when divided by the consistency of content display, the card 7021 includes a card layer substrate 70215 and a second control area 70212. In the card 7021, all areas except the second control area 70212 belong to the card layer substrate 70215. Optionally, the second control area 70212 may be located at the top left corner, the top right corner, the bottom left corner, the bottom right corner, the top, the bottom, the left, or the right in the area of ​​the card 7021. When the second control area 70212 is located at the top or bottom in the area of ​​the card 7021, the second control area is arranged in the horizontal direction. When the second control area 70212 is located at the left or right in the area of ​​the card 7021, the second control area is arranged in the longitudinal direction. Optionally, the second control area 70212 may be located at any other position in the area of ​​the card 7021.

[0137] Optionally, the second control area 70212 may be located outside the area of ​​the card 7021, for example, in the upper part of the area of ​​the card 7021. Optionally, a floating sphere is provided in the upper part of the periphery of the card 7021, and the second control area 70212 is displayed after the floating sphere is touched. In addition to the above-mentioned manners, all other manners that can be recognized by those skilled in the art fall within the protection scope of the embodiments of the present application. Details will not be described here.

[0138] The icon layer 701 and the wallpaper layer 703 always exist in the current screen of the home screen of the electronic device, and the card layer 702 may not exist. If the card layer does not exist before, the detection of the first input triggers the generation and display of the card 7021. The triggering of the generation and display of the card 7021 also indicates that the card layer 702 is generated and displayed. In addition, the icons on the icon layer 701 and covered by the card 7021 are absorbed by the card 7021 and displayed on the card 7021 in the form of a control after being reduced in size by a certain factor. In this case, the number of icons included in the icon layer 701 is reduced. Similarly, under the trigger of the second gesture, the card 7021 is converted into an icon, and the previously absorbed icons displayed on the card 7021 in the form of a control after being reduced in size by a certain factor are restored to the size and position of the icons before absorption. Optionally, in some cases, the card layer 702 is located between the icon layer 701 and the wallpaper layer 703 , and in some cases, the card layer 702 is located above the icon layer 701 .

[0139] It should be noted that the circular shape of the first control area and the runway rectangle shape of the second control area are only used to indicate the location of the first control area and the second control area on the card layer, respectively, and are not intended to limit the shape of the first control area and the second control area. The first control area and the second control area may be any shape, including but not limited to, circular, rectangular, rounded rectangle, runway rectangle, etc. The rounded rectangular shape of the card is merely an illustrative example of the shape of the card and is not intended to limit the shape of the card. The card may be other shapes. The other shapes are any shapes recognizable by one of ordinary skill in the art, including but not limited to rounded rectangle, runway rectangle, etc.

[0140] FIG. 8 is a schematic diagram of generating a card layer substrate in a card display method according to an embodiment of the present application. FIG. 8a and FIG. 8b show two different ways of generating a card layer substrate. An icon of a calendar application is used as an example. In FIG. 8a, an icon 801 represents an icon of a calendar application. In the process of generating and displaying a card layer substrate 800 based on the icon 801 of the calendar application, the size of the display content area 802 gradually increases, and the icon 801 remains unchanged in size, shrinks at a certain ratio, or enlarges at a certain ratio. The position of the icon 801 in the display content area 802 gradually approaches the upper left corner of the display content area 802. Finally, when it grows to 802', the display content area 802 stops growing. In this case, the icon 801 is located at the upper left corner of the display content area 802'. In this way, the card layer substrate 800 is generated. In FIG. 8b, the icon includes two parts, namely, the number 16 and the display content area. 811 represents the number 16, and 812 represents the display content area. The number 16 is an identifier of the calendar application, indicating that today is the 16th. The number 16 is selected merely for illustration purposes, and changes as time changes. For example, today is the 16th, and tomorrow, the identifier of the calendar application changes accordingly from the number 16 to the number 17. In the process of generating a card layer substrate based on the icon of the calendar application, the size of the display content area 812 gradually increases, and the number 16 811 also gradually increases in size, gradually approaching the upper left corner of the display content area 812. Finally, when it grows to 812', the display content area 812 stops growing, and when it grows to 811', the number 16 811 also stops growing. In this case, the number 16 811' is located at the upper left corner of the display content area 812'. In this way, the card layer substrate 810 is generated. The two ways of producing a card layer substrate are merely used as illustrative examples, and are not intended to limit the ways of producing a card layer substrate. Any card layer substrate producing ways that can be recognized by a person skilled in the art are within the scope of protection of the embodiments of the present application. enter.

[0141] Optionally, in FIG. 8a, the icon for the calendar application may alternatively be located in the upper right corner of the card layer substrate.

[0142] Optionally, in FIG. 8a, the calendar application icon may alternatively be located at a different position on the card layer substrate, and the display content area may alternatively be located at a different position on the card layer substrate, provided that the two positions do not collide.

[0143] 9 is a schematic diagram of a user interface of a card display method according to an embodiment of the present application. An icon of a memo application is used as an example for explanation. As shown in FIG. 9a, a user moves a finger in the interface 902 shown in FIG. 9a in the direction shown in FIG. 9a, starting from a touch point on the icon 9021 of the memo application. Then, the interface 902 shown in FIG. 9a changes to an interface 903 shown in FIG. 9b, and the interface 902 shown in FIG. 9a changes to an interface 903 shown in FIG. 9b. b A card 9031 is generated on the interface 903 shown in FIG. 9b. The area occupied by the card 9031 is the first area. bOn the interface 903 shown in FIG. 9a, the icons displayed in the first area include nine application icons, including memo, player, file management, settings, gallery, Facebook, cloud sharing, Twitter, and QQ. Alternatively, the first control corresponding to the icon of the memo application may not be displayed on the card 9031. Controls corresponding to the other eight application icons displayed in the first area on the interface 903 are displayed in the upper right corner of the card 9031. Optionally, the first control corresponding to the icon of the memo application may be displayed in the upper left corner of the card 9031. Optionally, the controls displayed in the upper right corner of the card 9031 may not correspond to the eight application icons, but may correspond to other icons, and the other icons may be located on the home screen. The other icons may be located on the current screen of the home screen, or may be located on other screens of the home screen. Optionally, in addition to the gesture input shown in FIG. 9a, the user input may also be a voice input, for example, "display a card based on the memo icon." Optionally, the gesture input shown in FIG. 9a may be the same as or different from the gesture input used to display a window for sharing or deleting an icon. In other words, in this embodiment of the present application, two different gesture inputs are supported, one is used to generate and display a card based on an icon, and the other is used to display a window for sharing or deleting an icon. Alternatively, in this embodiment of the application, one gesture input is supported, namely, a gesture input used to generate and display a card based on an icon and display a window for sharing or deleting the icon. Optionally, the "share" and "delete" and / or corresponding controls displayed in a window may be located on the card. In this way, there is no need to display an additional window.

[0144] The contents of the memo application are displayed under the control in the upper right corner of the card 9031, for example, 9:00 AM, room 302, meeting, 12:00 PM, call Zhou to arrange a time to discuss project T, 3:00 PM, show demo to client, 8:00 PM, call mom, 9:00 PM, pick up child, and 11:00 PM, learn English. In the interface 903 shown in FIG. 9b, the user moves the finger in the direction shown in FIG. 9b starting from the touch point 920 of the finger on the card 9031. Then, the card 9031 disappears and is no longer displayed, and the interface 903 shown in FIG. 9b changes to or returns to the interface 902 shown in FIG. 9a.

[0145] Optionally, on the interface 902 shown in Fig. 9a, the user can alternatively move his / her finger in a direction other than the direction shown in Fig. 9a, starting from a touch point on the icon 9021 of the memo application. Then, the interface 902 shown in Fig. 9a changes to the interface 903 shown in Fig. 9b. Similarly, in the interface 903 shown in Fig. 9b, the user moves his / her finger in a direction other than the direction shown in Fig. 9b, starting from a touch point of the finger on the card 9031. Then, the card 9031 disappears and is no longer displayed, and the interface 903 shown in Fig. 9b returns to the interface 902 shown in Fig. 9a.

[0146] Preferably, the swipe direction of a first gesture input corresponding to switching from interface 902 shown in FIG. 9a to interface 903 shown in FIG. 9b is opposite to the swipe direction of a second gesture input corresponding to switching from interface 903 shown in FIG. 9b back to interface 902 shown in FIG. 9a.

[0147] As can be seen from Figures 5, 6a, and 6b, the other eight application icons displayed in the first area on the interface 902 shown in Figure 9a are displayed in the form of controls in the second control area on the card 9031 after being reduced in size by another factor, and the content of the note is displayed in the display content area of ​​the card 9031. In this way, the interface 902 shown in Figure 9a is displayed in the second control area on the card 9031 in the form of controls after being reduced in size by another factor. b The application icons that are not displayed in the first area on the interface 902 shown in FIG. 9a can still be activated via touch or other manners, with their positions remaining the same and their layout unaffected. The other eight application icons that are displayed in the first area on the interface 902 shown in FIG. 9a are simply displayed in the upper right corner of the card after being reduced in size by a certain factor, with little impact on the current icon layout. In addition, the other eight application icons can still be activated via touch or other manners, without causing the user to take additional operation steps. In addition, the content displayed on the card is the content of the note, which is convenient for the user to intuitively and easily obtain the content, and only one-step operation is required. To view more note content displayed on the card, the user can, for example, swipe in another direction on the card. Therefore, it is not essential that the icon of the note application is displayed in the form of a control in the first control area of ​​the card 9031, i.e., in the upper left corner, after being reduced in size by a certain factor. This is because even though the first control corresponding to the icon of the notes application is not displayed in the first control area on the card 9031, the user can still know that the content displayed on the card is a content interface or a content simplified interface that is displayed after the notes application is launched.

[0148] In addition, the card display method provided in this embodiment of the present application is particularly suitable for cases where a user needs to constantly check the card over a relatively long period of time. For example, a family of three goes to a shopping mall one day, buys clothes, cosmetics, school supplies, and other items for the child, husband, and wife, eats at the shopping mall, and watches movies. Because the payment code needs to be used frequently, the husband can perform a one-step operation on the current screen of the mobile phone home screen to generate and display an Alipay card that displays the payment code. To use the payment code, the husband can directly take out the mobile phone to show the card. When the payment code is not used, the mobile phone screen can be kept locked. In this way, when shopping at a shopping mall, the consumer does not need to frequently switch between activating and deactivating the payment code, thereby providing convenience. In addition, in another example, if a user needs to constantly view notes over a period of time, the user can only perform a preset gesture once. When viewing the note next time, the user only needs to swipe on the screen without performing the preset gesture again. After a period of time, if the user wants to view the content of or view quick access to another application, the user can first close the card and then generate and display a card based on another icon by performing a pre-configured gesture with the touch point originating on the icon of the other application.

[0149] In this way, the card and the icon can coexist on the current screen of the home screen. In addition, on the current screen of the home screen, a card can be generated and displayed based on the user's gesture, and the card can be closed and restored to an icon. The user can directly view the card content on the current screen of the home screen, the user can also directly launch an application corresponding to any icon on the area other than the card on the current screen, and the user can also directly launch an application corresponding to each of the N controls on the card, thereby promoting ease of operation and a better user experience. For example, the user can launch the WeChat application by directly touching the WeChat icon, and the user can also launch the QQ application by directly touching the control in the upper right corner of the card, which corresponds to the QQ application. Thus, the user can not only intuitively obtain the first card content, but also directly launch the application corresponding to each of the N controls, and can directly perform operations on the current screen. This promotes the user's convenience in these three aspects and balances the convenience in the three aspects. In addition, in the method provided in this embodiment of the present application, the conversion between the icon and the card 9031 displayed in the first area on the interface 902 shown in FIG. 9a has a visual effect of magnetic absorption, thereby improving the user experience.

[0150] In some embodiments, the icon 9021 of the note application may be displayed directly in the top left corner of the card 9031 in the form of a control without being reduced in size at a particular factor, or may be displayed in the top left corner of the card 9031 in the form of a control after being enlarged at a particular factor. In some embodiments, the card 9031 may be another shape other than the shape of a rounded square. The other shape may be any shape recognizable by a person skilled in the art, including, but not limited to, a rounded rectangle, a runway rectangle, etc.

[0151] In the interface 902 shown in FIG. 9a, the user can move the finger in any direction, such as another direction, for example, a 45-degree diagonal upward direction or a horizontal direction. This is not limited in the present specification. In FIG. 9a, the first gesture input is used to generate a card based on an icon. Based on the first gesture input, a card 9031 is generated and displayed. The origin of the first gesture input may be located on the icon 9021 of the note application, or may be located in a specific area around the icon 9021 of the note application. The swipe direction of the first gesture input is a first direction. The first direction may include only one fixed direction, or may include different directions, for example, first to the left and then upward. In addition, the first gesture input may be a gesture input obtained by touching the current screen of the home screen. Alternatively, the first gesture input may be a gesture input obtained by swiping in the air above the current screen of the home screen. For example, the first gesture input is a gesture input obtained by drawing a circle in the air above the current screen of the home screen. In this case, the mobile terminal performs icon-based card generation based on the vertical projection gesture input of the first gesture input on the current screen of the home screen. Similarly, in the interface 903 shown in FIG. 9b, the user may not only move the finger in the direction shown in FIG. 9b, but also move the finger in another direction. In FIG. 9b, the second gesture input is used to restore the icon based on the card. The origin of the second gesture input may be located on the card 9031 or in a specific area around the card 9031. The swipe direction of the second gesture input is a second direction. The second direction may include only one fixed direction or may include different directions. The swipe direction of the second gesture input may be opposite to the swipe direction of the first gesture input, or may not be opposite. For example, the direction of the second gesture input may be the direction shown in FIG. 9b, and the direction of the first gesture input may be a 45 degree upward diagonal direction in FIG. 9a. The correspondence between the swipe direction of the first gesture input and the swipe direction of the second gesture input needs to be preset. Preferably, the swipe direction of the second gesture input is opposite to the swipe direction of the first gesture input.

[0152] In addition, the starting point of the second gesture input may be the same as or different from the ending point of the first gesture input, and the ending point of the second gesture input may be the same as or different from the starting point of the first gesture input.

[0153] The origin of the first gesture input may be located on the icon to be converted into a card, or may be located in a specific area around the icon to be converted into a card. The origin of the first gesture input may be located in a specific area around the icon to be converted into a card, where the distance between the origin and the center of the icon to be converted into a card is the shortest compared to the distance between the origin and the center of the other icon. For example, if the icon to be converted into a card is an icon of a memo application, and the distance between the origin of the first gesture input and the center of the memo application is the shortest compared to the distance between the origin of the first gesture input and the center of the other icon, the origin of the first gesture input is located in a specific area around the icon of the memo application. If the origin of the first gesture input is located exactly in the middle of two icons with equal distances between the origin of the first gesture input and the centers of the two icons, and this distance is the shortest compared to the distance between the origin of the first gesture input and the centers of the other icons, the icon from which the card is generated is determined according to a preset rule. For example, in the horizontal direction of Fig. 9a, if the origin of the first gesture input is located exactly halfway between the icon of the player application and the icon of the note application, as the user moves his / her finger from the origin, the distance between the first gesture input and the icon of the player application decreases, and the distance between the first gesture input and the icon of the note application increases, so it is determined that a card is generated based on the icon of the player application. Of course, the preset rule may be another rule.

[0154] Optionally, the one first icon may alternatively be determined in another manner, for example, the preset gesture is a closed curve that surrounds only the one first icon, and the one first icon surrounded by the closed curve is determined as the one first icon.

[0155] Optionally, the origin of the first gesture input is located in a specific area around the icon to be converted into a card, alternatively, the origin of the first gesture input may be located in a circle with the center of the icon to be converted into a card as the center of the circle and a preset length as the radius. Of course, the origin of the first gesture input is located in a specific area around the icon to be converted into a card is not limited to the above embodiment. Other embodiments that can be recognized by a person skilled in the art also fall within the protection scope of the embodiment of the present application.

[0156] The origin of the second gesture input may be located on the card to be converted into an icon, or may be located in a specific area around the card to be converted into an icon. The origin of the second gesture input may be located in a specific area around the card to be converted into an icon, where the origin of the second gesture input is located in a circle with the center of the card as the center of the circle and a preset length as the radius. For example, there are two cards on the current screen of the home screen of the electronic device. If the origin of the second gesture input is located in a specific area around the two cards, the card whose center is closer to the origin of the second gesture input is determined, and the card whose center is closer to the card is used as the card to be converted into an icon. If the distances from the origin to the centers of the two cards are equal, the card from which the conversion to an icon is performed is determined according to a preset rule. Figure 27c is used as an example. The distance between the origin of the second gesture input and the center of the card 27042 is equal to the distance between the origin of the second gesture input and the center of the card 27041. Since the card 27042 is located above the card 27041, it is determined that restoration to the icon will be performed based on the card 27042. Of course, the preset rule may be a different rule.

[0157] Optionally, the origin of the second gesture input is located in a specific area around the card to be converted into an icon, alternatively, the origin of the second gesture input may be located in an area within a specific distance from the center of the card. Of course, the origin of the second gesture input is located in a specific area around the card to be converted into an icon is not limited to the above embodiment. Other embodiments that can be recognized by a person skilled in the art also fall within the protection scope of the embodiments of the present application.

[0158] The end point of the first gesture input and the end point of the second gesture input are not limited. The end point of the first gesture input may be located on the icon covered and absorbed by the card, or may be located in a specific area around the icon covered and absorbed by the card. For example, the end point of the first gesture input may be located on the right side of the icon of the face look application in FIG. 9a. The end point of the second gesture input may be located on the card converted into an icon, or may be located in a specific area around the card converted into an icon. For example, the end point of the second gesture input may be located below the card 9031 in FIG. 9b.

[0159] In response to the first gesture input, a card is generated based on an icon. Preferably, in response to the origin and swipe direction of the first gesture input, a card is generated based on an icon. Preferably, in response to the origin, swipe direction, and end point of the first gesture input, a card is generated based on an icon. Preferably, the icon is determined based on the origin of the first gesture input. Preferably, a default size of the card is preset. For example, in some embodiments, in the card information provided by the general application App, the default size of the card is preset to be a rounded rectangle that covers an icon with three rows and two columns. Preferably, a fixed point of the card is determined based on the position of the icon. For example, the fixed point of the lower right corner of the card 9031 in FIG. 9b is determined based on the position of the icon 9021 of the memo application. Preferably, the direction in which the card is generated is determined based on the swipe direction of the first gesture. For example, from FIG. 9a to FIG. 9b, the direction in which the card 9031 is generated is determined based on the swipe direction of the first gesture.

[0160] In response to the second gesture input, an icon is restored based on the card. Preferably, in response to an origin of the second gesture input, an icon is restored based on the card. Preferably, in response to an origin of the second gesture input and a swipe direction, an icon is restored based on the card. Preferably, the origin of the second gesture input is located on the card. Preferably, the origin of the second gesture input is located in a specific area on the card. Preferably, the origin of the second gesture input is located in a specific area around the card.

[0161] It should be noted that although a finger is shown moving on the screen of the electronic device in Figure 9a, Figure 9b and subsequent figures, the finger is used merely as an example for explanation and is not intended to be limiting. Various touch devices such as a stylus also fall within the scope of protection of the embodiments of the present application. In addition, the first gesture input is not limited to the gesture input obtained by touching the touch screen of the electronic device, but may further include the gesture input obtained by moving the tap on the touch screen of the electronic device.

[0162] After the card is generated and displayed, each of the N controls displayed on the card is a control associated with each of the N icons, and the user can touch each of the N controls to launch the corresponding application. Figure 10 is used as an example for further details. In Figure 10a, after the user swipes in the swipe direction shown in Figure 10a starting from the touch point 1010 on the icon 10021 of the note application, the interface 1002 shown in Figure 10a changes to the interface 1003 shown in Figure 10b. On the interface 1003, a control is displayed in the upper right corner of the card 10031. The control is associated with an icon. A gallery control in the control is used as an example for explanation. After the user touches the gallery control 10032 in the control, the gallery application corresponding to the gallery control 10032 is launched, and the interface 1003 shown in Figure 10b changes to the interface 1004 shown in Figure 10c accordingly. On the interface 1004, the user can perform normal operations on the gallery application. After completing the operations, the user touches the button 10041, and the interface 1004 shown in FIG. 10c returns to the interface 1003 shown in FIG. 10b. In addition, the user may alternatively touch an icon displayed in an area outside the card 10031 on the interface 1003 shown in FIG. 10b. For example, the user touches the WeChat icon on the interface 1003 to launch the WeChat application and access the interface displayed after the WeChat application is launched. After completing the operations on the interface displayed after the WeChat application is launched, the user touches the back button to also return to the interface 1003 shown in FIG. 10b. Alternatively, the user may first touch the WeChat icon on the interface 1003 to launch the WeChat application and access the interface displayed after the WeChat application is launched. After completing the operation on the interface displayed after the WeChat application is launched, the user touches the back button to also return to the interface 1003 shown in FIG. 10b, and then the user touches the gallery control 10032 on the card 10031 on the interface 1003 to access the interface 1004 shown in FIG. 10c, and after completing the operation, the user touches the button 10041 to return to the interface 1003 shown in FIG. 10b.

[0163] Alternatively, after the card is generated and displayed, the controls displayed on the card may be controls associated with icons other than the icon covered by the card, and the user can touch each of the N controls to launch the corresponding application. FIG. 11 is used as an example for further extended explanation. In FIG. 11a, after the user swipes in the swipe direction shown in FIG. 11a starting from the touch point 1110 on the icon 11021 of the note application, the interface 1102 shown in FIG. 11a changes to the interface 1103 shown in FIG. 11b. On the interface 1103, the control is displayed in the upper right corner of the card 11031. The control is associated with an icon other than the icon covered by the card. The learning control in the control is used as an example for explanation. After the user touches the learning control 11032 in the control, the learning application corresponding to the learning control 11032 is launched, and the interface 1103 shown in FIG. 11b changes to the interface 1104 shown in FIG. 11c accordingly. On the interface 1104, the user can perform normal operations on the learning application. After the operation is completed, the user touches the button 11041, and the interface 1104 shown in FIG. 11c returns to the interface 1103 shown in FIG. 11b. The controls displayed in the second control area are linked to the card content by operations or contents. For example, the second control area displays a control that is a control that is displayed after the icon of a sharing application such as WeChat and QQ is reduced in size by another factor. Alternatively, the second control area displays a control that is associated with the card content. For example, the card content includes "Learn English at 21:00", and the control includes a control that is displayed after the icon of the learning application is reduced in size by another factor. The icon of the learning application may not be displayed on the current screen of the home screen of the electronic device, but may be displayed on another screen of the home screen of the electronic device, for example. In addition, the user may alternatively touch an icon displayed in an area outside the card 11031 on the interface 1103 shown in FIG. 11b. For example, the user touches the WeChat icon on the interface 1103 to launch the WeChat application and access the interface that is displayed after the WeChat application is launched. After completing an operation on the interface that is displayed after the WeChat application is launched, the user touches the back button to also return to the interface 1103 shown in FIG. 11b. Alternatively, the user may first touch the WeChat icon on interface 1103 to launch the WeChat application and access the interface that is displayed after the WeChat application is launched, and after completing the operation on the interface that is displayed after the WeChat application is launched, the user touches the back button to return to interface 1103 shown in FIG. 11b, and then the user touches the gallery control 11032 on the card 11031 on interface 1103 to access interface 1104 shown in FIG. 11c, and after completing the operation, the user touches button 11041 to return to interface 1103 shown in FIG. 11b.

[0164] Alternatively, in addition to the gesture input manner shown in FIG. 9a, which starts from the touch point on the icon and swipes in the direction shown in FIG. 9a, there may be multiple ways to perform the first gesture input. FIG. 12 shows four ways including the manner shown in FIG. 9. The manner shown in FIG. 12a is the same as the manner shown in FIG. 9, and the details are not described again in this specification. FIG. 12c shows that after a user touches two points on the icon of the note application and swipes outward, the card shown in FIG. 12b is also generated based on the icon of the note application. FIG. 12d shows that after a user presses and holds the icon of the note application, the card shown in FIG. 12b is also generated based on the icon of the note application. FIG. 12e shows that after a user swipes in the direction shown in FIG. 12e, which starts from the touch point on the icon of the note application, the card shown in FIG. 12b is also generated based on the icon of the note application. From the above, it can be seen that Fig. 12a, Fig. 12d, and Fig. 12e show that a card is generated based on an icon through one-point touch, and Fig. 12c shows that a card is generated based on an icon through two-point touch. In addition to the two-point touch manner shown in Fig. 12c, a card may be generated based on an icon in a multi-point touch manner, such as a three-point touch or a four-point touch. Further details will not be described herein. Those skilled in the art should understand that the specific implementation of the first gesture used to trigger an icon-based card generation is not limited to the manner described above, but may instead be any other manner perceivable by those skilled in the art. Details will not be described further herein.

[0165] In different embodiments, under the trigger of the first gesture input, the card generated based on the icon can cover multiple different ranges. An example is used in which the origin of the first gesture input is on the icon of the memo application, and the direction of the first gesture is upward. Figure 13 shows three ways in which the card generated based on the icon covers different ranges. In some embodiments, as shown in Figures 13a and 13b, after a user starts from a touch point on the icon of the memo application and swipes his finger in the direction shown in Figure 13a, a card 13031 shown in Figure 13b is generated. The icons covered by the card 13031 are the icons of memo, file management, and Facebook. After a user starts from a touch point on the card 13031 and swipes his finger in the direction shown in Figure 13b, the card 13031 is restored to the icons of memo, file management, and Facebook applications shown in Figure 13a, and the interface shown in Figure 13b is restored to the interface shown in Figure 13a.

[0166] In some embodiments, as shown in Figures 13a and 13c, after a user swipes his / her finger from a touch point on the icon of a memo application in the direction shown in Figure 13a, a card 13031' shown in Figure 13c is generated. The icons covered by the card 13031' are the icons of memo, player, file management, settings, Facebook, and Twitter. After a user swipes his / her finger from a touch point on the card 13031' in the direction shown in Figure 13c, the card 13031' is restored to the icons of the memo, player, file management, settings, Facebook, and Twitter applications shown in Figure 13a, and the interface shown in Figure 13c is restored to the interface shown in Figure 13a.

[0167] In some embodiments, as shown in FIG. 13a and FIG. 13d, after a user swipes his / her finger in the direction shown in FIG. 13a starting from a touch point on the icon of a memo application, a card 13031″ shown in FIG. 13d is generated. The icons covered by the card 13031″ are icons of memo, file management, Facebook, Alipay, games, and shopping mall applications. After a user swipes his / her finger in the direction shown in FIG. 13d starting from a touch point on the card, the card 13031″ is restored to the icons of memo, file management, Facebook, Alipay, games, and shopping mall applications shown in FIG. 13a, and the interface shown in FIG. 13d is restored to the interface shown in FIG. 13a.

[0168] In the above different embodiments, cards covering different ranges can be generated in response to the origin and direction of the same first gesture input. The origin and direction in FIG. 13a are merely illustrative examples. Cards covering different ranges based on icons can also be generated by starting from other touch points and swiping in other directions. For example, after a user swipes horizontally left starting from a touch point on the icon of a note application, cards covering the icons of the note, player, gallery, and mail applications can be generated based on the icon of the note application, cards covering the icons of the note, player, and gallery applications can also be generated based on the icon of the note application, and so on. Details are not described further herein. The correspondence between the range covered by the card and the origin and direction of the first gesture needs to be preset. After the setting is completed, the same first gesture can trigger the generation of only cards covering the same range.

[0169] In addition to the cards not including the first control shown in Figures 9b, 10b, 11b, 12b, 13b, 13c, and 13d, the cards may alternatively include the first control. Correspondingly, cards including the first control may be shown in Figures 14a, 14b, 14c, 14d, and 14e. Figure 14a is used as an example for further explanation. In Figure 14a, the first control is displayed in the first control area 1402, the control is displayed in the second control area 1401, and the card content is displayed in the card content area 1403.

[0170] In addition to the gesture input manner shown in FIG. 9b, which starts from the touch point on the card and has the swipe direction shown in FIG. 9b, there may be multiple ways to make a second gesture input used to trigger a card-based icon restoration. FIG. 15 shows four ways. FIG. 15a shows that after a user touches two points on a card 1504 and swipes inward, the icons shown in FIG. 15b are also restored based on the card 1504. FIG. 15c shows that after a user selects a control area 15051 on a card 1505, the icons shown in FIG. 15b are also restored based on the card 1505. FIG. 15d shows that after a user touches an area outside the card 1506 on the interface 1503′, the icons shown in FIG. 15b are also restored based on the card 1506. FIG. 15e shows that after a user touches any icon in the second control area on the card 1507, the icons shown in FIG. 15b are also restored based on the card 1507. When the icon is restored based on the card, the interface 1503, the interface 1503', the interface 1503'', and the interface 1503''' become the interface 1502. In Fig. 15a, Fig. 15c, Fig. 15d, and Fig. 15e, the card 1504, the card 1505, the card 1506, and the card 1507 are all the same card, and the interface 1503, the interface 1503', the interface 1503'', and the interface 1503''' are all the same interface. Different reference numbers are used in different accompanying drawings only for clear explanation. In addition to the two-point touch manner shown in Fig. 15a, the icon may be restored based on the card in a multi-point touch manner, such as a three-point touch or a four-point touch. Further details are not described in this specification.

[0171] In addition, Fig. 16 shows another way of a second gesture input to trigger a card-based icon restoration. The interface 1604 shown in Fig. 16a includes a card 16041, which includes a second control area 16042. After a user selects the second control area 16042 by using a finger, the interface 1604 shown in Fig. 16a changes to the interface 1605 shown in Fig. 16b. In this case, the card 16041 is restored to an icon.

[0172] Those skilled in the art should understand that the second gesture input for triggering the card-based icon restoration is not limited to the above manner, and may alternatively be any other manner perceivable by those skilled in the art. Details will not be described further herein.

[0173] In addition to the above-mentioned manner, there is another manner for generating a card based on an icon and restoring an icon based on a card. FIG. 17 shows another manner for generating a card based on an icon and restoring an icon based on a card. In the interface 1702 shown in FIG. 17a, a user swipes his finger upward in the direction shown in FIG. 17a starting from a touch point on an icon of a memo application. Then, the interface 1702 shown in FIG. 17a changes to an interface 1703 shown in FIG. 17b, and a card 17031 is generated on the interface 1703. At this time, the card 17031 is floating on the interface 1703. After the user touches a fixed button 17032 on the card 17031 by using a finger, the interface 1703 changes to an interface 1704, the card 17031 changes to a card 17041, and the fixed button 17032 included on the card 17031 changes to a close button 17042 included on the card 17041. At this time, the card 17041 is pinned to the interface 1704. After the user touches the close button 17042 by using a finger, the interface 1704 returns to the interface 1702. In this case, after the card is generated, the card has two states, namely, a floating state and a pinned state. When the card is in the floating state, if a first operation is detected, the card changes from the floating state to the pinned state. When the card is in the pinned state, if a second operation is detected, the card is restored to an icon. Optionally, when the card is in the pinned state, if a third operation is detected, the card changes from the pinned state to the floating state. In addition, when the card is in the floating state, the card can be dragged to another position. In this case, the content of the card changes with the icon covered at that position.

[0174] In the embodiment of the present application, multiple ways are further provided for launching an application corresponding to each control in the second control area on the card. Figures 18 to 22 show some ways. The launch of the Twitter application is used as an example. As shown in Figure 18, in Figure 18a, after a user swipes upward in the direction shown in Figure 18a starting from a touch point on the icon 18021 of the memo application, a card 18031 is generated. The interface displayed at this time is the interface 1803 shown in Figure 18b. The second control area 18032 is located at the top of the card 18031. The launch of the Twitter application on the interface 1803 is used as an example. After a user places a finger above the control of the Twitter application in the second control area 18032, the control 18043 of the Twitter application is enlarged. In this case, interface 1803 shown in Fig. 18b changes to interface 1804 shown in Fig. 18c, and correspondingly, card 18031 changes to card 18041. Then, after the user releases his / her finger from control 18043 of the Twitter application in a direction perpendicular to the current screen of the home screen, the Twitter application is launched.

[0175] As shown in FIG. 19, in FIG. 19a, after a user swipes upward from a touch point on an icon 19021 of a memo application in the direction shown in FIG. 19a, a card 19031 is generated. The interface displayed at this time is the interface 1903 shown in FIG. 19b. A floating sphere 19032 is located above the card 19031. The launch of a Twitter application is used as an example. After a user touches the floating sphere 19032 by using a finger or places a finger above the floating sphere 19032, the floating sphere 19032 unfolds to display a second control area 19042. Then, after a user places a finger above the control of the Twitter application in the second control area 19042, the control 19043 of the Twitter application is expanded. Then, after a user releases a finger from the control 19043 of the Twitter application in a direction perpendicular to the current screen of the home screen, the Twitter application is launched.

[0176] As shown in Fig. 20, after the user places his / her finger on the Twitter application control 20022 of the second control area in a direction perpendicular to the current screen of the home screen, the Twitter application control is enlarged. Then, after the user removes his / her finger from the enlarged Twitter application control in a direction perpendicular to the current screen of the home screen, the Twitter application is launched.

[0177] 21, if the user places a finger above any control in the second control area 21032 in a direction perpendicular to the current screen of the home screen, the enlarged second control area is displayed at the top of the second control area 21032, and if the user does not place a finger above any control in the second control area 21032 in a direction perpendicular to the current screen of the home screen, the enlarged second control area is not displayed at the top of the second control area 21032. After the user touches the control of the Twitter application in the enlarged second control area 21042 by using a finger, the Twitter application is launched.

[0178] 22, if the user places a finger above the control of the Twitter application in the second control area 22032 in a direction perpendicular to the current screen of the home screen, the enlarged control of the Twitter application is displayed above the control of the Twitter application in the second control area 22032, and if the user does not place a finger above the control of the Twitter application in the second control area 22032 in a direction perpendicular to the current screen of the home screen, the enlarged control of the Twitter application is not displayed above the control of the Twitter application in the second control area 21032. After the user touches the enlarged control of the Twitter application by using a finger, the Twitter application is launched.

[0179] Additionally, or alternatively, the user may use a finger to directly touch a control for the Twitter application included in a second control area on the interface, which then launches the Twitter application.

[0180] In addition to the above-mentioned manners, any other manners that can be recognized by those skilled in the art regarding the manners of launching the applications corresponding to each control in the second control area on the card are all within the scope of protection of the embodiments of the present application, and the details will not be described further in this specification.

[0181] To launch an application corresponding to a first control in a first control area on a card, a user may directly touch the first control in the first control area, or may use a manner in which, for example, a user first places a finger above the first control in the first control area, and then releases the finger from the first control in a direction perpendicular to the current screen of the home screen. Similarly, in addition to the aforementioned manners, all other manners that can be recognized by a person skilled in the art for launching an application corresponding to a first control in a first control area on a card fall within the protection scope of the embodiments of the present application. Details will not be described further in this specification.

[0182] In some embodiments, the control of the second control area on the card can also be quickly restored to the current on-screen icon of the home screen. As shown in FIG. 23a, there is extra space at the bottom of the interface 2303. The user selects the second control area 23032 on the card 23031 and drags the second control area 23032 toward the bottom of the interface 2303. After the user drags the second control area 23032 to the bottom of the interface 2304 shown in FIG. 23b, the second control area 23032 changes to the second control area 23042. Then, the user releases the selected second control area 23042. At this time, the control of the second control area 23042 is restored to the original icon size and arranged at the bottom of the interface 2305 shown in FIG. 23c in the same way as it is arranged on the home screen. In this way, the control of the second control area on the card can be quickly restored to the current on-screen icon, thereby providing the user with convenience of operation.

[0183] In addition, one icon may not correspond to only one card. One application icon may correspond to multiple cards. An example is used in which an icon of a calendar application corresponds to two cards. As shown in FIG. 24, after a user swipes his finger upward in the direction shown in FIG. 24a starting from a touch point on an icon 24021 of a calendar application on an interface 2402, a card 24031 is generated. The interface displayed at this time is the interface 2403 shown in FIG. 24b. Then, the user swipes his finger to the left on the card 24031 in the direction shown in FIG. 24b. At this time, the card 24031 changes to a card 24041, and the interface displayed is the interface 2404 shown in FIG. 24c. The card 24031 is different from the card 24041 in display style, displayed content, and display form. The user can also swipe his finger to the right on the card 24041 to switch from the card 24041 to the card 24031. In other words, one application icon can correspond to multiple cards, and after the cards are generated, switching between the multiple cards can be implemented through operations. Note that the multiple cards corresponding to one application icon need to be preset.

[0184] In addition, a card may also be generated based on a folder icon. The folder icon is an icon of a folder to which an icon on a home screen is added, and is an icon displayed in the form of an icon. As shown in FIG. 25, after a user swipes his finger upward in the direction shown in FIG. 25a starting from a touch point on the folder icon 25021 on the interface 2502, a card 25031 is generated. The interface displayed at this time is the interface 2503 shown in FIG. 25b. Then, the user swipes his finger to the left on the card 25031 in the direction shown in FIG. 25b. At this time, the card 25031 changes to a card 25041, and the interface displayed is the interface 2504 shown in FIG. 25c. Then, the user swipes his finger to the left on the card 25041 in the direction shown in FIG. 25c. At this time, the card 25041 changes to a card 25051, and the interface displayed is the interface 2505 shown in FIG. 25d. The user may also swipe a finger to the right on card 25051, at which time card 25051 changes to card 25041. The user continues to swipe a finger to the right on card 25041, at which time card 25041 changes to card 25031. Card 25031 corresponds to a card generated based on an icon of the Alipay application of the folder icon, card 25041 corresponds to a card generated based on an icon of the memo application of the folder icon, and card 25051 corresponds to a card generated based on an icon of the calendar application of the folder icon. That is, one folder icon can correspond to multiple cards. After the cards are generated, switching between multiple cards corresponding to the multiple icons included in the folder icon, respectively, can be implemented through operations.

[0185] In some circumstances, at least one card needs to be displayed on the current screen of the electronic device. In this case, the problem of displaying multiple cards needs to be addressed. In the embodiment of the present application, several implementations are provided for displaying multiple cards on the current screen. As shown in FIG. 26a, after a user swipes his finger upward in the direction shown in FIG. 26a starting from a touch point on the icon 26021 of the memo application on the interface 2602, a card 26031 is generated. The interface displayed at this time is the interface 2603 shown in FIG. 26b. Then, after a user swipes his finger upward in the direction shown in FIG. 26b starting from a touch point on the icon 26032 of the Alipay application on the interface 2603, a card 26041 is generated. At this time, the card 26031 is restored to the icon previously covered by the card 26031, and the interface displayed is the interface 2604 shown in FIG. 26c. In other words, in the embodiment shown in FIG. 26, only a maximum of one card can exist at the same time.

[0186] As shown in FIG. 27, after a user swipes his finger upward in the direction shown in FIG. 27a starting from a touch point on the icon 27021 of the memo application on the interface 2702, a card 27031 is generated. The interface displayed at this time is the interface 2703 shown in FIG. 27b. Then, after a user swipes his finger upward in the direction shown in FIG. 27b starting from a touch point on the icon 27032 of the Alipay application on the interface 2703, a card 27041 is generated. At this time, the card 27031 remains unchanged, and the interface displayed is the interface 2704 shown in FIG. 27c. In other words, in the embodiment shown in FIG. 27, multiple cards may exist at the same time, but there is no overlapping area between the multiple cards. As an example, FIG. 27 shows the rules for the coexistence of multiple cards in this embodiment. Although only two cards are shown in FIG. 27, the two cards are not used to limit the scope of the embodiment of the present application. Three cards, four cards, five cards, and more cards are all within the scope of the embodiments of the present application, as are the multiple card examples below, which are not intended to impose any limitations on the number of cards in the embodiments of the present application, but are merely illustrative.

[0187] As shown in FIG. 28, after a user starts a touch point on an icon 28021 of a memo application on the interface 2802 and swipes his finger upward in the direction shown in FIG. 28a, a card 28031 is generated. The interface displayed at this time is the interface 2803 shown in FIG. 28b. Then, after a user starts a touch point on an icon 28032 of an Alipay application on the interface 2803 and swipes his finger upward in the direction shown in FIG. 28b, a card 28041 is generated. At this time, the card 28031 remains unchanged, and the interface displayed is the interface 2804 shown in FIG. Then, after a user starts a touch point on an icon 28042 of a weather application on the interface 2804 and swipes his finger upward in the direction shown in FIG. 28c, a card 28051 is generated. At this time, cards 28031 and 28041 are restored to the icons previously covered by cards 28031 and 28041, respectively, and the interface displayed is interface 2805 shown in Fig. 28d. In other words, in the embodiment shown in Fig. 28, if there is no overlapping area between the cards, multiple cards can coexist on the current screen, and if there is an overlapping area between the cards, only the last generated card is displayed, and the cards that overlap with the last generated card are restored to the icons previously covered by that card.

[0188] In addition to the above-mentioned embodiment for displaying multiple cards on the current screen, there are many other embodiments, the details of which will not be described further in this specification. It should be emphasized that all other ways that can be recognized by those skilled in the art fall within the protection scope of the embodiments of the present application.

[0189] In addition, after the user stops displaying the last card generated by performing an operation, for example, after restoring the card to an icon, it is also necessary to define how to display the penultimate generated card. For this purpose, some implementations are also provided in the embodiment of the present application. As shown in FIG. 29, after the user swipes his finger upward in the direction shown in FIG. 29a starting from a touch point on the icon 29021 of the memo application on the interface 2902, a card 29031 is generated. The interface displayed at this time is the interface 2903 shown in FIG. 29b. Then, after the user swipes his finger upward in the direction shown in FIG. 29b starting from a touch point on the icon 29032 of the weather application on the interface 2903, a card 29041 is generated. At this time, the card 29031 disappears, and the interface displayed is the interface 2904 shown in FIG. 29c. Then, after the user swipes his / her finger downward in the direction shown in Fig. 29c starting from the touch point on card 29041, card 29041 disappears and the previously generated card 29031 is displayed again. At this time, the interface is returned to interface 2903. In other words, in the embodiment shown in Fig. 29, the penultimate generated card is displayed on the current screen after the last generated card is no longer displayed.

[0190] As shown in FIG. 30, after the user swipes his / her finger upward in the direction shown in FIG. 30a starting from the touch point on the icon 30021 of the memo application on the interface 3002, a card 30031 is generated. The interface displayed at this time is the interface 3003 shown in FIG. 30b. Then, after the user swipes his / her finger upward in the direction shown in FIG. 30b starting from the touch point on the icon 30032 of the weather application on the interface 3003, a card 30041 is generated. At this time, the card 30031 disappears, and the interface displayed is the interface 3004 shown in FIG. 30c. Then, after the user swipes his / her finger downward in the direction shown in FIG. 30c starting from the touch point on the card 30041, the card 30041 is restored to an icon covered by the card 30041, and the previously generated card 30031 is not displayed either. At this time, the interface is returned to the interface 3002. In other words, in the embodiment shown in FIG. 30, after the last generated card is no longer displayed, the penultimate generated card is also not displayed on the current screen.

[0191] As for how to display the penultimate generated card after the last generated card is no longer displayed, in addition to the above-mentioned embodiment, all other ways that can be recognized by those skilled in the art fall within the protection scope of the embodiments of the present application, and the details will not be described further in this specification.

[0192] In addition, after a card is generated based on an icon, the card can also be dragged. FIG. 31 shows how the card changes after it is dragged to a different position. As shown in FIG. 31, after a user swipes his finger upward in the direction shown in FIG. 31a starting from a touch point on the icon 31021 of the memo application on the interface 3102, a card 31031 is generated. The interface displayed at this time is the interface 3103 shown in FIG. 31b. Then, the user selects the card 31031 and drags the card 31031 upward by using his finger. When the card 31031 is dragged to the position shown in FIG. 31c, the interface displayed at this time is the interface 3104 shown in FIG. 31c. After the user releases the card 31031, the card 31031 changes to the card 31051, and the interface displayed at this time is the interface 3105 shown in FIG. 31d. It can be seen that the content of the card 31051 has changed. The content of the card 31051 displayed at this time is denoted as card content 1. Furthermore, after the user swipes upward starting from the touch point on the Alipay application icon on the interface 3102, a card is generated. The icons covered by the card are the icons of Alipay, stocks, games, maps, clocks, shopping malls, Huawei sports, Taobao, and music applications. The content of the card displayed at this time is denoted as card content 2. Card content 1 is the same as card content 2. In other words, in the embodiment shown in FIG. 31, after the card generated based on the icon is dragged to another position and released, the content of the card may change.

[0193] When cards and icons coexist on the current screen, operations such as dragging, deleting, and combining may be performed on the icons covered by the cards. After such operations, it is necessary to define how to display the cards and icons. For this purpose, Fig. 32-Fig. 38 show some specific embodiments. Fig. 32 and Fig. 33 show two embodiments of displaying cards and icons on the current screen of an electronic device after an icon outside a card is dragged onto an icon covered by a card to generate a folder icon.

[0194] As shown in FIG. 32, the card 32021 and the icon outside the card 32021 coexist on the interface 3202 shown in FIG. 32a. The second control area in the upper right corner of the card 32021 includes a QQ control. After the user presses and holds the icon 32022 of the memo application by using a finger, the home screen enters an edit state. At this time, the interface changes to the interface 3203, the card 32021 also changes to the card 32031 in a transparent or semi-transparent state, and the icon covered by the card 32031 is displayed in the interface 3203. Then, the user drags the icon 32032 of the memo application toward the icon of the QQ application covered by the card 32031 by using a finger. When the user places the icon 32032 of the memo application above the icon of the QQ application, the interface changes to the interface 3204. After the user releases the memo application icon 32032, the QQ application icon and the memo application icon 32032 are integrated into a folder icon 32052. At this time, the interface changes to interface 3205, and the transparent or semi-transparent card 32031 changes to the transparent or semi-transparent card 32051. After that, the card 32051 changes to card 32061, and the card 32061 is no longer transparent. At this time, the interface changes to interface 3206. Comparing card 32061 and card 32021, the difference between the two is that the second control area in the upper right corner of card 32061 includes a folder control 32062 and no longer includes a QQ control 32022. In other words, in the embodiment shown in FIG. 32, after the home screen is entered into an edit state and an icon outside the card is dragged onto an icon covered by the card to generate a folder icon, the newly generated card differs from the original card only in the controls contained in the second control area; everything else is the same.

[0195] As shown in FIG. 33, the card 33021 and the icon outside the card 33021 coexist on the interface 3302 shown in FIG. 33a. The second control area in the upper right corner of the card 33021 includes a QQ control. After the user presses and holds the icon 33032 of the memo application by using a finger, the home screen enters an edit state. At this time, the interface changes to an interface 3303, the card 33021 changes to a transparent or semi-transparent card 33031, and the icon covered by the card 33031 is displayed in the interface 3303. Then, the user drags the icon 33032 of the memo application toward the icon of the QQ application covered by the card 33031 by using a finger. When the user places the icon 33032 of the memo application above the icon of the QQ application, the interface changes to an interface 3304. After the user releases the memo application icon 33032, the QQ application icon and the memo application icon 33032 are integrated into a folder icon 33052. At this time, the card 33031 changes to a transparent or semi-transparent card 33051, and the interface changes to interface 3305. Then, the card 33051 disappears. At this time, the interface changes to interface 3306. In other words, in the embodiment shown in FIG. 33, after the home screen enters an edit state and an icon outside the card is dragged to an icon covered by the card to generate a folder icon, the card is no longer displayed.

[0196] In addition to dragging an icon outside a card to an icon covered by a card to generate a folder icon, a specific application icon in a folder icon covered by a card can also be dragged outside the card. FIG. 34 shows an embodiment of displaying a card and an icon on a current screen of an electronic device after a specific application icon in a folder icon covered by a card is dragged from the card. As shown in FIG. 34, a card 34021 and an icon outside the card 34021 coexist on the interface 3402 shown in FIG. 34a. The second control area in the upper right corner of the card 34021 includes a folder control 34022. After a user presses and holds the blank space by using a finger, the home screen enters an edit state. At this time, the card 34021 changes to a card 34031 in a transparent or semi-transparent state, and the interface changes to an interface 3403, in which an icon covered by the card 34031 is displayed. Then, the user touches the folder icon 34032 by using a finger. At this time, the interface changes to interface 3404, and folder icon 34032 is enlarged and displayed as folder icon 34041. Then, the user selects and drags outward note application icon 34042 by using a finger. After the user drags note application icon 34042 to the position shown in FIG. 34e and releases note application icon 34042, note application icon 34042 is reduced in size and displayed as note application icon 34052. At this time, card 34031 changes to transparent or semi-transparent card 34051, and the interface changes to interface 3405. After that, card 34051 changes to card 34061, and card 34061 is no longer transparent. At this time, interface 3405 changes to interface 3406.Comparing card 34061 with card 34021, the difference between them is that the second control area in the upper right corner of card 34061 includes a QQ control 34062 and no longer includes a folder control 34022. In other words, in the embodiment shown in Fig. 34, after the home screen enters an edit state and a particular application icon within a folder icon covered by a card is dragged out of the card, the newly generated card differs from the original card only in that the controls included in the second control area are different, and everything else is the same.

[0197] In addition to dragging a specific application icon in a folder icon covered by a card out of the card, the application icon covered by the card may be directly dragged out of the card. Figures 35 and 36 show two embodiments of displaying a card and an icon on the current screen of an electronic device after the application icon covered by the card is directly dragged out of the card. As shown in Figure 35, the card 35021 and the icon outside the card 35021 coexist on the interface 3502 shown in Figure 35a. The second control area 35022 in the upper right corner of the card 35021 includes icons of WeChat, Alipay, QQ, calendar, settings, clock, Twitter, and stock applications. After the user presses and holds the blank space by using a finger, the home screen enters an edit state. At this time, the card 35021 changes to a transparent or semi-transparent card 35031, and the interface changes to an interface 3503, in which the icon covered by the card 35031 is displayed. Then, the user selects the icon 35032 of the QQ application and drags it outward by using a finger. After the user drags the icon 35032 of the QQ application to the position shown in FIG. 35d and releases the icon 35032 of the QQ application, the card 35031 changes to a card 35041 in a transparent or semi-transparent state, and the interface changes to an interface 3504. On the interface 3504, the position vacant after the icon of the QQ application is dragged is not filled by another application icon sequentially. Then, the card 35041 changes to a card 35051, and the card 35051 is no longer transparent. At this time, the interface 3504 changes to an interface 3505, and the second control area 35052 in the upper right corner of the card 35051 includes icons of WeChat, Alipay, calendar, settings, clock, Twitter, and stock applications.Comparing card 35051 and card 35021, the difference between the two is that second control area 35052 of card 35051 does not include a QQ control, whereas second control area 35022 of card 35021 includes a QQ control. In other words, FIG. 5 In the embodiment shown in FIG. 1, after the home screen enters an edit state and an application icon covered by a card is dragged out of the card, the newly generated card differs from the original card only in that the controls contained in the second control area are different, everything else is the same.

[0198] As shown in FIG. 36, the card 36021 and the icon outside the card 36021 coexist on the interface 3602 shown in FIG. 36a. The second control area 36022 in the upper right corner of the card 36021 includes icons of WeChat, Alipay, QQ, calendar, settings, clock, Twitter, and stock applications. After the user presses and holds the blank space by using a finger, the home screen enters an edit state. At this time, the card 36021 changes to a card 36031 in a transparent or semi-transparent state, and the interface changes to an interface 3603, in which an icon covered by the card 36031 is displayed. Then, the user selects the icon 36032 of the QQ application and drags it outward by using a finger. After the icon 36032 of the QQ application is dragged from its original position, the subsequent icons of applications such as Twitter, Facebook, weather, Alipay, and file management are filled in the vacant space sequentially. At this time, card 36031 changes to card 36041 in a transparent or semi-transparent state. After the user drags QQ application icon 36032 to the position shown in FIG. 36d and releases QQ application icon 36032, the interface changes to interface 3604. Then, card 36041 changes to card 36051, which is no longer transparent. At this time, interface 3604 changes to interface 3605, and a second control area 36052 in the upper right corner of card 36051 includes icons of WeChat, Settings, Twitter, Calendar, File Management, Clock, Facebook, and Stocks applications. Comparing card 36051 and card 36021, the differences between the two are that the content of the card content area of ​​card 36051, the content of the first control area of ​​card 36051, and the content of the second control area of ​​card 36051 are different from the content of the card content area of ​​card 36021, the content of the first control area of ​​card 36021, and the content of the second control area of ​​card 36021, respectively.In other words, in the embodiment shown in FIG. 36, after the home screen enters an edit state and an application icon covered by a card is dragged off the card, the newly generated card differs from the original card in that the content of the card content area of ​​the card, the content of the first control area of ​​the card, and the content of the second control area of ​​the card change.

[0199] In addition, if there are multiple cards on the current screen of the electronic device, the outer icon of the card can be dragged to an icon covered by one of the cards to generate a folder. Figures 37 and 38 show an embodiment of displaying cards and icons on the current screen of the electronic device after the outer icon of the card is dragged to an icon covered by one of the cards to generate a folder. For example, there are two cards. As shown in Figure 37, cards 37011 and 37012 are on the interface 3701 shown in Figure 37a. After a user presses and holds the icon 37023 of the mail application by using a finger, the home screen enters an edit state. At this time, cards 37011 and 37012 change to cards 37021 and 37022 in a transparent or semi-transparent state, respectively, and the interface changes to interface 3702, in which the icons covered by cards 37021 and 37022 are displayed. Then, by using a finger, the user drags the mail application icon 37023 toward the setting application icon 37024 covered by the card 37022. When the user places the mail application icon 37023 above the setting application icon 37024, the interface changes to the interface 3703. After the user releases the mail application icon 37023, the setting application icon 37024 and the mail application icon 37023 are integrated into the folder icon 37042. Then, the card 37021 changes to the card 37041, the card 37041 is no longer transparent, and the card 37022 disappears. At this time, the interface changes to the interface 3704, and the icon covered by the card 37022 is displayed in the interface 3704. In other words, in the embodiment shown in FIG. 37, multiple cards are displayed on the current screen, and after the home screen enters the edit state, the edited card is no longer displayed.

[0200] As shown in FIG. 38, cards 38011 and 38012 are on the interface 3801 shown in FIG. 38a. After the user presses and holds the icon 38023 of the mail application by using a finger, the home screen enters an edit state. At this time, cards 38011 and 38012 change to cards 38021 and 38022 in a transparent or semi-transparent state, respectively, and the interface changes to interface 3802, in which the icons covered by cards 38021 and 38022 are displayed. Then, by using a finger, the user drags the icon 38023 of the mail application toward the icon 38024 of the setting application covered by card 38022. When the user places the icon 38023 of the mail application above the icon 38024 of the setting application, the interface changes to interface 3803. After the user releases the email application icon 38023, the settings application icon 38024 and the email application icon 38023 are merged into the folder icon 38042. Then, the card 38021 changes to the card 38011, which is no longer transparent, and the card 38022 changes to the card 38041. At this time, the interface changes to the interface 3804, and the icons covered by the card 38041 are displayed in the interface 3804. Then, the card 38041 changes to the card 38051, which is no longer transparent, the interface 3804 changes to the interface 3805, and the card 38011 remains unchanged. Comparing the card 38051 and the card 38012, the difference between the two is that the controls included in the second control area of ​​the card 38051 are different from the controls included in the second control area of ​​the card 38012. In other words, in the embodiment shown in FIG. 38, multiple cards are displayed on the current screen, and after the home screen enters the edit state, the edited card still remains, but displays different content.

[0201] In some circumstances, not all icons on the current screen of the home screen of the electronic device can be used to generate a card. For example, a third-party application is installed on the electronic device, but the third-party application does not provide card information according to the setting requirements. Therefore, it is necessary to distinguish the icons on the current screen of the home screen to provide convenience to the user. FIG. 39 is a schematic diagram of a user interface that distinguishes between icons that can be used to generate a card and icons that cannot be used to generate a card by checking the difference between the icons. As shown in FIG. 39a, the text under the icon that can be used to generate a card is underlined, but the text under the icon that cannot be used to generate a card is not underlined. In this way, the user can identify the icon that can be used to generate a card by checking whether the icon on the current screen of the home screen is marked as such. For example, the text under the icon of the note application shown in FIG. 39a is underlined, and thus the user can know that the icon of the note application is an icon that can be used to generate a card. For a folder icon, the text under the folder icon is also underlined as long as one of the icons contained in the folder icon can be used to generate a card. The marking scheme may alternatively be to display a horizontal line between the icon and the text below the icon that may be used to generate a card, or to display a rectangular box surrounding the icon that may be used to generate a card, or to display a special mark such as a star in a specific location, such as the outer top right corner, of the icon that may be used to generate a card, etc. Alternatively, an animation display scheme may be used to identify the icons that can be used to generate a card. For example, during a specific time, a specific animation is displayed for icons that may be used to generate a card, and no animation is displayed for icons that may not be used to generate a card.These examples of marking methods are merely illustrative and are not intended to limit the scope of the embodiments of the present application. Any other distinguishing methods that can be recognized by those skilled in the art are within the scope of the embodiments of the present application. The content of the note application's icon-based card generation in Fig. 39a and the content of the card-based icon restoration in Fig. 39b are consistent with the related content in Fig. 9a and Fig. 9b, respectively, and will not be further described herein.

[0202] In order to implement switching between several functions of the first control on the same card, the embodiment shown in FIG. 40 and FIG. 41 is further provided in the embodiment of the present application. As shown in FIG. 40, the card 40010 is displayed on the interface 4001 shown in FIG. 40a. The first control 40011 is displayed in the upper left corner of the card 40010, and the first sub-controls 40012, 40013, 40014 are displayed around the first control 40011. The first sub-control 40012 is used as an example. On the interface 4001 shown in FIG. 40a, the payment code function of Alipay can be directly used. After the user touches the first sub-control 40012, the interface 4001 shown in FIG. 40a changes to the interface 4002 shown in FIG. 40b. Correspondingly, the first sub-control 40012 changes to the first sub-control 40022, and the payment code interface displayed in the card content of the card 40010 also changes to a scan interface displayed in the card content of the card 40020. In this way, the interface shown in FIG. 4002 Above, the Alipay scan function can be used directly. If the user needs to call up more functions, the user can directly touch / tap the first control 40011 to launch the Alipay application, or directly touch / tap the first sub-control 40014.

[0203] As shown in FIG. 41, the card 41010 is displayed on the interface 4101 shown in FIG. 41a. The card content 41011 is displayed on the card 41010. A QR code (registered trademark) and an instruction box containing the QR code (registered trademark) are displayed at the top of the card content 41011, and “SCAN”, “Payment Code”, and “Bus Code” are displayed at the bottom of the card content 41011. At this time, the instruction arrow of the instruction box points to the “Payment Code” displayed at the bottom. After the user touches / tap on “SCAN”, the interface 4101 shown in FIG. 41a changes to the interface 4102 shown in FIG. 41b. On the interface 4102, a function interface of “SCAN” and an instruction box containing the function interface are displayed at the top of the card content 41021, and “SCAN”, “Payment Code”, and “Bus Code” are displayed at the bottom of the card content 41021. At this time, the instruction arrow of the instruction box points to the “SCAN” displayed at the bottom. In this way, the scanning function of Alipay can be directly used on the interface 4101 shown in Fig. 41a. In addition, the user can alternatively touch a button or text for switching to a different sub-function of the same application contained in the card content, thereby implementing display switching of different sub-functions of the same application corresponding to the card content.

[0204] In order to implement the switching between the first control and another control on the card, corresponding and card display switching, the embodiment shown in FIG. 42 is further provided in the embodiment of the present application. As shown in FIG. 42, the card 42010 is displayed on the interface 4201 shown in FIG. 42a. The first control is displayed in the upper left corner of the card 42010. Three first sub-controls are displayed around the first sub-control. Some controls are displayed in the upper right corner of the card 42010. The control 42011 is used as an example. In the interface 4201 shown in FIG. 42a, the payment code function of Alipay can be directly used. After the user touches the control 42011, the interface 4201 shown in FIG. 42a changes to the interface 4202 shown in FIG. 42b. The control 42011 is a control that is displayed after the icon of the calendar application is reduced in size by a certain factor. Correspondingly, control 42011 changes to the first control, which is displayed in the top left corner of card 42020, and the payment code interface displayed in the card content of card 42010 also changes to a calendar interface displayed in the card content of card 42020. In this way, the interface shown in FIG. 4202 On the calendar, the content interface can be directly viewed. In other words, after a user input is detected, the first control on the card can be switched to another control, and the card content is also updated synchronously with the first control.

[0205] All or some of the embodiments provided in this application may be used in combination with each other.

[0206] The method provided in the embodiments of the present application is applicable to the following electronic devices:

[0207] FIG. 43 shows an electronic device 4300 according to the present application. For example, the electronic device 4300 includes at least one processor 4310, a memory 4320, and a display 4330. The processor 4310 is coupled to the memory 4320 and the touch screen 4330. The coupling in this embodiment of the present application may be a communication connection, or may be in an electrical or other form. Specifically, the memory 4320 is configured to store program instructions, the touch screen 4330 is configured to display a user interface, and the processor 4310 controls the memory 4320 and the touch screen 4330 so that the electronic device 4300 executes the steps performed by the electronic device in the card display method provided in the embodiment of the present application. 4320 The electronic device 4300 is configured to call the program instructions stored in the electronic device 4300. It should be understood that the electronic device 4300 can be used to implement the card display method provided in the embodiment of the present application. For related characteristics, please refer to the above content, and the details will not be described again in this specification.

[0208] In some embodiments, if the display has touch capabilities, the display is also referred to as a touch display. Operations on a touch display may be performed by using virtual keys. If the display does not have touch capabilities, the display is also referred to as a non-touch display. Operations on a non-touch display may be performed by using physical keys.

[0209] The present application provides a computer program product including instructions, which, when executed on an electronic device, causes the electronic device to execute steps performed by the electronic device in a card display method provided in an embodiment of the present application.

[0210] The present application provides a computer-readable storage medium including instructions that, when executed on an electronic device, cause the electronic device to perform steps performed by the electronic device in a card display method provided in an embodiment of the present application.

[0211] It may be clearly understood by those skilled in the art that the embodiments of the present application may be implemented using hardware or a combination of hardware and software. When implemented using a combination of hardware and software, the aforementioned functions may be stored in a computer-readable medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially, or the part that contributes to the prior art, or all or part of the technical solutions may be expressed in the form of a software product. The computer software product is stored in a storage medium and includes some instructions for instructing a computer device (which may be a personal computer, a server, a network device, etc.) or a processor to perform all or part of the steps of the method described in the embodiments of the present application. The storage medium includes various media that can store program code, such as a flash memory, a removable hard disk, a read-only memory, a random access memory, a magnetic disk, or an optical disk.

[0212] The above description is merely a specific implementation of the embodiments of the present application, and is not intended to limit the protection scope of the embodiments of the present application. Any variation or replacement within the technical scope disclosed in the embodiments of the present application shall fall within the protection scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application shall be subject to the protection scope of the claims. [Explanation of symbols]

[0213] 100 Electronic equipment 102 User Interface 104 User Interface 110 Processor 120 External Memory Interface 121 Internal Memory 130 USB interface 140 Charging Management Module 141 Power Management Module 142 Battery 150 Mobile Communication Module 160 Wireless communication module 170 Audio Module 170A Loudspeaker 170B Telephone Receiver 170C Microphone 170D Earphone jack 180 Sensor Module 180A PRESSURE SENSOR 180B Gyro sensor 180C Barometric Pressure Sensor 180D Magnetic Sensor 180E Acceleration Sensor 180F Distance Sensor 180G Proximity Light Sensor 180H Fingerprint Sensor 180J Temperature Sensor 180K touch sensor 180L Ambient Light Sensor 180M Bone Conduction Sensor 190 keys 191 Motor 192 Indicator 193 Camera 194 Display 195 SIM card interface 200 User Interface 201 Interface 202 Interface 302 rooms 501 Input Manager 502 Home Screen Manager 503 Card Services Manager 504 Weather 505 Calendar 701 Icon Layer 702 Card Layer 703 Wallpaper layer 800 card layer board 801 Icon 802 Display Content Area 802' Display content area 810 Card Layer Board 812 Display Content Area 812' Display content area 902 Interface 903 Interface 920 touch points 1002 Interface 1003 Interface 1004 Interface 1010 touch points 1021 Alipay icon 1022 Navigation Bar Area 1023 fixed icon area 1024 Page Indicator Area 1025 swipeable page area 1026 Status Bar Area 1041 Pop-up Windows 1102 Interface 1103 Interface 1104 Interface 1110 touch points 1401 Control Zone 1402 Control Zone 1403 Card Content Area 1502 Interface 1503 Interface 1503' Interface 1503'' Interface 1503'' Interface 1504 Cards 1505 Cards 1506 Cards 1507 Cards 1604 Interface 1605 Interface 1702 Interface 1703 Interface 1704 Interface 1803 Interface 1804 Interface 1903 Interface 2001 Button 2002 Cards 2011 Button 2021 Button 2303 Interface 2304 Interface 2305 Interface 2402 Interface 2403 Interface 2404 Interface 2502 Interface 2503 Interface 2504 Interface 2505 Interface 2602 Interface 2603 Interface 2604 Interface 2702 Interface 2703 Interface 2704 Interface 2802 Interface 2803 Interface 2804 Interface 2805 Interface 2902 Interface 2903 Interface 2904 Interface 3002 Interface 3003 Interface 3004 Interface 3102 Interface 3103 Interface 3104 Interface 3105 Interface 3202 Interface 3203 Interface 3204 Interface 3205 Interface 3206 Interface 3302 Interface 3303 Interface 3304 Interface 3305 Interface 3306 Interface 3402 Interface 3403 Interface 3404 Interface 3405 Interface 3406 Interface 3502 Interface 3503 Interface 3504 Interface 3505 Interface 3602 Interface 3603 Interface 3604 Interface 3605 Interface 3701 Interface 3702 Interface 3703 Interface 3704 Interface 3801 Interface 3802 Interface 3803 Interface 3804 Interface 3805 Interface 4001 Interface 4002 Interface 4020 Memory 4101 Interface 4102 Interface 4201 Interface 4202 Interface 4300 Electronic equipment 4310 Processor 4320 Memory 4330 Display, Touch Screen 7021 Card 9021 Icon 9031 Card 10021 Icon 10031 Card 10032 Gallery Control 10041 Button 10410 Payment Code 11021 Icon 11031 Card 11032 Gallery Control 11041 Button 13031 Cards 13031' Card 13031'' Card 15051 Control Area 16041 Cards 16042 Control Area 17031 Card 17032 Fixed button 17041 Cards 17042 Button 18021 Icon 18031 Card 18032 Control Area 18041 Cards 18043 Control 19021 Icon 19031 Card 19032 Floating Ball 19042 Control Area 19043 Control 20022 Control 21032 Control Area 21042 Control Area 22032 Control Zone 23031 Card 23032 Control Area 23042 Control Area 24021 Icon 24031 Cards 24041 Cards 25021 Folder Icon 25031 Card 25041 Cards 25051 Card 26021 Icon 26031 Cards 26032 Icon 26041 Cards 27021 Icon 27031 Cards 27032 Icon 27041 Cards 27042 Cards 28021 Icon 28031 Cards 28032 Icon 28041 Cards 28042 Icon 28051 Cards 29021 Icon 29031 Card 29032 Icon 29041 Cards 30021 Icon 30031 Card 30032 Icon 30041 Card 31021 Icon 31031 Card 31051 Cards 32021 Card 32022 QQ Control 32031 Cards 32032 Icon 32051 Cards 32052 Folder Icon 32061 Cards 32062 Folder Control 33021 Card 33031 Card 33032 Icon 33051 Card 33052 Folder Icon 34021 Card 34022 Folder Control 34031 Cards 34032 Folder Icon 34041 Folder Icon 34042 Icon 34051 Cards 34052 Icon 34061 Cards 34062 QQ Control 35021 Card 35022 Control Area 35031 Card 35032 Icon 35041 Card 35051 Card 35052 Control Area 36021 Card 36022 Control Area 36031 Cards 36032 Icon 36041 Cards 36051 Cards 36052 Control Area 37011 Card 37012 Card 37021 Card 37022 Card 37023 Icon 37024 Icon 37041 Cards 37042 Folder Icon 38011 Card 38012 Card 38021 Card 38022 Card 38023 Icon 38024 Icon 38041 Cards 38042 Folder Icon 38051 Card 40010 Card 40011 Control 40012 Subcontrol 40013 Subcontrol 40014 Subcontrol 40020 Card 40022 Subcontrol 41010 Card 41011 Card Contents 41021 Card Contents 42010 Card 42011 Control 42020 Card 70211 Control Area 70212 Control Area 70213 Card Title Bar 70214 Card Content Area 70215 Card Layer Board

Claims

1. A display and one or more processors; Memory, One or more computer programs stored in the memory, the one or more computer programs, when executed by the one or more processors, causing the electronic device to perform the following steps: displaying a current view of a home screen, the current view displaying a number of icons; detecting a first user input to a first icon of the number of icons; displaying a first card on the current screen in response to the first user input, wherein the first card does not fill the current screen; and one or more computer programs for executing the Equipped with the first icon is a first folder icon, the first folder icon includes at least a first application icon, the first application icon corresponds to a first application, or the first icon is a first application icon, the first application icon corresponds to a first application; The first card comprises at least a first card content including a portion of the content of the first application to be displayed after the first application is launched; and N controls, each of which is used to launch a corresponding application, the application corresponding to a corresponding icon that was displayed on the home screen before the first card was displayed, N being a positive integer greater than or equal to 1, the N controls being displayed on the first card as controls corresponding to an icon that is obscured by the displayed first card, the N controls corresponding to a reduced-sized icon; a first control used to launch the first application and corresponding to the first icon; a first sub-control displayed around the first control and used to switch the first card content on the first card and to switch to different sub-functions of the first application; Including, electronic equipment.

2. the first user input is performed by a one-step operation; the first card content occupies the largest percentage of the area of ​​the first card; The area of ​​the first card content is equal to or greater than the area of ​​the first icon; an area occupied by the first card on the current screen is a first area; The current screen also displays a background, Before the first card is displayed, the N controls correspond to N icons, the N icons are displayed in the first area, the first area includes only the first portion of the background, the first icon, and the N icons, and the number of icons included in the first area is equal to N+1; 2. The electronic device according to claim 1.

3. detecting a second user input to one of the N controls; displaying, in response to the second user input, content of the application corresponding to the one of the N controls that is to be displayed after the application is launched; detecting a back operation; in response to the back operation, displaying the current screen, wherein content displayed on the current screen is content that was displayed on the current screen before the second user input was responded to; Further execute 3. The electronic device according to claim 1 or 2.

4. detecting a third user input to the first card on the screen after displaying the first card; in response to the third user input, displaying in the first area the content that was displayed in the first area before the first user input was responded to, the first area being the area occupied by the first card on the current screen; The electronic device according to claim 1 , further comprising:

5. displaying L icons in an area other than a first area on the current screen, the first area being an area on the current screen occupied by the first card, where L is a positive integer equal to or greater than 1; detecting a fourth user input to one of the L icons; displaying, in response to the fourth user input, an interface to be displayed after an application corresponding to the one of the L icons is launched; detecting a back operation; in response to the back operation, displaying the current screen, wherein content displayed on the current screen is content that was displayed on the current screen before the fourth user input was responded to; The electronic device according to claim 1 , further comprising:

6. the first control is a control that displays the first icon after it has been reduced in size by a first factor; the N controls are controls that are displayed after the N icons are reduced in size by a second factor, and before the first card is displayed, the N controls correspond to the N icons; The area of ​​the first control is larger than the area of ​​any one of the N controls; the first control, the N controls, and the first card content are displayed in the top left corner, the top right corner, and a bottom center of the first card, respectively; the first user input is a first voice input or a first gesture input, the first gesture input is a gesture input whose origin is located at the first icon and whose swipe direction is upward, and the first card changes with the first gesture input; a second user input and a fourth user input are a second voice input and a fourth voice input, or a second gesture input and a fourth gesture input, respectively; the second user input is an input for one of the N controls; in response to the second user input, content of the application that is to be displayed after an application corresponding to the one of the N controls is launched is displayed; the fourth user input is an input for one of L icons; in response to the fourth user input, an interface that is to be displayed after an application corresponding to the one of the L icons is launched is displayed, the L icons are icons displayed in an area other than a first area on the current screen, L is a positive integer greater than or equal to 1, and the first area is an area occupied by the first card on the current screen; the second gesture input and the fourth gesture input are touch inputs; a third user input is a third gesture input, the third user input being an input to the first card on a screen after displaying the first card, and the third gesture input is performed by a one-step operation; the third gesture input having an origin located on the first card and a swipe direction opposite to the swipe direction of the first gesture input, and in response to the third user input, content that was displayed in the first area before the first user input was responded to is displayed in the first area.

6. An electronic device according to any one of claims 1 to 5.

7. detecting a fifth user input to a second icon of the number of icons; displaying a second card on the current screen in response to the fifth user input, wherein the second card does not fill the current screen; and Further execute the second icon is a second folder icon, the second folder icon includes at least a second application icon, the second application icon corresponds to a second application, or the second icon is a second application icon, the second application icon corresponds to a second application; The second card comprises at least a second card content corresponding to the second application, the second card content including a portion of the content of the second application that is displayed after the second application is launched; and K controls, each of which is used to launch a corresponding application, the application corresponding to a corresponding icon that was displayed on the home screen before the second card was displayed, where K is a positive integer greater than or equal to 1; Including, The area of ​​the second card content is larger than the area of ​​the second icon; an area occupied by the first card on the current screen is a first area; an area on the current screen occupied by the second card is a second area; the second area and the first area do not overlap, and the screen after displaying the second card continues to display the first card, or the second area and the first area overlap, and the screen after displaying the second card stops displaying the first card.

7. An electronic device according to any one of claims 1 to 6.

8. the fifth user input is performed by a one-step operation; the second card content occupies the largest percentage of the area of ​​the second card; The area of ​​the second card content is equal to or greater than the area of ​​the second icon; The current screen also displays a background, Before the second card is displayed, the K controls correspond to K icons, the K icons are displayed in the second area, the second area includes only the second portion of the background, the second icon, and the K icons, and the number of icons included in the second area is equal to K+1; 8. The electronic device according to claim 7.

9. When the first folder icon includes E first application icons, E being a positive integer equal to or greater than 2, performing the following steps: detecting a first switching user input; in response to the first switching user input, switching from the first card content of the first card to another first card content, the first card content and the another first card content respectively corresponding to two of the E first application icons; and / or When the second icon is a second folder icon, and the second folder icon includes F second application icons, where F is a positive integer equal to or greater than 2, performing the following steps: detecting a second switching user input; switching from a second card content of a second card to another second card content in response to the second switching user input, the second card being displayed on the current screen in response to a fifth user input on the second icon of the number of icons, the second card content corresponding to a second application, and the second card content and the another second card content corresponding to two of the F second application icons, respectively.

9. An electronic device according to any one of claims 1 to 8.

10. The first card is in a state in which it can be dragged on the screen after displaying the first card, the first card further comprises a pin button, and after the pin button is touched, the first card is pinned on the screen after displaying the first card; and / or a second card is displayed on the current screen in response to a fifth user input on a second icon of the number of icons, the second card being in a state in which it can be dragged on a screen after displaying the second card, the second card further comprising a pin button, and after the pin button is touched, the second card is pinned on the screen after displaying the second card; 10. An electronic device according to any one of claims 1 to 9.

11. After the first card is pinned to the screen after displaying the first card, the pin button of the first card changes to a close button, and after the close button is touched, displaying the first card is stopped, or the first card further comprises a close button, and after the close button is touched, displaying the first card is stopped, and / or a second card is displayed on the current screen in response to a fifth user input on the second icon of the number of icons, and after the second card is pinned to the screen after displaying the second card, the pin button of the second card changes to a close button, and after the close button is touched, displaying the second card is stopped; or the second card further comprises a close button, and after the close button is touched, displaying the second card is stopped.

11. The electronic device according to claim 10.

12. When the first icon is a first application icon, and the first application icon corresponds to a plurality of first cards, the following steps are performed: detecting a fifth toggle user input; switching among the plurality of first cards in response to the fifth switching user input; The electronic device according to claim 1 ,

13. A card display method applied to an electronic device having a display, the method comprising: displaying a current view of a home screen on the display, the current view displaying a number of icons; detecting a first user input to a first icon of the number of icons; displaying a first card on the current screen in response to the first user input, wherein the first card does not fill the current screen; Including, the first icon is a first folder icon, the first folder icon includes at least a first application icon, the first application icon corresponds to a first application, or the first icon is a first application icon, the first application icon corresponds to a first application; The first card comprises at least a first card content including a portion of the content of the first application to be displayed after the first application is launched; and N controls, each of which is used to launch a corresponding application, the application corresponding to a corresponding icon that was displayed on the home screen before the first card was displayed, N being a positive integer greater than or equal to 1, the N controls being displayed on the first card as controls corresponding to icons obscured by the displayed first card, the N controls corresponding to reduced-sized icons; a first control used to launch the first application and corresponding to the first icon; a first sub-control displayed around the first control and used to switch the first card content on the first card and to switch to different sub-functions of the first application; Including, method.

14. the first user input is performed by a one-step operation; the first card content occupies the largest percentage of the area of ​​the first card; The area of ​​the first card content is larger than the area of ​​the first icon; an area occupied by the first card on the current screen is a first area; The current screen also displays a background, Before the first card is displayed, the N controls correspond to N icons, the N icons are displayed in the first area, the first area includes only the first portion of the background, the first icon, and the N icons, and the number of icons included in the first area is equal to N+1; The method of claim 13.

15. detecting a second user input to one of the N controls; displaying, in response to the second user input, content of the application corresponding to the one of the N controls that is to be displayed after the application is launched; detecting a back operation; in response to the back operation, displaying the current screen, wherein content displayed on the current screen is content that was displayed on the current screen before the second user input was responded to; Including, 15. The method of claim 13 or 14.

16. detecting a third user input to the first card on the screen after displaying the first card; in response to the third user input, displaying in the first area the content that was displayed in the first area before the first user input was responded to, the first area being the area occupied by the first card on the current screen; 16. The method of any one of claims 13 to 15, comprising:

17. displaying L icons in an area other than a first area on the current screen, the first area being an area on the current screen occupied by the first card, where L is a positive integer equal to or greater than 1; detecting a fourth user input to one of the L icons; displaying, in response to the fourth user input, an interface to be displayed after an application corresponding to the one of the L icons is launched; detecting a back operation; in response to the back operation, displaying the current screen, wherein content displayed on the current screen is content that was displayed on the current screen before the fourth user input was responded to; 16. The method of any one of claims 13 to 15, comprising:

18. the first control is a control that displays the first icon after it has been reduced in size by a first factor; the N controls are controls that are displayed after the N icons are reduced in size by a second factor, and before the first card is displayed, the N controls correspond to the N icons; The area of ​​the first control is larger than the area of ​​any one of the N controls; the first control, the N controls, and the first card content are displayed in the top left corner, the top right corner, and a bottom center of the first card, respectively; the first user input is a first voice input or a first gesture input, the first gesture input is a gesture input whose origin is located at the first icon and whose swipe direction is upward, and the first card changes with the first gesture input; a second user input and a fourth user input are a second voice input and a fourth voice input, or a second gesture input and a fourth gesture input, respectively; the second user input is an input for one of the N controls; in response to the second user input, content of the application that is to be displayed after an application corresponding to the one of the N controls is launched is displayed; the fourth user input is an input for one of L icons; in response to the fourth user input, an interface that is to be displayed after an application corresponding to the one of the L icons is launched is displayed, the L icons are icons displayed in an area other than a first area on the current screen, L is a positive integer greater than or equal to 1, and the first area is an area occupied by the first card on the current screen; the second gesture input and the fourth gesture input are touch inputs; a third user input is a third gesture input, the third user input being an input to the first card on a screen after displaying the first card, and the third gesture input is performed by a one-step operation; the third gesture input having an origin located on the first card and a swipe direction opposite to the swipe direction of the first gesture input, and in response to the third user input, content that was displayed in the first area before the first user input was responded to is displayed in the first area.

18. The method according to any one of claims 13 to 17.

19. detecting a fifth user input to a second icon of the number of icons; displaying a second card on the current screen in response to the fifth user input, wherein the second card does not fill the current screen; and Further comprising: the second icon is a second folder icon, the second folder icon includes at least a second application icon, the second application icon corresponds to a second application, or the second icon is a second application icon, the second application icon corresponds to a second application; The second card comprises at least a second card content corresponding to the second application, the second card content including a portion of the content of the second application that is displayed after the second application is launched; and K controls, each of which is used to launch a corresponding application, the application corresponding to a corresponding icon that was displayed on the home screen before the second card was displayed, where K is a positive integer greater than or equal to 1; Including, The area of ​​the second card content is larger than the area of ​​the second icon; an area occupied by the first card on the current screen is a first area; an area on the current screen occupied by the second card is a second area; the second area and the first area do not overlap, and the screen after displaying the second card continues to display the first card, or the second area and the first area overlap, and the screen after displaying the second card stops displaying the first card.

19. The method according to any one of claims 13 to 18.

20. the fifth user input is performed by a one-step operation; the second card content occupies the largest percentage of the area of ​​the second card; The area of ​​the second card content is equal to or greater than the area of ​​the second icon; The current screen also displays a background, Before the second card is displayed, the K controls correspond to K icons, the K icons are displayed in the second area, the second area includes only the second portion of the background, the second icon, and the K icons, and the number of icons included in the second area is equal to K+1; 20. The method of claim 19.

21. when the first folder icon includes E first application icons, E being a positive integer equal to or greater than 2, detecting a first switching user input; and in response to the first switching user input, switching from the first card content of the first card to another first card content, the first card content and the another first card content respectively corresponding to two of the E first application icons. and / or if the second icon is a second folder icon, and the second folder icon includes F second application icons, F being a positive integer equal to or greater than 2; detecting a second switching user input; and switching from a second card content of a second card to another second card content in response to the second switching user input, the second card being displayed on the current screen in response to a fifth user input on the second icon of the number of icons, the second card content corresponding to a second application, and the second card content and the another second card content corresponding to two of the F second application icons, respectively.

21. The method according to any one of claims 13 to 20.

22. The method further comprising: The first card is in a state in which it can be dragged on the screen after displaying the first card, the first card further comprises a pin button, and after the pin button is touched, the first card is pinned on the screen after displaying the first card; and / or a second card is displayed on the current screen in response to a fifth user input on a second icon of the number of icons, the second card being in a state in which it can be dragged on a screen after displaying the second card, the second card further comprising a pin button, and after the pin button is touched, the second card is pinned on the screen after displaying the second card; 22. The method according to any one of claims 13 to 21.

23. The method further comprising: After the first card is pinned to the screen after displaying the first card, the pin button of the first card changes to a close button, and after the close button is touched, displaying the first card is stopped, or the first card further comprises a close button, and after the close button is touched, displaying the first card is stopped, and / or a second card is displayed on the current screen in response to a fifth user input on the second icon of the number of icons, and after the second card is pinned to the screen after displaying the second card, the pin button of the second card changes to a close button, and after the close button is touched, displaying the second card is stopped; or the second card further comprises a close button, and after the close button is touched, displaying the second card is stopped.

23. The method of claim 22.

24. The method further comprising: detecting a fifth switching user input when the first icon is a first application icon and the first application icon corresponds to a plurality of first cards; and switching the plurality of first cards in response to the fifth switching user input; 24. The method of any one of claims 13 to 23, comprising:

25. 25. A computer readable storage medium containing instructions which, when executed on an electronic device, cause the electronic device to perform a card display method according to any one of claims 13 to 24.

26. 25. An electronic device having a display, a memory, and one or more processors, the one or more processors configured to execute one or more computer programs stored in the memory, the display displaying a graphical user interface that is displayed when the electronic device executes the method of any one of claims 13 to 24.

Images