Avatar creation user interface

Abstract

To provide a faster, further efficient method to create and edit an avatar.SOLUTION: A method comprises: displaying an avatar editing user interface that includes displaying an avatar that comprises a plurality of avatar feature units including a first avatar feature unit and a second avatar feature unit, and a plurality of color options corresponding to the first avatar feature unit, wherein the first avatar feature unit includes a first set of one or more colors, wherein the second avatar feature unit includes a set of one or more colors based on the first set and different from the first set; detecting a selection of each color option among the plurality of color options; updating the appearance of the avatar according to a determination that each color option corresponds to the second set, wherein the first avatar feature unit is modified to the second set; and modifying the second avatar feature unit to a set of one or more colors based on the second set and different from the second set.SELECTED DRAWING: Figure 8S

Description

[Technical field]

[0001] (CROSS REFERENCE TO RELATED APPLICATIONS) This application is related to U.S. Provisional Patent Application No. 62 / 668,200, "Avatar Creation User Interface," filed May 7, 2018, the contents of which are incorporated herein by reference in their entirety.

[0002] The present disclosure relates generally to computer user interfaces, and more particularly to techniques for creating and editing avatars. [Background technology]

[0003] Avatars are used to represent users of electronic devices. The avatars may represent the user's appearance, or may represent an idealized or entirely fictional representation of the user. The avatars may then be associated with the user such that the appearance of the avatar to other users triggers an association or link with the user. Avatars can be created and edited for such uses, including use in multimedia communications. Summary of the Invention

[0004] However, some techniques for creating and editing avatars using electronic devices are generally cumbersome and inefficient. For example, some existing techniques use complex and time-consuming user interfaces that may involve multiple key presses or strokes. Existing techniques require more time than necessary, wasting user time and device power. The latter problem is particularly acute on battery-operated devices.

[0005] Thus, the present technology provides electronic devices with faster, more efficient methods and interfaces for creating and editing avatars. Such methods and interfaces optionally complement or replace other methods of creating avatars. Such methods and interfaces reduce the cognitive burden on users and provide a more efficient human-machine interface. In the case of battery-operated computing devices, such methods and interfaces conserve power and increase the time between battery charges.

[0006] A method is described, the method being executed on an electronic device having a display and one or more input devices, the method including: displaying an avatar navigation user interface via the display, the avatar navigation user interface including an avatar; detecting a gesture directed toward the avatar navigation user interface via the one or more input devices while the avatar navigation user interface is displayed; and in response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with a determination that the gesture is in a first direction, and displaying a second type of avatar in the avatar navigation user interface, the second type being different from the first type, in accordance with a determination that the gesture is in a second direction opposite the first direction.

[0007] A non-transitory computer-readable storage medium is described. The non-transitory computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more input devices. The one or more programs include instructions for displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar, detecting a gesture directed toward the avatar navigation user interface via the one or more input devices while the avatar navigation user interface is displayed, and in response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with a determination that the gesture is in a first direction, and displaying a second type of avatar different from the first type in the avatar navigation user interface in accordance with a determination that the gesture is in a second direction opposite the first direction.

[0008] A temporary computer-readable storage medium is described. The temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more input devices. The one or more programs include instructions for displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar, detecting a gesture directed toward the avatar navigation user interface via the one or more input devices while the avatar navigation user interface is displayed, and in response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with a determination that the gesture is in a first direction, and displaying a second type of avatar different from the first type in the avatar navigation user interface in accordance with a determination that the gesture is in a second direction opposite the first direction.

[0009] An electronic device is described that includes a display device, one or more input devices, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar, detecting a gesture directed toward the avatar navigation user interface via the one or more input devices while the avatar navigation user interface is displayed, and in response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with a determination that the gesture is in a first direction, and displaying a second type of avatar in the avatar navigation user interface, the second type being different from the first type, in accordance with a determination that the gesture is in a second direction opposite the first direction.

[0010] An electronic device is described that includes a display device, one or more input devices, means for displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar, means for detecting a gesture directed toward the avatar navigation user interface via the one or more input devices while the avatar navigation user interface is displayed, and means for, in response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface according to a determination that the gesture is in a first direction, and displaying a second type of avatar in the avatar navigation user interface, the second type being different from the first type, according to a determination that the gesture is in a second direction opposite the first direction.

[0011] A method is described that is executed on an electronic device having a display, the method including displaying, via the display, an avatar editing user interface that includes simultaneously displaying an avatar having a plurality of avatar features, a first option selection area of ​​the individual avatar feature including a first set of feature options corresponding to a set of candidate values ​​for a first characteristic of the individual avatar feature, and a second option selection area of ​​the individual avatar feature including a second set of feature options corresponding to a set of candidate values ​​for a second characteristic of the individual avatar feature, where the second characteristic of the individual avatar feature is different from the first characteristic of the individual avatar feature, and in response to detecting a selection of one of the feature options in the first set of feature options, changing an appearance of at least one of the second set of feature options from a first appearance to a second appearance.

[0012] A non-transitory computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, an avatar editing user interface that includes simultaneously displaying an avatar having a plurality of avatar features, a first option selection area of ​​the individual avatar feature including a first set of feature options corresponding to a set of candidate values ​​for a first characteristic of the individual avatar feature, and a second option selection area of ​​the individual avatar feature including a second set of feature options corresponding to a set of candidate values ​​for a second characteristic of the individual avatar feature, where the second characteristic of the individual avatar feature is different from the first characteristic of the individual avatar feature, and changing an appearance of at least one of the second set of feature options from a first appearance to a second appearance in response to detecting a selection of one of the feature options in the first set of feature options.

[0013] A temporary computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, an avatar editing user interface that includes simultaneously displaying an avatar having a plurality of avatar features, a first option selection area of ​​the individual avatar feature including a first set of feature options corresponding to a set of candidate values ​​for a first characteristic of the individual avatar feature, and a second option selection area of ​​the individual avatar feature including a second set of feature options corresponding to a set of candidate values ​​for a second characteristic of the individual avatar feature, the second characteristic of the individual avatar feature being different from the first characteristic of the individual avatar feature, and changing an appearance of at least one of the second set of feature options from a first appearance to a second appearance in response to detecting a selection of one of the feature options in the first set of feature options.

[0014] An electronic device is described that includes a display device, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying, via the display device, an avatar editing user interface that includes simultaneously displaying an avatar having a plurality of avatar features, a first option selection area for the individual avatar feature including a first set of feature options corresponding to a set of candidate values ​​for a first characteristic of the individual avatar feature, and a second option selection area for the individual avatar feature including a second set of feature options corresponding to a set of candidate values ​​for a second characteristic of the individual avatar feature, the second characteristic of the individual avatar feature being different from the first characteristic of the individual avatar feature, and changing an appearance of at least one of the second set of feature options from a first appearance to a second appearance in response to detecting a selection of one of the feature options in the first set of feature options.

[0015] An electronic device is described that includes a display device, means for displaying an avatar editing user interface including simultaneously displaying, via the display device, an avatar having a plurality of avatar features, a first option selection area for the individual avatar feature including a first set of feature options corresponding to a set of candidate values ​​for a first characteristic of the individual avatar feature, and a second option selection area for the individual avatar feature including a second set of feature options corresponding to a set of candidate values ​​for a second characteristic of the individual avatar feature, where the second characteristic of the individual avatar feature is different from the first characteristic of the individual avatar feature, and means for changing an appearance of at least one of the second set of feature options from a first appearance to a second appearance in response to detecting a selection of one of the feature options in the first set of feature options.

[0016] A method is described, the method being performed on an electronic device having a display, the method including: displaying, via the display, a user interface object including an individual feature having a first set of one or more colors and a plurality of color options for the individual feature; detecting a selection of a color option from the plurality of color options corresponding to a second color; in response to detecting the selection, changing a color of the individual feature to the color option and displaying a first color adjustment control for the color option corresponding to the second set of one or more colors; detecting an input corresponding to the first color adjustment control while the individual feature of the user interface object has the second set of one or more colors; and in response to detecting the input corresponding to the first color adjustment control, changing a color of the individual feature from the second set of one or more colors to a modified version of the second set of one or more colors based on the second color.

[0017] A non-transitory computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, a user interface object including individual features having a first set of one or more colors and a plurality of color options for the individual features, detecting a selection of a color option from the plurality of color options that corresponds to a second color, and in response to detecting the selection, changing the color of the individual features to the color option that corresponds to the second set of one or more colors, detecting an input corresponding to the first color adjustment control while the individual features of the user interface object have the second set of one or more colors, and in response to detecting the input corresponding to the first color adjustment control, changing the color of the individual features from the second set of one or more colors to an altered version of the second set of one or more colors based on the second color.

[0018] A temporary computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, a user interface object including individual features having a first set of one or more colors and a plurality of color options for the individual features, detecting a selection of a color option from the plurality of color options that corresponds to a second color, and in response to detecting the selection, changing the color of the individual features to the color option that corresponds to the second set of one or more colors, detecting an input corresponding to the first color adjustment control while the individual features of the user interface object have the second set of one or more colors, and in response to detecting the input corresponding to the first color adjustment control, changing the color of the individual features from the second set of one or more colors to a modified version of the second set of one or more colors based on the second color.

[0019] An electronic device is described that includes a display device, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions to display via the display device a user interface object including individual features having a first set of one or more colors and a plurality of color options for the individual features, detect a selection of a color option from the plurality of color options that corresponds to a second color, and in response to detecting the selection, change the color of the individual features to the color option corresponding to the second set of one or more colors, detect an input corresponding to the first color adjustment control while the individual features of the user interface object have the second set of one or more colors, and in response to detecting the input corresponding to the first color adjustment control, change the color of the individual features from the second set of one or more colors to an altered version of the second set of one or more colors based on the second color.

[0020] An electronic device is described that includes a display device, means for displaying via the display device a user interface object including an individual feature having a first set of one or more colors and a plurality of color options for the individual feature, means for detecting a selection of a color option from the plurality of color options corresponding to a second color, and in response to detecting the selection, means for changing a color of the individual feature to the color option, means for displaying a first color adjustment control for the color option corresponding to the second set of one or more colors, means for detecting an input corresponding to the first color adjustment control while the individual feature of the user interface object has the second set of one or more colors, and means for changing a color of the individual feature from the second set of one or more colors to an altered version of the second set of one or more colors based on the second color in response to detecting the input corresponding to the first color adjustment control.

[0021] A method is described that is executed on an electronic device having a display device, the method including displaying, via the display device, an avatar editing user interface that includes displaying an avatar having a plurality of avatar features including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on the first set of one or more colors and different from the first set of one or more colors, and a plurality of color options corresponding to the first avatar feature, detecting a selection of an individual color option of the plurality of color options, and in response to detecting a selection of an individual color option of the plurality of color options of the first avatar feature, updating an appearance of the avatar including changing the first avatar feature to the second set of one or more colors in accordance with a determination that the individual color option corresponds to the second set of one or more colors, and changing the second avatar feature to a set of one or more colors based on the second set of one or more colors and different from the second set of one or more colors.

[0022] A non-transitory computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, an avatar having a plurality of avatar features including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on the first set of one or more colors and different from the first set of one or more colors, and a plurality of color options corresponding to the first avatar feature, detecting a selection of an individual color option of the plurality of color options, and in response to detecting a selection of an individual color option of the plurality of color options of the first avatar feature, updating an appearance of the avatar including changing the first avatar feature to the second set of one or more colors in accordance with a determination that the individual color option corresponds to the second set of one or more colors, and changing the second avatar feature to a set of one or more colors based on the second set of one or more colors and different from the second set of one or more colors.

[0023] A temporary computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying, via the display device, an avatar editing user interface including displaying an avatar having a plurality of avatar features including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on the first set of one or more colors and different from the first set of one or more colors, and a plurality of color options corresponding to the first avatar feature, detecting a selection of an individual color option of the plurality of color options, and in response to detecting a selection of an individual color option of the plurality of color options of the first avatar feature, updating an appearance of the avatar including changing the first avatar feature to the second set of one or more colors in accordance with a determination that the individual color option corresponds to the second set of one or more colors, and changing the second avatar feature to a set of one or more colors based on the second set of one or more colors and different from the second set of one or more colors.

[0024] An electronic device is described that includes a display device, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying, via the display device, an avatar having a plurality of avatar features including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on the first set of one or more colors and different from the first set of one or more colors, and a plurality of color options corresponding to the first avatar feature, detecting a selection of an individual color option of the plurality of color options, and in response to detecting a selection of an individual color option of the plurality of color options of the first avatar feature, updating an appearance of the avatar including changing the first avatar feature to the second set of one or more colors in accordance with a determination that the individual color option corresponds to the second set of one or more colors, and changing the second avatar feature to a set of one or more colors based on the second set of one or more colors and different from the second set of one or more colors.

[0025] An electronic device is described comprising: a display; means for displaying, via the display, an avatar editing user interface including displaying an avatar having a plurality of avatar features including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on the first set of one or more colors and different from the first set of one or more colors, and a plurality of color options corresponding to the first avatar feature; means for detecting a selection of an individual color option of the plurality of color options, and in response to detecting a selection of the individual color option of the plurality of color options of the first avatar feature, means for updating an appearance of the avatar including means for changing the first avatar feature to the second set of one or more colors in accordance with a determination that the individual color option corresponds to the second set of one or more colors, and means for changing the second avatar feature to a set of one or more colors based on the second set of one or more colors and different from the second set of one or more colors.

[0026] A method is described that is executed on an electronic device having a display device, the method including displaying, via the display device, an avatar editing user interface that includes displaying an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle and a plurality of avatar accessory options, detecting a selection of the respective accessory option, and in response to detecting the selection of the respective accessory option of the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the respective accessory option, including displaying a representation of the first accessory option that is positioned on the avatar pursuant to a determination that the respective accessory option is a first accessory option, and modifying a shape of a first portion of the avatar's hair based on a position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

[0027] A non-transitory computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle and a plurality of avatar accessory options, detecting a selection of a respective accessory option, and in response to detecting a selection of a respective accessory option of the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the respective accessory option, including displaying a representation of the first accessory option that is positioned on the avatar pursuant to a determination that the respective accessory option is a first accessory option, and modifying a shape of a first portion of the avatar's hair based on a location of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

[0028] A temporary computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs including instructions for displaying an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle and a plurality of avatar accessory options, detecting a selection of a respective accessory option, and in response to detecting a selection of a respective accessory option of the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the respective accessory option, including displaying a representation of the first accessory option that is positioned on the avatar pursuant to a determination that the respective accessory option is a first accessory option, and modifying a shape of a first portion of the avatar's hair based on a location of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

[0029] An electronic device is described that includes a display, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle and a plurality of avatar accessory options, detecting a selection of a respective accessory option, and in response to detecting a selection of a respective accessory option of the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the respective accessory option, including displaying a representation of the first accessory option that is positioned on the avatar pursuant to a determination that the respective accessory option is a first accessory option, and modifying a shape of a first portion of the avatar's hair based on a location of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

[0030] An electronic device is described that includes a display, means for displaying via the display an avatar editing user interface including displaying an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle and a plurality of avatar accessory options, means for detecting a selection of the respective accessory option, and means for modifying an appearance of the avatar to include a representation of the respective accessory option, including means for displaying a representation of the first accessory option that is positioned on the avatar pursuant to a determination that the respective accessory option is a first accessory option, and means for modifying a shape of a first portion of the avatar's hair based on a position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

[0031] A method is described that is executed on an electronic device having one or more cameras and a display, the method including: displaying, via the display, a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within a field of view of the one or more cameras; detecting a movement of the first facial feature while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including a first facial feature other than a user's tongue; in response to detecting the movement of the first facial feature, displaying the avatar's tongue and altering a position of the avatar's tongue based on the movement of the first facial feature in accordance with a determination that the user's tongue satisfies a particular criterion that includes a requirement that the user's tongue be visible for the particular criterion to be satisfied; and ceasing to display the avatar's tongue in accordance with a determination that the user's tongue does not satisfy the particular criterion.

[0032] A non-transitory computer readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display and one or more cameras, the one or more programs including instructions for displaying, via the display, a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in a facial pose within a field of view of the one or more cameras, detecting movement of the first facial feature while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including a first facial feature other than a user's tongue, and in response to detecting movement of the first facial feature, displaying the avatar's tongue based on the movement of the first facial feature in accordance with a determination that the user's tongue satisfies a particular criterion including a requirement that the user's tongue be visible for the particular criterion to be satisfied, altering a position of the avatar's tongue, and ceasing to display the avatar's tongue in accordance with a determination that the user's tongue does not satisfy the particular criterion.

[0033] A temporary computer-readable storage medium is described that stores one or more programs configured to be executed by one or more processors of an electronic device having a display and one or more cameras, the one or more programs including instructions for displaying, via the display, a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in a facial pose within a field of view of the one or more cameras, detecting a movement of the first facial feature while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including a first facial feature other than a user's tongue, and in response to detecting the movement of the first facial feature, displaying the avatar's tongue based on the movement of the first facial feature in accordance with a determination that the user's tongue satisfies a particular criterion including a requirement that the user's tongue be visible for the particular criterion to be satisfied, modifying a position of the avatar's tongue, and ceasing to display the avatar's tongue in accordance with a determination that the user's tongue does not satisfy the particular criterion.

[0034] An electronic device is described that includes a display device, one or more cameras, one or more processors, and a memory that stores one or more programs configured to be executed by the one or more processors, the one or more programs including instructions to display via the display device a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in a facial pose within a field of view of the one or more cameras, detect a movement of the first facial feature while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including a first facial feature other than a user's tongue, and in response to detecting the movement of the first facial feature, display the avatar's tongue based on the movement of the first facial feature in accordance with a determination that the user's tongue satisfies a particular criterion including a requirement that the user's tongue be visible for the particular criterion to be satisfied, modify a position of the avatar's tongue, and cease displaying the avatar's tongue in accordance with a determination that the user's tongue does not satisfy the particular criterion.

[0035] An electronic device is described that includes a display, one or more cameras, and means for displaying, via the display, a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within a field of view of the one or more cameras, means for detecting movement of the first facial feature while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including a first facial feature other than a user's tongue, means for displaying the avatar's tongue and altering a position of the avatar's tongue based on the movement of the first facial feature in response to detecting the movement of the first facial feature in accordance with a determination that the user's tongue satisfies a particular criterion including a requirement that the user's tongue be visible for the particular criterion to be satisfied, and means for ceasing to display the avatar's tongue in accordance with a determination that the user's tongue does not satisfy the particular criterion.

[0036] Executable instructions for performing these functions are optionally included in a non-transitory computer-readable storage medium or other computer program product configured to be executed by one or more processors. Executable instructions for performing these functions are optionally included in a transitory computer-readable storage medium or other computer program product configured to be executed by one or more processors.

[0037] Thus, devices are provided with faster, more efficient methods and interfaces for creating and editing avatars, thereby increasing the effectiveness, efficiency, and user satisfaction of such devices. Such methods and interfaces may complement or replace other methods of creating and editing avatars. [Brief description of the drawings]

[0038] For a better understanding of the various embodiments described, reference should be made to the following Detailed Description in conjunction with the following drawings, in which like reference numerals refer to corresponding parts throughout the drawings, in which:

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

[0040] [Figure 1B] FIG. 2 is a block diagram illustrating example components for event processing according to some embodiments.

[0041] [Diagram 2] FIG. 1 illustrates a portable multifunction device having a touch screen according to some embodiments.

[0042] [Diagram 3] 1 is a block diagram of an exemplary multifunction device with a display and a touch-sensitive surface in accordance with some embodiments.

[0043] [Figure 4A] 1 illustrates an exemplary user interface for a menu of applications on a portable multifunction device according to some embodiments.

[0044] [Figure 4B] 1 illustrates an exemplary user interface for a multifunction device with a touch-sensitive surface that is separate from a display in accordance with some embodiments.

[0045] [Figure 5A] FIG. 1 illustrates a personal electronic device according to some embodiments.

[0046] [Figure 5B] FIG. 1 is a block diagram illustrating a personal electronic device according to some embodiments.

[0047] [Figure 6A] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6B] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6C] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6D] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6E] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6F] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6G] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6H] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6I] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6J] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6K] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6L] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6M] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6N] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6O] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6P] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6Q] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6R] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6S] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6T] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6U] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6V] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6W] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6X] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6Y] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6Z] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AA] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AB] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AC] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6A-D] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AE] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AF] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6A-G] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AH] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AI]FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AJ] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AK] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AL] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AM] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application. [Figure 6AN] FIG. 2 illustrates an exemplary user interface for navigating between avatars within an application.

[0048] [Figure 7] FIG. 1 is a flow diagram illustrating a method for navigating among avatars within an application.

[0049] [Figure 8A] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8B] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8C] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8D] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8E] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8F] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8G]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8H] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8I] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8J] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8K] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8L] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8M] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8N] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8O] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8P] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8Q] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8R] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8S] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8T] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8U]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8V] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8W] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8X] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8Y] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8Z] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AA] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AB] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AC] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8A-D] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AE] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AF] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8A-G] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AH] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AI]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AJ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AK] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AL] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AM] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AN] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AO] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AP] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AQ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AR] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AS] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AT] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AU] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AV] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AW]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AX] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AY] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8AZ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BA] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BB] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BC] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BD] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BE] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BF] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BG] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BH] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BI] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BJ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BK]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BL] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BM] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BN] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BO] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BP] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BQ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BR] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BS] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BT] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BU] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BV] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BW] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BX] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BY]FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8BZ] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8CA] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8CB] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8CC] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8C-D] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8CE] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface. [Figure 8CF] FIG. 13 illustrates an exemplary user interface displaying an avatar editing user interface.

[0050] [Figure 9] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface.

[0051] [Figure 10A] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface. [Figure 10B] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface.

[0052] [Figure 11A] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface. [Figure 11B] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface.

[0053] [Figure 12A] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface. [Figure 12B] FIG. 11 is a flow diagram illustrating a method for displaying an avatar editing user interface.

[0054] [Figure 13A] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13B] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13C] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13D] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13E] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13F] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13G] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13H] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13I] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13J] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13K] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13L] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13M] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13N] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface. [Figure 13O] FIG. 1 illustrates an example user interface for changing an avatar within an avatar navigation user interface.

[0055] [Figure 14A] FIG. 1 is a flow diagram illustrating a method for changing an avatar in an avatar navigation user interface. [Figure 14B] FIG. 1 is a flow diagram illustrating a method for changing an avatar in an avatar navigation user interface. DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0056] In the following description, example methods, parameters, and the like are set forth. It is to be understood, however, that the purpose of such description is not to limit the scope of the present disclosure, but rather to provide a description of example embodiments.

[0057] There is a need for electronic devices that provide efficient methods and interfaces for creating and editing avatars. For example, while programs for creating and editing avatars already exist, these programs are inefficient and difficult to use compared to the following techniques, which allow users to create and edit realistic or unrealistic avatars as desired. Such techniques may reduce the cognitive burden on users creating and editing avatars, thereby increasing productivity. Furthermore, such techniques may reduce processor and battery power that would otherwise be wasted on redundant user input.

[0058] 1A-1B, 2, 3, 4A-4B, and 5A-5B below describe exemplary devices that perform techniques for creating and editing avatars.

[0059] 6A-6AN show example user interfaces for navigating between avatars in an application according to some embodiments. Figure 7 is a flow diagram illustrating a method for navigating between avatars in an application according to some embodiments. The user interfaces of Figures 6A-6AN are used to illustrate the processes described below, including the process of Figure 7.

[0060] 8A-8CF illustrate example user interfaces for displaying an avatar editing user interface. Figures 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B are flow diagrams illustrating a method for displaying an avatar editing user interface according to some embodiments. The user interfaces of Figures 8A-8CF are used to illustrate the processes described below, including the processes of Figures 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B.

[0061] 13A-13O show example user interfaces for modifying an avatar in an avatar navigation user interface. Figures 14A and 14B are flow diagrams illustrating a method for modifying an avatar in an avatar navigation user interface according to some embodiments. The user interfaces of Figures 13A-13O are used to illustrate the processes described below, including the processes of Figures 14A and 14B.

[0062] In the following description, terms such as "first", "second" and the like are used to describe various elements, but these elements should not be limited by these terms. These terms are only used to distinguish one element from another element. For example, a first touch can be referred to as a second touch, and similarly, a second touch can be referred to as a first touch, without departing from the scope of the various embodiments described. A first touch and a second touch are both touches, but are not the same touch.

[0063] The terms used in the description of the various embodiments described herein are for the purpose of describing particular embodiments only and are not intended to be limiting. As used in the description of the various embodiments described and in 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. As used herein, the term "and / or" is also understood to refer to and include any and all possible combinations of one or more of the associated listed items. It will be further understood that the terms "includes," "including," "comprises," and / or "comprising," as used herein, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0064] Optionally, the term "if" is interpreted to mean "when," "upon," "in response to determining," or "in response to detecting," depending on the context. Similarly, the phrases "if it is determined" or "if (a stated condition or event) is detected" are optionally interpreted to mean "upon determining," "in response to determining," "upon detecting (the stated condition or event)," or "in response to detecting (the stated condition or event)," depending on the context.

[0065] Embodiments of electronic devices, user interfaces for such devices, and associated processes for using such devices are described. In some embodiments, the device is a portable communication device, such as a mobile telephone, that also includes other functions, such as PDA and / or music player functions. Exemplary embodiments of portable multifunction devices include, but are not limited to, 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., touchscreen displays and / or touchpads), are also optionally used. It should also be understood that in some embodiments, the device is not a portable communication device, but a desktop computer with a touch-sensitive surface (e.g., touchscreen displays and / or touchpads).

[0066] In the following discussion, electronic devices are described that include a display and a touch-sensitive surface, but it should be understood that the electronic device optionally includes one or more other physical user interface devices, such as a physical keyboard, a mouse, and / or a joystick.

