Apparatus, method, and graphical user interface for navigating, displaying, and editing media items having multiple display modes

Abstract

An electronic device displays a media item in a first user interface that corresponds to a sequence of images in a first display mode that is one of a plurality of user-selectable display modes for the media item. In response to detecting an input, the device displays a display mode selection user interface that concurrently displays representations of the media item, including a second representation of the media item that corresponds to a second display mode. The device detects an input on the second representation of the plurality of representations of the media item. In response, the device selects the second display mode of the plurality of user-selectable display modes for the media item, the second display mode corresponding to the second representation of the plurality of representations of the media item.

Description

[0001] This application is a continuation-in-part of the application with the application number 201880015192.X, the filing date of 2 May 2018, and the title of “Devices, Methods, and Graphical User Interfaces for Navigating, Displaying, and Editing Media Items with Multiple Display Modes”. TECHNICAL FIELD

[0002] This document relates generally to electronic devices with touch-sensitive surfaces, including but not limited to electronic devices with touch-sensitive surfaces that navigate, display, and / or edit media items with multiple user-selectable display modes. BACKGROUND

[0003] The use of electronic devices in capturing, viewing, editing, and sharing digital content has increased significantly in recent years. Users often utilize their portable electronic devices (e.g., smartphones, tablets, and dedicated digital cameras) to create media items (e.g., images and / or videos, such as Live Photos from Apple Inc. of Cupertino, California); view and edit their media items (e.g., Photos from Apple Inc. of Cupertino, California) in an image management application (e.g., Photos from Apple Inc. of Cupertino, California) and / or a digital content management application (e.g., iTunes from Apple Inc. of Cupertino, California); and share their digital content with others through instant messaging, email, social media applications, and other communication applications.

[0004] Some media items can be displayed in multiple different display modes. Users can have difficulty navigating, displaying, and editing such media items because the multiple display modes create multiple options for displaying and editing a given media item. SUMMARY

[0005] Accordingly, there is a need for electronic devices with faster, more efficient methods and interfaces for navigating, displaying, and editing media items with multiple display modes. Such methods and interfaces optionally supplement or replace conventional methods for navigating, displaying, and editing media items with multiple display modes. Such methods and interfaces reduce the number, extent, and / or nature of inputs from a user and result in a more efficient human-machine interface. For battery- operated devices, such methods and interfaces conserve power and increase the time between battery charges.

[0006] The above deficiencies and other problems associated with user interfaces for electronic devices with touch-sensitive surfaces are reduced or eliminated by the disclosed devices. In some embodiments, the device is a desktop computer. In some embodiments, the device is portable (e.g., a notebook computer, tablet computer, or handheld device). In some embodiments, the device is a personal electronic device (e.g., a wearable electronic device, such as a watch). In some embodiments, the device has a trackpad. In some embodiments, the device has a touch-sensitive display (also known as a "touch screen" or "touch-screen display"). In some embodiments, the device has a graphical user interface (GUI), one or more processors, memory, and one or more modules, programs, or sets of instructions stored in memory for performing various functions. In some embodiments, the user interacts with the GUI primarily through stylus and / or finger contacts and gestures on the touch-sensitive surface. In some embodiments, these functions are implemented in software and / or firmware. In some embodiments, these functions are implemented in hardware, software, and / or firmware. In some embodiments, the device stores information relating to the user's preferred or common operations or activities, such as the user's frequently used applications and the user's preferred settings, and adjusts itself based, at least in part, on this information. For example, the device can learn the user's preferences and frequently used resources and, based on the information it has learned, it can adjust the layout of the user interface, the relative locations of various applications, and the like, to better serve the user's needs. Based on information about the user's preferences, the device can improve the user interface, for example, by learning a set of preferences associated with the user and applying the preferences when the user uses the device. In some embodiments, the device is a wearable electronic device, such as a watch.

[0007] According to some embodiments, a method is performed at an electronic device with a display and a touch-sensitive surface. The method includes: displaying, in a first user interface on the display, one or more images from a media item that corresponds to a sequence of images in a respective display mode, where the respective display mode is one of a plurality of user-selectable display modes for the media item that corresponds to the sequence of images; while displaying the one or more images from the media item in the respective display mode, detecting a first input; in response to detecting the first input, displaying, on the display, an editing user interface for the respective display mode, where: the editing user interface for the respective display mode is configured to change which images are included within the media item when the media item is displayed in the respective display mode; and the editing user interface for the respective display mode concurrently displays: a first area that is configured to display images in the sequence of images; a second area that is different from the first area, the second area including representations of images in the sequence of images, a user-adjustable start trim affordance that indicates a first boundary for playback through the sequence of images, and a user-adjustable end trim affordance that indicates a second boundary for playback through the sequence of images; while displaying the editing user interface for the respective display mode: adjusting the media item in accordance with one or more editing inputs; detecting an input to exit the editing user interface for the respective display mode; exiting the editing user interface for the respective display mode; and displaying the edited media item in the respective display mode in the first user interface.

[0008] In accordance with some embodiments, a method is performed at an electronic device with a display and a touch-sensitive surface. The method includes: displaying one or more images from a media item corresponding to a sequence of images in a first display mode in a first user interface on the display, wherein the first display mode is one of a plurality of user-selectable display modes for the media item corresponding to the sequence of images; while displaying the one or more images from the media item in the first display mode, detecting a first input; in response to detecting the first input, displaying a display mode selection user interface on the display, wherein: the display mode selection user interface concurrently displays a plurality of representations of the media item, including a second representation of the media item corresponding to a second display mode that is different from the first display mode; while displaying the display mode selection user interface on the display, detecting an input on the second representation of the plurality of representations of the media item; and in response to detecting the input on the second representation of the plurality of representations of the media item, selecting the second display mode of the plurality of user-selectable display modes for the media item corresponding to the second representation of the plurality of representations of the media item.

[0009] According to some embodiments, a method is performed at an electronic device with a display and a touch-sensitive surface. The method includes: displaying, in a first user interface on the display, a representation of a media item corresponding to a sequence of images, the media item including a representative image from the sequence of images in a first display mode; while displaying the representation of the media item corresponding to the sequence of images in the first display mode, detecting a first input; in response to detecting the first input, displaying, on the display, an edit user interface for the media item in the first display mode, wherein the edit user interface concurrently displays: a first area configured to sequentially display images in the sequence of images at a first magnification; and a second area, different from the first area, that includes representations of images in the sequence of images at a second magnification that is less than the first magnification, a user-adjustable representative image selection affordance configured to select a new representative image in the sequence of images via a position of the representative image selection affordance in the second area, a plurality of range trim affordances including a user-adjustable start trim affordance that indicates a first boundary for playback through the sequence of images, and a user-adjustable end trim affordance that indicates a second boundary for playback through the sequence of images; while displaying the edit user interface, detecting a second input that is directed to the representative image selection affordance; in accordance with detecting the second input that is directed to the representative image selection affordance: moving the representative image selection affordance in the second area in accordance with the second input; displaying a visually emphasized representation of an image in the second area that corresponds to a current position of the representative image selection affordance in the second area; and displaying, in the first area, an image from the sequence of images that corresponds to the current position of the representative image selection affordance in the second area.

[0010] According to some embodiments, a method is performed at an electronic device with a display and a touch-sensitive surface. The method includes: displaying, in a first user interface on the display, a representation of a first media item corresponding to a sequence of images in a first display mode of a plurality of user-selectable display modes, where: the first media item is part of a set of media items; the set of media items is arranged in an order that is based on a predetermined criterion; one or more prior media items precede the first media item in the order; and one or more subsequent media items follow the first media item in the order; while displaying the representation of the first media item, detecting a touch input that includes movement in a respective direction on the touch- sensitive surface; in response to detecting the touch input: in accordance with a determination that the movement is movement in a first direction and a subsequent media item corresponding to a second sequence of images is designated to be displayed in the first display mode, displaying the subsequent media item in the first display mode includes displaying content from a plurality of images in the second sequence of images in a manner determined based on the first display mode; and in accordance with a determination that the movement is movement in the first direction and the subsequent media item is designated to be displayed in a second display mode that is different from the first display mode, displaying the subsequent media item in the second display mode includes displaying content from the plurality of images in the second sequence of images in a manner determined based on the second display mode;

[0011] According to some embodiments, a method is performed at an electronic device with a display and a touch-sensitive surface. The method includes: displaying, in a first user interface on the display, a first representation of a first media item corresponding to a sequence of images in a respective display mode of a plurality of user-selectable display modes; while displaying the first representation of the first media item on the display in the respective display mode, detecting a touch input at a location on the touch-sensitive surface that corresponds to the representation of the first media item; in response to detecting the touch input, and while the touch input continues to be detected on the touch-sensitive surface at the location that corresponds to the representation of the first media item: in accordance with a determination that the touch input satisfies representation change criteria that are based on a magnitude of a respective attribute of the touch, and the respective display mode of the first media item is in a display mode in which the first representation of the first media item is a dynamic representation of the first media item that changes over time, replacing display of the first representation of the first media item with a static representation of the first media item that does not change over time; and in accordance with a determination that the touch input does not satisfy the representation change criteria, maintaining display of the first representation of the first media item as the dynamic representation.

[0012] According to some embodiments, an electronic device includes: a display; a touch-sensitive surface; optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface; optionally one or more tactile output generators; one or more processors; and memory storing one or more programs; the one or more programs configured to be executed by the one or more processors, and the one or more programs including instructions for performing the operations of any of the methods described herein. According to some embodiments, a computer-readable storage medium has stored therein instructions which, when executed by an electronic device with a display, a touch-sensitive surface, optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface, and optionally one or more tactile output generators, cause the device to perform the operations of any of the methods described herein or cause the operations of any of the methods described herein to be performed. According to some embodiments, a graphical user interface displayed on an electronic device with a display, a touch-sensitive surface, optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface, optionally one or more tactile output generators, a memory, and one or more processors to execute one or more programs stored in the memory includes one or more elements displayed in any of the methods described herein that are updated in response to input, as described in any of the methods described herein. According to some embodiments, an electronic device includes: a display, a touch-sensitive surface, optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface, and optionally one or more tactile output generators. And means for performing or causing performance of the operations of any of the methods described herein. According to some embodiments, an information processing apparatus, for use in an electronic device with a display, a touch-sensitive surface, optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface, and optionally one or more tactile output generators, includes means for performing or causing performance of the operations of any of the methods described herein.

[0013] Thus, an electronic device with a display, a touch-sensitive surface, optionally one or more sensors to detect intensity of contacts with the touch-sensitive surface, and optionally one or more tactile output generators is provided with improved methods and interfaces for navigating, displaying, and editing media items with multiple display modes, thereby increasing the efficacy, efficiency, and user satisfaction with such devices. Such methods and interfaces can complement or replace conventional methods for navigating, displaying, and editing media items with multiple display modes. BRIEF DESCRIPTION OF DRAWINGS

[0014] For a better understanding of various described implementations, reference should be made to the following detailed description in conjunction with the accompanying drawings in which like reference numerals refer to corresponding parts throughout the figures. The following detailed description is exemplary in nature and is not intended to limit the scope, applicability, or configuration of various described implementations. Rather, the following description provides a convenient illustrative

[0015] FIG. 1A is a block diagram illustrating a portable multifunction device having a touch-sensitive display in accordance with some embodiments.

[0016] FIG. 1B is a block diagram illustrating example components for event processing in accordance with some embodiments.

[0017] FIG. 2 shows a portable multifunction device with a touch screen in accordance with some embodiments.

[0018] FIG. 3 is a block diagram of an example multifunction device with a display and a touch-sensitive surface in accordance with some embodiments.

[0019] FIG. 4A shows an example user interface for an application menu on a portable multifunction device in accordance with some embodiments.

[0020] FIG. 4B shows an example user interface for a multifunction device with a touch-sensitive surface that is separate from the display in accordance with some embodiments.

[0021] FIG. 4C-4E shows an embodiment of dynamic intensity thresholding in accordance with some embodiments.

[0022] FIG. 5A-5DW shows example user interfaces for navigating, displaying, and editing a media item having multiple display modes in accordance with some embodiments.

[0023] FIG. 6A-6F is a flow diagram of a method for editing a media item having multiple display modes in accordance with some embodiments.

[0024] FIG. 7A-7D is a flow diagram of a method for navigating to a media item having multiple display modes and selecting a display mode for the media item in accordance with some embodiments.

[0025] FIG. 8A-8F is a flow diagram of a method for changing a representative image for a media item corresponding to a sequence of images in accordance with some embodiments.

[0026] FIG. 9A-9I is a flow diagram of a method for navigating through a collection of media items having multiple user-selectable display modes in accordance with some embodiments.

[0027] FIG. 10A-10C is a flow diagram of a method for displaying a correspondence between a dynamic representation of a media item and a static representation of the media item, where the media item has multiple user-selectable display modes in accordance with some embodiments. DETAILED DESCRIPTION

[0028] Described herein are various methods for navigating, displaying, and / or editing media items having multiple user-selectable display modes. Using one or more of these methods (optionally in combination with each other) reduces the amount, degree, and / or nature of input from a user and provides a more efficient human-machine interface. This enables the user to interact with media items having multiple display modes more quickly and efficiently. For battery-powered devices, these improvements conserve power and increase the time between battery charges. Some of the methods described herein include:

[0029] • editing a media item having multiple display modes;

[0030] • navigating to a media item having multiple display modes and selecting a display mode for the media item;

[0031] • changing a representative image for a media item corresponding to a sequence of images;

[0032] • navigating through a collection of media items, where the media items have multiple user-selectable display modes;

[0033] and

[0034] • displaying a correspondence between a dynamic representation of a media item and a static representation of the media item, where the media item has multiple user-selectable display modes.

[0035] Below, FIG. 1A-1B , FIG. 2 and FIG. 3 provide descriptions of example devices. FIG. 4A-4B and FIG. 5A-5DW show example user interfaces for navigating, displaying, and editing media items having multiple display modes. FIG. 6A-6F shows a flowchart of a method for editing a media item having multiple display modes, according to some embodiments. FIG. 7A-7D shows a flowchart of a method for navigating to a media item having multiple display modes and selecting a display mode for the media item. FIG. 8A-8F shows a flowchart of a method for changing a representative image for a media item corresponding to a sequence of images. FIG. 9A-9I shows a flowchart of a method for navigating through a collection of media items, where the media items have multiple user-selectable display modes. FIG. 10A-10C shows a flowchart of a method for displaying a correspondence between a dynamic representation of a media item and a static representation of the media item, where the media item has multiple user-selectable display modes. FIG. 5A-5DW the user interfaces in FIG. 6A-6F , FIG. 7A-7D , FIG. 8A-8F , FIG. 9A-9I andFIG. 10A-10C the process in the method.

[0036] Exemplary Devices

[0037] Reference will now be made in detail to implementations, examples of which are illustrated in the accompanying drawings. In the following detailed description of implementations, numerous specific details are set forth in order to provide a thorough understanding of the various described implementations. However, it will be apparent to one of ordinary skill in the art that the various described implementations can be practiced without these specific details. In other instances, well-known methods, procedures, components, circuits, and networks have not been described in detail so as not to unnecessarily obscure aspects of the implementations.

[0038] It will also be understood that, although the terms“first,”“second,” etc. are, in some instances, used herein to describe various elements, these elements should not be limited by these terms. These terms are only used to distinguish one element from another. For example, a first contact could be termed a second contact, and, similarly, a second contact could be termed a first contact, without departing from the scope of the various described implementations. The first contact and the second contact are both contacts, but they are not the same contact, unless the context clearly dictates otherwise.

[0039] The terminology used in the description of the various described implementations herein is for the purpose of describing particular implementations only and is not intended to be limiting. As used in the description of the various described implementations and the appended claims, the singular forms“a,”“an,” and“the” are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will also be understood that the term“and / or” as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items. It will be further understood that the terms“comprises” and / or“comprising,” when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0040] As used herein, the term“if’ is, optionally, interpreted as meaning“when” or“while” or “in response to a determination” or“in response to a detection” depending on the context. Similarly, the phrase“if it is determined” or“if [a stated condition or event] is detected” is, optionally, interpreted as meaning“upon a determination” or “in response to a determination” or “upon detecting [a stated condition or event]” or “in response to detecting [a stated condition or event],” depending on the context.

[0041] Embodiments of electronic devices, user interfaces for such devices, and associated processes for using such devices are described herein. In some embodiments, the device is a portable communications device, such as a mobile telephone, that also contains other functions, such as PDA and / or music player functions. Exemplary embodiments of portable multifunction devices include, without limitation, the iPhone®, iPod Touch®, and iPad® devices from Apple Inc. of Cupertino, California. Other portable electronic devices, such as laptops or tablet computers with touch-sensitive surfaces (e.g., touch-screen displays and / or touchpads), are, optionally, used. iPod and devices. Other portable electronic devices, such as laptops or tablet computers with touch-sensitive surfaces (e.g., touch-screen displays and / or touchpads), are, optionally, used. It should also be understood that, in some embodiments, the device is not a portable communications device, but is a desktop computer with a touch-sensitive surface (e.g., a touch-screen display and / or a touchpad).

[0042] In the discussion that follows, a device that includes a display and a touch-sensitive surface is described. It should be understood, however, that the device optionally includes one or more other physical user-interface devices, such as a physical keyboard, a mouse and / or a joystick.

[0043] The device typically supports a variety of applications, such as one or more of the following: a notes application, a drawing application, a presentation application, a word processing application, a website creation application, a disk authoring application, a spreadsheet application, a game application, a telephone application, a video conferencing application, an e-mail application, an instant messaging application, a workout support application, a photo management application, a digital camera application, a digital

[0044] The various application programs executed on the device optionally make use of at least one common physical user-interface device, such as the touch- sensitive surface. One or more functions of the touch-sensitive surface, as well as

[0045] Attention is now directed towards embodiments of portable devices with touch- sensitive displays. FIG. 1Ais a block diagram illustrating portable multifunction device 100 having touch-sensitive display system 112 in accordance with some embodiments. Touch-sensitive display system 112 is sometimes called a "touch screen" for convenience and is sometimes simply called a touch-sensitive display. Device 100 includes memory 102 (which optionally includes one or more computer-readable storage mediums), memory controller 122, one or more processing units (CPUs) 120, peripherals interface 118, RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, input / output (I / O) subsystem 106, other input or control devices 116, and external port 124. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more intensity sensors 165 for detecting intensity of contacts on device 100 (e.g., a touch-sensitive surface such as touch- sensitive display system 112 of device 100). Device 100 optionally includes one or more tactile output generators 167 for generating tactile outputs on device 100 (e.g., generating tactile outputs on a touch-sensitive surface such as touch- sensitive display system 112 of device 100 or touchpad 355 of device 300). These components optionally communicate over one or more communication buses or signal lines 103.

[0046] As used in this specification and claims, the term "haptic output" refers to the physical displacement of a device relative to a previous position of the device, the physical displacement of a component of the device (e.g., a touch-sensitive surface) relative to another component of the device (e.g., the housing), or the displacement of a component relative to the center of mass of the device, detected by the user using the user's tactile sense. For example, when a device or a component of a device comes into contact with a touch-sensitive surface (e.g., a finger, palm, or other part of the user's hand), the haptic output generated by the physical displacement will be interpreted by the user as a tactile sensation corresponding to a perceived change in the physical characteristics of the device or a component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or touchpad) may optionally be interpreted by the user as a "press-click" or "release-click" on a physically actuated button. In some cases, the user will feel a tactile sensation, such as a "press-click" or "release-click," even when a physically actuated button associated with a touch-sensitive surface that has been physically pressed (e.g., displaced) by the user's movement does not move. For example, even when the smoothness of a tactile surface remains unchanged, movement of that surface can optionally be interpreted or sensed by the user as “roughness.” While such interpretations of touch are limited by the user’s individualized sensory perceptions, many sensory perceptions of touch are common to most users. Therefore, when tactile output is described as corresponding to a user’s specific sensory perception (e.g., “press click,” “release click,” “roughness”), unless otherwise stated, the generated tactile output corresponds to a physical displacement of the device or its components that will generate the sensory perception of a typical (or average) user. Providing tactile feedback to the user using tactile output enhances device operability and makes the user-device interface more efficient (e.g., by helping the user provide appropriate input and reducing user errors when operating / interacting with the device), thereby further reducing power consumption and extending device battery life by enabling users to use the device more quickly and efficiently.

[0047] In some implementations, the haptic output mode specifies the characteristics of the haptic output, such as the amplitude of the haptic output, the shape of the motion waveform of the haptic output, the frequency of the haptic output, and / or the duration of the haptic output.

[0048] When a device generates haptic output having different haptic output patterns (e.g., via one or more haptic output generators that generate haptic output via moving movable masses), the haptic output can produce different tactile sensations in a user holding or touching the device. While the user's senses are based on the user's perception of the haptic output, most users will be able to recognize changes in the waveform, frequency, and amplitude of the haptic output generated by the device. Thus, the waveform, frequency, and amplitude can be adjusted to indicate to the user that a different operation has been performed. In this way, haptic output having haptic output patterns designed, selected, and / or arranged to simulate characteristics (e.g., size, material, weight, stiffness, smoothness, etc.) of objects in a given environment (e.g., a user interface including graphical features and objects, a simulated physical environment having virtual boundaries and virtual objects, a real physical environment having physical boundaries and physical objects, and / or a combination of any of the above); behaviors (e.g., oscillation, displacement, acceleration, rotation, stretching, etc.); and / or interactions (e.g., collision, adhesion, repulsion, attraction, friction, etc.) of objects in the given environment will, in some cases, provide helpful feedback to the user that reduces input errors and improves the user's efficiency in operating the device. Additionally, haptic output is optionally generated to correspond to feedback unrelated to simulated physical characteristics such as input thresholds or object selection. Such haptic output will, in some cases, provide helpful feedback to the user that reduces input errors and improves the user's efficiency in operating the device.

[0049] In some embodiments, haptic output having suitable haptic output patterns serves as a cue that an event of interest occurred in a user interface or behind a screen in a device. Examples of events of interest include activation of an affordance (e.g., a real or virtual button, or a toggle switch) provided on the device or in the user interface, success or failure of a requested operation, reaching or crossing a boundary in the user interface, entering a new state, switching input focus between objects, activating a new mode, reaching or crossing an input threshold, detecting or recognizing a type of input or gesture, and so on. In some embodiments, haptic output is provided to serve as a warning or cue about an impending event or outcome that will occur unless a change in direction or interruption of the input is timely detected. Haptic output is also used in other contexts to enrich the user experience, improve accessibility of the device for users with visual or motor difficulties or other accessibility needs, and / or improve the efficiency and functionality of the user interface and / or device. Haptic output is optionally compared with audio input and / or visual user interface changes, which further enhances the user's experience when the user interacts with the user interface and / or device, facilitates better transmission of information about the state of the user interface and / or device, and reduces input errors and improves the user's efficiency in operating the device.

[0050] It should be appreciated that device 100 is only one example of a portable multifunctional device, and that device 100 optionally has more or fewer components than shown, optionally combines two or more components, or optionally has a different configuration or arrangement of the components. The various components illustrated for device 100 can be implemented in hardware, software, firmware, or any combination thereof, including one or more signal processing and / or application specific integrated circuits. FIG. 1A The various components illustrated in FIG. 1A are implemented in hardware, software, firmware, or any combination thereof, including one or more signal processing and / or application specific integrated circuits.

[0051] Memory 102 optionally includes high-speed random access memory and can also include nonvolatile memory, such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other nonvolatile solid-state storage devices. Access to memory 102 by other components of device 100 is, optionally, controlled by a memory controller 122.

[0052] Peripheral interface 118 can be used to couple input and output peripherals of the device to memory 102 and to one or more processors 120. The one or more processors 120 run or execute various software programs and / or sets of instructions stored in memory 102 to perform various functions of device 100 and to process data.

[0053] In some embodiments, peripheral interface 118, one or more processors 120, and memory controller 122 are implemented on a single chip, such as chip 104. In some other embodiments, they are implemented on separate chips.

[0054] RF (radio frequency) circuitry 108 receives and sends RF signals, also called electromagnetic signals. RF circuitry 108 converts electrical signals to / from electromagnetic signals and communicates with communications networks and other communications devices, via the electromagnetic signals. The RF circuitry 108, optionally, includes well-known circuitry for detecting and

