Interface interaction method and apparatus, device, and storage medium

Abstract

Embodiments of the present disclosure relate to an interface interaction method and apparatus, a device, and a storage medium. The method proposed herein comprises: presenting a plurality of media components in a target style in a target interface, wherein the target style indicates that at least some of the plurality of media components are organized in a plurality of columns or a plurality of rows; triggering a first media component among the plurality of media components to play corresponding first media content; in response to a swiping operation for the target interface, adjusting the display positions of the plurality of media components in the target interface; and in response to a first display position of a second media component among the plurality of media components being updated to satisfy a first trigger condition, triggering the second media component to play corresponding second media content, wherein the first trigger condition corresponds to a column or row where the second media component is located, and different columns or rows correspond to different trigger conditions. In this way, the embodiments of the present disclosure can improve the efficiency of media content display.

Description

A method, apparatus, device, and storage medium for user interface interaction Technical Field

[0001] The exemplary embodiments disclosed herein generally relate to the field of computers, and particularly to an interface interaction method, apparatus, device, and computer-readable storage medium. Background Technology

[0002] In recent years, with the development of the internet, more and more users are viewing media content on online platforms. To meet users' viewing needs and improve the efficiency of media content display, online platforms often present multiple media content items on the same interface. However, the playback mechanisms provided by online platforms for these multiple media content items cannot meet users' needs.

[0003] Summary of the Invention

[0004] In a first aspect of this disclosure, a user interface interaction method is provided, comprising: presenting a plurality of media components in a target interface in a target style, the target style indicating that at least some of the plurality of media components are organized in multiple columns or multiple rows; triggering a first media component among the plurality of media components to play corresponding first media content; adjusting the display position of the plurality of media components in the target interface in response to a swiping operation on the target interface; and triggering the second media component to play corresponding second media content in response to a first display position of a second media component among the plurality of media components being updated to satisfy a first triggering condition, wherein the first triggering condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different triggering conditions.

[0005] In a second aspect of this disclosure, an apparatus for interface interaction is provided. The apparatus includes: a presentation module configured to present a plurality of media components in a target interface in a target style, the target style indicating that at least a portion of the plurality of media components are organized in multiple columns or rows; a first trigger module configured to trigger a first media component among the plurality of media components to play corresponding first media content; an adjustment module configured to adjust the display position of the plurality of media components in the target interface in response to a swipe operation on the target interface; and a second trigger module configured to trigger the second media component to play corresponding second media content in response to a first display position of a second media component among the plurality of media components being updated to satisfy a first trigger condition, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

[0006] In a third aspect of this disclosure, an electronic device is provided. The 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. When executed by the at least one processing unit, the instructions cause the device to perform the method of the first aspect.

[0007] In a fourth aspect of this disclosure, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program that can be executed by a processor to implement the method of the first aspect.

[0008] It should be understood that the content described in this content section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0009] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. In the drawings, the same or similar reference numerals denote the same or similar elements, wherein:

[0010] Figure 1 shows a schematic diagram of an example environment in which some embodiments of the present disclosure can be implemented;

[0011] Figures 2A to 2E illustrate example interfaces according to some embodiments of the present disclosure;

[0012] Figures 3A and 3B illustrate example interfaces according to some embodiments of the present disclosure;

[0013] Figure 4 shows a flowchart of an example process of interface interaction according to some embodiments of the present disclosure;

[0014] Figure 5 shows a schematic structural block diagram of an example device for interface interaction according to some embodiments of the present disclosure; and

[0015] Figure 6 shows a block diagram of an electronic device capable of implementing several embodiments of the present disclosure. Detailed Implementation

[0016] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments 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 embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0017] It should be noted that the headings of any section / subsection provided herein are not limiting. Various embodiments are described throughout this document, and embodiments of any type may be included under any section / subsection. Furthermore, embodiments described in any section / subsection may be combined in any way with any other embodiments described in the same section / subsection and / or different sections / subsections.

[0018] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may also be included below. The terms "first", "second", etc., may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0019] The embodiments of this disclosure may involve user data, data acquisition, and / or use. All of these aspects comply with applicable laws, regulations, and relevant provisions. In the embodiments of this disclosure, all data collection, acquisition, processing, manipulation, forwarding, and use are conducted with the user's knowledge and confirmation. Accordingly, in implementing the embodiments of this disclosure, the type, scope of use, and usage scenarios of any data or information that may be involved should be communicated to the user and their authorization obtained in accordance with relevant laws and regulations through appropriate means. The specific methods of notification and / or authorization may vary depending on the actual situation and application scenario, and the scope of this disclosure is not limited in this respect.

[0020] In this specification and the embodiments, any processing of personal information will be carried out only under the premise of legality (such as obtaining the consent of the personal information subject, or being necessary for the performance of a contract), and will only be carried out within the scope stipulated or agreed upon. A user's refusal to process personal information beyond what is necessary for basic functions will not affect the user's use of basic functions.

[0021] As briefly mentioned above, with the development of the internet, more and more users are viewing media content on online platforms. To meet users' viewing needs and improve the efficiency of media content display, online platforms often present multiple media content items on the same interface. For example, multiple media content items may be presented in multiple rows or columns. While presenting multiple media content items, the online platform needs to play the corresponding media content to meet users' viewing needs. However, when playing multiple media content items, the playback mechanism of the online platform is too simplistic (for example, only the media content on one side can be triggered to play), which fails to meet users' needs.

