Devices, methods, and graphical user interfaces based on user interface materials

Abstract

In response to detecting occurrence of an event, a computer system displays a first user interface object with a first boundary that encompasses content of the first user interface object. The content of the first user interface object includes a first emissive element that is spaced apart from the first boundary of the first user interface object. The first emissive element is displayed concurrently with a virtual lighting effect that gives the appearance that the first emissive element is emitting virtual light. Displaying the first user interface object includes displaying first simulated light interaction between the first emissive element and the first boundary of the first user interface object, resulting in a first altered appearance of the first boundary of the first user interface object.

Description

Devices, Methods, and Graphical User Interfaces Based on User Interface MaterialsRELATED APPLICATIONS

[0001] This application is a continuation of U.S. Patent Application No. 19 / 342,021, filed September 26, 2025, and also claims priority to U.S. Patent Application No. 19 / 342,426 filed September 26, 2025, U.S. Patent Application No. 19 / 342,085 filed September 26, 2025, U.S. Provisional Patent Application No. 63 / 819,935 filed June 8, 2025, U.S. Provisional Patent Application No. 63 / 808,532, filed May 19, 2025, and U.S. Provisional Patent Application No. 63 / 749,415 filed January 24, 2025.TECHNICAL FIELD

[0002] This relates generally to electronic devices with touch-sensitive surfaces, including but not limited to electronic devices with touch-sensitive surfaces that display user interfaces with user interface materials.BACKGROUND

[0003] The use of touch-sensitive surfaces as input devices for computers and other electronic computing devices has increased significantly in recent years. Example touch-sensitive surfaces include touchpads and touch-screen displays. Such surfaces are widely used to manipulate user interfaces and objects therein on a display. Example user interface objects include digital images, video, text, icons, and control elements such as buttons and other graphics.

[0004] Example manipulations include adjusting the position and / or size of one or more user interface objects or activating buttons or opening files / applications represented by user interface objects, as well as associating metadata with one or more user interface objects or otherwise manipulating user interfaces. Example user interface objects include digital images, video, text, icons, control elements such as buttons and other graphics. A user will, in some circumstances, need to perform such manipulations on user interface objects in a file management program (e.g., Finder from Apple Inc. of Cupertino, California), an image management application (e.g., Aperture, iPhoto, Photos from Apple Inc. of Cupertino, California), a digital content (e.g., videos and music) management application (e.g., iTunes from Apple Inc. of Cupertino, California), a drawing application, a presentation application(e.g., Keynote from Apple Inc. of Cupertino, California), a word processing application (e.g., Pages from Apple Inc. of Cupertino, California), or a spreadsheet application (e.g., Numbers from Apple Inc. of Cupertino, California).

[0005] But methods for performing these manipulations are cumbersome and inefficient, and user interface feedback is confusing and insufficient. For example, using a sequence of mouse based inputs to select one or more user interface objects and perform one or more actions on the selected user interface objects is tedious and creates a significant cognitive burden on a user. The insufficiency in visual feedback leads to more user errors and confusion. In addition, these methods take longer than necessary, thereby wasting energy. This latter consideration is particularly important in battery-operated devices.SUMMARY

[0006] Accordingly, there is a need for electronic devices with faster, more efficient methods and interfaces including user interface materials, such as adaptive materials. Such methods and interfaces optionally complement or replace conventional methods for displaying user interfaces and providing visual feedback. Such methods and interfaces reduce the number, extent, and / or nature of the inputs from a user and produce a more efficient human-machine interface. For battery-operated devices, such methods and interfaces conserve power and increase the time between battery charges.

[0007] The above deficiencies and other problems associated with user interfaces for electronic devices (or more generally, computer systems) with touch-sensitive surfaces are reduced or eliminated by the disclosed devices. In some embodiments, the device is a desktop computer. In some embodiments, the device is portable (e.g., a notebook computer, tablet computer, or handheld device). In some embodiments, the device is a personal electronic device (e.g., a wearable electronic device, such as a watch). In some embodiments, the device has a touchpad. In some embodiments, the device has (e.g., includes or is in communication with) a display generation component (e.g., a display device such as a head-mounted device (HMD), a display, a projector, a touch-sensitive display (also known as a “touch screen” or “touch-screen display”), or other device or component that presents visual content to a user, for example on or in the display generation component itself or produced from the display generation component and visible elsewhere). In some embodiments, the device has a graphical user interface (GUI), one or more processors, memory and one or more modules, programs or sets of instructions stored in the memory for performing multiple functions. Insome embodiments, the user interacts with the GUI primarily through stylus and / or finger contacts and gestures on the touch-sensitive surface. In some embodiments, the functions optionally include image editing, drawing, presenting, word processing, spreadsheet making, game playing, telephoning, video conferencing, e-mailing, instant messaging, workout support, digital photographing, digital videoing, web browsing, digital music playing, note taking, and / or digital video playing. 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.

[0008] In accordance with some embodiments, a method comprises: at a computer system that is in communication with one or more input devices and one or more display generation components: detecting occurrence of an event; and in response to detecting the occurrence of the event, displaying, via the one or more display generation components, a first user interface object in a user interface, the first user interface object having a first boundary that encompasses content of the first user interface object, wherein: the content of the first user interface object includes at least a first emissive element that is spaced apart from the first boundary of the first user interface object, the first emissive element is displayed concurrently with a virtual lighting effect that gives the appearance that the first emissive element is emitting virtual light in the user interface, and displaying the first user interface object includes displaying first simulated light interaction between the first emissive element and the first boundary of the first user interface object, resulting in a first altered appearance of the first boundary of the first user interface object.

[0009] In accordance with some embodiments, a method comprises: at a computer system that is in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein: the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user; and the first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state; while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; and in response to detecting the first user input that interacts with the firstuser interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including: displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; and after displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein: the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; and the second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

[0010] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter; while displaying the first user interface that includes the first interactive element represented by the first platter, detecting occurrence of a first event that meets navigation criteria; in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, displaying, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein: in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; and in accordance with a determination that the first interactive element in the first user interface does not satisfy therespective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

[0011] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary. The method includes, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input; and in response to detecting the first user input, transforming the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein: the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and, transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material, displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein: the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; and the difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

[0012] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region. The method includes, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object; and in response to detecting the first user input: in accordance with a determination that the first user input included movement in a first input direction, stretching the first region in a first stretching direction and compressing the first region in a first compression direction, where the first compression direction isdifferent from the first stretching direction; and in accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretching the first region in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

[0013] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface. The method includes, while displaying, via the one or more display generation components, the first user interface, detecting occurrence of a first event; and in response to detecting the occurrence of the first event, displaying, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein: the first user interface object has a first edge; the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; and the respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

[0014] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication of current time has an appearance that is based on an appearance of the first region of the first background. The method includes while displaying the first user interface, detecting a respective event; and in response to detecting the respective event, updating the indication of current time, including: gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time. The method includes gradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time value different from the first time value, including in a first portion of the first region previously occupied by the first portion of therepresentation of the first time value, wherein: the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the first portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

[0015] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface: the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object, the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, and the first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of the first user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object. The method includes, while displaying the first user interface including the background and the first user interface object, detecting occurrence of an event that corresponds to a change in appearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; and in response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance, displaying an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface: the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object, the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, and the first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to thefirst user interface object, by the first portion of the first user interface object, without simulating refraction of the second simulated shadow cast on the portion of the background that has the second spatial arrangement relative to the first user interface object.

[0016] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components: first content in a first region of the first user interface; and a first set of one or more user interface elements in the first region of the first user interface, wherein: the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; and a first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance of the first content in a first manner that is determined based on one or more properties of the first content; and while displaying the first user interface, detecting an event corresponding to a change in appearance of content in the first region. The method includes in response to detecting the event corresponding to the change in appearance of content in the first region, concurrently displaying, via the one or more display generation components: second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface, wherein: the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements; a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; and the second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content.

[0017] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for theone or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material. The method includes while displaying the first user interface object with the first appearance, detecting a first event; and in response to detecting the first event, displaying, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein: at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material, the second set of values is different from the first set of values, and the second appearance based on the second set of values is different from the first appearance based on the first set of values.

[0018] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface of a first application, wherein the first user interface includes content and a plurality of selectable user interface objects that are separate from the content and are associated with performing operations in the first application that are independent of the content, wherein the plurality of selectable user interface objects include: a first selectable user interface object associated with performing a first operation in the first application that is independent of the content; a second selectable user interface object, different from the first selectable user interface object, associated with performing a second operation in the first application that is independent of the content and is different from the first operation; and one or more additional selectable user interface objects, different from the first selectable user interface object and the second selectable user interface object. The method includes while displaying the first user interface, including concurrently displaying the content and the plurality of selectable user interface objects, detecting, via the one or more input devices, a user input that corresponds to a request to navigate through the content; and in response to detecting the user input that corresponds to a request to navigate through the content: shifting a first portion of the content that is visible in the first user interface; and ceasing to display at least a subset of the one or more additional selectable user interface objects, while maintaining concurrent display of the first selectable user interface object and the second selectable user interface object.

[0019] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein: the first user interface object includes first content and a first user interface material; the first user interface object has a first boundary that corresponds to a spatial extent of the first user interface material; the first content is located within the first boundary of the first user interface object; a portion of the first content that is within a threshold distance from the first boundary has a first content appearance; and the first user interface object is displayed with a first object appearance that simulates refraction of the portion of the first content with the first content appearance by the first user interface material in an edge portion of the first user interface material. The method includes, while displaying the first user interface including the first content and the first user interface object, detecting a first event that causes a change in content appearance of the portion of the first content that is within the threshold distance from the first boundary, from the first content appearance to a second content appearance different from the first content appearance; and in response to detecting the first event that causes the change in content appearance of the portion of the first content that is within the threshold distance from the first boundary, from the first content appearance to the second content appearance, displaying, via the one or more display generation components, the first user interface object with a second object appearance that is different from the first object appearance, wherein, the second object appearance simulates refraction of the portion of the first content with the second content appearance, by the first user interface material in the edge portion of the first user interface material.

[0020] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: detecting an event; and in response to detecting the event, displaying, via the one or more display generation components, a first user interface, including concurrently displaying a first user interface object overlaying a background, wherein: the first user interface object includes a first user interface material; a spatial extent of the first user interface material corresponds to a spatial extent of an underlying portion of the background that is covered by the first user interface object; and displaying the first user interface object covering the underlying portion of the background includes displaying the first user interface object with an object appearance that is based on a background appearance of the underlying portion of the background, including representing a set of background colors of thebackground with a corresponding set of material colors of the first user interface material using a respective mapping that preserves a directional relationship of luminance values between pairs of colors in the background for corresponding pairs of colors in the first user interface material, including: in accordance with a determination that a characteristic value of a first visual property of a respective portion of the background that includes the underlying portion of the background meets first criteria, wherein the first criteria require that the characteristic value of the first visual property is above a first threshold value in order for the first criteria to be met, displaying, via the one or more display generation components, the first user interface material with an appearance determined using a first mapping as the respective mapping between background colors of the background and material colors of the first user interface material; and in accordance with a determination that the characteristic value of the first visual property of the respective portion of the background that includes the underlying portion of the background meets second criteria, wherein the second criteria require that the characteristic value of the first visual property is below the first threshold value, in order for the second criteria to be met, displaying, via the one or more display generation components, the first user interface material with an appearance determined using a second mapping as the respective mapping between background colors of the background and material colors of the first user interface material, wherein the second mapping is different from the first mapping.

[0021] In accordance with some embodiments, a method comprises: at a computer system in communication with one or more display generation components and one or more input devices: displaying, via the one or more display generation components, a first user interface, including a first user interface object that has an associated user-interface function for the first user interface, wherein the first user interface object includes a first region. The method includes while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object. The method includes, in response to detecting the first user input: in accordance with a determination that the first user interface object has a first set of one or more values for a respective set of one or more visual parameters, changing an appearance of the first region in a first manner; and in accordance with a determination that the first user interface object has a second set of one or more values, different from the first set of one or more values, for the respective set of one or more visual parameters, changing an appearance of the first region in a second manner that is different from the first manner.

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

[0023] Thus, electronic devices and other computer systems with displays, touch-sensitive surfaces, optionally one or more sensors to detect intensities of contacts with the touch-sensitive surface, optionally one or more tactile output generators, optionally one or more device orientation sensors, and optionally an audio system, are provided with improved methods and interfaces for providing adaptive materials, thereby increasing the effectiveness, efficiency, and user satisfaction with such devices. Such methods and interfaces may complement or replace conventional methods for providing adaptive materials.BRIEF DESCRIPTION OF THE DRAWINGS

[0024] For a better understanding of the various described embodiments, reference should be made to the Description of Embodiments below, in conjunction with the following drawings in which like reference numerals refer to corresponding parts throughout the figures.

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

[0026] Figure 1B is a block diagram illustrating example components for event handling in accordance with some embodiments.

[0027] Figure 2 illustrates a portable multifunction device having a touch screen in accordance with some embodiments.

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

[0029] Figures 3B-3G illustrate the use of Application Programming Interfaces (APIs) to perform operations.

[0030] Figure 4A illustrates an example user interface for a menu of applications on a portable multifunction device in accordance with some embodiments.

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

[0032] Figures 5A-5AG and 6A-6AP illustrate example user interfaces that include adaptive material, in accordance with some embodiments.

[0033] Figure 7 illustrates a flow diagram of a process for displaying a simulated emissive user interface element in accordance with some embodiments.

[0034] Figures 8A-8B illustrate a flow diagram of a process for adjusting one or more visual properties responsive to user interaction in accordance with some embodiments.

[0035] Figure 9 illustrates a flow diagram of a process for transitioning between displaying a first set of controls and a second set of controls in accordance with some embodiments.

[0036] Figure 10 illustrates a flow diagram of a process for morphing a user interface element in accordance with some embodiments.

[0037] Figure 11 illustrates a flow diagram of a process for animating a user interface element in accordance with some embodiments.

[0038] Figure 12 illustrates a flow diagram of a process for displaying animated transitions for numerals in accordance with some embodiments.

[0039] Figure 13 illustrates a flow diagram of a process for updating numerals displayed with a simulated user interface appearance in accordance with some embodiments.

[0040] Figures 14A-14B illustrates a flow diagram of a process for using layers used to generate a simulated user interface appearance of a user interface object in accordance with some embodiments.

[0041] Figure 15 illustrates a flow diagram of a process for applying various levels of deemphasis to user interface objects while changing underlying content in accordance with some embodiments.

[0042] Figure 16 illustrates a flow diagram of a process for visually emphasizing user interface objects that at least partially overlay one or more other user interface objects in accordance with some embodiments.

[0043] Figure 17 illustrates a flow diagram of a process for displaying and / or condensing sets of controls in accordance with some embodiments.

[0044] Figure 18 illustrates a flow diagram of a process for modifying internal content that is displayed in a user interface object that is visually associated with a simulated user interface appearance in accordance with some embodiments.

[0045] Figure 19 illustrates a flow diagram of a process for adapting visual properties based on underlying content in accordance with some embodiments.

[0046] Figure 20 illustrates a flow diagram of a process for adjusting one or more visual properties for different types of user interface objects responsive to user interaction in accordance with some embodiments.DESCRIPTION OF EMBODIMENTS

[0047] Simulated materials that provide substrates for content in a user interface and / or user interface object can be utilized to provide additional visual feedback responsibleto user input and indicating the changes and potential changes in the internal state of the computer system, adaptive material that responds to various external conditions and internal conditions of the computer system are beneficial to improving efficiencies of the user interfaces and reducing operation mistakes, which in turn may save power and extend battery life of battery operated computer systems.

[0048] The methods, devices, and GUIs described herein use haptic feedback to improve user interface interactions in multiple ways.

[0049] The processes described below enhance the operability of the devices and make the user-device interfaces more efficient (e.g., by helping the user to provide proper inputs and reducing user mistakes when operating / interacting with the device) through various techniques, including by providing improved visual, audio, and / or tactile feedback to the user, reducing the number of inputs needed to perform an operation, providing additional control options without cluttering the user interface with additional displayed controls, performing an operation when a set of conditions has been met without requiring further user input, and / or additional techniques. These techniques also reduce power usage and improve battery life of the device by enabling the user to use the device more quickly and efficiently.

[0050] Below, Figures 1A-1C, 2, and 3A provide a description of example devices. Figures 3B-3G describe the use of Application Programming Interfaces (APIs) to perform operations. Figures 4A-4B illustrate example user interfaces that include adaptive simulated materials. Figures 5A-5E illustrate example user interfaces for displaying a simulated emissive user interface element in accordance with some embodiments. Figures 5F-5M illustrate example user interfaces for adjusting one or more visual properties responsive to user interaction in accordance with some embodiments. Figures 5N-5Q6 illustrate example user interfaces for transitioning between displaying a first set of controls and a second set of controls in accordance with some embodiments. Figures 5R-5V illustrate user interfaces for morphing a user interface element in accordance with some embodiments. Figures 5W-5Z illustrate example user interfaces for stretching and / or smashing a user interface element in accordance with some embodiments. Figures 5Z1-5AA illustrates animating a user interface element in accordance with some embodiments. Figures 5AB-5AD illustrate animated transitions for numerals in accordance with some embodiments. Figures 5AE-5AG illustrate updating numerals displayed with a simulated user interface appearance in accordance with some embodiments. Figures 6A-6C illustrate examples of layers used to generate a simulated user interface appearance of a user interface object in accordance with some embodiments.Figures 6D-6H illustrate applying various levels of deemphasis to user interface objects while changing underlying content in accordance with some embodiments. Figures 6I-6T illustrate visually emphasizing user interface objects that at least partially overlay one or more other user interface objects in accordance with some embodiments. Figures 6U-6AN illustrate a sequence for displaying and / or condensing sets of controls in accordance with some embodiments. Figures 6AO-6AP illustrate examples of modifying internal content that is displayed in a user interface object that is visually associated with a simulated user interface appearance in accordance with some embodiments.EXAMPLE DEVICES

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

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

[0053] The terminology used in the description of the various described 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 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 “includes,” “including,” “comprises,” and / or “comprising,” when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and / or components, but donot preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0054] As used herein, the term “if’ is, optionally, construed to mean “when” or “upon” or “in response to determining” or “in response to detecting,” depending on the context. Similarly, the phrase “if it is determined” or “if [a stated condition or event] is detected” is, optionally, construed to mean “upon determining” or “in response to determining” or “upon detecting [the stated condition or event]” or “in response to detecting [the stated condition or event],” depending on the context.

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

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

[0057] The device typically supports a variety of applications, such as one or more of the following: a note taking application, a drawing application, a presentation application, a word processing application, a website creation application, a disk authoring application, a spreadsheet application, a gaming application, a telephone application, a video conferencing application, an e-mail application, an instant messaging application, a workout support application, a photo management application, a digital camera application, a digital video camera application, a web browsing application, a digital music player application, and / or a digital video player application.

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

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

[0060] As used in the specification and claims, the term “tactile output” refers to physical displacement of a device relative to a previous position of the device, physical displacement of a component (e.g., a touch-sensitive surface) of a device relative to another component (e.g., housing) of the device, or displacement of the component relative to a center of mass of the device that will be detected by a user with the user’s sense of touch. For example, in situations where the device or the component of the device is in contact with a surface of a user that is sensitive to touch (e.g., a finger, palm, or other part of a user’s hand), the tactile output generated by the physical displacement will be interpreted by the user as a tactile sensation corresponding to a perceived change in physical characteristics of the deviceor the component of the device. For example, movement of a touch-sensitive surface (e.g., a touch-sensitive display or trackpad) is, optionally, interpreted by the user as a “down click” or “up click” of a physical actuator button. In some cases, a user will feel a tactile sensation such as an “down click” or “up click” even when there is no movement of a physical actuator button associated with the touch-sensitive surface that is physically pressed (e.g., displaced) by the user’s movements. As another example, movement of the touch-sensitive surface is, optionally, interpreted or sensed by the user as “roughness” of the touch-sensitive surface, even when there is no change in smoothness of the touch-sensitive surface. While such interpretations of touch by a user will be subject to the individualized sensory perceptions of the user, there are many sensory perceptions of touch that are common to a large majority of users. Thus, when a tactile output is described as corresponding to a particular sensory perception of a user (e.g., an “up click,” a “down click,” “roughness”), unless otherwise stated, the generated tactile output corresponds to physical displacement of the device or a component thereof that will generate the described sensory perception for a typical (or average) user. Using tactile outputs to provide haptic feedback to a user enhances the operability of the device and makes the user-device interface more efficient (e.g., by helping the user to provide proper inputs and reducing user mistakes when operating / interacting with the device) which, additionally, reduces power usage and improves battery life of the device by enabling the user to use the device more quickly and efficiently.

[0061] In some embodiments, a tactile output pattern specifies characteristics of a tactile output, such as the amplitude of the tactile output, the shape of a movement waveform of the tactile output, the frequency of the tactile output, and / or the duration of the tactile output.

[0062] When tactile outputs with different tactile output patterns are generated by a device (e.g., via one or more tactile output generators that move a moveable mass to generate tactile outputs), the tactile outputs may invoke different haptic sensations in a user holding or touching the device. While the sensation of the user is based on the user’s perception of the tactile output, most users will be able to identify changes in waveform, frequency, and amplitude of tactile outputs generated by the device. Thus, the waveform, frequency and amplitude can be adjusted to indicate to the user that different operations have been performed. As such, tactile outputs with tactile output patterns that are designed, selected, and / or engineered to simulate characteristics (e.g., size, material, weight, stiffness, smoothness, etc.); behaviors (e.g., oscillation, displacement, acceleration, rotation, expansion,etc.); and / or interactions (e.g., collision, adhesion, repulsion, attraction, friction, etc.) of objects in a given environment (e.g., a user interface that includes graphical features and objects, a simulated physical environment with virtual boundaries and virtual objects, a real physical environment with physical boundaries and physical objects, and / or a combination of any of the above) will, in some circumstances, provide helpful feedback to users that reduces input errors and increases the efficiency of the user’s operation of the device. Additionally, tactile outputs are, optionally, generated to correspond to feedback that is unrelated to a simulated physical characteristic, such as an input threshold or a selection of an object. Such tactile outputs will, in some circumstances, provide helpful feedback to users that reduces input errors and increases the efficiency of the user’s operation of the device.

[0063] In some embodiments, a tactile output with a suitable tactile output pattern serves as a cue for the occurrence of an event of interest in a user interface or behind the scenes in a device. Examples of the events of interest include activation of an affordance (e.g., a real or virtual button, or toggle switch) provided on the device or in a user interface, success or failure of a requested operation, reaching or crossing a boundary in a user interface, entry into a new state, switching of input focus between objects, activation of a new mode, reaching or crossing an input threshold, detection or recognition of a type of input or gesture, etc. In some embodiments, tactile outputs are provided to serve as a warning or an alert for an impending event or outcome that would occur unless a redirection or interruption input is timely detected. Tactile outputs are also used in other contexts to enrich the user experience, improve the accessibility of the device to users with visual or motor difficulties or other accessibility needs, and / or improve efficiency and functionality of the user interface and / or the device. Tactile outputs are optionally accompanied with audio outputs and / or visible user interface changes, which further enhance a user’s experience when the user interacts with a user interface and / or the device, and facilitate better conveyance of information regarding the state of the user interface and / or the device, and which reduce input errors and increase the efficiency of the user’s operation of the device.

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

[0065] Memory 102 optionally includes high-speed random access memory and optionally also includes non-volatile memory, such as one or more magnetic disk storage devices, flash memory devices, or other non-volatile solid-state memory devices. Access to memory 102 by other components of device 100, such as CPU(s) 120 and the peripherals interface 118, is, optionally, controlled by memory controller 122.

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

[0067] In some embodiments, peripherals interface 118, CPU(s) 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.

[0068] RF (radio frequency) circuitry 108 receives and sends RF signals, also called electromagnetic signals. RF circuitry 108 converts electrical signals to / from electromagnetic signals and communicates with communications networks and other communications devices via the electromagnetic signals. 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 so forth. RF circuitry 108 optionally communicates with networks, such as the Internet, also referred to as the World Wide Web (WWW), an intranet and / or a wireless network, such as a cellular telephone network, a wireless local area network (LAN) and / or a metropolitan area network (MAN), and other devices by wireless communication. The wireless communication optionally uses any of a plurality of communications 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, Data-Only (EV-DO), HSPA, HSPA+, Dual-Cell HSPA (DC-HSPA), long term evolution (LTE), near field communication (NFC), wideband code division multiple access (W-CDMA), code division multiple access (CDMA), time division multiple access (TDMA), Bluetooth, Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11ac, IEEE 802.11ax, IEEE 802.11b, IEEE 802.11g and / or IEEE 802.11n), voice over Internet Protocol (VoIP), Wi-MAX, a protocol for e-mail (e.g., Internet message access protocol (IMAP) and / or post office protocol (POP)), instant messaging (e.g., extensiblemessaging and presence protocol (XMPP), Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (SIMPLE), Instant Messaging and Presence Service (IMPS)), and / or Short Message Service (SMS), or any other suitable communication protocol, including communication protocols not yet developed as of the filing date of this document.

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

[0070] I / O subsystem 106 couples input / output peripherals on device 100, such as touch-sensitive display system 112 and other input or control devices 116, with peripherals interface 118. I / O subsystem 106 optionally includes display controller 156, optical sensor controller 158, intensity sensor controller 159, haptic feedback controller 161, and one or more input controllers 160 for other input or control devices. The one or more input controllers 160 receive / send electrical signals from / to other input or control devices 116. The other input or control devices 116 optionally include physical buttons (e.g., push buttons, rocker buttons, etc.), dials, slider switches, joysticks, click wheels, and so forth. In some alternate embodiments, input control ler(s) 160 are, optionally, coupled with any (or none) of the following: a keyboard, infrared port, USB port, stylus, and / or a pointer device such as a mouse. The one or more buttons (e.g., 208, Figure 2) optionally include an up / down button (e.g., a single button that rocks in opposite directions, or separate up button and 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, Figure 2).

[0071] Touch-sensitive display system 112 provides an input interface and an output interface between the device and a user. Display controller 156 receives and / or sendselectrical signals from / to touch-sensitive display system 112. Touch-sensitive display system 112 displays visual output to the user. The visual output optionally includes graphics, text, icons, video, and any combination thereof (collectively termed “graphics”). In some embodiments, some or all of the visual output corresponds to user interface objects. As used herein, the term “affordance” refers to a user-interactive graphical user interface object (e.g., a graphical user interface object that is configured to respond to inputs directed toward the graphical user interface object). Examples of user-interactive graphical user interface objects include, without limitation, a button, slider, icon, selectable menu item, switch, hyperlink, or other user interface control.

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

[0073] Touch-sensitive display system 112 optionally uses LCD (liquid crystal display) technology, LPD (light emitting polymer display) technology, or LED (light emitting diode) technology, although other display technologies are used in other embodiments.Touch-sensitive display system 112 and display controller 156 optionally detect contact and any movement or breaking thereof using any of a plurality 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-sensitive display system 112. In some embodiments, projected mutual capacitance sensing technology is used, such as that found in the iPhone®, iPod Touch®, and iPad® from Apple Inc. of Cupertino, California.

[0074] Touch-sensitive display system 112 optionally has a video resolution in excess of 100 dpi. In some embodiments, the touch screen video resolution is in excess of 400 dpi (e.g., 500 dpi, 800 dpi, or greater). The user optionally makes contact with touch-sensitive display system 112 using any suitable object or appendage, such as a stylus, a finger, and soforth. In some embodiments, the user interface is designed to work with finger-based contacts and gestures, which can be less precise than stylus-based input due to the larger area of contact of a finger on the touch screen. In some embodiments, the device translates the rough finger-based input into a precise pointer / cursor position or command for performing the actions desired by the user.

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

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

[0077] Device 100 optionally also includes one or more optical sensors 164 (e.g., as part of one or more cameras). Figure 1 A shows an optical sensor coupled with optical sensor controller 158 in I / O subsystem 106. Optical sensor(s) 164 optionally include charge-coupled device (CCD) or complementary metal-oxide semiconductor (CMOS) phototransistors.Optical sensor(s) 164 receive light from the environment, projected through one or more lens, and converts the light to data representing an image. In conjunction with imaging module 143 (also called a camera module), optical sensor(s) 164 optionally capture still images and / or video. In some embodiments, an optical sensor is located on the back of device 100, opposite touch-sensitive display system 112 on the front of the device, so that the touch screen is enabled for use as a viewfinder for still and / or video image acquisition. In some embodiments, another optical sensor is located on the front of the device so that the user's image is obtained (e.g., for selfies, for videoconferencing while the user views the other video conference participants on the touch screen, etc.).

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

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

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

[0081] Device 100 optionally also includes one or more accelerometers 168. Figure 1 A shows accelerometer 168 coupled with peripherals interface 118. Alternately,accelerometer 168 is, optionally, coupled with an input controller 160 in I / O subsystem 106. In some embodiments, information is displayed on the touch-screen display in a portrait view or a landscape view based on an analysis of data received from the one or more accelerometers. Device 100 optionally includes, in addition to accelerometer(s) 168, a magnetometer and a GPS (or GLONASS or other global navigation system) receiver for obtaining information concerning the location and orientation (e.g., portrait or landscape) of device 100.

[0082] In some embodiments, the software components stored in memory 102 include operating system 126, communication module (or set of instructions) 128, contact / motion module (or set of instructions) 130, graphics module (or set of instructions) 132, haptic feedback module (or set of instructions) 133, text input module (or set of instructions) 134, Global Positioning System (GPS) module (or set of instructions) 135, and applications (or sets of instructions) 136. Furthermore, in some embodiments, memory 102 stores device / global internal state 157, as shown in Figures 1A and 3 A. Device / global internal state 157 includes one or more of: active application state, indicating which applications, if any, are currently active; display state, indicating what applications, views or other information occupy various regions of touch- sensitive display system 112; sensor state, including information obtained from the device’s various sensors and other input or control devices 116; and location and / or positional information concerning the device’s location and / or attitude.

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

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

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

[0086] Contact / motion module 130 optionally detects a gesture input by a user.Different gestures on the touch-sensitive surface have different contact patterns (e.g., different motions, timings, and / or intensities of detected contacts). Thus, a gesture is, optionally, detected by detecting a particular contact pattern. For example, detecting a finger tap gesture includes detecting a finger-down event followed by detecting a finger-up (lift off) event at the same position (or substantially the same position) as the finger-down event (e.g., at the position of an icon). As another example, detecting a finger swipe gesture on the touch-sensitive surface includes detecting a finger-down event followed by detecting one or more finger-dragging events, and subsequently followed by detecting a finger-up (lift off) event.Similarly, tap, swipe, drag, and other gestures are optionally detected for a stylus by detecting a particular contact pattern for the stylus.

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

[0088] The same concepts apply in an analogous manner to other types of gestures. For example, a swipe gesture, a pinch gesture, a depinch gesture, and / or a long press gesture are optionally detected based on the satisfaction of criteria that are either independent of intensities of contacts included in the gesture, or do not require that contact(s) that perform the gesture reach intensity thresholds in order to be recognized. For example, a swipe gesture is detected based on an amount of movement of one or more contacts; a pinch gesture is detected based on movement of two or more contacts towards each other; a depinch gesture is detected based on movement of two or more contacts away from each other; and a long press gesture is detected based on a duration of the contact on the touch-sensitive surface with less than a threshold amount of movement. As such, the statement that particular gesture recognition criteria do not require that the intensity of the contact(s) meet a respective intensity threshold in order for the particular gesture recognition criteria to be met means that the particular gesture recognition criteria are capable of being satisfied if the contact(s) in the gesture do not reach the respective intensity threshold, and are also capable of being satisfiedin circumstances where one or more of the contacts in the gesture do reach or exceed the respective intensity threshold. In some embodiments, a tap gesture is detected based on a determination that the finger-down and finger-up event are detected within a predefined time period, without regard to whether the contact is above or below the respective intensity threshold during the predefined time period, and a swipe gesture is detected based on a determination that the contact movement is greater than a predefined magnitude, even if the contact is above the respective intensity threshold at the end of the contact movement. Even in implementations where detection of a gesture is influenced by the intensity of contacts performing the gesture (e.g., the device detects a long press more quickly when the intensity of the contact is above an intensity threshold or delays detection of a tap input when the intensity of the contact is higher), the detection of those gestures does not require that the contacts reach a particular intensity threshold so long as the criteria for recognizing the gesture can be met in circumstances where the contact does not reach the particular intensity threshold (e.g., even if the amount of time that it takes to recognize the gesture changes).

[0089] Contact intensity thresholds, duration thresholds, and movement thresholds are, in some circumstances, combined in a variety of different combinations in order to create heuristics for distinguishing two or more different gestures directed to the same input element or region so that multiple different interactions with the same input element are enabled to provide a richer set of user interactions and responses. The statement that a particular set of gesture recognition criteria do not require that the intensity of the contact(s) meet a respective intensity threshold in order for the particular gesture recognition criteria to be met does not preclude the concurrent evaluation of other intensity-dependent gesture recognition criteria to identify other gestures that do have criteria that are met when a gesture includes a contact with an intensity above the respective intensity threshold. For example, in some circumstances, first gesture recognition criteria for a first gesture - which do not require that the intensity of the contact(s) meet a respective intensity threshold in order for the first gesture recognition criteria to be met - are in competition with second gesture recognition criteria for a second gesture - which are dependent on the contact(s) reaching the respective intensity threshold. In such competitions, the gesture is, optionally, not recognized as meeting the first gesture recognition criteria for the first gesture if the second gesture recognition criteria for the second gesture are met first. For example, if a contact reaches the respective intensity threshold before the contact moves by a predefined amount of movement, a deep press gesture is detected rather than a swipe gesture. Conversely, if the contact moves by the predefined amount of movement before the contact reaches the respective intensity threshold,a swipe gesture is detected rather than a deep press gesture. Even in such circumstances, the first gesture recognition criteria for the first gesture still do not require that the intensity of the contact(s) meet a respective intensity threshold in order for the first gesture recognition criteria to be met because if the contact stayed below the respective intensity threshold until an end of the gesture (e.g., a swipe gesture with a contact that does not increase to an intensity above the respective intensity threshold), the gesture would have been recognized by the first gesture recognition criteria as a swipe gesture. As such, particular gesture recognition criteria that do not require that the intensity of the contact(s) meet a respective intensity threshold in order for the particular gesture recognition criteria to be met will (A) in some circumstances ignore the intensity of the contact with respect to the intensity threshold (e.g. for a tap gesture) and / or (B) in some circumstances still be dependent on the intensity of the contact with respect to the intensity threshold in the sense that the particular gesture recognition criteria (e.g., for a long press gesture) will fail if a competing set of intensitydependent gesture recognition criteria (e.g., for a deep press gesture) recognize an input as corresponding to an intensity-dependent gesture before the particular gesture recognition criteria recognize a gesture corresponding to the input (e.g., for a long press gesture that is competing with a deep press gesture for recognition).

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

[0091] In some embodiments, graphics module 132 stores data representing graphics to be used. Each graphic is, optionally, assigned a corresponding code. Graphics module 132 receives, from applications etc., one or more codes specifying graphics to be displayed along with, if necessary, coordinate data and other graphic property data, and then generates screen image data to output to display controller 156.

[0092] Haptic feedback module 133 includes various software components for generating instructions (e.g., instructions used by haptic feedback controller 161) to produce tactile outputs using tactile output generator(s) 167 at one or more locations on device 100 in response to user interactions with device 100.

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

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

[0095] Applications 136 optionally include the following modules (or sets of instructions), or a subset or superset thereof:• contacts module 137 (sometimes called an address book or contact list);• telephone module 138;• video conferencing module 139;• e-mail client module 140;• instant messaging (IM) module 141;• workout support module 142;• camera module 143 for still and / or video images;• image management module 144;• browser module 147;• calendar module 148;• widget modules 149, which optionally include one or more of: weather widget 149-1, stocks widget 149-2, calculator widget 149-3, alarm clock widget 149-4, dictionary widget 149-5, and other widgets obtained by the user, as well as user-created widgets 149-6;• widget creator module 150 for making user-created widgets 149-6;• search module 151;• video and music player module 152, which is, optionally, made up of a video player module and a music player module;• notes module 153;• map module 154; and / or• online video module 155.

[0096] Examples of other applications 136 that are, 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.

[0097] In conjunction with touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, contacts module 137 includes executable instructions to manage an address book or contact list (e.g., stored in application internal state 192 of contacts module 137 in memory 102 or memory 370), including: adding name(s) to the address book; deleting name(s) from the address book; associating telephone number(s), e-mail address(es), physical address(es) or other information with a name; associating an image with a name; categorizing and sorting names; providing telephone numbers and / or e-mail addresses to initiate and / or facilitate communications by telephone module 138, video conference module 139, e-mail client module 140, or IM module 141; and so forth.

[0098] In conjunction with RF circuitry 108, audio circuitry 110, speaker 111, microphone 113, touch-sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, telephone module 138 includes executable instructions to enter a sequence of characters corresponding to a telephone number, access one or more telephone numbers in address book 137, modify a telephone number that has been entered, dial a respective telephone number, conduct a conversation and disconnect or hang up when the conversation is completed. As noted above, the wireless communication optionally uses any of a plurality of communications standards, protocols and technologies.

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

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

[0101] In conjunction with RF circuitry 108, touch- sensitive display system 112, display controller 156, contact module 130, graphics module 132, and text input module 134, the instant messaging module 141 includes executable instructions to enter a sequence of characters corresponding to an instant message, to modify previously entered characters, to transmit a respective instant message (for example, using a Short Message Service (SMS) or Multimedia Message Service (MMS) protocol for telephony -based instant messages or using XMPP, SIMPLE, Apple Push Notification Service (APNs) or IMPS for Internet-based instant messages), to receive instant messages, and to view received instant messages. In some embodiments, transmitted and / or received instant messages optionally include graphics, photos, audio files, video files and / or other attachments as are supported in an MMS and / or an Enhanced Messaging Service (EMS). As used herein, “instant messaging” 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, APNs, or IMPS).

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

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

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

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

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

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

[0108] In conjunction with RF circuitry 108, touch- sensitive display system 112, display controller 156, contact module 130, graphics module 132, text input module 134, and browser module 147, the widget creator module 150 includes executable instructions to create widgets (e.g., turning a user-specified portion of a web page into a widget).

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

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

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

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

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

[0114] Each of the above identified modules and applications correspond to a set of executable instructions for performing one or more functions described above and themethods described in this 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 as separate software programs, procedures or modules, and thus various subsets of these modules are, optionally, combined or otherwise re-arranged in various embodiments. In some embodiments, memory 102 optionally stores a subset of the modules and data structures identified above. Furthermore, memory 102 optionally stores additional modules and data structures not described above.

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

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

[0117] Figure 1B is a block diagram illustrating example components for event handling in accordance with some embodiments. In some embodiments, memory 102 (in Figures 1 A) or 370 (e.g., in Figure 3A) includes event sorter 170 (e.g., in operating system 126) and a respective application 136-1 (e.g., any of the aforementioned applications 136, 137-155, 380-390).

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