[0067] The device typically supports a variety of applications, such as one or more of drawing applications, presentation applications, word processing applications, website creation applications, disc authoring applications, spreadsheet applications, gaming applications, telephony applications, video conferencing applications, email applications, instant messaging applications, training support applications, photo management applications, digital camera applications, digital video camera applications, web browsing applications, digital music player applications, and / or digital video player applications.

[0068] The various applications executed on the device optionally use at least one common physical user interface device, such as a touch-sensitive surface. One or more features of the touch-sensitive surface and corresponding information displayed on the device are optionally adjusted and / or changed for each application and / or within each application. In this way, the common physical architecture (such as the touch-sensitive surface) of the device optionally supports a variety of applications with user interfaces that are intuitive and transparent to the user.

[0069] Attention is now directed to embodiments of portable devices with touch-sensitive displays. Figure 1A is a block diagram illustrating a portable multifunction device 100 with a touch-sensitive display system 112, according to some embodiments. Touch-sensitive display 112 may be conveniently referred to as a "touch screen" and may also be known or referred to as a "touch-sensitive display system." Device 100 includes memory 102 (optionally including one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripherals interface 118, RF circuitry 108, audio circuitry 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input control devices 116, and an external port 124. Device 100 optionally includes one or more light sensors 164. Device 100 optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact 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 a tactile output on device 100 (e.g., generating a tactile output 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 via one or more communication buses or signal lines 103.

[0070] As used herein and in the 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) on the touch-sensitive surface, or a surrogate (proxy) for the force or pressure of a contact on the touch-sensitive surface. The intensity of a contact has a value range that includes at least four different values, and more typically includes hundreds (e.g., at least 256) different values. The intensity of a contact is optionally determined (or measured) using a variety of techniques and a variety of sensors or combinations of sensors. For example, one or more force sensors under or adjacent to the touch-sensitive surface are optionally used to measure the 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) to determine an estimate of the force of the contact. Similarly, a pressure-sensitive tip of a stylus is optionally used to determine the pressure of the stylus on the touch-sensitive surface. Alternatively, the size and / or change in a contact area detected on the touch-sensitive surface, the capacitance and / or change in the capacitance of the touch-sensitive surface proximate the contact, and / or the resistance and / or change in the capacitance of the touch-sensitive surface proximate the contact are optionally used as a surrogate for the force or pressure of the contact on the touch-sensitive surface. In some implementations, the surrogate measure for the force or pressure of the contact is used directly to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is described in units corresponding to the surrogate measure). In some implementations, the surrogate measure for the force or pressure of the contact is converted to an estimated force or pressure, and the estimated force or pressure is used to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is a pressure threshold measured in units of pressure). Using the intensity of contact as an attribute of user input allows a user access to additional device functionality that may not otherwise be accessible by the user on reduced-sized devices with limited area for displaying affordances (e.g., on a touch-sensitive display) and / or receiving user input (e.g., via a touch-sensitive display, a touch-sensitive surface, or physical / mechanical controls such as knobs or buttons).

[0071] As used herein and in the claims, the term "tactile output" refers to a physical displacement of a device relative to a previous position of the device, a physical displacement of a component of the device (e.g., a touch-sensitive surface) relative to another component of the device (e.g., a housing), or a displacement of a component relative to the center of mass of the device, that is to be detected by a user with the user's sense of touch. For example, in a situation where a device or a component of the device is in contact with a touch-sensitive user's surface (e.g., the fingers, palm, or other part of the user's hand), the tactile output generated by the physical displacement is interpreted by the user as a tactile sensation that corresponds to a perceived change in a physical property of the device or a component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or trackpad) is, optionally, interpreted by the user as a "down-click" or "up-click" of a physical actuator button. In some cases, a user feels a tactile sensation such as a "down-click" or "up-click" even when no movement of a physical actuator button associated with the touch-sensitive surface is physically pressed (e.g., displaced) by the user's action. As another example, movement of the touch-sensitive surface is optionally interpreted or sensed by a user as "roughness" of the touch-sensitive surface, even when there is no change in the smoothness of the touch-sensitive surface. Such user interpretation of touch depends on the user's personal sensory perception, but there are many sensory perceptions of touch that are common to a majority of users. Thus, when a tactile output is described as corresponding to a particular sensory perception of a user (e.g., an "up click," a "down click," a "roughness"), unless otherwise noted, the generated tactile output corresponds to a physical displacement of the device, or a component of the device, that produces the described sensory perception for a typical (or average) user.

[0072] It should be understood that device 100 is but one example of a portable multifunction device, and that device 100 optionally has more or fewer components than those shown, optionally combines two or more components, or optionally has a different configuration or arrangement of components. The various components shown in FIG. 1A are implemented in hardware, software, or a combination of both hardware and software, including one or more signal processing circuits and / or application specific integrated circuits.

[0073] Memory 102 optionally includes high-speed random access memory, and optionally also includes non-volatile memory, such as one or more magnetic disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. A memory controller 122 optionally controls access to memory 102 by other components of device 100.

[0074] A peripherals interface 118 can be used to connect input and output peripherals of the device to the CPU 120 and memory 102. The one or more processors 120 operate or execute various software programs and / or instruction sets stored in the memory 102 to perform various functions for the device 100 and to process data. In some embodiments, the peripherals interface 118, the CPU 120, and the memory controller 122 are optionally implemented on a single chip, such as the chip 104. In some other embodiments, they are optionally implemented on separate chips.

[0075] The radio frequency (RF) circuitry 108 transmits and receives RF signals, also referred to as electromagnetic signals. The RF circuitry 108 converts electrical signals to electromagnetic signals or electromagnetic signals to electrical signals and communicates with communication networks and other communication devices via electromagnetic signals. The RF circuitry 108 optionally includes well-known circuitry for performing these functions, including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a CODEC chipset, a subscriber identity module (SIM) card, memory, and the like. The RF circuitry 108 optionally communicates wirelessly with other devices and with networks, such as the Internet, also referred to as the World Wide Web (WWW), an intranet, and / or wireless networks, such as cellular telephone networks, wireless local area networks (LANs) and / or metropolitan area networks (MANs). The RF circuitry 108 optionally includes well-known circuitry for detecting near field communication (NFC) fields, such as by near field communication radio. The wireless communication optionally uses any of a number of communication standards, protocols, and technologies, including Global System for Mobile Communications (GSM), Enhanced Data GSM Environment (EDGE), high-speed downlink packet access (HSDPA), high-speed uplink packet access (HSUPA), Evolution, Data-Only (EV-DO), HSPA, HSPA+, Dual-Cell HSPA (DC-HSPA), long term evolution (LTE), near field communication (NFC), and the like.Examples of technologies that may be used include, but are not limited to, wireless technology, near field communication (NFC), wideband code division multiple access (W-CDMA), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth, Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, and / or IEEE 802.11ac), voice over Internet Protocol (VoIP), Wi-MAX, protocols for email (e.g., Internet message access protocol (IMAP) and / or post office protocol (POP)), instant messaging (e.g., extensible messaging and presence protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence Extensions, and the like). Examples of suitable communication protocols include, but are not limited to, Instant Messaging and Presence Leveraging Extensions (SIMPLE), Instant Messaging and Presence Service (IMPS), and / or Short Message Service (SMS), or any other suitable communication protocol, including communication protocols not yet developed as of the filing date of this document.

[0076] The audio circuit 110, speaker 111, and microphone 113 provide an audio interface between a user and the device 100. The audio circuit 110 receives audio data from the peripherals interface 118, converts the audio data into electrical signals, and transmits the electrical signals to the speaker 111. The speaker 111 converts the electrical signals into sound waves audible to humans. The audio circuit 110 also receives electrical signals converted from sound waves by the microphone 113. The audio circuit 110 converts the electrical signals into voice data and transmits the voice data to the peripherals interface 118 for processing. The voice data is optionally retrieved from and / or transmitted to the memory 102 and / or the RF circuit 108 by the peripherals interface 118. In some embodiments, the audio circuit 110 further comprises a headset jack (e.g., 212 in FIG. 2). The headset jack provides an interface between audio circuitry 110 and a removable audio input / output peripheral device, such as an output-only headphone or a headset that has both an output (e.g., one- or binaural headphones) and an input (e.g., a microphone).

[0077] The I / O subsystem 106 couples input / output peripherals of the device 100, such as the touch screen 112 and other input control devices 116, to a peripheral interface 118. The I / O subsystem 106 optionally includes one or more input controllers 160 for a display controller 156, a light sensor controller 158, an intensity sensor controller 159, a haptic feedback controller 161, and other input or control devices. The one or more input controllers 160 receive / send electrical signals to the other input control devices 116. The other input control devices 116 optionally include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, joysticks, click wheels, etc. In some alternative embodiments, the input controller(s) 160 are optionally coupled to any (or none) of a keyboard, an infrared port, a USB port, and a pointer device such as a mouse. The one or more buttons (e.g., 208 in FIG. 2) optionally include up / down buttons for adjusting the volume of the speaker 111 and / or microphone 113. The one or more buttons optionally include a push button (e.g., 206 in FIG. 2).

[0078] A quick press of a push button optionally unlocks the touchscreen 112 or optionally initiates a process of using gestures on the touchscreen to unlock the device, as described in U.S. Patent Application Serial No. 11 / 322,549, U.S. Patent No. 7,657,849, filed December 23, 2005, entitled "Unlocking a Device by Performing Gestures on an Unlock Image," which is incorporated herein by reference in its entirety. A longer press of a push button (e.g., 206) optionally powers the device 100 on and off. The functions of one or more of the buttons are optionally user customizable. The touchscreen 112 is used to implement virtual or soft buttons and one or more soft keyboards.

[0079] The touch-sensitive display 112 provides an input and output interface between the device and a user. The display controller 156 receives and / or sends electrical signals to the touch screen 112. The touch screen 112 displays visual output to the user. The visual output optionally includes graphics, text, icons, video, and any combination thereof (collectively referred to as "graphics"). In some embodiments, optionally, some or all of the visual output corresponds to user interface objects.

[0080] Touchscreen 112 has a touch-sensitive surface, sensor, or set of sensors that accepts input from a user based on haptic and / or tactile contact. Touchscreen 112 and display controller 156 (along with any associated modules and / or instruction sets in memory 102) detects contacts (and any movement or breaking of contact) on touchscreen 112 and translates the detected contacts into interactions with user interface objects (e.g., one or more soft keys, icons, web pages, or images) displayed on touchscreen 112. In an exemplary embodiment, the point of contact between touchscreen 112 and the user corresponds to the user's finger.

[0081] Touch screen 112 optionally uses LCD (Liquid Crystal Display), LPD (Light Emitting Polymer Display) or LED (Light Emitting Diode) technology, although in other embodiments other display technologies are used. Touch screen 112 and display controller 156 optionally detect contact and any movement or interruption thereof using any of a number of now known or later developed touch sensing technologies, including, but not limited to, capacitive, resistive, infrared, and surface ultrasonic technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with touch screen 112. In an exemplary embodiment, projected mutual capacitance sensing technology is used, such as that found in the iPhone® and iPod Touch® by Apple Inc. of Cupertino, California.

[0082] The touch-sensitive display in some embodiments of touchscreen 112 is optionally similar to the multi-touch-sensing touchpads described in the following U.S. Patents: 6,323,846 (Westerman et al.), 6,570,557 (Westerman et al.), and / or 6,677,932 (Westerman), and / or U.S. Patent Application Publication No. 2002 / 0015024 (A1), each of which is incorporated by reference in its entirety herein. However, touchscreen 112 displays visual output from device 100, whereas touch-sensitive touchpads do not provide visual output.

[0083] Touch-sensitive displays in some embodiments of touch screen 112 are described in the following applications: (1) U.S. Patent Application No. 11 / 381,313, filed May 2, 2006, entitled "Multipoint Touch Surface Controller"; (2) U.S. Patent Application No. 10 / 840,862, filed May 6, 2004, entitled "Multipoint Touchscreen"; (3) U.S. Patent Application No. 10 / 903,964, filed July 30, 2004, entitled "Gestures For Touch Sensitive Input Devices"; (4) U.S. Patent Application No. 11 / 048,264, filed January 31, 2005, entitled "Gestures For Touch Sensitive Input Devices"; (5) U.S. Patent Application No. 11 / 038,590, filed January 18, 2005, entitled "Mode-Based Graphical User Interfaces For Touch Sensitive Input Devices"; (6) U.S. Patent Application No. 11 / 228,758, filed September 16, 2005, entitled "Virtual Input Device Placement On A Touch Screen User Interface" No. 11 / 228,700, filed Sep. 16, 2005, entitled "Operation Of A Computer With A Touch Screen Interface," (7) No. 11 / 228,700, filed Sep. 16, 2005, entitled "Operation Of A Computer With A Touch Screen Interface," (8) No. 11 / 228,737, filed Sep. 16, 2005, entitled "Activating Virtual Keys Of A Touch-Screen Virtual Keyboard," and (9) No. 11 / 367,749, filed Mar. 3, 2006, entitled "Multi-Functional Hand-Held Device," all of which are incorporated herein by reference in their entirety.

[0084] Touchscreen 112 optionally has a video resolution of greater than 100 dpi. In some embodiments, the touchscreen has a video resolution of approximately 160 dpi. A user optionally contacts touchscreen 112 using any suitable object or appendage, such as a stylus, finger, etc. In some embodiments, the user interface is designed to function primarily through finger-based contact and gestures, which may be less precise than stylus-based input due to the larger contact area of ​​a finger on the touchscreen. In some embodiments, the device translates coarse finger-based input into precise pointer / cursor position or commands to perform the user's desired action.

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

[0086] Device 100 also includes a power system 162 for providing power to the various components. Power system 162 optionally includes a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharging system, power failure detection circuitry, power converters or inverters, power status indicators (e.g., light emitting diodes (LEDs)), and any other components associated with the generation, management, and distribution of power within a portable device.

[0087] Device 100 also optionally includes one or more light sensors 164. FIG. 1A shows a light sensor connected to light sensor controller 158 in I / O subsystem 106. Light sensor 164 optionally includes a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. Light sensor 164 receives light from the environment, projected through one or more lenses, and converts the light into data representing an image. In conjunction with imaging module 143 (also referred to as a camera module), light sensor 164 optionally captures still images or video. In some embodiments, the light sensor is located on the back of device 100, opposite touchscreen display 112 on the front of the device, to enable the touchscreen display as a viewfinder for still image and / or video capture. In some embodiments, the light sensor is optionally located on the front of the device to obtain an image of the user for videoconference while the user views other videoconference participants on the touchscreen display. In some embodiments, the position of the light sensor 164 can be changed by the user (e.g., by rotating the lens and sensor within the device housing), thereby using a single light sensor 164 in conjunction with a touch screen display for both video conferencing and still and / or video image capture.

[0088] Device 100 also optionally includes one or more depth camera sensors 175. FIG. 1A shows a depth camera sensor coupled to depth camera controller 169 in I / O subsystem 106. Depth camera sensor 175 receives data from the environment to create a three-dimensional model of an object (e.g., a face) in a scene from a viewpoint (e.g., depth camera sensor). In some embodiments, depth camera sensor 175 is optionally used in conjunction with imaging module 143 (also referred to as a camera module) to determine a depth map of various portions of an image captured by imaging module 143. In some embodiments, the depth camera sensor is located on the front of device 100, so that an image of a user including depth information is optionally obtained for a video conference, for capturing a selfie image including depth map data while the user views other video conference participants on a touch screen display. In some embodiments, depth camera sensor 175 is located on the back of the device, or on the back and front of device 100. In some embodiments, the position of the depth camera sensor 175 can be changed by the user (e.g., by rotating the lens and sensor within the device housing), thereby allowing the depth camera sensor 175 to be used in conjunction with a touch screen display for both video conferencing and capturing still and / or video images.

