Avatar creating user interface

Abstract

To provide a faster, further efficient method and interface to create and edit an avatar for an electronic device.SOLUTION: An electronic device (e.g., 600) displays an avatar editing user interface that includes displaying an avatar having a plurality of avatar feature parts including avatar hair (e.g., 851) with a selected avatar hairstyle (e.g., 836b') (e.g., a particular style of hair of the avatar selected (e.g., by the user)) via a display apparatus (e.g., 601). The avatar editing user interface also includes a plurality of accessory options for the avatar (e.g., affordances corresponding to various avatar accessories (e.g., glasses, hats, earrings, scarves)).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, filed on May 7, 2018, entitled "Avatar Creation User Interface". The content of this application is hereby incorporated by reference in its entirety into this specification.

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

Background Art

[0003] An avatar is used to represent a user of an electronic device. An avatar can represent the appearance of the user, or an idealized representation or a completely fictional representation of the user. Subsequently, the avatar can be associated with the user such that the appearance of the avatar to other users triggers an association or link with the user. For such applications, including use in multimedia communications, avatars can be created and edited.

Summary of the Invention

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

[0005] Accordingly, the present technology provides an electronic device with a faster and more efficient method and interface for creating and editing avatars. Such a method and interface optionally complement or replace other methods of creating avatars. Such a method and interface reduce the user's cognitive burden and realize a more efficient human-machine interface. In the case of a battery-operated computing device, such a method and interface save power and increase the interval between battery charges.

[0006] A method is described. The method is executed on an electronic device having a display device and one or more input devices. The method includes displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar; detecting, while the avatar navigation user interface is displayed, a gesture directed at the avatar navigation user interface via the one or more input devices; 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 different from the first type in the avatar navigation user interface according to a determination that the gesture is in a second direction opposite to 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. These one or more programs cause, via the display device, an avatar navigation user interface that includes an avatar to be displayed, and while the avatar navigation user interface is being displayed, gestures directed at the avatar navigation user interface are detected via the one or more input devices, and in response to detecting a gesture, according to a determination that the gesture is in a first direction, a first type of avatar is displayed in the avatar navigation user interface, and according to a determination that the gesture is in a second direction opposite the first direction, a second type of avatar different from the first type is displayed in the avatar navigation user interface.

[0008] A transitory computer-readable storage medium is described. The 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. These one or more programs cause, via the display device, an avatar navigation user interface that includes an avatar to be displayed, and while the avatar navigation user interface is being displayed, gestures directed at the avatar navigation user interface are detected via the one or more input devices, and in response to detecting a gesture, according to a determination that the gesture is in a first direction, a first type of avatar is displayed in the avatar navigation user interface, and according to a determination that the gesture is in a second direction opposite the first direction, a second type of avatar different from the first type is displayed in the avatar navigation user interface.

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

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

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

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

[0013] A transient computer-readable storage medium is described. The transient computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device including a display device, and the one or more programs include, via the display device, an avatar having a plurality of avatar features, a first option selection area of an individual avatar feature including a first set of feature options corresponding to a set of candidate values of 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 of 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 display an avatar editing user interface including simultaneously displaying the second option selection area of the individual avatar feature, and in response to detecting a selection of one of the feature options within the first set of feature options, change at least one appearance of the second set of feature options from a first appearance to a second appearance.

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

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

[0016] A method is described. This method is executed on an electronic device having a display device. This method includes displaying, via the display device, a user interface object that includes 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 among the plurality of color options corresponding to a second color; in response to detecting this selection, changing the color of the individual feature to this color option and displaying a first color adjustment control for color options corresponding to a 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 the 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. 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 having a display device, the one or more programs including instructions to display, via the display device, a user interface object that includes an individual feature having a first set of one or more colors and a plurality of color options for the individual feature; detect a selection of a color option among the plurality of color options corresponding to a second color; in response to detecting this selection, change the color of the individual feature to this color option and display a first color adjustment control for color options corresponding to a second set of one or more colors; detect 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, change the 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.

[0018] A non - transitory computer - readable storage medium is described. This non - transitory computer - readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device including a display device, and these one or more programs, via the display device, display 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 among the plurality of color options corresponding to a second color, in response to detecting this selection, change the color of the individual features to this color option, display a first color - adjustment control for color options corresponding to a 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 a second set of one or more colors, and in response to detecting the input corresponding to the first color - adjustment control, based on the second color, change 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.

[0019] An electronic device is described. This electronic device includes a display device, one or more processors, and a memory storing one or more programs configured to be executed by the one or more processors, and these one or more programs, via the display device, display 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 among the plurality of color options corresponding to a second color, in response to detecting this selection, change the color of the individual features to this color option, display a first color - adjustment control for color options corresponding to a 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 a second set of one or more colors, and in response to detecting the input corresponding to the first color - adjustment control, based on the second color, change 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.

[0020] An electronic device is described. The electronic device 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 among the plurality of color options corresponding to a second color, means for changing the color of the individual feature to this color option in response to detecting this selection, means for displaying a first color adjustment control for color options corresponding to a 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 a second set of one or more colors, and means for changing the 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 in response to detecting an input corresponding to the first color adjustment control.

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

[0022] 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 including a display device, and the one or more programs, via the display device, display 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 different from the first set of one or more colors based on the first set of one or more colors, a plurality of color options corresponding to the first avatar feature, and display an avatar editing user interface including updating the appearance of the avatar including changing the first avatar feature to a second set of one or more colors according to a determination that an individual color option corresponds to the second set of one or more colors in response to detecting a selection of the individual color option of the plurality of color options and detecting a selection of the individual color option of the plurality of color options of the first avatar feature, and changing the second avatar feature to a set of one or more colors different from the second set of one or more colors based on the second set of one or more colors.

[0023] 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 including a display device, and the one or more programs include, via the display device, a first avatar feature having a first set of one or more colors, and a plurality of avatar features including a second avatar feature having a set of one or more colors different from the first set of one or more colors based on the first set of one or more colors, a plurality of color options corresponding to the first avatar feature, and an avatar editing user interface including displaying the avatar and the plurality of color options, detecting a selection of an individual color option of the plurality of color options, and updating the appearance of the avatar including changing the first avatar feature to a second set of one or more colors according to 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 different from the second set of one or more colors based on the second set of one or more colors.

[0024] An electronic device is described. The electronic device includes a display device, one or more processors, and a memory storing one or more programs configured to be executed by the one or more processors. The one or more programs include instructions to display, 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 different from the first set of one or more colors based on the first set of one or more colors, a plurality of color options corresponding to the first avatar feature, and an avatar editing user interface including displaying the avatar and the plurality of color options; detecting a selection of an individual color option of the plurality of color options; and updating the appearance of the avatar including changing the first avatar feature to a second set of one or more colors according to a determination that the individual color option corresponds to the second set of one or more colors in response to detecting the selection of the individual color option of the plurality of color options for the first avatar feature, and changing the second avatar feature to a set of one or more colors different from the second set of one or more colors based on the second set of one or more colors.

[0025] An electronic device is described. The electronic device includes means 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 different from the first set of one or more colors based on the first set of one or more colors, a plurality of color options corresponding to the first avatar feature, and an avatar editing user interface including displaying the avatar and the plurality of color options; means for detecting a selection of an individual color option of the plurality of color options; means for updating the appearance of the avatar including changing the first avatar feature to a second set of one or more colors according to a determination that the individual color option corresponds to the second set of one or more colors in response to detecting the selection of the individual color option of the plurality of color options for the first avatar feature; and means for changing the second avatar feature to a set of one or more colors different from the second set of one or more colors based on the second set of one or more colors.

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

[0027] A non-transitory computer-readable storage medium is described. This non-transitory computer-readable storage medium 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 to display an avatar having a plurality of avatar features including the hair of an avatar having the hairstyle of a selected avatar, and accessory options for a plurality of avatars; detect a selection of an individual accessory option; and in response to detecting a selection of an individual accessory option of the accessory options for the plurality of avatars, change the appearance of the avatar to include the representation of the individual accessory option, including displaying a representation of a first accessory option arranged on the avatar according to a determination that the individual accessory option is the first accessory option; and change the shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar while maintaining the hairstyle of the selected avatar.

[0028] A non - transitory computer - readable storage medium is described. This non - transitory computer - readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, and these one or more programs include displaying an avatar having a plurality of avatar features including the hair of the avatar with the hairstyle of the selected avatar, and accessory options for a plurality of avatars, detecting a selection of an individual accessory option, and in response to detecting the selection of the individual accessory option of the accessory options for the plurality of avatars, changing the appearance of the avatar to include the representation of the individual accessory option, including displaying the representation of a first accessory option arranged on the avatar according to the determination that the individual accessory option is the first accessory option, and while maintaining the hairstyle of the selected avatar, changing the shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar.

[0029] An electronic device is described. This electronic device includes a display device, one or more processors, and a memory storing one or more programs configured to be executed by the one or more processors, and these one or more programs include displaying an avatar having a plurality of avatar features including the hair of the avatar with the hairstyle of the selected avatar, and accessory options for a plurality of avatars, detecting a selection of an individual accessory option, and in response to detecting the selection of the individual accessory option of the accessory options for the plurality of avatars, changing the appearance of the avatar to include the representation of the individual accessory option, including displaying the representation of a first accessory option arranged on the avatar according to the determination that the individual accessory option is the first accessory option, and while maintaining the hairstyle of the selected avatar, changing the shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar.

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

[0031] A method is described. The method is executed on an electronic device having one or more cameras and a display device. The method includes displaying a virtual avatar having a plurality of avatar features that changes appearance in response to a change detected in the pose of a face within the field of view of the one or more cameras via the display device, detecting a movement of a first facial feature of the face while the face is detected within the field of view of the one or more cameras, the face including a plurality of detected facial features including the first facial feature other than the user's tongue, and in response to detecting the movement of the first facial feature, displaying and changing the position of the avatar's tongue based on the movement of the first facial feature according to the determination that the user's tongue meets an individual criterion including the requirement that the user's tongue is visible for the individual criterion to be met, and stopping displaying the avatar's tongue according to the determination that the user's tongue does not meet the individual criterion.

[0032] 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 including a display device and one or more cameras. These one or more programs display a virtual avatar having a plurality of avatar features that change appearance in response to changes detected in the pose of a face within the field of view of the one or more cameras via the display device. While a face is detected within the field of view of the one or more cameras, the face includes a plurality of detected face features including a first face feature other than the user's tongue, detects movement of the first face feature, and in response to detecting movement of the first face feature, based on the movement of the first face feature, in accordance with a determination that the user's tongue meets an individual criterion that includes a requirement that the user's tongue be visible for the individual criterion to be met, displays the tongue of the avatar, changes the position of the tongue of the avatar, and stops displaying the tongue of the avatar in accordance with a determination that the user's tongue does not meet the individual criterion.

[0033] A transitory computer-readable storage medium is described. The transitory computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device including a display device and one or more cameras. These one or more programs display a virtual avatar having a plurality of avatar features that change appearance in response to changes detected in the pose of a face within the field of view of the one or more cameras via the display device. While a face is detected within the field of view of the one or more cameras, the face includes a plurality of detected face features including a first face feature other than the user's tongue, detects movement of the first face feature, and in response to detecting movement of the first face feature, based on the movement of the first face feature, in accordance with a determination that the user's tongue meets an individual criterion that includes a requirement that the user's tongue be visible for the individual criterion to be met, displays the tongue of the avatar, changes the position of the tongue of the avatar, and stops displaying the tongue of the avatar in accordance with a determination that the user's tongue does not meet the individual criterion.

[0034] An electronic device is described. The electronic device includes a display device, one or more cameras, one or more processors, and a memory storing one or more programs configured to be executed by the one or more processors. The one or more programs, via the display device, display a virtual avatar having a plurality of avatar features that change appearance in response to changes detected in the pose of a face within the field of view of the one or more cameras, and while a face is detected within the field of view of the one or more cameras, the face includes a plurality of detected face features including first face features other than the user's tongue, detect movement of the first face features, and in response to detecting movement of the first face features, based on the movement of the first face features, display a tongue of the avatar, change the position of the tongue of the avatar, and stop displaying the tongue of the avatar according to a determination that the user's tongue meets an individual criterion that includes a requirement that the user's tongue be visible for the individual criterion to be met, and stop displaying the tongue of the avatar according to a determination that the user's tongue does not meet the individual criterion.

[0035] An electronic device is described. The electronic device includes a display device, one or more cameras, means for displaying a virtual avatar having a plurality of avatar features that change appearance in response to changes detected in the pose of a face within the field of view of the one or more cameras via the display device, means for detecting movement of the first face features while a face is detected within the field of view of the one or more cameras, the face including a plurality of detected face features including first face features other than the user's tongue, means for displaying a tongue of the avatar and changing the position of the tongue of the avatar based on the movement of the first face features according to a determination that the user's tongue meets an individual criterion that includes a requirement that the user's tongue be visible for the individual criterion to be met, in response to detecting movement of the first face features, and means for stopping displaying the tongue of the avatar according to a determination that the user's tongue does not meet the individual criterion.

[0036] The 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. The 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] Accordingly, a faster and more efficient method and interface for creating and editing avatars are provided to the device, thereby increasing the effectiveness, efficiency, and user satisfaction of such a device. Such a method and interface may complement or replace other methods of creating and editing avatars.

Brief Description of the Drawings

[0038] To better understand the various embodiments described, the following "Modes for Carrying Out the Invention" should be referred to in conjunction with the following drawings. Here, like reference numerals refer to corresponding parts throughout the drawings.

[0039]

Figure 1A

[0040]

Figure 1B

[0041]

Figure 2

[0042]

Figure 3

[0043]

Figure 4A

[0044]

Figure 4B

[0045]

Figure 5A

[0046]

Figure 5B

[0047]

Figure 6A

Figure 6B

Figure 6C

Figure 6D

Figure 6E

Figure 6F

Figure 6G

Figure 6H

Figure 6I

Figure 6J

Figure 6K

Figure 6L

Figure 6M

Figure 6N

Figure 6O

Figure 6P

Figure 6Q

Figure 6R

Figure 6S

Figure 6T

Figure 6U

Figure 6V

Figure 6W

Figure 6X

Figure 6Y

Figure 6Z

Figure 6AA

Figure 6AB

Figure 6AC

Figure 6AD

Figure 6AE

Figure 6AF

Figure 6AG

Figure 6AH

Figure 6AI

Figure 6AJ

Figure 6AK

Figure 6AL

Figure 6AM

Figure 6AN

[0048]

Figure 7

[0049]

Figure 8A

Figure 8B

Figure 8C

Figure 8D

Figure 8E

Figure 8F

Figure 8G

Figure 8H

Figure 8I

Figure 8J

Figure 8K

Figure 8L

Figure 8M

Figure 8N

Figure 8O

Figure 8P

Figure 8Q

Figure 8R

Figure 8S

Figure 8T

Figure 8U

Figure 8V

Figure 8W

Figure 8X

Figure 8Y

Figure 8Z

Figure 8AA

Figure 8AB

Figure 8AC

Figure 8AD

Figure 8AE

Figure 8AF

Figure 8AG

Figure 8AH

Figure 8AI

Figure 8AJ

Figure 8AK

Figure 8AL

Figure 8AM

Figure 8AN

Figure 8AO

Figure 8AP

Figure 8AQ

Figure 8AR

Figure 8AS

Figure 8AT

Figure 8AU

Figure 8AV

Figure 8AW

Figure 8AX

Figure 8AY

Figure 8AZ

Figure 8BA

Figure 8BB

Figure 8BC

Figure 8BD

Figure 8BE

Figure 8BF

Figure 8BG

Figure 8BH

Figure 8BI

Figure 8BJ

Figure 8BK

Figure 8BL

Figure 8BM

Figure 8BN

Figure 8BO

Figure 8BP

Figure 8BQ

Figure 8BR

Figure 8BS

Figure 8BT

Figure 8BU

Figure 8BV

Figure 8BW

Figure 8BX

Figure 8BY

Figure 8BZ

Figure 8CA

Figure 8CB

Figure 8CC

Figure 8CD

Figure 8CE

Figure 8CF

[0050]

Figure 9

[0051]

Figure 10A

Figure 10B

[0052]

Figure 11A

Figure 11B

[0053]

Figure 12A

Figure 12B

[0054]

Figure 13A

Figure 13B

Figure 13C

Figure 13D

Figure 13E

Figure 13F

Figure 13G

Figure 13H

Figure 13I

Figure 13J

Figure 13K

Figure 13L

Figure 13M

Figure 13N

Figure 13O

[0055]

Figure 14A

Figure 14B

[0056] In the following description, exemplary methods, parameters, etc. are described. However, it should be understood that the purpose of such description is not to limit the scope of the present disclosure, but to provide an explanation of exemplary embodiments.

[0057] There is a need for an electronic device that provides an efficient method and interface for creating and editing avatars. For example, programs for creating and editing avatars already exist, but these programs are inefficient and difficult to use compared to the following techniques, in which users can create and edit realistic or unrealistic avatars as needed. Such techniques can reduce the cognitive burden on users creating and editing avatars, thereby improving productivity. Further, such techniques can reduce the power of the processor and battery that would otherwise be wasted on usually redundant user input.

[0058] In the following FIGS. 1A-1B, FIG. 2, FIG. 3, FIGS. 4A-4B, and FIGS. 5A-5B, an exemplary device for performing techniques for creating and editing avatars will be described.

[0059] FIGS. 6A-6AN show an exemplary user interface for navigating between avatars within an application, according to some embodiments. FIG. 7 is a flowchart showing a method for navigating between avatars within an application, according to some embodiments. The user interface of FIGS. 6A-6AN is used to illustrate the processes described below, including the process of FIG. 7.

[0060] FIGS. 8A-8CF show an exemplary user interface for displaying an avatar editing user interface. FIGS. 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B are flowcharts showing a method for displaying an avatar editing user interface, according to some embodiments. The user interface of FIGS. 8A-8CF is used to illustrate the processes described below, including the processes of FIGS. 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B.

[0061] Figures 13A - 13O illustrate exemplary user interfaces for changing an avatar within an avatar navigation user interface. Figures 14A and 14B are flow diagrams showing a method for changing an avatar within 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", etc. 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. For example, without departing from the scope of the various embodiments described, the first touch can be referred to as the second touch, and similarly, the second touch can be referred to as the first touch. The first touch and the second touch are both touches, but 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" refers to and includes any and all possible combinations of one or more of the associated listed items. It should also be understood that the terms "includes", "including", "comprises", and / or "comprising", when used herein, specify the presence of the stated features, integers, steps, operations, elements, and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0064] Optionally, the term "if (in the case of ~)" is construed to mean "when (when ~)", "upon (when ~)", "in response to determining (in response to the determination that ~)", or "in response to detecting (in response to detecting ~)" depending on the context. Similarly, the phrase "if it is determined (if it is determined that ~)" or "if (a stated condition or event) is detected (if (a stated condition or event) is detected)" may optionally, depending on the context, mean "upon determining (when determining ~)", "in response to determining (in response to the determination that ~)", "upon detecting (the stated condition or event) (when detecting (the stated condition or event))", or "in response to detecting (the stated condition or event) (in response to detecting (the stated condition or event))".

[0065] Embodiments of an electronic device, a user interface for such a device, and related processes for using such a device are described. In some embodiments, the device is a portable communication device such as a mobile phone that also includes other functions such as PDA functionality and / or music player functionality. Exemplary embodiments of portable multifunctional devices include, but are not limited to, the iPhone®, iPod Touch®, and iPad® devices of Apple Inc. of Cupertino, California. Other portable electronic devices such as laptop or tablet computers with a touch-sensitive surface (e.g., a touch screen display and / or a touch pad) may optionally be used. In some embodiments, it should also be understood that the device is a desktop computer with a touch-sensitive surface (e.g., a touch screen display and / or a touch pad) rather than a portable communication device.

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

[0067] This device generally supports various applications such as one or more of a drawing application, a presentation application, a word processing application, a website creation application, a disk authoring application, a spreadsheet application, a game application, a telephone application, a video conferencing application, an email application, an instant messaging application, a training support application, a photo management application, a digital camera application, a digital video camera application, a web browsing application, a digital music player application, and / or a digital video player application.

[0068] 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 functions of the touch-sensitive surface, as well as the corresponding information displayed on the device, are optionally adjusted and / or changed for each application and / or within each respective application. Thus, the common (such as touch-sensitive surface) physical architecture of the device optionally supports various applications with a user interface that is intuitive and transparent to the user.

