Methods, apparatuses, devices, and media for presenting a user interface

Abstract

Methods, apparatuses, devices, and media for presenting a user interface are provided. In one method, a set of cards is presented in a user interface, the content in the set of cards respectively from a set of consecutive card content in a card content sequence. A swipe operation for rotating the set of cards is detected to determine whether the swipe operation satisfies a predetermined condition. In response to determining that the swipe operation satisfies the predetermined condition, adjacent card content to the set of consecutive card content is determined from the card content sequence. The adjacent card content is presented at an adjacent card to the set of cards. With example implementations of the present disclosure, card content to be presented can be dynamically selected from the card content sequence upon detecting a swipe operation that satisfies a predetermined condition.

Description

Technical Field

[0001] Exemplary implementations of this disclosure generally relate to user interface management, and more particularly to methods, apparatus, devices, and computer-readable storage media for presenting user interfaces. Background Technology

[0002] With the development of computer technology, rich user interface content can be provided. For example, multiple cards can be displayed at different positions on a column, and the desired information can be presented on each card. Users can perform swipe operations in the user interface to scroll the column, thereby updating the positions of the cards. The column can scroll in the direction of the swipe operation to present information from subsequent cards. However, developers need to write special code to specify the information presented on the cards, and when the content and amount of information to be presented change, developers need to readjust the code. Therefore, how to present information in a card-based format in a more convenient and efficient way becomes a problem that urgently needs to be solved. Summary of the Invention

[0003] In a first aspect of this disclosure, a method for presenting a user interface is provided. In this method, a set of cards is presented in the user interface, the content of which is derived from a sequence of consecutive card contents in a card content sequence. A swipe operation for rotating the set of cards is detected to determine whether it satisfies the predetermined conditions. In response to determining that the swipe operation satisfies the predetermined conditions, adjacent card contents adjacent to the sequence of consecutive card contents are determined from the card content sequence. The adjacent card contents are presented at the location of the adjacent card.

[0004] In a second aspect of this disclosure, an apparatus for presenting a user interface is provided. The apparatus includes: a card presentation module configured to present a set of cards in the user interface, the content of which is derived from a set of consecutive card contents in a card content sequence; a detection module configured to detect whether a sliding operation for rotating the set of cards satisfies a predetermined condition; a determination module configured to, in response to determining that the sliding operation satisfies the predetermined condition, determine adjacent card contents adjacent to the set of consecutive card contents from the card content sequence; and a presentation module configured to present the adjacent card contents at the adjacent card locations adjacent to the set of cards.

[0005] In a third aspect of this disclosure, an electronic device is provided. The electronic device includes: at least one processing unit; and at least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the device to perform a method according to a first aspect of this disclosure when executed by the at least one processing unit.

[0006] In a fourth aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, causes the processor to implement the method according to a first aspect of this disclosure.

[0007] It should be understood that the descriptions in this section are not intended to limit the key or essential features of the implementation of this disclosure, nor are they intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0008] In the following detailed description, in conjunction with the accompanying drawings, the above and other features, advantages, and aspects of the various implementations of this disclosure will become more apparent. In the accompanying drawings, the same or similar reference numerals denote the same or similar elements, wherein:

[0009] Figure 1 A block diagram of an example environment in which the implementation of this disclosure can be implemented is shown;

[0010] Figure 2 A block diagram is shown illustrating a process for presenting cards in a user interface according to some implementations of this disclosure;

[0011] Figure 3 A block diagram showing the deployment of a set of cards according to some implementations of this disclosure is shown;

[0012] Figure 4 A block diagram is shown illustrating a process for rotating a parent container based on a sliding operation according to some implementations of this disclosure;

[0013] Figure 5 A block diagram is shown of a set of cards presented during a swipe operation according to some implementations of this disclosure;

[0014] Figure 6 A block diagram is shown of a set of cards presented during a swipe operation according to some implementations of this disclosure;

[0015] Figure 7 A block diagram is shown illustrating a set of cards presented after a swipe operation, according to some implementations of this disclosure.

[0016] Figure 8 A block diagram is shown of a set of cards presented in a pentagonal prism manner according to some implementations of this disclosure;

[0017] Figure 9 A block diagram is shown of a set of cards presented in a user interface according to some implementations of this disclosure;

[0018] Figure 10A flowchart is shown illustrating a method for presenting a user interface according to some implementations of this disclosure;

[0019] Figure 11 Block diagrams of apparatus for presenting a user interface according to some implementations of this disclosure are shown; and

[0020] Figure 12 A block diagram of a device capable of implementing various implementations of the present disclosure is shown. Detailed Implementation

[0021] Implementations of this disclosure will now be described in more detail with reference to the accompanying drawings. While some implementations of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the implementations set forth herein. Rather, these implementations are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and implementations of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0022] In the description of the implementation methods disclosed herein, the term "comprising" and similar terms should be understood as open inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one implementation" or "the implementation" should be understood as "at least one implementation". The term "some implementations" should be understood as "at least some implementations". Other explicit and implicit definitions may also be included below. As used herein, the term "model" can represent the relationships between various data. For example, the aforementioned relationships can be obtained based on various currently known and / or future-developed technical solutions.

[0023] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.

[0024] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure through appropriate means in accordance with relevant laws and regulations, and user authorization should be obtained.