[0089] In some embodiments, a depth map (e.g., a depth map image) includes information (e.g., values) related to the distance of objects in a scene from a viewpoint (e.g., a camera, light sensor, depth camera sensor). In one embodiment of a depth map, each depth pixel defines a position in the Z axis of the viewpoint where a corresponding two-dimensional pixel is located. In some embodiments, a depth map consists of pixels where each pixel is defined by a value (e.g., 0 to 255). For example, a value of "0" represents a pixel located furthest in a "three-dimensional" scene, and a value of "255" represents a pixel located closest to the viewpoint (e.g., a camera, light sensor, depth camera sensor) in a "three-dimensional" scene. In other embodiments, a depth map represents a distance between an object in a scene and the plane of the viewpoint. In some embodiments, a depth map includes information about the relative depth of various features of an object of interest within the field of view of a depth camera (e.g., the relative depth of the eyes, nose, mouth, and ears of a user's face). In some embodiments, a depth map includes information that enables a device to determine the contour of an object of interest in the Z direction.

[0090] Device 100 also optionally includes one or more contact intensity sensors 165. FIG. 1A shows a contact intensity sensor coupled to intensity sensor controller 159 in I / O subsystem 106. Contact intensity sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electrical force sensors, piezoelectric force sensors, optical force sensors, capacitive touch-sensitive 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 165 receives contact intensity information (e.g., pressure information or a proxy for pressure information) from the surrounding environment. In some embodiments, at least one contact intensity sensor is located on 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 touchscreen display 112 located on the front of device 100.

[0091] Device 100 also optionally includes one or more proximity sensors 166. Figure 1A shows proximity sensor 166 coupled to peripherals interface 118. Alternatively, proximity sensor 166 is optionally connected to an input controller 160 in I / O subsystem 106. The proximity sensor 166 optionally performs as described in U.S. patent application Ser. No. 11 / 241,839, "Proximity Detector In Handheld Device," Ser. No. 11 / 240,788, "Proximity Detector In Handheld Device," Ser. No. 11 / 620,702, "Using Ambient Light Sensor To Augment Proximity Sensor Output," Ser. No. 11 / 586,862, "Automated Response To And Sensing Of User Activity In Portable Devices," and Ser. No. 11 / 638,251, "Methods And Systems For Automatic Configuration Of Peripherals," which are incorporated herein by reference in their entireties. In some embodiments, the proximity sensor turns off and disables the touch screen 112 when the multifunction device is placed near the user's ear (e.g., when the user is making a phone call).

[0092] Device 100 also optionally includes one or more tactile output generators 167. FIG. 1A shows a tactile output generator coupled to haptic feedback controller 161 in I / O subsystem 106. Tactile output generator 167 optionally includes one or more electroacoustic devices, such as speakers or other audio components, and / or electromechanical devices that convert energy into linear motion, such as motors, solenoids, electroactive polymers, piezoelectric actuators, electrostatic actuators, or other tactile output generating components (e.g., components that convert electrical signals into tactile output on the device). Contact intensity sensor 165 receives haptic feedback generation instructions from haptic feedback module 133 and generates a tactile output on device 100 that can be sensed by a user of device 100. In some embodiments, at least one tactile output generator is disposed on 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 the surface of device 100) or laterally (e.g., back and forth in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is disposed on the back of device 100, opposite touchscreen display 112 disposed on the front of device 100.

[0093] Device 100 also optionally includes one or more accelerometers 168. FIG. 1A shows accelerometer 168 coupled to peripherals interface 118. Alternatively, accelerometer 168 is optionally coupled to input controller 160 in I / O subsystem 106. Accelerometer 168 optionally functions as described in U.S. Patent Application Publication Nos. 20050190059, “Acceleration-based Theft Detection System for Portable Electronic Devices,” and 20060017692, “Methods And Apparatuses For Operating A Portable Device Based On An Accelerometer,” both of which are incorporated herein by reference in their entireties. In some embodiments, information is displayed on a touchscreen display in portrait or landscape orientation based on an analysis of data received from one or more accelerometers. In addition to accelerometer(s) 168, device 100 optionally includes a magnetometer and a GPS (or GLONASS or other global navigation system) receiver for obtaining information regarding the position and orientation (e.g., vertical or horizontal) of device 100.

[0094] In some embodiments, the software components stored in memory 102 include an operating system 126, a communications module (or instruction set) 128, a touch / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and applications (or instruction sets) 136. Additionally, in some embodiments, as shown in FIGS. 1A and 3, memory 102 (FIG. 1A) or memory 370 (FIG. 3) stores device / global internal state 157. Device / global internal state 157 includes one or more of the following: active application state, indicating which applications, if any, are currently active; display state, indicating which applications, views, or other information are occupying various regions of touchscreen display 112; sensor state, including information obtained from the device's various sensors and input control devices 116; and location information regarding the device's position and / or orientation.

[0095] Operating system 126 (e.g., an embedded operating system such as Darwin®, RTXC®, LINUX®, UNIX®, OS X®, iOS®, WINDOWS®, or VxWorks®) includes various software components and / or drivers for controlling and managing common system tasks (e.g., memory management, storage device control, power management, etc.) and facilitating communication between various hardware and software components.

[0096] The communications module 128 facilitates communication with other devices via one or more external ports 124 and also includes various software components for processing data received by the RF circuitry 108 and / or the external ports 124. The external ports 124 (e.g., Universal Serial Bus (USB), FIREWIRE®, etc.) are adapted to couple to other devices directly or indirectly through a network (e.g., the Internet, wireless LAN, etc.). In some embodiments, the external ports are multi-pin (e.g., 30-pin) connectors the same as or similar to the 30-pin connector used on iPod® (trademark of Apple Inc.) devices and / or compatible multi-pin (e.g., 30-pin) connectors.

[0097] Contact / motion module 130 (in cooperation with display controller 156) optionally detects contact with touch screen 112 and other touch-sensing devices (e.g., a touchpad or physical click wheel). Contact / motion module 130 includes various software components for performing various operations related to detecting contact, such as determining whether contact has occurred (e.g., detecting a finger down event), determining the strength of the contact (e.g., the force or pressure of the contact, or a surrogate for the force or pressure of the contact), determining whether there is movement of the contact and tracking the movement across the touch-sensitive surface (e.g., detecting one or more finger dragging events), and determining whether the contact has stopped (e.g., detecting a finger up event or an interruption in the contact). Contact / motion module 130 receives contact data from the touch-sensitive surface. Determining the movement of the contact point represented by the series of contact data optionally includes determining the speed (magnitude), velocity (magnitude and direction), and / or acceleration (change in magnitude and / or direction) of the contact point. These actions are, optionally, applied to a single contact (e.g., one finger contact) or multiple simultaneous contacts (e.g., "multi-touch" / multiple finger contacts). In some embodiments, contact / motion module 130 and display controller 156 detect contacts on a touchpad.

[0098] In some embodiments, the contact / motion module 130 uses a set of one or more intensity thresholds to determine whether an action has been performed by a user (e.g., to determine whether a user has “clicked” on an icon). In some embodiments, at least a subset of the intensity thresholds are determined according to software parameters (e.g., the intensity thresholds are not determined by the activation thresholds of a particular physical actuator and may be adjusted without modifying the physical hardware of the device 100). For example, the mouse “click” threshold of a trackpad or touchscreen display may be set to any of a wide range of predefined thresholds without modifying the hardware of the trackpad or touchscreen display. Additionally, in some implementations, a user of the device is provided with a software setting to adjust one or more of the set of intensity thresholds (e.g., by adjusting individual intensity thresholds and / or by adjusting multiple intensity thresholds at once with a system-level click “intensity” parameter).

[0099] Contact / motion module 130 optionally detects gesture input by a user. Different gestures on a touch-sensitive surface have different contact patterns (e.g., different movements, timing, and / or strength of detected contacts). Thus, gestures are optionally detected by detection of a particular contact pattern. For example, detecting a finger tap gesture includes detecting a finger down event (e.g., at an icon location), followed by detecting a finger lift off event at the same location (or substantially the same location) as the finger down event. As another example, detecting a finger swipe gesture on a touch-sensitive surface includes detecting a finger down event, followed by detecting one or more finger drag events, followed by detecting a finger lift off event.

[0100] Graphics module 132 includes various known software components for rendering and displaying graphics on touchscreen 112 or other display, including components for modifying the visual effects (e.g., brightness, transparency, saturation, contrast, or other visual characteristics) of the displayed graphics. As used herein, the term "graphics" includes any object that can be displayed to a user, including, but not limited to, text, web pages, icons (such as user interface objects including soft keys), digital images, videos, and animations.

[0101] In some embodiments, the graphics module 132 stores data representing the graphics to be used. Each graphic is optionally assigned a corresponding code. The graphics module 132 receives one or more codes specifying the graphics to be displayed, including coordinate data and other graphic characteristic data, as appropriate, from an application or the like, and then generates screen image data for output to the display controller 156.

[0102] The tactile feedback module 133 includes various software components for generating instructions used by the tactile output generator(s) 167 to generate tactile outputs at one or more locations on the device 100 in response to user interaction with the device 100.

[0103] Text input module 134 is optionally a component of graphics module 132 and provides a soft keyboard for entering text in various applications (e.g., contacts 137, email 140, IM 141, browser 147, and any other application requiring text input).

[0104] The GPS module 135 determines the location of the device and provides this information for use in various applications (e.g., to the phone 138 for use in location-based telephony, to the camera 143 as photo / video metadata, and to applications that provide location-based services, such as a weather widget, a local yellow pages widget, and a maps / navigation widget).

[0105] The application 136 optionally includes the following modules (or instruction sets), or a subset or superset thereof: ● a contacts module 137 (sometimes called an address book or contact list); ● Telephone module 138, ● Videoconferencing module 139; ● an email client module 140; ● Instant messaging (IM) module 141; ● Training support module 142, A camera module 143 for still and / or video images, ● Image management module 144, ●Video player module, ●Music player module, ● Browser module 147, ● Calendar module 148, A widget module 149, optionally including one or more of a weather widget 149-1, a stock price 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, as well as user-created widgets 149-6; ● a widget creation module 150 for creating user-created widgets 149-6; ● Search module 151, A video and music player module 152 that integrates a video player module and a music player module; ● Memo module 153, Map module 154 and / or ●Online video module 155.

[0106] Examples of other applications 136 optionally 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 duplication.

[0107] The contacts module 137, along with the touch screen 112, the display controller 156, the touch module 130, the graphics module 132, and the text input module 134, is optionally used to manage an address book or contact list (e.g., stored in the memory 102 or in the application internal state 192 of the contacts module 137 in the memory 370), including adding a name(s) to the address book, deleting a name(s) from the address book, associating phone number(s), email address(es), address(es), or other information with a name, associating a picture with a name, categorizing and sorting names, providing phone numbers or email addresses to initiate and / or facilitate communication by telephone 138, videoconferencing module 139, email 140, or IM 141, and the like.

[0108] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, telephone module 138 is optionally used to enter a series of characters corresponding to a telephone number, access one or more telephone numbers in contacts module 137, modify an entered telephone number, dial a corresponding telephone number, conduct a conversation, and disconnect or hang up when the conversation is completed. As mentioned above, wireless communication optionally uses any of a number of communication standards, protocols, and technologies.

[0109] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, light sensor 164, light sensor controller 158, contact / motion module 130, graphics module 132, text input module 134, contacts module 137, and telephone module 138, videoconferencing module 139 contains executable instructions for initiating, conducting, and terminating a videoconference between a user and one or more other participants in accordance with the user's instructions.

[0110] In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, email client module 140 contains executable instructions for composing, sending, receiving, and managing emails in response to user instructions. In conjunction with image management module 144, email client module 140 makes it very easy to compose and send emails with still or video images captured by camera module 143.

[0111] In cooperation with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, instant messaging module 141 includes executable instructions for entering characters corresponding to an instant message, modifying characters already entered, sending the corresponding instant message (e.g., using Short Message Service (SMS) or Multimedia Message Service (MMS) protocols for telephone-based instant messaging, or using XMPP, SIMPLE, or IMPS for Internet-based instant messaging), receiving instant messages, and viewing received instant messages. In some embodiments, the sent and / or received instant messages optionally include graphics, photos, audio files, video files, and / or other attachments, such as those supported by MMS and / or Enhanced Messaging Service (EMS). As used herein, "instant messaging" refers to both telephone-based messaging (e.g., messages sent using SMS or MMS) and Internet-based messaging (e.g., messages sent using XMPP, SIMPLE, or IMPS).

[0112] In conjunction with the RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, map module 154 and music player module, the training support module 142 contains executable instructions to create workouts (e.g., having time, distance and / or calorie burn goals), communicate with training sensors (sports devices), receive training sensor data, calibrate sensors used to monitor the workouts, select and play music for the workouts, and display, store and transmit the workout data.

[0113] In cooperation with touch screen 112, display controller 156, light sensor(s) 164, light sensor controller 158, contact / motion module 130, graphics module 132, and image management module 144, camera module 143 contains executable instructions to capture still images or video (including video streams) and store them in memory 102, change characteristics of the still images or video, or delete the still images or video from memory 102.

[0114] In conjunction with touch screen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and camera module 143, image management module 144 contains executable instructions for arranging, modifying (e.g., editing) or otherwise manipulating, labeling, deleting, presenting (e.g., in a digital slide show or album), and storing still and / or video images.

[0115] In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, browser module 147 contains executable instructions for browsing the Internet according to a user's instructions, including retrieving, linking, receiving, and displaying web pages or portions thereof, as well as attachments and other files linked to web pages.

[0116] In cooperation with RF circuitry 108, touch screen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, email client module 140, and browser module 147, calendar module 148 contains executable instructions to create, display, modify, and store calendars and data associated with the calendars (e.g., calendar items, to-do lists, etc.) in accordance with a user's instructions.

[0117] In conjunction with the RF circuitry 108, the touch screen 112, the display controller 156, the touch / motion module 130, the graphics module 132, the text input module 134, and the browser module 147, the widget module 149 is a mini-application (e.g., weather widget 149-1, stock price widget 149-2, calculator widget 149-3, alarm clock widget 149-4, and dictionary widget 149-5) that is optionally downloaded and used by the user, or a mini-application (e.g., user-created widget 149-6) that is created by the user. In some embodiments, the widget includes a Hypertext Markup Language (HTML) file, a Cascading Style Sheets (CSS) file, and a JavaScript file. In some embodiments, the widget includes an Extensible Markup Language (XML) file and a JavaScript file (e.g., Yahoo! Widget).

[0118] In conjunction with RF circuitry 108, touch screen 112, display controller 156, touch / motion module 130, graphics module 132, text input module 134, and browser module 147, widget creation module 150 is optionally used by a user to create widgets (e.g., turn user-specified portions of a web page into widgets).

[0119] In cooperation with the touch screen 112, the display controller 156, the contact / motion module 130, the graphics module 132, and the text input module 134, the search module 151 contains executable instructions for searching the memory 102 for text, music, sound, images, video, and / or other files that match one or more search criteria (e.g., one or more user-specified search terms) in accordance with a user's instructions.

[0120] In conjunction with touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, and browser module 147, video and music player module 152 contains executable instructions that enable a user to download and play pre-recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files, as well as executable instructions for displaying, presenting, or otherwise playing videos (on touchscreen 112 or on an external display connected via external port 124). In some embodiments, device 100 optionally includes the functionality of an MP3 player, such as an iPod (a trademark of Apple Inc.).

[0121] In conjunction with the touch screen 112, display controller 156, contact / motion module 130, graphics module 132 and text input module 134, the notes module 153 contains executable instructions for creating and managing notes, to-do lists, and the like, in accordance with a user's instructions.

[0122] In conjunction with RF circuitry 108, touch screen 112, display controller 156, touch / motion module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, map module 154 optionally uses, in accordance with a user's instructions, to receive, display, modify, and store maps and data associated with the maps (e.g., driving directions, data for stores and other points of interest at or near a particular location, and other location-based data).

[0123] In conjunction with touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, audio circuitry 110, speaker 111, RF circuitry 108, text input module 134, email client module 140, and browser module 147, online video module 155 contains instructions that enable a user to access, view, receive (e.g., by streaming and / or downloading), play (e.g., on the touchscreen or on an external display connected via external port 124), and send and otherwise manage emails containing links to particular online videos in one or more file formats, such as H.264. In some embodiments, instant messaging module 141 is used to send links to particular online videos, rather than email client module 140. Further description of online video applications can be found in U.S. Provisional Patent Application No. 60 / 936,562, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," filed June 20, 2007, and U.S. Patent Application No. 11 / 968,067, entitled "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos," filed December 31, 2007, the contents of which are incorporated by reference in their entireties herein.

[0124] Each of the above-identified modules and applications corresponds to an executable set of instructions and methods (e.g., computer-implemented methods and other information processing methods described herein) that perform one or more of the above-identified functions and methods described herein. These modules (e.g., sets of instructions) need not be implemented as separate software programs, procedures, or modules, and thus, various embodiments optionally combine or otherwise rearrange various subsets of these modules. For example, a video playback module is optionally combined with a music player module into a single module (e.g., video and music player module 152 of FIG. 1A). In some embodiments, memory 102 optionally stores a subset of the above-identified modules and data structures. Additionally, memory 102 optionally stores additional modules and data structures not described above.

[0125] In some embodiments, device 100 is a device on which operation of a predefined set of functions is performed exclusively through a touchscreen and / or touchpad. By using the touchscreen and / or touchpad as the primary input control device for operation of device 100, the number of physical input control devices (push buttons, dials, etc.) on device 100 is optionally reduced.

[0126] The set of predefined functions performed exclusively through the touchscreen and / or touchpad optionally includes navigation between user interfaces. In some embodiments, the touchpad, when touched by a user, navigates device 100 to a main menu, a home menu, or a root menu from any user interface displayed on device 100. In such embodiments, a "menu button" is implemented using the touchpad. In some other embodiments, the menu button is a physical push button or other physical input control device instead of a touchpad.

[0127] 1B is a block diagram illustrating example components for event processing, according to some embodiments. In some embodiments, memory 102 (FIG. 1A) or memory 370 (FIG. 3) includes event sorter 170 (e.g., in operating system 126) and corresponding application 136-1 (e.g., any of applications 137-151, 155, 380-390 described above).

[0128] Event sorter 170 receives the event information and determines application 136-1 and application view 191 of application 136-1 to which the event information is to be delivered. Event sorter 170 includes event monitor 171 and event dispatcher module 174. In some embodiments, application 136-1 includes application internal state 192 that indicates the current application view(s) that are displayed on touch-sensitive display 112 when the application is active or running. In some embodiments, device / global internal state 157 is used by event sorter 170 to determine which application(s) is currently active, and application internal state 192 is used by event sorter 170 to determine the application view 191 to which the event information is to be delivered.

[0129] In some embodiments, application internal state 192 includes additional information such as one or more of resume information used when application 136-1 resumes execution, user interface state information indicating information being displayed or prepared for display by application 136-1, a state queue to allow the user to return to a previous state or view of application 136-1, and a redo / undo queue of previous actions taken by the user.

[0130] Event monitor 171 receives event information from peripherals interface 118. The event information includes information about a sub-event (e.g., a user touch on touch-sensitive display 112 as part of a multi-touch gesture). Peripherals interface 118 transmits information it receives from I / O subsystem 106 or sensors such as proximity sensor 166, accelerometer(s) 168, and / or microphone 113 (through audio circuitry 110). Information that peripherals interface 118 receives from I / O subsystem 106 includes information from touch-sensitive display 112 or a touch-sensitive surface.

[0131] In some embodiments, event monitor 171 sends requests to peripherals interface 118 at predetermined intervals. In response, peripherals interface 118 sends event information. In other embodiments, peripherals interface 118 sends event information only when there is a significant event (e.g., receiving an input above a predetermined noise threshold and / or for longer than a predetermined period of time).

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

[0133] Hit view determination module 172 provides software procedures for determining where in one or more views a sub-event occurred when touch-sensitive display 112 displays more than one view. A view consists of controls and other elements that a user can see on the display.

[0134] Another aspect of a user interface associated with an application is a set of views, sometimes referred to herein as application views or user interface windows, in which information is displayed and in which touch-based gestures occur. The application views (of the respective applications) in which the touch is detected optionally correspond to programmatic levels within the programmatic or view hierarchy of the application. For example, the lowest-level view in which the touch is detected is optionally referred to as a hit view, and the set of events that are recognized as suitable inputs is optionally determined based at least in part on the hit view of the initial touch that initiates the touch-based gesture.

[0135] 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, hit view determination module 172 identifies the hit view as the lowest view in the hierarchy that should process the sub-events. In most situations, the hit view is the lowest level view in which the first sub-event occurs (e.g., the first sub-event in a sequence of sub-events that form an event or potential event). Once a hit view is identified by hit view determination module 172, 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.

[0136] Active event recognizer determination module 173 determines which view(s) in the view hierarchy should receive the particular sequence of sub-events. In some embodiments, active event recognizer determination module 173 determines that only the hit view should receive the particular sequence of sub-events. In other embodiments, active event recognizer determination module 173 determines that all views that contain the physical location of the sub-event are actively participating views, and therefore all actively participating views should receive the particular sequence of sub-events. In other embodiments, even if the touch sub-event is completely confined to the area associated with a particular view, views higher in the hierarchy remain actively participating views.

[0137] Event dispatcher module 174 dispatches the event information to an event recognizer (e.g., event recognizer 180). In embodiments that include active event recognizer determination module 173, event dispatcher module 174 delivers the event information to the event recognizers determined by active event recognizer determination module 173. In some embodiments, event dispatcher module 174 stores event information obtained by a corresponding event receiver 182 in an event queue.

[0138] In some embodiments, operating system 126 includes event sorter 170. Alternatively, application 136-1 includes event sorter 170. In yet other embodiments, event sorter 170 is a stand-alone module or part of another module stored in memory 102, such as contact / motion module 130.

[0139] In some embodiments, application 136-1 includes multiple event handlers 190 and one or more application views 191, each of which includes instructions for handling touch events that occur within a corresponding view of the application's user interface. Each application view 191 of application 136-1 includes one or more event recognizers 180. Typically, a corresponding application view 191 includes multiple event recognizers 180. In other embodiments, one or more of the event recognizers 180 are part of a separate module, such as a user interface kit or a higher-level object from which application 136-1 inherits methods and other properties. In some embodiments, the corresponding event handler 190 includes one or more of data updater 176, object updater 177, GUI updater 178, and / or event data 179 received from event sorter 170. Event handler 190 optionally utilizes or invokes data updater 176, object updater 177, or GUI updater 178 to update application internal state 192. Alternatively, one or more of the application views 191 include one or more corresponding event handlers 190. In some embodiments, one or more of the data updater 176, the object updater 177, and the GUI updater 178 are also included in the corresponding application view 191.

[0140] A corresponding event recognizer 180 receives event information (e.g., event data 179) from event sorter 170 and identifies an event from the event information. Event recognizer 180 includes an event receiver 182 and an event comparator 184. In some embodiments, event recognizer 180 also includes at least a subset of metadata 183 and event delivery instructions 188 (optionally including sub-event delivery instructions).

[0141] The event receiver 182 receives event information from the event sorter 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 a touch movement, the event information also optionally includes the speed and direction of the sub-event. In some embodiments, the event includes a rotation of the device from one orientation to another (e.g., from portrait to landscape or vice versa), and the event information includes corresponding information about the current orientation of the device (also called the device's attitude).

[0142] The event comparator 184 compares the event information with 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 an event definition 186. The event definition 186 includes a definition of an event (e.g., a predefined set of sub-events), such as, for example, event 1 (187-1), event 2 (187-2), etc. In some embodiments, the sub-events in the event 187 include, for example, touch start, touch end, touch movement, touch stop, and multiple touches. In one example, the definition for event 1 (187-1) is a double tap on a displayed object. The double tap includes, for example, a first touch on a displayed object during a predetermined phase (touch start), a first lift-off during a predetermined phase (touch end), a second touch on a displayed object during a predetermined phase (touch start), and a second lift-off during a predetermined phase (touch end). In another example, a definition of event 2 (187-2) is a drag operation on a displayed object, including, for example, a touch (or contact) on the displayed object through a predefined phase, a movement of the touch across the touch-sensitive display 112, and a lift-off of the touch (end of the touch). In some embodiments, the event also includes information regarding one or more associated event handlers 190.

[0143] In some embodiments, event definition 187 includes a definition of the event for each user interface object. In some embodiments, event comparator 184 performs a hit test to determine which user interface object is associated with the sub-event. For example, in an application view in which three user interface objects are displayed on touch-sensitive display 112, when a touch is detected on touch-sensitive display 112, 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 corresponding event handler 190, event comparator 184 uses the results of the hit test to determine which event handler 190 should be activated. For example, event comparator 184 selects the event handler associated with the sub-event and object that triggers the hit test.

[0144] In some embodiments, the definition for the corresponding event (187) also includes a delay action that delays delivery of the event information until after it has been determined whether a set of sub-events corresponds to the event type of the event recognizer.

[0145] When the corresponding event recognizer 180 determines that the sequence of sub-events does not match any of the events in the event definition 186, the corresponding event recognizer 180 enters an event disabled, event failed, or event finished state and thereafter ignores the next sub-event of the touch-based gesture. In this situation, 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.

[0146] In some embodiments, the corresponding event recognizer 180 includes metadata 183 with configurable properties, flags, and / or lists that indicate to actively participating event recognizers how the event delivery system should perform sub-event delivery. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate how event recognizers interact or are enabled to interact with each other. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate how sub-events are delivered to various levels in a view or programmatic hierarchy.

[0147] In some embodiments, each event recognizer 180 activates an event handler 190 associated with an event when one or more particular sub-events of the event are recognized. In some embodiments, each event recognizer 180 delivers event information associated with the event to the event handler 190. Activating the event handler 190 is separate from sending (and deferring sending) the sub-events to the respective hit view. In some embodiments, the event recognizer 180 pops a flag associated with the recognized event, and the event handler 190 associated with the flag catches the flag and performs predefined processing.

[0148] 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 the event information to an event handler associated with the set of sub-events or to an actively interested view. The event handler associated with the set of sub-events or to an actively interested view receives the event information and performs predefined processing.

[0149] In some embodiments, data updater 176 creates and updates data used by application 136-1. For example, data updater 176 updates phone numbers used by contacts module 137 or stores video files used by a video player module. In some embodiments, object updater 177 creates and updates objects used by application 136-1. For example, object updater 177 creates new user interface objects or updates the positions of user interface objects. GUI updater 178 updates the GUI. For example, GUI updater 178 prepares display information and sends the display information to graphics module 132 for display on the touch-sensitive display.

[0150] In some embodiments, event handler(s) 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 the respective application 136-1 or application view 191. In other embodiments, they are included in two or more software modules.

[0151] It should be understood that the foregoing discussion regarding event processing of a user's touch on a touch-sensitive display also applies to other forms of user input for operating multifunction device 100 with an input device, not all of which are initiated on a touch screen. For example, mouse movements and mouse button presses, optionally adapted to single or multiple keyboard presses or holds, touch movements such as tapping, dragging, scrolling on a touchpad, pen stylus input, device movements, verbal cues, detected eye movements, biometric input, and / or any combination thereof, are optionally utilized as inputs corresponding to sub-events that define the event to be recognized.

[0152] FIG. 2 illustrates portable multifunction device 100 having touch screen 112, according to some embodiments. The touch screen optionally displays one or more graphics in user interface (UI) 200. In this embodiment, as well as embodiments described below, a user can select one or more of the graphics by making a gesture on the graphics, for example, with one or more fingers 202 (not drawn to scale) or one or more styluses 203 (not drawn to scale). In some embodiments, selection of one or more graphics occurs when the user loses contact with the one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (left to right, right to left, upward and / or downward), and / or rolling of a finger in contact with device 100 (right to left, left to right, upward and / or downward). In some implementations or situations, accidental contact with a graphic does not select the graphic, for example, a swipe gesture sweeping over an application icon optionally does not select the corresponding application when the gesture corresponding to selection is a tap.

[0153] Device 100 also optionally includes one or more physical buttons, such as a “home” or menu button 204. As mentioned above, menu button 204 is optionally used for navigation to any application 136 in a set of applications optionally executing on device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key in a GUI displayed on touch screen 112.

[0154] In some embodiments, device 100 includes a touch screen 112, a menu button 204, a push button 206 for turning power to the device on / off and locking the device, a volume control button(s) 208, a subscriber identity module (SIM) card slot 210, a headset jack 212, and an external port 124 for docking / charging. Push button 206 is optionally used to turn power on / off on the device by pressing and holding the button down for a predefined time, to lock the device by pressing and releasing the button before the predefined time has elapsed, and / or to unlock the device or initiate an unlocking process. In an alternative embodiment, device 100 also receives verbal input through microphone 113 to activate or deactivate some features. Device 100 also optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact on touch screen 112 and / or one or more tactile output generators 167 for generating a tactile output to a user of device 100.

[0155] FIG. 3 is a block diagram of an exemplary multifunction device with a display and a touch-sensitive surface, according to 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 playback device, a navigation device, an educational device (such as a child's learning toy), a gaming system, or a control device (e.g., a home or commercial controller). Device 300 typically includes one or more processing units (CPUs) 310, one or more network or other communication interfaces 360, memory 370, and one or more communication buses 320 for interconnecting these components. Communication bus 320 optionally includes circuitry (sometimes called a chipset) that interconnects and controls communication between system components. Device 300 includes input / output (I / O) interfaces 330, including a display 340, which is typically a touchscreen display. I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, a tactile output generator 357 (e.g., similar to tactile output generator(s) 167 described above with reference to FIG. 1A) for generating tactile output on device 300, sensors 359 (e.g., optical sensors, acceleration sensors, proximity sensors, touch-sensitive sensors, and / or contact intensity sensors similar to contact intensity sensor(s) 165 described above with reference to FIG. 1A). Memory 370 includes high-speed random access memory, such as DRAM, SRAM, DDR RAM, or other random access solid-state memory devices, and optionally includes non-volatile memory, such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. Memory 370 optionally includes one or more storage devices located remotely from CPU(s) 310.In some embodiments, memory 370 stores programs, modules, and data structures similar to, or a subset of, the programs, modules, and data structures stored in memory 102 of portable multifunction device 100 (FIG. 1A). Additionally, memory 370 optionally stores additional programs, modules, and data structures not present in memory 102 of portable multifunction device 100. For example, memory 370 of device 300 optionally stores drawing module 380, presentation module 382, ​​word processing module 384, website creation module 386, disk authoring module 388, and / or spreadsheet module 390, while memory 102 of portable multifunction device 100 (FIG. 1A) optionally does not store these modules.

[0156] Each of the above-identified elements of FIG. 3 is optionally stored in one or more of the memory devices mentioned above. Each of the above-identified modules corresponds to an instruction set that performs the functions described above. The above-identified modules or programs (e.g., instruction sets) are optionally not implemented as separate software programs, procedures, or modules, and thus various embodiments combine or otherwise rearrange various subsets of these modules. In some embodiments, memory 370 optionally stores a subset of the above-identified modules and data structures. Additionally, memory 370 optionally stores additional modules and data structures not described above.

[0157] Attention is now directed to embodiments of user interfaces, for example and optionally implemented on portable multifunction device 100.

[0158] 4A shows an exemplary user interface for a menu of applications on portable multifunction device 100, according to some embodiments. A similar user interface is optionally implemented on device 300. In some embodiments, user interface 400 includes the following elements, or a subset or superset thereof: ● signal strength indicator(s) 402 for wireless communication(s), such as cellular and Wi-Fi signals; ●Time 404, ●Bluetooth indicator 405, ● Battery status indicator 406, A tray 408 containing icons for frequently used applications, such as: ○ An icon 416 for the phone module 138, labeled "Phone", optionally including an indicator 414 of the number of missed calls or voicemail messages; ○ An icon 418 for the email client module 140, labeled "Mail", optionally including an indicator 410 of the number of unread emails; ○ An icon 420 for the browser module 147, labeled "Browser", and ○ An icon 422 for the video and music player module 152, also called the iPod (trademark of Apple Inc.) module 152, labeled "iPod"; and ●Icons for other applications, such as: ○ An icon 424 for the IM module 141 labeled "Messages", ○ An icon 426 for the calendar module 148, labeled "Calendar"; ○ An icon 428 for the image management module 144, labeled "Photos"; ○ An icon 430 for the camera module 143, labeled "camera"; ○ An icon 432 for the online video module 155, labeled "Online Video"; ○ Icon 434 for stock price widget 149-2, labeled "Stock Price" ○ Icon 436 for the map module 154, labeled "Map"; ○ Icon 438 for weather widget 149-1, labeled "Weather"; ○ Icon 440 for alarm clock widget 149-4, labeled "Clock"; ○ An icon 442 for the training support module 142, labeled "Training Support"; ○ An icon 444 for the notes module 153, labeled "Notes"; and ○ An icon 446 for a settings application or module, labeled “Settings,” that provides access to settings related to the device 100 and its various applications 136.

[0159] 4A are merely exemplary. For example, icon 422 for video and music player module 152 is labeled "Music" or "Music Player." Other labels are optionally used for the various application icons. In some embodiments, the label for each application icon includes the name of the application that corresponds to the respective application icon. In some embodiments, the label of a particular application icon is different from the name of the application that corresponds to the particular application icon.

[0160] 4B shows an exemplary user interface on a device (e.g., device 300 of FIG. 3) that includes a touch-sensitive surface 451 (e.g., tablet or touchpad 355 of FIG. 3) that is separate from display 450 (e.g., touchscreen display 112). Device 300 also optionally includes one or more contact intensity sensors (e.g., one or more of sensors 359) for detecting the intensity of a contact on touch-sensitive surface 451 and / or one or more tactile output generators 357 for generating a tactile output to a user of device 300.

[0161] Although some of the following examples are described with reference to input on touch screen display 112 (where the touch-sensitive surface and display are combined), in some embodiments, the device detects input on a touch-sensitive surface that is separate from the display, as shown in FIG. 4B. In some embodiments, this touch-sensitive surface (e.g., 451 in FIG. 4B) has a major axis (e.g., 452 in FIG. 4B) that corresponds to a major axis (e.g., 453 in FIG. 4B) on the display (e.g., 450). According to these embodiments, the device detects contact with touch-sensitive surface 451 (e.g., 460 and 462 in FIG. 4B) at locations that correspond to their respective locations on the display (e.g., in FIG. 4B, 460 corresponds to 468 and 462 corresponds to 470). In this manner, when the touch-sensitive surface is separate from the display, user input (e.g., contacts 460 and 462 and their movement) detected by the device on the touch-sensitive surface (e.g., 451 in FIG. 4B ) is used by the device to operate a user interface on the display (e.g., 450 in FIG. 4B ) of the multifunction device. It is to be understood that similar methods are optionally used for the other user interfaces described herein.

[0162] Additionally, although the following examples are described primarily with reference to finger input (e.g., finger touch, finger tap gesture, finger swipe gesture), it should be understood that in some embodiments, one or more of those finger inputs are replaced with input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture is optionally replaced with a mouse click (e.g., instead of a touch) followed by cursor movement along the path of the swipe (e.g., instead of a contact movement). As another example, a tap gesture is optionally replaced with a mouse click while the cursor is positioned over the tap gesture location (e.g., instead of detecting a contact followed by ceasing to detect a contact). Similarly, it should be understood that when multiple user inputs are detected simultaneously, multiple computer mice are optionally used simultaneously, or mice and finger contacts are optionally used simultaneously.

[0163] FIG. 5A illustrates an exemplary personal electronic device 500. Device 500 includes a body 502. In some embodiments, device 500 can include some or all of the features described with respect to devices 100 and 300 (e.g., FIGS. 1A-4B). In some embodiments, device 500 has a touch-sensitive display screen 504, hereafter touch screen 504. Instead of, or in addition to, touch screen 504, device 500 has a display and a touch-sensitive surface. Similar to devices 100 and 300, in some embodiments, touch screen 504 (or touch-sensitive surface) optionally includes one or more intensity sensors for detecting the intensity of a contact (e.g., a touch) being applied. The one or more intensity sensors of touch screen 504 (or touch-sensitive surface) can provide output data representative of the intensity of the touch. A user interface of device 500 can respond to a touch based on the intensity of the touch, meaning that touches of different intensities can invoke different user interface actions on device 500.

[0164] Exemplary techniques for detecting and processing touch intensity can be found, for example, in related applications, International Patent Application No. PCT / US2013 / 040061, entitled "Device, Method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application," filed May 8, 2013 (published as WO 2013 / 169849), and PCT / US2013 / 069483, entitled "Device, Method, and Graphical User Interface for Transitioning Between Touch Input to Display Output Relationships," filed November 11, 2013 (published as WO 2014 / 105276), each of which is incorporated by reference in its entirety.

[0165] In some embodiments, device 500 has one or more input mechanisms 506 and 508. Input mechanisms 506 and 508, if included, can be physical. Examples of physical input mechanisms include push buttons and rotatable mechanisms. In some embodiments, device 500 has one or more attachment mechanisms. Such attachment mechanisms, if included, can allow device 500 to be attached to, for example, hats, eyewear, earrings, necklaces, shirts, jackets, bracelets, watch bands, chains, pants, belts, shoes, wallets, backpacks, etc. These attachment mechanisms allow device 500 to be worn by a user.

[0166] FIG. 5B illustrates an exemplary personal electronic device 500. In some embodiments, the device 500 may include some or all of the components described with respect to FIGS. 1A, 1B, and 3. The device 500 has a bus 512 operably coupling an I / O unit 514 to one or more computer processors 516 and a memory 518. The I / O unit 514 may be connected to a display 504, which may have a touch-sensing component 522 and, optionally, an intensity sensor 524 (e.g., a contact intensity sensor). Additionally, the I / O unit 514 may connect to a communication unit 530 for receiving application and operating system data using Wi-Fi, Bluetooth, near field communication (NFC), cellular, and / or other wireless communication technologies. The device 500 may include an input mechanism 506 and / or an input mechanism 508. The input mechanism 506 is optionally, for example, a rotatable input device or a depressible and rotatable input device. The input mechanism 508 is optionally, in some implementations, a button.

[0167] The input mechanism 508 is optionally a microphone in some embodiments. The personal electronic device 500 optionally includes various sensors, such as a GPS sensor 532, an accelerometer 534, an orientation sensor 540 (e.g., a compass), a gyroscope 536, a motion sensor 538, and / or combinations thereof, all of which may be operatively connected to the I / O section 514.

[0168] The memory 518 of the personal electronic device 500 may include one or more non-transitory computer-readable storage media for storing computer-executable instructions that, when executed by one or more computer processors 516, may, for example, cause the computer processors to perform the techniques described below, including processes 700, 900, 1000, 1100, 1200, and 1400 (FIGS. 7, 9A, 9B, 10A, 10B, 11A, 11B, 12A, 12B, 14A, and 14B). A computer-readable storage medium may be any medium that can tangibly contain or store computer-executable instructions for use by or in connection with an instruction execution system, apparatus, or device. In some examples, the storage medium is a transitory computer-readable storage medium. In some examples, the storage medium is a non-transitory computer-readable storage medium. Non-transitory computer-readable storage media may include, but are not limited to, magnetic, optical, and / or semiconductor storage devices. Examples of such storage devices include magnetic disks, optical disks based on CD, DVD, or Blu-ray technology, and persistent solid-state memory such as flash, solid-state drives, etc. Personal electronic device 500 is not limited to the components and configuration of FIG. 5B and may include other or additional components in multiple configurations.

[0169] As used herein, the term "affordance" refers to a user-interactive graphical user interface object that is optionally displayed on a display screen of device 100, 300 and / or 500 (FIGS. 1A, 3 and 5A-5B). For example, images (e.g., icons), buttons and text (e.g., hyperlinks) each, optionally, constitute an affordance.

[0170] As used herein, the term "focus selector" refers to an input element that indicates the current portion of a user interface with which a user is interacting. In some implementations involving a cursor or other position marker, when an input (e.g., a press input) is detected on a touch-sensitive surface (e.g., touchpad 355 in FIG. 3 or touch-sensitive surface 451 in FIG. 4B) while the cursor is over a particular user interface element (e.g., a button, window, slider, or other user interface element), the cursor acts as a "focus selector" and the particular user interface element is adjusted according to the detected input. In some implementations involving a touchscreen display (e.g., touch-sensitive display system 112 in FIG. 1A or touchscreen 112 in FIG. 4A) that allows direct interaction with user interface elements on the touchscreen display, a contact detected on the touchscreen acts as a "focus selector" such that when an input (e.g., a press input by a contact) is detected at the location of a particular user interface element (e.g., a button, window, slider, or other user interface element) on the touchscreen display, the particular user interface element is adjusted according to the detected input. In some implementations, focus is moved from one region of the user interface to another region of the user interface (e.g., by using the tab or arrow keys to move focus from one button to another) without a corresponding cursor movement or contact movement on the touchscreen display, and in these implementations the focus selector moves to follow the movement of focus between different regions of the user interface. Regardless of the specific form taken by the focus selector, the focus selector is generally a user interface element (or contact on a touchscreen display) that is controlled by the user to communicate the user's intended interaction with the user interface (e.g., by indicating to the device which element of the user interface the user intends to interact with).For example, the position of a focus selector (e.g., cursor, contact, or selection box) over a corresponding button while a pressure input is detected on a touch-sensitive surface (e.g., a touchpad or touchscreen) indicates that the user intends to activate the corresponding button (and not other user interface elements shown on the device's display).

[0171] As used herein and in the claims, the term "characteristic intensity" of a contact refers to a characteristic of the contact based on one or more intensities of the contact. In some embodiments, the characteristic intensity is based on a plurality of intensity samples. The characteristic intensity is optionally based on a predefined number of intensity samples or a set of intensity samples collected during a predefined time period (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) relative to a predefined event (e.g., after detecting the contact, before detecting lift-off of the contact, before or after detecting the start of movement of the contact, before detecting the end of the contact, before or after detecting an increase in the intensity of the contact, and / or before or after detecting a decrease in the intensity of the contact). The characteristic intensity of the contact is optionally based on one or more of: a maximum value of the intensity of the contact, a mean value of the intensity of the contact, an average value of the intensity of the contact, the top 10% values ​​of the intensity of the contact, a half value of the maximum value of the intensity of the contact, a 90% value of the maximum value of the intensity of the contact, etc. In some embodiments, the duration of the contact is used to determine the characteristic intensity (e.g., when the characteristic intensity is an average of the intensity of the contact over time). In some embodiments, the characteristic intensity is compared to a set of one or more intensity thresholds to determine whether an action is performed by the user. For example, the set of one or more intensity thresholds optionally includes a first intensity threshold and a second intensity threshold. In this example, a contact having a characteristic intensity that does not exceed the first threshold results in a first action being performed, a contact having a characteristic intensity that exceeds the first intensity threshold but does not exceed the second intensity threshold results in a second action being performed, and a contact having a characteristic intensity that exceeds the second threshold results in a third action being performed. In some embodiments, the comparison between the characteristic intensity and the one or more thresholds is used to determine whether to perform one or more actions (e.g., to perform each action or to forgo performing each action), rather than to determine whether to perform the first action or the second action.

[0172] In some embodiments, a portion of the gesture is identified for purposes of determining the characteristic intensity. For example, the touch-sensitive surface optionally receives successive swipe contacts that transition from a start position to an end position, where the intensity of the contact increases. In this example, the characteristic intensity of the contact at the end position is optionally based on only a portion of the swipe contact (e.g., only the portion of the swipe contact at the end position) rather than the entire successive swipe contact. In some embodiments, a smoothing algorithm is optionally applied to the intensity of the swipe contact before determining the characteristic intensity of the contact. For example, the smoothing algorithm optionally includes one or more of an unweighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some circumstances, these smoothing algorithms remove small increases or decreases in the intensity of the swipe contact for purposes of determining the characteristic intensity.

[0173] The intensity of the contact on the touch-sensitive surface is optionally characterized against one or more intensity thresholds, such as a contact-detection intensity threshold, a light pressure intensity threshold, a deep pressure intensity threshold, and / or one or more other intensity thresholds. In some embodiments, the light pressure intensity threshold corresponds to an intensity at which the device performs an operation typically associated with clicking a physical mouse button or trackpad. In some embodiments, the deep pressure intensity threshold corresponds to an intensity at which the device performs an operation different from an operation typically associated with clicking a physical mouse button or trackpad. In some embodiments, if the contact is detected with a characteristic intensity below the light pressure intensity threshold (e.g., and above a slight contact-detection intensity threshold below which the contact is no longer detected), the device moves a focus selector in accordance with the movement of the contact on the touch-sensitive surface without performing an action associated with the light pressure intensity threshold or the deep pressure intensity threshold. Generally, unless otherwise specified, these intensity thresholds are consistent across different sets of user interface diagrams.

[0174] An increase in the characteristic intensity of a contact from an intensity below a light pressure intensity threshold to an intensity between the light pressure intensity threshold and the deep pressure intensity threshold may be referred to as a "light press" input. An increase in the characteristic intensity of a contact from an intensity below a deep pressure intensity threshold to an intensity above a deep pressure intensity threshold may be referred to as a "deep press" input. An increase in the characteristic intensity of a contact from an intensity below a contact detection intensity threshold to an intensity between the contact detection intensity threshold and the light pressure intensity threshold may be referred to as detection of a contact on the touch surface. A decrease in the characteristic intensity of a contact from an intensity above the contact detection intensity threshold to an intensity below the contact detection intensity threshold may be referred to as detection of a lift-off of the contact from the touch surface. In some embodiments, the contact detection intensity threshold is zero. In some embodiments, the contact detection intensity threshold is greater than zero.

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

[0176] In some embodiments, the device employs intensity hysteresis to avoid accidental inputs, sometimes referred to as "jitter," and the device defines or selects a hysteresis intensity threshold that has a predefined relationship to the pressure input intensity threshold (e.g., the hysteresis intensity threshold is X intensity units below the pressure input intensity threshold, or the hysteresis intensity threshold is 75%, 90%, or some reasonable percentage of the pressure input intensity threshold). Thus, in some embodiments, the pressure input includes an increase in the intensity of each contact above the pressure input intensity threshold and a subsequent decrease in the intensity of the contact below a hysteresis intensity threshold corresponding to the pressure input intensity threshold, and a respective action is performed in response to detecting a subsequent decrease in the intensity of each contact below that hysteresis intensity threshold (e.g., an "upstroke" of a respective pressure input). Similarly, in some embodiments, a pressure input is detected only when the device detects an increase in the intensity of the contact from an intensity below the hysteresis intensity threshold to an intensity above the pressure input intensity threshold, and optionally a subsequent decrease in the intensity of the contact to an intensity below the hysteresis intensity, and a respective action is performed in response to detection of that pressure input (e.g., an increase in the intensity of the contact or a decrease in the intensity of the contact, as the case may be).

[0177] For ease of explanation, descriptions of actions performed in response to a pressure input associated with a pressure input intensity threshold or in response to a gesture including a pressure input are, optionally, triggered in response to detecting any of: an increase in the intensity of a contact above the pressure input intensity threshold, an increase in the intensity of a contact from an intensity below a hysteresis intensity threshold to an intensity above the pressure input intensity threshold, a decrease in the intensity of a contact below the pressure input intensity threshold, and / or a decrease in the intensity of a contact below a hysteresis intensity threshold corresponding to the pressure input intensity threshold. Additionally, in embodiments described as an action being performed in response to detecting a decrease in the intensity of a contact below a pressure input intensity threshold, the action is, optionally, performed in response to detecting a decrease in the intensity of a contact below a hysteresis intensity threshold corresponding to and lower than the pressure input intensity threshold.

[0178] Attention now turns to embodiments of user interfaces (“UI”) and associated processes implemented on an electronic device, such as portable multifunction device 100, device 300, or device 500.

[0179] 6A-6AN show example user interfaces for navigating between avatars within an application (e.g., a messaging application) according to some embodiments. The user interfaces in these figures are used to illustrate processes described below, including the process of FIG.

[0180] FIG. 6A illustrates device 600 having a display 601, which in some cases is a touch-sensitive display. In some embodiments, device 600 also includes a camera 602 that includes at least an image sensor capable of capturing data representative of a portion of a light spectrum (e.g., visible light, infrared light, or ultraviolet light). In some embodiments, camera 602 includes multiple image sensors and / or other types of sensors. In some embodiments, in addition to capturing data representative of the sensed light, camera 602 can capture other types of data, such as depth data. For example, in some embodiments, camera 602 also uses speckle, time-of-flight, parallax, or focus-based techniques to capture depth data. Image data captured by device 600 using camera 602 includes data corresponding to a portion of a light spectrum for a scene within the camera's field of view. In some embodiments, the captured image data also includes depth data related to the light data. In some other embodiments, the captured image data includes sufficient data to determine or generate depth data related to the portion of the light spectrum. In some embodiments, device 600 includes one or more features of device 100 , device 300 , or device 500 .

[0181] In some examples, the electronic device 600 includes a depth camera, such as an infrared camera, a thermographic camera, or a combination thereof. In some examples, the device further includes a light emitting device (e.g., a light projector), such as an IR flood light, a structured light projector, or a combination thereof. The light emitting device is optionally used to illuminate the subject when capturing an image by the visible light camera and the depth camera (e.g., an IR camera), and information from the depth camera and the visible light camera is used to determine a depth map of various portions of the subject captured by the visible light camera. In some embodiments, the depth map (e.g., a depth map image) includes information (e.g., values) related to the distance of objects in the scene from the viewpoint (e.g., the camera). In one embodiment of the depth map, each depth pixel defines a position in the Z axis of the viewpoint where a corresponding two-dimensional pixel is located. In some examples, the depth map consists of pixels, where each pixel is defined by a value (e.g., 0 to 255). For example, a value of "0" represents a pixel located farthest in a "three-dimensional" scene, and a value of "255" represents a pixel located closest to the viewpoint (e.g., camera) in a "three-dimensional" scene. In other examples, the depth map represents the distance between an object in a scene and the plane of the viewpoint. In some embodiments, the depth map includes information about the relative depth of various features of the target object in the field of view of the depth camera (e.g., the relative depth of the eyes, nose, mouth, and ears of a user's face). In some embodiments, the depth map includes information that allows the device to determine the contour of the target object in the Z direction. In some embodiments, the lighting effects described herein are displayed using disparity information from two cameras (e.g., two visible light cameras) for the rear image and depth information from the depth camera in combination with image data from a visible light camera for the front image (e.g., a selfie image).In some embodiments, the same user interface is used when two visible light cameras are used to determine depth information and when a depth camera is used to determine depth information, providing a user with a consistent user experience even when significantly different techniques are used to determine the information used in generating lighting effects. In some embodiments, the device detects selection of a camera switching affordance while displaying a camera user interface with one of the lighting effects applied, and switches from the front camera (e.g., a depth camera and a visible light camera) to the rear camera (e.g., two visible light cameras spaced apart from each other) (or vice versa), replacing the display of the front camera's field of view with the rear camera's field of view (or vice versa) while maintaining the display of the user interface controls for applying the lighting effect.

[0182] In Figure 6A, the device 600 displays a messaging user interface 603 of a messaging application. The messaging user interface 603 includes a message display area 604 that contains a message 605 sent to participants in the message conversation (represented by recipient identifiers 606). The messaging user interface 603 also includes a message composition field 608 that displays input (e.g., text input, multimedia input, etc.) for sending to participants in the message conversation. The messaging user interface 603 also includes an application dock affordance 610, a keyboard display area 612, and a text candidate area 614.

[0183] In FIG. 6B, device 600 detects input 616 (eg, a touch input on display 601) at a location corresponding to application dock affordance 610.

[0184] 6C, in response to detecting input 616, device 600 replaces text candidate region 614 with an application dock 618 having application affordances 620 corresponding to various applications. Device 600 also replaces keyboard display region 612 with an application display region 622 that displays an application user interface corresponding to a selected one of the application affordances.

[0185] In FIG. 6D, device 600 detects input 624 that selects application affordance 620a (eg, a touch input on display 601 at a location that corresponds to application affordance 620a).

[0186] In FIG. 6E, in response to detecting an input 624, the device 600 replaces the application dock 618 and the application display area 622 with an avatar splash screen 626 having an exemplary avatar 628. The exemplary avatars include an exemplary customizable avatar 628a and an exemplary non-customizable avatar 628b. In the embodiment shown in FIG. 6E, the customizable avatar 628a is positioned above the non-customizable avatar 628b. In some embodiments, the avatar splash screen 626 includes animated representations of the exemplary avatars 628 that move and change their facial expressions to give the appearance of the exemplary avatars interacting with each other (e.g., appearing to talk to each other, wink, laugh, smile, etc.). In some embodiments, the device 600 displays the avatar splash screen 626 only when the application affordance 620a is first selected or when a customizable avatar has not been created. In some embodiments, when the avatar splash screen 626 is not displayed, the device 600 optionally displays an avatar selection interface, such as a reduced avatar selection interface 668 (see FIG. 6L and corresponding description below).

[0187] In some embodiments, the virtual avatar is a representation of the user that may be graphically rendered (e.g., a graphic representation of the user). In some embodiments, the virtual avatar is non-photorealistic (e.g., cartoonish). In some embodiments, the virtual avatar includes an avatar face having one or more avatar features (e.g., avatar facial features). In some embodiments, the avatar features correspond to (e.g., are mapped to) one or more physical features of the user's face such that detected movement (e.g., determined based on a camera, such as a depth-sensing camera) of the user's physical features affects the avatar features (e.g., affects the graphic representation of the features).

[0188] In some examples, the user can manipulate the characteristics or features of the virtual avatar using camera sensors (e.g., camera module 143, light sensor 164) and, optionally, depth sensors (e.g., depth camera sensor 175). When the user's physical characteristics (e.g., facial features) and position (e.g., head position, head rotation, or head tilt) change, the electronic device detects the change and modifies the displayed image of the virtual avatar to reflect the change in the user's physical characteristics and position. In some embodiments, the changes in the user's physical characteristics and position indicate different facial expressions, emotions, context, tone, or other non-verbal communication. In some embodiments, the electronic device modifies the displayed image of the virtual avatar to represent these facial expressions, emotions, context, tone, or other non-verbal communication.

[0189] In some embodiments, a customizable avatar is a virtual avatar that can be selected and customized by a user, for example to achieve a desired appearance (e.g., to resemble the user). A customizable avatar typically has the appearance of a human character, as opposed to non-human characters such as anthropomorphized configurations of animals or other non-human objects. Additionally, avatar features may be created or modified, if desired, using an avatar editing user interface (such as, for example, the avatar editing user interface described below with respect to FIGS. 8A-8CF). In some embodiments, a customizable avatar may be created and configured to achieve a customized appearance, physical structure, or modeled behavior.

[0190] In some embodiments, non-customizable avatars can be selected by a user, but are typically not configurable, although their appearance can be altered by face tracking, as described in more detail below. Instead, non-customizable avatars are pre-configured and typically have no characteristic components that can be altered by a user. In some embodiments, non-customizable avatars have the appearance of non-human characters, such as anthropomorphic configurations of animals or other non-human objects. Non-customizable avatars cannot be created by a user, nor can they be modified to effect significant changes in the appearance, physical structure, or modeled behavior of the non-customizable avatar.

[0191] In FIG. 6F, device 600 detects input 630 (e.g., a touch gesture on display 601) on continue affordance 632.

[0192] In FIG. 6G, in response to detecting the input 630, the device 600 displays an expanded avatar selection interface 634 that provides an initial collection of selectable avatar options for the messaging user interface 608 (e.g., to send to participants in a message conversation). In embodiments described herein, an avatar is a representation of a virtual character that may be animated to display changes (e.g., in response to the device detecting a change in the user's face). An avatar can correspond to an avatar option, which is a static representation of an avatar that has the same appearance and characteristics as the avatar, but is typically not animated. An avatar option is typically a selectable representation of an avatar. When an avatar option is selected, a corresponding avatar is often displayed.

[0193] The expanded avatar selection interface 634 includes an avatar display area 636 and an avatar options area 638. The avatar options area 638 includes a collection of selectable avatar options 640. The selected avatar option is indicated by a border 642, which in FIG. 6G is displayed around the initially selected monkey avatar option 640a. The selected avatar option is represented in the avatar display area 636 as an avatar 645 (e.g., avatar 645 is a monkey corresponding to monkey avatar option 640a). Each avatar option 640 may be selected by tapping on the respective avatar option. Thus, in response to receiving a selection of a different one of the avatar options 640, the device 600 changes the displayed avatar 645 to represent the newly selected avatar option and moves the border 642 to the selected avatar option. In this manner, when device 600 detects a selection of unicorn avatar option 640b, device 600 displays border 642 around unicorn avatar option 640b and modifies avatar 645 to appear as a unicorn corresponding to unicorn avatar option 640b.

[0194] Avatar display area 636 also includes a capture affordance 644 that may be selected to capture an image of avatar 645 for sending to participants in a message conversation (see messaging user interface 603). In some embodiments, the captured image is a still image or a video recording, depending on the type of gesture detected at capture affordance 644. For example, if device 600 detects a tap gesture at capture affordance 644, device 600 captures a still image of avatar 645 when the tap gesture occurs. If device 600 detects a tap-and-hold gesture at capture affordance 644, device 600 captures a video recording of avatar 645 for the period that the tap-and-hold gesture lasts. In some embodiments, the video recording stops when the finger is removed from the affordance. In some embodiments, the video recording continues until a subsequent input (e.g., a tap input) is detected at a location corresponding to the affordance. In some embodiments, the captured image (e.g., a still image or a video recording) of the avatar 645 is then sent to the participants in the message conversation after being inserted into the message composition field 608. In some embodiments, the captured image of the avatar 645 is sent directly to the participants in the message conversation without inserting the captured image into the message composition field 608.

[0195] In some embodiments, device 600 tracks the movement and position (e.g., rotational and / or translational movement) of a user's face disposed within the field of view of a camera (e.g., camera 602) and accordingly updates the appearance of avatar 645 based on detected changes in the user's face (often referred to herein as a "face tracking" function). For example, as shown in FIG. 6H, device 600 updates the appearance of avatar 645 in response to detecting changes in the user's face (e.g., using camera 602). In the example of FIG. 6H, avatar 645 is displayed with an open mouth, wide eyes, and tilted, reflecting a similar expression and position of a user's face disposed within the field of view of camera 602. Such changes to avatar 645 may be captured using capture affordance 644 and optionally transmitted to participants of the message conversation shown in FIG. 6A. Although avatar 645 shown in FIG. 6H is a non-customizable avatar, device 600 may modify a customizable avatar in a similar manner.

[0196] In the expanded avatar selection interface shown in FIGS. 6G-6I, all avatar options 640 displayed in the avatar options area 638 are non-customizable avatars preconfigured for the user's immediate selection. This is because no customizable avatars have been created. However, as shown in FIG. 6I, the device 600 displays an avatar creation prompt 646 extending from the avatar creation icon 648 to prompt the user to select the avatar creation icon 648, and when the user selects the avatar creation icon 648, the device 600 begins the process of creating a new customizable avatar, which can then be added to the avatar options area 638 and, optionally, used in the messaging user interface 603. The displayed combination of the avatar creation prompt 646 and the avatar creation icon 648 (having a "+" shape in FIG. 6I) informs the user that by selecting the avatar creation icon 648, the user can create a customized avatar that can be added to the expanded avatar selection interface 634 and the library interface 686 of FIG. 6U.

[0197] In some embodiments, the avatar creation prompt 646 appears after a slight delay and displays an animation of various customizable avatar examples appearing, e.g., changing facial expressions. For example, in Figure 6I, the avatar creation prompt 646 displays an exemplary customizable avatar 646a, having a male appearance wearing a hat and glasses and having a smiling facial expression. In Figure 6J, the avatar creation prompt 646 transitions to displaying an exemplary customizable avatar 646b, having a female appearance with black hair parted in the center and having a full smiling facial expression.

[0198] In some embodiments, the device 600 displays new customizable avatars, such as avatars created after selecting the create-avatar icon 648, that appear at the end of the collection of avatar options 640 in the avatar options area 638 and not between any two non-customizable avatars. For example, all newly created customizable avatars may be displayed at the end of the collection of avatars (e.g., after the unicorn avatar option 640b, but not between the unicorn avatar option 640b and the chicken avatar option 640c) or at the beginning of the collection of avatars (e.g., next to the create-avatar icon 648 or between the create-avatar icon 648 and the monkey avatar option 640a). In this manner, all customizable avatars are displayed grouped together and separated (e.g., separated or distinct) from non-customizable avatars. This separation of all customizable avatars from non-customizable avatars is maintained in the various user interfaces described with respect to FIGS. 6A-6AN.

[0199] In FIG. 6J, device 600 detects input 650 (eg, a tap gesture on display 601) at a location corresponding to avatar creation icon 648.

[0200] In Figure 6K, device 600, in response to detecting input 650, displays avatar editing user interface 652 having cancel affordance 654 and completion affordance 666. Avatar editing user interface 652 is similar to avatar editing user interface 801 shown in Figure 8A. Avatar editing user interface 652 can be used to create a customizable avatar in accordance with the disclosure provided below with respect to Figures 8A-8CF. For brevity, details regarding creating and editing avatars will not be repeated here, but are described later in this disclosure (e.g., Figures 8A-8CE and related disclosures).

[0201] After the user customizes the avatar in the avatar editing user interface 652, the user can select the completion affordance 652 to save the avatar as a new customized avatar (shown in FIG. 6L as a customizable female avatar 670). In response to detecting a selection of the completion affordance 652, the device 600 saves the new customized avatar and displays the messaging user interface 603 having a reduced avatar selection interface 668, as shown in FIG. 6L. Alternatively, the user can select the cancel affordance 654 to discard the new customized avatar and return to the expanded avatar selection interface 634, as shown in FIG. 6H. After the device 600 saves the new customized avatar, the avatar can be displayed in the expanded avatar selection interface 634 by returning to the expanded avatar selection interface 634, as described below. Because the new customized avatar is a customizable avatar rather than a non-customizable avatar, when the new customized avatar is displayed in the expanded avatar selection interface 634, it is placed separately from the non-customizable avatars (e.g., at the edge of the collection of avatar options 640, but not between any two non-customizable avatars) and is grouped with the other customizable avatars.

[0202] In FIG. 6L, the device 600 displays a reduced avatar selection interface 668 that provides a close-up view of the avatar options (e.g., avatar option 640) displayed in the expanded avatar selection interface 634. The reduced avatar selection interface 668 includes a scrollable list 675 of avatars available for user selection (corresponding to avatar option 640). The device 600 displays the currently selected avatar (e.g., female avatar 670 of FIG. 6L) in a centered position within the reduced avatar selection interface 668. If the currently selected avatar is a customizable avatar (e.g., female avatar 670), the device 600 also displays an option affordance 674 that can be selected to display an options menu (described below with respect to FIG. 6W). In the reduced avatar selection interface 668, a different avatar can be selected by centering the avatar, as described in more detail below.

[0203] 6L , a reduced avatar selection interface 668 is displayed in the messaging user interface 603 in a location previously occupied by the text candidate area 614 and the keyboard display area 612. An application dock 618 is optionally displayed below the reduced avatar selection interface 668, displaying a selected application affordance 620a indicated by a border 672. By displaying the reduced avatar selection interface 668 in the messaging user interface 603, the device 600 provides the user with convenient access to select an avatar to send (e.g., as a sticker, an avatar image, or an avatar recording) to participants in a message conversation.

[0204] Device 600 groups the displayed customized and non-customized avatars by type and arranges the groups consecutively so that scrolling in one direction provides access to one type of avatar (e.g., non-customized avatars) and scrolling in the opposite direction provides access to a different type of avatar (e.g., customized avatars).

[0205] Device 600 displays customizable female avatar 670 in the center of reduced avatar selection area 668 in a boundary area between customizable and non-customizable avatars (e.g., a customizable avatar is on one side of female avatar 670 and a non-customizable avatar is on the other side of female avatar 670 (see also FIGS. 6AE-6AG)). Thus, scrolling the displayed list of avatars 675 in one direction displays the non-customizable avatars, and scrolling in the opposite direction displays the customizable avatars. In some embodiments, the list of avatars 675 can be scrolled to display avatar creation affordance 669 (similar in function to avatar creation icon 648) located at an end of the customizable avatar opposite the non-customizable avatars, such that avatar creation affordance 669 is located at one end of the group of customizable avatars and the group of non-customizable avatars is located at the opposite end of the group of customizable avatars. In such an embodiment, the create avatar affordance 669 may be selected to create a new customizable avatar in a manner similar to that described above with respect to Figures 6I-6K.

[0206] As shown in FIGS. 6M-6R, device 600 modifies the avatar (e.g., customizable female avatar 670) displayed in reduced avatar selection interface 668 in response to changes detected in the face. For reference, FIGS. 6M-6R include a representation of face 673 detected within the field of view of a camera (e.g., 602). FIGS. 6M-6R illustrate changes to the displayed avatars (e.g., customizable avatar 670 and non-customizable avatar 671) in response to changes detected in face 673. In some embodiments, the display of face 673 in FIGS. 6M-6R is displayed from the perspective of a device positioned facing face 673. Corresponding changes to the displayed avatars are thus reflected in terms of movement of face 673 and are illustrated in FIGS. 6M-6R.

[0207] 6M, device 600 detects a tilted face 673 with lips 673-1 turned down, eyebrows 673-2 furrowed, and eyes 673-3 slightly narrowed to create a displeased expression. In response, device 600 modifies the displayed avatar (customizable avatar 670) to have the same facial expression (e.g., a tilted head with a displeased expression).

[0208] 6M-6O, device 600 detects a horizontal gesture 676 (e.g., a swipe or touch-and-drag input on display 601) starting from the right side of the list of avatars 675 and moving left toward the left side of the list of avatars 675. In response to detecting the horizontal gesture 676, device 600 displays a left-scrolling list of avatars 675 based on the magnitude (and direction) of the horizontal gesture 676, such that customizable female avatar 670 is scrolled left and non-customizable monkey avatar 671 is scrolled into the center of the reduced avatar selection interface 668.

[0209] As the female avatar 670 is scrolled from a centered position in FIG. 6M to a position offset to the left in FIG. 6O, the device 600 displays an animation of the female avatar 670 transitioning from a 3D face-tracked state in FIG. 6M (where the avatar 670 has a pose that matches the pose of the face 673) to a static state in FIG. 6O (where the avatar 670 has a default pose that is not determined based on the pose of the face 673). As the device 600 displays the animated transition, it stops modifying the female avatar 670 based on the face 673 (although the face 673 may continue to be optionally tracked by the device 600). For example, the face 673 still has a sulky pose in FIG. 6N and FIG. 6O, but now the head is not tilted, while the female avatar 670 has a different pose than the face 673 in both FIG. 6N and FIG. 6O.

[0210] Figure 6N shows an intermediate state of an animation of avatar 670 transitioning from the face tracking state of Figure 6M to the static state of Figure 6O. In Figure 6N, device 600 has not modified female avatar 670 based on detected face 673, and instead displays female avatar 670 transitioning from the frowning pose of Figure 6M to the static smiling pose of Figure 6O. Specifically, Figure 6N shows that the female avatar's head has been moved to an upright position, her mouth is in a position between a frowning face and a smiling face (e.g., between the mouth position of the detected face and the mouth position of the static avatar), and her brows are not wrinkled.

[0211] Figure 6N also shows monkey avatar 671 slightly off-center, as monkey avatar 671 has moved from a rightward position in Figure 6M toward a central position in Figure 6O. Monkey avatar 671 has a static smiling pose in Figures 6M-6O.

[0212] 6O, female avatar 670 has been moved fully to the left position with a static smile pose, and monkey avatar 671 is in the center position. Device 600 has not yet modified monkey avatar 671 based on detected face 673. In some embodiments, device 600 generates haptic feedback (e.g., a tactile output) and, optionally, an audio output indicating that avatar 675 being scrolled is centered in reduced avatar selection interface 668. This haptic feedback informs the user that the avatar has been positioned such that by releasing sideways gesture 676, device 600 will select that avatar.

[0213] After the monkey appears at the center of the screen in Figure 6O, device 600 detects the end of input 676 and resumes modifying the centered avatar (e.g., monkey avatar 671) based on detected face 673 in Figure 6P. Thus, in Figure 6P, monkey avatar 671 assumes a sulky pose of face 673 (e.g., device 600 modifies monkey avatar 671 to transition from a static pose to the pose of face 673).

[0214] In some embodiments, as the user scrolls through the list of avatars 675, as each avatar stops at the center position of the scaled avatar selection interface 668, the device 600 modifies that avatar to assume a pose (e.g., position and facial expression) of the face 673. This allows the user to hold a particular facial expression, and the device 600 modifies the centered avatar to match that facial expression. As the user holds a facial expression and swipes to another avatar, the device 600 displays an animation of the currently selected avatar transitioning from the held facial expression of the user's face to a static default pose, while the next avatar is scrolled to the center position. The device 600 then displays the next avatar transitioning from a static pose to the held facial expression of the user. In some embodiments, the device 600 does not begin modifying the avatar centered in the scaled avatar selection interface 668 (in response to a detected face or as an animated transition from a tracked face to a static pose) until the avatar stops at the center position. Thus, when a user quickly scrolls through the list of avatars 675 (e.g., scrolling through the avatars without stopping on one), the device 600 does not animate or change the avatars based on detected faces during those scrolls.

[0215] Because the monkey avatar 671 selected in Figure 6P is a non-customizable avatar, device 600 does not display option affordance 674. Because the customizable and non-customizable avatars are grouped as described above, continuing to scroll left causes device 600 to display other non-customizable avatars (e.g., robot avatar 678) but not customizable avatars. Customizable avatars may be displayed by scrolling right, as described below with respect to Figures 6Q and 6R.

[0216] In Figures 6Q and 6R, device 600 detects a lateral gesture 680 (e.g., a swipe or touch-and-drag input on display 601) moving rightward toward the right side of the list of avatars 675. In response to detecting lateral gesture 680, device 600 displays a list of avatars 675 that scrolls rightward based on the magnitude (and direction) of lateral gesture 680, such that non-customizable robot avatar 678 is scrolled off display 601, monkey avatar 671 is scrolled to an offset position to the right, and customizable female avatar 670 is scrolled to the center of the display. Because customizable and non-customizable avatars are grouped as described above, continuing to scroll rightward causes device 600 to display other customizable avatars (or, optionally, avatar creation affordances 669), but not non-customizable avatars. Non-customizable avatars may be displayed by scrolling leftward, as described above.

[0217] 6Q and 6R also illustrate scrolling the avatar with an animated transition, but not moving in the opposite direction, as described above with respect to FIGS. 6M-6P. As the avatar moves to the right in FIGS. 6Q and 6R, device 600 animates the transition of monkey avatar 671 from the face-tracking state in FIG. 6P to the static state shown in FIG. 6R with the transitional appearance shown in FIG. 6Q. For example, in FIG. 6P, device 600 has modified monkey avatar 671 based on face 673 (e.g., monkey avatar 671 has a pose that matches the pose of face 673). As shown in FIGS. 6Q and 6R, device 600 stops modifying monkey avatar 671 based on face 673 (e.g., face 673 maintains the displeased expression, but monkey avatar 671 has a different pose) and displays an animated transition of monkey avatar 671 moving from the pose of FIG. 6P to the static appearance of FIG. 6R. Figure 6Q shows an intermediate state of the animated transition, with monkey avatar 671 having its mouth in a position between frowning and smiling, and its eyebrows in an unfrowned position, while female avatar 670 is shifted slightly to the right and moving toward the center position while maintaining a static default smiling pose.

[0218] In FIG. 6R, female avatar 670 is centered in the scaled avatar selection interface 668 with a static smiling pose. Monkey avatar 671 is shifted to the right with a static pose (which is also a smiling pose, similar to the static pose of female avatar 670, but these static poses can vary from avatar to avatar). Face 673 has transitioned to a neutral pose (e.g., a smile with no creased brows). In FIG. 6R, device 600 has not modified female avatar 670 based on detected face 673.

[0219] In Figure 6S, device 600 displays a customizable female avatar 670 that has been selected by being centered in reduced avatar selection interface 668. Again, because female avatar 670 is a customizable avatar, device 600 displays option affordance 674. Device 600 also displays an edit affordance 682 that can be selected to access a library of avatars. In some embodiments, device 600 displays edit affordance 682 regardless of whether the displayed avatar is customizable or non-customizable.

[0220] In Figure 6T, device 600 detects input 684 (e.g., a tap gesture on device 601) on edit affordance 682. In response to detecting input 684, device 600 displays library interface 686, shown in Figure 6U.

[0221] In FIG. 6U, device 600 displays library interface 686 in response to detecting user input on an edit affordance (e.g., edit affordance 682). In the embodiment shown in FIG. 6U, device 600 displays library interface 686 with female avatar option 670a and new customized male avatar option 688a. Female avatar option 670a corresponds to female avatar 670 and male avatar option 688a corresponds to male avatar 688 (shown in FIG. 6AE). In the embodiment shown in FIG. 6U, customized male avatar option 688a is a customizable avatar option that corresponds to a customizable male avatar (e.g., 688) created according to the steps described above with respect to FIGS. 6I-6K. For brevity, these steps are not repeated here. Device 600 displays male avatar option 668a and female avatar option 670a (customizable avatar options) grouped together and distinguished from non-customizable avatar options.

[0222] In FIG. 6V, device 600 detects input 690 (eg, a touch input on display 601) that selects female avatar option 670a.

[0223] In FIG. 6W, device 600 displays an options menu 692 in response to detecting an input 690 to select female avatar option 670a. Device 600 displays options menu 692 with an avatar (e.g., female avatar 670) that corresponds to the avatar option selected from library interface 686 (e.g., female avatar option 670a), as well as edit option 692a, duplicate option 692b, and delete option 692c. The edit option, duplicate option, and delete option are each selectable to initiate a respective process of editing, duplicating, or deleting the avatar option (and corresponding avatar) selected in library interface 686. In some embodiments, device 600 modifies the avatar displayed in options menu 692 in accordance with face tracking functionality described herein.

[0224] In Figure 6X, device 600 detects input 693a (e.g., touch input on display 601) on edit option 692a. In response to detecting input 693a, device 600 displays an avatar editing user interface 694 (shown in Figure 6Z), which is similar to avatar editing user interface 652 (except that it displays the selected avatar 670 or a copy of the selected avatar 670 instead of a default new avatar).

[0225] In Figure 6Y, device 600 detects input 693b (e.g., a touch input on display 601) on duplicate option 692b. In response to detecting input 693b, device 600 creates a duplicate version of the avatar option selected in library interface 686 (e.g., a duplicate of female avatar 670a) and a duplicate version of the corresponding avatar (e.g., female avatar 670). Device 600 displays avatar editing user interface 694 (shown in Figure 6Z) with the duplicated avatar.

[0226] In FIG. 6Z, device 600 displays avatar edit user interface 694 in response to detecting input 693a or 693b. If device 600 detects input 693a in edit option 692a, device 600 displays avatar edit user interface 694 displaying an avatar (e.g., avatar 670) that corresponds to the avatar option selected in library interface 686. However, if device 600 detects input 693b in duplicate option 692b, device 600 creates a duplicate of the selected avatar (e.g., a duplicate of female avatar 670) and displays the duplicate avatar in avatar edit user interface 694. In the embodiment shown in FIG. 6Z, device 600 displays duplicate avatar 695. In some embodiments, rather than displaying the avatar edit user interface in response to detecting input 693a, device displays library interface 686 including the duplicate avatar option.

[0227] Avatar editing user interface 694 is similar to the avatar editing user interface described below with reference to Figures 8A-8CF, and for the sake of brevity, the details of editing an avatar using avatar editing user interface 694 will not be repeated.

[0228] 6AA, device 600 displays library interface 686 with duplicate avatar option 695a (which appears modified based on selecting different avatar features using avatar edit user interface 694) corresponding to duplicate avatar 695. After saving the modified duplicate avatar 695 (e.g., detecting the selection of "Done" in avatar edit user interface 694), device 600 displays duplicate avatar option 695a in a position adjacent to the selected avatar option from which the duplicate was created (e.g., adjacent avatar option 670a).

[0229] FIG. 6AB illustrates the options menu 692 after avatar option 670a is selected in FIG. 6V. In response to detecting input 693c at delete option 692c, the device deletes the selected avatar option 670a from library interface 686. In such a case, device 600 removes avatar option 670a from the library interface, for example, as shown in FIG. 6AC. However, if device 600 does not detect any of inputs 693a-c, but instead detects selection of cancel affordance 696, options menu 692 is closed and device 600 displays library interface 686 with male avatar option 688a and female avatar option 670a, as shown in FIG. 6AD (similar to the state of library interface 686 shown in FIG. 6U).

[0230] In Figure 6AD, device 600 detects input 697 (e.g., a touch gesture on display 601) on completion affordance 698 and, in response, closes library interface 686 and displays reduced avatar selection interface 668, as shown in Figure 6AE. Reduced avatar selection interface 668 includes male avatar 688, female avatar 670, and non-customizable avatar 645.

[0231] In Figure 6AE, three distinct gestures are represented on the reduced avatar selection interface 668. As described below, when device 600 detects a gesture in a particular direction (e.g., left or right), device 600 replaces the displayed avatar (e.g., customizable female avatar 670) with a particular type of avatar determined by the direction of the gesture. For example, if the gesture is to the left, the displayed avatar is replaced with a first type of avatar (e.g., a non-customizable avatar or an avatar modeled to represent a non-human character). Conversely, if the gesture is to the right, the displayed avatar is replaced with a second type of avatar (e.g., a customizable avatar or an avatar modeled to represent a human).

[0232] For example, in Figure 6AE, if device 600 detects a left lateral gesture 699a (e.g., a left swipe or touch-and-drag gesture on display 601), device 600 displays the embodiment shown in Figure 6AF, which shows customizable female avatar 670 moved to the left (away from the center of reduced avatar selection interface 668, e.g., to a position indicating that female avatar 670 is not selected) and non-customizable monkey avatar 645 positioned in the center of reduced avatar selection interface 668 (e.g., a position indicating that monkey avatar 645 is selected). Thus, in response to detecting left lateral gesture 699a, device 600 displays a selection of the non-customizable avatar. In some embodiments, a left lateral gesture 699a causes the device 600 to scroll the reduced avatar selection interface 668 such that the customizable female avatar 670 is moved completely off-screen and only one or more non-customizable avatars are displayed (e.g., similar to the embodiment shown in FIG. 6O).

[0233] If device 600 detects a right lateral gesture 699b (e.g., a rightward swipe or touch-and-drag gesture on display 601), device 600 displays the embodiment shown in FIG. 6AG, which shows customizable female avatar 670 moved to the right (away from the center of reduced avatar selection interface 668 (e.g., a position indicating that female avatar 670 is not selected)) and customizable male avatar 688 positioned in the center of reduced avatar selection interface 668 (e.g., a position indicating that male avatar 688 is selected), optionally showing avatar creation affordance 669. Thus, in response to detecting right lateral gesture 699b, device 600 displays a selection of customizable avatars without displaying non-customizable avatars.

[0234] In some embodiments, the device 600 may display a scenario in which the avatar that is initially selected (at the center position of the reduced avatar selection interface 668) is a non-customizable avatar, and in response to detecting a lateral gesture, display the reduced avatar selection interface 668 that scrolls such that the non-customizable avatar is moved completely off screen, thereby displaying only one or more customizable avatars in the reduced avatar selection interface 668.

[0235] When device 600 detects an upward vertical gesture 699c (e.g., a vertical swipe or a vertical touch-and-drag gesture on display 601), device 600 expands reduced avatar selection interface 668 to display expanded avatar selection interface 634 of FIG. 6AH.

[0236] In Figure 6AH, device 600 displays an expanded avatar selection interface 634 with a custom male avatar option 688a and a custom female avatar option 670a in avatar options region 638. Female avatar option 670a has been selected, causing female avatar option 670 to be displayed in avatar display region 636. Device 600 also displays option affordance 674 in avatar display region 638. Device 600 also displays a capture affordance 644 that can be selected to record avatar 670 (e.g., while it is being modified based on changes detected in the user's face).

[0237] 6AI-6AJ, device 600 detects a scroll gesture 6100 (e.g., a vertical swipe or a touch-and-drag gesture on display 601) on avatar options region 638. In response to detecting the scroll gesture 6100, device 600 scrolls the display of avatar options displayed in avatar options region 638.

[0238] In FIG. 6AK, device 600 detects input 6102 (e.g., a tap gesture on display 601) on option affordance 674. In FIG. 6AL, device 600, in response to detecting input 6102, replaces displayed avatar options region 638 with options menu region 6104 including edit, duplicate, and delete options similar to the previously described edit, duplicate, and delete options (e.g., 692a, 962b, 962c), respectively. Device 600 also displays a cancel affordance 6106. In response to detecting input 6108 (e.g., a tap gesture on display 601) on cancel affordance 6106, device 600 removes options menu region 6104 and redisplays avatar options region 638, as shown in FIG. 6AM.

[0239] In some embodiments, device 600 changes the avatar displayed in avatar display area 636 in response to the selection of a different avatar option. For example, in FIG. 6AM, device 600 detects input 6110 (e.g., a tap gesture on display 601) on poop avatar option 6112a. In response, device 600 removes avatar 670 and displays poop avatar 6112, as shown in FIG. 6AN. Additionally, device 600 removes edit affordance 674 because the selected avatar option (e.g., 6112a) corresponds to a non-customizable avatar (e.g., poop avatar 6112).

[0240] 7 is a flow diagram illustrating a method of navigating among avatars in an application using an electronic device (e.g., 600) according to some embodiments. Method 700 is performed on a device (e.g., 100, 300, 500, 600) that includes a display device and one or more input devices. Some operations of method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0241] As described below, method 700 provides an intuitive way to navigate between avatars within an application. This method reduces the cognitive burden on the user in managing avatars, thereby creating a more efficient human-machine interface. In the case of battery-operated computing devices, allowing users to navigate between avatars within an application faster and more efficiently conserves power and increases the time between battery charges.

[0242] The electronic device displays 702 an avatar navigation user interface (e.g., 668) via a display device. The avatar navigation user interface includes an avatar (e.g., 670).

[0243] While an avatar navigation user interface (e.g., 668) is displayed, the electronic device detects (704) a gesture (e.g., 699a, 699b) directed toward the avatar navigation user interface (e.g., 668) via one or more input devices (e.g., a swipe gesture at a location corresponding to the avatar navigation user interface on a touch screen display).

[0244] In response to detecting the gesture (e.g., 699a, 699b) (706), the electronic device, in accordance with determining that the gesture is in a first direction (e.g., a rightward horizontal swipe gesture) (708), displays (710) a first type of avatar (e.g., an avatar 670, 688 modeled to represent a human, rather than a non-human character, or an avatar that is configurable or can be created from an avatar prototype or template) in an avatar navigation user interface (e.g., 668). Displaying the first type of avatar provides visual feedback to the user that confirms that an input has been received and that the device is now ready to select the first type of avatar. Providing the user with improved visual feedback improves device usability and makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the device), as well as reducing device power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0245] In response to detecting the gesture (e.g., 699a) (706), the electronic device, in accordance with determining that the gesture (e.g., 699a) is in a second direction (e.g., a leftward sideways swipe gesture) opposite the first direction (714), displays (716) an avatar of a second type (e.g., 645) different from the first type (e.g., 670, 688) (e.g., an avatar modeled to represent a non-human character, or an avatar that is selectable but not configurable) in an avatar navigation user interface. Displaying the second type of avatar provides visual feedback to the user that confirms that an input has been received and that the device is now in a state in which the second type of avatar can be selected. Providing the user with improved visual feedback improves device usability and makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the device), as well as reducing device power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0246] According to some embodiments, the electronic device further complies with a determination that the gesture is in a first direction (708) and ceases to display (712) the second type (e.g., 645) of avatars in the avatar navigation user interface (e.g., 668). The electronic device further complies with a determination that the gesture is in a second direction opposite the first direction (714) and ceases to display (718) the first type (e.g., 670, 688) of avatars in the avatar navigation user interface (e.g., 668). By not displaying the particular type of avatar, the electronic device provides visual feedback to the user that confirms that an input was received and that the device is not in a state in which the particular type of avatar can be selected. Providing the user with improved visual feedback improves device usability and makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs and reducing user errors when operating / interacting with the device), as well as reducing the device's power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0247] According to some embodiments, after displaying the avatar of the first type (e.g., 670), the electronic device detects a second gesture (e.g., 699b) in the first direction. In response to detecting the second gesture, the electronic device displays a second avatar of the first type (e.g., 688).

