Interface display method and related apparatus

Abstract

The present application relates to the technical field of terminals. Provided are an interface display method and a related apparatus. The method comprises: displaying a first card on a display screen, wherein the first card comprises a first edge, a second edge and a third edge, the first edge and the second edge are close to the edge of the display screen, and both a curve of the first edge and a curve of the second edge match a curve of the edge of the display screen; during the process of the first card moving in a first direction of the display screen, the form of the first card changes, such that both the curve of the first edge and the curve of the second edge always match the curve of the edge of the display screen; and the third edge of the first card moves in the first direction as the first card moves, and the length of the third edge changes, such that the length of the third edge does not exceed the display width of the display screen all the time. In this way, the form of the first card can adapt to the edge of the display screen, thereby reducing the phenomenon of incomplete display caused by the cutting of the card by the display screen.

Description

Interface display method and related device

[0001] The present application claims priority to the Chinese patent application No. 202410808022.4, filed on June 20, 2024, and entitled "Interface display method and related device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] Embodiments of the present application relate to the technical field of terminals, and in particular, to an interface display method and related device. BACKGROUND

[0003] A smart watch is a new type of wearable device, which has the advantages of being easy to carry, easy to use, and rich in functions. A user can view various types of content, such as time, application notification messages, weather, and exercise conditions, through a display screen in the smart watch. When there is a large amount of content, the display screen cannot display all the content at once. The user can control the display screen to slide and display related content through a sliding operation.

[0004] However, when the smart watch slides and displays related content, the related content may be cut off by the edge of the display screen, resulting in incomplete display. SUMMARY

[0005] The present application provides an interface display method and related device, which are applied to the technical field of terminals. It helps to reduce the phenomenon of incomplete card display.

[0006] In a first aspect, an interface display method is provided. The method includes: displaying a first card on a display screen, the first card including a first edge, a second edge, and a third edge, and the first edge and the second edge being close to the edge of the display screen, and the curve of the first edge and the curve of the second edge both matching the curve of the edge of the display screen; during movement of the first card in a first direction of the display screen, the first card changes in form, so that the curve of the first edge and the curve of the second edge always match the curve of the edge of the display screen; and the third edge of the first card moves in the first direction with the movement of the first card and changes in length, so that the length of the third edge always does not exceed the display width of the display screen.

[0007] In the embodiments of the present application, the display screen can be understood as the display area of a physical display screen, or as a display component, i.e., a virtual display space. Herein, no specific limitation is made.

[0008] The curve of the first edge and the curve of the second edge match the curve of the edge of the display screen, so that the first edge and the second edge adapt to the edge of the display screen; and the length of the third edge does not exceed the display length of the display screen. In this way, the first card can be a straight line or an arbitrary curve, which is not limited here. The first direction can correspond to the direction corresponding to the edge of the display screen farthest from the third edge.

[0009] For example, the first card can correspond to the card provided in the embodiments of the present application below. The first edge and the second edge can correspond to the left edge and the right edge below, respectively. The third edge can correspond to the lower edge below, and the first direction can correspond to the vertical upward direction.

[0010] In this way, the shape of the first card in the card can adapt to the edge of the display screen, reducing the phenomenon of incomplete display caused by the card being cut by the display screen.

[0011] In some embodiments, during the movement of the first card in the first direction, the size of the first card changes with the distance between the third edge and the edge of the display screen in the first direction.

[0012] In a possible implementation, the display screen is circular. In this way, it can be applied to a circular display screen, such as a circular display assembly, a circular display screen of a watch, etc. Here, no specific limitation is made.

[0013] In a possible implementation, the curve of the first edge and the curve of the second edge satisfy a preset similarity with the curve of the edge of the display screen.

[0014] In the embodiments of the present application, the preset similarity can be 90%, 95%, or any value, which is not limited here.

[0015] In this way, the change of the edge of the card can be realized by the similarity of the curve, so that the curve of the first edge and the curve of the second edge match the curve of the edge of the display screen.

[0016] In a possible implementation, the first edge and the second edge are both fitted between the edge of the display screen.

[0017] In this way, the first edge and the second edge of the card are fitted to the edge of the display screen, so that the size of the card is large, and the utilization rate of the display screen is improved. If the first edge and the second edge correspond to the left edge and the right edge below, the card can cover the display screen in the horizontal direction, and the size of the card is large, so that more content can be displayed.

[0018] In a possible implementation, the first edge and the third edge have a first corner therebetween, such that the first edge is smoothly connected with the third edge; the second edge and the third edge have a second corner therebetween, such that the second edge is smoothly connected with the third edge; during movement of the first card in a first direction to the display screen, the size of the first corner changes with the distance between the third edge and the edge of the display screen in the first direction, such that the first edge is always smoothly connected with the third edge; and the size of the second corner changes with the distance between the third edge and the edge of the display screen in the first direction, such that the second edge is always smoothly connected with the third edge.

[0019] In this way, the adjacent edges are connected through the corners, such that the connection of the adjacent edges is smooth, and the display effect of the card is improved. In some embodiments, the corner can be a rounded corner or any type of corner.

[0020] In a possible implementation, the first card further includes: first content; during movement of the first card in a first direction to the display screen, the first content changes with the size of the first card, such that the first content does not exceed the edge of the first card.

[0021] The first content can be any content, for example, message content, a message title, a time stamp, an application icon, text, etc. The first content can change in the manner shown in the following embodiments, for example, reduction, enlargement, opacity change, reduction of displayed content, or increase of displayed content, etc. The first content can also change in any other manner, which is not limited herein.

[0022] In this way, the content in the card can change with the size of the card, reducing the case that the content exceeds the edge of the card, and reducing the phenomenon of incomplete display caused by cutting of the content by the edge of the display screen.

[0023] In a possible implementation, in the case that the length of the third edge is less than the first length, the first content is not displayed.

[0024] In this way, in the case that the size of the card is small, the first content can not be displayed, reducing the phenomenon of incomplete display of the content, improving the display effect of the card in the interface, and improving the user experience.

[0025] In a possible implementation, the first card further includes a fourth edge, the fourth edge is oppositely arranged with the third edge; when the fourth edge moves to the edge of the display screen, the fourth edge disappears.

[0026] In this way, when any edge of the card slides to the edge of the display screen, the edge disappears to adapt to the edge of the display screen. For example, when the fourth edge slides to the edge of the display screen, the form of the card can correspond to Form A or Form C in the following.

[0027] In a possible implementation, the first card further includes: second content; during movement of the first card to the first direction of the display screen, the second content is not displayed when the length of the third edge is less than a second length, and the second length is less than the first length.

[0028] The second content can be any content, for example, an application identifier (for example, an application icon, an application name, and the like), a message quantity, and the like. The second content can also be changed in the manner shown in the following embodiments, for example, reduction, enlargement, opacity change, reduction of displayed content, or increase of displayed content, and the like. The first content can also be changed in any other manner, which is not limited herein.

[0029] In this way, when the size of the card is small, the second content can not be displayed, the phenomenon of incomplete content display can be reduced, the display effect of the card in the interface can be improved, and the user experience can be improved.

[0030] It can be understood that the content of the card can be divided into multiple parts, and with the change of the size of the card, a part of the multiple parts can be gradually displayed or not displayed in the card. The embodiments of the present application do not limit the change of the content of the card.

[0031] In a possible implementation, the first edge and the fourth edge have a third corner therebetween, so that the first edge is smoothly connected with the fourth edge; the second edge and the fourth edge have a fourth corner therebetween, so that the second edge is smoothly connected with the fourth edge; during movement of the first card to the first direction of the display screen, the size of the third corner changes with the distance between the fourth edge and the edge of the display screen in the first direction, so that the fourth edge is always smoothly connected with the first edge; and the size of the fourth corner changes with the distance between the fourth edge and the edge of the display screen in the first direction, so that the fourth edge is always smoothly connected with the second edge.

[0032] In this way, the adjacent edges are connected through the corners, so that the connection between the adjacent edges is smooth, and the display effect of the card is improved. In some embodiments, the corner can be a round corner or any type of corner.

[0033] In a possible implementation, during movement of the first card to the second direction of the display screen, the first card changes in form, so that the curve of the first edge and the curve of the second edge are always matched with the curve of the edge of the display screen; and the fourth edge of the first card moves to the second direction with the movement of the first card, and the length of the fourth edge changes, so that the length of the fourth edge always does not exceed the display width of the display screen.

[0034] The second direction can correspond to a direction corresponding to an edge pair of the display screen farthest from the fourth edge. When the first card slides in the second direction, the shape of the first card can adapt to the edge of the display screen, reducing the phenomenon of incomplete display caused by the card being cut by the display screen.

[0035] In a possible implementation, when the display screen displays the first card, the display screen also displays a second card, the second card includes a fifth edge, a sixth edge and a seventh edge, and the fifth edge and the sixth edge are close to the edge of the display screen, and the curve of the fifth edge and the curve of the sixth edge both match the curve of the edge of the display screen; during movement of the second card in the first direction of the display screen, the shape of the second card changes, so that the curve of the fifth edge and the curve of the sixth edge always match the curve of the edge of the display screen; and the seventh edge of the second card moves in the first direction with the movement of the second card, and the length of the seventh edge changes so that the length of the seventh edge always does not exceed the display width of the display screen.

[0036] In this way, multiple cards can be displayed at the same time, and the multiple cards can all adapt to the edge of the display screen, reducing the phenomenon of incomplete display caused by the card being cut by the display screen.

[0037] In a second aspect, an embodiment of the present application provides an interface display device, which can be an electronic device, or a chip or chip system in the electronic device. The interface display device can include a display unit and a processing unit. When the interface display device is an electronic device, the display unit can be a display screen. The display unit is configured to perform the display step, so that the electronic device implements an interface display method described in the first aspect or any possible implementation manner of the first aspect. When the interface display device is an electronic device, the processing unit can be a processor. The interface display device can further include a storage unit, which can be a memory. The storage unit is configured to store instructions, and the processing unit executes the instructions stored in the storage unit, so that the electronic device implements an interface display method described in the first aspect or any possible implementation manner of the first aspect. When the interface display device is a chip or chip system in the electronic device, the processing unit can be a processor. The processing unit executes the instructions stored in the storage unit, so that the electronic device implements an interface display method described in the first aspect or any possible implementation manner of the first aspect. The storage unit can be a storage unit (for example, a register, a cache, etc.) in the chip, or a storage unit (for example, a read-only memory, a random access memory, etc.) outside the chip in the electronic device.

[0038] For example, the display unit is configured to display a card, and the curve of a part of the edge of the card matches the curve of the edge of the display screen.

[0039] The processing unit is configured to control a change in a shape of the first card during movement of the first card in the first direction, so that the curve of the first edge and the curve of the second edge always match the curve of the edge of the display screen, and the third edge of the first card moves in the first direction along with the sliding, so that a length of the third edge does not exceed a display length of the display screen.

[0040] In a possible implementation, the display unit is configured to display a first card, the first card including a first edge, a second edge, and a third edge, and the first edge and the second edge being close to the edge of the display screen, and the curve of the first edge and the curve of the second edge both matching the curve of the edge of the display screen.