[0119] In some embodiments, application internal state 192 includes additional information, such as one or more of: resume information to be used when application 136-1 resumes execution, user interface state information that indicates information being displayed or that is ready for display by application 136-1, a state queue for enabling the user to go back to a prior state or view of application 136-1, and a redo / undo queue of previous actions taken by the user.

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

[0121] In some embodiments, event monitor 171 sends requests to the peripherals interface 118 at predetermined intervals. In response, peripherals interface 118 transmits event information. In other embodiments, peripheral interface 118 transmits event information only when there is a significant event (e.g., receiving an input above a predetermined noise threshold and / or for more than a predetermined duration).

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

[0123] Hit view determination module 172 provides software procedures for determining where a sub-event has taken place within one or more views, when touch-sensitive display system 112 displays more than one view. Views are made up of controls and other elements that a user can see on the display.

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

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

[0126] Active event recognizer determination module 173 determines which view or views within a view hierarchy should receive a particular sequence of sub-events. In some embodiments, active event recognizer determination module 173 determines that only the hit view should receive a particular sequence of sub-events. In other embodiments, active event recognizer determination module 173 determines that all views that include the physical location of a sub-event are actively involved views, and therefore determines that all actively involved views should receive a particular sequence of sub-events. In other embodiments, even if touch sub-events were entirely confined to the area associated with one particular view, views higher in the hierarchy would still remain as actively involved views.

[0127] Event dispatcher module 174 dispatches the event information to an event recognizer (e.g., event recognizer 180). In embodiments including active event recognizer determination module 173, event dispatcher module 174 delivers the event information to an event recognizer determined by active event recognizer determination module 173. In some embodiments, event dispatcher module 174 stores in an event queue the event information, which is retrieved by a respective event receiver module 182.

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

[0129] 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 handling touch events that occur within a respective view of the application’s user interface. Each application view 191 of the application 136-1 includes one or more event recognizers 180. Typically, a respective application view 191 includes a plurality of event recognizers 180. In other embodiments, one or more of event recognizers 180 are part of a separate module, suchas a user interface kit or a higher level object from which application 136-1 inherits methods and other properties. In some embodiments, a respective event handler 190 includes one or more of data updater 176, object updater 177, GUI updater 178, and / or event data 179 received from event sorter 170. Event handler 190 optionally utilizes or calls data updater 176, object updater 177 or GUI updater 178 to update the application internal state 192.Alternatively, one or more of the application views 191 includes one or more respective event handlers 190. Also, in some embodiments, one or more of data updater 176, object updater 177, and GUI updater 178 are included in a respective application view 191.

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

[0131] Event receiver 182 receives event information from event sorter 170. The event information includes information about a sub-event, for example, a touch or a touch movement. Depending on the sub-event, the event information also includes additional information, such as location of the sub-event. When the sub-event concerns motion of a touch, the event information optionally also includes speed and direction of the sub-event. In some embodiments, events include rotation of the device from one orientation to another (e.g., from a portrait orientation to a landscape orientation, or vice versa), and the event information includes corresponding information about the current orientation (also called device attitude) of the device.

[0132] Event comparator 184 compares the event information to predefined event or sub-event definitions and, based on the comparison, determines an event or sub-event, or determines or updates the state of an event or sub-event. In some embodiments, event comparator 184 includes event definitions 186. Event definitions 186 contain definitions of events (e.g., predefined sequences of sub-events), for example, event 1 (187-1), event 2 (187-2), and others. In some embodiments, sub-events in an event 187 include, for example, touch begin, touch end, touch movement, touch cancellation, and multiple touching. In one example, the definition for event 1 (187-1) is a double tap on a displayed object. The double tap, for example, comprises a first touch (touch begin) on the displayed object for a predetermined phase, a first lift-off (touch end) for a predetermined phase, a second touch (touch begin) on the displayed object for a predetermined phase, and a second lift-off (touchend) for a predetermined phase. In another example, the definition for event 2 (187-2) is a dragging on a displayed object. The dragging, for example, comprises a touch (or contact) on the displayed object for a predetermined phase, a movement of the touch across touch-sensitive display system 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.

[0133] In some embodiments, event definition 187 includes a definition of an event for a respective user-interface object. In some embodiments, 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 in which three user-interface objects are displayed on touch-sensitive display system 112, when a touch is detected on touch-sensitive display system 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 result 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 triggering the hit test.

[0134] In some embodiments, the definition for a respective event 187 also includes delayed actions that delay delivery of the event information until after it has been determined whether the sequence of sub-events does or does not correspond to the event recognizer’s event type.

[0135] When a respective event recognizer 180 determines that the series of subevents do not match any of the events in event definitions 186, the respective event recognizer 180 enters an event impossible, event failed, or event ended state, after which it disregards subsequent sub-events of the touch-based gesture. In this situation, other event recognizers, if any, that remain active for the hit view continue to track and process subevents of an ongoing touch-based gesture.

[0136] In some embodiments, a 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 actively involved event recognizers. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate how event recognizers interact, or are enabled to interact, with one another. In some embodiments, metadata 183 includes configurable properties, flags, and / or lists that indicate whether sub-events are delivered to varying levels in the view or programmatic hierarchy.

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

[0138] In some embodiments, event delivery instructions 188 include sub-event delivery instructions that deliver event information about a sub-event without activating an event handler. Instead, the sub-event delivery instructions deliver event information to event handlers associated with the series of sub-events or to actively involved views. Event handlers associated with the series of sub-events or with actively involved views receive the event information and perform a predetermined process.

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

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

[0141] It shall be understood that the foregoing discussion regarding event handling of user touches on touch-sensitive displays also applies to other forms of user inputs to operate multifunction devices 100 with input-devices, not all of which are initiated on touch screens. For example, mouse movement and mouse button presses, optionally coordinated with single or multiple keyboard presses or holds; contact movements such as taps, drags, scrolls, etc., on touch-pads; pen stylus inputs; movement of the device; oral instructions; detected eye movements; biometric inputs; and / or any combination thereof are optionallyutilized as inputs corresponding to sub-events which define an event to be recognized. Figure 2 illustrates a portable multifunction device 100 having a touch screen (e.g., touch-sensitive display system 112, Figure 1A) in accordance with some embodiments. The touch screen optionally displays one or more graphics within user interface (UI) 200. In these embodiments, as well as others described below, a user is enabled to select one or more of the graphics by making a gesture on the graphics, for example, with one or more fingers 202 (not drawn to scale in the figure) or one or more styluses 203 (not drawn to scale in the figure). In some embodiments, selection of one or more graphics occurs when the user breaks contact with the one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (from left to right, right to left, upward and / or downward) and / or a rolling of a finger (from right to left, left to right, upward and / or downward) that has made contact with device 100. In some implementations or circumstances, inadvertent contact with a graphic does not select the graphic. For example, a swipe gesture that sweeps over an application icon optionally does not select the corresponding application when the gesture corresponding to selection is a tap.

[0142] Device 100 optionally also includes one or more physical buttons, such as “home” or menu button 204. As described previously, 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 button is implemented as a soft key in a GUI displayed on the touch-screen display, or as a system gesture such as an upward edge swipe.

[0143] In some embodiments, device 100 includes the touch-screen display, menu button 204 (sometimes called home button 204), push button 206 for powering the device on / off and locking the device, volume adjustment button(s) 208, Subscriber Identity Module (SIM) card slot 210, head set jack 212, and / or docking / charging external port 124. Push button 206 is, optionally, used to turn the power on / off on the device by depressing the button and holding the button in the depressed state for a predefined time interval; to lock the device by depressing the button and releasing the button before the predefined time interval has elapsed; and / or to unlock the device or initiate an unlock process. In some embodiments, device 100 also accepts verbal input for activation or deactivation of some functions through microphone 113. Device 100 also, optionally, includes one or more contact intensity sensors 165 for detecting intensities of contacts on touch-sensitive display system 112 and / or one or more tactile output generators 167 for generating tactile outputs for a user of device 100.

[0144] Figure 3 A is a block diagram of an example multifunction device with a display and a touch-sensitive surface in accordance with some embodiments. Device 300 need not be portable. In some embodiments, device 300 is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an educational device (such as a child’s learning toy), a gaming system, or a control device (e.g., a home or industrial controller). Device 300 typically includes one or more processing units (CPU’s) 310, one or more network or other communications interfaces 360, memory 370, and one or more communication buses 320 for interconnecting these components. Communication buses 320 optionally include circuitry (sometimes called a chipset) that interconnects and controls communications between system components. Device 300 includes input / output (I / O) interface 330 comprising display 340, which is typically a touch-screen display. I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and touchpad 355, tactile output generator 357 for generating tactile outputs on device 300 (e.g., similar to tactile output generator(s) 167 described above with reference to Figure 1A), sensors 359 (e.g., optical, acceleration, proximity, touch-sensitive, and / or contact intensity sensors similar to contact intensity sensor(s) 165 described above with reference to Figure 1A). Memory 370 includes high-speed random access memory, such as DRAM, SRAM, DDR RAM or other random access solid state memory devices; and optionally includes nonvolatile 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 remotely located from CPU(s) 310. In some embodiments, memory 370 stores programs, modules, and data structures analogous to the programs, modules, and data structures stored in memory 102 of portable multifunction device 100 (e.g., in Figure 1A), or a subset thereof. 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 authoring module 388, and / or spreadsheet module 390, while memory 102 of portable multifunction device 100 (e.g., in Figure 1A) optionally does not store these modules.

[0145] Each of the above identified elements in Figure 3 A are, optionally, stored in one or more of the previously mentioned memory devices. Each of the above identified modules corresponds to a set of instructions for performing a function described above. The above identified modules or programs (e.g., sets of instructions) need not be implemented asseparate software programs, procedures or modules, and thus various subsets of these modules are, optionally, combined or otherwise re-arranged in various embodiments. In some embodiments, memory 370 optionally stores a subset of the modules and data structures identified above. Furthermore, memory 370 optionally stores additional modules and data structures not described above.

[0146] Implementations within the scope of the present disclosure can be partially or entirely realized using a tangible computer-readable storage medium (or multiple tangible computer-readable storage media of one or more types) encoding one or more computer-readable instructions. It should be recognized that computer-readable instructions can be organized in any format, including applications, widgets, processes, software, and / or components.

[0147] Implementations within the scope of the present disclosure include a computer-readable storage medium that encodes instructions organized as an application (e.g., application 3160) that, when executed by one or more processing units, control an electronic device (e.g., device 3150) to perform the method of FIG. 3B, the method of FIG.3C, and / or one or more other processes and / or methods described herein.

[0148] It should be recognized that application 3160 (shown in FIG. 3D) can be any suitable type of application, including, for example, one or more of: a browser application, an application that functions as an execution environment for plug-ins, widgets or other applications, a fitness application, a health application, a digital payments application, a media application, a social network application, a messaging application, and / or a maps application. In some embodiments, application 3160 is an application that is pre-installed on device 3150 at purchase (e.g., a first-party application). In some embodiments, application 3160 is an application that is provided to device 3150 via an operating system update file (e.g., a first-party application or a second-party application). In some embodiments, application 3160 is an application that is provided via an application store. In some embodiments, the application store can be an application store that is pre-installed on device 3150 at purchase (e.g., a first-party application store). In some embodiments, the application store is a third-party application store (e.g., an application store that is provided by another application store, downloaded via a network, and / or read from a storage device).

[0149] Referring to FIG. 3B and FIG. 3F, application 3160 obtains information (e.g., 3010). In some embodiments, at 3010, information is obtained from at least one hardware component of device 3150. In some embodiments, at 3010, information is obtained from atleast one software module of device 3150. In some embodiments, at 3010, information is obtained from at least one hardware component external to device 3150 (e.g., a peripheral device, an accessory device, and / or a server). In some embodiments, the information obtained at 3010 includes positional information, time information, notification information, user information, environment information, electronic device state information, weather information, media information, historical information, event information, hardware information, and / or motion information. In some embodiments, in response to and / or after obtaining the information at 3010, application 3160 provides the information to a system (e.g., 3020).

[0150] In some embodiments, the system (e.g., 3110 shown in FIG. 3E) is an operating system hosted on device 3150. In some embodiments, the system (e.g., 3110 shown in FIG. 3E) is an external device (e.g., a server, a peripheral device, an accessory, and / or a personal computing device) that includes an operating system.

[0151] Referring to FIG. 3C and FIG. 3G, application 3160 obtains information (e.g., 3030). In some embodiments, the information obtained at 3030 includes positional information, time information, notification information, user information, environment information electronic device state information, weather information, media information, historical information, event information, hardware information, and / or motion information. In response to and / or after obtaining the information at 3030, application 3160 performs an operation with the information (e.g., 3040). In some embodiments, the operation performed at 3040 includes: providing a notification based on the information, sending a message based on the information, displaying the information, controlling a user interface of a fitness application based on the information, controlling a user interface of a health application based on the information, controlling a focus mode based on the information, setting a reminder based on the information, adding a calendar entry based on the information, and / or calling an API of system 3110 based on the information.

[0152] In some embodiments, one or more steps of the method of FIG. 3B and / or the method of FIG. 3C is performed in response to a trigger. In some embodiments, the trigger includes detection of an event, a notification received from system 3110, a user input, and / or a response to a call to an API provided by system 3110.

[0153] In some embodiments, the instructions of application 3160, when executed, control device 3150 to perform the method of FIG. 3B and / or the method of FIG. 3C by calling an application programming interface (API) (e.g., API 3190) provided by system3110. In some embodiments, application 3160 performs at least a portion of the method of FIG. 3B and / or the method of FIG. 3C without calling API 3190.

[0154] In some embodiments, one or more steps of the method of FIG. 3B and / or the method of FIG. 3C includes calling an API (e.g., API 3190) using one or more parameters defined by the API. In some embodiments, the one or more parameters include a constant, a key, a data structure, an object, an object class, a variable, a data type, a pointer, an array, a list or a pointer to a function or method, and / or another way to reference a data or other item to be passed via the API.

[0155] Referring to FIG. 3D, device 3150 is illustrated. In some embodiments, device 3150 is a personal computing device, a smart phone, a smart watch, a fitness tracker, a head mounted display (HMD) device, a media device, a communal device, a speaker, a television, and / or a tablet. As illustrated in FIG. 3D, device 3150 includes application 3160 and an operating system (e.g., system 3110 shown in FIG. 3E). Application 3160 includes application implementation module 3170 and API-calling module 3180. System 3110 includes API 3190 and implementation module 3100. It should be recognized that device 3150, application 3160, and / or system 3110 can include more, fewer, and / or different components than illustrated in FIGS. 3D and 3E.

[0156] In some embodiments, application implementation module 3170 includes a set of one or more instructions corresponding to one or more operations performed by application 3160. For example, when application 3160 is a messaging application, application implementation module 3170 can include operations to receive and send messages. In some embodiments, application implementation module 3170 communicates with API-calling module 3180 to communicate with system 3110 via API 3190 (shown in FIG. 3E).

[0157] In some embodiments, API 3190 is a software module (e.g., a collection of computer-readable instructions) that provides an interface that allows a different module (e.g., API-calling module 3180) to access and / or use one or more functions, methods, procedures, data structures, classes, and / or other services provided by implementation module 3100 of system 3110. For example, API-calling module 3180 can access a feature of implementation module 3100 through one or more API calls or invocations (e.g., embodied by a function or a method call) exposed by API 3190 (e.g., a software and / or hardware module that can receive API calls, respond to API calls, and / or send API calls) and can pass data and / or control information using one or more parameters via the API calls orinvocations. In some embodiments, API 3190 allows application 3160 to use a service provided by a Software Development Kit (SDK) library. In some embodiments, application 3160 incorporates a call to a function or method provided by the SDK library and provided by API 3190 or uses data types or objects defined in the SDK library and provided by API 3190. In some embodiments, API-calling module 3180 makes an API call via API 3190 to access and use a feature of implementation module 3100 that is specified by API 3190. In such embodiments, implementation module 3100 can return a value via API 3190 to API-calling module 3180 in response to the API call. The value can report to application 3160 the capabilities or state of a hardware component of device 3150, including those related to aspects such as input capabilities and state, output capabilities and state, processing capability, power state, storage capacity and state, and / or communications capability. In some embodiments, API 3190 is implemented in part by firmware, microcode, or other low level logic that executes in part on the hardware component.

[0158] In some embodiments, API 3190 allows a developer of API-calling module 3180 (which can be a third-party developer) to leverage a feature provided by implementation module 3100. In such embodiments, there can be one or more API calling modules (e.g., including API-calling module 3180) that communicate with implementation module 3100. In some embodiments, API 3190 allows multiple API calling modules written in different programming languages to communicate with implementation module 3100 (e.g., API 3190 can include features for translating calls and returns between implementation module 3100 and API-calling module 3180) while API 3190 is implemented in terms of a specific programming language. In some embodiments, API-calling module 3180 calls APIs from different providers such as a set of APIs from an OS provider, another set of APIs from a plug-in provider, and / or another set of APIs from another provider (e.g., the provider of a software library) or creator of the another set of APIs.

[0159] Examples of API 3190 can include one or more of: a pairing API (e.g., for establishing secure connection, e.g., with an accessory), a device detection API (e.g., for locating nearby devices, e.g., media devices and / or smartphone), a payment API, a UIKit API (e.g., for generating user interfaces), a location detection API, a locator API, a maps API, a health sensor API, a sensor API, a messaging API, a push notification API, a streaming API, a collaboration API, a video conferencing API, an application store API, an advertising services API, a web browser API (e.g., WebKit API), a vehicle API, a networking API, a WiFi API, a Bluetooth API, an NFC API, a UWB API, a fitness API, a smart home API,contact transfer API, photos API, camera API, and / or image processing API. In some embodiments, the sensor API is an API for accessing data associated with a sensor of device 3150. For example, the sensor API can provide access to raw sensor data. For another example, the sensor API can provide data derived (and / or generated) from the raw sensor data. In some embodiments, the sensor data includes temperature data, image data, video data, audio data, heart rate data, IMU (inertial measurement unit) data, lidar data, location data, GPS data, and / or camera data. In some embodiments, the sensor includes one or more of an accelerometer, temperature sensor, infrared sensor, optical sensor, heartrate sensor, barometer, gyroscope, proximity sensor, temperature sensor, and / or biometric sensor.

[0160] In some embodiments, implementation module 3100 is a system (e.g., operating system and / or server system) software module (e.g., a collection of computer-readable instructions) that is constructed to perform an operation in response to receiving an API call via API 3190. In some embodiments, implementation module 3100 is constructed to provide an API response (via API 3190) as a result of processing an API call. By way of example, implementation module 3100 and API-calling module 3180 can each be any one of an operating system, a library, a device driver, an API, an application program, or other module. It should be understood that implementation module 3100 and API-calling module 3180 can be the same or different type of module from each other. In some embodiments, implementation module 3100 is embodied at least in part in firmware, microcode, or hardware logic.

[0161] In some embodiments, implementation module 3100 returns a value through API 3190 in response to an API call from API-calling module 3180. While API 3190 defines the syntax and result of an API call (e.g., how to invoke the API call and what the API call does), API 3190 might not reveal how implementation module 3100 accomplishes the function specified by the API call. Various API calls are transferred via the one or more application programming interfaces between API-calling module 3180 and implementation module 3100. Transferring the API calls can include issuing, initiating, invoking, calling, receiving, returning, and / or responding to the function calls or messages. In other words, transferring can describe actions by either of API-calling module 3180 or implementation module 3100. In some embodiments, a function call or other invocation of API 3190 sends and / or receives one or more parameters through a parameter list or other structure.

[0162] In some embodiments, implementation module 3100 provides more than one API, each providing a different view of or with different aspects of functionality implementedby implementation module 3100. For example, one API of implementation module 3100 can provide a first set of functions and can be exposed to third-party developers, and another API of implementation module 3100 can be hidden (e.g., not exposed) and provide a subset of the first set of functions and also provide another set of functions, such as testing or debugging functions which are not in the first set of functions. In some embodiments, implementation module 3100 calls one or more other components via an underlying API and thus is both an API calling module and an implementation module. It should be recognized that implementation module 3100 can include additional functions, methods, classes, data structures, and / or other features that are not specified through API 3190 and are not available to API-calling module 3180. It should also be recognized that API-calling module 3180 can be on the same system as implementation module 3100 or can be located remotely and access implementation module 3100 using API 3190 over a network. In some embodiments, implementation module 3100, API 3190, and / or API-calling module 3180 is stored in a machine-readable medium, which includes any mechanism for storing information in a form readable by a machine (e.g., a computer or other data processing system). For example, a machine-readable medium can include magnetic disks, optical disks, random access memory; read only memory, and / or flash memory devices.

[0163] An application programming interface (API) is an interface between a first software process and a second software process that specifies a format for communication between the first software process and the second software process. Limited APIs (e.g., private APIs or partner APIs) are APIs that are accessible to a limited set of software processes (e.g., only software processes within an operating system or only software processes that are approved to access the limited APIs). Public APIs that are accessible to a wider set of software processes. Some APIs enable software processes to communicate about or set a state of one or more input devices (e.g., one or more touch sensors, proximity sensors, visual sensors, motion / orientation sensors, pressure sensors, intensity sensors, sound sensors, wireless proximity sensors, biometric sensors, buttons, switches, rotatable elements, and / or external controllers). Some APIs enable software processes to communicate about and / or set a state of one or more output generation components (e.g., one or more audio output generation components, one or more display generation components, and / or one or more tactile output generation components). Some APIs enable particular capabilities (e.g., scrolling, handwriting, text entry, image editing, and / or image creation) to be accessed, performed, and / or used by a software process (e.g., generating outputs for use by a software process based on input from the software process). Some APIs enable content from asoftware process to be inserted into a template and displayed in a user interface that has a layout and / or behaviors that are specified by the template.

[0164] Many software platforms include a set of frameworks that provides the core objects and core behaviors that a software developer needs to build software applications that can be used on the software platform. Software developers use these objects to display content onscreen, to interact with that content, and to manage interactions with the software platform. Software applications rely on the set of frameworks for their basic behavior, and the set of frameworks provides many ways for the software developer to customize the behavior of the application to match the specific needs of the software application. Many of these core objects and core behaviors are accessed via an API. An API will typically specify a format for communication between software processes, including specifying and grouping available variables, functions, and protocols. An API call (sometimes referred to as an API request) will typically be sent from a sending software process to a receiving software process as a way to accomplish one or more of the following: the sending software process requesting information from the receiving software process (e.g., for the sending software process to take action on), the sending software process providing information to the receiving software process (e.g., for the receiving software process to take action on), the sending software process requesting action by the receiving software process, or the sending software process providing information to the receiving software process about action taken by the sending software process. Interaction with a device (e.g., using a user interface) will in some circumstances include the transfer and / or receipt of one or more API calls (e.g., multiple API calls) between multiple different software processes (e.g., different portions of an operating system, an application and an operating system, or different applications) via one or more APIs (e.g., via multiple different APIs). For example, when an input is detected the direct sensor data is frequently processed into one or more input events that are provided (e.g., via an API) to a receiving software process that makes some determination based on the input events, and then sends (e.g., via an API) information to a software process to perform an operation (e.g., change a device state and / or user interface) based on the determination. While a determination and an operation performed in response could be made by the same software process, alternatively the determination could be made in a first software process and relayed (e.g., via an API) to a second software process, that is different from the first software process, that causes the operation to be performed by the second software process. Alternatively, the second software process could relay instructions (e.g., via an API) to a third software process that is different from the first software process and / or the second softwareprocess to perform the operation. It should be understood that some or all user interactions with a computer system could involve one or more API calls within a step of interacting with the computer system (e.g., between different software components of the computer system or between a software component of the computer system and a software component of one or more remote computer systems). It should be understood that some or all user interactions with a computer system could involve one or more API calls between steps of interacting with the computer system (e.g., between different software components of the computer system or between a software component of the computer system and a software component of one or more remote computer systems).

[0165] In some embodiments, the application can be any suitable type of application, including, for example, one or more of: a browser application, an application that functions as an execution environment for plug-ins, widgets or other applications, a fitness application, a health application, a digital payments application, a media application, a social network application, a messaging application, and / or a maps application.

[0166] In some embodiments, the application is an application that is pre-installed on the first computer system at purchase (e.g., a first-party application). In some embodiments, the application is an application that is provided to the first computer system via an operating system update file (e.g., a first party application). In some embodiments, the application is an application that is provided via an application store. In some embodiments, the application store is pre-installed on the first computer system at purchase (e.g., a first party application store) and allows download of one or more applications. In some embodiments, the application store is a third-party application store (e.g., an application store that is provided by another device, downloaded via a network, and / or read from a storage device). In some embodiments, the application is a third-party application (e.g., an app that is provided by an application store, downloaded via a network, and / or read from a storage device). In some embodiments, the application controls the first computer system to perform the methods described herein by calling an application programming interface (API) provided by the system process using one or more parameters.

[0167] In some embodiments, exemplary APIs provided by the system process include one or more of: a pairing API (e.g., for establishing secure connection, e.g., with an accessory), a device detection API (e.g., for locating nearby devices, e.g., media devices and / or smartphone), a payment API, a UIKit API (e.g., for generating user interfaces), a location detection API, a locator API, a maps API, a health sensor API, a sensor API, amessaging API, a push notification API, a streaming API, a collaboration API, a video conferencing API, an application store API, an advertising services API, a web browser API (e.g., WebKit API), a vehicle API, a networking API, a WiFi API, a Bluetooth API, an NFC API, a UWB API, a fitness API, a smart home API, a contact transfer API, a photos API, a camera API, and / or an image processing API.

[0168] In some embodiments, at least one API is a software module (e.g., a collection of computer-readable instructions) that provides an interface that allows a different module (e.g., an API calling module) to access and use one or more functions, methods, procedures, data structures, classes, and / or other services provided by an implementation module of the system process. The API can define one or more parameters that are passed between the API calling module and the implementation module. In some embodiments, API 3190 defines a first API call that can be provided by API-calling module 3180. The implementation module is a system software module (e.g., a collection of computer-readable instructions) that is constructed to perform an operation in response to receiving an API call via the API. In some embodiments, the implementation module is constructed to provide an API response (via the API) as a result of processing an API call. In some embodiments, the implementation module is included in the device (e.g., 3150) that runs the application. In some embodiments, the implementation module is included in an electronic device that is separate from the device that runs the application.

[0169] Attention is now directed towards embodiments of user interfaces (“UI”) that are, optionally, implemented on portable multifunction device 100.

[0170] Figure 4A illustrates an example user interface for a menu of applications on portable multifunction device 100 in accordance with some embodiments. Similar user interfaces are, optionally, implemented on device 300. In some embodiments, user interface 400 includes the following elements, or a subset or superset thereof• Signal strength indicator(s) for wireless communication(s), such as cellular and Wi-Fi signals;• Time;• a Bluetooth indicator;• a Battery status indicator;• Tray 408 (e.g., home screen dock 6403) with icons for frequently used applications, such as:o Icon 416 for telephone module 138, labeled “Phone,” which optionally includes an indicator 414 of the number of missed calls or voicemail messages;o Icon 418 for e-mail client module 140, labeled “Mail,” which optionally includes an indicator 410 of the number of unread e-mails;o Icon 420 for browser module 147, labeled “Browser”; ando Icon 422 for video and music player module 152, labeled “Music”; and• Icons for other applications, such as:o Icon 424 for IM module 141, labeled “Messages”;o Icon 426 for calendar module 148, labeled “Calendar”;o Icon 428 for image management module 144, labeled “Photos”;o Icon 430 for camera module 143, labeled “Camera”;o Icon 432 for online video module 155, labeled “Online Video”;o Icon 434 for stocks widget 149-2, labeled “Stocks”;o Icon 436 for map module 154, labeled “Maps”;o Icon 438 for weather widget 149-1, labeled “Weather”;o Icon 440 for alarm clock widget 149-4, labeled “Clock”;o Icon 442 for workout support module 142, labeled “Workout Support”; o Icon 444 for notes module 153, labeled “Notes”; ando Icon 446 for a settings application or module, which provides access to settings for device 100 and its various applications 136.

[0171] It should be noted that the icon labels illustrated in Figure 4A are merely examples. For example, other labels are, optionally, used for various application icons. In some embodiments, a label for a respective application icon includes a name of an application corresponding to the respective application icon. In some embodiments, a label for a particular application icon is distinct from a name of an application corresponding to the particular application icon.

[0172] Figure 4B illustrates an example user interface on a device (e.g., device 300, Figure 3A) with a touch-sensitive surface 451 (e.g., a tablet or touchpad 355, Figure 3A) thatis separate from the display 450. Although many of the examples that follow 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 that is separate from the display, as shown in FIG. 4B. In some embodiments, the touch-sensitive surface (e.g., 451 in Figure 4B) has a primary axis (e.g., 452 in Figure 4B) that corresponds to a primary axis (e.g., 453 in Figure 4B) on the display (e.g., 450). In accordance with these embodiments, the device detects contacts (e.g., 460 and 462 in Figure 4B) with the touch- sensitive surface 451 at locations that correspond to respective locations on the display (e.g., in Figure 4B, contact 460 corresponds to 468 and contact 462 corresponds to 470). In this way, user inputs (e.g., contacts 460 and 462, and movements thereof) detected by the device on the touch-sensitive surface (e.g., 451 in Figure 4B) are used by the device to manipulate the user interface on the display (e.g., 450 in Figure 4B) of the multifunction device when the touch-sensitive surface is separate from the display. It should be understood that similar methods are, optionally, used for other user interfaces described herein.

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

[0174] As used herein, the term “focus selector” refers to an input element that indicates a current part of a user interface with which a user is interacting. In some implementations that include a cursor or other location marker, the cursor acts as a “focus selector,” so that when an input (e.g., a press input) is detected on a touch-sensitive surface (e.g., touchpad 355 in Figure 3 A or touch-sensitive surface 451 in Figure 4B) while the cursor is over a particular user interface element (e.g., a button, window, slider or other userinterface element), the particular user interface element is adjusted in accordance with the detected input. In some implementations that include a touch-screen display (e.g., touch-sensitive display system 112 in Figure 1 A or the touch screen in Figure 4A) that enables direct interaction with user interface elements on the touch-screen display, a detected contact on the touch-screen acts as a “focus selector,” so that when an input (e.g., a press input by the contact) is detected on the touch-screen display at a location of a particular user interface element (e.g., a button, window, slider or other user interface element), the particular user interface element is adjusted in accordance with the detected input. In some implementations, focus is moved from one region of a user interface to another region of the user interface without corresponding movement of a cursor or movement of a contact on a touch-screen display (e.g., by using a tab key or arrow keys to move focus from one button to another button); in these implementations, the focus selector moves in accordance with movement of focus between different regions of the user interface. Without regard to the specific form taken by the focus selector, the focus selector is generally the user interface element (or contact on a touch-screen display) that is controlled by the user so as to communicate the user’s intended interaction with the user interface (e.g., by indicating, to the device, the element of the user interface with which the user is intending to interact). For example, the location of a focus selector (e.g., a cursor, a contact, or a selection box) over a respective button while a press input is detected on the touch-sensitive surface (e.g., a touchpad or touch screen) will indicate that the user is intending to activate the respective button (as opposed to other user interface elements shown on a display of the device).USER INTERFACES AND ASSOCIATED PROCESSES

[0175] Attention is now directed towards embodiments of user interfaces (“UI”) and associated processes that may be implemented on an electronic device (or computer system more generally), such as portable multifunction device 100 or device 300, with a display, a touch-sensitive surface, (optionally) one or more tactile output generators for generating tactile outputs, and (optionally) one or more sensors to detect intensities of contacts with the touch-sensitive surface.

[0176] Figures 5A-5AD illustrate example user interfaces that include adaptive materials in accordance with some embodiments. The user interfaces in these figures are used to illustrate the processes described below. Although some of the examples which follow will be given with reference to inputs on a touch-sensitive surface 451 that is separate from the display 450, in some embodiments, the device detects inputs on a touch-screen display(where the touch-sensitive surface and the display are combined), as shown in Figure 4A. For convenience of explanation, some of the embodiments will be discussed with reference to operations performed on a device with a touch-sensitive display system 112. In such embodiments, the focus selector is, optionally: a respective finger or stylus contact, a representative point corresponding to a finger or stylus contact (e.g., a centroid of a respective contact or a point associated with a respective contact), or a centroid of two or more contacts detected on the touch-sensitive display system 112. However, analogous operations are, optionally, performed on a device with a display 450 and a separate touch-sensitive surface 451 in response to detecting the contacts on the touch- sensitive surface 451 while displaying the user interfaces shown in the figures on the display 450, along with a focus selector, and / or in response to detecting other types of inputs performed using an input device (e.g., a hardware button, a controller, a mouse, a trackpad, or another control device) while a location or object is targeted, such as via a focus selector (e.g., a pointer, or a cursor, or a gaze) being on the location or object, and / or an air gesture performed using an input element such as hand(s) or finger(s) (e.g., a hand waving, a hand flipping, two hands moving toward each other, two fingers pinching, and / or one finger tapping) posed, changing pose, and / or moving in physical space while a location or object is targeted, such as when the location of the hand(s) and / or finger(s) are on or near the object or the location or while a focus selector is on the location or object.

[0177] Figures 5A-5E illustrate example user interfaces for displaying a simulated emissive user interface element in accordance with some embodiments. Figures 5F-5M illustrate example user interfaces for adjusting one or more visual properties responsive to user interaction in accordance with some embodiments. Figures 5N-5Q6 illustrate example user interfaces for transitioning between displaying a first set of controls and a second set of controls in accordance with some embodiments. Figures 5R-5V illustrate user interfaces for morphing a user interface element in accordance with some embodiments. Figures 5W-5Z illustrate example user interfaces for stretching and / or smashing a user interface element in accordance with some embodiments. Figures 5Z1-5AA illustrates animating a user interface element in accordance with some embodiments. Figures 5AB-5AD illustrate animated transitions for numerals in accordance with some embodiments. Figures 5AE-5AG illustrate updating numerals displayed with a simulated user interface appearance in accordance with some embodiments. Figures 6A-6C illustrate examples of layers used to generate a simulated user interface appearance of a user interface object in accordance with some embodiments. Figures 6D-6H illustrate applying various levels of deemphasis to user interface objects while changingunderlying content in accordance with some embodiments. Figures 6I-6T illustrate visually emphasizing user interface obj ects that at least partially overlay one or more other user interface objects in accordance with some embodiments. Figures 6U-6AN illustrate a sequence for displaying and / or condensing sets of controls in accordance with some embodiments. Figures 6AO-6AP illustrate examples of modifying internal content that is displayed in a user interface object that is visually associated with a simulated user interface appearance in accordance with some embodiments.

[0178] Figure 5A illustrates a first page of a home screen user interface displayed via one or more display generation components of device 100. In some embodiments, the home screen user interface includes one or more application icons, as described with reference to Figure 4A. In some embodiments, the device 100 detects a user input 502, such as a swipe user input, via touch screen 112. In some embodiments, in response to detecting the user input 502, the device 100 displays a second page of the home screen user interface 504, as illustrated in Figure 5B.

[0179] In some embodiments, the second page of the home screen user interface 504 includes one or more application icons and / or one or more widgets. For example, the second page of the home screen user interface 504 includes application icon 448, application icon 450, and calendar widget 506. In some embodiments, a respective application icon is displayed to simulate multiple content layers within the application icon, such that the content within the application icon is perceived as three-dimensional having a non-zero depth, for example by displaying a first portion of content within the application icon as being simulated in a layer above a layer for a second portion of the content within the application icon. In some embodiments, content within one or more of the layers (or, optionally multiple layers, or all layers) is displayed as casting a virtual shadow on content within one or more underlying layers. In some embodiments, one or more layers (or optionally multiple layers, or all layers) is displayed with one or more virtual lighting effects (e.g., specular highlights), optionally including applying an independently determined virtual lighting effect to each layer (e.g., each layer is displayed with different specular highlights).

[0180] In some embodiments, one or more of the application icons and / or widgets displayed in the home screen user interface 504 include one or more emissive elements. For example, an emissive element is a user interface element that is displayed concurrently with a virtual lighting effect such that the emissive element appears to shine, reflect, highlight, or otherwise emit virtual light onto one or more other objects displayed in the user interface. Insome embodiments, application icon 450 is an emissive application icon that is displayed with virtual lighting effect 524 that appears to shine light onto the calendar widget 506. In some embodiments, in response to detecting a user input 551, in accordance with a determination that user input 551 is a first type of input, such as a tap input or other selection input, directed to the application icon 450, a user interface for the application associated with the application icon 450 is displayed. For example, in response to detecting that user input 451 is directed to an email application icon for an email application, the device 100 displays an application user interface for the email application, such as user interface 540 in Figure 5D (e.g., where Figure 5D optionally follows Figure 5B in sequence). In some embodiments, in accordance with a determination that the user input 551 is a second type of input, such as a tap and hold input, a swipe input, or another type of input, a quick actions menu for the selected application icon 450 (e.g., menu 6404 for a clock application described with reference to Figure 6J, or another menu for the selected application icon) is displayed. In some embodiments, the virtual lighting effect 524 comprises one or more colors corresponding to one or more colors of the emissive application icon 450. For example, the application icon 450 is displayed with one or more colors, and a virtual lighting effect in the one or more colors is displayed as if produced by the application icon 450 and is simulated to shine on a portion of the calendar widget 506 that would glow in the physical world.

[0181] In some embodiments, one or more application icons and / or widgets are displayed as simulated glass material. As used herein, simulated glass material is a nonlimiting example, and objects described herein as being displayed with the simulated glass material may be displayed with other user interface materials that have simulated optical, physical and / or virtual properties. In some embodiments, user interface elements, objects, buttons, platters, and / or other content that are described as being displayed with the simulated glass material are displayed with respective levels of one or more visual properties described with reference to Figures 6A-6B13 to generate the appearance of the simulated user interface material. For example, calendar widget 506 is displayed as a platter made out of simulated glass material such that portions of the user interface 504 that appear behind the calendar widget 506 are displayed with blur, magnification, refraction, or other simulated visual properties to simulate the appearance of being located behind a glass material. For example, the star 518 is included in the background of the user interface 504, sometimes referred to herein as a background layer. In some embodiments, user interface elements displayed with the simulated glass material are displayed in a glass layer that appears to be above the background layer (e.g., with a non-zero distance the z-axis). In some embodiments, contentthat is not displayed with the simulated glass material is displayed in the background layer (e.g., or is optionally displayed in a content layer that appears between (e.g., relative to the z-axis) the background layer and the glass layer).

[0182] In some embodiments, user interface elements (e.g., including application icons, widgets, and / or other user interface objects) displayed with the simulated glass material are displayed with one or more specular effects. For example, one or more specular effects are displayed that make the respective user interface element reflect and / or highlight portions of the respective user interface element (e.g., including edges of the user interface element) based on simulated virtual light source(s) (e.g., simulated reflection of simulated light on the simulated glass material).