[0248] According to some embodiments, after displaying the avatar of the second type (e.g., 645), the electronic device detects a third gesture in the second direction. In response to detecting the third gesture, the electronic device displays a second avatar of the second type (e.g., 678).

[0249] According to some embodiments, a first type of avatar (e.g., avatar 670) has the appearance of a human character (e.g., an avatar modeled to represent a human, rather than a non-human character). In some embodiments, such avatars include customizable (e.g., selectable or configurable) avatar features that generally correspond to human physical characteristics (e.g., head, hair, eyes, and lips, as seen in FIGS. 8A-8BB). For example, such avatars may include representations of individuals with a variety of physical human features or characteristics (e.g., an older woman with dark skin color and long straight brown hair). Such avatars also include representations of individuals with a variety of non-human characteristics (e.g., decorative augmentations, hats, glasses, etc.) typically associated with a human appearance (e.g., as shown in FIGS. 8BB-8CF). In some embodiments, such avatars do not include anthropomorphic configurations, such as stylized animals, stylized robots, or stylized versions of normally inanimate or non-human objects. The appearance of the avatar provides feedback to the user indicative of the types of avatar characteristics that can be customized. Providing improved visual feedback to the user improves usability of the device, makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and additionally reduces power usage and improves battery life of the device by allowing the user to use the device more quickly and efficiently.