[0055] Audio circuitry 110, speaker 111, and microphone 113 provide an audio interface between a user and device 100. Audio circuitry 110 receives audio data from peripherals interface 118, converts the audio data to an electrical signal, and transmits the electrical signal to speaker 111. Speaker 111 converts the electrical signal to human-audible sound waves. Audio circuitry 110 also receives electrical signals converted by microphone 113 from sound waves. Audio circuitry 110 converts the electrical signal to audio data and transmits the audio data to peripherals interface 118 for processing. Audio data is, optionally, retrieved from and / or transmitted to memory 102 and / or RF circuitry 108 by peripherals interface 118. In some embodiments, audio circuitry 110 also includes a headset jack (e.g., 212 in FIG. 2). The headset jack provides an interface between audio circuitry 110 and removable audio input / output peripherals, such as output-only headphones or a headset with both output (e.g., stereo FIG. 2

[0056] I / O subsystem 106 couples input / output peripherals on device 100, such as touch-sensitive display system 112 and other input or control devices 116, with peripherals interface 118. I / O subsystem 106, optionally, includes display controller 156, optical sensor controller 158, intensity sensor controller 159, haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive / send electrical signals from / to other input or control devices 116. The other input or control devices 116 optionally include physical buttons (e.g., 208 in FIG. 2), dials, slider switches, joysticks, click wheels, and so on. In some alternate embodiments, input controller(s) 160 are, optionally, coupled with any FIG. 2 FIG. 2

[0057] ​​​The touch-sensitive display system 112 provides an input interface and an output interface between the device and a user. The display controller 156 receives and / or sends electrical signals from / to the touch-sensitive display system 112. The touch-sensitive display system 112 renders visual output to the user. As used herein, the term "visual output" includes, among other things, text, graphics, icons, video, and any combination thereof (collectively, "graphics"). In some embodiments, some or all of the visual output corresponds to user-interface objects. As used herein, the term "affordance" is a user-interactive graphical user-interface object (e.g., a graphical user-interface object that is configured to respond to input directed to the graphical user-interface object). Examples of user-interactive graphical user-interface objects include, without limitation, a button, a slider, an icon, a selectable menu item, a switch, a hyperlink, or other user-interface control.

[0058] The touch-sensitive display system 112 has a touch-sensitive surface, sensor, or set of sensors that accepts input from the user based on haptic and / or tactile contact. The touch-sensitive display system 112 and the display controller 156 (along with any associated modules and / or sets of instructions in memory 102) detect contact (and any movement or breaking of the contact) on the touch-sensitive display system 112 and convert the detected contact into interaction with user-interface objects (e.g., one or more soft keys, icons, web pages, or images) that are displayed on the touch-sensitive display system 112. In some embodiments, a point of contact between the touch-sensitive display system 112 and the user corresponds to a finger or stylus of the user.

[0059] The touch-sensitive display system 112 optionally uses LCD (liquid crystal display) technology, LPD (light emitting polymer display) technology, or LED (light-emitting diode) technology, although other display technologies are used in other embodiments. The touch-sensitive display system 112 and the display controller 156 optionally use integrated on-board controllers or other iPod and technology found in the iPhone® and iPod Touch® from Apple Inc. (Cupertino, California) to detect contact and any movement or breaking thereof.

[0060] Touch-sensitive display system 112 optionally uses LCD (Liquid Crystal Display) technology, LPD (Light Emitting Polymer Display) technology, or LED (Light Emitting Diode) technology, although other display technologies are used in other implementations. Viewable images generated by the display are incident on the touch-sensitive display system, which includes a touch-sensitive surface capable of receiving input from a user. In some embodiments, the touch-sensitive surface is a capacitive touch screen, a resistive touch screen, a surface acoustic wave touch screen, or an infrared touch screen, although other types of touch screens are used in other implementations. In some embodiments, the touch-sensitive display system includes a controller for detecting input from the user, such as a touch screen controller connected to the touch-sensitive surface. The controller optionally is integrated with the processor, though in the alternative, a separate controller (not shown) is used. In some embodiments, the controller is, optionally, implemented as hardware or software (or both), such as a software running in the memory.

[0061] In some embodiments, in addition to the touch screen, device 100 optionally includes a touchpad (not shown) for activating or deactivating particular functions. In some embodiments, the touchpad is a touch-sensitive area of the device that, unlike the touch screen, does not display visual output. The touchpad optionally is a touch-sensitive surface that is separate from the touch-sensitive display system 112 or is an extension of the touch-sensitive surface formed by the touch screen.

[0062] Device 100 also includes power system 162 for powering the various components of device 100. Power system 162 optionally includes a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharging system, a power failure detection circuit, a power converter or inverter, a power status indicator (e.g., a light-emitting diode (LED)) and any other components associated with the generation, management and distribution of power for device 100.

[0063] Device 100 optionally also includes one or more optical sensors 164. FIG. 1A Optical sensor(s) 164 are optionally coupled to optical sensor controller 158 in I / O subsystem 106. Optical sensor(s) 164 optionally include charge-coupled device (CCD) or complementary metal-oxide semiconductor (CMOS) photoreceptor(s). Optical sensor(s) 164 receive light from the environment, projected through one or more lenses, and converts the light to data representing an image. In conjunction with imaging module 143 (also called a camera module), optical sensor(s) 164 optionally capture still images or video. In some embodiments, an optical sensor is located on the back of device 100, opposite the touch-sensitive display system 112 on the front of the device, so that the touch-sensitive display system is capable of acting as a viewfinder for either still and / or video image acquisition. In some embodiments, another optical sensor is located on the front of the device so that the user’s image is, optionally, obtained for videoconferencing while the user views the other video conference participants on the touch-sensitive display system. In some embodiments, the position of one or both optical sensor(s) 164 is changed by the device as described in U.S. Patent Application No. 11 / 360,671, “Adaptive Input Method” (citing U.S. Patent No. 6,198,539), filed March 3, 2006, the content of which is hereby incorporated by reference in its entirety.

[0064] Device 100 optionally also includes one or more contact intensity sensors 165. FIG. 1A Contact intensity sensor(s) coupled with intensity sensor controller(s) 159 in I / O subsystem 106. Contact intensity sensor(s) 165 optionally include one or more piezoresistive strain gauges, capacitive force sensors, electric force sensors, piezoelectric force sensors, optical force sensors, capacitive touch surfaces, or other intensity sensors (e.g., sensors used to measure the force (or pressure) of a contact on a touch sensitive surface). Contact intensity sensor(s) 165 receive contact intensity information (e.g., pressure information or a proxy for pressure information) from the environment. In some embodiments, at least one contact intensity sensor is collocated with, or proximate to, a touch sensitive surface (e.g., touch sensitive display system 112). In some embodiments, at least one contact intensity sensor is located on the back of device 100, opposite touch sensitive display system 112 which is located on the front of device 100.

[0065] Device 100 optionally also includes one or more proximity sensors 166. FIG. 1A Proximity sensor(s) 166 coupled with peripherals interface 118. Alternatively, proximity sensor 166 is coupled with input controller 160 in I / O subsystem 106. In some embodiments, proximity sensor 166 turns off and disables touch sensitive display system 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).