[0025] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.

[0026] As an optional but non-restrictive implementation, in response to a user's active request, a prompt message can be sent to the user, for example, via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose whether to "agree" or "disagree" to provide personal information to the electronic device.

[0027] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.

[0028] Example Environment

[0029] Several technical solutions for presenting cards in the user interface have been developed. First, see... Figure 1 This describes an application environment based on an exemplary implementation of the present disclosure. Figure 1 A block diagram 100 illustrates an example environment in which the implementation of this disclosure can be achieved. For example... Figure 1 As shown, a set of cards 120, 122, and 124, etc., can be presented in the user interface 110. Each card can be arranged side by side along the vertical direction of the screen and is used to present various aspects of information about a certain object.

[0030] Specifically, in the user interface 110 of the panoramic view browsing application, various aspects of a house can be presented in individual cards. For example, the house's orientation can be displayed in card 120, the house's area in card 122, the house's floor plan in card 124, and so on. Users can perform swiping operations using their fingers, styluses, mice, etc. For example, when a user's finger swipes along the swiping direction 130, cards 120, 122, and 124 can scroll to the left. At this time, card 120 will move to the left and leave the user interface 110, card 122 will be in its initial position, card 124 will be in its initial position, and subsequent cards will be presented at the initial position of card 124.

[0031] like Figure 1 As shown, the content displayed on each card is fixed; that is, there is a pre-defined one-to-one correspondence between cards and content. This requires developers to write dedicated code to control the relationship between cards and information. For example, developers might define six cards to be presented in a hexagonal prism arrangement and predefine the specific content of each card. When the content and amount of information to be presented change, developers need to readjust the code. Therefore, how to present information on cards in a more convenient and efficient way becomes a pressing problem.

[0032] A summary process for presenting the user interface.

[0033] To address the shortcomings of the aforementioned technical solutions, a method for presenting a user interface is proposed according to an exemplary implementation of this disclosure. Specifically, an association can be established between a set of cards and a sequence of card content in the user interface. Here, the number of cards in a set and the number of card contents in the sequence can be the same or different. In this way, a set of cards can be swiped based on a swipe operation, and the content following the currently presented card content in the sequence can be presented in the adjacent cards after the set of cards.

[0034] See Figure 2 This describes a summary of an exemplary implementation according to the present disclosure. Figure 2 A block diagram 200 illustrates a process for presenting cards in a user interface 110 according to some implementations of this disclosure. A set of cards can be presented in the user interface 110; for example, cards 120, 122, and 124 can be deployed in various ways. For ease of description, the deployment of cards on the surface of a hexagonal prism will be used as a specific example below to describe how individual cards are presented in the user interface 110.

[0035] According to an exemplary implementation of this disclosure, a card content sequence 220 can be provided, which may include multiple card contents 210, 212, 214, 216, etc. Information in the card content sequence 220 can be pre-specified to be presented on a set of cards; for example, it can be pre-specified that card content 210 in the card content sequence 220 (e.g., at the beginning) is presented on the first card 120. Subsequently, each of the subsequent cards 122 and 124 can respectively present the subsequent card contents 212 and 214 in the card content sequence 220, etc.

[0036] According to an exemplary implementation of this disclosure, card 120 can be set as the left card, card 122 as the center card, and card 124 as the right card. The hexagonal prism can be rotated based on a swipe operation from the user so that more card content in the card content sequence 220 is presented after card 124. For example, when a received swipe operation meets predetermined conditions, adjacent card content (e.g., card content 216) adjacent to a set of consecutive card content 210, 212, and 214 can be determined from the card content sequence 220, and adjacent card content 216 is presented at the adjacent card position (e.g., card 230) adjacent to a set of cards 120, 122, and 124.

[0037] Using the exemplary implementation of this disclosure, card content to be presented can be dynamically selected from the card content sequence 220 when a swipe operation meeting predetermined conditions is detected. In this way, it is not necessary to pre-establish a relationship between cards and their specific content. This allows subsequent content in the card content sequence 220 to be continuously presented in new subsequent cards by adjusting the amount of content in the sequence. Compared to existing technologies that pre-bind cards and their content, when card content changes, developers do not need to rewrite the code; they only need to update the card content sequence 220.

[0038] Detailed process of presenting the user interface

[0039] See already Figure 2 The outline of the user interface is described below, with further details regarding its presentation. According to an exemplary implementation of this disclosure, a set of cards can be presented in the user interface. The content of these cards can then be drawn from a sequence of consecutive cards in card content sequence 220. For example, card content 210 can be presented at card 120, card content 212 at card 122, and card content 214 at card 124, and so on. According to an exemplary implementation of this disclosure, only the three cards marked as visible—the left card, the center card, and the right card—can be presented, and cards at other locations on the hexagonal prism can be set to invisible.

[0040] According to one exemplary implementation of this disclosure, each card can have its own associated angle. Assuming a set of cards is presented on a prism comprising N surfaces, the associated angle of each card can be set to 360 / N, that is, each card corresponds to a center angle of 360 / N. In the case of a hexagonal prism, the associated angle of each card can be 360 / 6 = 60 degrees.

