Multi-layer user interface with flexible parallel and orthogonal movement
First Claim
Patent Images
1. In a computer system, a method comprising:
- displaying a graphical user interface comprising at least first, second, and third layers, wherein the third layer describes a content category, the second layer describes a content subcategory, and the first layer comprises content items included within the content subcategory, wherein a first portion of visual information in the first layer is within a display area of a touchscreen, and wherein the first layer comprises a section operable to move in a second direction substantially orthogonal to a first direction and a first-layer lock point at an edge of the section;
receiving a first user input corresponding to a first gesture on the touchscreen;
calculating a first movement based at least in part on the first user input, the first movement comprising a movement of the first layer from an initial first-layer position in which a second portion of visual information in the first layer is outside the display area to a current first-layer position in which the second portion of visual information in the first layer is within the display area, wherein the first movement is in a first direction at a first movement rate;
calculating a second movement substantially parallel to the first movement based at least in part on the first user input, the second movement comprising a movement of visual information in the second layer from an initial second-layer position to a current second-layer position, wherein the second movement is in the first direction at a second movement rate, and wherein the second layer comprises a second-layer lock point;
calculating a third movement substantially parallel to the first and second movements based at least in part on the first user input, the third movement comprising a movement of visual information in the third layer from an initial third-layer position to a current third-layer position, wherein the third movement is in the first direction at a third movement rate, wherein the third layer comprises a third-layer lock point, and wherein the first movement rate is different from at least one of the second and third movement rates;
performing a locking animation based at least in part on the lock points and the current first-layer position, wherein the locking animation comprises moving the first, second, and third layers from their respective current positions to post-locking-animation positions in which the layers have stopped moving and the edge of the section is aligned with a corresponding edge of the display area;
receiving a second user input corresponding to a second gesture on the touchscreen; and
calculating a substantially orthogonal sectional movement of visual information in the second portion of visual information in the first layer that is within the display area as a result of the performed locking animation, the movement being independent from other visual information in the first, second, and third layers based at least in part on the second user input, wherein the substantially orthogonal sectional movement comprises a movement of the visual information in the second portion of visual information in the first layer from an initial section position to a current section position.
2 Assignments
0 Petitions
Accused Products
Abstract
A user interface (UI) system calculates movements in a multi-layer graphical user interface. The UI system receives user input corresponding to gestures on a touchscreen. The UI system calculates a movement of a first layer in a first direction (e.g., a horizontal direction) at a first movement rate. The UI system calculates a movement of a second layer substantially parallel to the movement of the first layer, at a second movement rate that differs from the first movement rate. The UI system calculates a movement (e.g., a vertical movement) in a direction substantially orthogonal to the first direction, in a UI element of one of the layers.
-
Citations
20 Claims
-
1. In a computer system, a method comprising:
-
displaying a graphical user interface comprising at least first, second, and third layers, wherein the third layer describes a content category, the second layer describes a content subcategory, and the first layer comprises content items included within the content subcategory, wherein a first portion of visual information in the first layer is within a display area of a touchscreen, and wherein the first layer comprises a section operable to move in a second direction substantially orthogonal to a first direction and a first-layer lock point at an edge of the section; receiving a first user input corresponding to a first gesture on the touchscreen; calculating a first movement based at least in part on the first user input, the first movement comprising a movement of the first layer from an initial first-layer position in which a second portion of visual information in the first layer is outside the display area to a current first-layer position in which the second portion of visual information in the first layer is within the display area, wherein the first movement is in a first direction at a first movement rate; calculating a second movement substantially parallel to the first movement based at least in part on the first user input, the second movement comprising a movement of visual information in the second layer from an initial second-layer position to a current second-layer position, wherein the second movement is in the first direction at a second movement rate, and wherein the second layer comprises a second-layer lock point; calculating a third movement substantially parallel to the first and second movements based at least in part on the first user input, the third movement comprising a movement of visual information in the third layer from an initial third-layer position to a current third-layer position, wherein the third movement is in the first direction at a third movement rate, wherein the third layer comprises a third-layer lock point, and wherein the first movement rate is different from at least one of the second and third movement rates; performing a locking animation based at least in part on the lock points and the current first-layer position, wherein the locking animation comprises moving the first, second, and third layers from their respective current positions to post-locking-animation positions in which the layers have stopped moving and the edge of the section is aligned with a corresponding edge of the display area; receiving a second user input corresponding to a second gesture on the touchscreen; and calculating a substantially orthogonal sectional movement of visual information in the second portion of visual information in the first layer that is within the display area as a result of the performed locking animation, the movement being independent from other visual information in the first, second, and third layers based at least in part on the second user input, wherein the substantially orthogonal sectional movement comprises a movement of the visual information in the second portion of visual information in the first layer from an initial section position to a current section position. - View Dependent Claims (2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)
-
-
18. A computing device comprising:
-
one or more processors; a touchscreen having a display area; and one or more computer readable storage media having stored therein computer-executable instructions for performing a method comprising; displaying a graphical user interface comprising a content layer, a section header layer, and a title layer, wherein each layer comprises at least first and second portions of visual information in the respective layer, wherein the first portion of visual information in the respective layer is in the display area, wherein the second portion of visual information in the respective layer is outside of the display area, and wherein the content layer comprises at least one scrollable section having a first portion of visual information in the display area and a second portion of visual information outside of the display area; receiving a first user input via the touchscreen; calculating a content-layer movement based at least in part on the first user input, the content-layer movement comprising a movement of the content layer from (a) an initial content-layer position in which the second portion of visual information in the content layer is outside the display area, to (b) a current content-layer position in which the second portion of visual information in the content layer is within the display area, wherein the content layer further comprises a content-layer lock point at an edge of the scrollable section; animating the movement from (a) to (b), wherein the content-layer movement is in a first direction at a content-layer movement rate; calculating a section-header-layer movement based at least in part on the first user input, the section-header-layer movement comprising a movement of the section header layer from (c) an initial section-header-layer position in which the second portion of visual information in the section header layer is outside the display area, to (d) a current section-header-layer position in which the second portion of visual information in the section header layer is within the display area, wherein the section-header layer comprises a section header and a section-header-layer lock point at an edge of the section header; animating the movement from (c) to (d), wherein the section-header-layer movement is in the first direction at a section-header-layer movement rate; calculating a title-layer movement based at least in part on the first user input, the title-layer movement comprising a movement of the title layer from (e) an initial title-layer position in which the second portion of visual information in the title layer is outside the display area, to (f) a current title-layer position in which the second portion of visual information in the title layer is within the display area, wherein the title layer comprises a title and a title-layer lock point at an edge of the title; animating the movement from (e) to (f), wherein the title-layer movement is in the first direction at a title-layer movement rate; performing a locking animation based at least in part on the lock points and the current content-layer position, wherein the locking animation comprises moving the content layer, the section-header layer and the title layer from their respective current positions to post-locking-animation positions in which the respective layers have stopped moving and the edge of the scrollable section, the edge of the section header, and the edge of the title are aligned with a corresponding edge of the display area; receiving a second user input via the touchscreen; calculating a scrollable-section movement of visual information in the scrollable section of the content layer independent from other visual information in the content layer based at least in part on the second user input, the scrollable-section movement comprising a movement of visual information in the scrollable section from (g) an initial scrollable-section position in which the second portion of visual information in the scrollable section is outside of the display area, to (h) a current scrollable-section position in which the second portion of visual information in the scrollable section is within the display area; and animating the movement from (g) to (h), wherein the scrollable-section movement is in the second direction wherein the title-layer movement rate differs from the content-layer movement rate and from the section-header-layer movement rate, and wherein the content layer, the section header layer and the title layer are substantially parallel to each other and non-overlapping with respect to each other. - View Dependent Claims (19)
-
-
20. One or more computer memory devices having stored thereon computer-executable instructions for performing a method comprising:
-
displaying a graphical user interface on a touchscreen operable to receive user input via gestures on the touchscreen, the graphical user interface comprising a content layer, a section header layer, a title layer and a background layer, wherein each layer comprises at least first and second portions of visual information in the respective layer, wherein the first portion of visual information in the respective layer is in a display area of the touchscreen, wherein the second portion of visual information in the respective layer is outside of the display area, and wherein the content layer comprises at least one scrollable section having a first portion of visual information in the display area and a second portion of visual information outside of the display area; receiving a first user input corresponding to a gesture on the touchscreen; calculating a content-layer movement based at least in part on the first user input, the content-layer movement comprising a movement of the content layer from (a) an initial content-layer position in which the second portion of visual information in the content layer is outside the display area, to (b) a current content-layer position in which the second portion of visual information in the content layer is within the display area, wherein the content layer further comprises a content-layer lock point at an edge of the scrollable section; animating the movement from (a) to (b), wherein the content-layer movement is in a first direction at a content-layer movement rate; calculating a section-header-layer movement based at least in part on the first user input, the section-header-layer movement comprising a movement of the section header layer from (c) an initial section-header-layer position in which the second portion of visual information in the section header layer is outside the display area, to (d) a current section-header-layer position in which the second portion of visual information in the section header layer is within the display area, wherein the section-header layer further comprises a section header and a section-header-layer lock point at an edge of the section header; animating the movement from (c) to (d), wherein the section-header-layer movement is in the first direction at a section-header-layer movement rate; calculating a title-layer movement based at least in part on the first user input, the title-layer movement comprising a movement of the title layer from (e) an initial title-layer position in which the second portion of visual information in the title layer is outside the display area, to (f) a current title-layer position in which the second portion of visual information in the title layer is within the display area, wherein the title layer further comprises a title and a title-layer lock point at an edge of the title; animating the movement from (e) to (f), wherein the title-layer movement is in the first direction at a title-layer movement rate; calculating a background-layer movement based at least in part on the first user input, the background-layer movement comprising a movement of the background layer from (g) an initial background-layer position in which the second portion of visual information in the background layer is outside the display area, to (h) a current background-layer position in which the second portion of visual information in the background layer is within the display area; animating the movement from (g) to (h), wherein the background-layer movement is in the first direction at a background-layer movement rate; performing a locking animation based at least in part on the lock points and the current content-layer position, wherein the locking animation comprises moving the content layer, the section-header layer and the title layer from their respective current positions to post-locking-animation positions in which the respective layers have stopped moving and the edge of the scrollable section, the edge of the section header, and the edge of the title are aligned with a corresponding edge of the display area; receiving a second user input corresponding to a second gesture on the touchscreen; calculating a scrollable-section movement of visual information in the scrollable section of the content layer independent from other visual information in the content layer based at least in part on the second user input, the scrollable-section movement comprising a movement of visual information in the scrollable section from (i) an initial scrollable-section position in which the second portion of visual information in the scrollable section is outside of the display area, to (j) a current scrollable-section position in which the second portion of visual information in the scrollable section is within the display area; and animating the movement from (i) to (j), wherein the scrollable-section movement is in the second direction; wherein the content-layer movement rate is equal to the section-header-layer movement rate, wherein the title-layer movement rate differs from the content-layer movement rate and from the section-header-layer movement rate, wherein the content layer, the section header layer and the title layer are substantially parallel to each other and non-overlapping with respect to each other, and wherein each of the content layer, the section header layer and the title layer overlaps the background layer.
-
Specification