Avatar creation 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] Avatars are used to represent users of electronic devices. An avatar can represent a user's appearance, or it can represent an idealized or 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 uses, including use in multimedia communication, 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, some existing techniques use complex and time - consuming user interfaces 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] Therefore, this technology provides electronic devices with faster and more efficient methods and interfaces for creating and editing avatars. Such methods and interfaces optionally complement or replace other methods of creating avatars. Such methods and interfaces reduce the cognitive burden on the user and result in a more efficient human-machine interface. In the case of battery-powered computing devices, such methods and interfaces conserve power and increase the interval between battery recharging cycles.

[0006] A method is described. This method is performed on an electronic device having a display device and one or more input devices. This method includes displaying an avatar navigation user interface via a display device, wherein the avatar navigation user interface includes an avatar; detecting a gesture directed towards the avatar navigation user interface via one or more input devices while the avatar navigation user interface is being displayed; displaying a first type of avatar on the avatar navigation user interface in response to the detection of a gesture, according to a determination that the gesture is in a first direction; and displaying a second type of avatar, different from the first type, on the avatar navigation user interface in response to a determination that the gesture is in a second direction opposite to the first direction.

[0007] A non-temporary computer-readable storage medium is described. The non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more input devices. These one or more programs include instructions for displaying an avatar navigation user interface via a display device, the avatar navigation user interface including an avatar; detecting a gesture directed towards the avatar navigation user interface via one or more input devices while the avatar navigation user interface is displayed; and, in response to detecting a 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.

[0008] A temporary computer-readable storage medium is described. The temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more input devices. These one or more programs include instructions for displaying an avatar navigation user interface via a display device, the avatar navigation user interface including an avatar; detecting a gesture directed toward the avatar navigation user interface via one or more input devices while the avatar navigation user interface is displayed; and, in response to detecting a 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.

[0009] An electronic device is described. This electronic device comprises a display device, one or more input devices, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs being an avatar navigation user interface via the display device, the avatar navigation user interface including avatars, and while the avatar navigation user interface is displayed, the device includes instructions for detecting a gesture directed toward the avatar navigation user interface via one or more input devices, and in response to detecting a 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.

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

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

[0012] A non-temporary computer-readable storage medium is described. This non-temporary 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, via the display device, an avatar editing user interface that includes simultaneously displaying an avatar having a plurality of avatar feature parts; a first option selection area for individual avatar feature parts containing a first set of feature part options corresponding to a set of candidate values ​​for a first characteristic of an individual avatar feature part; and a second option selection area for individual avatar feature parts containing a second set of feature part options corresponding to a set of candidate values ​​for a second characteristic of an individual avatar feature part, wherein the second characteristic of an individual avatar feature part differs from the first characteristic of an individual avatar feature part; and instructions that, in response to detecting a selection of one of the feature part options in the first set of feature part options, change the appearance of at least one of the second set of feature part options from a first appearance to a second appearance.

[0013] A temporary computer-readable storage medium is described. This temporary 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, via the display device, an avatar editing user interface which includes simultaneously displaying an avatar having a plurality of avatar feature parts, a first option selection area for individual avatar feature parts containing a first set of feature part options corresponding to a set of candidate values ​​for a first characteristic of an individual avatar feature part, and a second option selection area for individual avatar feature parts containing a second set of feature part options corresponding to a set of candidate values ​​for a second characteristic of an individual avatar feature part, wherein the second characteristic of an individual avatar feature part differs from the first characteristic of an individual avatar feature part, and includes instructions which change the appearance of at least one 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 in the first set of feature part options.

[0014] An electronic device is described. This electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more of which includes displaying an avatar editing user interface via the display device, which includes simultaneously displaying an avatar having a plurality of avatar feature parts, a first option selection area for an individual avatar feature part containing a first set of feature part options corresponding to a set of candidate values ​​for a first characteristic of an individual avatar feature part, and a second option selection area for an individual avatar feature part containing a second set of feature part options corresponding to a set of candidate values ​​for a second characteristic of an individual avatar feature part, wherein the second characteristic of an individual avatar feature part differs from the first characteristic of an individual avatar feature part, and includes instructions for changing the appearance of at least one 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 in the first set of feature part options.

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

[0016] A method is described. This method is performed on an electronic device having a display device. The method includes, via the display device, displaying a user interface object which includes individual features having a first set of one or more colors, and a plurality of color options for the individual features; detecting a selection of a color option from the plurality of color options corresponding to a second color; changing the color of the individual feature to this color option in response to detecting this selection; displaying a first color adjustment control for the color option corresponding to the second set of one or more colors; detecting an input corresponding to the first color adjustment control while the individual feature of the user interface object has a second set of one or more colors; and 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 in response to detecting the input corresponding to the first color adjustment control, based on the second color.

[0017] A non-temporary computer-readable storage medium is described. This non-temporary 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, via the display device, a user interface object having individual features having a first set of one or more colors and a plurality of color options for the individual features, detecting a selection of a color option from the plurality of color options corresponding to a second color, changing the color of the individual feature to this color option in response to detecting this selection, displaying a first color adjustment control for a color option corresponding to a second set of one or more colors, detecting an input corresponding to the first color adjustment control while the individual features of the user interface object have a second set of one or more colors, and changing the color of the individual feature from a 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.

[0018] A temporary computer-readable storage medium is described. This temporary 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, via the display device, a user interface object having individual features having a first set of one or more colors and a plurality of color options for the individual features, detecting a selection of a color option from the plurality of color options corresponding to a second color, changing the color of the individual feature to this color option in response to detecting this selection, displaying a first color adjustment control for a color option corresponding to a second set of one or more colors, detecting an input corresponding to the first color adjustment control while the individual features of the user interface object have a second set of one or more colors, and changing the color of the individual feature from a 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.

[0019] An electronic device is described. This electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying, via the display device, individual features having a first set of one or more colors, and a user interface object having multiple color options for the individual features, detecting a selection of a color option from the multiple color options corresponding to a second color, changing the color of the individual feature to this color option in response to detecting this selection, displaying a first color adjustment control for a color option 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 a second set of one or more colors, and changing the color of the individual feature from a second set of one or more colors to a modified version of the second set of one or more colors in response to detecting the input corresponding to the first color adjustment control, based on the second color.

[0020] An electronic device is described. This electronic device comprises a display device, means for displaying a user interface object via the display device which includes individual features having a first set of one or more colors, and a plurality of color options for the individual features, means for detecting the selection of a color option from a 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 a color option 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 a second set of one or more colors to a modified version of the second set of one or more colors based on a second color in response to detecting the input corresponding to the first color adjustment control.

[0021] A method is described. This method is performed on an electronic device having a display device. This method includes displaying an avatar editing user interface via the display device, which includes displaying an avatar having a plurality of avatar feature parts, including a first avatar feature part having a first set of one or more colors, and a second avatar feature part 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, and a plurality of color options corresponding to the first avatar feature part; detecting the selection of individual color options of the plurality of color options; updating the appearance of the avatar, including changing the first avatar feature part to a second set of one or more colors in response to the detection of the selection of individual color options of the plurality of color options of the first avatar feature part, according to the determination that the individual color options correspond to a second set of one or more colors; and changing the second avatar feature part 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-temporary computer-readable storage medium is described. This non-temporary 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, via the display device, displaying an avatar editing user interface which includes displaying an avatar having a plurality of avatar feature parts, including a first avatar feature part having a first set of one or more colors, and a second avatar feature part 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, and a plurality of color options corresponding to the first avatar feature part, and updating the appearance of the avatar, including detecting the selection of individual color options of the plurality of color options, and in response to detecting the selection of individual color options of the plurality of color options of the first avatar feature part, changing the first avatar feature part to a second set of one or more colors according to the determination that the individual color options correspond to a second set of one or more colors, and changing the second avatar feature part 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. This temporary 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, via the display device, displaying an avatar editing user interface which includes displaying an avatar having a plurality of avatar feature parts, including a first avatar feature part having a first set of one or more colors, and a second avatar feature part 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, and a plurality of color options corresponding to the first avatar feature part, and updating the appearance of the avatar, including detecting the selection of individual color options of the plurality of color options, and in response to detecting the selection of individual color options of the plurality of color options of the first avatar feature part, changing the first avatar feature part to a second set of one or more colors according to the determination that the individual color options correspond to a second set of one or more colors, and changing the second avatar feature part 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. This electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs including an avatar editing user interface which includes displaying an avatar having a plurality of avatar feature parts, including a first avatar feature part having a first set of one or more colors, and a second avatar feature part 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, and a plurality of color options corresponding to the first avatar feature part, and updating the appearance of the avatar, including detecting the selection of individual color options of the plurality of color options, and in response to detecting the selection of individual color options of the plurality of color options of the first avatar feature part, changing the first avatar feature part to a second set of one or more colors according to the determination that the individual color options correspond to a second set of one or more colors, and changing the second avatar feature part 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. This electronic device includes a display device, means for displaying an avatar editing user interface which includes displaying a plurality of avatar feature parts including a first avatar feature part having a first set of one or more colors, and a second avatar feature part 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, and a plurality of color options corresponding to the first avatar feature part, means for detecting the selection of individual color options of the plurality of color options, means for updating the appearance of the avatar which includes changing the first avatar feature part to a second set of one or more colors in response to the detection of the selection of individual color options of the plurality of color options of the first avatar feature part, in accordance with the determination that the individual color options correspond to a second set of one or more colors, and means for changing the second avatar feature part to a set of one or more colors different from a second set of one or more colors based on a second set of one or more colors.

[0026] A method is described. This method is executed on an electronic device having a display device. The 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 the plurality of avatars; detecting a selection of an individual accessory option; and changing the appearance of the avatar to include a 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, in response to detecting the selection of the individual accessory option of the accessory options for the plurality of avatars; 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 - transient computer readable storage medium is described. The non - transient 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 the one or more programs include 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 the plurality of avatars; detect a selection of an individual accessory option; and change the appearance of the avatar to include a 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, in response to detecting the selection of the individual accessory option of the accessory options for the plurality of avatars; 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 temporary computer-readable storage medium is described. This temporary 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 instructions to display an avatar having a plurality of avatar feature parts including avatar hair having a selected avatar hairstyle, and accessory options for the plurality of avatars, to detect the selection of an individual accessory option, and in response to detecting the selection of an individual accessory option of the plurality of avatar accessory options, to display a representation of a first accessory option placed on the avatar according to the determination that the individual accessory option is a first accessory option, to modify the appearance of the avatar to include a representation of an individual accessory option, and to 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 selected avatar hairstyle.

[0029] An electronic device is described. This electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying an avatar having a plurality of avatar feature parts including avatar hair having a selected avatar hairstyle, and accessory options for the plurality of avatars, detecting the selection of an individual accessory option, and in response to detecting the selection of an individual accessory option of the plurality of avatar accessory options, modifying the appearance of the avatar to include a representation of an individual accessory option, including displaying a representation of a first accessory option placed on the avatar according to the determination that the individual accessory option is a first accessory option, and modifying 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 selected avatar hairstyle.