[0066] Device 100 optionally also includes one or more tactile output generators 167. FIG. 1A Tactile output generators coupled with haptic feedback controller 161 in I / O subsystem 106. In some embodiments, tactile output generator(s) 167 include one or more electroacoustic devices such as speakers or other audio components and / or electromechanical devices such as a motor, a solenoid, an electroactive polymer, a piezoelectric actuator, an electrostatic actuator, or other tactile output generating component (e.g., a component that converts electrical signals into tactile outputs on the device). Tactile output generator 167 receives tactile feedback generation instructions from haptic feedback module 133 and generates tactile outputs on device 100 that are capable of being sensed by a user of device 100. In some embodiments, at least one tactile output generator is collocated with, or proximate to, a touch sensitive surface (e.g., touch sensitive display system 112) and, optionally, generates a tactile output by moving the touch sensitive surface vertically (e.g., in / out of a surface of device 100) or laterally (e.g., back and forth in the same plane as a surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the back of device 100, opposite touch sensitive display system 112 which is located on the front of device 100.

[0067] The device 100 may optionally also include one or more accelerometers 168. FIG. 1A An accelerometer 168 coupled to a peripheral interface 118 is shown. Alternatively, the accelerometer 168 may be coupled to an input controller 160 in an I / O subsystem 106. In some embodiments, information is displayed on a touchscreen display in portrait or landscape view based on analysis of data received from the one or more accelerometers. The device 100 may optionally include, in addition to the one or more accelerometers 168, a magnetometer (not shown) and a GPS (or GLONASS or other global navigation system) receiver (not shown) for acquiring information about the location and orientation (e.g., portrait or landscape) of the device 100.

[0068] In some embodiments, the software components stored in memory 102 include an operating system 126, a communication module (or instruction set) 128, a touch / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a haptic feedback module (or instruction set) 133, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and an application program (or instruction set) 136. Furthermore, in some embodiments, memory 102 stores device / global internal state 157, as shown in Figures 1A and 1B. FIG. 3 As shown in the diagram. Device / global internal state 157 includes one or more of the following: active application state, which indicates which applications (if any) are currently active; display state, which indicates what applications, views or other information occupy the various areas of the touch-sensitive display system 112; sensor state, including information obtained from the device's various sensors and other input or control devices 116; and position and / or orientation information regarding the device's position and / or orientation.

[0069] The operating system 126 (e.g., iOS, Darwin, RTXC, LINUX, UNIX, OSX, WINDOWS, or embedded operating systems such as VxWorks) includes various software components and / or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware and software components.

[0070] Communication module 128 facilitates communication with other devices over one or more external ports 124 and also includes various software components for handling data received by RF circuitry 108 and / or external port 124. External port 124 (e.g., Universal Serial Bus (USB), FIREWIRE, etc.) is adapted for coupling directly to other devices or indirectly over a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, the external port is a multi-pin (e.g., 30-pin) connector that is the same as, or similar to, and / or compatible with, the 30-pin connector used in iPod and iPhone devices. In some embodiments, the external port is a Lightning connector that is the same as, or similar to, and / or compatible with, the Lightning connector used in iPod touch® and iPhone® devices. iPod and iPhone devices. In some embodiments, the external port is a Lightning connector that is the same as, or similar to, and / or compatible with, the Lightning connector used in iPod touch® and iPhone® devices. iPod and iPhone devices. In some embodiments, the external port is a Lightning connector that is the same as, or similar to, and / or compatible with, the Lightning connector used in iPod touch® and iPhone® devices.

[0071] Contact / motion module 130 optionally detects contact with touch-sensitive display system 112 (in conjunction with display controller 156) and other touch-sensitive devices (e.g., a touchpad or physical click wheel). Contact / motion module 130 includes various software components for performing various operations related to detection of contact (e.g., by a finger or stylus) with the touch-sensitive display system 112, such as determining if contact has occurred (e.g., detecting a finger-down event), determining an intensity of the contact (e.g., the force or pressure of the contact or a substitute for the force or pressure of the contact), determining if movement has occurred (e.g., detecting a finger-drag event), and determining a velocity (magnitude and / or direction), an acceleration (change in magnitude and / or direction), and / or a deceleration (change in magnitude and / or direction) of the contact movement (e.g., detecting a finger-lift-off event or a contact break), on the touch-sensitive surface, among countless other possibilities. Contact / motion module 130 receives contact data from the touch-sensitive surface. Determining movement of the point of contact, which is represented by a series of contact data, optionally includes determining speed (magnitude), velocity (magnitude and direction), and / or acceleration (a change in magnitude and / or direction) of the point of contact. These operations are, optionally, applied to single contact events (e.g., one finger events) or to multiple simultaneous contact events (e.g., “multitouch” / multiple finger events). In some embodiments, contact / motion module 130 and display controller 156 detect contact on a touchpad.

[0072] Contact / motion module 130 optionally detects contact events with objects, such as the contact 222 with the contacts module 142 on the touch-sensitive display 112. The

[0073] In some embodiments, detecting a finger tap gesture depends on detecting a length of time between a finger down event and a finger up event, but is independent of a strength of finger contact between the finger down event and the finger up event. In some embodiments, a tap gesture is detected in accordance with a determination that the length of time between the finger down event and the finger up event is less than a predetermined value (e.g., less than 0.1, 0.2, 0.3, 0.4, or 0.5 seconds), regardless of whether a strength of the finger contact during the tap reaches a given intensity threshold (greater than a nominal contact detection intensity threshold), such as a light press or deep press intensity threshold. Thus, a finger tap gesture can satisfy a particular input criterion that does not require a characteristic intensity of the contact to satisfy a given intensity threshold to satisfy the particular input criterion. For clarity, finger contact in a tap gesture typically needs to satisfy a nominal contact detection intensity threshold to detect a finger down event, below which contact would not be detected. Similar analysis applies to detecting tap gestures by stylus or other contact. Where a device is capable of detecting hovering finger or stylus contact above a touch-sensitive surface, the nominal contact detection intensity threshold optionally does not correspond to physical contact between the finger or stylus and the touch-sensitive surface.

[0074] The same concepts apply in an analogous manner to other types of gestures. For example, a swipe gesture, a pinch gesture, an expand gesture, and / or a long press gesture can optionally be detected based on satisfying criteria that is independent of the intensity of contacts included in the gesture or that does not require one or more contacts performing the gesture to reach an intensity threshold in order to be recognized. For example, a swipe gesture is detected based on an amount of movement of one or more contacts; a pinch gesture is detected based on movement of two or more contacts toward each other; an expand gesture is detected based on movement of two or more contacts away from each other; and a long press gesture is detected based on the duration of a contact on the touch-sensitive surface that has less than a threshold amount of movement. Thus, a statement that a particular gesture recognition criterion does not require a contact intensity to satisfy a corresponding intensity threshold in order to satisfy the particular gesture recognition criterion means that the particular gesture recognition criterion can be satisfied with contacts in a gesture that do not reach the corresponding intensity threshold, and also can be satisfied with one or more contacts in a gesture that reach or exceed the corresponding intensity threshold. In some embodiments, a tap gesture is detected based on a determination that a finger down event and a finger up event are detected within a predefined time period, regardless of whether the contact is above or below a corresponding intensity threshold during the predefined time period, and a swipe gesture is detected based on a determination that a contact moves more than a predefined amount, even if the contact is above the corresponding intensity threshold at the end of the contact movement. Even in implementations in which detection of a gesture is affected by the intensity of a contact performing the gesture (e.g., a device detects a long press more quickly when the intensity of the contact is above an intensity threshold, or a device delays detection of a tap input when the intensity of the contact is higher), detection of these gestures does not require the contact to reach a particular intensity threshold as long as the criteria for recognizing the gesture can be satisfied with a contact that does not reach the particular intensity threshold (e.g., even if the amount of time required to recognize the gesture changes).

[0075] In certain instances, the contact intensity threshold, the duration threshold, and the movement threshold are combined in various different combinations in order to create heuristic algorithms to distinguish between two or more different gestures for the same input element or region, such that multiple different interactions with the same input element can provide a richer set of user interactions and responses. The statement that a particular gesture recognition criterion does not require the intensity of the contact to satisfy a corresponding intensity threshold in order for the particular gesture recognition criterion to be satisfied does not preclude other intensity-dependent gesture recognition criteria from being simultaneously evaluated to identify other gestures that have criteria that are satisfied when the gesture includes a contact having an intensity above the corresponding intensity threshold. For example, in certain instances, a first gesture recognition criterion of a first gesture (which does not require the intensity of the contact to satisfy a corresponding intensity threshold in order for the first gesture recognition criterion to be satisfied) competes with a second gesture recognition criterion of a second gesture (which depends on a contact meeting a corresponding intensity threshold). In such a competition, if the second gesture recognition criterion of the second gesture is first satisfied, then the gesture is optionally not identified as satisfying the first gesture recognition criterion of the first gesture. For example, if the contact meets the corresponding intensity threshold before the contact moves a predefined movement amount, then a deep press gesture is detected instead of a swipe gesture. Conversely, if the contact moves the predefined movement amount before the contact meets the corresponding intensity threshold, then a swipe gesture is detected instead of a deep press gesture. Even in such instances, the first gesture recognition criterion of the first gesture still does not require the intensity of the contact to satisfy the corresponding intensity threshold in order for the first gesture recognition criterion to be satisfied, because if the contact remains below the corresponding intensity threshold until the end of the gesture (e.g., a swipe gesture with a contact that does not increase in intensity above the corresponding intensity threshold), the gesture would be identified as a swipe gesture by the first gesture recognition criterion. Thus, a particular gesture recognition criterion that does not require the intensity of the contact to satisfy a corresponding intensity threshold in order for the particular gesture recognition criterion to be satisfied will either (A) in certain instances, ignore the contact intensity relative to the intensity threshold (e.g., for a tap gesture) and / or (B) in certain instances, be unable to be satisfied if a set of competing intensity-dependent gesture recognition criteria (e.g., for a deep press gesture) identify the input as corresponding to an intensity-dependent gesture before the particular gesture recognition criterion identifies the input as corresponding to a gesture (e.g., for a long press gesture), in the sense that the particular gesture recognition criterion still depends on the contact intensity relative to the intensity threshold (e.g., for a long press gesture that competes for recognition with a deep press gesture).

[0076] Graphics module 132 includes various known software components for rendering and displaying graphics on touch-sensitive display system 112 or other display, including components for changing visual impact (e.g., brightness, transparency, saturation, contrast, or other visual property) of graphics that are displayed. As used herein, the term "graphics" includes any object that can be displayed to a user, including without limitation text, web pages, icons (such as user-interface objects including soft keys), digital images, videos, animations, and the like.

[0077] In some embodiments, graphics module 132 stores data representing graphics to be used. Each graphic is optionally assigned a corresponding code. Graphics module 132 receives, from applications etc., one or more codes specifying graphics to be displayed, and then generates screen image data for a

[0078] Haptic feedback module 133 includes various software components for generating instructions used by tactile feedback controller 161 to induce tactile feedback to a user (e.g., instructions to vibrate haptic feedback controller 161 at different frequencies to produce different tactile feedback sensations).

[0079] Text input module 134, which is, optionally, a component of graphics module 132, provides soft keyboards for entering text in various applications (e.g., contacts 137, e-mail 140, IM 141, browser 147, and any other application that needs text input).

[0080] GPS module 135 determines the location of the device and provides this information for use in various applications (e.g., to telephone 138 for use in location-based dialing; to camera 143 as picture / video metadata; and to applications that provide location- based services such as weather widgets, local yellow page widgets, and map / navigation widgets).

[0081] Applications 136, optionally, include the following modules (or sets of instructions):

[0082] • contacts module 137 (sometimes referred to as an address book or contact list);

[0083] • telephone module 138;

[0084] • video conference module 139;

[0085] • e-mail client module 140;

[0086] • instant messaging (IM) module 141;

[0087] • fitness support module 142;

[0088] • camera module 143 for still and / or video images;

[0089] • image management module 144;

[0090] • browser module 147;

[0091] • calendar module 148;

[0092] • widget module 149, which optionally includes one or more of the following: a weather widget 149-1, a stock market widget 149-2, a calculator widget 149-3, an alarm clock widget 149-4, a dictionary widget 149-5, and other widgets obtained by the user, and user-created widgets 149-6;

[0093] widget creator module 150 for forming user-created widgets 149-6;

[0094] • search module 151;

[0095] • video and music player module 152, which optionally includes the following modules: a video player module and a music player module;

[0096] • notepad module 153;

[0097] • map module 154; and / or

[0098] • online video module 155.

[0099] Examples of other applications 136 that can optionally be stored in memory 102 include other word processing applications, other image editing applications, drawing applications, presentation applications, JAVA-enabled applications, encryption, digital rights management, voice recognition, and voice replication.

[0100] In conjunction with touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, contacts module 137 includes executable instructions to manage an address book or contact list (e.g., the application internal state 192 in memory 102 or the subset of the application internal state 192 in memory 370) stored in application internal state 192 of contacts module 137, wherein each contact in the address book or contact list can include one or more of: name, phone number, email address, physical address, website, logo, photographs, videos, message, social network

[0101] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, telephone module 138 includes executable instructions to: input textual data, e.g. a sequence of characters, corresponding to a telephone number; access name, address, and / or telephone number information stored in contacts module 137; modify previously-entered telephone number; dial the respective telephone number; conduct a conversation using microphone 113 and speaker 111; and cause disconnection or hang-up when the conversation is finished. As described above, the wireless communication optionally uses any of a plurality of communications standards, protocols, and technologies.

[0102] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, contacts list 137, and telephone module 138, video conference module 139 includes executable instructions to initiate, conduct, and terminate a video conference between a user and one or more other participants in accordance with user instructions.

[0103] In conjunction with RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, e-mail client module 140 includes executable instructions to create, send, receive, and manage e-mail in response to user instructions. In conjunction with image management module 144, e-mail client module 140 makes it very easy to create and send e-mails with still or video images taken with camera module 143.

[0104] In conjunction with RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the instant messaging module 141 includes executable instructions to enter a sequence of characters corresponding to an instant message, modify previously entered characters, transmit the

[0105] In conjunction with RF circuitry 108, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and video and music player module 152, the workout support module 142 includes executable instructions to create workouts (e.g., with time, distance, and / or calorie burning goals); communicate with workout sensors (in sports devices and smart watches); receive workout sensor data; calibrate sensors used to monitor a workout; select and play music for a workout; and display, store, and transmit workout data.

[0106] In conjunction with touch-sensitive display system 112, display controller 156, one or more optical sensors 164, optical sensor controller 158, contact module 130, graphics module 132, and image management module 144, the camera module 143 includes executable instructions to capture still images or video (including a video stream) and store them into memory 102, modify characteristics of a still image or video, and delete a still image or video from memory 102.

[0107] In conjunction with touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, and camera module 143, the image management module 144 includes executable instructions to arrange, modify (e.g., edit), or otherwise manipulate, label, delete, present (e.g., in a digital slide show or album), and store still and / or video images.

[0108] In conjunction with RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, browser module 147 includes executable instructions to browse the Internet in accordance with user instructions, including searching, linking to, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages.

[0109] In conjunction with RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, e-mail client module 140, and browser module 147, calendar module 148 includes executable instructions to create, display, modify, and store calendars and data associated with calendars (e.g., calendar entries, to-do lists, etc.) in accordance with user instructions.

[0110] In conjunction with RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, and browser module 147, the desktop app module 149 are mini-applications (e.g., weather desktop app 149-1, stocks desktop app 149-2, calculator desktop app 149-3, alarm clock desktop app 149-4, and dictionary desktop app 149-5) that are optionally downloaded and used by a user and / or created by the user (e.g., user-created desktop app 149-6). In some embodiments, desktop apps include HTML (Hypertext Markup Language) files, CSS (Cascading Style Sheet) files, and JavaScript files. In some embodiments, desktop apps include XML (Extensible Markup Language) files and JavaScript files (e.g., Yahoo! Desktop apps).

[0111] In conjunction with RF circuitry 108, touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, and browser module 147, the desktop app module 149 are mini-applications (e.g., weather desktop app 149-1, stocks desktop app 149-2, calculator desktop app 149-3, alarm clock desktop app 149-4, and dictionary desktop app 149-5) that are optionally downloaded and used by a user and / or created by the user (e.g., user-created desktop app 149-6). In some embodiments, desktop apps include HTML (Hypertext Markup Language) files, CSS (Cascading Style Sheet) files, and JavaScript files. In some embodiments, desktop apps include XML (Extensible Markup Language) files and JavaScript files (e.g., Yahoo! Desktop apps).

[0112] In conjunction with touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, and text input module 134, the search module 151 includes executable instructions to search for text, music, sound, image, video, and / or other files in memory 102 that match one or more search criteria (e.g., one or more user-specified search terms) in accordance with user instructions.

[0113] In conjunction with touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, and browser module 147, video and music player module 152 includes executable instructions that allow the user to download and play back recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files, and executable instructions to display, present or otherwise play back videos (e.g., on touch-sensitive display 112, or on an external, wireless-enabled display via external port 124). In some embodiments, device 100 optionally includes the functionality of an MP3 player, such as an iPod (trademark of Apple Inc.).

[0114] In conjunction with touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, notes module 153 includes executable instructions to create and manage notes, to-do lists, and the like in accordance with user instructions.

[0115] In conjunction with RF circuitry 108, touch- sensitive display system 112, display system controller 156, contact module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, map module 154 includes executable instructions to receive, display, modify, and store maps and data associated with maps (e.g., driving directions; data on stores and other points of interest at or near a particular location; and other location-based data) in accordance with user instructions.

[0116] In conjunction with touch-sensitive display system 112, display system controller 156, contact module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, text input module 134, e-mail client module 140, and browser module 147, online video module 155 includes executable instructions that allow the user to access, browse, receive (e.g., by streaming and / or download), play back (e.g., on the touch screen 112, or on an external, wireless-enabled display via external port 124), send an e-mail with a link to a particular online video, and otherwise manage one or more online videos in one or more formats, such as H.264. In some embodiments, instant messaging module 141, rather than e-mail client module 140, is used to send a link to a particular online video.

[0117] Each of the above identified modules and applications correspond to a set of executable instructions for performing one or more functions described above and the methods described in this application (e.g., the computer-implemented methods and other information processing methods described herein). These modules (i.e., sets of instructions) need not be implemented as separate software programs, procedures, or modules, and thus various subsets of these modules are, optionally, combined or otherwise re-arranged in various embodiments. In some embodiments, memory 102 optionally stores a subset of the modules and data structures identified above. Furthermore, memory 102 optionally stores additional modules and data structures not described above.

[0118] In some embodiments, device 100 is a device for which a predefined set of functions of the device are operated exclusively through the touch screen and / or touchpad. By using the touch screen and / or touchpad as the primary input control devices for operating device 100, the number of physical input control devices (e.g., push buttons, dials, or the like) on device 100 is, optionally, reduced.

[0119] The predefined set of functions that are operated exclusively through the touch screen and / or touchpad, optionally, includes navigation between user interfaces. In some embodiments, the touchpad, when touched by a user, navigates device 100 from any user interface displayed on device 100 to a main menu, home menu, or root menu. In such embodiments, the touchpad is used to implement a "menu button." In some other embodiments, the menu button is a physical push button or other physical input control device, rather than a touchpad.

[0120] FIG. 1B FIG. 17 is a block diagram illustrating exemplary components for event processing, in accordance with some embodiments. In some embodiments, memory 102 (e.g., within operating system 126) or memory 370 (e.g., within operating system 370) includes event classifier 170 (e.g., within operating system 126) and corresponding application 136-1 (e.g., any of the aforementioned applications 136, 137-155, 380-390). FIG. 1A FIG. 3

[0121] ​​The event sorter 170 receives event information and determines the application 136-1 to which events are directed, and an application view 191 within the application 136-1 that should process the events. The event sorter 170 includes an event monitor 171 and a event dispatcher module 174. In some embodiments, application 136-1 includes an application internal state 192, that indicates to the event sorter 170 which one or more application views 191 are currently displayed on the touch-sensitive display 112 when the application is active or executing. In some embodiments, device / global internal state 157 is used by the event sorter 170 to determine which application(s) is currently active, and application internal state 192 is used to determine which application views 191 within the active application(s) should process events. The event monitor 171 receives event information from the peripheral interface 118 and determines which application(s) the events are directed to.

[0122] In some embodiments, application internal state 192 includes additional information, such as one or more of the following: resume information to be used when the application 136-1 is resumed; user interface state information to be displayed or ready for use by the application 136-1; a state queue to enable the user to return to a previous state or view of the application 136-1; and a repeat / undo queue of previous actions taken by the user.

[0123] The event monitor 171 receives event information from the peripheral interface 118. The event information includes information about sub-events (e.g., user touches on touch-sensitive display 112, contact motions on touch- sensitive surface). The peripheral interface 118 transmits information, it receives from the I / O subsystem 106 or sensors such as the proximity sensor 166, the one or more accelerometers 168, and / or microphone 113 (through audio circuitry 110). The peripheral interface 118 receives information from the I / O subsystem 106 including information from the touch-sensitive display 112 or touch-sensitive surface.

[0124] In some embodiments, the event monitor 171 sends requests to the peripheral interface 118 at pre-determined intervals. In response, the peripheral interface 118 transmits event information. In other embodiments, the peripheral interface 118 transmits event information only when there is a substantial event (e.g., input that is different from the previous input by more than a pre-determined noise threshold and / or the receipt of input that is older than a pre-determined duration).

[0125] In some embodiments, the event sorter 170 also includes a hit view determination module 172 and / or an active event recognizer determination module 173.

[0126] When the touch-sensitive display system 112 displays more than one view, the hit view determination module 172 provides a software process for determining where within one or more views a sub-event has occurred. A view is composed of controls and other elements that a user can see on the display.

[0127] Another aspect of a user interface associated with an application is a set of views, sometimes also referred to herein as application views or user interface windows, in which information is displayed and touch-based gestures occur. The application view (of the respective application) in which a touch is detected optionally corresponds to a programmed level within a programmed or view hierarchy of the application. For example, the lowest level view in which a touch is detected is optionally referred to as the hit view, and the set of events that are correctly entered are optionally determined based at least in part on the hit view of an initial touch that begins a touch-based gesture.

[0128] The hit view determination module 172 receives information related to sub-events of a touch-based gesture. When an application has multiple views organized in a hierarchy, the hit view determination module 172 identifies the lowest view in the hierarchy that should be handled for a sub-event. In most cases, the hit view is the lowest level view in which an initiating sub-event (i.e., the first sub-event in a sequence of sub-events that form an event or potential event) occurs. Once the hit view is identified by the hit view determination module, the hit view typically receives all sub-events related to the same touch or input source for which it was identified as the hit view.

[0129] The active event recognizer determination module 173 determines which view or views within a view hierarchy should receive a particular sequence of sub-events. In some embodiments, the active event recognizer determination module 173 determines that only the hit view should receive a particular sequence of sub-events. In other embodiments, the active event recognizer determination module 173 determines that all views that include the physical location of a sub-event are actively engaged views, and thus determines that all actively engaged views should receive a particular sequence of sub-events. In other embodiments, even if a touch sub-event is entirely confined to a region associated with one particular view, higher views in the hierarchy will remain actively engaged views.

[0130] The event dispatcher module 174 dispatches event information to event recognizers (e.g., event recognizers 180). In embodiments that include the active event recognizer determination module 173, the event dispatcher module 174 delivers event information to the event recognizers determined by the active event recognizer determination module 173. In some embodiments, the event dispatcher module 174 stores event information in an event queue that is retrieved by respective event receiver modules 182.

[0131] In some embodiments, operating system 126 includes event classifier 170. Alternatively, application programs 136-1 include event classifier 170. In yet another embodiment, event classifier 170 is a standalone module, or is part of another module stored in memory 102, such as contact / motion module 130.

[0132] In some embodiments, application programs 136-1 include a plurality of event handlers 190 and one or more application views 191, each of which includes instructions for handling touch events that occur within a respective view of the user interface of the application program. Each application view 191 of application programs 136-1 includes one or more event recognizers 180. Typically, a respective application view 191 includes multiple event recognizers 180. In other embodiments, one or more of event recognizers 180 are part of a higher level object, such as a user interface toolkit (not shown) or a higher level object from which application programs 136-1 inherit methods and other attributes. In some embodiments, a respective event handler 190 includes one or more of: a data updater 176, an object updater 177, a GUI updater 178, and / or event data 179 received from event classifier 170. Event handler 190 optionally utilizes or calls data updater 176, object updater 177, or GUI updater 178 to update the application internal state 192. Alternatively, one or more of application views 191 includes one or more respective event handlers 190. Additionally, in some embodiments, one or more of data updater 176, object updater 177, and GUI updater 178 are included in a respective application view 191.

[0133] A respective event recognizer 180 receives event information (e.g., event data 179) from event classifier 170, and recognizes events from the event information. Event recognizers 180 include event receiver 182 and event comparator 184. In some embodiments, event recognizers 180 also include at least a subset of metadata 183 and event delivery instructions 188, which optionally include sub-event delivery instructions.

[0134] The event receiver 182 receives event information from the event classifier 170. The event information includes information about a sub-event, e.g., a touch or a touch movement. Depending on the sub-event, the event information also includes additional information, such as the location of the sub-event. When the sub-event involves motion of a touch, the event information optionally also includes the velocity and direction of the sub-event. In some embodiments, the event includes the device rotating from one orientation to another (e.g., from a portrait orientation to a landscape orientation, or vice versa), and the event information includes corresponding information about the current orientation of the device (also referred to as the device posture).

[0135] The event comparator 184 compares the event information to predefined event or sub-event definitions, and determines the event or sub-event, or determines or updates the state of the event or sub-event, based on the comparison. In some embodiments, the event comparator 184 includes event definitions 186. The event definitions 186 contain definitions of events (e.g., predefined sequences of sub-events), such as event 1 (187-1), event 2 (187-2), and others. In some embodiments, the sub-events in the events 187 include, e.g., touch down, touch up, touch move, touch cancel, and multi-touch. In one example, the definition of event 1 (187-1) is a double tap on a displayed object. For example, a double tap includes a first touch (touch down) on a displayed object for a predetermined duration, a first lift off (touch up) for a predetermined duration, a second touch (touch down) on the displayed object for a predetermined duration, and a second lift off (touch up) for a predetermined duration. In another example, the definition of event 2 (187-2) is a drag on a displayed object. For example, a drag includes a touch (or contact) on a displayed object for a predetermined duration, movement of the touch on the touch-sensitive display system 112, and lift off of the touch (touch up). In some embodiments, the events also include information for one or more associated event handlers 190.

[0136] In some embodiments, the event definitions 187 include definitions of events for respective user interface objects. In some embodiments, the event comparator 184 performs a hit test to determine which user interface object is associated with a sub-event. For example, in an application view that displays three user interface objects on the touch-sensitive display system 112, when a touch is detected on the touch-sensitive display system 112, the event comparator 184 performs a hit test to determine which of the three user interface objects is associated with the touch (sub-event). If each displayed object is associated with a respective event handler 190, the event comparator uses the results of the hit test to determine which event handler 190 should be activated. For example, the event comparator 184 selects the event handler that is associated with the sub-event and the object that triggered the hit test.

[0137] In some embodiments, the definition of a respective event 187 also includes a deferred action that delays delivery of event information until it has been determined whether the sequence of sub-events does or does not correspond to an event type of the event recognizer.

[0138] When a respective event recognizer 180 determines that a sequence of sub-events does not match any event in the event definitions 186, the respective event recognizer 180 enters an event impossible, event failed, or event ended state, after which subsequent sub-events of the touch-based gesture are ignored. In this case, other event recognizers (if any) that remain active for the hit view continue to track and process sub-events of the ongoing touch-based gesture.

[0139] In some embodiments, a respective event recognizer 180 includes metadata 183 with configurable attributes, flags, and / or lists that indicate how the event delivery system should perform sub-event delivery to the actively engaged event recognizer. In some embodiments, the metadata 183 includes configurable attributes, flags, and / or lists that indicate how event recognizers interact or are able to interact with each other. In some embodiments, the metadata 183 includes configurable attributes, flags, and / or lists that indicate whether sub-events are delivered to different levels in a view or programmatic hierarchy.

[0140] In some embodiments, when one or more particular sub-events of an event are recognized, the respective event recognizer 180 activates an event handler 190 associated with the event. In some embodiments, the respective event recognizer 180 delivers event information associated with the event to the event handler 190. Activating an event handler 190 is distinct from sending (and deferring sending) sub-events to a respective hit view. In some embodiments, the event recognizer 180 throws a token associated with the recognized event, and an event handler 190 associated with the token picks up the token and performs a pre-defined process.

[0141] In some embodiments, the event delivery instructions 188 include sub-event delivery instructions that deliver event information about a sub-event without activating an event handler. Instead, the sub-event delivery instructions deliver event information to an event handler associated with the sequence of sub-events or to an actively engaged view. The event handler associated with the sequence of sub-events or with the actively engaged view receives the event information and performs a pre-determined process.

[0142] In some embodiments, data updater 176 creates and updates data used in application 136-1. For example, data updater 176 updates the telephone number used in contacts module 137, or stores a video file used in video or music player module 152. In some embodiments, object updater 177 creates and updates objects used in application 136-1. For example, object updater 177 creates a new user-interface object or updates the position of a user-interface object. GUI updater 178 updates the GUI. For example, GUI updater 178 prepares display information and sends it to graphics module 132 for display on the touch screen.

[0143] In some embodiments, event handler 190 includes or has access to data updater 176, object updater 177, and GUI updater 178. In some embodiments, data updater 176, object updater 177, and GUI updater 178 are included in a single module of application 136-1 or application views 191. In other embodiments, they are included in two or more software modules.

[0144] It should be understood that the above discussion regarding event handling of user touches on touch-sensitive displays also applies to other forms of user inputs to multifunctional devices 100 not involving touch. For example, mouse input, keyboard or keypad input, stylus input, voice or other audio input, focus- based input, gesture inputs from a mouse associated with a graphical user interface, or any other form of input that is used to identify events that cause manipulation on multifunctional device 100 are optional input devices that are used to interact with the user interface.

[0145] FIG. 2 Figure 1A shows a portable multifunctional device 100 having a touch screen in accordance with some embodiments. Figure 1B shows a portable multifunctional device 100 having front and back touch screens in accordance with some embodiments. FIG. 1AThe portable multifunction device 100 optionally also includes one or more physical buttons, such as "home" button 204. As described previously, the home button 204 is used to navigate to a set of applications 136 that are optionally executed on the device 100. Alternatively, in some embodiments, the home button is implemented as a soft key in the GUI displayed on the touch screen display.

[0146] The device 100 optionally also includes one or more physical buttons, such as "home" button 204. As described previously, the home button 204 is used to navigate to a set of applications 136 that are optionally executed on the device 100. Alternatively, in some embodiments, the home button is implemented as a soft key in the GUI displayed on the touch screen display.

[0147] In some embodiments, the device 100 includes a touch screen display, a menu button 204 (sometimes referred to as a home button 204), a volume adjustment button 208, a user identity module (SIM) card slot 210, a jacks 212, and a docking / charging external port 124. The home button 204 is optionally used to navigate to a set of applications 136 that are optionally executed on the device 100. In some embodiments, the home button 204 is implemented as a soft key in the GUI displayed on the touch screen display. In some embodiments, the device 100 also includes one or more contact intensity sensors 165 for detecting intensity of contacts on the touch screen display 112 and / or one or more tactile output generators 167 for generating tactile outputs for a user of the device 100.

[0148] FIG. 3is a block diagram of an exemplary multifunction device with a display and a touch-sensitive surface in accordance with some embodiments. Device 300 need not be portable. In some embodiments, device 300 is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an education device (such as a child's learning toy), a gaming device, or a control device (e.g., a home or industrial controller). Device 300 typically includes one or more processing units (CPU's) 310, one or more network or other communications interfaces 360, memory 370, and one or more communication buses 320 for interconnecting these components. Communication buses 320 optionally include circuitry (sometimes called a chipset) that interconnects and controls communications between system components. Device 300 includes input / output (I / O) interface 330 comprising display 340, which is typically a touch screen display. I / O interface 330 also optionally includes keyboard and / or mouse (or other pointing device) 350 and touchpad 355, tactile output generator 357 for generating tactile outputs (e.g., similar to the tactile output generator(s) 167 described above with reference to FIG. 1A the one or more contact intensity sensors 165 described above with reference to FIG. 1A the one or more contact intensity sensors 165 described above with reference to FIG. 1A ) of portable multifunction device 100. Additionally, memory 370 optionally stores additional programs, modules, and data structures not present in the memory 102 of portable multifunction device 100 (e.g., owing to a lack of space, native applications not required to be present on device 300, or other FIG. 1A

[0149] FIG. 3 ​Each of the above identified elements can optionally be stored in one or more of the aforementioned memory devices, and corresponds to a set of instructions for performing a function described above. The above identified modules or programs (i.e., sets of instructions) need not be implemented as separate software programs, procedures or modules, and thus various subsets of these modules can optionally be combined or otherwise re-arranged in various embodiments. In some embodiments, memory 370 optionally stores a subset of the modules and data structures identified above. Furthermore, memory 370 optionally stores additional modules and data structures not described above.

[0150] Attention is now directed towards embodiments of user interfaces ("UI") that are optionally implemented on portable multifunction devices 100.

[0151] FIG. 4A An exemplary user interface that includes an application menu on a portable multifunction device 100 is shown. Similar user interfaces are optionally implemented on device 300. In some embodiments, user interface 400 includes the following elements, or a subset or superset thereof:

[0152] • One or more signal strength indicators for one or more wireless communications, such as cellular and Wi-Fi signals;

[0153] • Time;

[0154] • A Bluetooth indicator;

[0155] • A battery status indicator;

[0156] • A tray 408 with icons for frequently used applications, such as:

[0157] • An icon 416 for telephone module 138, labeled "Phone," which optionally includes an indicator 414 of the number of missed calls or voicemail messages;

[0158] • An icon 418 for e-mail client module 140, labeled "Mail," which optionally includes an indicator 410 of the number of unread e-mail messages;

[0159] • An icon 420 for browser module 147, labeled "Browser"; and

[0160] • An icon 422 for video and music player module 152, labeled "Music"; and

[0161] • Icons for other applications, such as:

[0162] • An icon 424 for IM module 141, labeled "Messages";

[0163] o an icon 426 labeled "Calendar" for the Calendar module 148;

[0164] o an icon 428 labeled "Photos" for the Image Management module 144;

[0165] o an icon 430 labeled "Camera" for the Camera module 143;

[0166] o an icon 432 labeled "Online Videos" for the Online Videos module 155;

[0167] o an icon 434 labeled "Stocks" for the Stocks widget 149-2;

[0168] o an icon 436 labeled "Maps" for the Maps module 154;

[0169] o an icon 438 labeled "Weather" for the Weather widget 149-1;

[0170] o an icon 440 labeled "Clock" for the Clock widget 149-4;

[0171] o an icon 442 labeled "Fitness" for the Fitness module 142;

[0172] o an icon 444 labeled "Notes" for the Notes module 153; and

[0173] o an icon 446 for setting up applications or modules that provides access to settings for device 100 and its various applications 136.

[0174] It should be noted that FIG. 4A the icon labels shown in FIG. 6 are merely examples. For example, other labels are optionally used for the various application icons. In some embodiments, the label for a respective application icon includes the name of the application that corresponds to the respective application icon. In some embodiments, the label for a particular application icon is different than the name of the application that corresponds to the particular application icon.

[0175] FIG. 4B An example user interface on a device (e.g., device 300 in FIG. 3 with a touch-sensitive surface 451 (e.g., trackpad or touchpad 355 in FIG. 3 device 300 in FIG. 3) that is separate from the display 450 is shown. Although many of the examples that follow will be given with reference to inputs on the touch screen display 112 (where the touch- sensitive surface and the display are combined), in some embodiments, the device detects inputs on a touch-sensitive surface that is separate from the display, as shown in FIG. 3. In some embodiments, the touch-sensitive surface (e.g., touchpad 355 in FIG. 4B FIG. 3) is a touch screen display (e.g., touch screen 112 in FIG. 1).FIG. 4B 451) has a main axis (e.g., on the display (e.g., 450) that is aligned with the main axis on the display (e.g., 451). FIG. 4B The principal axis corresponding to 453 in the middle (e.g., FIG. 4B (452 in the middle). According to these embodiments, the device detects contact with the touch-sensitive surface 451 at a position corresponding to the corresponding position on the display (e.g., FIG. 4B (460 and 462 in the example) FIG. 4B In the diagram, 460 corresponds to 468 and 462 corresponds to 470. Thus, on a touch-sensitive surface (e.g., FIG. 4B 451) and the display of a multi-functional device (e.g., FIG. 4B When 450 is separated, user input detected by the device on the touch-sensitive surface (e.g., touches 460 and 462 and their movement) is used by the device to manipulate the user interface on the display. It should be understood that similar methods may be optionally used for other user interfaces described herein.

[0176] Additionally, while the examples below are primarily given with reference to finger input (e.g., finger touch, single-finger tap gesture, finger swipe gesture, etc.), it should be understood that in some implementations, one or more of these finger inputs may be replaced by input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture may optionally be replaced by a mouse click (e.g., instead of a touch), followed by movement of the cursor along the swipe path (e.g., instead of movement of the touch). Similarly, a tap gesture may optionally be replaced by a mouse click while the cursor is above the location of the tap gesture (e.g., instead of detection of touch, followed by cessation of touch detection). Likewise, when multiple user inputs are detected simultaneously, it should be understood that multiple computer mice may optionally be used simultaneously, or mouse and finger touch may optionally be used simultaneously.

[0177] As used herein, the term "focus selector" is an input element that indicates the current portion of a user interface with which the user is interacting. In some specific implementations that include a cursor or other positional marker, the cursor acts as a "focus selector," such that when the cursor is over a particular user interface element (e.g., a button, window, slider, or other user interface element), the cursor is positioned on a touch-sensitive surface (e.g., a...). FIG. 3 The touchpad 355 or FIG. 4B When an input (e.g., a press input) is detected on the touch-sensitive surface 451 of the display, the specific user interface element is adjusted according to the detected input. This applies to touchscreen displays that enable direct interaction with user interface elements on the touchscreen display. FIG. 1A The touch-sensitive display system 112 or FIG. 4AIn some implementations of touch-screens (e.g., of devices 100 and 300), a contact detected on the touch-screen acts as a“focus selector,” so that when an input (e.g., a press input by the contact) is detected on the touch-screen display at a location of a particular user interface element (e.g., a button, window, slider, or other user interface element), the particular user interface element is adjusted in accordance with the detected input. In some implementations, focus is moved from one region of a user interface to another region of the user interface without the corresponding movement of a cursor, or movement of a contact on the touch-screen display (e.g., by using the tab key or arrow keys to move focus from one button to another button); in these implementations, the focus selector moves in accordance with movement of focus between different regions of the user interface. Not all inputs cause movement of the focus selector. For example, in some implementations, movement of the focus selector is limited to the boundaries of a particular user interface element, or to the boundaries of a particular region of a user interface. In some implementations, the focus selector is moved to a particular location in accordance with the user’s input (e.g., a touch input by the user), and the focus selector remains at the particular location until the user’s input is removed (e.g., the user’s finger is removed from the touch-screen display). In some implementations, the focus selector is moved to a particular location in accordance with the user’s input (e.g., a touch input by the user), and the focus selector remains at the particular location for a particular period of time (e.g., 100 ms) before moving to another location in accordance with the user’s input (e.g., a touch input by the user). In some implementations, the focus selector is moved to a particular location in accordance with the user’s input (e.g., a touch input by the user), and the focus selector remains at the particular location until the user’s input is removed (e.g., the user’s finger is removed from the touch-screen display) or the user’s input is modified (e.g., the user’s finger is moved to a different location on the touch-screen display).

[0178] As used in the specification and claims, the term "intensity" of a contact on a touch- sensitive surface refers to the force or pressure (force per unit area) of a contact (e.g., a finger contact or touch pen contact) on the touch- sensitive surface, or to a substitute (proxy) for the force or pressure of the contact on the touch-sensitive surface. The intensity of a contact has a range of values that includes at least four distinct values and more typically includes hundreds or thousands of distinct values (e.g., at least 256). Intensity of a contact is, optionally, determined (or measured) using various approaches and various sensors or combinations of sensors. For example, one or more force sensors underneath, or adjacent to, the touch- sensitive surface optionally are used to measure force at various points on the touch- sensitive surface. In some implementations, force measurements from multiple force sensors are combined (e.g., a weighted average or a sum) to determine an estimated force at the point of contact. Similarly, a pressure-sensitive tip of a touch pen is, optionally, used to determine a pressure of the touch pen on the touch- sensitive surface. Alternatively, the size of the contact area detected, and / or changes thereto, the capacitance of the touch- sensitive surface proximate to the contact, and / or changes thereto, and / or resistance of the touch- sensitive surface proximate to the contact, and / or changes thereto, are, optionally, used as a substitute for the force or pressure of the contact on the touch- sensitive surface. In some implementations, the substitute measurements for contact force or pressure are used directly to determine whether an intensity threshold has been exceeded (e.g., an intensity threshold having a range of values including at least four distinct values, and more typically including hundreds or thousands of distinct values, is described in units of the substitute measurements). In some implementations, the substitute measurements for contact force or pressure are converted to an estimate of the force or pressure, and the estimate of the force or pressure is used to determine whether an intensity threshold has been exceeded (e.g., an intensity threshold having a range of

[0179] In some embodiments, contact / motion module 130 determines whether an operation has been performed by a user (e.g., whether a user has "clicked" an icon) using a set of one or more intensity thresholds. In some embodiments, at least a subset of the intensity thresholds are determined from software parameters (e.g., the intensity thresholds are not determined by activation thresholds of particular physical actuators and can be adjusted without changing the physical hardware of device 100). For example, without changing the touchpad or touch screen display hardware, mouse "click" thresholds are set to a range of predefined thresholds. Additionally, in some implementations, a user of device provides software settings to adjust one or more of the set of intensity thresholds (e.g., by adjusting a particular intensity threshold and / or by setting a systemwide click speed that uses a systemwide intensity threshold to determine when an "on" touch event is a click (versus "move") touch event for purposes of determining a button click).

[0180] As used in the specification and claims, the term "feature strength" of a contact is a feature of the contact based on one or more strengths of the contact. In some embodiments, the feature strength is based on a plurality of strength samples. The feature strength is optionally based on a predefined number of strength samples or a set of strength samples acquired during a predetermined period of time (e.g., 0.05 seconds, 0.1 seconds, 0.2 seconds, 0.5 seconds, 1 second, 2 seconds, 5 seconds, 10 seconds) relative to a predefined event (e.g., after detecting the contact, before detecting the contact liftoff, before or after detecting the contact starting to move, before detecting the end of the contact, before detecting an increase in strength of the contact, and / or before detecting a decrease in strength of the contact). The feature strength of the contact is optionally based on one or more of: a maximum value of the contact strength, a mean value of the contact strength, a median value of the contact strength, a value at the 10th percentile of the contact strength, a half-maximum value of the contact strength, a 90th maximum value of the contact strength, a value generated by low-pass filtering the contact strength over or from the start of the predefined period of time, etc. In some embodiments, the duration of the contact is used in determining the feature strength (e.g., when the feature strength is the average of the strength of the contact over time). In some embodiments, the feature strength is compared to a set of one or more strength thresholds to determine whether the user has performed an operation. For example, the set of one or more strength thresholds can include a first strength threshold and a second strength threshold. In this example, a contact whose feature strength does not exceed the first strength threshold results in a first operation, a contact whose feature strength exceeds the first strength threshold but does not exceed the second strength threshold results in a second operation, and a contact whose feature strength exceeds the second strength threshold results in a third operation. In some embodiments, a comparison between the feature strength and the one or more strength thresholds is used to determine whether one or more operations are to be performed (e.g., whether to perform a respective option or forego performing a respective operation) rather than to determine whether to perform a first operation or a second operation.

[0181] In some embodiments, a portion of a gesture is identified for use in determining the characteristic intensity. For example, a touch-sensitive surface can receive a continuous swipe contact that transitions from a starting location and reaches an ending location (e.g., a drag gesture) at which the intensity of the contact is increased. In this embodiment, the characteristic intensity of the contact at the ending location can be based only on a portion of the continuous swipe contact, rather than the entire swipe contact (e.g., only a portion of the swipe contact at the ending location). In some embodiments, a smoothing algorithm can be applied to the intensity of the swipe gesture prior to determining the characteristic intensity of the contact. For example, the smoothing algorithm optionally includes one or more of the following: an unweighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some cases, these smoothing algorithms eliminate narrow spikes or dips in the intensity of the swipe contact for purposes of determining the characteristic intensity.

[0182] The user interface diagrams described herein optionally include various intensity diagrams (e.g., intensity diagram 5148) that show the current intensity of a contact on a touch- sensitive surface relative to one or more intensity thresholds (e.g., a contact detection intensity threshold IT0, a light press intensity threshold IT L , a deep press intensity threshold IT D (e.g., at least initially higher than IT L ), and / or one or more other intensity thresholds (e.g., an intensity threshold IT L lower than IT H ). The intensity diagrams are generally not part of the displayed user interface, but are provided to help explain the figures. In some embodiments, the light press intensity threshold corresponds to an intensity at which the device will perform an operation that is typically associated with clicking a button of a physical mouse or touchpad. In some embodiments, the deep press intensity threshold corresponds to an intensity at which the device will perform an operation that is different from the operation that is typically associated with clicking a button of a physical mouse or touchpad. In some embodiments, when a contact is detected that has a characteristic intensity that is below the light press intensity threshold (e.g., and above the nominal contact detection intensity threshold IT0, below which contacts are no longer detected), the device will move a focus selector in accordance with movement of the contact on the touch- sensitive surface without performing an operation associated with the light press intensity threshold or the deep press intensity threshold. Generally, unless otherwise stated, these intensity thresholds are consistent across different sets of user interface figures.

[0183] In some embodiments, the device's response to a detected input depends on criteria based on the intensity of the contact during the input. For example, for some "light press" inputs, intensity of the contact that exceeds a first intensity threshold during the input triggers a first response. In some embodiments, the device's response to an input detected by the device depends on criteria that include both the intensity of the contact during the input and time-based criteria. For example, for some "deep press" inputs, intensity of the contact that exceeds a second intensity threshold greater than the first intensity threshold for light press during the input triggers a second response, provided that a delay time elapses between satisfying the first intensity threshold and satisfying the second intensity threshold. The duration of the delay time is typically less than 200 ms (milliseconds) (e.g., 40 ms, 100 ms, or 120 ms, depending on the magnitude of the second intensity threshold, where the delay time increases as the second intensity threshold increases). The delay time helps avoid accidental recognition of deep press inputs. As another example, for some "deep press" inputs, a period of reduced sensitivity occurs after the first intensity threshold is reached. During the period of reduced sensitivity, the second intensity threshold is increased. This temporary increase in the second intensity threshold also helps avoid accidental deep press inputs. For other deep press inputs, the response to detecting a deep press input does not depend on time-based criteria.

[0184] In some embodiments, one or more of the input intensity thresholds and / or corresponding outputs vary based on one or more factors, such as user settings, contact motion, input timing, application running, rate at which intensity is applied, number of simultaneous inputs, user history, environmental factors (e.g., ambient noise), focus selector position, etc. Example factors are described in U.S. Patent Application 14 / 399,606 and 14 / 624,296, which are incorporated by reference herein in their entirety.

[0185] For example, FIG. 4C A dynamic intensity threshold 480 that changes over time based in part on the intensity of the touch input 476 over time is shown. The dynamic intensity threshold 480 is the sum of two components: a first component 474 that decays over time after a predefined delay time pi from when the touch input 476 is initially detected, and a second component 478 that tracks the intensity of the touch input 476 over time. The initial high intensity threshold of the first component 474 reduces accidental triggering of a "deep press" response, while still allowing for immediate "deep press" response if the touch input 476 provides sufficient intensity. The second component 478 reduces accidental triggering of a "deep press" response by gradual fluctuations in intensity of the touch input. In some embodiments, when the touch input 476 satisfies the dynamic intensity threshold 480 (e.g., at point 481 in FIG. 5B), a "deep press" response is triggered. FIG. 4C

[0186] ​FIG. 4D Another dynamic intensity threshold 486 (e.g., intensity threshold I D ) is shown. FIG. 4D Two other intensity thresholds are also shown: a first intensity threshold I H and a second intensity threshold I L In FIG. 4D , although the touch input 484 satisfies the first intensity threshold I H and the second intensity threshold I L prior to time p2, a response is not provided until after the delay time p2 at time 482. Also in FIG. 4D , the dynamic intensity threshold 486 decays over time, with the decay beginning at time 488 after a predefined delay time pi has elapsed from the time (time 482) that the response associated with the second intensity threshold I L was triggered. This type of dynamic intensity threshold reduces the likelihood of accidentally triggering a response associated with the dynamic intensity threshold I D immediately after or concurrently with triggering a response associated with a lower threshold intensity, such as the first intensity threshold I H or the second intensity threshold I L .

[0187] FIG. 4E Another dynamic intensity threshold 492 (e.g., intensity threshold I D ) is shown. In FIG. 4E , a response associated with the intensity threshold I L is triggered after a delay time p2 has elapsed from the time that the touch input 490 was initially detected. At the same time, the dynamic intensity threshold 492 decays after a predefined delay time pi has elapsed from the time that the touch input 490 was initially detected. Thus, decreasing the intensity of the touch input 490 after the response associated with the intensity threshold I L is triggered, followed by increasing the intensity of the touch input 490 without releasing the touch input 490 can trigger a response associated with the intensity threshold I D (e.g., at time 494), even when the intensity of the touch input 490 is below another intensity threshold (e.g., intensity threshold I L ).

[0188] Increasing the intensity of a contact feature from an intensity below a light press intensity threshold IT L to an intensity between the light press intensity threshold IT L and a deep press intensity threshold IT D is sometimes referred to as a "light press" input. Increasing the intensity of a contact from an intensity below the deep press intensity threshold IT D to an intensity above the deep press intensity threshold IT DThe intensity of a contact feature that is sometimes referred to as a "deep press" input. The intensity of a contact feature that increases from an intensity below the contact detection intensity threshold IT0to an intensity between the contact detection intensity threshold IT0and the light press intensity threshold IT L The intensity of a contact feature that is sometimes referred to as a "deep press" input. The intensity of a contact feature that increases from an intensity below the contact detection intensity threshold IT0to an intensity between the contact detection intensity threshold IT0and the light press intensity threshold IT

[0189] In some embodiments described herein, one or more operations are performed in response to detecting a gesture that includes a respective press input or in response to detecting a respective press input performed with a respective contact (or multiple contacts), where the respective press input is detected based at least in part on detecting an increase in intensity of the contact (or multiple contacts) above a press input intensity threshold. In some embodiments, a respective operation is performed in response to detecting an increase in intensity of a respective contact above a press input intensity threshold (e.g., a respective operation is performed on a "downstroke" of a respective press input). In some embodiments, a press input includes an increase in intensity of a respective contact above a press input intensity threshold and a subsequent decrease in intensity of the contact below the press input intensity threshold, and a respective operation is performed in response to detecting the subsequent decrease in intensity of the respective contact below the press input threshold (e.g., a respective operation is performed on an "upstroke" of a respective press input).

[0190] In some embodiments, the device employs intensity hysteresis to avoid an unintended input sometimes referred to as "bouncing," in which the device defines or selects a hysteresis intensity threshold that has a predefined relationship to the press input intensity threshold (e.g., the hysteresis intensity threshold is X intensity units lower than the press input intensity threshold, or the hysteresis intensity threshold is 75%, 90%, or some reasonable proportion of the press input intensity threshold). Thus, in some embodiments, a press input includes an increase in intensity of a respective contact above the press input intensity threshold and a subsequent decrease in intensity of that contact below a hysteresis intensity threshold corresponding to the press input intensity threshold, and a respective operation is performed in response to detecting the subsequent decrease in intensity of the respective contact below the hysteresis intensity threshold (e.g., a respective operation is performed on the "upstroke" of a respective press input). Similarly, in some embodiments, a press input is detected only when the device detects an increase in contact intensity from an intensity at or below the hysteresis intensity threshold to an intensity at or above the press input intensity threshold, and optionally a subsequent decrease in contact intensity to an intensity at or below the hysteresis intensity, and a respective operation is performed in response to detecting the press input (e.g., either an increase in contact intensity or a decrease in contact intensity, depending on the circumstances).

[0191] For ease of explanation, descriptions of operations performed in response to a press input associated with a press input intensity threshold or in response to a gesture that includes a press input are optionally triggered in response to detecting an increase in intensity of a contact above a press input intensity threshold, an increase in intensity of a contact from an intensity below a hysteresis intensity threshold to an intensity above a press input intensity threshold, a decrease in intensity of a contact below a press input intensity threshold, or a decrease in intensity of a contact below a hysteresis intensity threshold corresponding to a press input intensity threshold. Additionally, in examples in which an operation is described as being performed in response to detecting a decrease in intensity of a contact below a press input intensity threshold, the operation is optionally performed in response to detecting a decrease in intensity of a contact below a hysteresis intensity threshold that corresponds to and is less than the press input intensity threshold. As noted above, in some embodiments, triggering of these operations also depends on satisfying a time-based criterion (e.g., a delay time has elapsed between satisfying a first intensity threshold and satisfying a second intensity threshold).

[0192] User Interfaces and Associated Processes

[0193] Attention is now directed towards embodiments of user interfaces ("UI") and associated processes that can be implemented on an electronic device, such as portable multifunction device 100 or device 300, with a display, a touch-sensitive surface, (optional) one or more tactile output generators for generating tactile outputs, and (optional) one or more sensors for detecting intensities of contacts with the touch-sensitive surface.

[0194] FIG. 5A-5DWExample user interfaces for navigating, displaying, and editing media items with multiple display modes are shown in accordance with some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the processes in FIG. 6A-6F , FIG. 7A-7D , FIG. 8A-8F , FIG. 9A-9I and FIG. 10A-10C . For convenience, some of the embodiments will be discussed with reference to operations performed on a device with a touch-sensitive display system 112. In such embodiments, the focus selector is optionally a respective finger or stylus contact, a representation of a finger or stylus contact (e.g., a centroid of respective contact or a point associated with respective contact), or a centroid of two or more contacts detected on the touch-sensitive display system 112. However, similar operations are optionally performed on devices with display 450 and separate touch- sensitive surface 451 in response to detecting contacts on the touch-sensitive surface 451 while displaying the user interfaces shown in the figures along with a focus selector on the display 450.

[0195] FIG. 5A-5U Example user interfaces for media playback and editing are shown in accordance with some embodiments. In FIG. 5A , device 100 displays home user interface 500-1. Home user interface 500-1 displays different application programs that are selectable by the user. In response to detecting tap 502-1 at image application program 428, device 100 opens image application program 428. In image application program 428, a user interface for navigating, displaying, and editing media items is displayed. FIG. 5B Media user interface 500-2 in displays thumbnails in a grid pattern to facilitate user selection. In some embodiments, each thumbnail is a representative image associated with a sequence of images in a media item, starting from an initial image and ending with a final image that can be "played" in response to detecting certain user actions. In response to detecting tap 502-2 at media item 550, device 100 displays media item display user interface 501, as shown in FIG. 5CThe media item display user interface 501 includes controls such as a favorite item control 504-a, a shared media item control 504-b, a delete media item control 504-c, an edit media item control 504-d, and a media item detail control 504-e. The media item display user interface 501 includes a display area 508. The display area 508 displays a representative image of the media item 550 and indicates via a display mode indicator 512 that the user interface is in a "vibrant" display mode of the media item 550. The media item display user interface 501 also includes a media item collection area 510. In addition to displaying other thumbnail representations of media items stored on the device 100, the media item collection area 510 displays a representation (e.g., thumbnail) of the representative image 514 of the media item 550. In response to detecting a press by the contact 502-3 in the display area 508 that exceeds a light press intensity threshold IT L As shown in FIG. 5C-5D , the device 100 plays back the media item 550 (e.g., according to either of the sequences 538-1 and 538-2, starting from the representative image 532, advancing up to the initial image 534 before ending at the final image 536), as shown in FIG. 5E . The representative image 532 is then redisplayed. The representative image 532 represents the media item 550 in the photo application (e.g., in a library or other collection). The representative image is typically displayed in a number of user interfaces in the photo application, such as in a first area of the media item display user interface 501 (e.g., FIG. 5C ), in a second area of the media item display user interface 501 as the representation 514 (e.g., a thumbnail) (e.g., FIG. 5C ); in a first area 523 of the edit user interface 503 (e.g., FIG. 5V ), in a second area 521 of the edit user interface 503 as a representation (e.g., a thumbnail); and in a series of images as the representation 514 (e.g., a thumbnail) FIG. 5B .

[0196] FIG. 5F Similar to FIG. 5C , except that the media item 550 is in a "looping" display mode. In the absence of user input, the device 100 repeatedly loops the media item 550, e.g., according to the sequence 538-2 shown in FIG. 5G . In FIG. 5H , the device 100 displays the media item display user interface 501 in the "looping" mode. While in the "looping" display mode, in response to detecting a tap gesture 502-5 at the edit control 504-d, the device 100 displays the media item edit user interface 503, as shown in FIG. 5IAs shown, specifically, the media item editing user interface 503-2 is displayed for the "loop" mode. The media item editing user interface 503 includes a media editing display area 523 and an image sequence area 524. In the "loop" mode, the media editing display area 523 displays a looped sequence of images associated with the media item 550, as described in FIG. 5G "Looping" section 538-2. The image sequence in the media item 550 can be trimmed using the start trim affordance 516 and / or the end trim affordance 518. The media item editing user interface 503 also includes editing controls, such as the done control 505-a, the crop control 505-b, the color control 505-c, the timer control 505-d, the mute control 505-f, the stylus control 505-g, and the playback toggle control 505-h. In some embodiments, the media item editing user interface 503-2 for the "loop" mode forgoes displaying the representative image selection affordance, as shown in FIG. 5I In other embodiments, the media item editing user interface 503-2 for the "loop" mode displays the representative image selection affordance 520, as shown in FIG. 5J

[0197] FIG. 5K Similar to FIG. 5C , except that the media item 550 is in the "shuffle" display mode. In this example, the device 100 plays back the media item 550 in a shuffle sequence, e.g., according to the sequence 538-4. In FIG. 5L , the device 100 displays the media item display user interface 501 in the "shuffle" mode. While in the "shuffle" display mode, in response to detecting a tap gesture 502-5 at the edit control 504-d, the device displays the media item editing user interface 503-4, as shown in FIG. 5M . FIG. 5N Similar to FIG. 5N , except that the media item 550 is in the "shuffle" edit mode. In some embodiments, the media item editing user interface 503-4 forgoes displaying the representative image selection affordance, as shown in FIG. 5I In other embodiments, the media item editing user interface 503-4 displays the representative image selection affordance 520, as shown in FIG. 5N . FIG. 5O

[0198] FIG. 5P Similar to FIG. 5C , except that the media item 550 is in the "merge" display mode. In this example, the device 100 displays a merged image of the image sequence associated with the media item in the display area 508. In response to detecting a press at the contact 502-7 in the display area 508 that exceeds a light press intensity threshold IT L , as shown in FIG. 5P-5Q ​​As shown, device 100 plays back media item 550, for example, according to FIG. 5R The sequence shown is 538-4. In FIG. 5S In the middle, device 100 displays the media item display user interface 501 in "merge" mode. In response to detecting a tap gesture 502-8 at the editing control 504-d, the device displays the media item editing user interface 503-4, as shown below. FIG. 5T As shown. FIG. 5T Similar to FIG. 5I The difference is that media item 550 is in "merge" editing mode. In this mode, the editing display area 523 shows a merged still image of the image sequence associated with media item 550.

[0199] FIG. 5U-5BE An exemplary user interface for media editing is shown according to some implementation schemes. FIG. 5U In the process of displaying the media item display user interface 501 in "vivid" mode, device 100 detects a tap 502-9 at the editing control 504-d. In response, device 100 displays... FIG. 5V The media item editing user interface 503-1 shown is similar to... FIG. 5I This illustrates the "loop" mode editing user interface 503-2, except that a static representative image of media item 550 is displayed in the editing display area 523. FIG. 5W In response to detecting a drag made by contact 502-10 at the start of trimming indication 516, as the user continues to drag via contact 502-10, device 100 updates the edit display area 523 to display the new initial image in the sequence, such as... FIG. 5X-5Z As shown. The start-of-trimming indicator 516 also moves in response to detecting drag 502-10. In some implementations, such as FIG. 5Y As shown, device 100 prevents the start-of-trimming indicator 516 from moving beyond the representative image selection indicator 520, and alternatively provides a tactile response 527. FIG. 5AA When the contact 502-10 is lifted, the device 100 redisplays the representative image in the editing display area 523. In response to detecting a tap at the contact 502-11 on the completion control 505-a, the device 100 saves the trimmed media item 550 because a portion of the image sequence associated with the media item 550 (as indicated by the position of the start trimming indicator 516) has been trimmed.

[0200] FIG. 5AB Following FIG. 5Z Subsequently, device 100 continues to detect dragging caused by contact 502-10. FIG. 5ABIn the middle, if it is allowed to start pruning, the indicator shows that 516 moves more than FIG. 5Z When the representative image selection indicator 520 is positioned as shown, the device 100 displays a representative image indicator 542 above the original representative image. Furthermore, the device 100 moves the representative image selection indicator 520 to an image in the image sequence adjacent to the position of the start-pruning indicator 516.

[0201] exist FIG. 5AC In response to the lifting away of contact 502-10 (where the lifting away is indicated by a dashed ellipse), device 100 displays a "Make Key Photo" confirmation indicator 525 near the new location of the representative image selection indicator 520. In response to detecting a tap 502-11 at the confirmation indicator 525, as... FIG. 5AD As shown, device 100 sets the image associated with the representative image selection display 520 as the new representative image for media item 550, such as... FIG. 5AE As shown. In response to detecting a tap 502-12 away from the confirmation indicator 525, as FIG. 5AF As shown, device 100 does not set the new image associated with the representative image selection display 520 as the new representative image of media item 550, such as FIG. 5AG As shown. In this example, the start trimming power indicator 516 and the representative image selection power indicator 520 move back to the representative image indicated by the original position of the representative image selection power indicator 520.

[0202] Following closely FIG. 5AE of FIG. 5AH In the process, device 100 detects a tap 502-14 at the completion control 505-a. In response, device 100 saves the newly trimmed media item, exits the media editing user interface 503, and displays the media item display user interface 501. In some implementations, for example, if the editing of a media item is destructive, in response to detecting a tap 502-14 at the completion control 505-a, device 100 displays a "Save New Media Item" menu 526, as shown below. FIG. 5AI As shown. In FIG. 5AJ In response to a detected tap gesture 502-16 at the "Trim Original" option in the Save New Media Item menu 526, device 100 saves the trimmed media item, exits the media editing user interface 503, and displays the trimmed media item in the media item display user interface 501, such as... FIG. 5AK As shown. In FIG. 5AL In response to the detected tap gesture 502-18 at the "Save As New" option in the Save New Media Item menu 526, device 100 retains the media item 550, saves the trimmed media item as a new media item, exits the media editing user interface 503, and displays the media item display user interface 501, as shown below.FIG. 5AM As shown in FIG. 5AM , both the representation of the original (untrimmed) media item 514 and the representation of the new (trimmed) media item 515 are shown in the collection area 510 of the media item.

[0203] FIG. 5AN-5AP An example user interface for editing a merged photo is shown in accordance with some embodiments. In FIG. 5AN , the device 100 is displaying a media item edit user interface 503-4 for the "merged" image mode. In this mode, the device 100 displays a merged static image of the sequence of images associated with the media item 550 in the edit display area 523. In FIG. 5AO , in response to detecting an input by a contact 502-20 at the start trim affordance 516, the device 100 displays the image (rather than the merged image) adjacent to the start trim affordance 516 in the edit display area 523. Upon liftoff, the device 100 returns to displaying the merged static image in the edit display area 523, as FIG. 5AP shown.

[0204] FIG. 5AQ Following FIG. 5X , the difference is that the device 100 detects liftoff of the drag gesture 502-10. In response, the device 100 displays a representative image of the media item 550 in the edit display area 523. Next, the device 100 detects a drag gesture by a contact 502-22 at the representative image selection affordance 520, as FIG. 5AR-5AX shown. FIG. 5AS-5AU As shown, when the image selection affordance 520 is horizontally scrolled, additional images in the sequence of images in the media item are concurrently displayed in the image selection affordance 520 and the display area 523. Upon liftoff, the device 100 detects that the liftoff location of the contact 502-22 is proximate to the original location of the representative image. In response, the device 100 aligns the representative image selection affordance 520 with the original representative image.

[0205] FIG. 5AY-5BA An example user interface for switching between media item edit modes 503 is shown in accordance with some embodiments. In FIG. 5AY , while in the media item edit user interface 503-1 for the lively mode, the device 100 displays a representative image of the media item in the edit display area 523. While the media item is in the "lively" edit mode, the device 100 detects an input (e.g., a tap or press) by a contact 502-24 at the display mode indicator 512. In response, as FIG. 5AZAs shown, device 100 displays an edit mode selection menu 528 with the edit mode associated with media item 550. In response to detecting a tap 502-26 on the "loop" edit mode option, device 100 displays the sequence of images associated with media item 550 in "loop" edit mode 503-2, as shown. FIG. 5BA

[0206] FIG. 5BB-5BE An example user interface for editing a media item using an end trim affordance 518 is shown, in accordance with some embodiments. In FIG. 5BB In response to detecting a tap 502-30 on the "done" control 505-a, device 100 creates and saves a trimmed media item based on the locations of the start trim affordance 516 and the end trim affordance 518, in FIG. 5BB-5BC FIG. 5BD In response to detecting liftoff of contact 502-28, device 100 displays a representative image in the edit display area 523, as shown. FIG. 5BE In response to detecting a tap 502-30 on the "done" control 505-a, device 100 creates and saves a trimmed media item based on the locations of the start trim affordance 516 and the end trim affordance 518, in

[0207] FIG. 5BF-5BR An example user interface for displaying additional information about a media item is shown, in accordance with some embodiments. In FIG. 5BF In response to detecting an upward swipe 560-2, device 100 displays a display mode selection user interface 511 including a "vibrant" display mode representation 540-1, a "loop" display mode representation 540-2, a "back and forth" display mode representation 540-3, and a "merge" display mode representation 540-4, as shown. FIG. 5BG As shown, device 100 displays a display mode selection user interface 511 including a "vibrant" display mode representation 540-1, a "loop" display mode representation 540-2, a "back and forth" display mode representation 540-3, and a "merge" display mode representation 540-4, as shown. FIG. 5BH In response to detecting a tap 560-4 at the "loop" display mode representation 540-2, device 100 switches to the "loop" display mode in display area 508, hides display mode selection user interface 511, and displays the entire display area 508, as shown. FIG. 5BI In response to detecting an upward swipe 560-6, device 100 displays FIG. 5BH ​​The display mode selection user interface 511 shown differs in that the display mode selection indicator 541 is positioned around the "cycle" display mode representation 540-2. In response to detecting a left swipe made by contact 560-8, as... FIG. 5BJ As shown, or alternatively, by tapping the display mode expanded list indicator 540-5, device 100 slides the display mode selection interface 511 as shown and displays the new "Movie" display mode indicator 540-6, as shown. FIG. 5BK As shown. When displaying the display mode selection user interface 511, in response to detecting... FIG. 5BL Swipe up from 560-10, and device 100 displays map 562, which shows location 564, where media items are generated by device 100 at that location, such as... FIG. 5BM As shown. In response to detection FIG. 5BM Swipe up on 560-12, and device 100 displays additional information associated with media item 550, such as... FIG. 5BN As shown.

[0208] exist FIG. 5BO (exist FIG. 5BH In the subsequent display, device 100 displays the display mode selection user interface 511 and displays media items 550 in "loop" display mode. In response to detecting a tap 560-14 at the "loop" display mode indication 540-2, device 100 hides the display mode selection user interface 511 and displays the entire display area 508.

[0209] FIG. 5BP-5BR An exemplary user interface 511 for displaying a display mode selection user interface 511 when the device 100 is in portrait mode is shown, according to some embodiments. FIG. 5BP In the display mode selection user interface 511, device 100 displays two representations: "Vivid" display mode representation 540-1 and "Looping" display mode representation 540-2. In response to a detected left swipe 560-16, as... FIG. 5BP As shown, or by tapping the display mode expansion list indicator 540-5, device 100 displays two new representations at the display mode selection user interface 511: "Back and Forth" display mode representation 540-3 and "Merge" display mode representation 540-4, as shown. FIG. 5BQ As shown. In FIG. 5BR In response to detecting a tap 560-18 at the "Details" control 504-e, the device 100 displays the media item 550 in the media item display user interface 501 in merge mode.

[0210] FIG. 5BS-5CM An exemplary user interface for editing media items is shown according to some implementation schemes. FIG. 5BSIn the middle, device 100 displays media items and user interface 501. In response to detecting a tap 560-2 at the edit control 504-d, as... FIG. 5BT As shown, device 100 displays the media item editing user interface 503-1, such as... FIG. 5BU As shown. The media item editing user interface 503-1 includes media items 550 displayed in a "vivid" display mode in the editing display area 523. In response to detecting a drag at the contact 570-4 of the representative image selection display 520, as... FIG. 5BV-5BW As shown, device 100 updates the image shown in the editing display area 523, and also updates the position of the representative image selection indicator 520 in the image sequence area 524 to correspond to the horizontal position of contact 570-4. Furthermore, when the representative image selection indicator 520 moves to a position other than the original representative image, device 100 displays a representative image indicator 542 at a position above the original representative image in the image sequence area 524, as shown. FIG. 5BW As shown. In FIG. 5BX If contact 570-4 returns to the position of the original representative image, device 100 abandons displaying the representative image indicator 542 and provides a tactile response 527. FIG. 5BY In the middle, if FIG. 5BV If the contact 570-4 shown continues to the right and contacts a trimming indicator (such as start trimming indicator 516), then in some embodiments, device 100 does not provide a tactile response. FIG. 5BZ In the middle, drag 570-4 in FIG. 5CA The process continues until the final lift-off. In response to the detection of lift-off, device 100 displays a confirmation indicator 525 at or near the current position of the representative image selection indicator 520. In response to the detection of a tap 570-6 on the confirmation indicator 525, as... FIG. 5CB As shown, device 100 sets the image in image sequence region 524 associated with representative image selection display 520 as the new representative image of media item 550, such as... FIG. 5CC As shown. Alternatively, in response to detecting a tap 570-8 away from the confirmation indicator 525, as FIG. 5CD As shown, device 100 does not set the image in image sequence region 524 associated with representative image selection display 520 as the new representative image of media item 550, such as FIG. 5CE As shown.

[0211] exist FIG. 5CC After that, FIG. 5CFAt 710, device 100 detects a drag by contact 710-10 on representative image selection affordance 520. If the drag 710-10 moves representative image selection affordance 520 away from the new representative image in representative image sequence 524, device 100 displays a new representative image indicator 543 at a position above the new representative image in image sequence region 524, as shown in FIG. 5CF At 720, device 100 detects a drag by contact 710-12 on start trim affordance 516. If the drag 710-12 moves start trim affordance 516 to representative image selection affordance 520, device 100 provides a tactile response 527, as shown in FIG. 5CG At 730, device 100 detects a drag by contact 710-14 on representative image affordance 520 toward start trim affordance 516. In response, device 100 moves start trim affordance 516 along with representative image affordance 520, as shown in FIG. 5CH At 730, device 100 detects a drag by contact 710-14 on representative image affordance 520 toward start trim affordance 516. In response, device 100 moves start trim affordance 516 along with representative image affordance 520, as shown in FIG. 5CI At 730, device 100 detects a drag by contact 710-14 on representative image affordance 520 toward start trim affordance 516. In response, device 100 moves start trim affordance 516 along with representative image affordance 520, as shown in FIG. 5CJ At 730, device 100 detects a drag by contact 710-14 on representative image affordance 520 toward start trim affordance 516. In response, device 100 moves start trim affordance 516 along with representative image affordance 520, as shown in FIG. 5CK At 730, device 100 detects a drag by contact 710-14 on representative image affordance 520 toward start trim affordance 516. In response, device 100 moves start trim affordance 516 along with representative image affordance 520, as shown in

[0212] FIG. 5CK-5CM An example user interface for selectively providing a tactile response when a representative image selection affordance 520 is dragged over a representative image is shown. In FIG. 5CK At 740, device 100 detects a drag by contact 710-15 on representative image selection affordance 520. In response, device 100 moves representative image selection affordance 520. If the speed of the drag gesture 710-15, represented by the length of arrow 712, is below a speed threshold, device 100 provides a tactile response 527, as shown in FIG. 5CL At 740, device 100 detects a drag by contact 710-15 on representative image selection affordance 520. In response, device 100 moves representative image selection affordance 520. If the speed of the drag gesture 710-15, represented by the length of arrow 712, is below a speed threshold, device 100 provides a tactile response 527, as shown in FIG. 5CM At 740, device 100 detects a drag by contact 710-15 on representative image selection affordance 520. In response, device 100 moves representative image selection affordance 520. If the speed of the drag gesture 710-15, represented by the length of arrow 712, is below a speed threshold, device 100 provides a tactile response 527, as shown in

[0213] FIG. 5CN-5DJ An example user interface for displaying and playing media items is shown, in accordance with some embodiments. In FIG. 5CNIn the "vivid" display mode, device 100 displays a media item display user interface 501, which displays a representative image of the original media item 550 in display area 508. FIG. 5CO In the process, device 100 detects a swipe gesture made by contact 580-2. In response, device 100 slides the original media item 550 off the screen and slides a new media item 584 (which sequentially follows the original media item 550 in the set of media items) onto the screen, as shown. FIG. 5CP As shown. In FIG. 5CP In this context, new media item 584 has the same display mode as original media item 550, namely, the "vivid" display mode. For example... FIG. 5CP As shown, while continuing to detect swipe gestures made by contact 580-2, device 100 only displays the initial image in new media item 584 because new media item 584 is in vivid display mode. FIG. 5CQ-5CR In response to the detection of the lifting of contact 580-2, when the new media item 584 slides onto the screen, the device sequentially plays a sequence of images associated with the new media item 584, from the initial image to the representative image.

[0214] FIG. 5CS Similar to FIG. 5CP The difference is that item 584 in the new media section is in a "looping" display mode. For example... FIG. 5CS As shown, when a swipe is detected by contact 580-4, because the new media item 584 is in "loop" display mode, the device 100 loops the image sequence associated with the new media item 584 as it slides onto the screen.

[0215] FIG. 5CT Similar to FIG. 5CP and FIG. 5CS The difference is that item 584 in the new media section is in a "back and forth" display mode. For example... FIG. 5CT As shown, when a swipe is detected by contact 580-6, because the new media item 584 is in "back and forth" display mode, the device 100 plays the image sequence associated with the new media item 584 in back and forth mode when the new media item 584 slides onto the screen.

[0216] FIG. 5CU Similar to FIG. 5CP and FIG. 5CS The difference is that the new media item 586 precedes the original media item 550 in the set of media items, and the new media item 586 is in a "back and forth" display mode. For example... FIG. 5CUAs shown, when a swipe is detected by contact 580-8, because the new media item 586 is in "back and forth" display mode, the device 100 plays the image sequence associated with the new media item 586 in back and forth mode when the new media item 586 slides onto the screen.

[0217] FIG. 5CV Similar to FIG. 5CP The difference is that item 584 in the new media section is in "merged" display mode. For example... FIG. 5CV As shown, upon detecting a swipe made by contact 580-10, device 100 displays a static merged image for new media item 584. In response to lifting off contact 580-10, device 100 plays at least a portion (e.g., a quarter, half, or three-quarters) of the image sequence associated with new media item 584, and then displays the merged image.

[0218] FIG. 5CW Similar to FIG. 5CV The difference is that new media item 586 precedes the original media item 550 in the set of media items. For example... FIG. 5CW As shown, upon detecting a swipe made by contact 580-12, device 100 displays a static merged image for new media item 586. FIG. 5CX In response to the lifting of contact 580-12, device 100 plays at least a portion (e.g., a quarter, a half, or a three-quarters) of an image sequence associated with new media item 586, and then displays the merged image.

[0219] Figure 5CY Similar to Figure 5CW The difference is that the new media item 586 is in a "vivid" display mode. Upon detecting a swipe made by contact 580-14, because the new media item 586 is in "vivid" display mode, device 100 displays the initial image of the new media item 586. In response to detecting a lift of contact 580-14, as the new media item 586 slides onto the screen, device 100 sequentially plays the image sequence associated with the new media item 586 from the initial image to representative images.

[0220] Figure 5CZ Similar to Figure 5CY The difference is that the new media item 586 is in a "looping" display mode. When a swipe 580-16 is detected, the device 100 displays a sequence of images associated with the new media item 586. Because the new media item 586 is in a "looping" display mode, the sequence of images loops as the new media item 586 slides onto the screen.

[0221] exist Figure 5DAIn the process, device 100 detects a tap made by contact 580-18 at representation 514 of media item 550 in media item collection area 510. In response, device 100 displays an extended representation 551 of media item 550 in media item collection area 510, which displays at least some of other images associated with media item 550, such as... Figure 5DB As shown. Device 100 also displays a scrubber bar 544. In response to the detection of a swipe and a sweep 580-22 made by contact 580-20, as... Figures 5DB to 5DE As shown, device 100 scrolls the extended representation 551 of media item 550, moving it accordingly relative to scroll bar 544, and displays an image from the image sequence associated with that media item in display area 508. When scroll bar 544 is positioned away from representative image 514, representative image indicator 542 is displayed above representative image 514, as shown. Figure 5DC As shown, when the scroll bar 544 slowly returns to the vicinity of the representative image 514, the device 100 generates a haptic response 527 and aligns it to the representative image 514, as... Figures 5DD to 5DE As shown.

[0222] exist Figure 5DF In this process, device 100 detects a swipe made by contacts 580-24 in display area 508. In response, device 100 displays a new media item 584 (which sequentially follows the original media item 550 in the set of media items in area 508) and shrinks an expanded representation 551 of media item 550 down to a single image (e.g., a thumbnail of a representative image of media item 550), such as... Figure 5DG As shown.

[0223] exist Figures 5DG to 5DJ In response to detecting that the pressure input made by contact 580-26 exceeds the intensity threshold (e.g., IT), L Device 100 displays an extended representation 552 of media item 584 in media item collection area 510, which displays at least some of other images associated with media item 584. In response to detecting a press input made by contacts 580-26 exceeding an intensity threshold (e.g., IT...), L The device 100 also displays a playback head 545 that moves over an extended representation of media item 584 in the media item collection area 510 to show the current playback position in the image sequence of media item 584 shown in the area 508.

[0224] Figure 5DK to Figure 5DW An exemplary user interface, according to some embodiments, is shown for displaying a sequence of images associated with a media item based on the display mode of the media item. Figure 5DKIn this mode, device 100 displays media item 550 in a "looping" mode on media item display user interface 501, as indicated by display mode indicator 512, wherein the image sequence associated with the media item is sequentially and repeatedly looped in display area 508. In response to a press input made by contact 590-2 exceeding a light press intensity threshold, as... Figure 5DL to Figure 5DM As shown, device 100 displays a representative image of media item 550 on a static display. Figure 5DN In the middle, after contact 590-2 is removed, device 100 returns to displaying media item 550 in a dynamic "loop" mode. Alternatively, in Figure 5DO In the middle, after the intensity of contact 590-2 decreases, device 100 returns to displaying media items in a dynamic "loop" mode.

[0225] exist Figure 5DP In the media item display user interface 501, device 100 displays media item 550 in a "merged" mode, as indicated by display mode indicator 512, wherein the image sequence associated with the media item is simultaneously displayed as a static merged image in display area 508. In response to a press input made by contact 590-4 exceeding a light press intensity threshold, as... Figure 5DP to Figure 5DQ As shown, device 100 sequentially displays a sequence of images associated with media items. Figure 5DR In the middle, after contact 590-4 is lifted away, device 100 returns to displaying media item 550 as a static merged image. Alternatively, in Figure 5DS In the process, after the intensity of contact 590-4 decreases, device 100 returns to displaying media item 550 as a static merged image.

[0226] exist Figure 5DT In this mode, device 100 displays media items in "back-and-forth" mode on media item display user interface 501, as indicated by display mode indicator 512, wherein the image sequence associated with media item 550 is displayed sequentially and repeatedly in a back-and-forth manner in display area 508. In response to a press input made by contact 590-6 exceeding a light press intensity threshold, as... Figure 5DT to Figure 5DU As shown, device 100 displays a representative image associated with the media item. After detecting that the contact 590-6 has been lifted (or, in some embodiments, reduced in intensity), device 100 returns to repeatedly playing the image sequence associated with the media item 550 in a back-and-forth manner in display area 508.

[0227] exist Figure 5DVIn this mode, device 100 displays media items in a "vivid" mode on media item display user interface 501, as indicated by display mode indicator 512, wherein a representative image associated with the media item is displayed in display area 508. In response to a press input made by contact 590-8 exceeding a light press intensity threshold, as indicated by the display mode indicator 512, device 100 displays media items in a "vivid" mode on media item display user interface 501, as indicated by display mode indicator 512, wherein a representative image associated with the media item is displayed in display area 508. Figure 5DV to Figure 5DW As shown, device 100 sequentially displays a sequence of images associated with media items. After contact 590-6 is removed (or, in some embodiments, the intensity is reduced), device 100 returns to displaying a representative image.

[0228] Figures 6A to 6F This is a flowchart of a method 600 for editing a media item having multiple display modes, according to some embodiments. Method 600 is an electronic device having a display, a touch-sensitive surface, and optionally one or more sensors for detecting the intensity of contact with the touch-sensitive surface (e.g., Figure 3 Equipment 300 or Figure 1A The method is performed at a portable multifunction device 100. In some embodiments, the display is a touchscreen display, and the touch-sensitive surface is on or integrated with the display. In some embodiments, the display and the touch-sensitive surface are separate. Some operations in method 600 are optionally combined, and / or the order of some operations is optionally changed.

[0229] As described below, method 600 provides an intuitive way to edit media items with multiple display modes. It provides an editing user interface that can be customized based on the currently selected display mode of the media item, making it easy to see how editing will affect the media item in the current display mode. When editing media items with multiple display modes, this method reduces the amount, extent, and / or nature of input from the user, thereby creating a more efficient human-computer interface. For battery-powered electronic devices, this enables users to edit media items with multiple display modes faster and more efficiently, thereby saving power and increasing the time between battery charging sessions.

[0230] The device displays (602) one or more images from a media item corresponding to an image sequence in a first user interface on the display, wherein the corresponding display mode is one of a plurality of user-selectable display modes for the media item corresponding to the image sequence; (e.g., vivid photo display mode, loop display mode, long exposure display mode, back-and-forth display mode, movie display mode, strobe effect display mode, or other display modes for displaying media items selectable by the user). For example... Figure 5U The media item display user interface 501 in "Vivid" mode is shown.

[0231] While displaying one or more images from the media item in the respective display mode, the device detects (604) a first input (e.g., a tap gesture by a contact on the edit affordance, such as tap 502-9 at edit control 504-d, as shown). Figure 5U

[0232] In response to detecting the first input, the device displays (606), on the display, an edit user interface for the respective display mode. For example, Figure 5V An edit user interface 503-1 for the "vibrant" mode is shown. The edit user interface for the respective display mode is one of a plurality of edit user interfaces for the media item corresponding to the sequence of images. A given edit user interface of the plurality of edit user interfaces is customized for the corresponding display mode of the media item. For example, the edit user interface for the vibrant photo display mode of the media item displays a representative image of the media item in a first area (e.g., edit display area 523 in Figure 5V ) because the representative image is the image that is displayed in the vibrant photo display mode in the absence of user interaction. For example, the edit user interface for the loop display mode displays the looping media item in a first area (e.g., edit display area 523 in Figure 5I ) because the looping media item is the media item that is displayed in the loop display mode in the absence of user interaction. For example, the edit user interface for the back-and-forth display mode displays the back-and-forth played media item in a first area (e.g., edit display area 523 in Figure 5N ) because the back-and-forth played media item is the media item that is displayed in the back-and-forth display mode in the absence of user interaction. For example, the edit user interface for the merged display mode of the media item displays a merged image of the media item in a first area (e.g., edit display area 523 in Figure 5T ) because the merged image is the image that is displayed in the merged display mode in the absence of user interaction.

[0233] In some embodiments, a given edit user interface of the plurality of edit user interfaces includes affordances that are customized for the corresponding display mode of the media item. For example, the edit user interface for the vibrant photo display mode of the media item includes a representative image selection affordance 520 Figure 5V ) that is configured to adjust the representative image (e.g., the key photo) in the vibrant photo display mode. In some embodiments, the edit user interface for the loop display mode does not have a representative image selection affordance because the representative image cannot be adjusted in the loop display mode for the media item (e.g., Figure 5I ) In some other embodiments, the edit user interface for the loop display mode has a representative image selection affordance to adjust the representative image of the media item (e.g.,​ Figure 5J ).

[0234] In some implementations, a given editing user interface is displayed in response to the detection of input corresponding to a request to edit a media item, while simultaneously activating a corresponding display mode for the media item. For example, when a vivid photo display mode for the media item is activated, a tap gesture is detected on the "Edit" icon 504-d. Figure 5U This displays the editing user interface for the Vivid Photo display mode, such as... Figures 5U to 5V As shown. For example, when the loop display mode for media items is activated, in response to detecting a tap gesture on the "Edit" icon 504-d ( Figure 5H This displays the editing user interface for the loop display mode, such as... Figure 5H and Figure 5I ,or Figure 5H and Figure 5J As shown. Etc. The editing user interface for the corresponding display mode is configured to change which images are included in the media item when the media item is displayed in the corresponding display mode (e.g., the editing user interface for the corresponding display mode is configured to trim the image sequence in the media item displayed in the corresponding display mode to a smaller subset of the image sequence). In some embodiments, trimming reduces the number of images from the image sequence of the media item displayed in the corresponding display mode without removing images from the image sequence of the media item (e.g., non-destructive editing). In some embodiments, trimming permanently removes images from the image sequence of the media item (e.g., destructive editing). In some embodiments, trimming of the media item in the corresponding display mode is also applied (continuing) to other display modes for the media item. In some embodiments, trimming of the media item in the corresponding display mode is not applied to other display modes for the media item, making trimming customizable for each display mode of the media item. The editing user interface for the corresponding display mode simultaneously displays: a first (predefined) region (e.g., region 523) configured to display images in the image sequence. Figure 5V In some implementations, for some display modes, the first region displays images from a sequence of images one at a time, wherein the corresponding image fills the first region when it is played. In some implementations, for some display modes, the first region displays images from a sequence of images that are merged into a single image that fills the first region. The editing user interface for the corresponding display mode simultaneously displays: a second (predefined) region different from the first region (e.g., region 521). Figure 5V The second region includes a representation of images in an image sequence (e.g., a scaled-down representation of multiple images in an image sequence of a media item displayed in a slider in the second region); and a user-adjustable start trimming indicator (e.g., a start handle 516). Figure 5V), which indicates a first boundary for playback through the image sequence (e.g., the start trim affordance delimits a start image in a subset of the image sequence via a location of the start trim affordance in the second region); and a user-adjustable end trim affordance (e.g., the end handle 518, Figure 5V ), which indicates a second boundary for playback through the image sequence (e.g., the end trim affordance delimits an end image in a subset of the image sequence via a location of the end trim affordance in the second region).

[0235] In some embodiments, the first region displays (608) a preview of the media item that shows how the media item will be displayed in the respective display mode (e.g., by automatically looping the image sequence in the first region in an edit user interface for some display modes, or by merging multiple images into a single image in the first region in an edit user interface for other display modes), where the preview includes content from multiple images in the image sequence. For example, Figure 5I A media item edit user interface 503-2 is shown in which images from the media item 550 are cycled in the edit display region 523. For example, Figure 5T A media item edit user interface 503-4 is shown in which a static merged image of the media item 550 is displayed in the edit display region 523. A preview is provided that can be customized according to the currently selected display mode of the media item, making it easy to see how the edit will affect the media item in the current display mode. This enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user mistakes when operating / interacting with the device).

[0236] In some embodiments, the edit user interface for the respective display mode simultaneously displays (610) multiple image adjustment affordances (e.g., 505-a - 505-h, Figure 5V ), which, when activated, provide access to image adjustment functions (e.g., crop, rotate, filter, light up, mark, wand, undo, save / finish, and / or other image editing functions). Providing quick access to these image editing functions enhances the operability of the device and makes the edit user interface more efficient (e.g., by reducing the number, degree, and / or nature of inputs from the user needed to edit the media item).

[0237] In some embodiments, the edit user interface includes (612) a volume affordance that, when activated, toggles a sound switch for the media item (e.g., the mute toggle 505-f, Figure 5V). Providing affordances for muting the sound of a media item while editing enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing or removing sound as needed when operating / interacting with the editing user interface).

[0238] While displaying the editing user interface for the respective display mode: the device adjusts (edits) (614) the media item in accordance with one or more editing inputs (e.g., detected inputs directed to the range trim affordance, such as the start trim affordance 516 or the end trim affordance 518, the representative image selection affordance 520, and / or other affordances in the editing user interface for the respective display mode); and detects an input to exit the editing user interface for the respective display mode (e.g., a tap by the contact 502-11, Figure 5AA ).

[0239] The device exits (616) the editing user interface for the respective display mode. For example, after the tap by the contact 502-11 in Figure 5AA , the device displays the media item display user interface 501, as shown in Figure 5AK .

[0240] The device displays (618) the edited media item in the first user interface in the respective display mode (e.g., in response to detecting an input to exit the editing user interface for the respective display mode). In some embodiments, in response to detecting activation of the “Done” button (e.g., with a tap gesture), the device saves the changes made in the editing user interface for the respective display mode and displays the edited media item in the respective display mode (e.g., in the first user interface). For example, after the tap by the contact 502-14 in Figure 5AH , the device displays the media item display user interface 501, as shown in Figure 5AK , which includes the trimmed media item 550.

[0241] In some embodiments, in response to detecting activation of the “Done” button (e.g., with a tap gesture), the device displays activatable options (e.g., “Trim Original,” “Save as New Clip,” and “Cancel,” as shown in Figure 5AI ). In some embodiments, in response to detecting activation of the “Trim Original” option (e.g., with a tap gesture), the device applies the changes made in the editing user interface to the media item, saves the changes, and displays the edited media item in the respective display mode (e.g., see Figures 5AJ to 5AK). In some embodiments, in response to detecting activation of the "save as new clip" option (e.g., with a tap gesture), the device creates a new media item that includes the changes made to the original media item in the editing user interface, saves the new media item, and displays the new media item in the corresponding display mode (e.g., see Figures 5AL to 5AM

[0242] In some embodiments, while displaying the editing user interface for the corresponding display mode, the device detects (620) an input corresponding to adjustment of the start trim affordance (e.g., detects a drag gesture on the start trim affordance in the second region); and, in response to detecting the input corresponding to adjustment of the start trim affordance, stops displaying the preview of the media item in the first region in the corresponding display mode and displays in the first region a representation of an image that corresponds to the location of the start trim affordance in the representation of the sequence of images. Similarly, in response to detecting the input corresponding to adjustment of the end trim affordance, the device stops displaying the preview of the media item in the first region in the corresponding display mode and displays in the first region a representation of an image that corresponds to the location of the end trim affordance in the representation of the sequence of images. More generally, in response to detecting the input corresponding to adjustment of the range trim affordance, the device stops displaying the preview of the media item in the first region in the corresponding display mode and displays in the first region a representation of an image that corresponds to the location of the range trim affordance in the representation of the sequence of images. For example, as shown in Figures 5W to 5Z adjusting the start trim affordance 516 changes the image displayed in the editing display region 523. Displaying a representation of the image that corresponds to the location of the range trim affordance while the range trim affordance is being adjusted makes it easy to precisely trim the media item. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the result intended by the user and reducing user errors when operating / interacting with the editing user interface).

[0243] In some embodiments, the device detects (622) an end of the input corresponding to adjustment of the start trim affordance (e.g., detects liftoff of contact from the start trim affordance); and, in response to detecting the end of the input corresponding to adjustment of the start trim affordance, displays a second preview of the media item in the first region in the corresponding display mode, where the second preview includes a subset of less than all of the images in the sequence of images, where the subset does not include images in the sequence of images that occur before the image that corresponds to the current location of the start trim affordance (e.g., see Figure 5AH ​Similarly, in response to detecting an end of the input on the end-trim affordance, the device displays a second preview of the media item in the first region in the respective display mode, where the second preview includes a subset of less than all of the images in the sequence of images, where the subset does not include images in the sequence of images that occur after the image corresponding to the current position of the end-trim affordance. Providing an updated preview tailored to the currently selected display mode of the media item in response to detecting the end of the input (e.g., detecting lift-off) makes it easy to see how the range-trim edit will affect the media item in the current display mode. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing the number of inputs when operating / interacting with the editing user interface).

[0244] In some embodiments, trimming the sequence of images in the media item also trims (624) corresponding audio in the media item. Trimming the images and corresponding audio in response to the same input enhances the operability of the device and makes the editing user interface more efficient (e.g., by reducing the number of inputs when operating / interacting with the editing user interface).

[0245] In some embodiments, in accordance with a determination that the respective display mode is a loop display mode, and that the editing user interface for the respective display mode that is displayed in response to detecting the first input is an editing user interface for a loop display mode, the device displays (626) in the editing user interface for the loop display mode, in the first region, a looped sequence of images (e.g., see FIGS. 6A-6B). Figure 5Iwhen displaying the looped image sequence in the first region in the edit user interface for the looped display mode, the device detects an input on the start-trim affordance; and, upon detecting the input on the start-trim affordance: the device ceases to loop the image sequence in the first region; and adjusts a position of the start-trim affordance in the second region in accordance with the input on the start-trim affordance; and displays, in the first region, an image of the image sequence that corresponds to the position of the start-trim affordance in the second region. Similarly, upon detecting the input on the end-trim affordance, the device ceases to loop the image sequence in the first region; adjusts a position of the end-trim affordance in the second region in accordance with the input on the end-trim affordance; and displays, in the first region, an image of the image sequence that corresponds to the position of the end-trim affordance in the second region. More generally, upon detecting the input on the range-trim affordance, the device ceases to loop the image sequence in the first region; adjusts a position of the range-trim affordance in the second region in accordance with the input on the range-trim affordance; and displays, in the first region, an image of the image sequence that corresponds to the position of the range-trim affordance in the second region. Providing a dynamic preview of the looped display mode of the media item makes it easy to see how the edit will affect the media item in the looped display mode. This enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the device). In turn, switching to display a representation of the image that corresponds to the position of the range-trim affordance while adjusting the range-trim affordance makes it easy to precisely trim the media item. This also enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the edit user interface).

[0246] In some embodiments, the device detects (628) the end of the input that started the trimming affordance (e.g., detects liftoff of the contact that started the trimming affordance); and in response to detecting the end of the input on the start trimming affordance, displays in the first region a subset of less than all of the images in the looping image sequence, where the subset does not include images in the image sequence that occur before the image corresponding to the current position of the start trimming affordance. Similarly, in response to detecting the end of the input on the end trimming affordance, the device displays in the first region a subset of less than all of the images in the looping image sequence, where the subset does not include images in the image sequence that occur after the image corresponding to the current position of the end trimming affordance. In some embodiments, the edit user interface for the looping display mode does not include a representative image selection affordance configured to select a representative image in the image sequence via a position of the representative image selection affordance in the second region. In response to detecting the end of the input (e.g., detecting liftoff), an updated preview of the media item loop is provided so that it is easy to see how the range trimming edit will affect the media item in looping mode. This enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing the number of inputs needed to interact with the edit user interface / operate the edit user interface).

[0247] In some embodiments, in accordance with a determination that the respective display mode is a back-and-forth display mode, and the respective edit user interface that is displayed in response to detecting the first input is an edit user interface for the back-and-forth display mode, the device displays (630) in the edit user interface for the back-and-forth display mode, in the first region, the image sequence that is repeated back and forth (e.g., see Figure 5N). When displaying the image sequence in the looped playback in the first region in the edit user interface for the looped display mode, the device detects an input on the start trim affordance; and, upon detecting the input on the start trim affordance: stops the looped playback of the image sequence in the first region; adjusts the position of the start trim affordance in the second region according to the input on the start trim affordance; and displays, in the first region, an image in the image sequence that corresponds to the position of the start trim affordance in the second region. Similarly, upon detecting an input on the end trim affordance, the device stops the looped playback of the image sequence in the first region; adjusts the position of the end trim affordance in the second region according to the input on the end trim affordance; and displays, in the first region, an image in the image sequence that corresponds to the position of the end trim affordance in the second region. More generally, upon detecting an input on a range trim affordance, the device stops the forward and backward playback of the image sequence in the first region; adjusts the position of the range trim affordance in the second region according to the input on the range trim affordance; and displays, in the first region, an image in the image sequence that corresponds to the position of the range trim affordance in the second region. Providing a dynamic preview of the looped display mode of the media item makes it easy to see how the edit will affect the media item in the looped display mode. This enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the device). In turn, switching to display a representation of the image that corresponds to the position of the range trim affordance while adjusting the range trim affordance makes it easy to precisely trim the media item. This also enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the edit user interface).

[0248] In some embodiments, the device detects (632) the end of the input that started the trim affordance (e.g., detects liftoff of the contact from the start trim affordance); and in response to detecting the end of the input on the start trim affordance, displays in the first area a subset of less than all of the images in the looped playback of the sequence of images, where the subset does not include images in the sequence of images that occur before the image corresponding to the current position of the start trim affordance. Similarly, in response to detecting the end of the input on the end trim affordance, the device displays in the first area a subset of less than all of the images in the looped playback of the sequence of images, where the subset does not include images in the sequence of images that occur after the image corresponding to the current position of the end trim affordance. In some embodiments, the edit user interface for the loop display mode does not include a representative image selection affordance configured to select a representative image in the sequence of images via a position of the representative image selection affordance in the second area. In response to detecting the end of the input (e.g., detecting liftoff), an updated preview of the media item that is looped is provided so that it is easy to see how the range trim edit will affect the media item in the loop display mode. This enhances the operability of the device and makes the edit user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing the number of inputs when operating / interacting with the edit user interface).

[0249] In some embodiments, in accordance with a determination that the respective display mode is a merged display mode, and the respective edit user interface that is displayed in response to detecting the first input is an edit user interface for the merged display mode (e.g., a long exposure mode, a strobe mode, or other mode that displays a merged image using multiple images in a sequence of images in the media item), the device displays (634), in the edit user interface for the merged display mode, a (single) merged image in the first area, where the merged image includes content from a simultaneous display of multiple images in the sequence of images (e.g., see Figure 5T ) When the merged image is displayed in the first area in the edit user interface for the merged display mode, the device detects an input on the start trim affordance; and, upon detecting the input on the start trim affordance: the device ceases to display the merged image in the first area; adjusts a position of the start trim affordance in the second area in accordance with the input on the start trim affordance; and displays, in the first area, an image in the sequence of images that corresponds to the position of the start trim affordance in the second area (e.g., see Figures 5AN to 5AOSimilarly, when input on the end-trim affordance is detected, the device ceases displaying the merged image in the first area; adjusts the position of the end-trim affordance in the second area in accordance with the input on the end-trim affordance; and displays, in the first area, an image from the sequence of images that corresponds to the position of the end-trim affordance in the second area. More generally, when input on the range-trim affordance is detected, the device ceases displaying the merged image in the first area; adjusts the position of the range-trim affordance in the second area in accordance with the input on the range-trim affordance; and displays, in the first area, an image from the sequence of images that corresponds to the position of the range-trim affordance in the second area. Providing a preview of the merged display mode of the media item makes it easy to see how the edit will affect the media item in the merged display mode. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user mistakes when operating / interacting with the device). In turn, switching to display a representation of the image that corresponds to the position of the range-trim affordance while adjusting the range-trim affordance makes it easy to precisely trim the media item. This also enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user mistakes when operating / interacting with the editing user interface).