[0069] Attention is now directed to an embodiment of a portable device having a touch-sensing display. FIG. 1A is a block diagram showing a portable multifunctional device 100 having a touch-sensing display system 112 according to some embodiments. The touch-sensing display 112 may be referred to as a “touch screen” for convenience and may also be known or referred to as a “touch-sensing display system”. The device 100 includes a memory 102 (optionally including one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripheral device interface 118, an RF circuit 108, an audio circuit 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input control devices 116, and an external port 124. The device 100 optionally includes one or more light sensors 164. The device 100 optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact on the device 100 (e.g., a touch-sensing surface such as the touch-sensing display system 112 of the device 100). The device 100 optionally includes one or more haptic output generators 167 for generating a haptic output on the device 100 (e.g., generating a haptic output on a touch-sensing surface such as the touch-sensing display system 112 of the device 100 or the touch pad 355 of the device 300). These components optionally communicate via one or more communication buses or signal lines 103.

[0070] As used in this specification and the claims, the term "intensity" of a contact on a touch-sensing surface refers to the force or pressure (force per unit area) of a contact (e.g., finger contact) on the touch-sensing surface, or an alternative (substitute) for the force or pressure of a contact on the touch-sensing surface. The intensity of the contact includes at least four different values, and more typically has a range of values that includes hundreds (e.g., at least 256) of different values. The intensity of the 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-sensing surface are optionally used to measure the force at various points on the touch-sensing surface. In some implementations, force measurements from multiple force sensors are combined (e.g., weighted average) to determine an estimated value of the contact force. Similarly, a pressure-sensitive tip of a stylus is optionally used to determine the pressure of the stylus on the touch-sensing surface. Alternatively, the size and / or change thereof of the contact area detected on the touch-sensing surface, the capacitance and / or change thereof of the touch-sensing surface in proximity to the contact, and / or the resistance and / or change thereof of the touch-sensing surface in proximity to the contact are optionally used as an alternative to the force or pressure of a contact on the touch-sensing surface. In some implementations, alternative measurements of the contact force or pressure are used directly to determine whether they exceed an intensity threshold (e.g., the intensity threshold is described in units corresponding to the alternative measurements). In some implementations, alternative measurements of the contact force or pressure are converted to an estimated force or pressure, and the estimated force or pressure is used to determine whether it exceeds an intensity threshold (e.g., the intensity threshold is a pressure threshold measured in units of pressure). By using the intensity of the contact as an attribute of a user input, it becomes possible for a user to access additional device functions that may not otherwise be accessible to the user on a device with a limited area, reduced size, and that may not be separately accessible by the user on a touch-sensing display, for example, to display affordances and / or to receive user input (e.g., via a touch-sensing display, a touch-sensing surface, or a physical / mechanical control such as a knob or button).

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

[0072] Device 100 is merely an example of a portable multifunctional device. It should be understood that Device 100 may optionally have more or fewer components than those shown, may optionally combine two or more components, or may optionally have different configurations or arrangements of components. The various components shown in FIG. 1A are implemented in a combination of hardware, software, or 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 also optionally includes non-volatile memory such as one or more magnetic disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. Memory controller 122 optionally controls access to memory 102 by other components of device 100.

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

[0075] The RF (radio frequency) circuit 108 transmits and receives RF signals, also called electromagnetic signals. The RF circuit 108 converts electrical signals into electromagnetic signals or vice versa and communicates with a communication network and other communication devices via electromagnetic signals. The RF circuit 108 optionally includes well-known circuits 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, etc. The RF circuit 108 optionally communicates wirelessly with other devices over a network such as the Internet, also known as the World Wide Web, an intranet, and / or a wireless network such as a cellular telephone network, a wireless local area network (LAN), and / or a metropolitan area network (MAN). The RF circuit 108 optionally includes well-known circuits for detecting a near field communication (NFC) field, such as short-range wireless communication. Wireless communication optionally uses any of a plurality of communication standards, communication protocols, and communication technologies, including the Global System for Mobile Communications (GSM (registered trademark)) for mobile communication, 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-HSPDA), long term evolution (LTE), short-range wireless communication (near fieldcommunication, NFC), wideband code division multiple access (W-CDMA), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth (registered trademark), Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi) (registered trademark) (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 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, but not limited thereto.

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

[0077] The I / O subsystem 106 couples the input / output peripheral devices of the device 100, such as the touch screen 112 and other input control devices 116, to the peripheral device interface 118. The I / O subsystem 106 optionally includes a display controller 156, a light sensor controller 158, an intensity sensor controller 159, a haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive / transmit electrical signals from / to 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 (or not coupled to any of) a keyboard, an infrared port, a USB port, and pointer devices such as a mouse. One or more buttons (e.g., 208 in FIG. 2) optionally include up / down buttons for volume adjustment of the speaker 111 and / or the microphone 113. The one or more buttons optionally include push buttons (e.g., 206 in FIG. 2).

[0078] Optionally, as described in U.S. Patent Application No. 11 / 322,549, "Unlocking a Device by Performing Gestures on an Unlock Image," filed December 23, 2005, and issued as U.S. Patent No. 7,657,849 (which patent is incorporated herein by reference in its entirety), unlocking the touch screen 112 by a quick press of a push button or optionally starting a process of using gestures on the touch screen to unlock the device. Optionally, turning the power of the device 100 on or off by pressing a push button (e.g., 206) for a longer time. The function of one or more of the buttons is optionally user-customizable. The touch screen 112 is used to implement virtual buttons or soft buttons and one or more soft keyboards.

[0079] The touch-sensitive display 112 provides an input interface and an output interface between the device and the user. The display controller 156 receives and / or transmits electrical signals to and from 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] The touch screen 112 has a touch sensing surface, sensor, or set of sensors that receives input from a user based on tactile and / or haptic contact. The touch screen 112 and the display controller 156 (along with any associated modules and / or instruction sets in the memory 102) detect contact (and any movement or interruption of the contact) on the touch screen 112 and convert the detected contact into an interaction with user interface objects (e.g., one or more soft keys, icons, web pages, or images) displayed on the touch screen 112. In an exemplary embodiment, the point of contact between the touch screen 112 and the user corresponds to the user's finger.

[0081] The touch screen 112 optionally uses LCD (liquid crystal display) technology, LPD (light emitting polymer display) technology, or LED (light emitting diode) technology, but in other embodiments, other display technologies are used. The touch screen 112 and the display controller 156 use any of a plurality of currently known or later developed touch sensing technologies, including, but not limited to, capacitive technology, resistive technology, infrared technology, and surface acoustic wave technology, and other proximity sensor arrays or other elements for determining one or more points of contact with the touch screen 112, to optionally detect contact and any movement or interruption thereof. In an exemplary embodiment, projected mutual capacitive sensing technology, as seen in the iPhone (registered trademark) and iPod Touch (registered trademark) by Apple Inc. of Cupertino, California, is used.

[0082] The touch-sensing display in some embodiments of the touch screen 112 is optionally similar to a multi-touch sensing touch pad described in the following U.S. Patents: No. 6,323,846 (Westerman et al.), No. 6,570,557 (Westerman et al.), and / or No. 6,677,932 (Westerman), and / or U.S. Patent Application Publication No. 2002 / 0015024 (A1). These documents are hereby incorporated by reference in their entirety. However, the touch screen 112 displays visual output from the device 100, whereas the touch-sensing touch pad does not provide visual output.

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

[0084] The touch screen 112 optionally has a video resolution exceeding 100 dpi. In some embodiments, the touch screen has a video resolution of about 160 dpi. The user optionally contacts the touch screen 112 using any suitable object or accessory such as a stylus, finger, etc. In some embodiments, the user interface is designed to function primarily based on finger-based contact and gestures, and due to the larger contact area of the finger on the touch screen, it may be less accurate than stylus-based input. In some embodiments, the device converts finger-based rough input into an accurate pointer / cursor position or a command for performing the user-desired action.

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

[0086] The device 100 also includes a power system 162 for supplying power to various components. The power system 162 optionally includes a power management system, one or more power sources (e.g., battery, alternating current (AC)), a recharge system, a power outage detection circuit, a power converter or inverter, a power status indicator (e.g., light-emitting diode (LED)), 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 optical sensors 164. FIG. 1A shows an optical sensor connected to an optical sensor controller 158 within I / O subsystem 106. Optical sensor 164 optionally includes a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. Optical sensor 164 receives light from the environment projected through one or more lenses and converts that light into data representing an image. In combination with imaging module 143 (also referred to as a camera module), optical sensor 164 optionally captures a still image or video. In some embodiments, the optical sensor is disposed on the back of device 100, which is opposite touch screen display 112 on the front of the device, so as to enable the touch screen display to be used as a viewfinder for still image and / or video acquisition. In some embodiments, optionally, an optical sensor is disposed on the front of the device so that a user can obtain an image of that user for a video conference while viewing other video conference participants on the touch screen display. In some embodiments, the position of optical sensor 164 can be changed by a user (e.g., by rotating lenses and sensors within the device housing), thereby enabling a single optical sensor 164 to be used with the touch screen display for both video conferencing and still image and / or video image acquisition.

[0088] Device 100 also optionally includes one or more depth camera sensors 175. FIG. 1A shows a depth camera sensor coupled to a depth camera controller 169 within the I / O subsystem 106. The depth camera sensor 175 receives data from the environment and creates a three-dimensional model of objects (e.g., faces) within a scene from a viewpoint (e.g., the depth camera sensor). In some embodiments, in conjunction with the imaging module 143 (also referred to as the camera module), the depth camera sensor 175 is optionally used to determine depth maps of various portions of an image captured by the imaging module 143. In some embodiments, the depth camera sensor is disposed on the front face of the device 100 such that, as the user views other video conferencing participants on the touch screen display, an image of the user including depth information is optionally acquired for a video conference in order to capture a self-portrait image including depth map data. In some embodiments, the depth camera sensor 175 is disposed on the back of the device, or on both the back and front faces of the device 100. In some embodiments, the position of the depth camera sensor 175 can be changed by the user (e.g., by rotating lenses and sensors within the device housing) such that the depth camera sensor 175 is used in conjunction with the touch screen display for both video conferencing and for the acquisition of 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 distances of objects within a scene from a viewpoint (e.g., a camera, a light sensor, a depth camera sensor). In one embodiment of a depth map, each depth pixel defines a position along the Z-axis of the viewpoint at which the 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., from 0 to 255). For example, a value of "0" represents a pixel located at the farthest location within the "three-dimensional" scene, and a value of "255" represents a pixel located closest to the viewpoint (e.g., a camera, a light sensor, a depth camera sensor) within the "three-dimensional" scene. In other embodiments, a depth map represents the distance between an object within the scene and the plane of the viewpoint. In some embodiments, a depth map includes information regarding the relative depths of various features of an object within the field of view of a depth camera (e.g., the relative depths 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 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 an intensity sensor controller 159 within I / O subsystem 106. Contact intensity sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electro-force sensors, piezoelectric force sensors, optical force sensors, capacitive touch sensing surfaces, or other intensity sensors (e.g., sensors used to measure the force (or pressure) of contact on a touch sensing surface). Contact intensity sensor 165 receives contact intensity information (e.g., pressure information or a surrogate for pressure information) from the surrounding environment. In some embodiments, at least one contact intensity sensor is disposed on or proximate to a touch sensing surface (e.g., touch sensing display system 112). In some embodiments, at least one contact intensity sensor is disposed on the back of device 100, which is opposite to a touch screen display 112 disposed on the front of device 100.

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

[0092] Device 100 also optionally includes one or more haptic output generators 167. FIG. 1A shows a haptic output generator coupled to a haptic feedback controller 161 within I / O subsystem 106. The haptic 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 haptic output generating components (e.g., components that convert an electrical signal into a haptic output) on the device. The contact intensity sensor 165 receives haptic feedback generation instructions from the haptic feedback module 133 and generates a haptic output on device 100 that can be sensed by a user of device 100. In some embodiments, at least one haptic output generator is disposed on or proximate to a touch sensing surface (e.g., touch sensing display system 112) and optionally generates a haptic output by moving the touch sensing surface in a vertical direction (e.g., in / out of the surface of device 100) or a lateral direction (e.g., back and forth within the same plane as the surface of device 100). In some embodiments, at least one haptic output generator sensor is disposed on the back of device 100, opposite a touch screen display 112 disposed on the front of device 100.

[0093] Device 100 also optionally includes one or more accelerometers 168. FIG. 1A shows an accelerometer 168 coupled to the peripheral device interface 118. Alternatively, the accelerometer 168 is optionally coupled to an input controller 160 within the I / O subsystem 106. The accelerometer 168 functions optionally as described in U.S. Patent Application Publication No. 20050190059, "Acceleration-based Theft Detection System for Portable Electronic Devices", and No. 20060017692, "Methods And Apparatuses For Operating A Portable Device Based On An Accelerometer", both of which are hereby incorporated by reference in their entirety. In some embodiments, information is displayed on the touch screen display in a portrait or landscape orientation based on an analysis of data received from one or more accelerometers. In addition to the 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., portrait or landscape orientation) of device 100.

[0094] In some embodiments, the software components stored in memory 102 include an operating system 126, a communication module (or instruction set) 128, a touch / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and an application (or instruction set) 136. Further, in some embodiments, as shown in FIGS. 1A and 3, memory 102 (FIG. 1A) or memory 370 (FIG. 3) stores a device / global internal state 157. The device / global internal state 157 includes one or more of the following: an active application state indicating which application is active if there is a currently active application, a display state indicating which application, view, or other information occupies various regions of the touch screen display 112, a sensor state including information obtained from various sensors and input control devices 116 of the device, and position information regarding the position and / or orientation of the device.

[0095] The 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 general system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware components and software components.

[0096] The communication 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 circuit 108 and / or the external ports 124. The external ports 124 (e.g., Universal Serial Bus (USB), FIREWIRE (registered trademark), etc.) are adapted to connect to other devices either directly or indirectly through a network (e.g., the Internet, a wireless LAN, etc.). In some embodiments, the external port is the same as or similar to the 30-pin connector used on an iPod (registered trademark) (a trademark of Apple Inc.) device and / or a compatible multi-pin (e.g., 30-pin) connector.

[0097] The Contact / Motion Module 130 optionally detects contact with the touch screen 112 and other touch-sensing devices (e.g., a touch pad or a physical click wheel) (in cooperation with the Display Controller 156). The Contact / Motion Module 130 includes various software components for performing various operations related to the detection of contact, such as determining whether contact has occurred (e.g., detecting an event of a finger being lowered), determining the intensity of the contact (e.g., the force or pressure of the contact, or an alternative to the force or pressure of the contact), determining whether there is movement of the contact, tracking movement across the touch-sensing surface (e.g., detecting one or more events of a finger being dragged), and determining whether the contact has stopped (e.g., detecting an event of a finger being raised or an interruption of the contact). The Contact / Motion Module 130 receives contact data from the touch-sensing surface. Determining the movement of the contact point represented by a 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 operations are optionally applied to a single contact (e.g., contact with one finger) or multiple simultaneous contacts (e.g., "multi-touch" / contact with multiple fingers). In some embodiments, the Contact / Motion Module 130 and the Display Controller 156 detect contact on the touch pad.

[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 the user (e.g., to determine whether the 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 specific physical actuators and can be adjusted without changing the physical hardware of the device 100). For example, the mouse "click" threshold of a trackpad or touch screen display can be set to any of a wide range of predefined thresholds without changing the hardware of the trackpad or touch screen display. Additionally, in some implementations, the user of the device is provided with software settings for adjusting 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] The contact / motion module 130 optionally detects gesture inputs by the user. Different gestures on the touch-sensing surface have different contact patterns (e.g., different motions, timings, and / or intensities of detected contacts). Thus, gestures are optionally detected by the detection of a specific contact pattern. For example, detecting a finger tap gesture includes detecting an event of a finger being lowered (e.g., at the location of an icon), and subsequently detecting an event of the finger being raised (lift-off) at the same location (or substantially the same location) as the event of the finger being lowered. As another example, detecting a finger swipe gesture on the touch-sensing surface includes detecting an event of a finger being lowered, subsequently detecting one or more events of the finger being dragged, and then subsequently detecting an event of the finger being raised (lift-off).

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

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

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

[0103] The text input module 134 is optionally a component of the graphic 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 that requires 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 calling, to the camera 143 as photo / video metadata, and to applications that provide location-based services such as the weather widget, local yellow page widget, and map / navigation widget).

[0105] The application 136 optionally includes the following modules (or sets of instructions), or subsets or supersets thereof. ● Contact module 137 (also sometimes referred to as an address book or contact list), ● Phone module 138, ● Video conferencing module 139, ● Email client module 140, ● Instant messaging (IM) module 141, ● Training support module 142, ● 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, ● Widget module 149 that optionally includes one or more of weather widget 149-1, stock price widget 149-2, calculator widget 149-3, alarm clock widget 149-4, dictionary widget 149-5, and other widgets obtained by the user, as well as user-created widget 149-6, ● Widget creation module 150 for creating user-created widget 149-6, ● Search module 151, ● Video and music player module 152 that integrates the video player module and the music player module, ● Memory module 153, ● Map module 154 and / or ● Online video module 155.

[0106] Examples of other applications 136 optionally stored in the memory 102 include other word processing applications, other image editing applications, drawing applications, presentation applications, JAVA (registered trademark)-compatible applications, encryption, digital rights management, voice recognition, and voice replication.

[0107] Together with the touch screen 112, the display controller 156, the contact module 130, the graphic module 132, and the text input module 134, the contact module 137 is optionally used to manage an address book or contact list (e.g., stored in the application internal state 192 of the contact module 137 in the memory 102 or the memory 370), which includes adding a name(s) to the address book, deleting a name(s) from the address book, associating a phone number(s), email address(es), address(es), or other information with a name, associating an image with a name, classifying and sorting names, providing a phone number or email address to initiate and / or facilitate communication by the phone 138, the video conferencing module 139, the email 140, or the IM 141, and so on.

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

[0109] In cooperation with the RF circuit 108, audio circuit 110, speaker 111, microphone 113, touch screen 112, display controller 156, optical sensor 164, optical sensor controller 158, contact / motion module 130, graphic module 132, text input module 134, contact module 137, and telephone module 138, the videoconference module 139 includes executable instructions for starting, conducting, and ending a videoconference between the user and one or more other participants according to the user's instructions.

[0110] In cooperation with the RF circuit 108, touch screen 112, display controller 156, contact / motion module 130, graphic module 132, and text input module 134, the email client module 140 includes executable instructions for creating, sending, receiving, and managing emails according to the user's instructions. In cooperation with the image management module 144, the email client module 140 makes it very easy to create and send emails with still or video images captured by the camera module 143.

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

[0112] In cooperation with the RF circuit 108, touch screen 112, display controller 156, contact / motion module 130, graphic module 132, text input module 134, GPS module 135, map module 154, and music player module, the training support module 142 creates a training (e.g., having time, distance, and / or calorie consumption goals), communicates with a training sensor (sports device), receives training sensor data, calibrates sensors used to monitor the training, selects and plays music for the training, and displays, stores, and transmits training data, including executable instructions.

[0113] In cooperation with the touch screen 112, display controller 156, light sensor(s) 164, light sensor controller 158, contact / motion module 130, graphic module 132, and image management module 144, the camera module 143 captures still images or videos (including video streams) and stores them in the memory 102, changes the characteristics of still images or videos, or deletes still images or videos from the memory 102, including executable instructions.

[0114] In cooperation with the touch screen 112, display controller 156, contact / motion module 130, graphic module 132, text input module 134, and camera module 143, the image management module 144 arranges, changes (e.g., edits) or otherwise operates on still images and / or video images, labels, deletes, presents (e.g., in a digital slide show or album), and stores them, including executable instructions.

[0115] In cooperation with the RF circuit 108, the touch screen 112, the display controller 156, the contact / motion module 130, the graphic module 132, and the text input module 134, the browser module 147 includes executable instructions for browsing the Internet in accordance with user instructions, including searching for, linking to, receiving, and displaying web pages or portions thereof, as well as attached and other files linked to the web pages.

[0116] In cooperation with the RF circuit 108, the touch screen 112, the display controller 156, the contact / motion module 130, the graphic module 132, the text input module 134, the email client module 140, and the browser module 147, the calendar module 148 includes executable instructions for creating, displaying, modifying, and storing a calendar and data associated with the calendar (e.g., calendar items, to do lists, etc.) in accordance with user instructions.

[0117] In cooperation with the RF circuit 108, touch screen 112, display controller 156, contact / motion module 130, graphic module 132, text input module 134, and 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 created by the user (e.g., user-created widget 149-6). In some embodiments, the widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In some embodiments, the widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! widget).

[0118] In cooperation with the RF circuit 108, touch screen 112, display controller 156, contact / motion module 130, graphic module 132, text input module 134, and browser module 147, the widget creation module 150 is optionally used by the user to create a widget (e.g., change a user-specified location on a web page to a widget).

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

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

[0121] In cooperation with the touch screen 112, the display controller 156, the touch / motion module 130, the graphic module 132, and the text input module 134, the memo module 153 includes executable instructions for creating and managing memos, to do lists, etc. according to user instructions.

[0122] In cooperation with the RF circuit 108, the touch screen 112, the display controller 156, the touch / motion module 130, the graphic module 132, the text input module 134, the GPS module 135, and the browser module 147, the map module 154 optionally receives, displays, modifies, and stores maps and data associated with the maps (e.g., driving directions, data of stores and other attractions near or at a specific location, and other location-based data) according to user instructions for use.

[0123] In cooperation with touch screen 112, display controller 156, contact / motion module 130, graphic module 132, audio circuit 110, speaker 111, RF circuit 108, text input module 134, email client module 140, and browser module 147, online video module 155 includes instructions that enable a user to access, view, receive (e.g., by streaming and / or downloading), play (e.g., on the touch screen or on an external display connected via external port 124), send an email including a link to a particular online video, and otherwise manage online videos in one or more file formats such as H.264. In some embodiments, instead of email client module 140, instant messaging module 141 is used to send a link to a particular online video. Additional explanations of the online video application can be found in U.S. Provisional Patent Application No. 60 / 936,562, filed Jun. 20, 2007, "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos", and U.S. Patent Application No. 11 / 968,067, filed Dec. 31, 2007, "Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos", the contents of which are hereby incorporated by reference in their entirety.

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

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

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

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

[0128] Event sorter 170 receives event information and determines an application 136-1 to which the event information is to be delivered and an application view 191 of application 136-1. Event sorter 170 includes an event monitor 171 and an event dispatcher module 174. In some embodiments, application 136-1 includes an application internal state 192 indicating the current application view(s) 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 / are 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 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 for enabling the user to return to a previous state or view of application 136-1, and a redo / undo queue for previous actions performed by the user.

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

[0131] In some embodiments, the event monitor 171 transmits requests to the peripheral device interface 118 at predetermined intervals. In response, the peripheral device interface 118 transmits event information. In other embodiments, the peripheral device interface 118 transmits event information only when a significant event (e.g., receiving an input that exceeds a predetermined noise threshold and / or is longer than a predetermined period) exists.

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

[0133] The hit view determination module 172 provides a software procedure for determining where within one or more views a sub-event has occurred when the touch-sensitive display 112 displays two or more views. The views are composed of the control unit and other elements that the user can view on the display.

[0134] Another aspect of the user interface associated with the application is a set of views, sometimes referred to herein as application views or user interface windows, in which information is displayed and touch-based gestures occur. The application views (for each application) where touches are detected optionally correspond to a program level within the program hierarchy or view hierarchy of the application. For example, the lowest-level view where a touch is detected is optionally called the hit view, and the set of events recognized as appropriate input is optionally determined at least in part based on the hit view of the initial touch that starts a touch-based gesture.

[0135] The hit view determination module 172 receives information related to sub-events of touch-based gestures. When the application has a plurality of views organized in a hierarchy, the hit view determination module 172 identifies the hit view as the lowest-level view within the hierarchy where the sub-events are to be processed. In most situations, the hit view is the lowest-level view where the first sub-event (e.g., the first sub-event in a sequence of sub-events that form an event or potential event) occurs. Once the hit view is identified by the hit view determination module 172, the hit view generally receives all sub-events related to the same touch or input source for which it was identified as the hit view.