[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 a first accessory option arranged on the avatar according to a 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 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.

[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 changes detected in the pose of a face within the field of view of the one or more cameras via the display device, detecting that the face includes a plurality of detected face features including a first face feature other than the user's tongue while the face is detected within the field of view of the one or more cameras, and detecting movement of the first face feature, and in response to detecting the movement of the first face feature, displaying and changing the position of the avatar's tongue based on the movement of the first face feature according to a determination that the user's tongue meets an individual criterion including the requirement that the user's tongue be visible for the individual criterion to be met, and stopping displaying the avatar's tongue according to a determination that the user's tongue does not meet the individual criterion.

[0032] A non-temporary computer-readable storage medium is described. This non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more cameras, the one or more programs of which display a virtual avatar having multiple avatar feature parts that changes its appearance in response to changes detected in the pose of a face within the field of view of one or more cameras, and includes instructions that, while a face is detected within the field of view of one or more cameras, the face includes multiple detected facial features, including a first facial feature other than the user's tongue, and the movement of the first facial feature is detected, and in response to the detection of the movement of the first facial feature, the avatar displays the avatar's tongue, changes the position of the avatar's tongue based on the movement of the first facial feature, according to a determination that the user's tongue satisfies individual criteria, including the requirement that the user's tongue is visible for the individual criteria to be met, and stops displaying the avatar's tongue according to a determination that the user's tongue does not satisfy the individual criteria.

[0033] A temporary computer-readable storage medium is described. This temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device comprising a display device and one or more cameras, the one or more programs of which display a virtual avatar having multiple avatar feature parts that changes its appearance in response to changes detected in the pose of a face within the field of view of one or more cameras, and includes instructions that, while a face is detected within the field of view of one or more cameras, the face includes multiple detected facial features, including a first facial feature other than the user's tongue, and the movement of the first facial feature is detected, and in response to the detection of the movement of the first facial feature, the avatar displays the avatar's tongue, changes the position of the avatar's tongue based on the movement of the first facial feature, according to a determination that the user's tongue satisfies individual criteria, including the requirement that the user's tongue is visible for the individual criteria to be met, and stops displaying the avatar's tongue according to a determination that the user's tongue does not satisfy the individual criteria.

[0034] An electronic device is described. This electronic device comprises a display device, one or more cameras, one or more processors, and a memory for storing one or more programs configured to be executed by one or more processors, the one or more programs of which display a virtual avatar having multiple avatar feature parts that change appearance in response to changes detected in the pose of a face within the field of view of one or more cameras, and includes instructions that, while a face is detected within the field of view of one or more cameras, the face includes multiple detected facial features, including a first facial feature other than the user's tongue, and the device detects the movement of the first facial feature, and in response to the detection of the movement of the first facial feature, displays the avatar's tongue, changes the position of the avatar's tongue based on the movement of the first facial feature, according to a determination that the user's tongue satisfies individual criteria, including the requirement that the user's tongue is visible for the individual criteria to be met, and stops displaying the avatar's tongue according to a determination that the user's tongue does not satisfy the individual criteria.

[0035] An electronic device is described. This electronic device comprises a display device, one or more cameras, means for displaying a virtual avatar having a plurality of avatar feature parts that changes its appearance in response to changes detected in the pose of a face within the field of view of one or more cameras via the display device, means for detecting the movement of a first facial feature, which includes a plurality of detected facial features, including a first facial feature other than the user's tongue, while the face is detected within the field of view of one or more cameras, means for detecting the movement of the first facial feature, which displays the avatar's tongue and changes the position of the avatar's tongue based on the movement of the first facial feature, in response to the detection of the movement of the first facial feature, in accordance with the determination that the user's tongue satisfies individual criteria, which include the requirement that the user's tongue is visible for the individual criteria to be met, and means for stopping the display of the avatar's tongue in accordance with the determination that the user's tongue does not satisfy the individual criteria.

[0036] The executable instructions for performing these functions are optionally included in non-temporary computer-readable storage media or in other computer program products configured to be executed by one or more processors.

[0037] Therefore, devices will be provided with faster and more efficient methods and interfaces for creating and editing avatars, thereby increasing the effectiveness, efficiency, and user satisfaction of such devices. Such methods and interfaces may complement or replace other methods for creating and editing avatars. [Brief explanation of the drawing]

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

[0039] [Figure 1A] This is a block diagram showing a portable multifunctional device with a touch-sensitive display according to several embodiments.

[0040] [Figure 1B] This is a block diagram illustrating exemplary components for event handling according to several embodiments.

[0041] [Figure 2] This figure shows a portable multifunctional device having a touchscreen according to several embodiments.

[0042] [Figure 3] This is a block diagram of an exemplary multifunctional device comprising a display and a touch-sensitive surface, according to several embodiments.

[0043] [Figure 4A] This figure shows an exemplary user interface for an application menu on a portable multifunction device, according to several embodiments.

[0044] [Figure 4B] This document illustrates an exemplary user interface for a multifunctional device having a touch-sensitive surface separate from the display, according to several embodiments.

[0045] [Figure 5A] This figure shows a personal electronic device according to several embodiments.

[0046] [Figure 5B] This is a block diagram showing a personal electronic device according to several embodiments.

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

[0048] [Figure 7] This is a flowchart illustrating how to navigate between avatars within an application.

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

[0050] [Figure 9] This is a flowchart showing how to display the avatar editing user interface.

[0051] [Figure 10A] This is a flowchart showing how to display the avatar editing user interface. [Figure 10B] This is a flowchart showing how to display the avatar editing user interface.

[0052] [Figure 11A] This is a flowchart showing how to display the avatar editing user interface. [Figure 11B] This is a flowchart showing how to display the avatar editing user interface.

[0053] [Figure 12A] This is a flowchart showing how to display the avatar editing user interface. [Figure 12B] This is a flowchart showing how to display the avatar editing user interface.

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

[0055] [Figure 14A] This flowchart shows how to change the avatar within the avatar navigation user interface. [Figure 14B] This flowchart shows how to change the avatar within the avatar navigation user interface. [Modes for carrying out the invention]

[0056] The following description includes exemplary methods, parameters, etc. However, it should be understood that the purpose of such description is not to limit the scope of this disclosure, but to provide an example of an exemplary embodiment.

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

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

[0059] Figures 6A to 6AN show exemplary user interfaces for navigating between avatars within an application, according to several embodiments. Figure 7 is a flowchart illustrating how to navigate between avatars within an application, according to several embodiments. The user interfaces in Figures 6A to 6AN are used to illustrate the processes described below, including the processes shown in Figure 7.

[0060] Figures 8A to 8CF show exemplary user interfaces for displaying the avatar editing user interface. Figures 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B are flowcharts illustrating how to display the avatar editing user interface according to several embodiments. The user interfaces in Figures 8A to 8CF are used to illustrate the processes described below, including the processes in Figures 9A, 9B, 10A, 10B, 11A, 11B, 12A, and 12B.

[0061] Figures 13A to 13O show exemplary user interfaces for changing avatars within the avatar navigation user interface. Figures 14A and 14B are flowcharts illustrating how to change avatars within the avatar navigation user interface according to several embodiments. The user interfaces in Figures 13A to 13O are used to illustrate the processes described below, including the processes in 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 used solely to distinguish one element from another. For example, without departing from the scope of the various embodiments described, a first touch may be referred to as a second touch, and similarly, a second touch may be referred to as a first touch. Both the first touch and the second touch are touches, but they are not the same touch.

[0063] The terms used in the descriptions of the various embodiments described herein are intended solely to describe specific embodiments and not to limit them. As used in the descriptions of the various embodiments and in the appended claims, the singular forms “a,” “an,” and “the” are also intended to include the plural form unless the context explicitly indicates otherwise. As used herein, the terms “and / or” should also be understood to refer to and include all possible combinations of one or more of the enumerated items relating to the description. The terms “includes,” “including,” “comprises,” and / or “comprising,” as used herein, specify the presence of the described features, integers, steps, actions, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, actions, elements, components, and / or groups thereof.

[0064] The term "if" can be interpreted, at will, depending on the context, as meaning "when," "upon," "in response to determining," or "in response to detecting." Similarly, the phrases "if it is determined" or "if (a stated condition or event) is detected" can be interpreted, at will, depending on the context, as meaning "upon determining," "in response to determining," "upon detecting (the stated condition or event)," or "in response to detecting (the stated condition or event)."

[0065] Embodiments of electronic devices, user interfaces for such devices, and related processes for using such devices are described. In some embodiments, the device is a portable communication device, such as a mobile phone, which also includes other functions such as PDA functionality and / or music player functionality. Exemplary embodiments of portable multifunction devices include, but are not limited to, the iPhone®, iPod Touch®, and iPad® devices of Apple Inc., Cupertino, California. Other portable electronic devices, such as laptop or tablet computers with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads), are also used optionally. It should also be understood that in some embodiments, the device is not a portable communication device but a desktop computer with touch-sensitive surfaces (e.g., touchscreen displays and / or touchpads).

[0066] The following discussion describes electronic devices including displays and touch-sensitive surfaces. However, please understand that electronic devices may optionally include one or more other physical user interface devices, such as a physical keyboard, mouse, and / or joystick.

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

[0068] Various applications running on this device optionally utilize 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, can be optionally adjusted and / or modified on an application-by-application basis and / or within each application. In this way, the device's common physical architecture (such as the touch-sensitive surface) optionally supports a variety of applications with intuitive and transparent user interfaces for the user.

[0069] Now, we turn our attention to embodiments of portable devices equipped with touch-sensitive displays. Figure 1A is a block diagram of a portable multifunction device 100 equipped with a touch-sensitive display system 112, according to some embodiments. The touch-sensitive display 112 may be referred to as a “touchscreen” for convenience, and may be known or referred to as a “touch-sensitive display system.” 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 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. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more contact intensity sensors 165 for detecting the intensity of contact on Device 100 (e.g., a touch-sensitive surface such as the touch-sensitive display system 112 of Device 100). Device 100 optionally includes one or more tactile output generators 167 for generating tactile output on Device 100 (e.g., generating tactile output on a touch-sensitive surface such as the touch-sensitive display system 112 of Device 100 or the touchpad 355 of Device 300). These components optionally communicate via one or more communication buses or signal lines 103.

[0070] As used herein and in the claims, the term “strength” of contact on a touch-sensitive surface refers to the force or pressure (force per unit area) of contact (e.g., finger contact) on the touch-sensitive surface, or a substitute (substitute) for the force or pressure of contact on the touch-sensitive surface. The strength of contact includes at least four distinct values ​​and, more typically, has a range of values ​​including hundreds (e.g., at least 256) distinct values. The strength of contact is optionally determined (or measured) using various methods and various sensors or combinations of sensors. For example, one or more force sensors below or adjacent to the touch-sensitive surface are optionally used to measure the force at various points on the touch-sensitive surface. In some implementations, force measurements from multiple force sensors are combined (e.g., weighted average) to determine an estimate of the force of contact. Similarly, the pressure-sensitive tip of a stylus is optionally used to determine the pressure of the stylus on the touch-sensitive surface. Alternatively, the size and / or change in the contact area detected on the touch-sensing surface, the capacitance and / or change in the touch-sensing surface adjacent to the contact, and / or the resistance and / or change in the touch-sensing surface adjacent to the contact may be optionally used as a substitute for the force or pressure of the contact on the touch-sensing surface. In some implementations, the substitute measurement for the force or pressure of the contact is used directly to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is described in units corresponding to the substitute measurement). In some implementations, the substitute measurement for the force or pressure of the contact is converted to an estimated force or pressure, and the estimated force or pressure is used to determine whether an intensity threshold is exceeded (e.g., the intensity threshold is a pressure threshold measured in units of pressure). By using the intensity of contact as an attribute of user input, it becomes possible to enable user access to additional device functions that may not be otherwise accessible to the user on a device with limited area and reduced size, for displaying affordances (e.g., on a touch-sensitive display) and / or for receiving user input (e.g., via a touch-sensitive display, touch-sensitive surface, or physical / mechanical control unit such as a knob or button).

[0071] As used herein and in the claims, the term “tactile output” means a physical displacement of the device relative to its previous position, a physical displacement of a component of the device (e.g., a touch-sensitive surface) relative to another component of the device (e.g., the housing), or a displacement of a component relative to the center of mass of the device, which will be detected by the user through 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 touch-sensitive user’s surface (e.g., the user’s fingers, palm, or other part of their hand), the tactile output generated by the physical displacement will be interpreted by the user as a tactile sensation corresponding to a perceived change in the physical properties of the device or a component of the device. For example, the movement of a touch-sensitive surface (e.g., a touch-sensitive display or 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-sensitive surface that has been physically pressed (e.g., displaced) by the user’s action. In another embodiment, movement of a touch-sensitive surface may be optionally interpreted or perceived by the user as "roughness" of the touch-sensitive surface, even if there is no change in the smoothness of the touch-sensitive surface. Such user interpretations of touch depend on the user's personal sensory perception, but there are many touch sensory perceptions common to the majority of users. Therefore, when a tactile output is described as corresponding to a user's specific sensory perception (e.g., "up-click," "down-click," "roughness"), unless otherwise stated, the generated tactile output corresponds to the physical displacement of the device or its components that produce the described sensory perception of a typical (or average) user.

[0072] Device 100 is merely one embodiment of a portable multifunction device, and 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 Figure 1A may be implemented as hardware, software, or a combination of both hardware and software, including one or more signal processing circuits and / or application-specific integrated circuits.

[0073] Memory 102 optionally includes high-speed random-access memory and 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 peripheral interface 118 can be used to connect the input and output peripherals of this device to the CPU 120 and memory 102. 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, the peripheral 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 known as electromagnetic signals. The RF circuit 108 converts electrical signals to electromagnetic signals, or electromagnetic signals to electrical signals, and communicates with communication networks and other communication devices via electromagnetic signals. The RF 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 identification module (SIM) card, and memory. The RF circuit 108 optionally communicates wirelessly with other devices with networks such as the Internet, also known as the World Wide Web (WWW), intranets, and / or wireless networks such as cellular telephone networks, wireless local area networks (LANs), and / or metropolitan area networks (MANs). The RF circuit 108 optionally includes well-known circuits for detecting near-field communication (NFC) fields, such as by short-range wireless communication. Wireless communication uses one of several communication standards, protocols, and technologies at will. These communication standards, protocols, and technologies include Global System for Mobile Communications (GSM®), Enhanced Data GSM Environment (EDGE), High-speed Downlink Packet Access (HSDPA), High-speed Uplink Packet Access (HSUPA), Evolution, Data-Only (EV-DO), HSPA, HSPA+, Dual-Cell HSPA (DC-HSPDA), Long-Term Evolution (LTE), and Near Field Communication (NFL).NFC (Network Interface Card), wideband code division multiple access (W-CDMA), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth®, Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi)® (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, and / or IEEE 802.11ac), Voice over Internet Protocol (VoIP), Wi-MAX, protocols for email (e.g., Internet message access protocol (IMAP) and / or post office protocol (POP)), instant messaging (e.g., extensible messaging and presence protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence). Examples of suitable communication protocols include, but are not limited to, Messaging and Presence Leveraging Extensions (SIMPLE), Instant Messaging and Presence Service (IMPS), and / or Short Message Service (SMS), or any other communication protocols not yet developed as of the filing date of this document.

[0076] The audio circuit 110, speaker 111, and microphone 113 provide an audio interface between the user and the device 100. The audio circuit 110 receives audio data from the peripheral 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 the 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 interface 118 for processing. The voice data is optionally retrieved by the peripheral interface 118 from memory 102 and / or RF circuit 108 and / or transmitted to memory 102 and / or RF circuit 108. In some embodiments, the audio circuit 110 further comprises a headset jack (e.g., 212 in Figure 2). The headset jack provides an interface between the audio circuit 110 and a detachable audio input / output peripheral, such as output-only headphones or a headset having both output (e.g., headphones for one or both ears) and input (e.g., a microphone).

[0077] The I / O subsystem 106 connects the input / output peripherals of device 100, such as the touchscreen 112 and other input control devices 116, to the peripheral interface 118. The I / O subsystem 106 optionally includes a display controller 156, an optical 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. One or more input controllers 160 receive / transmit electrical signals to / from the other input control devices 116. The other input control devices 116 optionally include physical buttons (e.g., push buttons, rocker buttons), dials, slider switches, joysticks, click wheels, etc. In some alternative embodiments, the input controller(s) 160 are optionally connected to (or not connected to) one or more of the following: a keyboard, an infrared port, a USB port, and a pointer device such as a mouse. One or more buttons (e.g., 208 in Figure 2) optionally include up / down buttons for adjusting the volume of speaker 111 and / or microphone 113. One or more buttons optionally include push buttons (e.g., 206 in Figure 2).

[0078] 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, U.S. Patent No. 7,657,849 (this patent is incorporated herein by reference in its entirety), the touchscreen 112 may be optionally unlocked by a quick press of a push button, or the process of using gestures on the touchscreen to unlock the device may be optionally initiated. The device 100 may be optionally powered on or off by a longer press of a push button (e.g., 206). One or more functions of the buttons may be optionally user-customizable. The touchscreen 112 is used to implement virtual or soft buttons and one or more soft keyboards.

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

[0081] The touchscreen 112 optionally uses LCD (liquid crystal display) technology, LPD (polymer light-emitting display) technology, or LED (light-emitting diode) technology, but other display technologies are used in other embodiments. The touchscreen 112 and display controller 156 optionally detect touch and any movement or interruption using any of several currently known or future-developed touch sensing technologies, including but not limited to capacitive technology, resistive technology, infrared technology, and surface ultrasonic technology, as well as other proximity sensor arrays or other elements for determining one or more contact points with the touchscreen 112. In exemplary embodiments, projected mutual capacitive sensing technology is used, as seen in the iPhone® and iPod Touch® by Apple Inc. of Cupertino, California.

[0082] The touch-sensitive displays in some embodiments of the touchscreen 112 are optionally similar to the multi-touch-sensitive touchpads 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 2002 / 0015024(A1). These documents are each incorporated herein by reference in their entirety. However, the touchscreen 112 displays visual output from device 100, whereas the touch-sensitive touchpad does not provide visual output.

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

[0084] The touchscreen 112 optionally has a video resolution greater than 100 dpi. In some embodiments, the touchscreen has a video resolution of approximately 160 dpi. The user optionally touches the touchscreen 112 using any suitable object or accessory, such as a stylus or finger. In some embodiments, the user interface is designed to function primarily by finger-based touch and gestures, which may be less precise than stylus-based input due to the larger contact area of ​​the finger on the touchscreen. In some embodiments, the device translates coarse finger-based input into precise pointer / cursor positions or commands to perform user-desired actions.

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

[0086] 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 failure detection circuit, a power converter or inverter, a power status indicator (e.g., a light-emitting diode (LED)), and any other components associated with the generation, management, and distribution of power within the portable device.

[0087] Device 100 also optionally includes one or more optical sensors 164. Figure 1A shows optical sensors connected to an optical sensor controller 158 in the I / O subsystem 106. The optical sensors 164 optionally include charge-coupled devices (CCDs) or complementary metal-oxide semiconductor (CMOS) phototransistors. The optical sensors 164 receive light from the environment projected through one or more lenses and convert that light into data that represents an image. In use with an imaging module 143 (also referred to as a camera module), the optical sensors 164 optionally capture still images or video. In some embodiments, the optical sensors are located on the back of Device 100, opposite the touchscreen display 112 on the front of the device, to enable the touchscreen display as a viewfinder for acquiring still images and / or video. In some embodiments, the optical sensors are located on the front of the device, optionally so that the user can view other video conference participants on the touchscreen display while obtaining an image of the user for video conferencing. In some embodiments, the position of the optical sensor 164 can be changed by the user (for example, by rotating the lens and sensor within the device housing), thereby allowing a single optical sensor 164 to be used with a touchscreen display for both video conferencing and the acquisition of still and / or video images.

[0088] Device 100 also optionally includes one or more depth camera sensors 175. Figure 1A shows a depth camera sensor coupled to a depth camera controller 169 in the I / O subsystem 106. The depth camera sensor 175 receives data from the environment to create a three-dimensional model of objects in the scene (e.g., faces) from a viewpoint (e.g., the depth camera sensor). In some embodiments, the depth camera sensor 175 is optionally used in conjunction with an imaging module 143 (also called a camera module) to determine depth maps of various parts of the image captured by the imaging module 143. In some embodiments, the depth camera sensor is located on the front of Device 100 so that an image of the user containing depth information is optionally acquired for video conferencing to capture a selfie image containing depth map data while the user views other video conference participants on a touchscreen display. In some embodiments, the depth camera sensor 175 is located on the back of the device, or on both the back and front of Device 100. In some embodiments, the position of the depth camera sensor 175 can be changed by the user (for example, by rotating the lens and sensor within the device housing) so that the depth camera sensor 175 is used in conjunction with the touchscreen display for both video conferencing and the acquisition of still and / or video images.

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

[0090] Device 100 also optionally includes one or more contact strength sensors 165. Figure 1A shows a contact strength sensor coupled to a strength sensor controller 159 in the I / O subsystem 106. The contact strength sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electric force sensors, pressure-power sensors, optical force sensors, capacitive touch-sensing surfaces, or other strength sensors (e.g., sensors used to measure the force (or pressure) of contact on a touch-sensing surface). The contact strength sensor 165 receives contact strength information (e.g., pressure information or a substitute for pressure information) from the surrounding environment. In some embodiments, at least one contact strength sensor is located on or near the touch-sensing surface (e.g., touch-sensing display system 112). In some embodiments, at least one contact strength sensor is located on the back of Device 100, opposite the touchscreen display 112 located on the front of Device 100.