[0183] In some embodiments, the edges of the calendar widget 506 appear as a bezel to simulate a thickness of the simulated glass material. For example, virtual lighting effects, including colors, lighting, shadows, refraction, and / or glow from content in the background layer and / or content within the glass layer (e.g., including from the calendar widget 506 itself), are applied to the edges of the calendar widget 506. In some embodiments, user interface objects displayed as simulated glass material are displayed concurrently with one or more shadows to simulate the user interface object as being positioned above other user interface objects (e.g., in a background of the user interface). For example, one or more colors of the star 518 appear to refract, magnify, and / or blur along the portion of the edge 516 of the calendar widget 506 that overlaps with the star 518 (e.g., and the portion of the edge 530 is displayed with virtual lighting effects based on visual properties of the star in the background layer underneath the portion of the edge 530). In some embodiments, one or more specular highlights and / or other virtual lighting effects (e.g., as described below with reference to Figure 5AB) are displayed over one or more portions (e.g., along one or more edges) of the calendar widget 506.

[0184] In some embodiments, the portion of the star 518 that appears to be occluded by the simulated glass material of the calendar widget 506 (e.g., represented by the dashed lines of the star 518) appears distorted. For example, the portion of the star 518 that is displayed as underneath the calendar widget 506 is displayed with a first level of blurring, a first amount of refraction, a first amount of magnification, and / or respective first amounts of other visual properties, where the first amount of blurring, the first amount of refraction, the first amount of magnification, and / or the respective first amounts of other visual properties are determined based at least in part on a simulated depth between the background and thecalendar widget 506. For example, as described below with respect to Figures 5F-5I, changing a simulated depth (e.g., and / or simulated angle) that separates the layer that includes the simulated glass material and the layer that includes the background of the user interface (e.g., the stars displayed in the background of the user interface) causes a change in the amount of blurring, the amount of refraction, the amount of magnification, and / or the amounts of other visual properties of the content (e.g., such that the content appears differently through the simulated glass material at the new simulated depth(s) and / or simulated angle(s)).

[0185] In some embodiments, the calendar widget 506 includes one or more emissive elements, such as emissive element 526-1. In some embodiments, the one or more emissive elements of a user interface object are defined by a designer and / or developer of the user interface object. For example, a designer and / or developer determines which portion(s) of the application icon 450 will be displayed with a virtual lighting effect to appear as though those portion(s) are emitting the light of the virtual lighting effect. In some embodiments, the virtual lighting effects appear to diffuse outward (e.g., the virtual lighting effect becomes less prominent at locations that are farther away from the respective emissive element).

[0186] In some embodiments, the calendar widget 506 includes user interface subelements corresponding to dates in a calendar. In some embodiments, the user interface subelements appear as simulated glass material that is in a layer above the simulated glass material of the calendar widget 506.

[0187] In some embodiments, the user interface sub-elements are selectable via one or more user inputs (e.g., to view additional details stored in a calendar application associated with the calendar widget 506). In some embodiments, the emissive element 526-1 corresponds to a currently selected date (e.g., automatically selected as the current date and / or selected by a user input). In some embodiments, the emissive element 526-1 (e.g., the user interface element corresponding to the “8”) is displayed with a first color, different from the color(s) of one or more other user interface sub-elements in the calendar widget 506 (e.g., the other user interface sub-elements corresponding to the other dates in the month). For example, the emissive element 526-1 is displayed with the color red (e.g., or another color) and the device 100 concurrently displays a virtual lighting effect with the color red (e.g., or another color) that appears to emanate from the user interface sub-element corresponding to the “8”. In some embodiments, the virtual lighting effect appears brightest close to the “8” and diffuses radially from the “8”. In some embodiments, the virtual lighting effect appears tointeract with an edge of one or more other user interface sub-elements within the calendar widget 506 (e.g., the virtual lighting effect appears to hit a portion of the bottom edge 514-1 of the user interface element corresponding to the “1”, a portion of the right edge 512-1 of the user interface element corresponding to the “7”, a portion of the left edge 528-1 of the user interface element corresponding to the “9” and a portion of the top edge 508-1 of the user interface element corresponding to the “15”). In some embodiments, the virtual lighting effect appears to interact with one or more user interface sub-elements that are within a threshold distance of the emissive element 526-1 without interacting with one or more user interface elements that are not within the threshold distance (e.g., the virtual lighting effect does not interact with an edge of the user interface element corresponding to the “22”). In some embodiments, the virtual lighting effect interacts with the respective edges of the other user interface elements (e.g., that are displayed as simulated glass material) by refracting, magnifying, or otherwise emphasizing the portions of the respective edges where the simulated virtual lighting effect (e.g., that appears to originate from emissive element 526-1) hits the respective edges.

[0188] In some embodiments, the device 100 displays a virtual lighting effect that appears to originate from the emissive element 526-1 is applied to the edges of the calendar widget 506 at portion 520 and portion 510. For example, portion 520 and portion 510 are displayed with a color matching the color of the emissive element 526-1.

[0189] Figure 5B further illustrates the device 100 detecting a user input 532 (e.g., a tap user input or other selection user input) selecting a user interface element corresponding to the “25”. In some embodiments, in response to detecting the user input 532, the device 100 selects the user interface element corresponding to the “25” in the calendar widget 506 as an emissive element (e.g., and optionally deselects the user interface element corresponding to the “8” as an emissive element, such that the user interface element corresponding to the “8” is no longer displayed with a virtual lighting effect that appears to originate from the “8”), as illustrated in Figure 5C, where Figure 5C follows Figure 5B in sequence.

[0190] For example, in Figure 5C, the device 100 concurrently displays a virtual lighting effect that appears to emanate from the user interface element 526-2 corresponding to the “25” in the calendar widget 506. In some embodiments, the virtual lighting effect appears to interact with the respective edges of the surrounding user interface elements (e.g., the virtual lighting effect appears to hit a portion of the bottom edge 514-2 of the user interface element corresponding to the “25”, a portion of the right edge 512-2 of the userinterface element corresponding to the “24”, and a portion of the left edge 528-2 of the user interface element corresponding to the “26”). In some embodiments, the edges of the calendar widget 506 are also updated in accordance with the currently selected emissive element (e.g., portion 534 and portion 536 of the edges of the calendar widget 506 are displayed as interacting with the virtual lighting effect, and the portion 510 and portion 520 are no longer displayed with the virtual lighting effect), optionally based on a distance between the respective edges and the currently selected emissive element.

[0191] In some embodiments, the device 100 detects a user input 538 (e.g., a tap user input or other selection user input) directed to a mail application icon, and in response to detecting the user input 538 directed to the mail application icon, the device 100 displays a user interface 540 for a mail application corresponding to the mail application icon, as illustrated in Figure 5D. In some embodiments, the user interface 540 optionally includes content (e.g., leaf 550 or other content, optionally including user-selectable content) in the background layer of the user interface. In some embodiments, the device 100 displays an inbox user interface object 544 in the glass layer. For example, the user interface object 544 is displayed as simulated glass material such that the edges of the user interface object 544 interact with other content (e.g., content in the background layer, content within the user interface object 544 and / or other content in the simulated glass layer).

[0192] In some embodiments, the user interface object 544 includes a message list portion that includes representations of messages, including messages 552-1 through 552-5. In some embodiments, the user is enabled to select a respective message (e.g., email or other message) from the message list (e.g., displayed in sidebar 543) in order to view content of the message. In some embodiments, the user interface object 544 includes a message content portion 554 for viewing the content of a selected respective message. In some embodiments, a currently selected message in the message list is selected as an emissive element. For example, in Figure 5D, message 552-1 is selected (e.g., automatically by the mail application and / or via a user selection input), and while the message 552-1 is selected, the user interface element 542 corresponding to message 552-1 is displayed with a first color in the message list to indicate its status as currently selected. For example, user interface element 542 is displayed as the color blue (e.g., or another color), while the other messages in the message list are displayed with a different color (e.g., or with a simulated glass material that displays a distorted version of the content beneath the message list). In some embodiments, while the user interface element 542 is selected as the emissive element, a virtual lighting effect isconcurrently displayed as emanating from the user interface element 542, including displaying the color blue as interacting with the portion 546 of the edge of the user interface object 544 and / or displaying a glow effect 548 (e.g., with the color blue or other color matching the color of the user interface element 542) overlapping with the message content portion 554 that displays the content of the message 552-1.

[0193] Figure 5E follows in sequence from Figure 5D and illustrates that, in response to detecting a user input 553 (e.g., in Figure 5D) selecting message 552-5 in the user interface 540 (e.g., and deselecting message 552-1), user interface element 542 is no longer displayed as an emissive element and user interface element 556 is displayed as an emissive element (e.g., optionally with the same color and / or properties as described with reference to the emissive element of user interface element 542). For example, a virtual lighting effect is displayed as a glow effect 560 overlapping with the message content portion 562 that displays the content of the message 552-5 and as interacting with the portion 558 of the edge of the user interface object 544 (e.g., providing a blue outline along the lower left corner of the edge of the user interface object 544).

[0194] It will be understood that although the examples described above refer to one emissive element in an application icon, a widget or user interface object, more than one emissive element may be concurrently active within a respective application icon, widget, or user interface object, one or more (or multiple) emissive elements being displayed concurrently with one or more respective lighting effects that appear to emanate from the respective emissive element with visual properties (e.g., color, brightness, and / or other properties) based on the respective emissive element.

[0195] Figure 5F illustrates device 100 displaying a user interface 602 that includes a user interface element 604 displayed as a simulated glass material in the glass layer and a background that includes a plurality of stars in the background layer. As described with reference to Figure 5B above, in some embodiments, portions of the content displayed in the background layer (e.g., the stars in Figure 5F) that appear underneath (e.g., overlap with) the simulated glass material of the user interface element 604 are displayed with one or more distorted visual properties. For example, the dashed portion of the star 606-1 and the dashed portion of the star 608-1 represent the portions of the background layer that appear underneath the simulated glass material of the user interface element 604, and are thus displayed with a first amount of blur, a first amount of refraction, a first amount of magnification and / or first amounts of other visual properties. As illustrated in the side viewshown in Figure 5F, the user interface element 604 is displayed to appear parallel to the background layer 603. In some embodiments, the appearance of the user interface element 604 is based at least in part on content that is not visible to the user, such as content in the user interface 602 that is covered by the user interface element 604 (e.g., underlying content that affects the appearance of the user interface element 604 based on the simulated glass material) and / or content that is not displayed within the user interface 602 (e.g., off-display content).

[0196] In some embodiments, in response to detecting a user input 610 (e.g., in Figure 5G) directed to a bottom portion of the user interface element 604 (e.g., in Figure 5F), the user interface element 604 is displayed as being pushed backward at a position corresponding to a position of the detected user input 610. In some embodiments, in accordance with a determination that the user input 610 is a first type of input, such as a tap input or other selection input directed to the user interface element 604, and the user interface element 604 is displayed as being pushed backward at a first rate of change (e.g., gradually pushing the user interface element 604 from its initial position in Figure 5F to its position in Figure 5G according to the first rate of change). In some embodiments, in accordance with a determination that the user input 610 is a second type of input, such as a tap and hold input or long press input directed to the user interface element 604, and the user interface element 604 is displayed as being pushed backward at a second rate of change (e.g., gradually pushing the user interface element 604 from its initial position in Figure 5F to its position in Figure 5G according to the second rate of change) different from the first rate of change. For example, the simulated glass material of user interface element 604 is displayed as behaving as a rigid surface such that the user input 610 appears to push down (e.g., in the z-direction) the lower part (e.g., in the y-direction) of the surface, causing the upper part (e.g., in the y-direction) of the surface to be pushed forward (e.g., in the z-direction). For example, in response to the user input 610, a simulated angle between the background layer 403 and the user interface element 604 (e.g., in the glass layer) is changed (e.g., from being parallel to an offset angle, as illustrated in the side view shown in Figure 5G). In some embodiments, the amount of change in simulated angle between the background layer 403 and the user interface element 604 is based on a duration of the user input 610 (e.g., a longer user input 610 causes a larger change in simulated angle, and a shorter user input 610 causes a smaller change in simulated angle, or vice versa). In some embodiments, in response to detecting an initial portion of a user input (e.g., a user input that does not satisfy threshold input criteria), the device 100 displays a quick change in the simulated angle, and as the user input continues (e.g., makesprogress towards satisfying the threshold input criteria), the simulated angle continues to change by a larger amount gradually over time.

[0197] In some embodiments, the change in simulated angle between the background layer 403 and the user interface element 604 causes a change in one or more visual properties of the content of the background layer that is visible through the simulated glass material of user interface element 604. For example, an amount of magnification of the star 606-1 is changed from the first amount of magnification (e.g., shown in Figure 5F) to star 606-2 having a second amount of magnification different from the first amount of magnification (e.g., a larger amount of magnification) based on the updated simulated distance and / or angle between the background layer and the user interface element 604 in the glass layer. In some embodiments, one or more other visual properties of the simulated glass material of at least a portion of the user interface element 604 are updated (e.g., instead of or in addition to the amount of magnification) from the first amount to a second amount, such as the amount of refraction, the amount of blurring, and / or other visual properties, to cause the background content to appear with a different amount of magnification, refraction, blurring, and / or other distortion. In some embodiments, the star 608-1 is updated from having the first amount of magnification to a third amount of magnification (e.g., that is different from the first amount of magnification and / or different from the second amount of magnification). As such, the star 608-2 is displayed with a smaller amount of magnification (e.g., to simulate that the bottom portion of user interface element 604 (e.g., that overlaps with the star 608-2) is closer to the background layer in Figure 5G than in Figure 5F). Accordingly, the simulated glass material simulates physics as if the simulated glass material acts as a lens (e.g., with a respective amount of magnification, blurring, refraction, and / or other visual properties) and background content displayed behind the simulated glass material is updated as a simulated position (e.g., distance from the background layer) and / or angle of the simulated glass material changes. Additionally, the simulated glass material simulates physics by optionally casting one or more shadows on background content.

[0198] In some embodiments, in response to detecting an end of the user input 610 (e.g., liftoff of the user input), the change in simulated angle is reversed (e.g., optionally reversed at a faster rate than the rate at which the change in simulated angle was performed) and the one or more visual properties of the background layer under the user interface element 604 are returned to their initial states.

[0199] Figures 5H-5I illustrate another example of changing a simulated angle between the background layer and the user interface element 604. In some embodiments, in response to a user input 612 directed to a top portion of the user interface element 604, the user interface element 604 is displayed as being pushed backward at a position corresponding to a position of the detected user input 612. For example, the simulated glass material of user interface element 604 is displayed as behaving as a rigid surface such that the user input 612 appears to push down (e.g., in the z-direction) the upper part (e.g., in the y-direction) of the surface, causing the lower part (e.g., in the y-direction) of the surface to be pushed forward (e.g., in the z-direction). For example, in response to the user input 612, a simulated angle between the background layer 403 and the user interface element 604 (e.g., in the glass layer) is changed (e.g., from being parallel to an offset angle, as illustrated in the side view shown in Figure 5G), thereby causing one or more visual properties of star 606-1 to be updated (e.g., from the first amount of magnification to a different amount (e.g., a smaller amount) of magnification) as illustrated by star 606-3 and one or more visual properties of star 608-1 to be updated as illustrated by star 608-3.

[0200] Figures 5I1-5I4 illustrate examples user interfaces of an animated transition for switching between selected user interface objects in accordance with some embodiments. For example, Figure 511 illustrates a display area of device 5000 (e.g., a portable multifunction device, a television, a display, and / or a computing device) that includes a first user interface element 5002, a second user interface element 5004, user interface element 5010 and / or other user interface elements. In some embodiments, the user interface elements 5002, 5004 and 5010 are selectable user interface elements that represent content, for example the user interface element 5002 corresponds to a tile for a first content item and the user interface element 5004 corresponds to a tile for a second content item. In some embodiments, while the first user interface element 5002 is selected, the first user interface element 5002 is displayed with simulated glass material and one or more other selectable user interface elements (e.g., second user interface element 5004, user interface element 5010, and / or other user interface elements) are not displayed with simulated glass material or are displayed with a lesser degree of simulated glass material (e.g., a smaller simulated thickness of glass material, less blur, less simulated refraction, and / or lesser amount(s) of other visual properties of the simulated glass material described with reference to Figure 6A). In some embodiments, while the first user interface element 5002 is the currently selected user interface element, one or more simulated virtual lighting effects are displayed as interacting with one or more edges of the first user interface element 5002. For example, specularhighlights (e.g., as described in more detail below with respect to Figure 5AB) are displayed on the first user interface element 5002.

[0201] In some embodiments, the device 5000 is communicatively coupled to an external input device 5008, such as a remote, keyboard, mouse, device 100, and / or another device. In some embodiments, the device 5000 includes a touch-sensitive surface that detects one or more inputs directed to the touch-sensitive surface. In some embodiments, in response to detecting a user input 5008, such as a click input, a scroll input, a tap input, or another user input directed to the input device 5008, corresponding to a request to change the currently selected user interface element, the device 5000 displays an animated transition to change a simulated angle of the currently selected user interface element (e.g., first user interface element 5002). In some embodiments, the user input 5008 includes movement in a first direction (e.g., left, right, up, down and / or a combination of these directions), and the change in simulated angle of the currently selected user interface element is based on the direction of movement of the user input 5008. For example, for a movement to the right, a right side of the user interface element 5002 is simulated as moving closer as the left side of the user interface element 5002 is simulated as being pushed back (e.g., similar to the animation described with reference to Figures 5F-5I), as illustrated in Figure 512. In some embodiments, in response to detecting the user input 5008 has satisfied an input threshold (e.g., by continuing the input for a threshold amount of time and / or by performing a scrolling input for a threshold amount of movement, and / or another input threshold), the device 5000 displays the second user interface element 5004 as the currently selected user interface element (e.g., and user interface element 5002 is no longer selected), as illustrated in Figure 513.

[0202] Figure 514 illustrates an example of the progression of the animated transition of the user interface element 5002 (e.g., illustrated by the states of user interface elements 5002a through 5002d over time) in response to detecting a user input corresponding to a request to scroll and / or move the current selector of the user interface element 5002 to the right. For example, the user interface element 5002 is displayed with a plurality of states (e.g., as user interface elements 5002a through 5002d) that increases a simulated viewing angle of the right side of the user interface element while updating simulated optical effects such as the specular highlights 5012 (e.g., including specular highlights 5012a through 5012d) over time (e.g., to simulate virtual lighting that is reflecting by a different amount and / or at different positions based on a simulated angle between the user interface element 5002 and a simulated light source). In some embodiments, updating the simulate opticaleffects also includes changing an appearance of the user interface element based on simulated reflection, refraction, and or emissive elements, as described in greater detail elsewhere in this application. In some embodiments, the user interface element 5002 also responds to the user input by changing in size and or shape based on movement of the input and / or movement of the user interface element, as described in greater detail below with reference to methods 11000 and 20000.

[0203] Figures 5J-5M illustrate an example home screen user interface that includes one or more application icons that are displayed with a gradient effect (e.g., represented by the downward arrows). In some embodiments, the gradient effect changes in accordance with physical movement of the device 100. For example, in Figure 5 J the application icon 424 is displayed with a first level of gradient 614-1, application icon 426 is displayed with a first level of gradient 616-1, application 428 is displayed with a first level of gradient 618-1 and application icon 430 is displayed with a first level of gradient 620-1 while the device 100 is displayed at a first position having a first viewing angle relative to a viewpoint of the user. In some embodiments, in response to detecting a user interaction that causes a change in position and / or viewing angle between the device 100 and the viewpoint of the user, the application icons 424, 426, 428, and 430 are updated to display a change in the level of gradient. In some embodiments, the amount of change of the level of gradient is proportional to, or otherwise based on, an amount of the change in position and / or viewing angle of the device 100 relative to the viewpoint of the user. For example, in Figure 5K, the device 100 is tilted by a first amount that causes the level of gradient displayed for each application icon to change by respective first amounts, and in Figure 5L, the device 100 is tilted by a second amount that is greater than the first amount that causes a larger amount of change in the level of gradient displayed for each application icon.

[0204] In some embodiments, the gradients of the application icons are updated in accordance with a direction of the tilting of the device 100. For example, in Figure 5M, the device 100 is physically tilted counterclockwise (e.g., relative to the y-axis), and the gradient 614-4 of application icon 424 is displayed as shifted to the right (e.g., with an angle based on the amount of tilt of the device 100), whereas in Figures 5K-5L, the device 100 is physical tilted clockwise (e.g., relative to the y-axis) and the gradient 614-2 of the application icon 424 is shifted to the left. In some embodiments, after the device 100 is tilted to a respective position and / or angle for a threshold amount of time (e.g., without further tilting or adjusting the device 100), the device 100 automatically, without additional user input, gradually adjuststhe gradients of the application icons back to their initial state (e.g., as illustrated in Figure 5 J) even while the device 100 remains tilted.

[0205] By changing the gradients of the one or more application icons in accordance with a physical change in position and / or angle of the device 100 relative to the viewpoint of the user, the one or more application icons are perceived as three-dimensional objects that reflect light differently as the device 100 is physically tilted. For example, a virtual lighting effect, such as specular highlights, is displayed along one or more boundaries or edges of a respective application icon. As described below with reference to Figure 5AB, specular highlights are based on one or more simulated external light sources, optionally including a light source of the physical environment in which device 100 is located. In some embodiments, the virtual lighting effect is updated as changing position, brightness, size and / or other properties as the device 100 is physically tilted to simulate movement of the device 100 relative to the simulated external light source(s).

[0206] Figures 5N-5Q illustrate a sequence of example user interfaces for transitioning one or more controls in a first set of controls in a first user interface to one or more controls in a second set of controls in a second user interface. For example, Figure 5N illustrates a mail application user interface 722 that includes content 728 for displaying messages in an inbox of the mail application. The application user interface 722 further includes a first set of controls, including select button 724-1, search button 725-1, and compose button 726-1. In some embodiments, one or more of the buttons corresponds to their own platter and / or are displayed in separate platters. In some embodiments, the select button 724-1 is selectable by a user that enables the user to select one or more messages displayed in the inbox of the mail application, the search button 725-1 is selectable by a user to perform a search operation in the mail application, and the compose button 726-1 is selectable by a user that enables the user to compose a new mail message. In some embodiments, the select button 724-1, the search button 725-1, and the compose button 726-1 are displayed as being made of a simulated glass material.

[0207] The device 100 detects a user input 730 (e.g., a tap user input or other selection user input) directed to the compose button 726-1, and in response to detecting the user input 730, the device 100 initiates an animated transition (e.g., illustrated via the user interface 732 that replaces content 728 with transitional content 724) from the user interface 722 to a composition user interface 736 (e.g., in Figure 5Q). In some embodiments, the user input 730 is a user input corresponding to a request to change the currently displayed userinterface. For example, the user input 730 is a scrolling user input for scrolling the displayed user interface (e.g., replacing the displayed user interface with another portion of the user interface as the scrolling continues). In some embodiments, the user input 730 is a user input selecting a back button (e.g., or other navigation button) for navigating to a previously displayed user interface. It will be understood that other types of user inputs may be used that cause the device 100 to change the displayed user interface, and the animated transition described below may be applied to different controls displayed in various user interfaces.

[0208] In some embodiments, the animated transition includes updating the first set of controls through a plurality of states. In some embodiments, the animated transition for the first set of controls is based at least in part on a second set of controls (e.g., including the relative positions of respective controls in the second set of controls that are to be displayed in the user interface 736 relative to the positions of respective controls in the first set of controls that are displayed in the user interface 722). For example, cancel button 738 in user interface 736 is to appear in an upper left comer that satisfies distance criteria relative to select button 724-1 in the user interface 722. As such, the animated transition for displaying the cancel button 738 includes shrinking the select button 724-1 through a plurality of states, as illustrated by the transitional button 724-2 (e.g., in Figure 50) and transitional button 724-3 (e.g., in Figure 5P). In some embodiments, the select button 724-1 gradually shrinks and the content displayed in the select button (e.g., the text “Select”) gradually ceases to be displayed during the transition (e.g., optionally by changing a blur and / or changing a size of the content). In some embodiments, changing the content within the button includes changing a position of the content (e.g., moving the text to the left and / or right) to appear as sliding on and / or off the button (e.g., the previous content slides off while the new content slides onto the button). In some embodiments, content within the button (e.g., text and / or glyphs) is displayed with a high dynamic range (HDR) effect (e.g., an effect that includes brightness that is outside of a standard range of brightness that is available to display content in the user interface) to improve the visibility of the content over bright content (e.g., in the background layer). In some embodiments, the transitional button 724-3 does not disappear completely before expanding to display the cancel button 738.

[0209] In some embodiments, the text size button 740 and the send button 742 (e.g., in Figure 5Q) satisfy distance criteria relative to search button 725-1, such that the animated transition includes expanding and dividing search button 725-1 into the text size button 740 and the send button 742. For example, the distance criteria includes determining a relativelocation of the destination button(s) (e.g., text size button 740 and / or send button 742) compared to the initial button (e.g., search button 725-1), where the platter of the initial button is reused for the destination button(s) if the relative distance between the initial and destination buttons is within a threshold distance. In some embodiments, the criteria for reusing the platter of the initial button for the destination is based on a direction of the animated transition. For example, in some embodiments, the animated transition is performed in response to detecting a user input to change the user interface, including sliding a destination user interface (e.g., from right to left and / or top to bottom, or vice versa) over the initially displayed user interface, as described with reference to Figures 5Q3-5Q6 below.

[0210] In some embodiments, the criteria for reusing the platter of the initial button is based on the initial button and the destination button being displayed within a same simulated layer (e.g., both buttons displayed in the layer for the simulated glass material, the layer for underlying (e.g., background) content, and / or another layer). In some embodiments, the animated transition includes stretching the search button 725-1 into transitional button 725-2 before animating a gradual division (e.g., similar to a mitosis division) of transitional button 725-3 that results in the two separate buttons (e.g., the text size button 740 and the send button 742). In some embodiments, the shadows caused by the buttons displayed with the simulated glass material are maintained throughout the animated transition. In some embodiments, the animated transition includes merging two or more controls into a single control (e.g., by decreasing a distance between the two or more controls before gradually merging the controls together, similar to a reversal of the mitosis division animation illustrated in Figure 5P).

[0211] In some embodiments, the compose button 726-1 does not satisfy distance criteria relative to user interface elements that are displayed in the updated user interface 736. As such, in some embodiments, the compose button 726-1 ceases to be displayed in the user interface 736 via an animated transition that includes gradually reducing a size of the compose button 726-1, as illustrated by transitional button 726-2 (e.g., in Figure 50), before ceasing to be displayed in Figure 5P. In some embodiments, as described below, keyboard 734-3 is displayed in the user interface 736 without morphing from (e.g., without sharing a platter with) compose button 726-1 in accordance with a determination that the keyboard 734-3 does not satisfy location criteria with respect to the compose button 726-1.

[0212] Figures 5O-5Q further illustrate an animated transition for adding a user interface element (e.g., keyboard 734-3) in the user interface 736 that does not originate fromanother user interface element in the user interface 722 (e.g., there is no control that satisfies distance criteria displayed in the user interface 722). For example, the keyboard 734-3 is materialized by gradually transitioned into the user interface by displaying a circular transitional element 734-1 that gradually increases in size (e.g., in the x- and / or y-direction and in simulated material thickness (e.g., in the z-direction relative to a surface of the material)) to transitional element 734-2 before expanding into the keyboard 734-3. In some embodiments, the transitional element 734-1 is displayed with a smaller size and has a more rounded shape than the transitional element 734-2. In some embodiments, during the animated transition, the transitional element 734-2 is expanded in a first direction (e.g., along the x-axis) at a faster rate than in a second direction (e.g., along the y-axis). As such, the animated transition is not a uniform transition but instead appears to stretch with a first rate in a first direction and a second rate in a second direction. In some embodiments, the transitional elements 734-1 and 734-2, and the keyboard 734-3 are displayed with simulated glass material, and the shadow cast by the simulated glass material gradually increases throughout the transition. For example, the glass material of transitional element 734-1 is simulated to have a first thickness that causes a first level of shadow to be cast (e.g., or no shadow) on the background layer, and the transitional element 734-2 is simulated to have a second thickness (e.g., greater than the first thickness of transitional element 734-1) that causes a second level of shadow (e.g., greater than the first level of shadow) to be cast on the background layer. In some embodiments, the glass material of the keyboard 734-3 is simulated to have a third thickness (e.g., greater than the first and second thicknesses of the transitional elements) that causes a third level of shadow (e.g., greater than the first and second levels of shadow) to be cast. As such, the simulated glass material of keyboard 734-3 appears to increase in size and simulated thickness during the animated transition illustrated in Figures 5O-5Q.

[0213] Figures 5Q1-5Q2 illustrate a reversal of the animated transition described with reference to Figures 5O-5Q, optionally following in sequence from Figures 5O-5Q. In some embodiments, in response to detecting user input 744, such as a tap input, drag input, or other selection input, directed to the cancel button 738 (e.g., in Figure 5Q), the device 100 ceases to display the user interface 736 and displays an animated transition to redisplay the user interface 722, as illustrated in Figures 5Q1-5Q2. For example, the animated transition includes morphing cancel button 738 to transitional button 738-1 (e.g., by stretching the cancel button 738 along an x-axis optionally without stretching the cancel button 738 along a y-axis, thus changing a width of the button without changing a height). In someembodiments, the animated transition includes moving button 740 and button 742 closer together and displaying a morphing animation that combines the two buttons as transitional button 725-4 (e.g., in Figure 5Q1). In some embodiments, during the animated transition, the content displayed within the buttons is distorted, for example, blurred, faded, or otherwise visually deemphasized, while replacing the internal content of the respective button(s) with new internal content. In some embodiments, after displaying the animated transition, the device 100 redisplays the user interface 722, as illustrated in Figure 5Q2.

[0214] Figures 5Q2-5Q2F illustrate navigating between a sequence of user interfaces in accordance with some embodiments. In some embodiments, the user interface 722 includes mailboxes navigation button 5016 for navigating to a mailboxes user interface 5022 (e.g., illustrated in Figure 5Q2A). In some embodiments, in response to detecting a user input 5018, such as a tap input or other selection input, directed to the button 5016, the device 100 displays an animated transition (e.g., as illustrated in Figures 5Q2A-5Q2B) to replace the user interface 722 with the user interface 5022. In some embodiments, in response to detecting a swipe user input 5020, such as a rightward swipe, or another user input that includes movement, the device 100 displays an animated transition (e.g., as illustrated in Figures 5Q2A-5Q2B) to replace the user interface 722 with the user interface 5022, where a rate of the animated transition is based at least in part on a rate of movement of the user input 5020. For example, in Figure 5Q2A, the user input 5020’ (e.g., a continuation of the user input 5020) continues to move rightward such that user interface 722 appears to slide to the right with the movement of the user input 5020’ (e.g., as if the user input 5020’ is dragging the user interface 722 to the right) and the user interface 5022 is partially displayed during the animation to simulate the user interface 722 being removed from covering the user interface 5022. In some embodiments, the animated transition includes gradually shrinking the button 5016’ (e.g., corresponding to a smaller version of the button 5016) and displaying the text within button 5016 as being pushed or moved out of the button 5016 (e.g., “Mailboxes” is moved to the right to travel from its initial position within button 5016 to a position as a header in the user interface 5022, as illustrated in Figure 5Q2B). In some embodiments, in accordance with a determination that the user interface 5022 does not include a button or other user interface object at a position that is within a threshold distance of the position of button 5016 in user interface 722, the button 5016 is displayed as shrinking until it ceases to be displayed, optionally including simulating a decrease in simulated thickness of the simulated glass material of button 5016 as it shrinks and / or disappears. In some embodiments, the animated transition of shrinking the button 5016 is displayed while the userinput 5020’ is detected, and the animated transition completes (e.g., where button 5016 ceases to be displayed upon completion of the animated transition and user interface 5022 is fully displayed) in response to detecting an end of the user input 5020’ (e.g., liftoff of the user input 5020’ and / or movement of the user input 5020’ past an edge of the display area). In some embodiments, as the content within button 5016 is simulated as passing below the simulated glass material of the button 5016’, optical distortion of the content is displayed along one or more edges of the simulated glass material of the button 5016’, as described in more detail below with respect to Figure 5Q5.

[0215] In some embodiments, in response to detecting a user input 5024, such as a tap user input, a swipe user input, or other user input, corresponding to a request to display an inbox user interface 722, the device 100 displays an animated transition (e.g., as illustrated in Figures 5Q2C-5Q2E) between displaying the user interface 5022 and the user interface 722, such as an opposite animated transition to the animated transition described with reference to Figure 5Q2A. For example, the user interface 722 appears to gradually move onto the display area to appear as though the user interface 722 is gradually covering the user interface 5022. In some embodiments, in accordance with a determination that a button is to be displayed in the user interface 722 at a position in which a user interface element was not displayed in the user interface 5022, the animated transition includes populating the button 5016”, including increasing a size of the button 5016” (e.g., to button 5016’”) and simulating an increase in the simulated thickness of the button 5016”, where button 5016’” appears to have a larger simulated thickness than button 5016’ as the button 5016’ increases in size. In some embodiments, simulating a change in thickness of the simulated glass material of a user interface object is described in more detail with respect to Figures 5Z1-5Z3. In some embodiments, the select button 724-1 is also animated as gradually appearing by increasing a thickness of the simulated glass material, as illustrated in Figures 5Q2E-5Q2F.

[0216] Figures 5Q3-5Q6 illustrate a sequence of user interfaces for incorporating a header into a button in accordance with some embodiments. In some embodiments, a settings user interface 750 is displayed for controlling one or more settings of a camera application, as indicated by header 756 “Camera”. In some embodiments, the settings user interface 750 includes a button 752 (e.g., a back navigation button for returning to a previous settings page) that is displayed as simulated glass material. In some embodiments, in response to detecting a user input 758, such as a tap input, a drag input, a scroll input, or another type of input that corresponds to a request to display a camera control user interface 754, the device 100displays an animated transition that includes sliding the camera control user interface 754 onto the display area (e.g., from the right side) to replace display of the settings user interface 750. In some embodiments, the animated transition includes increasing a size of the button 752’ and moving header 756’ to appear as if header 756’ is being pushed off the display area (e.g., from right to left). In some embodiments, the size of the button 752’ is increased, gradually over time, to absorb the text of header 756, as illustrated in Figures 5Q5-5Q6. For example, the text of header 756’ appears to be absorbed or otherwise incorporated into button 752”. In some embodiments, as the text of header 756’ is animated as being incorporated into button 752” (e.g., by sliding into the simulated glass material of button 752”), at the edges of the button 752”, a lensing virtual effect (e.g., as described with more detail below with respect to Figures 6A-6B4), indicated by the optical distortion in Figure 5Q5, is applied to at least a portion of the text of header 756’ such that the text appears distorted as it passes through (e.g., under) a simulated edge of the simulated glass material of button 752”. In some embodiments, the header 756’ continues to change position (e.g., by shifting to the left) to get closer to the internal content (“<”) displayed in button 752”, until the button 752’” includes the text of header 756, as illustrated in Figure 5Q6. In some embodiments, the button 752’” is displayed in the camera control user interface 754, and in response to detecting a user input selecting the button 752’”, the device 100 reverses the animated transition (e.g., removing the text of header 756 from the button 752’” and sliding the user interface 754 in an opposite direction (e.g., to the right) off the display area)) to redisplay the setting user interface 750 (e.g., in Figure 5Q3).

[0217] Figures 5R-5V illustrate a sequence of user interfaces showing an example of an animated transition between user interfaces that reuses a platter while changing the controls available in the platter. For example, Figure 5R illustrates a user interface 802 for a mail application that includes platter 810 displayed with simulated glass material. In some embodiments, the platter 810 includes one or more controls, such as reply control 804, file control 806 and trash control 808. In some embodiments, in response to detecting a user input 812 (e.g., a tap user input or other selection user input) directed to the reply control 804, one or more visual properties of the reply control 804 (e.g., and / or platter 810) are updated to indicate that the reply control 804 has been selected. For example, the reply control 804 and / or platter 810 are displayed with the simulated glass material, where the simulated glass material appears to push back, change in simulated thickness, or otherwise react in response to the user input 812. In some embodiments, in response to detecting the user input 812, the device 100 transitions from displaying the controls in platter 810 to a menu of controls inplatter 816-1 (e.g., in Figure 5V). In some embodiments, the device 100 transitions from displaying the controls in platter 810 to a menu of controls in platter 816-1 (e.g., in Figure 5V) in response to detecting a user input that is not directed to a control within platter 810 (e.g., in response to detecting a user input, such as a tap input, a long press input and / or another selection input, directed to the message portion displayed in the user interface 802). In some embodiments, the user input 812 is a first type of input, such as a tap input, a touch input, or another first type of input, and in response to detecting the first type of input, a first animated transition (e.g., illustrated in Figures 5S-5U1) that includes transitional platters 814 is displayed. In some embodiments, the user input 812 is a second type of input, such as a tap and hold input, a click input (e.g., detected via a mouse or other external input device), a click and drag input, or another second type of input that is different from the first type of input, and in response to detecting the second type of input, a second animated transition (e.g., including a second set of transitional platters) that is different from the first animated transition is performed. For example, the second set of transitional platters have different shapes, different visual properties of simulated glass material (e.g., different simulated thickness, different simulated amount of damping, or other display properties), are displayed with a different rate of change, or are otherwise different from the set of transitional platters 814 displayed for the first animated transition in response to the first type of input.

[0218] In some embodiments, the menu of controls in platter 816-1 reuses the platter 810 by transitioning to a new set of controls without ceasing display of at least a portion of the platter 810, where the controls available in the menu of controls 816-1 are different from the controls available in the platter 810 (e.g., in Figure 5R). For example, the platter 810 is animated as decreasing in size (e.g., in a first direction (e.g., along the x-axis) at a first rate of change, optionally without decreasing in size, or decreasing at a different rate of change, in a second direction (e.g., along the y-axis)) and is displayed with one or more visual effects (e.g., a color (e.g., optionally a color that is intermediate between the color of the platter 810 and the platter 816-1), a glow effect, a blur effect, and / or another visual effect) as transitional platter 814-1. In some embodiments, the animation includes decreasing the transitional platter 814-1 in size and changing a shape of the transitional platter 814-1 into a rounded shape, as illustrated by transitional platter 814-2 (e.g., in Figure 5T). In some embodiments, the transitional platter 814-2 in the rounded shape is then expanded into a less-rounded shape, as illustrated by transitional platter 814-3 (e.g., in Figure 5U1) before the displaying the platter 816-1 (e.g., in Figure 5 V) that includes a menu of controls, such as Reply, Reply All, Forward, and Flag. In some embodiments, transitional platter 814-3 (e.g., in Figure 5U1) isstretched relative to transitional platter 814-2 by different amounts (and / or different directions) along the x-axis and the y-axis. In some embodiments, the transitional platter 814-3 is stretched non-uniformly to display the transitional platter 814-3 with a simulated gel-like or amorphous appearance (e.g., to simulate physical inertia and / or damping of the transitional platter 814-3) during the animation for transitioning platter 810 to platter 816-1. In some embodiments, the amount of shadow cast by the simulated glass material of platter 810, transitional platters 814-1, 814-2 and 814-3, and platter 816-1 remains the same during the animated transition (e.g., simulating that a distance between the platters and the background layer remains constant).

