Method and device of image-based content navigation

Abstract

A method for image-based content navigation allows users to switch viewing modes via gestures. In response to a first sequence of expanding gestures by the user onto a display, the content window on the display transitions to progressively increasing window size and viewing modes. Each content window in a plurality of viewing modes contains a scrollable list of at least one image and user interface (UI) elements. Different viewing modes have different layouts on the display. In response to the user selecting a UI element in a current viewing mode at a current window size, an extended content page is displayed. When the user leaves the extended content page, the user returns to the current viewing mode at the current window size. In response to a second sequence of pinch gestures on the display, the content window transitions to progressively decreasing window size and viewing modes.

Claims

1. A method for guided navigation based on image content, comprising: Receive a first sequence of opening gestures performed by a user on a display; In response to the first sequence of open gestures, the system switches a content window on the display, progressively increasing the window size and viewing modes. Each content window in a plurality of viewing modes includes at least one image and a scrollable list containing user interface (UI) elements disposed next to and outside the at least one image. Different viewing modes have different layouts on the display. In response to the user selecting a UI element in a current viewing mode with a current window size, an extended content page related to the at least one image is displayed on the display. When the user leaves the extended content page, the system returns to the current viewing mode with the current window size. The system receives a second sequence of pinch gestures from the user on the display and, in response to the second sequence of pinch gestures, switches the content window on the display, progressively decreasing the window size and viewing modes.

2. The method of claim 1, wherein the scrollable list containing UI elements can be scrolled in two opposite directions to display additional UI elements when a scrolling gesture is detected in a trigger area of ​​the display, and each UI element in the scrollable list can be selected by the user to display a corresponding attribute of a corresponding image.

3. The method as described in claim 1, wherein the viewing mode includes a mini-viewing mode in which content windows are arranged in a multi-column matrix configuration, and each content window includes a thumbnail image.

4. The method as described in claim 1, wherein the viewing mode includes a medium viewing mode in which content windows are arranged in a two-column matrix configuration, and each content window includes a corresponding image and a corresponding scrollable list containing UI elements.

5. The method as described in claim 1, wherein the viewing mode includes a standard viewing mode in which content windows are arranged in a single-column configuration and each content window displays the scrollable list containing UI elements outside its internal image.

6. The method as described in claim 1, wherein the viewing mode includes a large viewing mode in which a single content window is displayed and the scrollable list containing UI elements is overlaid on the image of the single content window.

7. The method as described in claim 6 further includes: Receive an open gesture in this large view mode; In response to the opening gesture, a portion of the image is zoomed in, and the scrollable list containing UI elements is removed from the display.

8. The method as described in claim 6, wherein the large view mode is displayed when the user clicks on an image in each view mode.

9. The method as described in claim 1, further comprising: Received from the display a scrolling gesture toward one of its first ends; In response to the scrolling gesture, an end segment is removed from the display, the end segment being located at a second end of the display, opposite to the first end.

10. The method as described in claim 1, wherein each of the view modes can be scrolled to display new content.

11. The method as described in claim 1, further comprising: When receiving alternating open and pinch gestures, it switches back and forth between two different viewing modes.

12. The method of claim 1, wherein each content window in each of the viewing modes includes a social media post, and each UI element corresponding to a given image is clickable to display visual information related to the given image without requiring the user to click to access the social media post.

13. An apparatus for providing video content-based guided tours, comprising: Hardware processing; and memory for storing a client application that a user can interact with via gestures; wherein the one or more processors are configured to perform: receiving a first sequence of open gestures performed by the user on a display; responding to the first sequence of open gestures by changing the content window on the display, progressively increasing the window size and progressively increasing the viewing modes, wherein each content window in a plurality of viewing modes includes at least one image and a scrollable list containing user interface (UI) elements disposed next to and outside the at least one image, and different viewing modes having different layouts on the display; responding to the user selecting one of the UI elements in a current viewing mode of a current window size by the user, displaying an extended content page related to the at least one image on the display; returning to the current viewing mode of the current window size when the user leaves the extended content page; receiving a second sequence of pinch gestures performed by the user on the display; and responding to the second sequence of pinch gestures by changing the content window on the display, progressively decreasing the window size and progressively decreasing the viewing modes.

14. The apparatus of claim 13, wherein the scrollable list containing UI elements is scrollable in two opposite directions to display additional UI elements when a scrolling gesture is detected in a trigger area of ​​the display, and each UI element in the scrollable list is selectable by the user to display a corresponding attribute of a corresponding image.

15. The apparatus of claim 13, wherein the viewing mode includes a smaller viewing mode in which content windows are arranged in a multi-column matrix configuration and each content window includes a thumbnail image.

16. The apparatus of claim 13, wherein the viewing mode includes a medium viewing mode in which content windows are arranged in a two-column matrix configuration, and each content window includes a corresponding image and a corresponding scrollable list containing UI elements.

17. The apparatus of claim 13, wherein the viewing mode includes a standard viewing mode in which content windows are arranged in a single-column configuration and each content window displays the scrollable list containing UI elements outside an image within it.

18. The apparatus of claim 13, wherein the viewing mode includes a large viewing mode in which a single content window is displayed and the scrollable list containing UI elements is overlaid on the image of the single content window.

19. The apparatus of claim 13, wherein the one or more processors are further configured to: receive an open gesture in the large viewing mode; and in response to the open gesture, zoom in on a portion of the image and remove the scrollable list containing UI elements from the display.

20. The apparatus of claim 13, wherein each content window in each of the viewing modes includes a social media post, and each UI element corresponding to a given image is clickable to display visual information related to the given image without requiring the user to click to access the social media post.

Images