[0250] According to some embodiments, a second type of avatar (e.g., avatar 645, which is an avatar corresponding to the avatar option shown in FIG. 6G) has the appearance of a non-human character (e.g., an avatar modeled to represent a non-human character, including non-human characters that are anthropomorphic configurations (e.g., a stylized animal, a stylized robot, or a stylized version of a typically inanimate or non-human object)). The avatar's appearance provides feedback to the user indicative of the type of avatar characteristics that can be customized. Providing improved visual feedback to the user improves device usability and makes the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), as well as reducing device power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0251] According to some embodiments, a first type (e.g., 670) of avatars includes a number of avatar features (e.g., 851, 828) that are user configurable (e.g., createable, selectable, customizable). In some embodiments, such avatars may be user createable or pre-configured with a number of user configurable features. In some embodiments, configuration of the avatar features results in significant changes in the appearance or physical structure of the virtual avatar.

[0252] According to some embodiments, the second type (e.g., 645) of avatars does not include avatar features that are configurable (e.g., createable, selectable, customizable) by the user. In some embodiments, such avatars are pre-configured and have no user-configurable features. In some cases, such avatars may be slightly modified (e.g., changing the color of the avatar or changing the size of the avatar), but such modifications do not significantly change the appearance or physical structure of the virtual avatar.