[0041] See below. Figure 3 More information describing an exemplary implementation according to this disclosure, Figure 3 A block diagram 300 illustrates the deployment of a set of cards according to some implementations of this disclosure. Specifically, Figure 3 A top view shows a set of cards deployed on the surface of a vertically positioned hexagonal prism. (See diagram.) Figure 3As shown, the presentation angle of each card can be represented using the normal direction of each card. For example, the presentation angle of card 120 can be specified by normal direction 310, the presentation angle of card 122 can be specified by normal direction 312, and the presentation angle of card 124 can be specified by normal direction 314. A reference coordinate system can be defined, with the upward reference direction 320 as the 0-degree orientation, and the counterclockwise direction defined as the positive direction. In this case, the presentation angle of each card can be defined based on the angle between the normal direction of each card and the reference direction 320. The presentation angle associated with a card in a set of cards can be determined based on the number of cards in the set. In the case of a hexagonal prism, based on the geometric relationship between the cards, the presentation angles of the left card 120, the central card 122, and the right card 124 can be set to 60 degrees, 0 degrees, and -60 degrees, respectively.

[0042] According to an exemplary implementation of this disclosure, a parent container 330 can be set in the user interface, and a set of cards 120, 122, and 124 can be added to the parent container 330. At this time, the parent container 330 can be used to manipulate the set of cards as a whole. The relative positions of the individual cards can remain unchanged during operation. Specifically, the initial orientation 340 of the parent container 330 can be predefined; for example, the initial orientation 340 can be set to be consistent with the reference orientation 320. Initially, the initial rotation angle of the parent container 330 is 0 degrees. Further, the cards can be presented based on the initial rotation angle of the parent container 330 and the presentation angle of each card. Figure 3 As shown, the initial rotation angle of the parent container 330 is 0 degrees, at which point the presentation angles of each card are 60 degrees, 0 degrees, and -60 degrees, respectively. This can be done according to... Figure 3 The cards 120, 122, and 124 are shown in the diagram.

[0043] According to an exemplary implementation of this disclosure, a swipe operation for rotating a set of cards can be detected in the user interface. For example, a user can perform a swipe operation using a finger and / or other object. It will be understood that the direction of the swipe operation is not limited herein, but the swipe operation can include, but is not limited to, horizontal, vertical, diagonal, etc. The direction of the swipe operation will affect how the cards rotate when the cards are displayed in different ways. For example, when cards 120, 122, and 124 are arranged side-by-side vertically, if the swipe operation includes a horizontal component, cards 120, 122, and 124 will rotate left or right depending on the direction of that horizontal component.

[0044] Specifically, assuming the sliding operation includes a horizontal component from right to left, a set of cards will rotate left or right. In this case, the rotation angle of the parent container 330 can be determined based on the sliding displacement of the sliding operation. See below for more details. Figure 4 This describes further details regarding determining the rotation angle 440 of the parent container 330. Figure 4 A block diagram 400 illustrates a process for rotating a parent container 330 based on a sliding operation, according to some implementations of this disclosure. For example... Figure 4 As shown, the sliding displacement 410 of the sliding operation can be determined, and the rotation direction 420 of the parent container 330 can be determined based on the direction of the sliding displacement 410.

[0045] Furthermore, the rotation angle 440 of the parent container 330 can be determined based on the magnitude of the sliding displacement 410. Specifically, the rotation angle 440 can be determined based on the angle between the container direction and the reference direction 320. According to an exemplary implementation of this disclosure, the rotation angle 440 can be determined based on the magnitude of the sliding displacement 410 and the card width. Assuming the card width is 2a, in the case of a hexagonal prism, the distance between the center of the hexagonal prism and the card is... Assuming the magnitude of the sliding displacement is b, and the rotation angle of 440° is represented as θ, then Therefore, it can be based on To determine the value of θ, that is, to determine the rotation angle 440.

[0046] According to an exemplary implementation of this disclosure, during a swipe operation, the container orientation 430 of the parent container 330 can be updated based on the displacement of the user's finger. Furthermore, the display position of each card within the parent container 330 can be determined based on the updated container orientation 430. Specifically, the updated rotation angle of the parent container 330 can be determined based on the sum of its initial rotation angle and rotation angle 440. Further, the position of each card can be updated based on the updated rotation angle of the parent container 330 and the presentation angle of each card (i.e., the relative positional relationship between each card and the parent container 330). See below for reference. Figure 5 This describes more information about updating the position of each card during the swipe operation.

[0047] Figure 5 A block diagram 500 is shown illustrating a set of cards presented during a swipe operation, according to some implementations of this disclosure. According to one exemplary implementation of this disclosure, assuming the initial rotation angle of the parent container 330 is 0 degrees, and the user's finger swipe causes the parent container 330 to rotate 25 degrees to the left, then the presentation angle of card 120 is updated to 60 + 25 = 85 degrees, the presentation angle of card 122 is updated to 0 + 25 = 25 degrees, and the presentation angle of card 124 is updated to -60 + 25 = -35 degrees. For example... Figure 5As shown, the positions of cards 120, 122, and 124 in the user interface will change as the user's finger moves. In this way, the interface content can reflect the interaction between the user and the user interface in a more flexible manner.

