Device, method, and graphical user interface for navigating and previewing content items

摘要

A portable electronic device displays concurrently a first predefined scrollable area and a second predefined scrollable area distinct from the first predefined scrollable area. The first predefined scrollable area includes a plurality of graphical objects and is configured to scroll in a first direction. Each of the plurality of graphical objects represents a respective set of content items. The second predefined scrollable area includes a list of content items and is configured to scroll in a second direction that is orthogonal to the first direction. The device detects a gesture that corresponds to selection of a first graphical object of the plurality of graphical objects in the first predefined scrollable area; and, in response to detecting the gesture, plays respective portions of one or more content items in the set of content items that correspond to the selected first graphical object.

主权项

1. A portable electronic device, comprising:
a display; a touch-sensitive surface; one or more processors; memory; and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for:
displaying a predefined scrollable area, wherein
the predefined scrollable area concurrently displays a pointer object and at least some of a plurality of album art images;the pointer object is overlaid on a respective album art image in the plurality of album art images;each of the plurality of album art images represents a respective set of content items; andthe predefined scrollable area is configured to scroll the plurality of album art images in a first direction;detecting a first finger drag gesture or a first finger swipe gesture in a horizontal or a vertical direction;in response to detecting the first finger drag gesture or the first finger swipe gesture:
scrolling the plurality of album art images such that the pointer object coincides with and is overlaid on at least a portion of a first album art image in the plurality of album art images; andplaying respective portions of one or more content items in the set of content items that correspond to the first album art image;detecting a second finger drag gesture or a second finger swipe gesture in a vertical direction when the first finger drag gesture or the first finger swipe gesture is in a horizontal direction and in a horizontal direction when the first finger drag gesture or the first finger swipe gesture is in a vertical direction, starting in the predefined scrollable area, to expand the predefined scrollable area from a first predefined size to a second predefined size larger than the first predefined size; andin response to detecting the second finger drag gesture or the second finger swipe gesture to expand the predefined scrollable area:
expanding the predefined scrollable area from the first predefined size to the second predefined size; anddisplaying a multi-row array of album art images, each respective album art image representing a respective set of content items, in the predefined scrollable area at the second predefined size.