[0022] Embodiments of this disclosure propose a scheme for interface interaction. According to this scheme, multiple media components can be presented in a target interface in a target style, the target style indicating that at least some of the multiple media components are organized in multiple columns or rows; a first media component among the multiple media components is triggered to play corresponding first media content; in response to a swipe operation on the target interface, the display positions of the multiple media components in the target interface are adjusted; and in response to a first display position of a second media component among the multiple media components being updated to satisfy a first trigger condition, the second media component is triggered to play corresponding second media content, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

[0023] In this way, embodiments of this disclosure can adjust the position of media components based on user swiping operations, and determine whether the triggering conditions corresponding to the row or column where the media component is located are met, thereby triggering the corresponding playback component to play the corresponding media content. Therefore, embodiments of this disclosure can dynamically switch the preview of media content in the display interface of multiple media contents based on the display position of the media components, thereby improving the display efficiency of media content.

[0024] The following section provides a detailed description of various example implementations of this scheme, with reference to the accompanying drawings.

[0025] Example Environment

[0026] Figure 1 illustrates a schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented. As shown in Figure 1, the example environment 100 may include an electronic device 110.

[0027] In this example environment 100, electronic device 110 may run an application 120 that supports user interface interaction. Application 120 may be any suitable type of application for user interface interaction, and examples may include, but are not limited to, video applications, social applications, or other suitable applications. User 140 may interact with application 120 via electronic device 110 and / or its attached devices.

[0028] In environment 100 of Figure 1, if application 120 is active, electronic device 110 can use application 120 to present interface 150 for supporting interface interaction.

[0029] In some embodiments, electronic device 110 communicates with server 130 to provide services to application 120. Electronic device 110 can be any type of mobile terminal, fixed terminal, or portable terminal, including mobile phones, desktop computers, laptop computers, notebook computers, netbook computers, tablet computers, media computers, multimedia tablets, handheld computers, portable gaming terminals, VR / AR devices, personal communication system (PCS) devices, personal navigation devices, personal digital assistants (PDAs), audio / video players, digital cameras / camcorders, positioning devices, television receivers, radio receivers, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, electronic device 110 can also support any type of user-facing interface (such as "wearable" circuitry).

[0030] Server 130 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks, and big data and artificial intelligence platforms. Server 130 may include, for example, computing systems / servers such as mainframes, edge computing nodes, computing devices in a cloud environment, etc. Server 130 can provide backend services for applications 120 that support virtual scenarios in electronic devices 110.

[0031] A communication connection can be established between server 130 and electronic device 110. This communication connection can be established via wired or wireless means. The communication connection may include, but is not limited to, Bluetooth, mobile network connections, Universal Serial Bus (USB), and Wireless Fidelity (WiFi) connections; the embodiments of this disclosure are not limited in this respect. In the embodiments of this disclosure, server 130 and electronic device 110 can achieve signaling interaction through the communication connection between them.

[0032] It should be understood that the structure and function of the various elements in environment 100 are described for illustrative purposes only and do not imply any limitation on the scope of this disclosure.

[0033] The following description will continue with reference to the accompanying drawings, which will provide some exemplary embodiments of this disclosure.

[0034] User Interface

[0035] Example 1

[0036] Figures 2A to 2E illustrate example interfaces 200A to 200E according to some embodiments of the present disclosure. Interfaces 200A to 200E may be provided, for example, by the electronic device 110 shown in Figure 1.

[0037] In some embodiments, as shown in FIG2A, the electronic device 110 may present a target interface 200A. The electronic device 110 may present multiple media components in the target interface 200A. For example, the multiple media components may include media component 205-1, media component 205-2, media component 205-3, media component 205-4, etc. As an example, the media components may be used to play media content. As an example, the media content may include, for example, music content, text and image content, video content, etc.

[0038] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may present multiple media components in a target style. The target style indicates that at least some of the multiple media components are organized in multiple rows or columns.

[0039] In some embodiments, continuing to refer to FIG2A, the electronic device 110 triggers a first media component among a plurality of media components to play corresponding first media content. As an example, the electronic device 110 may trigger the first media content corresponding to the first media component (e.g., media component 205-1).

[0040] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may, in response to the triggering of the presentation of the target interface 200A, determine a first media component based on the order of multiple media components in the target interface. As an example, the multiple media components in the target interface may be arranged in a zigzag order (e.g., arranged from left to right within the same row, and from top to bottom between rows). For example, media components 205-1 and 205-2 in the first row may correspond to a first order and a second order, respectively. Media components 205-3 and 205-4 in the second row may correspond to a third order and a fourth order, respectively. As an example, the electronic device 110 may determine the media component ranked first in the target interface as the first media component (e.g., media component 205-1 in the first order).

[0041] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may provide a component interaction area 215 (also referred to as a sliding area 215) in the target interface. The electronic device 110 may present multiple media components in the component interaction area 215. Furthermore, the electronic device 110 may receive user sliding operations in the component interaction area 215.

[0042] In some embodiments, continuing to refer to FIG2A, the area dimensions of the component interaction area 215 may include an area height and an area width. The area height may also be referred to as the area length. The area height may be, for example, H1. The area height may indicate a sliding distance limit in a first direction (e.g., the direction indicated by operation 211). The area width may indicate a sliding distance limit perpendicular to the first direction.

[0043] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may determine the updated area size of the component interaction area 215 in response to a change in the layout of the target interface 200A.

[0044] In some embodiments, changes to the layout of the target interface 200A may include displaying additional content areas in the target interface 200A.