[0041] The processing unit is configured to control a change in a shape of the first card during movement of the first card in the first direction, so that the curve of the first edge and the curve of the second edge always match the curve of the edge of the display screen, and the third edge of the first card moves in the first direction along with the sliding, so that a length of the third edge does not exceed a display length of the display screen.

[0042] In some embodiments, during movement of the first card in the first direction towards the display screen, the processing unit is further configured to control a size of the first card to change with a distance between the third edge and the edge of the display screen in the first direction.

[0043] In a possible implementation, the processing unit is further configured to control the curve of the first edge and the curve of the second edge to satisfy a preset similarity with the curve of the edge of the display screen.

[0044] In a possible implementation, the first edge and the third edge have a first corner therebetween, so that the first edge is smoothly connected with the third edge; the second edge and the third edge have a second corner therebetween, so that the second edge is smoothly connected with the third edge; during movement of the first card in the first direction towards the display screen, the processing unit is further configured to control a size of the first corner to change with the distance between the third edge and the edge of the display screen in the first direction, so that the first edge is always smoothly connected with the third edge; and the processing unit is further configured to control a size of the second corner to change with the distance between the third edge and the edge of the display screen in the first direction, so that the second edge is always smoothly connected with the third edge.

[0045] In a possible implementation, during movement of the first card in the first direction towards the display screen, the processing unit is further configured to control the first content to change with the size of the first card, so that the first content does not exceed the edge of the first card.

[0046] In a possible implementation, in a case where the length of the third edge is less than the first length, the processing unit is further configured to control the display unit not to display the first content.

[0047] In a possible implementation, during the movement of the first card in the first direction of the display screen, when the length of the third edge is less than the second length, the processing unit is further configured to control the display unit to not display the second content, and the second length is less than the first length.

[0048] In a possible implementation, the first edge and the fourth edge have a third corner therebetween, such that the first edge is smoothly connected with the fourth edge; the second edge and the fourth edge have a fourth corner therebetween, such that the second edge is smoothly connected with the fourth edge; during the movement of the first card in the first direction of the display screen, the processing unit is further configured to control the size of the third corner to change with the distance between the fourth edge and the edge of the display screen in the first direction, such that the fourth edge is always smoothly connected with the first edge; and the processing unit is further configured to control the size of the fourth corner to change with the distance between the fourth edge and the edge of the display screen in the first direction, such that the fourth edge is always smoothly connected with the second edge.

[0049] In a possible implementation, during the movement of the first card in the second direction of the display screen, the processing unit is further configured to control the form of the first card to change, such that the curve of the first edge and the curve of the second edge are always matched with the curve of the edge of the display screen; and the processing unit is further configured to control the fourth edge of the first card to move in the second direction with the movement of the first card, and control the length of the fourth edge to change, such that the length of the fourth edge is always within the display width of the display screen.

[0050] In a possible implementation, when the display screen displays the first card, the display unit is further configured to display a second card on the display screen, the second card includes a fifth edge, a sixth edge and a seventh edge, and the fifth edge and the sixth edge are close to the edge of the display screen, and the curve of the fifth edge and the curve of the sixth edge are matched with the curve of the edge of the display screen; during the movement of the second card in the first direction of the display screen, the processing unit is further configured to control the form of the second card to change, such that the curve of the fifth edge and the curve of the sixth edge are always matched with the curve of the edge of the display screen; and the seventh edge of the second card moves in the first direction with the movement of the second card, and the length of the seventh edge changes, such that the length of the seventh edge is always within the display width of the display screen.

[0051] In a third aspect, an embodiment of the present application provides an electronic device, including a processor and a memory, the memory is configured to store code instructions, and the processor is configured to run the code instructions to execute the method described in the first aspect or any possible implementation of the first aspect.

[0052] In a fourth aspect, the embodiments of the present application provide a computer readable storage medium, which stores a computer program or instructions, and when the computer program or instructions are run on a computer, the computer is caused to execute the method described in the first aspect or any possible implementation manner of the first aspect.

[0053] In a fifth aspect, the embodiments of the present application provide a computer program product including a computer program, and when the computer program is run on a computer, the computer is caused to execute the method described in the first aspect or any possible implementation manner of the first aspect.

[0054] In a sixth aspect, the present application provides a chip or chip system, which includes at least one processor and a communication interface, the communication interface and the at least one processor are interconnected through a line, and the at least one processor is configured to run a computer program or instructions to execute the method described in the first aspect or any possible implementation manner of the first aspect. The communication interface in the chip can be an input / output interface, a pin or a circuit, etc.

[0055] In a possible implementation, the chip or chip system described in the present application further includes at least one memory, and the at least one memory stores instructions. The memory can be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (such as a read-only memory, a random access memory, etc.).

[0056] It should be understood that the second aspect to the sixth aspect of the present application correspond to the technical solution of the first aspect of the present application, and the beneficial effects obtained by each aspect and the corresponding possible implementation manner are similar, which will not be repeated. BRIEF DESCRIPTION OF DRAWINGS

[0057] FIG. 1 is a schematic diagram of an interface of a circular display screen in a possible design;

[0058] FIG. 2 is a schematic diagram of a card provided by the embodiments of the present application;

[0059] FIG. 3 is a schematic diagram of the structure of the card in each mode shown in FIG. 2 provided by the embodiments of the present application;

[0060] FIG. 4 is a schematic diagram of an interface of a display screen provided by the embodiments of the present application;

[0061] FIG. 5 is a schematic diagram of a card sliding from the center of a display screen to the edge of the display screen provided by the embodiments of the present application;

[0062] FIG. 6 is a schematic diagram of the structure of a region involved in the display of content in a card provided by the embodiments of the present application;

[0063] FIG. 7 is a schematic diagram of the layout of each content in a card provided by the embodiments of the present application;

[0064] FIG. 8 is a schematic diagram of content change of a card when the card is switched from form B to form A according to an embodiment of the present application;

[0065] FIG. 9 is a schematic diagram of content change of a card when the card disappears in form A according to an embodiment of the present application;

[0066] FIG. 10 is a schematic diagram of card change when a center of a display screen slides to an edge of the display screen according to an embodiment of the present application;

[0067] FIG. 11 is a schematic diagram of content change of a card when the card is switched from form B to form C according to an embodiment of the present application;

[0068] FIG. 12 is a schematic diagram of content change of a card when the card disappears in form C according to an embodiment of the present application;

[0069] FIG. 13 is a schematic diagram of card change in a sliding scenario according to an embodiment of the present application;

[0070] FIG. 14 is a schematic diagram of a structure of an interface display device according to an embodiment of the present application;

[0071] FIG. 15 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0072] In order to clearly describe the technical solutions of the embodiments of the present application, the following briefly introduces some terms and technologies involved in the embodiments of the present application:

[0073] 1. Electronic device

[0074] The electronic device of the embodiments of the present application can include a handheld device with image processing function, a vehicle-mounted device, etc. For example, some electronic devices are: a mobile phone, a tablet computer, a palm computer, a notebook computer, a mobile internet device (MID), a wearable device (e.g., a smart watch, smart glasses, a smart bracelet, or smart jewelry, etc.), a virtual reality (VR) device, an augmented reality (AR) device, a wireless terminal in industrial control, a wireless terminal in self driving, a wireless terminal in remote medical surgery, a wireless terminal in smart grid, a wireless terminal in transportation safety, a wireless terminal in smart city, a wireless terminal in smart home, a cellular phone, a cordless phone, a session initiation protocol (SIP) phone, a wireless local loop (WLL) station, a personal digital assistant (PDA), a handheld device with wireless communication function, a computing device or other processing device connected to a wireless modem, a vehicle-mounted device, a terminal device in an internet of things (IoT) system, a terminal device in a 5G network, or a terminal device in a future evolved public land mobile network (PLMN), etc. The embodiments of the present application are not limited thereto.

[0075] The electronic device in the embodiments of the present application can also be referred to as: a terminal device, a user equipment (UE), a mobile station (MS), a mobile terminal (MT), an access terminal, a subscriber unit, a subscriber station, a mobile station, a mobile terminal, a remote station, a remote terminal, a mobile device, a user terminal, a terminal, a wireless communication device, a user agent, or a user device, etc.

[0076] In the embodiments of the present application, the electronic device or each network device comprises a hardware layer, an operating system layer running above the hardware layer, and an application layer running on the operating system layer. The hardware layer comprises hardware such as a central processing unit (CPU), a memory management unit (MMU), and a memory (also referred to as main memory). The operating system can be any one or more computer operating systems that implement business processing through processes, such as a Linux operating system, a Unix operating system, an Android operating system, an iOS operating system, or a windows operating system. The application layer comprises applications such as a browser, an address book, word processing software, and instant messaging software.

[0077] 2. Other terms

[0078] In the embodiments of the present application, the terms "first", "second", and the like are used to distinguish items or objects that have substantially the same function and effect. For example, the first value and the second value are merely used to distinguish different values, and do not limit the order. Those skilled in the art can understand that the terms "first", "second", and the like do not limit the quantity and execution order, and the terms "first", "second", and the like do not necessarily mean different.

[0079] It should be noted that in the embodiments of the present application, the words "exemplarily" or "for example" are used to represent an example, illustration, or description. Any embodiment or design scheme described as "exemplarily" or "for example" in the present application should not be interpreted as more preferred or more advantageous than other embodiments or design schemes. Rather, the words "exemplarily" or "for example" are used to present the relevant concept in a specific manner.

[0080] In the embodiments of the present application, "at least one" means one or more, and "multiple" means two or more. The "and / or" describes the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the following three cases: A exists alone, A and B exist together, and B exists alone, where A and B can be singular or plural. The character "or" generally represents an "or" relationship between the associated objects. "At least one of the following" or similar expressions means any combination of these items, including any combination of single item or multiple items. For example, at least one of a, b, or c can represent a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple.

[0081] Electronic devices such as watches are provided with one or more applications. When the electronic devices such as watches receive a message of an application, the message can be displayed in a card form in a notification list interface.

[0082] In a possible design, the cards displayed on the display screen are all rectangular. However, when a rectangular card is displayed on a circular display screen or a circular display component, the card can be cut by the edge of the circular display screen, and the card can not be fully displayed. In addition, the rectangular card does not fully occupy the circular display screen, the screen utilization of the display screen is low, and the content displayed is less.

[0083] For example, FIG. 1 is a schematic diagram of an interface of a circular display screen in a possible design. It should be understood that the present application can also be applied to a non-circular display screen, but there is a circular display component, and other similar cases in which a rectangular card needs to be displayed. The circle in the present application can be a standard circle in a mathematical sense, or a non-perfect circle with an arc, such as an ellipse or other irregular circle.

[0084] As shown in FIG. 1, there are card 101, card 102, and card 103. The card 101, the card 102, and the card 103 are all rectangular, and the lengths in the horizontal direction are the same. As can be seen from FIG. 1, because the screen of the circular display screen is small, the card 101 is cut by the upper edge of the display screen, and the content is not fully displayed; the card 103 is cut by the lower edge of the display screen, and the content is not fully displayed. In addition, in the interface, there is still some space on both sides of the card 102, which is not used.