[0048] According to an exemplary implementation of this disclosure, the rotation angle 440 of the parent container 330 can be compared with a threshold angle to determine whether the sliding operation meets a predetermined condition, so as to further determine whether to dynamically load and present subsequent card content from the card content sequence 220. Specifically, in the case of a hexagonal prism, the threshold angle can be set to half of the card angle corresponding to the presented card: 60 / 2 = 30. Since the sliding operation can have different directions, the threshold angle can be set to ±30 degrees respectively. If the rotation angle 440 is not lower than the threshold angle, the sliding operation can be considered to meet the predetermined condition. Otherwise, if the rotation angle 440 is lower than the threshold angle, the sliding operation can be considered not to meet the predetermined condition.

[0049] According to an exemplary implementation of this disclosure, the threshold angle range can be set to -30 degrees to 30 degrees. In this case, it can be determined whether the sliding operation meets the predetermined conditions based on whether the rotation angle of the parent container 330 is within this threshold angle range.

[0050] According to an exemplary implementation of this disclosure, when a sliding operation meets predetermined conditions, adjacent card content adjacent to a set of consecutive card content can be selected from the card content sequence 220. Specifically, adjacent card content can be determined from the card content sequence 220 based on the sliding direction of the sliding operation. Hereinafter, referring to 6 and using a leftward sliding direction as an example, how to select adjacent card content from the card content sequence 220 will be described.

[0051] Figure 6 A block diagram 600 shows a set of cards presented during a swipe operation according to some implementations of this disclosure. When the swipe direction is left, the set of cards will slide to the left, and at this time, card 120 is rotated to an area outside the user interface 110, card 122 will be rotated to the left position, card 124 will be rotated to the center position, and card 230 will be rotated to the right position. At this time, card content 216 in the card content sequence 220, which is located after card content 210, 212, and 214 corresponding to the set of cards 120, 122, and 124, can be regarded as adjacent card content.

[0052] Furthermore, based on the leftward swipe direction, adjacent cards can be displayed in the adjacent position to the right of a group of cards. At this point, among the three positions set to "visible," card 230 can be displayed in the right position, i.e., a "page-turning" effect is achieved. At this time, in... Figure 2Card 230, which was originally invisible, will become visible to display information about "renovation" from card content 216. In this way, the next card can be dynamically appended to the end of a group of cards, thus providing a continuous presentation effect.

[0053] According to an exemplary implementation of this disclosure, during a swipe operation (i.e., before the user lifts their finger), if the swipe operation does not meet predetermined conditions (e.g., the swipe operation causes the parent container 330 to rotate by less than 30 degrees), it can be performed as follows: Figure 5 The cards are presented in the manner shown. At this point, the card display positions have changed but have not yet been "page-turned". If the swipe operation meets predetermined conditions (for example, the swipe operation causes the parent container 330 to rotate by an angle greater than or equal to 30 degrees), then... Figure 6 The cards are presented in the manner shown. At this point, the cards are "page-turned," and both their content and display position change. This method allows the interface to reflect user interaction more flexibly, and users can display more cards by swiping.

[0054] The process of presenting cards during a swipe has been described above. Users can lift their fingers to end the swipe. At this point, the position of each card can be determined based on whether the swipe at the moment the finger is lifted meets predetermined conditions. If the rotation of the parent container caused by the swipe is less than 30 degrees, the cards can be "bounced back" to their positions before the swipe. Figure 7 A block diagram 700 is shown illustrating a set of cards presented after a swipe operation, according to some implementations of this disclosure. Figure 7 As shown, each card can be bounced back to its initial position. In other words, a set of cards is presented based on the initial rotation angle (0 degrees) of the parent container 300 and the presentation angles of a set of cards (60 degrees, 0 degrees, and -60 degrees). At this time, the presentation angle of card 120 is restored to 60 + 0 = 60 degrees, the presentation angle of card 122 is restored to 0 + 0 = 0 degrees, and the presentation angle of card 124 will be restored to -60 + 0 = -60 degrees.

[0055] According to an exemplary implementation of this disclosure, if the rotation of the parent container 330 caused by a swipe operation when the finger is lifted is greater than or equal to 30 degrees, then each card can maintain its position after the page flip. For example, it can be as follows: Figure 6The cards are presented in the manner shown. In other words, after determining that the swipe operation has ended and that the swipe operation meets predetermined conditions, the updated rotation angle of the parent container 330 (0 + 30 × 2 = 60 degrees) can be determined based on the initial angle (e.g., 0 degrees) and the threshold angle (e.g., 30 degrees). Furthermore, at least a portion of a set of cards and adjacent cards can be presented based on the updated rotation angle of the parent container 330 and the presentation angle of a set of cards. Figure 6 As shown, cards 122, 124, and 230 can be displayed at this time.

[0056] Using the exemplary implementation of this disclosure, it can be ensured that cards are presented on the left, center, and right sides during and after a user's swipe operation. This avoids cards being displayed in off-center areas while the user is browsing the user interface. For example, it avoids displaying a "seam" between two cards in the center of the user interface while displaying the contents of two cards on either side.

[0057] It will be understood that although the above example only uses a left swipe to illustrate the dynamic addition of a new card to the right of a set of cards, a similar approach can be taken when the user swipes to the right. In other words, if the rightward rotation of the parent container 330 caused by the user's action is less than 30 degrees, cards 120, 122, and 124 will remain displayed in the left, center, and right positions, respectively. If the rightward rotation is greater than or equal to 30 degrees, a new card can be dynamically added to the left of card 120, and this new card can represent the card content to the left of card content 210 in the card content sequence 220.