[0136] The active event recognition unit determination module 173 determines which view(s) within the view hierarchy should receive a particular sequence of sub-events. In some embodiments, the active event recognition unit determination module 173 determines that only the hit view should receive a particular sequence of sub-events. In other embodiments, the active event recognition unit determination module 173 determines that all views including the physical location of the sub-event are views that are actively involved, and thus, all views that are actively involved should receive a particular sequence of sub-events. In other embodiments, even if a touch sub-event is completely limited to a region associated with a particular view, the upper-level views in the hierarchy will still continue to be views that are actively involved.

[0137] The event dispatcher module 174 dispatches event information to an event recognizer (e.g., event recognizer 180). In embodiments including the active event recognition unit determination module 173, the event dispatcher module 174 distributes event information to the event recognition unit determined by the active event recognition unit determination module 173. In some embodiments, the event dispatcher module 174 stores the event information obtained by the corresponding event receiver 182 in an event queue.

[0138] In some embodiments, the operating system 126 includes an event sorter 170. Alternatively, the application 136-1 includes an event sorter 170. In still other embodiments, the event sorter 170 is an independent module or part of another module stored in the memory 102, such as the touch / motion module 130.

[0139] In some embodiments, application 136-1 includes a plurality of event handlers 190 and one or more application views 191, each including instructions to process 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. Generally, a corresponding application view 191 includes a plurality of 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, a corresponding event handler 190 includes one or more of event data 179 received from data update unit 176, object update unit 177, GUI update unit 178, and / or event sorter 170. The event processing unit 190 optionally utilizes or calls data update unit 176, object update unit 177, or GUI update unit 178 to update the application internal state 192. Alternatively, one or more of the application views 191 include one or more corresponding event handlers 190. Also, in some embodiments, one or more of data update unit 176, object update unit 177, and GUI update unit 178 are included in a 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. The event recognizer 180 includes an event receiving unit 182 and an event comparing unit 184. In some embodiments, the event recognition unit 180 also includes at least a subset of metadata 183 and event distribution instructions 188 (optionally including sub-event distribution instructions).

[0141] The event receiving unit 182 receives event information from the event sorting unit 170. The event information includes sub-events, for example, information related to a touch or a movement of a touch. Depending on the sub-event, the event information also includes additional information such as the position of the sub-event. When the sub-event is related to a movement of a touch, 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 referred to as the posture of the device).

[0142] The event comparison unit 184 compares the event information with a predefined event or sub-event definition, and based on the comparison, determines an event or sub-event, or determines or updates the state of an event or sub-event. In some embodiments, the event comparison unit 184 includes an event definition 186. The event definition 186 includes definitions of events (e.g., a predefined series of sub-events), such as event 1 (187-1), event 2 (187-2), etc. In some embodiments, the sub-events in event 187 include, for example, the start of a touch, the end of a touch, the movement of a touch, the stop of a touch, and multiple touches. In one example, the definition of event 1 (187-1) is a double-tap on a displayed object. The double-tap includes, for example, a first touch (start of the touch) on the displayed object during a predetermined period, a first lift-off (end of the touch) during a predetermined period, a second touch (start of the touch) on the display object during a predetermined period, and a second lift-off (end of the touch) during a predetermined period. In another example, the definition of event 2 (187-2) is a drag operation on a displayed object. This drag operation includes, for example, a touch (or contact) on the display object during a predetermined period, 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 about one or more associated event processing units 190.

[0143] In some embodiments, event definition 187 includes the definition of events for each user interface object. In some embodiments, event comparison unit 184 performs a hit test to determine the user interface object associated with the sub - event. For example, in an application view where three user interface objects are displayed on touch - sensitive display 112, when a touch is detected on touch - sensitive display 112, event comparison unit 184 performs a hit test to determine which of the three user interface objects is associated with the touch (sub - event). If each of the displayed objects is associated with a corresponding event handler 190, the event comparison unit uses the result of the hit test to determine which event handler 190 should be activated. For example, event comparison unit 184 selects the event handler associated with the sub - event and object that triggered the hit test.

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

[0145] When the corresponding event recognizer 180 determines that a series of sub - events does not match any of the events of event definition 186, the corresponding event recognizer 180 enters a state of event impossible, event failure, or event end, and then ignores the next sub - event of the touch - based gesture. In this situation, if there are other event recognizers that remain active for the hit view, those event recognizers continue to track and process the sub - events of the ongoing touch - based gesture.

[0146] In some embodiments, the corresponding event recognizer 180 includes metadata 183 having configurable properties, flags, and / or lists indicating how the event delivery system should actively participate in event recognition for events for which sub - event delivery should be performed. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists indicating how the event recognition parts should interact with each other or are allowed to interact with each other. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists indicating whether sub - events are to be delivered at various levels in the view hierarchy or program hierarchy.

[0147] In some embodiments, each event recognizer 180 activates an event handler 190 associated with the event when one or more specific 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) sub - events to each hit view. In some embodiments, the event recognizer 180 sets a flag associated with the recognized event, and the event handler 190 associated with the flag catches the flag and performs a predefined process.

[0148] In some embodiments, the event delivery instruction 188 includes a sub - event delivery instruction that delivers event information about sub - events without activating the event handler. Instead, the sub - event delivery instruction delivers the event information to an event handler associated with a series of sub - events or to a view that is actively involved. The event handler associated with a series of sub - events or with a view that is actively involved receives the event information and performs a predefined process.

[0149] In some embodiments, data update unit 176 creates and updates data used in application 136-1. For example, data update unit 176 updates a phone number used in contact module 137 or stores a video file used in a video player module. In some embodiments, object update unit 177 creates and updates objects used in application 136-1. For example, object update unit 177 creates a new user interface object or updates the position of a user interface object. GUI update unit 178 updates the GUI. For example, GUI update unit 178 prepares display information and sends the display information to graphic module 132 for display on a touch-sensitive display.

[0150] In some embodiments, event handler(s) 190 includes or has access to data update unit 176, object update unit 177, and GUI update unit 178. In some embodiments, data update unit 176, object update unit 177, and GUI update unit 178 are included in a single module of respective application 136-1 or application view 191. In other embodiments, they are included in two or more software modules.

[0151] The foregoing discussion regarding event handling of a user's touch on a touch-sensitive display also applies to other forms of user input for operating multifunctional device 100 with an input device, it being understood that not all of them are initiated on a touch screen. For example, movement of a mouse and pressing of a mouse button optionally adapted to single or multiple keyboard presses or holds, taps, drags, scrolls, etc. on a touch pad, contact movement such as pen stylus input, movement of the device, verbally detected eye movement, biometric input, and / or any combination thereof are optionally utilized as input corresponding to sub-events that define events to be recognized.

[0152] Figure 2 shows a portable multifunctional device 100 having a touch screen 112, according to some embodiments. The touch screen optionally displays one or more graphics within a user interface (UI) 200. In this and the embodiments described hereinafter, the user can select one or more of the graphics by performing gestures on the graphics using, for example, one or more fingers 202 (not drawn to an exact scale in the figure) or one or more styli 203 (not drawn to an exact scale in the figure). In some embodiments, selection of one or more of the graphics occurs when the user breaks contact with the one or more graphics. In some embodiments, the gestures optionally include one or more taps, one or more swipes (from left to right, from right to left, upward, and / or downward), and / or rolling of a finger in contact with the device 100 (from right to left, from left to right, upward, and / or downward). In some implementations or situations, an accidental contact with a graphic does not select the graphic. For example, a swipe gesture that sweeps over an application icon is optional when the gesture corresponding to selection is a tap, and does not select the corresponding application.

[0153] Device 100 also optionally includes one or more physical buttons, such as a "home" or menu button 204. As described above, menu button 204 is optionally used to navigate to any application 136 within a set of applications being executed, optionally 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 the device on / off and locking the device, volume adjustment button(s) 208, a subscriber identity module (SIM) card slot 210, a headset jack 212, and a docking / charging external port 124. The push button 206 is used to turn the power on / off on the device by pressing the button and holding it in the pressed state for a predetermined time, lock the device by pressing the button and releasing it before the predetermined time has elapsed, and / or optionally unlock the device or initiate an unlock process. In an alternative embodiment, device 100 also receives verbal input through a microphone 113 to activate or deactivate some functions. Device 100 also optionally includes one or more contact intensity sensors 165 for detecting the intensity of contact on the touch screen 112 and / or one or more haptic output generators 167 for generating haptic output to the user of device 100.