[0085] Therefore, embodiments of the present application provide an interface display method and related apparatus. The curve of part of the edge of the card matches the curve of the edge of the display screen, to adapt to the edge of the display screen and reduce the phenomenon of incomplete display caused by the card being cut by the display screen. In addition, the form of the card can change during the movement of the card, so that the curve of part of the edge of the card always matches the curve of the edge of the display screen.

[0086] For example, for a circular display screen or a circular display component, a card with multiple forms is provided. The curve of part of the edge of any form of the card matches the curve of the edge of the display screen. In this way, part of the edge of the card matches the edge of the display screen, reducing the visual problem of the edge of the circular display screen cutting the card. In addition, the card can switch between different forms according to the position of the card, so that the phenomenon of incomplete display caused by the card being cut by the circular display screen during the sliding process can be reduced.

[0087] For ease of understanding, different card forms provided by embodiments of the present application are described below with reference to FIG. 2.

[0088] For example, FIG. 2 is a schematic diagram of three card shapes provided by the embodiments of the present application. Taking the case that part of the edges of the card are attached to the edges of the display screen, the card can include shape A, shape B, and shape C.

[0089] As shown in a and d of FIG. 2, the card of shape A includes edge 11 and lower edge 12. The curvature of edge 11 is the same as the curvature of the upper edge of the display screen, and the lower edge 12 of card 201 is parallel to the horizontal direction of the display screen. In this way, the card can be attached to the edge of the display screen, reducing the visual problem of the edge of the circular display screen cutting the card.

[0090] As shown in b and e of FIG. 2, the card of shape B includes upper edge 21, lower edge 22, left edge 23, and right edge 24. The curvature of the left edge 22 is the same as the curvature of the upper edge of the display screen, and the right edge 24 of card 201 is parallel to the horizontal direction of the display screen. In this way, the card can be attached to the edge of the display screen, reducing the visual problem of the edge of the circular display screen cutting the card.

[0091] As shown in c and f of FIG. 2, the card of shape C includes upper edge 31 and edge 32. The upper edge 31 is parallel to the horizontal direction of the display screen. The curvature of edge 32 is the same as the curvature of the upper edge of the display screen. In this way, the card can be attached to the edge of the display screen, reducing the visual problem of the edge of the circular display screen cutting the card.

[0092] It should be understood that the embodiments shown in FIG. 2 are to achieve the matching of part of the edges of the card and the edges of the display screen by making the curvature of part of the edges of the card the same as the curvature of the edges of the display screen. The matching of part of the edges of the card and the edges of the display screen can also be achieved by other arbitrary ways, for example, the similarity of the curvature of part of the edges of the card and the edges of the display screen, etc. Herein, no specific limitation is made.

[0093] In the embodiments of the present application, the corners between adjacent edges of each card shape can be the corners formed by edge cutting (as shown in a to c of FIG. 2), or can be round corners with a certain curvature (as shown in d to f of FIG. 2), or other arbitrary types of corners. Herein, no specific limitation is made.

[0094] In some embodiments, when the corner is a round corner, the size of the round corner can be a fixed value, or it can be understood that the sizes of the round corners corresponding to each card can be the same. In this way, since the size of the round corner is constant, there is no need to calculate the size of the corner in the subsequent card sliding process, reducing the calculation amount of card display and being easy to implement.

[0095] In other embodiments, the size of the round corner can also be positively related to the size of the card. In this way, when the size of the round corner is positively related to the size of the card, the size of the round corner is more consistent with the size change of the card in the subsequent card sliding process, and the card displayed on the interface is more beautiful, and the display effect is good.

[0096] The above Figure 2 illustrates three forms of the card, and the size and form confirmation manner of the card is illustrated in combination with Figure 3.

[0097] In the embodiment, the electronic device can determine the size and form of the card through the area overlapping between the rectangular area and the display screen area. The display screen area corresponds to the display area of the display screen.

[0098] Specifically, when the upper edge of the rectangular area is located in the display screen area, the upper edge of the card is the upper edge of the rectangular area; when the upper edge of the rectangular area is not located in the display screen area, the upper edge of the card is the edge of the display screen area, and the card does not include the left edge and the right edge; when the lower edge of the rectangular area is located in the display screen area, the lower edge of the card is the lower edge of the rectangular area; when the lower edge of the rectangular area is not located in the display screen area, the lower edge of the card is the edge of the display screen area, and the card does not include the left edge and the right edge.

[0099] For example, Figure 3 is a structural schematic diagram of the card in each form shown in Figure 2 provided by the embodiment. As shown in Figure 3, the card can be determined through the rectangular area 301 and the display screen area 302.

[0100] As shown in a of Figure 3, when part of the lower edge of the rectangular area 301 is located in the display screen area 302, and all of the upper edge of the rectangular area 301 is not located in the display screen area 302, the rectangular area 301 and the display screen area 302 are superimposed, and the overlapping area 41 can be obtained. The edges of the card are all the same as the edges of the overlapping area 41, and the card is in Form A.

[0101] As shown in b of Figure 3, when part of the upper edge of the rectangular area 301 is located in the display screen area 302, and part of the lower edge of the rectangular area 301 is located in the display screen area 302, the rectangular area 301 and the display screen area 302 are superimposed, and the overlapping area 42 can be obtained. The edges of the card are all the same as the edges of the overlapping area 42, and the card is in Form B.

[0102] As shown in c of Figure 3, when part of the upper edge of the rectangular area 301 is located in the display screen area 302, and all of the lower edge of the rectangular area 301 is not located in the display screen area 302, the rectangular area 301 and the display screen area 302 are superimposed, and the overlapping area 43 can be obtained. The edges of the card are all the same as the edges of the overlapping area 43, and the card is in Form C.

[0103] As can be seen from FIG. 3, the size of the card is related to the size of the overlapping area, and the size of the overlapping area is related to both the size of the rectangular area and the relative position of the rectangular area and the display screen area. It can be understood that the closer the distance between the center of the rectangular area and the center of the display screen area, the larger the size of the overlapping area; the larger the size of the rectangular area, the larger the size of the overlapping area.

[0104] In some embodiments, the size of the rectangular area is fixed. The closer the distance between the center of the rectangular area and the center of the display screen area, the larger the size of the overlapping area, and the larger the size of the card.

[0105] In some embodiments, the size of the rectangular area is negatively related to the distance A. The distance A is the distance between the center of the rectangular area and the center of the display screen area. It can also be understood that the shorter the distance between the center of the rectangular area and the center of the display screen area, the greater the farthest distance between the upper edge and the lower edge of the overlapping area, and the larger the size of the card; in this way, more information can be displayed. The smaller the distance between the center of the rectangular area and the center of the display screen area, the smaller the farthest distance between the upper edge and the lower edge of the card, and the smaller the size of the card, so that the card fits the edge of the display screen and narrows, and more information can be displayed.

[0106] Alternatively, it can also be understood that the size of the card displayed in the interface is positively related to the distance B. The distance B is the minimum distance between the center of the rectangular area and the edge of the display screen in the vertical direction. It can also be understood that the shorter the distance between the center of the rectangular area and the center of the display screen area, the larger the size of the card; in this way, more information can be displayed. The longer the distance between the center of the rectangular area and the center of the display screen area, the smaller the size of the card, so that the card fits the edge of the display screen and narrows, and more information can be displayed.

[0107] In some embodiments, when the center of the rectangular area is located within the circular area 303, the size of the rectangular area is negatively related to the distance A. When the center of the rectangular area is not located within the circular area 303, the size of the rectangular area is fixed.

[0108] On the basis of the above-mentioned embodiments, the electronic device can also determine the shape of the corner of the card through the circular area located in the rectangular area. Specifically, the shape of the corner of the card is determined through the tangent point at which the circular area is tangent to the edge of the rectangular area, and the tangent point at which the circular area is tangent to the edge of the display screen area. It can also be understood that the line segment between the two tangent points forms the corner of the card.

[0109] As shown in FIG. 3, the interface can further include circular regions 304-307 in the rectangular region 301. The circular regions 304 and 305 are tangent to the upper edge of the rectangular region 301, and the circular regions 306 and 307 are tangent to the lower edge of the rectangular region 301. The circular regions 304-307 are also tangent to the display screen region 302.

[0110] In this way, the positions of the circular regions 304-307, the tangent points between the circular regions 307-314 and their corresponding rectangular regions, and the tangent points between the circular regions and the display screen region 302 can be determined by the edges of the rectangular region 301 and the edges of the display screen region 302, and the corners of the card can be determined.

[0111] It should be noted that in the card of Form A, since the upper edge of the rectangular region 301 does not coincide with the edge of the display screen region 302, the overlapping region 41 does not include the upper edge of the rectangular region 301, and thus the corners of the card 201 do not need to be determined by the circular regions 304 and 305.

[0112] In the card of Form B, since the lower edge of the rectangular region 301 does not coincide with the edge of the display screen region 302, the superimposed region 43 does not include the upper edge of the rectangular region 301, and thus the corners of the card 203 do not need to be determined by the circular regions 306 and 307.

[0113] In the embodiments of the present application, the radii of the circular regions 304-307 can be fixed or can be related to the positions of the circular regions.

[0114] In a possible implementation, the radii of the circular regions 304-307 are negatively related to the distance C. The distance C is the distance between the center of each circular region and the center of the display screen region 302. For example, when the distance between the center of the circular region 304 and the center of the display screen region 302 is greater, the radius of the circular region 304 is smaller. When the distance between the center of the circular region 304 and the center of the display screen region 302 is smaller, the radius of the circular region 304 is greater. In this way, the size of the corners can change with the positions of the circular regions, making the card more beautiful and improving the display effect of the card.

[0115] In a possible implementation, the radius of each of the circular regions 304 to 307 is positively correlated with the size of the rectangular region 301. For example, the radius of the circular region 304 is larger when the size of the rectangular region 301 is larger, and the radius of the circular region 304 is smaller when the size of the rectangular region 301 is smaller. In this way, the size of the corner can change with the size of the rectangular region, so that the card is more beautiful and the display effect of the card is improved.

[0116] In a possible implementation, the radius of the circular region 304 and the circular region 305 is negatively correlated with the distance D, which is the shortest distance between the upper edge of the rectangular region 301 and the center of the display screen region 302; and the radius of the circular region 304 and the circular region 305 is negatively correlated with the distance E, which is the shortest distance between the lower edge of the rectangular region 301 and the center of the display screen region 302.

[0117] In some embodiments, when the distance D is greater than or equal to the radius of the display screen region 302, the radius of the circular region 304 and the circular region 305 is zero. When the distance E is greater than or equal to the radius of the display screen region 302, the radius of the circular region 306 and the circular region 307 is zero. In this way, the situation that the circular region cannot be tangent to the display screen region 302 and the rectangular region 301 at the same time can be reduced, and the situation that the card is not a rounded corner can be reduced.

[0118] In this way, the size of the corner can change with the position of the upper edge or the lower edge of the rectangular region, so that the card is more beautiful and the display effect of the card is improved.