[0091] Device 100 also optionally includes one or more proximity sensors 166. Figure 1A shows a proximity sensor 166 coupled to a peripheral interface 118. Alternatively, the proximity sensor 166 is optionally connected to an input controller 160 in the I / O subsystem 106. The proximity sensor 166 may optionally perform actions as described in U.S. Patent Applications No. 11 / 241,839, “Proximity Detector In Handheld Device,” No. 11 / 240,788, “Proximity Detector In Handheld Device,” No. 11 / 620,702, “Using Ambient Light Sensor To Augment Proximity Sensor Output,” No. 11 / 586,862, “Automated Response To And Sensing Of User Activity In Portable Devices,” and No. 11 / 638,251, “Methods And Systems For Automatic Configuration Of Peripherals,” all of which are incorporated herein by reference. In some embodiments, if the multifunction device is positioned near the user's ear (for example, when the user is making a phone call), the proximity sensor turns off and disables the touchscreen 112.

[0092] Device 100 also optionally includes one or more tactile output generators 167. Figure 1A shows a tactile output generator connected to a tactile feedback controller 161 in the I / O subsystem 106. The tactile output generator 167 optionally includes one or more electroacoustic devices, such as a speaker or other audio component, and / or electromechanical devices that convert energy into linear motion, such as a motor, solenoid, electroactive polymer, piezoelectric actuator, electrostatic actuator, or other tactile output generating component (e.g., a component that converts an electrical signal into a tactile output on the device). The contact intensity sensor 165 receives a tactile feedback generation command from the tactile feedback module 133 and generates a tactile output on device 100 that can be sensed by the user of device 100. In some embodiments, at least one tactile output generator is located on or near a touch-sensitive surface (e.g., a touch-sensitive display system 112) and optionally generates a tactile output by moving the touch-sensitive surface vertically (e.g., inward / outward from the surface of device 100) or laterally (e.g., forward / backward in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the back of device 100, opposite the touchscreen display 112 located on the front of device 100.

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

[0094] In some embodiments, the software components stored in memory 102 include an operating system 126, a communications module (or instruction set) 128, a contact / 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. Furthermore, in some embodiments, as shown in Figures 1A and 3, memory 102 (Figure 1A) or memory 370 (Figure 3) stores device / global internal state 157. The device / global internal state 157 includes one or more of the following: active application state, indicating which application is active, if there is an application currently active; display state, indicating which applications, views, or other information occupy different areas of the touchscreen display 112; sensor state, including information obtained from various sensors and input control devices 116 of the device; and position information relating to the location and / or orientation of the device.

[0095] An operating system 126 (for example, an embedded operating system such as Darwin®, RTXC®, LINUX®, UNIX®, OS X®, iOS®, WINDOWS®, or VxWorks®) includes various software components and / or drivers for controlling and managing common system tasks (e.g., memory management, storage device control, power management, etc.) and facilitates communication between various hardware 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®, etc.) are adapted to connect to other devices directly or indirectly through a network (e.g., the Internet, Wi-Fi, etc.). In some embodiments, the external ports are the same as, or similar to, the 30-pin connector used on iPod® (a trademark of Apple Inc.) devices, and / or compatible multi-pin (e.g., 30-pin) connectors.

[0097] The contact / motion module 130 (in cooperation with the display controller 156) optionally detects contact with the touchscreen 112 and other touch-sensitive devices (e.g., a touchpad or physical click wheel). The contact / motion module 130 includes various software components for performing various operations related to contact detection, such as determining whether contact has occurred (e.g., detecting a finger being lowered), determining the intensity of the contact (e.g., the force or pressure of the contact, or a substitute for the force or pressure of the contact), determining whether there is movement of contact and tracking movement across the touch-sensitive surface (e.g., detecting one or more events of a finger being dragged), and determining whether contact has stopped (e.g., detecting a finger being lifted or an interruption of contact). The contact / motion module 130 receives contact data from the touch-sensitive 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 actions can be optionally applied to a single contact (e.g., a single finger contact) or multiple simultaneous contacts (e.g., "multi-touch" / multiple finger contacts). In some embodiments, the contact / motion module 130 and the display controller 156 detect contact on the touchpad.