[0250] In some embodiments, the device detects (636) an end of the input on the start-trim affordance (e.g., detects liftoff of the contact from the start-trim affordance); and in response to detecting the end of the input on the start-trim affordance, displays, in the first area, a (single) merged image made up of a subset of less than all of the images from the sequence of images, where the subset does not include images from the sequence of images that occur before the image corresponding to the current position of the start-trim affordance (e.g., see Figure 6Q). Figures 5AO to 5AP Similarly, in response to detecting the end of the input on the end-trim affordance, the device displays, in the first area, an updated (single) merged image made up of a subset of less than all of the images from the sequence of images, where the subset does not include images from the sequence of images that occur after the image corresponding to the current position of the end-trim affordance. Providing an updated preview of the merged image in response to detecting the end of the input (e.g., detecting liftoff) makes it easy to see how the range-trim edit will affect the media item in the merged mode. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing the number of inputs when operating / interacting with the editing user interface).

[0251] In some embodiments, the sequence of images in the media item is taken by a camera; the sequence of images includes a representative image; the sequence of images includes one or more images taken by the camera after the representative image is taken; and the sequence of images includes one or more images taken by the camera before the representative image is taken; and in accordance with a determination that the respective display mode is the lively photo display mode, the device displays (638) in the second region a representative image selection affordance configured to select the representative image in the sequence of images via a position of the representative image selection affordance in the second region (e.g., the representative image selection affordance 520 in the region 521 in FIG. 6G). Providing an affordance to adjust the representative image of the media item enhances the operability of the device and makes the editing user interface more efficient. Figure 5V