[0119] It should be understood that the embodiment shown in FIG. 3 is to implement the edge confirmation of the card and the size change of the card by superimposing the rectangular region 301 and the display screen region 302. The electronic device can also implement the edge confirmation of the card and the size change of the card by any other manner, for example, by calculating the edge of the card and the size of the card through the position of a certain edge (for example, the lower edge or the upper edge) of the card and the edge of the display screen region. The embodiment of the present application does not make specific limitation on the form of the card, the position confirmation of the card, and the like. Similarly, the confirmation manner of the corner between the adjacent edges in the card in the above embodiment is only an example, and the electronic device can also implement the confirmation of the corner by any other manner, which is not specifically limited here.

[0120] The forms and sizes of the card displayed on the interface are described above with reference to FIGS. 2 and 3. The application of the card in the interface will be described below in combination with a specific interface.

[0121] In the embodiment of the present application, the interface of the display screen can include any one, any two or all of the three forms of the card. The card can be applied to the interface displayed on the display screen, which can include one or more cards.

[0122] For example, FIG. 4 is a schematic diagram of an interface of a display provided by an embodiment of the present application. As shown in a of FIG. 4, the interface includes: a card 401, a card 402, and a card 403. The card 401 is in Form A, the card 402 is in Form B, and the card 403 is in Form C. As shown in b of FIG. 4, the interface includes: a card 404 and a card 405. The card 404 is in Form B, and the card 405 is in Form C. As shown in c of FIG. 4, the interface includes: a card 406. The card 406 is in Form B.

[0123] As can be seen from FIG. 4, the card can be used to display a notification message, so as to facilitate a user to understand the notification message. For example, the card 402 can display: an application identifier (for example, an application icon and / or an application name) 51, a message quantity submark 52, a message title 53, a message content 54, and a time stamp 55.

[0124] The card can also be used to display a plurality of application icons, so as to facilitate a user to open a corresponding application. For example, the card 404 includes: an icon of application A, an icon of application B, and an icon of application C.

[0125] The card can also be used to display specific content in an application. For example, the card 406 displays a heart rate change curve.

[0126] The interface shown in FIG. 4 is merely an example, and does not limit the display of the interface. In addition, the above interface is described by taking an example of including one card in Form B (for example, the interface includes one card 402), and the interface can also include two or more cards in Form B. The number of forms of the card, the number of cards, and the size of the card displayed in the interface are not limited in the embodiments of the present application.

[0127] It can be understood that the embodiments of the present application take three forms as an example, and can also include more or less forms, which are not limited herein.

[0128] It can be understood that, since the display screen of an electronic device such as a watch is small, the electronic device can not be able to display all the content at a time. A user can control the display screen to slide and display related content through a sliding operation. In the process of sliding, the position of the card displayed in the interface changes, and the form of the card and the content in the card can also change to adapt to the display of the display screen.

[0129] In the embodiments of the present application, when the card slides from the center of the display screen to the edge of the display screen, one or more of the following changes can be included: switching from Form B to Form A, switching from Form B to Form C, reducing the size of the card, disappearing part of the content in the card, and reducing part of the content in the card.

[0130] For example, FIG. 5 is a schematic diagram of a card sliding from the center of a display screen to the edge of the display screen according to an embodiment of the present application. For example, the card passes through a rectangular region 301, a display screen region 302, and circular regions 304-307, and the radii of the circular regions 304-307 are negatively related to the position of the edge of the rectangular region 301.

[0131] As shown in FIG. 5, when the card is located at the center O of the display screen region 302, the center of the rectangular region 301 is located at the point O, and the size of the rectangular region 301 is a preset size A. Because the distance D (the shortest distance between the upper edge of the rectangular region 301 and the center of the display screen region 302) and the distance E (the shortest distance between the lower edge of the rectangular region 301 and the center of the display screen region 302) are the same, the radii of the circular regions 304-307 are the same.

[0132] When the card moves from the point O to the point A, the size of the rectangular region 301 decreases with the increase of the distance B. Because the distance D increases, the radii of the circular regions 304 and 305 gradually decrease. Because the distance E first decreases and then increases, the radii of the circular regions 306 and 307 first increase or decrease. It can be understood that when the point O coincides with the lower edge of the rectangular region 301, the radii of the circular regions 306 and 307 are the largest.

[0133] When the card moves to the point A, the size of the rectangular region 301 is reduced to a preset size B.

[0134] In some embodiments, the electronic device can adjust the size of the rectangular region 301 by a scaling ratio, which is the ratio between the scaled size and the preset size. For example, when the scaling ratio corresponding to the preset size A is 100% and the scaling ratio corresponding to the preset size B is 80%, the scaling ratio of the rectangular region 301 during the movement from the point O to the point A can be represented as: wherein L1 is the distance between the point O and the point A, and L is the distance between the center of the rectangular region 301 and the point O.

[0135] It can be understood that the size of the rectangular region 301 is confirmed by taking the scaling ratio and the distance between the center of the rectangular region 301 and the point O as a linear relationship. The size of the rectangular region 301 can also be confirmed by other arbitrary ways, such as a nonlinear relationship, which is not limited herein.

[0136] In the embodiments of the present application, the ratio between the preset size B and the preset size A can be 0.8, 0.5, or any value, which is not limited herein.

[0137] When the card moves from point A to point B, the size of the rectangular region 301 is preset size B. Since distances D and E are both increasing, the radii of the circular regions 304 to 307 are gradually decreasing.

[0138] When the card moves to point B, the display screen region is tangent to the upper edge of the rectangular region 301, and the card is switched from form B to form A. Since distance D is equal to the radius of the display screen region 302, the radii of the circular regions 304 and 305 are both 0, and there are no circular regions 304 and 305.

[0139] When the card moves from point B to point C, the overlapping area of the rectangular region 301 and the display screen region 302 decreases, and the size of the card decreases. Since distances E are both increasing, the radii of the circular regions 306 and 307 are gradually decreasing.

[0140] When the card moves to point C, the display screen region is tangent to the lower edge of the rectangular region 301, and the card disappears.

[0141] In this way, the card can adjust the form and the corner size according to the change in position to adapt to the display screen, and reduce the situation that the card is cut by the display screen and is not fully displayed.

[0142] It should be understood that the embodiments of the present application are only examples for the change in the size of the rectangular region, and the card can end the change in the size of the rectangular region 301 when moving to point A, or end the change in the size of the rectangular region 301 when moving to point B, or end the change in the size of the rectangular region 301 when moving to any position, which is not limited specifically herein.

[0143] In some embodiments, the electronic device can adjust the radii of the circular regions 304 to 307 by scaling the proportion. For example, taking the circular regions 304 and 305 as an example, if the O point coincides with the upper edge of the rectangular region 301, the radius of the circular region 306 is radius A, and the corresponding scaling proportion can be 100%. When the lower edge of the rectangular region 301 moves from the O point to the edge of the display screen region 302, the scaling proportion of the circular region 304 can be represented as: where L2 is the farthest distance between the center of the display screen region 302 and the edge of the display screen region 302 in the vertical direction (for example, the radius of the display screen region 302), and L304 is the distance between the lower edge of the rectangular region 301 and the O point.

[0144] If the O point coincides with the lower edge of the rectangular region 301, the radius of the circular region 306 is radius A, and the corresponding scaling proportion can be 100%. When the lower edge of the rectangular region 301 moves from the O point to the edge of the display screen region 302, the scaling proportion of the circular region 306 can be represented as: Wherein, L2 is the farthest distance between the center of the display screen area 302 and the edge of the display screen area 302 in the vertical direction (for example, the radius of the display screen area 302), and L306 is the distance between the lower edge of the rectangular area 301 and the O point.

[0145] It can be understood that the above embodiment takes the display screen area as a circle as an example, and the display screen area can also be an ellipse or other shapes, which are not limited here.

[0146] The above Figure 5 illustrates the shape of the card and the change of the corner of the card, and the following Figure 6 to Figure 9 illustrate the content change in the card.

[0147] In the embodiment of the application, in the process that the card moves from the center of the display screen area to the edge of the display screen area, the content of the card can include the following changes: part of the content is reduced, part of the content is reduced in opacity until disappearing, etc.

[0148] For the convenience of understanding, the following illustrates the reduction of the content in the card and the adjustment of the opacity of the content.

[0149] In the embodiment of the application, the reduction or enlargement of the content can be realized by the reduction or enlargement of the content area; and the adjustment of the opacity of the content can be realized by the adjustment of the opacity of the mask area.

[0150] For example, Figure 6 is a structure schematic diagram of the area related to the content display provided by the embodiment of the application. As shown in Figure 6, the card includes a content area 601 and a mask area 602.

[0151] The content area 601 is used to place the content of the card, and control the size of the content of the card, for example, text, pictures, etc. Specifically, the reduction or enlargement of the corresponding content in the card is realized by adjusting the size of the content area 601. When the content area 601 is reduced, the content in the content area 601 is correspondingly reduced; when the content area 601 is enlarged, the content in the content area 601 is correspondingly enlarged.

[0152] The mask area 602 is used to adjust whether the content of the card in the content area 601 is visible. It can be understood that when the corresponding opacity of the mask area 602 is 100%, the content in the area A is visible. When the corresponding opacity of the mask area 602 is 0%, the content in the area A is invisible. The area A is the overlapping area of the mask area and the content area.

[0153] It can be understood that since the content area 601 and the mask area 602 are used to display the content of the card, the position of the content area 601 and the position of the mask area 602 can be determined by the position of the rectangular area 301.

[0154] In a possible implementation, the position of the content region 601 and the position of the mask region 602 can be determined by the upper edge of the rectangular region 301.

[0155] For example, the distance between the upper edge of each rectangular region in the positions of the content region 601 and the mask region 602 and the upper edge of the card can be a fixed value. In this way, the positions of the content region 601 and the mask region 602 are easy to calculate, and the calculation amount is small and easy to implement.

[0156] For example, the distance between the upper edge of the content region 601 and the upper edge of the card can be a fixed value A, and the distance between the upper edge of the mask region 602 and the upper edge of the card can be a fixed value B. In this way, when the rectangular region 301 moves, the content region 601 and the mask region 602 can move with the rectangular region 301, and the movement of the content in the card is achieved.

[0157] In a possible implementation, the position of the content region 601 and the position of the mask region 602 can be determined by the position of the center of the rectangular region 301.

[0158] In some embodiments, the position of the center of the content region 601 is positively correlated with the distance A, and the upper edge of the mask region 602 coincides with the upper edge of the content region 601. The distance A is the distance between the center of the rectangular region 301 and the center of the display screen region 302.

[0159] In this way, when the rectangular region 301 moves, the content region 601 and the mask region 602 can move with the rectangular region 301, and the movement of the content in the card is achieved. In addition, the upper edge of the mask region 602 coincides with the upper edge of the content region 601, and the display of the content region 601 is also achieved.

[0160] It can be understood that the corresponding relationship between the position of the center of the content region 601 and the distance A is related to the size of the content region 601, the size of the mask region 602, and the like. The corresponding relationship is related to the arrangement of the content in the card, and the like, which is not limited here.