[0058] The principles for implementing an exemplary implementation according to this disclosure have been described above. Below, further details regarding the presentation of the user interface will be described in conjunction with a specific application implementation. According to an exemplary implementation of this disclosure, the methods described above can be invoked in the Cascading Style Sheets (CSS) of the application used to present the user interface 110. Implementing the card display functionality described above in CSS allows the card display functionality to be independent of the application's code, rather than implementing it in the application's own code.

[0059] Using the exemplary implementation of this disclosure, the card display function implemented in CSS can be invoked by applications developed in various ways (e.g., applications running on mobile clients, applets, and applications running on ordinary PCs (personal computers)). In this way, the repeated development of card display functions for multiple clients can be avoided, thereby improving software reuse efficiency.

[0060] In the CSS file, code can be written to calculate the initial position of each card, ensuring that the cards are continuously distributed across the surface of the hexagonal prism. When a swipe operation from the user is detected, the code in the CSS file can calculate the rotation angle of the parent container 330 based on the swipe displacement, thereby determining the presentation angle of each card. Using the exemplary implementation of this disclosure, the card content sequence 220 can include fewer than six cards (i.e., the card content is insufficient to cover all surfaces of the hexagonal prism). In this case, the next card can be dynamically added as the parent container 330 rotates, ensuring that the cards on the surface of the hexagonal prism appear visually continuous. When the user lifts their finger and stops swiping, the presentation angle of each card can be corrected based on the magnitude of the user's swipe displacement, causing the cards to bounce back to the position facing the user (i.e., the central position).

[0061] According to an exemplary implementation of this disclosure, card 120 (located on the left) can be named "leftpiece," card 122 (located in the center) can be named "center," and card 124 (located on the right) can be named "rightpiece." These cards can then be set to a "visible" state. Subsequently, other cards can be set to an "hidden" state. At this point, only the "visible" cards 120, 122, and 124 are displayed. Furthermore, the distance between the card and the center of the hexagonal prism, as well as the presentation angle of each card, can be calculated based on the card's width. In this case, the card named "leftpiece" is rotated 60 degrees, the card named "centerpiece" is rotated 0 degrees, and the card named "rightpiece" is rotated -60 degrees, meaning the three cards are arranged in a regular hexagonal shape.

[0062] The system can detect user swipe actions. When a swipe, such as a user's finger, is detected, the `onteststart` callback function is triggered to record the starting point of the swipe (`startX`) and the initial rotation angle of the parent container of each card (`startrotateX`). The `untouchmove` callback function is triggered, and the current swipe position (`endX`) is recorded in real time. Then, based on `startX` and the `endX` recorded during the swipe, the swipe displacement is determined. Next, the `rotatecars` function is called using the parameters of the swipe operation to calculate the rotation angle and display the rotated cards. It will be understood that the above process is implemented using CSS-based front-end technology, which makes the CSS-based card management process inherently multi-platform compatible. For example, rotated cards can be displayed in an app, a mini-program, or on a PC.

[0063] According to an exemplary implementation of this disclosure, the rotation angle of the parent container 330 can be determined based on the parameters described above. Further, the rotation angle angle of the parent container can be determined based on the detected sliding operation, and a new rotation angle of the parent container can be determined based on the initial rotation angle startrotateX and the rotation angle angle. A threshold range for the rotation angle, rotationlimit (e.g., -30 degrees to 30 degrees), can be set. When the rotation angle is outside this threshold range, the card splicing process is initiated. In this way, even if the number of card contents is less than 6, subsequent card contents can be spliced ​​on the hexagonal prism surface, thereby achieving a continuous scrolling effect.

[0064] According to an exemplary implementation of this disclosure, left-side and right-side splicing can be implemented separately in CSS. One scenario involves a leftward swipe. When the leftward rotation angle exceeds 30 degrees within a threshold range, this threshold range can be increased by 60, meaning that the next rotation will only splice the card if the rotation is outside the 30-90 degree threshold range. In other words, the threshold range related to the next swipe operation needs to be reset. At this point, adjacent card content can be retrieved from the card content sequence 220 and displayed. The found card content can then be spliced ​​to the right of the rightpiece. The centerpiece can be updated to the leftpiece, the rightpiece to the centerpiece, and the new card set as the rightpiece.

[0065] Another scenario involves a rightward swipe. If the rightward rotation angle is less than -30 degrees within the threshold range, this threshold range can be reduced by 60. This means that the next rotation will only stitch cards together if the card rotates to a value outside the -90 to -30 threshold range. In other words, the threshold range related to the next swipe operation needs to be reset. At this point, adjacent card content can be retrieved from card content sequence 220 and displayed. The found card content can then be stitched to the left of the left piece. The center piece can be updated to the right piece, the left piece to the center piece, and the new card can be set as the left piece.

[0066] According to an exemplary implementation of this disclosure, the card bounce after a swipe can be implemented in CSS. When the user lifts their finger, the `ontouchend` callback function can be triggered, and the `correctRotation` method can be called to correct the rotation angle. If the rotation angle of the parent container 330 is within a threshold range, the card in the center can bounce back to face the user. Conversely, if the rotation angle of the parent container 330 is outside the threshold range, the page can be turned and the next card can be presented.