[0045] In some embodiments, as shown in FIG2B, the electronic device 110 may determine the updated area size of the component interaction area 215 in response to the display of an additional content area in the target interface 200B. As an example, the electronic device 110 may determine the updated area size of the component interaction area 215 (e.g., the area height is updated from H1 to H2) in response to the display of a set of filter components 220 in the target interface 200B. As an example, the display of the additional content area in the target interface 200B may be triggered based on user actions (e.g., clicking on a control associated with the additional content area) or automatically triggered in the interface based on preset logic (e.g., timed display).

[0046] In some embodiments, changes to the layout of the target interface 200A may include stopping the display of existing content areas in the target interface 200A.

[0047] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may determine the updated area size of the component interaction area 215 in response to the cessation of displaying an existing content area in the target interface 200A. As an example, the electronic device 110 may determine the updated area size of the component interaction area 215 (e.g., the area height is updated from H2 to H1) in response to the cessation of displaying a set of filter components 220 in the target interface 200A. As an example, the cessation of displaying an existing content area in the target interface 200B may be triggered based on user operation (e.g., clicking on a control associated with an additional content area), or automatically triggered in the interface based on preset logic (e.g., timed cessation of display).

[0048] As an example, the display and stopping of the aforementioned set of filtering components 220 are merely illustrative, and this disclosure is not intended to limit the number, display position, or specific form of additional or existing content areas. For example, in the target interface 200A, different additional content areas are displayed at the top and bottom of the component interaction area 215.

[0049] In some embodiments, continuing to refer to FIG2A, the electronic device 110 can adjust the display positions of multiple media components in the target interface 200A in response to a sliding operation on the target interface 200A. As an example, as shown in FIG2A, the electronic device 110 can adjust the display positions of multiple media components in the target interface 200A based on operation 211 on the target interface 200A. As an example, the electronic device 110 can move multiple media components in the sliding direction corresponding to operation 211 based on the sliding distance of operation 211 to adjust the display positions of multiple media components in the target interface 200A.

[0050] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may trigger the second media component to play corresponding second media content in response to the first display position of the second media component among a plurality of media components being updated to meet a first trigger condition. In some embodiments, the first trigger condition corresponds to the first column or first row where the second media component is located. Different columns or rows correspond to different trigger conditions.

[0051] In some embodiments, continuing to refer to FIG2A, the first triggering condition may include: the first boundary of the second media component reaching a preset position. The preset position may be determined based on the sliding direction of the sliding operation and the first column and / or first row where the second media component is located.

[0052] In some embodiments, continuing to refer to FIG2A, the first boundary is the boundary of the image area of ​​the second media component. As an example, as shown in FIG2A, the boundary of the image area of ​​media component 205-2 can be the area indicated by the bold border in FIG2A. It is worth noting that the bold border here is only for clearly illustrating the boundary of the image area; in actual display, the border display style of media component 205-2 and other media components can be the same.

[0053] In some embodiments, continuing to refer to FIG2A, the first boundary corresponds to the sliding direction. As an example, the boundary corresponding to the direction pointed to by the sliding direction is the first boundary. As an example, the sliding direction corresponding to operation 211 is the first direction. In this case, the first boundary of media component 205-2 can be the upper boundary 206-1 in the boundary of the image area of ​​the second media component.

[0054] The following examples illustrate different triggering conditions corresponding to different columns.

[0055] In some embodiments, continuing to refer to FIG2A, media components 205-1 and 205-3 can be considered as being in column A. Media components 205-2 and 205-4 can be considered as being in column B.