[0161] In some embodiments, the corresponding relationship between the position of the center of the content region 601 and the distance A can be such that the center of the region A coincides with the center of the rectangular region 301. In this way, the centered display of the content of the card is achieved, and the display effect of the card is improved.

[0162] In some other embodiments, the center of the content region 601 is located at the same position as the center of the rectangular region 301, and the center of the mask region 602 is located at the same position as the center of the rectangular region 301. In this way, when the rectangular region 301 moves, the content region 601 and the mask region 602 can move along with the rectangular region 301, so as to realize the movement of the content in the card. In addition, the content in the card can also be displayed in the center, so that the card looks more beautiful.

[0163] In a third possible implementation, the center of the region A coincides with the center of the rectangular region 301. The region A is a region where the content region 601 coincides with the mask region 602. In this way, the content in the card can be displayed in the center, so as to improve the display effect of the card.

[0164] The position confirmation of the content region 601 and the mask region 602 described above is only an example, and can also be confirmed by any other manner, which is not limited here.

[0165] In the embodiments of the present application, the content region 601 can be larger than the rectangular region 301, or can be the rectangular region 301, or can also be obtained according to the rectangular region 301 and the display screen region 302, which is not limited here. The mask region 602 can be larger than the content region 601 or can be smaller than the content region 601. The position, size, etc. of the content region 601 and the mask region 602 are not limited in the embodiments of the present application.

[0166] The above embodiments describe the zoom-in or zoom-out of the content and the adjustment of the opacity, and the change of the content in the card during the movement of the card will be described below in combination with a specific card.

[0167] It can be understood that one or more contents can be displayed in the card, and when multiple contents are displayed, the change modes of the multiple contents can be different. Therefore, when multiple contents are displayed in the card, the content region 601 can be divided into multiple regions, and the mask region 602 can be divided into multiple regions, so as to realize the display change of different contents.

[0168] For example, FIG. 7 is a schematic diagram of the layout of each content in a card provided by the embodiments of the present application. As shown in FIG. 7, taking the content of the card as an example, which includes an application identifier 51, a message number subheading 52, a message title 53, a message content 54, and a time stamp 55, the content region 601 can include a rectangular region 61, a rectangular region 62, a rectangular region 63, and a rectangular region 64. The mask region 602 can include a mask region corresponding to the rectangular region 61, a mask region corresponding to the rectangular region 62, a mask region corresponding to the rectangular region 63, and a mask region corresponding to the rectangular region 64. (Not shown in the figure)

[0169] The rectangular region 61 is used to display the application identifier 51 and / or the message quantity subscript 52; the rectangular region 62 is used to display the message title 53; the rectangular region 63 is used to display the message content 54; and the rectangular region 64 is used to display the time stamp 55.

[0170] It can be understood that the electronic device can change the content by controlling the size of each of the rectangular regions 61 to 64 and the size and opacity of the corresponding mask region.

[0171] The content change of the card when the card is switched from the form B to the form A and the content change of the card when the card disappears in the form A will be described below in combination with FIG. 8 and FIG. 9.

[0172] For example, FIG. 8 is a schematic diagram of the content change of the card when the card is switched from the form B to the form A. When the card is located at point O, the size of each of the rectangular regions 61 to 64 is the same as that of the corresponding mask region, and the position is the same. For example, the size adjustment of the rectangular region is achieved by adjusting the zoom ratio.

[0173] As shown in FIG. 8, when the card is located at point O, the zoom ratio of each of the rectangular regions 61 to 64 is 100%, and the opacity of the mask region corresponding to each of the rectangular regions 61 to 64 is 100%. At this time, the card displays the application identifier 51, the message quantity subscript 52, the message title 53, the message content 54, and the time stamp 55.

[0174] When the card moves from point O to point D, the zoom ratio of the rectangular regions 62 and 63 decreases, the zoom ratio of the rectangular region 64 remains unchanged, and the opacity of the mask region corresponding to the rectangular region 63 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 is 100% and remains unchanged.

[0175] It can be understood that when the card moves from point O to point D, the size of the card decreases, and the size of the message title and the message content is adapted to decrease, thereby reducing the phenomenon that the card is not fully displayed. In addition, the opacity of the message title and the message content decreases, and the brightness decreases.

[0176] It should be noted that when the opacity is 100%, the content in the rectangular region 61 can be displayed and is visible to the user; and when the opacity is 0%, the rectangular region 61 cannot be displayed and is invisible to the user.

[0177] When the card moves to the D point, the length of the rectangular area 64 corresponding to the mask area in the vertical direction starts to decrease. The scaling ratio of the rectangular area 62 and the rectangular area 63 gradually decreases, and the opacity of the mask area corresponding to the rectangular area 61 gradually decreases. The opacity of the mask area corresponding to the rectangular area 61 gradually decreases. The opacity of the mask area corresponding to the rectangular area 61 is 100% and does not change. At this time, the card displays the application identifier 51, the message quantity subscript 52, the message title 53, the message content 54, and the time stamp 55.

[0178] When the card moves from the D point to the E point, the rectangular area 62 gradually increases, the length of the rectangular area 64 in the vertical direction gradually decreases, and the opacity of the mask area corresponding to the rectangular area 64 starts to decrease.

[0179] It can be understood that when the card moves from the D point to the E point, the size of the card decreases, the size of the message title and the message content adapts to the decrease, and part of the content in the message content is not displayed, reducing the case that the message content exceeds the range of the card.

[0180] When the card moves to the E point, the length of the rectangular area 64 corresponding to the mask area in the vertical direction is 0 and the opacity is 0, which can also be understood as that the rectangular area 64 is not displayed and invisible. At this time, the card displays the application identifier 51, the message quantity subscript 52, the message title 53, and the message content 54.

[0181] In some embodiments, the electronic device can adjust the size of the rectangular area 64 by a scaling ratio, which is the ratio between the scaled size and the preset size. For example, the scaling ratio of the rectangular area 64 corresponding to the mask area at the D point is 100%, and the scaling ratio of the rectangular area 64 corresponding to the mask area at the E point is 0. During the movement of the rectangular area 64 from the D point to the E point, the scaling ratio of the mask area corresponding to the rectangular area 64 in the vertical direction can be represented as: wherein L2 is the distance between the D point and the E point, and L64 is the distance between the center of the rectangular area 64 and the D point.

[0182] For example, the opacity of the mask area corresponding to the rectangular area 64 at the D point is 100%, and the opacity of the mask area corresponding to the rectangular area 64 at the E point is 0. During the movement of the rectangular area 64 from the D point to the E point, the opacity of the mask area corresponding to the rectangular area 64 can be represented as: wherein L2 is the distance between the D point and the E point, and L64 is the distance between the center of the rectangular area 64 and the D point.

[0183] When the card moves from the point E to the point F, the size of the rectangular region 62 and the rectangular region 63 gradually decreases, and the opacity of the corresponding mask region of the rectangular region 63 gradually decreases. The opacity of the corresponding mask region of the message quantity subscript 52 in the rectangular region 61 gradually decreases. The opacity of the corresponding mask region of the application identifier in the rectangular region 61 is 100% and does not change.

[0184] It can be understood that when the card moves from the point E to the point F, the size of the card decreases, and the sizes of the message title and the message content adapt to the decrease, and part of the message content is not displayed, reducing the case that the message content exceeds the range of the card.

[0185] When the card moves to the point F, the length of the rectangular region 63 in the vertical direction decreases to 0, and the opacity of the corresponding mask region of the rectangular region 63 decreases to 0. At this time, the card displays the application identifier 51, the message quantity subscript 52, and the message title 53.

[0186] In some embodiments, the electronic device can adjust the size of the rectangular region 63 by a scaling ratio, which is a ratio between the scaled size and the preset size. For example, the scaling ratio of the rectangular region 63 in the horizontal direction corresponding to the point O is 100%, the scaling ratio of the rectangular region 63 in the horizontal direction corresponding to the point F is 80%, and the scaling ratio of the rectangular region 63 in the vertical direction corresponding to the point F is 0. During the period from the point O to the point F, the scaling ratio of the rectangular region 63 in the horizontal direction can be represented as: The scaling ratio of the rectangular region 63 in the vertical direction can be represented as: wherein L3 is the distance between the point O and the point F, and L63 is the distance between the center of the rectangular region 63 and the point O.

[0187] When the card moves from the point F to the point G, the rectangular region 62 gradually increases. The opacity of the corresponding mask region of the message quantity subscript 52 in the rectangular region 61 gradually decreases. The opacity of the corresponding mask region of the application identifier in the rectangular region 61 is 100% and does not change.

[0188] It can be understood that when the card moves from the point F to the point G, the size of the card decreases, and the message quantity subscript 52 gradually disappears, reducing the case that the message quantity subscript 52 is displayed beyond the card and is truncated by the display screen.

[0189] When the card moves to the point G, the opacity of the corresponding mask region of the message quantity subscript 52 in the rectangular region 61 decreases to 0, and the message quantity subscript 52 is not displayed. In addition, the opacity of the corresponding mask region of the rectangular region 62 begins to decrease. At this time, the card displays the application identifier 51 and the message title 53.

[0190] For example, the opacity of the mask region corresponding to the rectangular region 61 is 100% at the point O and 0 at the point G. During the movement of the rectangular region 61 from the point O to the point G, the opacity of the rectangular region 61 can be represented as: where L4 is the distance between the point O and the point G, and L61 is the distance between the center of the rectangular region 61 and the point O.

[0191] When the card moves from the point G to the point H, the opacity of the mask region corresponding to the rectangular region 62 gradually decreases.

[0192] It can be understood that when the card moves from the point G to the point H, the size of the card decreases, and the application logo gradually disappears, reducing the situation that the application logo is displayed beyond the card and is truncated by the display screen.

[0193] For example, the opacity of the mask region corresponding to the rectangular region 62 is 100% at the point G and 0 at the point H. During the movement of the rectangular region 62 from the point G to the point H, the opacity of the mask region corresponding to the rectangular region 62 can be represented as: where L5 is the distance between the point G and the point H, and L62 is the distance between the center of the rectangular region 62 and the point G.

[0194] When the card moves to the point H, the opacity of the rectangular region 62 decreases to 0, and the message title is not displayed. At this time, the card displays the application logo 51.

[0195] When the card moves from the point H to the point B, the card gradually shrinks; when the card moves to the point B, it is switched to the form A.

[0196] It can be understood that during the upward sliding of the card, the time stamp in the rectangular region 64 gradually decreases, and the opacity gradually decreases and disappears when the card moves to the point E. The message content in the rectangular region 63 gradually decreases in the horizontal direction to reduce the situation of exceeding the edge of the display screen; the message content in the rectangular region 63 gradually decreases in the vertical direction and the opacity gradually decreases and disappears when the card moves to the point F. The message title in the rectangular region 62 gradually increases, and the opacity gradually decreases from the point G until it disappears at the point H. The message number subscript in the rectangular region 61 gradually decreases and disappears at the point G. The application logo in the rectangular region 61 is continuously displayed.

[0197] In summary, the closer the card is to the center of the display screen, the more content the card displays; the farther the card is from the center of the display screen, the less content the card displays. The card can change the content displayed on the card to adapt to the edge of the display screen, reducing the situation that the content of the card is cut off by the display screen.