[0253] According to some embodiments, the avatar navigation user interface includes a sub-region (e.g., 686) having a plurality of avatars. The plurality of avatars includes a first collection of avatars of a first type (e.g., 670a, 688a, 670a) and a second collection of avatars of a second type (e.g., 640a). The first collection of avatars of the first type is separate (e.g., distinct) from the second collection of avatars of the second type. In some embodiments, the first collection of avatars of the first type is separate from the second collection of avatars of the second type such that when the avatar navigation user interface is displayed and the electronic device detects a user gesture (e.g., a swipe gesture), the device displays or selects an avatar of the first type in the avatar navigation user interface if the gesture is in a first direction or displays an avatar of the second type if the gesture is in a second direction opposite the first direction. In some embodiments, this allows a user to immediately select a first or second type of avatar without having to scroll through multiple avatars of the same type to get to a different type of avatar. Visual separation of the various types of avatars provides feedback to the user that multiple types of avatars are displayed (and available for customization) and informs the user as to the types of avatar characteristics that are customizable. Providing improved visual feedback to the user improves usability of the device, making the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), as well as reducing device power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0254] According to some embodiments, the avatar (e.g., 670) is a selected one of a plurality of avatars displayed in a location (e.g., a boundary region (e.g., 675)) between one or more of a first collection of avatars of a first type and one or more of a second collection of avatars of a second type (e.g., an avatar initially displayed in an avatar navigation user interface is positioned between a group of avatars of the first type and a group of avatars of the second type).

[0255] According to some embodiments, the first set of avatars of a first type includes a selected one of the multiple avatars. The electronic device replaces the selected one of the multiple avatars with a different avatar of the first type in accordance with a determination that the gesture is in a first direction (e.g., the selected avatar (e.g., 670) is replaced with a different one of the avatars of the first type (e.g., 688) from the first set of avatars of the first type). The electronic device replaces the selected one of the multiple avatars with an avatar of a second type in accordance with a determination that the gesture is in a second direction (e.g., the selected avatar (e.g., 670) is replaced with one of the avatars of the second type (e.g., 645) from the second set of avatars of the second type).

[0256] According to some embodiments, the second set of avatars of the second type includes a selected one of the multiple avatars. The electronic device replaces the selected one of the multiple avatars with an avatar of the first type in accordance with a determination that the gesture is in a first direction (e.g., the selected avatar (e.g., 645) is replaced with one of the avatars of the first type (e.g., 670) from the first set of avatars of the first type). The electronic device replaces the selected one of the multiple avatars with a different avatar of the second type in accordance with a determination that the gesture is in a second direction (e.g., the selected avatar (e.g., 645) is replaced with a different one of the avatars of the second type (e.g., 678) from the second set of avatars of the second type).

[0257] By displaying the particular type of avatar, the electronic device provides visual feedback to the user confirming that an input has been received and that the device is now in a state where the particular type of avatar can be selected. By replacing the avatar, the electronic device provides visual feedback that the device is in a state where the replaced avatar can no longer be selected by the user. Providing the user with improved visual feedback improves usability of the device, making the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), as well as reducing the device's power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0258] According to some embodiments, the avatar navigation user interface includes a first affordance (e.g., 682) (e.g., a selectable displayed avatar, or an “edit” affordance (not an avatar)). While the avatar navigation user interface is displayed, the electronic device detects a gesture directed toward the first affordance via one or more input devices (e.g., a touch gesture on a touch screen display at a location corresponding to the “edit” affordance or the displayed avatar, or a swipe gesture in a third direction different from the first direction, such as a swipe up gesture). In response to detecting a gesture directed toward the first affordance, the electronic device displays an avatar library user interface (e.g., 686). The avatar library user interface includes a second affordance (e.g., 648) (e.g., a “new avatar” or a “+” affordance) and one or more avatars of the first type.

[0259] According to some embodiments, while the avatar library user interface is displayed, the electronic device detects a gesture (e.g., a touch gesture at a location on the touch screen display corresponding to the “new avatar” affordance) directed toward a second affordance (e.g., 648) via one or more input devices. In response to detecting a gesture directed toward the second affordance, the electronic device displays an avatar editing user interface (e.g., 652). The avatar editing user interface is a user interface for creating a new avatar of the first type (e.g., editing a new avatar to be added to the avatar library user interface). In some embodiments, the electronic device displays the avatar editing user interface and receives user input for creating the new avatar of the first type. After the new avatar of the first type is created, the device displays the new avatar of the first type in the avatar library user interface. For example, the new avatar of the first type is added to the edge of the displayed avatar of the first type in the avatar library.

[0260] According to some embodiments, the electronic device generates a new avatar of the first type and displays the new avatar in an avatar library user interface (e.g., 686). The new avatar is displayed in a position next to the last one of the one or more avatars of the first type (e.g., in the last position in the ordering of the one or more avatars of the first type).

[0261] According to some embodiments, the avatar navigation user interface further includes an affordance (e.g., a "delete" affordance) (e.g., 692c) associated with a function to remove (e.g., delete or hide) the avatar from the displayed avatar navigation user interface. The electronic device detects a gesture via one or more input devices directed toward the affordance associated with this functionality (e.g., a touch gesture at a location corresponding to the "delete" affordance on a touch screen display). In response to detecting a gesture directed toward the affordance associated with this functionality, the electronic device removes (e.g., deletes or hides) the avatar from the displayed avatar navigation user interface.

[0262] According to some embodiments, an avatar navigation user interface is displayed in a messaging user interface (e.g., 603) (e.g., an interface for sending messages between participants of a conversation hosted by the communications platform). In some embodiments, avatars can be accessed from the avatar navigation user interface displayed as part of the messaging user interface, thereby causing an avatar selected from the avatar navigation user interface to be displayed in the messaging user interface for sending to participants of the conversation.

[0263] Displaying an avatar navigation user interface in a messaging user interface allows a user to navigate between avatars without leaving the messaging user interface, thus eliminating the need to provide user input to switch between applications of an electronic device. Reducing the number of required user inputs improves usability of the device, making the user-device interface more efficient (e.g., by assisting users in providing appropriate inputs when operating / interacting with the device and reducing user errors), as well as reducing the device's power usage and improving battery life by allowing users to use the device more quickly and efficiently.

[0264] According to some embodiments, the electronic device, pursuant to a determination that the avatar navigation user interface does not include an avatar of the first type, displays an avatar initiation user interface (e.g., 626) (e.g., an avatar splash screen) having an affordance (e.g., 632) (e.g., a “continue” affordance) associated with the generation of a new avatar of the first type. While the avatar initiation user interface is displayed, the electronic device detects a gesture (e.g., 630) directed toward the affordance associated with the generation of a new avatar of the first type (e.g., a touch gesture at a location corresponding to the “continue” affordance on a touch screen display). In response to detecting the gesture directed toward the affordance associated with the generation of a new avatar of the first type, the electronic device displays an avatar editing user interface (e.g., 652, 801). The avatar editing user interface is a user interface for generating a new avatar of the first type (e.g., editing a new avatar to be added to the avatar library user interface).

[0265] According to some embodiments, the electronic device, pursuant to a determination that the avatar navigation user interface includes the first type of avatar, displays the first type of avatar and an affordance (e.g., 682) associated with managing one or more characteristics of the displayed avatar of the first type (e.g., 670) (e.g., an “Edit” affordance). In some embodiments, if one or more avatars of the first type have been created, the avatar navigation user interface displays one of the first type of avatars and an affordance (e.g., an “Edit” affordance). In some embodiments, the electronic device, in response to detecting a selection of the affordance, displays an avatar library user interface (e.g., 686) including representations of the avatar of the first type (e.g., 670) and other avatars of the first type (e.g., 688). In some embodiments, the electronic device, in response to detecting a selection of the displayed avatar of the first type, displays the avatar library user interface. In some embodiments, in response to detecting an affordance or a selection of the first type of displayed avatar, the electronic device displays an avatar editing user interface (e.g., 652, 801) that provides a user interface for editing the first type of avatar.

[0266] According to some embodiments, displaying the first type of avatar includes displaying the first type of avatar transitioning from a non-interactive state (e.g., 670 of FIG. 6L) (e.g., the first type of avatar has a static, default appearance that does not react to changes in the user's face) to an interactive state (e.g., 670 of FIG. 6M) (e.g., the first type of avatar has a dynamic appearance that reacts to changes in the user's face). According to some embodiments, displaying the second type of avatar includes displaying the second type of avatar (e.g., 678) transitioning from a non-interactive state (e.g., 678 of FIG. 6O) (e.g., the second type of avatar has a static, default appearance that does not react to changes in the user's face) to an interactive state (e.g., 678 of FIG. 6P) (e.g., the second type of avatar has a dynamic appearance that reacts to changes in the user's face).

[0267] According to some embodiments, the electronic device displays, via a display device, an avatar library user interface (e.g., 686) including one or more saved (e.g., previously created) avatars of a first type (e.g., 688, 670). The electronic device detects (e.g., by detecting a directed gesture) a selection of one of the first type of saved avatars (e.g., a touch gesture on a touch screen display at a location corresponding to the first type of saved avatar). In response to detecting (e.g., by detecting a directed gesture) a selection of one of the first type of saved avatars, the electronic device displays a menu (e.g., 692) having one or more menu affordances (e.g., an “edit” affordance 692a, a “duplicate” affordance 692b, or a “delete” affordance 692c) associated with one of an edit function, a duplicate function, and a delete function for one of the first type of saved avatars.

[0268] According to some embodiments, the electronic device detects (e.g., by detecting a directed gesture) a selection of a first affordance (e.g., 692b) associated with a duplicate function (e.g., a touch gesture at a location corresponding to the “Duplicate” affordance on a touch screen display). In response to detecting a selection of the first affordance, the electronic device generates a duplicate version (e.g., 695) of one of the saved avatars and displays the duplicate version in an avatar editing user interface (e.g., 694) (e.g., after selecting the “Duplicate” affordance, the selected avatar is duplicated, and then a duplicate version of the avatar having avatar features matching the avatar features of the selected one of the saved avatars is displayed in the avatar editing user interface). In some embodiments, the duplicated avatar may be edited in an avatar editing user interface (e.g., 652, 694, 801) and, after editing, saved to a library (e.g., 686). In some embodiments, after the duplicate avatar is saved, the duplicate avatar is displayed in the avatar library user interface in a position adjacent to a selected one of the saved avatars in the avatar library (e.g., immediately adjacent to the duplicated avatar, or the next position in the order, which immediately advances the position of the duplicated avatar in the order).

[0269] According to some embodiments, the electronic device detects (e.g., by detecting a gesture directed at) a selection of a second affordance (e.g., 692a) associated with the edit function (e.g., a touch gesture at a location on the touch screen display corresponding to the “edit” affordance). In response to detecting a gesture directed at the second affordance, the electronic device displays an avatar editing user interface (e.g., 652, 694, 801) including one of the saved avatars (e.g., the avatar selected when the edit function was selected).

[0270] According to some embodiments, the electronic device detects (e.g., by detecting a directed gesture) a selection of a third affordance (e.g., 692c) associated with a delete function (e.g., a touch gesture at a location on the touch screen display corresponding to the “delete” affordance). In response to detecting (e.g., by detecting a directed gesture) a selection of the third affordance, the electronic device removes the displayed one of the saved avatars from the avatar library user interface.

[0271] According to some embodiments, the electronic device (e.g., 600) displays, via a display device (e.g., 601), individual avatars of a first or second type (e.g., 670, 671), including displaying an individual avatar (e.g., 671 moving across interface 668 of Figures 6M-6O) that moves across an avatar navigation user interface according to the magnitude and direction of a detected gesture (e.g., 676). Pursuant to a determination that the individual avatar reaches a first position (e.g., a first threshold position (e.g., a position associated with selection of the individual avatar) determined based on a magnitude and direction of the detected gesture), the electronic device displays an animation of the individual avatar transitioning from a non-interactive state (e.g., a static state in which the individual avatar has a pre-defined appearance that does not change in response to changes detected in the user's face) (e.g., 671 of FIG. 6O) to an interactive state (e.g., 671 of FIG. 6P) (e.g., a dynamic state in which the individual avatar changes in response to changes detected in the user's face) with an appearance determined based on a detected face (e.g., 673) (e.g., a face detected within the field of view of one or more cameras of the electronic device). In some embodiments, the animation of the individual avatar transitioning from a non-interactive state to an interactive state includes gradually changing the avatar's facial expression, position, orientation, and / or size from a neutral facial expression, position, orientation, and / or size to an avatar's facial expression, position, orientation, and / or size based on face / head tracking of the user. The appearance of the avatar provides feedback to the user indicating the avatar's movement in accordance with the magnitude and direction of the user's gesture. Providing improved visual feedback to the user improves usability of the device, making the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when manipulating / interacting with the device and reducing user errors), as well as reducing the device's power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0272] In some embodiments, the electronic device (e.g., 600) displays an animation of the individual avatar (e.g., 671) transitioning from an interactive state (e.g., 671 of FIG. 6P) having an appearance determined based on the detected face (e.g., 673) to a non-interactive state (e.g., 671 of FIG. 6R) having a default appearance pursuant to a determination that the individual avatar (e.g., 671) reaches a second position (e.g., 671 of FIG. 6Q) (e.g., a second threshold position determined based on the magnitude and direction of the detected gesture (e.g., a position associated with swiping the individual avatar (e.g., to select a different avatar)). In some embodiments, the animation of the individual avatar transitioning from an interactive state to a non-interactive state includes gradually changing the avatar's facial expression, position, orientation, and / or size from a facial expression, position, orientation, and / or size based on the user's face / head tracking to a neutral facial expression, position, orientation, and / or size of the avatar. Providing visual feedback of the non-interactive appearance of the avatar by displaying an animation of the avatar transitioning from an interactive state to a non-interactive state. Providing improved visual feedback to the user improves usability of the device, making the user-device interface more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), as well as reducing the device's power usage and improving battery life by allowing the user to use the device more quickly and efficiently.

[0273] It should be noted that details of the processes described above with respect to method 700 (e.g., FIG. 7) are applicable in a similar manner to the methods described below. For example, method 900 optionally includes one or more of the characteristics of the various methods described above with respect to method 700. For example, in some embodiments, a navigation user interface invokes a process for creating or editing a customizable avatar, which may be implemented according to the method 900 described below with respect to FIG. 9. As a further example, methods 1000, 1100, 1200, and 1400 optionally include one or more of the characteristics of the various methods described above with respect to method 700. For example, in some embodiments, a navigation user interface invokes a process for creating or editing a customizable avatar, which may be implemented according to the method described below with respect to FIGS. 10-12. As another example, in some embodiments, a navigation user interface invokes a process for modifying a virtual avatar, which may be implemented according to the method described below with respect to FIGS. 14A and 14B. For the sake of brevity, these details will not be repeated below.

[0274] Figures 8A-8CF show example user interfaces displaying an avatar editing user interface according to some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the processes in Figures 9-12.

[0275] In FIG. 8A, the device 600 displays an avatar editing user interface 801 having an avatar display area 803 and an avatar property area 804. The avatar display area 803 is visually distinguished from the avatar property area 804, e.g., by a line 806, and includes an avatar 805 and an avatar feature area 807. The avatar feature area 807 includes avatar feature affordances 809 that correspond to avatar features that may be edited in the avatar editing user interface. The avatar property area 804 includes the displayed avatar feature properties and corresponding feature options. The avatar feature properties and feature options correspond to the avatar feature currently selected in the avatar feature area 807. In FIG. 8A, the device displays an avatar head affordance 809a located directly below the avatar 805 and highlighted to indicate that the avatar head feature is currently selected for editing. Because the avatar head feature has been selected for editing, device 600 displays in avatar feature area 804 the avatar feature properties and feature options that correspond to the avatar head feature.

[0276] The device displays avatar 805 to represent the current state of the avatar based on changes made to the avatar features when editing the avatar in the avatar editing user interface. In the embodiment shown in FIG. 8A, no avatar features have been selected or changed, so avatar 805 is displayed with a number of default (e.g., pre-set or determined) features. For example, avatar 805 has a default facial structure (e.g., default face shape, nose, lips, eyes, ears, and eyebrows). Avatar 805 also has no selected skin color, hair or hairstyle, facial hair (other than eyebrows), or accessories. When the device receives an input to update the avatar features, device 600 updates avatar 805 to reflect the selected updates to the avatar features.

[0277] In some embodiments, device 600 may display avatar 805 fluctuating between two or more colors (e.g., yellow and white) before detecting a selection or change of any of the avatar features, thereby indicating to the user that device 600 is ready to receive input to modify avatar 805. In some embodiments, device 600 displays avatar 805 without tracking the user's face (e.g., avatar 805 is displayed but does not change in response to changes in the user's face) before detecting a selection or change of any of the avatar features. In some embodiments, device 600 stops fluctuating the display of avatar 805 and / or starts tracking the user's face (e.g., modifying avatar 805 in response to changes detected in the user's face) after detecting input in avatar editing user interface 801 (e.g., selection of a color option, scrolling through displayed feature options, a gesture on the avatar, a gesture on an affordance (e.g., a "start face tracking" affordance), etc.).