[0155] FIG. 3 is a block diagram of an exemplary multi-functional device including a display and a touch sensing surface, in accordance with some embodiments. Device 300 need not be portable. In some embodiments, device 300 is a laptop computer, desktop computer, tablet computer, multimedia playback device, navigation device, educational device (such as a child's learning toy), gaming system, or a control device (e.g., a home or business controller). Device 300 generally 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 communications between system components. Device 300 includes an input / output (I / O) interface 330 that includes a display 340, which is generally a touch screen display. I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350, a touch pad 355, a touch output generator 357 (similar to the touch output generator(s) 167 described above with reference to FIG. 1A, for generating touch outputs on device 300), and a sensor 359 (e.g., a light sensor, an acceleration sensor, a proximity sensor, a touch sensing sensor, and / or a contact intensity sensor similar to the 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 the CPU(s) 310.In some embodiments, memory 370 stores programs, modules, and data structures, or subsets thereof, similar to those stored in memory 102 of the portable multifunctional device 100 (FIG. 1A). Further, memory 370 optionally stores additional programs, modules, and data structures not present in memory 102 of the portable multifunctional device 100. For example, memory 370 of device 300 optionally stores a drawing module 380, a presentation module 382, a word processing module 384, a website creation module 386, a disk authoring module 388, and / or a spreadsheet module 390, while memory 102 of the portable multifunctional device 100 (FIG. 1A) does not optionally store these modules.

[0156] Each of the elements of FIG. 3 identified above is optionally stored in one or more of the aforementioned memory devices. Each of the modules identified above corresponds to a set of instructions for performing the functions described above. The modules or programs (e.g., sets of instructions) identified above need not be implemented as separate software programs, procedures, or modules, and thus, in various embodiments, various subsets of these modules may be combined or otherwise rearranged. In some embodiments, memory 370 optionally stores a subset of the modules and data structures identified above. Further, memory 370 optionally stores additional modules and data structures not described above.

[0157] Next, attention is directed, for example, to embodiments of a user interface optionally implemented on the portable multifunctional device 100.

[0158] Figure 4A shows an exemplary user interface for a menu of applications on a portable multifunctional 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. ● One or more signal strength indicators 402 for wireless communication(s), such as cellular and Wi-Fi signals, ● Time 404, ● Bluetooth indicator 405, ● Battery status indicator 406, ● A tray 408 that includes icons for frequently used applications, such as the following, ○ 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 referred to as the iPod (a trademark of Apple Inc.) module 152, labeled "iPod," and ● Icons for other applications, such as the following, ○ An icon 424 for the IM module 141, labeled "Message," ○ 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," ○ An icon 434 for the stock price widget 149-2, labeled as "Stock Price", ○ An icon 436 for the map module 154, labeled as "Map", ○ An icon 438 for the weather widget 149-1, labeled as "Weather", ○ An icon 440 for the alarm clock widget 149-4, labeled as "Clock", ○ An icon 442 for the training support module 142, labeled as "Training Support", ○ An icon 444 for the memo module 153, labeled as "Memo", and ○ An icon 446 for the settings application or module, labeled as "Settings", which provides access to the settings related to the device 100 and its various applications 136.

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

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

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

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

[0163] FIG. 5A shows an exemplary personal electronic device 500. The device 500 includes a body 502. In some embodiments, the 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, the device 500 has a touch-sensitive display screen 504, hereinafter referred to as the touch screen 504. Instead of or in addition to the touch screen 504, the device 500 has a display and a touch-sensitive surface. Similar to devices 100 and 300, in some embodiments, the touch screen 504 (or the touch-sensitive surface) optionally has one or more intensity sensors for detecting the intensity of an applied contact (e.g., a touch). One or more intensity sensors of the touch screen 504 (or the touch-sensitive surface) can provide output data representing the intensity of the touch. The user interface of the device 500 can respond to the touch based on the intensity of the touch, which means that touches of different intensities can call different user interface operations on the device 500.

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

[0165] In some embodiments, device 500 has one or more input mechanisms 506 and input mechanism 508. Input mechanisms 506 and 508 can be physical if included. 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, enable device 500 to be attached, for example, to hats, eyewear, earrings, necklaces, shirts, jackets, bracelets, watch bands, chains, pants, belts, shoes, wallets, backpacks, and the like. These attachment mechanisms enable device 500 to be worn by a user.

[0166] FIG. 5B shows an exemplary personal electronic device 500. In some embodiments, device 500 can include some or all of the components described with respect to FIGS. 1A, 1B, and 3. Device 500 has a bus 512 that operably couples an I / O section 514 to one or more computer processors 516 and a memory 518. The I / O section 514 can be connected to a display 504, which can have a touch sensing component 522 and optionally a force sensor 524 (e.g., a contact force sensor). Further, the I / O section 514 can be connected to a communication unit 530 for receiving data for applications and operating systems using Wi-Fi, Bluetooth, Near Field Communication (NFC), cellular, and / or other wireless communication technologies. The device 500 can include an input mechanism 506 and / or an input mechanism 508. The input mechanism 506 can optionally be, for example, a rotatable input device, or a pushable and rotatable input device. The input mechanism 508 can optionally be, in some embodiments, a button.

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

[0168] The memory 518 of the personal electronic device 500 can include one or more non-transitory computer-readable storage media for storing computer-executable instructions, which, when executed by one or more computer processors 516, can cause the computer processor to execute, for example, 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 media can be any media 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 media is a transitory computer-readable storage media. In some examples, the storage media is a non-transitory computer-readable storage media. Non-transitory computer-readable storage media can include, but are not limited to, magnetic storage devices, optical storage devices, and / or semiconductor storage devices. Examples of such storage devices include magnetic disks, optical disks based on CD, DVD, or Blu-ray (registered trademark) technology, and persistent solid-state memories such as flash, solid-state drives. The personal electronic device 500 is not limited to the components and configurations of FIG. 5B and can include other components or additional components in a plurality of configurations.

[0169] As used herein, the term "affordance" refers to a user-interactive graphical user interface object that is optionally displayed on the display screen of devices 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 part of the user interface with which the user is interacting. In some implementations that include 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 of FIG. 3, or touch-sensitive surface 451 of 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 functions as a "focus selector" and the particular user interface element is adjusted according to the detected input. In some implementations that include a touch screen display (e.g., touch-sensitive display system 112 of FIG. 1A, or touch screen 112 of FIG. 4A) that enables direct interaction with user interface elements on the touch screen display, the contact detected on the touch screen serves as a "focus selector" such that when an input (e.g., a press input by the 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 touch screen display, that particular user interface element is adjusted according to the detected input. In some embodiments, the focus is moved from one region of the user interface to another region of the user interface (e.g., by using a tab key or arrow keys to move the focus from one button to another button) without a corresponding movement of the cursor or movement of the contact on the touch screen display, and in these embodiments, the focus selector moves according to the movement of the 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 the touch screen 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 the element of the user interface with which the user intends to interact).For example, while a press input is detected on a touch sensing surface (e.g., a touch pad or a touch screen), the position of a focus selector (e.g., a cursor, a contact, or a selection box) over a corresponding button indicates that the user is attempting to activate the corresponding button (as opposed to other user interface elements shown on the device's display).

[0171] As used in this specification and the claims, the term "characteristic strength" of a contact refers to a characteristic of the contact based on one or more strengths of the contact. In some embodiments, the characteristic strength is based on a plurality of strength samples. The characteristic strength is optionally based on a set of strength samples collected during a predefined number of strength samples, or during a predefined time period (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) for a predefined event (e.g., after detecting the contact, before detecting the 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 strength of the contact, and / or before or after detecting a decrease in the strength of the contact). The characteristic strength of the contact is optionally based on one or more of, for example, the maximum value of the strength of the contact, the mean value of the strength of the contact, the average value of the strength of the contact, the top 10% value of the strength of the contact, a value that is half of the maximum value of the strength of the contact, a value that is 90% of the maximum value of the strength of the contact, etc. In some embodiments, the duration of the contact is used (e.g., when the characteristic strength is the average of the strength of the contact over time) to determine the characteristic strength. In some embodiments, the characteristic strength is compared to a set of one or more strength thresholds to determine whether an operation has been performed by a user. For example, the set of one or more strength thresholds optionally includes a first strength threshold and a second strength threshold. In this example, a first operation is performed as a result of a contact having a characteristic strength that does not exceed the first threshold, a second operation is performed as a result of a contact having a characteristic strength that exceeds the first threshold and does not exceed the second threshold, and a third operation is performed as a result of a contact having a characteristic strength that exceeds the second threshold. In some embodiments, the comparison between the characteristic strength and one or more thresholds is used not to determine which of the first or second operations to perform, but to determine whether to perform one or more operations (e.g., whether to perform each operation, or to defer the execution of each operation).

[0172] In some embodiments, for the purpose of determining characteristic intensity, a portion of the gesture is specified. For example, the touch sensing surface optionally receives a continuous swipe contact that transitions 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 that swipe contact (e.g., only the portion of the swipe contact at the end position), rather than the entire continuous swipe contact. In some embodiments, optionally, a smoothing algorithm is 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 a non - weighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some situations, these smoothing algorithms remove minor increases or decreases in the intensity of the swipe contact for the purpose of determining characteristic intensity.

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

[0174] An increase in the characteristic intensity of contact from an intensity below a light press intensity threshold to an intensity between the light press intensity threshold and a deep press intensity threshold may be referred to as a "light press" input. An increase in the characteristic intensity of contact from an intensity below a deep press intensity threshold to an intensity above the deep press intensity threshold may be referred to as a "deep press" input. An increase in the characteristic intensity of contact from an intensity below a contact detection intensity threshold to an intensity between the contact detection intensity threshold and the light press intensity threshold may be referred to as the detection of contact on the touch surface. A decrease in the characteristic intensity of contact from an intensity above the contact detection intensity threshold to an intensity below the contact detection intensity threshold may be referred to as the detection of lift-off of 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 that includes respective press inputs, or in response to detecting respective press inputs that are performed at respective contacts (or a plurality of contacts), and each press input is detected based at least in part on detecting an increase in the intensity of a contact (or a plurality of contacts) above a press input intensity threshold. In some embodiments, each operation is performed in response to detecting an increase in the intensity of each contact (e.g., the "downstroke" of each press input) above the press input intensity threshold. In some embodiments, the press input includes an increase in the intensity of each contact above the press input intensity threshold and a subsequent decrease in the intensity of the contact below the press input intensity threshold, and each operation is performed in response to detecting a decrease in the intensity of each contact (e.g., the "upstroke" of each press input) below the subsequent press input threshold.

[0176] In some embodiments, the device employs intensity hysteresis to avoid unpredictable inputs sometimes referred to as "jitter", and the device defines or selects a hysteresis intensity threshold having a predefined relationship with the pressing input intensity threshold (e.g., the hysteresis intensity threshold is X intensity units lower than the pressing input intensity threshold, or the hysteresis intensity threshold is 75%, 90%, or some reasonable ratio of the pressing input intensity threshold). Thus, in some embodiments, a pressing input includes an increase in the intensity of each contact above the pressing input intensity threshold and a decrease in the intensity of a contact below the hysteresis intensity threshold corresponding to the subsequent pressing input intensity threshold, and each operation is performed in response to detection of a decrease in the intensity of each subsequent contact below its hysteresis intensity threshold (e.g., the "upstroke" of each pressing input). Similarly, in some embodiments, a pressing input is detected only when the device detects an increase in the intensity of a contact from an intensity below the hysteresis intensity threshold to an intensity above the pressing input intensity threshold and optionally a subsequent decrease in the intensity of the contact to an intensity below the hysteresis intensity, and each operation is performed in response to detection of that pressing input (e.g., an increase in the intensity of the contact or a decrease in the intensity of the contact, depending on the situation).

[0177] For ease of explanation, descriptions of operations performed in response to a pressing input associated with a pressing input intensity threshold or in response to a gesture including a pressing input are optionally triggered in response to detecting any of an increase in the intensity of a contact above the pressing input intensity threshold, an increase in the intensity of a contact from an intensity below the hysteresis intensity threshold to an intensity above the pressing input intensity threshold, a decrease in the intensity of a contact below the pressing input intensity threshold, and / or a decrease in the intensity of a contact below the hysteresis intensity threshold corresponding to the pressing input intensity threshold. Additionally, in examples described as having an operation performed in response to detecting a decrease in the intensity of a contact below the pressing input intensity threshold, the operation 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 pressing input intensity threshold.

[0178] Attention is now paid to embodiments of a user interface (UI) and related processing implemented on an electronic device such as the portable multifunctional device 100, device 300, or device 500.

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

[0180] FIG. 6A shows a 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 can at least capture data representing a portion of the 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 representing the sensed light, camera 602 can capture other types of data such as depth data. For example, in some embodiments, camera 602 also uses techniques based on speckle, time - of - flight, parallax, or focus to capture depth data. The image data captured by device 600 using camera 602 includes data corresponding to a portion of the light spectrum for the scene within the camera's field of view. Also, in some embodiments, the captured image data 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 a portion of the light spectrum data. 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 embodiments, the device further includes a light-emitting device (e.g., a light projector) such as an IR floodlight, a structured light projector, or a combination thereof. The light-emitting device is optionally used to illuminate a subject when capturing an image by a visible light camera and a depth camera (e.g., an IR camera), and the 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 an object within a scene from a viewpoint (e.g., a camera). In one embodiment of the depth map, each depth pixel defines a position along the Z-axis of the viewpoint where the 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., from 0 to 255). For example, a value of "0" represents a pixel located at the farthest location within the "three-dimensional" scene, and a value of "255" represents a pixel located closest to the viewpoint (e.g., a camera) within the "three-dimensional" scene. In other examples, the depth map represents the distance between an object within the scene and the plane of the viewpoint. In some embodiments, the depth map includes information regarding the relative depth of various features of an object of interest within the field of view of the depth camera (e.g., the relative depth of the eyes, nose, mouth, ears of a user's face). In some embodiments, the depth map includes information that enables the device to determine the contour of an object of interest in the Z direction. In some embodiments, the illumination effects described herein are displayed using parallax information from two cameras (e.g., two visible light cameras) for a rear image and combining depth information from a depth camera with image data from a visible light camera for a front image (e.g., a self-portrait image).In some embodiments, when two visible light cameras are used to determine depth information and when a depth camera is used to determine depth information, the same user interface is used, and a consistent user experience is provided to the user even when the information used to generate the lighting effect is determined using significantly different techniques. In some embodiments, while the device is displaying a camera user interface to which one of the lighting effects is applied, the device detects a selection of a camera switching affordance and replaces the display of the front camera's field of view with the back camera's field of view (or vice versa) while maintaining the display of the user interface control for applying the lighting effect, switching from the front camera (e.g., a depth camera and a visible light camera) to the back camera (e.g., two visible light cameras spaced apart from each other) (or vice versa).

[0182] In FIG. 6A, device 600 is displaying a messaging user interface 603 of a messaging application. The messaging user interface 603 includes a message display area 604 that includes a message 605 sent to a participant in the message conversation (represented by recipient identifier 606). The messaging user interface 603 also includes a message creation field 608 that displays an input (e.g., text input, multimedia input, etc.) for sending to a participant 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 an input 616 (e.g., a touch input on display 601) at a location corresponding to the application dock affordance 610.

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

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

[0186] In FIG. 6E, in response to detecting input 624, device 600 replaces application dock 618 and application display region 622 with avatar splash screen 626 having exemplary avatar 628. Exemplary avatars include exemplary customizable avatar 628a and exemplary non - customizable avatar 628b. In the embodiment shown in FIG. 6E, customizable avatar 628a is disposed on top of non - customizable avatar 628b. In some embodiments, avatar splash screen 626 includes an animated display of exemplary avatar 628 that moves and changes facial expressions and appears to interact with each other (e.g., appears to talk to each other, wink, smile, smirk, etc.). In some embodiments, device 600 displays avatar splash screen 626 only when application affordance 620a is first selected or when a customizable avatar has not been created. In some embodiments, when avatar splash screen 626 is not displayed, device 600 optionally displays an avatar selection interface, such as reduced - size avatar selection interface 668 (see FIG. 6L and corresponding description below).

[0187] In some embodiments, the virtual avatar is a graphical representation of a user (e.g., a graphic representation of the user) that can be graphically rendered. In some embodiments, the virtual avatar is non-realistic (e.g., cartoonish). In some embodiments, the virtual avatar includes a face of an avatar having one or more avatar features (e.g., features of the avatar face). 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 of the user's physical features (e.g., determined based on a camera such as a depth sensing camera) affects (e.g., affects the graphic representation of the features) the avatar features.

[0188] In some examples, the user can use a camera sensor (e.g., camera module 143, light sensor 164) and optionally a depth sensor (e.g., depth camera sensor 175) to manipulate the characteristics or features of the virtual avatar. When the user's physical features (such as facial features) and position (such as 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 features and position. In some embodiments, the changes in the user's physical features and position indicate various expressions, emotions, contexts, moods, or other non-verbal communications. In some embodiments, the electronic device modifies the displayed image of the virtual avatar to represent these expressions, emotions, contexts, moods, or other non-verbal communications.

[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, rather than a non-human character such as an anthropomorphized configuration of an animal or other non-human object. Further, avatar features can be created or modified, if desired, using an avatar editing user interface (e.g., such as the avatar editing user interface described below with respect to FIGS. 8A-8CF). In some embodiments, a customizable avatar can be created and configured to achieve a customized appearance, physical structure, or modeled behavior.

[0190] In some embodiments, a non-customizable avatar can be selected by a user but is generally not fundamentally configurable, although their appearance can be changed by face tracking as described in detail below. Instead, non-customizable avatars are pre-configured and typically do not have feature components that can be changed by the user. In some embodiments, non-customizable avatars have the appearance of non-human characters, such as anthropomorphized configurations of animals or other non-human objects. Non-customizable avatars cannot be created by the user and cannot be changed to achieve significant changes to 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 continuation affordance 632.

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

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

[0194] The avatar display area 636 also includes a capture affordance 644, which can be selected to capture an image of the avatar 645 for transmission to the participants of a message conversation (see the messaging user interface 603). In some embodiments, the image to be captured is a still image or a video recording depending on the type of gesture detected by the capture affordance 644. For example, if the device 600 detects a tap gesture at the capture affordance 644, the device 600 captures a still image of the avatar 645 when the tap gesture occurs. If the device 600 detects a tap-and-hold gesture at the capture affordance 644, the device 600 captures a video recording of the avatar 645 for the duration that the tap-and-hold gesture persists. In some embodiments, the video recording stops when the finger leaves the affordance. In some embodiments, the video recording continues until a subsequent input (e.g., a tap input) is detected at the position corresponding to the affordance. In some embodiments, the captured image of the avatar 645 (e.g., a still image or a video recording) is then inserted into the message creation field 608 and then transmitted to the participants of the message conversation. In some embodiments, the captured image of the avatar 645 is transmitted directly to the participants of the message conversation without inserting the captured image into the message creation field 608.

[0195] In some embodiments, device 600 tracks the movement and position (e.g., rotational movement and / or translational movement) of a user's face located within the field of view of a camera (e.g., camera 602), and in response, updates the appearance of avatar 645 based on changes detected in the detected user's face (often referred to herein as the "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 shown with an open mouth, widened eyes, and tilted, reflecting an expression and position similar to that of the user's face located within the field of view of camera 602. Such changes to avatar 645 are captured using capture affordance 644 and may optionally be sent to the participants in the message conversation shown in FIG. 6A. The avatar 645 shown in FIG. 6H is a non-customizable avatar, but device 600 can 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 option area 638 are non - customizable avatars pre - configured for immediate user selection. This is because no customizable avatars have been created yet. However, as shown in FIG. 6I, the device 600 displays an avatar creation prompt 646 that spreads from the avatar creation icon 648 to prompt the user to select the avatar creation icon 648. When the user selects the avatar creation icon 648, the device 600 begins the process of creating a new customizable avatar. Thereafter, the created customizable avatar can be added to the avatar option 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 (which has a "+" shape in FIG. 6I) informs the user that they can create a customized avatar that can be added to the expanded avatar selection interface 634 and the library interface 686 of FIG. 6U by selecting the avatar creation icon 648.

[0197] In some embodiments, the avatar creation prompt 646 appears after a slight delay and displays an animation of various examples of customizable avatars, for example, changing facial expressions. For example, in FIG. 6I, the avatar creation prompt 646 displays an exemplary customizable avatar 646a having the appearance of a man wearing a hat and glasses and a smiling facial expression. In FIG. 6J, the avatar creation prompt 646 has shifted to display an exemplary customizable avatar 646b having the appearance of a woman with black hair parted in the middle and a fully laughing facial expression.

[0198] In some embodiments, device 600 displays new customizable avatars, such as an avatar created after selecting avatar creation icon 648, and those avatars appear at the ends of the set of avatar options 640 that are not between any two non-customizable avatars within avatar option area 638. For example, all newly created customizable avatars may be displayed at the trailing end of the set of avatars (e.g., after unicorn avatar option 640b, but not between unicorn avatar option 640b and rooster avatar option 640c) or at the leading end of the set of avatars (e.g., next to avatar creation icon 648, or between avatar creation icon 648 and monkey avatar option 640a). In this way, all customizable avatars are grouped together and displayed, separated (e.g., segregated or distinguished) 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 an input 650 (e.g., a tap gesture on display 601) at a location corresponding to avatar creation icon 648.

[0200] In FIG. 6K, in response to detecting input 650, device 600 displays an avatar editing user interface 652 having a cancel affordance 654 and a done affordance 666. Avatar editing user interface 652 is similar to avatar editing user interface 801 shown in FIG. 8A. Using avatar editing user interface 652, a customizable avatar can be created according to the disclosure provided below with respect to FIGS. 8A - 8CF. For the sake of brevity, details regarding avatar creation and editing are not repeated here but are described later in this disclosure (e.g., FIGS. 8A - 8CE and related disclosure).

[0201] After the user customizes an avatar in the avatar editing user interface 652, the user can select the done affordance 652 to save the avatar as a new customized avatar (shown in FIG. 6L as the customizable female avatar 670). In response to detecting the selection of the done affordance 652, the device 600 saves the new customized avatar and displays a messaging user interface 603 with 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 shown in FIG. 6H. After the device 600 saves the new customized avatar, as described below, the avatar can be displayed in the expanded avatar selection interface 634 by returning to the expanded avatar selection interface 634. Since 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, the avatar is separated and arranged from the non-customizable avatars (e.g., at the end of the set of avatar options 640 but not between any two non-customizable avatars) and grouped with other customizable avatars.

[0202] In FIG. 6L, device 600 displays a reduced avatar selection interface 668 that provides a close-up view of 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 (corresponding to avatar option 640) that can be used for user selection. Device 600 displays the currently selected avatar (e.g., female avatar 670 in FIG. 6L) at a central position within the reduced avatar selection interface 668. If the currently selected avatar is a customizable avatar (e.g., female avatar 670), device 600 also displays an option affordance 674 that can be selected to display an option menu (described below with respect to FIG. 6W). In the reduced avatar selection interface 668, different avatars can be selected by positioning the avatar at the central position, as described in more detail below.

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

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

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

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

[0207] In FIG. 6M, device 600 detects a tilted face 673 making a frowning expression by bending lip 673 - 1 downward, wrinkling brow 673 - 2, and slightly narrowing eyes 673 - 3. In response, device 600 changes the displayed avatar (customizable avatar 670) to have the same facial expression (e.g., a tilted head with a frowning expression).

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

[0209] When the female avatar 670 is scrolled from the central position in FIG. 6M to a position shifted to the left in FIG. 6O, the device 600 displays an animation of the female avatar 670 transitioning from the 3D face-tracking state in FIG. 6M (where the avatar 670 has a pose that matches the pose of the face 673) to the 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). When displaying the animated transition, the device 600 stops changing the female avatar 670 based on the face 673 (however, the face 673 can still be optionally tracked continuously by the device 600). For example, the face 673 still has a frowning pose in FIGS. 6N and 6O, but the head is not tilted currently, while the female avatar 670 has a pose different from the face 673 in both FIGS. 6N and 6O.

[0210] FIG. 6N shows an intermediate state of the animation of the avatar 670 transitioning from the face-tracking state in FIG. 6M to the static state in FIG. 6O. In FIG. 6N, the device 600 has not changed the female avatar 670 based on the detected face 673. Instead, it is displaying the female avatar 670 transitioning from the frowning pose in FIG. 6M to the static smiling pose in FIG. 6O. Specifically, FIG. 6N shows that the head of the female avatar has been moved to an upright position, its mouth is in a position between the frowning face and the smiling face (e.g., between the position of the mouth of the detected face and the position of the mouth of the static avatar), and its eyebrows are not wrinkled.

[0211] Also, in FIG. 6N, since the monkey avatar 671 is moving from a position shifted to the right in FIG. 6M towards the central position in FIG. 6O, the monkey avatar 671 is displayed at a position slightly shifted from the center. The monkey avatar 671 has a static smiling pose in FIGS. 6M - 6O.

[0212] In FIG. 6O, the female avatar 670 has been fully moved to the left position with a static smiling pose, and the monkey avatar 671 is at the center position. The device 600 has not yet changed the monkey avatar 671 based on the detected face 673. In some embodiments, the device 600 generates haptic feedback (e.g., tactile output) and optionally generates an audio output indicating that the scrolled avatar 675 is positioned at the center of the shrunk avatar selection interface 668. This haptic feedback informs the user that an avatar has been placed, such as when the device 600 selects that avatar by releasing the lateral gesture 676.

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

[0214] In some embodiments, when the user scrolls through the list of avatars 675 and each avatar stops at the center position of the scaled-down avatar selection interface 668, the device 600 changes that avatar to assume a pose of the face 673 (e.g., position and facial expression). Thereby, the user can hold a particular facial expression and the device 600 changes the central avatar to match that facial expression. When the user holds the 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 scrolls to the center position. Thereafter, the device 600 displays the next avatar transitioning from the static pose to the held facial expression of the user. In some embodiments, the device 600 does not initiate a change of the avatar positioned at the center of the scaled-down avatar selection interface 668 (either in response to the detected face or as an animated transition from the tracked face to a static pose) until the avatar stops at the center position. Thus, when the user quickly scrolls through the list of avatars 675 (e.g., scrolls through the avatars without stopping at an avatar), the device 600 does not animate or change the avatar based on the detected face during those scrolls.

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

[0216] In FIGS. 6Q and 6R, device 600 detects a lateral gesture 680 (e.g., a swipe or touch-and-drag input on display 601) that moves the device 600 to the right towards the right side of the list of avatars 675. In response to detecting the lateral gesture 680, device 600 displays a list of avatars 675 that scrolls to the right based on the magnitude (and direction) of the lateral gesture 680, thereby scrolling the non-customizable robot avatar 678 off of the display 601, scrolling the monkey avatar 671 to a shifted position to the right, and scrolling the customizable female avatar 670 to the center of the display. Since the customizable avatars and non-customizable avatars are grouped as described above, if the device continues to scroll to the right, device 600 displays other customizable avatars (or optionally, avatar creation affordance 669), but does not display non-customizable avatars. Non-customizable avatars can be displayed by scrolling to the left as described above.

[0217] Figures 6Q and 6R also show that, similar to what was described above with respect to FIGS. 6M - 6P, the avatar scrolls with an animated transition and does not move in the reverse direction. In FIGS. 6Q and 6R, when the avatar moves to the right, device 600 animates the transition of the monkey avatar 671 from the face - tracking state in FIG. 6P to the static state shown in FIG. 6R, with the transient appearance shown in FIG. 6Q. For example, in FIG. 6P, device 600 changes the monkey avatar 671 based on face 673 (e.g., the monkey avatar 671 has a pose that matches the pose of face 673). As shown in FIGS. 6Q and 6R, device 600 stops changing the monkey avatar 671 based on face 673 (e.g., face 673 maintains a frowning expression while the monkey avatar 671 has a different pose) and displays an animated transition of the monkey avatar 671 that transitions from the pose in FIG. 6P to the static appearance in FIG. 6R. FIG. 6Q shows an intermediate state of the animated transition, where the monkey avatar 671 has a mouth in a position between a frowning face and a smiling face, and its eyebrows are not furrowed. The female avatar 670 is slightly shifted to the right and is moving towards the center position while maintaining a static default smiling pose.

[0218] In FIG. 6R, the female avatar 670 is positioned at the center of the reduced avatar selection interface 668 with a static smiling pose. The monkey avatar 671 is in a position shifted to the right with a static pose (the static pose of the monkey avatar 671 is also a smiling pose similar to the static pose of the female avatar 670, but these static poses can be different for each avatar). Face 673 has transitioned to a neutral pose (e.g., a smile without furrowed eyebrows). In FIG. 6R, device 600 does not change the female avatar 670 based on the detected face 673.

[0219] In FIG. 6S, device 600 displays a customizable female avatar 670 selected by being positioned at the center of a reduced avatar selection interface 668. Again, since 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 an avatar library. In some embodiments, device 600 displays edit affordance 682 regardless of whether the displayed avatar is customizable or non-customizable.

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

[0221] In FIG. 6U, device 600 displays library interface 686 in response to detecting a user input on an edit affordance (e.g., edit affordance 682). In the embodiment shown in FIG. 6U, device 600 displays a library interface 686 having female avatar options 670a and new customized male avatar options 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 corresponding 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 an input 690 (e.g., a touch input on display 601) to select female avatar option 670a.

[0223] In FIG. 6W, in response to detecting input 690 to select female avatar option 670a, device 600 displays option menu 692. Device 600 displays an avatar (e.g., female avatar 670) corresponding to the avatar option (e.g., female avatar option 670a) selected from library interface 686, and option menu 692 having edit option 692a, copy option 692b, and delete option 692c. The edit option, copy option, and delete option are each selectable to initiate the respective processes of editing, copying, or deleting the avatar option (and corresponding avatar) selected at library interface 686. In some embodiments, device 600 changes the avatar displayed in option menu 692 according to the face tracking function described herein.

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

[0225] In FIG. 6Y, device 600 detects an input 693b (e.g., a touch input on display 601) on the duplicate option 692b. In response to detecting the input 693b, device 600 creates a duplicate version of the avatar option selected by the 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 an avatar editing user interface 694 (shown in FIG. 6Z) having the duplicated avatar.

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

[0227] The avatar editing user interface 694 is similar to the avatar editing user interface described below with reference to FIGS. 8A-8CF. For the sake of brevity, the details of avatar editing using the avatar editing user interface 694 are not repeated.

[0228] In FIG. 6AA, device 600 displays a library interface 686 having a duplicate avatar option 695a corresponding to a duplicate avatar 695 (which is changed and displayed based on selecting different avatar features using an avatar editing user interface 694). After saving the changed duplicate avatar 695 (for example, detecting a selection of "Done" in the avatar editing user interface 694), device 600 displays the duplicate avatar option 695a at a position adjacent to the selected avatar option that was the source of the duplication (for example, adjacent to avatar option 670a).

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

[0230] In FIG. 6AD, device 600 detects an input 697 (for example, a touch gesture on display 601) on a done affordance 698 and, in response, terminates the library interface 686 and displays a reduced avatar selection interface 668 as shown in FIG. 6AE. The reduced avatar selection interface 668 includes male avatar 688, female avatar 670, and a non - customizable avatar 645.

[0231] In FIG. 6AE, three separate gestures are represented on the reduced avatar selection interface 668. As described below, when the device 600 detects a gesture in a particular direction (e.g., left or right), the device 600 replaces the displayed avatar (e.g., the customizable female avatar 670) with a particular type of avatar determined by the direction of the gesture. For example, if the gesture is in the left direction, the displayed avatar is replaced with a first type of avatar (e.g., an avatar that cannot be customized or is modeled to represent a non-human character). Conversely, if the gesture is in the right direction, 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 FIG. 6AE, when the device 600 detects a left lateral gesture 699a (e.g., a leftward swipe or touch-and-drag gesture on the display 601), the device 600 displays the embodiment shown in FIG. 6AF, which shows the customizable female avatar 670 moved to the left (to a position away from the center of the reduced avatar selection interface 668, e.g., indicating that the female avatar 670 is not selected), and the non-customizable monkey avatar 645 placed at the center of the reduced avatar selection interface 668 (e.g., indicating that the monkey avatar 645 is selected). Thus, the device 600 displays the selection of a non-customizable avatar in response to detecting the left lateral gesture 699a. In some embodiments, the left lateral gesture 699a causes the device 600 to scroll the reduced avatar selection interface 668, thereby moving the customizable female avatar 670 completely off the screen and displaying only one or more non-customizable avatars (similar to the embodiment shown in FIG. 6O).

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

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

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

[0236] In FIG. 6AH, device 600 displays a deployed avatar selection interface 634 having a custom male avatar option 688a and a custom female avatar option 670a within an avatar option area 638. The female avatar option 670a is selected and the female avatar 670 is displayed in an avatar display area 636. Device 600 also displays option affordances 674 in the avatar display area 638. Device 600 also displays a capture affordance 644 that can be selected to record the avatar 670 (e.g., while being changed based on changes detected on the user's face).

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

[0238] In FIG. 6AK, device 600 detects an input 6102 (e.g., a tap gesture on display 601) on the option affordance 674. In FIG. 6AL, in response to detecting the input 6102, device 600 replaces the displayed avatar option area 638 with an option menu area 6104 that includes edit options, copy options, and delete options (e.g., 692a, 962b, 962c) that are each similar to the aforementioned edit options, copy options, and delete options. Device 600 also displays a cancel affordance 6106. In response to detecting an input 6108 (e.g., a tap gesture on display 601) on the cancel affordance 6106, device 600 removes the option menu area 6104 and redisplay the avatar option area 638 as shown in FIG. 6AM.

[0239] In some embodiments, device 600 changes the avatar displayed in avatar display region 636 in response to a 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] FIG. 7 is a flow diagram showing a method for navigating between avatars within an application using an electronic device (e.g., 600) in accordance with some embodiments. Method 700 is performed on a device (e.g., 100, 300, 500, 600) having 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 user's cognitive burden when managing avatars, thereby creating a more efficient human-machine interface. In the case of a battery-operated computing device, power is conserved and the battery charging interval is increased by enabling the user to navigate between avatars within an application faster and more efficiently.

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

[0243] While an avatar navigation user interface (e.g., 668) is being displayed, the electronic device detects (704) gestures (e.g., 699a, 699b) directed at 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 a gesture (e.g., 699a, 699b) (706), the electronic device, in accordance with a determination 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 that is 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) on the avatar navigation user interface (e.g., 668). By displaying the first type of avatar, visual feedback is provided to the user to confirm that an input has been received and that the device is currently in a state where the first type of avatar can be selected. By providing improved visual feedback to the user, the operability of the device is improved, the user - device interface is made more efficient (e.g., by assisting the user to provide appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced by enabling the user to use the device more quickly and efficiently, improving the battery life.

[0245] In response to detecting a gesture (e.g., 699a) (706), an electronic device displays (716) a second type of avatar (e.g., 645) different from a 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) on an avatar navigation user interface according to a determination that the gesture (e.g., 699a) is in a second direction opposite to a first direction (e.g., a leftward horizontal swipe gesture) (714). By displaying the second type of avatar, visual feedback is provided to the user to confirm that an input has been received and that the device is currently in a state where the second type of avatar can be selected. By providing improved visual feedback to the user, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced by enabling the user to use the device more quickly and efficiently, improving battery life.

[0246] According to some embodiments, in further accordance with a determination that the gesture is in a first direction (708), the electronic device stops (712) displaying an avatar of a second type (e.g., 645) on an avatar navigation user interface (e.g., 668). In further accordance with a determination that the gesture is in a second direction opposite the first direction (714), the electronic device stops (718) displaying an avatar of a first type (e.g., 670, 688) on the avatar navigation user interface (e.g., 668). By not displaying a particular type of avatar, the electronic device provides the user with visual feedback confirming that an input has been received and that the device is not in a state where it can select this particular type of avatar. By providing the user with improved visual feedback, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced by enabling the user to use the device more quickly and efficiently, improving battery life.

[0247] According to some embodiments, after displaying an avatar of a first type (e.g., 670), the electronic device detects a second gesture (e.g., 699b) in a 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 an avatar of a second type (e.g., 645), the electronic device detects a third gesture in a 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 an avatar includes customizable (e.g., selectable or configurable) avatar features (e.g., the head, hair, eyes, and lips as seen in FIGS. 8A - 8BB) that generally correspond to human physical characteristics. For example, such an avatar may include an expression of an individual having various physical human characteristics or traits (e.g., an elderly woman with a dark - brown skin color and long straight brown hair). Such an avatar also includes an expression of an individual having various non - human characteristics (e.g., decorative extensions, hats, glasses, etc.) (e.g., shown in FIGS. 8BB - 8CF) that are typically associated with the human appearance. In some embodiments, such an avatar does not include anthropomorphic constructs such as stereotypical animals, stereotypical robots, or the stereotypical of inanimate or non - human objects. The appearance of the avatar provides the user with feedback indicating the types of customizable avatar characteristics. By providing improved visual feedback to the user, the operability of the device is improved, the user - device interface is made more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

[0250] According to some embodiments, a second type of avatar (e.g., avatar 645 corresponding to the avatar option shown in FIG. 6G) has the appearance of a non-human character (e.g., is modeled to represent a non-human character, including non-human characters such as anthropomorphic configurations (e.g., stereotypical animals, stereotypical robots, or stereotypes of inanimate or non-human objects)). The appearance of the avatar provides the user with feedback indicating the type of customizable avatar characteristics. By providing improved visual feedback to the user, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

[0251] According to some embodiments, a first type (e.g., 670) of avatar includes a plurality of avatar features (e.g., 851, 828) that can be configured (e.g., created, selected, customized) by the user. In some embodiments, such an avatar can be created by the user or can be pre-configured using a plurality of features that can be configured by the user. In some embodiments, the configuration of the avatar features results in significant changes in the appearance or physical structure of the virtual avatar.

[0252] According to some embodiments, a second type (e.g., 645) of avatar does not include avatar features that can be configured (e.g., created, selected, customized) by the user. In some embodiments, such an avatar is pre-configured and does not have features that can be configured by the user. In some cases, such an avatar may be slightly modified (e.g., change the color of the avatar or change the size of the avatar), but such changes do not significantly change the appearance or physical structure of the virtual avatar.

[0253] According to some embodiments, an avatar navigation user interface includes a partial region (e.g., 686) having a plurality of avatars. The plurality of avatars includes a first set of avatars of a first type (e.g., 670a, 688a, 670a) and a second set of avatars of a second type (e.g., 640a). The first set of avatars of the first type is separated (e.g., distinguished) from the second set of avatars of the second type. In some embodiments, the avatars of the first type are separated from the avatars of the second type such that, when the avatar navigation user interface is being 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 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 to the first direction in the avatar navigation user interface. In some embodiments, this allows the user to immediately select an avatar of the first or second type without having to scroll through multiple avatars of the same type to reach different types of avatars. By visually separating different types of avatars, feedback is provided to the user indicating that multiple types of avatars are displayed (and available for customization), informing the user about the types of customizable avatar characteristics. By providing improved visual feedback to the user, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate inputs when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

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

[0255] According to some embodiments, the first set of avatars of the first type includes a selected one of the plurality of avatars. The electronic device replaces a selected one of the plurality of avatars with a different avatar of the first type according to 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 a selected one of the plurality of avatars with an avatar of the second type according to 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 plurality of avatars. The electronic device replaces a selected one of the plurality of avatars with an avatar of the first type according to 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 a selected one of the plurality of avatars with a different avatar of the second type according to 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 a particular type of avatar, provide visual feedback to the user to confirm that an input has been received and that the device is currently in a state where a particular type of avatar can be selected. The electronic device provides visual feedback that the device is in a state where the replaced avatar cannot be selected by the user by replacing the avatar. By providing improved visual feedback to the user, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user to provide appropriate input when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling 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 being displayed, the electronic device detects a gesture directed at the first affordance via one or more input devices (e.g., a touch gesture at a position corresponding to the "edit" affordance or the displayed avatar on a touch screen display, 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 at 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 "+" affordance) and one or more avatars of the first type.

[0259] According to some embodiments, while an avatar library user interface is being displayed, the electronic device detects, via one or more input devices, a gesture (e.g., a touch gesture at a location corresponding to a "new avatar" affordance on a touchscreen display) directed at a second affordance (e.g., 648). In response to detecting the gesture directed at the second affordance, the electronic device displays an avatar editing user interface (e.g., 652). The avatar editing user interface is a user interface that generates a new avatar of a first type (e.g., edits 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 to create a 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 at the end of the displayed avatars of the first type in the avatar library.

[0260] According to some embodiments, the electronic device generates a new avatar of a first type and displays the new avatar in an avatar library user interface (e.g., 686). The new avatar is displayed at a position next to the last one of one or more avatars of the first type (e.g., the last position in the order of 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 of removing (e.g., deleting or making non - visible) the avatar from the displayed avatar navigation user interface. The electronic device detects, via one or more input devices, a gesture directed at the affordance associated with this function (e.g., a touch gesture at a position corresponding to the "delete" affordance on a touch - screen display). The electronic device removes (e.g., deletes or makes non - visible) the avatar from the displayed avatar navigation user interface in response to detecting the gesture directed at the affordance associated with this function.

[0262] According to some embodiments, the avatar navigation user interface is displayed in a messaging user interface (e.g., 603) (e.g., an interface for sending messages between participants in a conversation hosted by a communication platform). In some embodiments, the avatar is accessible from the avatar navigation user interface displayed as part of the messaging user interface, such that the avatar selected from the avatar navigation user interface is displayed in the messaging user interface for sending messages to the participants in the conversation.

[0263] By displaying an avatar navigation user interface in a messaging user interface, a user can navigate between avatars without leaving the messaging user interface, thus eliminating the need to provide user input for switching between applications on an electronic device. By reducing the number of required user inputs, the device's operability is improved, and the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

[0264] According to some embodiments, the electronic device displays an avatar start 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 a first type, in accordance with a determination that the avatar navigation user interface does not include an avatar of the first type. While the avatar start user interface is displayed, the electronic device detects a gesture (e.g., 630) (e.g., a touch gesture at a position corresponding to the "continue" affordance on a touch screen display) directed at the affordance associated with the generation of a new avatar of the first type. In response to detecting a gesture directed at 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 added to an avatar library user interface).

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

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

[0267] According to some embodiments, an electronic device displays an avatar library user interface (e.g., 686) that includes one or more stored (e.g., previously created) avatars of a first type (e.g., 688, 670) via a display device. The electronic device detects a selection of one of the stored avatars of the first type (e.g., a touch gesture at a position corresponding to the stored avatar of the first type on a touch screen display) (e.g., by detecting an oriented gesture). In response to detecting a selection of one of the stored avatars of the first type, the electronic device displays a menu (e.g., 692) having one or more menu affordances (e.g., "Edit" affordance 692a, "Copy" affordance 692b, or "Delete" affordance 692c) associated with one of an edit function, a copy function, and a delete function for one of the stored avatars of the first type.

[0268] According to some embodiments, an electronic device detects a selection of a first affordance (e.g., 692b) associated with a duplication function (e.g., by detecting a directed gesture), such as a touch gesture at a position corresponding to a "duplicate" affordance on a touch screen display. In response to detecting the 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 on an avatar editing user interface (e.g., 694). (For example, after selecting the "duplicate" affordance, the selected avatar is duplicated, and then a duplicate version of the avatar having avatar features that match the selected one of the avatar features of the saved avatars is displayed on the avatar editing user interface.) In some embodiments, the duplicated avatar can 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 an avatar library user interface at a position adjacent to one of the selected saved avatars in the avatar library (e.g., immediately adjacent to the duplicated avatar or the next position in the order, and this next position in the order immediately follows the position of the duplicated avatar in the order).

[0269] According to some embodiments, an electronic device detects a selection of a second affordance (e.g., 692a) associated with an editing function (e.g., by detecting a directed gesture), such as a touch gesture at a position corresponding to an "edit" affordance on a touch screen display. 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) that includes one of the saved avatars (e.g., the avatar selected when the editing function was selected).

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

[0271] According to some embodiments, an electronic device (e.g., 600) displays individual avatars (e.g., 670, 671) of a first or second type, including moving an individual avatar (e.g., 671 that moves across interface 668 of FIGS. 6M - 6O) across an avatar navigation user interface in a direction according to the size and direction of a detected gesture (e.g., 676) via a display device (e.g., 601). The electronic device displays an animation of an individual avatar transitioning from a non - interactive state (e.g., 671 in FIG. 6O) having a default appearance (e.g., a static state where the individual avatar has a default appearance that does not change in response to changes detected on the user's face) to a dialog state (e.g., 671 in FIG. 6P) having 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) according to a determination that the individual avatar has reached a first position (e.g., a first threshold position determined based on the size and direction of the detected gesture (e.g., a position associated with the selection of the individual avatar)). In some embodiments, the animation of an individual avatar transitioning from a non - interactive state to a dialog state includes gradually changing the expression, position, orientation, and / or size of the avatar's face from a neutral face expression, position, orientation, and / or size to an avatar's face expression, position, orientation, and / or size based on user face / head tracking. The appearance of the avatar provides feedback to the user indicating the movement of the avatar according to the size and direction of the user's gesture. By providing improved visual feedback to the user, the operability of the device is improved, the user - device interface is made more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

[0272] In some embodiments, an electronic device (e.g., 600) displays an animation of an individual avatar (e.g., 671) transitioning from a dialogue state (e.g., 671 in FIG. 6P) having an appearance based on a detected face (e.g., 673) to a non-dialogue state (e.g., 671 in FIG. 6R) having a default appearance according to a determination that the individual avatar (e.g., 671) has reached a second position (e.g., 671 in FIG. 6Q) (e.g., a second threshold position determined based on the size and direction of a detected gesture (e.g., a position associated with swiping an individual avatar (e.g., to select a different avatar))). In some embodiments, the animation of the individual avatar transitioning from the dialogue state to the non-dialogue state includes gradually changing the expression, position, orientation, and / or size of the avatar's face from the expression, position, orientation, and / or size of the face based on user face / head tracking to the neutral expression, position, orientation, and / or size of the avatar's face. By displaying an animation of the avatar transitioning from the dialogue state to the non-dialogue state, visual feedback of the non-dialogue appearance of the avatar is provided. By providing improved visual feedback to the user, the operability of the device is improved, the user-device interface is made more efficient (e.g., by assisting the user in providing appropriate input when operating / interacting with the device and reducing user errors), and in addition, the power consumption of the device is reduced and the battery life is improved by enabling the user to use the device more quickly and efficiently.

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

[0274] FIGS. 8A-8CF show exemplary user interfaces for displaying an avatar editing user interface according to some embodiments. The user interfaces of these figures are used to illustrate the processing described below, including the processing of FIGS. 9-12.

[0275] In FIG. 8A, device 600 is displaying an avatar editing user interface 801 that has an avatar display area 803 and an avatar characteristic area 804. The avatar display area 803 is visually distinguished from the avatar characteristic area 804 by, for example, line 806, and includes an avatar 805 and an avatar feature area 807. The avatar feature area 807 includes avatar feature affordances 809 corresponding to avatar features that can be edited in the avatar editing user interface. The avatar characteristic area 804 includes the characteristics of the displayed avatar features and corresponding feature options. The characteristics and feature options of the avatar features correspond to the avatar feature currently selected in the avatar feature area 807. In FIG. 8A, the device is displaying an avatar head affordance 809a that is placed directly below the avatar 805 and is highlighted to indicate that the features of the avatar's head are currently selected for editing. Since the features of the avatar's head are selected for editing, device 600 displays the characteristics and feature options of the avatar feature corresponding to the features of the avatar's head in the avatar characteristic area 804.

[0276] The device displays the 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, since no avatar features are selected and no changes have been made, the avatar 805 is displayed with a plurality of default (e.g., preset or determined) features. For example, the avatar 805 has a default face structure (e.g., a default face shape, nose, lips, eyes, ears, and eyebrows). The avatar 805 also has no skin color, hair or hairstyle, facial hair (other than eyebrows), or accessories selected. When the device receives an input to update an avatar feature, device 600 updates the avatar 805 to reflect the selected update to the avatar feature.

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

[0278] Avatar characteristic region 804 includes a displayed list of characteristics of the avatar feature corresponding to the currently selected avatar feature (e.g., the head of the avatar). The characteristics of an individual avatar feature include a set of selectable feature options that can be selected to change 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 changing the corresponding characteristic of the selected avatar feature. Thereafter, the changed characteristic is reflected in the displayed change to avatar 805 and in other avatar feature options that include the displayed representation of this characteristic.

[0279] Device 600 displays avatar feature options to represent options that can be used to change the characteristics of the currently selected avatar feature. The displayed avatar feature options can be dynamically updated based on other selected avatar feature options. 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 changed avatar features). For example, a change to the characteristics of a feature of an avatar's head (e.g., selection of skin color) can be displayed in an avatar feature option corresponding to the feature of the avatar's head (e.g., a feature option for face shape), and optionally, in an avatar feature option corresponding to other avatar features such as hair or eyes. In this example, the device updates the currently displayed avatar feature options (e.g., face shape options) to display the selected skin color in response to detecting the selection of skin color. Further, when a different avatar feature (e.g., eyes) is selected, the avatar feature options displayed for the eyes also include the selected skin color.

[0280] As shown in FIG. 8A, since the avatar's head affordance 809a is selected, device 600 displays the characteristics of the avatar feature corresponding to the characteristics of the avatar's head and the feature options. The displayed characteristics of the avatar feature include skin color characteristic 808 and face shape characteristic 810 (the characteristics of the avatar's head can include other characteristics of the avatar feature). Skin color characteristic 808 includes color options 812 that can be selected to change the color of the characteristics of the avatar's head (e.g., the skin color of avatar 805). When the device detects the selection of a specific color option 812, the device changes the skin color of the currently selected avatar feature (e.g., the head of the avatar in FIG. 8A) to match the selected color. In some embodiments, the selection of skin color option 812 also affects the colors of other avatar features, such as facial hair features (e.g., eyebrows, chin beard, etc.), eye color, or lip color. In the embodiment shown in FIG. 8A, skin color characteristic 808 includes a set of extended color options 808 for the initially displayed set of color options of other avatar features (see, for example, hair color characteristic 838 in FIG. 8P). In some embodiments, the extended set of color options 808 cannot be scrolled horizontally (although it can be scrolled vertically) and does not include options (such as color picker option 886 in FIG. 8AX) that can be selected to expand the set of color options. Face shape characteristic 810 includes face shape options 814 that can be selected to change the face 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, the border 818 displayed around the face shape option 814a indicates that the face shape option 814a is the face shape of the currently selected avatar. Accordingly, an avatar 805 having the same face shape (e.g., round jaw) as the selected face shape option 814a is displayed. In contrast, since the color option 812 is not selected, an avatar 805 without a skin color (e.g., default skin color or pre-selected skin color) and the face shape option 814 are displayed.

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

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

[0284] In FIG. 8C, device 600 indicates that color option 812a is selected by displaying a boundary 824 around color option 812a. Also, device 600 changes avatar 805 and face shape option 814 to have a skin color that matches the selected color option 812a. Additionally, device 600 displays a skin color slider 822 that can be adjusted in a manner similar to the method described later 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, shadow, saturation, tint, midtone, highlight, warmth, or hue. In some embodiments, the specific characteristics are 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 the shadow characteristic, while if a darker skin color is selected, the characteristic adjusted using the slider is the saturation. Device 600 changes the avatar (e.g., avatar 805), all feature options that display skin color (e.g., face shape option 814), and the skin color of all avatar features affected by the skin color in response to detecting an adjustment to the shadow of the selected color option (e.g., selected color option 812a).

[0285] In some embodiments, the selected skin color affects the color or color characteristics (e.g., base color, hue, luminance, shadow, saturation, midtone, highlight, warmth, undertone, etc.) of other avatar features (e.g., hair, lips, etc.). For example, the hair or facial hair (e.g., eyebrows or beard) of the avatar may have a light color that is determined based on the selected skin color. For example, the darker the skin color, the darker the light color (e.g., brown or black light color) of the generated hair, while the lighter the skin color, the lighter the light color (e.g., blonde or red light color) of the generated hair. These light colors can affect the colors applied to specific avatar features, as described in more detail below. Similarly, the color of the avatar's lips can have a light color based on the selected skin color. For example, the color of the avatar's lips can have a color based on the selected skin color and optionally, a different color such as red or pink. In some embodiments, different colors are combined with the skin color by an amount determined based on the adjustment settings of the color slider 822. For example, by adjusting the slider 822 in one direction, the values of the different colors that make up the color of the avatar's lips (e.g., the amount of red or pink in the color of the avatar's lips) increase, and by adjusting the slider 822 in another direction, the values of the different colors that make up the color of the avatar's lips decrease.

[0286] As shown in FIG. 8C, updating the skin color of the features of the avatar's head 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 region 828a of the lips and not changing the interior 828b of the lips. In some embodiments, the device 600 also updates the colors of other avatar feature parts (such as eyebrows 827 and the avatar's eyes 829) that are different from the avatar's skin. In some embodiments, the updated colors of other features (such as eyebrows 827 and eyes 829) are based on the selected skin color. For example, the updated color of the eyebrows 827 is updated to a color determined to be darker than the selected skin color option 812a. These updates are displayed for both the avatar 805 and other avatar feature part options such as the face shape option 814.