[0198] It should be understood that the starting position and ending position of the various changes of the rectangular region 61 to the rectangular region 64 and the corresponding mask region are only examples, and the size change of the rectangular region 61 to the rectangular region 64 and the corresponding mask region can also start when the card moves to other arbitrary positions, which is not specifically limited here. In addition, the various changes of the rectangular region 61 to the rectangular region 64 and the corresponding mask region, such as scaling, opacity adjustment, etc., are only examples, and the change of the card content can also be realized by other arbitrary ways, which is not specifically limited here.

[0199] For example, FIG. 9 is a schematic diagram of content change in a card in a form A disappearing according to an embodiment of the present application. As shown in FIG. 8,

[0200] When the card is at the B point, the opacity of the mask region corresponding to the application identifier in the rectangular region 61 is 100%. At this time, the card displays the application identifier 51.

[0201] When the card moves from the B point to the I point, the opacity of the mask region corresponding to the application identifier in the rectangular region 61 is 100%. At this time, the card displays the application identifier 51.

[0202] When the card moves from the I point to the T point, the opacity of the mask region corresponding to the application identifier in the rectangular region 61 starts to decrease.

[0203] When the card moves to the T point, the opacity of the mask region corresponding to the application identifier in the rectangular region 61 decreases to 0. At this time, the card does not display the application identifier 51.

[0204] When the card moves from the T point to the C point, the size of the card decreases. At this time, the card does not display the application identifier 51.

[0205] When the card moves to the C point, the display screen does not display the card.

[0206] In this way, the opacity of the mask region corresponding to the application identifier in the rectangular region 61 gradually decreases from the I point, and decreases to 0 and disappears and is not visible at the A point.

[0207] The content change in the card shown in FIG. 9 is only an example, and the content in the card can also have more or less changes, which is not specifically limited here.

[0208] The above embodiments of FIGS. 5 to 9 are described in the process of sliding from the center of the display screen upwards, and the following FIGS. 10 to 12 are described in the process of sliding from the center of the display screen downwards.

[0209] For example, FIG. 10 is a schematic diagram of a card sliding from the center of a display screen to the edge of the display screen according to an embodiment of the present application. The card passes through a rectangular region 301, a display screen region 302, and circular regions 304-307. For example, the radii of the circular regions 304-307 are inversely proportional to the position of the edge of the rectangular region 301.

[0210] As shown in FIG. 10, when the card is at the center O of the display screen region, the center of the rectangular region 301 is at the point O, and the size of the rectangular region 301 is a preset size A. Because the distance D (the shortest distance between the upper edge of the rectangular region 301 and the center of the display screen region 302) and the distance E (the shortest distance between the lower edge of the rectangular region 301 and the center of the display screen region 302) are the same, the radii of the circular regions 304-307 are the same.

[0211] When the card moves from the point O to the point J, the size of the rectangular region 301 decreases with the increase of the distance B. Because the distance D decreases first and then increases, the radii of the circular regions 304 and 305 first increase or decrease. It can be understood that when the point O coincides with the upper edge of the rectangular region 301, the radii of the circular regions 304 and 305 are the largest. Because the distance E increases, the radii of the circular regions 306 and 307 gradually decrease.

[0212] When the card moves to the point J, the size of the rectangular region 301 is reduced to a preset size B.

[0213] In some embodiments, the electronic device can adjust the size of the rectangular region 301 by a scaling ratio, which is the ratio between the scaled size and the preset size. For example, when the preset size A corresponds to a scaling ratio of 100% and the preset size B corresponds to a scaling ratio of 80%, the scaling ratio of the rectangular region 301 during the movement from the point O to the point J can be represented as: where L6 is the distance between the point O and the point J, and L is the distance between the center of the rectangular region 301 and the point O.

[0214] It can be understood that the size of the rectangular region 301 is confirmed by taking the scaling ratio and the distance between the center of the rectangular region 301 and the point O as a linear relationship. The size of the rectangular region 301 can also be confirmed by other arbitrary ways, such as a nonlinear relationship, which is not limited herein.

[0215] In the embodiments of the present application, the ratio between the preset size B and the preset size A can be 0.8, 0.5, or any value, which is not limited herein.

[0216] When the card moves from J to K, the size of the rectangular region 301 is preset size B. Since both distance D and distance E increase, the radius of the circular region 304 to the circular region 307 gradually decreases. When the card moves to K, the display region is tangent to the upper edge of the rectangular region 301, and the card is switched from shape B to shape C. Since distance E is equal to the radius of the display region 302, the radius of the circular region 304 and the circular region 305 is 0, and there is no circular region 304 and the circular region 305.

[0217] When the card moves from K to L, the overlapping area of the rectangular region 301 and the display region 302 decreases, and the size of the card decreases.

[0218] When the card moves to L, the display region is tangent to the lower edge of the rectangular region 301, and the card disappears.

[0219] In this way, the card can adjust the shape and the corner size according to the position change to adapt to the display screen, and reduce the situation that the card is cut by the display screen and not fully displayed.

[0220] The above FIG. 10 illustrates the shape of the card and the change of the corner of the card, and the following FIG. 11 and FIG. 12 illustrate the content change in the card.

[0221] In the embodiment of the present application, during the process that the card moves from the center of the display region to the edge of the display region, the content of the card can include the following changes: part of the content is reduced, part of the content is reduced in opacity until disappearing, etc.

[0222] It can be understood that the reduction of the content and the adjustment mode of the opacity of the content can refer to the corresponding description of the above FIG. 6, which will not be described here. For example, FIG. 11 is a schematic diagram of content change of the card when the card is switched from shape B to shape A according to an embodiment of the present application. Taking the example that the size of the rectangular region is adjusted by adjusting the scaling ratio when the card is located at O, the size of the rectangular region 61 to the rectangular region 64 is the same as the size of the corresponding mask region, and the position is the same.

[0223] As shown in FIG. 11, when the card is located at O, the scaling ratio of the rectangular region 61 to the rectangular region 64 is 100%, and the opacity of the mask region corresponding to the rectangular region 61 to the rectangular region 64 is 100%. At this time, the card displays the application icon 51, the message number subtext 52, the message title 53, the message content 54 and the time stamp 55.

[0224] When the card moves from the O point to the M point, the scaling ratio of the rectangular region 62 and the rectangular region 63 correspondingly decreases, the scaling ratio of the rectangular region 64 does not change, and the opacity of the mask region corresponding to the rectangular region 63 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 is 100% and does not change.

[0225] It can be understood that when the card moves from the O point to the M point, the size of the card decreases, and the sizes of the message title and the message content adaptively decrease, reducing the phenomenon of incomplete display of the card. In addition, the opacities of the message title and the message content decrease, and the brightness decreases.

[0226] It should be noted that when the opacity is 100%, the content in the rectangular region 61 can be displayed and is visible to the user; and when the opacity is 0%, the rectangular region 61 cannot be displayed and is invisible to the user.

[0227] When the card moves to the M point, the length of the mask region corresponding to the rectangular region 64 in the vertical direction starts to decrease. The scaling ratios of the rectangular region 62 and the rectangular region 63 both gradually decrease, and the opacity of the mask region corresponding to the rectangular region 61 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 gradually decreases. The opacity of the mask region corresponding to the rectangular region 61 is 100% and does not change. At this time, the card displays the application identifier 51, the message quantity subscript 52, the message title 53, the message content 54, and the timestamp 55.

[0228] When the card moves from the M point to the N point, the rectangular region 62 gradually increases, the length of the rectangular region 64 in the vertical direction gradually decreases, and the opacity of the mask region corresponding to the rectangular region 64 starts to decrease.

[0229] It can be understood that when the card moves from the M point to the N point, the size of the card decreases, the sizes of the message title and the message content adaptively decrease, and part of the content in the message content is not displayed, reducing the case that the message content exceeds the range of the card.

[0230] When the card moves to the N point, the length of the mask region corresponding to the rectangular region 64 in the vertical direction is 0 and the opacity is 0, which can also be understood as that the rectangular region 64 is not displayed and is invisible. At this time, the card displays the application identifier 51, the message quantity subscript 52, the message title 53, and the message content 54.

[0231] In some embodiments, the electronic device can adjust the size of the rectangular region 64 by a scaling ratio, which is a ratio between the scaled size and the preset size. For example, when the scaling ratio of the rectangular region 64 corresponding to the M point is 100%, and the scaling ratio of the rectangular region 64 corresponding to the N point is 0, the scaling ratio of the rectangular region 64 corresponding to the opacity of the mask region in the vertical direction during the movement of the rectangular region 64 from the M point to the N point can be represented as: where L6 is the distance between the M point and the N point, and L64 is the distance between the center of the rectangular region 64 and the M point.

[0232] For example, when the opacity of the rectangular region 64 corresponding to the M point is 100%, and the opacity of the rectangular region 64 corresponding to the N point is 0, the opacity of the rectangular region 64 corresponding to the mask region during the movement of the rectangular region 64 from the M point to the N point can be represented as: where L6 is the distance between the M point and the N point, and L64 is the distance between the center of the rectangular region 64 and the M point.

[0233] When the card moves from the N point to the P point, the rectangular region 62 gradually increases, the size of the rectangular region 63 gradually decreases, and the opacity of the mask region corresponding to the rectangular region 63 gradually decreases. The opacity of the mask region corresponding to the message number subscript 52 in the rectangular region 61 gradually decreases. The opacity of the mask region corresponding to the application identifier in the rectangular region 61 is 100% and does not change.

[0234] It can be understood that when the card moves from the N point to the P point, the size of the card decreases, the sizes of the message title and the message content adapt to the decrease, and part of the content in the message content is not displayed, reducing the case that the message content exceeds the range of the card.

[0235] When the card moves to the P point, the length of the rectangular region 63 in the vertical direction is reduced to 0, and the opacity of the mask region corresponding to the rectangular region 63 is reduced to 0. At this time, the card displays the application identifier 51, the message number subscript 52, and the message title 53.

[0236] In some embodiments, the electronic device can adjust the size of the rectangular region 63 by a scaling ratio, which is a ratio between the scaled size and the preset size. For example, when the scaling ratio of the rectangular region 63 corresponding to the O point is 100%, and the scaling ratio of the rectangular region 63 corresponding to the P point is 80% in the horizontal direction and 0 in the vertical direction, the scaling ratio of the rectangular region 63 in the horizontal direction during the movement of the rectangular region 63 from the O point to the P point can be represented as: The scaling ratio of the rectangular region 63 in the vertical direction can be represented as: wherein L7 is the distance between the point O and the point P, and L63 is the distance between the center of the rectangular region 63 and the point O.

[0237] When the card moves from the point P to the point Q, the rectangular region 62 gradually increases. The opacity of the corresponding mask region of the message quantity badge 52 in the rectangular region 61 gradually decreases. The opacity of the corresponding mask region of the application identifier in the rectangular region 61 is 100% and does not change.