[0252] In some embodiments, in accordance with a determination that the respective display mode is the lively photo display mode, and the respective editing user interface that is displayed in response to detecting the first input is the editing user interface for the lively photo display mode, the device displays (640), in the editing user interface for the lively photo display mode, the representative image of the sequence of images in the first region; while the representative image is displayed in the first region in the editing user interface for the lively photo display mode, the device detects an input on the start trim affordance; and, upon detecting the input on the start trim affordance: ceases to display the representative image in the first region; adjusts a position of the start trim affordance in the second region in accordance with the input on the start trim affordance; and displays, in the first region, an image in the sequence of images that corresponds to the position of the start trim affordance in the second region (e.g., see FIGS. 6H-6I). Figures 5W to 5AA Similarly, upon detecting an input on the end trim affordance, the device ceases to display the representative image in the first region; adjusts a position of the end trim affordance in the second region in accordance with the input on the end trim affordance; and displays, in the first region, an image in the sequence of images that corresponds to the position of the end trim affordance in the second region (e.g., see FIGS. 6H-6I). Figures 5BB to 5D ​). More generally, upon detecting an input on the range-trim affordance, the device ceases displaying the representative image in the first area; adjusts the position of the range-trim affordance in the second area in accordance with the input on the range-trim affordance; and displays an image in the first area that corresponds to the position of the range-trim affordance in the second area. Providing a preview of the living photo display mode of the media item makes it easy to see how the edit will affect the media item in the living photo display mode. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the device). In turn, switching to display a representation of the image that corresponds to the position of the range-trim affordance while adjusting the range-trim affordance makes it easy to precisely trim the media item. This also enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the editing user interface).