[0287] In FIG. 8D, in response to receiving an input 826 (such as a touch input on the display 601) at the face shape option 814b, the device 600 detects a selection of the face shape option 814b. In response, the device 600 removes the skin color slider 822 from the avatar property region 804 of FIG. 8E and moves the boundary 818 from the face shape option 814a to the face shape option 814b to indicate the selected face shape option, and changes the avatar 805 to transition from the round face shape option of 814a to a different face shape (such as a pointed jaw, narrow cheeks) represented by the face shape option 814b. Thus, the avatar 805 transitions and is displayed from the state with a round jaw shown in FIG. 8D to a pointed jaw and narrow cheeks shown in FIG. 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 within 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 editing the next avatar feature. In some embodiments, this animation is only displayed when the device first displays the avatar editing user interface.

[0289] In FIG. 8G, in response to receiving an input 830 (e.g., a touch input on display 601) at avatar hair affordance 809b, device 600 detects a selection of avatar hair affordance 809b. In response to detecting a selection of avatar hair affordance 809b, device 600 updates avatar display region 803 to indicate that the avatar hair feature has been selected, and updates avatar property region 804 to display the properties and feature options of the avatar feature corresponding to the avatar hair feature. This transition is shown in FIGS. 8H - 8O.

[0290] In some embodiments, an individual avatar feature affordance 809 can be selected by a tap gesture at the individual avatar feature affordance 809, or by a swipe gesture in avatar feature region 807 (or optionally, a swipe gesture at any location on avatar display region 803 other than avatar 805). In such embodiments, the swipe gesture can scroll avatar feature region 807 horizontally to position the desired avatar feature affordance 809 directly below avatar 805. In response to detecting a lift - off of the touch, device 600 selects the avatar feature affordance positioned directly below avatar 805 (including highlighting the affordance) after the scroll has ended.

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

[0292] The device 600 stops displaying the characteristics of the avatar features corresponding to the avatar's face features (e.g., the skin color characteristic 808 and the face shape characteristic 810), and updates the avatar characteristic region 804 by displaying the characteristics and feature options of the newly selected avatar features corresponding to the newly selected avatar features. In some embodiments, such as the embodiments shown in FIGS. 8H - 8O, the device 600 displays the characteristics and feature options of the new avatar features with a cascading effect, whereby the characteristics of the avatar features corresponding to the hair features of the avatar are displayed in the avatar characteristic region 804 in a left - to - right (e.g., from left to right) order, and in a top - to - bottom order (e.g., from the characteristics of the first avatar feature at the top of the avatar characteristic region 804 to the characteristics of the last avatar feature at the bottom of the avatar characteristic region 804).

[0293] For example, FIGS. 8H and 8I show hair color options 832 that appear on display 601 with an animation of the hair color options sliding across display 601 from left to right. Before all of the hair color options 832 are arranged, device 600 starts to display an animation of hair texture options 834 that appear one by one in order from left to right under the hair color options 832 on display 601 (starting in FIG. 8J and ending in FIG. 8L). After the hair texture options 834 are arranged, device 600 displays hairstyle options 836 that appear one by one in order from left to right under the hair texture options 834 on display 601 (starting in FIG. 8M and ending in FIG. 8O). It should be understood that the sequential arrangement of the individual sets of feature options can start either before the previous set of feature options is arranged (e.g., similar to the timing of the hair texture options 834 for the hair color options 832), or after the previous set of feature options is arranged (e.g., similar to the timing of the hairstyle options 836 for the hair texture options 834).

[0294] As described above, some of the feature options of the selected avatar features are displayed with a cascading effect that slides as described above with respect to the appearance of the hair color options, while other feature options of the selected avatar features are displayed with a cascading effect that arranges repeatedly as described with respect to the hair texture options 834 and the hairstyle options 836. In accordance with any of the embodiments described herein, any of these cascading effects can be used for the display of the arrangement of the feature options.

[0295] In FIG. 8P, device 600 displays hair color characteristic 838 with hair color option 832, hair texture characteristic 840 with hair texture option 834 and texture header 841, and hairstyle characteristic 842 with hairstyle option 836 and hairstyle header 843. In FIG. 8P, no hair color option is selected. However, as indicated by boundaries 844 and 846 respectively, straight hair texture option 834a and bald hairstyle option 836a are selected. An avatar 805 with a bald hairstyle is displayed, but the straight hair texture cannot be identified on avatar 805 due to the bald hairstyle. However, the straight hair texture is reflected in pixie cut hairstyle option 836b and bob cut hairstyle option 836c, and these hairstyle options display different hairstyles with straight hair texture.

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

[0297] In some embodiments, the feature option includes a zoom-in (e.g., magnification) display of the individual avatar feature corresponding to the feature option. In such feature options, typically, a close-up display of the avatar feature is beneficial to show sufficient detail to distinguish different avatar feature options. For example, in FIG. 8R, device 600 is displaying hair texture option 834 corresponding to hair texture characteristic 840. Each of the hair texture options 834 displays a magnified view of the avatar's hair so that the different hair textures represented by the hair texture options 834 are better shown, and thus these hair texture options 834 can be easily distinguished by the user. The straight hair texture option 834a displays a magnified view of the avatar's hair having a straight hair texture. The wavy hair texture option 834b displays a magnified view of the avatar's hair having a wavy hair texture. The curly hair texture option 834c displays a magnified view of the avatar's hair having a curly hair texture.

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

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