[0238] It can be understood that when the card moves from the point P to the point Q, the size of the card decreases, and the message quantity badge 52 gradually disappears, reducing the case that the message quantity badge 52 is displayed beyond the card and is truncated by the display screen.

[0239] When the card moves to the point Q, the opacity of the corresponding mask region of the message quantity badge 52 in the rectangular region 61 decreases to 0, and the message quantity badge 52 is not displayed. In addition, the opacity of the corresponding mask region of the rectangular region 62 begins to decrease. At this time, the card displays the application identifier 51 and the message title 53.

[0240] For example, the opacity of the corresponding mask region of the rectangular region 61 at the point O is 100%, and the opacity of the corresponding mask region of the rectangular region 61 at the point Q is 0. During the period from the point O to the point Q, the opacity of the rectangular region 61 can be represented as: wherein L8 is the distance between the point O and the point Q, and L61 is the distance between the center of the rectangular region 61 and the point O.

[0241] When the card moves from the point Q to the point R, the opacity of the corresponding mask region of the rectangular region 62 gradually decreases.

[0242] For example, the opacity of the corresponding mask region of the rectangular region 62 at the point Q is 100%, and the opacity of the corresponding mask region of the rectangular region 62 at the point R is 0. During the period from the point Q to the point R, the opacity of the corresponding mask region of the rectangular region 62 can be represented as: wherein L9 is the distance between the point Q and the point R, and L62 is the distance between the center of the rectangular region 62 and the point Q.

[0243] It can be understood that when the card moves from the point Q to the point R, the size of the card decreases, and the application identifier gradually disappears, reducing the case that the application identifier is displayed beyond the card and is truncated by the display screen.

[0244] When the card moves to the point R, the opacity of the rectangular region 62 decreases to 0, and the message title is not displayed. At this time, the card displays the application identifier 51.

[0245] When the card moves from R point to K point, the card gradually shrinks; when the card moves to K point, it is switched to mode C.

[0246] It can be understood that, in the process of sliding upwards, the time stamp in the rectangular area 64 gradually decreases and the opacity gradually decreases, and disappears when the card moves to N point. The message content in the rectangular area 63 gradually shrinks in the horizontal direction to reduce the case of exceeding the edge of the display screen; the message content in the rectangular area 63 gradually shrinks in the vertical direction and the opacity gradually decreases, and disappears when the card moves to P point. The message title in the rectangular area 62 gradually increases, and the opacity gradually decreases from Q point until it disappears at R point. The application identifier in the rectangular area 61 gradually decreases in opacity and disappears at Q point. The application identifier in the rectangular area 61 is continuously displayed.

[0247] In summary, the closer the card is to the center of the display screen, the more content the card displays; the farther the card is from the center of the display screen, the less content the card displays. The card can change the content displayed on the card to adapt to the edge of the display screen as the position changes, reducing the case of incomplete content display caused by the cutting of the card by the display screen.

[0248] For example, FIG. 12 is a schematic diagram of content changes in a card according to an embodiment of the present application when the card disappears in mode C. As shown in FIG. 8,

[0249] When the card is at K point, the opacity of the corresponding mask area of the application identifier in the rectangular area 61 is 100%. At this time, the card displays the application identifier 51.

[0250] When the card moves from K point to S point, the opacity of the corresponding mask area of the application identifier in the rectangular area 61 is 100%. At this time, the card displays the application identifier 51.

[0251] When the card moves from S point to U point, the opacity of the corresponding mask area of the application identifier in the rectangular area 61 starts to decrease.

[0252] When the card moves to U point, the opacity of the corresponding mask area of the application identifier in the rectangular area 61 decreases to 0. At this time, the card does not display the application identifier 51.

[0253] When the card moves from U point to L point, the size of the card decreases. At this time, the card does not display the application identifier 51.

[0254] When the card moves to L point, the display screen does not display the card.

[0255] In this way, the opacity of the corresponding mask area of the application identifier in the rectangular area 61 gradually decreases from S point to U point, and disappears and becomes invisible when it decreases to 0 at U point.

[0256] The content changes in the above embodiment card are only examples, and the card can have more or less content changes, which are not specifically limited here.

[0257] The embodiments shown in FIGS. 5-12 are described in the process of sliding from the center of the display screen to the edge of the display screen. It can be understood that the process of the upper edge of the display screen sliding down to the center of the display screen is opposite to the process of the center of the display screen sliding up to the upper edge of the display screen, which will not be described in detail here. The process of the lower edge of the display screen sliding up to the center of the display screen is opposite to the process of the center of the display screen sliding down to the upper edge of the display screen, which will not be described in detail here.

[0258] For example, in the process of the card sliding down from the upper edge of the display screen, the rectangular area 604 starts to appear at point E, and the time stamp in the rectangular area 604 gradually increases and the opacity gradually increases. The message content in the rectangular area 603 starts to appear at point F, and gradually increases in the horizontal direction to improve the display content; the message content in the rectangular area 603 gradually increases in the vertical direction and the opacity gradually increases. The message title in the rectangular area 62 starts to appear at point H, gradually increases and the opacity gradually increases to 100% at point G. The message quantity subscript in the rectangular area 61 starts to appear at point G, and the opacity gradually increases. The application identifier in the rectangular area 61 is continuously displayed.

[0259] For example, in the process of the card sliding up from the lower edge of the display screen, the rectangular area 604 starts to appear at point M, and the time stamp in the rectangular area 604 gradually increases and the opacity gradually increases. The message content in the rectangular area 603 starts to appear at point P, and gradually increases in the horizontal direction to improve the display content; the message content in the rectangular area 603 gradually increases in the vertical direction and the opacity gradually increases. The message title in the rectangular area 62 starts to appear at point R, gradually increases and the opacity gradually increases to 100% at point Q. The message quantity subscript in the rectangular area 61 starts to appear at point Q, and the opacity gradually increases. The application identifier in the rectangular area 61 is continuously displayed.

[0260] It can be understood that the above sliding operation can be a follow-hand sliding, and the distance of the card moving is positively correlated with the distance of the finger moving in the vertical direction. Specifically, the greater the distance of the finger moving in the vertical direction, the greater the distance of the card moving; the smaller the distance of the finger moving in the vertical direction, the smaller the distance of the card moving.

[0261] The sliding operation described above can also be a hand-off sliding, and the distance of the card movement is positively correlated with the speed of the sliding when the hand is lifted. Illustratively, the electronic device can calculate the distance of the card movement according to the speed of the sliding when the hand is lifted and a pre-set speed curve, confirm the target position of the card, and further obtain the positions of the elements in the card (for example, the rectangular area 301, the circular areas 304 to 307, the content area 601, the mask area 602, and the like) to display the card.

[0262] The sliding operation described above can also be that the user realizes the sliding by rotating a physical key (for example, a rotating crown), and the distance of the sliding is positively correlated with the angle of the rotation of the physical key. The greater the angle of the rotation, the greater the distance of the card movement; the smaller the angle of the rotation, the smaller the distance of the card movement.

[0263] The sliding operation described above can also be a voice operation or any type of operation, which is not specifically limited here.

[0264] It can be understood that the changes of the contents in the card in the embodiments described above are only examples, and more or fewer changes can also be included, for example, changes of the font color, changes of the picture size, and the like in the card, which are not specifically limited here. The embodiments described above are described by taking the card including the application identifier 51, the message number small mark 52, the message title 53, the message content 54, and the time stamp 55 as examples, and the card can also include more or fewer contents, which are not specifically limited here.

[0265] It should be understood that the embodiments described above are described by taking the center of the card as the center of the rectangular area 301 as examples to describe the position of the card, the morphological changes when the card moves, and the changes of the contents in the card when the card moves. The electronic device can also realize the position of the card, the morphological changes when the card moves, and the changes of the contents in the card when the card moves through a certain edge of the card (for example, the position of the lower edge of the card when sliding vertically upward; the position of the upper edge of the card when sliding vertically downward, and the like). This is not specifically limited here.

[0266] The embodiments described above are described by taking the sliding of a single card as an example. In actual applications, the interface of the electronic device can include multiple cards. The sliding process of multiple cards is described below in combination with FIG. 13.

[0267] It can be understood that in the sliding process, if the distance between the adjacent cards is unchanged, the moving distance of each card in the interface is the same. Taking the distance between the adjacent cards as L10 and the length of the card in the vertical direction as 2h as an example, illustratively, the distance between the center of the card 1201 and the center of the card 1202 is L10, and the length of the card 1203 in the vertical direction is 2h.

[0268] Fig. 13 is a schematic view of changes of cards in a sliding scenario according to an embodiment of the present application. As shown in Fig. 13, the card 1201 is located at the center O of the display screen as shown in Fig. 12a. At this moment, the card 1201 has the largest size.

[0269] At T1, in response to the upward sliding operation, the card 1201 and the card 1202 move upward. The curves of the left edge and the right edge of the card 1201 always match the curves of the edges of the display screen. The curve of the lower edge of the card 1202 always matches the curve of the edge of the display screen. As the distance between the card 1201 and the center of the display screen increases, the size of the card 1201 decreases, and the content in the card 1201 changes as the size of the card 1201 decreases, for example, the message content shrinks. The left edge and the right edge of the card 1202 meet, and the curves of the left edge and the right edge always match the curves of the edges of the display screen. As the distance between the card 1202 and the center of the display screen decreases, the size of the card 1202 gradually increases, and the content in the card 1202 changes as the size of the card 1202 decreases, for example, the font shrinks.

[0270] At T2, when the card 1202 moves to the K point, the lower edge of the card 1202 appears, and the card 1202 switches from the form C to the form B. The watch can display the list interface as shown in Fig. 12b.

[0271] At T3, when the distance between the position of the card 1202 and the center of the display screen is less than L10-0.8h, the electronic device starts to display the third card 1203. The watch can display the list interface as shown in Fig. 12c.

[0272] At T4, when the card 1201 moves to the B point, the upper edge of the card 1201 disappears, the left edge and the right edge of the card 1201 meet, and the card 1201 switches from the form B to the form A. The watch can display the list interface as shown in Fig. 12d.

[0273] At T5, when the card 1203 moves to the K point, the card 1203 switches from the form C to the form B. The watch can display the list interface as shown in Fig. 12e.

[0274] At T6, when the distance between the position of the card 1203 and the center of the display screen is less than L10-0.8h, the electronic device starts to display the card 1204. The watch can display the list interface as shown in Fig. 12f.

[0275] At T7, when the card 1201 moves to the A point, the card 1201 disappears. The watch can display the list interface as shown in Fig. 12g.

[0276] The corner change, edge change and content change of the card 1201, the card 1202 and the card 1203 in the moving process can be referred to the corresponding description above, and details are not described herein. As shown in FIG. 13, in the card sliding process, the curve of the left edge of the card and the curve of the right edge of the card always match the curve of the edge of the display screen; the upper edge and the lower edge of the card change with the position of the card and always do not exceed the display width of the display screen.

[0277] In this way, in the sliding process, the electronic device can realize the form change of the card according to the position of the card, adapt to the display of the display screen, and reduce the case that the card is cut by the display screen. In addition, the content display in the card can also be adjusted according to the position of the card, and the phenomenon that the content display in the card is incomplete can be reduced.