[0067] It will be understood that although the above description of presenting multiple cards in a hexagonal prism manner as an example is an exemplary implementation according to this disclosure, alternatively and / or additionally, multiple cards may be presented in other ways. Figure 8 A block diagram 800 shows a set of cards deployed in a pentagonal prism manner according to some implementations of this disclosure. For example... Figure 8 As shown, cards 810, 812, and 814 can be deployed on the left, center, and right surfaces of the pentagonal prism, respectively. These cards can be made visible, while other cards can be made invisible.

[0068] It will be understood that, although the above example uses multiple cards arranged side-by-side in a vertical direction, according to an exemplary implementation of this disclosure, multiple cards can be arranged side-by-side in a horizontal direction. Figure 9 A block diagram 900 shows a set of cards presented in a user interface according to some implementations of this disclosure. Figure 9 As shown, a polygonal prism can be deployed horizontally, with cards 910, 912, and 914 positioned on its top, center, and bottom surfaces, respectively. These cards can be made visible, while other cards can be made invisible. A sequence of card content, including multiple card contents, can be provided, and cards and card content can be dynamically bound during the presentation of the user interface so that new cards with new content are presented as the user swipes.

[0069] Example process

[0070] Figure 10 A flowchart of a method 1000 for presenting a user interface according to some implementations of this disclosure is shown. Specifically, at block 1010, a set of cards is presented in the user interface, the content of which is derived from a set of consecutive card contents in a card content sequence. At block 1020, it is detected whether a sliding operation for rotating the set of cards satisfies a predetermined condition. At block 1030, in response to determining that the sliding operation satisfies the predetermined condition, adjacent card contents adjacent to the set of consecutive card contents are determined from the card content sequence. At block 1040, the adjacent card contents are presented at the adjacent card locations adjacent to the set of cards.

[0071] According to an exemplary implementation of this disclosure, detecting whether a sliding operation meets predetermined conditions includes: determining the rotation angle of a parent container of a set of cards based on the sliding displacement of the sliding operation; determining that the sliding operation meets predetermined conditions in response to determining that the rotation angle of the parent container is not lower than a threshold angle; and determining that the sliding operation does not meet predetermined conditions in response to determining that the rotation angle of the parent container is lower than the threshold angle.

[0072] According to an exemplary implementation of this disclosure, determining adjacent card content includes: selecting adjacent card content from the card content sequence based on the sliding direction of the sliding operation, wherein the sliding direction includes a component of any of the following directions: horizontal direction and vertical direction.

[0073] According to an exemplary implementation of this disclosure, presenting adjacent card content at adjacent cards further includes: selecting adjacent positions of a group of cards based on the sliding direction; and presenting adjacent cards at adjacent positions.

[0074] According to an exemplary implementation of this disclosure, presenting a set of cards in a user interface includes: determining a presentation angle associated with a card in the set based on the number of cards in the set; and presenting the cards based on the initial rotation angle and presentation angle of the parent container.

[0075] According to an exemplary implementation of this disclosure, it further includes: in response to determining that the sliding operation has not yet ended, determining an updated rotation angle of the parent container based on the initial rotation angle and the rotation angle of the parent container; and updating a set of cards based on the updated rotation angle and the rendering angle.

[0076] According to an exemplary implementation of this disclosure, the method further includes: in response to determining that the sliding operation has ended and the sliding operation does not meet predetermined conditions, presenting a set of cards based on the initial rotation angle of the parent container and the presentation angle of the set of cards.

[0077] According to an exemplary implementation of this disclosure, the method further includes: in response to determining that the sliding operation has ended and the sliding operation meets predetermined conditions, determining an updated rotation angle of the parent container based on the initial angle and a threshold angle of the parent container; and presenting at least a portion of the set of cards and adjacent cards based on the updated rotation angle of the parent container and the presentation angle of the set of cards.

[0078] According to one exemplary implementation of this disclosure, method 1000 is invoked in a cascading style sheet of an application used to render a user interface.

[0079] Example devices and equipment

[0080] Figure 11A block diagram of an apparatus 1100 for presenting a user interface according to some implementations of the present disclosure is shown. The apparatus 1100 includes: a card presentation module 1110 configured to present a set of cards in a user interface, the content of which is derived from a set of consecutive card contents in a card content sequence; a detection module 1120 configured to detect whether a sliding operation for rotating the set of cards satisfies a predetermined condition; a determination module 1130 configured to, in response to determining that the sliding operation satisfies the predetermined condition, determine adjacent card contents adjacent to the set of consecutive card contents from the card content sequence; and a presentation module 1140 configured to present the adjacent card contents at the adjacent card locations adjacent to the set of cards.

[0081] According to an exemplary implementation of this disclosure, the detection module 1120 includes: an angle determination module configured to determine the rotation angle of a parent container of a set of cards based on the sliding displacement of the sliding operation; a first determination module configured to determine that the sliding operation meets a predetermined condition in response to determining that the rotation angle of the parent container is not lower than a threshold angle; and a second determination module configured to determine that the sliding operation does not meet the predetermined condition in response to determining that the rotation angle of the parent container is lower than a threshold angle.

[0082] According to an exemplary implementation of this disclosure, the determining module 1130 includes: a content selection module configured to select adjacent card content from a sequence of card content based on the sliding direction of the sliding operation, wherein the sliding direction includes a component of any of the following directions: horizontal direction and vertical direction.

