CN117321556A - Head portrait sticker editor user interface - Google Patents

Abstract

The present disclosure relates generally to user interfaces for editing avatars. In some embodiments, a user interface is shown for editing a avatar and avatar decal. In some embodiments, a user interface is shown for editing the color of one or more avatar characteristics.

Description

Head portrait sticker editor user interface

Cross Reference to Related Applications

U.S. provisional application Ser. No. 63/191,864, entitled "AVATAR STICKER EDITOR USER INTERFACES," filed on day 21, 5, 2021; and U.S. patent application Ser. No. 17/746,179, filed 5/17/2022, entitled "AVATAR STICKER EDITOR USER INTERFACES". The contents of these patent applications are hereby incorporated by reference in their entirety.

Technical Field

The present disclosure relates generally to computer user interfaces, and more particularly, to techniques for editing an avatar.

Background

The avatar is used to represent a user of the electronic device. The avatar may represent the user's appearance, or may represent an idealized or fully fictional avatar of the user. The avatar may then be associated with the user such that the appearance of the avatar encourages others to contact or associate it with the user. The avatars can be created and edited for such uses, including multimedia communications.

Disclosure of Invention

However, some techniques for editing an avatar using an electronic device are often cumbersome and inefficient. For example, some prior art techniques use complex and time consuming user interfaces that may include multiple key presses or keystrokes. The prior art requires more time than is necessary, which results in wasted user time and device energy. This latter consideration is particularly important in battery-powered devices.

Thus, the present technology provides faster, more efficient methods and interfaces for editing avatar stickers for electronic devices. Such methods and interfaces optionally supplement or replace other methods for editing the avatar. Such methods and interfaces reduce the cognitive burden on the user and result in a more efficient human-machine interface. For battery-powered computing devices, such methods and interfaces conserve power and increase the time interval between battery charges.

According to some embodiments, a method is described. The method is performed at a computer system in communication with a display generation component and one or more input devices. The method comprises the following steps: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including the representation of the virtual avatar; and in response to detecting the input, updating a display of the avatar editing interface, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a non-transitory computer readable storage medium is described. A non-transitory computer readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including the representation of the virtual avatar; and in response to detecting the input, updating a display of the avatar editing interface, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a transitory computer readable storage medium is described. A transitory computer-readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including the representation of the virtual avatar; and in response to detecting the input, updating a display of the avatar editing interface, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a computer system is described. The computer system includes: a display generation section; one or more input devices; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including the representation of the virtual avatar; and in response to detecting the input, updating a display of the avatar editing interface, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a computer system is described. The computer system includes: a display generation section; one or more input devices; means for displaying a communication request interface via the display generating means, the communication request interface comprising: means for displaying an avatar editing interface via the display generating means, the avatar editing interface comprising: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; means for detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while the avatar editing interface including the representation of the virtual avatar is displayed; and means for updating a display of the avatar editing interface in response to detecting the input, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a computer program product is described. The computer program product includes one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs including instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar; detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including the representation of the virtual avatar; and in response to detecting the input, updating a display of the avatar editing interface, the display comprising: displaying a representation of the first avatar decal having an appearance that includes the second avatar characteristics and is based on the appearance of the virtual avatar; and displaying a second set of one or more graphical interface objects that can be selected for modifying one or more of the avatar characteristics visible in the first avatar decal.

According to some embodiments, a method is described. The method is performed at a computer system in communication with a display generation component and one or more input devices. The method comprises the following steps: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and in response to detecting the input directed to the first graphical interface object, updating the display of the avatar editing interface, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

According to some embodiments, a non-transitory computer readable storage medium is described. The non-transitory computer readable storage medium stores one or more programs configured to be executed by one or more processors of a computer system in communication with the display generation component and the one or more input devices, the one or more programs comprising instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and in response to detecting the input directed to the first graphical interface object, updating the display of the avatar editing interface, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

According to some embodiments, a transitory computer readable storage medium is described. The transitory computer-readable storage medium stores one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and in response to detecting the input directed to the first graphical interface object, updating the display of the avatar editing interface, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

According to some embodiments, a computer system is described. The computer system includes: a display generation section; one or more input devices; one or more processors; and a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and in response to detecting the input directed to the first graphical interface object, updating the display of the avatar editing interface, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

According to some embodiments, a computer system is described. The computer system includes: a display generation section; one or more input devices; means for displaying an avatar editing interface via the display generating means, the avatar editing interface comprising: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; means for detecting input directed to the first graphical interface object via the one or more input devices while the avatar editing interface is displayed; and means for updating a display of the avatar editing interface in response to detecting the input directed to the first graphical interface object, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

According to some embodiments, a computer program product is described. The computer program product includes one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs including instructions for: displaying, via the display generating section, an avatar editing interface including: a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color; a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options includes a respective representation of the first portrait feature, and the first portrait feature includes the first color; detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and in response to detecting the input directed to the first graphical interface object, updating the display of the avatar editing interface, the updating comprising: displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color; displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first portrait feature, and the first portrait feature includes the first color and the second color; and displaying controls for modifying the second color that were not displayed prior to detecting the input.

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

Thus, a faster, more efficient method and interface for editing avatars is provided for devices, thereby improving the effectiveness, efficiency, and user satisfaction of such devices. Such methods and interfaces may supplement or replace other methods for editing the avatar.

Drawings

For a better understanding of the various described embodiments, reference should be made to the following detailed description taken in conjunction with the following drawings, in which like reference numerals designate corresponding parts throughout the several views.

Fig. 1A is a block diagram illustrating a portable multifunction device with a touch-sensitive display in accordance with some embodiments.

FIG. 1B is a block diagram illustrating exemplary components for event processing according to some embodiments.

Fig. 2 illustrates a portable multifunction device with a touch screen in accordance with some embodiments.

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

Fig. 4A illustrates an exemplary user interface for a menu of applications on a portable multifunction device in accordance with some embodiments.

Fig. 4B illustrates an exemplary user interface for a multifunction device with a touch-sensitive surface separate from a display in accordance with some embodiments.

Fig. 5A illustrates a personal electronic device according to some embodiments.

Fig. 5B is a block diagram illustrating a personal electronic device, according to some embodiments.

Fig. 6A-6R illustrate an exemplary user interface for editing a avatar decal, according to some embodiments.

Fig. 7 is a flow chart illustrating a method for editing an avatar decal, according to some embodiments.

Fig. 8A-8U illustrate an exemplary user interface for editing an avatar according to some embodiments.

Fig. 9 is a flow chart illustrating a method for editing an avatar according to some embodiments.

Detailed Description

The following description sets forth exemplary methods, parameters, and the like. However, it should be recognized that such description is not intended as a limitation on the scope of the present disclosure, but is instead provided as a description of exemplary embodiments.

There is a need for an electronic device that provides an efficient method and interface for editing an avatar. Such techniques may reduce the cognitive burden on users editing the avatars, thereby improving productivity. Further, such techniques may reduce processor power and battery power that would otherwise be wasted on redundant user inputs.

Description of an exemplary apparatus for performing techniques for editing an avatar is provided below in fig. 1A-1B, 2, 3, 4A-4B, and 5A-5B. Fig. 6A to 6R illustrate exemplary user interfaces for editing a avatar decal. Fig. 7 is a flow chart illustrating a method of editing an avatar decal, according to some embodiments. The user interfaces in fig. 6A-6R are used to illustrate the processes described below, including the process in fig. 7. Fig. 8A to 8U illustrate exemplary user interfaces for editing an avatar. Fig. 9 is a flow chart illustrating a method of editing an avatar according to some embodiments. The user interfaces in fig. 8A-8U are used to illustrate the processes described below, including the process in fig. 9.

Furthermore, in a method described herein in which one or more steps are dependent on one or more conditions having been met, it should be understood that the method may be repeated in multiple iterations such that during the iteration, all conditions that determine steps in the method have been met in different iterations of the method. For example, if a method requires performing a first step (if a condition is met) and performing a second step (if a condition is not met), one of ordinary skill will know that the stated steps are repeated until both the condition and the condition are not met (not sequentially). Thus, a method described as having one or more steps depending on one or more conditions having been met may be rewritten as a method that repeats until each of the conditions described in the method have been met. However, this does not require the system or computer-readable medium to claim that the system or computer-readable medium contains instructions for performing the contingent operation based on the satisfaction of the corresponding condition or conditions, and thus is able to determine whether the contingent situation has been met without explicitly repeating the steps of the method until all conditions to decide on steps in the method have been met. It will also be appreciated by those of ordinary skill in the art that, similar to a method with optional steps, a system or computer readable storage medium may repeat the steps of the method as many times as necessary to ensure that all optional steps have been performed.

Although the following description uses the terms "first," "second," etc. to describe various elements, these elements should not be limited by the terms. In some embodiments, these terms are used to distinguish one element from another element. For example, a first touch may be named a second touch and similarly a second touch may be named a first touch without departing from the scope of the various described embodiments. In some embodiments, the first touch and the second touch are two separate references to the same touch. In some implementations, both the first touch and the second touch are touches, but they are not the same touch.

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

Depending on the context, the term "if" is optionally interpreted to mean "when..once..once.," in response to determining "or" in response to detecting ". Similarly, the phrase "if determined … …" or "if detected [ stated condition or event ]" is optionally interpreted to mean "upon determining … …" or "in response to determining … …" or "upon detecting [ stated condition or event ]" or "in response to detecting [ stated condition or event ]" depending on the context.

Embodiments of electronic devices, user interfaces for such devices, and associated processes for using such devices are described herein. In some embodiments, the device is a portable communication device, such as a mobile phone, that also includes other functions, such as PDA and/or music player functions. Exemplary embodiments of the portable multifunction device include, but are not limited to, those from Apple inc (Cupertino, california)Device, iPod->Device, and->An apparatus. Other portable electronic devices, such as a laptop or tablet computer having a touch-sensitive surface (e.g., a touch screen display and/or a touchpad), are optionally used. It should also be appreciated that in some embodiments, the device is not a portable communication device, but rather a desktop computer having a touch-sensitive surface (e.g., a touch screen display and/or a touch pad). In some embodiments, the electronic device is a computer system in communication (e.g., via wireless communication, via wired communication) with the display generation component. The display generation component is configured to provide visual output, such as display via a CRT display, display via an LED display, or display via image projection. In some embodiments, the display generating component is integrated with the computer system. In some embodiments, the display generating component is separate from the computer system. As used herein, "displaying" content includes displaying content (e.g., video data rendered or decoded by display controller 156) by transmitting data (e.g., image data or video data) to an integrated or external display generation component via a wired or wireless connection to visually produce the content.

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

The device typically supports various applications such as one or more of the following: drawing applications, presentation applications, word processing applications, website creation applications, disk editing applications, spreadsheet applications, gaming applications, telephony applications, video conferencing applications, email applications, instant messaging applications, fitness 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.

The various applications executing on the device optionally use at least one generic physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface and corresponding information displayed on the device are optionally adjusted and/or changed for different applications and/or within the respective applications. In this way, the common physical architecture of the devices (such as the touch-sensitive surface) optionally supports various applications with a user interface that is intuitive and transparent to the user.

Attention is now directed to embodiments of a portable device having a touch sensitive display. Fig. 1A is a block diagram illustrating a portable multifunction device 100 with a touch-sensitive display system 112 in accordance with some embodiments. Touch-sensitive display 112 is sometimes referred to as a "touch screen" for convenience and is sometimes referred to or referred to as a "touch-sensitive display system". Device 100 includes memory 102 (which optionally includes one or more computer-readable storage media), memory controller 122, one or more processing units (CPUs) 120, peripheral interface 118, RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, input/output (I/O) subsystem 106, other input control devices 116, and external ports 124. The apparatus 100 optionally includes one or more optical sensors 164. The device 100 optionally includes one or more contact intensity sensors 165 for detecting the intensity of a contact on the device 100 (e.g., a touch-sensitive surface, such as the touch-sensitive display system 112 of the device 100). Device 100 optionally includes one or more tactile output generators 167 (e.g., generating tactile output on a touch-sensitive surface, such as touch-sensitive display system 112 of device 100 or touch pad 355 of device 300) for generating tactile output on device 100. These components optionally communicate via one or more communication buses or signal lines 103.

As used in this specification and the claims, the term "intensity" of a contact on a touch-sensitive surface refers to the force or pressure (force per unit area) of the contact on the touch-sensitive surface (e.g., finger contact), or to an alternative to the force or pressure of the contact on the touch-sensitive surface (surrogate). The intensity of the contact has a range of values that includes at least four different values and more typically includes hundreds of different values (e.g., at least 256). The intensity of the 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 forces at different points on the touch-sensitive surface. In some implementations, force measurements from multiple force sensors are combined (e.g., weighted average) to determine an estimated contact force. Similarly, the pressure sensitive tip of the stylus is optionally used to determine the pressure of the stylus on the touch sensitive surface. Alternatively, the size of the contact area and/or its variation detected on the touch-sensitive surface, the capacitance of the touch-sensitive surface and/or its variation in the vicinity of the contact and/or the resistance of the touch-sensitive surface and/or its variation in the vicinity of the contact are optionally used as a substitute for the force or pressure of the contact on the touch-sensitive surface. In some implementations, surrogate measurements of contact force or pressure are directly used to determine whether an intensity threshold has been exceeded (e.g., the intensity threshold is described in units corresponding to surrogate measurements). In some implementations, surrogate measurements of contact force or pressure are converted to an estimated force or pressure, and the estimated force or pressure is used to determine whether an intensity threshold has been exceeded (e.g., the intensity threshold is a pressure threshold measured in units of pressure). The intensity of the contact is used as an attribute of the user input, allowing the user to access additional device functions that are not otherwise accessible to the user on a smaller sized device of limited real estate for displaying affordances and/or receiving user input (e.g., via a touch-sensitive display, touch-sensitive surface, or physical/mechanical control, such as a knob or button).

As used in this specification and in the claims, the term "haptic output" refers to a physical displacement of a device relative to a previous position of the device, a physical displacement of a component of the device (e.g., a touch sensitive surface) relative to another component of the device (e.g., a housing), or a displacement of a component relative to a centroid of the device, to be detected by a user with a user's feel. For example, in the case where the device or component of the device is in contact with a touch-sensitive surface of the user (e.g., a finger, palm, or other portion of the user's hand), the haptic output generated by the physical displacement will be interpreted by the user as a haptic sensation corresponding to a perceived change in a physical characteristic of the device or component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or touch pad) is optionally interpreted by a user as a "press click" or "click-down" of a physically actuated button. In some cases, the user will feel a tactile sensation, such as "press click" or "click down", even when the physical actuation button associated with the touch-sensitive surface that is physically pressed (e.g., displaced) by the user's movement is not moved. As another example, movement of the touch-sensitive surface may optionally be interpreted or sensed by a user as "roughness" of the touch-sensitive surface, even when the smoothness of the touch-sensitive surface is unchanged. While such interpretation of touches by a user will be limited by the user's individualized sensory perception, many sensory perceptions of touches are common to most users. Thus, when a haptic output is described as corresponding to a particular sensory perception of a user (e.g., "click down," "click up," "roughness"), unless stated otherwise, the haptic output generated corresponds to a physical displacement of the device or component thereof that would generate that sensory perception of a typical (or ordinary) user.

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

Memory 102 optionally includes high-speed random access memory, and also optionally includes non-volatile memory, such as one or more 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.

Peripheral interface 118 may be used to couple input and output peripherals of the device to CPU 120 and memory 102. The one or more processors 120 run or execute various software programs, such as computer programs (e.g., including instructions), and/or sets of instructions stored in the memory 102 to perform various functions of the device 100 and process data. In some embodiments, 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.