[0253] In some embodiments, the device detects (642) an end of the input on the start-trim affordance (e.g., detects liftoff of the contact from the start-trim affordance); and in response to detecting the end of the input on the start-trim affordance, displays the representative image in the first area (e.g., Figures 5Z to 5AA ). Similarly, in response to detecting the end of the input on the end-trim affordance, the device displays the representative image. Providing an updated preview of the media item in the living photo display mode in response to detecting the end of the input (e.g., detecting liftoff) makes it easy to see how the range-trim edit will affect the media item in the living photo display mode. This enhances the operability of the device and makes the editing user interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing the number of inputs when operating / interacting with the editing user interface).

[0254] In some embodiments, while displaying the editing user interface for the lively photo display mode, the device detects (644) input directed to a respective range trim affordance (e.g., a start trim affordance or an end trim affordance), where: the input begins while the respective range trim affordance is at a starting position; the input has a respective magnitude (e.g., a drag gesture by a contact (or a cursor) is detected that begins on the start trim affordance and includes a movement component along the slider, which includes a reduced scale representation of multiple images in the sequence of images); and in response to detecting the input directed to the respective range trim affordance: in accordance with a determination that the respective magnitude of the input corresponds to movement of the respective range trim affordance by a first amount, the device moves the respective range trim affordance by the first amount (without moving the representative image selection affordance), which is less than a distance between the starting position of the respective range trim affordance and the representative image selection affordance; and in accordance with a determination that the respective magnitude of the input corresponds to movement of the respective range trim affordance by a second amount, the device moves the respective range trim affordance by the second amount and also moves the representative image selection affordance (e.g., see Figures 5X to 5Y and Figure 5AA), the second amount being greater than a distance between a starting position of the range trim affordance and the representative image selection affordance. In some embodiments, the device moves the starting trim affordance along the slider in accordance with a component of movement of the contact (in the drag gesture) along the slider. In some embodiments, once the starting trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will continue to move the starting trim affordance, and will also change the current representative image in the media item to the image corresponding to the current position of the starting trim affordance. Moving the range trim affordance in this way allows the range of the media item and the representative image of the media item to be changed with a single input, which reduces the number of inputs needed to perform these operations, and makes the editing user interface more efficient. In some embodiments, the starting trim affordance cannot be moved beyond the representation in the second region corresponding to the current representative image in the sequence of images. In some embodiments, once the starting trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will not continue to move the starting trim affordance, and will not change the current representative image in the media item. Moving the range trim affordance in this way enhances the operability of the device, and makes the user device interface more efficient (e.g., by preventing the user from accidentally changing the representative image with the range trim affordance). Similarly, in some embodiments, the device moves the ending trim affordance along the slider in accordance with a component of movement of the contact (in the drag gesture) along the slider. In some embodiments, once the ending trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will continue to move the ending trim affordance, and will also change the current representative image in the media item to the image corresponding to the current position of the ending trim affordance. In some embodiments, the ending trim affordance cannot be moved beyond the representation in the second region corresponding to the current representative image in the media item. In some embodiments, once the ending trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will not continue to move the ending trim affordance, and will not change the current representative image in the media item.

[0255] In some embodiments, when an input directed to the representative image selection affordance is detected, when the position of the representative image selection affordance in the second region does not correspond to the representation of the current representative image of the media item, the device displays (646) an indicator for the current representative image of the media item in the second region (e.g., a dot 542 in FIG. 6B is displayed adjacent to the reduced scale representation of the current representative image in the media item). In some embodiments, when the editing user interface is initially displayed, the representative image selection affordance is displayed at a position corresponding to the representation of the representative image of the media item, and the dot is not displayed, as in FIG. 6A. Figure 5AB In some embodiments, when an input directed to the representative image selection affordance is detected, when the position of the representative image selection affordance in the second region does not correspond to the representation of the current representative image of the media item, the device displays (646) an indicator for the current representative image of the media item in the second region (e.g., a dot 542 in FIG. 6B is displayed adjacent to the reduced scale representation of the current representative image in the media item). In some embodiments, when the editing user interface is initially displayed, the representative image selection affordance is displayed at a position corresponding to the representation of the representative image of the media item, and the dot is not displayed, as in FIG. 6A. Figure 5W As shown, in some embodiments, when the representative image selection affordance is moved away from the position corresponding to the representation of the representative image of the media item (e.g., in response to a drag gesture on the representative image selection affordance), a dot is displayed at or near the position corresponding to the representation of the representative image of the media item, as shown. Figures 5AQ to 5AV As shown, in some embodiments, if the representative image selection affordance is moved away from its initial position, an indicator is displayed, and if the representative image selection affordance is moved back to the initial position, the indicator is stopped from being displayed. Displaying the indicator of the current representative image of the media item in this way provides improved visual feedback to the user and helps the user return to the current representative image if the user decides not to change the current representative image. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user mistakes when operating / interacting with the device).

[0256] In some embodiments, when an input directed to the representative image selection affordance is detected, in accordance with a determination that the representative image selection affordance is within a predetermined distance (greater than zero) of the position corresponding to the representation of the current representative image of the media item, the device aligns (648) the representative image selection affordance to the position corresponding to the representation of the current representative image of the media item (e.g., see Figures 5AW to 5AX If the user decides not to change the current representative image, aligning the representative image selection affordance in this way helps the user return to the current representative image. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user mistakes when operating / interacting with the device).

[0257] In some embodiments, the electronic device has one or more tactile output generators, and when the representative image selection affordance is aligned to the position corresponding to the representation of the current representative image of the media item, the device generates (650) a tactile output (e.g., see tactile response 527 in Figure 5AX Providing tactile feedback in this way enhances the operability of the device and makes the user device interface more efficient (e.g., by reminding the user that the representative image selection affordance has returned to the position corresponding to the representation of the current representative image, thereby helping the user achieve intended results and reducing user mistakes when operating / interacting with the device).

[0258] In some implementations, when displaying an edit user interface for a corresponding display mode, the device detects (652) input for displaying edit user interface options; in response to detecting input for displaying edit user interface options, displays multiple edit display mode indications, including a first edit display mode indication; detects input on the first edit display mode indication; and in response to detecting input on the first edit display mode indication, changes the edit user interface from an edit user interface for the corresponding display mode to an edit user interface for the display mode corresponding to the first edit display mode indication. For example, activating (e.g., using a tap gesture) the display mode indicator icon 512 ( Figure 5AY This makes menu 528 () displayed Figure 5AZ This menu includes editing display mode options for media items. Then, the editing display mode option 529-1 is activated (e.g., using a tap gesture). Figure 5AZ This enables an editing user interface for the vivid photo display mode. Figure 5AZ Change to an editing user interface for loop display mode. Figure 5BA Providing the ability to easily switch between editing user interfaces for different display modes of media items enhances device operability and makes the user device interface more efficient (for example, by helping users navigate to the editing mode corresponding to a given display mode of the media item, allowing users to preview the effect of editing on that display mode).

[0259] In some implementations, an electronic device having a display and a touch-sensitive surface displays one or more images from a media item in a first user interface on the display. These one or more images correspond to a series of images in a respective display mode, which is one of several user-selectable display modes for a sequence of images (e.g., a vivid photograph display mode, a loop display mode, a long exposure display mode, a back-and-forth display mode, a movie display mode, a strobe effect display mode, or other display modes for displaying a user-selected sequence of images) (see, for example, [link to relevant documentation]). Figure 5U When displaying one or more images from a media item, the device detects a first input (e.g., a tap gesture made by contact on an editing display) (e.g., see...). Figure 5U (A tap at the editing control 504-d, 502-9). In response to detecting the first input, the device displays the editing user interface for the media item (see, for example, [link]). Figure 5VThe editing user interface for a media item is configured to change which images are included within the media item (e.g., trimming an image sequence to a smaller subset of the entire image sequence). The editing user interface for a media item displays a first (predefined) area that includes a representation of the media item, which comprises content from multiple images in the image sequence (e.g., by playing the image sequence over time or by merging multiple images into a single image) (see, for example, [link to relevant documentation]). Figure 5V The editing display area 523 in the image sequence. In some embodiments, the first area displays images in the image sequence one at a time, wherein when a corresponding image is displayed, it fills the first area. Along with the first area, the editing user interface of the media item also simultaneously displays a second (predefined) area different from the first area, which includes a representation of the images in the image sequence (e.g., optionally including a slider representing a scaled-down representation of multiple images in the image sequence) (see, for example, see...). Figure 5V The multiple editing capabilities include: a user-adjustable start trimming capability (e.g., start handle 516), and multiple editing capability representations for selecting different images in the image sequence (e.g., start image, end image, and / or representative image) as reference points for media items, including: a user-adjustable start trimming capability representation (e.g., start handle 516). Figure 5V The first image in a subset of the image sequence is defined by the position of the start trimming indicator in the second region; and the second image is defined by a user-adjustable end trimming indicator (e.g., end handle 518). Figure 5V The final image in a subset of the image sequence is defined by the position of the end trimming indicator in the second region. In some embodiments, the editing user interface of a media item simultaneously displays multiple image adjustment indicators, which, when activated, provide access to image adjustment functions (e.g., cropping, rotating, filtering, highlighting, marking, magic wand, canceling, saving / finishing, and / or other image editing functions). Figure 5V (Energy display representations 505-a to 505-h). When an editing user interface for a corresponding display mode is displayed, the device detects a second input corresponding to the adjustment of the corresponding editing energy display of the plurality of editing energy displays (e.g., detecting a drag gesture that adjusts the position of the start or end of the trimming energy display in the second area) (e.g., see [reference]). Figures 5W to 5X In response to the detection of a second input, the device stops displaying a representation of a media item comprising content from multiple images in the image sequence in the first area, and instead displays a representation of an image in the first area corresponding to the position of a corresponding editable representation in the representation of the image sequence (see, for example, see...). Figures 5W to 5X ).

[0260] It should be understood that, Figures 6A-6FThe specific order in which operations are described is merely exemplary and is not intended to indicate that the described order is the only order in which the operations could be performed. One of ordinary skill in the art would recognize various ways to reorder the operations described herein. Additionally, it should be noted that details of the processes described with respect to the method 600 are also applicable in an analogous manner to the methods described below with respect to other methods described herein (e.g., the methods 700, 800, 900, and 1000). For example, the contacts, gestures, user interface objects, range-trim affordances, display modes, media items, representative image selection affordances, haptic outputs, and animations described above with reference to the method 600 optionally have one or more of the characteristics of the contacts, gestures, user interface objects, range-trim affordances, display modes, media items, representative image selection affordances, haptic outputs, and animations described herein with reference to other methods described herein (e.g., the methods 700, 800, 900, and 1000). For the sake of brevity, such Figures 6A to 6F

[0261] Figures 7A to 7D is a flowchart of a method for navigating to a media item having multiple display modes and selecting a display mode for the media item, in accordance with some embodiments. The method 700 is performed at an electronic device (e.g., the device 300 in Figure 3 or the portable multifunction device 100 in Figure 1A with a display, a touch-sensitive surface, and optionally one or more sensors. In some embodiments, the display is a touch-screen display and the touch-sensitive surface is on or integrated with the display. In some embodiments, the display is separate from the touch-sensitive surface. Some operations in method 700 are, optionally, combined and / or the order of some operations is, optionally, changed.

[0262] As described below, the method 700 provides an intuitive way to navigate to a media item having multiple display modes and select a display mode for the media item. The method reduces the number, extent, and / or nature of inputs from a user when navigating between multiple display modes of a media item, thereby creating a more efficient human-machine interface. For battery-operated electronic devices, enabling a user to navigate between multiple display modes of a media item more quickly and efficiently conserves power and increases the time between battery charges.

[0263] ​The device displays (702), in a first user interface on the display, one or more images from the media item, the one or more images corresponding to a series of images in a first display mode, where the first display mode is one of a plurality of user-selectable display modes for the media item corresponding to the series of images (e.g., a lively photo display mode, a loop display mode, a long exposure display mode, a back-and-forth display mode, a movie display mode, a strobe effect display mode, or other display mode for displaying a user-selected media item) (e.g., see Figure 5BF ).

[0264] In some embodiments, the one or more images from the media item are displayed (704) in the first user interface at a first magnification; and the respective representation of the media item is displayed in the display mode selection user interface at a second magnification that is less than the first magnification (e.g., see Figure 5BF and Figure 5BH ). Displaying the representation of the media item in the display mode selection user interface at a lower magnification than the media item in the first user interface (e.g., the media item playback interface) allows for simultaneous display and selection of multiple representations in the display mode selection user interface, while also allowing for easier viewing of the (larger) media item in the first user interface. This enhances the operability of the device and makes the user device interface more efficient.

[0265] In some embodiments, the media item corresponding (706) to the series of images is a first media item in a set of media items (e.g., a media library, folder, photo album, or camera roll); the set of media items is arranged in an order based on a predetermined criteria (e.g., date / time of creation, date / time of last edit, name of media item in the set, size, etc.); one or more previous media items precede the first media item in the order; one or more subsequent media items follow the first media item in the order; the electronic device replaces display of the first media item with display of a subsequent media item in the set in response to detecting a swipe in a second direction (e.g., left); and the electronic device replaces display of the first media item with display of a previous media item in the set in response to detecting a swipe in a third direction different from the second direction (e.g., right); using swipe gestures (e.g., left and right) provides an efficient input for navigating between media items in a set of media items, as further described herein with reference to method 800. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results and reducing user errors when operating / interacting with the device).

[0266] While displaying the one or more images from the media item in the first display mode, the device detects (708) a first input (e.g., detects a swipe gesture at a contact on the currently displayed image in the sequence of images) (e.g., see Figure 5BG ).

[0267] In some embodiments, the first input is a swipe in a first direction (e.g., an upward swipe gesture at a contact) (e.g., Figure 5BG in FIG. 6M 560-2). The swipe gesture (e.g., the upward swipe gesture) provides an efficient, intuitive input to navigate from the first user interface (e.g., the media item playback interface) to the display mode selection user interface, which enhances the operability of the device and makes the user-device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended result, and reducing user mistakes when operating / interacting with the device), which, additionally, reduces power usage and improves battery life of the device by enabling the user to use the device more quickly and efficiently.

[0268] In response to detecting the first input, the device displays (712), on the display, a display mode selection user interface (e.g., a user interface configured to select a display mode for the media item corresponding to the sequence of images), where: the display mode selection user interface concurrently displays multiple representations of the media item, including a second representation of the media item corresponding to a second display mode different from the first display mode (e.g., see the display mode selection user interface 511 in FIG. 6M). In some embodiments, for a given representation of the media item, text indicating the corresponding display mode (or another display mode identifier) is displayed adjacent to the given representation. Figure 5BH

[0269] In some embodiments, the multiple representations of the media item include (714) a first representation of the media item corresponding to the first display mode (e.g., Figure 5BH ​"vibrant" indicator 540-1 for "vibrant" display mode in the media item). In some embodiments, the respective representations of the media item correspond to respective ones of the plurality of user-selectable display modes for the media item. In some embodiments, for a given representation of the media item, the text indicating the corresponding display mode (or another display mode identifier) is displayed adjacent to the given representation. Displaying the representation of the media item in the display mode that corresponds to the mode that is currently being displayed in the first user interface in the display mode selection user interface helps to provide context for the navigation and provides a path back to the first user interface with the media item displayed in the same mode. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the result the user intended and reducing user mistakes when operating / interacting with the device).

[0270] In some embodiments, the plurality of representations of the media item that are displayed in response to detecting the first input are selected (716) based on an analysis of the images in the image sequence and predetermined requirements of a plurality of different candidate display modes (e.g., if the device determines that the sequence of images in the media item meets the looping representation criteria, the device only displays / suggests the looping representation). Automatically selecting representations of the media item to display in the display mode selection user interface, where a given representation corresponds to a particular display mode of the media item, helps the user navigate to a better display mode of the media item. This enhances the operability of the device and makes the user device interface more efficient (e.g., by automatically displaying only representations of display mode options of the media item that the user is likely to be interested in).

[0271] In some embodiments, the plurality of user-selectable display modes for the media item includes (718) a vibrant photo display mode that is configured to play back the sequence of images in the media item in response to detecting an input on a representative image in the sequence of images (e.g., a next image input or a press input that includes an increase in contact intensity that exceeds an intensity threshold) (e.g., see FIGS. 6A-6B). Figure 5BH In some embodiments, playing back the sequence of images in response to detecting the input includes starting from a currently displayed image (e.g., the representative image) in the middle of the sequence of images. In some embodiments, playing back the sequence of images in response to detecting the input includes cross-fading to a previous (e.g., chronologically first) image in the sequence of images and playing from the first image. In some embodiments, playing back the sequence of images in response to detecting the input includes starting playback from the currently displayed image, then cross-fading to the first image and playing through the sequence of images from the first image.

[0272] In some embodiments, the plurality of user-selectable display modes for the media item includes (720) a loop display mode configured to display a sequence of images in the media item (e.g., a sequence of images in a video) in a loop (e.g., displaying the images in the sequence sequentially from the beginning to the end, then again starting from the beginning of the sequence) (repeatedly). Figure 5BH In some embodiments, the "loop" indicator 540-2 for the "loop" display mode in FIG. 6B.

[0273] In some embodiments, the plurality of user-selectable display modes for the media item includes (722) a back-and-forth display mode configured to display a sequence of images in the media item that play back repeatedly in a back-and-forth manner (e.g., displaying the images in the sequence sequentially from the beginning to the end, then again starting from the end of the sequence and playing back to the beginning) (e.g., Figure 5BH In some embodiments, the "back-and-forth" indicator 540-3 for the "back-and-forth" display mode in FIG. 6B.

[0274] In some embodiments, the plurality of user-selectable display modes for the media item includes (724) a merged image display mode configured to display a single merged image that includes content from multiple images in the sequence of images (e.g., Figure 5BH In some embodiments, the "merged" indicator 540-4 for the "merged" display mode in FIG. 6B.

[0275] In some embodiments, the single merged image includes content of the same object appearing at the same location in the multiple images in the sequence of images that are merged together to obscure features moving between different images and simulate the effect of a long exposure time during image capture.

[0276] In some embodiments, the single merged image includes content of the same object appearing at different locations in the multiple images in the sequence of images, and the object is emphasized at different locations in the multiple images to simulate the effect of multiple exposures with a strobe light such that a moving object appears multiple times in the merged image.

[0277] In some embodiments, when in the merged display mode (e.g., a long exposure display mode), detecting the same input that initiated playback in the living photo display mode (e.g., a swipe, an increasing press input including contact intensity that exceeds an intensity threshold, or a long press on the displayed merged image) will cross-fade from the merged image to playback of the sequence of images in the media item, and then cross-fade back to the merged image.

[0278] In some embodiments, the plurality of user-selectable display modes for the media item includes (726) a movie display mode configured to play back a sequence of images in the media item in response to detecting a tap input on the representation of the sequence of images (e.g., as opposed to detecting a swipe, long press, or press input), where playback starts at the earliest image in the sequence of images. In some embodiments, the edit user interface for the movie display mode includes a control that causes the media item to be saved only as a video file (e.g., a GIF, MOV, MP4, WMV, or AVI file), as opposed to as a media item that simultaneously contains still images (e.g., JPEGs) and video (e.g., MOVs) (e.g., the "movie" indicator 540-6 for the "movie" display mode in Figure 5BK ).

[0279] In some embodiments, a respective representation of the media item is displayed (728) in the display mode selection user interface to display the media item in the corresponding display mode, where the respective representation is displayed in the display mode selection user interface at a second magnification that is less than a first magnification of the media item in the corresponding display mode (e.g., see Figure 5BH ). For example, a first representation of the media item corresponding to the loop display mode displays a sequence of images in the looped media item at a second, zoomed-out magnification. For example, a second representation corresponding to the ping-pong display mode displays a sequence of images that is repeatedly played back in a ping-pong fashion at a second, zoomed-out magnification. For example, a third representation corresponding to the long exposure display mode displays a sequence of images as a single merged image at a second, zoomed-out magnification. For example, a fourth representation corresponding to the strobe display mode displays a subset of a sequence of images as a single merged image at a second, zoomed-out magnification. In some embodiments, these previews of the corresponding display modes are displayed simultaneously (e.g., as a set of thumbnails, with a preview of the particular display mode applied to each thumbnail). Displaying zoomed-out representations of the media item as previews of the corresponding display modes in the display mode selection user interface provides context for navigation. This enhances the operability of the device and makes the user-device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results, and reducing user mistakes when operating / interacting with the device).

[0280] In some embodiments, the plurality of representations of the media item in the display mode selection user interface are (730) scrollable (e.g., see Figures 5BJ to 5BK). In some embodiments, the representations of media items are displayed in rows and are configured to scroll horizontally in response to detecting a drag or swipe gesture along a row. In some embodiments, the representations of media items are displayed in columns and are configured to scroll vertically in response to detecting a drag or swipe gesture along a column. Having scrollable representations of media items in the display mode selection user interface enables a user to see additional display mode navigation options on a device with a small display. This enhances the operability of the device and makes the user-device interface more efficient (e.g., on a device with a small display).

[0281] In some embodiments, in response to detecting the first input, the display mode selection user interface concurrently displays (732) a portion of the one or more images from the media item in the first display mode at a first magnification that is less than all of the portion, and the plurality of representations of the sequence of images at a second magnification that is less than the first magnification (e.g., see Figure 5BH ) In some embodiments, the display mode selection user interface displays (734) geographic location information for the media item (e.g., see

[0282] In some embodiments, the display mode selection user interface displays (734) geographic location information for the media item (e.g., see Figure 5BM ) In some embodiments, the display mode selection user interface displays additional information associated with the sequence of images in the media item, such as information about people in the sequence of images (e.g., based on facial recognition of the people), a map showing where the sequence of images was taken, links to other photos taken at or near the same location, links to other photos taken at the same time or near the same time (e.g., taken on the same day), and / or other related content. In some embodiments, the display mode selection user interface includes additional information associated with the media item (e.g., a map corresponding to the location of the media item, a collection of photos containing the media item, people appearing in the images in the media item, an option to display related images, an option to display images from the same day, etc.), and displaying such information for the media item in the display mode selection user interface provides context for the media item and provides a quick navigation path to additional information related to the media item. This enhances the operability of the device and makes the user-device interface more efficient (e.g., by providing quick access to additional information related to the media item).

[0283] While displaying the display mode selection user interface on the display, the device detects (736) an input on a second representation of the plurality of representations of the media item (e.g., a tap 560-4 at the "loop" indicator 540-2 shown in FIG. 6M). Figure 5BH "Loop" indicator 540-2 shown in FIG. 6M.

[0284] In response to detecting the input on the second representation of the plurality of representations of the media item, the device selects (738) a second display mode of the plurality of user-selectable display modes for the media item corresponding to the second representation of the plurality of representations of the media item. In some embodiments, the second representation of the media is visually distinguished from the other representations (e.g., by being highlighted, having a border placed around it, etc.) to indicate that the display mode corresponding to the second representation is selected (e.g., the "Loop" indicator 540-2 shown in FIG. 6M). Figure 5BJ "Vibrant" indicator 540-1 in FIG. 6L, "Loop" indicator 540-2 in FIG. 6M,

[0285] "Long exposure" indicator 540-3 in FIG. 6N, or Figure 5BH "Back and forth" indicator 540-4 in FIG. 6P). Displaying the indicator of the first display mode in the first user interface helps to provide context for the navigation. This enhances the operability of the device and makes it easier for the user to interact with the device (e.g., by providing feedback that helps the user determine which inputs will produce the results the user desires and reducing user errors). Figure 5BH Figure 5BH In some embodiments, in response to detecting the input on the second representation of the plurality of representations of the media item, the device ceases (742) displaying the display mode selection user interface; and displays (e.g., in the first user interface on the display) one or more images from the media item in the (selected) second display mode, the (selected) second display mode corresponding to the second representation of the plurality of representations of the media item (e.g., see FIG. 6M). Selecting a particular display mode, exiting the display mode selection user interface, and displaying the media item in the selected display mode in response to a single input (e.g., a tap gesture on a given representation of the media item) reduces the number of inputs needed to perform these operations and makes navigation more efficient. Figure 5BH ) to display the media item in the selected display mode in response to a single input (e.g., a tap gesture on a given representation of the media item) reduces the number of inputs needed to perform these operations and makes navigation more efficient.

[0286] In some embodiments, in response to detecting the input on the second representation of the plurality of representations of the media item, the device ceases (742) displaying the display mode selection user interface; and displays (e.g., in the first user interface on the display) one or more images from the media item in the (selected) second display mode, the (selected) second display mode corresponding to the second representation of the plurality of representations of the media item (e.g., see FIG. 6M). Selecting a particular display mode, exiting the display mode selection user interface, and displaying the media item in the selected display mode in response to a single input (e.g., a tap gesture on a given representation of the media item) reduces the number of inputs needed to perform these operations and makes navigation more efficient. Figures 5BH to 5BI ) to display the media item in the selected display mode in response to a single input (e.g., a tap gesture on a given representation of the media item) reduces the number of inputs needed to perform these operations and makes navigation more efficient.