[0083] According to an exemplary implementation of this disclosure, the presentation module 1140 further includes: a position selection module configured to select adjacent positions of a group of cards based on the sliding direction; and a card presentation module configured to present adjacent cards at adjacent positions.

[0084] According to an exemplary implementation of this disclosure, the card presentation module includes: a presentation angle determination module configured to determine a presentation angle associated with a card in a set of cards based on the number of cards in the set; and an angle-based card presentation module configured to present cards based on an initial rotation angle of a parent container and a presentation angle.

[0085] According to an exemplary implementation of this disclosure, the device 1100 further includes: an update angle determination module configured to determine an update rotation angle of the parent container based on the initial rotation angle and the rotation angle of the parent container in response to determining that the sliding operation has not ended; and an update module configured to update a set of cards based on the update rotation angle and the presentation angle.

[0086] According to an exemplary implementation of this disclosure, the device 1100 further includes: a bounce module configured to, in response to determining that a sliding operation has ended and that the sliding operation does not meet predetermined conditions, present a set of cards based on the initial rotation angle of the parent container and the presentation angle of the set of cards.

[0087] According to an exemplary implementation of this disclosure, the device 1100 further includes: an update angle determination module configured to determine an update rotation angle of the parent container based on the initial angle and a threshold angle of the parent container in response to determining that the sliding operation has ended and the sliding operation meets predetermined conditions; and a page-turning module configured to present at least a portion of a set of cards and adjacent cards based on the update rotation angle of the parent container and the presentation angle of a set of cards.

[0088] According to one exemplary implementation of this disclosure, the device 1100 is invoked in a cascading style sheet of an application used to render a user interface.

[0089] Figure 12 A block diagram of a device 1200 capable of implementing various implementations of the present disclosure is shown. It should be understood that... Figure 12 The computing device 1200 shown is merely exemplary and should not be construed as limiting the functionality and scope of the implementation described herein. Figure 12 The computing device 1200 shown can be used to implement the method described above.

[0090] like Figure 12 As shown, computing device 1200 is in the form of a general-purpose computing device. Components of computing device 1200 may include, but are not limited to, one or more processors or processing units 1210, memory 1220, storage devices 1230, one or more communication units 1240, one or more input devices 1250, and one or more output devices 1260. Processing unit 1210 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 1220. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of computing device 1200.

[0091] Computing device 1200 typically includes multiple computer storage media. Such media can be any available media accessible to computing device 1200, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 1220 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 1230 can be removable or non-removable media and can include machine-readable media, such as flash drives, disks, or any other media that can be used to store information and / or data (e.g., training data for training) and can be accessed within computing device 1200.

[0092] The computing device 1200 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not explicitly stated... Figure 12 As shown, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks can be provided. In these cases, each drive can be connected to a bus (not shown) via one or more data media interfaces. Memory 1220 may include computer program product 1225 having one or more program modules configured to perform various methods or actions of various implementations of this disclosure.

[0093] The communication unit 1240 enables communication with other computing devices via a communication medium. Additionally, the functionality of the components of the computing device 1200 can be implemented as a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, the computing device 1200 can operate in a networked environment using logical connections to one or more other servers, networked personal computers (PCs), or another network node.

[0094] Input device 1250 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 1260 can be one or more output devices, such as a monitor, speaker, printer, etc. Computing device 1200 can also communicate with one or more external devices (not shown) via communication unit 1240 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with computing device 1200, or with any device (e.g., network card, modem, etc.) that enables computing device 1200 to communicate with one or more other computing devices. Such communication can be performed via input / output (I / O) interface (not shown).

[0095] According to exemplary implementations of this disclosure, a computer-readable storage medium is provided that stores computer-executable instructions thereon, wherein the computer-executable instructions are executed by a processor to implement the methods described above. According to exemplary implementations of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, which are executed by a processor to implement the methods described above. According to exemplary implementations of this disclosure, a computer program product is provided that stores a computer program thereon, which, when executed by a processor, implements the methods described above.

[0096] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatuses, devices, and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.

[0097] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable data processing apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable data processing apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.

[0098] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions that execute on the computer, other programmable data processing apparatus, or other device to perform the functions / actions specified in one or more boxes of a flowchart and / or block diagram.

[0099] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction, which contains one or more executable instructions for implementing the specified logical function. In some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0100] Various implementations of this disclosure have been described above. These descriptions are exemplary and not exhaustive, nor are they limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the various implementations disclosed herein.

Claims

1. A method for presenting a user interface, comprising: A set of cards is presented in the user interface. The content of each set of cards comes from a set of consecutive cards in the card content sequence. The number of cards in the set is different from the number of cards in the card content sequence. The presentation angle of the cards in the set is defined based on the angle between the normal direction of the card and the reference direction. Detect whether the sliding operation used to rotate the set of cards meets predetermined conditions; In response to determining that the sliding operation satisfies the predetermined condition. Determine the adjacent card content that is adjacent to the set of consecutive card content from the card content sequence; as well as The content of the adjacent card is displayed at the adjacent card adjacent to the set of cards.