[0278] It should be understood that the embodiment shown in FIG. 13 above is described by taking the distance between adjacent cards as an example. In some embodiments, the electronic device can also confirm the arrangement of the cards by taking the distance between the upper edges of adjacent cards, the distance between adjacent cards, etc., and the arrangement of the cards in the embodiments of the present application is not limited in terms of the arrangement mode and distance change of the cards.

[0279] The embodiment shown in FIG. 13 above is described by taking the distance between adjacent cards in the interface and the length of the card in the vertical direction as an example. The distance between adjacent cards in the interface and the length of the card in the vertical direction can be different, and adaptively, the position of the form switching of each card in the display screen region can be different.

[0280] The above embodiment is described by taking the center of the display screen as a reference point for the change of the card in the sliding process. Any position of the display screen such as the point farthest from the center of the display screen in the vertical direction, the point farthest from the center of the display screen in the horizontal direction, etc. can be taken as a reference point, which is not limited herein.

[0281] The above embodiment is described by taking the position of the center point of the card to represent the position of the card for the change of the card in the sliding process. Any position of the card such as the position of the center of the upper edge of the card, the position of the center of the lower edge of the card, etc. can be taken to represent the position of the card, which is not limited herein.

[0282] The content in the card in the above embodiment is only an example, and these contents can be selected according to different applications or different scenes as needed. The content in the card is not limited in the embodiments of the present application.

[0283] The interface display method of the embodiments of the present application has been described above, and the device for executing the above method provided by the embodiments of the present application is described below. Those skilled in the art can understand that the method and the device can be combined and referenced with each other, and the related device provided by the embodiments of the present application can execute the steps in the above method.

[0284] As shown in FIG. 14, FIG. 14 is a structural schematic diagram of an interface display device provided by the embodiments of the present application. The interface display device can be an electronic device in the embodiments of the present application, or a chip or chip system in the electronic device.

[0285] As shown in FIG. 14, the interface display device can be used in a communication device, a circuit, a hardware component or a chip, and the interface display device includes a display unit 1301 and a processing unit 1302. The display unit 1301 is configured to support the display step executed by the interface display method, and the processing unit 1302 is configured to support the information processing step executed by the interface display device, for example, the position calculation of the card, the shape change of the card, etc.

[0286] In a possible implementation, the interface display device can further include a communication unit 1303, which is configured to support the message receiving or sending step executed by the interface display device.

[0287] The interface display device described in the embodiments of the present application can include the units described in the above embodiments.

[0288] Specifically, the processing unit 1302 and the display unit 1301 can be integrated together, and the processing unit 1302 and the display unit 1301 can communicate with each other.

[0289] In a possible implementation, the interface display device can further include a storage unit 1304. The storage unit 1304 can include one or more memories, and the memory can be a device for storing programs or data in one or more devices or circuits.

[0290] The storage unit 1304 can exist independently and be connected to the processing unit 1302 through a communication bus. The storage unit 1304 can also be integrated with the processing unit 1302.

[0291] The interface display device can be a chip or a chip system of the electronic device in the embodiments of the present application. The storage unit 1304 can store computer execution instructions of the method of the electronic device, so that the processing unit 1302 executes the method of the electronic device in the above embodiments. The storage unit 1304 can be a register, a cache or a random access memory (RAM), etc. The storage unit 1304 can be integrated with the processing unit 1302. The storage unit 1304 can be a read-only memory (ROM) or other types of static storage device that can store static information and instructions. The storage unit 1304 can be independent of the processing unit 1302.

[0292] In a possible implementation, the interface display device can further include a communication unit 1303. The communication unit 1303 is configured to support the interface display device to interact with other devices. For example, when the interface display device is an electronic device, the communication unit 1303 can be a communication interface or an interface circuit. When the interface display device is a chip or a chip system in the electronic device, the communication unit 1303 can be a communication interface. For example, the communication interface can be an input / output interface, a pin or a circuit, etc.

[0293] The device of the present embodiment can be used to perform the steps performed in the above method embodiments, and has similar implementation principles and technical effects, which will not be repeated here.

[0294] The interface display method provided by the embodiments of the present application can be applied to an electronic device with a shooting function. The electronic device includes a terminal device, and the specific device form of the terminal device can refer to the above related description, which will not be repeated here.

[0295] The embodiments of the present application provide an electronic device, which includes one or more processors and a memory. The memory is coupled to the one or more processors. The memory is configured to store computer program codes. The computer program codes include computer instructions. The one or more processors invoke the computer instructions to enable the electronic device to perform the above method.

[0296] For example, FIG. 15 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.

[0297] As shown in FIG. 15, the electronic device includes a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset interface 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0298] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device can include more or fewer components than shown, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware. The processor 110 can include one or more processing units. Different processing units can be independent devices or can be integrated into one or more processors. The processor 110 can also be provided with a memory for storing instructions and data. For example, the processor 110 is used to store instructions and data related to the card display method provided by the embodiments of the present application.

[0299] The electronic device implements display functions through a GPU, a display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor.

[0300] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. For example, the display screen 194 can implement the card display, etc., which is not limited in the embodiments of the present application.

[0301] The present application also provides a computer readable storage medium for storing a computer program for implementing the method shown in the above method embodiments.

[0302] The application further provides a computer program product, which comprises a computer program (also referred to as code or instructions), and when the computer program runs on a computer, the computer can execute the method shown in the method embodiments.

[0303] The chip system provided in the embodiments of the application comprises a processor and can further comprise a memory, which is used to realize the functions of the first device or the second device in the method embodiments. The chip system can be composed of a chip or can comprise a chip and other discrete devices.

[0304] Those skilled in the art can understand that the modules and algorithm steps of the examples described in combination with the embodiments disclosed herein can be realized by electronic hardware or a combination of computer software and electronic hardware. Whether the functions are realized in hardware or software depends on the specific application and design constraints of the technical solutions. Those skilled in the art can use different methods to realize the described functions for each specific application, but such implementation should not be considered beyond the scope of the application.

[0305] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the system, device and module described above can refer to the corresponding processes in the foregoing method embodiments, which will not be described here.

[0306] In several embodiments provided in the application, it should be understood that the disclosed system, device and method can be realized by other ways. For example, the device embodiments described above are only schematic, for example, the division of the modules is only a logical function division, and actual implementation can have another division manner, for example, a plurality of modules or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the shown or discussed modules can be indirect coupling or communication connection through some interfaces, devices or modules, and can be electrical, mechanical or other forms.

[0307] The modules described as separate components can or can not be physically separated, and the components shown as modules can or can not be physical modules, that is, can be located in one place or can be distributed to a plurality of network modules. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiments.

[0308] In addition, each functional module in each embodiment of the application can be integrated into a processing module, or each module can exist physically, or two or more modules can be integrated into one module.

[0309] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0310] The above is only a specific implementation of the present application, but the protection scope of the embodiments of the present application is not limited thereto, any person skilled in the art can easily think of changes or replacements within the technical scope disclosed by the embodiments of the present application, which should be covered within the protection scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application should be subject to the protection scope of the claims.

Claims

1. A method for displaying an interface, characterized in that, include: A first card is displayed on the screen. The first card includes a first edge, a second edge, and a third edge. The first edge and the second edge are close to the edge of the display screen, and the curves of the first edge and the second edge both match the curves of the edge of the display screen. As the first card moves toward the display screen in a first direction, the shape of the first card changes, so that the curves of the first edge and the second edge always match the curves of the edge of the display screen. Furthermore, the third edge of the first card moves in the first direction as the first card moves, and the length of the third edge changes, so that the length of the third edge never exceeds the display width of the display screen.

2. The method according to claim 1, characterized in that, The display screen is circular.

3. The method according to claim 1 or 2, characterized in that, The curves of the first and second edges satisfy a preset similarity with the curves of the edges of the display screen.

4. The method according to any one of claims 1-3, characterized in that, Both the first edge and the second edge are aligned with the edge of the display screen.

5. The method according to any one of claims 1-4, characterized in that, There is a first corner between the first edge and the third edge, so that the first edge and the third edge are smoothly connected; A second corner is provided between the second edge and the third edge, so that the second edge and the third edge are smoothly connected; As the first card moves toward the display screen in a first direction, the size of the first corner changes with the distance between the third edge and the edge of the display screen in the first direction, so that the first edge is always smoothly connected to the third edge. Furthermore, the size of the second corner varies with the distance between the third edge and the edge of the display screen in the first direction, so that the second edge is always smoothly connected to the third edge.

6. The method according to any one of claims 1-5, characterized in that, The first card also includes: first content; As the first card moves toward the display screen in a first direction, the first content changes with the size of the first card, ensuring that the first content does not extend beyond the edge of the first card.

7. The method according to claim 6, characterized in that, If the length of the third edge is less than the first length, the first content is not displayed.

8. The method according to any one of claims 1-7, characterized in that, The first card also includes a fourth edge, which is disposed opposite to the third edge; The fourth edge disappears as it moves to the edge of the display screen.

9. The method according to claim 8, characterized in that, The first card also includes: second content; During the movement of the first card toward the display screen in a first direction, if the length of the third edge is less than the second length, the second content is not displayed, where the second length is less than the first length.

10. The method according to claim 8 or 9, characterized in that, There is a third corner between the first edge and the fourth edge, so that the first edge and the fourth edge are smoothly connected; There is a fourth corner between the second edge and the fourth edge, so that the second edge and the fourth edge are smoothly connected; As the first card moves toward the display screen in a first direction, the size of the third corner changes with the distance between the fourth edge and the edge of the display screen in the first direction, so that the fourth edge is always connected to the first smooth surface. Furthermore, the size of the fourth corner varies with the distance between the fourth edge and the edge of the display screen in the first direction, so that the fourth edge is always smoothly connected to the second edge.

11. The method according to any one of claims 1-10, characterized in that, As the first card moves toward the second direction of the display screen, the shape of the first card changes, so that the curves of the first edge and the second edge always match the curves of the edge of the display screen. Furthermore, the fourth edge of the first card moves in the second direction as the first card moves, and the length of the fourth edge changes, so that the length of the fourth edge never exceeds the display width of the display screen.

12. The method according to any one of claims 1-11, characterized in that, When the first card is displayed on the display screen, the display screen also displays a second card, the second card including a fifth edge, a sixth edge and a seventh edge, and the fifth edge and the sixth edge are close to the edge of the display screen, and the curves of the fifth edge and the sixth edge are matched with the curves of the edge of the display screen; As the second card moves toward the display screen in the first direction, the shape of the second card changes, so that the curves of the fifth edge and the sixth edge always match the curves of the edges of the display screen. Furthermore, the seventh edge of the second card moves in the first direction as the second card moves, and the length of the seventh edge changes so that the length of the seventh edge never exceeds the display width of the display screen.

13. An electronic device, characterized in that, The electronic device includes: one or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 12.

14. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the one or more processors being used to invoke computer instructions to cause the electronic device to perform the method as described in any one of claims 1 to 12.

15. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes computer instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1 to 12.

16. A computer program product, characterized in that, The computer program product includes computer program code that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1 to 12.

Images