[0219] Figure 5U2 illustrates an example of a transition that reuses a platter that is displayed over background content. In some embodiments, the states 1-3 shown in Figure 5U2 correspond to the transitional platter states described with reference to Figures 5S-5U1. For example, in Figure 5U2, the platters 814-1 through 814-3 represent the transitional states between platter 810 (e.g., in Figure 5R) and platter 816-1 (e.g., in Figure 5V), where the platter 810 and / or platter 816-1 overlay background content (e.g., star 815). In some embodiments, as described above, the simulated thickness of the user interface material (e.g., simulated glass material) of the platters 814-1 through 814-3 does not change during the transitional states of the platter, but the change in size (e.g., height and / or width) and / or shape of the platter causes a different amount of distortion of the background content. For example, as described with reference to Figure 6B1 below, based on a curvature of the simulated size view 6014, external content (e.g., the star 815 in Figure 5U1) appears to be distorted by varying amounts, where a smaller size of a transitional state of the platter (e.g., platter 814-2) causes more distortion (e.g., due to more simulated curvature along the edges) than a larger size of a transitional state of the platter (e.g., platter 814-3) while maintaining a simulated thickness of the platter 814-2 and platter 814-3 (e.g., the platters have a same simulated thickness). For example, in Figure 5U2, in state 1, the platter 814-1 is displayed with a first size (e.g., corresponding to simulated side view 813’) that is larger than the size of platter 814-2 in state 2 (e.g., corresponding to simulated side view 813”), thus the level of simulated refraction applied to portion of star 815’ in state 1 appears to be less than the level of simulated refraction applied to portion of star 815”. Similarly, the platter 814-3 in state 3 is displayed with a size that is larger than the platter 814-1, and the corresponding simulated side view 813’” appears less rounded at the edges relative to the simulated side view 8113’ of platter 814-1, thus the level of simulated refraction applied to portion of star 815’” thatoverlaps with the platter 814-3 is less than the level of simulated refraction applied to portion of star 815’.

[0220] Figures 5V-5Z4 illustrate examples of user interface elements displayed with the simulated glass material as being reactive to one or more user inputs by stretching, squishing, or otherwise amorphously changing shape. Figures 5V-5Y illustrate a sequence of user interfaces for manipulating a shape of the platter 816-1 in accordance with a user input, optionally following in sequence from Figures 5R-5V. For example, in Figure 5V, in response to the device 100 detecting a user input 903, such as a drag input, a tap and hold input, or another user input that includes subsequent movement of the input 903, directed to a portion of the platter 816-1, the device 100 stretches the platter 816-1 to increase in height, as illustrated by platter 816-2 (e.g., in Figure 5W), and optionally changes a position of the platter 816-2 to be moved away from an anchor point 905 (e.g., where platter 816-1 is anchored to the anchor point 905 along a bottom edge of the device 100 while the user is not dragging the platter 816-2 away from the anchor location 905). In some embodiments, the device 100 detects a user input 902-1, such as a drag user input or other user input directed to a portion of the platter 816-1 that includes subsequent movement of the input. For example, the user input 902-1 drags the top portion of the platter 816-1 upward, and in response to the user input 902-1, the platter 816-1 changes shape (e.g., by changing dimensions) into platter 816-2 according to the movement of the user input 902-1. In some embodiments, the movement of the user input 902-1 (e.g., a distance, velocity, jerk, and / or one or more other properties of the movement) causes a movement of the platter 816-1 (e.g., where the magnitude of movement of the platter 816-1 is calculated based on one or more properties of the movement of the user input 902-1), and the amount of reactivity of the platter 816-1 (e.g., an amount of stretching, compressing, resistance, and / or other simulated reaction that is based on approximated or simulated physics) is based on a magnitude of movement (e.g., distance, velocity, jerk and / or one or more other properties) of the platter 816-1. In some embodiments, the movement of the platter 816-1 is not based on the movement of the user input 902-1 (e.g., the platter 816-1 is moved independently from detecting the movement of the user input 902-1, optionally in a different direction than a direction of movement of the user input 902-1). In some embodiments, the amount of change in size (e.g., the amount of scaling) of the platter 816-1 is based on the movement of user input and / or based on the movement of the platter 816-1. In some embodiments, the dimensions of the platter 816-2 continue to change until movement of the user input 902-2 ceases (e.g., and / or until the velocity of the user input 902-2 has reached a threshold level). For example, in Figure 5W,the platter 816-2 increases in height (e.g., in the y-direction) and decreases in width (e.g., in the x-direction), as indicated by the arrows in Figure 5W. In some embodiments, a volume and / or area of the platter 816-2 is substantially maintained. In some embodiments, in response to detecting user input 902-2 has ceased to continue moving (e.g., and / or a velocity of the user input 902-2 has stabilized where the velocity of the user input 902-2 does not change by at least a threshold amount within a time period), the platter 816-2 continues to be displayed with its stretched dimensions (e.g., at a maximum scaled amount, defined based on a size of the platter 816-2 as described with reference to Table 1A). In some embodiments, in accordance with a determination that the user input 902-2 has stopped moving and / or has reached stabilized velocity, the platter 816-2 is not stretched further (e.g., or is stretched at a slower rate and / or by a smaller amount). In some embodiments, the platter 816-2 is optionally maintained at a position away from anchor point 905 while the user input 902-2 is maintained (e.g., even after the user input 902-2 ceases to move).

[0221] In some embodiments, in response to a user input grabbing a portion of the platter 816-1, the device 100 displays the platter 816-1 as jiggling to appear flexible (e.g., with a simulated reaction that is based on approximated or simulated physics that includes simulating resistance of changing shape and / or moving of the platter 816-1) and responsive to the user input (e.g., and optionally pinning the portion of the platter 816-1 under the detected input such that the pinned portion of the platter 816-1 follows movement of the input), for example, as illustrated in Figure 5W1. In some embodiments, Figure 5W1 illustrates an alternative user interface following the user interface in Figure 5 V in response to detecting a user input 902-1 that continues as user input 902-3; and Figure 5W illustrates a user interface following the user interface in Figure 5 V in response to detecting a user input 903 and / or detecting user input 902-1 that continues as user input 902-2. In some embodiments, the animation of the platter in response to the user input depends on a position of the user input relative to the platter 816-1 and / or a direction of movement of the user input relative to the platter 816-1. For example, if the user input 903 (e.g., in Figure 5V) is directed to a top center portion of the platter 816-1 and / or includes movement substantially straight upward, the top edge of the platter appears to stretch to increase the height of the platter (e.g., as illustrated in Figure 5W), whereas if the user input 902-1 is directed to a corner of the platter 816-1 and / or includes movement diagonally away from the platter 816-1, the platter 816-4 (e.g., in Figure 5W1) is displayed (e.g., where the corner of the platter 816-4 follows the user input 902-3), thereby changing a height of the top right comer of the platter 816-4 by a greater amount than the top left corner of the platter 816-4. As such, stretching the platter 816-2 in a first directionin response to the user input 903 (e.g., upwards in the y-direction) causes the platter 816-2 to shrink in a second direction (e.g., from left and right in the x-direction) different from the first direction. In some embodiments, the amount of stretching and / or shrinking of the platter 816-2 is dependent on one or more properties of the user input 902-1. For example, the amount of stretching upwards in the y-direction is based on a direction, magnitude, and / or a rate of movement (e.g., speed, acceleration and / or jerk) of the user input 903 and / or user input 902-1 in the y-direction. In some embodiments, the amount of stretching is based at least in part on a location of the user input 902-1 relative to a boundary of the platter 816-2. For example, in Figure 5X, the user input 904-1 is detected as moving within the boundary of the platter 816-2, and the amount of stretching is less than the amount of stretching applied to the platter 816-2 in response to detecting a user input that travels outside of the boundary of the platter 816-2 (e.g., user input 902-2 moves outside of the boundary of the platter 816-2 and thus a greater amount of stretching is applied to the platter 816-2).

[0222] In some embodiments, the user input 902-3 is maintained as user input 902-4 in Figure 5W2, where Figure 5W2 follows in sequence from Figure 5W1. In some embodiments, while the top right corner corresponding to a position of the user input 902-3 is initially stretched more than the top left corner of the platter 816-4, in some embodiments, over time, the top left corner catches up to the top right corner in stretching in the y-direction, for example as illustrated by the platter 816-5 in Figure 5W2. In some embodiments, while the user input 902-4 is maintained, the platter 816-5 continues to be elongated in the y-direction and shrunk in the x-direction while optionally also being lifted away from an anchor point of the plater 816-1 along a bottom edge of the display. For example, the platter 816-5 is displayed at a position away from the anchor point and in accordance with a determination that the user input 902-4 has ceased, the platter 816-1 (e.g., in Figure 5X, following Figure 5W2) is displayed as snapping back to the anchor point (e.g., where a bottom edge of platter 816-1 is anchored to a bottom edge of the display area) and is redisplayed with its original aspect ratio (e.g., including optionally displaying a reversal of the animation described with reference to Figures 5V-5W2 to gradually, over time, change the platter 816-4 back to its original shape illustrated as platter 816-1).

[0223] In some embodiments, while the user input 902-1 is maintained (e.g., without lifting off) as user input 902-2 (e.g., optionally without additional movement of the user input 902-2), the platter 816-2 continues to be displayed with the morphed shaped illustrated in Figure 5W (e.g., following in sequence after Figure 5V). In some embodiments, the contentdisplayed within platter 816-1 is displayed as moving within the platter 816-2 (e.g., appears to shift upward or otherwise change in position) based on the morphed shape of the platter 816-2 in Figure 5W. In some embodiments, upon liftoff of the user input 902-2, the platter 816-2 returns to its initial shape, as illustrated by platter 816-1 in Figure 5X.

[0224] Figure 5X illustrates detecting a user input 904-1 in a direction different than the direction of the user input 902-1 (e.g., a drag user input or other selection user input directed to the platter 816-1 that moves to the right). In some embodiments, similarly to the behavior described above with reference to Figure 5V-5W, the platter 816-1 is stretched to increase in width and decrease in height (e.g., into a morphed platter 816-3, Figure 5Y) in accordance with a direction and / or rate of movement of the user input 904-1. In some embodiments, the morphed platter 816-3 is maintained while user input 904-2 (e.g., a continuation of user input 904-1) continues to be detected.

[0225] Figure 5Y1 illustrates a slider 5052 that includes an indicator 5050 indicating a selected value of the slider 5052. In some embodiments, the slider 5052 is a directional user interface object where an increase in the value (e.g., moving the indicator 5050’ to the right) corresponds to a positive polarity and a decrease in the value (e.g., moving the indicator 5050” to the left) corresponds to a negative polarity, and the indicator 5050 is stretched and / or compressed based on the polarity. For example, in response to detecting a user input in the direction of the positive polarity, the indicator 5050’ is stretched and in response to detecting a user input in the direction of the negative polarity, the indicator 5050” is compressed. Figure 5Y1 further illustrates a plurality of user interface elements that have different sizes, in accordance with some embodiments. In some embodiments, platter 816a is an example of a small variant user interface object, platter 816b is an example of an intermediate size user interface object, and platter 816c is an example of a large variant user interface object. In some embodiments, the platters 816a-816c are reactive to user inputs, for example, including the behaviors described with reference to platter 816 in Figures 5V-5Y. In some embodiments, an amount of the reactivity of the respective platters 816a-816c to a user input is based at least in part on the size of the platter, as indicated by Table 1 A below. In some embodiments, an amount of reactivity (e.g., as indicated by a size of the arrows in Figure 5Y1) of the small platter 816a is generally displayed as being more reactive to a user input than the amount of reactivity of the large platter 816c, while the amount of reactivity of the intermediate platter 816b is between the amounts of reactivity of the small platter 816a and the large platter 816c depending on the particular dimensions of the intermediate platter816b (e.g., a larger intermediate platter is displayed with less reactivity than a smaller intermediate platter).

[0226] Table 1, divided into Table 1A and Table IB below, illustrates a set of visual parameters that define the relative reactivity of a user interface object to various inputs and events. For a particular row, the reactivity listed in one column is relative to the corresponding reactivity listed in a different column in the same row. In some embodiments, different sizes and / or types of user interface objects (e.g., small variant, intermedia size, large variant, loupe, liquid lens, and menu) are displayed as modifying the set of parameters differently such that the different types of respective user interface objects are simulated as having different levels of reactivity in response to detecting a user input. Table 1 includes non-limiting examples of Figures that illustrate the respective type of user interface object. In some embodiments, during and / or after a user interaction, parameters of a user interface object are updated, for example, the user interface object is displayed with a different opacity (e.g., to indicate a selection state and / or attention of the user), is stretched and / or compressed (e.g., scaled in one or more dimensions), and / or is displayed as moving from an initial position to a settled position (e.g., a steady-state position that is achieved after an end of the user input), including optionally displaying the object as bouncing (e.g., overshooting the steady-state position) during and / or after the user input before being displayed at the steadystate position. Table 1 A illustrates how parameters are modified for different sized user interface objects. For example, the size class is determined based on a height and width of the user interface object as small, intermediate, or large. In some embodiments, an opacity indicating a selection state of a user interface object (e.g., an opacity of selected user interface element 5002 in Figure 511) while the user interface object is selected is increased by a greater amount for a small size user interface object than for a large size user interface object, and the opacity for an intermediate size user interface object is adjusted by an intermediate value (e.g., that is interpolated to a change in opacity at a level between the small variant and large variant based on the dimensions of the intermediate size user interface object). In some embodiments, the amount of scaling displayed in response to a user input for a small size user interface object is greater than the amount of scaling for a large size user interface object, such that the small size user interface object appears more reactive than the large size user interface object. In some embodiments, the bounciness of the user interface object (e.g., an amount of overshooting and / or oscillation of the user interface object before the object is displayed at a settled state) is dependent on the size and / or type of the user interface object. Table IB illustrates how the parameters are adjusted in special use cases where the type ofuser interface object is a loupe (e.g., user interface element 912), a liquid lens, or a menu (e.g., where the size class of the respective use case indicates a size of the user interface object, but the parameters are adjusted in accordance with the values listed in Table IB as opposed to following the size variant parameters outlined in Table 1 A).Parameter Small Variant Intermediate size Large VariantExamples FIGS. 5N-5P FIG. 5Y 1 FIGS. 5B-5C and and 5YI 5Y1Size class (based on the Small Size Intermediate Value Large Size minimum of height and (e.g., 44 pixels (monotonically and / or (e.g., 160 pixels width) or points or linearly interpolate or points or less) between small and more)large parametersbased on thisdimension)Opacity of selection state Higher Opacity Intermediate Value Lower OpacityOpacity of indication of Higher Opacity Intermediate Value Lower Opacity attention in selectionstateScaling on input start Higher Scaling Intermediate Value Lower ScalingScaling based on Higher Scaling Intermediate Value Lower Scaling movement (of the input)Scaling based on velocity Higher Scaling Intermediate Value Lower Scaling or acceleration (of theobject)Amount of scaling up on Higher Scaling Intermediate Value Lower Scaling selection / hoverMinimum scale during Smaller Intermediate Value Larger Minimum movement Minimum Scale Scale %%Maximum scale during Larger Intermediate Value Smaller movement Maximum Scale Maximum Scale % % Bounciness before end of Intermediate Intermediate Value Intermediate input and / or during Bounciness Bounciness interactionSettling before end of Intermediate Intermediate Value Intermediate input and / or during Settling Settling interactionBounciness after end of Much Higher Intermediate Value Intermediate input Bounciness Bounciness Settling after end of Faster Settling Intermediate Value Intermediate input SettlingTable 1AParameter Loupe Liquid Lens MenuExamples FIG. 5Z- FIGS. 5Z1-5Z4 and 6U FIGS. 5V- 5W (e.g., user interfaceobject 922-1 andselection indicator6078)Size class (based on the Small Size Small Size Large Size minimum of height andwidth)Opacity of selection state Higher Opacity Higher Opacity Lower OpacityOpacity of indication of Higher Opacity Higher Opacity Intermediate attention in selection state Opacity Scaling on input start Very Low Very Low Scaling Very Low Scaling Scaling Scaling based on Higher Scaling Higher Scaling Higher Scaling movement (of the input)Scaling based on velocity Lower Scaling Lower Scaling Intermediate or acceleration (of the Scaling object)Amount of scaling up on Much Higher Higher Scaling Much Lower selection / hover Scaling ScalingMinimum scale during Smaller Smaller Minimum Larger Minimum movement Minimum Scale Scale % Scaling%%Maximum scale during Larger Larger Maximum Scale Smaller movement Maximum % Maximum Scale % Scaling% Bounciness before end of Lower Higher Bounciness Higher input and / or during Bounciness Bounciness interactionSettling before end of Much Slower Slower Settling Faster Settling input and / or during SettlinginteractionBounciness after end of Much Lower Lower Bounciness Intermediate input Bounciness Bounciness Settling after end of input Slower Settling Slower Settling Much SlowerSettlingTa ble IB