[0287] In some implementations, in response to detecting input on a second representation of the plurality of representations of a media item, the device displays (744) (e.g., in a first user interface on a display) an indicator of a (selected) second display mode corresponding to the second representation of the plurality of representations of the media item (e.g., in...). Figure 5BH The "Cycle" indicator (540-2) is displayed. Indicators showing the selected display mode help provide context for navigation. This enhances device operability and makes the user interface more efficient (e.g., by helping users determine which inputs will produce the expected results and reducing erroneous user feedback when operating / interacting with the device).

[0288] In some implementations, after selecting a second display mode from among a plurality of user-selectable display modes corresponding to a second representation among the plurality of representations of the media item, the device detects (746) a second input (e.g., a tap gesture on a "Done" icon, a double-tap gesture 540-2 on a second representation, or...) when the second display mode corresponding to the second representation is selected. Figure 5BO The tap (560-14 shown), or other input for exiting the display mode selection user interface; and in response to detecting a second input: stopping the display of the display mode selection user interface; and displaying (e.g., in the first user interface on the display) one or more images from the media item in the (selected) second display mode, which corresponds to a second representation among the plurality of representations of the media item. In some embodiments, in response to detecting a second input, the device also displays an indicator of the selected display mode corresponding to the second representation among the plurality of representations of the image sequence. Requesting another input after selecting the desired display mode to leave the display mode selection user interface reduces unintentional navigation away from the display mode selection user interface. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing assistance to the user in determining which inputs will produce the expected results and reducing erroneous user feedback when operating / interacting with the device).

[0289] In some implementations, when one or more images from a media item are displayed in a first display mode in a first user interface on the display, the device displays (748) a suggestion to switch from the first display mode to the second display mode (e.g., including instructions for accessing the display mode selection user interface) based on a (automatically) determined second display mode for the media item that meets recommended criteria. Automatically suggesting alternative display modes for the media item helps the user navigate to a better display mode for the media item. This enhances the operability of the device and makes the user device interface more efficient.

[0290] It should be understood that, Figures 7A-7D The specific order in which the operations described herein are presented is merely an example and is not intended to indicate that this order is the only possible order in which these operations can be performed. Those skilled in the art will conceive of various ways to reorder the operations described herein. Furthermore, it should be noted that the details of other processes described herein relative to other methods (e.g., methods 600, 800, 900, and 1000) also apply in a similar manner to the above descriptions relative to these other methods. Figures 7A to 7D Method 700 is described herein. For example, the touch, gesture, user interface object, range trimming indication, display mode, media item, representative image selection indication, haptic output, and animation described above with reference to method 700 optionally have one or more of the features of touch, gesture, user interface object, range trimming indication, display mode, media item, representative image selection indication, haptic output, and animation described herein with reference to other methods described herein (e.g., methods 600, 800, 900, and 1000). For the sake of brevity, these details will not be repeated here.

[0291] Figures 8A to 8F This is a flowchart of a method for modifying a representative image for a media item corresponding to an image sequence, according to some embodiments. Method 800 is used in an electronic device having a display, a touch-sensitive surface, and optionally one or more sensors (e.g., Figure 3 Equipment 300 or Figure 1A The portable multifunction device 100 performs the detection of contact intensity with the touch-sensitive surface. In some embodiments, the display is a touchscreen display, and the touch-sensitive surface is on or integrated with the display. In some embodiments, the display and the touch-sensitive surface are separate. Some operations in method 800 are optionally combined, and / or the order of some operations is optionally changed.

[0292] As described below, method 800 provides an intuitive way to change the representative image of a media item corresponding to an image sequence. This method reduces the amount, extent, and / or nature of user input when changing the representative image of a media item, thereby creating a more efficient human-computer interface. For battery-powered electronic devices, it enables users to change the representative image of media items faster and more efficiently, thus saving power and increasing the time between battery charging.

[0293] The device displays (802) a representation of a media item corresponding to the image sequence in a first user interface on the display, the media item including representative images from the image sequence (e.g., displaying representative images from the image sequence) (e.g., see...). Figure 5BSIn some implementations, the media item includes an image captured in response to a single activation of the shutter button (such as a tap on the virtual shutter button, a click on the physical shutter button, or a long press input on either the virtual or physical shutter button) in a first display mode (e.g., vivid photo display mode).

[0294] When a representation of a media item corresponding to an image sequence in the first display mode is displayed, the device detects (804) a first input (e.g., a tap gesture made by a touch on the editing display) (e.g., see...). Figure 5BT ).

[0295] In response to the detection of the first input, the device displays (806) an editing user interface for the media item on the display in a first display mode (see, for example, see...). Figure 5BU In some implementations, the editing user interface is configured to trim the image sequence in a media item displayed in Vivid Photo Display Mode to a smaller subset of the entire image sequence, and the editing interface is configured to select a new representative image for the media item in Vivid Photo Display Mode. The editing user interface simultaneously displays: a first (predefined) area (e.g., Figure 5BU The editing display area 523 shown is a first (predefined) area configured to display images in an image sequence sequentially at a first magnification. In some embodiments, the first area displays images in the image sequence one at a time, wherein a corresponding image fills the first area when a corresponding image is displayed. The editing user interface simultaneously displays a second (predefined) area different from the first area (e.g., Figure 5BU The second region (as shown in region 521) includes a representation of images in an image sequence at a second magnification less than the first magnification (e.g., in a slider representing a scaled-down representation of multiple images in an image sequence including media items); a user-adjustable representation of representative image selection (e.g., key image box 520, ...). Figure 5BU The user-adjustable representative image selection power representation is configured to select a new representative image in the image sequence via a portion of the representative image selection power representation in the second region; multiple range trimming power representations, including: a user-adjustable start trimming power representation (e.g., start handle 516, Figure 5BU The first boundary for image sequence playback (e.g., a start trimming indicator defining the start image in a subset of the image sequence via the position of the start trimming indicator in the second region) and a user-adjustable end trimming indicator (e.g., end handle 518) indicates the first boundary for image sequence playback (e.g., a start trimming indicator defining the start image in a subset of the image sequence via the position of the start trimming indicator in the second region); and a user-adjustable end trimming indicator (e.g., end handle 518). Figure 5BU This indicates a second boundary for playback of the image sequence (e.g., an end-pruning indicator that defines the end image in a subset of the image sequence via the location of the end-pruning indicator in the second region).

[0296] In some implementations, the image sequence in the media item is captured by a camera (e.g., a camera that is part of an electronic device or a camera that is separate from an electronic device) (808); the image sequence includes one or more images captured by the camera after a representative image is captured; and the image sequence includes one or more images captured by the camera before a representative image is captured.

[0297] When displaying the editing user interface, the device detects (810) a second input pointing to the representative image selection display (e.g., detecting a drag gesture made by touch (or cursor) that begins on the representative image selection display and includes a movement component along a slider that includes a scaled-down representation of multiple images in an image sequence) (e.g., by...). Figure 5BV The drag made by contact 570-4 shown in the figure).

[0298] Upon detecting a second input pointing to a representative image selection display: the device moves (812) the representative image selection display in the second region according to the second input (e.g., moves the representative image selection display along the slider according to the movement component along the slider based on the contact (in a drag gesture); displays a visually emphasized representation of the image in the second region corresponding to the current position of the representative image selection display in the second region (e.g., using the representation of the image around the representative image selection display, magnifying the representation of the image in the second region relative to other representations in the slider, and / or changing the image displayed within the representative image selection display (because the representative image selection display moves along the representation of the image in the image sequence in the slider); and displays an image from the image sequence in the first region corresponding to the current position of the representative image selection display in the second region (e.g., the representation of the image in the second region corresponding to the current position of the representative image selection display in the second region is highlighted, while the corresponding image is displayed in the first region at a higher magnification) (e.g., see...). Figures 5BW to 5BX ).

[0299] In some implementations, when the position of the representative image selection indicator moves in the second region, the representation of the image in the second region corresponding to the current position of the representative image selection indicator in the second region, and the image in the first region corresponding to the current position of the representative image selection indicator are updated (814) (see, for example, see...). Figures 5BW to 5BX). While the position of the representative image selection affordance moves, the concurrent updating of the images in the first area and the representation in the second area provides visual feedback that facilitates selection of the new representative image. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user to determine which inputs will produce the result intended by the user to select the new representative image).

[0300] In some embodiments, the device detects (816) an end of the second input (e.g., detects liftoff of the contact that provided the second input); and in response to detecting the end of the second input, the device displays a representative image confirmation affordance (e.g., in response to detecting liftoff of contact 570-4 in Figure 5BZ “Make Key Photo (representative image)” in Figure 5CA In some embodiments, the representative image confirmation affordance is displayed adjacent to the position of the representative image selection affordance at the end of the second input. In some embodiments, the representative image selection affordance remains at the position to which it was moved in response to the second input even after the second input ends (e.g., until another input is detected or until a predetermined amount of time has elapsed). Displaying the representative image confirmation affordance at the end of the input provides visual feedback that helps to guide the user during selection of the new representative image. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user to determine which inputs will produce the result intended by the user to select the new representative image and reduces user mistakes when operating / interacting with the device).

[0301] In some embodiments, while the representative image confirmation affordance is displayed, the device detects (818) an input directed to the representative image confirmation affordance (e.g., detects a tap gesture on the representative image confirmation affordance or a hidden hit region for the representative image confirmation affordance); and in response to detecting the input directed to the representative image confirmation affordance, updates the representative image in the media item to the image that corresponds to the current position of the representative image selection affordance in the second area. For example, Figure 5CB The tap gesture 570-6 on “Make Key Photo” in confirming selection of the image displayed in the first area that corresponds to the current position of the representative image selection affordance as the updated representative image for the media item. Requiring a confirmation input after temporarily selecting a new representative image for a media item reduces inadvertent or unwanted selection of the new representative image. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing feedback that helps the user to determine which inputs will produce the result intended by the user and reduces user mistakes when operating / interacting with the device).

[0302] In some implementations, when displaying the representative image confirmation display, the device detects (820) input that is not directed at the representative image confirmation display (e.g., detecting a tap gesture in the editing user interface at a location away from the representative image confirmation display or at a hidden hit area of ​​the representative image confirmation display); and in response to detecting input that is not directed at the representative image confirmation display, it abandons updating the representative image in the media item to the image corresponding to the current position of the representative image selection display in the second area. For example, away from... Figure 5CD The tap gesture 570-8 for "Creating a Key Photo" cancels the selection of an image displayed in the first area, which corresponds to the current position of the representative image selection indicator as the updated representative image for the media item. Therefore, in some embodiments, the device detects input when displaying the representative image confirmation indicator, and in response to the detection of input, updates the representative image in the media item to the image corresponding to the current position of the representative image selection indicator in the second area, based on whether the input points to the representative image confirmation indicator. And based on whether the input points to the representative image confirmation indicator, the device abandons updating the representative image in the media item to the image corresponding to the current position of the representative image selection indicator in the second area. As described above, requiring confirmation input after temporarily selecting a new representative image for a media item reduces unintentional or unnecessary selection of a new representative image. This enhances the operability of the device and makes the user interface more efficient (e.g., by providing assistance to the user in determining which inputs will produce the expected results and reducing erroneous user feedback when operating / interacting with the device).

[0303] In some implementations, in response to the detection of an input that does not point to the representative image confirmation power indicator: the device stops (822) displaying the representative image confirmation power indicator and moves the position of the representative image selection power indicator in the second region to (or adjacent to) the representation of the representative image (e.g., an image in the media item that was the representative image before the second input was detected) (e.g., see...). Figures 5CD to 5CE When a new representative image is not confirmed, the device automatically cancels changes to the temporary selection of the new representative image on the user interface, reducing the amount of input required by the user and thus creating a more efficient human-machine interface.

[0304] In some embodiments, while displaying the editing user interface, the device detects (824) a third input directed to the respective range-trim affordance (e.g., the start-trim affordance or the end-trim affordance), where: the third input starts while the respective range-trim affordance is at the starting position; and the third input has a respective magnitude (e.g., a drag gesture by the contact (or cursor) is detected that starts on the start-trim affordance and includes a movement component along the slider, which includes a reduced scale representation of multiple images in the sequence of images); and in response to detecting the third input directed to the respective range-trim affordance: in accordance with a determination that the respective magnitude of the third input corresponds to movement of the respective range-trim affordance by a first amount, the first amount being less than a distance between the starting position of the respective range-trim affordance and the representative-image-selection affordance, the respective range-trim affordance is moved by the first amount; and in accordance with a determination that the respective magnitude of the third input corresponds to movement of the respective range-trim affordance by a second amount, the second amount being greater than the distance between the starting position of the respective range-trim affordance and the representative-image-selection affordance, the respective range-trim affordance is moved to be adjacent to the representative-image-selection affordance (e.g., see Figures 5CH to 5CJ ).

[0305] In some embodiments, the device moves the start-trim affordance along the slider in accordance with a component of the movement of the contact (in the drag gesture) along the slider. In some embodiments, once the start-trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will continue to move the start-trim affordance, and will also change the current representative image in the media item to the image corresponding to the current position of the start-trim affordance (e.g., see Figure 5Y , Figure 5AB and Figure 5AC ). Moving the range-trim affordance in this way allows for changing both the range of the media item and the representative image of the media item with a single input, which reduces the number of inputs needed to perform these operations, and makes the editing user interface more efficient.

[0306] In some embodiments, the start-trim affordance cannot be moved beyond the representation in the second region corresponding to the current representative image in the sequence of images. In some embodiments, once the start-trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the slider will not continue to move the start-trim affordance, and will not change the current representative image in the media item. Moving the range-trim affordance in this way enhances the operability of the device, and makes the user device interface more efficient (e.g., by preventing the user from accidentally changing the representative image with the range-trim affordance).

[0307] Similarly, in some embodiments, the device moves the end trim affordance along the scrubber in accordance with a component of movement of the contact (in a drag gesture) along the scrubber. In some embodiments, once the end trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the scrubber will continue to move the end trim affordance, and will also change the current representative image in the media item to the image corresponding to the current position of the end trim affordance.

[0308] In some embodiments, the end trim affordance cannot be moved beyond the representation in the second region corresponding to the current representative image in the media item. In some embodiments, once the end trim affordance is at, above, or beside the representation of the current representative image, continued movement of the contact along the scrubber will not continue to move the end trim affordance, and will not change the current representative image in the media item.

[0309] In some embodiments, when the second input directed to the representative image selection affordance is detected, the device displays (826) an indicator for the current representative image of the media item in the second region (e.g., dot 542 in FIG. 6B) adjacent to the reduced scale representation of the current representative image in the media item. Displaying an indicator for the current representative image of the media item provides improved visual feedback to the user, and helps the user return to the current representative image if the user decides not to change the current representative image. This enhances the operability of the device and makes the user-device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the result intended by the user and reducing user errors when operating / interacting with the device). Figure 5CD In some embodiments, when the second input directed to the representative image selection affordance is detected, the device forgoes displaying (828) an indicator for the current representative image of the media item in the second region when the representative image selection affordance is at a position corresponding to the representation of the representative image of the media item (see, e.g., FIG. 6B). In some embodiments, when the edit user interface is initially displayed, the representative image selection affordance is displayed at a position corresponding to the representation of the representative image of the media item, and the dot is not displayed, as shown in FIG. 6B. In some embodiments, when the representative image selection affordance is moved away from the position corresponding to the representation of the representative image of the media item (e.g., in response to a drag gesture on the representative image selection affordance), the dot is displayed at or near the position corresponding to the representation of the representative image of the media item, as shown in FIG. 6B.

[0310] Figures 5CK to 5CL In some embodiments, when the second input directed to the representative image selection affordance is detected, the device forgoes displaying (828) an indicator for the current representative image of the media item in the second region when the representative image selection affordance is at a position corresponding to the representation of the representative image of the media item (see, e.g., FIG. 6B). In some embodiments, when the edit user interface is initially displayed, the representative image selection affordance is displayed at a position corresponding to the representation of the representative image of the media item, and the dot is not displayed, as shown in FIG. 6B. In some embodiments, when the representative image selection affordance is moved away from the position corresponding to the representation of the representative image of the media item (e.g., in response to a drag gesture on the representative image selection affordance), the dot is displayed at or near the position corresponding to the representation of the representative image of the media item, as shown in FIG. 6B. Figure 5BU Figures 5BY to 5CA ​​As shown. In some implementations, an indicator is displayed if the representative image selection indicator moves away from its initial position, and the indicator is stopped displaying if the representative image selection indicator is moved back to its initial position. Displaying an indicator of the current representative image of a media item in this manner provides the user with improved visual feedback and helps the user return to the current representative image if they decide not to change it. This enhances the operability of the device and makes the user interface more efficient (e.g., by helping the user determine which inputs will produce the expected results and reducing erroneous user feedback when operating / interacting with the device).

[0311] In some implementations, in response to detecting an input pointing to a representative image confirmation indication, the device displays (830) an indicator for the original representative image of the image sequence in a second area (e.g., Figure 5 BY Point 542 is displayed near a scaled-down representation of the original representative image of the media item. In some embodiments, after the representative image of the media item has been changed, the indicator is displayed in a second area at or near the scaled-down representation of the original representative image of the media item. In some embodiments, the indicator for the original representative image is displayed simultaneously with the indicator for the current representative image (e.g., if the current representative image differs from the original representative image, the representative image selection indicator is displayed at a location away from either the current or original representative image, such as...). Figure 5CF (As shown in points 542 and 543). Indicators displaying the original representative image of the media item provide the user with improved visual feedback and help the user return to the original representative image. This enhances the operability of the device and makes the user device interface more effective (e.g., by providing assistance to the user in determining which inputs will produce the expected results and reducing erroneous user feedback when operating / interacting with the device).

[0312] In some embodiments, the electronic device has one or more tactile output generators, and upon detecting a second input pointing to a representative image selection indication, when the representative image selection indication moves past a position corresponding to the representation of a representative image of a media item, the device generates (832) a tactile output (e.g., see [reference]). Figure 5CLtactile response 527 in FIG. 5B). In some embodiments, the device generates tactile output when the representative image selection affordance moves past the reduced scale representation of the original representative image of the media item. In some embodiments, the tactile output is generated when the representative image selection affordance moves past the position of the original representative image at a speed below a threshold speed, and is not generated when the representative image selection affordance moves past the position of the original representative image at a speed above the threshold speed (e.g., see Figure 5CL and Figure 5CM ). Providing tactile feedback in this way enhances the operability of the device and makes the user / device interface more efficient (e.g., by alerting the user that the representative image selection affordance has returned to a position corresponding to the representation of the original representative image, thereby helping the user to achieve intended results and reducing user errors when operating / interacting with the device).

[0313] In some embodiments, the electronic device has one or more tactile output generators, and after updating the representative image in the sequence of images, while in the editing user interface and detecting input directed to the representative image selection affordance, the device generates (834) tactile output when the representative image selection affordance moves past a position corresponding to the representation of the updated representative image of the media item (e.g., see Figure 5CI ). In some embodiments, the device generates tactile output when the representative image selection affordance moves past the reduced scale representation of the current representative image of the media item. In some embodiments, the tactile output is generated when the representative image selection affordance moves past the position of the current representative image at a speed below a threshold speed, and is not generated when the representative image selection affordance moves past the position of the current representative image at a speed above the threshold speed. Providing tactile feedback in this way enhances the operability of the device and makes the user / device interface more efficient (e.g., by alerting the user that the representative image selection affordance has returned to a position corresponding to the representation of the updated representative image, thereby helping the user to achieve intended results and reducing user errors when operating / interacting with the device).

[0314] In some embodiments, the electronic device has one or more tactile output generators, and while in the editing user interface and detecting input directed to the respective range trim affordance, the device generates (836) tactile output when the respective range trim affordance is moved to a position corresponding to the representation of the representative image of the media item (e.g., Figure 5CL). In some embodiments, the device generates tactile output when the beginning-trim affordance is moved beyond the reduced scale representation of the current representative image of the media item. Similarly, in some embodiments, the device generates tactile output when the end-trim affordance is moved beyond the reduced scale representation of the current representative image of the media item. In some embodiments, the device generates tactile output when the device receives input corresponding to a request to move the respective range-trim affordance to or beyond the position of the representation of the representative image of the media item. Providing tactile feedback in this way enhances the operability of the device and makes the user-device interface more efficient (e.g., by reminding the user that the range-trim affordance has been moved to a position corresponding to the representation of the representative image of the media item, which helps the user achieve intended results and reduces user mistakes when operating / interacting with the device).

[0315] In some embodiments, the device detects (838) input corresponding to a request to move the representative-image-selection affordance beyond the position of the range-trim affordance; and in response to detecting the input corresponding to the request to move the representative-image-selection affordance, moves the range-trim affordance (e.g., to the same position as the representative-image-selection affordance or to a position adjacent to the representative-image-selection affordance) (e.g., see Figure 5CJ to Figure 5CK ) Moving the representative-image-selection affordance in this way allows for simultaneous alteration of the range of the media item and the representative image of the media item with a single input, which reduces the number of inputs needed to perform these operations and makes the editing user interface more efficient.

[0316] In some embodiments, the device detects (840) input corresponding to a request to move the representative-image-selection affordance beyond the position of the range-trim affordance; in response to detecting the input corresponding to the request to move the representative-image-selection affordance: in accordance with a determination that the range-trim affordance is not at the end of the sequence of images, moves the range-trim affordance (e.g., to the same position as the representative-image-selection affordance); and in accordance with a determination that the range-trim affordance is at the end of the sequence of images, forgoes moving the range-trim affordance (e.g., see Figure 5CJ to Figure 5CK ) Moving the representative-image-selection affordance in this way allows for simultaneous alteration of the range of the media item and the representative image of the media item with a single input, which reduces the number of inputs needed to perform these operations and makes the editing user interface more efficient.

[0317] In some embodiments, the device detects (842) input corresponding to a request to move the representative image selection affordance relative to the range trim affordance; in response to detecting input corresponding to a request to move the representative image selection affordance relative to the range trim affordance: in accordance with a determination that the input corresponding to a request to move the representative image selection affordance relative to the range trim affordance is a request to move the range trim affordance beyond the location of the representative image selection affordance (e.g., a drag input that starts on the range trim affordance and moves over the representative image selection affordance), the device moves the range trim affordance adjacent to the representative image selection affordance and generates haptic output (e.g., Figure 5CI ); and in accordance with a determination that the input corresponding to a request to move the representative image selection affordance relative to the range trim affordance is a request to move the representative image selection affordance beyond the location of the range trim affordance (e.g., a drag input that starts on the representative image selection affordance and moves over the range trim affordance), the device moves the representative image selection affordance adjacent to the range trim affordance without generating haptic output (e.g., Figure 5CJ to Figure 5CK ). Providing haptic feedback in this way enhances the operability of the device and makes it easier for users to interact with the device (e.g., by providing haptic feedback in certain situations where the haptic feedback would help the user, but not providing haptic feedback in other situations where the haptic feedback might provide too much feedback or might confuse the user, thereby helping the user to achieve their intended result and reducing user errors when operating / interacting with the device).

[0318] In some embodiments, the device detects (844) input corresponding to a request to edit the sequence of images (e.g., to change the starting point, ending point, or representative image of the sequence of images in the media item); in response to detecting input corresponding to a request to edit the sequence of images: in accordance with a determination that the input corresponding to a request to edit the sequence of images is a request to move the representative image selection affordance adjacent to or beyond the representation of the current representative image (e.g., a drag input that starts on the representative image selection affordance and moves adjacent to or past the reduced scale representation of the current representative image of the media item in the slider), the device moves the representative image selection affordance (e.g., adjacent to the range trim affordance) and conditionally generates haptic output based on whether the speed of the input is above a respective speed threshold (e.g., if the speed of the drag input is above the respective speed threshold when moving past or adjacent to the reduced scale representation of the current representative image, the device generates corresponding haptic output; and if the speed of the drag input is below the respective speed threshold when moving past or adjacent to the reduced scale representation of the current representative image, the device refrains from generating corresponding haptic output, and vice versa) (e.g., Figures 5CM to 5CN) and in accordance with a determination that the input corresponding to the request to edit the sequence of images is a request to move the range-trim affordance to a position that is beyond the representation of the current representative image (e.g., a drag input that starts on the range-trim affordance and moves proximate to or past the reduced scale representation of the current representative image of the media item in the slider (such as the representative image selection affordance)), moving the range-trim affordance (e.g., proximate to the representative image selection affordance) and generating haptic output without regard to the speed of movement of the input (e.g., generating haptic output regardless of whether the drag input is above or below a movement speed threshold) (e.g., see Figure 5CH ). In this way, haptic feedback is provided to enhance the operability of the device and to make the user-device interface more efficient (e.g., by providing haptic feedback in certain situations in which the haptic feedback would help the user, but not providing haptic feedback in other situations in which the haptic feedback might provide too much feedback or might confuse the user, thereby helping the user to achieve an intended result in operating / interacting with the device and reducing user errors).