[0300] Furthermore, in the embodiments described herein, feature options that indicate avatar features affected by the selection of different feature part options are updated to reflect the selection of those different feature part options. For example, in FIGS. 8S - 8U, since pixie cut hairstyle option 836b and bob cut hairstyle option 836c show the avatar's hair (specifically, the avatar's hair affected by the selection of wavy hair texture option 834b), the individual hairstyles displayed in hairstyle options 836b and 836c are updated to display individual hairstyle options that transition from the appearance with straight hair texture in FIG. 8R to a different appearance with wavy hair texture. The bald hairstyle option 836a does not show the avatar's hair. Therefore, the bald hairstyle option 836a does not transition to a different appearance and is not displayed.

[0301] In some embodiments, when a feature option regarding the characteristic of a specific avatar feature is selected, in response to that selection, the feature options displayed regarding that characteristic do not change, but the feature options regarding the characteristics of other avatar features change. For example, in FIGS. 8S - 8U, when the wavy hair texture option 834b is selected, the hair texture option 834 does not change, but the hairstyle option 836 changes. Similarly, as shown in FIGS. 8AN - 8AQ (described later), when different hairstyle options are selected, the hairstyle option does not change, but other feature options (e.g., the hair texture option) change (e.g., the hair texture option 834 changed in FIG. 8AQ).

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

[0303] After the transition of the pixie cut hairstyle option 836b is completed (e.g., after the enlarged pixie cut hairstyle option 836b’ returns to its original size as shown in FIG. 8T), the bob cut hairstyle option 836c is transitioned. By combining the display effect of instantaneously enlarging the feature option during the transition with the timing of the completion of the transition in the displayed order, an appearance of a ripple effect is given, thereby providing the user with a visual indication that a particular feature option (e.g., a feature option other than the feature option during the transition) is transitioning based on the user's selection of different feature options. Also, this visual effect accurately indicates to the user that an individual feature option is in the process of transitioning (e.g., when the feature option is enlarged), and also provides an indication of when the transition is completed (e.g., when the feature option returns to its original small size). Also, by not instantaneously enlarging and displaying a particular feature option (if any), a visual confirmation is provided to the user that such a feature option was not affected by the selection.

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

[0305] In FIG. 8W, device 600 indicates that hair color option 832a is selected by displaying a boundary 854 around hair color option 832a. Device 600 also changes avatar hair 851, eyebrows 827, hair texture option 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 characteristics) of eyebrows 827 are determined based on the combination of skin color and hair color. For example, the hue of eyebrows 827 can be determined based on the selected hair color, and the luminance of eyebrows 827 can be determined based on the selected skin color. According to the appearance of the aforementioned ripple effect, the transition of hair texture option 834 and hairstyle option 836 can be displayed. For example, after hair texture options 834a - 834c transition in order (e.g., by instantaneously expanding), hairstyle options 836b and 836c transition in order (e.g., by instantaneously expanding).

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

[0307] In some embodiments, the gradation can represent various characteristics of the selected hair color, such as, for example, shadow, saturation, tint, midtone, highlight, warmth, luminance, or hue. In some embodiments, the gradation can optionally represent the tint of the avatar's hair, which is optionally based on the selected skin color of the avatar that is different from the selected color. By moving the selector affordance 858 within the gradation region 857, the tint gradation can be adjusted, thereby ultimately changing the appearance of the selected hair color and the avatar's hair 851. In some embodiments, the tint of the hair corresponds to the natural hair color determined based on the selected skin color. For example, the darker the skin color, the darker the tint of the hair (e.g., a brown or black tint), while the lighter the skin color, the lighter the tint of the hair (e.g., a blonde or red tint) is generated. By adjusting the tint, not only is a specific color applied, but also, based on the tint gradation, an appearance with the lightness of that color applied is given to the hair. For example, in the case of the avatar's hair having an unnatural selected hair color (e.g., purple), adjusting the tint to a low gradation value 857b results in a hair color with a slightly natural or completely unnatural tint (e.g., brown). This emphasizes the purple hair color and gives an appearance as if the avatar has applied a large amount of purple hair dye. Conversely, adjusting the tint to a high gradation value 857a emphasizes the natural tint of the hair (or other avatar features such as the avatar's eyebrows or lips) and gives an appearance as if 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 gradation that the device 600 applies to the selected color 832a.

[0308] In some embodiments, the selector affordance 858 includes a color that represents the currently selected gradient of the selected color 832a. The selector affordance 858 has, at its initial position, 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 pre - selected) color when first selected (see, e.g., FIG. 8V). When the hair color slider 856 is first displayed, the selector affordance 858 has a color corresponding to the initial position at the center of the region 857 and the initial color of the selector color 832a. Moving the position of the selector affordance 858 from its initial position to a different position causes the device to change the gradient of the selected color 832a, the corresponding color of the selector affordance 858, and all avatar features having 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 towards the high gradient value 857a darkens the selected color 832a, while moving the selector affordance 858 towards the low gradient value 857b lightens the selected color 832a.

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

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

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