[0278] Avatar characteristic area 804 includes a displayed list of avatar feature characteristics that correspond to the currently selected avatar feature (e.g., the avatar's head). Each avatar feature characteristic includes a set of selectable feature options that may be selected to modify the corresponding characteristic of the selected avatar feature. More specifically, each selectable feature option included in the set of selectable feature options corresponds to a value for modifying the corresponding characteristic of the selected avatar feature. The modified characteristic is then reflected in the displayed changes to avatar 805 and in other avatar feature options that include a displayed representation of this characteristic.

[0279] The device 600 displays the avatar feature options to represent options available to modify a characteristic of the currently selected avatar feature. The displayed avatar feature options may be dynamically updated based on other selected avatar feature options. The other selected avatar feature options include different avatar feature options corresponding to the same currently selected avatar feature, and selected avatar feature options corresponding to different avatar features (e.g., non-currently selected avatar features, such as previously modified avatar features). For example, a change to a characteristic of the avatar's head feature (e.g., selection of skin color) may be displayed in the avatar feature options corresponding to the avatar's head feature (e.g., facial shape feature options) and, optionally, in the avatar feature options corresponding to other avatar features, such as hair or eyes. In this example, in response to detecting a selection of skin color, the device updates the currently displayed avatar feature options (e.g., facial shape options) to display the selected skin color. Additionally, if a different avatar feature (e.g., eyes) is selected, the displayed avatar feature options for the eyes also include the selected skin color.

[0280] As shown in FIG. 8A, because the avatar head affordance 809a has been selected, the device 600 displays avatar feature properties and feature options corresponding to the avatar head feature. The displayed avatar feature properties include a skin color property 808 and a face shape property 810 (the avatar head feature may include properties of other avatar features). The skin color property 808 includes a color option 812 that may be selected to change the color of the avatar head feature (e.g., the skin color of the avatar 805). If the device detects a selection of a particular color option 812, the device changes the skin color of the currently selected avatar feature (e.g., the avatar head of FIG. 8A) to match the selected color. In some embodiments, the selection of the skin color option 812 also affects the color of another avatar feature, such as a facial hair feature (e.g., eyebrows, beard, etc.), eye color, or lip color. In the embodiment shown in Figure 8A, skin color characteristic 808 includes a set of color options 808 that are expanded relative to an initially displayed set of color options for other avatar features (see, e.g., hair color characteristic 838 in Figure 8P). In some embodiments, the expanded set of color options 808 is not horizontally scrollable (but may be vertically scrollable) and does not include options that can be selected to expand the set of color options (such as color picker option 886 in Figure 8AX). Facial shape characteristic 810 includes facial shape options 814 that can be selected to change the facial shape of avatar 805.

[0281] In some embodiments, the selected feature option is indicated by a border displayed around the selected feature option. For example, a border 818 displayed around face shape option 814a indicates that face shape option 814a is the currently selected avatar face shape. In response, an avatar 805 having the same face shape (e.g., round chin) as the selected face shape option 814a is displayed. Conversely, an avatar 805 and face shape option 814 without a skin color (e.g., default skin color or preselected skin color) is displayed because color option 812 is not selected.

[0282] In some embodiments, each displayed avatar feature characteristic is visually distinguished from other adjacent avatar feature characteristics. In some embodiments, avatar feature characteristics are visually distinguished by individual avatar feature characteristic headers. For example, in FIG. 8A , skin color characteristic 808 is visually distinguished from face shape characteristic 810 by face shape header 816. In some embodiments, avatar feature characteristics are visually distinguished by other indicators (e.g., a horizontal line that extends completely or partially across the width of display 601, etc.).

[0283] In FIG. 8B, device 600 detects a selection of color option 812a in response to receiving input 820 (eg, touch input on display 601) at color option 812a.

[0284] In FIG. 8C, device 600 indicates that color option 812a is selected by displaying a border 824 around color option 812a. Device 600 also modifies avatar 805 and face shape options 814 to have a skin color that matches the selected color option 812a. In addition, device 600 displays a skin color slider 822 that can be adjusted in a manner similar to that described below with respect to hair color slider 856 (see FIGS. 8W-8AC). Slider 822 is used to adjust the gradation of the selected color option 812a. In some embodiments, the gradation can represent various characteristics of the selected color option (e.g., skin color option 812a), such as, for example, shades, saturation, tints, midtones, highlights, warmth, or hue. In some embodiments, the particular characteristic is determined based on the selected skin color. For example, in some embodiments, if a lighter skin color is selected, the characteristic adjusted using the slider is a shade characteristic, while if a darker skin color is selected, the characteristic adjusted using the slider is a saturation characteristic. In response to detecting an adjustment to the shade of a selected color option (e.g., selected color option 812a), the device 600 changes the skin color of the avatar (e.g., avatar 805), all feature options that display skin color (e.g., face shape option 814), and all avatar features that are affected by skin color.

[0285] In some embodiments, the selected skin color affects the color or color characteristics (e.g., base color, hue, brightness, shade, saturation, midtones, highlights, warmth, undertones, etc.) of other avatar features (e.g., hair, lips, etc.). For example, the avatar's hair or facial hair (e.g., eyebrows or beard) may have a tint that is determined based on the selected skin color. For example, darker skin colors will generate hair with darker tints (e.g., brown or black tints), while lighter skin colors will generate hair with lighter tints (e.g., blonde or red tints). These tints can affect the colors applied to certain avatar features, as described in more detail below. Similarly, the avatar's lip color can have a tint based on the selected skin color. For example, the avatar's lip color can have a color based on the selected skin color and, optionally, a different color, such as red or pink. In some embodiments, the different colors are combined into the skin color by an amount determined based on the settings of the adjustments of the color sliders 822. For example, adjusting slider 822 in one direction increases the value of the different colors that make up the avatar's lip color (e.g., the amount of red or pink in the avatar's lip color), and adjusting slider 822 in the other direction decreases the value of the different colors that make up the avatar's lip color.

[0286] As shown in FIG. 8C, updating the skin color of the avatar's head features includes changing the skin color of the avatar's nose, ears, face, and lips 828. In some embodiments, updating the skin color of the avatar's lips 828 includes changing the skin color of the outer lip region 828a and not changing the inner lip region 828b. In some embodiments, the device 600 also updates the color of other avatar features that are different from the avatar's skin (such as eyebrows 827 and the avatar's eyes 829). In some embodiments, the updated color of the other features (e.g., eyebrows 827 and eyes 829) is based on the selected skin color. For example, the updated color of eyebrows 827 is updated to a color determined to be darker than the selected skin color option 812a. These updates are displayed in both the avatar 805 and other avatar feature options, such as face shape option 814.

[0287] In Figure 8D, the device 600 detects a selection of face shape option 814b in response to receiving input 826 (e.g., touch input on the display 601) at face shape option 814b. In response, the device 600 indicates the selected face shape option by removing the skin color slider 822 from the avatar characteristics area 804 of Figure 8E and moving the boundary 818 from face shape option 814a to face shape option 814b, and modifies the avatar 805 to transition from the round face shape option of 814a to a different face shape (e.g., pointy chin, narrow cheeks) represented in face shape option 814b. Thus, the avatar 805 appears to transition from having a round chin as shown in Figure 8D to having a pointy chin and narrow cheeks as shown in Figure 8E.

[0288] In some embodiments, after a feature option is selected, device 600 displays an animation to guide the user to select the next avatar feature in avatar feature region 807. For example, in FIG. 8F , device 600 highlights avatar hair affordance 809b and prompts the user to select avatar hair affordance 809b to proceed to edit the next avatar feature. In some embodiments, this animation is only displayed the first time the device displays the avatar editing user interface.

[0289] In Figure 8G, device 600 detects a selection of avatar hair affordance 809b in response to receiving input 830 (e.g., touch input on display 601) at avatar hair affordance 809b. In response to detecting a selection of avatar hair affordance 809b, device 600 updates avatar display area 803 to indicate that the avatar hair feature has been selected, and updates avatar characteristic area 804 to display avatar feature characteristics and feature options that correspond to the avatar hair feature. This transition is illustrated in Figures 8H-8O.

[0290] In some embodiments, an individual avatar feature affordance 809 may be selected by a tap gesture on the individual avatar feature affordance 809 or by a swipe gesture on the avatar feature region 807 (or, optionally, a swipe gesture anywhere on the avatar display region 803 other than on the avatar 805). In such embodiments, a swipe gesture may scroll the avatar feature region 807 laterally to position a desired avatar feature affordance 809 directly below the avatar 805. In response to detecting lift-off of the touch, the device 600 selects (including highlighting the affordance) the avatar feature affordance that is positioned directly below the avatar 805 after scrolling ends.

[0291] As shown in Figure 8H, device 600 updates avatar display area 803 by highlighting avatar hair affordance 809b and displaying avatar feature affordances 809 shifted to the left such that avatar hair affordance 809b is positioned directly below avatar 805. Avatar eye affordance 809c is shifted to the left (relative to its position in Figure 8G) and avatar lip affordance 809d is now displayed at the right-most edge of display 601.

[0292] Device 600 updates avatar characteristic area 804 by ceasing to display avatar feature characteristics (e.g., skin color characteristic 808 and face shape characteristic 810) that correspond to the avatar's facial features and displaying new avatar feature characteristics and feature options that correspond to the newly selected avatar feature. In some embodiments, such as the embodiment shown in Figures 8H-8O, device 600 displays the new avatar feature characteristics and feature options in a cascading effect, such that avatar feature characteristics that correspond to the avatar's hair features are displayed in avatar characteristic area 804 in side-to-side (e.g., left-to-right) and top-to-bottom (e.g., from the first avatar feature characteristic at the top of avatar characteristic area 804 to the last avatar feature characteristic at the bottom of avatar characteristic area 804).

[0293] For example, Figures 8H and 8I show hair color options 832 appearing on display 601 with an animation of the hair color option sliding left to right across display 601. Before all hair color options 832 are positioned, device 600 begins displaying animation of hair texture options 834 appearing one by one in left-to-right order below hair color options 832 on display 601 (starting in Figure 8J and ending in Figure 8L). After hair texture options 834 are positioned, device 600 displays hairstyle options 836 appearing one by one in left-to-right order below hair texture options 834 on display 601 (starting in Figure 8M and ending in Figure 8O). It should be understood that the sequential placement of individual sets of feature options can begin either before the previous set of feature options is placed (e.g., similar to the timing of hair texture options 834 relative to hair color options 832) or after the previous set of feature options is placed (e.g., similar to the timing of hairstyle options 836 relative to hair texture options 834).

[0294] As previously mentioned, some of the feature options for the selected avatar feature are displayed in a sliding cascade effect as described above with respect to the appearance of hair color options, while other feature options for the selected avatar feature are displayed in a repeating arrangement cascade effect as described with respect to hair texture options 834 and hairstyle options 836. Any of these cascade effects may be used to display the arrangement of feature options according to any of the embodiments described herein.

[0295] In Figure 8P, the device 600 displays a hair color characteristic 838 with a hair color option 832, a hair texture characteristic 840 with a hair texture option 834 and a texture header 841, and a hairstyle characteristic 842 with a hairstyle option 836 and a hairstyle header 843. In Figure 8P, the hair color option is not selected. However, straight hair texture option 834a and bald hairstyle option 836a are selected, as indicated by borders 844 and 846, respectively. Although an avatar 805 is displayed with a bald hairstyle, the straight hair texture is not discernible on the avatar 805 due to the bald hairstyle. However, the straight hair texture is reflected in a pixie cut hairstyle option 836b and a bob cut hairstyle option 836c, which display different hairstyles with the straight hair texture.

[0296] As shown in Figure 8P, device 600 detects a selection of pixie cut hairstyle option 836b in response to receiving input 848 (e.g., touch input on display 601) at short hairstyle option 836b. In Figure 8Q, device 600 displays avatar 805 having avatar hair 851 corresponding to the selected pixie cut hairstyle option 836b in Figure 8P and having straight hair texture corresponding to the selected straight hair texture 834a. Device 600 also displays a border 846 moved from bald hairstyle option 836a to pixie cut hairstyle option 836b to provide visual confirmation of the detected selection of pixie cut hairstyle option 836b.

[0297] In some embodiments, the feature options include a zoomed-in (e.g., enlarged) view of the individual avatar feature that corresponds to the feature option. For such feature options, a close-up view of the avatar feature is typically beneficial to show sufficient detail to distinguish between different avatar feature options. For example, in FIG. 8R, device 600 displays hair texture options 834 that correspond to hair texture characteristic 840. These hair texture options 834 may be easily distinguished by a user because each hair texture option 834 displays a close-up view of the avatar's hair so that the different hair textures represented by the hair texture options 834 are better shown. Straight hair texture option 834a displays a close-up view of the avatar's hair having a straight hair texture. Wavy hair texture option 834b displays a close-up view of the avatar's hair having a wavy hair texture. Curly hair texture option 834c displays a close-up view of the avatar's hair having a curly hair texture.

[0298] As shown in FIG. 8R, device 600 detects a selection of wavy hair texture option 834b in response to receiving input 850 (e.g., touch input on display 601) at wavy hair texture option 834b.

[0299] Figures 8S-8U show the device 600 updating the avatar 805 and individual hairstyle feature options 836 in response to detecting the wavy hair texture option 834b selected in Figure 8R. For example, the avatar's hair 851 transitions from a straight hair textured appearance in Figure 8R to a wavy hair textured appearance in Figure 8S.

[0300] Further, in the embodiments described herein, feature options that indicate avatar features that are affected by the selection of a different feature option are updated to reflect the selection of the different feature option. For example, in Figures 8S-8U, because pixie cut hairstyle option 836b and bob cut hairstyle option 836c indicate the avatar's hair (specifically, the avatar's hair that is affected by the selection of wavy hair texture option 834b), the respective hairstyles displayed in hairstyle options 836b and 836c are updated to display respective hairstyle options that transition from a straight hair textured appearance in Figure 8R to a different appearance with the selected wavy hair texture. Bald hairstyle option 836a does not display the avatar's hair. Thus, bald hairstyle option 836a does not transition to a different appearance.

[0301] In some embodiments, when a feature option is selected for a particular avatar feature characteristic, the feature options displayed for that characteristic do not change, but the feature options for other avatar feature characteristics do change in response to the selection. For example, in Figures 8S-8U, when wavy hair texture option 834b is selected, hair texture option 834 does not change, but hairstyle option 836 changes. Similarly, as shown in Figures 8AN-8AQ (discussed below), when a different hairstyle option is selected, the hairstyle option does not change, but other feature options (e.g., hair texture option) change (e.g., hair texture option 834 changed in Figure 8AQ).

[0302] The transition of the pixie cut hairstyle option 836b and the bob cut hairstyle option 836c is shown in Figures 8S-8U. The pixie cut hairstyle option 836b is displayed transitioning from an appearance with straight hair texture in Figure 8R to a different appearance with selected wavy hair texture in Figures 8S and 8T. This transition includes enlarging the displayed pixie cut hairstyle option 836b and optionally a boundary 846 (see enlarged pixie cut hairstyle option 836b' and enlarged boundary 846' in Figure 8S) during the transition from the straight hair texture to the wavy hair texture, and then shrinking the pixie cut hairstyle option 836b back to its original size in Figure 8T after the transition to the appearance with wavy hair texture is completed. The bob cut hairstyle option 836c is displayed transitioning from an appearance with straight hair texture in Figure 8S to a different appearance with selected wavy hair texture in Figures 8T and 8U. This transition involves enlarging the displayed bob cut hairstyle option 836c (see enlarged bob cut hairstyle option 836c' in FIG. 8T) during the transition from the straight hair texture to the wavy hair texture, and then shrinking the bob cut hairstyle option 836c back to its original size in FIG. 8U after the transition to the wavy hair textured look is complete.

[0303] After the transition of the pixie cut hairstyle option 836b is completed (e.g., after the enlarged pixie cut hairstyle option 836b' is displayed returning to its original size in FIG. 8T), the bob cut hairstyle option 836c is transitioned. The display effect of momentarily enlarging the transitioning feature option, combined with the timing of the transition completion in the displayed order, provides the appearance of a ripple effect, thereby providing a visual indication to the user that a particular feature option is transitioning based on the user's selection of a different feature option (e.g., a feature option other than the transitioning feature option). This visual effect also shows the user exactly which individual feature options are in the process of transitioning (e.g., when the feature option is enlarged), and also provides an indication of when the transition is complete (e.g., when the feature option is returned to its original smaller size). The momentary lack of display of certain feature options (if any) provides the user with visual confirmation that such feature options were not affected by the selection.

[0304] In FIG. 8V, device 600 detects a selection of hair color option 832a in response to receiving input 852 (eg, touch input on display 601) at hair color option 832a.

[0305] In FIG. 8W, the device 600 indicates that the hair color option 832a is selected by displaying a border 854 around the hair color option 832a. The device 600 also changes the avatar's hair 851, eyebrows 827, hair texture options 834, and hairstyle options 836 (e.g., 836b and 836c) to have a hair color that matches the selected hair color option 832a. In some embodiments, the color (or color characteristic) of the eyebrows 827 is determined based on a combination of skin color and hair color. For example, the hue of the eyebrows 827 can be determined based on the selected hair color, and the brightness of the eyebrows 827 can be determined based on the selected skin color. A transition of the hair texture options 834 and hairstyle options 836 can be displayed according to the appearance of the ripple effect described above. For example, hair texture options 834a-834c may cycle through (eg, expand momentarily), and then hairstyle options 836b and 836c may cycle through (eg, expand momentarily).

[0306] The device 600 also displays a hair color slider 856 that adjusts the gradation of the selected hair color option 832a. The hair color slider 856 includes a selector affordance 858 (also referred to herein as a thumb) that has an initial (e.g., default) position within a gradient region 857 (also referred to herein as a track) that spans between a high gradient value 857a and a low gradient value 857b of the selected color 832a. The selector affordance 858 can be moved within the region 857 (e.g., according to a magnitude and direction of input on the slider) to adjust the gradation of the selected color 832a based on the position of the selector affordance 858 within the gradient region 857. Adjusting the gradation of the selected hair color option 832a causes the device to modify all avatar features (including feature options that display such avatar features and the color of the selected hair color option) that have the selected color 832a (e.g., 832a changes in FIGS. 8AY and 8AZ when affordance 858 is moved within the region 857). Unless otherwise specified, when reference is made herein to changing a particular color option, the change also applies to the individual features associated with that color option, and to feature options that display individual avatar features.

[0307] In some embodiments, the gradient can represent various characteristics of the selected hair color, such as shades, saturation, tints, midtones, highlights, warmth, brightness, or hue. In some embodiments, the gradient can represent a tint of the avatar's hair that is different from the selected color, and optionally based on the avatar's selected skin color. The tint gradient can be adjusted by moving the selector affordance 858 within the gradient area 857, thereby ultimately changing the selected hair color and the appearance of the avatar's hair 851. In some embodiments, the hair tint corresponds to a natural hair color determined based on the selected skin color. For example, darker skin tones produce hair with a darker tint (e.g., brown or black tint), while lighter skin tones produce hair with a lighter tint (e.g., blonde or red tint). Adjusting the tint gives the hair the appearance of not only being applied with a particular color, but also with the brightness of that color based on the tint gradient. For example, for an avatar's hair having a non-natural selected hair color (e.g., purple), adjusting the tint to a low gradient value 857b results in a tint hair color that is slightly or not at all natural (e.g., brown). This emphasizes the purple hair color and gives the appearance that the avatar has applied a large amount of purple hair dye. Conversely, adjusting the tint to a high gradient value 857a emphasizes the natural tint of the hair (or other avatar features such as the avatar's eyebrows or lips) and gives the appearance that the avatar has applied a small amount of purple hair dye. By adjusting the position of the selector affordance 858 along the slider, the user can adjust the tint gradient that the device 600 applies to the selected color 832a.

[0308] In some embodiments, the selector affordance 858 includes a color that represents a currently selected gradient of the selected color 832a. In an initial position, the selector affordance 858 has the same color as the selected color 832a when the selected color 832a is first displayed. In other words, the selected color 832a has an initial (e.g., default or preselected) color when it is first selected (see, e.g., FIG. 8V). When the hair color slider 856 is first displayed, the selector affordance 858 has an initial position at the center of the area 857 and a color that corresponds to the initial color of the selector color 832a. When the position of the selector affordance 858 is moved from the initial position to a different position, the device changes the gradient of the selected color 832a, the corresponding color of the selector affordance 858, and all avatar features that have the selected color 832a (including feature options that display such avatar features) based on the new position of the selector affordance 858. In the embodiment shown in FIG. 8X, moving the selector affordance 858 toward a higher gradient value 857a darkens the selected color 832a, while moving the selector affordance 858 toward a lower gradient value 857b lightens the selected color 832a.

[0309] For example, in FIGS. 8X-8Z, device 600 detects touch-and-drag input 860 at selector affordance 858, and in response, displays movement of selector affordance 858 within region 857 based on the drag movement of input 860, and updates the color of selector affordance 858, selected color 832a, and all avatar hair colors displayed in avatar hair 851 and feature options (e.g., 834a-834c, 836b, and 836c) based on the position of selector affordance 858 within region 857.

[0310] In FIG. 8X, input 860 has an initial position 860′ that corresponds to the initial position of selector affordance 858 (the center of region 857). Because selector affordance 858 is in the initial (e.g., default) position, device 600 does not change selected color 832a, the color of selector affordance 858, or any other displayed features with selected color 832a. In some embodiments, device 600 generates feedback, such as haptic feedback (e.g., tactile output), in response to detecting an input (e.g., input 860) at selector affordance 858, which haptic feedback is optionally generated with or without audio output when selector affordance 858 is placed in the default position (or when selector affordance 858 is moved from a different position to the default position (e.g., the center of slider 856)). This provides feedback to inform the user when selector affordance 858 is placed in an initial (eg, default) position that corresponds to the initial color (eg, value) of selected color 832a.

[0311] In FIG. 8Y, device 600 detects input 860 moving to second position 860″ and, in response, displays selector affordance 858 at a second position corresponding to second position 860″. The second position of selector affordance 858 corresponds to a larger gradation (e.g., a darker shade or a larger tint) of color 832a selected along region 857 (compared to the gradation shown in FIG. 8X). Thus, device 600 displays selector affordance 858 with the larger gradation based on the relative position of selector affordance 858 within region 857. Device 600 also updates selected color 832a and all features that display selected color 832a (e.g., avatar hair 851, hair texture options 834a-834c, and hairstyle options 836b and 836c) to have a larger gradation (e.g., a tint or tint).

[0312] In FIG. 8Z, device 600 detects input 860 moving to third position 860''' and, in response, displays selector affordance 858 at a third position corresponding to third position 860'''. The third position of selector affordance 858 corresponds to a larger gradient (e.g., a darker shade or a larger light color) than the gradient shown in FIG. 8Y. Thus, device 600 displays selector affordance 858 with the larger gradient based on the relative position of selector affordance 858 within region 857. Device 600 also updates selected color 832a and all features that display selected color 832a (e.g., avatar hair 851, hair texture options 834a-834c, and hairstyle options 836b and 836c) to have the larger gradient (e.g., a darker shade or a larger light color) than that shown in FIG. 8Z.

[0313] In FIG. 8AA, device 600 detects the end of input 860 (e.g., lift-off of a touch-and-drag input) when selector affordance 858 is in a position (e.g., 858') corresponding to position 860''' shown in FIG. 8Z. Thus, device 600 maintains the selected gradation of selected color 832a (and all features having selected color 832a) when input 860 ends. In some embodiments (see, e.g., FIGS. 8AS and 8AT, described below), device 600 maintains the altered hair color slider 856 even after a different color option 832 is selected, including the position of selector affordance 858 and the altered gradation of selected color 832a.

[0314] In FIG. 8AB, device 600 detects a selection of hair color option 832b in response to receiving input 861 (eg, touch input on display 601) at hair color option 832b.

[0315] In FIG. 8AC, device 600 indicates that hair color option 832b is selected by displaying border 862 around hair color option 832b. Device 600 also modifies the displayed hair color slider 856 by moving selector affordance 858 to the default position of selected hair color option 832b and updating the color of selector affordance 858 to the color corresponding to selected hair color option 832b. Device 600 also modifies the avatar's hair 851, hair texture options 834, and hairstyle options 836 (e.g., 836b and 836c) to have a hair color that matches selected hair color option 832b. The transition of hair texture options 834 and hairstyle options 836 is displayed according to the ripple effect appearance described above. For example, hair texture options 834a-834c may cycle through (eg, momentarily expand) and then hairstyle options 836b and 836c may cycle through (eg, momentarily expand).

[0316] 8AD-AL, device 600 detects input 864, which is a touch-and-drag gesture on display 601, with an initial touch corresponding to a location within avatar characteristic region 804. In response to detecting vertical movement of input 864, device 600 scrolls avatar characteristic and corresponding feature options displayed in avatar characteristic region 804 based on the direction of movement of input 864 (e.g., based on the direction of the drag). Additionally, device 600 adjusts the size of avatar display region 803 (including displayed avatar 805 and optionally avatar characteristic region 807) and avatar characteristic region 804 based on the direction of the drag and the current state (e.g., size) of avatar display region 803 and avatar characteristic region 804.

[0317] For example, Figures 8AD-8AF show avatar display area 803 and avatar 805 transitioning (e.g., contracting) from an initial fully expanded state in Figure 8AD to a contracted state in Figure 8AF in response to detecting movement of input 864 in an upward direction (e.g., toward avatar display area 803). Concurrent with the transition of avatar display area 803, device 600 displays avatar characteristics area 804 transitioning (e.g., expanding) from its initial state in Figure 8AD to its fully expanded state in Figure 8AF. Figure 8AE shows avatar display area 803 (including avatar 805) and avatar characteristics area 804 each having respective intermediate states (e.g., sizes) when the relative position of input 864 is between the positions shown in Figures 8AD and 8AF. In this manner, device 600 continues to shrink avatar display area 803 and avatar 805 while simultaneously expanding avatar characteristic area 804 (and shifting line 806 upward) in response to an upward drag gesture until avatar display area 803 and avatar 805 reach a shrinking state and avatar characteristic area 804 reach a fully expanded state. When avatar display area 803 and avatar 805 are in a shrinking state, device 600 does not further shrink avatar display area 803 and avatar 805 or further expand avatar characteristic area 804 in response to further movement of the upward drag gesture (or in response to a subsequent upward drag gesture). Rather, the device 600 continues to scroll through the avatar feature properties and feature options in response to further movement of the drag gesture in the upward direction (or in response to a subsequent upward drag gesture in the avatar property area 804 when the avatar display area 803 is in the contracted state) (revealing additional hairstyle options 836d-836f of the hairstyle property 842, and moving the hair color property 838 out of the displayed portion of the avatar property area 804, including the hair color property 832 and hair color slider 856; see Figures 8AG-8AH).

[0318] Conversely, the display 600 expands the avatar display area 803 from a contracted (or intermediate) state in response to detecting a movement of the input 864 in a downward direction, as shown in Figures 8AH-8AJ. Concurrently with the expansion of the avatar display area 803, the device 600 displays the avatar's characteristics area 804 transitioning (e.g., contracting) from the expanded state in Figure 8AH (or intermediate state in Figure 8AI) to its original state (e.g., size) in Figure 8AJ. Because the device 600 expands the avatar 805 by expanding the avatar display area 803 in response to detecting the downward movement of the input 864, the user can more easily view the avatar 805 without having to scroll back to the initial position of the avatar's characteristics and characteristics options within the avatar's characteristics area 804 (see, e.g., Figure 8AD).

[0319] The device 600 displays a larger avatar characteristic area 804 to display additional avatar feature characteristics and / or feature options by shrinking the avatar display area 803. The size of the avatar feature characteristics and feature options does not change when the avatar characteristic area 804 expands or shrinks. Thus, the device 600 displays more avatar feature characteristics and / or feature options when the avatar characteristic area 804 expands and displays fewer avatar feature characteristics and / or feature options when the avatar characteristic area 804 shrinks.

[0320] In some embodiments, when device 600 displays a scroll of avatar feature characteristics (e.g., 808, 810, 838, 840, 842) and their individual feature options (e.g., 812, 814, 832, 834, 836), if some of the avatar feature characteristics are scrolled partially out of the top of the avatar characteristic area 804 (e.g., below line 806), device 600 maintains the display of the individual header of this avatar feature characteristic located at the top of the avatar characteristic area 804. For example, as shown in FIG. 8AH, when hair texture characteristic 840 is scrolled out of the displayed portion of avatar characteristic area 804, device 600 "anchores" texture header 841 to the top of avatar characteristic area 804 (e.g., just below line 806). The "pinned" texture header 841 remains displayed at the top of the avatar's property area 804 until the entirety of the hair texture characteristic 840 is scrolled (e.g., in an upward direction) out of the avatar's property area 804 or until the entirety of the hair texture characteristic 840 is positioned below line 806 (e.g., when no portion of the hair texture characteristic 840 is scrolled off the top edge of the visible portion of the avatar's property area 804). In some embodiments, when the "pinned" header is released from its position below line 806, it is replaced with a header for an adjacent avatar feature characteristic (see, e.g., hairstyle header 843 in FIG. 8AL). In some embodiments, the pinned header (e.g., texture header 841) is visually distinguished from the feature options in the avatar's property area 804. For example, as shown in FIG. 8AH, the texture header 841 is visually distinguished by lines 806 and 867.

[0321] 8AK and 8AL, device 600 detects input 864 moving in an upward direction (after moving downward as shown in FIGS. 8AI and 8AJ) and compresses avatar display area 803 and avatar 805 while simultaneously expanding avatar characteristics area 804, and moves hairstyle header 843 to the edge of avatar characteristics area 804 (replacing texture header 841), as previously described. The movement of input 864 also scrolls the content displayed in avatar characteristics area 804 to display additional hairstyle options 836g-836i.

[0322] In Figure 8AM, device 600 detects the end of input 864 (e.g., lift-off). Device 600 displays avatar display area 803 and avatar 805 in a collapsed state, and avatar characteristics area 804 in a fully expanded state. Avatar characteristics area 804 displays hairstyle characteristics 842 with hairstyle options 836a-836i (each with a wavy hair texture based on the previous selection of wavy hair texture option 834b in Figure 8R and a hair color based on the selected hair color option 832b in Figure 8AB), and hairstyle header 843 positioned below line 806 and visually separated from hairstyle options 836a-836c by line 867. Pixie cut hairstyle 836b is displayed as selected, as indicated by border 846 placed around pixie cut hairstyle 836b and by avatar hair 851 having a pixie cut hairstyle (and also wavy hair texture) displayed on avatar 805. Avatar hair affordance 809b is highlighted to indicate that the avatar's hair feature is currently selected for editing.

[0323] In some embodiments, in response to detecting a selection of a feature option, avatar display area 803 and avatar 805 transition directly from a compressed state to a fully expanded state. For example, in FIG. 8AN, device 600 detects input 869 (e.g., a touch input on display 601) at a location corresponding to spiky hair hairstyle option 836f. In FIG. 8AO, device 600 displays avatar display area 803 and avatar 805 in a fully expanded state in response to detecting a selection of spiky hair hairstyle option 836f. Device 600 modifies the avatar's hair 851 (with wavy hair texture based on the previous selection in FIG. 8R and hair color based on the selected hair color option 832b in FIG. 8AB) to match the selected spiky hair hairstyle option 836f. The device 600 also indicates selection of the spiky hair hairstyle option 836f by removing the border 846 from the pixie cut hairstyle option 836b and displaying the border 846 around the spiky hair hairstyle option 836f.

[0324] 8AP and 8AQ, device 600 detects input 870, which is a touch-and-drag gesture on display 601, with an initial touch corresponding to a location within avatar characteristic region 804. Device 600 detects movement of input 870 in a downward direction and, in response, scrolls feature options (e.g., hairstyle options 836a-836i) and hairstyle header 843 in a downward direction to display a portion of hair color characteristic 838, hair texture characteristic 840, and hairstyle characteristic 842, as shown in FIG.

[0325] 8AR, device 600 detects the end (e.g., liftoff) of input 870. Device 600 displays a hair color characteristic 838 having a hair color slider 856 and hair color options 832 (including selected hair color option 832b indicated by border 862), a hair texture characteristic 840 having a texture header 841 and hair texture options 834a-834c (including selected wavy hair texture option 834b indicated by border 844), and a hairstyle characteristic 842 having a hairstyle header 843 and hairstyle options 836a-836c.

[0326] In FIG. 8AS, device 600 detects input 871 (e.g., touch input) on hair color option 832a. In response, device 600 displays avatar hair 851 transitioning from selected color 832b in FIG. 8AS to a color corresponding to selected color 832a in FIG. 8AT (the color resulting from the changes described above with respect to FIGs. 8X-8AA). Because only the selected hair color was changed by input 871, avatar hair 851 is still displayed with a spiky hair style corresponding to selected spiky hair style option 836f and a wavy hair texture corresponding to selected wavy hair texture option 834b. Additionally, device 600 displays feature options including hair color transitioning from the state displayed in FIG. 8AS to the state displayed in FIG. 8AT, respectively. Thus, device 600 displays hair texture options 834a-834c and hairstyle options 836b and 836c transitioning from a hair color corresponding to hair color option 832b to a hair color corresponding to hair color option 832a. This transition may include the appearance of a ripple effect described above (e.g., a continuous transition with a momentary expansion of the feature options during the transition).

[0327] As shown in FIGURE 8AT, in response to detecting input 871, device 600 also displays hair color slider 856 transitioning to a changed setting that is maintained for the color 832a previously set in response to input 860 described above with respect to FIGUREs 8X-8AA, including displaying selector affordance 858 transitioning to the same changed color as color option 832a, and a changed position within shade region 857 that is the same as the position shown in FIGURE 8AA immediately prior to device 600 detecting input 861 in hair color option 832b.

[0328] In FIG. 8AU, device 600 detects input 872 (e.g., touch input) at bob cut hairstyle option 836c that is displayed partially off-screen in avatar characteristic region 804. In response, device 600 displays avatar hair 851 transitioning from a spiked hair hairstyle to a bob cut hairstyle that corresponds to the selected bob cut hairstyle option 836c, as shown in FIG. 8AV. Device 600 also displays a slight scrolling of avatar characteristic region 804 (and removal of hair color option 832) to display a full rendition of the selected bob cut hairstyle option 836c, and displays border 846 around bob cut hairstyle option 836c to indicate selection of this feature option. Because no other feature options were selected by input 872, no avatar features other than avatar hair 851 are changed. Additionally, device 600 does not display any feature option updates because the other displayed feature options do not display a sufficient amount of the avatar's hair to indicate the selected hairstyle.

[0329] In FIG. 8AW, device 600 detects input 873 (e.g., touch input) on avatar lips affordance 809c. In response to detecting input 873, device 600 updates avatar display area 803 to indicate that the avatar lips feature has been selected (e.g., by making avatar lips affordance 809c bold and placing it directly below avatar 805), as shown in FIG. 8AX, and updates avatar characteristic area 804 to display avatar feature traits and feature options that correspond to the avatar lips feature. The avatar feature traits and feature options shown in FIGS. 8AX-BA correspond to the avatar lips feature. Thus, in response to detecting a selection of any such feature option, device 600 modifies avatar lips 828 displayed on avatar 805, and in some cases updates a representation of the avatar lips displayed in the feature options depending on whether the selected feature option displays the avatar lips.

[0330] As shown in FIG. 8AX, updated avatar characteristic area 804 includes a lips color characteristic 875 with various lips color options and a lips shape characteristic 878 with lips shape options 880. The lips color options include a natural lips color option 882, a non-natural lips color option 884, and a color picker option 886. The natural lips color option 882 represents a natural human lips color option that, in some embodiments, is determined based on a skin color selected for the avatar 805. The non-natural lips color option 884 represents a color that, in some embodiments, is not determined based on a selected skin color, but instead may correspond to a lipstick color or other color that is not natural for human lips (e.g., blue, green, etc.). The color picker option 886 is a selectable option that displays other color choices that can be selected to adjust the avatar's lips color. In some embodiments, the lips color options (e.g., 882, 884, 886) are horizontally scrollable in response to an input (e.g., tap, swipe, drag, etc.) on the lips color option. Scrolling the lip color options displays additional lip color options (e.g., 882, 884, 886). In some embodiments, the color picker option 886 is located at the end of the lip color options and is not displayed until the lip color options are scrolled to the end of the lip color options.

[0331] In Figure 8AX, device 600 detects input 887 (e.g., a touch gesture on display 601) on color picker option 886. In Figure 8AY, device 600, in response to detecting input 887, displays expanded color palette 888 displaying a variety of color options, including natural lip color options and non-natural lip color options. In some embodiments, expanded color palette 888 may be displayed as a pop-up menu that appears over a portion of avatar characteristic area 804 including characteristics and feature options for any displayed avatar characteristics.

[0332] In FIG. 8AY, device 600 detects input 889 (eg, a touch gesture on display 601) on selected lip color option 890.

[0333] In FIG. 8AZ, device 600, in response to detecting a selection of selected lip color option 890, displays avatar lips 828 updated to match the color of selected lip color option 890. In addition, lip shape options (e.g., lip shape option 880a) are updated to include selected lip color option 890 (e.g., in accordance with the ripple effect appearances described herein). Device 600 also updates one of the lip color options (represented as lip color option 884a in FIG. 8AX) to match the selected lip color option 890 and displays a border 891 around the updated lip color option 884a.

[0334] The device 600 also displays a lip color slider 892, which may be controlled in a manner similar to the other color sliders described herein. The lip color slider 892 includes a selector affordance 893 that may be positioned along the lip color slider to adjust the gradation of the selected lip color 884a from a high gradation value at 892a to a low gradation value at 892b. In some embodiments, the gradation may represent various characteristics of the selected lip color, such as, for example, shades, saturation, tints, midtones, highlights, warmth, or hue. In some embodiments, the gradation may represent a tint of the avatar's lips that is different from the selected color, and optionally based on the avatar's selected skin color. By moving the selector affordance 893 along the lip color slider 892, the tint gradation may be adjusted, thereby ultimately changing the selected lip color and the appearance of the avatar's lips 828. For example, the tint of the selected color can be red or some other color that corresponds to a natural skin color (e.g., brown), while the selected lip color (e.g., selected lip color 884a) can be any color (including any non-natural color). Adjusting the tint gives the avatar's lips the appearance of not only having a particular color applied to the lips, but also the brightness of that color based on the tint's gradient. For example, for an avatar's lips with a non-natural selected lip color (e.g., green), adjusting the tint to a low gradient value 892b results in a tint lip color that is slightly or not at all natural (e.g., red). This emphasizes the green lip color and gives the appearance that the avatar has a lot of green lipstick or has unnatural colored lips. Conversely, adjusting the tint to a high gradient value 892a emphasizes the lip tint and gives the appearance that the avatar has a small amount of green lipstick. By adjusting the position of selector affordance 893 along the slider, the user can adjust the tint gradient that device 600 applies to selected color 884a.

[0335] In FIG. 8BA, device 600 detects input 8100 (e.g., a touch input) on avatar accessory affordance 809d. In response to detecting input 8100, device 600 updates avatar display area 803 to indicate that the avatar accessory feature has been selected (e.g., by making avatar accessory affordance 809d bold and placing it directly below avatar 805), and updates avatar characteristic area 804 to display avatar feature properties and feature options that correspond to the avatar accessory feature, as shown in FIG. 8BB. CF The avatar feature characteristics and feature options depicted in correspond to characteristics of the avatar's accessories. Thus, in response to detecting a selection of any such feature option, device 600 modifies avatar 805 based on the selected feature option, and in some cases updates a representation of the avatar's accessories displayed in the feature options based on the selected feature option.

[0336] As shown in FIG. 8BB, avatar trait area 804 includes earring trait 8102 with earring option 8104, hat trait 8106 with hat option 8108, and glasses trait 8110 with glasses option 8112 (shown in FIG. 8BM). Device 600 displays border 8114 around earring option 8104a to indicate that earring option 8104a (no earrings) is currently selected. Device 600 also displays border 8116 around hat option 8108a to indicate that hat option 8108a (no hat) is currently selected. Device 600 displays avatar 805 without earrings and without a hat based on the selected earring option 8104a and hat option 8108a.

[0337] In some embodiments, the feature options can be scrolled horizontally to display additional feature options. For example, in FIG. 8BB, device 600 displays earring option 8104d and hat option 8108d that are partially off-screen, indicating that earring option 8104 and hat option 8108 can be scrolled horizontally (e.g., in response to a horizontal swipe or touch-and-drag gesture as shown in FIGS. 8BV-8BW).

[0338] In some embodiments, device 600 displays feature options in a manner that represents a possible appearance of an avatar (e.g., avatar 805) if the particular feature option is selected. However, in some embodiments, device 600 displays feature options in a manner that does not fully represent the possible appearance of the avatar if the particular feature option is selected. For example, device 600 may display feature options having representations of avatar features in which a portion of the particular avatar feature is omitted. Omitting a portion of the particular avatar feature from the feature option displays other avatar features in the feature option that would be expected to be occluded if the omitted portion were displayed, but does not fully represent the possible appearance of the avatar if the feature option is selected. For example, in FIG. 8BB, device 600 displays earrings option 8104 having a representation of avatar hair (e.g., avatar hair 851), but with a portion of the avatar hair omitted such that a representation of the avatar's ears and, in some cases, earrings are displayed. To provide an unobstructed view of the various selectable earring options, a portion of the avatar's hair is omitted from earring options 8104. However, because the currently selected avatar hairstyle (e.g., as shown by avatar hair 851) covers the avatar's ears (and the selected avatar's earrings, if any), earring options 8104 do not represent the possible appearance of avatar 805 if the earring option is selected. Thus, in some embodiments, certain avatar feature options do not affect some of the other avatar features when they are selected. For example, an avatar accessory option that corresponds to a nose ring does not result in changes to other avatar features, such as the avatar's hair (e.g., adjustments to feature shapes resulting from the resulting placement of the avatar feature on the avatar). Similarly, an avatar accessory option that corresponds to a particular earring does not result in changes to the avatar's hair.

[0339] The device 600 also displays hats property 8106 with hat options 8108. The displayed hat options 8108 represent possible changes to the avatar 805 when the respective hat option is selected. In addition to modifying the avatar 805 to include the selected hat, such possible changes include reshaping the avatar's hair 851 and lighting effects such as casting a shadow on the face of the avatar 805. In FIG. 8BB, the reshaping of the avatar's hair 851 is represented in hat options 8108b-8108c (other hat options 8108d and 8108e are shown in FIG. 8BW and described in more detail below). For example, beanie hat option 8108b displays a hat with hat lines 8118 (e.g., where the hat (open at the bottom) contacts the hair on the avatar's head) that are narrower than the displayed width of the hair in hat option 8108b. Thus, device 600 displays the avatar's hair with a reshaped (e.g., altered) appearance where the avatar's hair is tucked in by the hat lines 8118, providing a realistic appearance that the hat is compressing the avatar's hair to fit the avatar's head. This effect is also displayed in cowboy hat option 8108c and headband hat option 8108d. In headband hat option 8108d, device 600 displays a headband compressing the avatar's hair, again reshaping the avatar's hair to fit the headband's hat lines, but also providing the appearance that the avatar's hair is compressed in the headband's hat lines (e.g., tucked under the headband) and popping out from the top of the headband. Avatar 805 when headband hat option 8108d is selected is shown in Figures 8BY-8CB and described in more detail below.

[0340] Hat option 8108c also illustrates possible modifications to avatar 805 that are expected to display lighting effects on avatar 805. For example, cowboy hat option 8108c includes a large hat (e.g., a cowboy hat) that casts a shadow 8120 on the avatar's forehead below the brim of the cowboy hat. By displaying option 8108c with a cowboy hat, a reshaped hairline, and a shadow 8120, device 600 indicates that selection of hat option 8108c will result in modifications to avatar 805 that include displaying a cowboy hat on avatar 805, reshaping the hairline of the avatar's hair 851, and casting a shadow on the forehead of avatar 805 (see, e.g., FIG. 8CC showing avatar 805 with a baseball cap, reshaped hair, and a shadow on the forehead).

[0341] 8BC and 8BD show device 600 detecting input 8122 (e.g., touch input) to select earring option 8104c and indicating selection of earring option 8104c by moving boundary 8114 from earring option 8104a to earring option 8104c. FIG. 8BD also shows device 600 displaying avatar 805 with avatar earring 8125 that corresponds to the earring displayed in selected earring option 8104c. Earring 8125 is partially obscured by avatar hair 851 that is positioned above the avatar's ear. However, earring 8125 is large enough to extend beyond avatar hair 851 and is therefore partially visible popping out from under avatar hair 851. Device 600 also updates hat option 8108 to show the earring applied to the displayed hat option 8108, as shown in FIG. 8BD.

[0342] In some embodiments, device 600 detects a user's face positioned within the field of view of a camera (e.g., camera 602) and (e.g., continuously) modifies the appearance of avatar 805 based on changes detected in the user's face (e.g., changes in the pose of the user's face, changes in the relative position of facial features, etc.). For example, in FIG. 8BE, device 600 displays real-time changes to the facial features of avatar 805 based on corresponding changes detected in the user's face. In FIG. 8BE, device 600 detects (e.g., using camera 602) that the user is tilting his head to the side, winking his eyes, and smiling. Device 600 modifies avatar 805 in real-time to reflect the detected user movements.

[0343] 8BF, device 600 detects (e.g., using camera 602) that the user has returned to a neutral position, neither tilting their head, smiling, winking, etc. The device changes avatar 805 in real time to reflect that the user has returned to a neutral position.

[0344] In some embodiments, device 600 modifies selected avatar features, such as those depicted in avatar 805, based on the physics model applied to the selected individual avatar feature. For example, in FIG. 8BF, when device 600 displays avatar 805 returning to a neutral position, the user's earrings 8125 are displayed swinging to reflect the physics of the user's head tilting action. It should be understood that the physics model is not limited to earrings 8125. The physics model may be applied to other selected avatar features.

[0345] In some embodiments, device 600 changes the displayed orientation and / or magnification of avatar 805 in response to an input detected in avatar display area 803, or more specifically, in some embodiments, in avatar 805. For example, in FIG. 8BG, device 600 detects input 8128 (e.g., a touch-and-drag gesture or a swipe gesture) on avatar display area 803. In response to detecting movement of input 8128 from an initial position in FIG. 8BG to a second position in FIG. 8BH, device 600 displays a rotation of avatar 805 corresponding to the movement of input 8128. In FIG. 8BH, device 600 displays a resulting profile view of avatar 805.

[0346] In some embodiments, device 600 displays selected avatar features in motion based on an adapted physics model in response to input detected on avatar display area 803 (or avatar 805). For example, in Figure 8BI, device 600 displays earrings 8125 swinging forward of avatar 805's face in response to the displayed rotation of avatar 805 in Figures 8BG and 8BH.

[0347] In FIG. 8BJ, device 600 detects input 8130 (e.g., a pinch out gesture) on avatar 805 and, in response, expands avatar 805 based on the movement of input 8130 (e.g., the length of the pinch out gesture), as shown in FIG. 8BK.

[0348] 8BL and 8BM, device 600 detects input 8132 (e.g., a touch-and-drag or swipe gesture) on avatar characteristic area 804 and scrolls through the displayed avatar characteristic properties (e.g., 8102, 8106, 8110) and feature options (e.g., 8104, 8108, 8112) based on the direction of movement of input 8132. Avatar 805 remains displayed in an enlarged appearance. In some embodiments, the enlarged appearance allows the user to get a better look at avatar 805 and in some embodiments allows the user to apply various accessories to avatar 805, such as makeup, tattoos, scars, freckles, birthmarks, and other custom avatar features or accessories.

[0349] In FIG. 8BN, device 600 detects the end of input 8132 (e.g., lift-off of a touch-and-drag gesture) and displays avatar property area 804 with hat property 8106, which includes hat options 8108a-8108d, and glasses property 8110, which includes glasses options 8112a-8112d. Avatar 805 remains displayed with an enlarged appearance. Device 600 displays border 8134 around glasses option 8112a to indicate that glasses option 8112a (no glasses) is currently selected. Device 600 displays glasses options 8112b-8112d with lighting effects (e.g., light reflections 8136 on the lenses of the glasses).

[0350] In FIG. 8BO, device 600 detects input 8138 (e.g., a touch gesture) on glasses option 8112b. As shown in FIG. 8BP, in response to detecting input 8138 on glasses option 8112b, device 600 removes border 8134 from glasses option 8112a and displays border 8134 around glasses option 8112b. In addition, device 600 modifies avatar 805 and hat option 8108 (shown in FIG. 8BV) to include avatar glasses 8140 that correspond to the glasses style displayed in selected glasses option 8112b. Device 600 also modifies the appearance of avatar 805 based on the selected avatar feature option (e.g., glasses 8140).

[0351] For example, as shown in FIGS. 8BO and 8BP, in response to detecting a selection of avatar glasses option 8112b, device 600 adjusts (e.g., modifies) the position of portion 8145 of avatar hair 851 and displays avatar glasses 8140 positioned on the face of avatar 805. Modified portion 8145 of avatar hair 851 is shown pushed to the side to accommodate frame 8140-1 of avatar glasses 8140. Additionally, device 600 generates a lighting effect on avatar 805 by displaying shadow 8147 next to modified portion 8145 of avatar hair 851 and displaying shadow 8142 under the avatar's eyes. Device 600 displays shadows 8142 and 8147 to indicate the lighting effect caused by adding avatar glasses 8140 to avatar 805. Lighting effects may also be indicated by displaying reflections 8150 (similar to light reflections 8136) on the lenses of the avatar's glasses 8140 (see FIG. 8BT). In some embodiments, lighting effects are determined based on the position of the avatar 805, glasses 8140, and hair 851 relative to a light source (e.g., a light source detected in the field of view of camera 602 or a simulated light source).

[0352] Also, in response to detecting the input 8138, the device 600 expands the eyeglasses characteristics 8110 to display color options for both the frame 8140-1 and the lenses 8140-2 (see, e.g., FIG. 8BT) of the selected eyeglasses 8140. The frame color options 894 include various color options (including expandable color picker option 894-2) that may be selected to change the color of the eyeglasses frame 8140-1. The lens color options 896 include various color options that may be selected to change aspects of the lenses 8140-2 of the eyeglasses 8140. In some embodiments, the frame color options 894 include an expandable color picker option (e.g., 894-2). In some embodiments, the lens color options 896 do not include an expandable color picker option.

[0353] In FIG. 8BQ, device 600 detects input 895 on frame color option 894-1 and displays frame color slider 897 of FIG. 8BR. Frame color slider 897 is similar to other color sliders described herein and may be used to adjust the color (or other aspects) of eyeglasses frame 8140-1 in accordance with various color slider embodiments described herein. In some embodiments, selecting frame color option 894 also changes the color of frame 8140-1 of eyeglasses 8140. However, in FIG. 8BQ, color option 894-1 corresponds to the current color of frame 8140-1 that was previously selected and changed (e.g., using frame color slider 897). Thus, when device 600 displays frame color slider 897, the color slider is displayed with the previously changed settings (e.g., selector affordance 897-1 is positioned at the left end of track 897-2 and color option 894-1 matches the color setting of slider 897), as shown in FIG. 8BQ.

[0354] In FIG. 8BS, device 600 detects input 898 on lens color option 896-1 and displays lens color slider 899 (in addition to frame color slider 897) as displayed in FIG. 8BT. Device 600 also scales and rotates the display of avatar 805 so that eyeglass lens 8140-2 is displayed. The avatar's eyes are slightly visible through lens 8140-2, and a reflection 8150 is displayed on lens 8140-2. In some embodiments, if a first slider (e.g., slider 897) is displayed and device 600 detects selection of a color option (e.g., 896-1) associated with a different characteristic than the first slider, the device hides the first slider and displays a second slider (e.g., slider 899) for the selected color option for the different characteristic.

[0355] The lens color slider 899 is similar to other color sliders described herein and may be used to adjust the color (or other aspects) of the eyeglass lens 8140-2 in accordance with various slider embodiments described herein. In the embodiment shown in FIG. 8BT, the lens color slider 899 controls the opacity of the lens 8140-2 (although it may be used to control or adjust the color or other color characteristics as described herein). The device 600 changes the opacity of the lens 8140-2 in response to detecting movement of the selector affordance 899-1 along the track 899-2. For example, when the selector affordance 899-1 is moved toward edge 899-3, the device 600 increases the opacity of the lens 8140-2. When the selector affordance 899-1 is moved toward edge 899-4, the device 600 decreases the opacity of the lens 8140-2. As shown in Figure 8BT, lens 8140-2 has an opacity that corresponds to the center position of selector affordance 899-1 in track 899-2. When selector affordance 899-1 is moved to edge 899-4, lens 8140-2 has little or no opacity, as shown in Figure 8BU.

[0356] In some embodiments, frame color slider 897 and lens color slider 899 each adjust the avatar features in the same manner, for example, frame color slider 897 changes color option 894-1 from cooler to warmer tones when selector affordance 897-1 is moved to the left, and lens color slider 899 changes color option 896-1 from cooler to warmer tones when selector affordance 899-1 is moved to the left. As another example, the frame color slider 897 modifies color option 894-1 by increasing a first color value (e.g., red) when selector affordance 897-1 moves to the left and increasing a second color value (e.g., green) when selector affordance 897-1 moves to the right, and the lens color slider 899 modifies color option 896-1 by increasing a first color value when selector affordance 899-1 moves to the left and increasing a second color value when selector affordance 899-1 moves to the right.

[0357] In FIG. 8BU, the device 600 detects a vertical scroll gesture 8157 and vertically scrolls the avatar's property area 804 to display hat properties 8106, including hat options 8108, which are updated using the glasses in accordance with the selections described above.

[0358] In FIG. 8BV, device 600 detects a horizontal scroll gesture 8158 to scroll horizontally through hats options 8108, revealing headband hat option 8108d and baseball cap option 8108e in FIG. 8BW.

[0359] In Figure 8BX, device 600 detects input 8159 on headband hat option 8108d, and in Figure 8BY displays avatar 805 updated to include headband 8160 corresponding to the selected headband hat option 8108d. Headband 8160 compresses the avatar's hair 851 onto the avatar's head and reshapes the hair to fit the headband's hat lines 8118. This gives the appearance that the avatar's hair 851 is compressed by the headband (e.g., tucked under the headband) and protruding (e.g., puffing out) from the top (e.g., above the top hat line 8118-1 of the headband) and bottom (e.g., below the bottom hat line 8118-2 of the headband) of the headband 8160.

[0360] The avatar 805 is also displayed moving in response to a detected pose of the user's face (e.g., detected by camera 602). As the user moves his head, device 600 modifies the avatar 805 in real-time to reflect the user's movements. As the avatar 805 moves, the earrings 8125 and the avatar's hair 851 swing in response to the avatar's head movements. In some embodiments, as device 600 modifies the avatar 805 to reflect the user's real-time movements, device 600 also modifies lighting effects on the avatar 805, including moving the positions of displayed reflections 8150 and shadows 8142 based on the relative positions of modeled light sources and the avatar 805 (and selected avatar features, such as the avatar's glasses 8140).

[0361] For example, in Figure 8BX, device 600 displays avatar 805 in a default position (e.g., not zoomed or rotated) with avatar glasses 8140, with a reflection 8150 on the lenses of avatar glasses 8140, and a shadow 8142 positioned on the avatar's face beneath the avatar glasses. In Figure 8BY, as device 600 modifies avatar 805 in response to the user's facial movements, reflection 8150 moves to a different position within the lenses and the shadow (e.g., 8142) moves or disappears on the face (in some embodiments, movement of hair 851 results in a new shadow dynamically appearing on the avatar's face).

[0362] In some embodiments, device 600 alters the physical movement of avatar features (such as, for example, avatar's hair 851) based on features applied to the avatar. For example, as shown in FIG. 8BY, headband 8160 is positioned on avatar 805 compressing hair 851 at lower hat line 8118-2. As avatar 805 moves, hair 851 swings out from lower hat line 8118-2 because headband 8160 compresses hair 851 at lower hat line, limiting its movement. If the avatar is not wearing headband 8160, avatar's hair swings out from avatar's ...

Claims

1. In an electronic device having a display device, displaying an avatar editing user interface via the display device, an avatar having a plurality of avatar features, including a first avatar feature having a first set of one or more colors and a second avatar feature having a set of one or more colors based on and different from the first set of one or more colors; a plurality of color options corresponding to the first avatar characteristic; and detecting a selection of a respective one of the plurality of color options; In response to detecting a selection of the individual color option of the plurality of color options of the first avatar feature, updating an appearance of the avatar according to a determination that the individual color option corresponds to a second set of one or more colors; changing the first avatar feature to the second set of one or more colors; and changing the second avatar feature to a set of one or more colors based on and different from the second set of one or more colors.

2. 2. The method of claim 1, further comprising, in response to detecting a selection of the individual color option of the plurality of color options of the first avatar feature, modifying the first avatar feature and the second avatar feature in a manner different from when the individual color option corresponds to the second set of one or more colors in accordance with a determination that the individual color option corresponds to a third set of one or more colors.

3. displaying, via the display device, a second plurality of color options corresponding to a third avatar characteristic; and detecting a selection of a first color option of the second plurality of color options; in response to detecting a selection of the first color option of the second plurality of color options of the third avatar feature, updating the appearance of the avatar according to a determination that the first color option corresponds to a fourth set of one or more colors; changing the third avatar characteristic to the fourth set of one or more colors; 3. The method of claim 1 or 2, further comprising: modifying the second avatar feature to a set of one or more colors based on and different from the fourth set of one or more colors.

4. detecting a selection of a second color option of the second plurality of color options; 4. The method of claim 3, further comprising: in response to detecting a selection of the second color option of the second plurality of color options for the third avatar feature, and in accordance with a determination that the first color option corresponds to a fifth set of one or more colors, modifying the third avatar feature and the second avatar feature in a manner different from when the first color option is selected.

5. the third avatar feature and the second avatar feature are modified in a first manner that includes adjusting a first color characteristic based on the second set of one or more colors corresponding to the first avatar feature; 5. The method of claim 4, wherein the third avatar feature and the second avatar feature are modified in a second manner including adjusting a second color characteristic, different from the first color characteristic, based on the fourth set of one or more colors corresponding to the third avatar feature.

6. the first avatar characteristic corresponds to a hair color of an avatar; the second avatar feature corresponds to an avatar's eyebrows; The method of claim 3 , wherein the third avatar characteristic corresponds to an avatar's skin color.

7. 7. The method of claim 1, further comprising: in response to detecting a selection of the individual color option of the plurality of color options, displaying a color adjustment control for the individual color option corresponding to the second set of one or more colors.

8. the second avatar feature corresponds to avatar lips having an avatar lip color based on the second set of one or more colors and corresponding to the set of one or more colors different from the second set of one or more colors, and the method further comprises: detecting an input corresponding to the color adjustment control; In response to detecting the input, modifying a lip color of the avatar of a first portion of the lips of the avatar; 8. The method of claim 7 when dependent on any one of claims 1 to 5, further comprising: maintaining the avatar's lip color for a second portion of the avatar's lips.

9. the first avatar characteristic corresponds to a skin color of an avatar; the second avatar feature corresponds to lips of an avatar; The method of claim 1 , wherein the set of one or more colors based on the second set of one or more colors includes the second set of one or more colors and a red value.

10. A computer program product causing a computer to carry out the method according to any one of claims 1 to 9.

11. 1. An electronic device comprising: A memory for storing a computer program according to claim 10; and one or more processors capable of executing the computer programs stored in the memory.

12. 1. An electronic device comprising:

10. An electronic device comprising means for carrying out the method according to any one of claims 1 to 9.

Images