2. The method according to claim 1, wherein detecting whether the sliding operation satisfies the predetermined condition includes: The rotation angle of the parent container of the group of cards is determined based on the sliding displacement of the sliding operation. In response to determining that the rotation angle of the parent container is not lower than a threshold angle, it is determined that the sliding operation satisfies the predetermined condition; as well as In response to determining that the rotation angle of the parent container is lower than a threshold angle, it is determined that the sliding operation does not meet the predetermined condition.

3. The method according to claim 2, wherein determining the content of the adjacent cards includes: Based on the sliding direction of the sliding operation, the adjacent card content is selected from the card content sequence. The sliding direction includes components of any of the following directions: horizontal direction and vertical direction.

4. The method of claim 3, wherein presenting the content of the adjacent card at the adjacent card further comprises: The adjacent positions of the group of cards are selected based on the sliding direction; as well as The adjacent card is presented at the adjacent position.

5. The method of claim 2, wherein presenting the set of cards in the user interface comprises: The presentation angle associated with the cards in the set of cards is determined based on the number of cards in the set; as well as The card is presented based on the initial rotation angle of the parent container and the presentation angle.

6. The method according to claim 5, further comprising: In response to determining that the sliding operation has not yet ended, The updated rotation angle of the parent container is determined based on the initial rotation angle and the rotation angle of the parent container; as well as The set of cards is updated based on the updated rotation angle and the updated presentation angle.

7. The method according to claim 5, further comprising: In response to determining that the sliding operation has ended and the sliding operation does not meet the predetermined conditions, the set of cards is presented based on the initial rotation angle of the parent container and the presentation angle of the set of cards.

8. The method according to claim 5, further comprising: In response to determining that the sliding operation has ended and that the sliding operation satisfies the predetermined condition. Based on the initial angle and the threshold angle of the parent container, determine the updated rotation angle of the parent container; as well as Based on the updated rotation angle of the parent container and the presentation angle of the set of cards, at least a portion of the set of cards and the adjacent cards are presented.

9. The method of claim 1, wherein the method is invoked in a cascading style sheet of an application used to render the user interface.

10. An apparatus for presenting a user interface, comprising: A card presentation module is configured to present a set of cards in a user interface. The content of the set of cards is derived from a set of consecutive card content in a card content sequence. The number of cards in the set is different from the number of card content in the card content sequence. The presentation angle of the cards in the set is defined based on the angle between the normal direction of the card and the reference direction. The detection module is configured to detect whether the sliding operation for rotating the set of cards meets predetermined conditions; A determining module is configured to, in response to determining that the sliding operation satisfies the predetermined condition, determine adjacent card content from the card content sequence that is adjacent to the set of consecutive card content; as well as The presentation module is configured to present the content of the adjacent card at the adjacent card adjacent to the set of cards.

11. The apparatus of claim 10, wherein the detection module comprises: An angle determination module is configured to determine the rotation angle of the parent container of the set of cards based on the sliding displacement of the sliding operation. The first determining module is configured to determine that the sliding operation satisfies the predetermined condition in response to determining that the rotation angle of the parent container is not lower than a threshold angle; as well as The second determining module is configured to determine that the sliding operation does not meet the predetermined condition in response to determining that the rotation angle of the parent container is lower than a threshold angle.

12. The apparatus of claim 11, wherein the determining module comprises: The content selection module is configured to select adjacent card content from the card content sequence based on the sliding direction of the sliding operation, wherein the sliding direction includes a component of either the horizontal direction or the vertical direction.

13. The apparatus of claim 12, wherein the presentation module further comprises: A position selection module is configured to select the adjacent positions of the group of cards based on the sliding direction; as well as A card presentation module is configured to present the adjacent card at the adjacent location.

14. The apparatus of claim 11, wherein the card presentation module comprises: The presentation angle determination module is configured to determine the presentation angle associated with a card in the set of cards based on the number of cards in the set; as well as An angle-based card presentation module is configured to present the card based on the initial rotation angle of the parent container and the presentation angle.

15. The apparatus of claim 14, further comprising: An update angle determination module is configured to determine an update rotation angle of the parent container based on the initial rotation angle and the rotation angle of the parent container in response to determining that the sliding operation has not yet ended. as well as An update module is configured to update the set of cards based on the update rotation angle and the presentation angle.

16. The apparatus of claim 14, further comprising: A bounce module is configured to, in response to determining that the sliding operation has ended and the sliding operation does not meet the predetermined conditions, present the set of cards based on the initial rotation angle of the parent container and the presentation angle of the set of cards.

17. The apparatus of claim 14, further comprising: An update angle determination module is configured to determine the update rotation angle of the parent container based on the initial angle and the threshold angle of the parent container in response to determining that the sliding operation has ended and the sliding operation satisfies the predetermined condition. as well as A page-turning module is configured to present at least a portion of the set of cards and the adjacent cards based on the updated rotation angle of the parent container and the presentation angle of the set of cards.

18. The apparatus of claim 10, wherein the apparatus is invoked in a cascading style sheet of an application for rendering the user interface.

19. An electronic device comprising: At least one processing unit; as well as At least one memory, coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, which, when executed by the at least one processing unit, cause the electronic device to perform the method according to any one of claims 1 to 9.

20. A computer-readable storage medium having a computer program stored thereon, the computer program causing the processor to implement the method according to any one of claims 1 to 9 when executed by a processor.

Images