[0098] In some embodiments, the contact / motion module 130 uses a set of one or more intensity thresholds to determine whether an action has been performed by the user (for example, whether the user has "clicked" on an icon). In some embodiments, at least a subset of the intensity thresholds is determined according to software parameters (for example, the intensity thresholds are not determined by activation thresholds of a particular physical actuator and can be adjusted without changing the physical hardware of device 100). For example, the mouse "click" threshold for a trackpad or touchscreen display can be set to one of a range of predefined thresholds without changing the hardware of the trackpad or touchscreen display. In addition, in some implementations, the user of the device is provided with software settings to adjust one or more of the set of intensity thresholds (for example, 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 selectively detects gesture input from the user. Different gestures on the touch-sensitive surface have different contact patterns (e.g., different movement, timing, and / or intensity of the detected contact). Thus, gestures are selectively detected by detecting a particular contact pattern. For example, detecting a finger tap gesture involves detecting a finger-down event (e.g., at the icon's position) followed by a finger-lift-off event at the same location (or substantially the same location) as the finger-down event. In another embodiment, detecting a finger swipe gesture on the touch-sensitive surface involves detecting a finger-down event followed by one or more finger-drag events, and then a finger-lift-off event.

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

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

[0102] The haptic feedback module 133 includes various software components for generating commands used by a haptic output generator(s) 167 to generate haptic outputs 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 graphics module 132 and provides a soft keyboard for entering text in various applications (e.g., contacts 137, email 140, IM 141, browser 147, and any other applications that require text input).

[0104] The GPS module 135 determines the device's location and provides this information for use in various applications (for example, to the phone 138 for use in location-based phone calls, to the camera 143 as photo / video metadata, and to applications that provide location-based services such as weather widgets, local yellow pages widgets, and map / navigation widgets).

[0105] Application 136 optionally includes the following modules (or instruction sets), or subsets or supersets thereof: ● Contact module 137 (sometimes also called the address book or contact list), ●Telephone module 138, ●Video conferencing module 139, ● Email client module 140, ● Instant messaging (IM) module 141, ●Training support module 142, ● Camera module 143 for still images and / or video images, ●Image management module 144, ●Video player module, ● Music player module, ● Browser module 147, ● Calendar module 148, ● A widget module 149 that optionally includes one or more of the following: 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, and user-created widgets 149-6. ●Widget creation module 150 for creating user-created widget 149-6, ●Search module 151, ● A video and music player module 152 that integrates a video player module and a music player module. ●Memo Module 153, ●Map module 154 and / or ● Online video module 155.

[0106] Examples of other applications 136 that may be optionally stored in memory 102 include other word processing applications, other image editing applications, drawing applications, presentation applications, Java®-enabled applications, encryption, digital rights management, speech recognition, and speech duplication.

[0107] Together with the touchscreen 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the contact module 137 is optionally used to manage an address book or contact list (stored, for example, in the application internal state 192 of the contact module 137 in memory 102 or memory 370), which includes adding names(s) to the address book, removing names(s) from the address book, associating telephone numbers(s) to names, email addresses(s) to names, addresses(s) to names, or other information, associating images to names, categorizing and sorting names, providing telephone numbers or email addresses to initiate and / or facilitate communication by telephone 138, video conferencing module 139, email 140, or IM 141, and so on.

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

[0109] In conjunction with the RF circuit 108, audio circuit 110, speaker 111, microphone 113, touchscreen 112, display controller 156, light sensor 164, light sensor controller 158, contact / motion module 130, graphics module 132, text input module 134, contact module 137, and telephone module 138, the video conferencing module 139 includes executable commands for initiating, conducting, and ending a video conference between the user and one or more other participants, according to user instructions.

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

[0111] In conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, the instant messaging module 141 includes executable commands for entering strings corresponding to instant messages, modifying entered characters, sending corresponding instant messages (for example, using the Short Message Service (SMS) or Multimedia Message Service (MMS) protocol for telephone-based instant messaging, or using XMPP, SIMPLE, or IMPS for internet-based instant messaging), receiving instant messages, and viewing received instant messages. In some embodiments, the transmitted and / or received instant messages optionally include graphics, photographs, audio files, video files, and / or other attachments, such as those supported by MMS and / or Enhanced Messaging Service (EMS). As used herein, “instant messaging” refers to both telephone-based messaging (e.g., messages sent using SMS or MMS) and internet-based messaging (e.g., messages sent using XMPP, SIMPLE, or IMPS).

[0112] In conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and music player module, the training support module 142 includes executable commands for creating training (e.g., with time, distance, and / or calorie consumption targets), communicating with training sensors (sports devices), receiving training sensor data, calibrating sensors used to monitor training, selecting and playing music for training, and displaying, storing, and transmitting training data.

[0113] In conjunction with the touchscreen 112, display controller 156, light sensor(s) 164, light sensor controller 158, contact / motion module 130, graphics module 132, and image management module 144, the camera module 143 includes executable instructions for capturing still images or videos (including video streams) and storing them in memory 102, modifying the characteristics of still images or videos, or deleting still images or videos from memory 102.

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

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

[0116] In conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, email client module 140, and browser module 147, the calendar module 148 includes executable commands that, in accordance with user instructions, create, display, modify, and store calendars and data associated with the calendars (e.g., calendar items, to-do lists, etc.).

[0117] In conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and browser module 147, the widget module 149 is a mini-application that can be optionally downloaded and used by the user (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), 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 conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and browser module 147, the widget creation module 150 is used by the user to optionally create widgets (for example, to convert a user-specified section of a web page into a widget).

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

[0120] In conjunction with the touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, audio circuit 110, speaker 111, RF circuit 108, and browser module 147, the video and music player module 152 includes executable commands that allow the user to download and play recorded music and other sound files stored in one or more file formats such as MP3 or AAC files, as well as executable commands for displaying, presenting, or otherwise playing video (on the touchscreen 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 conjunction with the touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134, the memo module 153 includes executable commands for creating and managing memos, to-do lists, etc., according to user instructions.

[0122] In conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, the map module 154 is optionally used to receive, display, modify, and store maps and map-related data (e.g., driving directions, data on shops and other points of interest at a specific location or nearby, and other location-based data) in accordance with user instructions.

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

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

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

[0126] A set of predefined functions, which are performed exclusively through the touchscreen and / or touchpad, are optional and include navigation between user interfaces. In some embodiments, the touchpad, when touched by the user, 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, a “menu button” is implemented using the touchpad. In some other embodiments, the menu button is a physical push button or other physical input control device instead of a touchpad.

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

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

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

[0130] The event monitor 171 receives event information from the peripheral interface 118. The event information includes information about sub-events (for example, user touch on the touch-sensitive display 112 as part of a multi-touch gesture). The peripheral interface 118 transmits information received from the I / O subsystem 106, or from sensors such as the proximity sensor 166, one or more accelerometers 168, and / or the microphone 113 (through the audio circuit 110). The information received by the peripheral interface 118 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 sends requests to the peripheral interface 118 at predetermined intervals. In response, the peripheral interface 118 transmits event information. In other embodiments, the peripheral interface 118 transmits event information only when a significant event occurs (e.g., receiving an input that exceeds a predetermined noise threshold and / or for a longer period than predetermined).

[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 in one or more views a sub-event occurred when the touch-sensitive display 112 displays two or more views. A view consists of a control unit and other elements that the user can see on the display.

[0134] Another aspect of the user interface associated with an application is a set of views, sometimes referred to herein as application views or user interface windows, in which information is displayed and touch-based gestures occur. The application view (of each application) in which a touch is detected optionally corresponds to a program level within the application's program hierarchy or view hierarchy. For example, the lowest-level view in which a touch is detected is optionally called a 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 initiates a touch-based gesture.

[0135] The hit view determination module 172 receives information related to sub-events of touch-based gestures. When an application has multiple views organized in a hierarchy, the hit view determination module 172 identifies the hit view as the lowest-level view in the hierarchy that should process the sub-events. 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 a 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 that identified it as a hit view.

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

[0137] The event dispatcher module 174 dispatches event information to an event recognizer (e.g., event recognizer 180). In embodiments including an active event recognition unit determination module 173, the event dispatcher module 174 distributes the 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 acquired by the corresponding event receiver 182 in an event queue.

[0138] In some embodiments, the operating system 126 includes an event sorting unit 170. Alternatively, application 136-1 includes an event sorter 170. In yet another embodiment, the event sorting unit 170 is either a standalone module or part of another module stored in memory 102, such as a contact / 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 containing instructions for handling touch events occurring 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 event data 179 received from a data update unit 176, an object update unit 177, a GUI update unit 178, and / or an event sorter 170. The event processing unit 190 optionally uses or calls the data update unit 176, the object update unit 177, or the GUI update unit 178 to update the application's internal state 192. Alternatively, one or more of the application views 191 include one or more corresponding event handlers 190. In some embodiments, one or more of the data update unit 176, object update unit 177, and GUI update unit 178 are included in the corresponding application view 191.

[0140] The corresponding event recognizer 180 receives event information (e.g., event data 179) from the event sorter 170 and identifies events from the event information. The event recognizer 180 includes an event receiving unit 182 and an event comparison unit 184. In some embodiments, the event recognition unit 180 also includes at least a subset of metadata 183 and event distribution commands 188 (optionally including sub-event distribution commands).

[0141] The event receiving unit 182 receives event information from the event sorting unit 170. The event information includes information about sub-events, such as touches or touch movements. Depending on the sub-event, the event information also includes additional information, such as the location of the sub-event. When the sub-event involves touch movements, the event information also optionally includes the speed and direction of the sub-event. In some embodiments, an 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 device's current orientation (also called the device's orientation).

[0142] The event comparison unit 184 compares 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 such as event 1 (187-1), event 2 (187-2), etc. (e.g., a predefined series of sub-events). In some embodiments, sub-events in event 187 include, for example, the start of a touch, the end of a touch, movement of a touch, stopping of a touch, and multiple touches. In one embodiment, the definition for event 1 (187-1) is a double tap on a displayed object. A double tap includes, for example, a first touch (start of touch) on the displayed object during a predetermined stage, a first lift-off (end of touch) during a predetermined stage, a second touch (start of touch) on the displayed object during a predetermined stage, and a second lift-off (end of touch) during a predetermined stage. In another embodiment, event 2(187-2) is defined as a drag operation on a displayed object. This drag operation includes, for example, touching (or contacting) the displayed object between predetermined stages, moving the touch across the touch-sensitive display 112, and lifting off the touch (ending the touch). In some embodiments, the event also includes information about one or more associated event processing units 190.

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

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

[0145] When the corresponding event recognizer 180 determines that a series of sub-events does not match any of the events in the event definition 186, the corresponding event recognizer 180 enters an event impossible, event failed, or event terminated state and thereafter ignores subsequent sub-events of the touch-based gesture. In this situation, if there are any 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 that indicate to the actively involved event recognizers how the event distribution system should perform sub-event distribution. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists that indicate how or are made possible how event recognition units interact with each other. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists that indicate how sub-events are distributed to various levels in the view hierarchy or program hierarchy.

[0147] In some embodiments, each event recognition unit 180 activates an event handler 190 associated with an event when one or more specific sub-events of an event are recognized. In some embodiments, each event recognition unit 180 delivers event information associated with the event to the event handler 190. Activating the event handler 190 is separate from sending (and delaying the sending of) sub-events to the respective hit view. In some embodiments, the event recognition unit 180 sets a flag associated with the recognized event, and the event handler 190 associated with the flag captures the flag and performs a predefined process.

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

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

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

[0151] The preceding discussion regarding the handling of user touch events on a touch-sensitive display also applies to other forms of user input for operating the multifunction device 100 with input devices, but it should be understood that not all of this begins on a touchscreen. For example, mouse movement and mouse button presses, optionally adapted to pressing or holding one or more keyboards, touch movements such as tapping, dragging, and scrolling on a touchpad, pen stylus input, device movement, verbal instructions, detected eye movements, biometric input, and / or any combination thereof may be optionally used as inputs corresponding to sub-events that define the events to be recognized.

[0152] Figure 2 shows a portable multifunctional device 100 having a touchscreen 112 according to several embodiments. The touchscreen optionally displays one or more graphics within a user interface (UI) 200. In this embodiment, and embodiments described later, the user can select one or more graphics by making gestures on the graphics using, for example, one or more fingers 202 (not shown in the figure to an exact scale) or one or more styluses 203 (not shown in the figure to an exact scale). In some embodiments, the selection of one or more graphics occurs when the user disconnects from one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (from left to right, right to left, upward and / or downward), and / or rolling of a finger in contact with the device 100 (from right to left, left to right, upward and / or downward). In some implementations or situations, unintended contact with a graphic does not select the graphic. For example, when the gesture corresponding to selection is a tap, a swipe gesture sweeping over an application icon is optional 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 previously stated, the menu button 204 is optionally used on device 100 to navigate to any application 136 within the set of applications to be executed. Alternatively, in some embodiments, the menu button is implemented as a soft key in the GUI displayed on the touchscreen 112.

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

[0155] Figure 3 is a block diagram of an exemplary multifunctional device having a display and a touch-sensitive surface, according to several embodiments. Device 300 does not have to 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 children's learning toy), game system, or control device (e.g., a home or commercial 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. The communication buses 320 optionally include circuits (sometimes called chipsets) that interconnect and control communication between system components. Device 300 generally includes an input / output (I / O) interface 330, which includes a display 340, which is typically a touchscreen display. The I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, a tactile output generator 357 (similar to the tactile output generator(s) 167 described above with reference to Figure 1A) for generating tactile output on device 300, and a sensor 359 (e.g., an optical sensor, an accelerometer, a proximity sensor, a touch sensor and / or a contact intensity sensor similar to the contact intensity sensor(s) 165 described above with reference to Figure 1A). The 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 memory devices. The 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 similar to, or subsets thereof, the programs, modules, and data structures stored in memory 102 of the portable multifunction device 100 (Figure 1A). Furthermore, memory 370 optionally stores additional programs, modules, and data structures that are not present in memory 102 of the portable multifunction 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 multifunction device 100 (Figure 1A) does not optionally store these modules.

[0156] Each of the elements of Figure 3 identified above is optionally stored in one or more of the aforementioned memory devices. Each of the modules identified above corresponds to an instruction set that performs the function described above. The modules or programs (e.g., instruction sets) identified above do not necessarily have to be implemented as separate software programs, procedures, or modules; therefore, in various embodiments, various subsets of these modules are combined or otherwise reorganized. In some embodiments, memory 370 optionally stores a subset of the modules and data structures identified above. Furthermore, memory 370 optionally stores additional modules and data structures not described above.

[0157] Next, we turn our attention to, for example, an optional embodiment of a user interface to be implemented on a portable multi-functional device 100.

[0158] Figure 4A shows an exemplary user interface for an application menu on a portable multifunction device 100 according to one embodiment. A similar user interface may be optionally implemented on device 300. In some embodiments, the user interface 400 includes the following elements, or subsets or supersets thereof. ● Signal strength indicators (single or multiple) for wireless communication (single or multiple) such as cellular and Wi-Fi signals 402, ●Time 404, ●Bluetooth indicator 405, ●Battery status indicator 406, ●Tray 408 containing icons for frequently used applications such as the following: ○Optionally including an indicator 414 for the number of missed calls or voicemail messages, an icon 416 for the telephone module 138 labeled "Telephone", ○Optionally including an indicator 410 for the number of unread emails, an icon 418 labeled "Mail" for the email client module 140, ○ Icon 420 for browser module 147, labeled as "Browser", and ○ Icon 422 for the video and music player module 152, also known as the iPod (trademark of Apple Inc.) module 152, which is labeled "iPod", and ● Icons for other applications, such as the ones listed below. ○ Icon 424 for IM module 141 labeled "Message", ○ Icon 426 for calendar module 148, labeled "Calendar", ○ Icon 428 for image management module 144, labeled as "Photo" ○ Icon 430 for camera module 143, labeled "Camera" ○ Icon 432 for online video module 155, labeled "online video" ○ Icon 434 for stock price widget 149-2, labeled "Stock Price" ○ Icon 436 for map module 154, labeled as "Map" ○ Icon 438 for weather widget 149-1, labeled "Weather" ○ Icon 440 for alarm clock widget 149-4, labeled as "Clock" ○ Icon 442 for training support module 142, labeled "Training Support" ○ Icon 444 for memo module 153, which is labeled as "Memo", and ○ An icon 446 for a settings application or module, labeled "Settings," which provides access to settings for device 100 and its various applications 136.

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

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

[0161] Some of the following embodiments will be described with reference to input on a touchscreen 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 Figure 4B. In some embodiments, this touch-sensing surface (e.g., 451 in Figure 4B) has a principal axis (e.g., 452 in Figure 4B) corresponding to a principal axis (e.g., 453 in Figure 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 in Figure 4B) at locations corresponding to each location on the display (e.g., 460 corresponds to 468 and 462 corresponds to 470 in Figure 4B). Thus, when the touch-sensitive surface is separate from the display, user input detected by the device on the touch-sensitive surface (e.g., 451 in Figure 4B) (e.g., touches 460 and 462, and their movement) is used by the device to operate the user interface on the display of the multifunction device (e.g., 450 in Figure 4B). It should be understood that a similar method may be optionally used for other user interfaces described herein.

[0162] Furthermore, while the following embodiments primarily refer to and describe finger input (e.g., finger touch, finger tap gesture, finger swipe gesture), it should be understood that in some embodiments, one or more of these finger inputs may be replaced by input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture may optionally be replaced with a mouse click (e.g., instead of touch), and then the cursor may move along the swipe path (e.g., instead of touch movement). As another example, a tap gesture may optionally be replaced with a mouse click while the cursor is positioned over the tap gesture location (e.g., instead of touch detection, followed by cessation of touch detection). 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 finger touch may optionally be used simultaneously.

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

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

[0165] In some embodiments, the device 500 has one or more input mechanisms 506 and 508. The input mechanisms 506 and 508, if included, can be physical. Examples of physical input mechanisms include push buttons and rotatable mechanisms. In some embodiments, the device 500 has one or more attachment mechanisms. Such attachment mechanisms, if included, enable the device 500 to be attached to, for example, a hat, eyewear, earrings, necklace, shirt, jacket, bracelet, watch band, chain, trousers, belt, shoes, wallet, backpack, etc. These attachment mechanisms enable the device 500 to be worn by a user.

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

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

[0168] The memory 518 of the personal electronic device 500 may include one or more non-temporary computer-readable storage media for storing computer-executable instructions, which, when executed by one or more computer processors 516, can cause the computer processors to execute techniques described below, including processes 700, 900, 1000, 1100, 1200, and 1400 (Figures 7, 9A, 9B, 10A, 10B, 11A, 11B, 12A, 12B, 14A, and 14B). The computer-readable storage media can be any medium capable of tangibly containing or storing computer-executable instructions for use by or in connection with an instruction execution system, apparatus, or device. In some examples, the storage medium is a temporary computer-readable storage medium. In some examples, the storage medium is a non-temporary computer-readable storage medium. Non-temporary computer-readable storage media 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, CDs, DVDs, or optical disks based on Blu-ray® technology, and persistent solid-state memory such as flash and solid-state drives. The personal electronic device 500 is not limited to the components and configurations shown in Figure 5B, and may include other or additional components in multiple configurations.

[0169] As used herein, the term “affordance” refers to user-interactive graphical user interface objects that are optionally displayed on the display screens of devices 100, 300, and / or 500 (Figures 1A, 3, and 5A-5B). For example, images (e.g., icons), buttons, and text (e.g., hyperlinks) each optionally constitute an affordance.

[0170] As used herein, the term “focus selector” refers to an input element that indicates the current portion of the user interface with which the user is interacting. In some implementations, including a cursor or other position marker, when input (e.g., press input) is detected on a touch-sensitive surface (e.g., touchpad 355 in Figure 3, or touch-sensitive surface 451 in Figure 4B), the cursor functions as a “focus selector” while the cursor is over a particular user interface element (e.g., a button, window, slider, or other user interface element), and the particular user interface element is adjusted according to the detected input. In some implementations, including a touchscreen display (e.g., touch-sensitive display system 112 in Figure 1A, or touchscreen 112 in Figure 4A) that enables direct interaction with user interface elements on the touchscreen display, the contact detected on the touchscreen acts as a “focus selector,” so that when input (e.g., press input by touch) is detected at the location of a particular user interface element (e.g., a button, window, slider, or other user interface element) on the touchscreen display, that particular user interface element is adjusted according to the detected input. In some implementations, focus is moved from one area of ​​the user interface to another (for example, by using the tab key or arrow keys to move focus from one button to another) without the movement of a corresponding cursor or touch on the touchscreen display, and in these implementations, the focus selector moves in accordance with the movement of focus between different areas of the user interface. Regardless of the specific form taken by the focus selector, the focus selector is, in general, a user interface element (or touch on the touchscreen display) controlled by the user to communicate the user's intended interaction with the user interface (for example, by indicating to the device the user interface element that the user intends to interact with).For example, while a press input is detected on a touch-sensitive surface (e.g., a touchpad or touchscreen), the position of a focus selector (e.g., a cursor, touch, or selection box) above the corresponding button indicates that the user is attempting to activate the corresponding button (rather than other user interface elements displayed on the device's display).

[0171] As used herein and in the claims, the term “characteristic intensity” of a contact refers to a characteristic of the contact based on one or more intensities of the contact. In some embodiments, the characteristic intensity is based on multiple intensity samples. The characteristic intensity is optionally based on a predetermined number of intensity samples, or on a set of intensity samples collected over predetermined time periods (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) for predetermined events (e.g., after detection of contact, before detection of lift-off of contact, before or after detection of the start of movement of contact, before detection of the end of contact, before or after detection of an increase in contact intensity, and / or before or after detection of a decrease in contact intensity). The characteristic intensity of a contact is optionally based on one or more of the following: the maximum intensity of the contact, the mean value of the contact intensity, the average value of the contact intensity, the top 10% value of the contact intensity, half the maximum intensity of the contact intensity, 90% of the maximum intensity of the contact intensity, etc. In some embodiments, the duration of contact is used to determine characteristic intensity (for example, when characteristic intensity is the average intensity of contact over time). In some embodiments, the characteristic intensity is compared to a set of one or more intensity thresholds to determine whether an action was performed by a user. For example, the set of one or more intensity thresholds optionally includes a first intensity threshold and a second intensity threshold. In this embodiment, a first action is performed as a result of contact with a characteristic intensity that does not exceed the first threshold, a second action is performed as a result of contact with a characteristic intensity that exceeds the first intensity threshold but does not exceed the second intensity threshold, and a third action is performed as a result of contact with a characteristic intensity that exceeds the second threshold. In some embodiments, the comparison between characteristic intensity and one or more thresholds is not used to determine whether to perform the first or second action, but rather to determine whether to perform one or more actions at all (for example, whether to perform each action or refrain from performing each action).

[0172] In some embodiments, a portion of the gesture is identified for the purpose of determining characteristic intensity. For example, the touch-sensitive surface optionally receives a continuous swipe contact that transitions from a starting position to an ending position, where the intensity of the contact increases. In this embodiment, the characteristic intensity of the contact at the ending position is optionally based only on a portion of the continuous swipe contact (e.g., only the portion of the swipe contact at the ending 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 the following: an unweighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some situations, these smoothing algorithms remove small increases or decreases in the intensity of the swipe contact for the purpose of determining characteristic intensity.

[0173] The intensity of contact on the touch-sensitive surface is optionally characterized 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 commonly associated with clicking a physical mouse button or trackpad. 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 physical mouse button or trackpad. In some embodiments, if contact is detected at a characteristic intensity below the light press intensity threshold (for example, above a slight contact detection intensity threshold below which contact is no longer detected), the device moves the focus selector in accordance with the movement of contact on the touch-sensitive surface without performing the 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 diagrams.

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

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

[0177] For the sake of clarity, the description of an action performed in response to a press input associated with a press input intensity threshold, or in response to a gesture involving a press input, is optionally triggered in response to the detection of any of the following: an increase in contact intensity above the press input intensity threshold, an increase in contact intensity from below the hysteresis intensity threshold to above the press input intensity threshold, a decrease in contact intensity below the press input intensity threshold, and / or a decrease in contact intensity below the hysteresis intensity threshold corresponding to the press input intensity threshold. In addition, in embodiments described as being performed in response to the detection of a decrease in contact intensity below the press input intensity threshold, the action is optionally performed in response to the detection of a decrease in contact intensity below a hysteresis intensity threshold corresponding to and lower than the press input intensity threshold.

[0178] Attention is now paid to embodiments of a user interface ("UI") and related processes implemented on an electronic device such as the portable multifunctional device 100, the device 300, or the 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 processes described below, including the process 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, the device 600 also includes a camera 602 that can at least capture data representing a portion of the optical spectrum (e.g., visible light, infrared light, or ultraviolet light). In some embodiments, the camera 602 includes a plurality of image sensors and / or other types of sensors. In some embodiments, in addition to capturing data representing the sensed light, the camera 602 can capture other types of data such as depth data. For example, in some embodiments, the camera 602 also uses techniques based on speckle, time - of - flight, parallax, or focus to capture depth data. The image data captured by the device 600 using the camera 602 includes data corresponding to a portion of the optical spectrum of the scene within the camera's field of view. Also, in some embodiments, the captured image data includes depth data related to the optical data. In some other embodiments, the captured image data includes sufficient data to determine or generate depth data related to a portion of the optical spectrum data. In some embodiments, the device 600 includes one or more features of the device 100, the device 300, or the device 500.

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

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

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

[0185] In Figure 6D, device 600 detects an input 624 that selects an application affordance 620a (for example, a touch input on display 601 at a position corresponding to the application affordance 620a).

[0186] In Figure 6E, in response to detecting input 624, device 600 replaces the application dock 618 and application display area 622 with an avatar splash screen 626 having an exemplary avatar 628. The exemplary avatars include an exemplary customizable avatar 628a and an exemplary non-customizable avatar 628b. In the embodiment shown in Figure 6E, the customizable avatar 628a is placed on top of the non-customizable avatar 628b. In some embodiments, the avatar splash screen 626 includes an animated display of exemplary avatars 628, giving the appearance of exemplary avatars that move and change their facial expressions and interact with each other (e.g., appear to be talking to each other, winking, laughing, smiling, etc.). In some embodiments, device 600 displays the avatar splash screen 626 only when an application affordance 620a is first selected or when a customizable avatar has not been created. In some embodiments, when the avatar splash screen 626 is not displayed, the device 600 optionally displays an avatar selection interface, such as a reduced avatar selection interface 668 (see Figure 6L and the corresponding description below).

[0187] In some embodiments, the virtual avatar is a graphically renderable representation of the user (e.g., a graphic representation of the user). In some embodiments, the virtual avatar is non-photorealistic (e.g., cartoonish). In some embodiments, the virtual avatar includes an avatar face having one or more avatar feature parts (e.g., avatar facial features). In some embodiments, the avatar feature parts 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 the avatar feature parts (e.g., affects the graphic representation of the features).

[0188] In some embodiments, the user can manipulate the characteristics or features of the virtual avatar using camera sensors (e.g., camera module 143, light sensor 164) and optionally depth sensors (e.g., depth camera sensor 175). When the user's physical characteristics (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 characteristics and position. In some embodiments, the change in the user's physical characteristics and position represents various facial expressions, emotions, context, tone, or other nonverbal communication. In some embodiments, the electronic device modifies the displayed image of the virtual avatar to represent these facial expressions, emotions, context, tone, or other nonverbal communication.

[0189] In some embodiments, a customizable avatar is a virtual avatar that can be selected and customized by the user to achieve a desired appearance (for example, to resemble the user). A customizable avatar typically has the appearance of a human character, rather than being a non-human character such as an anthropomorphic representation of an animal or other non-human object. Furthermore, avatar features can, if desired, be created or modified using an avatar editing user interface (for example, the avatar editing user interface described below with respect to Figures 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, non-customizable avatars can be selected by the user, but are typically not configurable, although their appearance can be modified by face tracking, as described in detail below. Instead, non-customizable avatars are pre-configured and typically do not have user-modifiable feature components. In some embodiments, non-customizable avatars have the appearance of non-human characters, such as anthropomorphic representations of animals or other non-human objects. Non-customizable avatars cannot be created by the user, nor can they be modified to achieve significant changes to the appearance, physical structure, or modeled behavior of non-customizable avatars.

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

[0192] In Figure 6G, device 600 displays an expanded avatar selection interface 634 in response to detecting input 630, which provides an initial set of avatar options that can be selected for the messaging user interface 608 (for example, to send 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 (for example, in response to the device detecting changes in the user's face). An avatar can correspond to an avatar option, which is a static representation of an avatar having the same appearance and characteristics as that avatar, but is not usually animated. An avatar option is typically a selectable representation of an avatar. When an avatar option is selected, the corresponding avatar is often displayed.

[0193] The deployed 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 boundary 642, which in Figure 6G is displayed around the initially selected monkey avatar option 640a. The selected avatar option is represented in the avatar display area 636 as an avatar 645 (for example, avatar 645 is the monkey corresponding to the monkey avatar option 640a). Each avatar option 640 can be selected by tapping an individual avatar option. In response, the device 600 changes the displayed avatar 645 to represent the newly selected avatar option and moves the boundary 642 to the selected avatar option, depending on the selection of one of the avatar options 640. In this way, when device 600 detects the selection of the unicorn avatar option 640b, device 600 displays a boundary 642 around the unicorn avatar option 640b and modifies avatar 645 so that it appears as a unicorn corresponding to the unicorn avatar option 640b.

[0194] The avatar display area 636 also includes a capture affordance 644, which may be selected to capture an image of the avatar 645 for sending to participants in a message conversation (see messaging user interface 603). In some embodiments, the captured image is either a still image or a video recording, depending on the type of gesture detected by the capture affordance 644. For example, if device 600 detects a tap gesture in the capture affordance 644, device 600 captures a still image of the avatar 645 when the tap gesture occurs. If device 600 detects a tap-and-hold gesture in the capture affordance 644, device 600 captures a video recording of the avatar 645 for the duration of the tap-and-hold gesture. 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 video recording) is then inserted into the message creation field 608 and sent to the participants of the message conversation. In some embodiments, the captured image of the avatar 645 is sent 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., rotation and / or translation) of a user's face positioned within the field of view of a camera (e.g., camera 602) and updates the appearance of avatar 645 accordingly based on the detected changes in the user's face (often referred to herein as the “face tracking” function). For example, as shown in Figure 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 in Figure 6H, avatar 645 is displayed with its mouth open, eyes widened, and tilted, reflecting an expression and position similar to that of a user's face positioned within the field of view of camera 602. Such changes to avatar 645 can be captured using capture affordance 644 and optionally sent to participants in a message conversation shown in Figure 6A. Although avatar 645 shown in Figure 6H is a non-customizable avatar, device 600 can modify customizable avatars in a similar manner.

[0196] In the expanded avatar selection interface shown in Figures 6G to 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. However, as shown in Figure 6I, device 600 displays an avatar creation prompt 646 extending from the avatar creation icon 648 to prompt the user to select the avatar creation icon 648. Once the user selects the avatar creation icon 648, device 600 begins the process of creating a new customizable avatar. The created customizable avatar can then 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 Figure 6I) informs the user that by selecting the avatar creation icon 648, they can create a customized avatar that can be added to the expanded avatar selection interface 634 and the library interface 686 in Figure 6U.

[0197] In some embodiments, the avatar creation prompt 646 appears after a slight delay and displays an animation of various customizable avatar examples that appear, such as changing facial expressions. For example, in Figure 6I, the avatar creation prompt 646 displays an exemplary customizable avatar 646a having the appearance of a man wearing a hat and glasses and having a smiling facial expression. In Figure 6J, the avatar creation prompt 646 transitions to displaying an exemplary customizable avatar 646b having the appearance of a woman with black hair parted in the middle and having a fully smiling facial expression.

[0198] In some embodiments, device 600 displays new customizable avatars, such as avatars created after selecting the avatar creation icon 648, and these avatars appear at the end of the set of avatar options 640, not between any two non-customizable avatars, within the avatar options area 638. For example, all newly created customizable avatars may appear at the end of the set of avatars (e.g., after the unicorn avatar option 640b, but not between the unicorn avatar option 640b and the chicken avatar option 640c) or at the beginning of the set of avatars (e.g., after the avatar creation icon 648, or between the avatar creation icon 648 and the monkey avatar option 640a). In this way, all customizable avatars are displayed grouped together and separated (e.g., separated 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 reference to Figures 6A to 6AN.

[0199] In Figure 6J, device 600 detects input 650 (for example, a tap gesture on display 601) at a position corresponding to the avatar creation icon 648.

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

[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 having a reduced avatar selection interface 668, as shown in FIG. 6L. Alternatively, the user can select the cancel affordance 654 to discard the new customized avatar and return to the expanded avatar selection interface 634 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 placed separately 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 Figure 6L, device 600 displays a reduced avatar selection interface 668, which provides a close-up view of the avatar options (e.g., avatar option 640) displayed in the expanded avatar selection interface 634. The reduced avatar selection interface 668 includes a scrollable list 675 (corresponding to avatar option 640) of avatars available for user selection. Device 600 displays the currently selected avatar (e.g., the female avatar 670 in Figure 6L) in the center position within the reduced avatar selection interface 668. If the currently selected avatar is a customizable avatar (e.g., the female avatar 670), device 600 also displays option affordances 674 that can be selected to display an options menu (described below with respect to Figure 6W). Different avatars can be selected in the reduced avatar selection interface 668 by centering the avatars, as described in more detail below.

[0203] In Figure 6L, the reduced avatar selection interface 668 is displayed within the messaging user interface 603 in the location previously occupied by the text suggestion area 614 and the keyboard display area 612. The application dock 618 is optionally displayed below the reduced avatar selection interface 668 and displays selected application affordances 620a indicated by the boundary 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 (for example, as a sticker, an avatar image, or an avatar record).

[0204] Device 600 groups the displayed customized and uncustomized avatars by type and arranges these groups sequentially such that scrolling in one direction provides access to one type of avatar (e.g., uncustomized avatars), and scrolling 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 and non-customizable avatars, in the center of the reduced avatar selection area 668 (for example, 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 Figures 6AE-6AG)). Thus, by scrolling the displayed list of avatars 675 in one direction, the non-customizable avatars are displayed, and by scrolling in the opposite direction, the customizable avatars are displayed. In some embodiments, the list of avatars 675 can be scrolled to display an avatar creation affordance 669 (similar in function to an avatar creation icon 648) located at the end of the customizable avatars opposite the non-customizable avatars, such that the avatar creation affordance 669 is located at one end of the group of customizable avatars and the group of non-customizable avatars is located at the opposite end of the group of customizable avatars. In such embodiments, an avatar creation affordance 669 can be selected to create a new customizable avatar in the same manner as described above with respect to Figures 6I to 6K.

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

[0207] In Figure 6M, device 600 detects a tilted face 673 with lips 673-1 curled downwards, eyebrows 673-2 wrinkled, and eyes 673-3 slightly narrowed, creating a displeased expression. Accordingly, device 600 modifies the displayed avatar (customizable avatar 670) to have the same facial expression (for example, a tilted head with a displeased expression).

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

[0209] As the female avatar 670 is scrolled from its center position in Figure 6M to a position shifted to the left in Figure 6O, device 600 displays an animation of the female avatar 670 transitioning from a 3D face-tracking state in Figure 6M (where the avatar 670 has a pose that matches the pose of face 673) to a static state in Figure 6O (where the avatar 670 has a default pose that is not determined based on the pose of face 673). When displaying the animated transition, device 600 stops modifying the female avatar 670 based on face 673 (however, face 673 can still be optionally tracked by device 600). For example, face 673 still has a grumpy pose in Figures 6N and 6O, but its head is no longer tilted, while the female avatar 670 has a different pose from face 673 in both Figures 6N and 6O.

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

[0211] Furthermore, in Figure 6N, the monkey avatar 671 is displayed slightly off-center because it has moved from a position shifted to the right in Figure 6M towards the center position in Figure 6O. The monkey avatar 671 has a static smiling pose in Figures 6M to 6O.

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

[0213] After the monkey appears in the center of the screen in Figure 6O, device 600 detects the end of input 676 and resumes modifying the centrally positioned avatar (e.g., monkey avatar 671) based on the detected face 673 in Figure 6P. Thus, in Figure 6P, the monkey avatar 671 assumes the grumpy pose of face 673 (for example, device 600 modifies the monkey avatar 671 so that it transitions from a static pose to the pose of face 673).

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

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

[0216] In Figures 6Q and 6R, device 600 detects a lateral gesture 680 (e.g., a swipe or touch-and-drag input on display 601) that moves to the right 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 size (and direction) of the lateral gesture 680, thereby causing the non-customizable robot avatar 678 to scroll away from display 601, the monkey avatar 671 to scroll to a position shifted to the right, and the customizable female avatar 670 to scroll to the center of the display. Since the customizable and non-customizable avatars are grouped as described above, continuing to scroll to the right will cause device 600 to display other customizable avatars (or, optionally, avatar creation affordances 669) but not non-customizable avatars. Non-customizable avatars may be displayed by scrolling to the left, as described above.

[0217] Figures 6Q and 6R also show that, as previously described with respect to Figures 6M to 6P, the avatar scrolls with an animated transition, but does not move in the reverse direction. In Figures 6Q and 6R, as the avatar moves to the right, device 600 animates the transition of the monkey avatar 671 from the face-tracking state in Figure 6P to the static state shown in Figure 6R, with the transient appearance shown in Figure 6Q. For example, in Figure 6P, device 600 modifies 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 Figures 6Q and 6R, device 600 stops modifying the monkey avatar 671 based on face 673 (e.g., face 673 maintains a grumpy expression, but the monkey avatar 671 has a different pose) and displays an animated transition of the monkey avatar 671, transitioning from the pose in Figure 6P to the static appearance in Figure 6R. Figure 6Q shows an intermediate state of the animated transition, with the monkey avatar 671 having a mouth positioned between a grumpy face and a smile, and its eyebrows not furrowed. The female avatar 670 is shifted slightly to the right, moving towards the center position while maintaining a static default smiling pose.

[0218] In Figure 6R, the female avatar 670 is positioned in the center of the reduced avatar selection interface 668 with a static smiling pose. The monkey avatar 671 is positioned 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, although these static poses can differ for each avatar). Face 673 has transitioned to a neutral pose (e.g., a smile without furrowed brows). In Figure 6R, device 600 has not modified the female avatar 670 based on the detected face 673.

[0219] In Figure 6S, device 600 displays a customizable female avatar 670, which has been selected by being positioned in the center of a reduced avatar selection interface 668. In this case as well, since the female avatar 670 is a customizable avatar, device 600 displays the option affordance 674. Device 600 also displays the edit affordance 682, which can be selected to access the avatar library. In some embodiments, device 600 displays the edit affordance 682 regardless of whether the displayed avatar is customizable or not.

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

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

[0222] In Figure 6V, device 600 detects input 690 (e.g., touch input on display 601) to select the female avatar option 670a.

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

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

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

[0226] In Figure 6Z, device 600 displays the avatar editing user interface 694 in response to detecting input 693a or 693b. If device 600 detects input 693a with editing option 692a, device 600 displays the avatar editing user interface 694, which displays the avatar (e.g., avatar 670) corresponding to the avatar option selected in the library interface 686. However, if device 600 detects input 693b with duplication 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 Figure 6Z, device 600 displays the duplicated avatar 695. In some embodiments, the device displays the library interface 686 containing the duplicated avatar option in response to detecting input 693a, rather than displaying the avatar editing user interface.

[0227] The avatar editing user interface 694 is similar to the avatar editing user interface described below with reference to Figures 8A to 8CF. For brevity, the details of editing avatars using the avatar editing user interface 694 will not be repeated.

[0228] In Figure 6AA, device 600 displays a library interface 686 having a duplicate avatar option 695a corresponding to the duplicate avatar 695 (which is modified and displayed based on the selection of different avatar features using the avatar editing user interface 694). After the modified duplicate avatar 695 is saved (for example, by detecting the "Done" selection in the avatar editing user interface 694), device 600 displays the duplicate avatar option 695a in a position next to the selected avatar option from which the duplicate was created (for example, next to avatar option 670a).

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

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

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

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

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

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

[0235] If device 600 detects an upward vertical gesture 699c (for example, a vertical swipe or vertical touch-and-drag gesture on the display 601), device 600 expands the reduced avatar selection interface 668 to display the expanded avatar selection interface 634 as shown in Figure 6AH.

[0236] In Figure 6AH, device 600 displays an expanded avatar selection interface 634, which has a custom male avatar option 688a and a custom female avatar option 670a within the avatar option area 638. The female avatar option 670a is selected, and the female avatar option 670 is displayed in the avatar display area 636. Device 600 also displays option affordances 674 in the avatar display area 638. Device 600 also displays capture affordances 644 that can be selected to record avatar 670 (for example, while it is being modified based on changes detected in the user's face).

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

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

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

[0240] Figure 7 is a flowchart illustrating how to navigate between avatars in an application using an electronic device (e.g., 600) according to several embodiments. Method 700 is performed on a device (e.g., 100, 300, 500, 600) that has a display device and one or more input devices. Some operations of Method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0241] As described below, Method 700 provides an intuitive way to navigate between avatars within an application. This method reduces the cognitive burden on the user when managing avatars, thereby creating a more efficient human-machine interface. In the case of battery-powered computing devices, power is saved and the intervals between battery charges are increased by enabling users to navigate between avatars within an application more quickly and efficiently.

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

[0243] While the avatar navigation user interface (e.g., 668) is displayed, the electronic device detects gestures (e.g., 699a, 699b) directed towards the avatar navigation user interface (e.g., 668) via one or more input devices (e.g., swipe gestures at positions corresponding to the avatar navigation user interface on a touchscreen display) (704).

[0244] The electronic device, upon detecting a gesture (e.g., 699a, 699b) (706), and upon determining that the gesture is in a first direction (e.g., a rightward sideways swipe gesture) (708), displays a first type of avatar (e.g., an avatar modeled to represent a human being rather than a non-human character 670, 688, 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) (710). By displaying the first type of avatar, the device provides the user with visual feedback confirming that input has been received and that the device is now in a state where it can select the first type of avatar. By providing the user with improved visual feedback, the usability of the device is improved, the user-device interface is made more efficient (e.g., by helping the user provide appropriate input when operating / interacting with the device and by reducing user errors), and in addition, the power consumption of the device is reduced and battery life is improved by enabling the user to use the device more quickly and efficiently.

[0245] The electronic device, upon detecting a gesture (e.g., 699a) (706), and determining that the gesture (e.g., 699a) is in a second direction opposite to a first direction (e.g., a leftward horizontal swipe gesture) (714), displays a second type of avatar (e.g., an avatar modeled to represent a non-human character, or a selectable but not configurable avatar) in the avatar navigation user interface (716). By displaying the second type of avatar, the device provides the user with visual feedback confirming that input has been received and that the device is now in a state where the second type of avatar can be selected. By providing the user with improved visual feedback, the device's usability 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 by reducing user errors), and in addition, the device's power consumption is reduced and battery life is improved by enabling the user to use the device more quickly and efficiently.

[0246] According to some embodiments, the electronic device further determines that a gesture is in a first direction (708) and refrains from displaying a second type of avatar (e.g., 645) in the avatar navigation user interface (e.g., 668) (712). The electronic device further determines that a gesture is in a second direction opposite to the first direction (714) and refrains from displaying a first type of avatar (e.g., 670, 688) in the avatar navigation user interface (e.g., 668) (718). By not displaying a particular type of avatar, the electronic device provides the user with visual feedback confirming that 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 usability of the device is improved, the user-device interface is made more efficient (e.g., by helping the user provide appropriate input when operating / interacting with the device and by reducing user errors), and in addition, the power consumption of the device is reduced and battery life is improved by enabling the user to use the device more quickly and efficiently.

[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 a second type of avatar (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 several 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., head, hair, eyes, and lips, as seen in Figures 8A-8BB) that generally correspond to human physical features. For example, such an avatar may include a representation of an individual having various physical human features or characteristics (e.g., an elderly woman with dark skin and long, straight brown hair). Such an avatar may also include a representation of an individual having various non-human features (e.g., decorative extensions, hats, glasses, etc.) (e.g., shown in Figures 8BB-8CF) that are typically associated with a human appearance. In some embodiments, such an avatar does not include anthropomorphic representations, such as stylized animals, stylized robots, or stylized representations of typically inanimate or non-human objects. The appearance of the avatar provides the user with feedback indicating the types of customizable avatar features. By providing users with improved visual feedback, device usability is enhanced, the user-device interface becomes more efficient (for example, by assisting users in providing appropriate input when operating / interacting with the device and reducing user errors), and in addition, power consumption of the device is reduced and battery life is improved by enabling users to use the device more quickly and efficiently.

[0250] According to several embodiments, a second type of avatar (e.g., avatar 645, which is the avatar corresponding to the avatar options shown in Figure 6G) has the appearance of a non-human character (e.g., an avatar modeled to represent a non-human character, including non-human characters that are anthropomorphic constructs (e.g., stylized animals, stylized robots, or stylized objects that are typically inanimate or non-human)). The appearance of the avatar provides the user with feedback indicating the types of avatar characteristics that can be customized. By providing the user with improved visual feedback, the usability of the device is improved, the user-device interface is made more efficient (e.g., by helping the user 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 battery life is improved by enabling the user to use the device more quickly and efficiently.

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

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

[0253] According to some embodiments, the avatar navigation user interface includes a sub-region (e.g., 686) having a plurality of avatars. The plurality of avatars includes a first 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 first type of avatars are separated from the second type of avatars so that when the avatar navigation user interface is displayed and an electronic device detects a user gesture (e.g., a swipe gesture), the device displays or selects an avatar of the first type in the avatar navigation user interface if the gesture is in a first direction, or displays an avatar of the second type if the gesture is in a second direction opposite to the first direction. In some embodiments, this allows the user to immediately select a first or second type of avatar without having to scroll through multiple avatars of the same type to reach a different type of avatar. By visually separating the different types of avatars, feedback is provided to the user indicating that multiple types of avatars are displayed (and available for customization) and informing the user about the types of customizable avatar characteristics. By providing the user with improved visual feedback, the usability of the device is improved, the user-device interface is made more efficient (for example, by helping the user 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 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 one selected from a group of avatars displayed in 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 placed between the group of avatars of the first type and the group of avatars of the second type).

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

[0256] According to some embodiments, a second set of avatars of a second type includes one selected from a plurality of avatars. The electronic device replaces one selected from the plurality of avatars with an avatar of the first type according to a determination that the gesture is of a first direction (for example, 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 one selected from the plurality of avatars with a different avatar of the second type according to a determination that the gesture is of a second direction (for example, the selected avatar (e.g., 645) is replaced with 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 specific type of avatar, the device provides visual feedback to the user confirming that input has been received and that the device is currently in a state where a specific type of avatar can be selected. By replacing the avatar, the electronic device provides visual feedback that the device is no longer in a state where the user can select the replaced avatar. By providing the user with improved visual feedback, the usability of the device is improved, the user-device interface is made more efficient (for example, by helping the user 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 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 the “edit” affordance (not an avatar)). While the avatar navigation user interface is displayed, an electronic device detects a gesture directed to the first affordance via one or more input devices (e.g., a touch gesture on a touchscreen display at a location corresponding to the “edit” affordance or a displayed avatar, or a swipe gesture in a third direction different from the first direction, such as a swipe-up gesture). In response to detecting a gesture directed to 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 the avatar library user interface is displayed, the electronic device detects a gesture directed towards a second affordance (e.g., 648) via one or more input devices (e.g., a touch gesture at a location corresponding to the “new avatar” affordance on a touchscreen display). In response to detecting the gesture directed towards the second affordance, the electronic device displays an avatar editing user interface (e.g., 652). The avatar editing user interface is a user interface for generating a new avatar of a first kind (e.g., editing a new avatar to be added to the avatar library user interface). In some embodiments, the electronic device displays the avatar editing user interface and receives user input for creating a new avatar of the first kind. After the new avatar of the first kind has been created, the device displays the new avatar of the first kind in the avatar library user interface. For example, the new avatar of the first kind is added to the edge of the displayed avatars of the first kind in the avatar library.

[0260] According to some embodiments, an 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 in the position immediately following the last 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 affordances (e.g., “delete” affordances) (e.g., 692c) associated with a function to remove an avatar from the displayed avatar navigation user interface (e.g., delete or hide it). An electronic device detects a gesture directed to the affordance associated with this function (e.g., a touch gesture at a location corresponding to the “delete” affordance on a touchscreen display) via one or more input devices. In response to detecting a gesture directed to the affordance associated with this function, the electronic device removes the avatar from the displayed avatar navigation user interface (e.g., delete or hide it).

[0262] In some embodiments, the avatar navigation user interface is displayed in the 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, avatars can be accessed from the avatar navigation user interface displayed as part of the messaging user interface, thereby ensuring that avatars selected from the avatar navigation user interface are displayed in the messaging user interface for sending messages to participants in the conversation.

[0263] By displaying the avatar navigation user interface within the messaging user interface, users can navigate between avatars without leaving the messaging user interface, thus eliminating the need to provide user input for switching between applications on the electronic device. Reducing the number of required user inputs improves device usability, makes the user-device interface more efficient (for example, by assisting users in providing appropriate input when operating / interacting with the device and reducing user errors), and reduces device power consumption and improves battery life by enabling users to use the device more quickly and efficiently.

[0264] According to some embodiments, an electronic device, upon determining that the avatar navigation user interface does not contain an avatar of a first type, displays an avatar start user interface (e.g., 626) (e.g., avatar splash screen) having an affordance (e.g., 632) (e.g., a "continue" affordance) associated with the creation of a new avatar of a 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 location corresponding to the "continue" affordance on a touchscreen display) directed to an affordance associated with the creation of a new avatar of a first type. In response to detecting a gesture directed to an affordance associated with the creation of a new avatar of a first type, the electronic device displays an avatar edit user interface (e.g., 652, 801). The avatar edit user interface is a user interface for creating a new avatar of a first type (e.g., editing a new avatar to be added to the avatar library user interface).

[0265] In some embodiments, the electronic device, upon determination that the avatar navigation user interface contains an avatar of a first type, displays the avatar of a first type and an affordance (e.g., 682) (e.g., the "edit" affordance) associated with managing one or more features 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., the "edit" affordance). In some embodiments, the electronic device, in response to detecting an affordance selection, displays an avatar library user interface (e.g., 686) containing representations of the avatar of the first type (e.g., 670) and other avatars of the first type (e.g., 688). In some embodiments, the electronic device, in response to detecting a selection of a displayed avatar of the first type, displays an avatar library user interface. In some embodiments, the electronic device displays an avatar editing user interface (e.g., 652, 801) that provides a user interface for editing a first type of avatar in response to detecting an affordance or selection of a first type of displayed avatar.

[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 Figure 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 Figure 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) avatar that transitions from a non-interactive state (e.g., 678 in Figure 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 Figure 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) via a display device, which includes one or more saved (e.g., previously created) avatars of a first type (e.g., 688, 670). The electronic device detects a selection of one of the saved avatars of the first type (e.g., by detecting an directed gesture) (e.g., a touch gesture at a position corresponding to a saved avatar of the first type on a touchscreen display). In response to detecting a selection of one of the saved avatars of the first type (e.g., by detecting an directed gesture), the electronic device displays a menu (e.g., 692) having one or more menu affordances (e.g., "edit" affordance 692a, "duplicate" affordance 692b, or "delete" affordance 692c) associated with one of the edit, duplicate, and delete functions for one of the saved avatars of the first type.

[0268] According to some embodiments, an electronic device detects the selection of a first affordance (e.g., 692b) associated with a duplication function (e.g., by detecting an directed gesture) (e.g., a touch gesture at a location corresponding to the “duplicate” affordance on a touchscreen 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 stored avatars and displays the duplicate version in an avatar editing user interface (e.g., 694) (e.g., after selecting the “duplicate” affordance, the selected avatar is duplicated, and then a duplicate version of the avatar having an avatar feature that matches one of the selected avatar feature parts from the stored avatars is displayed in 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 in a library (e.g., 686). In some embodiments, after a duplicate avatar is saved, it is displayed in the avatar library user interface in a position adjacent to one of the selected saved avatars in the avatar library (for example, immediately next to the duplicated avatar, or the next position in the sequence, which then immediately moves to the position of the duplicated avatar).

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

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

[0271] According to some embodiments, an electronic device (e.g., 600) displays individual avatars of a first or second type (e.g., 670, 671) via a display device (e.g., 601), including displaying individual avatars (e.g., 671 moving across interface 668 in Figures 6M-6O) that move across the avatar navigation user interface according to the size and orientation of detected gestures (e.g., 676). The electronic device displays an animation of an individual avatar transitioning from a non-interactive state with 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 in the user's face) (e.g., 671 in Figure 6O) to an interactive state with an appearance determined based on a detected face (e.g., 673) (e.g., a face detected within the field of view of one or more cameras of the electronic device) (e.g., 671 in Figure 6P) (e.g., a dynamic state where the individual avatar changes in response to changes detected in the user's face), according to the determination that the individual avatar has reached a first position (e.g., a first threshold position determined based on the size and direction of a 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 an interactive state includes gradually changing the facial expression, position, orientation, and / or size of the avatar from a neutral facial expression, position, orientation, and / or size to the facial expression, position, orientation, and / or size of the avatar based on user face / head tracking. The avatar's appearance provides the user with feedback that indicates the avatar's movement in accordance with the size and direction of the user's gestures. By providing the user with improved visual feedback, the device's usability is enhanced, the user-device interface becomes more efficient (for example, by helping the user provide appropriate input when operating / interacting with the device and reducing user errors), and in addition, the device's power consumption is reduced and 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 an interactive state (e.g., 671 in Figure 6P) having an appearance determined based on a detected face (e.g., 673) to a non-interactive state (e.g., 671 in Figure 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 Figure 6Q) (e.g., a second threshold position determined based on the size and orientation of the detected gesture (e.g., a position associated with swiping the individual avatar (e.g., to select a different avatar))) to a non-interactive state having a default appearance. In some embodiments, the animation of an individual avatar transitioning from an interactive state to a non-interactive state includes gradually changing the avatar's facial expression, position, orientation, and / or size from a facial expression, position, orientation, and / or size based on user face / head tracking to the avatar's neutral facial expression, position, orientation, and / or size. By displaying an animation of the avatar transitioning from an interactive state to a non-interactive state, visual feedback of the avatar's non-interactive appearance is provided. By providing the user with improved visual feedback, device usability is improved, the user-device interface is made more efficient (for example, by helping the user provide appropriate input when operating / interacting with the device and reducing user errors), and in addition, power consumption of the device is reduced and battery life is improved by enabling the user to use the device more quickly and efficiently.

[0273] It should be noted that the details of the process described above with respect to Method 700 (for example, Figure 7) can be applied in a similar manner to the methods described below. For example, Method 900 optionally includes one or more characteristics of the various methods described above in relation to Method 700. For example, in some embodiments, the navigation user interface calls a process to create or edit a customizable avatar, which may be implemented according to Method 900 described later with respect to Figure 9. As additional examples, Methods 1000, 1100, 1200, and 1400 optionally include one or more characteristics of the various methods described above in relation to Method 700. For example, in some embodiments, the navigation user interface calls a process to create or edit a customizable avatar, which may be implemented according to the methods described later with respect to Figures 10 to 12. As another example, in some embodiments, the navigation user interface calls a process to change a virtual avatar, which may be implemented according to the methods described later with respect to Figures 14A and 14B. For the sake of brevity, these details will not be repeated below.

[0274] Figures 8A to 8CF show exemplary user interfaces that display an avatar editing user interface according to several embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the processes shown in Figures 9 to 12.

[0275] In Figure 8A, device 600 displays an avatar editing user interface 801 having an avatar display area 803 and an avatar features area 804. The avatar display area 803 is visually distinguished from the avatar features area 804 by, for example, a 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 features area 804 includes the characteristics of the displayed avatar features and the corresponding feature options. The characteristics and feature options of the avatar features correspond to the avatar features currently selected in the avatar feature area 807. In Figure 8A, the device displays an avatar head affordance 809a, positioned directly below avatar 805 and highlighted to indicate that the avatar's head features are currently selected for editing. Since the avatar's head features have been selected for editing, device 600 displays the characteristics and feature options of the avatar feature area corresponding to the avatar's head features in the avatar's feature area 804.

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

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

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

[0279] Device 600 displays avatar feature options to represent options that can be used to modify the characteristics of the currently selected avatar feature. The displayed avatar feature options may 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., avatar features that are not currently selected, such as previously modified avatar features). For example, a change to the characteristics of an avatar's head feature (e.g., skin color selection) can be displayed in the avatar feature option corresponding to the avatar's head feature (e.g., face shape feature option), and optionally in the avatar feature options corresponding to other avatar features, such as hair or eyes. In this example, the device detects a skin color selection and updates the currently displayed avatar feature option (e.g., face shape option) to display the selected skin color. Furthermore, if a different avatar feature (e.g., eyes) is selected, the avatar feature options displayed for the eyes will also include the selected skin color.

[0280] As shown in Figure 8A, since the avatar's head affordance 809a is selected, the device 600 displays the avatar feature part characteristics and feature part options corresponding to the avatar's head features. The displayed avatar feature part characteristics include the skin color characteristic 808 and the face shape characteristic 810 (the avatar's head features may include other avatar feature part characteristics). The skin color characteristic 808 includes a color option 812 that can be selected to change the color of the avatar's head features (e.g., the skin color of avatar 805). If the device detects the selection of a particular color option 812, the device changes the skin color of the currently selected avatar feature part (e.g., the avatar's head in Figure 8A) to match the selected color. In some embodiments, the selection of the skin color option 812 also affects the color of other avatar feature parts, such as facial hair features (e.g., eyebrows, beard, etc.), eye color, or lip color. In the embodiment shown in Figure 8A, the skin color characteristic 808 includes a set of color options 808 that are extended to the first set of color options for other avatar features (see, for example, the hair color characteristic 838 in Figure 8P). In some embodiments, the extended set of color options 808 cannot be scrolled horizontally (but can be scrolled vertically) and does not include any options that can be selected to extend the set of color options (such as the color picker option 886 in Figure 8AX). The face shape characteristic 810 includes face shape options 814 that can be selected to change the face shape of the avatar 805.

[0281] In some embodiments, selected feature options are indicated by a boundary displayed around them. For example, a boundary 818 displayed around face shape option 814a indicates that face shape option 814a is the face shape of the currently selected avatar. Accordingly, avatar 805 with the same face shape (e.g., a round chin) as the selected face shape option 814a is displayed. Conversely, because color option 812 is not selected, avatar 805 and face shape option 814 are displayed without skin color (e.g., default skin color or a pre-selected skin color).

[0282] In some embodiments, each displayed avatar feature is visually distinguished from the features of other adjacent avatar feature areas. In some embodiments, avatar feature areas are visually distinguished by individual headers for the avatar feature area features. For example, in Figure 8A, the skin color feature 808 is visually distinguished from the face shape feature 810 by the face shape header 816. In some embodiments, avatar feature areas are visually distinguished by other indicators (e.g., horizontal lines that extend completely or partially across the width of the display 601).

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

[0284] In Figure 8C, device 600 indicates that color option 812a is selected by displaying a border 824 around the color option 812a. Device 600 also modifies the avatar 805 and face shape option 814 to have a skin tone that matches the selected color option 812a. In addition, device 600 displays a skin tone slider 822, which can be adjusted in a similar manner to that described later with respect to the hair color slider 856 (see Figures 8W-8AC). Slider 822 is used to adjust the gradient of the selected color option 812a. In some embodiments, the gradient can represent various properties of the selected color option (e.g., skin tone option 812a), such as shading, saturation, lightness, midtones, highlights, warmth, or hue. In some embodiments, a particular property is determined based on the selected skin tone. For example, in some embodiments, if a lighter skin tone is selected, the property adjusted using the slider is shading, while if a darker skin tone is selected, the property adjusted using the slider is saturation. In response to detecting adjustments to the shading of the selected color option (e.g., selected color option 812a), device 600 changes the skin color of the avatar (e.g., avatar 805), all feature part options that display skin color (e.g., face shape option 814), and all avatar feature parts that are affected by skin color.

[0285] In some embodiments, the selected skin tone influences the color or color properties (e.g., base color, hue, brightness, shading, saturation, midtones, highlights, warmth, undertones, etc.) of other avatar features (e.g., hair, lips, etc.). For example, the avatar's hair or facial hair (e.g., eyebrows or beard) may have a lighter shade determined based on the selected skin tone. For instance, darker skin tones produce darker lighter hair (e.g., brown or black lighter shades), while lighter skin tones produce lighter lighter hair (e.g., blonde or reddish lighter shades). These lighter shades can influence the colors applied to specific avatar features, as described in more detail below. Similarly, the avatar's lip color may have a lighter shade based on the selected skin tone. For example, the avatar's lip color may have a color based on the selected skin tone, and optionally, a different color such as red or pink. In some embodiments, the different color is combined with the skin tone to an amount determined based on the adjustment settings of the color slider 822. For example, adjusting slider 822 in one direction increases the values ​​of the different colors that make up the avatar's lip color (e.g., the amount of red or pink in the avatar's lip color), while adjusting slider 822 in the other direction decreases the values ​​of the different colors that make up the avatar's lip color.

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

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

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

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

[0290] In some embodiments, individual avatar feature affordances 809 can be selected by a tap gesture on the individual avatar feature affordance 809, or by a swipe gesture on the avatar feature area 807 (or, optionally, by a swipe gesture at any position on the avatar display area 803 other than avatar 805). In such embodiments, a swipe gesture can scroll the avatar feature area 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 after the scroll is complete (including highlighting the affordance).

[0291] As shown in Figure 8H, device 600 updates the avatar display area 803 by highlighting the avatar's hair affordance 809b and displaying the avatar feature affordance 809 shifted to the left so 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 Figure 8G), and the avatar's lip affordance 809d is now displayed at the right edge of the display 601.

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

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

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

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

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

[0297] In some embodiments, feature options include zoom-in (e.g., magnified) displays of individual avatar feature parts corresponding to the feature option. In such feature options, close-up displays of avatar feature parts are usually useful to show enough detail to distinguish different avatar feature options. For example, in Figure 8R, device 600 displays hair texture options 834 corresponding to hair texture feature 840. Each hair texture option 834 displays a magnified view of the avatar's hair so as to better show the different hair textures represented by the hair texture option 834, so these hair texture options 834 can be easily distinguished by the user. Straight hair texture option 834a displays a magnified view of the avatar's hair having a straight hair texture. Wavy hair texture option 834b displays a magnified view of the avatar's hair having a wavy hair texture. Curly hair texture option 834c displays a magnified view of the avatar's hair having a curly hair texture.

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

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

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

[0301] In some embodiments, when a feature option relating to a specific avatar feature is selected, the feature options displayed for that feature remain unchanged, while feature options relating to other avatar feature characteristics change. For example, in Figures 8S to 8U, when the wavy hair texture option 834b is selected, the hair texture option 834 remains unchanged, but the hairstyle option 836 changes. Similarly, as shown in Figures 8AN to 8AQ (described later), when a different hairstyle option is selected, the hairstyle option remains unchanged, but other feature options (e.g., hair texture options) change (e.g., the hair texture option 834 changed in Figure 8AQ).

[0302] The transitions between the pixie cut hairstyle option 836b and the bob cut hairstyle option 836c are shown in Figures 8S to 8U. Figure 8R shows the pixie cut hairstyle option 836b transitioning from an appearance with a straight hair texture to a different appearance with a selected wavy hair texture in Figures 8S and 8T. This transition involves expanding the displayed pixie cut hairstyle option 836b and optionally the border 846 during the transition from the straight hair texture to the wavy hair texture (see expanded pixie cut hairstyle option 836b' and expanded border 846' in Figure 8S), 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 Figure 8T. Figure 8S shows the bob cut hairstyle option 836c transitioning from an appearance with a straight hair texture to a different appearance with a selected wavy hair texture in Figures 8T and 8U. This transition involves enlarging the displayed bob haircut hairstyle option 836c during the transition from the straight hair texture to the wavy hair texture (see enlarged bob haircut hairstyle option 836c' in Figure 8T), and then shrinking the bob haircut hairstyle option 836c back to its original size in Figure 8U after the transition to the appearance with the wavy hair texture is complete.

[0303] After the transition of the pixie cut hairstyle option 836b is complete (for example, after the enlarged pixie cut hairstyle option 836b' is shown to return to its original size in Figure 8T), the bob cut hairstyle option 836c is transitioned. By combining the display effect of momentarily enlarging the transitioning feature option with the timing of the transition completion in the display order, a ripple effect is created, thereby providing the user with a visual indication that a particular feature option is transitioning based on the user's selection of a different feature option (e.g., a feature option other than the one being transitioned). This visual effect also accurately shows the user that an individual feature option is in the process of transitioning (e.g., when the feature option is enlarged) and provides an indication of when the transition is complete (e.g., when the feature option returns to its original small size). Furthermore, by not displaying a particular feature option that is momentarily enlarged (if any), the user is given visual confirmation that such a feature option was not affected by the selection.

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

[0305] In Figure 8W, device 600 indicates that the hair color option 832a is selected by displaying a border 854 around the hair color option 832a. Device 600 also modifies the avatar's hair 851, eyebrows 827, hair texture option 834, and hairstyle options 836 (e.g., 836b and 836c) to have hair colors that match the selected hair color option 832a. In some embodiments, the color (or color characteristics) of the eyebrows 827 is determined based on a combination of skin tone and hair color. For example, the hue of the eyebrows 827 can be determined based on the selected hair color, and the brightness of the eyebrows 827 can be determined based on the selected skin tone. Transitions of the hair texture option 834 and hairstyle option 836 can be displayed according to the appearance of the ripple effect described above. For example, after the hair texture options 834a to 834c transition sequentially (for example, by instantly scaling), the hairstyle options 836b and 836c transition sequentially (for example, by instantly scaling).

[0306] Device 600 also displays a hair color slider 856 for adjusting the gradient of the selected hair color option 832a. The hair color slider 856 includes a selector affordance 858 (hereinafter also called a thumb) having an initial (e.g., default) position within a gradient region 857 (hereinafter also called a track) that extends between a high gradient value 857a and a low gradient value 857b of the selected color 832a. The selector affordance 858 can be moved within region 857 (e.g., according to the magnitude and direction of input on the slider) to adjust the gradient of the selected color 832a based on the position of the selector affordance 858 within the gradient region 857. When the gradient of the selected hair color option 832a is adjusted, the device changes all avatar features that have the selected color 832a (including the feature options that display such avatar features and the color of the selected hair color option) (e.g., 832a changes in Figures 8AY and 8AZ as the affordance 858 moves within region 857). Unless otherwise specified, if there is a reference in this specification to modify a particular color option, this modification will also apply to the individual features associated with that color option, as well as the feature options that display individual avatar feature parts.

[0307] In some embodiments, the gradient can represent various characteristics of the selected hair color, such as shading, saturation, tone, midtones, highlights, warmth, brightness, or hue. In some embodiments, the gradient can represent a tonal color of the avatar's hair, which is different from the selected color and is optionally based on the avatar's selected skin tone. The gradient of tonal colors can be adjusted by moving the selector affordance 858 within the gradient region 857, thereby ultimately changing the selected hair color and the appearance of the avatar's hair 851. In some embodiments, the tonal color of the hair corresponds to a natural hair color determined based on the selected skin tone. For example, the darker the skin tone, the darker the tonal color of the hair (e.g., brown or black tonal color), while the lighter the skin tone, the lighter the tonal color of the hair (e.g., blonde or reddish tonal color) will be produced. By adjusting the tonal color, not only is a specific color applied, but the brightness of that color is also applied based on the gradient of tonal colors, giving the hair an applied appearance. For example, in the case of an avatar with an unnaturally selected hair color (e.g., purple), adjusting the light color to a low gradient value of 857b will result in a light hair color (e.g., brown) that is slightly natural or not at all natural. This emphasizes the purple hair color, giving the avatar the appearance of having applied a large amount of purple hair dye. Conversely, adjusting the light color to a high gradient value of 857a will emphasize the natural light color of the hair (or other avatar features such as the avatar's eyebrows or lips), giving the avatar the appearance of having 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 light color gradient that the device 600 applies to the selected color 832a.

[0308] In some embodiments, the selector affordance 858 includes a color representing the currently selected gradient of the selected color 832a. At its initial position, the selector affordance 858 has the same color as the selected color 832a when it is first displayed. In other words, the selected color 832a has an initial (e.g., default or pre-selected) color when it is first selected (see, for example, Figure 8V). When the hair color slider 856 is first displayed, the selector affordance 858 has a color corresponding to its initial position in the center of area 857 and the initial color of the selector color 832a. When the position of the selector affordance 858 is moved from its initial position to a different position, the device modifies 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 Figure 8X, moving the selector affordance 858 toward a higher gradient value 857a darkens the selected color 832a, while moving the selector affordance 858 toward a lower gradient value 857b brightens the selected color 832a.

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

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

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

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

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

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

[0315] In Figure 8AC, device 600 indicates that hair color option 832b is selected by displaying a border 862 around the hair color option 832b. Device 600 also modifies the displayed hair color slider 856 by moving the selector affordance 858 to the default position of the selected hair color option 832b and updating the color of the selector affordance 858 to the color corresponding to the selected hair color option 832b. Device 600 also modifies the avatar's hair 851, hair texture option 834, and hairstyle options 836 (e.g., 836b and 836c) to have hair colors that match the selected hair color option 832b. The transitions of the hair texture option 834 and hairstyle option 836 are displayed according to the appearance of the ripple effect described above. For example, after the hair texture options 834a to 834c transition sequentially (for example, by instantly scaling), the hairstyle options 836b and 836c transition sequentially (for example, by instantly scaling).

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

[0317] For example, Figures 8AD to 8AF show the avatar display area 803 and avatar 805 transitioning from an initial fully expanded state in Figure 8AD to a reduced state in Figure 8AF (e.g., reduced) in response to the detection of upward movement of input 864 (e.g., toward the avatar display area 803). Simultaneously with the transition of the avatar display area 803, device 600 displays the avatar's characteristics area 804, which transitions from its initial state in Figure 8AD to a fully expanded state in Figure 8AF (e.g., expanded). Figure 8AE shows the avatar display area 803 (including avatar 805) and the avatar's characteristics area 804, each having separate intermediate states (e.g., size) when the relative position of input 864 is between the position shown in Figure 8AD and the position shown in Figure 8AF. In this way, in response to an upward drag gesture, device 600 continuously shrinks the avatar display area 803 and avatar 805, while simultaneously expanding the avatar's characteristic area 804 (and shifting line 806 upwards), until the avatar display area 803 and avatar 805 reach a reduced state and the avatar's characteristic area 804 reaches a fully expanded state. When the avatar display area 803 and avatar 805 are in a reduced state, device 600 does not further shrink the avatar display area 803 and avatar 805 or further expand the avatar's characteristic area 804 in response to further movement of the upward drag gesture (or subsequent upward drag gestures). Rather, in response to further upward drag gestures (or subsequent upward drag gestures in the avatar's feature area 804 when the avatar display area 803 is reduced in size), device 600 continues to scroll the avatar feature area characteristics and feature area options (revealing additional hairstyle options 836d-836f for the hairstyle feature 842, and moving the hair color feature 838, including the hair color feature 832 and the hair color slider 856, outside the visible portion of the avatar's feature area 804, see Figures 8AG-8AH).

[0318] Conversely, the display 600 expands the avatar display area 803 from a reduced (or intermediate) state in response to detecting downward movement of input 864, as shown in Figures 8AH to 8AJ. Simultaneously with the expansion of the avatar display area 803, the device 600 displays the avatar's feature area 804, which is transitioning from the expanded state in Figure 8AH (or the intermediate state in Figure 8AI) to its original state (e.g., size) in Figure 8AJ (e.g., reduced). By expanding the avatar display area 803 in response to detecting downward movement of input 864, the device 600 enlarges the avatar 805, allowing the user to view the avatar 805 more easily without having to scroll back to the initial position of the avatar feature area characteristics and feature options within the avatar's feature area 804 (see, for example, Figure 8AD).

[0319] Device 600 displays a larger avatar feature area 804 by shrinking the avatar display area 803, thereby displaying additional avatar feature characteristics and / or feature options. The size of the avatar feature characteristics and feature options does not change when the avatar feature area 804 is expanded or contracted. Therefore, when the avatar feature area 804 is expanded, device 600 displays more avatar feature characteristics and / or feature options, and when the avatar feature area 804 is contracted, it displays fewer avatar feature characteristics and / or feature options.

[0320] In some embodiments, when device 600 displays a scroll of avatar feature characteristics (e.g., 808, 810, 838, 840, 842) and their individual feature options (e.g., 812, 814, 832, 834, 836), if a portion of the avatar feature characteristics scrolls and partially extends beyond the upper edge of the avatar feature area 804 (e.g., below line 806), device 600 maintains the display of the individual header for that avatar feature characteristic, which is positioned at the top of the avatar feature area 804. For example, as shown in Figure 8AH, when the hair texture characteristic 840 scrolls and extends beyond the display portion of the avatar feature area 804, device 600 "fixes" the texture header 841 at the top of the avatar feature area 804 (e.g., directly below line 806). The "fixed" texture header 841 remains visible at the top of the avatar's feature area 804 until the entire hair texture feature 840 is scrolled (e.g., upward) out of the avatar's feature area 804, or until the entire hair texture feature 840 is positioned below line 806 (e.g., when there is no portion of the hair texture feature 840 that has scrolled out of the upper edge of the visible portion of the avatar's feature area 804). In some embodiments, the "fixed" header is replaced by the header of the feature of an adjacent avatar feature when it is released from its position below line 806 (see, for example, the hair header 843 in Figure 8AL). In some embodiments, the fixed header (e.g., the texture header 841) is visually distinguished from the feature options within the avatar's feature area 804. For example, as shown in Figure 8AH, the texture header 841 is visually distinguished by lines 806 and 867.

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

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

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

[0324] In Figures 8AP and 8AQ, device 600 detects input 870, which is a touch-and-drag gesture on display 601, and the initial touch corresponds to a position within the avatar's feature area 804. Device 600 detects the downward movement of input 870 and accordingly scrolls the feature area options (e.g., hairstyle options 836a-836i) and hairstyle header 843 downward to display parts of the hair color features 838, hair texture features 840, and hairstyle features 842, as shown in Figure 8AQ.

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

[0326] In Figure 8AS, device 600 detects input 871 (e.g., touch input) on the hair color option 832a. Accordingly, device 600 displays the avatar's hair 851, which is transitioning from the color 832b selected in Figure 8AS to the color 832a selected in Figure 8AT (the color resulting from the changes described above with respect to Figures 8X to 8AA). Since only the selected hair color has changed due to input 871, the avatar's hair 851 is still displayed with the spiked hair hairstyle corresponding to the selected spiked hair hairstyle option 836f and the wavy hair texture corresponding to the selected wavy hair texture option 834b. Furthermore, device 600 displays feature options that include the hair color transitioning from the state shown in Figure 8AS to the state shown in Figure 8AT, respectively. Therefore, device 600 displays hair texture options 834a to 834c and hairstyle options 836b and 836c that are transitioning from the hair color corresponding to hair color option 832b to the hair color corresponding to hair color option 832a. This transition may include the appearance of the aforementioned ripple effect (e.g., a continuous transition with instantaneous expansion of the feature part option during the transition).

[0327] As shown in Figure 8AT, in response to detecting input 871, device 600 also displays the hair color slider 856, which is transitioning to a modified setting maintained for the previously set color 832a in accordance with input 860 as described above with respect to Figures 8X–8AA. This includes displaying the selector affordance 858, which is transitioning to the same modified color as color option 832a and to the same position in the hue area 857 as shown in Figure 8AA just before device 600 detects input 861 for hair color option 832b.

[0328] In Figure 8AU, device 600 detects input 872 (e.g., touch input) at the bob haircut hairstyle option 836c, which is partially displayed outside the screen within the avatar's feature area 804. Accordingly, device 600 displays the avatar's hair 851 transitioning from a spiky hair hairstyle to a bob haircut hairstyle corresponding to the selected bob haircut hairstyle option 836c, as shown in Figure 8AV. Device 600 also displays a slight scroll of the avatar's feature area 804 (and removal of the hair color option 832) to display the full representation of the selected bob haircut hairstyle option 836c, and displays a border 846 around the bob haircut hairstyle option 836c to indicate the selection of this feature option. Since no other feature options are selected by input 872, the avatar's features other than the avatar's hair 851 remain unchanged. Furthermore, because the other displayed feature options do not show enough avatar hair to indicate the selected hairstyle, device 600 does not show any updates to the feature options.

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

[0330] As shown in Figure 8AX, the updated avatar's characteristics area 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 a natural human lip color option, which in some embodiments is determined based on the skin tone selected for the avatar 805. The unnatural lip color option 884 represents a color that in some embodiments is not determined based on the selected skin tone and instead may correspond to lipstick color or other colors that are unnatural for human lips (e.g., blue, green, etc.). The color picker option 886 is a selectable option that displays other color options that can be selected to adjust the avatar's lip color. In some embodiments, the lip color options (e.g., 882, 884, 886) are horizontally scrollable in response to input on the lip color options (e.g., tap, swipe, drag, etc.). Scrolling through the lip color options reveals additional lip color options (e.g., 882, 884, 886). In some embodiments, color picker option 886 is located at the edge of the lip color options and is not displayed until the lip color options are scrolled to the edge.

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

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

[0333] In Figure 8AZ, device 600 detects the selection of the selected lip color option 890 and displays the avatar's lips 828 updated to match the color of the selected lip color option 890. In addition, 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 spillover effect described herein). Device 600 also updates one of the lip color options (represented as lip color option 884a in Figure 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, which can be controlled in a similar manner to the other color sliders described herein. The lip color slider 892 includes a selector affordance 893, which 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 shading, saturation, paleness, midtones, highlights, warmth, or hue. In some embodiments, the gradient can represent a pale color of the avatar's lips, which is different from the selected color and is optionally based on the avatar's selected skin tone. By moving the selector affordance 893 along the lip color slider 892, the pale gradient can be adjusted, thereby ultimately changing the selected lip color and the appearance of the avatar's lips 828. For example, the lighter shade of the selected color can be red, or any other color corresponding to a natural skin tone (e.g., brown), while the selected lip color (e.g., selected lip color 884a) can be any color (including any unnatural color). By adjusting the lighter shade, not only is a specific color applied to the lips, but the brightness of that color is also applied based on the lighter shade's gradient, giving the avatar's lips an appearance. For example, in the case of an avatar with an unnatural selected lip color (e.g., green), adjusting the lighter shade to a low gradient value 892b will result in a lighter lip color (e.g., red) that is slightly natural or not at all natural. This emphasizes the green lip color, giving the avatar the appearance of wearing a lot of green lipstick or having lips of an unnatural color. Conversely, adjusting the lighter shade to a high gradient value 892a will emphasize the lighter shade of the lips, giving the avatar the appearance of wearing a small amount of green lipstick. By adjusting the position of the selector affordance 893 along the slider, the user can adjust the light gradient that device 600 applies to the selected color 884a.

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

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

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

[0338] In some embodiments, device 600 displays feature options to represent possible appearances of an avatar (e.g., avatar 805) when individual feature options are selected. However, in some embodiments, device 600 displays feature options in a way that does not fully represent possible appearances of an avatar when individual feature options are selected. For example, device 600 can display a feature option that has a representation of an avatar feature in which part of an individual avatar feature is omitted. By omitting part of an individual avatar feature from the feature option, other avatar feature parts within the feature option that would be obscured if the omitted part were displayed are shown, but the possible appearances of the avatar when the feature option is selected are not fully represented. For example, in Figure 8BB, device 600 displays an earring option 8104 that has a representation of the avatar's hair (e.g., avatar hair 851), but with part of the avatar's hair omitted so that a representation of the avatar's ears and, in some cases, an earring is displayed. To display the various selectable earring options without obstruction, a portion of the avatar's hair is omitted from earring option 8104. However, because the currently selected avatar hairstyle (e.g., indicated by avatar hair 851) covers the avatar's ears (and, if any, the selected avatar earrings), earring option 8104 does not represent the possible appearance of avatar 805 when the earring option is selected. Therefore, in some embodiments, certain avatar feature options do not affect parts of other avatar features when they are selected. For example, an avatar accessory option corresponding to a nose ring does not result in any changes to other avatar features such as the avatar's hair (e.g., adjustments to the shape of the feature resulting from the resulting arrangement of the avatar features on the avatar). Similarly, an avatar accessory option corresponding to a particular earring does not result in any changes to the avatar's hair.

[0339] Device 600 also displays hat characteristics 8106 with hat options 8108. The displayed hat options 8108 represent possible changes to avatar 805 when an individual hat option is selected. In addition to modifying avatar 805 to include the selected hat, such possible changes include reshaping the avatar's hair 851 and lighting effects such as casting shadows on the avatar's face. In Figure 8BB, the reshaping of the avatar's hair 851 is represented in hat options 8108b-8108c (other hat options 8108d and 8108e are shown in Figure 8BW and described in more detail below). For example, beanie hat option 8108b displays a hat with a hat line 8118 narrower than the displayed width of the hair in hat option 8108b (e.g., at the point where the hat (with an open bottom) touches the hair on the avatar's head). Therefore, device 600 displays hair with a reshaped (e.g., modified) appearance in which the avatar's hair is pressed into the hat line 8118, providing a realistic appearance as if the hat is compressing the avatar's hair to fit the avatar's head. This effect is also displayed in the cowboy hat option 8108c and the headband hat option 8108d. In the headband hat option 8108d, device 600 displays a headband that compresses the avatar's hair, and in this case too, the avatar's hair is reshaped to fit the hat line of the headband, but the avatar's hair is compressed at the hat line of the headband (e.g., pressed under the headband), and also provides the appearance as if it is sticking out from the top of the headband. Avatar 805 when the headband hat option 8108d is selected is shown in Figures 8BY to 8CB and will be described in more detail below.

[0340] Hat option 8108c also indicates possible changes to avatar 805 that are expected to display lighting effects on avatar 805. For example, the cowboy hat hat option 8108c includes a large hat (e.g., a cowboy hat) that casts a shadow 8120 on the avatar's forehead under the brim of the cowboy hat. Device 600 indicates by displaying option 8108c with the cowboy hat, reshaped hairline, and shadow 8120 that selecting hat option 8108c brings about changes to avatar 805 that include displaying the cowboy hat on avatar 805, reshaping the hairline of the avatar's hair 851, and casting a shadow on the avatar's forehead (see, for example, Figure 8CC showing avatar 805 with a baseball cap, reshaped hair, and a shadow over its forehead).

[0341] Figures 8BC and 8BD show device 600 detecting an input 8122 (e.g., touch input) for selecting earring option 8104c and indicating the selection of earring option 8104c by moving a boundary 8114 from earring option 8104a to earring option 8104c. Figure 8BD also shows device 600 displaying avatar 805 having avatar earrings 8125 corresponding to the earrings displayed in the selected earring option 8104c. Earrings 8125 are partially obscured by avatar hair 851 positioned above the avatar's ear. However, earrings 8125 are large enough to extend beyond the avatar hair 851 and are partially visible, protruding from beneath the avatar hair 851. Device 600 also updates hat option 8108 to display the earrings applied to the displayed hat option 8108, as shown in Figure 8BD.

[0342] In some embodiments, device 600 detects the user's face positioned within the field of view of a camera (e.g., camera 602) and modifies the appearance of avatar 805 (e.g., continuously) based on changes detected in the user's face (e.g., changes in the user's facial pose, changes in the relative position of facial features, etc.). For example, in Figure 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 Figure 8BE, device 600 (e.g., using camera 602) detects that the user has tilted their head to the side, winked, and smiled. Device 600 modifies avatar 805 in real time to reflect the detected user movements.

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

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

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

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

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

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

[0349] In Figure 8BN, device 600 detects the end of input 8132 (e.g., lift-off of touch-and-drag gesture) and displays the avatar's characteristic area 804, which has hat characteristics 8106 including hat options 8108a-8108d and glasses characteristics 8110 including glasses options 8112a-8112d. The avatar 805 remains displayed in its magnified appearance. Device 600 displays a border 8134 around glasses option 8112a to indicate that glasses option 8112a (no glasses) is currently selected. Device 600 displays glasses options 8112b-8112d with lighting effects (e.g., light reflection on the lenses of the glasses 8136).

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

[0351] For example, as shown in Figures 8BO and 8BP, device 600 adjusts (e.g., modifies) the position of a portion 8145 of the avatar's hair 851 in response to detecting the selection of the avatar's glasses option 8112b, and displays the avatar's glasses 8140 placed on the face of avatar 805. The modified portion 8145 of the avatar's hair 851 is displayed pushed to the side to accommodate the frame 8140-1 of the avatar's glasses 8140. Furthermore, device 600 generates a lighting effect on avatar 805 by displaying a shadow 8147 next to the modified portion 8145 of the avatar's hair 851 and a shadow 8142 below the avatar's eyes. Device 600 displays shadows 8142 and 8147 to show the lighting effect caused by adding the avatar's glasses 8140 to avatar 805. The lighting effect can also be demonstrated by displaying a reflection 8150 (similar to the reflection of light 8136) on the lens of the avatar's glasses 8140 (see Figure 8BT). In some embodiments, the lighting effect is determined based on the positions of the avatar 805, glasses 8140, and hair 851 relative to a light source (e.g., a light source detected within the field of view of camera 602 or a pseudo-light source).

[0352] Furthermore, in response to detecting input 8138, device 600 expands the eyeglasses characteristics 8110 to display color options for both the frame 8140-1 and the lenses 8140-2 of the selected eyeglasses 8140 (see, for example, Figure 8BT). Frame color options 894 include a variety of color options that can be selected to change the color of the eyeglasses frame 8140-1 (including expandable color picker options 894-2). Lens color options 896 include a variety of color options that can be selected to change the appearance of the lenses 8140-2 of the eyeglasses 8140. In some embodiments, frame color options 894 include an expandable color picker option (e.g., 894-2). In some embodiments, lens color options 896 do not include an expandable color picker option.

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

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

[0355] The lens color slider 899 is similar to the other color sliders described herein and can be used to adjust the color (or other aspect) of the spectacle lens 8140-2 according to the various slider embodiments described herein. In the embodiment shown in Figure 8BT, the lens color slider 899 controls the opacity of the lens 8140-2 (however, it can be used to control or adjust the color ...

Claims

1. It is a method, In an electronic device having a display device, An avatar having multiple avatar feature parts, including avatar hair having the selected avatar hairstyle, The display of an avatar editing user interface via the display device includes displaying multiple avatar accessory options, Detecting the selection of individual accessory options, In response to detecting the selection of an individual accessory option from among the plurality of avatar accessory options, the appearance of the avatar is modified to include a representation of the individual accessory option, in accordance with the determination that the individual accessory option is a first accessory option. Displaying the representation of the first accessory option placed on the avatar, This includes, while maintaining the selected avatar hairstyle, changing the shape of the first displayed portion of the avatar hair based on the position of the representation of the first accessory option on the avatar, In response to detecting the selection of a third hairstyle option, The appearance of the avatar is changed from having the selected avatar hairstyle to having the third hairstyle option, The appearance of the representation of the individual accessory option is changed based on the third hairstyle option, The aforementioned individual accessory option is an avatar hat. A method for changing the appearance of the representation of the individual accessory option, which includes changing the size of the representation of the avatar hat based on the size of the third hairstyle option, while maintaining the size of the avatar.

2. In accordance with the determination that the aforementioned individual accessory option is a second accessory option, Displaying the representation of the second accessory option placed on the avatar, The method according to claim 1, further comprising: maintaining the selected avatar hairstyle, and modifying the shape of a second displayed portion of the avatar hair, based on the position of the representation of the second accessory option on the avatar, such that the shape of the second displayed portion of the avatar hair is different from the modified shape of the first displayed portion of the avatar hair.

3. After displaying the representation of the first accessory option placed on the avatar, the selection of a second individual accessory option is detected. The method according to claim 1 or 2, further comprising detecting the selection of the second individual accessory option from among the plurality of avatar accessory options, and modifying the appearance of the avatar to include a representation of the second individual accessory option and the representation of the individual accessory option.

4. Displaying multiple avatar hairstyle options via the aforementioned display device, Detecting the selection of a second hairstyle option, In response to detecting the selection of the second hairstyle option, the appearance of the avatar is changed from having the third hairstyle option to having the second hairstyle option, In accordance with the determination that the individual accessory option is of the first type of accessory option, the avatar hair having the second hairstyle option modified in the first way based on the representation of the individual accessory option is displayed. The method according to any one of claims 1 to 3, further comprising: displaying the avatar hair having the second hairstyle option modified in a second way based on the representation of the individual accessory option, according to the determination that the individual accessory option is a second type of accessory option.

5. The method according to claim 4, further comprising displaying the avatar hair having the second hairstyle option without modification, in accordance with the determination that the individual accessory option is of a third type.

6. The method according to any one of claims 1 to 5, wherein the appearance of the representation of the individual accessory option is based on one or more characteristics of the avatar hair.

7. The method according to any one of claims 1 to 6, wherein changing the appearance of the representation of the individual accessory option further includes changing the size of the hat line of the representation of the avatar hat based on the size of the third hairstyle option.

8. The first accessory option described above is avatar glasses, The method according to any one of claims 1 to 7, wherein changing the shape of the first displayed portion of the avatar hair is to display the first displayed portion of the avatar hair, which is positioned so as not to obstruct at least a portion of the avatar glasses.

9. The first accessory option described above is avatar glasses, Displaying the representation of the first accessory option placed on the avatar, To display the reflection at the lens portion of the aforementioned avatar glasses, The method according to any one of claims 1 to 8, comprising displaying a representation of the shadow cast by the representation of the avatar glasses displayed on at least a portion of the avatar.

10. The first accessory option mentioned above is an avatar hat. Displaying the representation of the first accessory option placed on the avatar includes displaying the avatar hat placed on a portion of the avatar's hair. The method according to any one of claims 1 to 9, wherein changing the shape of the first displayed portion of the avatar hairstyle includes displaying the avatar hair having a compressed appearance at a position adjacent to the hat line of the avatar hat, and expanding so that the avatar hair spreads out from the position adjacent to the hat line of the avatar hat.

11. The method according to claim 10, further comprising detecting the selection of a second avatar hat from among the plurality of avatar accessory options, replacing the representation of the avatar hat with the representation of the second avatar hat while maintaining the hat line and the shape of the first displayed portion of the avatar hair having the compressed appearance at the position adjacent to the hat line and expanding so that the avatar hair spreads out from the position adjacent to the hat line.

12. The avatar hair moves according to a simulated physical response of the avatar hair to the movement of the avatar based on a physical model. The method according to any one of claims 1 to 11, wherein the pseudo-physical response of the avatar hair to the movement of the avatar based on the physical model changes when the first accessory option is an avatar hat.

13. Displaying the representation of the first accessory option placed on the avatar, The method according to any one of claims 1 to 12, comprising displaying a representation of one or more shadows cast by the first accessory option or the avatar hair.

14. The first accessory option mentioned above is an avatar earring. The method according to any one of claims 1 to 13, wherein the avatar earring moves according to a physical model.

15. The method according to any one of claims 1 to 14, wherein changing the size of the representation of the avatar hat based on the size of the third hairstyle option is to maintain the hat line of the representation of the avatar hat in the same position relative to the avatar.

16. The avatar hair moves according to a simulated physical response of the avatar hair to the movement of the avatar based on a physical model, and the magnitude and direction of the movement of the avatar hair are determined based on the physical model and the magnitude and direction of the input detected while the physical model is being used to simulate the physical response of the avatar hair to the movement of the avatar. The method according to any one of claims 1 to 15, wherein the pseudo-physical response of the avatar hair to the movement of the avatar based on the physical model changes when the first accessory option is an avatar hat, and the magnitude and direction of the movement of the avatar hair is based on the physical model and the magnitude and direction of input detected while the avatar hat is selected for the avatar and while the physical model is used to simulate the physical response of the avatar hair to the movement of the avatar.

17. A computer program that causes a computer to perform the method according to any one of claims 1 to 16.

18. It is an electronic device, A memory for storing the computer program described in claim 17, An electronic device comprising one or more processors capable of executing the computer program stored in the memory, wherein the electronic device is configured to communicate with a display device.

19. An electronic device configured to communicate with a display device, An electronic device comprising means for performing the method according to any one of claims 1 to 16.

Images