[0319] It should be appreciated that a particular order of the operations described in Figures 8A to 8F with respect to the methods described herein (e.g., methods 600, 700, 900, and 1000). For example, the contacts, gestures, user interface objects, range-trim affordances, display modes, media items, representative image selection affordances, haptic outputs, and animations described above with reference to method 800 optionally have one or more of the characteristics of the contacts, gestures, user interface objects, range-trim affordances, display modes, media items, representative image selection affordances, haptic outputs, and animations described herein with reference to other methods described herein (e.g., methods 600, 700, 900, and 1000). In some embodiments, the operations of method 800 are performed by one or more portable electronic devices (e.g., device 300 in Figures 8A to 8F

[0320] Figures 9A to 9I is a flow diagram of a method for navigating through a collection of media items, where the media items have multiple user-selectable display modes, in accordance with some embodiments. The method 900 is performed by an electronic device (e.g., device 300 in Figure 3 or Figure 1A ​The method 900 provides an intuitive way for a user to navigate through a collection of media items, where the media items have multiple user-selectable display modes, as described below. The method creates a more efficient human-machine interface for such navigation. For battery-operated electronic devices, enabling the user to more efficiently navigate through such a collection of media items conserves power and increases the time between battery charges.

[0321] The method 900 provides an intuitive way for a user to navigate through a collection of media items, where the media items have multiple user-selectable display modes, as described below. The method creates a more efficient human-machine interface for such navigation. For battery-operated electronic devices, enabling the user to more efficiently navigate through such a collection of media items conserves power and increases the time between battery charges.

[0322] The device displays (902), in a first user interface on the display, a representation of a first media item that corresponds to a sequence of images in a first display mode (e.g., a lively photo display mode) of a plurality of user-selectable display modes (e.g., a sequence of images captured in response to a single activation of a shutter button (such as a tap on a virtual shutter button, a click of a physical shutter button, or a long-press input on a virtual or physical shutter button)), where: the first media item is part of a collection of media items (e.g., in a media library, folder, photo album, or camera roll); the collection of media items is arranged in an order that is based on a predetermined criterion (e.g., date / time of creation, date / time of last edit, name of the media item in the collection, size, etc.); one or more prior media items precede the first media item in the order; and one or more subsequent media items follow the first media item in the order (e.g., see Figure 5CN ).

[0323] In some embodiments, the plurality of user-selectable display modes for a respective media item includes a living photo display mode. If the respective media item is in the living photo display mode, upon detecting a touch input that causes the respective media item to be displayed on the display, the electronic device displays a representative image of a sequence of images in the respective media item. In response to detecting an end of the touch input that caused the respective media item to be displayed on the display (e.g., detecting liftoff of the contact in the touch input), the device starts playing back images in the sequence of images in the respective media item from the representative image, then cross-fades to a starting image in the sequence of images and plays the sequence of images from the starting image, then re-displays the representative image. In some embodiments, when a subsequent media item is swiped onto the display (after detecting the end of the touch input), a second sequence of images continues playing back from the respective image. Playing back subsequent (or previous) media items in this way in the living photo display mode causes the subsequent (or previous) media items to be “living” during navigation, which indicates to the user that the subsequent (or previous) media items are in the living photo display mode. This helps the user more efficiently navigate and view media items in the collection in the display mode of their choice.

[0324] In some embodiments, the plurality of user-selectable display modes for a respective media item includes (904) a back-and-forth display mode configured to display a sequence of images that repeatedly plays back and forth in the respective media item (e.g., see FIGS. 6A-6D). Figure 5 CT When the respective media item is in the back-and-forth display mode, upon detecting a touch input that causes the respective media item to be displayed on the display (e.g., a swipe / drag gesture that causes the respective media item to scroll onto the display), the sequence of images in the respective media starts playing back and forth; and after the touch input that caused the respective media item to be displayed on the display ends (e.g., after detecting liftoff of the contact that was providing the swipe / drag gesture), the sequence of images in the respective media repeatedly plays back and forth. In some embodiments, the touch input scrolls the respective media item onto the display, and when the touch input has scrolled a quarter, a third, a half, or some other predefined amount onto the display, the respective media item starts playing back and forth. In some embodiments, when a subsequent media item is swiped onto the display (before or after detecting the end of the touch input), a second sequence of images continues playing back and forth. Playing back subsequent (or previous) media items in this way in the back-and-forth display mode causes the subsequent (or previous) media items to start moving back and forth during navigation, which indicates to the user that the subsequent (or previous) media items are in the back-and-forth display mode. This helps the user more efficiently navigate and view media items in the collection in the display mode of their choice.

[0325] In some implementations, the multiple user-selectable display modes for a given media item include (906) a merged image display mode, which is configured to display a single merged image comprising content that is simultaneously displayed from a sequence of images in the given media item (e.g., see...). Figure 5CV When a media item is in merged image display mode, upon detecting a touch input that causes the media item to be displayed on the display (e.g., a swipe / drag gesture that causes the media item to scroll onto the display), the electronic device displays a single merged image. In response to detecting the end of the touch input that caused the media item to be displayed on the display (e.g., detecting the lifting of the touch in a swipe / drag gesture), the electronic device plays back multiple images from the image sequence of the media item (e.g., cross-fade from the single merged image to the corresponding image in the image sequence, and then plays back the image sequence starting from the corresponding image, where the corresponding image is one of the following: the start image in the image sequence of the media item, the representative image in the image sequence of the media item, or the end image in the image sequence of the media item), and then re-displays the single merged image. In some embodiments, if a subsequent media item slides onto the display (after the end of the detected touch input), a second image sequence continues to play back. In some implementations, playing back images in a sequence of images includes starting playback at the beginning of the sequence; then playing back the images in the sequence in whole or in part (e.g., quarter, half, or three-quarters); and then re-displaying the merged images. Playing back subsequent (or previous) media items in this manner during navigation in merged display mode indicates to the user that the subsequent (or previous) media item is in merged display mode. This helps users more efficiently navigate and view media items in the collection using their selected display mode.

[0326] In some implementations, the collection of media items includes media items containing only a single still image. For such media items, only a single still image is displayed in response to the detection of touch input that causes the media item to be displayed on the display (e.g., a swipe gesture on a previous media item or a tap gesture on a scaled-down representation of a still image in a collection navigation control).

[0327] In some implementations, the plurality of user-selectable display modes for a given media item includes a movie display mode. If a given media item is in movie display mode, upon detecting a touch input that causes the given media item to be displayed on the display, the electronic device displays a representative image of the image sequence in the given media item. In response to detecting the end of the touch input that caused the given media item to be displayed on the display (e.g., detecting the lifting of the touch in the touch input), the media item is not played back. When in movie display mode, a tap gesture on the media item causes the media to be played back in movie mode, wherein the playback begins with the earliest image in the image sequence of the media item. In some implementations, a playback enable indicator is displayed on or near the media item to indicate that playback of the media item will be triggered upon a tap input.

[0328] In some implementations, when navigating to one or more media items using an input pointing to a collection navigation control, the one or more media items are not played back during navigation.

[0329] In the case of displaying a representation of the first media item (e.g., displaying a representative image from an image sequence in the first media item), the device detects (908) touch input including movement along a corresponding direction on the touch-sensitive surface (e.g., a swipe gesture made by contact) (e.g., see...). Figure 5CO ).

[0330] In response to the detection of touch input: based on the determination that the movement is along a first direction (e.g., to the left), and the subsequent media item corresponding to the second image sequence is designated to be displayed in a first display mode (e.g., vivid photo display mode), the device displays (910) the subsequent media item in the first display mode, including displaying content from multiple images in the second image sequence in a manner determined based on the first display mode (e.g., see...). Figure 5CP ); and based on the determination that the movement is along a first direction (e.g., to the left), and the subsequent media item is designated to be displayed in a second display mode (e.g., a loop display mode) different from the first display mode, displaying the subsequent media item in the second display mode includes displaying content from multiple images in the second image sequence in a manner determined based on the second display mode (e.g., see...). Figure 5CS ).

[0331] In some implementations, the first display mode is (912) a vivid photograph display mode; and displaying subsequent media items in the first display mode includes: displaying at least a portion of a corresponding image from the second image sequence upon detection of touch input (e.g., see...). Figure 5CP) In some embodiments, the respective image is a first image in the second sequence of images. In some embodiments, the respective image is a last image in the second sequence of images. In some embodiments, the respective image is an image that precedes the representative image in the second sequence of images. In some embodiments, the respective image is an image that follows the representative image in the second sequence of images. In some embodiments, the respective image is the representative image. Displaying the subsequent media item in the first display mode further includes: detecting an end of the touch input; and (e.g., detecting a lift-off of the contact that was providing the touch input); and in response to detecting the end of the touch input, playing back images in the second sequence of images starting from the respective image. In some embodiments, playing back images in the second sequence of images includes: starting playback of images in the second sequence of images at a starting image in the second sequence of images, and playing through the second sequence of images from the starting image up to the representative image. In some embodiments, playing back images in the second sequence of images includes: starting playback of images in the second sequence of images at the respective image, then cross-fading to a starting image in the second sequence of images, and playing through the second sequence of images from the starting image, then displaying the representative image.

[0332] In some embodiments, the second display mode is (914) a loop display mode; displaying the subsequent media item in the second display mode includes: displaying the looping second sequence of images upon detecting at least a portion of the touch input (e.g., the touch input scrolls a portion or all of the subsequent media item onto the display, and the subsequent media item starts looping as it scrolls a quarter, a third, a half, or some other predefined amount onto the display); and continuing to display the looping second sequence of images after detecting an end of the touch input (e.g., detecting a lift-off of the contact that was providing the touch input) (e.g., see Figure 5CS

[0333] In some embodiments, the plurality of user-selectable display modes for the respective media item includes (916) a loop display mode configured to display a sequence of images in the respective media item in a looping manner (repeatedly) (e.g., display the images in the sequence in order from the beginning to the end, then again starting from the beginning of the sequence); if the respective media item is in the loop display mode, the sequence of images in the respective media starts looping upon detecting a touch input that causes the respective media item to be displayed on the display (e.g., a swipe / drag gesture that causes the respective media item to scroll onto the display); and the sequence of images in the respective media item continues looping after the touch input that caused the respective media item to be displayed on the display ends (e.g., after detecting a lift-off of the contact that was providing the swipe / drag gesture) (e.g., see Figure 5CS ​) In some embodiments, if the respective media item is in a looped display mode, the touch input scrolls the respective media item onto the display and the loop begins when the respective media item is scrolled a quarter, a third, a half, or some other predefined amount onto the display. In some embodiments, when the subsequent media item slides onto the display (before or after detecting the end of the touch input), the second image sequence continues looping, playing back the subsequent (or previous) media item in the looped display mode in such a way that the subsequent (or previous) media item begins looping during the navigation, which indicates to the user that the subsequent (or previous) media item is in the looped display mode. This helps the user more efficiently navigate and view the media items in the collection in the display mode of their choice.

[0334] In some embodiments, in response to detecting the touch input: in accordance with a determination that the movement is a movement in a second direction (e.g., to the right) opposite the first direction, and the previous media item corresponding to the third image sequence is designated to be displayed in a first display mode (e.g., a lively photo display mode), the device displays (916) the previous media item in the first display mode, including displaying content from the plurality of images in the third image sequence in a manner determined based on the first display mode; and in accordance with a determination that the movement is a movement in the second direction (e.g., to the right), and the previous media item is designated to be displayed in a second display mode (e.g., a looped display mode) different from the first display mode, displaying the previous media item in the second display mode includes displaying content from the plurality of images in the third image sequence in a manner determined based on the second display mode (e.g., see Figure 5CU ).

[0335] In some embodiments, in response to detecting the touch input: in accordance with a determination that the movement is a movement in a first direction (e.g., to the left), and the subsequent media item is designated to be displayed in a third display mode (e.g., a back-and-forth display mode or a merged display mode) different from the first and second display modes, the device displays (918) the subsequent media item in the third display mode, including displaying content from the plurality of images in the second image sequence in a manner determined based on the third display mode; and in accordance with a determination that the movement is a movement in a second direction (e.g., to the right), and the previous media item is designated to be displayed in the third display mode (e.g., a back-and-forth display mode or a merged display mode), displaying the previous media item in the third display mode includes displaying content from the plurality of images in the third image sequence in a manner determined based on the third display mode (e.g., see Figure 5CU and Figure 5CW ).

[0336] In some implementations, in response to the detection of touch input: based on determining that the movement is along a first direction (e.g., to the left), and that a subsequent media item is designated to be displayed in a fourth display mode (e.g., a merged display mode or a back-and-forth display mode) different from the first, second, and third display modes, the device displays (520) the subsequent media item in the fourth display mode, including displaying content from multiple images in a second image sequence in a manner determined based on the fourth display mode; and based on determining that the movement is along a second direction (e.g., to the right), and that a previous media item is designated to be displayed in a fourth display mode (e.g., a merged display mode or a back-and-forth display mode), displaying the previous media item in the fourth display mode includes displaying content from multiple images in a third image sequence in a manner determined based on the fourth display mode (e.g., see [link to fourth display mode]). Figure 5CV ).

[0337] In some embodiments, in response to the detection of touch input, based on the determination that the movement is a movement in a third direction (e.g., upward) different from the first direction, the device displays (922) a user interface (e.g., a display mode selection user interface), which includes: additional information about the first media item, and one or more display mode selection indications configured to select different display modes for the first media item (e.g., multiple active zoom indications for the first media item), wherein a given display mode selection indication shows a corresponding user-selectable display mode for the first media item. In some embodiments, the user interface is a display mode selection user interface configured to allow the user to select one of multiple user-selectable display modes (e.g., vivid photo display mode, loop display mode, long exposure display mode, back-and-forth display mode, movie display mode, strobe effect display mode, or another display mode for displaying the image sequence selected by the user) for a media item corresponding to the image sequence (e.g., see [link]). Figures 5BG to 5BH In some implementations, when a first media item is in a first display mode, selecting a display mode selection power-on representation corresponding to a second display mode switches the display mode of the first media item from the first display mode to the second display mode. Reference method 700 describes an example of a display mode selection power-on representation in more detail. Displaying the display mode selection power-on representation in this manner provides an intuitive way to navigate to a media item having multiple display modes and select a display mode for that media item. Displaying additional information for the media item in the display mode selection user interface provides context for the media item and provides a quick navigation path to additional information related to the media item. This enhances the operability of the device and makes the user device interface more efficient (e.g., by providing quick access to additional information related to the media item).

[0338] In some implementations, in response to the detection of touch input, based on the determination that the movement is along a fourth direction (e.g., downward) different from the first direction, the device displays (924) a user interface that simultaneously displays representations of multiple media items in the set (e.g., displaying static thumbnails of representative images for the multiple media items in the set), the representations of the multiple media items including a first media item, one or more previous media items, and / or one or more subsequent media items (e.g., the set of media items in...). Figure 5B (As shown in the figure). In response to a touch input in a fourth direction (e.g., downward), the user switches to a different view of a collection of media items (e.g., a series of thumbnails of media items), where the thumbnails are static images (e.g., representative images and / or merged images) from the media items, facilitating faster navigation to other media items in the collection.

[0339] In some implementations, a representation of the first media item is displayed in the first user interface at a first magnification, and the device simultaneously displays (926) the representation of the first media item and a collection navigation control (e.g., Figure 5DA The media item collection area 510 in the control is configured to navigate through a collection of media items (e.g., toggling which representation of a media item is displayed in the preview area based on tap or swipe input on the control), wherein: the collection navigation control includes smaller representations of the media items in the collection (e.g., sliders, bars, or areas representing multiple media items at a reduced scale, less than a first magnification); the collection navigation control includes a first smaller representation of a first media item (e.g., a representation of the first media item displayed at a second magnification) (e.g., a single representative image from the first media item). The device detects an input corresponding to a first media item (e.g., an input such as a tap, long press, or deep press on a representation of the first media item displayed at a first magnification, or an input such as a tap, long press, or deep press on a smaller representation of the first media item displayed in the collection navigation control), and in response to detecting an input corresponding to the first media item (a tap on a first smaller representation of the first media item displayed in the collection navigation control), displays an extended representation of the first media item in the collection navigation control (e.g., displaying a representative image and an additional image from an image sequence in the first media item in the collection navigation control). Figure 5DBThe extended representation of the first media item (551) is shown in some embodiments. Input on the representation of the first media item displayed at a first magnification (e.g., a tap or deep press) also replays the first media item in the currently selected display mode (e.g., a vivid photo display mode) for the first media item. Displaying the extended representation of the first media item in the collection navigation controls in this manner provides the user with visual feedback that the first media item can be replayed via the collection navigation controls. This visual feedback enhances the operability of the device and makes the user device interface more efficient.

[0340] In some implementations, in response to detecting input corresponding to a first media item, the device displays (928) a scroll indicator (e.g., playhead, scroll bar, playback position indicator, or other scroll indicator, such as) in an extended representation of the first media item within the collection navigation controls. Figure 5DB (Scroller 544 in the image sequence). In some embodiments, a scroll indicator is displayed at a position corresponding to a representative image in the image sequence. The device detects input pointing to a portion of the collection navigation control (e.g., detecting a drag gesture made by a touch starting on the scroll indicator, the drag gesture having a movement component along the extended representation of the first media item, or detecting a drag gesture starting on the collection navigation control); in the case that input pointing to that portion of the collection navigation control is detected (e.g., input pointing to the scroll indicator or input pointing to the collection navigation control): according to the input pointing to that portion of the collection navigation control, the device changes the relative position of the extended representation of the first media item in the collection navigation control with respect to the scroll indicator (e.g., according to the movement component of the touch at the input of the extended representation of the first media item, move the playback scroll indicator in the extended representation of the first media item, or move the extended representation of the first media item while holding the playback scroll indicator at a fixed position on the display); and the device displays an image in the image sequence for the first media item at a first magnification, the image corresponding to the current position of the scroll indicator in the extended representation of the first media item in the collection navigation control (e.g., see...). Figures 5DB to 5DE In some implementations, when the relative position of the extended representation of the first media item in the collection navigation control changes with respect to the scroll indicator, the image of the image sequence changes to correspond to the position of the scroll indicator within the extended representation of the first media item in the collection navigation control. In some implementations, when the extended representation of the image sequence moves beyond the position occupied by the scroll indicator, the scroll indicator is dragged instead, and when input ends, the extended representation of the image sequence bounces back. Interacting with the extended representation of the first media item in the collection navigation control in this way provides the user with precise control over viewing the images in the first media item. This precise control enhances the operability of the device and makes the user device interface more efficient.

[0341] In some embodiments, in accordance with a determination that the input is directed to the portion of the collection navigation control (e.g., the scroll indicator or the expanded representation of the first media item): in accordance with a determination that the scroll indicator is within a predetermined distance (greater than zero) of a position corresponding to the representation of the representative image of the image sequence of the first media item, the device aligns (930) to the position corresponding to the representation of the representative image of the image sequence of the first media item (e.g., the scroll indicator or the collection navigation control) (e.g., see Figure 5DE ). This alignment facilitates the user’s return to the representative image during scrolling of the media items. This enhances the operability of the device and makes the user-device interface more efficient (e.g., by providing feedback that helps the user determine which inputs will produce the intended results, and reducing user mistakes when operating / interacting with the device).

[0342] In some embodiments, the electronic device has one or more haptic output generators, and in accordance with a determination that the input is directed to the portion of the collection navigation control (e.g., the scroll indicator or the expanded representation of the first media item): in accordance with a determination that the scroll indicator is within a predetermined distance (greater than zero) of a position corresponding to the representation of the representative image of the image sequence of the first media item: aligns to the position corresponding to the representation of the representative image of the image sequence of the first media item (e.g., the scroll indicator or the collection navigation control), and generates a haptic output when the scroll indicator is aligned to the position (e.g., see Figure 5DE ). Providing haptic feedback during alignment enhances the operability of the device and makes the user-device interface more efficient (e.g., by reminding the user that the scroll indicator or the collection navigation control has aligned to the position corresponding to the representation of the representative image, thereby helping ...

Claims

1. A method (700) for displaying media items, comprising: In electronic devices with displays and touch-sensitive surfaces: In a first user interface on the display, one or more images from a media item corresponding to an image sequence are displayed (702) in a first display mode, wherein: The first display mode is one of a plurality of user-selectable display modes for the media item corresponding to the image sequence; While displaying the one or more images from the media item in the first display mode, detect (708) the first input; In response to detecting the first input, a display mode selection user interface (712) is displayed on the display, wherein: The display mode selection user interface simultaneously displays multiple representations of the media item, including: A first representation of the media item, which is a preview of the media item, is displayed in the first display mode, wherein the first display mode is configured to display the image sequence that is played back and forth in the media item; A second representation of the media item, which displays a preview of the media item in a second display mode different from the first display mode, wherein the second display mode is configured to repeatedly display the image sequence in the media item in a cyclic manner; When the display mode selection user interface is displayed on the display, input on the second representation of the plurality of representations of the media item is detected (736); and, In response to the input detected on the second representation of the plurality of representations of the media item: The second display mode is one of the plurality of user-selectable display modes corresponding to the second representation among the plurality of representations of the media item selection (738); Stop displaying the display mode selection user interface; and One or more images from the media item are displayed in the second display mode, which corresponds to the second representation among the plurality of representations of the media item.

2. The method of claim 1, further comprising displaying an indicator of the first display mode in the first user interface on the display.

3. The method of claim 1, wherein the plurality of user-selectable display modes for the media item includes a vivid photo display mode, the vivid photo display mode being configured to play back the image sequence in the media item in response to detecting input on a representative image in the image sequence.

4. The method of claim 3, wherein the plurality of user-selectable display modes for the media item includes a movie display mode configured to play back the image sequence in the media item in response to a tap input detected on a representation of the image sequence, wherein the playback begins with the earliest image in the image sequence.

5. The method of claim 3, wherein the corresponding representation of the media item in the display mode selection user interface displays a preview of the media item in a corresponding display mode, wherein the corresponding representation is displayed in the display mode selection user interface at a second magnification less than a first magnification of the media item in the corresponding display mode.

6. The method according to claim 3, wherein, In the display mode selection user interface, the plurality of representations of the media items are scrollable.

7. The method according to any one of claims 1 to 6, wherein: The one or more images from the media item are displayed at a first magnification in the first user interface; as well as The first representation of the media item is displayed in the display mode selection user interface at a second magnification less than the first magnification.

8. The method according to any one of claims 1 to 6, wherein the plurality of representations of the media item displayed in response to the detection of the first input are selected based on an analysis of predetermined needs for the images in the image sequence and a plurality of different candidate display modes.

9. The method according to any one of claims 1 to 6, wherein the first input is a swipe in a first direction.

10. The method according to any one of claims 1 to 6, wherein: The media item corresponding to the image sequence is the first media item in the set of media items; The collection of media items is arranged in an order based on a predetermined standard; One or more previous media items precede the first media item in the order stated therein; One or more subsequent media items follow the first media item in the order described. The electronic device, in response to detecting a swipe in the second direction, replaces the display of the first media item with the display of a subsequent media item in the set of media items; as well as The electronic device, in response to detecting a third-party upward swipe different from the second direction, replaces the display of the first media item with the display of a previous media item from the set of media items.

11. The method according to any one of claims 1 to 6, wherein, In response to detecting the first input, the display mode selection user interface simultaneously displays: A smaller-than-all portion of the one or more images from the media item in the first display mode at the first magnification, and The plurality of representations of the image sequence at a second magnification less than the first magnification.

12. The method according to any one of claims 1 to 6, wherein the display mode selection user interface displays geographic location information for the media item.

13. The method according to any one of claims 1 to 6, comprising: In response to the input detected on the second representation among the plurality of representations of the media item: An indicator displays the second display mode, which corresponds to the second representation among the plurality of representations of the media item.

14. The method according to any one of claims 1 to 6, comprising: When the one or more images from the media item are displayed in the first display mode in the first user interface on the display, a suggestion to switch from the first display mode to the second display mode is displayed based on the determination that the second display mode for the media item meets the recommendation criteria.

15. A computer-readable storage medium storing one or more programs, said one or more programs comprising instructions that, when executed by an electronic device having a display and a touch-sensitive surface, cause the device to perform the method according to any one of claims 1 to 14.

16. An electronic device comprising: monitor; Touch-sensitive surface; Means for displaying (702) one or more images from a media item corresponding to an image sequence in a first display mode in a first user interface on the display, wherein: The first display mode is one of a plurality of user-selectable display modes for the media item corresponding to the image sequence; A means for detecting (708) a first input when one or more images from the media item are displayed in the first display mode; In response to detecting the first input, means for displaying (712) a display mode selection user interface on the display, wherein: The display mode selection user interface simultaneously displays multiple representations of the media item, including: A first representation of the media item, which is a preview of the media item, is displayed in the first display mode, wherein the first display mode is configured to display the image sequence that is played back and forth in the media item; A second representation of the media item, which displays a preview of the media item in a second display mode different from the first display mode, wherein the second display mode is configured to repeatedly display the image sequence in the media item in a cyclic manner; Means for detecting (736) input on the second representation of the plurality of representations of the media item when the display mode selection user interface is displayed on the display; and, A means for performing the following operation in response to detecting the input on the second representation of the plurality of representations of the media item: The second display mode is one of the plurality of user-selectable display modes corresponding to the second representation among the plurality of representations of the media item selection (738); Stop displaying the display mode selection user interface; and One or more images from the media item are displayed in the second display mode, which corresponds to the second representation among the plurality of representations of the media item.

17. The electronic device of claim 16, further comprising means for displaying an indicator of the first display mode in the first user interface on the display.

18. The electronic device of claim 16, wherein the plurality of user-selectable display modes for the media item includes a vivid photo display mode configured to play back the image sequence in the media item in response to detecting input on a representative image in the image sequence.

19. The electronic device of claim 17, wherein the plurality of user-selectable display modes for the media item includes a movie display mode configured to play back the image sequence in the media item in response to a tap input detected on a representation of the image sequence, wherein the playback begins with the earliest image in the image sequence.

20. The electronic device of claim 17, wherein a corresponding representation of the media item in the display mode selection user interface displays a preview of the media item in a corresponding display mode, wherein the corresponding representation is displayed in the display mode selection user interface at a second magnification less than a first magnification of the media item in the corresponding display mode.

21. The electronic device according to claim 17, wherein, In the display mode selection user interface, the plurality of representations of the media items are scrollable.

22. The electronic device according to any one of claims 16 to 21, wherein: The one or more images from the media item are displayed at a first magnification in the first user interface; as well as The media item is displayed at a second magnification, less than the first magnification, in the display mode selection user interface.

23. The electronic device according to any one of claims 16 to 21, wherein the plurality of representations of the media item displayed in response to the detection of the first input are selected based on an analysis of predetermined needs for the images in the image sequence and a plurality of different candidate display modes.

24. The electronic device according to any one of claims 16 to 21, wherein the first input is a swipe in a first direction.

25. The electronic device according to any one of claims 16 to 21, wherein: The media item corresponding to the image sequence is the first media item in the set of media items; The collection of media items is arranged in an order based on a predetermined standard; One or more previous media items precede the first media item in the order stated therein; One or more subsequent media items follow the first media item in the order described. The electronic device, in response to detecting a swipe in the second direction, replaces the display of the first media item with the display of a subsequent media item in the set of media items; as well as The electronic device, in response to detecting a third-party upward swipe different from the second direction, replaces the display of the first media item with the display of a previous media item from the set of media items.

26. The electronic device according to any one of claims 16 to 21, wherein, In response to detecting the first input, the display mode selection user interface simultaneously displays: A smaller-than-all portion of the one or more images from the media item in the first display mode at the first magnification, and The plurality of representations of the image sequence at a second magnification less than the first magnification.

27. The electronic device according to any one of claims 16 to 21, wherein the display mode selection user interface displays geographic location information for the media item.

28. The electronic device according to any one of claims 16 to 21, comprising: A means for performing the following operation in response to detecting input on the second representation of the plurality of representations of the media item: An indicator displays the second display mode, which corresponds to the second representation among the plurality of representations of the media item.

29. The electronic device according to any one of claims 16 to 21, comprising: A means for displaying a recommendation to switch from the first display mode to the second display mode when one or more images from the media item are displayed in the first display mode in the first user interface on the display, based on determining that the second display mode for the media item meets the recommendation criteria.

Images