[0056] As an example, continuing to refer to Figure 2A, column A can be associated with a first preset position. The first preset position could be, for example, the height of trigger line A210-2. As shown in Figure 2A, the height H of trigger line A210-2... A It can be determined based on the area size of the component interaction area 215 (e.g., area height H1) and / or the component size of the media component (e.g., component height H2). As an example, H... A It can be based on formula H A =H1-(H2+H') is determined by H'. Where H' is associated with the gap between media components and / or between the top boundaries of the media component-component interaction area 215. This disclosure is not intended to limit the specific value of H'.

[0057] As an example, continuing to refer to Figure 2A, column B is associated with the second preset position. The second preset position could be, for example, the height H where trigger line B210-1 is located. B As an example, as shown in Figure 2A, the height H of the trigger line B210-1 is... B It can be determined based on the area size of the component interaction area 215 (e.g., area height H1) and / or the component size of the media component (e.g., component height H2). As an example, H... B It can be based on formula H B =H A The distance is determined by +(H2+H') / 2. Here, (H2+H') / 2 can represent the distance between trigger line A210-2 and trigger line B210-1.

[0058] In some embodiments, the electronic device 110 may adjust the aforementioned H based on changes in the region size (e.g., region height H1) and / or the component size of the media component (e.g., component height H2). A and H B Changes to the area size and / or the component size of the media components can be found in the description of the changes to the target interface layout mentioned above, and will not be repeated here.

[0059] In some embodiments, continuing to refer to FIG2A, the electronic device 110 may, upon receiving operation 211, trigger the second media component to play corresponding second media content in response to the first display position of the second media component being updated to meet the first trigger condition. As an example, after receiving operation 211, the electronic device 110 may, in response to the upper boundary 206-1 of the media component 205-2 reaching the second preset position corresponding to the trigger line B210-1 (exactly at or above the height H of the trigger line B210-1), trigger the second media component to play corresponding second media content. B This triggers media component 205-2 to play the corresponding media content.

[0060] In some embodiments, continuing to refer to FIG2C, the electronic device 110 may trigger the third media component to play corresponding third media content in response to the second display position of a third media component among a plurality of media components being updated to meet a second triggering condition. The second triggering condition corresponds to the second column or second row where the second media component is located.

[0061] As an example, as shown in Figure 2C, electronic device 110 can adjust the display positions of multiple media components in target interface 200C based on operation 211. Further, electronic device 110 can be updated to meet a second condition (e.g., reaching a first preset position corresponding to trigger line A210-2, which is exactly at or above the height H of trigger line A210-2) in response to a second display position of a third media component (e.g., the upper boundary 206-2 of media component 205-3). A This triggers media component 205-3 to play the corresponding media content. As an example, media component 205-3 is located in column A (column A is different from column B, where media component 205-2 is located).

[0062] In some embodiments, continuing to refer to FIG2C, when the upper boundary 206-2 of media component 205-3 reaches the first preset position corresponding to trigger line A210-2, the upper boundary 206-1 of media component 205-2 is still at the second preset position corresponding to trigger line B210-1. As an example, at this time, the media component that the electronic device 110 should trigger to play is media component 205-3, based on the sliding direction (e.g., the first direction) corresponding to operation 211. As an example, the first direction can determine to prioritize triggering the media component that is later in the aforementioned Z-shaped arrangement to play the corresponding media content. For example, in the aforementioned Z-shaped arrangement, media component 205-2 corresponds to the second order, and media component 205-3 corresponds to the third order, so the first direction can determine to prioritize triggering the media component 205-3, which is in the third order, to play the corresponding media content.

[0063] In some embodiments, the electronic device 110 may trigger the second media component to stop playing the second media content in response to the second display position of the third media component being updated to meet the second triggering condition.

[0064] As an example, continuing to refer to Figure 2C, the electronic device 110 can respond to the upper boundary 206-2 of the media component 205-3 reaching the first preset position corresponding to the trigger line A210-2, triggering the media component 205-2 to stop playing the corresponding media content.

[0065] In some embodiments, continuing to refer to FIG2C, the electronic device 110 can continue to adjust the display positions of multiple media components based on operation 211. The electronic device 110 can trigger the media component 205-4 to play the corresponding media content and trigger the media component 205-3 to stop playing the corresponding media content in response to the upper boundary 206-3 of the media component 205-4 reaching the second preset position corresponding to the trigger line B210-1.

[0066] In some embodiments, as shown in FIG2D, the electronic device 110 can continue to adjust the display positions of multiple media components based on operation 211. The electronic device 110 can trigger the media component 205-4 to stop playing corresponding media content in response to the second boundary of the media component 205-4 reaching a preset position. The second boundary is opposite to the first boundary, meaning the second boundary and the first boundary can be located on opposite sides of the boundary of the image area of ​​the media component. As an example, the electronic device 110 can respond to the lower boundary 207-1 of the media component 205-4 reaching the second preset position corresponding to the trigger line B210-1 (exactly at or above the height H of the trigger line B210-1). B This triggers media component 205-4 to stop playing the corresponding media content.

[0067] In some embodiments, continuing to refer to FIG2D, the electronic device 110 may present components 225 other than the media components in the target interface 200D. The electronic device 110 may determine the area displayed by the multiple media components in the current display state of the target interface 200D in response to the fact that the display positions of multiple media components in the target interface 200D do not meet the corresponding trigger conditions. As an example, as shown in FIG2D, media components 205-3 and 205-5 in the target interface 200D do not meet the first preset position corresponding to trigger line A210-2, and media components 205-4 and 205-6 do not meet the second preset position corresponding to trigger line B210-1. Taking media component 205-3 as an example, although its first boundary is above the first preset position corresponding to trigger line A210-2, the second boundary (i.e., the lower boundary 207-2) of media component 205-3 is also above the first preset position corresponding to trigger line A210-2. At this point, the display position of media component 205-3 can be considered as not meeting the first preset position corresponding to trigger line A210-2. The same applies to media component 205-4.

[0068] In some embodiments, continuing to refer to FIG2D, the area displayed by media component 205-3 in the current display state of target interface 200D can be S1, the area displayed by media component 205-4 in the current display state of target interface 200D can be S2, the area displayed by media component 205-5 in the current display state of target interface 200D can be S3, and the area displayed by media component 205-6 in the current display state of target interface 200D can be S4. As an example, S3 = S4 > S1 = S2.

[0069] In some embodiments, continuing to refer to FIG2D, the electronic device 110 can trigger the target media component among the multiple media components to play corresponding media content based on the area displayed by the multiple media components in the current display state of the target interface 200D.

[0070] In some embodiments, continuing to refer to FIG2D, the electronic device 110 may determine a set of candidate media components based on the order of the areas displayed by multiple media components in the current display state of the target interface 200D. As an example, the electronic device 110 may select the media component with the largest displayed area as a candidate media component. As an example, since S3=S4>S1=S2, a set of candidate media components may include media playback component 205-5 and media component 205-6.

[0071] In some embodiments, continuing to refer to FIG2D, the electronic device 110 can determine the target media component to be triggered from a set of candidate media components based on the direction of the received additional sliding operation. As an example, as shown in FIG2D, the electronic device 110 can determine the target playback component from a set of candidate components based on the sliding direction (e.g., a first direction) corresponding to the received operation 211. As an example, the first direction can determine that the media component that appears earlier in the aforementioned zigzag arrangement will play the corresponding media content first. For example, based on the zigzag arrangement, the order of media component 205-5 is earlier than the order of media component 205-6. Therefore, the target media component can be media component 205-5.

[0072] As an example, the logic for determining the media component to be triggered based on a zigzag sorting by sliding direction is reversed when multiple media components meet the triggering conditions and when no media component meets the triggering conditions. For instance, if multiple media components meet the triggering conditions (e.g., when a preset position is reached), the media component that is later in the zigzag sorting is determined to be the media component to be triggered by using the first direction. If none of the multiple media components meet the triggering conditions (e.g., none of them have reached the preset position), the media component that is earlier in the zigzag sorting is determined to be the media component to be triggered by using the first direction.

[0073] In some embodiments, as shown in FIG2E, the second media component may be associated with multiple media contents. As an example, the electronic device 110 may present media components 205-7 associated with multiple media contents.

[0074] In some embodiments, continuing to refer to FIG2E, the electronic device 110 may trigger the second media component to play the second media content among the multiple media contents based on the display order of the multiple media contents in the second media component. As an example, the electronic device 110 may trigger the media component 205-7 to play the media content 208 that is in the first display order among the multiple media contents based on the left-to-right display order of the multiple media contents in the media component 205-7.

[0075] Example 2

[0076] Figures 3A and 3B illustrate example interfaces 300A to 300B according to some embodiments of the present disclosure. Interfaces 300A to 300B may be provided, for example, by the electronic device 110 shown in Figure 1.

[0077] In some embodiments, as shown in FIG3A, the electronic device 110 may present a target interface 300A. The electronic device 110 may present multiple media components in the target interface 300A. For example, the multiple media components may include media component 305-1, media component 305-2, media component 305-3, media component 305-4, etc. As an example, the media components may be used to play media content.

[0078] In some embodiments, continuing to refer to FIG3A, the electronic device 110 may present multiple media components in a target style. The target style indicates that at least some of the multiple media components are organized in multiple rows or columns.

[0079] In some embodiments, continuing to refer to FIG3A, the electronic device 110 triggers a first media component among a plurality of media components to play corresponding first media content. As an example, the electronic device 110 may trigger the first media content corresponding to the first media component (e.g., media component 305-1).

[0080] In some embodiments, continuing to refer to FIG3A, the electronic device 110 may, in response to the triggering of the presentation of the target interface 300A, determine a first media component based on the order of multiple media components in the target interface. As an example, the multiple media components in the target interface may be arranged in a zigzag order (e.g., arranged from left to right within the same row, and from top to bottom between rows). For example, media components 305-1 and 305-2 in the first row may correspond to a first order and a second order, respectively. Media components 305-3 and 305-4 in the second row may correspond to a third order and a fourth order, respectively. As an example, the electronic device 110 may determine the media component ranked first in the target interface as the first media component (e.g., media component 305-1 in the first order).

[0081] In some embodiments, continuing to refer to FIG3A, the electronic device 110 may provide a component interaction area 315 (also referred to as a sliding area 315) in the target interface. The electronic device 110 may present multiple media components in the component interaction area 315. Furthermore, the electronic device 110 may receive user sliding operations in the component interaction area 315.

[0082] In some embodiments, continuing to refer to FIG3A, the area dimensions of the component interaction area 315 may include an area height and an area width. The area height may also be referred to as the area length. The area height may be, for example, H3. The area height H3 may indicate a sliding distance limit in a second direction (e.g., the direction indicated by operation 311). The area width may indicate a sliding distance limit perpendicular to the first direction.

[0083] In some embodiments, continuing to refer to FIG3A, the electronic device 110 can adjust the display positions of multiple media components in the target interface 300A in response to a sliding operation on the target interface 300A. As an example, as shown in FIG3A, the electronic device 110 can adjust the display positions of multiple media components in the target interface 300A based on an operation 311 on the target interface 300A. As an example, the electronic device 110 can move multiple media components in the sliding direction corresponding to operation 311 based on the sliding distance of operation 311 to adjust the display positions of the multiple media components in the target interface 300A.

[0084] In some embodiments, continuing to refer to FIG3A, the electronic device 110 may trigger the second media component to play corresponding second media content in response to the first display position of the second media component among a plurality of media components being updated to meet a first trigger condition. In some embodiments, the first trigger condition corresponds to the first column or first row where the second media component is located. Different columns or rows correspond to different trigger conditions.

[0085] In some embodiments, continuing to refer to FIG3A, the first triggering condition may include: the first boundary of the second media component reaching a preset position. The preset position may be determined based on the sliding direction of the sliding operation and the first column and / or first row where the second media component is located.

[0086] In some embodiments, continuing to refer to FIG3A, the first boundary is the boundary of the image area of ​​the second media component. As an example, as shown in FIG3A, the boundary of the image area of ​​media component 305-2 can be the area indicated by the bold border in FIG3A. It is worth noting that the bold border here is only for clearly illustrating the boundary of the image area; in actual display, the border display style of media component 305-2 and other media components can be the same.

[0087] In some embodiments, continuing to refer to FIG3A, the first boundary corresponds to the sliding direction. As an example, the boundary corresponding to the direction pointed to by the sliding direction is the first boundary. As an example, the sliding direction corresponding to operation 311 is the second direction. In this case, the first boundary of media component 305-2 can be the lower boundary 306-2 in the boundary of the image area of ​​the second media component.

[0088] The following examples illustrate different triggering conditions corresponding to different columns.

[0089] In some embodiments, continuing to refer to FIG3A, media components 305-1 and 305-3 can be considered to be in column C. Media components 205-2 and 205-4 can be considered to be in column D.

[0090] As an example, continuing to refer to Figure 2A, column C can be associated with a first preset position. The first preset position could be, for example, the height of trigger line C310-1. As an example, as shown in Figure 3A, the height H of trigger line C310-1... C It can be determined based on the region size of the component interaction area 315 (e.g., region height H3) and / or the component size of the media component (e.g., component height H4 and the image region height H5 of the media component). As an example, H C It can be based on formula H C =H3-(H4+H') / 2-H5. Where H' is associated with the gap between media components and / or between the top boundaries of the media component-component interaction area 315. This disclosure is not intended to limit the specific value of H'. Wherein, (H4+H') / 2 can characterize the distance between trigger line C310-1 and trigger line D310-2.

[0091] As an example, continuing to refer to Figure 3A, column D is associated with the second preset position. The second preset position could be, for example, the height H where trigger line D310-2 is located. D As an example, as shown in Figure 3A, the height H of the trigger line D310-2 is... D It can be determined based on the region size of the component interaction area 315 (e.g., region height H3) and / or the component size of the media component (e.g., image region height H5 of the media component). As an example, H D It can be based on formula H D =H3-(H5+H') is the value.

[0092] In some embodiments, continuing to refer to FIG3A, after receiving operation 311, electronic device 110 may, in response to the first display position of the second media component being updated to meet the first trigger condition, trigger the second media component to play the corresponding second media content. As an example, after receiving operation 311, electronic device 110 may, in response to the lower boundary 306-3 of media component 305-3 reaching the first preset position corresponding to trigger line C310-1 (exactly at or below the height H of trigger line C310-1), trigger the second media component to play the corresponding second media content. C This triggers media component 305-3 to play the corresponding media content.

[0093] In some embodiments, continuing to refer to FIG3B, the electronic device 110 may trigger the third media component to play corresponding third media content in response to the second display position of the third media component among a plurality of media components being updated to meet a second triggering condition. The second triggering condition corresponds to the second column or second row where the second media component is located.

[0094] As an example, as shown in Figure 3B, electronic device 110 can adjust the display positions of multiple media components in target interface 300B based on operation 311. Further, electronic device 110 can be updated to meet a second condition (e.g., reaching a second preset position corresponding to trigger line D310-2, which is exactly at or below the height H of trigger line D310-2) in response to a second display position of a third media component (e.g., the lower boundary 306-2 of media component 305-2). D This triggers media component 305-2 to play the corresponding media content. As an example, media component 305-2 is located in column D (column D is different from column C, where media component 305-3 is located).

[0095] In some embodiments, continuing to refer to FIG3B, when the lower boundary 306-2 of media component 305-2 reaches the second preset position corresponding to trigger line D310-2, the lower boundary 306-3 of media component 305-3 is still at the first preset position corresponding to trigger line C310-1. As an example, at this time, the media component that the electronic device 110 should trigger to play is media component 305-3, based on the sliding direction (e.g., the second direction) corresponding to operation 311. As an example, the second direction can determine that the media component that is earlier in the aforementioned Z-shaped arrangement should be triggered to play the corresponding media content. For example, in the aforementioned Z-shaped arrangement, media component 305-2 corresponds to the second order, and media component 305-3 corresponds to the third order, so the second direction can determine that the media component 305-2 in the second order should be triggered to play the corresponding media content.

[0096] In some embodiments, the electronic device 110 may trigger the second media component to stop playing the second media content in response to the second display position of the third media component being updated to meet the second triggering condition.

[0097] As an example, continuing to refer to Figure 3B, the electronic device 110 can trigger the media component 305-3 to stop playing the corresponding media content in response to the lower boundary 306-2 of the media component 305-2 reaching the second preset position corresponding to the trigger line D310-2.

[0098] In some embodiments, referring again to FIG3B, the electronic device 110 may continue to adjust the display positions of multiple media components based on operation 311. The electronic device 110 may trigger media component 305-1 to play corresponding media content and trigger media component 305-2 to stop playing corresponding media content in response to the lower boundary 306-1 of media component 305-1 reaching the first preset position corresponding to trigger line C310-1.

[0099] Based on the process described above, embodiments of this disclosure can determine or adjust different preset positions for triggering media component playback based on the component interaction area, media components, and other components in the target interface, as well as based on different sliding directions. Furthermore, embodiments of this disclosure can adjust the position of the media component based on the user's sliding operation, and can determine whether the trigger condition corresponding to its row or column is met based on the media component's position, thereby triggering the corresponding playback component to play the corresponding media content. In this way, embodiments of this disclosure can dynamically switch the preview of media content in a multi-media content display interface based on the display position and sliding direction of the media component, thereby improving the efficiency of media content display.

[0100] Example process

[0101] Figure 4 illustrates a flowchart of an example process 400 of interface interaction according to some embodiments of the present disclosure. Process 400 can be implemented at electronic device 110. Process 400 will now be described with reference to Figure 1.

[0102] As shown in the figure, in box 410, electronic device 110 presents multiple media components in a target interface with a target style, the target style indicating that at least some of the multiple media components are organized in multiple columns or rows.

[0103] In box 420, electronic device 110 triggers the first media component among multiple media components to play the corresponding first media content.

[0104] In frame 430, electronic device 110 adjusts the display position of multiple media components in the target interface in response to a swipe operation on the target interface.

[0105] In box 440, electronic device 110 responds to the first display position of a second media component among a plurality of media components being updated to meet a first trigger condition, triggering the second media component to play corresponding second media content, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

[0106] In some embodiments, the first triggering condition includes: the first boundary of the second media component reaches a preset position, wherein the preset position is determined based on the sliding direction of the sliding operation and the first column and / or first row where the second media component is located, and the first boundary corresponds to the sliding direction.

[0107] In some embodiments, the preset position is also determined based on the area size of the component interaction area in the target interface and / or the component size of the media component.

[0108] In some embodiments, process 400 further includes: determining the updated area size of the component interaction area in response to a change in the layout of the target interface; and adjusting a preset position based on the updated area size.

[0109] In some embodiments, changes to the layout of the target interface include: displaying additional content areas in the target interface; and / or stopping the display of existing content areas in the target interface.

[0110] In some embodiments, process 400 further includes: in response to the second boundary of the second media component reaching a first preset position, triggering the second media component to stop playing the second media content, wherein the second boundary is opposite to the first boundary.

[0111] In some embodiments, the first boundary and / or the second boundary are the boundaries of the image region of the second media component.

[0112] In some embodiments, process 400 further includes: in response to a second display position of a third media component among a plurality of media components being updated to satisfy a second triggering condition, triggering the third media component to play corresponding third media content, wherein the second triggering condition corresponds to the second column or second row where the second media component is located.

[0113] In some embodiments, the second column is different from the first column, or the second row is different from the first row.

[0114] In some embodiments, process 400 further includes: in response to the second display position of the third media component being updated to meet a second triggering condition, triggering the second media component to stop playing the second media content.

[0115] In some embodiments, process 400 further includes: in response to the target interface being triggered to be rendered, determining a first media component based on the order of multiple media components in the target interface.

[0116] In some embodiments, process 400 further includes: in response to the fact that the display positions of multiple media components in the target interface do not meet the corresponding triggering conditions, determining the area displayed by the multiple media components in the current display state of the target interface; and based on the displayed area, triggering the target media component among the multiple media components to play the corresponding media content.

[0117] In some embodiments, process 400 further includes: determining a set of candidate media components based on the sorting of the displayed areas; and determining a target media component to be triggered from the set of candidate components based on the direction of a received additional sliding operation.

[0118] In some embodiments, the second media component is associated with multiple media contents, and triggering the second media component to play the corresponding second media content includes: triggering the second media component to play the second media content among the multiple media contents based on the display order of the multiple media contents in the second media component.

[0119] Example devices and equipment

[0120] Embodiments of this disclosure also provide corresponding apparatus for implementing the methods or processes described above. Figure 5 shows a schematic structural block diagram of an example apparatus 500 for interface interaction according to certain embodiments of this disclosure. Apparatus 500 can be implemented as or included in an electronic device. The various modules / components in apparatus 500 can be implemented by hardware, software, firmware, or any combination thereof.

[0121] As shown in Figure 5, the device 500 includes a presentation module 510 configured to present multiple media components in a target interface in a target style, the target style indicating that at least some of the multiple media components are organized in multiple columns or rows; a first trigger module 520 configured to trigger a first media component among the multiple media components to play corresponding first media content; an adjustment module 530 configured to adjust the display position of the multiple media components in the target interface in response to a sliding operation on the target interface; and a second trigger module 540 configured to trigger the second media component to play corresponding second media content in response to a first display position of a second media component among the multiple media components being updated to meet a first trigger condition, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

[0122] In some embodiments, the first triggering condition includes: the first boundary of the second media component reaches a preset position, wherein the preset position is determined based on the sliding direction of the sliding operation and the first column and / or first row where the second media component is located, and the first boundary corresponds to the sliding direction.

[0123] In some embodiments, the preset position is also determined based on the area size of the component interaction area in the target interface and / or the component size of the media component.

[0124] In some embodiments, the apparatus 500 further includes an update module, which is configured to: determine the update area size of the component interaction area in response to a change in the layout of the target interface; and adjust a preset position based on the update area size.

[0125] In some embodiments, changes to the layout of the target interface include: displaying additional content areas in the target interface; and / or stopping the display of existing content areas in the target interface.

[0126] In some embodiments, the device 500 further includes a first stop module, which is configured to trigger the second media component to stop playing the second media content in response to the second boundary of the second media component reaching a first preset position, wherein the second boundary is opposite to the first boundary.

[0127] In some embodiments, the first boundary and / or the second boundary are the boundaries of the image region of the second media component.

[0128] In some embodiments, the device 500 further includes a third trigger module, which is configured to trigger the third media component to play corresponding third media content in response to the second display position of the third media component among a plurality of media components being updated to meet a second trigger condition, wherein the second trigger condition corresponds to the second column or second row where the second media component is located.

[0129] In some embodiments, the second column is different from the first column, or the second row is different from the first row.

[0130] In some embodiments, the device 500 further includes a second stop module, which is configured to trigger the second media component to stop playing the second media content in response to the second display position of the third media component being updated to meet a second trigger condition.

[0131] In some embodiments, the apparatus 500 further includes a first determining module, which is configured to: determine a first media component based on the order of multiple media components in the target interface in response to the target interface being triggered to be displayed.

[0132] In some embodiments, the device 500 further includes a processing module, which is configured to: determine the area displayed by the multiple media components in the current display state of the target interface in response to the fact that the display positions of the multiple media components in the target interface do not meet the corresponding triggering conditions; and trigger the target media component among the multiple media components to play the corresponding media content based on the displayed area.

[0133] In some embodiments, the device 500 further includes a second determining module configured to: determine a set of candidate media components based on the sorting of the displayed areas; and determine a target media component to be triggered from the set of candidate components based on the direction of a received additional sliding operation.

[0134] In some embodiments, the second media component is associated with multiple media contents, and the second triggering module 540 is further configured to: trigger the second media component to play the second media content among the multiple media contents based on the display order of the multiple media contents in the second media component.

[0135] Figure 6 illustrates a block diagram of an electronic device 600 in which one or more embodiments of the present disclosure may be implemented. It should be understood that the electronic device 600 shown in Figure 6 is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. The electronic device 600 shown in Figure 6 can be used in electronic devices.

[0136] As shown in Figure 6, the electronic device 600 is in the form of a general-purpose electronic device. Components of the electronic device 600 may include, but are not limited to, one or more processors or processing units 610, memory 620, storage device 630, one or more communication units 640, one or more input devices 650, and one or more output devices 660. The processing unit 610 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 620. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of the electronic device 600.

[0137] Electronic device 600 typically includes multiple computer storage media. Such media can be any accessible media that is accessible to electronic device 600, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 620 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 630 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 and can be accessed within electronic device 600.

[0138] Electronic device 600 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not shown in FIG. 6, 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 may be provided. In these cases, each drive may be connected to a bus (not shown) via one or more data media interfaces. Memory 620 may include computer program product 625 having one or more program modules configured to perform various methods or actions of various embodiments of the present disclosure.

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

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

[0141] According to an exemplary implementation 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 an exemplary implementation 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.

[0142] 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.

[0143] 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.

[0144] 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.

[0145] 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.

[0146] 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 user interface interaction method, comprising: In the target interface, multiple media components are presented in a target style, the target style indicating that at least some of the multiple media components are organized in multiple columns or multiple rows; Trigger the first media component among the plurality of media components to play the corresponding first media content; In response to a swipe operation on the target interface, the display position of the plurality of media components on the target interface is adjusted; as well as In response to the first display position of the second media component among the plurality of media components being updated to meet a first trigger condition, the second media component is triggered to play the corresponding second media content, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

2. The method according to claim 1, wherein the first triggering condition includes: The first boundary of the second media component reaches a preset position, wherein the preset position is determined based on the sliding direction of the sliding operation and the first column and / or the first row in which the second media component is located, and the first boundary corresponds to the sliding direction.

3. The method according to claim 2, wherein the preset position is further determined based on the area size of the component interaction area in the target interface and / or the component size of the media component.

4. The method according to claim 3, further comprising: In response to changes in the layout of the target interface, determine the updated area size of the component interaction area; as well as The preset position is adjusted based on the updated region size.

5. The method of claim 4, wherein the change in the layout of the target interface includes: An additional content area is displayed in the target interface; and / or Stop displaying existing content areas in the target interface.

6. The method according to claim 2, further comprising: In response to the second boundary of the second media component reaching the preset position, the second media component is triggered to stop playing the second media content, wherein the second boundary is opposite to the first boundary.

7. The method of claim 6, wherein the first boundary and / or the second boundary is the boundary of the image region of the second media component.

8. The method according to claim 1, further comprising: In response to the second display position of the third media component among the plurality of media components being updated to meet a second triggering condition, the third media component is triggered to play the corresponding third media content, wherein the second triggering condition corresponds to the second column or second row where the second media component is located.

9. The method of claim 8, wherein the second column is different from the first column, or the second row is different from the first row.

10. The method of claim 8, further comprising: In response to the second display position of the third media component being updated to meet the second triggering condition, the second media component is triggered to stop playing the second media content.

11. The method according to claim 1, further comprising: In response to the target interface being triggered to be displayed, the first media component is determined based on the order of the plurality of media components in the target interface.

12. The method according to claim 1, further comprising: In response to the fact that the display positions of the plurality of media components in the target interface do not meet the corresponding trigger conditions, the area displayed by the plurality of media components in the current display state of the target interface is determined; as well as Based on the displayed area, the target media component among the plurality of media components is triggered to play the corresponding media content.

13. The method of claim 12, further comprising: Based on the sorting of the areas shown, a set of candidate media components is determined; as well as Based on the direction of the received additional sliding operation, the target media component to be triggered is determined from the set of candidate components.

14. The method of claim 1, wherein the second media component is associated with multiple media contents, and triggering the second media component to play the corresponding second media content comprises: Based on the display order of the multiple media contents in the second media component, the second media component is triggered to play the second media content among the multiple media contents.

15. A device for interface interaction, comprising: A presentation module is configured to present multiple media components in a target interface in a target style, the target style indicating that at least some of the multiple media components are organized in multiple columns or multiple rows; The first triggering module is configured to trigger the first media component among the plurality of media components to play the corresponding first media content; The adjustment module is configured to adjust the display position of the plurality of media components in the target interface in response to a swipe operation on the target interface; as well as The second trigger module is configured to trigger the second media component to play corresponding second media content in response to the first display position of the second media component among the plurality of media components being updated to meet a first trigger condition, wherein the first trigger condition corresponds to the column or row where the second media component is located, and different columns or rows correspond to different trigger conditions.

16. 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, the instructions causing the electronic device to perform the method according to any one of claims 1 to 14 when executed by the at least one processing unit.

17. A computer-readable storage medium having a computer program stored thereon, the computer program being executable by a processor to implement the method according to any one of claims 1 to 14.

Images