[0227] Table 2 provides use cases for different types of user interface objects. The example column of Table 2 includes references to Figures that illustrate non-limiting examples of the respective type of the user interface object. As indicated in Table 2, each respective type of control is updated in response to detecting user interaction with the respective control according to the small / large variant parameters described in Table 1. For example, for a button type of control, the button behaves according to the small / large variant parameters outlined in Table 1 A. For example, for a segmented control that includes a background portion (e.g., segmented control 920) and a selector portion (e.g., user interface object 922-1), the background portion behaves according to the small / intermediate / large variant parameters (e.g., columns 2-4) in Table 1 A, while the selector portion behaves according to the liquid lens column in Table IB. In some embodiments, a loupe type of user interface object is adjusted according to the parameters provided in the loupe column of Table IB and a menu type of user interface object behaves according to the parameters indicated by the menu column in Table IB.Use Case Examples Small / Large Loupe Liquid Menu Variant LensSegmented FIGS. 5Z1-5Z4 (920, Background Selector Controls and / or 922) (920) (922) Buttons FIG. 5N-5Q (724, X725, 726, 738, 740,732, 5016, and / or 752)Navigation bars FIGS. 6D-6H (6200, X6204, 6300, and / or6304)Toolbars FIGS. 5R (810) and X6AO-6AP (6800)Sidebars FIGS. 5D-5E (543) XTab bars FIG. 6U-6AN (6074, Background Selector 6078, and / or 6730) (6074) (6078,6730) Menus FIGS. 5V- 5Y (816) X Edit menus Similar to FIGS. 5V- X5W but with editingcontrolsSheets FIGS. 5F-5G, and / or X6BPopovers FIGS. 6I-6J (6404) XAlerts FIG 5AF (1124') XText Loupe FIG. 5Z (909 and / or X912)Controls FIG. 5AA (1004) X (Sliders / switches)Web Browser X(custom buttons)Messages X(custom buttons,tapback bubbles)XSystem Control FIGS. 6K-6R XUser Interface (displayed controls)Phone dial pad XButtons in media XplayerPicture in XPicture (custombuttons)Table 2

[0228] Figure 5Z illustrates stretching and squishing behavior of a user interface element 912 (e.g., including user interface element 912-1, user interface element 912-2, and user interface element 912-3). In some embodiments, a user interface 906-la includes text and an indictor 908 that indicates a current cursor position in the user interface 906-la. In some embodiments, user interface 906-lb follows, in sequence, user interface 906-la and includes displaying a user interface element (e.g., loupe 909-1) with a first set of simulated visual properties. For example, the loupe 909-1 appears as a flat user interface object that overlays the text illustrated in user interface 906-lb. In some embodiments, the user interface 906-lc follows, in sequence from, user interface 906-lb and illustrates that loupe 909-1 is displayed as gradually increasing in a simulated thickness as loupe 909-2. For example, in some embodiments, the sequence of user interfaces 906-la through 906-lc illustrates an animated transition in which the loupe 909-2 is displayed as increasing in thickness to be displayed with a simulated glass material with non-zero thickness (e.g., whereas loupe 909-1 optionally is not displayed with a simulated thickness). In some embodiments, the user interface element 912 is a loupe that is used to magnify portions of the text corresponding to the current cursor position. For example, a user input 910-1 (e.g., a touch and hold input or other selection input) is detected as being directed to the indicator 908, and in response to detecting the user input 910-1, the current cursor position moves in accordance with movement of the user input 910-1. For example, the user input 910-1 continues as user input 910-2, including moving the indicator 908 (e.g., and the cursor position) to the portion of the text between the “v” and the “e” in “over.” In some embodiments, the user interface element 912-1 is displayed to include a magnified version of the portion of the text around the current cursor position. For example, in the user interface 906-2, the word “over” is displayed and a magnified indicator 914 that indicates the current cursor position are displayed within the user interface element 912-1. In some embodiments, the user interface element 912 is displayed with a simulated glass material that refracts background content (e.g., text and indicator 908) that is positioned under the user input 910-2. For example, the edges of the user interface element 912-1 include refracted portions 916 of the indicator 914.

[0229] In some embodiments, a shape of the user interface element 912 is distorted based on a direction, velocity, acceleration and / or jerk of the user input. For example, in the user interface 906-3, the user input 910-3 moves to the left (e.g., as a continuation of the user input 910-2), and the user interface element 912-2 is stretched (e.g., increases in size) in the horizontal direction and squished (e.g., decreases in size) in the vertical direction, as indicated by the arrows shown below the user interface 906-3. In some embodiments, asillustrated in the user interface 906-4, the shape of the user interface element 912-3 is distorted by stretching in the vertical direction and squishing in the horizontal direction, as indicated by the arrows below the user interface 906-4, in response to the user input 910-4 moving in the vertical direction (e.g., user input 910-4 moves downward as a continuation of the user input 910-3). As such, the distorted shape of the user interface object 912-3 is based on the direction of the input 910-4. It will be understood that in some embodiments, an amount of distortion is based on a velocity, acceleration and / or jerk of the user input (e.g., with a greater amount of distortion (e.g., more stretching and / or squishing) of the user interface object for a user input with a greater velocity, acceleration and / or jerk (e.g., the second derivative of velocity with respect to time) movement, or vice versa). In some embodiments, the user interface element 912 is stretched and / or compressed based at least in part on the direction of movement of the user input and / or a language setting of the device 100. For example, for a language setting in a language that reads from left to right, a user input that includes movement from left to right causes the user interface element 912 to stretch in the horizontal direction, while a user input that includes movement from right to left causes the user interface element 912 to compress (e.g., or to stretch by a lesser amount than the amount of stretching in response to the left to right movement) in the horizontal direction. Similarly, if the language setting of the device 100 is set to a language that reads from right to left, a user input that includes movement from right to left causes the user interface element 912 to stretch in the horizontal direction, while a user input that includes movement from left to right causes the user interface element 912 to compress (e.g., or to stretch by a lesser amount than the amount of stretching in response to the left to right movement) in the horizontal direction. In some embodiments, the behaviors described with reference to Figure 5Z are used for selecting text (e.g., highlighting portions of text), for example, instead of displaying a single loupe, at least two selection endpoint pins are displayed within the user interface element 912. For example, in some embodiments, in accordance with a determination that the user input 910-1 is a drag user input or another type of user input that includes movement, the device 100 selects a portion of the text based on the movement of the user input 910-1.

[0230] Figures 5Z1-5Z3 illustrate a sequence of user interfaces for changing a selected object in a menu. In some embodiments, a menu, such as segmented control 920, is displayed with a simulated glass material that appears to overlay content in the user interface. For example, in Figure 5Z1, the segmented control 920 includes options for organizing photos in a photos application according to Years, Months, or All photos. In someembodiments, the currently selected option is visually distinguished from the other possible options in the segmented control 920, for example, while “All” is selected, “All” is displayed with a different color, size, and / or otherwise visually emphasized relative to the other options (e.g., “Years” and “Months”). In some embodiments, the device 100 displays a user interface object 922-1 with a simulated material, for example, a simulated glass material that appears to overlay the “All” option while “All” is the selected state. In some embodiments, in response to detecting a user input 924-1, such as a tap input, a tap and hold input, a drag input (e.g., continued as user input 924-2), or other selection user input that is directed to the user interface object 922-1, the device 100 displays a change in the simulated thickness of the user interface object 922-1 and / or a change in shape of the user interface object (e.g., where user interface object 922-2 is morphed based on a direction of the user input 924-1, as described with reference to platter 816 in Figures 5V-5Y), as illustrated by user interface object 922-2 (e.g., in Figure 5Z2). In some embodiments, displaying a change in the simulated thickness of the user interface object 922-1 includes changing a visual intensity that simulates a strength of simulated refraction applied to content that appears behind the user interface object 922-2. For example, the underlying content under the user interface object 922-2 appears to be warped or otherwise distorted by a greater amount to simulate a thicker simulated material of the user interface object 922-2 relative to the thickness of the simulated material of the user interface object 922-1. In some embodiments, a size of the user interface object 922-1 is increased, for example, by changing a boundary of the user interface object illustrated as user interface object 922-2 to cover a larger portion of the background content.

[0231] In some embodiments, the user input 924-2 continues to move to the left to change the selection state from “All” to “Months,” as illustrated in Figure 5Z3 following the user interface in Figure 5Z2. In some embodiments, in response to detecting an end of the user input 924-2, such as liftoff of a contact corresponding to the movement and / or detecting that the user input 924-2 has ceased moving, the “Months” option is selected and the user interface object 922-3 is displayed to appear with a thinner simulated material (e.g., the level of warping and / or distortion of the underlying content “Months” results in the user interface object 922-3 appearing thinner than the user interface object 922-2). In some embodiments, the selection of a respective selection state is snapped into position in accordance with a determination that the user interface object 922-3 has moved to within a threshold distance of the “Months” option. In some embodiments, after the user interface object 922-3 has snapped to the selection state of “Months,” in response to detecting a user input with a larger amount of movement than the user input 924-2 (e.g., in an opposite direction than the user input 924-2), the user interface object 922-3 moves to the right to reselect “All” by snapping back into position over the “All” option. In some embodiments, if the user input does not include a larger amount of movement than the user input 924-2, the user interface object 922-3 does not move to snap to the “All” option (e.g., it requires a greater amount of movement of a user input to return to the “All” selected state after changing the selection state from “All” to “Months” than the amount of movement of the user input to change the selection state from “All” to “Months”).

[0232] Figure 5Z4 provides an example of a simulated side view of the user interface object 922 as the user interface object 922-1 is updated to user interface object 922-2 and user interface object 922-3, as illustrated by the sequence of user interfaces in Figures 5A1-5Z3. For example, the z-axis represents a level of simulated depth of the user interface object 922 relative to the segmented control 920. In some embodiments, in addition to increasing a simulated depth of the user interface object 922-2 (e.g., to appear as a thicker version of the simulated user interface material), the user interface object 922-2 optionally is also simulated as being situated farther away from (e.g., increasing a simulated z-distance from) the segmented control 920, as illustrated in Figure 5Z4, before the user interface object 922-3 is displayed with the simulated thinner version of the user interface material that appears closer (e.g., in z-distance) to the segmented control 920.

[0233] Figure 5AA illustrates an example of transitioning content from a background layer (e.g., also referred to herein as a content layer) to a glass layer that appears to be situated above (e.g., relative to the z-axis) the background layer. In some embodiments, a toggle 1002-1 is displayed in a user interface. For example, toggle 1002-1 is a selectable user interface element that is used to turn an option on and / or off. In some embodiments, toggle 1002-1 includes a switch 1004-1 that moves left and / or right (e.g., corresponding to turning toggle 1002-1 on and / or off). In some embodiments, in response to detecting a user input 1003 directed to the switch 1004-1, the device 100 updates the switch 1004-1 to a simulated glass material switch 1004-2 that appears to have a first distance (e.g., in the z-direction) between the underlying toggle 1002-1 and the switch 1004-2, and the simulated glass material of switch 1004-2 casts a simulated shadow on the background layer (e.g., including on toggle 1002-1). In some embodiments, the device 100 displays an animated transition that increases a size of the switch 1004-2 (e.g., illustrated with the increased size as switch 1004- 3), including increasing a size of the switch along the x- and y-axes and optionally increasing a simulated thickness of the switch 1004-2, and increases the simulated distance between theunderlying toggle 1002-1 and the switch 1004-3 to a second distance (e.g., in the z-direction) that casts a larger simulated shadow (e.g., to reflect the larger distance between the background layer and the simulated glass material). In some embodiments, the animated transition continues by shrinking the switch down to switch 1004-4 and pushing the switch 1004-4 back into the background layer (e.g., where switch 1004-4 is no longer displayed with the simulated glass material).

[0234] Figure 5AB illustrates an animated transition that includes gradually reducing and / or increasing a thickness of simulated glass material in accordance with some embodiments. In some embodiments, a time indication 9:58 is displayed as simulated glass material in a wake screen user interface. In some embodiments, upon a change in time, the device 100 displays an animated transition for updating the time to the current time (e.g., from 9:58 to 9:59). In some embodiments, the animated transition includes gradually fading out the 8, including reducing a thickness of the top left comer of the 8 (e.g., at step 1102-2 through 1102-3) without reducing a thickness of the remaining portion of the 8. In some embodiments, the thickness of the simulated glass material is reduced to infinitesimally small such that the top left portion of the 8 disappears from display. In some embodiments, this animated reduction in thickness of the simulated glass material gradually moves down the 8, for example in step 1102-5 and 1102-6, a thickness of the lower portion of the 8 decreases in size before disappearing in step 1102-7.

[0235] In some embodiments, an animation for materializing the 9 is displayed by gradually increasing a thickness of simulated glass material in the shape of the 9. In some embodiments, the animation begins at a middle position of the 9, as illustrated in step 1102-8, where the 9 appears to be drawn in (e.g., from the center into a clockwise circle before moving downward to create the 9 shape). In some embodiments, the thickness of the middle position of the 9 increases over time and the rest of the 9 appears to be drawn in. In some embodiments, the animation for removing the 8 is performed gradually following a path in which drawing in the 8 would occur (e.g., or in an opposite path of a stroke to draw in an 8).

[0236] In some embodiments, the animated transition of the 8 disappearing and the 9 materializing at least partially overlap. For example, although the example shown in Figure 5AB illustrates that the 8 disappears before the 9 begins to materialize, in some embodiments, the 8 is in progress of disappearing while the 9 begins to materialize (e.g., step 1102-6 overlaps with step 1102-8).

[0237] Figure 5AB further illustrates a thickness of the simulated glass material over time represented by steps 1102-1 through 1102-12. For example, the 8 is displayed with a first thickness of simulated glass material before the transition begins and the thickness gradually decreases along the curve until the thickness of the simulated glass material is zero (e.g., the 8 disappears completely) and the thickness of the simulated glass material gradually increases along the curve (e.g., to materialize the 9) until the thickness of the simulated glass material returns to the first thickness for displaying the 9. It will be understood that this decrease and increase in thickness is not uniformly applied to the 8 and / or 9. For example, the change in thickness is applied to a top right portion of the 8 without changing a thickness of the top left portion and / or the bottom portion of the 8 in step 1102-2, and over time, the change in thickness (e.g., that follows the pattern provided by the graph) is applied to the top left portion and further down the 8 (e.g., in steps 1102-5 and 1102-6).

[0238] In some embodiments, one or more other visual effects are applied to the simulated glass material, such as a simulated light effect (e.g., specular highlights 1108-1 through 1108-12). In some embodiments, the specular highlights 1108-1 through 1108-12 appear to travel along an edge of the 8 and / or 9 as the 8 and / or 9 are transitioned to disappear and / or appear.

[0239] In some embodiments, the visual effect of specular highlight(s) simulates light from other content displayed in the user interface reflecting from the edges of the time numeral (e.g., 8 and / or 9 in Figure 5AB). In some embodiments, the specular highlight(s) are based on one or more simulated light sources and / or one or more physical light sources in a physical environment surrounding the device 100. In some embodiments, the device 100 changes the simulated lighting effect by changing position, orientation, size, brightness, and / or other visual property of the simulated lighting effect. In some embodiments, the specular highlights are updated based on a change in the time numeral(s). For example, the specular highlights appear to travel around an edge of the time numeral as the time numeral appears and / or disappears. For example, as the 9 numeral appears, the specular highlights appear to travel along the edge of the 9 in a path that follows the path of the simulated glass material that appears.

[0240] Figure 5AC illustrates an example of an animated transition for changing the time indication from 9:58 to 9:59 (e.g., a minute-based transition) over time represented by steps 1104-1 through 1104-8 that changes a thickness of the simulated glass material of the numerals, as described above with reference to Figure 5AB. In some embodiments, thethickness of the simulated glass material is displayed view the side view illustrated in Figure 5AC. For example, at step 1104-1, the entirety of the 8 is displayed with a first amount of thickness. At step 1104-2, a bottom portion of the 8 that has disappeared is displayed with no amount of thickness, and the remaining part of the 8 is displayed with a varying amount of thickness that varies according to the curve shown in the side view (e.g., the top most portion of the 8 remains with the greatest amount of thickness whereas the middle portion of the 8 that is about to disappear has a smaller amount of thickness). Similarly, the 9 materializes gradually such that the initial lower portion of the 9 in step 1104-5 is displayed with a small amount of thickness that gradually increases in thickness as more of the 9 materializes. In some embodiments, changing a simulated thickness of a simulated glass material changes the various properties such as blur, refraction, reflection, and / or specular highlights. When the simulated thickness gradually changing also causes gradual changes to blur, refraction, reflection and / or specular highlights that vary spatially as the simulated thickness varies spatially.

[0241] Figure 5AD illustrates an example of an animated transition for changing the time indication from 9:59 to 10:00 (e.g., an hour-based transition) over time represented by steps 1106-1 through 1106-8. In some embodiments, the animated transition includes changing the hour numeral(s) concurrently with changing the minute numeral(s). In some embodiments, the transition of the hour numeral(s) is completed in an opposite direction (e.g., up, down, left and / or right) from the transition of the minute numeral(s). In some embodiments, a direction of the transition of the time numerals is based on whether the time numerals are counting upward or downward (e.g., counting up from 9 to 10 causes the time numeral to removed starting from a bottom portion of the numeral(s) and counting down from 59 to 00 causes the time numeral(s) to be removed starting from a top portion of the numeral(s)). For example, the minute numeral(s) appear to disappear starting from the bottom and materialize from the bottom, while the hour numeral(s) are displayed as disappearing and materializing from the top. In some embodiments, the time separator (e.g., “:”) is animated to disappear and materialize with the hour numeral(s). In some embodiments, the time separator (e.g., “:”) disappears with one or more of the minute numerals and reappears with one or more of the hour numeral(s). In some embodiments, the time separator (e.g., “:”) disappears with one or more of the hour numeral(s) and reappears with one or more of the minute numerals. In some embodiments, the time separator continues to be displayed whether the time transition is a minute-based transition or an hour-based transition.

[0242] In some embodiments, a method is performed at an electronic device (e.g., device 300, Figure 3A, or portable multifunction device 100, Figure 1A) with a display, a touch-sensitive surface, and one or more sensors to detect intensity of contacts with the touch-sensitive surface. In some embodiments, the display is a touch-screen display and the touch-sensitive surface is on or integrated with the display. In some embodiments, the display is separate from the touch-sensitive surface. Some operations in the described method are, optionally, combined and / or the order of some operations is, optionally, changed.

[0243] Figures 5AE-5AG illustrate a sequence of user interfaces that include a time indication that is displayed with a simulated glass material. In some embodiments, the time indication 1122-1 is displayed with the simulated glass material described with reference to Figure 5AB. In some embodiments, the time indication 1122-1 performs transitions to update the time according to the animations described with reference to the time represented by steps 1102-1 through 1102-12 in Figure 5AB.

[0244] Figure 5AE illustrates detecting a user input 1120, such as a tap and hold input, a drag input, or another type of user input, directed to the time indication 1122-1. In some embodiments, in response to detecting the user input 1120, a portion of the time indication 1120 that corresponds to a position of the user input 1120 is updated such that the simulated glass material of the user input 1120 appears to flatten (e.g., to appear to decrease in simulated thickness at the portion of the time to which the user input 1120 is directed, optionally without flattening other portions of the time). For example, the lower part of the 8 in time indication 1122-2 continues to be displayed with a same simulated amount of thickness as the lower part of the 8 in the time indication 1122-1, while the top right portion corresponding to the detected input 1120’ appears to have a smaller amount of simulated thickness. In some embodiments, the smaller amount of simulated thickness of the top portion of the 8 in the time indication 1122-2 is achieved by applying a smaller amount of refraction of the background content that is displayed under and / or near the time indication 1122-2. For example, the portion of the cloud that is refracted in Figure 5AE appears with a greater level of refraction and / or distortion than the portion of the cloud that is refracted in Figure 5AF, such that the portion of the cloud in the 8 appears with a smaller level of refraction. As such, adjusting the level of refraction applied to the content that appears through the simulated glass material of the time indication 1122-1 compared to the level of refraction applied to the content that appears through the simulated glass material of the time indication 1122-2 results in the portion of the 8 in time indication 1122-2 to have a smallersimulated thickness of the simulated glass material. In some embodiments, the levels of one or more other optical properties applied to the simulated glass material, such as blur level, tint level, edge bleed level, and / or levels of other properties (e.g., described with reference to Figures 6A-6B4), are altered to result in the appearance of the simulated glass material of at least a portion of the time indication 1122-2 appear to have a decreased thickness in Figure 5AF compared to Figure 5AE. In some embodiments, portions of the time indication 1122-2 that do not correspond to the position of the user input 1120’ are not altered to appear with a different simulated glass material (e.g., with a different thickness) as compared to the time indication 1122-1 (e.g., the simulated glass materials of the 5 and the lower portion of the 8 do not change in simulated thickness).

[0245] In some embodiments, in response to detecting the continuance of user input 1120 as user input 1120’, the portion of the time indication 1122-2 corresponding to the position of the user input 1120’ appears to spread out or bulge (e.g., as if pressing on the simulated glass material causes the glass material to expand outward optionally as it flattens). For example, the time indication follows the stretch and / or squish behavior described with reference to platter 816-1 through 816-5 and / or user interface element 912-1 through 912-3 (e.g., in Figures 5V-5Z). For example, the portion of the time indication 1122-2 that appears to spread out is displayed with a fluid and / or gel-like appearance that is displayed as increasing in area as the perceived thickness of the time indication 1122-2 is decreased (e.g., the area increases to maintain a perceived volume of the simulated glass material of the time indication 1122-2). In some embodiments, in response to detecting an end of the user input 1120’ (e.g., ceasing to detect the user input 1120’, such as in response to detecting liftoff of a contact corresponding to the user input 1120’), the device 100 displays a gradual animation that returns the simulated glass material of the time indication to have the visual properties (e.g., perceived thickness and / or shape) of the original simulated glass material (e.g., from the “8” with simulated glass material illustrated in Figure 5AF to the “8” with simulated glass material illustrated in Figure 5AE).

[0246] Figures 5AE-5AF illustrate a sequence of user interfaces for detecting arrival of a notification 1124 and increasing a simulated thickness of the simulated glass material of the notification 1124 over time. In some embodiments, the notification 1124 is initially displayed as being made with a simulated glass material having a first set of optical properties (e.g., a first level of distortion) that changes over time, for example, as illustrated by the updated notification 1124’ in Figure 5AF. In some embodiments, the notification 1124is initially not displayed with the simulated glass material (e.g., the notification 1124 appears to be in the content layer without applying one or more optical properties to make the notification 1124 appear to be simulated glass material). In some embodiments, the notification 1124’ is displayed as turning into the simulated glass material (e.g., and / or appearing to increase in simulated thickness of the simulated glass material). For example, in Figure 5AF, adjusting the level of distortion (e.g., external refraction), level of blur, or other levels of visual properties, causes the notification 1124’ to appear with a thicker simulated glass material than the notification 1124. In some embodiments, the device 100 increases the simulated thickness of the simulated glass material of notification 1124 to a simulated thickness that is thicker than the steady-state (e.g., final) simulated thickness of the notification 1124’. For example, the notification 1124 is displayed as gradually increasing, from a first simulated thickness (e.g., to appear flat or close to flat) to a second simulated thickness (e.g., greater than the first simulated thickness), before gradually decreasing in thickness to a third simulated thickness (e.g., less than the second simulated thickness and greater than the first simulated thickness), where the notification 1124’ is maintained with the third simulated thickness until the notification 1124’ is dismissed or otherwise ceases to be displayed.

[0247] Figures 5AF-5AG illustrate a sequence of detecting that an orientation of the device 100 is changed from a portrait orientation to a landscape orientation. For example, in response to detecting (e.g., using one or more accelerometers 168 and / or gyroscopes) a change in a physical position (e.g., a change in orientation relative to gravity) of the device 100 that changes the orientation of the device 100, the device 100 displays an animated transition for rotating the wake screen user interface 1126. In some embodiments, the wake screen user interface 1126 includes one or more wake screen controls, such as flashlight control 1123a and / or camera control 1123b. In some embodiments, in response to detecting a user input (e.g., a tap input, a tap and hold input, and / or another selection input) directed to a respective wake screen control, the device 100 performs an operation associated with the selected respective wake screen control (e.g., in response to detecting a user input selecting the camera control 1123b, the device 100 displays a camera capture user interface, in response to detecting a user input selecting the flashlight control 1123a, the device 100 turns on a light on the device to use as a flashlight). In some embodiments, the animated transition includes maintaining the time indication 1122-3 and the time indication 1122-4 at relative positions that align to the horizon of the content displayed in the wallpaper of the wake screen user interface 1126.

[0248] Figure 5AG illustrates that the time indication 1122-4 is displayed with a different size than the time indication 1122-3 (e.g., smaller in height and optionally in width) while the device 100 is in the landscape orientation. In some embodiments, the position of the time indication 1122-4 is maintained relative to the horizon of the content (e.g., and / or relative to a subject, a portion of a landscape, or another portion of the content) displayed in the wallpaper. For example, the bottom of time indication 1122-4 is displayed above the horizon line in Figure 5AG, and the bottom of time indication 1122-3 is displayed at a same relative position to the horizon line in Figure 5AF. In some embodiments, the time indication 1122-3 is stretched gradually into time indication 1122-4 (e.g., and / or vice versa), over time, in a manner that simulates physical properties, such as stretching the time indication with some resistance, inertia, deformation, and / or elasticity (e.g., as described above with reference to Figure 5U1 where platter 814-3 is stretched non-uniformly based on one or more simulated material properties of the simulated glass material).

[0249] FIGS. 6A-6C (including FIGS. 6A, 6B1, 6Bl-a, 6Bl-b, 6B2, 6B2-a, 6B2-b, 6B3, 6B4, 6B4-a, 6B5-6B13, and 6C) are illustrative representations, rules, parameters, examples, and variations of an exemplary process for generating an appearance of a user interface object that is visually associated with a user interface material (e.g., user interface object 6004, user interface object 6036, and / or another user interface object that is visually associated with a user interface material, as described in this disclosure) that simulates optical interactions with internal content, external content, and / or the environment, in accordance with some embodiments. In some embodiments, the exemplary process is used to generate the appearance of the user interface object that also simulates spatial properties and / or material properties of the user interface material as they impact the simulated optical properties and simulated spatial properties of the user interface material. In some embodiments, the appearance of the user interface object is adjusted to simulated changes in the simulated spatial properties, simulated optical properties, and / or simulated material properties, to provide visual feedback to changes in system states, user inputs, and / or to provide information, indications, visual cues, and / or guidance to the user regarding the system states, available operations, and / or required inputs of the computer system in association with the user interface object.

[0250] In the examples used in FIGS. 6A-6C, the user interface material has a so-called “glassy” appearance that simulates transmission, refraction, diffusion, absorption, and / or reflection of light and illumination from the physical environment and / or from internalcontent, external content, and / or nearby virtual environment, in accordance with various embodiments. In some embodiments, the term “glassy” refers to a property of the user interface material that allows the appearance of the underlying content to influence the appearance of the user interface material, as if the user interface material is fully or partially transparent to light. In addition, in some embodiments, the “glassy” material also deforms underlying content and internal content to simulate a change in refraction in the user interface material that appears to bend light that pass through the simulated surfaces of the user interface material. In some embodiments, the simulated refraction in the user interface material is not only based on the appearance of a portion of the underlying content that directly underlies the user interface material (e.g., via simulated internal refraction), but also based on the appearance of a portion of the underlying content that is outside of the simulated surface of the user interface material but within a refraction-threshold distance from the simulated surface of the user interface material (e.g., via simulated external refraction). In some embodiments, in additional to simulated refraction of underlying content located outside of the user interface material, the appearance of the user interface material also simulates refraction of internal content that is located within the user interface material. In some embodiments, the simulated internal refraction is based on the appearance of the internal content and includes deformation and color separation of a portion of the internal content that is near the edge portion of the user interface material where the user interface material has a curvature or change in simulated thickness. In some embodiments, the appearance of the user interface material further simulates other optical effects, such as transmission of virtual and / or physical light and / or illumination through a tinted translucent or transparent material (e.g., via a tint of the user interface material), specular reflection of virtual and / or physical light from outside of the user interface material (e.g., via one or more specular highlights), diffusion and reflection of virtual and / or physical light from outside of the user interface material (e.g., via a simulated sheen and / or simulated edge bleed), diffusion and internal reflection of virtual light from within the user interface material (e.g., via simulated edge bleed), and / or blockage of virtual and / or physical light from outside of the user interface material (e.g., via a simulated shadow). In some embodiments, the parameters used to adjust the appearance of the user interface material include opacity, blur radius, dimming, color saturation, luminance boost, luminance reduction, maximum luminance cutoff, minimum luminance cutoff, and / or other parameters used in the various visual effects, and these parameters are adjusted (e.g., changed in value) to change how the user interface material responds (e.g., magnitudes of response as well as types of response) to changes inthe appearance of the underlying content, internal content, and / or the environment. In some embodiments, the changes in the parameter values used in generating the visual effects are used to produced different types and / or variants of the user interface material (e.g., clear glass, tinted glass, frosted glass, dark glass, and / or other types of variations of the user interface material). Additional details regarding the various parameters of the user interface material are provided in Tables, 1, 2, and 3, and accompanying descriptions.

[0251] It is to be understood that, although the “glassy” appearance of the user interface material appears to simulate a physical process of light interaction between physical objects and materials, the usage of the “glassy” appearance of the user interface material in a user interface utilizes a familiar physical experience of the user to convey the spatial relationships between user interface objects within the displayed user interface, to provide efficient and intuitive visual feedback to the user regarding effects of user inputs, and / or to provide guidance regarding impending changes that would occur in light of the current state of the computer system and / or the user interaction that has been detected by the computer system.

[0252] It is to be understood that, the various parameters that are involved in the changing appearance of the user interface material, in some instances, have physical counterparts in the real world, and in many cases, are visual parameters that are designed to respond automatically to changes in conditions related to external inputs and internal states of the computer system (e.g., real-time changes, near-real-time changes, and / or cumulative changes over a period of time, in characteristic values of user inputs and / or in contextual conditions of the computer system). In some embodiments, the parameters are adjusted differently for different use case scenarios in order to provide better balance between competing concerns and benefits in the different use case scenarios. Various examples of relative parameter values are described in Tables 1, 2, and 3 and accompanying descriptions.

[0253] In some embodiments, the features described with respect to FIGS. 6A-6C are applicable to user interface materials and user interface objects that are visually associated with user interface materials, that are described with respect to other examples in the present disclosure. Although, sometimes not explicitly linked back to the user interface material described with respect to FIGS. 6A-6C, it is to be understood that, these features are fully available and can be combined with other features, e.g., features that are described with respect to simulated materials, user interface material, glassy materials, simulated optical interactions, simulated material interactions, and / or user interface objects and interactionstherewith, as described in other examples and embodiments the present disclosure, unless explicitly stated otherwise.

[0254] In some embodiments, the process for generating the appearance of the user interface material and corresponding the appearance of the user interface object includes applying a plurality of image processing procedures, optionally, in a respective ordered sequence or in two or more parallel sequences, with corresponding sets of processing parameters for the plurality of image processing procedures, and, optionally, with modifications, exceptions, thresholding, and adjustments applied under various conditions. In some embodiments, the outputs of the different image processing procedures are combined (e.g., by augmenting the output of another procedure, by overlapping and adding together the outputs of two procedures in portions corresponding to the same location, by overlaying and overriding the output of another procedure in portions corresponding to the same location, and / or by cutting out a portion of the output of one procedure at a location corresponding to the material and stitching the remaining portion of the output of the procedure to a portion of the output of another procedure that corresponds to the location of the material).

[0255] In some embodiments, unless explicitly stated, the example processes, rules, parameters, examples, and variations described with respect to FIGS. 6A-6C include procedures, rules, parameters, examples, and variations that are optional, and may include additional procedures, rules, parameters, examples, and variations, combination of procedures, rules, parameters, examples, and variations, sub-procedures of a described procedure, and / or modifications and variants of a described procedure, rule, parameter, example, and variation, depending on the requirements of various use case scenarios.

[0256] In some embodiments, one or more procedures described herein include adaptive parameters (e.g., blur radius, dimming, opacity, spatial distortion, color value, color separation, and / or boost and reduction in luminance, saturation, and / or specular response) that change parameter values based on an evaluation of the changes in one or more properties of the external environment and / or relevant content (e.g., underlying content, internal content, content directly underlying the user interface object, underlying multiple related user interface objects, and / or other portions of the user interface), and in turn produce gradual changes in the appearance of the user interface material that are not only based on the change in the appearance of the external environment and / or relevant content, but also based on the change in the parameter values of the image processing procedures used to generate the appearance of the user interface material. Additional details regarding relative values of theadaptive parameters of the user interface material are provided with respect to FIGS. 6B5-6B13, Tables 3A-3F, and method 19000.

[0257] In FIG. 6 A, an exemplary stack 6108 of image processing procedures for generating the appearance of an exemplary user interface material (e.g., a “glassy” appearance, and / or another type of appearance that is based on simulated optical and / or material interactions between a user interface material and nearby content) is shown. The bottom-up order of the stack 6108 is indicative of the order that the image processing procedures is applied, in some embodiments. However, such an order may be subject to modification under some conditions, in some embodiments. In some embodiments, the different layers in FIG. 6A (e.g., underlying content 6003 A, blur layer 6003B, internal refraction layer 6003 C-l, external refraction layer 6003 C-2, shadow layer 6003D, color matrices layer 6003E, edge bleed and sheen layer 6003F, tint VCM* (vibrant color matrix) layer 6003G, edge color matrix 6003H, internal content layer 60031, lens layer 6003J, specular VCM* (vibrant color matrix) layer 6003K) may refer to a spatial distribution of pixel values that spans the size of the underlying content, beyond the immediate vicinity of the user interface object, may be used as an input for another procedure in the stack, may be defined by a set of parameters for a set of one or more image filters that are applied to an input that includes an entirety or a subset of another layer, may be reduced to a subset of a distribution of pixel values that corresponds to a respective location, and / or may be displayed directly as part of the appearance of the user interface object. More details of these different aspects of individual layers are provided below.

[0258] In some embodiments, the basis of the appearance of the user interface material includes the appearance of external content, including content that is directly behind the user interface material from the viewpoint of the user and content that is outside (e.g., adjacent and / or near) the edge of the user interface material. This content is referred to as “underlying content” or “underlying content layer” 6003 A in FIG. 6A. The appearance of the user interface material simulates “refraction” of the underlying content 6003 A caused by the simulated “glassy” property of the user interface material.

[0259] In some embodiments, underlying content 6003 A includes various types of content that are potentially visually obscured by the presence of the user interface material due to the spatial arrangement between the region occupied by the user interface material and the region occupied by the underlying content, from the viewpoint of the user. For a two-dimensional user interface or pseudo-three-dimensional user interface, the underlying contentis displayed in a display layer that underlies or is behind the display layer of the user interface material, and overlaps with the user interface material at the lateral location of the user interface material. For a three-dimensional environment, the underlying content is behind the user interface material and visually obscured by the user interface material from the current viewpoint of the user (e.g., along the line of sight of the user). In some embodiments, the underlying content includes text, images, user interface objects, controls, windows, pop-ups, wallpaper, video content, user interfaces, and / or other types of visible content. In some embodiments, the underlying content includes a view of a three-dimensional environment that includes content displayed at different depths from the viewpoint of the user. In some embodiments, the underlying content includes a representation of a physical environment of the computer system (e.g., a passthrough view, such as an optical passthrough view or camera passthrough view of the physical environment).

[0260] In some embodiments, the underlying content 6003 A is based on a spatial distribution of pixel values that defines the appearance of the underlying content. In some embodiments, the pixel values for a pixel and / or a group of pixels at a respective location in the underlying content include a set of color values (e.g., RGB values, HEX values, HSL values, and / or HSLA values) and / or luminance values (e.g., brightness, gray values, luminance in RGB color space, and / or Y value in YIQ or YUV color spaces), for the pixel and / or group of pixels. In some embodiments, the pixel values of the underlying content for a respective location relative to the user interface material change in magnitudes when the underlying content changes appearance due to automatic progress animated transition and / or content playback, when the underlying content is scrolled, resized, and / or shifted relative to the display and / or the user interface material, and / or when the user interface material is resized, reshaped, and / or moved.

[0261] In an illustrative example, the underlying content 6003 A, as shown in FIG. 6B1, includes three main regions--a light colored top portion 6032 (e.g., white background, or a background with high luminance values), a medium lower left portion 6034 (e.g., patches of different shades of gray, or other colors with various medium level luminance values), and a dark lower right portion 6036 (e.g., dark background, or a background with low luminance values). In some embodiments, the underlying content 6003 A includes colored content, such as various shades and tints of reds, yellows, blues, greens, and / or other secondary and tertiary colors (e.g., as shown in the example in FIGS. 6Bl-b, 6B2-b, and 6B4-a). In addition, in some embodiments, the underlying content includes text, image, and user interface elementsoverlaying the different main regions (e.g., text 6008 overlaying portion 6032, image of mountain overlaying portion 6034, and control 6012 overlaying portion 6036). In this example, the underlying content 6003 A appears to be in a single display layer and in the same user interface. In some embodiments, the underlying content optionally includes content from different display layers and / or different visual and / or virtual depths from the viewpoint of the user, and is, optionally, flattened into a single layer to serve as the basis of the subsequent image processing procedures (e.g., blur layer 6003B, or another layer).

[0262] Referring back to FIG. 6A, in some embodiments, when generating the appearance of the user interface material, the computer system first generates a blur layer 6003B based on the spatial distribution of raw pixel values of the pixels and / or groups of pixels in the underlying content 6003 A. This blur layer 6003B includes a spatial distribution of modified pixel values of the pixels and / or groups of pixels in the underlying content 6003 A, where the spatial distribution of modified pixel values is obtained by applying a gradient blur 6006 to the spatial distribution of raw pixel values of the underling content 6003 A, in some embodiments. For example, as shown in FIG. 6B1, a user interface object 6004 is visually associated with the user interface material (e.g., the appearance of the user interface material is used to indicate the spatial extent of the user interface object, and the boundary of the user interface object 6004 is used to define the spatial extent of the user interface material). In FIG. 6B1, the outline of the user interface object 6004 is a rectangle with rounded corners and straight edges, against the backdrop of the underlying content 6003 A. In some embodiments the gradient blur 6006 has intensity contours (e.g., contours of constant blur radii, and / or contours of constant reduction of opacity) with shapes that correspond to the outline of the user interface object 6004 against the underlying content 6003 A. In some embodiments, intensity contours of the gradient blur 6006 have faster changes of intensity (e.g., are spaced closer together) near the outline of the user interface object 6004 to simulate faster changes in simulated thicknesses of the user interface material near the edge of the user interface object 6004. In some embodiments, a respective intensity contour and a region that is associated with the respective intensity contour corresponds to a respective blur radius, and the respective blur radius is used in blurring the portion of the underlying content 6003 A that falls within the region associated with the respective intensity contour. In some embodiments, the result of the blurring procedure applied to the underlying content 6003 A includes the spatial distribution of the modified pixel values for pixels and groups of pixels in the blur layer 6003B. In some embodiments, the intensity or blur radius of the blurring procedure gradually increases from an interior region of the user interfaceobject 6004 toward the edge of the user interface object 6004 (e.g., reaching a local maximum at the outline of the user interface object 6004), and then gradually decreases going farther away from the edge of the user interface object 6004. For example, in some embodiments, the blur radius corresponding to intensity contour 6006-1 is greater than the blur radius corresponding to an intensity contour right outside of the edge of the user interface object 6004, the blur radius corresponding to intensity contour 6006-2 is smaller than the blur radius corresponding to an intensity contour right inside of the edge of the user interface object 6004. The blur radius corresponding to intensity contour 6006-3 is smaller than the blur radius corresponding to intensity contour 6006-2. It is to be understood that, although several separate intensity contours (e.g., 6006-1, 6006-2, and 6006-3) are shown in FIG. 6B1, the change in blur radius in the gradient blur is gradual and the transitions between the regions corresponding to different blur radii are, optionally, gradual transitions.

[0263] In some embodiments, the gradient blur 6006 is applied to the underlying content 6003 A with a gradual change in opacity of the blur layer 6003B that reduces the visibility of the underlying content 6003A (e.g., to simulate a “frosted” look of the user interface material). In some embodiments, a gradient of opacity change is applied to the underlying content 6003 A instead of the gradient blur 6006 to obtain the blur layer 6003B. In some embodiments, the change in opacity in the blur layer 6003B also has intensity contours that mimic the intensity contours of the change in blur radius. In some embodiments, the opacity has the greatest value (e.g., 100%, 95%, or another high value) along the outline of the user interface object 6004, and the opacity gradually decreases with increasing distances from the outline of the user interface object 6004. In some embodiments, the blur radius is zero or substantially zero at the center of the user interface object 6004. In some embodiments, the blur radius is a finite non-zero value in the interior region of the user interface object 6004 (e.g., within the intensity contour 6006-3). In some embodiments, the opacity is zero or substantially zero at the center of the user interface object. In some embodiments, the opacity is a finite non-zero value in the interior region of the user interface object 6004 (e.g., within the intensity contour 6006-3). In some embodiments, the change in the opacity and / or the change in the blur radius corresponds to the change in simulated thickness of the user interface material in the depth dimension of the user interface (e.g., greater simulated thickness corresponds to greater blur radius and / or greater obscuring strength of the opacity filter).

[0264] In some embodiments, the blur layer 6003B has a finite spatial extent outside of the outline of the user interface object 6004. In some embodiments, the shapes of the intensity contours, the spatial extent of the blur filter and / or opacity filter, the values of blur radius, the strengths of the opacity filter, the rate of change in blur radius, and / or the rate of change in the strength of the opacity filter, are adjustable parameters of the blur layer, and are adjustable based on changes in external lighting, orientation and / or movement of the computer system relative to the environment, characteristics of the underlying content (e.g., overall luminance and / or average luminance under the user interface material, and / or another characteristic luminance for a relevant portion of the underlying content), and / or relevant use case scenarios (e.g., the role played by the user interface object, such as being a control, an indicator, interactive content, non-interactive content, moving, remaining stationary, and / or other relevant factors, such as those listed in Tables 1, 2, and 3).

[0265] In the example shown in FIG. 6B1, on the outside of the outline of the user interface object 6004, a portion of the underlying content (e.g., the text “Control.” and the outer edges of the mountain image and the dark background) that is more than a threshold distance (e.g., blur-threshold distance) away from the outline of the user interface object 6004 is not blurred (e.g., the blur radius is zero at this distance); a portion of the underlying content (e.g., the lower portions of the text “Touch. Zoom.” and the lower portion of the mountain image, and a portion of the circular control 6012 and its nearby dark background) that is within the threshold distance away from the outline of the user interface object 6004 is blurred and made less visible (e.g., through application of a blur filter and / or opacity filter). Similarly, within the outline of the user interface object 6004, the underlying content is blurred to different degrees and / or obfuscated to different degrees by a blur gradient and / or an opacity gradient (e.g., increasing blur and / or opacity with increasing distance from the outline of the user interface object 6004). For example, the text “Click. Quick.” is blurred by a greater degree and make less visible in the lower portion, closer to the center of the user interface object 6004, as compared to the upper portion, farther away from the center of the user interface object 6004. In FIG. 6B1, the portion of the blur layer that corresponds to a blurred portion of the text 6008 is denoted as text 6008*; the portion of the blur layer that corresponds to a blurred portion of the region 6032 is denoted as region 6032*; the portion of the blur layer that corresponds to a blurred portion of the region 6034 is denoted as region 6034*; the portion of the blur layer that corresponds to a blurred portion of the region 6036 is denoted as region 6036*; and the portion of the blur layer that corresponds to a blurred portion of the vertical bar 6010 is denoted as bar 6010*.

[0266] In some embodiments, the blur layer 6003B shown in FIG 6B1 is used as basis for several visual effects, including the simulated refraction layers 6003C (e.g., internal refraction layer 6003C-1 and / or external refraction layer 6003C-2), the simulated shadow layer 6003D, and / or the simulated edge bleed and sheen layer 6003F. In some embodiments, the blur layer 6003B as a whole and / or cropped portions of the blur layer 6003B (e.g., at locations corresponding to the user interface material, and / or at locations corresponding to the simulated shadow) are provided as input to the layers corresponding to additional visual effects, and used to generate the intermediate and / or final appearances of the user interface material. In some embodiments, the appearance of the blur layer 6003B is not directly displayed as part of the user interface object 6004. In some embodiments, the computer system displaying the user interface object 6004 may not have the capability to display the “glassy” appearance of the user interface material as described herein, and / or is configured to forgo displaying the “glassy” appearance when certain conditions are met (e.g., conditions based on power usage configuration, device condition, and / or other usage scenarios), and the appearance of the blur layer 6003B is optionally used (e.g., with or without adjustment in terms of blur radius, opacity, color saturation, and / or luminance) as a simpler substitute for the “glassy” appearance of the user interface material. In some embodiments, the appearance of the blur layer 6003B simulates transmission and diffusion of the underlying content 6003 A by the user interface material of the user interface object 6004.

[0267] Referring back to FIG. 6A, after the blur layer 6003B is generated based on the underlying content 6003 A, the spatial distribution of modified pixel values in the blur layer 6003B is used to generate simulated refraction of the underlying content 6003 A. In some embodiments, the simulated refraction 6003 C includes different amounts of spatial displacement of the pixel values at different locations within and / or near (e.g., outside of and adjacent to) the outline of the user interface object 6004. In some embodiments, the amount of spatial displacement of the pixel values corresponds to an intensity of simulated refraction (e.g., simulating the change in simulated refractive index of the user interface material and / or the change in the power of the user interface material to “bend” light). In some embodiments, the intensity of simulated refraction is indicative of a rate of change in simulated thickness of the user interface material (e.g., increasing rate of change in simulated thickness near the edge of the user interface object 6004). As shown in FIG. 6B1, the simulated side view 6014 of the user interface material corresponding to the user interface object 6004 shows that the simulated thickness of the user interface material gradually tapers off in an edge region of the user interface material, with increasing rate of change in simulated thickness, whichcorresponds to an increasing change of simulated refraction, closer to the bottom edge of the user interface material. This increase in intensity of the simulated refraction is visually illustrated in FIG. 6B 1 by the amount of warping applied to the portion of the vertical bar 6010 within the outline of the user interface object 6004, with a greater amount of warping (e.g., shown in the refracted representation 6010’ of the vertical bar 6010) near the outline of the user interface object 6004, and a smaller amount of warping away from the outline of the user interface object 6004.

[0268] Referring back to FIG. 6A, in some embodiments, the simulated refraction 6003 C includes three parts, respectively labeled as internal refraction region 6003 C-l, external refraction region 6003C-2, and combination region 6003C-3. In some embodiments, the internal refraction region 6003C-1 is based on a portion of the blur layer 6003B that is included entirely within the outline of the user interface object 6004, up to the outline of the user interface object 6004; the external refraction region 6003C-2 is based on a portion of the blur layer 6003B that is entirely outside the outline of the user interface object 6004, up to the outline of the user interface object 6004; and the combination region 6003 C-3 includes an overlap region of a small width of several pixels (e.g., 3 pixels, 5 pixels, 10 pixels, or another small number of pixels) between the internal refraction region 6003C-1 and external refraction region 6003C-2 along the outline of the user interface object 6004. In some embodiments, the appearance of the internal refraction region 6003C-1 is entirely based on the appearance of a portion of the underlying content 6003 A that is within the outline of the user interface object 6004, and completely behind the user interface material of the user interface object 6004. In some embodiments, the appearance of the external refraction region 6003C-2 is entirely based on the appearance of a portion of the underlying content 6003A that is outside the outline of the user interface object 6004, and has a visible representation outside of the user interface material of the user interface object 6004. In some embodiments, the appearance of the combination region 6003C-3 is based on the appearance of some portion of the underlying content 6003 A that is within the outline of the user interface object 6003 A and some portion of the underlying content 6003 A that is outside the outline of the user interface object 6004 (e.g., due to the mixing effect of the gradient blurring used to generating the blur layer 6003B near the outline of the user interface object 6004).

[0269] Referring back to FIG. 6B 1, the simulated refraction 6003 C of the underlying content 6003 A (e.g., applied to blur layer 6003B), has changing intensities near the outline of the user interface object 6004 (e.g., increasing intensities to simulate increasing rate ofchange in simulated thickness, and / or decreasing intensities to simulate decreasing rate of change in simulated thickness), and results in varying amounts of spatial displacement of pixel values in the portion of underlying content near the outline of the user interface object 6004 (e.g., warpage of straight lines in the underlying content, such as in w...

Claims

What is claimed is:

1. A method comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:detecting occurrence of an event; andin response to detecting the occurrence of the event, displaying, via the one or more display generation components, a first user interface object in a user interface, the first user interface object having a first boundary that encompasses content of the first user interface object, wherein:the content of the first user interface object includes at least a first emissive element that is spaced apart from the first boundary of the first user interface object, the first emissive element is displayed concurrently with a virtual lighting effect that gives the appearance that the first emissive element is emitting virtual light in the user interface, anddisplaying the first user interface object includes displaying first simulated light interaction between the first emissive element and the first boundary of the first user interface object, resulting in a first altered appearance of the first boundary of the first user interface object.

2. The method of claim 1, wherein displaying the first simulated light interaction between the first emissive element and the first boundary of the first user interface object includes:in accordance with the first emissive element having a first spatial relationship to a first portion of the first boundary, displaying a first change in appearance in the first portion of the first boundary; andin accordance with the first emissive element having a second spatial relationship, different from the first spatial relationship, to the first portion of the first boundary, displaying a second change in appearance, different from the first change in appearance, in the first portion of the first boundary.

3. The method of any of claims 1-2, wherein displaying the first user interface object includes displaying simulated light interaction between the first emissive element and one or more interior portions of the first user interface object located between the first emissiveelement and the first boundary of the first user interface object, resulting in an altered appearance of the one or more interior portions of the first user interface object.

4. The method of any of claims 1-3, wherein the first user interface object is an application icon, and the first emissive element is an internal element of the application icon.

5. The method of any of claims 1-3, wherein:the first user interface object is a widget that includes status information that changes over time, andthe first emissive element is an internal element of the widget.

6. The method of any of claims 1-5, wherein the first user interface object is a selectable object, and the method includes:while displaying, via the one or more display generation components, the first user interface object in the user interface, detecting, via the one or more input devices, a selection input that is directed to the first user interface object; andin response to detecting the selection input that is directed to the first user interface object, performing an operation that corresponds to selection of the first user interface object.

7. The method of any of claims 1-6, including:displaying, via the one or more display generation components, additional content of the user interface, concurrently with the first user interface object, within the user interface; anddisplaying, via the one or more display generation components, simulated light interaction between the first emissive element and the additional content of the user interface, resulting in an altered appearance of the additional content in the user interface.

8. The method of claim 7, wherein:the additional content includes a background of the user interface, anddisplaying the simulated light interaction between the first emissive element and the additional content of the user interface includes displaying an altered appearance of one or more portions of the background based on simulated virtual light interactions between the first emissive element and the background of the user interface.

9. The method of any of claims 7-8, wherein:the additional content includes one or more other user interface objects different from the first user interface object, anddisplaying the simulated light interaction between the first emissive element and the additional content of the user interface includes displaying altered appearances of the one or more other user interface objects based on simulated virtual light interactions between the first emissive element and the one or more other user interface objects in the user interface.

10. The method of any of claims 7-9, wherein:the additional content includes a first subset of content located in a first region of the user interface;the additional content includes a second subset of content located in a second region of the user interface;the first region of the user interface has a first spatial relationship to the first user interface object;the second region of the user interface has a second spatial relationship to the first user interface object that is different from the first spatial relationship; anddisplaying the simulated light interaction between the first emissive element and the additional content of the user interface includes:displaying, via the one or more display generation components, a first set of changes to the first subset of content located in the first region of the user interface based on the first spatial relationship between the first region and the first user interface object; and displaying, via the one or more display generation components, a second set of changes to the second subset of content located in the first region of the user interface based on the second spatial relationship between the second region and the first user interface object, wherein the first set of changes differs from the second set of changes based on a difference between the first spatial relationship to the first user interface object and the second spatial relationship to the first user interface object.

11. The method of any of claims 7-10, wherein:the first user interface object includes a first interior portion and a second interior portion other than the first user interface object; anddisplaying the first user interface object includes:displaying, via the one or more display generation components, simulated light interaction between the first emissive element and the first interior portion of the first userinterface object based on a spatial relationship between the first emissive element and the first interior portion of the first user interface object; anddisplaying, via the one or more display generation components, simulated light interaction between the first emissive element and the second interior portion of the first user interface object based on a spatial relationship between the first emissive element and the second interior portion of the first user interface object.

12. The method of any of claims 1-11, including:while displaying the first user interface object in the user interface and displaying the first simulated light interaction between the first emissive element and the first boundary of the first user interface object, detecting, via the one or more input devices, a user input that is directed to the first user interface object; andin response to detecting the user input that is directed to the first user interface object:in accordance with a determination that the user input meets first criteria, performing a first operation corresponding to the first user interface object; andin accordance with a determination that the user input meets second criteria different from the first criteria, performing a second operation corresponding to the first user interface object, wherein the second operation is different from the first operation.

13. The method of any of claims 1-12, wherein:the first user interface object includes at least a first subset of content, including the first emissive element, in a first content layer having a first position in a set of content layers, andthe first user interface object includes a second subset of content different from the first subset of content, in a second content layer having a second position in the set of content layers that is different from the first position in the set of content layers.

14. The method of claim 13, wherein displaying the first user interface object includes: displaying, via the one or more display generation components, a first simulated shadow of an object from the first subset of content on a portion of the second subset of content in the second content layer; and / ordisplaying, via the one or more display generation components, a second simulated shadow of an object from the second subset of content on a portion of the first subset of content in the first content layer.

15. The method of any of claims 1-14, wherein displaying the first simulated light interaction between the first emissive element and the first boundary of the first user interface object includes displaying simulated specular effects in one or more regions along the first boundary of the first user interface object.

16. The method of claim 15, wherein displaying the simulated specular effects in one or more regions along the first boundary of the first user interface object includes:in accordance with a determination that a first set of ambient light conditions is present, displaying, via the one or more display generation components, a first set of one or more specular effects in a first set of regions along the first boundary of the first user interface object; andin accordance with a determination that a second set of ambient light conditions, different from the first set of ambient light conditions, is present, displaying, via the one or more display generation components, a second set of one or more specular effects in a second set of regions along the first boundary of the first user interface object, wherein the first set of one or more specular effects in the first set of regions along the first boundary of the first user interface object is different from the second set of one or more specular effects in the second set of regions along the first boundary of the first user interface object.

17. The method of any of claims 15-16, wherein displaying the simulated specular effects in one or more regions along the first boundary of the first user interface object includes: in accordance with a determination that a first set of virtual objects is present between a light source and the first user interface object, displaying, via the one or more display generation components, a first set of one or more modified specular effects along the first boundary of the first user interface object based on the light source and one or more characteristics of the first set of virtual objects; andin accordance with a determination that a second set of virtual objects, different from the first set of virtual objects, is present between the light source and the first user interface object, displaying, via the one or more display generation components, a second set of one or more modified specular effects along the first boundary of the first user interface object based on the light source and one or more characteristics of the second set of virtual objects.

18. The method of any of claims 15-17, wherein:the first user interface object includes one or more elements in a first display layer and one or more elements in a second display layer different from the first display layer; andthe method includes, concurrently displaying:one or more simulated specular effects in one or more regions along respective boundaries of the one or more elements in the first display layer, andone or more simulated specular effects in one or more regions along respective boundaries of the one or more elements in the second display layer.

19. The method of any of claims 1-18, including:in accordance with a determination that a first component object of the first user interface object has a first configuration value for a first configurable property of the first component object, displaying the first component object as an emissive element of the first user interface object; andin accordance with a determination that a second component object of the first user interface object has a second configuration value, different from the first configuration value, for the first configurable property of the second component object, forgoing displaying the second component object as an emissive element of the first user interface object.

20. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; and the first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andin response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

21. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detect, via the one or more input devices, a first user input that interacts with the first user interface element; andin response to detecting the first user input that interacts with the first user interface element via the one or more input devices, update the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

22. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for, displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;means for, while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andmeans for, in response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

23. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for, displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;means for, while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andmeans for, in response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

24. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 1-19.

25. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 1-19.

26. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 1-19.

27. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 1-19.

28. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 1-19.

29. A method, comprising,at a computer system that is in communication with one or more display generation components and one or more input devices:displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; and the first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andin response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

30. The method of claim 29, wherein the other content from the user interface to which the first modification is made, to generate the appearance of the first user interface element in the first state includes, content in the user interface that is not currently visible via the one or more display generation components.

31. The method of any of claims 29-30, including:while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, movement of the computer system relative to a frame of reference;in response to detecting the movement of the computer system relative to the frame of reference, updating the first user interface element from the first state to a third state through one or more intermediate states between the first state and the third state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the third state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties;after displaying the first user interface element in the respective intermediate state between the first state and the third state, displaying, via the one or more display generation components, the first user interface element in the third state with an appearance that is based on a third set of one or more values for the first set of one or more properties, different from the first set of one or more values and the second set of one or more values for the first set of one or more properties.

32. The method of claim 31, wherein:the first set of one or more values for the first set of one or more properties includes a first gradient of a first property from the first set of one or more properties that extends across the first user interface element in a first direction;the third set of one or more values for the first set of one or more properties includes a second gradient of the first property from the first set of one or more properties that extends across the first user interface element in the first direction; andthe respective intermediate set of one or more values for the first set of one or more properties includes a respective intermediate gradient of the first property from the first set of one or more properties that extends across the first user interface element in the first direction.

33. The method of any of claims 31-32, including:while displaying, via the one or more display generation components, the first user interface element in the third state, detecting, via the one or more input devices, a termination of the movement of the computer system; andin response to detecting the termination of the movement of the computer system, displaying, via the one or more display generation components, the first user interface element in the first state, restoring the first user interface element from the third state to the first state through one or more intermediate states between the third state and the first state.

34. The method of any of claims 29-33, wherein displaying the first user interface element in the respective intermediate state with the appearance that is based on the respective intermediate modification to other content from the user interface includes:in accordance with a determination that the boundary of the first user interface element in the respective intermediate state has a first set of spatial properties, displaying the first user interface element with a first intermediate appearance that simulates light interactions between the first user interface element and other content from the user interface in a first manner; andin accordance with a determination that the boundary of the first user interface element in the respective intermediate state has a second set of spatial properties, displaying the first user interface element with a second intermediate appearance that simulates light interactions between the first user interface element and other content from the user interface in a second manner different from the first manner.

35. The method of any of claims 29-34, wherein the first set of one or more properties includes one or more simulated material properties for the first simulated material, including a blur radius of the first simulated material and / or a simulated refractive index of the first simulated material.

36. The method of any of claims 29-35, wherein:the appearance of the first user interface element that is based on the first modification to other content from the user interface is based on:the first modification to a portion of the other content from the user interface that is behind and obscured by the first user interface element, andthe first modification to a portion of the other content from the user interface that is spaced apart from and not obscured by the first user interface element.

37. The method of any of claims 29-36, wherein:in accordance with the first user input having a first value for a first characteristic of the first user input, the second set of one or more values for the first set of one or more properties have a first set of magnitudes; andin accordance with the first user input having a second value for the first characteristic of the first user input, the second value for the first characteristic of the first user input being different from the first value for the first characteristic of the first user input, the second set of one or more values for the first set of one or more properties have a second set of magnitudes different from the first set of magnitudes.

38. The method of claim 37, wherein updating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state includes:in accordance with a determination that the first characteristic of the first user input does not meet a first threshold, updating the first user interface element based on a first rate of change in respective values of the first set of one or more properties; andin accordance with a determination that the first characteristic of the first user input meets the first threshold, updating the first user interface element based on a second rate of change in respective values of the first set of one or more properties, wherein the second rate of change is different from the first rate of change.

39. The method of claim 38, wherein:the first characteristic includes a duration of the first user input;the first threshold includes a first duration threshold;the first rate of change is greater than the second rate of change; andupdating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state includes:in accordance with a determination that the duration of the first user input is approaching the first threshold window and is within a threshold window of the first durationthreshold, gradually reducing a current rate of change from the first rate of change to the second rate of change.

40. The method of any of claims 37-39, wherein updating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state includes:in accordance with the first user input having an intermediate value between the first value to the second value for the first characteristic of the first user input, the respective intermediate set of one or more values for the first set of one or more properties have a respective intermediate set of magnitudes between the first set of magnitudes and the second set of magnitudes.

41. The method of any of claims 29-40, wherein:the first set of one or more properties of the first user interface element includes at least a first property of the first user interface element, and a second property of the first user interface element that is different from the first property of the first user interface element;the first set of one or more values for the first set of one or more properties includes an initial value for the first property and an initial value for the second property;the respective intermediate set of one or more values for the first set of one or more properties includes a respective intermediate value for the first property and a respective intermediate value for the second property;the second set of one or more values for the first set of one or more properties includes an ending value for the first property and an ending value for the second property;the respective intermediate value for the first property is different from the initial value and the ending value for the first property; andthe respective intermediate value for the first property is different from the initial value and the ending value for the first property.

42. The method of any of claims 29-41, including:after the first user interface element has been displayed in the second state in response to detecting the first user input, detecting, via the one or more input devices, a termination of the first user input; andin response to detecting the termination of the first user input, changing an appearance of the first user interface element to at least partially reverse one or more previous updatesmade to the first user interface element from the first state to a final state of the first user interface element at the termination of the first user input.

43. The method of claim 42, wherein changing the appearance of the first user interface element to at least partially reverse one or more of the previous updates made to the first user interface element from the first state to the final state at the termination of the first user input is performed in a period of time that is shorter than a period of time it took to update the first user interface element from the first state to the final state.

44. The method of any of claims 29-43, wherein:in accordance with a determination that the first user input is directed to a first portion of the first user interface element, the respective intermediate set of one or more values for the first set of one or more properties includes a first set of changes from the first set of one or more values for the first set of one or more properties; andin accordance with a determination that the first user input is directed to a second portion of the first user interface element, different from the first portion of the first user interface element, the respective intermediate set of one or more values for the first set of one or more properties includes a second set of changes from the first set of one or more values for the first set of one or more properties, wherein the second set of changes is different from the first set of changes.

45. The method of claim 44, wherein:in accordance with a determination that the first user input is directed to the first portion of the first user interface element, the respective intermediate set of one or more values for the first set of one or more properties simulates a rotation of the first user interface element in a first direction relative to other content in the user interface; andin accordance with a determination that the first user input is directed to the second portion, different from the first portion, of the first user interface element, the respective intermediate set of one or more values for the first set of one or more properties simulates a rotation of the first user interface element in a second direction, different from the first direction, relative to other content in the user interface.

46. The method of claim 45, wherein:the simulated rotation of the first user interface element in the first direction relative to other content in the user interface causes the first portion of the first user interface element to appear to move closer to a background behind the first user interface element, andthe simulated rotation of the first user interface element in the first direction relative to other content in the user interface causes another portion of the first user interface element opposite to the first portion of the first user interface element to appear to move farther away from the background.

47. The method of any of claims 29-46, wherein updating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state in response to detecting the first user input, includes:in accordance with a determination that the first user input is directed to a first portion of the first user interface element, simulating rotation of the first user interface element in a first direction relative to other content in the user interface; andin accordance with the first user input being directed to the second portion, different from the first portion, of the first user interface element, simulating rotation of the first user interface element in a second direction, different from the first direction, relative to other content in the user interface.

48. The method of any of claims 29-47, wherein:the user interface concurrently includes a first set of one or more user interface elements, and a second set of one or more user interface element,a respective user interface element from the first set of user interface elements has a respective appearance that transitions through multiple states in response to a user input directed to the respective user interface element from the first set of user interface elements, anda respective user interface element from the second set of user interface elements has a respective appearance that transitions through multiple states in response to movement of the computer system.

49. The method of any of claims 29-48, wherein updating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state includes changing a simulated thickness of the first user interface element from a first simulated thickness to a second simulated thickness through one or more intermediate simulated thicknesses.

50. The method of any of claims 29-49, wherein:updating the first user interface element from the first state to the second state through one or more intermediate states between the first state and the second state includes updatinga simulated orientation of the first user interface element from a first orientation relative to a depth dimension of the user interface to a second orientation, different from the first orientation, relative to the depth dimension of the user interface, through one or more intermediate orientations between the first orientation and the second orientation;updating the simulated orientation of the first user interface element includes changing respective parameter values of one or more simulated material properties of the first simulated material from a first set of parameter values for the one or more simulated material properties of the first simulated material to a second set of parameter values for the one or more simulated material properties of the first simulated material, through one or more intermediate sets of parameter values for the one or more simulated material properties of the first simulated material; andthe second set of parameter values for the one or more simulated material properties is different from the first set of parameter values for the one or more simulated material properties of the first simulated material.

51. The method of any of claims 29-50, wherein the first set of one or more properties includes a set of one or more rules that are used in generating the appearance of the first simulated material based on the other content from the user interface that changes different portions of the first simulated material differently depending on the content that is underneath the different portions of the first simulated material.

52. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; and the first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andin response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

53. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detect, via the one or more input devices, a first user input that interacts with the first user interface element; andin response to detecting the first user input that interacts with the first user interface element via the one or more input devices, update the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

54. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;means for, while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andmeans for, in response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

55. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, in a user interface, a first user interface element comprising first content embedded in a first simulated material, wherein:the first user interface element is displayed in a first state with an appearance that is based on a first modification to other content from the user interface; andthe first modification to other content from the user interface is based on a first set of one or more values for a first set of one or more properties while the first user interface element is in the first state;means for, while displaying the first user interface element in the first state with the appearance that is based on the first modification to other content from the user interface, detecting, via the one or more input devices, a first user input that interacts with the first user interface element; andmeans for, in response to detecting the first user input that interacts with the first user interface element via the one or more input devices, updating the first user interface element from the first state to a second state through one or more intermediate states between the first state and the second state, including:displaying, via the one or more display generation components, the first user interface element in a respective intermediate state between the first state and the second state with an appearance that is based on a respective intermediate modification to other content from the user interface, wherein the respective intermediate modification to other content from the user interface is based on a respective intermediate set of one or more values for the first set of one or more properties that is different from the first set of one or more values for the first set of one or more properties; andafter displaying the first user interface element in the respective intermediate state between the first state and the second state, displaying, via the one or more display generation components, the first user interface element in the second state with an appearance that is based on a second set of one or more values for the first set of one or more properties, wherein:the second set of one or more values for the first set of one or more properties is different from the first set of one or more values for the first set of one or more properties; andthe second set of one or more values for the first set of one or more properties is different from the respective intermediate set of one or more values for the first set of one or more properties.

56. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 29-51.

57. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 29-51.

58. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 29-51.

59. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 29-51.

60. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 29-51.

61. A method comprising:at a computer system in communication with one or more display generation components and one or more input devices:displaying, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter;while displaying the first user interface that includes the first interactive element represented by the first platter, detecting occurrence of a first event that meets navigation criteria;in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, displaying, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein:in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; andin accordance with a determination that the first interactive element in the first user interface does not satisfy the respective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

62. The method of claim 61, wherein:the first user interface includes a third interactive element represented by a third platter;the third interactive element is different from the first interactive element;the third platter is different from the first platter; andthe method includes, in response to detecting the occurrence of the first event that meets the navigation criteria, ceasing to display the third platter without morphing or merging the third platter into another platter.

63. The method of any of claims 61-62, wherein displaying the first platter morphing into the second platter includes merging the first platter with an additional platter that was displayed concurrently with the first platter in the first user interface.

64. The method of claim 63, wherein merging the first platter with the additional platter that was displayed concurrently with the first platter in the first user interface includesdisplaying a boundary of the first platter and a boundary of the additional platter in a plurality of intermediate states in which the boundary of the first platter and the boundary of the second platter move closer to each other and connect into a single continuous boundary of the second platter.

65. The method of any of claims 61-62, wherein displaying the first platter morphing into the second platter includes splitting the first platter into two or more portions that are spaced apart from one another, with at least one of the two or more portions morphing into the second platter.

66. The method of claim 65, wherein splitting the first platter into two or more portions, with at least one of the two or more portions morphing into the second platter, includes displaying a boundary of the first platter in a plurality of intermediate states in which the boundary of the first platter separates into respective boundaries of the two or more portions, where the respective boundaries of the two or more portions are connected in one or more of the plurality of intermediate states and are separated from one another in one or more of the plurality of intermediate states.

67. The method of any of claims 61-66, wherein:the first user interface includes a first plurality of interactive elements represented by respective platters from a first plurality of platters; andthe method includes:while displaying the first user interface that includes the first plurality interactive elements represented by the respective platters from the first plurality of platters, detecting occurrence of a second event that meets the navigation criteria; andin response to detecting the occurrence of the second event, displaying, via the one or more display generation components, a third user interface that includes a second plurality of interactive elements, wherein displaying the third user interface includes:merging a first set of two or more platters from the first plurality of platters into a respective platter in the second plurality of platters; andforgoing merging a second set of one or more platters from the first platters into a respective platter in the second plurality of platters.

68. The method of claim 67 wherein forgoing merging the second set of two or more platters from the first plurality of platters into a respective platter in the second plurality of platters includes:splitting a respective platter from the second set of two or more platters from the first plurality of platters into two or more portions, with at least one of the two or more portions of the respective platter morphing into a platter in the second plurality of platters.

69. The method of any of claims 61-68, including:while displaying the first user interface, detecting, via the one or more input devices, a first user input that is directed to the first interactive element; andin response to detecting the first user input:displaying, via the one or more display generation components, a plurality of intermediate states in which the first platter splits into two or more portions, and the two or more portions morph into separate platters representing two or more interactive elements that were not displayed in the first user interface prior to detecting the first user input; and maintaining display of the two or more interactive elements represented by the separate platters, after displaying the plurality of intermediate states.

70. The method of claim 69, including:in response to detecting the first user input:displaying, via the one or more display generation components, a plurality of intermediate states in which the two or more platters that were concurrently displayed with the first platter in the first user interface are merged into a single platter representing a new interactive element that was not displayed in the first user interface prior to detecting the first user input; andmaintaining display of the new interactive element represented by the single platter formed by merging the two or more platters that were concurrently displayed with the first platter in the first user interface.

71. The method of any of claims 61-70, wherein displaying the first platter morphing into the second platter includes displaying, via the one or more display generation components, a plurality intermediate states in which at least a portion of a boundary of the first platter stretches and / or morphs into at least a portion of a boundary of the second platter.

72. The method of claim 71, wherein:the first user interface includes a first plurality of interactive elements represented by respective platters from a first plurality of platters; anddisplaying the first platter morphing into the second platter includes displaying a plurality of intermediate states in which a boundary of the first platter and respectiveboundaries of one or more additional platters from the first plurality of platters stretch toward one another and morph into a single boundary of the second platter.

73. The method of any of claims 61-72, wherein, in accordance with the determination that the first interactive element in the first user interface satisfies the respective criteria that are based on a spatial arrangement of the first interactive element with a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes changing content displayed on the first platter into content displayed on the second platter.

74. The method of any of claims 61-73, wherein:the first interactive element corresponds to a first operation; andthe method includes:while displaying the second interactive element represented by the second platter morphed from the first platter, detecting, via the one or more input devices, a user input that interacts with the second interactive element; andin response to detecting the user input that interacts with the second interactive element, in accordance with a determination that the user input meets activation criteria, performing a second operation that is different from the first operation.

75. The method of any of claims 61-74, wherein, in accordance with the determination that the first interactive element in the first user interface satisfies the respective criteria that are based on a spatial arrangement of the first interactive element with a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes changing a value of a first visual property of the first platter when morphing the first platter into the second platter.

76. The method of any of claims 61-75, wherein, in accordance with the determination that the first interactive element in the first user interface satisfies the respective criteria that are based on a spatial arrangement of the first interactive element with a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes changing a size of the first platter when morphing the first platter into the second platter.

77. The method of any of claims 61-76, wherein detecting the occurrence of the event includes detecting a user input that corresponds to a request to scroll the first user interface and the second user interface is displayed as a result of scrolling the first user interface.

78. The method of any of claims 61-76, wherein:detecting the occurrence of the event includes detecting a user input that selects a user interface object displayed in the first user interface; andthe second user interface is displayed as a result of the selection of user interface object displayed in the first user interface.

79. The method of any of claims 61-76, wherein detecting the occurrence of the event includes detecting a user input that corresponds to a request to navigate back to a previously displayed user interface and the second user interface is displayed as the previously displayed user interface.

80. The method of any of claims 61-79, wherein displaying the second user interface that includes the second interactive element includes:in accordance with a determination that a display location of the first interactive element is within a threshold range of a display location of the second interactive element in a display region provided via the one or more display generation components, displaying, via the one or more display generation components, the first platter morphing into the second platter; andin accordance with a determination that the display location of the first interactive element is outside of the threshold range of the display location of the second interactive element in the display region provided via the one or more display generation components, ceasing to display the first platter, and displaying, via the one or more display generation components, the second platter without morphing the first platter into the second platter.

81. The method of any of claims 61-80, wherein displaying the second user interface that includes the second interactive element includes:in accordance with a determination that an animation direction for transitioning from the first user interface to the second user interface is a first animation direction, displaying, via the one or more display generation components, the first platter morphing into the second platter; andin accordance with a determination that the animation direction for transitioning from the first user interface to the second user interface is a second animation direction, differentfrom the first animation direction, ceasing to display the first platter, and displaying, via the one or more display generation components, the second platter without morphing the first platter into the second platter.

82. The method of any of claims 61-81, wherein the respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element includes a requirement that the first interactive element and the second interactive element are in a same display layer in order for the first interactive element to meet the respective criteria.

83. The method of any of claims 61-82, wherein:the first interactive element includes first content other than the first platter; and displaying the second interactive element represented by the second platter includes displaying, via the one or more display generation components, a visual effect that propagates across a spatial extent the first content and that reduces visibility of the first content over time.

84. The method of any of claims 61-82, wherein:the first interactive content includes first content other than the first platter;the second interactive element includes second content other than the second platter; the first content is displayed with a greater range of brightness as compared to other content in the first user interface that are not interactive; andthe second content is displayed with a greater range of brightness as compared to other content in the second user interface that are not interactive.

85. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter;while displaying the first user interface that includes the first interactive element represented by the first platter, detecting occurrence of a first event that meets navigation criteria;in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, displaying, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein:in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; andin accordance with a determination that the first interactive element in the first user interface does not satisfy the respective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

86. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter;while displaying the first user interface that includes the first interactive element represented by the first platter, detect occurrence of a first event that meets navigation criteria;in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, display, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein:in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element,displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; andin accordance with a determination that the first interactive element in the first user interface does not satisfy the respective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

87. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter;means for, while displaying the first user interface that includes the first interactive element represented by the first platter, detecting occurrence of a first event that meets navigation criteria;means for, in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, displaying, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein:in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; andin accordance with a determination that the first interactive element in the first user interface does not satisfy the respective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

88. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface that includes a first interactive element represented by a first platter;means for, while displaying the first user interface that includes the first interactive element represented by the first platter, detecting occurrence of a first event that meets navigation criteria;means for, in response to detecting, via the one or more input devices, the occurrence of the first event that meets the navigation criteria, displaying, via the one or more display generation components, a second user interface that includes a second interactive element different from the first interactive element, wherein the second interactive element is represented by a second platter, and wherein:in accordance with a determination that the first interactive element in the first user interface satisfies respective criteria that are based on a spatial arrangement of the first interactive element with respect to a spatial arrangement of the second interactive element, displaying the second interactive element represented by the second platter includes displaying the first platter morphing into the second platter; andin accordance with a determination that the first interactive element in the first user interface does not satisfy the respective criteria that are based on the spatial arrangement of the first interactive element with respect to the second interactive element in the second user interface, displaying the second interactive element represented by the second platter includes displaying the second platter without morphing the first platter into the second platter.

89. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 61-84.

90. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is incommunication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 61-84.

91. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 61-84.

92. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 61-84.

93. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 61-84.

94. A method, comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary;while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input; andin response to detecting the first user input, transforming the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein:the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and,transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material,displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein:the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; andthe difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

95. The method of claim 94, wherein:displaying the animated changes of the first user interface material in the first dimension and the second dimension includes displaying the first user interface material in an intermediate object that is different from the first user interface object and the second user interface object;the intermediate object has an appearance that corresponds to a first percentage change in the first dimension of the first user interface material and a second percentage change in the second dimension of the first user interface material, relative to the first user interface material in the first user interface object; andthe second percentage change in the second dimension is different from the first percentage change in the first dimension.

96. The method of claim 95, wherein:the intermediate object is smaller than the first user interface object in a first set of one or more dimensions; andthe intermediate object is smaller than the second user interface object in a second set of one or more dimensions.

97. The method of any of claims 95-96, wherein:displaying the first user interface material in the intermediate object includes, displaying the intermediate object with an edge portion that corresponds to a transition between a first edge portion of the first user interface object and a second edge portion of the second user interface object;the first edge portion of the first user interface object has a first radius of curvature; the second edge portion of the second user interface object has a second radius of curvature; andthe edge portion of the intermediate object has a third radius of curvature that is greater than the first radius of curvature and the second radius curvature.

98. The method of any of claims 95-97, wherein:the first user interface object has a first set of values for a first display property; the second user interface object has a second set of values for the first display property that are different from the first set of values for the first display property; and displaying the first user interface material in the intermediate object includes displaying the intermediate object with a set of intermediate values for the first display property that corresponds to a transition between the first set of values and the second set of values for the first display property.

99. The method of any of claims 94-98, wherein displaying the animated changes to the first user interface material in the first dimension and the second dimension includes:increasing a size of the first user interface material in the first dimension; and decreasing a size of the first user interface material in the second dimension.

100. The method of any of claims 94-99, wherein displaying the animated changes to the first user interface material includes changing an appearance of the first user interface material to simulate a first type of physical response of a material to external interaction based on a first simulated material property of the material.

101. The method of claim 100, wherein:changing the appearance of the first user interface material to simulate the first type of physical response of a material to external interaction based on the first simulated material property of the material includes concurrently displaying, via the one or more display generation components:a first change to the appearance of the first user interface material to simulate a first amount of response for the first type of physical response in the first dimension; and a second change to the appearance of the first user interface material to simulate a second amount of response for the first type of physical response in the second dimension;the second change to the appearance of the first user interface material is different from the first change to the appearance of the first user interface material; anda different between the first change to the appearance of the first user interface material and the second change to the appearance of the first user interface material,simulates a difference between the first amount of response in the first dimension and the second amount of response in the second dimension.

102. The method of any of claims 94-101, wherein detecting the first user input includes detecting a user input that is directed to a portion of the first user interface outside of the first user interface object.

103. The method of any of claims 94-101, wherein:detecting the first user input includes detecting, via the one or more input devices, a user input that is directed to a portion of the first user interface object; andthe method includes:in response to detecting the user input that is directed to the portion of the first user interface object, displaying, via the one or more display generation components, a change in appearance of the first user interface material, prior to transforming the first user interface object into the second user interface object.

104. The method of any of claims 94-103, wherein displaying the first user interface object that is visually associated with the first user interface material with the first boundary includes displaying the first user interface material with an appearance that simulates refraction of content of the first user interface object in accordance with one or more spatial properties of the first boundary.

105. The method of claim 104, wherein displaying the first user interface material with the appearance that simulates refraction of the content of the first user interface object in accordance with one or more spatial properties of the first boundary, includes, displaying the first user interface material with an appearance that simulates a lensing effect of the first user interface material that is based on a visual distortion of the content of the first user interface object.

106. The method of any of claims 104-105, wherein displaying the first user interface material with the appearance that simulates refraction of the content of the first user interface object in accordance with one or more spatial properties of the first boundary, includes, displaying the first user interface material with an appearance that is based on a blurring effect applied to the content of the first user interface object.

107. The method of any of claims 104-106, wherein:transforming the first user interface object into the second user interface object includes displaying, via the one or more display generation components, the first user interface material with a first intermediate appearance followed by displaying, via the one or more display generation components, the first user interface material with a second intermediate appearance;the first intermediate appearance has a first set of values for one or more simulated properties of the first user interface material;the second intermediate appearance has a second set of values for the one or more simulated properties of the first user interface material; andthe second set of values for the one or more simulated properties of the first user interface material is different from the first set of values for the one or more simulated properties of the first user interface material.

108. The method of any of claims 94-107, wherein displaying the first user interface object that is visually associated with the first user interface material with the first boundary includes displaying the first user interface material with an appearance that simulates:refraction of content of the first user interface object in accordance with one or more spatial properties of the first boundary; andrefraction of content that is surrounding the first user interface object, in accordance with one or more spatial properties of the first boundary.

109. The method of any of claims 94-108, wherein:transforming the first user interface object into the second user interface object includes displaying, via the one or more display generation components, a first intermediate object that is visually associated with the first user interface material followed by displaying a second intermediate object that is visually associated with the first user interface material; the first intermediate object has an appearance that indicates the first function; and the second intermediate object has an appearance that indicates the second function, different from the appearance that indicates the first function.

110. The method of any of claims 94-109, wherein:the first user interface object is of a first object type; andthe second user interface object is of a second object type different from the first object type.

111. The method of any of claims 94-110, wherein transforming the first user interface object into the second user interface object in response to detecting the first user input includes:in accordance with a determination that the first user input is a first type of input, displaying, via the one or more display generation components, a first set of animated changes of the first user interface material in accordance with the first user input; andin accordance with a determination that the first user input is a second type of input, different from the first type of input, displaying, via the one or more display generation components, a second set of animated changes of the first user interface material in accordance with the first user input, the second set of animated changes differing from the first set of animated changes.

112. The method of claim 111, wherein:displaying the first set of animated changes of the first user interface material in accordance with the first user input includes displaying a first amount of changes in the first user interface material in accordance with the first user input; anddisplaying the second set of animated changes of the first user interface material in accordance with the first user input includes displaying a second amount of changes, different from the first amount of changes, in the first user interface material in accordance with the first user input.

113. The method of any of claims 111-112, wherein:displaying the first set of animated changes of the first user interface material in accordance with the first user input includes displaying the first set of animated changes with a first degree of correspondence to a first property of the first type of input; and displaying the second set of animated changes of the first user interface material in accordance with the first user input includes displaying the second set of animated changes with a second degree of correspondence to the first property of the second type of input, different from the first degree of correspondence.

114. The method of any of claims 94-113, wherein:the first user interface includes a navigation control that is visually associated with the first user interface material, and two or more section headers;the navigation control corresponds to a navigation operation from first content included the first user interface to second content different from the first content;the first content includes two or more sections corresponding to the two or more section headers;detecting, via the one or more input devices, the first user input includes detecting a user input that corresponds to a request to scroll the first content; andthe method includes:in response to detecting the user input that corresponds to the request to scroll the first content:in accordance with a determination that a first section header of the two or more section headers is outside a threshold distance of the navigation control, moving the first section header relative to the navigation control; andin accordance with a determination that the first section header of the two or more section headers has been moved to a location within the threshold distance of the navigation control, changing a boundary of the first user interface material of the navigation control to include the first section header.

115. The method of claim 114, wherein:the first user interface object corresponds to the navigation control without corresponding to the first section header;the second user interface object corresponds to the first user interface material encompassing the navigation control and the first section header; andthe method includes:in response to detecting the user input that corresponds to the request to scroll the first content:in accordance with a determination that the first section header is combined with the navigation control into the second user interface object that is visually associated with the first user interface material, displaying, via the one or more display generation components, an animated optical distortion effect of the first content in a portion of the first user interface material corresponding to the first section header, as the first content is scrolled past the portion of the first user interface material corresponding to the first section header.

116. The method of any of claims 94-115, wherein:detecting the first user input includes detecting an increase in a value for a first characteristic of the first user input;displaying the animated changes to the first user interface material in the first dimension and the second dimension includes:in accordance with a determination that the increase in the value for the first characteristic of the first user input is below a first threshold value, and that the value for the first characteristic of the first user input is a first value, changing an appearance of the first user interface object based on content near the first user interface object without changing properties of the first user interface material;in accordance with a determination that the increase in the value for the first characteristic of the first user input is below the first threshold value, and that the value for the first characteristic of the first user input is a second value different from the first value, changing the appearance of the first user interface object based on content near the first user interface object without changing properties of the first user interface material; andin accordance with a determination that the increase in the value for the first characteristic of the first user input is at or above the first threshold value, changing the appearance of the first user interface object based on content near the first user interface object and based on one or more changes to the first user interface material that transform the first user interface material into the second user interface object.

117. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary;while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input; andin response to detecting the first user input, transforming the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein:the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and,transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material, displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein:the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; andthe difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

118. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary;while displaying the first user interface including the first user interface object, detect, via the one or more input devices, a first user input; andin response to detecting the first user input, transform the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein:the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and,transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material, displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein:the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; andthe difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

119. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary;means for, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input; andmeans for, in response to detecting the first user input, transforming the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein:the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and,transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material, displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein:the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; andthe difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

120. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a first user interface object that corresponds to a first function of the computer system, wherein the first user interface object is visually associated with a first user interface material with a first boundary;means for, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input; andmeans for, in response to detecting the first user input, transforming the first user interface object into a second user interface object that is visually associated with the first user interface material with a second boundary that is different from the first boundary, wherein:the second user interface object corresponds to a second function of the computer system that is different from the first function of the computer system, and,transforming the first user interface object into the second user interface object includes, while maintaining display of the first user interface material, displaying animated changes of the first user interface material in a first dimension and a second dimension, wherein:the animated changes of the first user interface material include a first rate of change in the first dimension that is different from a second rate of change in the second dimension; andthe difference between the first rate of change and the second rate of change causes a ratio between the first dimension and the second dimension to change over time as the animation progresses.

121. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 94-116.

122. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 94-116.

123. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 94-116.

124. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 94-116.

125. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 94-116.

126. A method, comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region;while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object; andin response to detecting the first user input:in accordance with a determination that the first user input included movement in a first input direction, stretching the first region in a first stretching direction and compressing the first region in a first compression direction, where the first compression direction is different from the first stretching direction; andin accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretching the first region in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

127. The method of claim 126, wherein detecting the first user input directed toward the first user interface object includes detecting a drag input that includes movement in a respective direction while the first user interface object is selected as a target of the drag input.

128. The method of claim 127, wherein:detecting the drag input includes detecting, via the one or more input devices, a start of the drag input while a start location of the drag input corresponds to a first portion of the first user interface object; andthe method includes, in response to detecting the drag input, moving the first portion of the first user interface object in accordance with the movement of the drag input, to maintain a spatial arrangement between a current location of the drag input and the first portion of the first user interface object.

129. The method of any of claims 126-128, wherein:the first user interface object includes first content; anddetecting the first user input directed toward the first user interface object includes detecting a user input that corresponds to a request to move the first content within the first user interface object.

130. The method of any of claims 126-128, wherein:the first user interface object includes a plurality of selectable portions and an indication of selected state for a currently selected portion of the plurality of selectable options; anddetecting the first user input directed toward the first user interface object includes detecting a user input that corresponds to a request to moving the indication of selected state from a first selectable portion to a second selectable portion of the first user interface object.

131. The method of any of claims 126-128, wherein:the first user interface object includes a selection object; anddetecting the first user input directed toward the first user interface object includes detecting a user input that corresponds to a request to move a first portion of the first user interface object relative to a second portion of the first user interface object.

132. The method of any of claims 126-131, wherein:the first stretching direction corresponds to a first axis of the first user interface object;the first compression direction corresponds to a second axis of the first user interface object, that is substantially perpendicular to the first axis of the first user interface object; stretching the first region of the first user interface object in the first stretching direction includes moving a first end of the first user interface object relative to a second end of the first user interface object along the first axis of the first user interface object; and compressing the first region of the first user interface object in the first compression direction includes moving a third end of the first user interface object relative to a fourth end of the first user interface object along the second axis of the first user interface object.

133. The method of any of claims 126-132, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that the movement of the first user input in the first input direction has a first movement distance, stretching the first region by a first amount of stretching in the first stretching direction; andin accordance with a determination that the movement of the first user input in the first input direction has a second movement distance, different from the first movement distance, stretching the first region by a second amount of stretching in the first stretching direction, different from the first amount of stretching in the first stretching direction.

134. The method of claim 133, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that a first portion of the movement of the first user input in the first input direction includes a third movement distance within the first region, stretching the first region by a third amount of stretching in the first stretching direction; andin accordance with a determination that a second portion of the movement of the first user input in the first input direction includes the third movement distance outside of the first region, stretching the first region by a fourth amount of stretching in the first stretching direction, different from the third amount of stretching in the first stretching direction.

135. The method of any of claims 126-134, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that a characteristic movement corresponding to an interaction between the first user input and the first user interface object has a first movement speed in a respective movement direction, stretching the first region by a first speed-dependent amount of stretching in a stretching direction corresponding to the respective movement direction; andin accordance with a determination that the characteristic movement corresponding to the interaction between the first user input and the first user interface object has a second movement speed, different from the first movement speed, in the respective movement direction, stretching the first region by a second speed-dependent amount of stretching, different from the first speed-dependent amount of stretching in the stretching direction corresponding to the respective movement direction.

136. The method of any of claims 135, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that the movement of the first user input in the first input direction has a first movement speed, stretching the first region by a first amount of stretching in the first stretching direction; andin accordance with a determination that the movement of the first user input in the first input direction has a second movement speed, different from the first movement speed, stretching the first region by a second amount of stretching in the first stretching direction, different from the first amount of stretching in the first stretching direction.

137. The method of any of claims 126-136, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that a characteristic movement corresponding to an interaction between the first user input and the first user interface object has a first rate of change in movement speed in a respective movement direction, stretching the first region by a first acceleration-dependent amount of stretching in a stretching direction corresponding to the respective movement direction; andin accordance with a determination that the characteristic movement corresponding to the interaction between the first user input and the first user interface object has a second rate of change in movement speed, different from the first rate of change in movement speed, in a respective movement direction, stretching the first region by a second acceleration-dependent amount of stretching, different from the first acceleration-dependent amount of stretching, in the stretching direction corresponding to the respective movement direction.

138. The method of any of claim 137, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that the movement of the first user input in the first input direction has a first rate of change in movement speed, stretching the first region by a first amount of stretching in the first stretching direction; andin accordance with a determination that the movement of the first user input in the first input direction has a second rate of change in movement speed, different from the first rate of change in movement speed, stretching the first region by a second amount of stretching in the first stretching direction, different from the first amount of stretching in the first stretching direction.

139. The method of any of claims 133-137, including:after stretching the first region in a respective stretching direction and compressing the first region in a respective compression direction by respective amounts based on a first characteristic value of a characteristic movement in an interaction between the first user input and the first user interface object, detecting, via the one or more input devices, that the first characteristic value of the characteristic movement has reduced below a threshold level; and in response to detecting that the first characteristic value of the characteristic movement has reached below the threshold level, maintaining a current shape of the first user interface object.

140. The method of claim 139, including:after stretching the first region in a respective stretching direction and compressing the first region in a respective compression direction by respective amounts based on a first characteristic value of a movement in a respective input direction of the first user input, detecting, via the one or more input devices, that the first characteristic value of the movement in the respective input direction of the first user input has reduced below a threshold level; andin response to detecting that the first characteristic value of the movement in the respective input direction of the first user input has reached below the threshold level, maintaining a current shape of the first user interface object.

141. The method of any of claims 133-140, wherein stretching the first region of the first user interface object in the first stretching direction includes:in accordance with a determination that a characteristic movement parameter corresponding to an interaction between the first user input and the first user interface object has a first characteristic value, where the first characteristic value is based on one or more movement characteristics of the first user input and one or more movement characteristics of the first user interface object, stretching the first region by a first set of stretching amounts in a first set of stretching directions corresponding to the first characteristic value; andin accordance with a determination that the characteristic movement parameter corresponding to the interaction between the first user input and the first user interface object has a second characteristic value, different from the first characteristic value, where the second characteristic value is based on one or more movement characteristics of the first user input and one or more movement characteristics of the first user interface object, stretching the first region by a second set of stretching amounts in a second set of stretching directions corresponding to the second characteristic value, the second set of stretching amounts is different from the first set of stretching amounts, and / or the second set of stretching directions is different from the first set of stretching directions.

142. The method of any of claims 126-142, including:in response to detecting the first user input, in accordance with a determination that the first user input included movement in a respective input direction:in accordance with a determination that the first user interface object has moved less than a threshold amount of movement in a respective movement direction that corresponds to the respective input direction as a result of the first user input, continuing to move the first user interface object in the respective movement direction in accordance with the movement in the respective input direction; andin accordance with a determination that the first user interface object has moved at least the threshold amount of movement in the respective movement direction that corresponds to the respective input direction as a result of the first user input, ceasing to move the first user interface object in the respective movement direction in accordance with the movement in the respective input direction.

143. The method of claim 142, including:after the first user interface object has moved in the respective movement direction as a result of the first user input, detecting, via the one or more input devices, a termination of the first user input; andin response to detecting the termination of the first user input, reversing at least a portion of a total amount of movement of the first user interface object in the respective movement direction.

144. The method of claim 143, including:in response to detecting the first user input and prior to detecting the termination of the first user input, in accordance with a determination that the first user input included movement in a respective input direction of the first user input, stretching the first region in a respective stretching direction and compressing the first region in a respective compression direction, where the respective compression direction is different from the respective stretch direction; andin response to detecting the termination of the first user input, reversing at least a portion of the stretching of the first region in the respective stretching direction and reversing at least a portion of the compression of the first region in the respective compression direction.

145. The method of any of claims 126-144, wherein:the first user interface object has a first area prior to detecting the first user input; the first user interface object has a second area while the first region is stretched in the first direction and compressed in the first compression direction;the first user interface object has a third area while the first region is stretched in the second direction and compressed in the second compression direction; andthe first area, the second area, and the third area differ by less than a threshold amount of area.

146. The method of any of claims 126-145, including:while continuing to detect the first user input, detecting, via the one or more input devices, that an input direction of the first user input has changed from the first input direction to a third input direction; andin response to detecting that the input direction of the first user input has changed from the first input direction to the third input direction, in accordance with a determination that a difference between the third input direction and the first input direction meets first criteria:changing from stretching the first region in the first stretching direction to stretching in a third stretching direction corresponding to the third input direction; andchanging from compressing the first region in the first compression direction to compressing in a third compression direction that is different from the third stretching direction.

147. The method of any of claims 126-146, wherein:the first user interface object that is visually associated with a first user interface material; andthe first user interface material of the first user interface object has an appearance that simulates optical interaction between the first user interface material and content within and / or surrounding the first user interface material.

148. The method of claim 147, including:in response to detecting the first user input, changing the appearance of the first user interface material based on stretching and compression of the first region of the first user interface object that resulted from the first user input, to simulate changes in the optical interaction between the first user interface material and the content within and / or surrounding the first user interface material.

149. The method of claim 126-148, wherein:stretching the first region of the first user interface object in the first stretching direction includes:moving a first edge of the first region in the first stretching direction by a first amount of edge movement; andmoving a second edge of the first region in the first stretching direction by a second amount of edge movement, smaller than the first amount of edge movement;a difference between the first amount of edge movement by the first edge of the first region and the second amount of edge movement by the second edge of the first region corresponds to the first amount of stretching in the first stretching direction.

150. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region;while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object; andin response to detecting the first user input:in accordance with a determination that the first user input included movement in a first input direction, stretching the first region in a first stretching direction and compressing the first region in a first compression direction, where the first compression direction is different from the first stretching direction; andin accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretching the first region in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

151. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region;while displaying the first user interface including the first user interface object, detect, via the one or more input devices, a first user input directed toward the first user interface object; andin response to detecting the first user input:in accordance with a determination that the first user input included movement in a first input direction, stretch the first region in a first stretching direction and compressing the first region in a first compression direction, where the first compression direction is different from the first stretching direction; andin accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretch the firstregion in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

152. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region;means for, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object; andmeans for, in response to detecting the first user input:in accordance with a determination that the first user input included movement in a first input direction, stretching the first region in a first stretching direction and compressing the first region in a first compression direction, where the first compression direction is different from the first stretching direction; andin accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretching the first region in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

153. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a first user interface object, wherein the first user interface object includes a first region;means for, while displaying the first user interface including the first user interface object, detecting, via the one or more input devices, a first user input directed toward the first user interface object; andmeans for, in response to detecting the first user input:in accordance with a determination that the first user input included movement in a first input direction, stretching the first region in a first stretching direction andcompressing the first region in a first compression direction, where the first compression direction is different from the first stretching direction; andin accordance with a determination that the first user input included movement in a second input direction that is different from the first input direction, stretching the first region in a second stretching direction that is different from the first stretching direction and compressing the first region in a second compression direction, where the second compression direction is different from the second stretching direction.

154. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 126-149.

155. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 126-148.

156. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 126-148.

157. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 126-148.

158. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 126-148.

159. A method, comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface;while displaying, via the one or more display generation components, the first user interface, detecting occurrence of a first event; andin response to detecting the occurrence of the first event, displaying, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein:the first user interface object has a first edge;the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; andthe respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

160. The method of claim 159, including:while displaying, via the one or more display generation components, the first user interface, including the first user interface object, detecting occurrence of a second event different from the first event; andin response to detecting the occurrence of the second event, displaying, via the one or more display generation components, a respective animated transition corresponding to disappearance of the first user interface object from the first user interface, wherein the respective animated transition corresponding to the disappearance of the first user interface object includes gradually decreasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the disappearance of the first user interface object progresses.

161. The method of any of claims 159-160, wherein:the first edge of the first user interface object has a simulated thickness in a depth direction of the first user interface;the respective animated transition corresponding to the appearance of the first user interface object includes gradually changing the simulated thickness of the first edge thatresults in a gradual change in a simulated curvature of the first edge in the depth direction of the first user interface; andthe gradual change in the simulated curvature of the first edge is represented by a gradual change in the simulated refraction of the respective content in the first user interface.

162. The method of any of claims 159-161, wherein:the first user interface object concurrently includes a first portion of the first user interface object that corresponds to the first edge, and a second portion of the first user interface object that is different from the first portion of the first user interface object;the second portion of the first user interface object has an appearance based on simulated refraction of respective content in the first user interface that is within a threshold range of the second portion of the first user interface object;the respective animated transition corresponding to the appearance of the first user interface object includes gradually changing a visual intensity of the simulated refraction for the second portion of the first user interface object over time as the respective animated transition corresponding to the appearance of the first user interface object progresses; and a rate of change for the visual intensity of the simulated refraction for the second portion of the first user interface object differs from a rate of change for the visual intensity of the simulated refraction for the first edge.

163. The method of any of claims 159-162, wherein:prior to detecting the occurrence of the first event, the first user interface includes a second user interface object that is different from the first user interface object;displaying the respective animated transition corresponding to the appearance of the first user interface object includes replacing the second user interface object with the first user interface object, including:gradually changing a first simulated property of one or more portions of a user interface material of the second user interface object while maintaining display of the user interface material of the second user interface object; andgradually changing a first simulated property of one or more portions of a user interface material of the first user interface object while maintaining display of the user interface material of the second user interface object.

164. The method of any of claims 159-163, wherein:the occurrence of the first event corresponds to a condition for changing a first numeral in the indication of current time to a second numeral in the indication of current time being met;the first user interface object corresponds to the second numeral in the indication of current time; anddisplaying the respective animated transition corresponding to the appearance of the first user interface object includes:gradually changing one or more respective simulated thicknesses of one or more corresponding portions of a user interface material of the first numeral while maintaining display of the user interface material of the first numeral; andgradually changing one or more respective simulated thicknesses of one or more corresponding portions of a user interface material of the second numeral while maintaining display of the user interface material of the first numeral.

165. The method of any of claims 159-163, wherein:the occurrence of the first event corresponds to a condition for displaying a first control in the first user interface being met; anddisplaying the respective animated transition corresponding to appearance of the first user interface object includes gradually changing respective simulated thicknesses of one or more portions of the first control, that includes gradually changing one or more respective intensities of simulated refractions for the one or more corresponding portions of the first control.

166. The method of claim 165, wherein:displaying the respective animated transition corresponding to appearance of the first user interface object includes:in accordance with a determination that the first control replaces another user interface object at a location of the first control, gradually changing one or more respective simulated thicknesses of one or more corresponding portions of the first control; andin accordance with a determination that the first control does not replace another user interface object at the location of the first control, forgoing gradually changing the one or more respective simulated thicknesses of one or more corresponding portions of the first control.

167. The method of any of claims 159-166, wherein:the occurrence of the first event corresponds to detecting, via the one or more input devices, a user input directed to the first user interface; anddisplaying the respective animated transition corresponding to appearance of the first user interface object includes gradually changing one or more respective simulated thicknesses of one or more corresponding portions of the first user interface object, that includes gradually changing one or more respective intensities of the one or more simulated refractions for the one or more corresponding portions of the first user interface object.

168. The method of claim 167, wherein:the first user interface object corresponds to a portion of a second user interface object;the second user interface object was displayed in the first user interface when the occurrence of the first event was detected;detecting the user input directed to the first user interface includes detecting the user input directed to the second user interface object; anddisplaying the respective animated transition corresponding to appearance of the first user interface object includes gradually changing one or more respective simulated thicknesses of one or more corresponding portions of the second user interface object, that transform into the first user interface object.

169. The method of claim 167, wherein:the first user interface includes a plurality of user interface objects that are responsive to user interaction;the first user interface object corresponds to an indication that user interaction with a respective set of one or more user interface objects of the plurality of user interface objects is ongoing;detecting the user input directed to the first user interface includes detecting the user input directed to the respective set of one or more user interface objects of the plurality of user interface objects; andwhile the user input directed to the respective set of one or more user interface objects is ongoing, displaying the respective animated transition corresponding to appearance of the first user interface object includes:displaying the first user interface object at a location corresponding to the respective set of one or more user interface objects; andgradually changing respective simulated thicknesses of one or more portions of the first user interface object.

170. The method of claim 169, including:while the user input directed to the respective user interface object is ongoing, displaying, within the first user interface object, an indication of a currently selected state of the respective set of one or more user interface objects while gradually changing the respective simulated thicknesses of the one or more portions of the first user interface object.

171. The method of claim 167, wherein:prior to detecting the user input directed to the first user interface, the first user interface concurrently includes:content of a first content page from a plurality of content pages, a plurality of different tabs that correspond to different content pages of a plurality of content pages; anda second user interface object is displayed at a location of a first tab, the first tab corresponding to the first content page that is currently displayed in the first user interface;detecting the user input directed to the first user interface includes, detecting the user input that is directed toward a second tab and that corresponds to a request to display a second content page of the plurality of content pages in the first user interface; and displaying the respective animated transition corresponding to appearance of the first user interface object includes:displaying the first user interface object at a location of the second tab; and gradually changing respective simulated thicknesses of one or more portions of the first user interface object.

172. The method of claim 167, wherein:prior to detecting the user input directed to the first user interface, the first user interface concurrently includes:content of a first content page from a plurality of content pages; and a first navigation control that, when selected by a user input, causes navigation from the first content page to a previously displayed content page of the plurality of content pages; anddetecting the user input directed to the first user interface includes, detecting the user input that corresponds to a request to navigate from the first content page to the previously displayed content page; anddisplaying the respective animated transition corresponding to appearance of the first user interface object includes gradually changing respective simulated thicknesses of one or more portions of the first user interface object at the location of the first navigation control173. The method of claim 172, including:in response to detecting the user input that corresponds to a request to navigate from the first content page to the previously displayed content page:in accordance with a determination that the user input that corresponds to a request to navigate from the first content page to the previously displayed content page includes a first movement input and a termination of the first movement input:ceasing to display the first content page;displaying the previously displayed content page;displaying a first gradual change in the respective simulated thicknesses of one or more portions of the first user interface object at the location of the first navigation control during the first movement input; andcompleting the respective animated transition corresponding to appearance of the first user interface object in response to detecting the termination of the first movement input.

174. The method of claim 173, including:in response to detecting the user input that corresponds to a request to navigate from the first content page to the previously displayed content page:in accordance with a determination that the user input that corresponds to a request to navigate from the first content page to the previously displayed content page includes a first discrete input that includes less than a threshold amount of movement in a unit of time and terminates within a threshold amount of time from a start of the first discrete input:ceasing to display the first content page;displaying the previously displayed content page;displaying a second gradual change in the respective simulated thicknesses of one or more portions of the first user interface object at the location of the firstnavigation control, wherein the second gradual change is different from the first gradual change.

175. The method of any of claims 159-163, wherein:the first user interface includes textual content;detecting the occurrence of the first event includes detecting, via the one or more input devices, a user input that is directed to a first portion of the textual content and that corresponds to a request to interact with the textual content; anddisplaying the respective animated transition corresponding to appearance of the first user interface object includes gradually changing respective simulated thicknesses of one or more portions of the first user interface object.

176. The method of claim 172, wherein:detecting the user input that is directed to the first portion of the textual content and that corresponds to the request to interact with the textual content, includes a user input that corresponds to a request to move a cursor relative to the textual content.

177. The method of any of claims 172-176, wherein:detecting the user input that is directed to the first portion of the textual content and that corresponds to a request to interact with the textual content includes a user input that corresponds to a request to select the first portion of the textual content.

178. The method of any of claims 172-177, wherein displaying the respective animated transition corresponding to appearance of the first user interface object includes displaying the first user interface object with an appearance that simulates refraction of at least a subset of the textual content.

179. The method of any of claims 172-178, wherein:displaying the first user interface object with the appearance that simulates refraction of at least the subset of the textual content includes displaying the first user interface object at a location that is different from a location of the first portion of the textual content; and displaying the first user interface object with an appearance that simulates refraction of at least a subset of the first portion of the textual content.

180. The method of any of claims 172-179, wherein gradually changing respective simulated thicknesses of one or more portions of the first user interface object includesdisplaying the first user interface object with an appearance that simulates optical interaction between a user interface material of the first user interface object and at least the subset of the textual content.

181. The method of any of claims 172-180, wherein the first user interface object corresponds to a text selection object displayed at a location of the first portion of the textual content.

182. The method of any of claims 159-181, wherein displaying the respective animated transition that corresponds to appearance of the first user interface object includes:gradually changing simulated thicknesses of one or more portions of the first user interface object, andgradually changing a visual appearance of the first user interface object that simulates refraction of content in the first user interface according to the changes in simulated thicknesses of the one or more portions of the first user interface object.

183. The method of any of claims 159-182, wherein displaying the respective animated transition that corresponds to appearance of the first user interface object includes:gradually changing simulated thicknesses of one or more portions of the first user interface object, andgradually changing a visual appearance of the first user interface object by applying an amount of blur to content in the first user interface according to the changes in one or more simulated thicknesses of the one or more corresponding portions of the first user interface object.

184. The method of any of claims 159-183, wherein displaying the respective animated transition that corresponds to appearance of the first user interface object includes:gradually changing one or more simulated thicknesses of one or more corresponding portions of the first user interface object, andgradually changing a visual appearance of the first user interface object by changing a position and / or appearance of one or more simulated specular highlights according to the changes in simulated thicknesses of the one or more portions of the first user interface object.

185. The method of any of claims 159-184, wherein displaying the respective animated transition that corresponds to appearance of the first user interface object includes:displaying a simulated shadow overlaying a portion of the first user interface that is outside of the first user interface object, anddisplaying at least a portion of the first user interface object with a visual appearance that simulates refraction of content in the portion of the first user interface that is overlaid by the simulated shadow, and that simulates refraction of content that is overlaid by the first user interface object.

186. The method of any of claims 159-185, wherein displaying the respective animated transition that corresponds to appearance of the first user interface object includes:gradually increasing one or more simulated thicknesses of one or more corresponding portions of the first user interface object in a depth direction of the first user interface; and reversing at least a portion of the increases in the one or more simulated thicknesses of the one or more corresponding portions of the first user interface object before displaying a steady state appearance of the first user interface object.

187. The method of any of claims 159-186, including:while displaying the first user interface object in the first user interface, including displaying the first user interface object with an appearance that simulates refraction of content in the first user interface, detecting, via the one or more input devices, a user input that interacts with the first user interface object; andin response to detecting the user input that interacts with the first user interface object, changing a size of the first user interface object in a first direction and in a second direction different from the first direction, including:in accordance with a determination that the user input that interacts with the first user interface object has a first set of spatial characteristics, stretching a first portion of the first user interface object in a first stretching direction and compressing the first portion of the first user interface object in a first compression direction different from the first stretching direction; and in accordance with a determination that the user input that interacts with the first user interface object has a second set of spatial characteristics, different from the first set of spatial characteristics:stretching the first portion of the first user interface object in a second stretching direction, different from the first stretching direction; andcompressing the first portion of the first user interface object in a second compression direction, different from the first compression direction and different from the second stretching direction.

188. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface;while displaying, via the one or more display generation components, the first user interface, detecting occurrence of a first event; andin response to detecting the occurrence of the first event, displaying, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein:the first user interface object has a first edge;the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; andthe respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

189. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface; while displaying, via the one or more display generation components, the first user interface, detect occurrence of a first event; andin response to detecting the occurrence of the first event, display, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein:the first user interface object has a first edge;the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; and the respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

190. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface;means for, while displaying, via the one or more display generation components, the first user interface, detecting occurrence of a first event; andmeans for, in response to detecting the occurrence of the first event, displaying, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein:the first user interface object has a first edge;the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; and the respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

191. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface;means for, while displaying, via the one or more display generation components, the first user interface, detecting occurrence of a first event; andmeans for, in response to detecting the occurrence of the first event, displaying, via the one or more display generation components, a respective animated transition corresponding to appearance of a first user interface object in the first user interface, wherein:the first user interface object has a first edge;the first edge has an appearance based on a simulated refraction of respective content in the first user interface that is within a threshold distance of the first edge; and the respective animated transition corresponding to the appearance of the first user interface object includes gradually increasing a visual intensity of the simulated refraction for the first edge over time as the respective animated transition corresponding to the appearance of the first user interface object progresses.

192. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 159-187.

193. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 159-187.

194. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 159-187.

195. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 159-187.

196. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 159-187.

197. A method, comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication of current time has an appearance that is based on an appearance of the first region of the first background;while displaying the first user interface, detecting a respective event; and in response to detecting the respective event, updating the indication of current time, including:gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time; andgradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time value different from the first time value, including in a first portion of the first region previously occupied by the first portion of the representation of the first time value, wherein:the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the first portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

198. The method of claim 197, wherein:the indication of current time is visually associated with a first user interface material that has a first boundary when the indication of current time includes the representation of the first time value;the indication of current time is visually associated with the first user interface material that has a second boundary different from the first boundary, when the indication of current time includes the representation of the second time value;the representation of the first time value has an appearance that is based on the appearance of the first region of the first background and that simulates optical interactions between the first user interface material and content of the first region of the first background; andthe representation of the second time value has an appearance that is based on the appearance of the first region of the first background and that simulates optical interactionsbetween the first user interface material and the content of the first region of the first background.

199. The method of claim 198, including:while displaying the indication of current time overlaying the first region of the first background, detecting one or more changes in the appearance of the first region of the first background; andin response to detecting the one or more changes in the appearance of the first region of the first background:in accordance with a determination that the indication of current time includes the representation of the first time value, and the first region of the first background has a first background appearance after the one or more changes in the appearance of the first region of the first background, updating the appearance of the indication of the current time to a first indication appearance based on the first background appearance; andin accordance with a determination that the indication of current time includes the representation of the first time value, and the first region of the first background has a second background appearance, different from the first background appearance, after the one or more changes in the appearance of the first region of the first background, updating the appearance of the indication of the current time to a second indication appearance based on the second background appearance, where the second indication appearance is different from the first indication appearance.

200. The method of any of claims 197-199, wherein:the indication of current time includes a first user interface material with a respective boundary that corresponds to a respective time value currently represented by the indication of current time;the appearance of the first portion of the representation of the first time value is based on a simulated optical property of the first user interface material with the first boundary; and gradually removing, from the first region, the first portion of the representation of the first time value includes:changing an appearance of the first boundary of the first user interface material; andchanging a simulated optical interaction of the first user interface material in accordance with changes in the appearance of the first boundary of the first user interface material.

201. The method of claim 200, wherein:changing the first boundary of the first user interface material includes:in accordance with a determination that a first portion of the first boundary has a first spatial relationship to the indication of current time, changing the first portion of the first boundary in a first manner; andin accordance with a determination that a second portion, different from the first portion, of the first boundary has a second spatial relationship, different from the first spatial relationship to the indication of current time, changing the second portion of the first boundary in a second manner different from the first manner; andchanging the simulated optical interaction of the first user interface material in accordance with the changes in the first boundary of the first user interface material includes changing the simulated optical interaction of the first user interface material by a first amount of change for the first portion of the first boundary and by a second amount of change for the second portion of the first boundary.

202. The method of any of claims 200-201, wherein changing the first boundary of the first user interface material includes changing a simulated thickness of the first user interface material in a depth direction of the first user interface.

203. The method of any of claims 200-202, wherein:the representation of the first time value has an appearance that is based on a blurred appearance of the first region of the first background; andchanging the simulated optical interaction of the first user interface material in accordance with changes in the first boundary of the first user interface material includes changing an amount of blur used in the blurred appearance of the first portion of the first background from a first amount of blur to a second amount of blur that is different from the first amount of blur.

204. The method of any of claims 200-203, wherein:the representation of the first time value has an appearance that includes one or more simulated specular highlights; andchanging the simulated optical interaction of the first user interface material in accordance with changes in the first boundary of the first user interface material includes changing one or more visual properties of the one or more simulated specular highlight in accordance with the changes in the first boundary of the first user interface material.

205. The method of any of claims 197-204, wherein:the first portion of the representation of the first time value corresponds to a first numeral in the representation of the first time value;the first numeral extends in a first direction relative to the indication of current time; andgradually removing, from the first region, the first portion of the representation of the first time value includes, in accordance with a determination that a first portion of the first numeral precedes a second portion of the first numeral in the first direction, removing the first portion of the first numeral before removing the second portion of the first numeral.

206. The method of claim 205, wherein the first direction relative to the indication of current time includes a direction along a stroke path of the first numeral.

207. The method of claim 205, wherein the first direction relative to the indication of current time includes a direction that has a first spatial relationship to a first frame of reference first user interface.

208. The method of any of claims 205-207, wherein:in accordance with a determination that the first numeral is a first type of numeral in the indication of current time, the first direction relative to the indication of current time is chosen based on first criteria; andin accordance with a determination that the first numeral is a second type of numeral, different from the first type of numeral, in the indication of current time, the first direction relative to the indication of current time is chosen based on second criteria, different from the first criteria.

209. The method of any of claims 205-207, wherein:in accordance with a determination that a time value represented by the indication of current time increases over time, the first direction relative to the indication of current time is chosen based on third criteria; andin accordance with a determination that the time value represented by the indication of current time decreases over time, the first direction relative to the indication of current time is chosen based on fourth criteria, different from the third criteria.

210. The method of any of claims 197-209, wherein updating the indication of current time includes:in accordance with a determination that a difference between the first time value and the second time value includes a single numeral change, gradually removing the first portion of the representation of the first time value includes gradually removing a first numeral of the first time value that is not part of the second time value; andin accordance with a determination that a difference between the first time value and the second time value includes two or more numeral changes, gradually removing the first portion of the representation of the first time value includes removing two or more numerals of the first time value that are not part of the second time value.

211. The method of claim 210, wherein removing the two or more numerals of the first time value that are not part of the second time value includes:starting gradual removal of a first numeral of the two or more numerals of the first time value that are not part of the second time value before starting gradual removal of a second numeral of the two or more numerals of the first time value that are not part of the second time value.

212. The method of any of claims 197-211, wherein:the indication of current time includes a first time separator;the first time separator is located between a first set of one or more numerals in the indication of current time and a second set of one or more numerals in the indication of current time;updating the indication of current time includes:in accordance with a determination that a change from the first time value to the second time value includes a first type of time transition, maintaining display of the first time separator when gradually removing the first portion of the representation of the first time value and gradually displaying the first portion of the representation of the second time value; andin accordance with a determination that the change from the first time value to the second time value includes a second type of time transition, different from the first type of time transition:ceasing to display the first time separator while updating the indication of current time is in progress; anddisplaying, via the one or more display generation components, the first time separator before updating the indication of current time is completed.

213. The method of any of claims 197-212, wherein:the indication of current time includes a first time separator that is located between a first type of numerals and a second type of numerals in the indication of current time; and updating the indication of current time includes:in accordance with a determination that a change from the first time value to the second time value includes a change in the first type of numeral and a change in the second type of numeral:ceasing to display the first time separator while gradually removing one or more numerals of the first type of numerals; anddisplaying, via the one or more display generation components, the first time separator while gradually displaying one or more numerals of the second type of numerals.

214. The method of any of any of claims 197-211, wherein:the indication of current time includes a first time separator that is located between a first type of numerals and a second type of numerals in the indication of current time; and updating the indication of current time includes maintaining display of the first time separator while gradually removing one or more numerals and gradually displaying one or more numerals of the indication of current time.

215. The method of any of claims 197-214, including:while displaying the first user interface, including the indication of current time overlaying the first region of the first background, detecting, via the one or more input devices, a user input that is directed toward the indication of current time; andin response to detecting the user input that is directed toward the indication of current time:in accordance with a determination that the user input is directed to a first numeral in the indication of current time, changing an appearance of the first numeral in the indication of current time; andin accordance with a determination that the user input is directed to a second numeral, different from the first numeral, in the indication of current time, changing an appearance of the second numeral in the indication of current time.

216. The method of claim 215, including:in response to detecting the user input that is directed toward the indication of current time:in accordance with the determination that the user input is directed to the first numeral in the indication of current time, changing the appearance of the first numeral in the indication of current time by a greater amount than changing the appearance of the second numeral in the indication of current time; andin accordance with a determination that the user input is directed to the second numeral in the indication of current time, changing the appearance of the first numeral in the indication of current time by a less amount than changing the appearance of the second numeral in the indication of current time.

217. The method of any of claims 215-216, wherein:changing the appearance of the first numeral in the indication of current time includes changing a simulated thickness of the first numeral; andchanging the appearance of the second numeral in the indication of current time includes changing a simulated thickness of the second numeral.

218. The method of any of claims 215-217, including:in response to detecting the user input that is directed toward the indication of current time:in accordance with the determination that the user input is directed to the first numeral in the indication of current time, changing the appearance of the first numeral in the indication of current time without changing the appearance of the second numeral in the indication of current time; andin accordance with a determination that the user input is directed to the second numeral in the indication of current time, changing the appearance of the second numeral in the indication of current time without changing the appearance of the first numeral in the indication of current time.

219. The method of any of claims 215-218, including:detecting, via the one or more input devices, a termination of the user input that is directed toward the indication of current time; andin response to detecting the termination of the user input that is directed toward the indication of current time:in accordance with a determination that the user input was directed to the first numeral in the indication of current time and caused first changes to the appearance of the first numeral, reversing at least a portion of the first changes to the appearance of the first numeral; andin accordance with a determination that the user input was directed to the second numeral in the indication of current time and caused second changes to the appearance of the second numeral, reversing at least a portion of the second changes to the appearance of the second numeral.

220. The method of any of claims 215-219, including:in response to detecting the user input that is directed toward the indication of current time and while the user input that is directed toward the indication of current time is maintained:in accordance with a determination that the user input was directed to the first numeral in the indication of current time and caused first changes to the appearance of the first numeral, maintaining at least the first changes to the appearance of the first numeral; and in accordance with a determination that the user input was directed to the second numeral in the indication of current time and caused second changes to the appearance of the second numeral, maintaining at least the second changes to the appearance of the first numeral.

221. The method of any of claims 197-220, wherein:the first user interface includes a first foreground element that overlays at least a portion of the indication of current time, while the indication of current time overlays at least a portion of a first background element; andupdating the indication of current time includes:gradually removing the first portion of the representation of the first time value, while a portion of the indication of current time is overlaid by the first foreground element; and / orgradually displaying the first portion of the representation of the second time value, while a portion of the indication of current time is overlaid by the first foreground element.

222. The method of any of claims 197-221, wherein:displaying the first user interface, including displaying the indication of current time overlaying the first region of the first background, includes:displaying the first user interface with a first layout; anddisplaying the indication of current time with a first orientation relative to the first user interface with the first layout; andthe method includes:while displaying the first user interface with the first layout, detecting an event that corresponds to a request to change a layout of the first user interface from the first layout to a second layout different from the first layout; andin response to detecting the event that corresponds to a request to change the layout of the first user interface from the first layout to the second layout, changing the layout of the first user interface from the first layout to the second layout, including:changing a shape of the indication of current time from a first shape to a second shape different from the first shape; andin accordance with a determination that the changing the layout of the first user interface includes a rotation of the first user interface relative to a housing of the computer system, rotating the indication of current time such that the indication of current time has the first orientation relative to the first user interface with the second layout.

223. The method of claim 222, wherein:displaying the first user interface, including displaying the indication of current time overlaying the first region of the first background, includes displaying the indication of current time underlying at least a portion of a first foreground element of the first user interface and / or overlaying at least a portion of a first background element of the first user interface; andchanging a shape of the indication of current time from a first shape to a second shape different from the first shape includes changing the shape of the indication of current time from the first shape to the second shape, while the indication of current time underlies at least a portion of the first foreground element of the first user interface and / or overlays at least a portion of the first background element of the first user interface.

224. The method of any of claims 222-223, wherein:the first user interface concurrently includes a first element, a second element, and the indication of current time, in the first layout and in the second layout; andchanging the layout of the first user interface from the first layout to the second layout includes:maintaining a spatial relationship between the first element and the indication of current time;maintaining a spatial relationship between the second element and the indication of current time; andchanging a spatial relationship between the first element and the second element from a first spatial relationship to a second spatial relationship different from the first spatial relationship.

225. The method of any of claims 222-224, wherein changing the shape of the indication of current time from the first shape to the second shape includes:stretching the indication of current time in a first stretching direction based on a simulated physical property of a user interface material of the indication of current time that changes with a changing shape of the indication of current time.

226. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication of current time has an appearance that is based on an appearance of the first region of the first background;while displaying the first user interface, detecting a respective event; and in response to detecting the respective event, updating the indication of current time, including:gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time; andgradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time valuedifferent from the first time value, including in a first portion of the first region previously occupied by the first portion of the representation of the first time value, wherein:the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the second portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

227. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication of current time has an appearance that is based on an appearance of the first region of the first background;while displaying the first user interface, detect a respective event; andin response to detecting the respective event, update the indication of current time, including:gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time; andgradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time value different from the first time value, including in a first portion of the first region previously occupied by the first portion of the representation of the first time value, wherein:the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the second portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

228. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication ofcurrent time has an appearance that is based on an appearance of the first region of the first background;means for, while displaying the first user interface, detecting a respective event; and means for, in response to detecting the respective event, updating the indication of current time, including:gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time; andgradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time value different from the first time value, including in a first portion of the first region previously occupied by the first portion of the representation of the first time value, wherein:the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the second portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

229. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, wherein the first user interface includes a first background, and an indication of current time overlaying a first region of the first background, wherein the indication of current time has an appearance that is based on an appearance of the first region of the first background;means for, while displaying the first user interface, detecting a respective event; and means for, in response to detecting the respective event, updating the indication of current time, including:gradually removing, from the first region, a first portion of a representation of a first time value that represents the current time; andgradually displaying, via the one or more display generation components, in the first region, a first portion of a representation of a second time value different from the first time value, including in a first portion of the first region previously occupied by the first portion of the representation of the first time value, wherein:the first portion of the representation of the first time value has an appearance that is based on an appearance of the first region of the first background, and the second portion of the representation of the second time value has an appearance that is based on the appearance of the first region of the first background.

230. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 197-225.

231. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 197-225.

232. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 197-225.

233. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 197-225.

234. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 197-225.

235. A method compri sing:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface:the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object,the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of the first user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object, andwhile displaying the first user interface including the background and the first user interface object, detecting occurrence of an event that corresponds to a change in appearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; andin response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance, displaying an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface:the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object,the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to the first user interface object, by the first portion of the first user interface object, without simulating refraction of thesecond simulated shadow cast on the portion of the background that has the second spatial arrangement relative to the first user interface object.

236. The method of any of claims 235, wherein detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance includes detecting that content in the background is automatically updated without detecting a user input.

237. The method of claim 235, wherein detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance includes detecting a user input that corresponds to a request to change the appearance of the background.

238. The method of any of claims 235-237, wherein:in the first user interface, the appearance of the first user interface object is based, at least in part, on a blurred appearance of the portion of the background, with the first background appearance, that has the first spatial arrangement relative to the first user interface object; andthe blurred appearance of the portion of the background, with the first background appearance, that has the first spatial arrangement relative to the first user interface object includes a greater amount of blur in an edge portion of the blurred appearance, than an interior portion of the blurred appearance away from the edge portion of the blurred appearance.

239. The method of claim 238, wherein:the blurred appearance of the portion of the background, with the first background appearance, that has the first spatial arrangement relative to the first user interface object includes:a first distribution of blurring from the edge portion of the blurred appearance to the interior portion of the blurred appearance, based on the first user interface object having a first spatial relationship to a physical environment of the computer system; and a second distribution of blurring from the edge portion of the blurred appearance to the interior portion of the blurred appearance, based on the first user interface object having a second spatial relationship to the physical environment of the computer system;the first distribution of blurring is different from the second distribution of blurring; andthe first spatial relationship is different from the second spatial relationship.

240. The method of any of claims 235-239, wherein:displaying the first user interface includes displaying, via the one or more display generation components, the first user interface object with an appearance that simulates refraction of one or more portions of the background by a user interface material within a boundary of the first user interface object;the appearance that simulates refraction of the one or more portions of the background simulates a first amount of simulated refraction in a first portion of the user interface object; andthe appearance that simulates refraction of the one or more portions of the background simulates a second amount of simulated refraction, different from the simulated refraction, for a second portion of the first user interface object, different from the first portion of the first user interface object.

241. The method of any of claims 235-240, wherein displaying the first simulated shadow includes:displaying the first simulated shadow with an appearance that is based, at least in part, on one or more visual properties of the portion of the background that has the second spatial arrangement relative to the first user interface object.

242. The method of any of claims 235-241, wherein:displaying the first simulated shadow includes displaying the first simulated shadow with an appearance that is based on one or more visual properties of the portion of the background that has the second spatial arrangement relative to the first user interface object, and one or more visual properties of a portion of the background that has a third spatial arrangement, different from the first spatial arrangement and the second spatial arrangement, relative to the first user interface object;the portion of the background that has the third spatial arrangement relative to the first user interface object is farther away from the first user interface object than the portion of the background that has the second spatial arrangement relative to the first user interface object; andthe appearance of the first user interface object that simulates refraction of the portion of the background that has the second spatial arrangement relative to the first user interface object does not simulate refraction of the portion of the background that has the third spatial arrangement relative to the first user interface object.

243. The method of any of claims 235-242, wherein:displaying the first user interface object includes applying a simulated sheen on a user interface material of the first user interface object; andthe simulated sheen includes one or more colors that are selected based on one or more colors sampled from a portion of the background that is outside of a boundary of the first user interface object.

244. The method of claim 243, wherein:the first simulated shadow is based on a portion of the background that is less than a shadow-threshold distance from a boundary of the first user interface object;the simulated sheen is based on a portion of the background that is less than a sheenthreshold distance from the boundary of the first user interface object; andthe sheen-threshold distance is greater than the shadow-threshold distance.

245. The method of any of claims 243-244, wherein:the simulated sheen is based on a portion of the background that is less than a sheenthreshold distance from a boundary of the first user interface object;the appearance of the first user interface object simulates refraction of a portion of the background that is less than a refraction-threshold distance from the boundary of the first user interface object; andthe refraction-threshold distance is smaller than the sheen-threshold distance.

246. The method of any of claims 243-244, wherein:the first simulated shadow is generated using a first color blending process; and the simulated sheen is generated using a second color blending process that is different from the first color blending process.

247. The method of any of claims 243-246, wherein:the simulated sheen includes one or more colors that correspond to a first amount of increase in color saturation from the one or more colors sampled from the portion of the background that is outside of the boundary of the first user interface object;the first simulated shadow one or more colors that correspond to a second amount of increase in color saturation from one or more colors sampled from the portion of the background that has the second spatial arrangement of the background; andthe first amount of increase in color saturation is greater than the second amount of increase in color saturation.

248. The method of any of claims 243-247, wherein displaying the first user interface object includes displaying a first color layer over the simulated sheen.

249. The method of claim 248, including:while displaying the first user interface including the first user interface object, detecting an event that corresponds to a request to display a second user interface object different from the first user interface object; andin response to detecting the event that corresponds to a request to display the second user interface object different from the first user interface object:in accordance with a determination that the first user interface object and the second user interface object meet transformation criteria, displaying an animated transition that transforms the first user interface object into the second user interface object, wherein:displaying the animated transition includes transforming a user interface material of the first user interface object through a plurality of intermediate states into a user interface material of the second user interface object;the user interface material of the first user interface object has a first color layer;the user interface material of the second user interface object has a second color layer different from the first color layer;the plurality of intermediate states includes a first intermediate state in which a user interface material of the first intermediate state includes a first intermediate color layer, followed by a second intermediate state in which a user interface material of the second intermediate state includes a second intermediate color layer that is different from the first intermediate color layer;the first intermediate color layer has a first color gradient between a color of the first color layer and a color of the second color layer;the second intermediate color layer has a second color gradient between the color of the first color layer and the color of the second color layer; andthe first color gradient is different from the second color gradient.

250. The method of any of claims 235-249, wherein:displaying the first user interface object includes displaying a user interface material of the first user interface object with an appearance that is based on a first adjustment to a current background appearance of the portion of the background that has the first spatial arrangement relative to the first user interface object; andthe first adjustment includes constraining respective values for a first visual property in the portion of the background that has the first spatial arrangement relative to the first user interface object, within a respective range of values for the first visual property.

251. The method of claim 250, wherein constraining the respective values for the first visual property in the portion of the background that has the first spatial arrangement relative to the first user interface object, within the respective range of values for the first visual property includes:in accordance with a determination that a first subset of the portion of the background that has the first spatial arrangement relative to the first user interface object has respective first values above an upper threshold value for the first range of values, reducing the respective first values to respective adjusted first values below the upper threshold value; and in accordance with a determination that a second subset of the portion of the background that has the first spatial arrangement relative to the first user interface object has respective second values below a lower threshold value for the first range of values, increasing the respective second values to respective adjusted second values above the lower threshold value.

252. The method of any of claims 235-251, wherein:displaying the first user interface object includes displaying an edge effect along an outline of the first user interface object against the background;the edge effect displayed along a first portion of the outline has a first set of values for a first visual property;the edge effect displayed along a second portion of the outline has a second set of values for the first visual property;the first set of values for the first visual property is selected to create visual contrast to a portion of the background within a threshold distance of the first portion of the outline; and the second set of values for the first visual property is selected to create visual contrast relative to a portion of the background within the threshold distance of the second portion of the outline.

253. The method of claim 252, wherein displaying the first user interface object includes displaying one or more simulated specular highlights along the outline of the first user interface object, wherein the simulated specular highlights have one or more visual properties and / or one or more spatial properties that are based on a simulated light in an environment of the computer system.

254. The method of any of claims 235-253, wherein:the first user interface object includes internal content within a boundary of the first user interface object; andthe first user interface object is displayed with an appearance that simulates refraction of the internal content in a first manner and that simulates refraction of the background in a second manner different from the first manner.

255. The method of any of claims 235-254, wherein:displaying the first user interface objects includes displaying the first user interface object with a respective object appearance that is based on a first set of visual effects applied to a background appearance of the background; andthe first set of visual effects is applied with a first set of parameters that is selected based on a first set of values for a set of spatial properties of the first user interface object.

256. The method of any of claims 235-255, wherein:displaying the first user interface objects includes displaying the first user interface object with a respective object appearance that is based on one or more visual effects applied to a background appearance of the background, including:in accordance with a determination that the first user interface object has a third set of values for a set of spatial properties, applying the one or more visual effects with a first set of values for one or more parameters of the one or more visual effects; andin accordance with a determination that the first user interface object has a fourth set of values, different from the third set of values, for the set of spatial properties, applying the one or more visual effects with a second set of values for the one or more parameters of the one or more of visual effects, different from the first set of values for the one or more parameters of the one or more visual effects.

257. The method of any of claims 235-256, wherein:displaying the first user interface objects includes displaying the first user interface object with a respective object appearance that is based on a plurality of visual effects applied to a background appearance of the background, including:in accordance with a determination that the first user interface object is of a first object type, applying the plurality of visual effects with a third set of values for one or more parameters of the plurality of visual effects; andin accordance with a determination that the first user interface object is of a second object type different from the first object type, applying the plurality of visual effects with a fourth set of values for the one or more parameters of the plurality of visual effects, different from the third set of values for the one or more parameters of the plurality of visual effects.

258. The method of any of claims 235-257, wherein:displaying the first user interface objects includes displaying the first user interface object with a respective object appearance that is based on a plurality of visual effects applied to a background appearance of the background, including:in accordance with a determination that the first user interface object is in a selected state, applying the plurality of visual effects with a fifth set of values for one or more parameters of the plurality of visual effects; andin accordance with a determination that the first user interface object is not in the selected state, applying the plurality of visual effects with a sixth set of values for the one or more parameters of the plurality of visual effects, different from the fifth set of values for the one or more parameters of the plurality of visual effects.

259. The method of claim 258, wherein:applying the plurality of visual effects with the fifth set of values for one or more parameters of the plurality of visual effects corresponds to using a first set of one or more rules to generate the appearance of the first user interface object;applying the plurality of visual effects with the sixth set of values for one or more parameters of the plurality of visual effects corresponds to using a second set of one or more rules, different from the first set of one or more rules, to generate the appearance of the first user interface object; andthe second set of one or more rules produces an increased visual prominence of the first user interface object, as compared to the first set of one or more rules.

260. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface:the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object,the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of the first user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object, andwhile displaying the first user interface including the background and the first user interface object, detecting occurrence of an event that corresponds to a change in appearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; andin response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance, displaying an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface:the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object,the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to the first user interface object, by the first portion of the first user interface object, without simulating refraction of the second simulated shadow cast on the portion of the first background that has the second spatial arrangement relative to the first user interface object.

261. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface:the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object,the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of the first user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object, andwhile displaying the first user interface including the background and the first user interface object, detect occurrence of an event that corresponds to a change in appearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; andin response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the secondbackground appearance, display an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface:the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object,the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to the first user interface object, by the first portion of the first user interface object, without simulating refraction of the second simulated shadow cast on the portion of the first background that has the second spatial arrangement relative to the first user interface object.

262. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface:the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object,the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of the first user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object, andmeans for, while displaying the first user interface including the background and the first user interface object, detecting occurrence of an event that corresponds to a change inappearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; andmeans for, in response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance, displaying an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface:the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object,the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to the first user interface object, by the first portion of the first user interface object, without simulating refraction of the second simulated shadow cast on the portion of the first background that has the second spatial arrangement relative to the first user interface object.

263. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, including a background, and a first user interface object overlaying a portion of the background that has a first spatial arrangement relative to the first user interface object while the background has a first background appearance, wherein, in the first user interface:the first user interface object is displayed concurrently with a first simulated shadow that is cast on a first portion of the background that has a second spatial arrangement relative to the first user interface object,the first simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the first background appearance, that has the second spatial arrangement relative to the first user interface object, by a first portion of thefirst user interface object, without simulating refraction of the first simulated shadow cast on the first portion of the background that has the second spatial arrangement relative to the first user interface object, andmeans for, while displaying the first user interface including the background and the first user interface object, detecting occurrence of an event that corresponds to a change in appearance of the background from the first background appearance to a second background appearance that is different from the first background appearance; andmeans for, in response to detecting the occurrence of the event that corresponds to the change in appearance of the background from the first background appearance to the second background appearance, displaying an updated first user interface, in which the first user interface object overlays a portion of the background that has the first spatial arrangement relative to the first user interface object, wherein, in the updated first user interface:the first user interface object is displayed concurrently with a second simulated shadow that is cast on a portion of the background that has the second spatial arrangement relative to the first user interface object,the second simulated shadow is cast on the background based on a spatial arrangement of the first user interface object relative to the background, andthe first user interface object is displayed with an appearance that simulates refraction of the portion of the background, with the second background appearance, that has the second spatial arrangement relative to the first user interface object, by the first portion of the first user interface object, without simulating refraction of the second simulated shadow cast on the portion of the first background that has the second spatial arrangement relative to the first user interface object.

264. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 235-257.

265. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 235-257.

266. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 235-257.

267. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 235-257.

268. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 235-257.

269. A method comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components:first content in a first region of the first user interface; anda first set of one or more user interface elements in the first region of the first user interface,wherein:the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; anda first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance of the first content in a first manner that is determined based on one or more properties of the first content; andwhile displaying the first user interface, detecting an event corresponding to a change in appearance of content in the first region; andin response to detecting the event corresponding to the change in appearance of content in the first region, concurrently displaying, via the one or more display generation components:second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface,wherein:the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; andthe second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content.

270. The method of claim 269, wherein applying the first deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes:in accordance with a determination that a rate of change in appearance of the first content is a first rate of change in appearance, applying the first content deemphasis effect with a first set of deemphasis parameters; andin accordance with a determination that a rate of change in appearance of the second content is a second rate of change in appearance, different from the first rate of change in appearance, applying the second content deemphasis effect with a second set of deemphasis parameters, different from the first set of deemphasis parameters.

271. The method of claim 270, wherein:the first rate of change in appearance of the first content includes a scroll speed of the first content.

272. The method of any of claims 270-271, including:while displaying respective content in the first region, detecting a change in a rate of change in appearance of the respective content; andin response to detecting the rate of change in appearance of the respective content:in accordance with a determination that the rate of change in appearance of the respective content has increased from a respective rate of change in appearance to a first increased rate of change in appearance, reducing an intensity of a respective content deemphasis effect that is applied to at least a portion of the respective content that occupies the subset of the first region; andin accordance with a determination that the rate of change in appearance of the respective content has decreased from the respective rate of change in appearance to a first decreased rate of change in appearance, increasing the intensity of the respective content deemphasis effect that is applied to at least a portion of the respective content that occupies the subset of the first region.

273. The method of any of claims 270-272, including:in response to detecting the event corresponding to the change in appearance of content in the first region, displaying, via the one or more display generation components, intermediate content in the first region, wherein:the intermediate content corresponds to a transition from the first content to the second content in the first region;the intermediate content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;an intermediate content deemphasis effect is applied to at least a portion of the intermediate content that occupies the subset of the first region; andthe intermediate content deemphasis effect changes an appearance of the intermediate content in an intermediate manner that is determined based on the one or more properties of the intermediate content.

274. The method of any of claims 270-273, including:in response to detecting the event corresponding to the change in appearance of content in the first region, gradually increasing visual prominence of a first user interface object in the first region of the first user interface, overlaying current underlying content in the first region of the first user interface, wherein:the first content deemphasis effect is applied to at least the portion of the first content that occupies the subset of the first region that is not covered by the first set of one or more user interface elements, while the first user interface object was not included in the first region of the first user interface;the second content deemphasis effect is applied to at least a portion of the second content that occupies a subset of the first region that is not covered by the first user interface object and that is not covered by the first set of one or more user interface elements; andgradually increasing the visual prominence of the first user interface object in the first region includes:in accordance with a determination that the event corresponds to a first rate of change in appearance of the current underlying content, increasing the visual prominence of the first user interface object with a first rate of increase in visual prominence; andin accordance with a determination that the event corresponds to a second rate of change in appearance of the current underlying content, different from the first rate of change in appearance of the current underlying content, increasing the visual prominence of the first user interface object with a second rate of increase in visual prominence, different from the first rate of increase in visual prominence.

275. The method of claim 274, wherein gradually increasing the visual prominence of the first user interface object in the first region includes:in accordance with the determination that the event corresponds to the first rate of change in appearance of the current underlying content, transitioning to a respective point in an animated transition for displaying the first user interface object in the first region of the first user interface in a first animation duration; andin accordance with the determination that the event corresponds to the second rate of change in appearance of the current underlying content, transitioning to the respective point in the animated transition for displaying the first user interface object in the first region of the first user interface in a second animation duration, different from the first animation duration.

276. The method of any of claims 274-275, wherein gradually increasing the visual prominence of the first user interface object in the first region includes:in accordance with the determination the first rate of change in appearance of the current underlying content corresponds to a first movement speed of the current underlying content, moving the first user interface object in the first region of the first user interface by a first amount of translation in the first region; andin accordance with the determination the second rate of change in appearance of the current underlying content corresponds to a second movement speed of the currentunderlying content, different from the first movement speed of the current underlying content, moving the first user interface object in the first region of the first user interface by a second amount of translation in the first region, different from the first amount of translation in the first region.

277. The method of any of claims 274-276, wherein:detecting the event corresponding to the change in appearance of content in the first region includes detecting movement of content in a first movement direction relative to the first region of the first user interface; andthe method includes:in response to detecting the event corresponding to the change in appearance of content in the first region, moving an edge of the first region relative to a first edge of the first user interface in a direction corresponding to the first movement direction, wherein moving the edge of the first region relative to the first edge of the first user interface includes:in accordance with a determination that the movement of content in the first movement direction has a first set of one or more values for one or more movement characteristics, moving the edge of the first region by a first amount of movement; and in accordance with a determination that the movement of content in the first movement direction has a second set of one or more values, different from the first set of one or more values, for the one or more movement characteristics, moving the edge of the first region by a second amount of movement, different from the first amount of movement.

278. The method of any of claims 269-277, wherein:displaying the first user interface includes concurrently displaying a first scrollable region and a second scrollable region;displaying the first scrollable region includes concurrently displaying the first region of the first user interface and the first set of one or more user interface elements in the first region of the first user interface;displaying the second scrollable region includes concurrently displaying:a second region of the first user interface, different from the first region of the first user interface, anda second set of one or more user interface elements in the second region of the first user interface,while the first content occupies the subset of the first region of the first user interface, first adjacent content that is different from the first content occupies a subset of the second region of the first user interface that is not covered by the second set of one or more user interface elements, andwhile the first adjacent content occupies the subset of the second region that is not covered by the second set of one more user interface elements, a first concurrent content deemphasis effect is applied to at least a portion of the first adjacent content that occupies the subset of the second region, and changes an appearance of the first adjacent content in a third manner that is determined based on one or more properties of the first adjacent content.

279. The method of any of claims 269-278, wherein:the first user interface includes a first scrollable region that is scrollable in a first scroll direction and that is scrollable in a second scroll direction different from to the first scroll direction;the first scrollable region concurrently includes the first region of the first user interface, and an additional region that is different from the first region;the additional region includes a first additional set of one or more user interface elements in the additional region of the first scrollable region;before the first content is displayed in the first region of the first user interface, the first content was displayed as part of scrollable content in the first scrollable region, outside of the first region and the additional region of the first user interface;while the first content was displayed outside of the first region and the additional region of the first user interface, detecting a user input that scrolls the scrollable content in the first scrollable region; andin response to detecting the user input that scrolls the scrollable content in the first scrollable region:in accordance with a determination that the scrollable content is scrolled in the first scroll direction and that the first content is scrolled into the first region, the first content deemphasis effect is applied to the first content in the first region based on the one or more properties of the first content; andin accordance with a determination that the scrollable content is scrolled in the second scroll direction and that the first content is scrolled into the additional region, an additional content deemphasis effect is applied to at least a portion of the first content that occupies a subset of the additional region that is not covered by the first additional set of oneor more user interface elements, and changes an appearance of the portion of the first content that occupies the subset of the additional region in an additional manner that is determined based the one or more properties of the first content.

280. The method of any of claims 269-279, wherein applying the first content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes applying an amount of blur to at least the portion of the first content that occupies the subset of the first region, wherein the amount of blur is based on at least some of the one or more properties of the first content.

281. The method of any of claims 269-280, wherein applying the first content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes fading out foreground content of the portion of the first content that occupies the subset of the first region relative to a background of the portion of the first content, wherein the amount of fading is based on at least some of the one or more properties of the first content.

282. The method of any of claims 269-281, wherein applying the first content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes dimming the portion of the first content that occupies the subset of the first region, wherein the amount of dimming is based on at least some of the one or more properties of the first content.

283. The method of any of claims 269-282, wherein applying the first content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes:in accordance with a determination that the first content meets first content criteria, applying a first type of content deemphasis effect to at least the portion of the first content that occupies the subset of the first region; andin accordance with a determination that the first content meets second content criteria, different from the first content criteria, applying a second type of content deemphasis effect, different from the first type of content deemphasis effect, to at least the portion of the first content that occupies the subset of the first region.

284. The method of claim 283, wherein:the first content criteria include a first criterion that is used to evaluate the portion of the first content based on a comparison between foreground luminance of the portion of the first content and background luminance of the portion of the first content;the second content criteria include a second criterion that is used to evaluate the portion of the first content based on the comparison between the foreground luminance of the portion of the first content and the background luminance of the portion of the first content; andthe second criterion is different from the first criterion.

285. The method of 284, wherein:the first criterion is met by the portion of the first content when a difference between the foreground luminance of the portion of the first content and the background luminance of the portion of the first content exceeds a threshold difference; andthe second criterion is met by the portion of the first content when the difference between the foreground luminance of the portion of the first content and the background luminance of the portion of the first content is below the threshold difference;applying the first type of content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes prioritizing fading foreground content in the portion of the first content into a background in the portion of the first content, over dimming the portion of the first content; andapplying the second type of content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes prioritizing dimming the portion of the first content over fading the foreground content in the portion of the first content into the background in the portion of the first content.

286. The method of any of claims 269-285, wherein:applying the first content deemphasis effect to at least the portion of the first content that occupies the subset of the first region includes gradually varying an intensity of the first content deemphasis effect across a spatial extent of the portion of the first content that occupies the subset of the first region;the intensity of the first content deemphasis effect has a first intensity at a first location relative to the first set of one or more user interface elements; andthe intensity of the first content deemphasis effect has a second intensity, different from the first intensity, at a second location, different from the first location, relative to the first set of one or more user interface elements.

287. The method of claim 286, wherein:the first location is on a first intensity contour around a first user interface element and a second user interface elements of the first set of one or more user interface elements, the second location is on a second intensity contour, different from the first intensity contour, around the first user interface element and the second user interface element of the first set of one or more user interface elements, andat least one of the first intensity contour and the second intensity contour includes:a first curved portion and a second curved portion that curve outward away from the first user interface element and the second user interface element, anda third curved portion between the first curved portion and the second curved portion, that curves inward toward a location between the first user interface element and the second user interface element.

288. The method of any of claims 286-287, wherein:the first location is on a first intensity contour around a first user interface element and a second user interface elements of the first set of one or more user interface elements;the second location is on a second intensity contour, different from the first intensity contour, around the first user interface element and the second user interface element of the first set of one or more user interface elements;the first intensity contour of the first deemphasis effect has a first shape and / or size that is based on a set of spatial characteristics of the first set of one or more user interface elements; andthe second intensity contour of the first deemphasis effect has a second shape and / or size that is based on the set of spatial characteristics of the first set of one or more user interface elements.

289. The method of any of claims 269-288, wherein:displaying the first user interface concurrently including the first content and the first set of one or more user interface elements, includes displaying, via the one or more display generation components, at least a first user interface element of the first set of one or more user interface elements with a user interface material that has an appearance that simulates optical interactions between the user interface material and at least a portion of the first content that is within an interaction distance from a boundary of the first user interface element; andthe portion of the first content that is within the interaction distance of the first user interface element is subject to the first content deemphasis effect.

290. The method of claim 289, wherein applying the first content deemphasis effect on the subset of the portion of the first content includes:applying the first content deemphasis effect to the portion of the first content that occupies the subset of the first region that is not covered by the first set of one or more user interface elements, with a first set of one or more intensities; andapplying the first content deemphasis effect to respective portion of the first content that are covered by respective user interface elements of the first set of one or more user interface elements, with a second set of one or more intensities, that are less than the first set of intensities.

291. The method of any of claims 269-290, wherein:the first set of one or more user interface elements includes a first user interface element that is designated for inclusion in the first region of the first user interface, and the first set of one or more user interface elements includes a second user interface element, different from the first user interface element, that is part of the first content before the first content is moved into the first region of the first user interface, and that becomes included in the first set of one or more user interface elements and in the first region of the first user interface, based on a spatial proximity of the second user interface element to the first user interface element when the first content moves relative to the first user interface.

292. The method of any of claims 269-290, wherein the first set of one or more user interface elements includes:at least one user interface element that is a system user interface element that, when selected, causes the computer system to perform a system function; andat least one user interface element that is an application user interface element that, when selected, causes the computer system to perform a function determined by an application to which the application user interface element corresponds.

293. The method of any of claims 291-292, wherein:the first user interface element is an element in a header region of the first user interface that has an appearance that simulates optical interaction with content in the first user interface;for at least a first period of time when the second user interface element is not included in the first set of one or more user interface elements, the second user interface element is a sub-header of the content in the first user interface, moving relative to the header region of the first user interface, and not subject to the simulated optical interaction and not subject to the first content deemphasis effect; andfor at least a second period of time when the second user interface element is included in the first set of one or more user interface elements based on the spatial proximity of the second user interface element to the first user interface element, the first second user interface element changes a spatial extent of the first content deemphasis effect on the content in the first user interface.

294. The method of any of claims 269-293, wherein displaying the first user interface includes maintaining a position of the first region of the first user interface relative to a display area provided via the one or more display generation components, when the first content occupies the subset of the first region that is not covered by the first set of one or more user interface elements, and when the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements.

295. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components:first content in a first region of the first user interface; anda first set of one or more user interface elements in the first region of the first user interface,wherein:the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; anda first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance ofthe first content in a first manner that is determined based on one or more properties of the first content; andwhile displaying the first user interface, detecting an event corresponding to a change in appearance of content in the first region; andin response to detecting the event corresponding to the change in appearance of content in the first region, concurrently displaying, via the one or more display generation components:second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface,wherein:the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; andthe second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content..

296. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components:first content in a first region of the first user interface; anda first set of one or more user interface elements in the first region of the first user interface,wherein:the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; anda first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance of the first content in a first manner that is determined based on one or more properties of the first content; andwhile displaying the first user interface, detect an event corresponding to a change in appearance of content in the first region; andin response to detecting the event corresponding to the change in appearance of content in the first region, concurrently display, via the one or more display generation components:second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface,wherein:the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; andthe second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content..

297. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components:first content in a first region of the first user interface; anda first set of one or more user interface elements in the first region of the first user interface,wherein:the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; anda first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance of the first content in a first manner that is determined based on one or more properties of the first content; andmeans for, while displaying the first user interface, detecting an event corresponding to a change in appearance of content in the first region; andmeans for, in response to detecting the event corresponding to the change in appearance of content in the first region, concurrently displaying, via the one or more display generation components:second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface,wherein:the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; andthe second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content.

298. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface, wherein displaying the first user interface includes concurrently displaying, via the one or more display generation components:first content in a first region of the first user interface; anda first set of one or more user interface elements in the first region of the first user interface,wherein:the first content occupies a subset of the first region that is not covered by the first set of one or more user interface elements; anda first content deemphasis effect is applied to at least a portion of the first content that occupies the subset of the first region, and changes an appearance of the first content in a first manner that is determined based on one or more properties of the first content; andmeans for, while displaying the first user interface, detecting an event corresponding to a change in appearance of content in the first region; andmeans for, in response to detecting the event corresponding to the change in appearance of content in the first region, concurrently displaying, via the one or more display generation components:second content in the first region of the first user interface, and the first set of one or more user interface elements in the first region of the first user interface,wherein:the second content occupies the subset of the first region that is not covered by the first set of one or more user interface elements;a second content deemphasis effect is applied to at least a portion of the second content that occupies the subset of the first region, and changes an appearance of the second content in a second manner that is determined based on one or more properties of the second content; andthe second manner in which the second content deemphasis effect changes the appearance of the second content is different from the first manner in which the first content deemphasis effect changes the appearance of the first content.

299. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 269-294.

300. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is incommunication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 269-294.

301. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 269-294.

302. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 269-294.

303. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 269-294.

304. A method comprising:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for the one or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material;while displaying the first user interface object with the first appearance, detecting a first event; andin response to detecting the first event, displaying, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein:at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material, the second set of values is different from the first set of values, andthe second appearance based on the second set of values is different from the first appearance based on the first set of values.

305. The method of claim 304, wherein displaying the second user interface object with the higher input priority than the input priority of the first user interface object includes:displaying the second user interface object with a third appearance based on the first set of one or more values for the one or more simulated parameters.

306. The method of any of claims 304-305, wherein a change from the first appearance based on the first set of values for the one or more simulated parameters of the user interface material to the second appearance based on the second set of values for the one or more simulated parameters of the user interface material corresponds to a reduction of a simulated optical interaction with the user interface material.

307. The method of any of claims 304-306, wherein:prior to detecting the first event, the first user interface object is a first control displayed in the first user interface; anddetecting the first event includes detecting a user input that corresponds to a request to expand an expandable control in the first user interface, including the first control or another expandable control other than the first control; andthe second user interface object is a second control that is displayed in response to the user input that corresponds to the request to expand the expandable control.

308. The method of claim 307, wherein displaying the second control in response to detecting the user input that corresponds to a request to expand the expandable control, includes:expanding the user interface material of the expandable control from a first size to a second size larger than the first size; anddisplaying the second control overlaying the user interface material displayed with the second size.

309. The method of any of claims 307-308, including:while displaying the expandable control prior to expanding the expandable control, detecting a user input that is directed to a portion of the expandable control; andin response to detecting the user input that is directed to a portion of the expandable control, displaying, via the one or more display generation components, a respectivesequence of animated changes in the user interface material of the expandable control, including:in accordance with a determination that the user input that is directed to a portion of the expandable control has a first set of values for one or more spatial characteristics of the user input, stretching the user interface material by a first amount of stretching in a first stretching direction, and compressing the user interface material by a first amount of compression in a first compression direction, wherein the first stretching direction and the first compression direction are selected based on the first set of values for the one or more spatial characteristics; andin accordance with a determination that the user input that is directed to the portion of the expandable control has a second set of values, different from the first set of values, for the one or more spatial characteristics of the user input, stretching the user interface material by a second amount of stretching in a second stretching direction, and compressing the user interface material by a second amount of compression in a second compression direction, wherein the second stretching direction and the second compression direction are selected based on the second set of values for the one or more spatial characteristics.

310. The method of any of claims 304-309, including:in response to detecting the first event, displaying an animated transition that includes displaying the user interface material changing through a sequence of intermediate shapes that corresponds a simulated oscillation of the user interface material relative to the first user interface.

311. The method of any of claims 304-310, wherein:the first user interface object is concurrently displayed with a third user interface object in the first user interface;the third user interface object has a first object appearance and a first spatial relationship to the first user interface object; andthe first appearance based on the first set of the one or more simulated parameters of the user interface material is further based on the first object appearance of the third user interface object.

312. The method of claim 311, wherein:the first object appearance of the third user interface object indicates a current state of a control function associated with the third user interface object;while displaying the first user interface object with the first appearance and displaying the third user interface object with the first object appearance, detecting, via the one or more input devices, a user input that is directed toward the third user interface object and that meets first criteria; andin response to detecting the user input that meets the first criteria:performing an operation corresponding to the third user interface object that changes the current state of the control function from a first state to a second state;updating the first object appearance of the third user interface object, from a first emissive state to a second emissive state, different from the first emissive state, in accordance with the change in the current state of the control function from the first state to the second state; andupdating the first appearance of the first user interface object based on the update to the first object appearance of the third user interface object from the first emissive state to the second emissive state.

313. The method of any of claims 304-312, wherein:the first user interface object is concurrently displayed with a fourth user interface object in the first user interface;the fourth user interface object is displayed with a simulated optical effect that is based on the first appearance of the first user interface object; andwhile displaying the first user interface object and the fourth user interface object, with the simulated optical effect applied to the fourth user interface object, detecting a user input that corresponds to a request to adjust the first user interface object; andin response to detecting the user input that corresponds to the request to adjust the first user interface object:adjusting one or more visual properties of the first user interface object; and updating the simulated optical effect applied to the fourth user interface object based on an adjusted appearance of the first user interface object resulted from adjusting the one or more visual properties of the first user interface object.

314. The method of any of claims 304-313, including:while displaying the first user interface object in the first user interface, wherein the first user interface object is displayed with a first simulated gap between the first userinterface object and a background of the first user interface, detecting, via the one or more input devices, a user input that is directed to the first user interface object and that meets interaction criteria; andin response to detecting the user input that meets the interaction criteria, increasing a simulated gap between the first user interface object and the background of the first user interface from the first simulated gap to a second simulated gap greater than the first simulated gap.

315. The method of any of claims 304-314, including:while displaying the first user interface object in the first user interface, detecting, via the one or more input devices, a user input that is directed to the first user interface object and that meets adjustment criteria; andin response to detecting the user input that meets the adjustment criteria, changing content included within the first user interface object from initial content to adjusted content different from the initial content.

316. The method of claim 315, wherein changing the content included within the first user interface object from initial content to adjusted content, includes:in accordance the user input that meets the adjustment criteria is ongoing, displaying a first portion of the adjusted content with a first curvature; andin accordance the user input that meets the adjustment criteria has been terminated, displaying the first portion of the adjusted content with a second curvature, different from the first curvature.

317. The method of claim 315-316, including:while displaying the first user interface object with the adjusted content, including displaying the adjusted content with a first set of values for one or more visual properties of the adjusted content, detecting, via the one or more input devices, a termination of the user input that meets the adjustment criteria; andin response to detecting the termination of the user input that meets the adjustment criteria, maintaining display of the first user interface object with the adjusted content, including displaying the adjusted content with a second set of values for the one or more visual properties of the adjusted content, wherein the second set of values for the one or more visual properties is different from the first set of values for the one or more visual properties.

318. The method of any of claims 304-317, wherein:the first user interface includes a plurality of controls corresponding to a plurality of control functions of the computer system;the first user interface object displayed with the first appearance is a first control among the plurality of controls displayed in the first user interface;displaying the second user interface object in response to detecting the first event, includes displaying, via the one or more display generation components, a second control overlaying a platter that includes representations of at least a subset of the plurality of controls, including a representation of the first control.

319. The method of any of claims 304-317, wherein:the first user interface includes a plurality of application objects corresponding to a plurality of applications; andthe first user interface object displayed with the first appearance is a first application icon among the plurality of application objects displayed in the first user interface.

320. The method of any of claims 304-317, wherein:the first user interface includes a plurality of application windows corresponding to a plurality of applications; andthe first user interface object displayed with the first appearance is a first application window among the plurality of application windows in the first user interface.

321. The method of any of claims 304-320, wherein:displaying the first user interface object in the first user interface with the first appearance includes displaying, via the one or more display generation components, the first user interface object overlaying a first background of the first user interface; andthe method includes, in response to detecting the first event, modifying one or more display properties of the first background to deemphasize the first background relative to the second user interface object.

322. The method of any of claims 304-321, including:before detecting the first event, concurrently displaying, via the one or more display generation components, the first user interface object and a plurality of user interface objects in the first user interface, the plurality of user interface objects including a first subset of one or more user interface objects and a second subset of one or more user interface objects, wherein, while the first user interface object is displayed with the first appearance, the plurality of user interface objects are displayed with respective first appearances based thefirst set of one or more values for the one or more simulated parameters of the user interface material;in response to detecting the first event, while displaying the first user interface object with the second appearance:maintaining the respective first appearances of the first subset of one or more user interface objects; andchanging the respective first appearances of the second subset of one or more user interface objects to respective second appearances based on the second set of one or more values for the one or more simulated parameters of the user interface material different from the first set of one or more values for the one or more simulated parameters of the user interface material.

323. The method of claim 322, including:while concurrently displaying the second user interface object, the first user interface object with the second appearance, the first subset of one or more user interface objects with the respective first appearances, and the second subset of one or more user interface objects with the respective second appearances, detecting, via the one or more input devices, a first user input directed toward a location corresponding to the first subset of one or more user interface objects; andin response to detecting the first user input, ceasing to display the second user interface object with the higher input priority.

324. The method of any of claims 322-323, including:while concurrently displaying the second user interface object, the first user interface object with the second appearance, the first subset of one or more user interface objects with the respective first appearances, and the second subset of one or more user interface objects with the respective second appearances, detecting, via the one or more input devices, a second user input; andin response to detecting the second user input, in accordance with a determination that the second user input is directed toward a location corresponding to a user interface object from the first subset of one or more user interface objects, performing an operation corresponding to the user interface object from the first subset of one or more user interface objects.

325. The method of any claim 324, including:in response to detecting the second user input, in accordance with a determination that the second user input is directed toward a location corresponding to the first user interface object or the second subset of one or more user interface objects, forgoing performing an operation corresponding to the first user interface object or a user interface object from the second subset of one or more user interface objects.

326. The method of any of claims 322-325, wherein, while the first user interface object is displayed with the second appearance, the second subset of one or more user interface objects includes at least one user interface object that is displayed with a respective third appearance based on the third set of one or more values, different from the first set of one or more values and the second set of one or more values, for the one or more simulated parameters of the user interface material.

327. The method of claim 326, wherein:the second appearance of the first user interface object that is based on the second set of values for the one or more simulated parameters of the user interface material corresponds to a first amount of blur and a first amount of dimming applied to the first appearance of the first user interface object; andthe respective third appearance of the at least one user interface object from the second set of user interface objects, that is based on the third set of one or more values for the one or more simulated parameters of the user interface material, corresponds to:a second amount of blur different from the first amount of blur, and a respective amount of dimming, applied to the respective first appearance of the at least one user interface object from the second set of user interface objects that varies from the first amount of dimming by an amount that is less than the amount of variation between the first amount of blur and the second amount of blur.

328. The method of any of claims 322-327, wherein:the first user interface includes the first user interface object, the plurality of user interface objects, and a plurality of object placement locations that are currently vacant; and the method includes:while the first user interface object is displayed with the second appearance, detecting, via the one or more input devices, a user input that corresponds to a request to enter an editing mode of the first user interface; andin response to detecting the user input that corresponds to the request to enter the editing mode of the first user interface, displaying, via the one or more display generation components, the plurality of object placement locations that are currently vacant with a deemphasis effect.

329. The method of any of claims 304-328, including:prior to displaying the first user interface including the first user interface object with the first appearance, displaying, via the one or more display generation components, a second user interface different from the first user interface;while displaying the second user interface, detecting, via the one or more input devices, a user input that corresponds to a request to display the first user interface; and in response to detecting the user input that corresponds to the request to display the first user interface, displaying, via the one or more display generation components, the first user interface overlaying the second user interface.

330. The method of any of claims 304-328, wherein:the first user interface including the first user interface object with the first appearance is a system user interface;displaying the second user interface object with the higher input priority than the input priority of the first user interface object includes displaying, via the one or more display generation components, a control user interface including the second user interface object, overlaying the first user interface including the first user interface object with the second appearance; anddetecting the first event includes detecting a system gesture directed to the system user interface.

331. The method of claim 330, wherein the second user interface object is displayed with an appearance based on the first set of values for the one or more simulated parameters of a user interface material.

332. The method of any of claims 304-331, wherein:the first user interface includes a plurality of controls corresponding to a plurality of control functions of the computer system;the first user interface object displayed with the first appearance is a first control among the plurality of controls displayed in the first user interface; andthe method includes:detecting a user input directed to the first control that corresponds to a request to resize the first control in the first user interface; andin response to detecting the user input directed to the first control that corresponds to a request to resize the first control in the first user interface:in accordance with a determination that a size of the first control is increased by more than a threshold amount of increase, displaying two or more placement locations near the first control merging; andin accordance with a determination that the size of the first control is decreased by more than a threshold amount of decrease, displaying a placement location near splitting into two or more placement locations that are near the first control.

333. The method of any of claims 304-332, wherein:while the first user interface object has current input focus, the first user interface object is displayed with the first appearance based on the first set of one or more values for the one or more simulated parameters of the user interface material;the first set of one or more values for the one or more simulated parameters of the user interface material corresponds to a first variant of the user interface material associated with objects with current input focus;in response to detecting the first event, the second user interface object has current input focus, and the first user interface object does not have current input focus;while the second user interface object has current input focus and the first user interface object does not have current input focus, at least a portion of the first user interface object is displayed with the second appearance based on the second set of values for the one or more simulated parameters of the user interface material; andthe second set of one or more values for the one or more simulated parameters of the user interface material corresponds to a second variant of the user interface material associated with objects without current input focus.

334. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for:displaying, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for the one or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material;while displaying the first user interface object with the first appearance, detecting a first event; andin response to detecting the first event, displaying, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein:at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material, the second set of values is different from the first set of values, and the second appearance based on the second set of values is different from the first appearance based on the first set of values.

335. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to:display, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for the one or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material;while displaying the first user interface object with the first appearance, detect a first event; andin response to detecting the first event, display, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein:at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material,the second set of values is different from the first set of values, and the second appearance based on the second set of values is different from the first appearance based on the first set of values.

336. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for the one or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material;means for, while displaying the first user interface object with the first appearance, detecting a first event; andmeans for, in response to detecting the first event, displaying, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein:at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material,the second set of values is different from the first set of values, and the second appearance based on the second set of values is different from the first appearance based on the first set of values.

337. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, comprising:means for displaying, via the one or more display generation components, a first user interface object in a first user interface, wherein the first user interface object is displayed with a first appearance based on a first set of one or more values for one or more simulated parameters of a user interface material, wherein a respective set of one or more values for theone or more simulated parameters of the user interface material determine how visual elements in the first user interface impact an appearance of the user interface material;means for, while displaying the first user interface object with the first appearance, detecting a first event; andmeans for, in response to detecting the first event, displaying, via the one or more display generation components, a second user interface object with a higher input priority than an input priority of the first user interface object, wherein:at least a portion of the first user interface object is displayed concurrently with the second user interface object, with a second appearance based on a second set of values for the one or more simulated parameters of the user interface material,the second set of values is different from the first set of values, and the second appearance based on the second set of values is different from the first appearance based on the first set of values.

338. A computer system that is in communication with one or more input devices and one or more display generation components, comprising:one or more processors; andmemory storing one or more programs, wherein the one or more programs are configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods of claims 304-331.

339. A computer readable storage medium storing one or more programs, the one or more programs comprising instructions that, when executed by a computer system that is in communication with one or more input devices and one or more display generation components, cause the computer system to perform any of the methods of claims 304-331.

340. A graphical user interface on a computer system that is in communication with one or more input devices and one or more display generation components, the computer system comprising a memory, and one or more processors to execute one or more programs stored in the memory, the graphical user interface comprising user interfaces displayed in accordance with any of the methods of claims 304-331.

341. A computer system that is in communication with one or more input devices and one or more display generation components, comprising means for performing any of the methods of claims 304-331.

342. An information processing apparatus for use in a computer system that is in communication with one or more input devices and one or more display generation components, the information processing apparatus comprising means for performing any of the methods of claims 304-331.

343. A method compri sing:at a computer system that is in communication with one or more input devices and one or more display generation components:displaying, via the one or more display generation components, a first user interface of a first application, wherein the first user interface includes content and a plurality of selectable user interface objects that are separate from the content and are associated with performing operations in the first application that are independent of the content,wherein the plurality of selectable user interface objects includes:a first selectable user interface object associated with performing a first operation in the first application that is independent of the content;a second selectable user interface object, different from the first selectable user interface object, associated with performing a second operation in the first application that is independent of the content and is different from the first operation; and one or more additional selectable user interface objects, different from the first selectable user interface object and the second selectable user interface object;while displaying the first user interface, including concurrently displaying the content and the plurality of selectable user interface objects, detecting, via the one or more input devices, a user input that corresponds to a request to navigate through the content; and in response to detecting the user input that corresponds to a request to navigate through the content:shifting a first portion of the content that is visible in the first user interface; andceasing to display at least a subset of the one or more additional selectable user interface objects, while maintaining concurrent display of the first selectable user interface object and the second selectable user interface object.

344. The method of claim 343, wherein:the plurality of selectable user interface objects includes one or more content navigation objects;while displaying the first user interface, including the content and the plurality of selectable user interface objects, detecting, via the one or more input devices, a first user input that is directed toward a respective content navigation object of the one or more navigation objects; andin response to detecting the first user input that is directed toward the respective content navigation object of the one or more content navigation objects:replacing display of the content with first alternative content that is different from the content, andconcurrently displaying the first alternative content and the plurality of user interface objects in the first user interface.

345. The method of any of claims 343-344, wherein:displaying the plurality of selectable user interface objects includes concurrently displaying an indication of currently displayed content with the one or more content navigation objects; andthe indication of current displayed content remains displayed when at least the subset of the one or more additional selectable user interface object, including the one or more content navigation objects, ceases to be displayed in response to detecting the user input that corresponds to the request to navigate through the content.

346. The method of claim 345, including:while displaying the indication of the currently displayed content, without displaying the one or more content navigation objects, detecting, via the one or more input devices, a second user input directed toward the indication of the currently displayed content; and in response to detecting the second user input, in accordance with a determination that the second user input meets selection criteria with respect to the indication of the currently displayed content, displaying, via the one or more display generation components, the one or more content navigation objects.

347. The method of any of claims 345-346, including:while displaying the indication of the currently displayed content, without displaying the one or more content navigation objects, detecting, via the one or more input devices, a third user input directed toward the indication of the currently displayed content; andin response to detecting the third user input, in accordance with a determination that the third user input meets movement criteria with respect to the indication of the currentlydisplayed content, wherein the movement criteria includes a requirement that is met when the third user input includes more than a threshold amount of movement from a location corresponding to the indication of the currently displayed content:ceasing display of the content, and displaying, via the one or more display generation components, respective alternative content in the first user interface; and updating the indication of the currently displayed content to correspond to the respective alternative content that is currently displayed in the first user interface.

348. The method of any of claim 345-347, including:while displaying the indication of the currently displayed content, without displaying the one or more content navigation objects, detecting, via the one or more input devices, a fourth user input that is directed toward the indication of the first section header that corresponds to the content, and that includes more than a threshold amount of movement in a respective direction; andin response to detecting the fourth user input:ceasing to display the content in the first user interface;in accordance with a determination that the fourth user input includes first movement that has a first set of movement characteristics, displaying second alternative content in the first user interface; andin accordance with a determination that the fourth user input includes second movement that has a second set of movement characteristics different from the first set of movement characteristics, displaying third alternative content, different from the second alternative content, in the first user interface.

349. The method of any of claims 343-348, including:after ceasing to display at least the subset of the one or more additional selectable user interface objects, while maintaining concurrent display of the first selectable user interface object and the second selectable user interface object, detecting, via the one or more input devices, a sequence of one or more user inputs that corresponds to one or more additional requests to navigate through the content; andin response to detecting a respective user input of the sequence of one or more user inputs that corresponds the one or more additional requests to navigate through the content:in accordance with a determination that a first edge portion of the content has not been reached, shifting a currently displayed portion of the content in accordance with the respective user input; andin accordance with a determination that the first edge portion of the content has been reached, redisplaying, via the one or more display generation components, the plurality of selectable user interface objects, including at least the subset of the one or more additional selectable user interface objects, the first selectable user interface object, and the second selectable user interface object.

350. The method of any of claims 343-349, wherein:the first user interface of the first application is a user interface of a media player application;the content that is displayed with the plurality of selectable user interface objects includes content that corresponds to one or more media items that are playable in the media player application;the plurality of selectable user interface objects includes at least a plurality of selectable controls for controlling playback of a currently playing media item.

351. The method of claim 350, including:while displaying the plurality of selectable controls for controlling playback of the currently playing media item, detecting, via the one or more input devices, detecting a user input that is directed toward a respective control of the plurality of selectable controls; and in response to detecting the user input that is directed toward a portion of the plurality of selectable controls, displaying, via the one or more display generation components, the plurality of selectable controls with additional content corresponding to the currently playing media item.

352. The method of any of claims 350-351, including:while displaying the content and the plurality of selectable controls for controlling playback of the currently playing media item, detecting, via the one or more input devices, a user input that corresponds to a request to activate a first control of the plurality of controls; andin response to detecting the user input that corresponds to the request to activate the first control, performing a first operation corresponding to the first control, including changing playback of the currently playing media item in accordance with the first operation.

353. The method of any of claims 350-352, wherein the plurality of selectable controls includes status information related to the currently playing media item.

354. The method of any of claims 343-353, including:in response to detecting the user input that corresponds to the request to navigate through the content, rearranging at least a subset of the plurality of selectable user interface objects that remain displayed with the content, including the first selectable user interface object, the second selectable user interface object, in the first user interface of the first application.

355. The method of claim 354, wherein:the plurality of selectable user interface objects includes:a first group of two or more selectable user interface objects arranged in a first spatial grouping of a multi-group arrangement; anda second set of two or more selectable user interface objects arranged in a second spatial grouping of the multi-group arrangement; andrearranging at least the subset of the plurality of selectable user interface objects that remain displayed with the content, includes:ceasing to display one or more selectable user interface objects from one or more spatial groupings of the multi-group arrangement; andconsolidating a plurality of the remaining selectable user interface objects in the multi-group arrangement into a reduced arrangement that includes fewer spatial groupings than the multi-group arrangement.

356. The method of any of claims 343-355, including:in response to detecting the user input that corresponds to the request to navigate through the content:maintaining display of at least a first subset of the plurality of selectable user interface objects with the content; andreducing respective sizes of one or more of the first subset of the plurality of selectable user interface objects.

357. The method of any of claims 343-356 including:in response to detecting the user input that corresponds to the request to navigate through the content:maintaining display of at least a second subset of the plurality of selectable user interface objects with the content; andremoving respective labels of one or more of the second subset of the plurality of selectable user interface objects.

358. The method of any of claims 343-357, including:in response to detecting the user input that corresponds to the request to navigate through the content, displaying, via the one or more display generation components, a new selectable user interface object, with the content in the first user interface, wherein the new selectable user interface object was not displayed with the plurality of selectable user interface objects and the content prior to detecting the user input that corresponds to the request to navigate through the content.

359. The method of any of claims 343-358, including, after navigating through the content in the first direction and ceasing to display the first subset of selectable elements:while displaying the content and after at least the subset of the one or more additional selectable user interface objects has ceased to be displayed as a result of the user input that corresponds to the request for navigating through the content, detecting, via the one or more input devices, an additional user input that corresponds to an additional request to navigate through the content; andin response to detecting the additional user input that corresponds to the additional request to navigate through the content:in accordance with a determination that the additional user input corresponds to a request to continue to navigate through the content in the first navigation direction, shifting a currently displayed portion of the content in the first navigation direction; and in accordance with a determination that the additional user input corresponds to a request to navigate through the content in a second navigation direction different from the first navigation direction:shift the currently displayed portion of the content in the second navigation direction; anddisplaying, via the one or more display generation components, the plurality of selectable user interface objects with the content, in the first user interface.

360. The method of any of claims 343-359, including:while displaying the content and after at least the subset of the one or more additional selectable user interface objects has ceased to be displayed as a result of the user input thatcorresponds to the request for navigating through the content, detecting, via the one or more input devices, a user input that selects the first selectable user interface object; and;in response to detecting the user input that selects the first selectable user interface object:displaying, via the one or more display generation components, the subset of the one or more additional user interface objects; anddisplaying, via the one or more display generation components, a new user interface object that was not displayed with the plurality of selectable user interface object and the content, prior to detecting the user input that corresponds to the request to navigate through the content.

361. The method of claim 360, including:while displaying the new user interface object with the plurality of selectable user interface objects and the content, detecting, via the one or more input devices, a user input that corresponds to a request to navigate away from currently displayed content; andin response to detecting the user input that corresponds to the request to navigate away from the currently displayed content:ceasing to display the currently displayed content in the first user interface; anddisplaying, via the one or more display generation components, alternative content, with the plurality of selectable user interface objects and the new user interface object, in the first user interface.

362. The method of any of claims 360-361, wherein:the plurality of selectable user interface objects includes two or more content navigation objects, including:a first content navigation object corresponding to the content; and a second navigation object that corresponds to first alternative content that is not currently displayed in the first user interface; andthe method includes, in response to detecting the user input that selects the first selectable user interface object,ceasing to display the two or more content navigation objects; and displaying, via the one or more display generation components, an indication of last-displayed content concurrently with the new user interface object.

363. The method of any of claims 343-362, wherein respective selectable user interface objects of the plurality of selectable user interface objects include a first user interface material and have respective object appearances that simulate refraction of at least a portion of the content, one or more of the plurality of selectable user interface objects, and / or internal content of the respective selectable user interface objects, in the first user interface, by the first user interface...

Images