The RF (radio frequency) circuit 108 receives and transmits RF signals, also referred to as electromagnetic signals. RF circuitry 108 converts/converts electrical signals to/from electromagnetic signals and communicates with communication networks and other communication devices via electromagnetic signals. RF circuitry 108 optionally includes well known circuitry for performing these functions including, but not limited to, an antenna system, an RF transceiver, one or more amplifiers, a tuner, one or more oscillators, a digital signal processor, a codec chipset, a Subscriber Identity Module (SIM) card, memory, and the like. RF circuitry 108 optionally communicates via wireless communication 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), and other devices. The RF circuitry 108 optionally includes well-known circuitry for detecting a Near Field Communication (NFC) field, such as by a short-range communication radio. Wireless communications optionally use any of a variety of communication standards, protocols, and technologies including, but not limited to, global system for mobile communications (GSM), enhanced Data GSM Environment (EDGE), high Speed Downlink Packet Access (HSDPA), high Speed Uplink Packet Access (HSUPA), evolution, pure data (EV-DO), HSPA, hspa+, dual cell HSPA (DC-HSPDA), long Term Evolution (LTE), near Field Communications (NFC), wideband code division multiple access (W-CDMA), code Division Multiple Access (CDMA), time Division Multiple Access (TDMA), 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.11 ac), voice over internet protocol (VoIP), wi-MAX, email protocols (e.g., internet Message Access Protocol (IMAP) and/or Post Office Protocol (POP)), messages (e.g., extensible message handling and presence protocol (XMPP), protocols for instant messaging and presence using extended session initiation protocol (sime), messages and presence (IMPS), instant messaging and/or SMS (SMS) protocols, or any other suitable communications protocol not yet developed herein.

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

I/O subsystem 106 couples input/output peripheral devices on device 100, such as touch screen 112 and other input control devices 116, to peripheral interface 118. The I/O subsystem 106 optionally includes a display controller 156, an optical sensor controller 158, a depth camera controller 169, an intensity sensor controller 159, a haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive electrical signals from/transmit electrical signals to other input control devices 116. The other input control devices 116 optionally include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, joysticks, click-type dials, and the like. In some implementations, the input controller 160 is optionally coupled to (or not coupled to) any of the following: a keyboard, an infrared port, a USB port, and a pointing device such as a mouse. One or more buttons (e.g., 208 in fig. 2) optionally include an up/down button for volume control of speaker 111 and/or microphone 113. The one or more buttons optionally include a push button (e.g., 206 in fig. 2). In some embodiments, the electronic device is a computer system that communicates (e.g., via wireless communication, via wired communication) with one or more input devices. In some implementations, the one or more input devices include a touch-sensitive surface (e.g., a touch pad as part of a touch-sensitive display). In some implementations, the one or more input devices include one or more camera sensors (e.g., one or more optical sensors 164 and/or one or more depth camera sensors 175) such as for tracking gestures (e.g., hand gestures and/or air gestures) of the user as input. In some embodiments, one or more input devices are integrated with the computer system. In some embodiments, one or more input devices are separate from the computer system. In some embodiments, the air gesture is a gesture that is detected without the user touching an input element that is part of the device (or independent of an input element that is part of the device) and based on a detected movement of a portion of the user's body through the air, including a movement of the user's body relative to an absolute reference (e.g., an angle of the user's arm relative to the ground or a distance of the user's hand relative to the ground), a movement relative to another portion of the user's body (e.g., a movement of the user's hand relative to the user's shoulder, a movement of the user's hand relative to the other hand of the user, and/or a movement of the user's finger relative to the other finger or part of the hand of the user), and/or an absolute movement of a portion of the user's body (e.g., a flick gesture that includes a predetermined amount and/or speed of movement of the hand in a predetermined gesture that includes a predetermined gesture of the hand, or a shake gesture that includes a predetermined speed or amount of rotation of a portion of the user's body).

The quick press of the push button optionally disengages the lock of the touch screen 112 or optionally begins the process of unlocking the device using gestures on the touch screen, as described in U.S. patent application 11/322,549 (i.e., U.S. patent No. 7,657,849), entitled "Unlocking a Device by Performing Gestures on an Unlock Image," filed on even 23, 12/2005, which is hereby incorporated by reference in its entirety. Long presses of a button (e.g., 206) optionally cause the device 100 to power on or off. The function of the one or more buttons is optionally customizable by the user. Touch screen 112 is used to implement virtual buttons or soft buttons and one or more soft keyboards.

The touch sensitive display 112 provides an input interface and an output interface between the device and the user. The display controller 156 receives electrical signals from and/or transmits electrical signals to the touch screen 112. Touch screen 112 displays visual output to a user. Visual output optionally includes graphics, text, icons, video, and any combination thereof (collectively, "graphics"). In some embodiments, some or all of the visual output optionally corresponds to a user interface object.

Touch screen 112 has a touch-sensitive surface, sensor, or set of sensors that receives input from a user based on haptic and/or tactile contact. Touch screen 112 and display controller 156 (along with any associated modules and/or sets of instructions in memory 102) detect contact (and any movement or interruption of the contact) on touch screen 112 and translate the detected contact into interactions with user interface objects (e.g., one or more soft keys, icons, web pages, or images) displayed on touch screen 112. In an exemplary embodiment, the point of contact between touch screen 112 and the user corresponds to a user's finger.

Touch screen 112 optionally uses LCD (liquid crystal display) technology, LPD (light emitting polymer display) technology, or LED (light emitting diode) technology, but in other embodiments other display technologies are used. Touch screen 112 and display controller 156 optionally detect contact and any movement or interruption thereof using any of a variety of touch sensing technologies now known or later developed, including but not limited to capacitive, resistive, infrared, and surface acoustic wave technologies, as well as other proximity sensor arrays or other elements for determining one or more points of contact with touch screen 112. In an exemplary embodiment, a projected mutual capacitance sensing technique is used, such as that described in the text from Apple inc (Cupertino, california) And iPod->Techniques used in the above.

The touch sensitive display in some implementations of touch screen 112 is optionally similar to the multi-touch sensitive touch pad described in the following U.S. patents: 6,323,846 (Westerman et al), 6,570,557 (Westerman et al) and/or 6,677,932 (Westerman et al) and/or U.S. patent publication 2002/0015024A1, each of which is hereby incorporated by reference in its entirety. However, touch screen 112 displays visual output from device 100, while touch sensitive touchpads do not provide visual output.

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

Touch screen 112 optionally has a video resolution in excess of 100 dpi. In some implementations, the touch screen has a video resolution of about 160 dpi. The user optionally uses any suitable object or appendage, such as a stylus, finger, or the like, to make contact with touch screen 112. In some embodiments, the user interface is designed to work primarily through finger-based contact and gestures, which may not be as accurate as stylus-based input due to the large contact area of the finger on the touch screen. In some embodiments, the device translates the finger-based coarse input into a precise pointer/cursor position or command for performing the action desired by the user.

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

The apparatus 100 also includes a power system 162 for powering the various components. The power system 162 optionally includes a power management system, one or more power sources (e.g., battery, alternating Current (AC)), a recharging system, a power failure detection circuit, a power converter or inverter, a power status indicator (e.g., light Emitting Diode (LED)), and any other components associated with the generation, management, and distribution of power in the portable device.

The apparatus 100 optionally further comprises one or more optical sensors 164. FIG. 1A shows an optical sensor coupled to an optical sensor controller 158 in the I/O subsystem 106. The optical sensor 164 optionally includes a Charge Coupled Device (CCD) or a Complementary Metal Oxide Semiconductor (CMOS) phototransistor. The optical sensor 164 receives light projected through one or more lenses from the environment and converts the light into data representing an image. In conjunction with imaging module 143 (also called a camera module), optical sensor 164 optionally captures still images or video. In some embodiments, the optical sensor is located on the rear of the device 100, opposite the touch screen display 112 on the front of the device, so that the touch screen display can be used as a viewfinder for still image and/or video image acquisition. In some embodiments, the optical sensor is located on the front of the device such that the user's image is optionally acquired for video conferencing while viewing other video conference participants on the touch screen display. In some implementations, the position of the optical sensor 164 may be changed by the user (e.g., by rotating a lens and sensor in the device housing) such that a single optical sensor 164 is used with the touch screen display for both video conferencing and still image and/or video image acquisition.

The device 100 optionally further includes one or more depth camera sensors 175. FIG. 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 (e.g., faces) within the scene from a point of view (e.g., depth camera sensor). In some implementations, in conjunction with the imaging module 143 (also referred to as a camera module), the depth camera sensor 175 is optionally used to determine a depth map of different portions of the image captured by the imaging module 143. In some embodiments, a depth camera sensor is located at the front of the device 100 such that a user image with depth information is optionally acquired for a video conference while the user views other video conference participants on a touch screen display, and a self-photograph with depth map data is captured. In some embodiments, the depth camera sensor 175 is located at the back of the device, or at the back and front of the device 100. In some implementations, the position of the depth camera sensor 175 can be changed by the user (e.g., by rotating a lens and sensor in the device housing) such that the depth camera sensor 175 is used with a touch screen display for both video conferencing and still image and/or video image acquisition.

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

The apparatus 100 optionally further comprises one or more contact intensity sensors 165. FIG. 1A shows a contact intensity sensor coupled to an intensity 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, electrical force sensors, piezoelectric force sensors, optical force sensors, capacitive touch-sensitive surfaces, or other strength sensors (e.g., sensors for measuring force (or pressure) of a contact on a touch-sensitive surface). The contact strength sensor 165 receives contact strength information (e.g., pressure information or a surrogate for pressure information) from the environment. In some implementations, at least one contact intensity sensor is juxtaposed or adjacent to a touch-sensitive surface (e.g., touch-sensitive display system 112). In some embodiments, at least one contact intensity sensor is located on the rear of the device 100, opposite the touch screen display 112 located on the front of the device 100.

The device 100 optionally further includes one or more proximity sensors 166. Fig. 1A shows a proximity sensor 166 coupled to the peripheral interface 118. Alternatively, the proximity sensor 166 is optionally coupled to the input controller 160 in the I/O subsystem 106. The proximity sensor 166 optionally performs as described in the following U.S. patent application nos.: 11/241,839, entitled "Proximity Detector In Handheld Device";11/240,788, entitled "Proximity Detector In Handheld Device";11/620,702, entitled "Using Ambient Light Sensor To Augment Proximity Sensor Output";11/586,862, entitled "Automated Response To And Sensing Of User Activity In Portable Devices"; and 11/638,251, entitled "Methods And Systems For Automatic Configuration Of Peripherals," which are hereby incorporated by reference in their entirety. In some embodiments, the proximity sensor is turned off and the touch screen 112 is disabled when the multifunction device is placed near the user's ear (e.g., when the user is making a telephone call).

The device 100 optionally further comprises one or more tactile output generators 167. FIG. 1A shows a haptic output generator coupled to a haptic feedback controller 161 in the I/O subsystem 106. The tactile output generator 167 optionally includes one or more electroacoustic devices such as speakers or other audio components; and/or electromechanical devices for converting energy into linear motion such as motors, solenoids, electroactive polymers, piezoelectric actuators, electrostatic actuators, or other tactile output generating means (e.g., means for converting an electrical signal into a tactile output on a device). The contact intensity sensor 165 receives haptic feedback generation instructions from the haptic feedback module 133 and generates a haptic output on the device 100 that can be perceived by a user of the device 100. In some embodiments, at least one tactile output generator is juxtaposed or adjacent to a touch-sensitive surface (e.g., touch-sensitive display system 112), and optionally generates tactile output by moving the touch-sensitive surface vertically (e.g., inward/outward of the surface of device 100) or laterally (e.g., backward and forward in the same plane as the surface of device 100). In some embodiments, at least one tactile output generator sensor is located on the rear of the device 100, opposite the touch screen display 112 located on the front of the device 100.

The device 100 optionally further includes one or more accelerometers 168. Fig. 1A shows accelerometer 168 coupled to peripheral interface 118. Alternatively, accelerometer 168 is optionally coupled to input controller 160 in I/O subsystem 106. Accelerometer 168 optionally performs as described in the following U.S. patent publication nos.: 20050190059 under the names "acceletation-based Theft Detection System for Portable Electronic Devices" and 20060017692 under the name "Methods And Apparatuses For Operating A Portable Device Based On An Accelerometer", both of which disclosures are incorporated herein by reference in their entirety. In some implementations, information is displayed in a portrait view or a landscape view on a touch screen display based on analysis of data received from one or more accelerometers. The device 100 optionally includes a magnetometer and a GPS (or GLONASS or other global navigation system) receiver in addition to the accelerometer 168 for obtaining information about the position and orientation (e.g., longitudinal or lateral) of the device 100.

In some embodiments, the software components stored in memory 102 include an operating system 126, a communication 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 program (or instruction set) 136. Furthermore, in some embodiments, memory 102 (fig. 1A) or 370 (fig. 3) stores device/global internal state 157, as shown in fig. 1A and 3. The device/global internal state 157 includes one or more of the following: an active application state indicating which applications (if any) are currently active; display status, indicating what applications, views, or other information occupy various areas of the touch screen display 112; sensor status, including information obtained from the various sensors of the device and the input control device 116; and location information relating to the device location and/or pose.

Operating system 126 (e.g., darwin, RTXC, LINUX, UNIX, OS X, iOS, WINDOWS, or embedded operating systems such as VxWorks) includes various software components and/or drivers for controlling and managing general system tasks (e.g., memory management, storage device control, power management, etc.), and facilitates communication between the various hardware components and software components.

The communication module 128 facilitates communication with other devices through one or more external ports 124 and also includes various software components for processing data received by the RF circuitry 108 and/or the external ports 124. External port 124 (e.g., universal Serial Bus (USB), firewire, etc.) is adapted to be coupled directly to other devices or indirectly via a network (e.g., the internet, wireless LAN, etc.). In some embodiments, the external port is in communication withThe 30-pin connector used on the (Apple inc. Trademark) device is the same or similar and/or compatible with a multi-pin (e.g., 30-pin) connector.

The contact/motion module 130 optionally detects contact with the touch screen 112 (in conjunction with the display controller 156) 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 a contact has occurred (e.g., detecting a finger press event), determining the strength 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 the contact and tracking movement across the touch-sensitive surface (e.g., detecting one or more finger drag events), and determining whether the contact has ceased (e.g., detecting a finger lift event or a contact break). The contact/motion module 130 receives contact data from the touch-sensitive surface. Determining movement of the point of contact optionally includes determining a velocity (magnitude), a speed (magnitude and direction), and/or an acceleration (change in magnitude and/or direction) of the point of contact, the movement of the point of contact being represented by a series of contact data. These operations are optionally applied to single point contacts (e.g., single finger contacts) or simultaneous multi-point 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 touch pad.

In some implementations, the contact/motion module 130 uses a set of one or more intensity thresholds to determine whether an operation has been performed by a user (e.g., to determine whether the user has "clicked" on an icon). In some implementations, at least a subset of the intensity thresholds are determined according to software parameters (e.g., the intensity thresholds are not determined by activation thresholds of particular physical actuators and may be adjusted without changing the physical hardware of the device 100). For example, without changing the touchpad or touch screen display hardware, the mouse "click" threshold of the touchpad or touch screen may be set to any of a wide range of predefined thresholds. Additionally, in some implementations, a user of the device is provided with software settings for adjusting one or more intensity thresholds in a set of intensity thresholds (e.g., by adjusting individual intensity thresholds and/or by adjusting multiple intensity thresholds at once with a system-level click on an "intensity" parameter).

The contact/motion module 130 optionally detects gesture input by the user. Different gestures on the touch-sensitive surface have different contact patterns (e.g., different movements, timings, and/or intensities of the detected contacts). Thus, gestures are optionally detected by detecting a particular contact pattern. For example, detecting a finger tap gesture includes detecting a finger press event, and then detecting a finger lift (lift off) event at the same location (or substantially the same location) as the finger press event (e.g., at the location of an icon). As another example, detecting a finger swipe gesture on the touch-sensitive surface includes detecting a finger-down event, then detecting one or more finger-dragging events, and then detecting a finger-up (lift-off) event.

Graphics module 132 includes various known software components for rendering and displaying graphics on touch screen 112 or other displays, including components for changing the visual impact (e.g., brightness, transparency, saturation, contrast, or other visual attribute) of the displayed graphics. As used herein, the term "graphic" includes any object that may be displayed to a user, including but not limited to text, web pages, icons (such as user interface objects including soft keys), digital images, video, animation, and the like.

In some embodiments, graphics module 132 stores data representing graphics to be used. Each graphic is optionally assigned a corresponding code. The graphic module 132 receives one or more codes for designating graphics to be displayed from an application program or the like, and also receives coordinate data and other graphic attribute data together if necessary, and then generates screen image data to output to the display controller 156.

Haptic feedback module 133 includes various software components for generating instructions used by haptic output generator 167 to generate haptic output at one or more locations on device 100 in response to user interaction with device 100.

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

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

The application 136 optionally includes the following modules (or sets of instructions) or a subset or superset thereof:

contact module 137 (sometimes referred to as an address book or contact list);

a telephone module 138;

video conferencing module 139;

email client module 140;

an Instant Messaging (IM) module 141;

a fitness support module 142;

a camera module 143 for still and/or video images;

an image management module 144;

a video player module;

a music player module;

browser module 147;

Calendar module 148;

a gadget module 149, optionally comprising one or more of: weather gadgets 149-1, stock gadgets 149-2, calculator gadget 149-3, alarm gadget 149-4, dictionary gadget 149-5, and other gadgets obtained by the user, and user-created gadgets 149-6;

a gadget creator module 150 for forming a user-created gadget 149-6;

search module 151;

a video and music player module 152 that incorporates the video player module and the music player module;

a note module 153;

map module 154; and/or

An online video module 155.

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

In conjunction with touch screen 112, display controller 156, contact/motion module 130, graphics module 132, and text input module 134, contacts module 137 is optionally used to manage an address book or contact list (e.g., in application internal state 192 of contacts module 137 stored in memory 102 or memory 370), including: adding one or more names to the address book; deleting the name from the address book; associating a telephone number, email address, physical address, or other information with the name; associating the image with the name; classifying and classifying names; providing a telephone number or email address to initiate and/or facilitate communications through telephone 138, video conferencing module 139, email 140, or IM 141; etc.

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

In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch screen 112, display controller 156, optical sensor 164, optical sensor controller 158, contact/motion module 130, graphics module 132, text input module 134, contacts module 137, and telephony module 138, videoconferencing module 139 includes executable instructions to initiate, conduct, and terminate a videoconference between a user and one or more other participants according to user instructions.

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, and text input module 134, email client module 140 includes executable instructions 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 with still or video images captured by the camera module 143.

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, and text input module 134, instant message module 141 includes executable instructions for: inputting a character sequence corresponding to an instant message, modifying previously inputted characters, transmitting a corresponding instant message (e.g., using a Short Message Service (SMS) or Multimedia Message Service (MMS) protocol for phone-based instant messages or using XMPP, SIMPLE, or IMPS for internet-based instant messages), receiving an instant message, and viewing the received instant message. In some embodiments, the transmitted and/or received instant message optionally includes graphics, photographs, audio files, video files, and/or other attachments supported in an MMS and/or Enhanced Messaging Service (EMS). As used herein, "instant message" refers to both telephony-based messages (e.g., messages sent using SMS or MMS) and internet-based messages (e.g., messages sent using XMPP, SIMPLE, or IMPS).

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and music player module, workout support module 142 includes executable instructions for creating a workout (e.g., with time, distance, and/or calorie burn targets); communicate with a fitness sensor (exercise device); receiving fitness sensor data; calibrating a sensor for monitoring fitness; selecting and playing music for exercise; and displaying, storing and transmitting the fitness data.

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

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

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

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, text input module 134, email client module 140, and browser module 147, calendar module 148 includes executable instructions for creating, displaying, modifying, and storing calendars and data associated with calendars (e.g., calendar entries, to-do items, etc.) according to user instructions.

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, text input module 134, and browser module 147, gadget module 149 is a mini-application (e.g., weather gadget 149-1, stock gadget 149-2, calculator gadget 149-3, alarm gadget 149-4, and dictionary gadget 149-5) or a mini-application created by a user (e.g., user created gadget 149-6) that is optionally downloaded and used by a user. In some embodiments, gadgets include HTML (hypertext markup language) files, CSS (cascading style sheet) files, and JavaScript files. In some embodiments, gadgets include XML (extensible markup language) files and JavaScript files (e.g., yahoo | gadgets).

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, text input module 134, and browser module 147, gadget creator module 150 is optionally used by a user to create gadgets (e.g., to transform user-specified portions of a web page into gadgets).

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

In conjunction with touch screen 112, display controller 156, contact/motion module 130, graphics module 132, audio circuit 110, speaker 111, RF circuit 108, and browser module 147, video and music player module 152 includes executable instructions that allow a user to download and playback recorded music and other sound files stored in one or more file formats, such as MP3 or AAC files, as well as executable instructions for displaying, rendering, or otherwise playing back video (e.g., on touch screen 112 or on an external display connected via external port 124). In some embodiments, the device 100 optionally includes the functionality of an MP3 player such as an iPod (trademark of Apple inc.).

In conjunction with the touch screen 112, the display controller 156, the contact/movement module 130, the graphics module 132, and the text input module 134, the notes module 153 includes executable instructions for creating and managing notes, backlog, and the like according to user instructions.

In conjunction with RF circuitry 108, touch screen 112, display controller 156, contact/motion module 130, graphics module 132, text input module 134, GPS module 135, and browser module 147, map module 154 is optionally configured to receive, display, modify, and store maps and data associated with maps (e.g., driving directions, data related to shops and other points of interest at or near a particular location, and other location-based data) according to user instructions.

In conjunction with touch screen 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, online video module 155 includes instructions for: allowing a user to access, browse, receive (e.g., by streaming and/or downloading), play back (e.g., on a touch screen or on an external display connected via external port 124), send an email with a link to a particular online video, and otherwise manage online video in one or more file formats such as h.264. In some embodiments, the instant messaging module 141 is used to send links to particular online videos instead of the email client module 140. Additional descriptions of online video applications can be found in U.S. provisional patent application Ser. No. 60/936,562, and U.S. patent application Ser. No. 11/968,067, entitled "Portable Multifunction Device, method, and Graphical User Interface for Playing Online Videos," filed on even date 20, 6, 2007, and entitled "Portable Multifunction Device, method, and Graphical User Interface for Playing Online Videos," filed on even date 31, 12, 2007, the contents of both of which are hereby incorporated by reference in their entirety.

Each of the modules and applications described above corresponds to a set of executable instructions for performing one or more of the functions described above, as well as the methods described in this patent application (e.g., the computer-implemented methods and other information processing methods described herein). These modules (e.g., sets of instructions) need not be implemented in a separate software program, such as a computer program (e.g., including instructions), process, or module, and thus the various subsets of these modules are optionally combined or otherwise rearranged in various embodiments. For example, the video player module is optionally combined with the music player module into a single module (e.g., video and music player module 152 in fig. 1A). In some embodiments, memory 102 optionally stores a subset of the modules and data structures described above. Further, memory 102 optionally stores additional modules and data structures not described above.

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 touch screen and/or touch pad. By using a touch screen and/or a touch pad as the primary input control device for operating the device 100, the number of physical input control devices (e.g., push buttons, dials, etc.) on the device 100 is optionally reduced.

A predefined set of functions performed solely by the touch screen and/or touch pad optionally includes navigation between user interfaces. In some embodiments, the touchpad, when touched by a user, navigates the device 100 from any user interface displayed on the device 100 to a main menu, a main desktop menu, or a root menu. In such implementations, a touch pad is used to implement a "menu button". In some other embodiments, the menu buttons are physical push buttons or other physical input control devices, rather than touch pads.

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

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

In some implementations, the application internal state 192 includes additional information, such as one or more of the following: restoration information to be used when the application 136-1 resumes execution, user interface state information indicating that the information is being displayed or ready for display by the application 136-1, a state queue for enabling the user to return to a previous state or view of the application 136-1, and a repeat/undo queue of previous actions taken by the user.

Event monitor 171 receives event information from peripheral interface 118. The event information includes information about sub-events (e.g., user touches on the touch sensitive display 112 as part of a multi-touch gesture). The peripheral interface 118 transmits information it receives from the I/O subsystem 106 or sensors, such as a proximity sensor 166, one or more accelerometers 168, and/or microphone 113 (via audio circuitry 110). The information received by the peripheral interface 118 from the I/O subsystem 106 includes information from the touch-sensitive display 112 or touch-sensitive surface.

In some embodiments, event monitor 171 sends requests to 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 if there is a significant event (e.g., receiving an input above a predetermined noise threshold and/or receiving an input exceeding a predetermined duration).

In some implementations, the event classifier 170 also includes a hit view determination module 172 and/or an active event identifier determination module 173.

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

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 the respective application) in which the touch is detected optionally corresponds to a level of programming within the application's programming or view hierarchy. For example, the lowest horizontal view in which a touch is detected is optionally referred to as a hit view, and the set of events that are recognized as correct inputs is optionally determined based at least in part on the hit view of the initial touch that begins a touch-based gesture.

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

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

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

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

In some embodiments, application 136-1 includes a plurality of event handlers 190 and one or more application views 191, each of which includes instructions for processing touch events that occur within a respective view of the user interface of the application. Each application view 191 of the application 136-1 includes one or more event recognizers 180. Typically, the respective 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 that is a higher level object from which methods and other properties are inherited, such as the user interface toolkit or application 136-1. In some implementations, the respective event handlers 190 include one or more of the following: data updater 176, object updater 177, GUI updater 178, and/or event data 179 received from event sorter 170. Event handler 190 optionally utilizes or invokes data updater 176, object updater 177, or GUI updater 178 to update the application internal state 192. Alternatively, one or more of application views 191 include one or more corresponding event handlers 190. Additionally, in some implementations, one or more of the data updater 176, the object updater 177, and the GUI updater 178 are included in a respective application view 191.

The corresponding event identifier 180 receives event information (e.g., event data 179) from the event classifier 170 and identifies events based on the event information. Event recognizer 180 includes event receiver 182 and event comparator 184. In some embodiments, event recognizer 180 further includes at least a subset of metadata 183 and event transfer instructions 188 (which optionally include sub-event delivery instructions).

Event receiver 182 receives event information from event sorter 170. The event information includes information about sub-events such as touches or touch movements. The event information also includes additional information, such as the location of the sub-event, according to the sub-event. When a sub-event relates to movement of a touch, the event information optionally also includes the rate and direction of the sub-event. In some embodiments, the event includes rotation of the device from one orientation to another orientation (e.g., from a portrait orientation to a landscape orientation, or vice versa), and the event information includes corresponding information about a current orientation of the device (also referred to as a device pose).

The event comparator 184 compares the event information with predefined event or sub-event definitions and determines an event or sub-event or determines or updates the state of the event or sub-event based on the comparison. In some embodiments, event comparator 184 includes event definition 186. Event definition 186 includes definitions of events (e.g., a predefined sequence of sub-events), such as event 1 (187-1), event 2 (187-2), and others. In some implementations, sub-events in an event (e.g., 187-1 and/or 187-2) include, for example, touch start, touch end, touch move, touch cancel, and multi-touch. In one example, the definition of event 1 (187-1) is a double click on the displayed object. For example, a double click includes a first touch on the displayed object for a predetermined length of time (touch start), a first lift-off on the displayed object for a predetermined length of time (touch end), a second touch on the displayed object for a predetermined length of time (touch start), and a second lift-off on the displayed object for a predetermined length of time (touch end). In another example, the definition of event 2 (187-2) is a drag on the displayed object. For example, dragging includes touching (or contacting) on the displayed object for a predetermined period of time, movement of the touch on the touch-sensitive display 112, and lift-off of the touch (touch end). In some embodiments, the event also includes information for one or more associated event handlers 190.

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

In some embodiments, the definition of the respective event (187) further includes a delay action that delays delivery of the event information until it has been determined that the sequence of sub-events does or does not correspond to an event type of the event recognizer.

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

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

In some embodiments, when one or more particular sub-events of an event are identified, the corresponding event recognizer 180 activates an event handler 190 associated with the event. In some implementations, the respective event identifier 180 delivers event information associated with the event to the event handler 190. The activate event handler 190 is different from sending (and deferring) sub-events to the corresponding hit view. In some embodiments, event recognizer 180 throws a marker associated with the recognized event, and event handler 190 associated with the marker retrieves the marker and performs a predefined process.

In some implementations, the event delivery instructions 188 include sub-event delivery instructions that deliver event information about the sub-event without activating the event handler. Instead, the sub-event delivery instructions deliver the event information to an event handler associated with the sub-event sequence or to an actively engaged view. Event handlers associated with the sequence of sub-events or with the actively engaged views receive the event information and perform a predetermined process.

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

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

It should be appreciated that the above discussion regarding event handling of user touches on a touch sensitive display also applies to other forms of user inputs that utilize an input device to operate the multifunction device 100, not all of which are initiated on a touch screen. For example, mouse movements and mouse button presses optionally in conjunction with single or multiple keyboard presses or holds; contact movement on the touchpad, such as tap, drag, scroll, etc.; inputting by a touch pen; movement of the device; verbal instructions; detected eye movement; inputting biological characteristics; and/or any combination thereof is optionally used as input corresponding to sub-events defining the event to be distinguished.

Fig. 2 illustrates a portable multifunction device 100 with a touch screen 112 in accordance with some embodiments. The touch screen optionally displays one or more graphics within a User Interface (UI) 200. In this and other embodiments described below, a user can select one or more of these graphics by making a gesture on the graphics, for example, with one or more fingers 202 (not drawn to scale in the figures) or one or more styluses 203 (not drawn to scale in the figures). In some embodiments, selection of one or more graphics will occur when a user breaks contact with the one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (left to right, right to left, up and/or down), and/or scrolling of a finger that has been in contact with the device 100 (right to left, left to right, up and/or down). In some implementations or in some cases, inadvertent contact with the graphic does not select the graphic. For example, when the gesture corresponding to the selection is a tap, a swipe gesture that swipes over an application icon optionally does not select the corresponding application.

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

In some embodiments, the device 100 includes a touch screen 112, menu buttons 204, a press button 206 for powering the device on/off and for locking the device, one or more volume adjustment buttons 208, a Subscriber Identity Module (SIM) card slot 210, a headset jack 212, and a docking/charging external port 124. Pressing button 206 is optionally used to turn on/off the device by pressing the button and holding the button in the pressed state for a predefined time interval; locking the device by depressing the button and releasing the button before the predefined time interval has elapsed; and/or unlock the device or initiate an unlocking process. In an alternative embodiment, the device 100 also accepts voice input through the microphone 113 for activating or deactivating certain functions. The device 100 also optionally includes one or more contact intensity sensors 165 for detecting the intensity of contacts on the touch screen 112, and/or one or more haptic output generators 167 for generating haptic outputs for a user of the device 100.

FIG. 3 is a block diagram of an exemplary multifunction device with a display and a touch-sensitive surface in accordance with some embodiments. The device 300 need not be portable. In some embodiments, the device 300 is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an educational device (such as a child learning toy), a gaming system, or a control device (e.g., a home controller or an industrial controller). The device 300 generally includes one or more processing units (CPUs) 310, one or more network or other communication interfaces 360, memory 370, and one or more communication buses 320 for interconnecting these components. Communication bus 320 optionally includes circuitry (sometimes referred to as a chipset) that interconnects and controls communications between system components. The device 300 includes an input/output (I/O) interface 330 with a display 340, typically a touch screen 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 (e.g., similar to the tactile output generator 167 described above with reference to fig. 1A), a sensor 359 (e.g., an optical sensor, an acceleration sensor, a proximity sensor, a touch sensitive sensor, and/or a contact intensity sensor (similar to the contact intensity sensor 165 described above with reference to fig. 1A)) for generating tactile output on the device 300. Memory 370 includes high-speed random access memory, such as DRAM, SRAM, DDR RAM, or other random access solid state memory devices; and optionally includes non-volatile memory such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid state storage devices. Memory 370 optionally includes one or more storage devices located remotely from CPU 310. In some embodiments, memory 370 stores programs, modules, and data structures, or a subset thereof, similar to those stored in memory 102 of portable multifunction device 100 (fig. 1A). Furthermore, memory 370 optionally stores additional programs, modules, and data structures not present in memory 102 of portable multifunction device 100. For example, memory 370 of device 300 optionally stores drawing module 380, presentation module 382, word processing module 384, website creation module 386, disk editing module 388, and/or spreadsheet module 390, while memory 102 of portable multifunction device 100 (fig. 1A) optionally does not store these modules.

Each of the above elements in fig. 3 is optionally stored in one or more of the previously mentioned memory devices. Each of the above-described modules corresponds to a set of instructions for performing the above-described functions. The above-described modules or computer programs (e.g., sets of instructions or instructions) need not be implemented in a separate software program (such as a computer program (e.g., instructions), process or module, and thus the various subsets of these modules are optionally combined or otherwise rearranged in various embodiments. In some embodiments, memory 370 optionally stores a subset of the modules and data structures described above. Further, memory 370 optionally stores additional modules and data structures not described above.

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

Fig. 4A illustrates an exemplary user interface of an application menu on the portable multifunction device 100 in accordance with some embodiments. A similar user interface is optionally implemented on device 300. In some embodiments, the user interface 400 includes the following elements, or a subset or superset thereof:

Signal strength indicators 402 for wireless communications such as cellular signals and Wi-Fi signals;

time 404;

bluetooth indicator 405;

battery status indicator 406;

tray 408 with icons for commonly used applications, such as:

an icon 416 labeled "phone" of the o phone module 138, the icon 416 optionally including an indicator 414 of the number of missed calls or voice mails;

an icon 418 labeled "mail" of the o email client module 140, the icon 418 optionally including an indicator 410 of the number of unread emails;

icon 420 labeled "browser" of the omicron browser module 147; and

an icon 422 labeled "iPod" of the omicron video and music player module 152 (also known as iPod (trademark of Apple inc.) module 152); and

icons of other applications, such as:

icon 424 labeled "message" of omicron IM module 141;

icon 426 labeled "calendar" of calendar module 148;

icon 428 labeled "photo" of image management module 144;

an icon 430 labeled "camera" of the omicron camera module 143;

icon 432 labeled "online video" of online video module 155;

Icon 434 labeled "stock market" for the o stock market gadget 149-2;

icon 436 labeled "map" of the omicron map module 154;

icon 438 labeled "weather" for the o weather gadget 149-1;

icon 440 labeled "clock" for the o alarm clock gadget 149-4;

icon 442 labeled "fitness support" of omicron fitness support module 142;

icon 444 labeled "note" of the omicron note module 153; and

an icon 446 labeled "set" for a set application or module that provides access to the settings of device 100 and its various applications 136.

It should be noted that the iconic labels shown in fig. 4A are merely exemplary. For example, the icon 422 of 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 of the respective application icon includes a name of the application corresponding to the respective application icon. In some embodiments, the label of a particular application icon is different from the name of the application corresponding to the particular application icon.

Fig. 4B illustrates an exemplary user interface on a device (e.g., device 300 of fig. 3) having a touch-sensitive surface 451 (e.g., tablet or touchpad 355 of fig. 3) separate from a display 450 (e.g., touch screen display 112). The device 300 also optionally includes one or more contact intensity sensors (e.g., one or more of the sensors 359) for detecting the intensity of the contact on the touch-sensitive surface 451 and/or one or more tactile output generators 357 for generating tactile outputs for a user of the device 300.

While some of the examples below will be given with reference to inputs on touch screen display 112 (where the touch sensitive surface and the display are combined), in some embodiments the device detects inputs on a touch sensitive surface separate from the display, as shown in fig. 4B. In some implementations, the touch-sensitive surface (e.g., 451 in fig. 4B) has a primary axis (e.g., 452 in fig. 4B) that corresponds to the primary axis (e.g., 453 in fig. 4B) on the display (e.g., 450). According to these embodiments, the device detects contact (e.g., 460 and 462 in fig. 4B) with the touch-sensitive surface 451 at a location corresponding to a respective location on the display (e.g., 460 corresponds to 468 and 462 corresponds to 470 in fig. 4B). In this way, when the touch-sensitive surface (e.g., 451 in FIG. 4B) is separated from the display (e.g., 450 in FIG. 4B) of the multifunction device, user inputs (e.g., contacts 460 and 462 and movement thereof) detected by the device on the touch-sensitive surface are used by the device to manipulate the user interface on the display. It should be appreciated that similar approaches are optionally used for other user interfaces described herein.

Additionally, while the following examples are primarily given with reference to finger inputs (e.g., finger contacts, single-finger flick gestures, finger swipe gestures), it should be understood that in some embodiments one or more of these finger inputs are replaced by input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture is optionally replaced with a mouse click (e.g., rather than a contact), followed by movement of the cursor along the path of the swipe (e.g., rather than movement of the contact). As another example, a flick gesture is optionally replaced by a mouse click (e.g., instead of detection of contact, followed by ceasing to detect contact) when the cursor is over the position of the flick gesture. Similarly, when multiple user inputs are detected simultaneously, it should be appreciated that multiple computer mice are optionally used simultaneously, or that the mice and finger contacts are optionally used simultaneously.

Fig. 5A illustrates an exemplary personal electronic device 500. The 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., fig. 1A-4B). In some implementations, the device 500 has a touch sensitive display 504, hereinafter referred to as a touch screen 504. In addition to or in lieu of touch screen 504, device 500 has a display and a touch-sensitive surface. As with devices 100 and 300, in some implementations, touch screen 504 (or touch-sensitive surface) optionally includes one or more intensity sensors for detecting the intensity of an applied contact (e.g., touch). One or more intensity sensors of the touch screen 504 (or touch sensitive surface) may provide output data representative of the intensity of the touch. The user interface of the device 500 may respond to touches based on the intensity of the touches, meaning that touches of different intensities may invoke different user interface operations on the device 500.

Exemplary techniques for detecting and processing touch intensity are found, for example, in the following related patent applications: international patent application serial number PCT/US2013/040061, filed 5/8 a 2013, entitled "Device, method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application", issued as WIPO patent publication No. WO/2013/169849; and international patent application serial number PCT/US2013/069483, filed 11/2013, entitled "Device, method, and Graphical User Interface for Transitioning Between Touch Input to Display Output Relationships", published as WIPO patent publication No. WO/2014/105276, each of which is hereby incorporated by reference in its entirety.

In some embodiments, the device 500 has one or more input mechanisms 506 and 508. The input mechanisms 506 and 508 (if included) may be in physical form. 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, may allow for attachment of the device 500 with, for example, a hat, glasses, earrings, necklace, shirt, jacket, bracelet, watchband, bracelet, pants, leash, shoe, purse, backpack, or the like. These attachment mechanisms allow the user to wear the device 500.

Fig. 5B depicts an exemplary personal electronic device 500. In some embodiments, the apparatus 500 may include some or all of the components described with reference to fig. 1A, 1B, and 3. The device 500 has a bus 512 that operatively couples an I/O section 514 with one or more computer processors 516 and memory 518. The I/O portion 514 may be connected to a display 504, which may have a touch sensitive component 522 and optionally an intensity sensor 524 (e.g., a contact intensity sensor). In addition, the I/O portion 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 508. For example, the input mechanism 506 is optionally a rotatable input device or a depressible input device and a rotatable input device. In some examples, the input mechanism 508 is optionally a button.

In some examples, the input mechanism 508 is optionally a microphone. Personal electronic device 500 optionally includes various sensors, such as a GPS sensor 532, an accelerometer 534, an orientation sensor 540 (e.g., compass), a gyroscope 536, a motion sensor 538, and/or combinations thereof, all of which are operatively connected to I/O section 514.

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

As used herein, the term "affordance" refers to a user-interactive graphical user interface object that is optionally displayed on a display screen of device 100, 300, and/or 500 (fig. 1A, 3, and 5A-5B). For example, an image (e.g., an icon), a button, and text (e.g., a hyperlink) optionally each constitute an affordance.

As used herein, the term "focus selector" refers to an input element for indicating the current portion of a user interface with which a user is interacting. In some implementations that include a cursor or other position marker, the cursor acts as a "focus selector" such that when the cursor detects an input (e.g., presses an input) on a touch-sensitive surface (e.g., touch pad 355 in fig. 3 or touch-sensitive surface 451 in fig. 4B) above a particular user interface element (e.g., a button, window, slider, or other user interface element), the particular user interface element is adjusted according to the detected input. In some implementations including a touch screen display (e.g., touch sensitive display system 112 in fig. 1A or touch screen 112 in fig. 4A) that enables direct interaction with user interface elements on the touch screen display, the contact detected on the touch screen acts as a "focus selector" such that when an input (e.g., a press input by a contact) is detected on the touch screen display at the location of a particular user interface element (e.g., a button, window, slider, or other user interface element), the particular user interface element is adjusted in accordance with the detected input. In some implementations, the focus is moved from one area of the user interface to another area of the user interface without a corresponding movement of the cursor or movement of contact on the touch screen display (e.g., by moving the focus from one button to another using a tab key or arrow key); in these implementations, the focus selector moves according to movement of the focus between different areas of the user interface. Regardless of the particular form that the focus selector takes, the focus selector is typically controlled by the user in order to deliver a user interface element (or contact on the touch screen display) that is interactive with the user of the user interface (e.g., by indicating to the device the element with which the user of the user interface desires to interact). For example, upon detection of a press input on a touch-sensitive surface (e.g., a touchpad or touch screen), the position of a focus selector (e.g., a cursor, contact, or selection box) over a respective button will indicate that the user desires to activate the respective button (rather than other user interface elements shown on the device display).

As used in the specification and claims, the term "characteristic intensity" of a contact refers to the characteristic of a contact based on one or more intensities of the contact. In some embodiments, the characteristic intensity is based on a plurality of intensity samples. The characteristic intensity is optionally based on a predefined number of intensity samples or a set of intensity samples acquired during a predetermined period of time (e.g., 0.05 seconds, 0.1 seconds, 0.2 seconds, 0.5 seconds, 1 second, 2 seconds, 5 seconds, 10 seconds) relative to a predefined event (e.g., after detection of contact, before or after detection of lift-off of contact, before or after detection of start of movement of contact, before or after detection of end of contact, and/or before or after detection of decrease in intensity of contact). The characteristic intensity of the contact is optionally based on one or more of: maximum value of intensity of contact, average value of intensity of contact, value at first 10% of intensity of contact, half maximum value of intensity of contact, 90% maximum value of intensity of contact, etc. In some embodiments, the duration of the contact is used in determining the characteristic intensity (e.g., when the characteristic intensity is an average of the intensity of the contact over time). In some embodiments, the characteristic intensity is compared to a set of one or more intensity thresholds to determine whether the user has performed an operation. For example, the set of one or more intensity thresholds optionally includes a first intensity threshold and a second intensity threshold. In this example, contact of the feature strength that does not exceed the first threshold results in a first operation, contact of the feature strength that exceeds the first strength threshold but does not exceed the second strength threshold results in a second operation, and contact of the feature strength that exceeds the second threshold results in a third operation. In some implementations, a comparison between the feature strength and one or more thresholds is used to determine whether to perform one or more operations (e.g., whether to perform or forgo performing the respective operations) rather than for determining whether to perform the first or second operations.

Attention is now directed to embodiments of a user interface ("UI") and associated processes implemented on an electronic device, such as portable multifunction device 100, device 300, or device 500.

Fig. 6A-6R illustrate an exemplary user interface for editing a avatar decal, according to some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the process in fig. 7.

Fig. 6A illustrates device 600 displaying via display 601 (e.g., a touch-sensitive display) an editing interface 604 that is an interface for editing the appearance of a avatar (e.g., a virtual avatar) and/or avatar decal. The device 600 includes a camera 602 for detecting the appearance of the user 615, which in some embodiments is used to control or modify the displayed pose or appearance of the displayed avatar to track the user's face. For example, as the user 615 moves his head and makes different facial expressions, the device 600 detects the user's movements, gestures, and facial expressions using the camera 602 and modifies the appearance of the avatar 605 in real-time to replicate the movements, gestures, and facial expressions of the user 615. Device 600 includes one or more elements of device 100, 300, or 500.

In fig. 6A, the editing interface 604 includes an avatar 605. The appearance of the avatar 605 is edited by selecting different avatar feature options from the various avatar feature categories 606. For example, in fig. 6A, the headwear category 606-1 is currently selected (as indicated by the centered and bolded appearance of "headwear") and a different headwear option 610 is displayed for modifying the headwear of the avatar 605. Color option 608 may be selected to modify the color of the selected headwear option. In fig. 6A, headwear option 610-1 is currently selected. The headwear option 610-1 corresponds to a no headwear option, and thus the avatar 605 is displayed without any headwear.

In fig. 6A, the device 600 detects an input 612 selecting the headwear option 610-2 and an input 614 selecting the eyewear category 606-2, and in response, updates the editing interface 604 as shown in fig. 6B. In response to the input 612, the device 600 updates the appearance of the avatar 605 to include a hat 616 corresponding to the headwear option 610-2. In response to input 614, device 600 selects eyeglass category 606-2 and displays eyeglass option 618.

In fig. 6B, user 615 extends his tongue and tilts his head. The device 600 uses the camera 602 to detect a change in posture and, in response, modifies the appearance of the avatar 605 to tilt the head of the avatar and extend the tongue thereof. The device 600 detects selection of the glasses option 618-1 via the input 620 and detects a swipe gesture 622 on the feature class. In response, device 600 updates the avatar to have glasses 626 corresponding to glasses option 618-1 and selects apparel category 606-3, as shown in FIG. 6C.

In some embodiments, when a particular avatar feature is selected for editing, the device 600 replaces the displayed dynamic avatar with a static avatar decal showing a representation of the avatar with one or more features selected for editing. For example, in fig. 6C, apparel category 606-3 is a category for editing avatar apparel that is not displayed with avatar 605. Thus, device 600 transitions from displaying avatar 605 to displaying a avatar decal showing the avatar (and optionally other related features such as arms, hands, and neck) so that the user can see the avatar over the avatar and any changes the user makes to the avatar. In some embodiments, the transition includes an animation in which the avatar is transformed into a decal. For example, fig. 6C depicts a void depiction 624 of a head portrait converted from a dynamic head portrait to a head portrait decal. The depiction shows the updated appearance of the avatar with cap 616 and glasses 626, and shows the shrinking effect of the body that begins to display the avatar. In addition, when the head and face features of the head portrait transition to the pose of the sticker shown in fig. 6D, the head portrait stops tracking the face of the user. As shown in fig. 6C, when the head of the head portrait is moved to an upright position, the head portrait is shown closing its eyes and closing its mouth (retracting the tongue) while the user 615 maintains a head tilt and tongue extension posture. In some embodiments, the transition is depicted as an alternating fade from the head portrait to the head portrait decal, where the head portrait decal fades in as the head portrait fades out.

Fig. 6D depicts a completed transition from the head portrait 605 to the head portrait decal 625. The avatar decal 625 represents the current appearance of the avatar, as edited in fig. 6A and 6B. Thus, decal 625 includes a cap 616 and eyeglasses 626. Label 625 includes head 625-1, body 625-2, and arm 625-3, and is shown with apparel 632 corresponding to apparel item 630-1. The avatar decal 625 is static, as opposed to the avatar 605. Thus, the device 600 does not modify the appearance of the avatar decal to track the user's face. For example, in fig. 6D, the user 615 is looking forward with eyes open and smiling, while the decal 625 shows the eyes closed and the head portrait in praying position without smiling.

When apparel category 606-3 is selected, editing interface 604 is updated to include apparel option 630 for selecting apparel for the avatar (shown on the avatar decal) and color option 628 for selecting colors for the selected apparel. In fig. 6D, device 600 detects input 634 to select apparel option 630-2. In response, device 600 updates decal 625 to display apparel 636 corresponding to apparel item 630-2, as shown in fig. 6E.

In some embodiments, a user may interact with the device 600 to change the decal displayed in the editing interface 604. For example, in fig. 6E, device 600 displays a prompt 628 prompting the user to swipe over the displayed decals to display a different decal. In some embodiments, the tiles displayed by device 600 are a subset of a larger set of tiles, where the tiles in the subset include those tiles that depict the avatar characteristics currently selected for editing and do not include tiles that do not depict the avatar characteristics currently selected for editing. Because the user is currently editing the avatar's apparel, the stickers currently available for display by device 600 are those showing the avatar's apparel. For example, in response to input 638, device 600 replaces decal 625 with decal 627, which decal 627 is a different decal depicting the avatar and the avatar is in a hand-lifting position. The decal 627 depicts the head 627-1, body 627-2 and arm 627-3 of the avatar while wearing apparel 636 corresponding to the selected avatar option 630-2.

In fig. 6F, device 600 detects input 640 selecting apparel option 630-3 and, in response, updates decal 627 to include apparel 642, as shown in fig. 6G. In fig. 6G, the device 600 detects an input 644 to select the arm category 606-4. In fig. 6H, device 600 updates editing interface 604 to display arm options 648 and color options 646. The avatar arm option 648-1 is currently selected. The device 600 detects an input 650 to select the arm option 648-2. In some embodiments, the selection of the arm options may be applied to both arms of the avatar. In some embodiments, the selection of the arm options may be applied to the left or right arm of the avatar. In some embodiments, editing interface 604 includes an option that can be selected to govern whether the selected arm option is applied to the left arm, the right arm, or both of the avatar. In fig. 6I, the device 600 depicts a decal 627 having an avatar arm 652 corresponding to the selected avatar arm option 648-2.

In some embodiments, editing interface 804 is accessible from a messaging application, and in some embodiments, the use of editing interface 804 for decal editing may be used in a messaging application. For example, in fig. 6I, device 600 detects input 654 and, in response, displays a message interface 656, as shown in fig. 6J. The message interface 656 includes a message display area 656-1 that shows messages sent to participants of a group message conversation. Message interface 656 also includes a decal area 656-3 that displays decals 658 that can be selected for addition to the message conversation. For example, decal 658-1 may be selected and, in response, device 600 displays decal 658-1 in message composition area 656-2 and/or in message display area 656-1. The decals 658 include decals (e.g., decals 658-1, 658-2, and 658-3) that are included in the subset that are available for display when editing the clothing or arms of the avatar, as well as decals (e.g., decals 658-4, 658-5, and 658-6) that are not included in the subset, as these decals do not include representations of the clothing or arms of the avatar.

Fig. 6K-6R illustrate exemplary embodiments of an avatar editing interface displayed on device 650. The device 650 includes a display 651 (e.g., a touch sensitive display) and an input mechanism 652. Device 650 includes one or more elements of device 100, 300, 500, or 600.

In fig. 6K, device 650 displays editing interface 670, which includes avatar 660 (similar to avatar 605) and avatar feature category options 662, 664, and 666 that can be selected to edit features of avatar 660. In some embodiments, avatar 660 may be selected to display avatars with different facial expressions. For example, in response to input 668, device 650 displays avatar 660 extending out of its tongue, as shown in fig. 6L. In some implementations, the device 650 displays avatars having different facial expressions in response to input (e.g., rotation and/or depression of the input mechanism) using the input mechanism 652.

In fig. 6M, device 650 displays apparel editing interface 676 in response to input 674 on apparel option 664 in fig. 6L. The apparel editing interface 676 is an interface for editing apparel of the avatar 660 that is similar to the interface depicted in fig. 6D, for example. When the apparel editing interface 676 is displayed, additional features of the avatar (such as the avatar's arm 678 and apparel 680) are displayed to show changes to the avatar's apparel. In some embodiments, the avatar apparel is modified using input mechanism 652. In some implementations, the avatar apparel is modified using touch input on display 651.

In some embodiments, the device 650 loops through the various decals displayed corresponding to the avatar characteristics currently selected for editing. For example, in response to input 682 or input 684 (or in some embodiments, after a predetermined amount of time), device 650 displays decal 685, as shown in fig. 6N. Decal 685 is similar to decal 625, but is updated to reflect the features selected in fig. 6F and 6H. Thus, decal 685 shows an avatar having a hat 686 (similar to hat 616), eyeglasses 688 (similar to eyeglasses 626), an avatar arm 678 (similar to arm 652), and apparel 680 (similar to apparel 642). In response to input 681, input 683, or after a predetermined amount of time, device 650 loops to decal 690, as shown in fig. 6O. In the embodiment depicted in fig. 6M-6O, device 650 is editing a avatar's apparel and thus loops through the decals of the apparel showing the avatar and does not loop through the decals of the apparel not showing the avatar.

In fig. 6P, the device 650 displays a skin editing interface 692 in response to an input 672 on the skin option 662 in fig. 6L. The skin editing interface 692 is an interface for editing the skin of the avatar 660. When the skin editing interface 692 is displayed, the arms and clothing of the head portrait are not displayed. In some embodiments, the skin of the head portrait is modified using the input mechanism 652. In some embodiments, the skin of the head portrait is modified using touch input on the display 651.

As depicted in fig. 6Q and 6R, the apparatus 650 loops through to display a decal depicting the skin of the avatar, but does not display a decal including the clothing or arms of the avatar. For example, in response to input 691, input 693, or after a predetermined amount of time, device 650 displays decal 694, as shown in fig. 6Q. In response to input 695, input 697, or after a predetermined amount of time, device 650 displays decal 696, as shown in fig. 6R.

Fig. 7 is a flow chart illustrating a method for editing an avatar decal using a computer system, according to some embodiments. The method 700 is performed at a computer system (e.g., a smart phone, a tablet, a smart watch) in communication with a display generation component (e.g., a display controller, a touch-sensitive display system) and one or more input devices (e.g., a touch-sensitive surface). Some operations in method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

As described below, method 700 provides an intuitive way for editing a head portrait decal. The method reduces the cognitive burden of the user when editing the head portrait decal, thereby creating a more effective human-computer interface. For battery-powered computing devices, enabling users to edit the avatar decals faster and more efficiently saves power and increases the time interval between battery charges.

A computer system (e.g., 600 or 650) displays (702) via a display generation component (e.g., 601 or 651) an avatar editing interface (e.g., 604 or 670) (e.g., an interface for editing one or more features of an avatar character), the avatar editing interface comprising (e.g., concurrently displaying):

(704) A representation of a virtual avatar (e.g., 605 or 660) (e.g., an avatar customizable and optionally created by a user of a computer system) (e.g., a real-time preview of a virtual avatar tracking movement of a user's face), the representation of the virtual avatar having a plurality of avatar characteristics (e.g., 616 and/or 626), wherein the virtual avatar is associated with a set of stickers including a first avatar sticker (e.g., 625 or 685) showing the virtual avatar in a first pose and a second avatar sticker (e.g., 627 or 690) showing the virtual avatar in a second pose (e.g., user customizable (e.g., selectable or configurable) avatar characteristics) different from the first pose; and (706) a first set of one or more graphical interface objects (e.g., 610 or 618) selectable for modifying a first one of a plurality of avatar characteristics (e.g., different apparel options, different arm options, different headwear options, different eye color options) visible in the representation of the virtual avatar. In some embodiments, the virtual avatar is modeled to represent a human character, and the avatar characteristics generally correspond to physical characteristics of the human. For example, such head portraits may include representations of persons having various physical, human characteristics or properties (e.g., elderly women having dark skin colors and long, straight brown hair). Such an avatar will also include a representation of a person having various non-human characteristics (e.g., cosmetic enhancement, hats, glasses, sunglasses, etc.) that are typically associated with the appearance of a human. In some embodiments, the representation of the virtual avatar includes the head of the avatar and avatar features such as facial features, neck of the avatar, hats, glasses, etc., located on or immediately adjacent to the head of the avatar. In some embodiments, the representation of the virtual avatar does not include a portion of the avatar, such as the body of the avatar or avatar features that are not located on or immediately adjacent to the head of the avatar.

In displaying an avatar editing interface comprising a representation of a virtual avatar, a computer system (e.g., 600 or 650) detects (708), via one or more input devices (e.g., 601;602;651; and/or 652), an input corresponding to a request to display an editing option for a second avatar feature (e.g., a feature of the body of the avatar (e.g., a dress of the avatar (e.g., a shirt), or an arm of the avatar)) of a plurality of avatar features (e.g., 622 or 674).

In response to detecting the input (e.g., 622) (in some embodiments, after detecting the input (e.g., 674)), the computer system (e.g., 600 or 650) updates (710) the display of the avatar editing interface (e.g., 604 or 670), the updating comprising: displaying (712), by the computer system (e.g., in an area of the avatar editing interface previously occupied by at least a portion of the representation of the virtual avatar), a representation of a first avatar decal (e.g., 625 or 685) having an appearance that includes second avatar characteristics (e.g., 632, 636, 642, 652, 678, and/or 680) and that is based on the appearance of the virtual avatar (e.g., a static representation of the avatar having a static pose and appearance that is based on the avatar including the second avatar characteristics and optionally characteristics (e.g., hat, sunglasses, hairstyle/color, skin tone, etc.) for creating and/or modifying the appearance of the avatar; and the computer system displays (714) a second set of one or more graphical interface objects (e.g., 630 or 648) that are selectable for modifying one or more of the avatar characteristics (e.g., different apparel options, different arm options, different head gear options; different eye color options) that are visible in the first avatar decal (in some embodiments, replacing the first set of one or more graphical interface objects with the second set of one or more graphical interface objects) (in some embodiments, the one or more avatar characteristics modified using the second set of one or more graphical interface objects are also visible in the second avatar decal). Displaying a representation of a first avatar decal having an appearance that includes a second avatar feature and is based on the appearance of the virtual avatar reduces the amount of input at the computer system (e.g., 600 or 650) by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, the particular avatar decal displayed in response to the input is automatically selected (e.g., without additional user input) by the computer system (e.g., 600 or 650) and selected to emphasize the second avatar feature. In some embodiments, for example, the avatar decal includes one or more avatar features, such as shirts, arms, and/or hands, that are not located on or immediately adjacent to the head of the avatar. In some embodiments, the avatar decal includes features (e.g., additional features compared to the representation of the virtual avatar) that are displayed to modify the appearance of the avatar to convey a particular expression, emotion, or the like. For example, the decal may include a heart over the eyes of the head portrait to convey love, or a tear under the eyes of the head portrait to convey sadness. In some embodiments, the avatar decal includes slight modifications to the avatar appearance, such as changing a portion of the avatar, while still maintaining an overall identifiable representation of the avatar. An example of such a modification is an "explosion head" decal, where the decal is a representation of a head portrait with a top portion of the head portrait removed and showing the explosion state of the head portrait brain.

In some embodiments, a first avatar decal (e.g., 625 or 685) showing a virtual avatar in a first pose includes a first portion (e.g., 625-2 or 625-3) of the virtual avatar (e.g., avatar arm) that is not visible in a representation of the virtual avatar (e.g., 605) displayed in the avatar editing interface (e.g., 604) (e.g., the first portion of the virtual avatar is not displayed in a representation of the virtual avatar). In some embodiments, the second avatar decal (e.g., 627 or 690) showing the virtual avatar in the second pose includes a second portion (e.g., 627-2 or 627-3) of the virtual avatar (e.g., avatar torso) (in some embodiments, the second portion of the virtual avatar is the same as the first portion) that is not visible in the representation of the virtual avatar (e.g., 605) displayed in the avatar editing interface (e.g., 604) (e.g., the second portion of the virtual avatar is not displayed in the representation of the virtual avatar). Displaying a first avatar decal that shows the virtual avatar in a first pose and includes a first portion of the virtual avatar that is not visible in the representation of the virtual avatar and displaying a second avatar decal that shows the virtual avatar in a second pose and includes a second portion of the virtual avatar that is not visible in the representation of the virtual avatar provides feedback to a user of the computer system (e.g., 600 or 650) that the first portion or the second portion of the virtual avatar is being edited (or at least is related to a feature of the avatar being edited) and reduces the amount of input at the computer system by automatically adjusting the display of the virtual avatar to emphasize the feature being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, while displaying the representation of the first head portrait decal (e.g., 625), the computer system (e.g., 600 or 650) detects a second input (e.g., 638) (e.g., a tap or swipe gesture directed to the representation of the first head portrait decal) via one or more input devices (e.g., 601;602;651; 652). In response to detecting the second input, the computer system displays (e.g., in an area of the avatar editing interface previously occupied by at least a portion of the representation of the first virtual avatar) a representation of a second avatar decal (e.g., 627) having an appearance that includes a second avatar feature (e.g., 627-2 or 627-3) and is based on the appearance of the virtual avatar. In some embodiments, the computer system continues to display a second set of one or more graphical interface objects that are selectable for modifying one or more of the avatar characteristics visible in the first avatar decal (and/or the second avatar decal). In some embodiments, the computer system displays a set of one or more graphical interface objects that are selectable for modifying one or more of the avatar characteristics visible in the second avatar decal (in some embodiments, replacing the second set of one or more graphical interface objects with a different set of one or more graphical interface objects). Displaying a representation of a second avatar decal having an appearance that includes a second avatar feature and is based on the appearance of the virtual avatar reduces the amount of input at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, upon displaying a representation of a second avatar decal (e.g., 627) having a first appearance (e.g., the second avatar decal shows a virtual avatar wearing a first garment), a computer system (e.g., 600 or 650) detects a set of one or more inputs (e.g., selection of one of the graphical interface objects in the second set of one or more graphical interface objects) that includes an input (e.g., 640) corresponding to a request to change the appearance of the virtual avatar via one or more input devices (e.g., 601;602;651; and/or 652) (e.g., selection of a different garment for the virtual avatar). In response to detecting the set of one or more inputs, the computer system displays a representation of a second avatar decal (e.g., 627 in fig. 6I) having a second appearance that is different from the first appearance and based on the request to change the appearance of the virtual avatar (e.g., displays a second avatar decal having a different apparel selected for the virtual avatar). Displaying a representation of a second avatar decal having a second appearance that is different from the first appearance and based on a request to change the appearance of the virtual avatar provides feedback to a user of the computer system that features of the virtual avatar are edited, and reducing the number of inputs at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the feature of the avatar being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, upon displaying an avatar editing interface (e.g., 604) that includes a representation of a virtual avatar (e.g., 605), a computer system (e.g., 600; 650) detects, via one or more input devices (e.g., 601;602;651; and/or 652), an input (e.g., 614) corresponding to a request to display editing options for a third avatar feature (e.g., avatar glasses) of the plurality of avatar features. In response to detecting an input corresponding to a request to display an edit option for a third one of the plurality of avatar characteristics, the computer system displays a third set of one or more graphical interface objects (e.g., 618) (e.g., avatar eyeglass options), the third set of one or more graphical interface objects being selectable for modifying the third avatar characteristic (in some embodiments, replacing the first set of one or more graphical interface objects with the third set of one or more graphical interface objects). Displaying a third set of one or more graphical interface objects that may be selected for modifying the third avatar feature while displaying an avatar editing interface that includes a representation of the virtual avatar provides feedback to a user of the computer system that the third avatar feature has been selected for editing and reduces the number of inputs at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, upon displaying an avatar editing interface (e.g., 604) that includes a representation of a first avatar decal (e.g., 625), a computer system (e.g., 600; 650) detects, via one or more input devices (e.g., 601;602;651; and/or 652), an input (e.g., 644) corresponding to a request to display an editing option for a fourth avatar feature (e.g., avatar arm) of the plurality of avatar features. In response to detecting an input corresponding to a request to display an edit option for a fourth one of the plurality of avatar characteristics, the computer system displays a fourth set of one or more graphical interface objects (e.g., 648) (e.g., avatar arm options), which may be selected for modifying the fourth avatar characteristic (in some embodiments, replacing the second set of one or more graphical interface objects with the fourth set of one or more graphical interface objects). Displaying a fourth set of one or more graphical interface objects that may be selected for modifying the fourth avatar feature while displaying an avatar editing interface that includes a representation of the first avatar decal provides improved feedback to a user of the computer system that the fourth avatar feature is selected for editing and reduces the number of inputs at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, upon displaying an avatar editing interface (e.g., 604) that includes a representation of a virtual avatar (e.g., 605) having a first appearance of a first avatar feature (e.g., and prior to displaying the representation of the first avatar decal), a computer system (e.g., 600 or 650) detects a selection (e.g., 612) of one of the graphical interface objects (e.g., 610-2) of the first set of one or more graphical interface objects (e.g., 610) via one or more input devices (e.g., 601;602;651; and/or 652) (e.g., selecting a hat for the virtual avatar). In response to detecting selection of one of the graphical interface objects in the first set of one or more graphical interface objects, the computer system displays a representation of a virtual avatar (e.g., 605 in fig. 6B) having a second appearance of the first avatar characteristics, the second appearance being different from the first appearance and based on the selected graphical interface object in the first set of one or more graphical interface objects (e.g., displaying a representation of the virtual avatar with the selected hat). Displaying a representation of the virtual avatar having a second appearance of the first avatar feature (the second appearance being different from the first appearance and based on selected graphical interface objects of the first set of one or more graphical interface objects) and concurrently displaying an avatar editing interface comprising the representation of the virtual avatar provides feedback to a user of the computer system that the appearance of the virtual avatar has been edited, and reducing the number of inputs at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, upon displaying an avatar editing interface (e.g., 604) that includes a representation of a first avatar decal (e.g., 625) having a first appearance of a second avatar feature (e.g., 625-2 or 625-3), a computer system (e.g., 600; 650) detects selection (e.g., 634) of one of the graphical interface objects (e.g., 630-2) of a second set of one or more graphical interface objects (e.g., 630) via one or more input devices (e.g., 601;602;651; and/or 652) (e.g., selects a different garment for a virtual avatar; selects a different arm for a virtual avatar). In response to detecting the selection, the computer system displays a representation of a first avatar decal (e.g., 625 in fig. 6E) having a second appearance of a second avatar characteristic, the second appearance being different from the first appearance and based on the selected graphical interface object of the second set of one or more graphical interface objects (e.g., displays a representation of the first avatar decal having different apparel selected for the virtual avatar; displays a representation of the first avatar decal having different arms selected for the virtual avatar). Displaying a representation of a first avatar decal having a second appearance of a second avatar feature that is different from the first appearance and based on a selected graphical interface object of the second set of one or more graphical interface objects provides feedback to a user of the computer system that the appearance of the virtual avatar has been edited, and reducing the number of inputs at the computer system by automatically adjusting the displayed appearance of the virtual avatar to emphasize the avatar feature being edited without additional input from the user. Providing improved feedback and reducing the number of inputs required to perform an operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, the second avatar characteristic includes an avatar garment (e.g., 616, 626, 632, 636 or 642) (e.g., a hat or apparel). In some implementations, the second avatar feature includes an avatar arm (e.g., 625-3, 627-3, or 652) (e.g., style or type of avatar arm).

In some embodiments, displaying the avatar editing interface (e.g., 604) that includes a representation of the virtual avatar (e.g., 605) includes displaying an animation of the representation of the virtual avatar (e.g., 605 in fig. 6B) (e.g., virtual avatar changes pose and/or facial expression). In some embodiments, the animation of the representation of the virtual avatar changes based on a face (e.g., a face of the user 615) detected by (e.g., a visible light camera, a depth camera, and/or an infrared camera) one or more cameras (e.g., 602) associated with (e.g., in communication with) the computer system (e.g., 600 or 650) (e.g., one or more facial features of the user of the computer system) (e.g., the representation of the virtual avatar changes in response to detecting one or more changes (e.g., changes in pose, position, and/or orientation) in a face positioned within a field of view of the one or more cameras (e.g., changes in facial expression) mimicking a movement and/or facial expression of a face detected within a field of view of the one or more cameras (e.g., one or more cameras in communication with the computer system)). Animating the representation of the virtual avatar based on the faces detected by one or more cameras associated with the computer system provides additional controls for viewing different features of the virtual avatar without cluttering the user interface with additional displayed controls. Providing additional control options without cluttering the user interface with additional displayed controls enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, the representation of the first avatar decal (e.g., 625, 627, 685, or 690) is static (e.g., the virtual avatar does not change pose and/or facial expression over time) (e.g., the appearance of the first avatar decal does not respond to changes in the user's face). Displaying a static representation of the first avatar decal enhances the user experience by allowing the user to modify the appearance of the virtual avatar and view the corresponding changes without having to hold a particular gesture in order to view the avatar characteristics being modified, and reduces the amount of input at the computer system (e.g., 600; 650) by eliminating the need to track the user's face while the user is editing the virtual avatar. Enhancing the user experience and reducing the number of inputs required to perform the operation enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, displaying the avatar editing interface (e.g., 670) that includes a representation of the virtual avatar (e.g., 660) includes displaying a representation of the virtual avatar (e.g., the representation of the virtual avatar having a first facial pose (and in some embodiments, a first avatar feature) (e.g., the representation of the virtual avatar having a first facial expression (e.g., a surprise expression)) with the virtual avatar (e.g., 660 in fig. 6K). While displaying an avatar editing interface including a representation of a virtual avatar having a first facial pose of the virtual avatar, a computer system (e.g., 600; 650) detects a first input (e.g., 668) (e.g., a tap gesture; a swipe gesture) (e.g., an input directed to the representation of the virtual avatar) via one or more input devices (e.g., 601;602;651; 652). In response to detecting the first input, the computer system transitions the representation of the virtual avatar from a first facial pose of the virtual avatar (e.g., 660 in fig. 6L) to a second facial pose of the virtual avatar (e.g., the representation of the virtual avatar changes to a second facial expression (e.g., tongue extension, blink expression) that is different from the first facial pose (and, in some embodiments, the first avatar feature)). Converting the representation of the virtual avatar from a first facial pose of the virtual avatar to a second facial pose of the virtual avatar that is different from the first facial pose provides controls for adjusting the view of the avatar to display different poses that show features of the first avatar without cluttering the user interface with additional displayed controls. Providing additional control options without cluttering the user interface with additional displayed controls enhances the operability of the computer system (e.g., 600; 650) and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some implementations (e.g., when the representation of the virtual avatar is not responsive to a change in the user's face), the computer system changes a facial pose (e.g., facial expression) of the representation of the virtual avatar in response to detecting an input on the representation of the virtual avatar.

In some embodiments, the computer system (e.g., 600 or 650) detects expiration of a predetermined amount of time when displaying the avatar editing interface (e.g., 670) that includes a representation of a corresponding avatar decal (e.g., 685) in the set of decals. In response to detecting expiration of the predetermined amount of time, the computer system displays a representation of a subsequent avatar decal (e.g., 690) in the set of decals that is different from the corresponding avatar decal (e.g., automatically (e.g., without user input) transitioning from displaying a first decal in the set of decals to a second decal in the set of decals. Displaying representations of subsequent avatar stickers in the set of stickers that are different from the respective avatar stickers in response to detecting expiration of the predetermined amount of time automatically adjusts the view of the avatar to display a different gesture that shows the respective avatar characteristics being edited without additional user input. Automatically performing operations when a set of conditions has been met reduces the number of inputs at the computer system (e.g., 600 or 650), enhances operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to more quickly and efficiently use the system.

In some embodiments, the set of stickers includes one or more avatar stickers (e.g., 625, 627, 658-1, 658-2, 658-3, 685, or 690) that show the respective avatar characteristics (e.g., second avatar characteristics) currently selected for editing and one or more avatar stickers (e.g., 658-4, 658-5, 658-6, 694, or 696) that do not show the respective avatar characteristics currently selected for editing. In some embodiments, the respective avatar decal (e.g., 625 or 685) and the subsequent avatar decal (e.g., 627 or 690) are selected from a first avatar decal subset that includes a plurality of decals that illustrate the respective avatar feature and does not include a decal that does not illustrate the respective avatar feature. Displaying a decal selected from a first subset of head portrait decals comprising a plurality of decals showing respective head portrait features and excluding decals not showing respective head portrait features saves computational resources by displaying only head portrait decals showing features being edited and eliminating the display of decals not relevant to the user. Saving computing resources enhances the operability of the computer system (e.g., 600 or 650) and makes the user-system interface more efficient (e.g., by helping a user provide proper input and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, as the computer system loops through the avatar decals, the computer system displays the avatar decals corresponding to (e.g., showing or depicting) the avatar feature currently selected for editing and does not display (e.g., skips displaying) the avatar decals that do not correspond to the avatar feature currently selected for editing.

In some embodiments, upon displaying a representation of a decal (e.g., 685 or 690) from a decal collection (e.g., a respective avatar decal or a subsequent avatar decal), a computer system (e.g., 600 or 650) detects an input (e.g., 672) corresponding to a request to display an edit option for a fifth avatar feature of the plurality of avatar features. In response to detecting an input corresponding to a request to display an edit option for a fifth avatar feature (in some embodiments, after which), the computer system displays a representation of a first decal (e.g., 694 or 696) selected from a second avatar decal subset including a plurality of decals showing the fifth avatar feature and excluding decals not showing the fifth avatar feature. Displaying a representation of a first decal selected from a second subset of decals comprising a plurality of decals showing a fifth avatar feature and not comprising decals not showing a fifth avatar feature saves computational resources by displaying only the avatar decals showing the feature being edited and eliminating the display of decals not related to the user. Saving computing resources enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the computer system transitions from displaying a first decal selected from the second subset of head portrait decals to displaying a second decal selected from the second subset of head portrait decals. In some embodiments, the transition from the first decal in the second subset to the second decal in the second subset occurs automatically (e.g., after expiration of a predetermined amount of time) or manually (e.g., in response to an input (e.g., an input on the first decal in the second subset)).

In some implementations, updating the display of the avatar editing interface (e.g., 604 or 670) includes displaying an animation (e.g., 624) that converts the representation of the virtual avatar (e.g., 605) into a representation of the first avatar decal (e.g., 625) (e.g., sequential graphical transition). Animation of the display of the representation of the virtual avatar transitioning to the representation of the first avatar decal provides feedback to the user of the computer system (e.g., 600 or 650) that a different avatar feature has been selected for editing. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the transition is depicted as an animation in which the representation of the virtual avatar transitions to the representation of the first avatar decal.

In some embodiments, the transforming the representation of the virtual avatar (e.g., 605) into the animation (e.g., 624) of the representation of the first avatar decal (e.g., 625) includes adjusting a zoom level (e.g., zoom out) of the representation of the virtual avatar, and after adjusting the zoom level of the representation of the virtual avatar, displaying the representation of the first avatar decal. Displaying an animation that includes adjusting a zoom level of a representation of the virtual avatar and then displaying a representation of the first avatar decal provides feedback to a user of the computer system (e.g., 600 or 650) indicating that the avatar feature selected for editing is being emphasized or displayed in the representation of the first avatar decal. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the animation includes a fade effect in which the representation of the virtual avatar fades out gradually, while the representation of the first avatar is faded into view gradually.

In some implementations, the animation (e.g., 624) of the representation of the virtual avatar (e.g., 605) transitioning to the representation of the first avatar decal (e.g., 625) includes displaying facial features of the representation of the virtual avatar moving to the first pose shown in the representation of the first avatar decal. The facial features of the representation of the virtual avatar that the display moves to show the first pose in the representation of the first avatar decal provide feedback to a user of the computer system (e.g., 600 or 650) indicating that the avatar feature selected for editing is being emphasized or is being displayed in a pose shown in the representation of the first avatar decal. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, a computer system (e.g., 600 or 650) displays a message interface (e.g., 656) for a conversation between a first participant and a second participant via a display generation component (e.g., 601 or 651), wherein the message interface includes a decal display area (e.g., 656-3) including one or more avatar decals (e.g., 658) of a set of decals (e.g., a first avatar decal and/or a second avatar decal), wherein the avatar decals can be selected to initiate a process of adding a corresponding avatar decal (e.g., 658-2) (e.g., a representation of the avatar decal) to the conversation (e.g., 656-1). Displaying a message interface that includes a decal display area that includes a avatar decal in a collection of decals provides additional controls for adding the avatar decal to the conversation without cluttering the user interface with the additional displayed controls. Providing additional control options without cluttering the user interface with additional displayed controls enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the message interface includes a message display area (e.g., an area that includes messages received or transmitted by participants of a conversation; an area that includes messages being composed for the conversation). In some embodiments, selecting a corresponding avatar decal adds the avatar decal to the message display area.

In some embodiments, the decal display area 656-3 includes one or more decals (e.g., 658-4, 658-5, or 658-6) from a second set of virtual avatar-based decals that includes one or more decals that are different from the decals in the set of decals that include the first avatar decal (e.g., 658-2) and the second avatar decal (e.g., 658-1). In some embodiments, the second set of decals is not accessible in the avatar editing interface. For example, such stickers may include stickers that do not include portions of the virtual avatar that are editable using the avatar editing interface (e.g., stickers that do not include avatar arms/hands/torso).

It should be noted that the details of the process described above with respect to method 700 (e.g., fig. 7) also apply in a similar manner to the method described below. For example, method 900 optionally includes one or more of the features of the various methods described above with reference to method 700. For example, the display of the avatar decal for editing may be used in combination with the avatar editing depicted in fig. 8A-8U and described with respect to method 900. For the sake of brevity, these details are not repeated.

Fig. 8A-8U illustrate an exemplary user interface for editing an avatar according to some embodiments. The user interfaces in these figures are used to illustrate the processes described below, including the process in fig. 9.

Fig. 8A illustrates an apparatus 600 that displays an editing interface 804 (similar to editing interface 604) that is an interface for editing the appearance of an avatar and/or avatar decal. Editing interface 804 includes avatar 805 (similar to avatar 605). The appearance of the avatar 805 is edited by selecting different avatar feature options from various avatar feature categories 806 (similar to feature category 606). For example, in fig. 8A, hairstyle category 806-1 is currently selected (as indicated by the centered and bolded appearance of "hairstyle") and hairstyle option 812 is displayed for modifying the hairstyle of avatar 805. In addition, editing interface 804 includes color option 810 for selecting a hair color for avatar 805; and a slider 814 that is adjustable to modify the selected color by moving tab 814-1 along track 814-2. In fig. 8A, color option 810-1 is currently selected and avatar hair 805-1 (and the hair of hairstyle option 812) has a color corresponding to the selected color option 810-1.

In some implementations, the editing interface 804 includes tabs that can be selected to add and switch between color options displayed for the corresponding avatar feature. In fig. 8A, editing interface 804 includes a hair tab 816 and a highlighting tab 818. As depicted in fig. 8A, the hair tab 816 is selected by an enlarged and optionally bolded appearance of the tab. When the hair tab 816 is selected, the device 600 displays a color option 810 for modifying the hair color of the avatar. The hair tab 816 includes text 816-1 indicating the characteristics modified by the color option 810 and a color indicator 816-2, in some embodiments depicting the color currently selected for the head portrait hair. Thus, in FIG. 8A, color indicator 816-2 is the same color as color option 810-1. Highlighting tab 818 is shown as having a shadow effect indicating that highlighting is currently disabled for the head portrait hair.

The highlighting tab 818 may be selected to enable highlighting of the scalp hair. For example, in fig. 8A, the device 600 detects an input 820 on the highlighting tab 818 and, in response, replaces the color option 810 with a color option 822, as shown in fig. 8B. The device 600 automatically selects a color option for highlighting as indicated by the selected color option 822-1. Thus, the head portrait hair 805-1 is modified to include highlighting 805-2 having a color corresponding to the selected color option 822-1. The highlighting color selected is also applied to the hair style option 812. The highlighting tab 818 is modified to have a selected appearance as indicated by the enlarged and bolded appearance of the tab. In addition, shadows are removed from tab 818, rendering text 818-1, and color indicator 818-2 is displayed to indicate the current color selected for highlighting. A removal affordance 826 is displayed on the highlighting tab 826 and can be selected to remove highlighting from the head image.

When the highlighting tab 818 is selected, the apparatus 600 displays highlighting pattern options 824 that can be selected to change the highlighting pattern for the hair of the avatar. In FIG. 8B, modern style 824-1 is currently selected. The device 600 detects the input 828 selecting the gradient pattern 824-2 and in response updates the highlighting 805-2 and the highlighting depicted on the hair style options 812 to the gradient pattern, as shown in fig. 8C.

In FIG. 8C, device 600 detects input 830 selecting highlighting color 822-2 and, in response, updates highlighting 805-2, color indicator 818-2, and the highlighting depicted in hairstyle option 812 and highlighting style option 824 to the selected color of color option 822-2, as shown in FIG. 8D. The device 600 detects the input 832 selecting the hair tab 816 and in response updates the editing interface 804 to display the color option 810, as shown in fig. 8E.

In fig. 8E, the device 600 detects an input 834 selecting the hair color option 810-2 and, in response, updates the avatar hair 805-1, color indicator 816-2, and hairstyle option 812 to have the selected hair color option 810-2 while continuing to display highlighting, as shown in fig. 8F. In fig. 8F, the device 600 detects an input 836 for selecting the remove affordance 826. In response, the device 600 updates the editing interface 804 by removing highlighting from the head portrait hair 805-1 and hairstyle options 812 and returning the highlighting tab 818 to the disabled state, as shown in fig. 8G. The device 600 detects an input 838 regarding the feature class 806 and in response changes to the head-eye class 806-2 as shown in fig. 8H.

Fig. 8H-8L illustrate exemplary embodiments for selecting eye colors. In fig. 8H, device 600 displays editing interface 804 with eye color option 840, eye style option 842, and eye color tabs 844 and 846. When tab 846 is disabled, tab 846 includes text 846-1 indicating that selection of tab 846 enables selection of the second eye color, and tab 844 includes text 844-1 indicating that color option 840 may be selected to change the color of both head-image eyes 805-3a and 805-3 b. Eye color 840-1 is currently selected for both head and eyes and is shown in head and eyes 805-3a and 805-3b, eye pattern option 842, and color indicator 844-2. The device 600 detects an input 848 selecting the eye color option 840-2 and, in response, updates the head-to-eye color, as shown in fig. 8I.

In fig. 8I, device 600 detects input 850 selecting tab 846 and, in response, updates editing interface 804 to enable a mode in which colors can be individually selected for respective avatar eyes 805-3a and 805-3b, as shown in fig. 8J. Accordingly, tab 846 is updated to display color indicator 846-2 and text 846-3, which indicates that color option 852 may be selected to select the right eye color for avatar right eye 805-3 a. Similarly, tab 844 is updated to display text 844-3 indicating that color option 840 is selectable to select a left eye color for head portrait left eye 805-3b when tab 844 is selected and a separate eye color is enabled. Tab 846 also includes a removal affordance 854 that can be selected to remove the individual eye colors for head portrait right eye 805-3a, returning to a mode in which a single eye color is selected for both head portrait eyes together, similar to the mode shown in fig. 8I. In fig. 8J, device 600 detects input 856 for changing the color of avatar right eye 805-3a with respect to color option 852-2 and input 858 for selecting tab 844 and returning to the color option for selecting the left eye color.

Fig. 8K shows editing interface 804 in response to inputs 856 and 858. Specifically, device 600 displays color option 840 (which may now be selected for selecting a left eye color), and displays the right eye of the avatar in right eye 805-3a, color indicator 846-2, and avatar eye style option 842 having a color corresponding to selected color option 852-2. The device 600 detects an input 860 selecting a color option 844-2 for the left eye 805-3 b. Thus, device 600 displays the left eye of the avatar 805-3b, color indicator 844-2, and the left eye of the avatar in avatar eye-style option 842 having a color corresponding to the selected color option 840-3, as shown in FIG. 8L. In fig. 8L, the device 600 detects an input 862 regarding the avatar feature class 806 and in response changes to the avatar headwear class 806-3, as shown in fig. 8M.

Fig. 8M to 8U illustrate exemplary embodiments for selecting colors for head gear accessories. In fig. 8M, the headwear category 806-3 is selected and the editing interface 804 includes a headwear color option 864, a headwear option 866, and headwear color tabs 868 and 870. When tab 868 is selected, device 600 displays color option 864 for modifying the primary color of the avatar headwear color. Tab 868 includes a color indicator 868-2 and text 868-1 that indicates that a major portion of the headwear is modified by a color option associated with tab 868. Tab 870 is currently disabled and includes text 870-1 that indicates that tab 870 is available to add color to the avatar headwear. The headwear option 866-1 is selected and the avatar 805 is shown with a hat 805-4 corresponding to the headwear option 866-1. Because tab 868 is currently selected, color option 864 may be selected to select the color of the selected headwear option (e.g., cap 805-4). The color option 864-1 is currently selected and the avatar cap 805-4, the color indicator 868-2, and the avatar headwear option 866 have colors corresponding to the selected color option 864-1.

In FIG. 8M, the device 600 detects an input 872 on the tab 870 to add a second color to the cap 805-4, as shown in FIG. 8N. The device 600 updates the editing interface 804 to display the first highlighting color options 876 that can be selected to select the highlighting color for the avatar headwear. The emphasized color option 876-1 is selected and the cap 805-4 is shown to include a main portion 873 having a main color option 864-1 and an emphasized portion 875 having an emphasized color option 876-1. Similarly, the headwear option 866 is updated to include two colors, and the color indicator 870-2 is shown with the selected color on the emphasis tab 870.

In some implementations, when a color is added to the head portrait feature, additional options for adding a subsequent color to the head portrait feature are displayed. For example, in fig. 8N, after adding the second color to the headwear, device 600 displays tab 874, which may be selected to add a third color to the headwear. Tab 874 includes text 874-1 indicating that additional highlighting colors can be added using tab 874. The device 600 detects an input 878 selecting tab 874 and in response, adds a third color (e.g., a second emphasized color) to the avatar headwear, as shown in fig. 8O.

In FIG. 8O, the device 600 updates the editing interface 804 to display the second emphasized color option 880, where option 880-1 is selected. Thus, the device 600 displays the head portrait hat 805-4 updated to include the second emphasized portion 877 (similarly, the headwear option 866 is updated to include the third color). The second emphasized portion 877, color indicator 874-2, and avatar headwear option 866 include colors corresponding to option 880-1, as shown in fig. 8O. The text depicted on tabs 870 and 874 is updated based on the addition of the second highlighting color. Specifically, text 870-1 indicates that tab 870 corresponds to a first emphasized color and text 874-1 indicates that tab 874 corresponds to a second emphasized color. Tab 870 includes a removal affordance 881 that is selectable to remove a first highlighting color, and tab 874 includes a removal affordance 883 that is selectable to remove a second highlighting color. The device 600 detects an input 882 for selecting the primary color tab 868 and, in response, displays a color option 864 that can be selected to select the primary color for the avatar headwear.

In some embodiments, slider 814 may be used to modify one or more visual characteristics of the selected color option, such as shading, highlighting, brightness, hue, contrast, or other visual characteristics. For example, in fig. 8P-8U, slider 814 is used to modify the shading of the selected color option. In FIG. 8P, device 600 detects an input 884 dragging tab 814-1 to the distal end of slider track 814-2 to reduce the shading of the color corresponding to primary color option 864-1. In fig. 8Q, the primary color portion 873 of the head portrait hat 805-4 is shown as unshaded and the headwear option 866 is similarly updated. In some implementations, the adjustment slider also adjusts the corresponding color option (e.g., 864-1) and color indicator (e.g., 868-2) displayed in the editing interface 804. In fig. 8Q, the device 600 detects an input 886 selecting the second emphasized color tab 874 and, in response, displays a color option 880, as shown in fig. 8R.

In some embodiments, when slider 814 is used to adjust the secondary color (e.g., the first accent color or the second accent color), the slider is biased to achieve a position along track 814-2 that matches the primary accessory color. Thus, if the user places tab 814-1 within a threshold distance of the location on track 814-2 that matches the primary accessory color, device 600 automatically captures the tab to the matching location so that the accessory color matches the primary color, allowing the user to easily and accurately match the accessory color to the primary color. Fig. 8R to 8U show one example of such an embodiment.

In fig. 8R, the device 600 detects an input 888 selecting a second accessory color option 880-2, which is the same color as the primary color option 864-1. The device 600 updates the editing interface 804 in response to the selection, as shown in fig. 8S. Thus, the primary color portion 873 and the secondary emphasized portion 877 are shown as having the same color (as indicated by the same shading pattern) in the head portrait hat 805-4 and the headwear option 866. The device 600 detects an input 890 that is a drag gesture that moves the tab 814-1 to the right but not to the end of the track 814-2, as shown in FIG. 8T. In fig. 8T, the input 890 is held and the apparatus 600 updates the shade of the second emphasized color, as shown by the second emphasized portion 877 having a light shade on the hat 805-4 and the headwear option 866. The user then releases the gesture at the location shown in fig. 8T. If the position of tab 814-1 is not within the threshold distance of the corresponding coloring position of the color of main portion 873, device 600 maintains tab 814-1 in the same position when the input is released. However, in the implementation depicted in FIGS. 8T and 8U, the position of tab 814-1 is within a threshold distance of the position of the track 814-2 corresponding to the shade of the color of main portion 873. Thus, when input 890 is terminated and tab 814-1 is in the position shown in FIG. 8T, device 600 captures tab 814-1 to the distal end of track 814-2, which corresponds to the shade of the color of main portion 873, as shown in FIG. 8U. In some embodiments, device 600 generates haptic response 892 when tab 814-1 is captured in the position shown in FIG. 8U (e.g., the end of track 814-2).

Fig. 9 is a flow chart illustrating a method for editing an avatar using a computer system, according to some embodiments. The method 900 is performed at a computer system (e.g., a smart phone, a tablet, a smart watch) in communication with a display generation component (e.g., a display controller, a touch-sensitive display system) and one or more input devices (e.g., a touch-sensitive surface). Some operations in method 900 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

As described below, the method 900 provides an intuitive way for editing an avatar. The method reduces the cognitive burden of the user when editing the head portrait, thereby creating a more effective human-machine interface. For battery-powered computing devices, enabling users to edit avatars faster and more efficiently saves power and increases the time interval between battery charges.

A computer system (e.g., 600 or 650) displays (902) via a display generation component (e.g., 601 or 651) an avatar editing interface (e.g., 804) (e.g., an interface for editing one or more features of an avatar character), the avatar editing interface comprising (e.g., concurrently displaying): (904) A representation of a virtual avatar (e.g., 805) (e.g., an avatar customizable and optionally created by a user of a computer system) (e.g., a live preview of a virtual avatar tracking movement of a user's face), wherein the representation of the virtual avatar includes a first avatar feature (e.g., 805-1, 805-3, or 805-4) and the first avatar feature includes a first color (e.g., 810-1, 840-1, or 864-1) (and optionally does not include a second color) (e.g., an avatar hairstyle feature; an avatar apparel feature (e.g., a shirt); an avatar arm feature; an headwear feature; an avatar eye feature); (906) A first graphical interface object (e.g., 818, 846, or 870) (e.g., an "add color" affordance) that is selectable to initiate a process for modifying the appearance of the first head portrait feature to include a second color (e.g., adding a second color that is displayed with the first color; a color that is different from the first color); and (908) a plurality of selectable options (e.g., 812, 842, or 866) (e.g., different hair style options, different apparel options, different arm options, different headwear options, different eye color options) for modifying a characteristic of the first avatar feature (e.g., the selectable options each represent a value of the characteristic, such as a first apparel option, a second apparel option, a third apparel option, etc.), wherein the plurality of selectable options includes a respective representation of the first avatar feature and the first avatar feature includes a first color (e.g., each avatar apparel option includes a representation of the first avatar feature (e.g., avatar apparel or shirt) having the first color).

In displaying the avatar editing interface, the computer system (e.g., 600 or 650) detects (910) an input (e.g., 820, 850, or 872) directed to a first graphical interface object (e.g., 818, 846, or 870) via one or more input devices (e.g., 601;602;651; or 652). In response to detecting an input (e.g., 820, 850, or 872) directed to a first graphical interface object (e.g., 818, 846, or 870), a computer system (e.g., 600; 650) updates (912) a display of an avatar editing interface (e.g., 804), the updating comprising: the updated representation of the virtual avatar (e.g., 805) is displayed (914). The updated representation of the virtual avatar includes a first avatar feature (e.g., 805-1, 805-3, or 805-4), and the first avatar feature includes a first color (e.g., 810-1, 840-1, or 864-1) and a second color (e.g., 822-1, 852-1, or 876-1) (e.g., the avatar is updated such that the first avatar feature (e.g., apparel or shirt) has the first color and the second color). In response to detecting input directed to the first graphical interface object, the computer system displays (916) the updated plurality of selectable options (e.g., 812 in FIG. 8B, 842 in FIG. 8J, or 866 in FIG. 8N). The updated plurality of selectable options includes a respective updated representation of the first avatar feature, and the first avatar feature includes a first color and a second color (e.g., for each avatar garment option, the representation of the first avatar feature (e.g., avatar garment or shirt) is updated to have the first color and the second color). In response to detecting an input directed to the first graphical interface object, the computer system displays (918) a control (e.g., 822, 852, or 876) for modifying a second color (e.g., for selecting a different set of color options for the second color) (e.g., replaces the display of the first set of color options for selecting the first color with the second set of color options for selecting the second color) that was not displayed prior to detecting the input. Displaying controls for modifying the second color that were not displayed prior to detection of the input provides additional control options without cluttering the user interface with the additionally displayed controls until such additional control options are desired and avoids accidental input when additional control options are not displayed. Providing additional control options without cluttering the user interface and avoiding accidental inputs due to additional displayed controls enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some implementations, the second color (e.g., 822-1, 852-1, or 876-1) is selected from a set of color options (e.g., 822, 852, or 876) (e.g., color options selectable via a control for modifying the second color) (e.g., automatically; without further input from a user of the computer system) in response to detecting an input (e.g., 820, 850, or 872) directed to the first graphical interface object (e.g., 818, 846, or 870). Selecting the second color from the set of color options in response to detecting the input directed to the first graphical interface object automatically applies the second color to the representation of the virtual avatar and the plurality of selectable options without additional user input. Automatically performing operations when a set of conditions has been met reduces the number of inputs at the computer system (e.g., 600; 650), enhances operability of the computer system and makes the user-system interface more efficient (e.g., by helping a user provide appropriate inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to more quickly and efficiently use the system.

In some embodiments, updating the display of the avatar editing interface (e.g., 804) includes displaying a second graphical interface object (e.g., 874) (e.g., a second "add color" affordance) that is selectable to initiate a process for modifying the appearance of the first avatar feature (e.g., 805-4) to include a third color (e.g., 880-1) (e.g., adding a third color that is displayed with the first color and the second color). The second graphical interface object that is selectable to initiate a process for modifying the appearance of the first portrait feature to include a third color provides additional control options for adding color to the first portrait feature without cluttering the user interface with additional displayed controls until such additional control options are desired and accidental input when no additional control options are displayed is avoided. Providing additional control options without cluttering the user interface and avoiding accidental inputs due to additional displayed controls enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently.

In some embodiments, after updating the display of the avatar editing interface (e.g., 804) (e.g., after modifying the appearance of the first avatar feature to include the second color), the avatar editing interface includes a first selectable object (e.g., 868) (e.g., primary color tab (e.g., "primary" color tab)) associated with a first portion (e.g., 873) of the first avatar feature (e.g., 805-4) (e.g., crown portion of the avatar cap) and a second selectable object (e.g., 870 or 874) (e.g., secondary color tab (e.g., "emphasize" color tab)) associated with a second portion (e.g., 875) of the first avatar feature (e.g., brim portion of the avatar cap). In some embodiments, a computer system (e.g., 600, 650) receives a set of one or more inputs (e.g., 882, 884, 886, 888, or 890) including a selection (e.g., from a second set of colors) of a fourth color (e.g., 884, 888, or 890). In some embodiments, the one or more inputs include a selection of the first selectable object and/or the second selectable object. In some embodiments, selectable options corresponding to the second set of colors are displayed as part of a control for modifying the second color. In some embodiments, selectable options corresponding to the second set of colors are displayed as at least a portion of a control for modifying the first color. In response to receiving the set of one or more inputs including the selection of the fourth color, displaying a first head portrait feature (e.g., 805-4) having the fourth color (e.g., 864-1 or 880-2), the displaying including: in accordance with a determination that the first selectable object (e.g., 868) is in the selected state when the fourth color is selected (e.g., the first selectable object is highlighted, bolded, sketched, or otherwise visually emphasized relative to the second selectable object), a first portion of the avatar feature having the fourth color (e.g., portion 873 of 805-4 in fig. 8Q has a color of 864-1) (e.g., the color of the first portion of the avatar feature is changed to the fourth color) (in some embodiments, the color of the second portion of the avatar feature is abandoned (e.g., the second portion of the avatar feature having the previously selected color (e.g., the second color) continues to be displayed)); and in accordance with a determination that the second selectable object (e.g., 874) is in the selected state when the fourth color is selected (e.g., the second selectable object is highlighted, bolded, sketched, or otherwise visually emphasized with respect to the first selectable object), a second portion of the avatar feature having the fourth color (e.g., portion 877 of 805-4 in fig. 8S has a color of 880-2) (e.g., the color of the second portion of the avatar feature is changed to the fourth color) (in some embodiments, the color of the first portion of the avatar feature is abandoned (e.g., the first portion of the avatar feature having the previously selected color (e.g., the first color) continues to be displayed)). When the fourth color is selected, when the first selectable object is in the selected state, displaying a first portion of the avatar feature having the fourth color, and when the fourth color is selected, displaying a second portion of the avatar feature having the fourth color when the second selectable object is in the selected state provides an enhanced control scheme for adjusting the color of the avatar feature that provides additional control options for applying the fourth color to the first portion or the second portion of the first avatar feature without cluttering the user interface due to the additional controls, which when displayed cause the plurality of selectable options to move off the screen, thereby preventing a user from viewing a change to the avatar feature depicted in the plurality of selectable options while adjusting the color. Providing additional control options without cluttering the user interface with additional displayed controls enhances the operability of the computer system (e.g., 600 or 650) and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some implementations, one of the first selectable object or the second selectable object defaults to being in a selected state (and the other selectable object is in an unselected or deselected state). In some implementations, the first selectable object or the second selectable object transitions to a selected state (e.g., is selected) in response to an input directed to the respective selectable object (when the respective selectable object is currently in an unselected (e.g., deselected) state). In some embodiments, selecting the first selectable object deselects the second selectable object, and vice versa.

In some embodiments, displaying the plurality of selectable options (e.g., 812, 842, or 866) includes displaying the plurality of selectable options at a first position (e.g., the position shown in fig. 8H or the position shown in fig. 8M) relative to the display generating component (e.g., 601 or 651) (e.g., a position corresponding to a position on the display generating component). Displaying the updated plurality of selectable options includes displaying the updated plurality of selectable options in a first area of the user interface (e.g., at a first location relative to the display generating component). After updating the display of the avatar editing interface (e.g., 804) (e.g., after modifying the appearance of the first avatar feature to include the second color), the computer system (e.g., 600 or 651) receives a set of one or more inputs (e.g., 848, 856, 860) (e.g., when the plurality of selectable options are displayed at the first location; when the updated plurality of selectable options are displayed at the first location). In response to receiving the set of one or more inputs, the computer system updates a representation of the virtual avatar (e.g., 805), the updating comprising: in accordance with a determination that the set of one or more inputs includes an input (e.g., 860) corresponding to a request to change a first color of a first avatar feature, changing the first color of the first avatar feature while displaying a plurality of selectable options in a first area of the user interface (e.g., avatar eye 805-3b changes to color 844-2 in fig. 8L) (in some embodiments, when the user selects/changes the first color of the avatar feature, the plurality of selectable options (e.g., different hairstyle options; different apparel options; different arm options; different headwear options; different eye color options) remain displayed at a fixed location); and in accordance with a determination that the set of one or more inputs includes an input corresponding to a request to change a second color of the first avatar feature (e.g., 856), changing the second color of the first avatar feature while displaying the updated plurality of selectable options in the first area of the user interface (e.g., avatar eye 805-3a changes to color 852-2 in fig. 8K and eye-style option 842 remains displayed at the same location). Changing the first color of the first portrait feature while displaying a plurality of selectable options at a first area of the user interface and changing the second color of the first portrait feature while displaying the updated plurality of selectable options at the first area of the user interface provides a user of the computer system (e.g., 600 or 650) with a color change showing the first portrait feature while maintaining a fixed position of the selectable options showing the changed color such that the user can more easily observe feedback of the change in color. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the updated plurality of selectable options (e.g., different hair style options, different apparel options, different arm options, different headwear options, different eye color options) remain displayed at a fixed location as the user selects/changes the second color of the avatar characteristics.

In some embodiments, displaying a control for modifying the second color that is not displayed prior to detecting the input includes displaying an option (e.g., 826, 854, 881, or 883) that can be selected to initiate a process for removing the second color (e.g., highlighting color) from the first avatar feature (e.g., 805-1, 805-3, or 805-4) (e.g., avatar hair). In some embodiments, when the first portrait feature (e.g., 805-1, 805-3, or 805-4) includes a second color (e.g., when the second color is applied to the first portrait feature), an option is displayed that can be selected to initiate a process for removing the second color from the first portrait feature. Displaying options that can be selected to initiate a process for removing the second color from the first portrait feature when the first portrait feature includes the second color provides additional control options for removing the second color without cluttering the user interface with additional displayed controls until such additional control options are desired, and accidental input when additional control options are not displayed is avoided. Providing additional control options without cluttering the user interface and avoiding accidental inputs due to additional displayed controls enhances the operability of the computer system (e.g., 600 or 650) and makes the user-system interface more efficient (e.g., by helping the user provide proper inputs and reducing user errors in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to more quickly and efficiently use the system. In some embodiments, in response to detecting the input pointing to the option, the computer system removes the second color from the first avatar feature and updates the display of the avatar editing interface, the updating comprising: displaying a representation of a virtual avatar, the representation of the virtual avatar including a first avatar feature having no second color (and having a first color); displaying a plurality of selectable options including respective representations of the first head portrait features without the second color (and with the first color); and displaying the control for modifying the first color (and ceasing to display the control for modifying the second color). In some embodiments, an option to remove the second color is displayed for some of the avatar characteristics but not for others of the avatar characteristics. For example, in some embodiments, the options are displayed to remove color for a portion of the body of the avatar (e.g., avatar hair highlighting color, eye color, and/or skin color), but are not displayed to remove color for accessories of the avatar (e.g., articles of clothing such as hats, shirts, and/or glasses).

In some embodiments, the first avatar feature is an accessory (e.g., 805-4) of the virtual avatar (e.g., 805) (e.g., an article of clothing such as a hat, shirt, glasses, etc.). In some embodiments, the first avatar feature is a portion of the body (e.g., 805-1, 805-3) of the virtual avatar (e.g., a portion of the body of the avatar such as eyes, hair, etc. of the avatar).

In some embodiments, displaying an avatar editing interface (e.g., 804) comprising a first graphical interface object (e.g., 818, 846, or 870) comprises: in accordance with a determination that the first avatar feature is a first type of avatar feature (e.g., 805-1) (e.g., avatar hair), the first graphical interface object includes first text (e.g., 818-1) based on the first type of avatar feature (e.g., text having a "highlighting" typeface) (e.g., text having a color that indicates how the second color is to be applied to the first avatar feature or indicates which portion of the first avatar feature is to receive the second color); and in accordance with a determination that the first avatar feature is a second type of avatar feature (e.g., 805-4) different from the first type of avatar feature (e.g., avatar garment), the first graphical interface object includes second text (e.g., 870-1) different from the first text and based on the second type of avatar feature (e.g., having text with a "emphasis" typeface) (e.g., having text indicating how the second color is to be applied to the first avatar feature or indicating which portion of the first avatar feature is to receive the second color). According to the type of the first avatar feature, displaying a first graphical interface object including a first text based on the first type of avatar feature when the first avatar feature is of the first type, and displaying the first graphical interface object including a second text different from the first text and based on the second type of avatar feature when the first avatar feature is of the second type, providing feedback to a user of the computer system (e.g., 600 or 650) regarding a function of a control associated with the first graphical interface object. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, text displayed on the first graphical interface object changes depending on which avatar characteristics are being modified to add the second color. For example, when the first head portrait feature is head portrait hair, the text has a "highlighting" word. For another example, when the first avatar characteristic is avatar clothing, the text has a word of "emphasis". As another example, when the first avatar feature is an avatar eye, the text has a word of "color".

In some embodiments, prior to detecting an input directed to a first graphical interface object (e.g., 818, 846, or 870): the avatar editing interface (e.g., 804) includes controls (e.g., 844) for modifying the first color (e.g., an eye color tab); and the control for modifying the first color includes a third text (e.g., 844-1) (e.g., an "eye color"); and updating the display of the avatar editing interface includes displaying a control for modifying the first color with a fourth text (e.g., 844-3) (e.g., "left") that is different from the third text. Displaying a control for modifying the first color having a fourth text that is different from the third text provides feedback to a user of the computer system (e.g., 600 or 650) regarding functionality of the control for modifying the first color after the second color has been added to the first portrait feature. Providing improved feedback enhances the operability of the computer system and makes the user-system interface more efficient (e.g., by helping the user provide proper input and reducing user error in operating/interacting with the computer system), which in turn reduces power usage and extends battery life of the computer system by enabling the user to use the system more quickly and efficiently. In some embodiments, the first graphical interface object includes a fifth text (e.g., "+ color") before the computer system detects an input directed to the first graphical interface object. In some embodiments, updating the display of the avatar editing interface includes displaying a first graphical interface object having a sixth text (e.g., "right") that is different from the fifth text.

In some embodiments, the first avatar characteristic includes avatar hair (e.g., 805-4). In some embodiments, displaying the control for modifying the second color that was not displayed prior to detecting the input includes displaying one or more avatar hair highlighting style options (e.g., 824) (and optionally, a slider for adjusting a gradual change in avatar hair highlighting color, wherein the highlighting style options are displayed adjacent to the slider (e.g., below and/or above the slider)), which may be selected to change an avatar hair highlighting style (e.g., an avatar hair highlighting style displayed in a plurality of avatar hair style options) from a first highlighting style (e.g., 824-1) (e.g., a default style or a user-customized style) to a second highlighting style (e.g., 824-2) (e.g., a predefined style) that is different from the first style. Displaying one or more avatar hair highlighting style options provides additional control options for changing the avatar hair highlighting style prior to detecting an input, without cluttering the user interface with additional displayed controls, and avoiding accidental input when no additional control options are displayed. In some embodiments, the method comprises: detecting selection of a second avatar hair highlighting style option while the first avatar hair highlighting style option is selected and a plurality of avatar hair style options having a first highlighting style and a second color are displayed; and modifying the plurality of hair style options from having the first highlighting pattern and the second color to having the second highlighting pattern and the second color in response to detecting the selection of the second hair style option. In some embodiments, the avatar hair highlighting pattern options correspond to predefined highlighting patterns (hair length, curly, straight, etc.) that the user would otherwise have to provide one or more input additional inputs directed to one or more additional controls and/or options to be created.

In some embodiments, displaying one or more avatar hair highlighting style options (e.g., 824) includes: displaying a first representation of the virtual avatar (e.g., a preview of the avatar having a first hair highlighting pattern and a second color), the first representation having a second color and a first hair highlighting pattern (e.g., 824-1) corresponding to a first avatar hair highlighting pattern option of the one or more avatar hair highlighting pattern options; and displaying a second representation of the virtual avatar (e.g., a preview of the avatar having a second hair highlighting pattern and a second color), the second representation having a second color and a second hair highlighting pattern (e.g., 824-2) corresponding to a second avatar hair highlighting pattern option of the one or more avatar hair highlighting pattern options.

In some embodiments, displaying one or more avatar hair highlighting style options (e.g., 824) includes: displaying an indication of the first hair highlighting pattern (e.g., 824-1) (e.g., text or labels describing the highlighting pattern (e.g., modern, classical, and/or gradient); and displaying an indication (e.g., text or labels describing the highlighting pattern (e.g., modern, classical, and/or gradient)) of the second hair highlighting pattern (e.g., 824-1).

In some embodiments, displaying the control for modifying the second color that was not displayed prior to detecting the input includes displaying a color slider (e.g., 814) having a selectable element (e.g., 814-1) that is adjustable to modify the second color (e.g., 880-2). In some embodiments, a computer system (e.g., 600; 650) receives an input (e.g., 890) corresponding to a request to adjust a selectable element to a first position on a color slider (e.g., the position shown in FIG. 8T) (e.g., an input to move the selectable element to the first position on the color slider for modifying a second color). In response to receiving an input corresponding to a request to adjust a selectable element to a first position on the color slider, the computer system performs the following. In accordance with a determination that a first set of criteria is met (e.g., the first location is within a threshold distance from a color value on the color slider that matches the first color), the computer system adjusts the selectable element to a second location on the color slider that is different from the first location and corresponds to the first color (e.g., a rightmost location on track 814-2 shown in fig. 8U) (e.g., captures the selectable element to a color value on the color slider that matches the first color, and updates the second color to have the first color) (e.g., and optionally, generates a haptic and/or audio output). In accordance with a determination that the first set of criteria is not met (e.g., the first location is not within a threshold distance from a color value on the color slider that matches the first color), the computer system adjusts the selectable element to the first location on the color slider (e.g., moves the selectable element to a color value corresponding to the first location on the color slider and updates the second color to have a color value corresponding to the first location on the color slider). In accordance with a determination that the first set of criteria is met, adjusting the selectable element to a second location on the color slider that is different from the first location and corresponds to the first color allows the user to easily and conveniently select a second color that matches the first color without using trial and error to match the colors. Performing an operation when a set of conditions has been met without requiring further user input enhances the operability of the device and makes the user-device interface more efficient (e.g., by helping the user provide appropriate input and reducing user error in operating/interacting with the device), which in turn reduces power usage and extends battery life of the device by enabling the user to use the device more quickly and efficiently.

It is noted that the details of the process described above with respect to method 900 (e.g., fig. 9) also apply in a similar manner to the method described above. For example, method 700 optionally includes one or more of the features of the various methods described above with reference to method 900. For example, a color editing feature may be used to edit the avatar decal. For the sake of brevity, these details are not repeated.

The foregoing description, for purposes of explanation, has been described with reference to specific embodiments. However, the illustrative discussions above are not intended to be exhaustive or to limit the invention to the precise forms disclosed. Many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the techniques and their practical applications. Those skilled in the art will be able to best utilize the techniques and various embodiments with various modifications as are suited to the particular use contemplated.

While the present disclosure and examples have been fully described with reference to the accompanying drawings, it is to be noted that various changes and modifications will become apparent to those skilled in the art. It should be understood that such variations and modifications are considered to be included within the scope of the disclosure and examples as defined by the claims.

As described above, one aspect of the present technology is to collect and use data from various sources to display and/or edit an avatar. The present disclosure contemplates that in some examples, such collected data may include personal information data that uniquely identifies or may be used to contact or locate a particular person. Such personal information data may include demographic data, location-based data, telephone numbers, email addresses, social network IDs, home addresses, data or records related to the user's health or fitness level (e.g., vital sign measurements, medication information, exercise information), date of birth, or any other identifying or personal information.

The present disclosure recognizes that the use of such personal information data in the present technology may be used to benefit users. For example, personal information data may be used to deliver an avatar having a particular appearance or characteristic of greater interest to the user. Thus, the use of such personal information data enables a user to have programmatic control over the delivered content. In addition, the present disclosure contemplates other uses for personal information data that are beneficial to the user. For example, health and fitness data may be used to provide insight into the overall health of a user, or may be used as positive feedback to individuals using technology to pursue health goals.

The present disclosure contemplates that entities responsible for collecting, analyzing, disclosing, transmitting, storing, or otherwise using such personal information data will adhere to established privacy policies and/or privacy practices. In particular, such entities should exercise and adhere to privacy policies and practices that are recognized as meeting or exceeding industry or government requirements for maintaining the privacy and security of personal information data. Such policies should be readily accessible to the user and should be updated as the collection and/or use of the data changes. Personal information from users should be collected for legal and reasonable use by entities and not shared or sold outside of these legal uses. In addition, such collection/sharing should be performed after informed consent is received from the user. In addition, such entities should consider taking any necessary steps to defend and secure access to such personal information data and to ensure that others who have access to personal information data adhere to their privacy policies and procedures. In addition, such entities may subject themselves to third party evaluations to prove compliance with widely accepted privacy policies and practices. In addition, policies and practices should be adjusted to collect and/or access specific types of personal information data and to suit applicable laws and standards including specific considerations of jurisdiction. For example, in the united states, the collection or acquisition of certain health data may be governed by federal and/or state law, such as the health insurance flow and liability act (HIPAA); while health data in other countries may be subject to other regulations and policies and should be processed accordingly. Thus, different privacy practices should be maintained for different personal data types in each country.

In spite of the foregoing, the present disclosure also contemplates embodiments in which a user selectively prevents use or access to personal information data. That is, the present disclosure contemplates that hardware elements and/or software elements may be provided to prevent or block access to such personal information data. For example, the present technology may be configured to allow a user to select "opt-in" or "opt-out" to participate in the collection of personal information data. In addition to providing the "opt-in" and "opt-out" options, the present disclosure also contemplates providing notifications related to accessing or using personal information. For example, the user may be notified that his personal information data will be accessed when the application is downloaded, and then be reminded again just before the personal information data is accessed by the application.

Further, it is an object of the present disclosure that personal information data should be managed and processed to minimize the risk of inadvertent or unauthorized access or use. Once the data is no longer needed, risk can be minimized by limiting the data collection and deleting the data. In addition, and when applicable, included in certain health-related applications, the data de-identification may be used to protect the privacy of the user. De-identification may be facilitated by removing specific identifiers (e.g., date of birth, etc.), controlling the amount or specificity of stored data (e.g., collecting location data at a city level instead of at an address level), controlling how data is stored (e.g., aggregating data among users), and/or other methods, as appropriate.

Thus, while the present disclosure broadly covers the use of personal information data to implement one or more of the various disclosed embodiments, the present disclosure also contemplates that the various embodiments may be implemented without accessing such personal information data. That is, various embodiments of the present technology do not fail to function properly due to the lack of all or a portion of such personal information data. For example, the avatar content may be selected and delivered to the user by inferring a preference based on non-personal information data or absolute minimum amount of personal information, such as content being requested by a device associated with the user, other non-personal information available to the device, or publicly available information.

Claims (52)

1. A method, comprising:

at a computer system in communication with a display generation component and one or more input devices:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and

A first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar;

detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second one of the plurality of avatar characteristics while displaying the avatar editing interface including a representation of the virtual avatar; and

in response to detecting the input, updating a display of the avatar editing interface,

the updating includes:

displaying a representation of the first avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature; and

a second set of one or more graphical interface objects is displayed that is selectable for modifying one or more of the avatar characteristics visible in the first avatar decal.

2. The method according to claim 1, wherein:

the first avatar decal showing the virtual avatar in the first pose includes a first portion of the virtual avatar that is not visible in a representation of the virtual avatar displayed in the avatar editing interface; and is also provided with

The second avatar decal showing the virtual avatar in the second pose includes a second portion of the virtual avatar that is not visible in the representation of the virtual avatar displayed in the avatar editing interface.

3. The method of any of claims 1-2, further comprising:

detecting a second input via the one or more input devices while displaying the representation of the first head portrait decal; and

in response to detecting the second input, a representation of the second avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature is displayed.

4. A method according to claim 3, further comprising:

detecting, via the one or more input devices, a set of one or more inputs including an input corresponding to a request to change the appearance of the virtual avatar while displaying the representation of the second avatar decal having the first appearance; and

in response to detecting the set of one or more inputs, displaying a representation of the second avatar decal having a second appearance, the second appearance being different from the first appearance and based on the request to change the appearance of the virtual avatar.

5. The method of any one of claims 1 to 4, further comprising:

upon displaying the avatar editing interface including a representation of the virtual avatar:

detecting, via the one or more input devices, an input corresponding to a request to display an edit option for a third avatar feature of the plurality of avatar features; and

in response to detecting the input corresponding to the request to display editing options for the third avatar feature of the plurality of avatar features, a third set of one or more graphical interface objects capable of being selected for modifying the third avatar feature is displayed.

6. The method of any one of claims 1 to 5, further comprising:

upon displaying the avatar editing interface including a representation of the first avatar decal:

detecting, via the one or more input devices, an input corresponding to a request to display an edit option for a fourth avatar feature of the plurality of avatar features; and

in response to detecting the input corresponding to the request to display editing options for the fourth head portrait feature of the plurality of head portrait features, a fourth set of one or more graphical interface objects that can be selected for modifying the fourth head portrait feature are displayed.

7. The method of any one of claims 1 to 6, further comprising:

detecting, via the one or more input devices, selection of one of the graphical interface objects in the first set of one or more graphical interface objects while displaying the avatar editing interface including a representation of the virtual avatar having a first appearance of the first avatar feature; and

in response to detecting the selection of one of the first set of one or more graphical interface objects, displaying a representation of the virtual avatar having a second appearance of the first avatar feature, the second appearance being different from the first appearance and based on the selected graphical interface object of the first set of one or more graphical interface objects.

8. The method of any of claims 1 to 7, further comprising:

detecting, via the one or more input devices, selection of one of the graphical interface objects in the second set of one or more graphical interface objects while displaying the avatar editing interface including a representation of the first avatar decal having the first appearance of the second avatar feature; and

In response to detecting the selection, displaying a representation of the first head portrait decal having a second appearance of the second head portrait feature, the second appearance being different from the first appearance and based on a selected graphical interface object in the second set of one or more image interface objects.

9. The method of claim 8, wherein the second avatar characteristic comprises an avatar garment.

10. The method of claim 8, wherein the second avatar feature comprises an avatar arm.

11. The method of any of claims 1-10, wherein displaying the avatar editing interface including a representation of the virtual avatar comprises: and displaying the animation of the representation of the virtual head portrait.

12. The method of claim 11, wherein the animation of the representation of the virtual avatar is based on faces detected by one or more cameras associated with the computer system.

13. The method of any of claims 1 to 12, wherein the representation of the first avatar decal is static.

14. The method of any of claims 1-13, wherein displaying the avatar editing interface including a representation of the virtual avatar comprises: displaying a representation of the virtual avatar having a first facial pose of the virtual avatar, the method further comprising:

Detecting, via the one or more input devices, a first input while displaying the avatar editing interface including a representation of the virtual avatar having the first facial pose of the virtual avatar; and

in response to detecting the first input, a representation of the virtual avatar is converted from the first facial pose of the virtual avatar to a second facial pose of the virtual avatar that is different from the first facial pose.

15. The method of any one of claims 1 to 14, further comprising:

detecting expiration of a predetermined amount of time while displaying the avatar editing interface including a representation of a respective avatar decal in the set of decals; and

in response to detecting expiration of the predetermined amount of time, a representation of a subsequent avatar decal in the set of decals that is different from the corresponding avatar decal is displayed.

16. The method according to claim 15, wherein:

the set of stickers includes one or more avatar stickers showing respective avatar characteristics currently selected for editing and one or more avatar stickers not showing the respective avatar characteristics currently selected for editing; and is also provided with

The respective avatar decal and the subsequent avatar decal are selected from a first avatar decal subset comprising a plurality of decals showing the respective avatar feature and excluding decals not showing the respective avatar feature.

17. The method of claim 15, further comprising:

detecting, while displaying a representation of a decal from the set of decals, an input corresponding to a request to display an edit option for a fifth one of the plurality of avatar characteristics; and

in response to detecting the input corresponding to the request to display an edit option for the fifth avatar feature, displaying a representation of a first decal selected from a second subset of avatar decals, the second subset of avatar decals including a plurality of decals showing the fifth avatar feature and excluding decals not showing the fifth avatar feature.

18. The method of any of claims 1-17, wherein updating the display of the avatar editing interface comprises: and displaying an animation for converting the representation of the virtual head portrait into the representation of the first head portrait decal.

19. The method of claim 18, wherein converting the representation of the virtual avatar to the animation of the representation of the first avatar decal comprises: a zoom level of the representation of the virtual avatar is adjusted, and after adjusting the zoom level of the representation of the virtual avatar, a representation of the first avatar decal is displayed.

20. The method of any of claims 18-19, wherein the transforming of the representation of the virtual avatar to the animation of the representation of the first avatar decal comprises: the facial features displaying the representation of the virtual avatar move to the first pose shown in the representation of the first avatar decal.

21. The method of any one of claims 1 to 20, further comprising:

displaying, via the display generating component, a message interface for a conversation between a first participant and a second participant, wherein the message interface includes a decal display area including one or more avatar decals in the set of decals, wherein the avatar decals are selectable to initiate a process of adding a respective avatar decal to the conversation.

22. The method of claim 21, wherein the decal display area comprises one or more decals from a second set of decals based on the virtual avatar, the second set of decals comprising one or more decals different from the decals in the set of decals comprising the first avatar decal and the second avatar decal.

23. A non-transitory computer readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for performing the method of any of claims 1-22.

24. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

one or more processors; and

a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising instructions for performing the method of any of claims 1-22.

25. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

apparatus for performing the method of any one of claims 1 to 22.

26. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generating component and one or more input devices, the one or more programs comprising instructions for performing the method of any of claims 1-22.

27. A non-transitory computer readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for:

Displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and

a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar;

detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second one of the plurality of avatar characteristics while displaying the avatar editing interface including a representation of the virtual avatar; and

in response to detecting the input, updating a display of the avatar editing interface, the updating comprising:

displaying a representation of the first avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature; and

A second set of one or more graphical interface objects is displayed that is selectable for modifying one or more of the avatar characteristics visible in the first avatar decal.

28. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

one or more processors; and

a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising instructions for:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and

a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar;

Detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second one of the plurality of avatar characteristics while displaying the avatar editing interface including a representation of the virtual avatar; and

in response to detecting the input, updating a display of the avatar editing interface,

the updating includes:

displaying a representation of the first avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature; and

a second set of one or more graphical interface objects is displayed that is selectable for modifying one or more of the avatar characteristics visible in the first avatar decal.

29. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

means for displaying an avatar editing interface via the display generating means, the avatar editing interface comprising:

a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and

A first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar;

means for detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second avatar feature of the plurality of avatar features while displaying the avatar editing interface including a representation of the virtual avatar; and

means for updating a display of the avatar editing interface in response to detecting the input, the updating comprising:

displaying a representation of the first avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature; and

a second set of one or more graphical interface objects is displayed that is selectable for modifying one or more of the avatar characteristics visible in the first avatar decal.

30. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for:

Displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, the representation of the virtual avatar having a plurality of avatar characteristics, wherein the virtual avatar is associated with a set of stickers including a first avatar sticker showing the virtual avatar in a first pose and a second avatar sticker showing the virtual avatar in a second pose different from the first pose; and

a first set of one or more graphical interface objects selectable for modifying a first avatar feature of the plurality of avatar features visible in the representation of the virtual avatar;

detecting, via the one or more input devices, an input corresponding to a request to display an editing option for a second one of the plurality of avatar characteristics while displaying the avatar editing interface including a representation of the virtual avatar; and

in response to detecting the input, updating a display of the avatar editing interface, the updating comprising:

displaying a representation of the first avatar decal having an appearance based on the virtual avatar and including an appearance of the second avatar feature; and

A second set of one or more graphical interface objects is displayed that is selectable for modifying one or more of the avatar characteristics visible in the first avatar decal.

31. A method, comprising:

at a computer system in communication with a display generation component and one or more input devices:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color;

a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and

a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options include a respective representation of the first portrait feature, and the first portrait feature includes the first color;

detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and

In response to detecting the input directed to the first graphical interface object, updating a display of the avatar editing interface, the updating comprising:

displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color;

displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first head portrait feature, and the first head portrait feature includes the first color and the second color; and

a control for modifying the second color is displayed that is not displayed prior to detecting the input.

32. The method of claim 31, wherein the second color is selected from a set of color options in response to detecting the input directed to the first graphical interface object.

33. The method of any of claims 31-32, wherein updating the display of the avatar editing interface comprises: a second graphical interface object is displayed, the second graphical interface object being selectable to initiate a process for modifying the appearance of the first portrait feature to include a third color.

34. The method of any of claims 31-33, wherein after updating the display of the avatar editing interface, the avatar editing interface includes a first selectable object associated with a first portion of the first avatar feature and a second selectable object associated with a second portion of the first avatar feature, the method further comprising:

receiving a set of one or more inputs comprising a selection of a fourth color; and

in response to receiving the set of one or more inputs including a selection of the fourth color, displaying the first head portrait feature having the fourth color, the displaying comprising:

in accordance with a determination that the first selectable object is in the selected state when the fourth color is selected, displaying the first portion of the avatar characteristics with the fourth color; and

in accordance with a determination that the second selectable object is in the selected state when the fourth color is selected, the second portion of the avatar characteristics is displayed with the fourth color.

35. The method of any of claims 31-34, wherein displaying the plurality of selectable options comprises: displaying the plurality of selectable options at a first location relative to the display generating component, and displaying the updated plurality of selectable options includes: displaying the updated plurality of selectable options in a first area of the user interface, the method further comprising:

Receiving a set of one or more inputs after updating the display of the avatar editing interface; and

in response to receiving the set of one or more inputs, updating a representation of the virtual avatar, the updating comprising:

in accordance with a determination that the set of one or more inputs includes an input corresponding to a request to change the first color of the first portrait feature, changing the first color of the first portrait feature while displaying the plurality of selectable options in the first area of the user interface; and

in accordance with a determination that the set of one or more inputs includes an input corresponding to a request to change the second color of the first portrait feature, the second color of the first portrait feature is changed while the updated plurality of selectable options is displayed in the first area of the user interface.

36. The method of any one of claims 31 to 35, wherein:

displaying the control for modifying the second color that was not displayed prior to detecting the input includes: displaying an option selectable to initiate a process for removing the second color from the first head portrait feature; and is also provided with

When the first portrait feature includes the second color, the option is displayed that can be selected to initiate a process for removing the second color from the first portrait feature.

37. The method of any of claims 31-36, wherein the first avatar characteristic is an accessory of the virtual avatar.

38. The method of any of claims 31 to 36, wherein the first avatar characteristic is a portion of a body of the virtual avatar.

39. The method of any of claims 31-38, wherein displaying the avatar editing interface comprising the first graphical interface object comprises:

in accordance with a determination that the first avatar feature is a first type of avatar feature, the first graphical interface object includes a first text based on the first type of avatar feature; and

in accordance with a determination that the first avatar feature is a second type of avatar feature different from the first type of avatar feature, the first graphical interface object includes a second text that is different from the first text and based on the second type of avatar feature.

40. The method of any one of claims 31 to 39, wherein:

Prior to detecting the input directed to the first graphical interface object:

the avatar editing interface includes a control for modifying the first color; and

the control for modifying the first color includes a third text; and is also provided with

Updating the display of the avatar editing interface includes: displaying the control for modifying the first color with a fourth text different from the third text.

41. The method of any one of claims 31 to 40, wherein:

the first avatar characteristics include avatar hair; and is also provided with

Displaying the control for modifying the second color that was not displayed prior to detecting the input includes: one or more avatar hair highlighting pattern options are displayed that are selectable to change the avatar hair highlighting pattern from a first highlighting pattern to a second highlighting pattern that is different from the first pattern.

42. The method of claim 41, wherein displaying the one or more avatar hair highlighting style options comprises:

displaying a first representation of the virtual avatar, the first representation having the second color and a first hair highlighting pattern corresponding to a first one of the one or more avatar hair highlighting pattern options; and

Displaying a second representation of the virtual avatar, the second representation having the second color and a second hair highlighting style corresponding to a second one of the one or more avatar hair highlighting style options.

43. The method of any one of claims 41 to 42, wherein displaying one or more avatar hair highlighting style options comprises:

displaying an indication of the first hair highlighting pattern; and

displaying an indication of the second hair highlighting pattern.

44. The method of any of claims 31-43, wherein displaying the control for modifying the second color that was not displayed prior to detecting the input comprises: displaying a color slider having a selectable element that is adjustable to modify the second color, the method further comprising:

receiving an input corresponding to a request to adjust the selectable element to a first position on the color slider; and

in response to receiving the input corresponding to a request to adjust the selectable element to the first position on the color slider:

in accordance with a determination that a first set of criteria is met, adjusting the selectable element to a second location on the color slider that is different from the first location and corresponds to the first color; and

In accordance with a determination that the first set of criteria is not met, the selectable element is adjusted to the first position on the color slider.

45. A non-transitory computer readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for performing the method of any of claims 31-44.

46. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

one or more processors; and

a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising instructions for performing the method of any of claims 31-44.

47. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

apparatus for performing the method of any one of claims 31 to 44.

48. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for performing the method of any of claims 31-44.

49. A non-transitory computer readable storage medium storing one or more programs configured for execution by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color;

a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and

A plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options include a respective representation of the first portrait feature, and the first portrait feature includes the first color;

detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and

in response to detecting the input directed to the first graphical interface object, updating a display of the avatar editing interface, the updating comprising:

displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color;

displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first head portrait feature, and the first head portrait feature includes the first color and the second color; and

a control for modifying the second color is displayed that is not displayed prior to detecting the input.

50. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

one or more processors; and

a memory storing one or more programs configured to be executed by the one or more processors, the one or more programs comprising instructions for:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color;

a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and

a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options include a respective representation of the first portrait feature, and the first portrait feature includes the first color;

detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and

In response to detecting the input directed to the first graphical interface object, updating a display of the avatar editing interface, the updating comprising:

displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color;

displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first head portrait feature, and the first head portrait feature includes the first color and the second color; and

a control for modifying the second color is displayed that is not displayed prior to detecting the input.

51. A computer system in communication with a display generation component and one or more input devices, the computer system comprising:

means for displaying an avatar editing interface via the display generating means, the avatar editing interface comprising:

a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color;

A first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and

a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options include a respective representation of the first portrait feature, and the first portrait feature includes the first color;

means for detecting input directed to the first graphical interface object via the one or more input devices while the avatar editing interface is displayed; and

means for updating a display of the avatar editing interface in response to detecting the input directed to the first graphical interface object, the updating comprising:

displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color;

displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first head portrait feature, and the first head portrait feature includes the first color and the second color; and

A control for modifying the second color is displayed that is not displayed prior to detecting the input.

52. A computer program product comprising one or more programs configured to be executed by one or more processors of a computer system in communication with a display generation component and one or more input devices, the one or more programs comprising instructions for:

displaying, via the display generating means, an avatar editing interface comprising:

a representation of a virtual avatar, wherein the representation of the virtual avatar includes a first avatar feature, and the first avatar feature includes a first color;

a first graphical interface object selectable to initiate a process for modifying an appearance of the first portrait feature to include a second color; and

a plurality of selectable options for modifying a characteristic of the first portrait feature, wherein the plurality of selectable options include a respective representation of the first portrait feature, and the first portrait feature includes the first color;

detecting, via the one or more input devices, input directed to the first graphical interface object while the avatar editing interface is displayed; and

In response to detecting the input directed to the first graphical interface object, updating a display of the avatar editing interface, the updating comprising:

displaying an updated representation of the virtual avatar, wherein the updated representation of the virtual avatar includes the first avatar feature and the first avatar feature includes the first color and the second color;

displaying an updated plurality of selectable options, wherein the updated plurality of selectable options includes a respective updated representation of the first head portrait feature, and the first head portrait feature includes the first color and the second color; and

a control for modifying the second color is displayed that is not displayed prior to detecting the input.