[0312] In FIG. 8Z, device 600 detects input 860 moving to a third position 860''', and in response, displays selector affordance 858 at a third position corresponding to the third position 860'''. The third position of selector affordance 858 corresponds to a greater gradation (e.g., darker shading or greater lightness) than the gradation shown in FIG. 8Y. Thus, device 600 displays selector affordance 858 having a greater gradation based on the relative position of selector affordance 858 within region 857. Also, device 600 updates selected color 832a and all features (e.g., avatar hair 851, hair texture options 834a - 834c, and hairstyle options 836b and 836c) that display selected color 832a to have the greater gradation (e.g., darker shading or greater lightness) 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 at a position (e.g., 858') corresponding to the 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 (e.g., see FIGS. 8AS and 8AT described below), device 600 maintains the modified hair color slider 856 even after different color options 832 are selected, including the position of selector affordance 858 and the modified gradation of selected color 832a.

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

[0315] In FIG. 8AC, the device 600 indicates that the hair color option 832b is selected by displaying a boundary 862 around the hair color option 832b. Also, the device 600 moves the selector affordance 858 to the default position of the selected hair color option 832b and changes the displayed hair color slider 856 by updating the color of the selector affordance 858 to the color corresponding to the selected hair color option 832b. The device 600 also changes the avatar's hair 851, the hair texture option 834, and the hairstyle options 836 (e.g., 836b and 836c) to have a hair color that matches the selected hair color option 832b. In accordance with the appearance of the aforementioned ripple effect, the transition of the hair texture option 834 and the hairstyle option 836 is displayed. For example, after the hair texture options 834a - 834c transition in order (e.g., instantaneously expanding), the hairstyle options 836b and 836c transition in order (e.g., instantaneously expanding).

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

[0317] For example, FIGS. 8AD to 8AF show the avatar display area 803 and the avatar 805 that are transitioning (e.g., shrinking) from the initial fully expanded state in FIG. 8AD to the shrunk state in FIG. 8AF in response to detecting the movement of the input 864 in the upward direction (e.g., the direction toward the avatar display area 803). Simultaneously with the transition of the avatar display area 803, the device 600 displays the characteristic area 804 of the avatar that is transitioning (e.g., expanding) from the initial state in FIG. 8AD to the fully expanded state in FIG. 8AF. FIG. 8AE shows the avatar display area 803 (including the avatar 805) and the characteristic area 804 of the avatar, each having an individual intermediate state (e.g., size) when the relative position of the input 864 is between the position shown in FIG. 8AD and the position shown in FIG. 8AF. In this way, the device 600 continuously shrinks the avatar display area 803 and the avatar 805 until the avatar display area 803 and the avatar 805 reach the shrunk state and the characteristic area 804 of the avatar reaches the fully expanded state in response to the upward drag gesture, while simultaneously expanding the characteristic area 804 of the avatar (and shifting the line 806 upward). When the avatar display area 803 and the avatar 805 are in the shrunk state, the device 600 does not further shrink the avatar display area 803 and the avatar 805 or further expand the characteristic area 804 of the avatar in response to further movement of the upward drag gesture (or in response to a subsequent upward drag gesture). Instead, the device 600 continues to scroll the characteristics and feature options of the avatar feature part in response to further movement of the upward drag gesture (or in response to a subsequent upward drag gesture in the characteristic area 804 of the avatar when the avatar display area 803 is in the shrunk state) (see FIGS. 8AG to 8AH, which reveal additional hairstyle options 836d to 836f of the hairstyle characteristic 842 and move the hair color characteristic 838, including the hair color feature 832 and the hair color slider 856, outside the displayed portion of the avatar characteristic area 804).

[0318] Conversely, as shown in FIGS. 8AH - 8AJ, the display 600 expands the avatar display area 803 from a reduced (or intermediate) state in response to detecting a movement of the input 864 in the downward direction. Simultaneously with the expansion of the avatar display area 803, the device 600 displays the characteristic area 804 of the avatar that is transitioning (e.g., shrinking) from the expanded state in FIG. 8AH (or the intermediate state in FIG. 8AI) to the original state (e.g., size) in FIG. 8AJ. By expanding the avatar display area 803 in response to the device 600 detecting a downward movement of the input 864, thereby enlarging the avatar 805, the user can more easily view the avatar 805 without having to scroll back to the initial positions of the characteristics of the avatar features and the feature options within the characteristic area 804 of the avatar (see, e.g., FIG. 8AD).

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

[0320] In some embodiments, when the device 600 displays a scroll of the characteristics of the avatar features (e.g., 808, 810, 838, 840, 842) and their individual feature options (e.g., 812, 814, 832, 834, 836), and a portion of the characteristics of the avatar features is scrolled out partially beyond the upper end of the avatar's characteristic region 804 (e.g., below line 806), the device 600 maintains the display of the individual header of the characteristics of this avatar feature disposed at the upper part of the avatar's characteristic region 804. For example, as shown in FIG. 8AH, when the hair texture characteristic 840 is scrolled out beyond the displayed portion of the avatar's characteristic region 804, the device 600 "fixes" the texture header 841 at the upper part of the avatar's characteristic region 804 (e.g., immediately below line 806). The "fixed" texture header 841 remains displayed at the upper part of the avatar's characteristic region 804 until the entire hair texture characteristic 840 is scrolled out beyond the avatar's characteristic region 804 (e.g., in the upward direction), or until the entire hair texture characteristic 840 is disposed below line 806 (e.g., when there is no portion of the hair texture characteristic 840 that is scrolled out beyond the upper end of the displayed portion of the avatar's characteristic region 804). In some embodiments, the "fixed" header is replaced by the header of the characteristics of the adjacent avatar feature when released from the position below line 806 (see, e.g., the hairstyle header 843 in FIG. 8AL). In some embodiments, the fixed header (e.g., the texture header 841) is visually distinguished from the feature options within the avatar's characteristic region 804. For example, as shown in FIG. 8AH, the texture header 841 is visually distinguished by lines 806 and 867.

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

[0322] In FIG. 8AM, the device 600 detects the end of the input 864 (e.g., lift - off). The device 600 displays the avatar display area 803 and the avatar 805 in a reduced state, and the avatar's characteristic area 804 in a fully expanded state. The avatar's characteristic area 804 has a hairstyle characteristic 842 with hairstyle options 836a - 836i (having the texture of wavy hair based on the previous selection of the wavy - hair texture option 834b in FIG. 8R and the color of the hair based on the hair color option 832b selected in FIG. 8AB respectively), and displays a hairstyle header 843 that is placed below the line 806 and is visually distinguished from the hairstyle options 836a - 836c by the line 867. As shown by the boundary 846 arranged around the pixie - cut hairstyle 836b and by the avatar's hair 851 having the pixie - cut hairstyle (and also the texture of wavy hair) displayed on the avatar 805, the pixie - cut hairstyle 836b is selected and displayed. The avatar's hair affordance 809b is highlighted, indicating that the characteristics of the avatar's hair are currently selected for editing.

[0323] In some embodiments, in response to detecting a selection of a feature option, the avatar display area 803 and the avatar 805 transition directly from a compressed state to a fully expanded state. For example, in FIG. 8AN, the device 600 detects an input 869 (e.g., a touch input on the display 601) at a position corresponding to the spiky hair hairstyle option 836f. In FIG. 8AO, in response to detecting a selection of the spiky hair hairstyle option 836f, the device 600 displays the avatar display area 803 and the avatar 805 in a fully expanded state. The device 600 changes the avatar's hair 851 to match the selected spiky hair hairstyle option 836f (having the texture of the wavy hair based on the previous selection in FIG. 8R and the hair color based on the hair color option 832b selected in FIG. 8AB). Also, the device 600 indicates the 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] In FIGS. 8AP and 8AQ, the device 600 detects an input 870, which is a touch-and-drag gesture on the display 601, and the first touch corresponds to a position within the avatar's feature area 804. The device 600 detects a downward movement of the input 870 and, in response, scrolls the feature options (e.g., hairstyle options 836a - 836i) and the hairstyle header 843 in the downward direction to display a portion of the hair color characteristic 838, the hair texture characteristic 840, and the hairstyle characteristic 842 as shown in FIG. 8AQ.

[0325] In FIG. 8AR, device 600 detects the end of input 870 (e.g., lift-off). Device 600 displays hair color characteristic 838 having hair color slider 856 and hair color options 832 (including selected hair color option 832b indicated by boundary 862), texture header 841, and hair texture options 834a - 834c (including selected wavy hair texture option 834b indicated by boundary 844), and hairstyle characteristic 842 having 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 to the color corresponding to the color 832a selected in FIG. 8AT from the color 832b selected in FIG. 8AS (the color resulting from the changes described above with respect to FIGS. 8X - 8AA). Since only the selected hair color changes due to input 871, avatar hair 851 is still displayed with the spike hair hairstyle corresponding to selected spike hair hairstyle option 836f and the wavy hair texture corresponding to selected wavy hair texture option 834b. Further, device 600 displays feature options including the hair color transitioning from the state displayed in FIG. 8AS to the state displayed in FIG. 8AT. Thus, device 600 displays hair texture options 834a - 834c and hairstyle options 836b and 836c transitioning from the hair color corresponding to hair color option 832b to the hair color corresponding to hair color option 832a. This transition can include the appearance of the aforementioned ripple effect (e.g., a continuous transition with an instantaneous magnification of the transitioning feature option).

[0327] As shown in FIG. 8AT, in response to detecting input 871, device 600 also displays a hair color slider 856 that has transitioned to a modified setting that was previously set in response to input 860 as described above with respect to FIGS. 8X - 8AA and that is maintained for the previously set color 832a. This includes displaying a selector affordance 858 that has transitioned to a modified position within color gamut region 857 that is the same modified color as color option 832a and the same position as shown in FIG. 8AA immediately before device 600 detected input 861 with hair color option 832b.

[0328] In FIG. 8AU, device 600 detects an input 872 (e.g., a touch input) with a bob cut hairstyle option 836c that is partially displayed outside the screen within avatar characteristic region 804. In response, device 600 displays avatar hair 851 that has transitioned from a spiked hair hairstyle to a bob cut hairstyle corresponding to the selected bob cut hairstyle option 836c as shown in FIG. 8AV. Also, device 600 displays a slight scroll of avatar characteristic region 804 (and removal of hair color option 832) to display a full representation of the selected bob cut hairstyle option 836c and displays a border 846 around bob cut hairstyle option 836c to indicate selection of this feature option. Since no other feature options are selected by input 872, avatar features other than avatar hair 851 are not changed. Further, since the other displayed feature options do not display an amount of avatar hair sufficient to show the selected hairstyle, device 600 does not display any updates to the feature options.

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

[0330] As shown in FIG. 8AX, the updated avatar's characteristic region 804 includes a lip color characteristic 875 with various lip color options and a lip shape characteristic 878 with lip shape options 880. The lip color options include a natural lip color option 882, an unnatural lip color option 884, and a color picker option 886. The natural lip color option 882 represents, in some embodiments, a natural human lip color option determined based on the skin color selected for the avatar 805. The unnatural lip color option 884 represents, in some embodiments, a color that is not determined based on the selected skin color and may instead correspond to the color of lipstick or other colors that are not natural for human lips (e.g., blue, green, etc.). The color picker option 886 is a selectable option that displays other color choices for adjusting the color of the avatar's lips. In some embodiments, the lip color options (e.g., 882, 884, 886) are scrollable horizontally in response to an input (e.g., tap, swipe, drag, etc.) on the lip color options. Scrolling through 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 FIG. 8AX, the device 600 detects an input 887 (e.g., a touch gesture on the display 601) on the color picker option 886. In FIG. 8AY, in response to detecting the input 887, the device 600 displays an extended color palette 888 that displays various color options including the natural lip color option and the unnatural lip color option. In some embodiments, the extended color palette 888 may be displayed as a pop-up menu that appears over a portion of the avatar's characteristic region 804 that includes the characteristics and feature options of any of the displayed avatar features.

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

[0333] In FIG. 8AZ, in response to detecting the selection of the selected lip color option 890, device 600 displays avatar lips 828 updated to match the color of the selected lip color option 890. Additionally, the lip shape option (e.g., lip shape option 880a) is updated to include the selected lip color option 890 (e.g., according to the appearance of the ripple effect described herein). Also, device 600 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] Device 600 also displays a lip color slider 892 that can be controlled in a manner similar to the other color sliders described herein. The lip color slider 892 includes a selector affordance 893 that can be positioned along the lip color slider to adjust the gradient of the selected lip color 884a from a high gradient value at 892a to a low gradient value at 892b. In some embodiments, the gradient can represent various characteristics of the selected lip color, such as, for example, shade, saturation, tint, midtone, highlight, warmth, or hue. In some embodiments, the gradient can optionally represent the tint of the avatar's lips, based on the selected skin color of the avatar, which is different from the selected color. By moving the selector affordance 893 along the lip color slider 892, the gradient of the tint can be adjusted, thereby ultimately changing the appearance of the selected lip color and the avatar's lips 828. For example, the tint of the selected color can be red or some other color corresponding to a natural skin color (e.g., brown), while the selected lip color (e.g., the selected lip color 884a) can be any color (including any unnatural color). By adjusting the tint, not only is a particular color applied to the lips, but also, based on the gradient of the tint, the lightness of that color is applied to give the appearance of the avatar's lips. For example, in the case of an avatar's lips having an unnatural selected lip color (e.g., green), adjusting the tint to a low gradient value 892b results in a lip color with a tint that is slightly natural or not natural at all (e.g., red). This emphasizes the green lip color and gives the appearance that the avatar has applied a large amount 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 applied a small amount of green lipstick. By adjusting the position of the selector affordance 893 along the slider, the user can adjust the gradient of the tint that the device 600 applies to the selected color 884a.

[0335] In FIG. 8BA, device 600 detects an input 8100 (e.g., a touch input) on the avatar's accessory adornment 809d. In response to detecting the input 8100, as shown in FIG. 8BB, device 600 updates the avatar display area 803 to indicate that the avatar's accessory features are selected (e.g., by making the avatar's accessory adornment 809d bold and placing it directly below the avatar 805), and updates the avatar's property area 804 to display the properties and feature part options of the avatar feature part corresponding to the avatar's accessory features. The properties and feature part options of the avatar feature part shown in FIGS. 8BA to 8BR correspond to the avatar's accessory features. Thus, in response to detecting the selection of any such feature part option, device 600 changes the avatar 805 based on the selected feature part option, and in some cases, updates the representation of the avatar's accessory shown in the feature part option based on the selected feature part option.

[0336] As shown in FIG. 8BB, the avatar's property area 804 includes earring properties 8102 having an earring option 8104, hat properties 8106 having a hat option 8108, and glasses properties 8110 having a glasses option 8112 (shown in FIG. 8BM). Device 600 displays a border 8114 around the earring option 8104a (no earrings) to indicate that the earring option 8104a is currently selected. Also, device 600 displays a border 8116 around the hat option 8108a (no hat) to indicate that the hat option 8108a is currently selected. Device 600 displays an avatar 805 without earrings and 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 shows earring option 8104d and hat option 8108d that are partially out of the 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, the device 600 displays feature options so as to represent a potential appearance of an avatar (e.g., avatar 805) when individual feature options are selected. However, in some embodiments, the device 600 displays feature options such that they do not fully represent a potential appearance of an avatar when individual feature options are selected. For example, the device 600 can display a feature option having a representation of an avatar feature with some of the individual avatar features omitted. By omitting some of the individual avatar features from the feature option, other avatar features within the feature option that are expected to be obscured when the omitted portions are displayed are shown, but the potential appearance of the avatar when the feature option is selected is not fully represented. For example, in FIG. 8BB, the device 600 displays an earring option 8104 that has a representation of an avatar's hair (e.g., avatar hair 851), but with some of the avatar's hair omitted such that the avatar's ears and in some cases the representation of earrings are shown. Some of the avatar's hair is omitted from the earring option 8104 to display the various selectable earring options without being obscured. However, since the currently selected avatar hairstyle (e.g., as indicated by avatar hair 851) covers the avatar's ears (and, if any, the selected avatar's earrings), the earring option 8104 does not represent the potential appearance of avatar 805 when the earring option is selected. Thus, in some embodiments, certain avatar feature options do not affect a portion of other avatar features when they are selected. For example, an accessory option of an avatar corresponding to a nose ring does not result in a change to other avatar features such as the avatar's hair (e.g., an adjustment to the feature shape due to the resulting arrangement of avatar features on the avatar). Similarly, an accessory option of an avatar corresponding to a particular earring does not result in a change to the avatar's hair.

[0339] Device 600 also displays hat feature 8106 with hat option 8108. The displayed hat option 8108 represents possible changes to avatar 805 when an individual hat option is selected. In addition to changing avatar 805 to include the selected hat, such possible changes include reforming the avatar's hair 851 and lighting effects such as casting a shadow on the avatar 805's face. In FIG. 8BB, the reforming 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 having a hat line 8118 that is narrower than the displayed width of the hair in hat option 8108b (e.g., at the position where the hat (with the bottom of the hat open) contacts the avatar's head hair). Thus, device 600 displays hair having a reformed (e.g., changed) appearance where the avatar's hair is pushed in at hat line 8118, providing a realistic appearance as if the hat is compressing the avatar's hair to fit on 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, and in this case also reforms the avatar's hair to conform to the hat line of the headband, but also provides an appearance where the avatar's hair is compressed at the hat line of the headband (e.g., pushed under the headband) and sticks out from above the headband. Avatar 805 when headband hat option 8108d is selected is shown in FIGS. 8BY - 8CB and described in more detail below.

[0340] Hat option 8108c also shows possible changes to avatar 805 that are expected to display an illumination effect for avatar 805. For example, cowboy hat option 8108c includes a large hat (e.g., a cowboy hat) that casts a shadow 8120 on the forehead of the avatar under the brim of the cowboy hat. By displaying the cowboy hat, the reformed hairline, and option 8108c with shadow 8120, device 600 indicates that the selection of hat option 8108c results in changes to avatar 805 that include displaying the cowboy hat on avatar 805, reforming 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, reformed hair, and a shadow above the forehead).

[0341] FIGS. 8BC and 8BD show device 600 detecting an input 8122 (e.g., a touch input) to select earring option 8104c and indicating the 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 having avatar's earrings 8125 corresponding to the earrings displayed for selected earring option 8104c. Earrings 8125 are partially obscured by avatar's hair 851 disposed over the avatar's ears. However, earrings 8125 are large enough to extend beyond avatar's hair 851 and thus protrude and are partially displayed from under avatar's hair 851. Also, as shown in FIG. 8BD, device 600 updates hat option 8108 to display the earrings applied to the displayed hat option 8108.

[0342] In some embodiments, device 600 detects a user's face located within the field of view of a camera (e.g., camera 602) and changes (e.g., continuously) 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 positions 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 (e.g., using camera 602) detects that the user is tilting their head to the side, winking, and smiling. Device 600 changes avatar 805 in real time to reflect the detected user movement.

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

[0344] In some embodiments, device 600 changes selected avatar features, such as avatar features represented in avatar 805, based on a physical model applied to the selected individual avatar feature. For example, in FIG. 8BF, when device 600 displays avatar 805 that has returned to the neutral position, the user's earring 8125 is shown swaying to reflect the physical phenomenon of the user tilting their head. It should be understood that the physical model is not limited to earring 8125. The physical model can 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 input detected in avatar display region 803, or more specifically, in avatar 805 in some embodiments. For example, in FIG. 8BG, device 600 detects input 8128 (e.g., a touch-and-drag gesture or a swipe gesture) on avatar display region 803. In response to detecting the movement of input 8128 from the initial position in FIG. 8BG to the 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 is displaying the resulting profile view of avatar 805.

[0346] In some embodiments, device 600 displays a moving selected avatar feature based on an adapted physical model in response to input detected on avatar display region 803 (or, avatar 805). For example, in FIG. 8BI, device 600 displays earring 8125 that sways towards the front of the face of avatar 805 in response to the displayed rotation of avatar 805 in FIGS. 8BG and 8BH.

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

[0348] In FIGS. 8BL and 8BM, device 600 detects an input 8132 (e.g., a touch-and-drag gesture or a swipe gesture) on the avatar's characteristic region 804 and scrolls the characteristics (e.g., 8102, 8106, 8110) and characteristic options (e.g., 8104, 8108, 8112) of the displayed avatar features based on the movement direction of the input 8132. The avatar 805 remains displayed in an enlarged appearance. In some embodiments, the enlarged appearance allows the user to view the avatar 805 clearly, and in some embodiments, various accessories such as makeup, tattoos, scars, freckles, moles, and other custom features or accessories of the avatar can be applied to the avatar 805.

[0349] In FIG. 8BN, device 600 detects the end of the input 8132 (e.g., the lift-off of a touch-and-drag gesture) and displays the characteristic region 804 of an avatar having a hat characteristic 8106 including hat options 8108a - 8108d and a glasses characteristic 8110 including glasses options 8112a - 8112d. The avatar 805 remains displayed in an enlarged appearance. Device 600 displays a border 8134 around the glasses option 8112a to indicate that the glasses option 8112a (no glasses) is currently selected. Device 600 displays the glasses options 8112b - 8112d having an illumination effect (e.g., a light reflection 8136 on the lens of the glasses).

[0350] In FIG. 8BO, device 600 detects an input 8138 (e.g., a touch gesture) on the glasses option 8112b. As shown in FIG. 8BP, in response to detecting the input 8138 on the glasses option 8112b, device 600 removes the border 8134 from the glasses option 8112a and displays it around the glasses option 8112b. Additionally, device 600 modifies the avatar 805 and the hat option 8108 (shown in FIG. 8BV) to include the avatar's glasses 8140 corresponding to the glasses style displayed on the selected glasses option 8112b. Also, device 600 modifies the appearance of the 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 the selection of the avatar's glasses option 8112b, device 600 adjusts (e.g., changes) the position of a portion 8145 of the avatar's hair 851 and displays the avatar's glasses 8140 placed on the avatar's face. The modified portion 8145 of the avatar's hair 851 is shown being pushed laterally to accommodate the frame 8140-1 of the avatar's glasses 8140. Further, device 600 displays a shadow 8147 next to the modified portion 8145 of the avat...

Claims

1. 1. An electronic device having a display device and one or more input devices, displaying an avatar navigation user interface via the display device, the avatar navigation user interface including an avatar; and detecting, while the avatar navigation user interface is displayed, a gesture directed toward the avatar navigation user interface via the one or more input devices; In response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with determining 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.

2. ceasing to display the avatar of the second type in the avatar navigation user interface further in accordance with the determining that the gesture is in the first direction; 2. The method of claim 1, further comprising ceasing to display the avatar of the first type in the avatar navigation user interface further in accordance with the determination that the gesture is in the second direction opposite the first direction.

3. detecting a second gesture in the first direction after displaying the avatar of the first type; The method of claim 1 or 2, further comprising: in response to detecting the second gesture, displaying a second avatar of the first type.

4. detecting a third gesture in the second direction after displaying the second type of the avatar; The method of claim 1 , further comprising: in response to detecting the third gesture, displaying a second avatar of the second type.

5. The method of claim 1 , wherein the avatars of the first type have the appearance of human characters.

6. The method of claim 1 , wherein the avatars of the second type have the appearance of non-human characters.

7. The method of claim 1 , wherein the avatars of the first type include a plurality of avatar features that are configurable by a user.

8. The method of claim 1 , wherein the avatars of the second type do not include user-configurable avatar features.

9. 9. The method of claim 1, wherein the avatar navigation user interface includes a subregion having a plurality of avatars, the plurality of avatars including a first collection of avatars of the first type and a second collection of avatars of the second type, the first collection of avatars of the first type being separated from the second collection of avatars of the second type.

10. 10. The method of claim 9, wherein the avatar is a selected one of the plurality of avatars displayed at a location between one or more of the first set of avatars of the first type and one or more of the second set of avatars of the second type.

11. the first set of avatars of the first type including the selected one of the plurality of avatars, the method further comprising: replacing the selected one of the plurality of avatars with a different avatar of the first type in accordance with a determination that the gesture is in the first direction; The method of claim 10 , further comprising: replacing the selected one of the plurality of avatars with the second type of avatar in accordance with a determination that the gesture is in the second direction.

12. the second set of avatars of the second type including the selected one of the plurality of avatars, the method further comprising: replacing the selected one of the plurality of avatars with the first type avatar in accordance with a determination that the gesture is in the first direction; The method of claim 10 , further comprising: replacing the selected one of the plurality of avatars with a different avatar of the second type in accordance with a determination that the gesture is in the second direction.

13. The avatar navigation user interface includes a first affordance, and the method further comprises: detecting a gesture directed toward the first affordance via the one or more input devices while the avatar navigation user interface is displayed; 13. The method of claim 1, further comprising: in response to detecting the gesture directed toward the first affordance, displaying an avatar library user interface, the avatar library user interface including a second affordance and one or more avatars of the first type.

14. detecting a gesture directed toward the second affordance via the one or more input devices while the avatar library user interface is displayed; 14. The method of claim 13, further comprising: in response to detecting the gesture directed toward the second affordance, displaying an avatar editing user interface, the avatar editing user interface being a user interface for creating a new avatar of the first type.

15. generating the new avatar of the first type; 15. The method of claim 14, further comprising: displaying the new avatar in the avatar library user interface, the new avatar being displayed in a position next to the last one of the one or more avatars of the first type.

16. the avatar navigation user interface further includes an affordance associated with a function for removing the avatar from the displayed avatar navigation user interface, the method comprising: Detecting a gesture via the one or more input devices directed toward the affordance associated with the function; 16. The method of claim 1 , further comprising: in response to detecting the gesture directed toward the affordance associated with the function, removing the avatar from the displayed avatar navigation user interface.

17. The method of claim 1 , wherein the avatar navigation user interface is displayed in a messaging user interface.

18. displaying an avatar initiation user interface having affordances associated with generating a new avatar of the first type in accordance with a determination that the avatar navigation user interface does not include an avatar of the first type; detecting a gesture directed toward the affordance associated with generating a new avatar of the first type while the avatar initiation user interface is displayed; 18. The method of claim 1, further comprising: in response to detecting the gesture directed toward the affordance associated with generating a new avatar of the first type, displaying an avatar editing user interface, the avatar editing user interface being a user interface for generating a new avatar of the first type.

19. 19. The method of claim 1, further comprising: displaying, in accordance with a determination that the avatar navigation user interface includes an avatar of the first type, an affordance associated with managing the avatar of the first type and one or more features of the displayed avatar of the first type.

20. displaying the avatar of the first type includes displaying the avatar of the first type transitioning from a non-interactive state to an interactive state; 20. The method of claim 1, wherein displaying the avatar of the second type comprises displaying the avatar of the second type transitioning from a non-interactive state to an interactive state.

21. displaying, via the display device, an avatar library user interface including one or more stored avatars of the first type; Detecting a selection of one of the stored avatars of the first type; and 21. The method of claim 1, further comprising: in response to detecting a selection of the one of the saved avatars of the first type, displaying a menu having one or more menu affordances associated with one of an edit function, a duplicate function, and a delete function for the one of the saved avatars of the first type.

22. Detecting a selection of a first affordance associated with the copy function; 22. The method of claim 21, further comprising: in response to detecting a selection of the first affordance, generating a duplicate version of the one of the stored avatars and displaying the duplicate version in an avatar editing user interface.

23. Detecting a selection of a second affordance associated with the edit function; and 22. The method of claim 21, further comprising: in response to detecting the gesture directed toward the second affordance, displaying an avatar editing user interface including the one of the saved avatars.

24. Detecting a selection of a third affordance associated with the delete function; and 22. The method of claim 21, further comprising, in response to detecting a selection of the third affordance, removing the displayed one of the stored avatars from the avatar library user interface.

25. Displaying the first or second type of individual avatar includes: displaying, via the display device, the individual avatar moving across the avatar navigation user interface in accordance with a magnitude and direction of the detected gesture; 25. The method of claim 1, further comprising: displaying an animation of the individual avatar transitioning from a non-interactive state having a default appearance to an interactive state having an appearance determined based on a detected face in accordance with a determination that the individual avatar reaches a first position.

26. displaying, via the display device, the individual avatar moving across the avatar navigation user interface in accordance with a magnitude and direction of the detected gesture; 26. The method of claim 25, comprising displaying an animation of the individual avatar transitioning from the interactive state having the appearance determined based on the detected face to the non-interactive state having the default appearance in accordance with a determination that the individual avatar reaches a second position.

27. 27. A non-transitory computer-readable storage medium storing 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 including instructions for performing the method of any one of claims 1 to 26.

28. A display device; one or more input devices; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of any one of claims 1 to 26.

29. A display device; one or more input devices; and means for carrying out the method according to any one of claims 1 to 26.

30. 1. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of an electronic device having a display device and one or more input devices, the one or more programs comprising: 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; In response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with determining that the gesture is in a first direction; A non-transitory computer-readable storage medium comprising instructions for 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 to the first direction.

31. A display device; one or more input devices; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: 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; In response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with determining that the gesture is in a first direction; The electronic device includes instructions for 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.

32. 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; and means for detecting, via the one or more input devices, a gesture directed toward the avatar navigation user interface while the avatar navigation user interface is displayed; In response to detecting the gesture, displaying a first type of avatar in the avatar navigation user interface in accordance with determining that the gesture is in a first direction; and means for 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 to the first direction.

33. An electronic device having a display device, Through 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, the second characteristic of the individual avatar feature being different from the first characteristic of the individual avatar feature; and in response to detecting a selection of one of the feature options of 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.

34. 34. The method of claim 33, wherein changing the appearance of at least one of the second set of feature options from the first appearance to the second appearance comprises changing the appearance of at least two of the second set of feature options.

35. 35. The method of claim 33 or 34, further comprising ceasing to change the appearance of the first set of feature options from the first appearance to the second appearance in response to detecting the selection of the one of the feature options in the first set of feature options.

36. 36. The method of any one of claims 33 to 35, wherein the second appearance of the at least one of the second set of feature options is based on the selected one of the feature options in the first set of feature options.

37. 37. The method of any one of claims 33 to 36, wherein displaying at least one of the second set of feature options changing from the first appearance to the second appearance includes determining that the at least one of the second set of feature options includes at least a portion of an avatar feature corresponding to the selected one of the first set of feature options.

38. 38. The method of any one of claims 33 to 37, further comprising: maintaining the appearance of the second one of the second set of feature options in response to detecting the selection of the one of the feature options in the first set of feature options in accordance with a determination that a second one of the second set of feature options does not include at least a second portion of an avatar feature corresponding to the selected one of the first set of feature options.

39. 39. The method of any one of claims 33 to 38, wherein changing the appearance of the at least one of the second set of feature options from the first appearance to the second appearance comprises displaying an animation of the at least one of the second set of feature options changing from the first appearance to the second appearance.

40. the selected one of the feature options in the first set of feature options is a selected hair color in a first set of hair color options; the at least one of the second set of feature options includes one or more of a hair length option, a hair texture option, and a hairstyle option; 40. The method of any one of claims 33 to 39, wherein changing the appearance of at least one of the second set of feature options from the first appearance to the second appearance comprises changing one or more of the hair length option, the hair texture option, and the hairstyle option from a first hair color to the selected hair color.

41. the selected one of the feature options in the first set of feature options is a selected hair type in a first set of hair type options; the at least one of the second set of feature options includes one or more of a hair length option and a hairstyle option; 41. The method of any one of claims 33 to 40, wherein changing the appearance of at least one of the second set of feature options from the first appearance to the second appearance comprises changing one or more of the hair length option and the hairstyle option from a first hair type to the selected hair type.

42. the second set of feature options includes a plurality of feature options arranged in an order such that a first feature option precedes a second feature option in the order, and the second feature option precedes a third feature option in the order; changing the appearance of at least one of the second set of feature options from a first appearance to a second appearance; displaying a first animated transition of the first feature option of the second set of feature options from the first appearance to the second appearance; initiating a second animated transition of the second feature option of the second set of feature options from the first appearance to the second appearance after displaying at least a portion of the first animated transition of the first feature option to the second appearance; and after displaying at least a portion of the second animated transition of the second feature option to the second appearance, initiating a third animated transition of the third feature option of the second set of feature options from the first appearance to the second appearance.

43. changing the appearance of at least one of the second set of feature options from the first appearance to the second appearance; increasing a size of a first one of the second set of feature options and then decreasing the size of the first one of the second set of feature options; 43. The method of any one of claims 33 to 42, comprising: enlarging a size of a second one of the second set of feature options and then reducing the size of the second one of the second set of feature options.

44. detecting a change in a face within a field of view of one or more cameras of the electronic device; 44. The method of any one of claims 33 to 43, further comprising modifying an appearance of the avatar based on the detected changes in the face.

45. determining that the face has not been detected within the field of view of the one or more cameras for a predetermined time period after detecting the change in the face; in response to determining that the face has not been detected within the field of view of the one or more cameras for the predetermined time period, ceasing to modify the appearance of the avatar based on the detected changes in the face; detecting an input after ceasing to modify the appearance of the avatar; 45. The method of claim 44, further comprising: in response to detecting the input, resuming modifying the appearance of the avatar based on the detected change in the face.

46. 46. ​​The method of claim 45, further comprising, in response to determining that the face has not been detected within the field of view of the one or more cameras for the predetermined amount of time, displaying an indication that the face has not been detected within the field of view of the one or more cameras.

47. 46. ​​The method of claim 45, wherein the input is detecting that the device is being lifted.

48. 46. ​​The method of claim 45, wherein the input is a gesture directed toward the avatar editing user interface.

49. 49. The method of any one of claims 33 to 48, further comprising modifying an appearance of the avatar based on input, wherein modifying the appearance of the avatar based on the input comprises moving one or more of the plurality of avatar features according to one or more physics models.

50. Detecting a gesture on the avatar; In response to detecting the gesture of the avatar, adjusting a zoom level of the avatar based on the gesture in accordance with a determination that the gesture corresponds to a first type of gesture; adjusting an orientation of the avatar based on the gesture in accordance with a determination that the gesture corresponds to a second type of gesture; 50. The method of claim 33, further comprising: in response to detecting a selection of one of the feature options in the first set of feature options, updating the avatar based on the selected feature option.

51. 51. The method of any one of claims 33 to 50, wherein an individual feature option includes a representation of the individual avatar feature, and the representation of the individual avatar feature is displayed having an enlarged view compared to the individual avatar feature of the displayed avatar.

52. 52. The method of any one of claims 33 to 51, wherein a second individual feature option includes representations of the individual avatar features and excludes at least some of the different avatar features.

53. Displaying the avatar editing user interface 53. The method of any one of claims 33 to 52, further comprising displaying an avatar feature sub-region including a plurality of affordances corresponding to avatar features, the plurality of affordances including a first selected affordance corresponding to the individual avatar feature.

54. in response to detecting the selection of the one of the feature options in the first set of feature options, 54. The method of claim 53, further comprising displaying an animation of a visual effect associated with a second one of the plurality of affordances corresponding to an avatar feature.

55. In response to detecting a selection of a second affordance corresponding to a second avatar feature, updating the first option selection area to display a first set of updated feature options corresponding to a set of candidate values ​​for a first characteristic of the second avatar feature; 54. The method of claim 53, further comprising: updating the second option selection area to display a second set of updated feature options corresponding to a set of candidate values ​​for a second characteristic of the second avatar feature.

56. the avatar feature sub-region is displayed in a first region of the avatar editing user interface; 54. The method of claim 53, wherein the first option selection area and the second option selection area are displayed in a second area of ​​the avatar editing user interface, the second area being disposed below the first area.

57. 57. The method of any one of claims 33 to 56, wherein the first set of feature options includes a plurality of color affordances corresponding to colors, the plurality of color affordances including a first selected color affordance corresponding to a color of the individual avatar feature.

58. 58. The method of claim 57, further comprising, in response to detecting a selection of one of the plurality of color affordances, displaying a color picker user interface having a selected color corresponding to the selected color affordance and a plurality of other color options not included in the plurality of color affordances.

59. 58. The method of claim 57, wherein, in accordance with a determination that the plurality of color affordances corresponds to a color of a skin color feature of an avatar, the plurality of color affordances includes an expanded set of color affordances that correspond to a color of a skin color feature of the avatar.

60. the plurality of color affordances correspond to colors of a first type of avatar feature, and the method further comprises: displaying a first portion of the plurality of color affordances; and Detecting a gesture on the plurality of color affordances; and 58. The method of claim 57, further comprising: in response to detecting the gesture, ceasing to display the first portion of color affordances and displaying a second portion of color affordances, the second portion of color affordances including affordances corresponding to an expanded set of color affordances different from the first portion of color affordances and the second portion of color affordances.

61. 58. The method of claim 57, wherein the multiple color affordances, when displayed in an expanded state, are not horizontally scrollable.

62. 62. The method of any one of claims 33 to 61, wherein at least one of the first characteristic or the second characteristic corresponds to a feature shape of the individual avatar feature.

63. the distinct avatar feature is an avatar's face; 63. The method of any one of claims 33 to 62, wherein the first characteristic and the second characteristic are selected from the group consisting of head shape, skin color, nose size, nose shape, lip shape, lip color, ear size, facial hair style, and age.

64. the distinct avatar feature being avatar hair; 64. The method of any one of claims 33 to 63, wherein the first characteristic and the second characteristic are selected from the group consisting of hair color, hairstyle, length, hair texture, hair part, up, down, and hairline.

65. the distinct avatar feature is an avatar's eye; 65. The method of any one of claims 33 to 64, wherein the first characteristic and the second characteristic are selected from the group consisting of eye shape, eye color, eyelashes, and eyebrow shape.

66. the distinct avatar feature is an accessory; 66. The method of any one of claims 33 to 65, wherein the first characteristic and the second characteristic are selected from the group consisting of hats, glasses, earrings, and decorative extensions.

67. 67. The method of any one of claims 33 to 66, further comprising, in response to detecting a vertical gesture on the avatar editing user interface, scrolling the avatar editing user interface in a vertical direction corresponding to the vertical gesture, wherein scrolling the avatar editing user interface comprises scrolling the first option selection area and the second option selection area in the direction of the vertical gesture while maintaining a vertical position of an area containing the displayed avatar.

68. in response to detecting a gesture on an avatar feature subregion of the avatar editing user interface; displaying the avatar feature sub-region changing from a first appearance when a first avatar feature is selected to a second appearance when a second avatar feature is selected; ceasing to display the first and second option selection areas; and displaying a third option selection area having a plurality of feature options arranged in an order such that a first feature option precedes a second feature option in the order, and said second feature option precedes a third feature option in the order; displaying a fourth option selection region having a plurality of feature options arranged in an order such that a first feature option precedes a second feature option in the order, and the second feature option precedes a third feature option in the order; displaying the third option selection area includes displaying a first animation including cycling through the plurality of feature options in the third option selection area; Displaying the fourth option selection area includes:

68. The method of any one of claims 33 to 67, comprising initiating a second animation after displaying at least a portion of the first animation, the second animation comprising cycling through the plurality of feature options of the fourth option selection area.

69. The avatar is a first size or a second size, and the method further comprises: Detecting a gesture on the avatar editing user interface; in response to a determination that the gesture corresponds to a selection of a feature option within the first or second set of feature options and that the avatar is at the second size, displaying the avatar transitioning from the second size to the first size; In response to a determination that the gesture is a scroll gesture and that the avatar is the first size, displaying the avatar transitioning to the second size if the scroll gesture corresponds to a first scroll direction; responsive to a determination that the gesture is the scroll gesture and that the avatar is the second size, 69. The method of any one of claims 33 to 68, further comprising: if the scroll gesture corresponds to a second scroll direction different from the first direction, displaying the avatar transitioning to the first size.

70. responsive to a determination that the gesture is the scroll gesture and that the avatar is the first size, 70. The method of claim 69, further comprising ceasing to display the avatar transitioning to the second size if the scroll gesture corresponds to the second scroll direction.

71. 71. The method of any one of claims 33 to 70, wherein the avatar is displayed having a skin color that changes over time through a plurality of different color values ​​prior to detecting the selection of the one of the feature options.

72. 72. The method of any one of claims 33 to 71, wherein the avatar is displayed in a non-interactive state prior to detecting the selection of the one of the feature options.

73. in response to detecting an input on the avatar editing user interface; displaying the avatar without the variation of the color effect; 73. The method of any one of claims 33 to 72, further comprising displaying the avatar transitioning from the non-interactive state to an interactive state.

74. A non-transitory computer-readable storage medium storing 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 performing the method of any one of claims 33 to 73.

75. A display device; one or more processors; and a memory storing one or more programs configured to be executed by said one or more processors, said one or more programs including instructions for performing the method of any one of claims 33 to 73.

76. A display device; and means for performing the method of any one of claims 33 to 73.

77. A non-transitory computer-readable storage medium storing 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 comprising: Through the display device, an avatar having a plurality of avatar features; a first individual avatar feature option selection area including a first set of feature options corresponding to a set of possible 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 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.

78. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: Through the display device, an avatar having a plurality of avatar features; a first individual avatar feature option selection area including a first set of feature options corresponding to a set of possible 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 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.

79. A display device; Through the display device, an avatar having a plurality of avatar features; a first individual avatar feature option selection area including a first set of feature options corresponding to a set of possible 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 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.

80. An electronic device having a display device, Through the display device, a user interface object including individual features having a first set of one or more colors; displaying a plurality of color options for the individual features; and 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, changing the color of the individual feature to the color option; displaying first color adjustment controls for the color options corresponding to a second set of one or more colors; detecting an input corresponding to the first color adjustment control while the discrete feature of the user interface object has the second set of one or more colors; and modifying the 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 in response to detecting the input corresponding to the first color adjustment control.

81. 81. The method of claim 80, wherein changing the color of the individual feature from the second set of one or more colors to the modified version of the second set of one or more colors is further based on a magnitude and direction of the input corresponding to the first color adjustment control.

82. 82. The method of claim 80 or 81, further comprising, in response to detecting the input corresponding to the first color adjustment control, changing the color of the color option from the second color to the modified version of a second set of the one or more colors.

83. displaying a second plurality of color options of the second feature; and detecting a selection of a second color option of the second plurality of color options; in response to detecting the selection of the second color option, changing the color of the second feature to the second color option; 83. The method of any one of claims 80 to 82, further comprising: displaying a second color adjustment control for the second color option corresponding to a third set of one or more colors.

84. the individual feature and the second feature each correspond to a portion of a feature of glasses of an avatar; the plurality of color options correspond to eyeglass frame colors for the avatar; 84. The method of claim 83, wherein the second plurality of color options correspond to lens colors of eyeglasses for the avatar.

85. detecting an input corresponding to the second color adjustment control; 85. The method of claim 84, further comprising: in response to detecting the input corresponding to the second color adjustment control, altering an opacity of the lenses of the avatar's glasses.

86. 86. The method of any one of claims 83 to 85, further comprising, in response to detecting the selection of the second color option, ceasing to display the first color adjustment control for the color option corresponding to the second set of one or more colors.

87. detecting a subsequent selection of the color option of the plurality of color options corresponding to the second color after ceasing to display the first color adjustment control for the color option corresponding to the second set of one or more colors; 87. The method of claim 86, further comprising: in response to detecting the subsequent selection, resuming display of the first color adjustment control for the color option, the first color adjustment control corresponding to the modified version of the second set of one or more colors.

88. 88. The method of any one of claims 83 to 87, further comprising maintaining display of the color option of the plurality of color options having the modified version of the second set of one or more colors after ceasing to display the first color adjustment control corresponding to the second set of one or more colors.

89. modifying the second set of one or more colors in a first manner in response to determining that the input corresponding to the first color adjustment control includes a first direction; 89. The method of any one of claims 83 to 88, further comprising modifying a third set of the one or more colors in the first manner in response to a determination that a second input corresponding to the second color adjustment control includes the first direction.

90. modifying the 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; increasing a red value of the second set of one or more colors in response to a determination that the input corresponding to the first color adjustment control includes movement in a second direction; and increasing a green value of the second set of one or more colors in response to a determination that the input corresponding to the first color adjustment control includes a movement in a third direction; detecting an input corresponding to the second color adjustment control while the discrete feature of the user interface object has the third set of one or more colors; and in response to detecting the input corresponding to the second color adjustment control, modifying the color of the discrete feature from the third set of one or more colors to a modified version of the third set of one or more colors based on the second color, wherein the modifying comprises: increasing a red value of the third set of one or more colors in response to a determination that the second input corresponding to the second color adjustment control includes movement in the second direction; and and increasing a green value of a third set of the one or more colors in accordance with a determination that the second input corresponding to the second color adjustment control includes movement in the third direction.

91. 91. The method of any one of claims 80 to 90, wherein the individual characteristic is an avatar's skin color.

92. 92. The method of any one of claims 80 to 91, wherein the distinct characteristic is the eye color of an avatar.

93. 93. The method of any one of claims 80 to 92, wherein the distinct characteristic is an avatar's hair color.

94. 94. The method of any one of claims 80 to 93, wherein changing the color of the individual feature from the second set of one or more colors to the modified version of the second set of one or more colors comprises changing a plurality of values ​​of the second set of one or more colors.

95. the first color adjustment control for the color option corresponding to the second set of one or more colors includes a slider having a track and a thumb that moves within the track, the input causing movement of the thumb within the track, and the method further comprising:

95. The method of any one of claims 80 to 94, further comprising, in response to detecting the input, generating haptic feedback as the thumb is moved to a predefined position.

96. A non-transitory computer-readable storage medium storing 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 performing the method of any one of claims 80 to 95.

97. A display device; one or more processors; and a memory storing one or more programs configured to be executed by said one or more processors, said one or more programs including instructions for performing the method of any one of claims 80 to 95.

98. A display device; and means for carrying out the method of any one of claims 80 to 95. An electronic device comprising:

99. A non-transitory computer-readable storage medium storing 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 comprising: Through the display device, a user interface object including individual features having a first set of one or more colors; a plurality of color options for the individual features; 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 the color of the individual feature to the color option; displaying a first color adjustment control for the color options corresponding to a second set of one or more colors; detecting an input corresponding to the first color adjustment control while the discrete feature of the user interface object has the second set of one or more colors; a 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, the second set of one or more colors being changed based on the second color;

100. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: Through the display device, a user interface object including individual features having a first set of one or more colors; a plurality of color options for the individual features; 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 the color of the individual feature to the color option; displaying a first color adjustment control for the color options corresponding to a second set of one or more colors; detecting an input corresponding to the first color adjustment control while the discrete feature of the user interface object has the second set of one or more colors; in response to detecting the input corresponding to the first color adjustment control, modify the color of the discrete 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.

101. A display device; Through the display device, a user interface object including individual features having a first set of one or more colors; a plurality of color options for the individual features; and means for detecting a selection of a color option from the plurality of color options corresponding to a second color; In response to detecting the selection, means for changing the color of the individual feature to the color option; means for displaying a first color adjustment control for the color options corresponding to a second set of one or more colors; means for detecting an input corresponding to the first color adjustment control while the discrete feature of the user interface object has the second set of one or more colors; and means for modifying the color of the discrete 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.

102. An electronic device having a display device, Through the display device, an avatar having a plurality of avatar features, the 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; displaying an avatar editing user interface including displaying a plurality of color options corresponding to the first avatar feature; 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, said updating comprising: 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 that is based on and different from the second set of one or more colors.

103. 103. The method of claim 102, 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.

104. 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; and 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, said updating further comprising: changing the third avatar characteristic to the fourth set of one or more colors; and and modifying the second avatar feature to a set of one or more colors that is based on and different from the fourth set of one or more colors.

105. detecting a selection of a second color option of the second plurality of color options; 105. The method of claim 104, 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.

106. the third avatar feature and the second avatar feature are modified in a first manner that includes adjusting a first color characteristic based on a second set of the one or more colors corresponding to the first avatar feature; 106. The method of claim 105, wherein the third avatar feature and the second avatar feature are modified in a second way that includes 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.

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

108. 108. The method of any one of claims 102 to 107, further comprising, in response to detecting a selection of the individual color option of the plurality of color options, displaying color adjustment controls for the individual color option that corresponds to the second set of one or more colors.

109. the second avatar feature corresponds to avatar lips having an avatar lip color corresponding to the set of one or more colors that is different from the second set of one or more colors based on 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; 109. The method of claim 108, further comprising: maintaining the avatar's lip color for a second portion of the avatar's lips.

110. the first avatar characteristic corresponds to a skin color of an avatar; the second avatar feature corresponds to lips of an avatar; 110. The method of any one of claims 102 to 109, 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.

111. A non-transitory computer-readable storage medium storing 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 performing the method of any one of claims 102 to 110.

112. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of any one of claims 102 to 110.

113. A display device; and means for performing the method of any one of claims 102 to 110.

114. A non-transitory computer-readable storage medium storing 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 comprising: Through the display device, an avatar having a plurality of avatar features, the 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; displaying an avatar editing user interface including displaying a plurality of color options corresponding to the first avatar feature; detecting a selection of a particular color option from 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, said updating including: 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 that is based on and different from the second set of one or more colors.

115. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: Through the display device, an avatar having a plurality of avatar features, the 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; displaying an avatar editing user interface including displaying a plurality of color options corresponding to the first avatar feature; detecting a selection of a particular color option from 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, said updating including: 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 that is based on and different from the second set of one or more colors.

116. A display device; Through the display device, an avatar having a plurality of avatar features, the 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 means for detecting a selection of an individual color option from the plurality of color options; and means for updating an appearance of the avatar in response to detecting a selection of the individual color option of the plurality of color options of the first avatar feature in accordance with a determination that the individual color option corresponds to a second set of one or more colors, the means for updating comprising: means for changing the first avatar characteristic 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 that is based on and different from the second set of one or more colors.

117. An electronic device having a display device, Through the display device, an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle; displaying an avatar editing user interface including displaying a plurality of avatar accessory options; Detecting a selection of individual accessory options; in response to detecting the selection of the individual accessory option among the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the individual accessory option, including following a determination that the individual accessory option is a first accessory option; displaying the representation of the first accessory option disposed on the avatar; and and modifying a shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

118. in response to determining that the distinct accessory option is a second accessory option, displaying the representation of the second accessory option disposed on the avatar; and 118. The method of claim 117, further comprising modifying a shape of a second portion of the avatar's hair that differs from the modified shape of the first portion of the avatar's hair based on the position of the representation of the second accessory option on the avatar while maintaining the selected avatar hairstyle.

119. detecting a selection of a second discrete accessory option after displaying the representation of the location of the first accessory option on the avatar; and 119. The method of claim 117 or 118, further comprising, in response to detecting the selection of the second individual accessory option of the plurality of avatar accessory options, modifying the appearance of the avatar to include a representation of the second individual accessory option and the representation of the individual accessory option.

120. displaying a plurality of avatar hairstyle options via the display device; Detecting a selection of a second hairstyle option; and in response to detecting the selection of the second hairstyle option, changing the appearance of the avatar from having the selected avatar hairstyle to having the second hairstyle option, said changing including: displaying hair of the avatar having the second hairstyle option modified in a first manner based on the representation of the individual accessory option in accordance with a determination that the individual accessory option is a first type of accessory option; 120. The method of any one of claims 117 to 119, comprising: displaying hair of the avatar having the second hairstyle option modified in a second manner based on the representation of the individual accessory option in accordance with a determination that the individual accessory option is a second type of accessory option.

121. 121. The method of claim 120, further comprising displaying the avatar's hair having the second hairstyle option without modification pursuant to a determination that the particular accessory option is of a third type.

122. 122. The method of any one of claims 117 to 121, wherein an appearance of the representation of the individual accessory option is based on one or more characteristics of the avatar's hair.

123. in response to detecting a selection of a third hairstyle option, changing the appearance of the avatar from having the selected avatar hairstyle to having the third hairstyle option; 123. The method of any one of claims 117 to 122, further comprising modifying an appearance of the representation of the individual accessory option based on the third hairstyle option.

124. the distinct accessory option being a hat for an avatar; 124. The method of claim 123, wherein altering the appearance of the representation of the individual accessory option includes altering a size of the representation of a hat for the avatar based on a size of the third hairstyle option.

125. 125. The method of claim 124, wherein altering the appearance of the representation of the individual accessory option further comprises altering a size of a hat line of the representation of the avatar's hat based on the size of the third hairstyle option.

126. the first accessory option being avatar glasses; 126. The method of any one of claims 117 to 125, wherein altering the shape of the portion of the avatar's hair comprises displaying the portion of the avatar's hair positioned to avoid obscuring at least a portion of the avatar's glasses.

127. the first accessory option being avatar glasses; Displaying the representation of the first accessory option disposed on the avatar includes: displaying a representation of a reflection in a lens of the avatar's glasses; and displaying a representation of a shadow cast by the representation of the avatar's glasses displayed on at least a portion of the avatar.

128. the first accessory option being a hat for the avatar; displaying the representation of the first accessory option disposed on the avatar includes displaying a hat on the avatar disposed over a portion of hair of the avatar; 128. The method of any one of claims 117 to 127, wherein altering the shape of the portion of the avatar's hat comprises: displaying the avatar's hair having a compressed appearance at a location adjacent a hat line of the avatar's hat; and expanding the avatar's hair to spread out from the location adjacent the hat line of the avatar's hat.

129. 129. The method of claim 128, further comprising, in response to detecting a selection of a second avatar hat option among the plurality of avatar accessory options, replacing the representation of the avatar's hat with a representation of the second avatar's hat while maintaining the hat line and maintaining the shape of the portion of the avatar's hair having the compressed appearance at the location adjacent the hat line and expanding as the avatar's hair spreads out from the location adjacent the hat line.

130. the hair of the avatar moves in accordance with a pseudo-physical response of the hair of the avatar to a movement of the avatar based on a physics model; 130. The method of any one of claims 117 to 129, wherein the simulated physical response of the avatar's hair to avatar movement based on the physics model is changed when the first accessory option is an avatar hat.

131. Displaying the representation of the first accessory option disposed on the avatar includes:

131. The method of any one of claims 117 to 130, comprising displaying a representation of one or more shadows cast by the first accessory option or the avatar's hair.

132. the first accessory option being an avatar earring; 132. The method of any one of claims 117 to 131, wherein the avatar's earrings move according to a physics model.

133. A non-transitory computer-readable storage medium storing 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 performing the method of any one of claims 117 to 132.

134. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of any one of claims 117 to 132.

135. A display device; and means for performing the method of any one of claims 117 to 132.

136. A non-transitory computer-readable storage medium storing 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 comprising: Through the display device, an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle; displaying an avatar editing user interface including displaying a plurality of avatar accessory options; Detects individual accessory option selections and in response to detecting the selection of the individual accessory option among the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the individual accessory option, including following a determination that the individual accessory option is a first accessory option; displaying the representation of the first accessory option positioned on the avatar; A non-transitory computer-readable storage medium comprising instructions for modifying a shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

137. A display device; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: Through the display device, an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle; displaying an avatar editing user interface including displaying a plurality of avatar accessory options; Detects individual accessory option selections and in response to detecting the selection of the individual accessory option among the plurality of avatar accessory options, modifying an appearance of the avatar to include a representation of the individual accessory option, including following a determination that the individual accessory option is a first accessory option; displaying the representation of the first accessory option positioned on the avatar; an electronic device comprising instructions for modifying a shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

138. A display device; Through the display device, an avatar having a plurality of avatar features including avatar hair having a selected avatar hairstyle; means for displaying an avatar editing user interface including displaying a plurality of avatar accessory options; means for detecting a selection of an individual accessory option; means for modifying an appearance of the avatar to include a representation of the individual accessory option in response to detecting the selection of the individual accessory option of the plurality of avatar accessory options, including following a determination that the individual accessory option is a first accessory option; means for displaying the representation of the first accessory option disposed on the avatar; and means for modifying a shape of a first portion of the avatar's hair based on the position of the representation of the first accessory option on the avatar while maintaining the selected avatar hairstyle.

139. An electronic device having a display and one or more cameras, displaying via the display device a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within the field of view of the one or more cameras; detecting a movement of the first facial feature while the 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 the user's tongue; In response to detecting movement of the first facial feature, displaying an avatar's tongue and modifying a position of the avatar's tongue based on the movement of the first facial feature pursuant to a determination that the user's tongue satisfies an individual criterion, the individual criterion including a requirement that the user's tongue be visible for the individual criterion to be satisfied; and ceasing to display the avatar's tongue in accordance with a determination that the user's tongue does not meet the individual criterion.

140. Varying the position of the avatar's tongue based on the movement of the first facial feature. modifying the position of the avatar's tongue to the first direction in accordance with a determination that the first facial feature moves in a first direction; and modifying the position of the avatar's tongue to a second direction in accordance with a determination that the first facial feature moves in a second direction different from the first direction.

141. Varying the position of the avatar's tongue based on the movement of the first facial feature. modifying the position of the avatar's tongue by an amount proportional to the first magnitude in accordance with a determination that the first facial feature moves by a first magnitude; and modifying the position of the avatar's tongue by an amount proportional to the second magnitude in accordance with a determination that the first facial feature moves by a second magnitude different from the first magnitude.

142. Detecting that the user's tongue no longer meets the individual criteria while the avatar's tongue is displayed; and ceasing to display the avatar's tongue in response to detecting that the user's tongue no longer meets the individual criteria.

143. displaying the avatar's tongue includes displaying an animation of the avatar's tongue extending from the virtual avatar's mouth; 143. The method of claim 142, wherein ceasing to display the avatar's tongue includes displaying an animation of the avatar's tongue retracting into the mouth of the virtual avatar.

144. 143. The method of claim 142, wherein at least one of the animation of the tongue extending from the mouth of the virtual avatar or the animation of the tongue retracting into the mouth of the virtual avatar includes displaying movement of the avatar's tongue curving over one or more teeth of the virtual avatar.

145. The tongue of the avatar moves according to a physical model; 145. The method of any one of claims 139 to 144, wherein the extent of the avatar's tongue movement increases based on an increasing amount of the tongue extended from the virtual avatar's mouth.

146. Detecting movement of a second facial feature to a first position; In response to detecting the movement of the second facial feature to the first position, modifying a first avatar feature based on the movement of the second facial feature in accordance with a determination that the avatar's tongue is not displayed; 146. The method of any one of claims 139 to 145, further comprising: dampening movement of the first avatar feature based on the movement of the second facial feature in accordance with a determination that the avatar's tongue is displayed based on meeting the individual criteria.

147. the second facial feature is the user's mouth; the first position of the second facial feature corresponds to a position where the mouth of the user is closed; 147. The method of claim 146, wherein the first avatar feature is the avatar's mouth.

148. the second facial feature is the user's lower lip; the first position of the second facial feature corresponds to a position where the lower lip of the user is extended; 147. The method of claim 146, wherein the first avatar feature is the avatar's bottom lip.

149. the second facial feature being an upper lip and a lower lip of the user; the first position of the second facial feature corresponds to a position where the upper and lower lips of the user are pursed; 147. The method of claim 146, wherein the first avatar feature is the avatar's upper and lower lips.

150. the second facial feature is the user's mouth; the first position of the second facial feature corresponds to a position where the mouth of the user is closed; 147. The method of claim 146, wherein the first avatar feature is the avatar's mouth.

151. 151. The method of any one of claims 139 to 150, wherein the avatar's tongue has a visual effect that changes in response to changing the position of the avatar's tongue.

152. 152. The method of any one of claims 139 to 151, wherein the avatar's tongue comprises a first portion and a second portion, the second portion being connected to the first portion by a connector that is more flexible than the first portion or the second portion.

153. Displaying a tongue of the avatar, Detecting a location of a third facial feature; displaying a tongue of the avatar having a first shape in accordance with a determination that the third facial feature has a first position; and displaying a tongue of the avatar having a second shape different from the first shape in accordance with a determination that the first facial feature has a second position different from the first position.

154. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of an electronic device having a display device and one or more cameras, the one or more programs including instructions for performing the method of any one of claims 139 to 153.

155. A display device; One or more cameras; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for performing the method of any one of claims 139 to 153.

156. A display device; One or more cameras; and means for performing the method of any one of claims 139 to 153.

157. 1. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of an electronic device having a display device and one or more cameras, the one or more programs comprising: displaying via the display device a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within the field of view of the one or more cameras; detecting a movement of the first facial feature while the 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 the user's tongue; In response to detecting movement of the first facial feature, displaying an avatar's tongue and modifying a position of the avatar's tongue based on the movement of the first facial feature pursuant to a determination that the user's tongue satisfies the individual criterion, the individual criterion including a requirement that the user's tongue be visible for the individual criterion to be satisfied; A non-transitory computer-readable storage medium comprising instructions for ceasing display of the avatar's tongue in accordance with a determination that the user's tongue does not meet the individual criteria.

158. A display device; One or more cameras; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising: displaying via the display device a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within the field of view of the one or more cameras; detecting a movement of the first facial feature while the 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 the user's tongue; In response to detecting movement of the first facial feature, displaying an avatar's tongue and modifying a position of the avatar's tongue based on the movement of the first facial feature pursuant to a determination that the user's tongue satisfies the individual criterion, the individual criterion including a requirement that the user's tongue be visible for the individual criterion to be satisfied; The electronic device includes instructions for ceasing display of the avatar's tongue in response to a determination that the tongue of the user does not meet the individual criteria.

159. A display device; One or more cameras; means for displaying, via said display device, a virtual avatar having a plurality of avatar features that change appearance in response to detected changes in facial pose within the field of view of said one or more cameras; means for detecting movement of the first facial feature while the 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 the user's tongue; In response to detecting movement of the first facial feature, means for displaying an avatar's tongue and altering a position of the avatar's tongue based on the movement of the first facial feature pursuant to a determination that the user's tongue satisfies an individual criterion, the individual criterion including a requirement that the user's tongue be visible for the individual criterion to be satisfied; and means for ceasing display of the avatar's tongue in accordance with a determination that the tongue of the user does not meet the individual criteria.

Images