Clock face for electronic devices

The method and interface for displaying clock faces on electronic devices address inefficiencies by allowing dynamic graphical element positioning and interaction, reducing user interactions and conserving energy.

JP7884625B2Active Publication Date: 2026-07-03APPLE INC

Patent Information

Authority / Receiving Office
JP · JP
Patent Type
Patents
Current Assignee / Owner
APPLE INC
Filing Date
2025-01-14
Publication Date
2026-07-03

AI Technical Summary

Technical Problem

Existing technologies for displaying and interacting with clock faces on electronic devices are cumbersome and inefficient, often requiring multiple key presses or keystrokes, wasting user time and device energy, particularly in battery-powered devices.

Method used

A method and interface for presenting and interacting with a clock face using a display device that includes a plurality of analog dial graphical elements, allowing for dynamic positioning and sizing of these elements, and supporting language and layout changes, as well as interactive editing features.

Benefits of technology

The solution reduces cognitive burden on users, enhances efficiency, and conserves battery power by minimizing user interactions and optimizing energy consumption.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure 0007884625000001
    Figure 0007884625000001
  • Figure 0007884625000002
    Figure 0007884625000002
  • Figure 0007884625000003
    Figure 0007884625000003
Patent Text Reader

Abstract

To provide an electronic device with faster and more efficient method and interface for presenting and interacting with a clock face.SOLUTION: In some embodiments, a method includes, in an electronic device having a display device via the display device, the step of displaying a selection user interface for selecting a clock face from a plurality of clock faces. The step of displaying a selection user interface for selecting a clock face from a plurality of clock faces includes the step of displaying at least part of two or more different clock faces from a plurality of clock faces that includes the step of displaying a first clock face out of a plurality of clock faces with a first size.SELECTED DRAWING: Figure 19A
Need to check novelty before this filing date? Find Prior Art

Description

Cross - Reference to Related Applications

[0001] This application claims priority to U.S. Patent Application No. 62 / 844,108, entitled "CLOCK FACES FOR AN ELECTRONIC DEVICE", filed on May 6, 2019, and U.S. Patent Application No. 62 / 856,038, entitled "CLOCK FACES FOR AN ELECTRONIC DEVICE", filed on June 1, 2019, the entire contents of which are incorporated herein by reference. This application claims priority to U.S. Non - Provisional Patent Application No. 16 / 585,366, entitled "CLOCK FACES FOR AN ELECTRONIC DEVICE", filed on September 27, 2019, the entire contents of which are incorporated herein by reference. This application claims priority to U.S. Non - Provisional Patent Application No. 16 / 582,020, entitled "CLOCK FACES FOR AN ELECTRONIC DEVICE", filed on September 25, 2019, the entire contents of which are incorporated herein by reference. This application claims priority to U.S. Non - Provisional Patent Application No. 16 / 585,399, entitled "CLOCK FACES FOR AN ELECTRONIC DEVICE", filed on September 27, 2019, the entire contents of which are incorporated herein by reference. TECHNICAL FIELD

[0002] The present disclosure generally relates to computer user interfaces, and more particularly to clock faces for electronic devices. BACKGROUND ART

[0003] Users rely on portable multifunctional devices for various operations, including informing the time. Such users may desire to be provided with the current time along with other context - specific information. SUMMARY OF THE INVENTION

[0004] However, some technologies that use electronic devices to display and interact with a clock face are generally cumbersome and inefficient. For example, some existing technologies use complex and time-consuming user interfaces that may involve multiple key presses or keystrokes. Existing technologies take more time than necessary, wasting both the user's time and the device's energy. The latter problem is particularly serious in battery-powered devices.

[0005] Therefore, this technology provides electronic devices with a faster and more efficient method and interface for presenting and interacting with a clock face. Such a method and interface optionally complements or replaces other methods for presenting and interacting with a clock face. Such a method and interface reduces the cognitive burden on the user and creates a more efficient human-machine interface. In the case of battery-powered computing devices, such a method and interface saves power and extends the time between battery charges.

[0006] In some embodiments, the method includes receiving a request to display a clock face in an electronic device equipped with a display device, which includes a plurality of analog dial graphical elements corresponding to each time unit, and displaying the clock face via the display device in response to receiving the request to display the clock face, in accordance with a determination that each graphical element should be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and while each graphical element is displayed at each position on the clock face, the plurality of analog dial graphical elements include a first analog dial graphical element that occupies a first position and has a first size, and displaying the clock face via the display device in accordance with a determination that each graphical element should not be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and the first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position different from the first position and / or has a second size different from the first size.

[0007] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include: an instruction to receive a request to display a clock face including a plurality of analog dial graphical elements corresponding to each time unit; an instruction to display a clock face via the display device in response to receiving a request to display a clock face, in accordance with a determination that each graphical element should be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and while each graphical element is displayed at each position on the clock face, the plurality of analog dial graphical elements include a first analog dial graphical element that occupies a first position and has a first size; and an instruction to display a clock face via the display device in accordance with a determination that each graphical element should not be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and the first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position different from the first position and / or has a second size different from the first size.

[0008] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include: an instruction to receive a request to display a clock face including a plurality of analog dial graphical elements corresponding to each time unit; an instruction to display a clock face via the display device in response to receiving a request to display a clock face, in accordance with a determination that each graphical element should be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and while each graphical element is displayed at each position on the clock face, the plurality of analog dial graphical elements include a first analog dial graphical element that occupies a first position and has a first size; and an instruction to display a clock face via the display device in accordance with a determination that each graphical element should not be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and the first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position different from the first position and / or has a second size different from the first size.

[0009] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs including: an instruction for receiving a request to display a clock face including a plurality of analog dial graphical elements corresponding to each time unit; an instruction for displaying a clock face via the display device in response to receiving a request to display a clock face, in accordance with a determination that each graphical element should be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and while each graphical element is displayed at each position on the clock face, the plurality of analog dial graphical elements include a first analog dial graphical element that occupies a first position and has a first size; and an instruction for displaying a clock face via the display device in accordance with a determination that each graphical element should not be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and the first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position different from the first position and / or has a second size different from the first size.

[0010] In some embodiments, the electronic device includes a display device and means for receiving a request to display a clock face including a plurality of analog dial graphical elements corresponding to each time unit; means for displaying a clock face via the display device in response to receiving a request to display a clock face, in accordance with a determination that each graphical element should be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and while each graphical element is displayed at each position on the clock face, the plurality of analog dial graphical elements include a first analog dial graphical element that occupies a first position and has a first size; and means for displaying a clock face via the display device, in accordance with a determination that each graphical element should not be displayed at each position on the clock face, wherein the clock face includes a plurality of analog dial graphical elements corresponding to each time unit, and the first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position different from the first position and / or has a second size different from the first size.

[0011] In some embodiments, the method includes, in an electronic device having a display device, displaying a first clock face via the display device, wherein the first clock face displays a time display shown in a first language and graphical elements displayed in a second language, separate from the time display; detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face; and, in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, displaying a second clock face via the display device, wherein the second clock face includes a time display shown in a third language different from the first language and graphical elements displayed in the second language.

[0012] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to display a first clock face via the display device, the first clock face including a time display shown in a first language and graphical elements shown in a second language, separate from the time display; detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face; and, in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, the display of a second clock face via the display device, the second clock face including a time display shown in a third language different from the first language and graphical elements shown in the second language.

[0013] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to display a first clock face via the display device, the first clock face including a time display shown in a first language and graphical elements shown in a second language, separate from the time display; detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face; and, in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, the display of a second clock face via the display device, the second clock face including a time display shown in a third language different from the first language and graphical elements shown in the second language.

[0014] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, the one or more programs including instructions for displaying a first clock face via the display device, the first clock face including a time display, a time display displayed in a first language, and a graphical element displayed in a second language, separate from the time display, detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, and, in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, displaying a second clock face via the display device, the second clock face including a time display displayed in a third language different from the first language, and a graphical element displayed in the second language.

[0015] In some embodiments, the electronic device includes a display device, means for displaying a first clock face via the display device, wherein the first clock face includes a time display shown in a first language and graphical elements shown in a second language, separate from the time display, means for detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, and means for displaying a second clock face via the display device in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first clock face, wherein the second clock face includes a time display shown in a third language different from the first language and graphical elements shown in the second language.

[0016] In some embodiments, the method is to display a first clock face via a display device in an electronic device having a display device, wherein the first clock face includes a plurality of clock hands, including a first clock hand and a second clock hand, and a color gradient of the first clock face, the color gradient of the first clock face includes a gradual transition from a first color at a first edge of the color gradient of the first clock face to a second color at a second edge of the color gradient of the first clock face, the first edge of the color gradient of the first clock face is selected based on the position of the first clock hand of the first clock face, and the second edge of the color gradient of the first clock face is selected based on the position of the first clock hand of the first clock face, and to detect a sequence of one or more inputs corresponding to a request to edit the first clock face, and to display a second clock face via the display device in response to the detection of a sequence of one or more inputs corresponding to a request to edit the first clock face. The second clock face includes a plurality of clock hands, including the hands of the first clock and the hands of the second clock, a first color gradient of the second clock face, and a second color gradient of the second clock face, wherein the first color gradient of the second clock face includes a gradual transition from a first color at the first edge of the first color gradient of the second clock face to a second color at the second edge of the first color gradient of the second clock face, and the first edge of the first color gradient of the second clock face is the first clock hand of the second clock face The second edge of the first color gradient of the second clock face is selected based on the position of the second clock hands of the second clock face, and the second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face to a second color at the second edge of the second color gradient of the second clock face, and the second edge of the second color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face.

[0017] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to display a first clock face via the display device, the first clock face including a plurality of clock hands including a first clock hand and a second clock hand, and a color gradient of the first clock face, the color gradient of the first clock face including a gradual transition from a first color at a first edge of the color gradient of the first clock face to a second color at a second edge of the color gradient of the first clock face, the first edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, and the second edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, the instruction to detect a sequence of one or more inputs corresponding to a request to edit the first clock face, and the detection of a sequence of one or more inputs corresponding to a request to edit the first clock face. Accordingly, a second clock face is displayed via a display device, the second clock face comprising a plurality of clock hands including the hands of a first clock and the hands of a second clock, a first color gradient of the second clock face, and a second color gradient of the second clock face, wherein the first color gradient of the second clock face comprises a gradual transition from a first color at the first edge of the first color gradient of the second clock face to a second color at the second edge of the first color gradient of the second clock face, and the first edge of the first color gradient of the second clock face is The second edge of the first color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face, and the second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face to a second color at the second edge of the second color gradient of the second clock face, and the second edge of the second color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face.

[0018] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to display a first clock face via the display device, the first clock face including a plurality of clock hands including a first clock hand and a second clock hand, and a color gradient of the first clock face, the color gradient of the first clock face including a gradual transition from a first color at a first edge of the color gradient of the first clock face to a second color at a second edge of the color gradient of the first clock face, the first edge of the color gradient of the first clock face being selected based on the position of the first clock hand of the first clock face, and the second edge of the color gradient of the first clock face being selected based on the position of the first clock hand of the first clock face, the instruction to detect a sequence of one or more inputs corresponding to a request to edit the first clock face, and the detection of a sequence of one or more inputs corresponding to a request to edit the first clock face. Accordingly, a second clock face is displayed via a display device, the second clock face comprising a plurality of clock hands including the hands of a first clock and the hands of a second clock, a first color gradient of the second clock face, and a second color gradient of the second clock face, wherein the first color gradient of the second clock face comprises a gradual transition from a first color at the first edge of the first color gradient of the second clock face to a second color at the second edge of the first color gradient of the second clock face, and the first edge of the first color gradient of the second clock face is The second edge of the first color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face, and the second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face to a second color at the second edge of the second color gradient of the second clock face, and the second edge of the second color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face.

[0019] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, wherein the one or more programs include an instruction via the display device for displaying a first clock face, the first clock face including a plurality of clock hands, including a first clock hand and a second clock hand, and a color gradient of the first clock face, the color gradient of the first clock face including a gradual transition from a first color at a first edge of the color gradient of the first clock face to a second color at a second edge of the color gradient of the first clock face, the first edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, and the second edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, and an instruction for detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, and detecting a sequence of one or more inputs corresponding to a request to edit the first clock face. In response to this, a second clock face is displayed via a display device, the second clock face comprising a plurality of clock hands including the hands of a first clock and the hands of a second clock, a first color gradient of the second clock face, and a second color gradient of the second clock face, wherein the first color gradient of the second clock face comprises a gradual transition from a first color at the first edge of the first color gradient of the second clock face to a second color at the second edge of the first color gradient of the second clock face, and the first edge of the first color gradient of the second clock face is The second edge of the first color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face, and the second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face to a second color at the second edge of the second color gradient of the second clock face, and the second edge of the second color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face.

[0020] In some embodiments, the electronic device includes a display device, means for displaying a first clock face via the display device, the first clock face including a plurality of clock hands, including a first clock hand and a second clock hand, and a color gradient of the first clock face, the color gradient of the first clock face including a gradual transition from a first color at a first edge of the color gradient of the first clock face to a second color at a second edge of the color gradient of the first clock face, the first edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, and the second edge of the color gradient of the first clock face being selected based on the position of a first clock hand of the first clock face, means for detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, and means for displaying a second clock face via the display device in response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face. The second clock face includes a plurality of clock hands, including the hands of the first clock and the hands of the second clock, a first color gradient of the second clock face, and a second color gradient of the second clock face, wherein the first color gradient of the second clock face includes a gradual transition from a first color at the first edge of the first color gradient of the second clock face to a second color at the second edge of the first color gradient of the second clock face, and the first edge of the first color gradient of the second clock face is the position of the hands of the first clock on the second clock face The second edge of the first color gradient of the second clock face is selected based on the position of the second clock hands of the second clock face, and the second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face to a second color at the second edge of the second color gradient of the second clock face, and the second edge of the second color gradient of the second clock face is selected based on the position of the first clock hands of the second clock face.

[0021] In some embodiments, the method is an electronic device having a display device that receives a request to display a clock face, and in response to receiving the request to display a clock face, displays a clock face at a first time via the display device according to a determination that the current time is a first time, wherein the clock face at the first time includes a digital time display indicating the first time, and segments including a first edge at a first position and a second edge at a second position, the first edge at the first position indicating a first time unit of the first time, and the second position The second edge of the clock face indicates a second time unit of a first time, and the clock face is displayed in the second time via a display device in accordance with the determination that the current time is a second time different from the first time, wherein the clock face in the second time includes a digital time display indicating the first time and a segment including the first edge and the second edge, the first edge being in a third position and the second edge being in a fourth position, the first edge in the third position indicating a first time unit of the second time, and the second edge in the fourth position indicating a second time unit of the second time.

[0022] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to receive a request to display a clock face, and an instruction to display a clock face at a first time via the display device in response to receiving a request to display a clock face, in accordance with a determination that the current time is a first time, wherein the clock face at the first time includes a digital time display indicating the first time, and a segment including a first edge at a first position and a second edge at a second position, The present invention includes a command in which a first edge of a position indicates a first time unit of a first time, and a second edge of a second position indicates a second time unit of a first time, and a command to display a clock face in a second time via a display device in accordance with a determination that the current time is a second time different from the first time, wherein the clock face in the second time includes a digital time display indicating the first time, and a segment including a first edge and a second edge, the first edge being in a third position, the second edge being in a fourth position, the first edge of the third position indicating a first time unit of a second time, and the second edge of the fourth position indicating a second time unit of a second time.

[0023] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include an instruction to receive a request to display a clock face, and an instruction to display a clock face at a first time via the display device in response to receiving a request to display a clock face, in accordance with a determination that the current time is a first time, wherein the clock face at the first time includes a digital time display indicating the first time, and a segment including a first edge at a first position and a second edge at a second position, and the first The present invention includes a command in which a first edge of a position indicates a first time unit of a first time, and a second edge of a second position indicates a second time unit of a first time, and a command to display a clock face in a second time via a display device in accordance with a determination that the current time is a second time different from the first time, wherein the clock face in the second time includes a digital time display indicating the first time, and a segment including a first edge and a second edge, the first edge being in a third position, the second edge being in a fourth position, the first edge of the third position indicating a first time unit of a second time, and the second edge of the fourth position indicating a second time unit of a second time.

[0024] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, wherein the one or more programs include an instruction for receiving a request to display a clock face, and an instruction for displaying a clock face at a first time via the display device, in response to receiving a request to display a clock face, according to a determination that the current time is a first time, wherein the clock face at the first time includes a digital time display indicating the first time, and a segment including a first edge at a first position and a second edge at a second position, The command includes: a command in which a first edge of position 1 indicates a first time unit of a first time, and a second edge of position 2 indicates a second time unit of a first time; and a command to display a clock face in a second time via a display device, in accordance with the determination that the current time is a second time different from the first time, wherein the clock face in the second time includes a digital time display indicating the first time, and a segment including a first edge and a second edge, the first edge being in a third position, the second edge being in a fourth position, the first edge of the third position indicating a first time unit of a second time, and the second edge of the fourth position indicating a second time unit of a second time.

[0025] In some embodiments, an electronic device includes a display device, means for receiving a request to display a clock face, and means for displaying, in accordance with a determination that the current time is a first time, via the display device, a clock face at the first time, wherein the clock face at the first time includes a digital time display indicating the first time and a segment including a first edge at a first position and a second edge at a second position, the first edge at the first position indicating a first time unit of the first time, and the second edge at the second position indicating a second time unit of the first time; and means for displaying, in accordance with a determination that the current time is a second time different from the first time, via the display device, a clock face at the second time, wherein the clock face at the second time includes a digital time display indicating the first time and a segment including the first edge and the second edge, the first edge being at a third position and the second edge being at a fourth position, the first edge at the third position indicating a first time unit of the second time, and the second edge at the fourth position indicating a second time unit of the second time.

[0026] In some embodiments, a method includes, in an electronic device having a display device, displaying, via the display device, a first clock face having respective layouts, the layouts including a first time display presented in a first format at a first position within each layout and a first complication at a second position within each layout; detecting a sequence of one or more inputs corresponding to a request to edit the first clock face; and displaying, via the display device, a second clock face having respective layouts, in response to detecting the sequence of one or more inputs corresponding to a request to edit the first clock face, the layouts including a second time display presented in a second format different from the first format at a first position within each layout and a first complication at a second position within each layout.

[0027] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include: an instruction to display a first clock face having corresponding layouts via the display device, wherein the layouts include a first time display presented in a first format at a first position in each layout and a first complication at a second position in each layout; detecting a sequence of one or more inputs corresponding to a request to edit the first clock face; and, in response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, displaying a second clock face having respective layouts via the display device, wherein the layouts include a second time display presented in a second format different from the first format at a first position in each layout and a first complication at a second position in each layout.

[0028] In some embodiments, the non-transitory computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, and the one or more programs include instructions to display, via the display device, a first clock face having respective corresponding layouts, the layouts including a first time display presented according to a first format at a first position within each layout and a first complication at a second position within each layout, instructions to detect one or more sequences of inputs corresponding to a request to edit the first clock face, and in response to detecting one or more sequences of inputs corresponding to a request to edit the first clock face, to display, via the display device, a second clock face having respective layouts, the layouts including a second time display presented according to a second format different from the first format at a first position within each layout and a first complication at a second position within each layout.

[0029] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, wherein the one or more programs include instructions for displaying a first clock face having a layout, the layout including a first time display presented according to a first format at a first position in the layout and a first complication at a second position in the layout; detecting a sequence of one or more inputs corresponding to a request to edit the first clock face; and, in response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, displaying a second clock face having a layout, the layout including a second time display presented according to a second format different from a first format at a first position in the layout and a first complication at a second position in the layout.

[0030] In some embodiments, the electronic device includes a display device, means for displaying a first clock face having a layout, the layout including a first time display presented in a first format at a first position within the layout, and a first complication at a second position within the layout, means for detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, and means for displaying a second clock face having a layout, the layout including a second time display presented in a second format different from the first format at a first position within the layout, and a first complication at a second position within the layout.

[0031] In some embodiments, the method includes, in an electronic device equipped with a display device, receiving a first request to display a clock face, and in response to receiving the first request to display a clock face, displaying a clock face having a display of a first time, wherein the clock face at the first time includes an analog dial representing a 24-hour period and a plug-in time indicator at a first position on the clock face inside the analog dial, the plug-in time indicator indicating the first time; and receiving a second request to display a clock face, and in response to receiving the second request to display a clock face, displaying a second time indicator on the clock face different from the first time, wherein the clock face at the second time includes an analog dial representing a 24-hour period and a plug-in time indicator at a second position inside the clock face inside the analog dial, different from a first position on the clock face inside the analog dial, the plug-in time indicator indicating the second time.

[0032] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include instructions for receiving a first request to display a clock face, and, in response to receiving the first request to display a clock face, displaying a clock face having a first time display via the display device, the clock face at the first time having an analog dial representing a 24-hour period, and an insertion time at a first position on the clock face inside the analog dial. A display device that includes a display, wherein the inserted time display indicates a first time; a second request to display a clock face; and, in response to receiving the second request to display a clock face, a second time display different from the first time on the clock face via a display device, wherein the clock face at the second time includes an analog dial representing a 24-hour period, and an inserted time display at a second position inside the clock face inside the analog dial, different from a first position on the clock face inside the analog dial, wherein the inserted time display indicates the second time.

[0033] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include instructions for receiving a first request to display a clock face, and, in response to receiving the first request to display a clock face, displaying a clock face having a first time display via the display device, wherein the clock face at the first time has an analog dial representing a 24-hour period and an insert time at a first position on the clock face inside the analog dial A display device that includes a display, wherein the inserted time display indicates a first time; a second request to display a clock face; and, in response to receiving the second request to display a clock face, a second time display different from the first time on the clock face via a display device, wherein the clock face at the second time includes an analog dial representing a 24-hour period, and an inserted time display at a second position inside the clock face inside the analog dial, different from a first position on the clock face inside the analog dial, wherein the inserted time display indicates the second time.

[0034] In some embodiments, the electronic device includes a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, wherein one or more programs include an instruction for receiving a first request to display a clock face, and, in response to receiving the first request to display a clock face, displaying a clock face having a first time, wherein the clock face at the first time has an analog dial representing a 24-hour period, and a first position on the clock face inside the analog dial. A clock face includes a time display, the insert time display indicating a first time, a second request to display a clock face, and, in response to receiving the second request to display a clock face, a second time display different from the first time on the clock face via a display device, wherein the clock face at the second time includes an analog dial representing a 24-hour period, and an insert time display at a second position inside the clock face inside the analog dial, different from a first position on the clock face inside the analog dial, the insert time display indicating the second time.

[0035] In some embodiments, the electronic device includes a display device, means for receiving a first request to display a clock face, means for displaying a clock face having a display of a first time via the display device in response to receiving a first request to display a clock face, wherein the clock face at the first time includes an analog dial representing a 24-hour period and a plug-in time indicator at a first position on the clock face inside the analog dial, the plug-in time indicator indicating the first time, means for receiving a second request to display a clock face, and means for displaying a second time indicator on the clock face via the display device in response to receiving a second request to display a clock face, wherein the clock face at the second time includes an analog dial representing a 24-hour period and a plug-in time indicator at a second position inside the clock face inside the analog dial, different from a first position on the clock face inside the analog dial, the plug-in time indicator indicating the second time, and

[0036] In some embodiments, the method is to display a selection user interface for selecting a watch face from a plurality of watch faces in an electronic device having a display device, via the display device, wherein the display of the selection user interface for selecting a watch face from a plurality of watch faces includes displaying at least a portion of two or more different watch faces from the plurality of watch faces, including displaying a first watch face from the plurality of watch faces in a first size; detecting user input at a position corresponding to the first watch face while the selection user interface for selecting a watch face from a plurality of watch faces is displayed via the display device, and in response to the detection of user input, determining that the user input satisfies a first input criterion, displaying via the display device in a size larger than the first size Displaying a first clock face in a larger second size; displaying a sorting user interface for sorting multiple clock faces via a display device in accordance with a determination that user input satisfies a second input criterion different from the first input criterion, wherein displaying the sorting user interface for sorting multiple clock faces includes displaying at least portions of three or more clock faces, including the first clock face and at least portions of clock faces that were not displayed before the detection of user input; detecting a movement corresponding to the first clock face while the sorting user interface is displayed; and, in response to the detection of a movement corresponding to the first clock face, moving the first clock face relative to one or more of the other clock faces in the sorting user interface in accordance with the detected movement.

[0037] In some embodiments, a non-temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include instructions for displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, the instructions for displaying a selection user interface for selecting a watch face from a plurality of watch faces including displaying a first watch face from the plurality of watch faces in a first size, and displaying at least a portion of two or more different watch faces from the plurality of watch faces; and detecting user input at a position corresponding to the first watch face while displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, and in response to detecting user input, determining whether the user input satisfies a first input criterion. In accordance with the determination, the first clock face is displayed via a display device in a second size larger than a first size; and in accordance with the determination that user input satisfies a second input criterion different from the first input criterion, a sorting user interface for sorting multiple clock faces is displayed via a display device, wherein the displaying of the sorting user interface for sorting multiple clock faces includes displaying at least a portion of three or more clock faces, including the first clock face and at least a portion of clock faces that were not displayed before the detection of user input; and while the sorting user interface is displayed, a movement corresponding to the first clock face is detected; and in response to the detection of a movement corresponding to the first clock face, the first clock face is moved relative to one or more of the other clock faces in the sorting user interface according to the detected movement.

[0038] In some embodiments, a temporary computer-readable storage medium stores one or more programs configured to be executed by one or more processors of an electronic device having a display device, the one or more programs include instructions for displaying a selection user interface for selecting a clock face from a plurality of clock faces via the display device, the instructions for displaying a selection user interface for selecting a clock face from a plurality of clock faces including displaying a first clock face from the plurality of clock faces in a first size, and displaying at least a portion of two or more different clock faces from the plurality of clock faces; and detecting user input at a position corresponding to the first clock face while displaying the selection user interface for selecting a clock face from a plurality of clock faces via the display device, and in response to detecting user input, determining whether the user input satisfies a first input criterion. In accordance with the determination, the first clock face is displayed via a display device in a second size larger than a first size; and in accordance with the determination that user input satisfies a second input criterion different from the first input criterion, a sorting user interface for sorting multiple clock faces is displayed via a display device, wherein the displaying of the sorting user interface for sorting multiple clock faces includes displaying at least a portion of three or more clock faces, including the first clock face and at least a portion of clock faces that were not displayed before the detection of user input; and while the sorting user interface is displayed, a movement corresponding to the first clock face is detected; and in response to the detection of a movement corresponding to the first clock face, the first clock face is moved relative to one or more of the other clock faces in the sorting user interface according to the detected movement.

[0039] In some embodiments, the electronic device comprises a display device, one or more processors, and a memory for storing one or more programs configured to be executed by the one or more processors, wherein the one or more programs include instructions for displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, the instructions including displaying at least a portion of two or more different watch faces from the plurality of watch faces, the instructions including displaying a first watch face from the plurality of watch faces in a first size, and detecting user input at a position corresponding to the first watch face while the selection user interface for selecting a watch face from a plurality of watch faces is being displayed via the display device, and in response to detecting user input, determining whether the user input satisfies a first input criterion. In accordance with the determination, the first clock face is displayed via a display device in a second size larger than a first size; and in accordance with the determination that user input satisfies a second input criterion different from the first input criterion, a sorting user interface for sorting multiple clock faces is displayed via a display device, wherein the displaying of the sorting user interface for sorting multiple clock faces includes displaying at least a portion of three or more clock faces, including the first clock face and at least a portion of clock faces that were not displayed before the detection of user input; and while the sorting user interface is displayed, a movement corresponding to the first clock face is detected; and in response to the detection of a movement corresponding to the first clock face, the first clock face is moved relative to one or more of the other clock faces in the sorting user interface according to the detected movement.

[0040] In some embodiments, the electronic device includes a display device, means for displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, the means for displaying a selection user interface for selecting a watch face from a plurality of watch faces including displaying a first watch face from the plurality of watch faces in a first size, and displaying at least a portion of two or more different watch faces from the plurality of watch faces, the means for detecting user input at a position corresponding to the first watch face while displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, and, in response to detecting user input, in accordance with the determination that the user input satisfies a first input criterion, the means for displaying a second watch face larger than the first size via the display device The means for displaying a first clock face in size 2, and means for displaying a sorting user interface for sorting a plurality of clock faces via a display device in accordance with a determination that user input satisfies a second input criterion different from a first input criterion, wherein displaying the sorting user interface for sorting a plurality of clock faces includes displaying at least a portion of three or more clock faces, including the first clock face and at least a portion of clock faces that were not displayed before the detection of user input, and means for detecting a movement corresponding to the first clock face while the sorting user interface is being displayed, and means for moving the first clock face to one or more of the other clock faces in the sorting user interface in accordance with the detected movement in response to the detection of a movement corresponding to the first clock face.

[0041] The executable instructions that perform these functions are optionally contained within a non-temporary computer-readable storage medium or other computer program product configured to be executed by one or more processors.

[0042] As a result, devices are provided with faster and more efficient methods and interfaces for presenting and interacting with the watch face, thereby increasing the effectiveness, efficiency, and user satisfaction of such devices. Such methods and interfaces can complement or replace other methods for presenting and interacting with the watch face. [Brief explanation of the drawing]

[0043] To better understand the various embodiments described, the following “Modes for Carrying Out the Invention” should be referenced in conjunction with the following drawings, and similar reference numbers throughout the following drawings refer to the corresponding parts.

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

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

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

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

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

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

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

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

[0052] [Figure 5C] The following are exemplary components of a personal electronic device having a touch-sensitive display and an intensity sensor, according to several embodiments. [Figure 5D] The following are exemplary components of a personal electronic device having a touch-sensitive display and an intensity sensor, according to several embodiments.

[0053] [Figure 5E] The following are exemplary components and user interfaces of personal electronic devices according to several embodiments. [Figure 5F] The following are exemplary components and user interfaces of personal electronic devices according to several embodiments. [Figure 5G] The following are exemplary components and user interfaces of personal electronic devices according to several embodiments. [Figure 5H] The following are exemplary components and user interfaces of personal electronic devices according to several embodiments.

[0054] [Figure 6A] This figure shows an exemplary user interface according to several embodiments. [Figure 6B] This figure shows an exemplary user interface according to several embodiments. [Figure 6C]This figure shows an exemplary user interface according to several embodiments. [Figure 6D] This figure shows an exemplary user interface according to several embodiments. [Figure 6E] This figure shows an exemplary user interface according to several embodiments. [Figure 6F] This figure shows an exemplary user interface according to several embodiments. [Figure 6G] This figure shows an exemplary user interface according to several embodiments. [Figure 6H] This figure shows an exemplary user interface according to several embodiments. [Figure 6I] This figure shows an exemplary user interface according to several embodiments. [Figure 6J] This figure shows an exemplary user interface according to several embodiments.

[0055] [Figure 7] This figure shows an exemplary method according to several embodiments.

[0056] [Figure 8A] This figure shows an exemplary user interface according to several embodiments. [Figure 8B] This figure shows an exemplary user interface according to several embodiments. [Figure 8C] This figure shows an exemplary user interface according to several embodiments. [Figure 8D] This figure shows an exemplary user interface according to several embodiments. [Figure 8E] This figure shows an exemplary user interface according to several embodiments. [Figure 8F] This figure shows an exemplary user interface according to several embodiments. [Figure 8G]This figure shows an exemplary user interface according to several embodiments. [Figure 8H] This figure shows an exemplary user interface according to several embodiments. [Figure 8I] This figure shows an exemplary user interface according to several embodiments. [Figure 8J] This figure shows an exemplary user interface according to several embodiments. [Figure 8K] This figure shows an exemplary user interface according to several embodiments. [Figure 8L] This figure shows an exemplary user interface according to several embodiments. [Figure 8M] This figure shows an exemplary user interface according to several embodiments. [Figure 8N] This figure shows an exemplary user interface according to several embodiments. [Figure 8O] This figure shows an exemplary user interface according to several embodiments. [Figure 8P] This figure shows an exemplary user interface according to several embodiments. [Figure 8Q] This figure shows an exemplary user interface according to several embodiments. [Figure 8R] This figure shows an exemplary user interface according to several embodiments. [Figure 8S] This figure shows an exemplary user interface according to several embodiments. [Figure 8T] This figure shows an exemplary user interface according to several embodiments.

[0057] [Figure 9] This figure shows an exemplary method according to several embodiments.

[0058] [Figure 10A]This figure shows an exemplary user interface according to several embodiments. [Figure 10B] This figure shows an exemplary user interface according to several embodiments. [Figure 10C] This figure shows an exemplary user interface according to several embodiments. [Figure 10D] This figure shows an exemplary user interface according to several embodiments. [Figure 10E] This figure shows an exemplary user interface according to several embodiments. [Figure 10F] This figure shows an exemplary user interface according to several embodiments. [Figure 10G] This figure shows an exemplary user interface according to several embodiments. [Figure 10H] This figure shows an exemplary user interface according to several embodiments. [Figure 10I] This figure shows an exemplary user interface according to several embodiments. [Figure 10J] This figure shows an exemplary user interface according to several embodiments. [Figure 10K] This figure shows an exemplary user interface according to several embodiments. [Figure 10L] This figure shows an exemplary user interface according to several embodiments. [Figure 10M] This figure shows an exemplary user interface according to several embodiments. [Figure 10N] This figure shows an exemplary user interface according to several embodiments.

[0059] [Figure 11] This figure shows an exemplary method according to several embodiments.

[0060] [Figure 12A]This figure shows an exemplary user interface according to several embodiments. [Figure 12B] This figure shows an exemplary user interface according to several embodiments. [Figure 12C] This figure shows an exemplary user interface according to several embodiments. [Figure 12D] This figure shows an exemplary user interface according to several embodiments. [Figure 12E] This figure shows an exemplary user interface according to several embodiments. [Figure 12F] This figure shows an exemplary user interface according to several embodiments. [Figure 12G] This figure shows an exemplary user interface according to several embodiments. [Figure 12H] This figure shows an exemplary user interface according to several embodiments. [Figure 12I] This figure shows an exemplary user interface according to several embodiments. [Figure 12J] This figure shows an exemplary user interface according to several embodiments. [Figure 12K] This figure shows an exemplary user interface according to several embodiments. [Figure 12L] This figure shows an exemplary user interface according to several embodiments. [Figure 12M] This figure shows an exemplary user interface according to several embodiments.

[0061] [Figure 13] This figure shows an exemplary method according to several embodiments.

[0062] [Figure 14A] This figure shows an exemplary user interface according to several embodiments. [Figure 14B]This figure shows an exemplary user interface according to several embodiments. [Figure 14C] This figure shows an exemplary user interface according to several embodiments. [Figure 14D] This figure shows an exemplary user interface according to several embodiments. [Figure 14E] This figure shows an exemplary user interface according to several embodiments. [Figure 14F] This figure shows an exemplary user interface according to several embodiments. [Figure 14G] This figure shows an exemplary user interface according to several embodiments. [Figure 14H] This figure shows an exemplary user interface according to several embodiments.

[0063] [Figure 15] This figure shows an exemplary method according to several embodiments.

[0064] [Figure 16A] This figure shows an exemplary user interface according to several embodiments. [Figure 16B] This figure shows an exemplary user interface according to several embodiments. [Figure 16C] This figure shows an exemplary user interface according to several embodiments. [Figure 16D] This figure shows an exemplary user interface according to several embodiments. [Figure 16E] This figure shows an exemplary user interface according to several embodiments. [Figure 16F] This figure shows an exemplary user interface according to several embodiments. [Figure 16G] This figure shows an exemplary user interface according to several embodiments. [Figure 16H]This figure shows an exemplary user interface according to several embodiments. [Figure 16I] This figure shows an exemplary user interface according to several embodiments. [Figure 16J] This figure shows an exemplary user interface according to several embodiments. [Figure 16K] This figure shows an exemplary user interface according to several embodiments.

[0065] [Figure 17] This figure shows an exemplary method according to several embodiments.

[0066] [Figure 18A] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18B] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18C] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18D] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18E] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18F] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18G] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18H] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18I]This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18J] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18K] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments. [Figure 18L] This figure shows an exemplary user interface for rearranging clock faces according to several embodiments.

[0067] [Figure 19A] This figure shows an exemplary method for rearranging a clock face according to several embodiments. [Figure 19B] This figure shows an exemplary method for rearranging a clock face according to several embodiments. [Modes for carrying out the invention]

[0068] The following description includes exemplary methods, parameters, etc. However, it should be noted that such descriptions are not intended to limit the scope of this disclosure, but rather are provided as descriptions of exemplary embodiments.

[0069] There is a need for an electronic device that provides an efficient method and interface for presenting and interacting with a clock face. According to some embodiments, elements of the analog dial of a clock face are displayed based on a determination of whether another graphical element (e.g., a notification or complication) should be displayed on the clock face. According to some embodiments, the time display is displayed according to a selected language, while the language in which other graphical elements (e.g., complications) on the clock face are displayed is maintained. According to some embodiments, the device displays a clock face including a gradient that is displayed based on the position of the clock hands, and in response to input, the device displays a clock face with two gradients, the display of the two gradients being based on the positions of the two clock hands. According to some embodiments, the clock face is displayed with a digital time display and a segment having two edges, the positions of the two edges of the segment indicating the hours and minutes of the time. According to some embodiments, the format of the time display on the clock face is changed in response to input, but the layout of the clock face and the positions of other graphical elements remain the same. According to some embodiments, the watch face is displayed using an analog dial representing a 24-hour period and an embedded time display inside the analog dial indicating the current time, with the position of the embedded time display based on the current time. Such technology can reduce the cognitive burden on users viewing activity trends and / or managing training, thereby increasing productivity. Furthermore, such technology can reduce the power of the processor and battery that would normally be wasted on redundant user input.

[0070] Figures 1A-1B, 2, 3, 4A-4B, and 5A-5H below describe exemplary devices that perform techniques for presenting and interacting with a clock face. Figures 6A-6J, 8A-8T, 10A-10N, 12A-12M, 14A-14H, and 16A-16K show exemplary user interfaces for presenting and interacting with a clock face. Figures 7, 9, 11, 13, 15, and 17 are flowcharts illustrating methods for presenting and interacting with a clock face according to several embodiments. The user interfaces in Figures 6A-6J are used to illustrate processes described later, including the process in Figure 7. The user interfaces in Figures 8A-8T are used to illustrate processes described later, including the process in Figure 9. The user interfaces in Figures 10A-10N are used to illustrate processes described later, including the process in Figure 11. The user interfaces in Figures 12A-12M are used to illustrate processes described later, including the process in Figure 13. The user interfaces in Figures 14A to 14H are used to illustrate processes described later, including the process in Figure 15. The user interfaces in Figures 16A to 16K are used to illustrate processes described later, including the process in Figure 17. Figures 19A and 19B are flowcharts illustrating exemplary methods for rearranging clock faces according to several embodiments. Figures 18A to 18L are used to illustrate processes described later, including the processes in Figures 19A and 19B.

[0071] In the following description, terms such as “first,” “second,” etc., are used to describe various elements, but these elements should not be limited by these terms. These terms are used solely to distinguish one element from another. For example, without departing from the scope of the various embodiments described, the first touch may be called the second touch, and similarly, the second touch may be called the first touch. Both the first touch and the second touch are touches, but they are not the same touch.

[0072] The terminology used in the descriptions of the various embodiments described herein is intended solely to describe specific embodiments and is not intended to be limiting. In the descriptions of the various embodiments and the accompanying claims, the singular forms “a,” “an,” and “the” are intended to include the plural forms as well, unless otherwise explicitly stated in the context. Furthermore, it should be understood that, as used herein, the term “and / or” refers to and includes any and all possible combinations of one or more of the enumerated items relating to the description. It will be further understood that, as used herein, the terms “includes,” “comprises,” and / or “comprising” specify the presence of the described features, integers, steps, actions, elements, and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, actions, elements, components, and / or groups thereof.

[0073] The phrase "if" can be interpreted, at will, depending on the context, as "when" or "upon," or "in response to determining" or "in response to detecting." Similarly, the phrases "if it is determined" or "if [a stated condition or event] is detected" can be interpreted, at will, depending on the context, as "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]."

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

[0075] The following discussion describes electronic devices including displays and touch-sensitive surfaces. However, it should be understood that electronic devices optionally include one or more other physical user interface devices such as physical keyboards, mice, and / or joysticks.

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

[0077] Various applications running on this device optionally utilize at least one common physical user interface device, such as a touch-sensitive surface. One or more functions of the touch-sensitive surface, as well as the corresponding information displayed on the device, are optionally adjusted and / or modified on an application-by-application basis and / or within each application. In this way, the device's common physical architecture (such as the touch-sensitive surface) optionally supports a variety of applications with intuitive and transparent user interfaces for the user.

[0078] Here, we turn our attention to embodiments of portable devices having a touch-sensitive display. Figure 1A is a block diagram of a portable multifunction device 100 having a touch-sensitive display system 112 according to several embodiments. The touch-sensitive display 112 may be conveniently referred to as a “touchscreen” and may be known or referred to as a “touch-sensitive display system”. Device 100 includes a memory 102 (optionally including one or more computer-readable storage media), a memory controller 122, one or more processing units (CPUs) 120, a peripheral interface 118, an RF circuit 108, an audio circuit 110, a speaker 111, a microphone 113, an input / output (I / O) subsystem 106, other input control devices 116, and an external port 124. Device 100 optionally includes one or more optical sensors 164. Device 100 optionally includes one or more contact intensity sensors 165 (e.g., touch-sensitive surfaces such as the touch-sensitive display system 112 of Device 100) that detect the intensity of contact on Device 100. Device 100 optionally includes one or more tactile output generators 167 that generate tactile outputs on Device 100 (for example, on touch-sensitive surfaces such as the touch-sensitive display system 112 of Device 100 or the touchpad 355 of Device 300). These components optionally communicate via one or more communication buses or signal lines 103.

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

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

[0081] It should be understood that device 100 is merely an example of a portable multifunction device, and that device 100 may optionally have more or fewer components than those shown, may optionally combine two or more components, or may optionally have different configurations or arrangements of those components. The various components shown in Figure 1A are implemented in hardware, software, or a combination of both hardware and software, including one or more signal processing circuits and / or application-specific integrated circuits.

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

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

[0084] The RF (radio frequency) circuit 108 transmits and receives RF signals, also known as electromagnetic signals. The RF circuit 108 converts electrical signals to electromagnetic signals or electromagnetic signals to electrical signals and communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 108 optionally includes well-known circuits for performing these functions, which include, but are not limited to, antenna systems, RF transceivers, one or more amplifiers, tuners, one or more oscillators, digital signal processors, CODEC chipsets, subscriber identity module (SIM) cards, and memory. The RF circuit 108 optionally communicates wirelessly with networks such as the Internet, also known as the World Wide Web (WWW), intranets, and / or wireless networks such as cellular telephone networks, wireless local area networks (LANs), and / or metropolitan area networks (MANs), as well as with other devices. The RF circuit 108 optionally includes a well-known circuit for detecting a near-field communication (NFC) field using a short-range communication radio. Wireless communication is not limited to this, but optionally includes 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-HSPADA), and long-term evolution.Evolution (LTE), Near Field Communication (NFC), Wideband Code Division Multiple Access (W-CDMA), Code Division Multiple Access (CDMA), Time Division Multiple Access (TDMA), Bluetooth, Bluetooth Low Energy (BTLE), Wireless Fidelity (Wi-Fi) (e.g., IEEE 802.11a, IEEE 802.11b, IEEE 802.11g, IEEE 802.11n, and / or IEEE 802.11ac), Voice over Internet Protocol (VoIP), Wi-MAX, Email protocols (e.g., Internet Message Access Protocol (IMAP) and / or Post Office Protocol (POP)), Instant messaging (e.g., Extensible Messaging and Presence Protocol) Using any of several communication standards, protocols, and technologies, including the XMPP protocol, the Session Initiation Protocol for Instant Messaging and Presence Leveraging Extensions (SIMPLE), the Instant Messaging and Presence Service (IMPS), and / or the Short Message Service (SMS), or any other suitable communication protocol, including a communication protocol not yet developed as of the filing date of this specification.

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

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

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

[0088] The touch-sensitive display 112 provides input and output interfaces between the device and the user. The display controller 156 receives electrical signals from and / or transmits electrical signals to the touchscreen 112. The touchscreen 112 displays a visual output to the user. This visual output optionally includes graphics, text, icons, videos, and any combination thereof (collectively, “graphics”). In some embodiments, some or all of the visual output optionally corresponds to user interface objects.

[0089] The touchscreen 112 has a touch-sensing surface, sensor, or set of sensors that accept user input based on touch and / or tactile contact. The touchscreen 112 and the display controller 156 (together with any associated modules and / or instruction sets in memory 102) detect contact (and any movement or interruption of contact) on the touchscreen 112 and translate the detected contact into interaction with user interface objects displayed on the touchscreen 112 (e.g., one or more soft keys, icons, web pages, or images). In an exemplary embodiment, the point of contact between the touchscreen 112 and the user corresponds to the user's finger.

[0090] The touchscreen 112 optionally uses LCD (liquid crystal display) technology, LPD (polymer light-emitting display) technology, or LED (light-emitting diode) technology, but other display technologies may also be used in other embodiments. The touchscreen 112 and the display controller 156 optionally, but not limited to, use any of a number of currently known or future-developed touch sensing technologies, including capacitive, resistive, infrared, and surface acoustic technologies, as well as other proximity sensor arrays or other elements that determine one or more points of contact with the touchscreen 112, to detect contact and any movement or interruption thereof. In exemplary embodiments, projected mutual capacitive sensing technology is used, such as that found in the iPhone® and iPod Touch® from Apple Inc. of Cupertino, California.

[0091] The touch-sensitive displays in some embodiments of the touchscreen 112 are optionally similar to the multi-touch-sensitive touchpads described in U.S. Patent No. 6,323,846 (Westerman et al.), No. 6,570,557 (Westerman et al.), and / or No. 6,677,932 (Westerman), and / or U.S. Patent Publication No. 2002 / 0015024(A1), which are each incorporated herein in whole by reference. However, the touchscreen 112 displays visual output from device 100, whereas the touch-sensitive touchpad does not provide visual output.

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

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

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

[0095] Device 100 also includes a power system 162 that supplies power to various components. The power system 162 optionally includes a power management system, one or more power sources (e.g., a battery, alternating current (AC)), a recharge system, a power failure detection circuit, a power converter or inverter, a power status indicator (e.g., a light-emitting diode (LED)), and any other components associated with generating, managing, and distributing power within the portable device.

[0096] The device 100 also optionally includes one or more optical sensors 164. Figure 1A shows optical sensors coupled to an optical sensor controller 158 in the I / O subsystem 106. The optical sensors 164 optionally include a charge-coupled device (CCD) or a complementary metal-oxide semiconductor (CMOS) phototransistor. The optical sensors 164 receive light from the environment projected through one or more lenses and convert that light into data representing an image. The optical sensors 164 work in conjunction with an imaging module 143 (also called a camera module) to optionally capture still images or video. In some embodiments, the optical sensors are located on the back of the device 100, opposite the touchscreen display 112 which is on the front of the device, so that the touchscreen display can be used as a viewfinder for acquiring still images and / or video. In some embodiments, the optical sensors are located on the front of the device so that the user's image is optionally acquired for video conferencing while the user is viewing other video conference participants on the touchscreen display. In some embodiments, the position of the light sensor 164 can be changed by the user (for example, by rotating the lens and sensor within the device housing), so that a single light sensor 164 can be used for both video conferencing and acquiring still images and / or videos, together with the touchscreen display.

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

[0098] Device 100 also optionally includes one or more contact intensity sensors 165. Figure 1A shows a contact intensity sensor coupled to an intensity sensor controller 159 in the I / O subsystem 106. The contact intensity sensor 165 optionally includes one or more piezoresistive strain gauges, capacitive force sensors, electric force sensors, pressure-power sensors, optical force sensors, capacitive touch-sensing surfaces, or other intensity sensors (e.g., sensors used to measure the force (or pressure) of contact on a touch-sensing surface). The contact intensity sensor 165 receives 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 positioned juxtaposed with or adjacent to a touch-sensing surface (e.g., a touch-sensing display system 112). In some embodiments, at least one contact intensity sensor is positioned on the back of Device 100, opposite the touchscreen display 112 located on the front of Device 100.

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

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

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

[0102] In some embodiments, the software components stored in memory 102 include an operating system 126, a communications module (or instruction set) 128, a contact / motion module (or instruction set) 130, a graphics module (or instruction set) 132, a text input module (or instruction set) 134, a Global Positioning System (GPS) module (or instruction set) 135, and an application (or instruction set) 136. Furthermore, in some embodiments, memory 102 (Figure 1A) or 370 (Figure 3) stores a device / global internal state 157, as shown in Figures 1A and 3. The device / global internal state 157 includes one or more of the following: an active application state indicating which application is active, if there is an application currently active; a display state indicating which applications, views, or other information occupy different areas of the touchscreen display 112; a sensor state including information obtained from various sensors and input control devices 116 of the device; and location information relating to the device's position and / or orientation.

[0103] An operating system 126 (for example, an embedded operating system such as Darwin, RTXC, LINUX, UNIX, OS X, iOS, WINDOWS, or VxWorks) includes various software components and / or drivers that control and manage general system tasks (e.g., memory management, storage control, power management, etc.) and facilitate communication between various hardware components and software components.

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

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

[0106] In some embodiments, the contact / motion module 130 uses a set of one or more intensity thresholds to determine whether an action has been performed by a user (for example, to determine whether a user has "clicked" on an icon). In some embodiments, at least one subset of the intensity thresholds is determined according to a software parameter (for example, the intensity thresholds can be adjusted without modifying the physical hardware of device 100, rather than being determined by the activation threshold of a particular physical actuator). For example, the mouse "click" threshold for a trackpad or touchscreen display can be set to one of a range of default thresholds without modifying the trackpad or touchscreen display hardware. In addition, in some implementations, the user of the device is provided with software settings to adjust one or more of the set of intensity thresholds (for example, by adjusting individual intensity thresholds and / or by adjusting multiple intensity thresholds at once using a system-level click "intensity" parameter).

[0107] The contact / motion module 130 optionally detects gesture input from the user. Different gestures on the touch-sensitive surface have different contact patterns (e.g., different motion, timing, and / or intensity of the detected contact). Therefore, gestures are optionally detected by detecting a specific contact pattern. For example, detecting a finger tap gesture involves detecting a finger down event, followed by a finger up (lift-off) event at the same location (or substantially the same location) as the finger down event (e.g., the location of an icon). As another example, detecting a finger swipe gesture on the touch-sensitive surface involves detecting a finger down event, followed by one or more finger drag events, and then a finger up (lift-off) event.

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

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

[0110] The haptic feedback module 133 includes various software components for generating commands used by the haptic output generator 167, which generates haptic outputs at one or more locations on the device 100 in response to the user's interaction with the device 100.

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

[0112] The GPS module 135 determines the location of the device and provides this information for use in various applications (for example, to the telephone 138 for use in location-based dialing, to the camera 143 as metadata for photos / videos, and to applications that provide location-based services such as weather widgets, local occupational phonebook widgets, and map / navigation widgets).

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

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

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

[0116] The telephone module 138 works in conjunction with the RF circuit 108, audio circuit 110, speaker 111, microphone 113, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134 to optionally input character sequences corresponding to telephone numbers, access one or more telephone numbers in the contact module 137, modify entered telephone numbers, dial each telephone number, make a call, and disconnect and terminate a call at the end of the call. As previously mentioned, wireless communication may optionally use any of several communication standards, protocols, and technologies.

[0117] The video conferencing module 139 works in conjunction with an RF circuit 108, an audio circuit 110, a speaker 111, a microphone 113, a touchscreen 112, a display controller 156, a light sensor 164, a light sensor controller 158, a contact / motion module 130, a graphics module 132, a text input module 134, a contact module 137, and a telephone module 138 to include executable commands for starting, running, and ending video conferences between the user and one or more other participants, according to the user's instructions.

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

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

[0120] The training support module 142 works in conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, GPS module 135, map module 154, and music player module to create training (e.g., with time, distance, and / or calorie burn goals), communicate with training sensors (sports devices), receive training sensor data, calibrate sensors used to monitor training, select and play music for training, and includes executable commands for displaying, storing, and transmitting training data.

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

[0122] The image management module 144 works in conjunction with the touchscreen 112, display controller 156, touch / motion module 130, graphics module 132, text input module 134, and camera module 143 to include executable commands for arranging, modifying (e.g., editing), or otherwise manipulating still images and / or videos, labeling, deleting, presenting (e.g., in a digital slideshow or album), and storing them.

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

[0124] The calendar module 148 works in conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, email client module 140, and browser module 147 to include executable commands for creating, displaying, modifying, and storing calendars and data associated with the calendar (e.g., calendar items, to-do lists, etc.) according to user instructions.

[0125] The widget module 149 works in conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and browser module 147 to optionally download and use mini-applications (e.g., weather widget 149-1, stock widget 149-2, calculator widget 149-3, alarm clock widget 149-4, and dictionary widget 149-5) or mini-applications created by the user (e.g., user-created widget 149-6). In some embodiments, the widget includes an HTML (Hypertext Markup Language) file, a CSS (Cascading Style Sheets) file, and a JavaScript file. In some embodiments, the widget includes an XML (Extensible Markup Language) file and a JavaScript file (e.g., Yahoo! widget).

[0126] The widget creator module 150 works in conjunction with the RF circuit 108, touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, text input module 134, and browser module 147 to be used by the user to optionally create widgets (for example, to turn a user-specified portion of a web page into a widget).

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

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

[0129] The memo module 153 works in conjunction with the touchscreen 112, display controller 156, contact / motion module 130, graphics module 132, and text input module 134 to include executable commands for creating and managing memos, to-do lists, etc., according to user instructions.

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

[0131] The online video module 155, in conjunction with the touchscreen 112, display controller 156, touch / motion module 130, graphics module 132, audio circuit 110, speaker 111, RF circuit 108, text input module 134, email client module 140, and browser module 147, includes instructions that enable the user to access a specific online video, browse a specific online video, receive it (e.g., by streaming and / or downloading), play it (e.g., on the touchscreen or on an external display connected via external port 124), send an email with a link to a specific online video, and perform other management of online videos in one or more file formats such as H.264. In some embodiments, an instant messaging module 141 is used instead of the email client module 140 to send a link to a specific online video. For further information regarding online video applications, please refer to U.S. Provisional Patent Application No. 60 / 936,562, “Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos,” filed June 20, 2007, and U.S. Patent Application No. 11 / 968,067, “Portable Multifunction Device, Method, and Graphical User Interface for Playing Online Videos,” filed December 31, 2007, the entire contents of which are incorporated herein by reference.

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

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

[0134] A default set of functions, which are performed only through the touchscreen and / or touchpad, optionally includes navigation between user interfaces. In some embodiments, the touchpad, when touched by the user, navigates the device 100 from any user interface displayed on the device 100 to the main menu, home menu, or root menu. In such embodiments, a “menu button” is implemented using the touchpad. In some other embodiments, the menu button is a physical push button or other physical input control device, rather than a touchpad.

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

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

[0137] In some embodiments, the application internal state 192 includes additional information such as resume information to be used when the application 136-1 resumes execution, user interface state information that indicates or is ready to display information displayed by the application 136-1, a state queue that allows the user to return to a previous state or view of the application 136-1, and one or more redo / undo queues of previous actions performed by the user.

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

[0139] In some embodiments, the event monitor 171 sends requests to the peripheral interface 118 at predetermined intervals. In response, the peripheral interface 118 transmits event information. In other embodiments, the peripheral interface 118 transmits event information only when there is a significant event (e.g., reception of input exceeding a predetermined noise threshold and / or exceeding a predetermined duration).

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

[0141] The hit view determination module 172 provides a software procedure for determining where in one or more views a sub-event occurred when the touch-sensitive display 112 is displaying two or more views. A view consists of control devices and other elements that the user can see on the display.

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

[0143] The hit view determination module 172 receives information related to sub-events of touch-based gestures. When an application has multiple views arranged in a hierarchy, the hit view determination module 172 identifies the hit view as the lowest-level view in the hierarchy from which the sub-events should be processed. In most situations, the hit view is the lowest-level view from which the initiating sub-event (e.g., the first sub-event in a sub-event sequence that forms an event or potential event) occurs. Once the hit view is identified by the hit view determination module 172, the hit view typically receives all sub-events related to the same touch or input source that was identified as the hit view.

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

[0145] The event dispatcher module 174 dispatches event information to an event recognition unit (e.g., an event recognition unit 180). In embodiments including an active event recognition unit determination module 173, the event dispatcher module 174 distributes the event information to the event recognition unit determined by the active event recognition unit determination module 173. In some embodiments, the event dispatcher module 174 stores the event information acquired by each event receiving unit 182 in an event queue.

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

[0147] In some embodiments, application 136-1 includes a plurality of event processing units 190 and one or more application views 191, each containing instructions for handling touch events occurring within each view of the application's user interface. Each application view 191 of application 136-1 includes one or more event recognition units 180. Typically, each application view 191 includes a plurality of event recognition units 180. In other embodiments, one or more of the event recognition units 180 are part of a separate module, such as a user interface kit or a higher-level object from which application 136-1 inherits methods and other properties. In some embodiments, each event processing unit 190 includes one or more of the following: a data update unit 176, an object update unit 177, a GUI update unit 178, and / or event data 179 received from an event sorter 170. The event processing unit 190 optionally uses or calls the data update unit 176, the object update unit 177, or the GUI update unit 178 to update the application's internal state 192. Alternatively, one or more of the application views 191 include one or more event processing units 190. In some embodiments, one or more of the data update unit 176, object update unit 177, and GUI update unit 178 are included in each application view 191.

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

[0149] The event receiving unit 182 receives event information from the event sorter 170. The event information includes information about sub-events, such as touches or the movement of touches. Depending on the sub-event, the event information also includes additional information, such as the position of the sub-event. When the sub-event involves the movement of a touch, the event information also optionally includes the speed and direction of the sub-event. In some embodiments, an event includes the rotation of the device from one orientation to another (e.g., from portrait to landscape, or vice versa), and the event information includes corresponding information about the current orientation of the device (also called the device's orientation).

[0150] The event comparison unit 184 compares event information with a predefined definition of an event or sub-event, and based on the comparison, determines an event or sub-event, or determines or updates the state of an event or sub-event. In some embodiments, the event comparison unit 184 includes an event definition 186. The event definition 186 includes definitions of events (e.g., a sequence of default sub-events), such as event 1 (187-1) and event 2 (187-2). In some embodiments, sub-events within event (187) include, for example, touch start, touch end, touch movement, touch cancel, and multiple touches. In one embodiment, the definition for event 1 (187-1) is a double tap on a displayed object. A double tap includes, for example, a first touch on the displayed object for a predetermined stage (touch start), a first lift-off for the predetermined stage (touch end), a second touch on the displayed object for the predetermined stage (touch start), and a second lift-off for the predetermined stage (touch end). In another embodiment, event 2(187-2) is defined as a drag on a displayed object. The drag includes, for example, a touch (or contact) on the displayed object to a predetermined stage, movement of the touch across the touch-sensitive display 112, and lift-off of the touch (end of touch). In some embodiments, the event also includes information about one or more associated event processing units 190.

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

[0152] In some embodiments, the definition of each event 187 also includes a delay action that delays the transmission of event information until it is determined whether the sequence of sub-events corresponds to the event type of the event recognition unit.

[0153] If each event recognition unit 180 determines that a series of sub-events does not match any of the events in the event definition 186, each event recognition unit 180 enters an event impossible, event failed, or event terminated state and thereafter ignores subsequent sub-events of the touch-based gesture. In this situation, if there are other event recognition units that remain active for the hit view, those event recognition units continue to track and process the sub-events of the ongoing touch-based gesture.

[0154] In some embodiments, each event recognition unit 180 includes metadata 183 having configurable properties, flags, and / or lists that indicate to the actively involved event recognition unit how the event distribution system should perform sub-event distribution. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists that indicate how the event recognition units interact with each other, or how they can interact with each other. In some embodiments, the metadata 183 includes configurable properties, flags, and / or lists that indicate how sub-events are distributed to various levels in the view hierarchy or program hierarchy.

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

[0156] In some embodiments, the event distribution command 188 includes a sub-event distribution command that distributes event information about a sub-event without activating an event processing unit. Instead, the sub-event distribution command distributes event information to an event processing unit associated with a set of sub-events, or to an actively involved view. The event processing unit associated with the set of sub-events or the actively involved view receives the event information and executes a predetermined process.

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

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

[0159] The foregoing description regarding the handling of user touch events on a touch-sensitive display also applies to other forms of user input for operating the multifunction device 100 using input devices, but it should be understood that not all of these begin on the touchscreen. For example, mouse movement and mouse button presses, touch movements such as taps, drags, and scrolls on a touchpad, pen stylus input, device movement, verbal commands, detected eye movements, biometric input, and / or any combination thereof may be optionally used as inputs corresponding to sub-events that define the events to be recognized.

[0160] Figure 2 shows a portable multifunction device 100 having a touchscreen 112 according to several embodiments. The touchscreen optionally displays one or more graphics within a user interface (UI) 200. In this embodiment, and in other embodiments described below, the user can select one or more of the graphics by performing gestures on the graphics using, for example, one or more fingers 202 (not shown in the figure to an exact scale) or one or more styluses 203 (not shown in the figure to an exact scale). In some embodiments, the selection of one or more graphics is performed when the user interrupts contact with that one or more graphics. In some embodiments, the gesture optionally includes one or more taps, one or more swipes (from left to right, right to left, upward and / or downward) and / or rolling (from right to left, left to right, upward and / or downward) with a finger in contact with the device 100. In some implementations or situations, accidental contact with a graphic does not constitute a selection of that graphic. For example, if the gesture corresponding to selection is a tap, a swipe gesture sweeping over an application icon does not arbitrarily select the corresponding application.

[0161] Device 100 also optionally includes one or more physical buttons, such as a "Home" button or a menu button 204. As previously mentioned, the menu button 204 is optionally used to navigate to any application 136 within a set of applications running on device 100. Alternatively, in some embodiments, the menu button is implemented as a soft key in a GUI displayed on the touchscreen 112.

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

[0163] Figure 3 is a block diagram of an exemplary multifunctional device having a display and a touch-sensitive surface according to several embodiments. The device 300 does not need to be portable. In some embodiments, the device 300 is a laptop computer, a desktop computer, a tablet computer, a multimedia player device, a navigation device, an educational device (such as a children's learning toy), a game system, or a control device (e.g., a home or commercial controller). The device 300 typically includes one or more processing units (CPUs) 310, one or more network or other communication interfaces 360, memory 370, and one or more communication buses 320 that interconnect these components. The communication buses 320 optionally include circuitry (sometimes called a chipset) that interconnects and controls communication between system components. The device 300 includes an input / output (I / O) interface 330 including a display 340, the display 340 is typically a touchscreen display. The I / O interface 330 also optionally includes a keyboard and / or mouse (or other pointing device) 350 and a touchpad 355, a tactile output generator 357 that generates tactile output on device 300 (for example, similar to the tactile output generator 167 described above with reference to Figure 1A), and a sensor 359 (for example, light, acceleration, proximity, touch sensing, and / or a contact intensity sensor similar to the contact intensity sensor 165 described above with reference to Figure 1A). The memory 370 includes high-speed random access memory such as DRAM, SRAM, DDR RAM, or other random access solid-state memory devices, and optionally includes non-volatile memory such as one or more magnetic disk storage devices, optical disk storage devices, flash memory devices, or other non-volatile solid-state storage devices. The memory 370 optionally includes one or more storage devices located remotely from the CPU(s) 310.In some embodiments, memory 370 stores programs, modules, and data structures similar to, or subsets thereof, that are stored in memory 102 of the portable multifunction device 100 (Figure 1A). Furthermore, memory 370 optionally stores additional programs, modules, and data structures that are not present in memory 102 of the portable multifunction device 100. For example, memory 370 of device 300 optionally stores a drawing module 380, a presentation module 382, ​​a word processing module 384, a website creation module 386, a disk authoring module 388, and / or a spreadsheet module 390, whereas memory 102 of the portable multifunction device 100 (Figure 1A) optionally does not store these modules.

[0164] Each of the elements identified above in Figure 3 is optionally stored in one or more of the memory devices described above. Each of the modules identified above corresponds to an instruction set that performs the function described above. The modules or programs (e.g., instruction sets) identified above do not need to be implemented as separate software programs, procedures, or modules, and therefore in various embodiments, various subsets of these modules are optionally combined or otherwise reconfigured. 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.

[0165] Next, we optionally turn our attention to an embodiment of a user interface implemented in, for example, a portable multi-functional device 100.

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

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

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

[0169] Some of the following examples are given by referring to input on a touchscreen display 112 (a combination of a touch-sensing surface and a display), but in some embodiments, the device detects input on a touch-sensing surface separate from the display, as shown in Figure 4B. In some embodiments, the touch-sensing surface (e.g., 451 in Figure 4B) has a primary axis (e.g., 452 in Figure 4B) corresponding to a primary axis (e.g., 453 in Figure 4B) on the display (e.g., 450). According to these embodiments, the device detects contact with the touch-sensing surface 451 (e.g., 460 and 462 in Figure 4B) at positions corresponding to each of the positions on the display (e.g., 460 corresponds to 468 and 462 corresponds to 470 in Figure 4B). In this way, user input (e.g., touches 460 and 462, and their movement) detected by the device on a touch-sensitive surface (e.g., 451 in Figure 4B) is used by the device to operate the user interface on the display of the multifunction device (e.g., 450 in Figure 4B) when the touch-sensitive surface is separate from the display. It should be understood that a similar method may be optionally used for other user interfaces described herein.

[0170] In addition, while the following examples are given primarily with reference to finger input (e.g., finger touch, finger tap gesture, finger swipe gesture), it should be understood that in some embodiments, one or more of the finger inputs may be replaced by input from another input device (e.g., mouse-based input or stylus input). For example, a swipe gesture may optionally be replaced by a mouse click (e.g., instead of touch), followed by a mouse click with cursor movement along the swipe path (e.g., instead of touch movement). As another example, a tap gesture may optionally be replaced by a mouse click (e.g., instead of touch detection and subsequent cessation of touch detection) while the cursor is located over the tap gesture position. Similarly, it should be understood that when multiple user inputs are detected simultaneously, multiple computer mice may optionally be used simultaneously, or mouse and finger touch may optionally be used simultaneously.

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

[0172] For example, see, for instance, International Patent Application PCT / US2013 / 040061, “Device, Method, and Graphical User Interface for Displaying User Interface Objects Corresponding to an Application,” filed 8 May 2013, published as International Patent WO / 2013 / 169849, and International Patent Application PCT / US2013 / 069483, “Device, Method, and Graphical User Interface for Transitioning Between Touch Input to Display Output Relationships,” filed 11 November 2013, published as International Patent WO / 2014 / 105276.

[0173] In some embodiments, the device 500 has one or more input mechanisms 506 and 508. The input mechanisms 506 and 508 may be physical, if included. Examples of physical input mechanisms include push buttons and rotatable mechanisms. In some embodiments, the device 500 has one or more attachment mechanisms. Such attachment mechanisms, if included, can allow the device 500 to be attached to, for example, hats, eyeglasses, earrings, necklaces, shirts, jackets, bracelets, watch bands, chains, trousers, belts, shoes, wallets, backpacks, etc. These attachment mechanisms allow the user to wear the device 500.

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

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

[0176] The memory 518 of the personal electronic device 500 may include one or more non-temporary computer-readable storage media for storing computer-executable instructions, which, when executed by one or more computer processors 516, can cause the computer processors to execute techniques described below, including, for example, processes 700, 900, 1100, 1300, 1500, 1700, and process 1900 (Figures 7, 9, 11, 13, 15, 17, and 19). The computer-readable storage media may be any medium that can tangibly contain or store computer-executable instructions used by or in connection with an instruction execution system, apparatus, or device. In some embodiments, the storage medium is a temporary computer-readable storage medium. In some embodiments, the storage medium is a non-temporary computer-readable storage medium. The non-temporary computer-readable storage medium may include, but is not limited to, magnetic, optical, and / or semiconductor storage devices. Examples of such storage devices include magnetic disks, CDs, DVDs, or optical disks based on Blu-ray technology, as well as resident solid-state memory such as flash and solid-state drives. The personal electronic device 500 is not limited to the components and configurations shown in Figure 5B, and may include other or additional components in multiple configurations.

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

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

[0179] As used herein and in the claims, the term “characteristic intensity” of a contact refers to the characteristics of that contact based on one or more intensities of the contact. In some embodiments, the characteristic intensity is based on multiple intensity samples. The characteristic intensity is optionally based on a set of intensity samples collected over a predetermined period (e.g., 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10 seconds) associated with a predetermined event (e.g., after detection of contact, before detection of lift-off of contact, before or after detection of the start of movement of contact, before detection of the end of contact, before or after detection of an increase in contact intensity, and / or before or after detection of a decrease in contact intensity). The characteristic intensity of a contact is optionally based on one or more of the following: the maximum value of the contact intensity, the mean value of the contact intensity, the average value of the contact intensity, the top 10 percentile value of the contact intensity, the maximum half value of the contact intensity, the maximum 90 percent value of the contact intensity, and so on. In some embodiments, the duration of contact is used when determining characteristic intensity (for example, when characteristic intensity is the average intensity of contact over time). In some embodiments, characteristic intensity is compared to a set of one or more intensity thresholds to determine whether an action has been performed by the user. For example, the set of one or more intensity thresholds optionally includes a first intensity threshold and a second intensity threshold. In this example, contact with a characteristic intensity not exceeding the first threshold results in a first action, contact with a characteristic intensity above the first intensity threshold but not exceeding the second intensity threshold results in a second action, and contact with a characteristic intensity above the second threshold results in a third action. In some embodiments, the comparison between characteristic intensity and one or more thresholds is not used to determine whether a first action should be performed or a second action should be performed, but rather to determine whether one or more actions should be performed at all (for example, whether each action should be performed or whether each action should be postponed).

[0180] Figure 5C shows that multiple intensity sensors 524A-524D detect multiple contacts 552A-552E on a touch-sensitive display screen 504. Figure 5C also includes an intensity diagram showing the current intensity measurements of intensity sensors 524A-524D relative to intensity units. In this example, the intensity measurements of intensity sensors 524A and 524D are 9 intensity units each, and the intensity measurements of intensity sensors 524B and 524C are 7 intensity units each. In some implementations, the aggregate intensity is the sum of the intensity measurements of the multiple intensity sensors 524A-524D, which in this example is 32 intensity units. In some embodiments, each contact is assigned a corresponding intensity, which is a portion of the aggregate intensity. Figure 5D shows that the aggregate intensity is assigned to contacts 552A-552E based on their distance from the center of force 554. In this example, contacts 552A, 552B, and 552E are each assigned a contact intensity of 8 intensity units of the aggregate intensity, and contacts 552C and 552D are each assigned a contact intensity of 4 intensity units of the aggregate intensity. More generally, in some implementations, each contact j is assigned an intensity Ij, which is a portion of the aggregate intensity A, according to a predetermined mathematical function Ij = A·(Dj / ΣDi), where Dj is the distance from the center of force to each contact j, and ΣDi is the sum of the distances from the center of force to each of the contacts (e.g., from i=1 to the end). The operations described with reference to Figures 5C-5D can be performed using electronic devices similar to or identical to devices 100, 300, or 500. In some embodiments, the characteristic intensity of a contact is based on one or more intensities of the contact. In some embodiments, an intensity sensor is used to determine a single characteristic intensity (e.g., a single characteristic intensity of a single contact). Please note that the intensity diagrams are not part of the display user interface, but are included in Figures 5C-5D to assist the reader.

[0181] In some embodiments, a portion of the gesture is identified for the purpose of determining characteristic intensity. For example, a touch-sensitive surface optionally receives a series of swipe contacts that transition from a starting position to an ending position, where the intensity of contact increases. In this example, the characteristic intensity of the contact at the ending position is optionally based only on a portion of the series of swipe contacts (e.g., only the portion of the swipe contact at the ending position) rather than the entire swipe contact. In some embodiments, optionally, a smoothing algorithm is applied to the intensity of the swipe contact before determining the characteristic intensity of the contact. For example, the smoothing algorithm optionally includes one or more of the following: an unweighted moving average smoothing algorithm, a triangular smoothing algorithm, a median filter smoothing algorithm, and / or an exponential smoothing algorithm. In some situations, these smoothing algorithms eliminate narrow spikes or drops in the swipe contact intensity for the purpose of determining characteristic intensity.

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

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

[0184] In some embodiments described herein, one or more actions are performed in response to the detection of a gesture including each press input, or in response to the detection of each press input performed by each (or more) contact, and each press input is detected at least in part on the detection of an increase in the intensity of the contact (or more) above a press input intensity threshold. In some embodiments, each action is performed in response to the detection of an increase in the intensity of each contact above a press input intensity threshold (e.g., a "downstroke" of each press input). In some embodiments, a press input includes an increase in the intensity of each contact above a press input intensity threshold, followed by a decrease in the intensity of the contact below the press input intensity threshold, and each action is performed in response to the detection of a decrease in the intensity of each contact below the press input threshold (e.g., an "upstroke" of each press input).

[0185] Figures 5E-5H show the light pressure threshold in Figure 5E (for example, "IT L From an intensity below ) to a deep pressing force threshold (for example, "IT" in Figure 5H) DThe device indicates the detection of a gesture, including a press input, corresponding to an increase in the intensity of contact 562 to an intensity exceeding a deep press intensity threshold (e.g., "IT"). The gesture performed by contact 562 is detected on the touch-sensitive surface 560, and on the display user interface 570, which includes application icons 572A-572D displayed within a predetermined area 574, a cursor 576 is displayed over the application icon 572B corresponding to app 2. In some embodiments, the gesture is detected on the touch-sensitive display 504. An intensity sensor detects the intensity of contact on the touch-sensitive surface 560. The device indicates that the intensity of contact 562 exceeds a deep press intensity threshold (e.g., "IT"). D It is determined that the touch has reached its peak by exceeding the "IT" threshold. Contact 562 is maintained on the touch sensing surface 560. In response to the detection of the gesture, a deep press intensity threshold (e.g., "IT") is set during the gesture. D According to a contact 562 having an intensity exceeding '', a scaled representation 578A-578C (e.g., thumbnail) of the recently opened document is displayed for app 2, as shown in Figures 5F-5H. In some embodiments, this intensity, compared to one or more intensity thresholds, is the characteristic intensity of the contact. Note that the intensity diagram for contact 562 is not part of the display user interface but is included in Figures 5E-5H to assist the reader.

[0186] In some embodiments, the display of representations 578A to 578C includes animation. For example, as shown in Figure 5F, representation 578A is initially displayed close to the application icon 572B. As the animation progresses, as shown in Figure 5G, representation 578A moves upward and representation 578B is displayed close to the application icon 572B. Then, as shown in Figure 5H, representation 578A moves upward and representation 578B moves upward toward representation 578A and representation 578C is displayed close to the application icon 572B. Representations 578A to 578C form an array above the icon 572B. In some embodiments, as shown in Figures 5F to 5G, the animation progresses according to the intensity of the contact 562, where the intensity of the contact 562 reaches a deep press intensity threshold (e.g., "IT").D As it increases toward (), expressions 578A-578C appear and move upward. In some embodiments, the intensity on which the animation progresses is based is the characteristic intensity of the contact. The actions described with reference to Figures 5E-5H can be performed using electronic devices similar to or identical to devices 100, 300, or 500.

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

[0188] For the sake of clarity, the description of an action performed in response to a press input associated with a press input intensity threshold, or a gesture including a press input, is optionally triggered in response to the detection of any of the following: an increase in contact intensity above the press input intensity threshold, an increase in contact intensity from below the hysteresis intensity threshold to above the press input intensity threshold, a decrease in contact intensity below the press input intensity threshold, and / or a decrease in contact intensity below the hysteresis intensity threshold corresponding to the press input intensity threshold. Furthermore, in examples where an action is described to be performed in response to the detection of a decrease in contact intensity below the press input intensity threshold, the action is optionally performed in response to the detection of a decrease in contact intensity below a hysteresis intensity threshold corresponding to and lower than the press input intensity threshold.

[0189] In this specification, “installed application” refers to a software application that has been downloaded onto an electronic device (e.g., device 100, 300, and / or 500) and is ready to be launched on the device (e.g., opened). In some embodiments, a downloaded application becomes an installed application by an installation program that extracts the program portion from the downloaded package and integrates the extracted portion with the operating system of the computer system.

[0190] In this specification, the terms “open application” or “running application” refer to a software application that has retained state information (e.g., as part of the device / global internal state 157 and / or application internal state 192). An open or running application is optionally one of the following types of applications: ● The active application currently displayed on the display screen of the device on which the application is being used. ● Background applications (or background processes) that are not currently displayed but whose applications have one or more processes being handled by one or more processors, and ● An application that is not running but has state information stored in memory (volatile and non-volatile, respectively) that can be used to resume the execution of the application, either suspended or suspended.

[0191] In this specification, the term “closed application” refers to a software application that does not retain state information (for example, state information for a closed application is not stored in the device’s memory). Therefore, closing an application involves stopping and / or removing the application process for the application and removing the state information for the application from the device’s memory. Generally, opening a second application while a first application is running does not close the first application. When the second application is displayed and the first application is closed, the first application becomes a background application.

[0192] Next, we will focus on embodiments of user interfaces ("UI") and related processes implemented on electronic devices such as portable multifunction device 100, device 300, or device 500.

[0193] Figures 6A to 6J show exemplary user interfaces for modifying elements of a watch face (e.g., an analog dial) based on whether another graphical element (e.g., a notification or complication) should be displayed on the watch face, according to several embodiments. The user interfaces in these figures are used to illustrate the processes described later, including the process in Figure 7.

[0194] Figure 6A shows an electronic device 600 that displays a clock face 606 on a display 602. In some embodiments, device 600 includes one or more features of device 100, device 300, or device 500. In the embodiment shown in Figure 6A, device 600 includes a pressable and rotatable input mechanism 604. In some embodiments, device 600 displays the clock face 606 in response to receiving a request to display the clock face (e.g., a wrist-raising gesture, a request to switch from viewing an application or notification screen to displaying the clock face). The clock face 606 includes an hour hand 608a, a minute hand 608b, and an analog dial 612 for analog time display. The analog dial 612 includes a plurality of analog dial elements corresponding to each unit of time. As shown in Figure 6A, the clock face 606 includes a first set of analog dial elements (hour markers) corresponding to units of one hour (and five minutes and five seconds), and a second set of analog dial elements (minute markers) corresponding to units of one minute (and one second).

[0195] Figure 6B shows a watch face 606 with a notification 614. In some embodiments, device 600 receives an alert (e.g., a new text message, email, etc.) and displays a notification 614 as an alert indication in response to the receipt of the alert. In some embodiments, device 600 displays a watch face 606 with a notification 614 in response to receiving a request to display the watch face (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the watch face).

[0196] As shown in Figure 6B, the notification 614 is displayed as a graphical element (e.g., a circular dot) at the upper and near-center positions on the clock face 606, respectively. The notification 614 occupies the position on the clock face 606 previously occupied by the analog dial element 612a in Figure 6A. To provide space for the notification 614 on the clock face 606, the position and / or size of the analog dial element 612a is altered (e.g., so that the notification 614 and the analog dial element 612a do not overlap or interfere with each other). In the illustrated embodiment, the analog dial element 612a is shortened to occupy the lower part of the position on the clock face 606 that it occupied in Figure 6A, while the notification 614 occupies the upper part of the position on the clock face 606 that the analog dial element 612a occupied in Figure 6A.

[0197] In some embodiments, the clock face 606 is displayed in the configuration shown in Figure 6B (for example, with the notification 614 and the shortened analog dial element 612a) according to the determination that the notification 614 should be displayed at each position on the clock face. Alternatively, according to the determination that the notification 614 should not be displayed at each position on the clock face, the device 600 displays the clock face 606 in the configuration shown in Figure 6A (for example, without the notification 614 and with the longer analog dial element 612a).

[0198] In some embodiments, device 600 stops displaying notification 614 (for example, after notification 614 has been displayed for a threshold time period, or in response to the user viewing an item associated with the notification (e.g., a newly received text message)). As used herein, the threshold may include a non-zero threshold (e.g., 0.5 seconds, 1 second).

[0199] As shown in Figure 6C, in response to the discontinuation of the display of notification 614, device 600 returns the analog dial to the state shown in Figure 6A (for example, the analog dial element 612a is extended to occupy the position on the clock face 606 that was occupied by notification 614 in Figure 6B).

[0200] In Figure 6C, device 600 detects input 610a (e.g., a characteristic intensity higher than a threshold intensity or a touch on the touch-sensitive display 602 for a period longer than a threshold duration). In response to detecting input 610a, device 600 enters clock face editing mode and displays the user interface 616 as shown in Figure 6D. The user interface 616 includes representation 616a corresponding to clock face 606. The user interface 616 also includes representations 616b and 616c corresponding to other clock faces available for display by device 600. In some embodiments, in response to an input (e.g., a horizontal swipe on the touch-sensitive display 602 or a rotation of the input mechanism 604), the device centers one of the representations 616b and 616c on the user interface 616 to select as the current clock face. For example, a user can select the corresponding clock face as the current clock face by swiping from left to right to center the representation 616c, and then tapping the representation 616c or pressing the input mechanism 604. In some embodiments, the input mechanism 604 is physically rotatable relative to the housing of the device 600.

[0201] The user interface 616 also includes an affordance 616d for selecting a clock face corresponding to the currently centered representation for editing. In Figure 6D, device 600 detects input 610b (e.g., a tap on affordance 616d). Upon detecting input 610b, device 600 enters clock face editing mode and edits the clock face 606.

[0202] Figure 6E shows a user interface 618 for editing the clock face 606. The user interface 618 includes the representation of the clock face 606, an element indicator 620 that shows the elements selected for editing, and paging dots 622a to 622c corresponding to editing pages. Paging dot 622a corresponds to a first editing page in which the user can edit the background color settings of the clock face 606. Paging dot 622b corresponds to a second editing page in which the user can edit the color of the time display on the clock face 606, and paging dot 622c corresponds to a third editing page in which the user can edit complications on the clock face 606. In this embodiment and in the embodiments described above and below, a complication refers to any clock face feature other than those used to indicate the hours and minutes of a given time (e.g., clock hands or hour / minute display). In some embodiments, complications provide the user with different types of information, such as data obtained from an application. In some embodiments, the information communicated to the user by complications is customizable.

[0203] Figure 6E shows the first editing page corresponding to the paging dot 622a, where the paging dot 622a is displayed in white, visually distinguishing it from the paging dots 622b and 622c, which are displayed in black. On the first editing page, the user can rotate the input mechanism 604 to edit the background color of the clock face 606.

[0204] The user can switch to different editing pages by swiping on the touch-sensitive display 602, as shown by input 610c in Figure 6E. The user can scroll through multiple editing pages by providing multiple inputs. In the embodiment shown in Figure 6F, the user has navigated to a third editing page, where the paging dot 622c is displayed in white and is visually distinguishable from the paging dots 622a and 622b.

[0205] The third editing page provides the ability to display complications at various positions on the watch face 606. As shown in Figure 6F, there are four positions 624a to 624d on the watch face 606 where complications can be displayed. The element indicator 620 indicates that position 624b is selected for editing. Upon detecting input 610d, the device 600 displays the complication 626 at position 624b, as shown in Figure 6G. In some embodiments, the user can select other positions (for example, by tapping a position) and select complications in the manner described with reference to Figure 6F. Figure 6H shows the user interface 618 after complications have been selected for each position.

[0206] Upon detecting input 610e (e.g., pressing input mechanism 604), device 600 exits the watch face editing mode and returns to the user interface, with the representation 616a updated with the selected complication, as shown in Figure 6I. Upon input 610f (e.g., pressing input mechanism 604), a watch face 628 with complication 626 at position 624b is displayed, as shown in Figure 6J. The analog dial 612 is modified (e.g., to provide room for complication 626 on watch face 606) compared to watch face 606 without complication 626 (e.g., as shown in Figure 6A). Complication 626 occupies the position on watch face 628 that was previously occupied by the analog dial element 612b in watch face 606. To provide space on the watch dial 628 for the complication 626, the position and / or size of the analog dial element 612b is modified (for example, so that the complication 626 and the analog dial element 612b do not overlap or interfere with each other). In the embodiment shown in Figure 6J, the analog dial element 612b is shortened to occupy the right-hand portion of the position it occupied on the watch dial 606, while the complication 626 occupies the left-hand portion of the position that the analog dial element 612b occupied on the watch dial 606.

[0207] Figure 7 is a flowchart showing a method of providing a clock face using an electronic device according to some embodiments. Method 700 is executed in an electronic device (e.g., 100, 300, 500, or 600) comprising a display device (e.g., 602). Some operations of method 700 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0208] As described below, method 700 provides an intuitive method for displaying clock face features. This method creates a more efficient human-machine interface by reducing the cognitive burden on the user interacting with the clock face. In the case of a battery-powered computing device, power is conserved and the battery charging time interval is extended by enabling the user to interact with the clock face more quickly and efficiently.

[0209] The electronic device (e.g., 600) receives a request (e.g., a wrist raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face in order to display the clock face) to display a clock face (e.g., 606) including a plurality of analog dial graphical elements (e.g., 612) corresponding to respective time units (702).

[0210] In response to receiving a request to display a clock face (e.g., 606) (704), and in response to a determination that each graphical element (e.g., 614, 626) (e.g., a notification dot or complication that was not included in the clock face before editing) should be displayed at their respective positions on the clock face (e.g., 614, 624b), the electronic device displays, via a display device, a plurality of analog dial graphical elements (e.g., 612) (e.g., user interface elements) corresponding to each unit of time (e.g., a mark, sign, or indicator indicating hours, minutes, or seconds), while each graphical element is displayed at its respective position on the clock face (e.g., the position corresponds to an area defining the shape, position, and / or size of a first analog dial graphical element), the plurality of analog dial graphical elements include a first analog dial graphical element (e.g., 612a, 612b) that occupies a first position and has a first size (706). Displaying a first analog dial graphical element such that it occupies a first position and has a first size, while each graphical element is displayed in its respective position on the watch face, in accordance with the determination that each graphical element should be displayed in its respective position on the watch face, performs an action without requiring further user input when certain conditions are met, and provides improved visual feedback without cluttering the user interface with additional or excessive graphical elements. This allows the device to modify the analog dial element so that the information provided by the analog dial element and the corresponding graphical element is displayed without obscuring any element.By performing actions when specific conditions are met without requiring further user input and providing improved visual feedback without cluttering the user interface, the device's usability is enhanced, the user device interface is made more efficient (for example, by assisting the user in providing appropriate input when operating / interacting with the device and reducing user errors), and in addition, power consumption is reduced and the device's battery life is improved by enabling users to use the device more quickly and efficiently.

[0211] In some embodiments, the analog dial graphical elements are arranged in a circular pattern around the outer edge of the display. In some embodiments, the analog dial graphical elements extend radially away from a central point on the clock face. In some embodiments, each graphical element has a position that includes at least a portion of the display position of the first analog dial graphical element when the graphical element is not displayed.

[0212] In accordance with the determination that each graphical element (e.g., 614, 626) should not be displayed at its respective position on the clock face (e.g., 614, 624b), the electronic device displays the clock face via a display device (708). The clock face includes a plurality of analog dial graphical elements corresponding to each unit of time. The first analog dial graphical element of the plurality of analog dial graphical elements occupies a second position (e.g., Figure 6B) different from a first position (e.g., Figure 6A) and / or has a second size different from the first size (e.g., the first analog dial graphical element moves and / or shrinks to make room for graphical elements that were not previously displayed). In some embodiments, the second position includes a portion of the first position (e.g., the second position is a portion of the first position). In some embodiments, the first position (when each graphical element is displayed) occupies at least a portion of the second position (when each graphical element is not displayed). Displaying the first analog dial graphical elements to occupy a second position different from the first position, and / or a second size different from the first size, according to the determination that each graphical element should not be displayed in its respective position on the watch face, optimizes the use of space on the user interface by performing an action without requiring further user input when certain conditions are met. This allows the device to fully display the analog dial elements without modification when the respective graphical elements are not displayed. By performing an action when certain conditions are met without requiring further user input and optimizing the use of space on the user interface, the usability of the device is improved, the user device interface is made more efficient (for example, by helping the user to provide appropriate input when operating / interacting with the device and reducing user errors), and in addition, power consumption is reduced and the battery life of the device is improved by allowing the user to use the device more quickly and efficiently.

[0213] In some embodiments, each graphical element (e.g., 626) is a complication (e.g., a complication refers to any clock face feature other than those used to indicate the hours and minutes of the time (e.g., the hands of the clock or hours / minutes)), and multiple analog dial graphical elements (e.g., 612) are arranged around the complication. In some embodiments, the complication provides the user with different types of information, such as data obtained from an application. In some embodiments, the information communicated to the user by the complication is customizable. In some embodiments, the second size (when the complication is not displayed) is larger than the first size (when the complication is displayed). In some embodiments, the first analog dial graphical element (e.g., a mark) is shorter but maintains the same overall shape (e.g., rounded ends). In some embodiments, some analog dial graphical elements (e.g., a mark) have two states (e.g., short and long), while other analog dial graphical elements have only one state.

[0214] In some embodiments, each graphical element (e.g., 614) represents an alert notification (e.g., a small red dot), and the second position (when no notification is displayed) occupies at least a portion of each position on the watch face (the position of the notification dot), while the first position (when a notification is displayed) does not occupy at least a portion of each position on the watch face. In some embodiments, the first analog dial graphical element (e.g., a mark) is shorter but maintains the same overall shape (e.g., rounded ends).

[0215] In some embodiments, a clock face is displayed having each graphical element displayed in its respective position, and while the first analog dial graphical element occupies a first position and has a first size, the electronic device stops displaying each graphical element. In response to stopping the display of each graphical element, the electronic device replaces the display of the first analog dial graphical element occupying the first position and having a first size with the display of the first analog dial graphical element occupying a second position and having a second size. The first position occupies at least a portion of the second position, and the second size is larger than the first size (for example, the first analog dial graphical element is displayed in the same position and size as before each graphical element was displayed).

[0216] It should be noted that the process details described above in relation to Method 700 (e.g., Figure 7) are also applicable in a similar manner to the methods described later. For example, Methods 900, 1100, 1300, 1500, 1700, and 1900 optionally include one or more characteristics of the various methods described above with reference to Method 700. For example, operations 702, 704, 706, and 708 can be applied to the display of the clock face in operations 902, 906, 908, 1306, and / or 1308. For brevity, these details will not be repeated below.

[0217] Figures 8A–8T show exemplary user interfaces for changing the language setting of a watch face to display features such as time markers on an analog dial in a selected language, according to several embodiments. These user interfaces are used to illustrate processes described later, including the process shown in Figure 9.

[0218] Figure 8A shows an electronic device 600 that displays a clock face 800 on a display 602. The clock face 800 includes a time display 802, a graphical element 804a, and a graphical element 806a. The time display 802 is displayed with time markers, including a mixture of numbers and symbols, according to the English language setting (e.g., a language setting at the clock face level, a language setting specific to or limited to the clock face 800, or its features). Graphical elements 804a and 804b are distinct from the time display 802. Graphical element 804a corresponds to a calendar application and displays date data from the calendar application. Graphical element 804b corresponds to a weather application and displays current temperature data from the weather application. Graphical elements 804a and 804b are displayed according to the English language setting (e.g., a system-level English language setting).

[0219] In Figure 8A, device 600 detects input 810a (for example, a characteristic intensity higher than the threshold intensity or a touch on the touch-sensitive display 602 for a period longer than the threshold duration). Upon detection of input 810a, device 600 enters the clock face editing mode and displays the user interface 806. In some embodiments, device 600 enters the clock face editing mode upon detection of a sequence of one or more inputs, according to the techniques described above with reference to Figures 6C-6E.

[0220] The user interface 806 includes a representation of the clock face 800, an element indicator 808 that shows the element selected for editing, and paging dots 812a to 812d corresponding to the first to fourth editing pages.

[0221] Figure 8B shows the first editing page corresponding to the paging dot 812a, where the paging dot 812a is displayed in white, visually distinguishing it from the paging dots 812b to 812d, which are displayed in black. On the first editing page, the user can rotate the input mechanism 604 to edit the style of the time display 802.

[0222] In response to detecting input 801b (e.g., rotation of input mechanism 604), device 600 changes the time display 802 from a mixed dial style with numbers and markings to a California dial (e.g., having a mix of Arabic and Roman numerals) as illustrated in Figure 8C.

[0223] In some embodiments, editing the style of the clock face involves animation. Figure 8C shows an example of animation. In Figure 8C, device 600 fades out the current style of characters toward the center of the analog dial (Figure 8C, from top left to top right), and then fades in the new style of characters toward the center of the analog dial (Figure 8C, from bottom right to bottom left). In some embodiments, the first style fades out toward the center and the second style fades in toward the center. In some embodiments, the first style fades out toward the center and the second style fades in toward the center. In some embodiments, the first style fades out toward the center and the second style fades in toward the center. In some embodiments, the first style fades out toward the center and the second style fades in toward the center. In some embodiments, the characters used to represent time divisions fade in and out according to the rotation of the input mechanism 604.

[0224] As shown in Figure 8C, the California dial includes Roman numerals for hour markers 1, 2, 10, and 11, English Arabic numerals for hour markers 4, 5, 7, and 8, a symbol (e.g., a downward-pointing triangle) at 12 o'clock, and horizontal bars at 3, 6, and 9.

[0225] In response to detecting input 801c (for example, rotation of input mechanism 604), device 600 changes the time display 802 from a California dial style to a dial style with numbers at each hour marker, as shown in Figure 8D.

[0226] Referring to FIG. 8E, device 600 detects an input 810d (e.g., a horizontal swipe). In response to input 810d, device 600 switches to a second editing page corresponding to paging dot 812b. The second editing page provides a function to change the language setting of clock face 800. In FIG. 8F, device 600 indicates that English is the current language setting. In response to detecting user input 810e (e.g., rotation of input mechanism 604), device 600 changes the language setting of clock face 800. As shown in FIG. 8G, device 600 changes the language in which time display 802 is presented by setting the language setting to Hindi and changing the display of the numbers in time display 802 from English to Hindi. Graphical elements 804a and graphical element 804b remain displayed in English.

[0227] In response to detecting input 810f (e.g., rotation of input mechanism 604), device 600 sets the language setting to Latin and, as shown in FIG. 8H, changes the display of the numbers in time display 802 from Hindi to Roman numerals. Graphical elements 804a and graphical element 804b remain displayed in English.

[0228] In response to detecting input 810g (e.g., rotation of input mechanism 604), device 600 sets the language setting to Greek and, as shown in FIG. 8I, changes the display of the numbers in time display 802 from Roman numerals to Greek. Graphical elements 804a and graphical element 804b remain displayed in English.

[0229] In response to detecting input 810h (e.g., rotation of input mechanism 604), device 600 sets the language setting to Chinese and, as shown in FIG. 8J, changes the display of the numbers in time display 802 from Greek to Chinese. Graphical elements 804a and graphical element 804b remain displayed in English.

[0230] Upon detecting input 810i (e.g., pressing input mechanism 604), device 600 exits the clock face editing mode and displays the time display 802 on the clock face 813 according to the last selected language, Chinese, as shown in Figure 8K, while graphical elements 804a and 804b remain displayed in English. In some embodiments, the language of the time display can also be changed with respect to other dial styles (e.g., "Mixed" in Figure 8A and California in Figure 8C).

[0231] In Figure 8K, device 600 detects input 810j (e.g., a press of input mechanism 604). In response to the detection of input 810j, device 600 displays user interface 814, as shown in Figure 8L. User interface 814 includes multiple affordances corresponding to various applications, menus, user interfaces, etc. In response to the detection of input 810k (e.g., a tap) on affordance 816 (e.g., a settings menu affordance), device 600 displays user interface 818, as shown in Figure 8M. User interface 818 includes a settings menu with affordances 818a to 818d corresponding to various settings options. In response to the detection of input 810l (e.g., a tap) selecting affordance 818c, device 600 displays user interface 822, as shown in Figure 8N, which includes a system language settings menu with language options. Initially, language options 822a to 822d are displayed on display 602. In response to detecting input 810m (e.g., an upward swipe), device 600 scrolls the user interface 822 to display additional language options 822e and 822f, while removing the displays of language options 822a and 822b, as shown in Figure 8O. In response to detecting input 810n (e.g., a tap) that selects the affordance 822e corresponding to Greek, device 600 sets the system language setting of device 600 to Greek and changes the language in which text is displayed in the user interface 822 from English to Greek, as shown in Figure 8P. In some embodiments, device 600 determines the system language setting based on the location of device 600. For example, device 600 may acquire location information and set the system language setting to the language associated with the location determined based on the acquired location information. In some embodiments, device 600 acquires location information, for example, via GPS signals, cellular signals, or other data.

[0232] Upon detecting input 810o (for example, pressing the input mechanism 604), device 600 exits the settings menu and displays the clock face 823 according to the selected system language setting, which is Greek. As shown in Figure 8Q, graphical elements 804a and 804b are displayed in Greek according to the system language setting, while the time display 802 remains displayed according to the selected clock face setting, which is Chinese.

[0233] Figures 8R–8T show embodiments of a clock face to which at least some of the techniques described above can be applied with reference to Figures 8A–8Q. Figure 8R shows a clock face 824 having a digital time display 826 including hour indicators 826a and minute indicators 826b. In some embodiments, the clock face 824 is selected by entering the clock face editing mode, navigating to the style editing page, and rotating the input mechanism 604 to select the clock face style shown in Figure 8R.

[0234] In Figure 8R, the clock face 824 is displayed according to the English clock face settings. In some embodiments, various elements of the clock face 824 can be edited by entering the clock face editing mode, navigating to the editing page, and rotating the input mechanism 604 to edit the elements. In some embodiments, the user can edit the language and color settings for the clock face 824. Figure 8S shows the clock face 824 displayed according to the Arabic clock face settings. In Figure 8S, the hour indicator 826a is displayed in a first color, and the minute indicator 826b is displayed in a second color different from the first color. In some embodiments, the colors of the hour indicator 826a and the minute indicator 826b are the same or follow a default color scheme. In some embodiments, the first color of one of the hour indicator 826a and the minute indicator 826b is determined (for example, based on the color of the band of device 600), and the second color of the other indicator is generated (for example, automatically) based on the determined first color.

[0235] Figure 8T shows a clock face 828. In some embodiments, the clock face 828 is selected by entering the clock face editing mode, navigating to the style editing page, and rotating the input mechanism 604 to select the style of the clock face shown in Figure 8T. The clock face 828 includes a digital time display 830 and an analog time display 832. The digital time display 830 includes one digit representing an hour. The analog time display 832 includes an hour hand 832a and a minute hand 832b. In Figure 8T, the hour hand 832a and the minute hand 832b are different colors. The analog time display 832 is displayed in front of the digital time display 832. In some embodiments, the hour hand 832a and / or the minute hand 832b are semi-transparent so that a portion of the digit of the digital time display 830 that overlaps with the hand of the analog time display 832 is partially visible.

[0236] Figure 9 is a flowchart illustrating a method for selecting the language of a clock face using an electronic device according to several embodiments. Method 900 is performed in an electronic device (e.g., 100, 300, 500, or 600) equipped with a display device (e.g., 602). Some operations of Method 900 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0237] As described later, Method 900 provides an intuitive method for setting the language of a watch face. This method reduces the cognitive burden on the user when selecting the language of the watch face, thereby creating a more efficient human-machine interface. In the case of battery-powered computing devices, enabling the user to select the language of the watch face more quickly and efficiently saves power and increases the time interval between battery charges.

[0238] The electronic device displays a first clock face (e.g., 800 in Figure 8A) via a display device (902). The first watch face includes a time display (e.g., 802, 826, 830) (e.g., a digital time display, or an analog face including one or more hands and optionally a dial), and graphical elements other than the time display (e.g., 804a, 804b) (e.g., complications, where a complication is any feature of the watch face other than those used to indicate the hours and minutes of a given time (e.g., the hands of the watch or hour / minute display)). The time display is shown in a first language (e.g., the numbers on the digital face or analog dial are shown in the first language, e.g., English, Hindi, Arabic, Roman, Latin, Russian, Greek), and the graphical elements are shown in a second language. In some embodiments, the second language is the same as the first language. In some embodiments, the second language is different from the first language. In some embodiments, complications provide the user with different types of information, such as data obtained from an application. In some embodiments, the information communicated to the user by complications is customizable.

[0239] The electronic device detects a sequence of one or more inputs (e.g., 810a-810i) (e.g., activation of a touch-sensitive and / or rotatable input mechanism on a touch-sensitive display (e.g., pressing or rotating)) (e.g., entering a clock face editing mode, selecting a language selection interface / page, selecting a different language, and confirming the clock face selection) (904).

[0240] In response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first watch face, the electronic device displays a second watch face (e.g., 813) via a display device (906). The second watch face includes a time display (e.g., 802). The time display is shown in a third language (e.g., Chinese) different from the first language (e.g., English) (e.g., the language used for the numbers on the digital face or analog dial is changed), and graphical elements (e.g., 804a, 804b) are shown in the second language (e.g., English) (e.g., the language of the graphical elements is maintained). By displaying a second watch face with a time display in a third language different from the first language and graphical elements in the second language in response to detecting a sequence of one or more inputs corresponding to a request to change the language associated with the time display on the first watch face, improved feedback is provided, and the user can customize the watch face by selecting a specific language for the time display on the watch face without affecting other elements of the watch face, such as complications. This feature also provides additional customization options (e.g., language customization) without requiring the user to change the location associated with the entire device. By providing users with improved feedback and customization, it enhances the usability of the device, makes the user-device interface more efficient (e.g., by helping users provide appropriate input when operating / interacting with the device and reducing user errors), and reduces power consumption and improves the device's battery life by allowing users to use the device more quickly and efficiently.

[0241] In some embodiments, the electronic device includes a rotatable input mechanism (e.g., 604) configured to rotate relative to the housing of the electronic device (e.g., around an axis parallel to the display of the electronic device). In some embodiments, a sequence of one or more inputs (e.g., 810e-810h) corresponding to a request to change the language associated with the time display on a first clock face includes rotation of the rotatable input mechanism.

[0242] In some embodiments, while the time display is shown in a third language, the electronic device detects data corresponding to a request to change the language associated with the graphical elements on the first clock face (a second sequence of one or more inputs (e.g., 810j-810o) (e.g., activation of a touch and / or rotatable and pressable input mechanism on a touch-sensitive display (e.g., pressing or rotating)), GPS data indicating that the electronic device has moved to a location with a different common language) (908). In some embodiments, the system language is changed in a general settings menu. In some embodiments, the system language is changed based on geographical location.

[0243] In some embodiments, upon detecting data corresponding to a request to change the language associated with a graphical element on the first watch face, the electronic device displays a third watch face (e.g., 823) via a display device (910). The third watch face includes a time display (e.g., 802) displayed in a third language (e.g., the current language of the time display is maintained) and graphical elements (e.g., 804a, 804b) displayed in a fourth language (e.g., Greek) different from a second language (e.g., English) (e.g., the language of the graphical elements is changed). By displaying a third watch face with graphical elements in a fourth language and a third language different from a second language upon detecting data corresponding to a request to change the language associated with a graphical element on the first watch face, improved feedback is provided, enabling the user to customize the watch face by selecting a specific language for graphical elements such as complications while maintaining the language selected for the time display. By providing improved feedback, the usability of the device is enhanced, the user device interface becomes more efficient (for example, by helping users make appropriate inputs when operating / interacting with the device and reducing user errors), which in turn reduces power consumption and improves the device's battery life by allowing users to use the device more quickly and efficiently.

[0244] In some embodiments, displaying a first and / or second watch face includes displaying the time in a first color. In some embodiments, the electronic device receives a request to display the current watch face (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the watch face). In response to receiving a request to display the current watch face, the electronic device displays a fourth watch face via a display device. The fourth watch face includes a time display displayed in a second color different from the first color (e.g., the color used for the numbers on a digital face or analog dial is changed), and graphical elements (e.g., the appearance of the graphical elements is maintained). In some embodiments, the color change on wrist-raise is a user-selectable option (e.g., in edit mode).

[0245] In some embodiments, the time display includes multiple graphical elements. These multiple graphical elements include a first graphical element representing a number (e.g., "3", "III") and a second graphical element different from the numerical representation (e.g., a mark) (e.g., Figure 8C). In some embodiments, all of the multiple graphical elements are numbers.

[0246] In some embodiments, the time display includes an analog dial, and displaying a first and / or second clock face includes displaying the analog dial according to a first style (e.g., an all-digit dial (Figure 8D) or a dial having a combination of digits and non-digital graphical elements (e.g., symbols) (e.g., Figures 8A, 8C)). In some embodiments, the electronic device detects a sequence of one or more inputs (e.g., 810a-810c) (e.g., touch on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., pressing or rotating)) corresponding to a request to change the style of the analog dial (e.g., entering a dial editing mode, selecting a dial style selection interface, selecting a different dial style, and confirming the style selection). In some embodiments, the dial style is adjusted after the language has been adjusted (e.g., the dial style is changed while maintaining the language selected for the dial). In some embodiments, in response to detecting a sequence of one or more inputs corresponding to a request to change the style of the analog dial, the electronic device displays a fourth clock face (e.g., Figures 8C, 8D) via a display device. The fourth watch face includes a time display on an analog dial, displayed according to a second style different from the first style, and graphical elements (e.g., the appearance of the graphical elements is maintained). Displaying the fourth watch face, which includes a time display (analog or digital) according to a second style different from the first style, in response to detecting a sequence of one or more inputs, provides improved feedback and allows the user to customize the watch face by selecting a specific style of dial (in addition to the dial language). By providing improved feedback, the usability of the device is enhanced, the user device interface becomes more efficient (e.g., by helping the user make appropriate inputs when operating / interacting with the device and reducing user errors), which further reduces power consumption and improves the battery life of the device by allowing the user to use the device more quickly and efficiently.

[0247] In some embodiments, the electronic device includes a rotatable input mechanism (e.g., 604) configured to rotate relative to the housing of the electronic device, and a sequence of one or more inputs (e.g., 810b, 810c) corresponding to a request to change the style of the analog dial includes rotation of the rotatable input mechanism. In some embodiments, displaying a fourth clock face includes fading out characters used to represent time divisions (e.g., numbers and / or marks) in the analog dial, displayed according to a first style along a first direction relative to the center of the analog dial (e.g., toward or away from the center of the analog dial), and then fading in characters used to represent time divisions in the analog dial, displayed according to a second style along a second direction relative to the center of the analog dial (e.g., toward or away from the center of the analog dial). In some embodiments, the first style fades out toward the center and the second style fades in away from the center. In some embodiments, the first style fades out away from the center and the second style fades in toward the center. In some embodiments, the first style fades out toward the center, and the second style fades in toward the center. In some embodiments, the first style fades out toward the center, and the second style fades in toward the center. In some embodiments, the characters used to represent time divisions fade in and out in accordance with the rotation of the rotatable input mechanism.

[0248] In some embodiments, the fading in of characters used to represent time divisions displayed according to a second style begins after the fading out of characters used to represent time divisions displayed according to a first style. In some embodiments, the second style begins to fade in before the fading out of the first style is finished.

[0249] In some embodiments, the electronic device receives a request to display the current clock face (e.g., a wrist-raise gesture, a request to switch from viewing an application, an application selection screen (springboard), or a notification screen to displaying the clock face). In response to receiving the request to display the current clock face, the electronic device displays a fifth clock face, including a time display and graphical elements, via a display device. In some embodiments, the time display includes an analog dial, and displaying the fifth clock face includes fading in characters used to represent time divisions on the analog dial along a direction relative to the center of the analog dial (e.g., toward or away from the center of the analog dial).

[0250] In some embodiments (for example, Figure 8T), the time display includes an analog time display (for example, 832) and a digital time display (for example, 830) that is displayed simultaneously (for example, displayed behind) the analog time display (for example, the analog time display overlaps with at least a portion of the digital time display). The analog time display includes a plurality of clock hands (for example, 832a, 832b) displayed in front of the digital time display (for example, semi-transparent or translucent clock hands).

[0251] In some embodiments, the time display includes an analog dial, and displaying a first and / or second clock face includes displaying an analog dial (e.g., an all-digit dial or a California dial) according to the first style. In some embodiments, the electronic device detects a sequence of one or more inputs (e.g., touch on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., pressing or rotating)) corresponding to a request to change the color of the clock face (e.g., entering a dial editing mode, selecting a color selection interface, selecting a color, and confirming the dial selection). In some embodiments, the color is adjusted after the language is adjusted. In some embodiments, in response to detecting a sequence of one or more inputs corresponding to a request to change the color of the clock face, the electronic device displays a sixth clock face via a display device. The sixth clock face includes a time display that complies with the request to change the color of the clock face, and graphical elements that complies with the request to change the color of the clock face.

[0252] In some embodiments, the time display includes an hour indicator (e.g., 826a) displayed in a first color (e.g., digital numerals, an hour hand, or one or more hour markers on an analog dial) and a minute indicator (e.g., 826b) displayed in a second color different from the first color (e.g., digital numerals, minutes, or one or more minute markers on an analog dial).

[0253] In some embodiments, the time display includes an hour indicator (e.g., digital numerals, an hour hand, or one or more hour markers on an analog dial) and a minute indicator (e.g., digital numerals, minutes, or one or more minute markers on an analog dial), and according to a user selection of a first color for both the hour indicator and the minute indicator, the electronic device displays the hour indicator in a second color (e.g., the first color or a color different from the first color (e.g., a shade slightly darker than the first color)) and the minute indicator in a third color different from the second color (e.g., a shade slightly darker or lighter than the second color).

[0254] It should be noted that the details of the process described above with respect to Method 900 (e.g., Figure 9) are also applicable in a similar manner to the methods described above and below. For example, Methods 700, 1100, 1300, 1500, and 1700 optionally include one or more characteristics of the various methods described above with reference to Method 900. For example, the operation of Method 900 can be used to change the time display in Methods 700, 1300, 1500, and 1700. For brevity, these details will not be repeated below.

[0255] Figures 10A to 10N show exemplary user interfaces that, according to several embodiments, present one or more gradients on a clock face, which are displayed based on the positions of one or more clock hands indicating the time on the clock face. The user interfaces in these figures are used to illustrate processes described later, including the process in Figure 11.

[0256] Figure 10A shows an electronic device 600 that displays a first clock face 1000 on a display 602 at a first time (e.g., 10:09:23). In some embodiments, the device 600 displays the first clock face 1000 in response to receiving a request to display the clock face (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face). The first clock face 1000 includes a plurality of clock hands, including an hour hand 1002a, a minute hand 1002b, and a second hand 1002c, and a color gradient 1004 (e.g., an angular color gradient). The color gradient 1004 includes a gradual transition from a first color at a first edge 1004a of the color gradient 1004 to a second color at a second edge 1004b of the color gradient 1004. The first edge 1004a is selected based on the position of the second hand 1002c (for example, the clockwise side of the second hand 1002c), and the second edge 1002b is also selected based on the position of the second hand 1002c (for example, the counterclockwise side of the second hand 1002c). In Figure 10A, the edge of the gradient 1004 is positioned along the position of the second hand 1002c.

[0257] In Figures 10A to 10G, the direction of the gradient color change is indicated by curved arrows. In some embodiments (e.g., angle gradients), the gradient color is constant along a specific direction from the origin (center of the dial) and changes with the angle centered on the origin.

[0258] Referring again to Figure 10A, device 600 detects input 1010a (for example, a characteristic intensity higher than the threshold intensity or a touch on the touch-sensitive display 602 for a period longer than the threshold duration). In response to detecting input 1010a, device 600 enters the clock face editing mode and displays the user interface 1006. In some embodiments, device 600 enters the clock face editing mode in response to detecting a sequence of one or more inputs according to the techniques described above with reference to Figures 6C-6E.

[0259] User interface 1006 provides a function to select the number of color gradients to be included in the clock face. User interface 1006 includes a representation of the clock face 1000, an element indicator 1008 that shows the selected element for editing, and paging dots 1012a to 1012b corresponding to the first and second editing pages. Figure 10B also shows a clock face 1000 having gradients 1004 that are displayed according to the clock hands 1002a to 1002c that are in different positions (e.g., showing different times). Figure 10B shows that the color gradients 1004 change position (e.g., rotate) according to the movement of the second hand 1002c. Figure 10B shows a first clock face 1000 that shows a different time (e.g., 10:09:30) than the time indicated by the hands 1002a to 1002c in Figure 10A. The color of the color gradient 1004 remains the same, and the first edge 1004a and the second edge 1004b maintain the same relationship as the position of the second hand 1002c (e.g., along the second hand 1002c). Compared to the time display shown in Figure 10A, the color gradient 1004 is rotated by the same amount as the second hand 1002c (e.g., the color gradient 1004 is fixed to the second hand 1002c). In some embodiments, the position of the color gradient 1004 (e.g., the first edge 1004a and the second edge 1004b) is based on the position of the hour hand 1002a (e.g., not at the position of the minute hand 1002b or the second hand 1002c). In some embodiments, the position of the color gradient 1004 is based on the position of the minute hand 1002b (e.g., not at the position of the hour hand 1002a or the second hand 1002c).

[0260] Figure 10B shows the first editing page corresponding to the paging dot 1012a, where the paging dot 1012a is displayed in white, visually distinguishing it from the paging dot 1012b, which is displayed in black. On the first editing page, the user can rotate the input mechanism 604 to change the number of gradients included in the clock face.

[0261] In response to detecting input 1001b (for example, rotation of input mechanism 604), device 600 displays a clock face 1014 having two color gradients, color gradients 1016-1 and 1016-2, an hour hand 1002a, a minute hand 1002b, and a second hand 1002c, as shown in Figure 10C.

[0262] The color gradient 1016-1 includes a gradual transition from a first color at the first edge 1016-1a of the color gradient 1016-1 to a second color at the second edge 1016-1b of the color gradient 1016-1. Both the first edge 1016-1a and the second edge 1016-1b are selected based on the position of the minute hand 1002b, with the first edge 1016-1a located along the clockwise side of the minute hand 1002b and the second edge 1016-1b located 180 degrees around the clock face 1014 from the minute hand 1002b. The color gradient 1016-2 includes a gradual transition from a first color at the first edge 1016-2a of the color gradient 1016-2 (e.g., the same or different color as the first color of gradient 1016-1) to a second color at the second edge 1016-2b of the color gradient 1016-2 (e.g., the same or different color as the second color of gradient 1016-1). Both the first edge 1016-2a and the second edge 1008-2b are selected based on the position of the minute hand 1002b, with the first edge 1016-1a being 180 degrees around the clock face 1014 from the minute hand 1002b, and the second edge 1016-1b being located along the counterclockwise side of the minute hand 1002b.

[0263] In response to input 1010c (for example, a press on a pressable and rotatable input device 604), device 600 exits the clock face editing mode and displays the clock face 1014 as shown in Figure 10D. In some embodiments, device 600 exits the clock face editing mode and displays the clock face 1014 as shown in Figure 10D in response to a sequence of one or more inputs as described above with reference to Figures 6H-6J.

[0264] Figure 10D shows a clock face 1014 displaying a different time than the time shown while in the clock face editing mode of Figure 10C. Color gradients 1016-1 and 1016-2 have different positions corresponding to the difference in the position of the minute hand 1002b compared to Figure 10C. As time progresses, color gradients 1016-1 and 1016-2 rotate on the clock face 1014 with the minute hand 1002b, maintaining the same relationship as the minute hand 1002b, as described with reference to Figures 10C and 10D. As the minute hand 1002b rotates, the angular range of color gradients 1016-1 and 1016-2 remains constant, and the position of color gradient 1016-1 relative to color gradient 1016-2 also remains constant.

[0265] Device 600 can also display a clock face with three color gradients. The user can edit the clock face to display the three color gradients (or switch the clock face to one color gradient) via the clock face editing mode described with reference to Figures 10A-10D.

[0266] Figure 10E shows a clock face 1018 having three color gradients 1020-1, 1020-2, and 1020-3. Color gradient 1020-1 includes a gradual transition from a first color at the first edge 1020-1a of color gradient 1020-1 to a second color at the second edge 1020-1b of color gradient 1020-1. Based on the positions of the clock hands 1002a to 1002c in Figure 10E, the first edge 1020-1a is selected based on the position of the second hand 1002c, and the first edge 1020-1a is located along the clockwise side of the second hand 1002b. The second edge 1020-1b is selected based on the position of the hour hand 1002a, and the second edge 1020-1b is located along the counterclockwise side of the hour hand 1002a.

[0267] The color gradient 1020-2 includes a gradual transition from a first color at the first edge 1020-2a of the color gradient 1020-2 to a second color at the second edge 1020-2b of the color gradient 1020-2. Based on the positions of the clock hands 1002a to 1002c in Figure 10E, the first edge 1020-2a is selected based on the position of the hour hand 1002a, and the first edge 1020-2a is located along the clockwise side of the hour hand 1002a. The second edge 1020-2b is selected based on the position of the minute hand 1002b, and the second edge 1020-2b is located along the counterclockwise side of the minute hand 1002b.

[0268] The color gradient 1020-3 includes a gradual transition from a first color at the first edge 1020-3a of the color gradient 1020-3 to a second color at the second edge 1020-3b of the color gradient 1020-3. Based on the positions of the clock hands 1002a to 1002c in Figure 10E, the first edge 1020-3a is selected based on the position of the minute hand 1002b, and the first edge 1020-3a is located along the clockwise side of the minute hand 1002a. The second edge 1020-3b is selected based on the position of the second hand 1002c, and the second edge 1020-3b is located along the counterclockwise side of the second hand 1002c.

[0269] As the relative positions of the clock hands 1002a to 1002c change (for example, as time progresses), the color gradients 1020-1, 1020-2, and 1020-3 change their positions in accordance with the change in the positions of the clock hands 1002a to 1002c (e.g., compression, expansion, and / or rotation). For example, as time progresses and the second hand 1002c approaches the hour hand 1002a, the color gradient 1020-1 of the hour hand 1002a becomes smaller (e.g., compressed), and the color gradient 1020-3 becomes larger (e.g., expanded).

[0270] Figure 10F shows the clock hands 1002a to 1002c indicating a different time than that shown in Figure 10E. The colors of color gradients 1020-1, 1020-2, and 1020-3 remain the same, and the relationship between color gradients 1020-1, 1020-2, and 1020-3 with respect to the clock hands 1002a to 1002c also remains the same. In Figure 10F, the second hand 1002c has the same angular position as the hour hand 1002a. Color gradient 1020-1 is not displayed because there is no angular separation between the hour hand 1002a and the second hand 1002c (for example, because color gradient 1020-1 occupies the angular range of the clock face 1018 moving clockwise from the second hand 1002c to the hour hand 1002a). Since the positions of the hour hand 1002a and the minute hand 1002b remain substantially unchanged, the size and position of the color gradient 1020-2 remain substantially the same (for example, over approximately 20 seconds, the hour hand 1002a and the minute hand 1002b move only slightly). The clockwise angular separation from the minute hand 1002b to the second hand 1002c increases, so the size of the color gradient 1020-3 increases.

[0271] Figure 10G shows a clock face 1018 with clock hands 1002a-1002c indicating a different time after the time shown in Figure 10F (for example, about 10 seconds later), when the second hand 1002c has overtaken the hour hand 1002a and is between the hour hand 1002a and the minute hand 1002b (clockwise). When one clock hand overtakes another, the relationship between the color gradients 1020-1, 1020-2, and 1020-3 and the clock hands 1002a-1002c changes.

[0272] In Figure 10G, the color gradient 1020-1 is represented by a first edge 1020-1a selected based on the position of the second hand 1002a and a second edge 1020-1b selected based on the position of the second hand 1002c. Previously, the color gradient 1020-1 progressed from the first color at the second hand 1002c to the second color at the hour hand 1002a, but now it progresses from the first color at the hour hand 1002a to the second color at the second hand 1002c. The color gradient 1020-2 is represented by a first edge 1020-2a selected based on the position of the second hand 1002c and a second edge 1020-2b selected based on the position of the minute hand 1002b. The color gradient 1020-2 previously progressed from the first color at the hour hand 1002a to the second color at the minute hand 1002b, but now progresses from the first color at the second hand 1002c to the second color at the minute hand 1002b. The color gradient 1020-3 is displayed with a first edge 1020-3a selected based on the position of the minute hand 1002b and a second edge 1020-3b selected based on the position of the hour hand 1002a. The color gradient 1020-3 previously progressed from the first color at the minute hand 1002b to the second color at the second hand 1002c, but now progresses from the first color at the minute hand 1002b to the second color at the hour hand 1002a.

[0273] Similar changes in the position and size of color gradients 1020-1, 1020-2, and 1020-3, as well as in the relationship between color gradients 1020-1, 1020-2, and 1020-3 and the clock hands 1002a-1002c, also occur when the second hand 1002c overtakes the minute hand 1002b, and when the minute hand 1002b overtakes the hour hand 1002a. For example, as time progresses from Figure 10G and the second hand 1002c overtakes the minute hand 1002b, the color gradient 1020-2 display temporarily disappears, and then reappears in a clockwise angular range from the minute hand 1002b to the second hand 1002c. Color gradient 1020-1 occupies the clockwise angular range from the hour hand 1002a to the minute hand 1002b, and color gradient 1020-3 occupies the clockwise angular range from the second hand 1002c to the hour hand 1002a.

[0274] Figures 10H to 10N show further examples of clock faces corresponding to the clock faces in Figures 10A to 10G, respectively. The clock faces in Figures 10H to 10N provide a visual representation of the features described and illustrated with respect to the clock faces in Figures 10A to 10G. For example, the clock face in Figure 10H corresponds to the clock face in Figure 10A, the clock face in Figure 10I corresponds to the clock face in Figure 10B, the clock face in Figure 10J corresponds to the clock face in Figure 10C, the clock face in Figure 10K corresponds to the clock face in Figure 10D, the clock face in Figure 10L corresponds to the clock face in Figure 10E, the clock face in Figure 10M corresponds to the clock face in Figure 10F, and the clock face in Figure 10N corresponds to the clock face in Figure 10G.

[0275] Figure 11 is a flowchart illustrating a method for displaying the gradient of a clock face using an electronic device according to several embodiments. Method 1100 is performed in an electronic device (e.g., 100, 300, 500, or 600) equipped with a display device (e.g., 602). Some operations of Method 1100 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0276] As described later, Method 1100 provides an intuitive method for displaying gradients on a watch face. This method creates a more efficient human-machine interface by reducing the cognitive burden on the user when displaying gradients on a watch face. In the case of battery-powered computing devices, power is saved and the time interval between battery charges is extended by enabling the user to display gradients on the watch face more quickly and efficiently.

[0277] The electronic device displays a first clock face (e.g., 1000, 1014) via a display device (1102). The first clock face includes a plurality of clock hands (e.g., 1002a, 1002b, and 1002c), including a first clock hand (e.g., 1002b) (e.g., an hour hand, a minute hand, or a second hand) and a second clock hand (e.g., 1002a) (e.g., another one of the hour hand, a minute hand, or a second hand), and a color gradient of the first clock face (e.g., 1004, 1016a, 1016b). The first dial color gradient includes a gradual transition from a first color at a first edge of the first dial color gradient (e.g., 1004a, 1016a) to a second color at a second edge of the first dial color gradient (e.g., 1004b, 1016b) (for example, a color gradient that changes based on direction from the origin, an angular gradient, a conical gradient, a color gradient having a first color at a first edge of the gradient located along a first direction from the origin, and a second color at a second edge of the gradient located along a second direction from the origin. The color changes gradually (e.g., smoothly or incrementally) with the angle from the first color to the second color. The term “color” refers to different hues, tones, shades, and shades, including but not limited to black, white, and gray. In some embodiments, the first and / or second colors are user-selectable). The first edge (e.g., 1004a, 1016a) of the color gradient of the first clock face is selected based on the position of the first clock hand (e.g., 1002b) of the first clock face, and the second edge (e.g., 1004b, 1016b) of the color gradient of the first clock face is selected based on the position of the first clock hand (e.g., 1002b) of the first clock face. Displaying the gradient based on the position of one of the clock hands as described above provides improved visual feedback by presenting a clear visual representation of the time unit values ​​represented by the clock hands and by providing a dynamic user interface.By providing improved visual feedback, device usability is enhanced, the user device interface becomes more efficient (for example, by helping users make appropriate inputs when operating / interacting with the device and reducing user errors), and this further reduces device power consumption and improves battery life by allowing users to use the device more quickly and efficiently.

[0278] The electronic device detects a sequence of one or more inputs (e.g., 1010a-1010c) (e.g., activation of a touch-sensitive and / or rotatable input mechanism on a touch-sensitive display (e.g., pressing or rotating)) corresponding to a request to edit a first watch face (e.g., entering a watch face editing mode, selecting a gradient style selection interface, selecting a different style, and confirming the style selection) (1104).

[0279] In response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, the electronic device displays a second clock face (e.g., 1018) via a display device (1106). The second clock face includes a plurality of clock hands, including the first clock hands (e.g., 1002b) (e.g., the same first clock hands as the first clock face (i.e., hour hand, minute hand, or second hand) and the second clock hands (e.g., 1002a) (e.g., the same second clock hands as the first clock face (i.e., hour hand, minute hand, or second hand)), and a first color gradient of the second clock face (e.g., 1020-3). The first color gradient of the second clock face is the first of the first color gradient of the second clock face The process includes a gradual transition from a first color at the edge of (e.g., 1020-3a) to a second color at the second edge of the first color gradient of the second clock face (e.g., 1020-3b). The first edge of the first color gradient of the second clock face is selected based on the position of the first clock hand of the second clock face (e.g., 1002b), and the second edge of the first color gradient of the second clock face is selected based on the position of the second clock hand of the second clock face (e.g., 1002a). The clock face further includes a second color gradient (e.g., 1020-2) of the second clock face. The second color gradient of the second clock face includes a gradual transition from a first color at the first edge of the second color gradient of the second clock face (e.g., 1020-2a) to a second color at the second edge of the second color gradient of the second clock face (e.g., 1020-2b). The second edge of the color gradient of the second clock face is selected based on the position of the first clock hands (e.g., 1002b) of the second clock face. By displaying a clock face with two gradients in response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, and by displaying the two color gradients based on the positions of the two clock hands as described above, the clock face can be customized, providing improved visual feedback by presenting a clear visual representation of the time unit values ​​represented by the two clock hands and providing a dynamic user interface.By providing improved visual feedback, device usability is enhanced, the user device interface becomes more efficient (for example, by helping users make appropriate inputs when operating / interacting with the device and reducing user errors), and this further reduces device power consumption and improves battery life by allowing users to use the device more quickly and efficiently.

[0280] In some embodiments, the first clock hand of the first clock face (e.g., 1002c) indicates (e.g., represents) the seconds of the time.

[0281] In some embodiments, the first edge of the second color gradient of the second clock face is selected based on the position of the second clock hands of the second clock face (for example, the minute hand 1002b defines one transition between the two gradients, and the second transition is defined by the hour hand or a fixed position (e.g., perpendicular upward from the center of the clock, 180 degrees from the minute hand)). In some embodiments, the two gradients follow the hour hand (e.g., 1002a) or the second hand (e.g., 1002c).

[0282] In some embodiments, the plurality of clock hands of the second clock face (e.g., 1002a-1002c) include a third clock hand (e.g., 1002c), and the first edge of the second color gradient of the second clock face is selected based on the position of the third clock hand of the second clock face (e.g., the first edge of the second color gradient of the second clock face is positioned along the third clock hand of the second clock face, and the second color gradient starts from the third clock hand and ends at the first clock hand).

[0283] In some embodiments, the second clock face includes a third color gradient (e.g., 1020-1) of the second clock face. The third color gradient of the second clock face includes a gradual transition from a first color at a first edge of the third color gradient of the second clock face (e.g., 1020-1a) to a second color at a second edge of the third color gradient of the second clock face (e.g., 1020-1b). The first edge of the third color gradient of the second clock face is selected based on the position of the second clock hand of the second clock face (e.g., 1002a) (e.g., the first edge of the third color gradient of the second clock face is located along the second clock hand of the second clock face), and the second edge of the color gradient of the second clock face is selected based on the position of the third clock hand of the second clock face (e.g., 1002c) (e.g., the second edge of the third color gradient of the second clock face is located along the third clock hand of the second clock face, and the third color gradient starts from the second clock hand of the second clock face and ends at the third clock hand of the second clock face). As described above, by displaying a clock face with three gradients based on the positions of the three clock hands, customization of the clock face becomes possible, providing a clear visual representation of the time unit values ​​represented by the three clock hands and offering improved visual feedback by providing a dynamic user interface. By providing improved visual feedback, the usability of the device is enhanced, the user device interface becomes more efficient (for example, by helping the user make appropriate inputs when operating / interacting with the device and reducing user errors), and this further reduces the device's power consumption and improves battery life by allowing the user to use the device more quickly and efficiently.

[0284] In some embodiments, detecting a sequence of one or more inputs includes detecting a first input (e.g., 1010a) in the sequence of inputs. In response to detecting the first input, the electronic device displays a clock face editing user interface (e.g., 1006). While displaying the clock face editing user interface, the electronic device detects a second sequence of one or more inputs (e.g., 1010b, 1010c) which is a subset of the first sequence of one or more inputs.

[0285] In some embodiments, the spatial range of the first color gradient of the second clock face is different from the spatial range of the second color gradient of the second clock face (for example, the angle between the edges of the first color gradient of the second clock face (e.g., X degrees) is different from the angle between the edges of the second color gradient of the second clock face (e.g., 360-X degrees)).

[0286] In some embodiments, the display of a second clock face is such that, according to the first clock hand of the second clock face having a first position relative to the second clock hand of the second clock face, the first color gradient of the second clock face has a first spatial range, and according to the first clock hand of the second clock face having a second position relative to the second clock hand of the second clock face that is different from the first position relative to the second clock hand of the second clock face, the first color gradient of the second clock face has a second spatial range that is different from the first spatial range.

[0287] In some embodiments, the second color is selected based on the first color (e.g., algorithmically) and is not user-configurable. In some embodiments, the first color is selected by the user or based on the accessories of the electronic device (e.g., the color of the watch band). In some embodiments, the second color is determined (e.g., by the electronic device) according to an algorithm that uses the first color as input. In some embodiments, the selection of a monochromatic scheme switches the watch face from multicolor to black and white, as well as accent colors for less than half of the elements on the face.

[0288] In some embodiments, the first color is a first shade of gray within the gray range, including black and white, and the second color is a second shade of gray within the gray range, including black and white. In some embodiments, the first color is different from the second color.

[0289] In some embodiments, the first clock hand includes a first color, and the second clock hand includes a second color.

[0290] In some embodiments, after displaying a second clock face including a first color gradient of the second clock face and a second color gradient of the second clock face, the electronic device receives a request to display the current clock face (e.g., a wrist-raise gesture, an application, an application selection screen (springboard), a change in the current time, or a request to switch from viewing a notification screen to displaying the clock face). In response to receiving a request to display the current clock face, and according to a determination that the position of the hands of the first clock corresponds to the position of the hands of the second clock (e.g., Figure 10F) (e.g., the second hand moves over the minute hand, or the minute hand moves over the hour hand), the electronic device displays the second clock face via a display device, having the first color gradient of the second clock face and without the second color gradient of the second clock face. In response to receiving a request to display the current clock face, and in accordance with the determination that the position of the hands of the first clock does not correspond to the position of the hands of the second clock, the electronic device displays the second clock face via a display device, having a first color gradient of the second clock face and without a second color gradient of the second clock face.

[0291] In some embodiments, after displaying a second clock face via a display device, which includes a first color gradient of the second clock face but does not include a second color gradient of the second clock face, the electronic device receives a second request to display the current clock face (e.g., a wrist-raise gesture, an application, an application selection screen (springboard), a change in the current time, or a request to switch from viewing a notification screen to displaying the clock face). In response to receiving the second request to display the current clock face, and according to the determination that the positions of the hands of the first clock correspond to the positions of the hands of the second clock (e.g., the hour and minute hands are still overlapping), the electronic device displays the second clock face via the display device, which includes the first color gradient of the second clock face but does not include the second color gradient of the second clock face. In response to receiving a second request to display the current clock face, and in accordance with the determination that the position of the hands of the first clock does not correspond to the position of the hands of the second clock (for example, the second hand is moving ahead of the minute hand, or the minute hand is moving ahead of itself), the electronic device displays the second clock face via the display device, having a first color gradient of the second clock face and a second color gradient of the second clock face.

[0292] It should be noted that the process details described above with respect to Method 1100 (e.g., Figure 7) are also applicable in a similar manner to the methods described later / above. For example, Methods 700, 900, 1300, 1500, 1700, and 1900 optionally include one or more characteristics of the various methods described above with reference to Method 1100. For example, operations 1102, 1104, and 1106 can be applied to the clock face in Methods 700 and 900, one or more segments in Method 1300, and / or the time display in Method 1500. For brevity, these details will not be repeated below.

[0293] Figures 12A to 12M show exemplary user interfaces for a clock face according to several embodiments. These user interfaces are used to illustrate processes described later, including the process shown in Figure 13.

[0294] Figure 12A shows an electronic device 600 that displays a clock face 1200 on a display 602. In some embodiments, the device 600 displays the clock face 1200 in response to receiving a request to display the clock face (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face). The clock face 1200 includes a digital time display 1202, a segment 1204, and a complication 1206. The digital time display 1202 shows the current time (e.g., 10:09 a.m.). The segment 1204 includes a first edge 1204-1 and a second edge 1204-2. The first edge 1204-1 is at a first position (e.g., corner position) indicating the hour of the current time (e.g., 10 o'clock), and the second edge 1204-2 is at a second position (e.g., corner position) indicating the minute of the current time (e.g., 9 minutes). Each edge of segment 1204 extends radially from a common point (e.g., the center of display 602) to the edge of display 602.

[0295] The digital time display 1202 includes digits. In some embodiments, the color of the digits in the digital time display 1202 is based on the position of the digits relative to the segments. For example, segment 1204 is a first color or pattern, the portion of the digit overlapping with segment 1204 is displayed in a second color or pattern different from the color or pattern of segment 1204, and the portion of the digit not overlapping with segment 1204 is displayed in a third color or pattern different from the color of the portion overlapping with segment 1204. In some embodiments, the first and third colors are the same. In Figure 12A, segment 1204 is white, the portion of the digit overlapping with segment 1204 is black, and the portion of the digit not overlapping with segment 1204 is white (for example, the same color as segment 1204, but different from the portion overlapping with segment 1204).

[0296] In Figure 12A, complication 1206 overlaps with segment 1204. Similar to the time display 1202, the portion of complication 1206 that overlaps with segment 1204 is displayed in a different color or pattern than segment 1204. In embodiments where segment 1204 only partially overlaps complication 1206, the portion of complication 1206 that does not overlap with segment 1204 is displayed in a different color or pattern than the portion that overlaps with segment 1204.

[0297] Figure 12B shows the clock face 1200 at a different time (e.g., 10:30 AM) than shown in Figure 12A. The clock face 1200 includes a digital time display 1202, segments 1204, and a complication 1206. Compared to Figure 12A, the digital time display 1202 is updated to show the current time, and the position of segments 1204 (e.g., corner position and corner range) is updated to reflect the different time. The first edge 1204-1 is in a third position indicating the hour of the current time, and the second edge 1204-2 is in a fourth position indicating the minute of the second hour. As shown in Figures 12A and 12B, the visual appearance (e.g., color or pattern) of the digits in the digital time display 1202 changes as segments 1204 move over time. For example, in Figure 12A, the digits representing the minutes in the digital time display 1202 are entirely white, while in Figure 12B, they are partially white and partially black.

[0298] In the embodiments shown in Figures 12A and 12B, the clock face 1200 includes a second segment 1208 that occupies the portion of the clock face 1200 that progresses clockwise from the second edge 1204-2 to the first edge 1204-1 (while segment 1204 occupies the portion of the clock face 1200 that progresses clockwise from the first edge 1204-1 to the second edge 1204-2). As time progresses, the portion of segment 1204 is occupied by segment 1208, and vice versa. For example, in Figure 12B, segment 1204 occupies the portion of the clock face 1200 that progresses counterclockwise from the second edge 1204-2 of segment 1204 to the dashed line indicating the previous position of the second edge 1204-2 in Figure 12A.

[0299] Figure 12C shows the clock face 1200 at a third time (e.g., 11:00 AM) different from the times shown in Figures 12A and 12B. The clock face 1200 includes a digital time display 1202, a segment 1204, and a complication 1206. To advance from 10:30 AM to 11:00 AM, the second edge 1204-2 (minute indicator) overtakes the first edge 1204-1 (hour indicator). When the second edge 1204-2 overtakes the first edge 1204-1, the second segment 1208 stops displaying (when the second edge 1204-2 and the first edge 1204-1 overlap), and then redisplays clockwise from the first edge 1204-1 to the second edge 1204-2. When the second edge 1204-2 overtakes the first edge 1204-1, segment 1204 is redefined by an angular range from the first edge 1204-1 to the second edge 1204-2 in a counterclockwise direction (or from the second edge 1204-2 to the first edge 1204-1 in a clockwise direction). Similarly, as the time progresses from 11:00 AM to 12:10 PM, for example, when the second edge 1204-2 passes the first edge 1204-1 again, the first segment 1204 is de-displayed (when the second edge 1204-2 and the first edge 1204-1 overlap) and then re-displayed clockwise from the first edge 1204-1 to the second edge 1204-2. At that point, segment 1204 is again defined by a clockwise angular range from the first edge 1204-1 to the second edge 1204-2. In this way, segments 1204 and 1208 are alternately removed and re-represented each time the second edge 1204-2 overtakes 1204-1.

[0300] In Figure 12C, the portion of complication 1206 that does not overlap with segment 1204 is displayed in a different color or pattern (white) than the portion that overlaps with segment 1204 (for example, black).

[0301] In Figure 12C, device 600 detects input 1210a (e.g., a characteristic intensity higher than a threshold intensity or a touch on the touch-sensitive display 602 for a period longer than a threshold duration). Upon detection of input 1210a, device 600 enters the clock face editing mode and displays the user interface 1212. In some embodiments, device 600 enters the clock face editing mode upon detection of a sequence of one or more inputs, according to the techniques described above with reference to Figures 6C-6E.

[0302] The user interface 1212 includes a representation of the clock face 1200, an element indicator 1214 that shows the element selected for editing, and paging dots 1216a to 1216d corresponding to the first to fourth editing pages.

[0303] Figure 12D shows the first editing page corresponding to the paging dot 1216a, where the paging dot 1216a is displayed in white, visually distinguishing it from the paging dots 1216b to 1216d, which are displayed in black. On the first editing page, the user can rotate the input mechanism 604 to edit the color or pattern of the clock face (for example, the color or pattern of segment 1204, segment 1208, and / or the digital time display 1202).

[0304] In response to input 1210b (e.g., a swipe), device 600 displays a second editing page, as indicated by the paging dot 1216b in Figure 12E. On the second editing page, the user can select the style settings for the clock face, in particular whether or not the clock face includes clock hands. In response to input 1210c (e.g., a rotation of the input mechanism 604), device 600 changes the style and displays the clock hands 1218a and 1218b.

[0305] In response to input 1210d (e.g., a swipe), device 600 displays a third editing page, as indicated by the paging dot 1216c in Figure 12F. On the third editing page, the user can select the style settings for the watch face, in particular, whether the watch face is displayed in full-screen style or circular style. In full-screen style, segment 1204 extends to the edge of the display 602, and complication 1206 is displayed in the upper left portion of the display 602, as shown in Figures 12A-12F. In response to input 1210e (e.g., a rotation of the input mechanism 604), device 600 changes the style from full-screen to circular. Figure 12H shows an embodiment of the circular style watch face 1200. In circular style, segment 1204 extends to the edge of the circular area, and complication 1206 is displayed along a line that passes through the center of the circular area and runs perpendicularly above the origin of the circular area. The circular style also includes four corner complications 1220a to 1220d. In some embodiments, the user can touch a complication to select it for editing, and then rotate the input mechanism 604 to edit the complication.

[0306] In response to input 1210f (e.g., a swipe), device 600 displays a fourth editing page, as indicated by the paging dot 1216d in Figure 12I. On the third editing page, the user can select the style of the time display, in particular whether the time display is shown in digital format (e.g., Figure 12I) or in analog style (e.g., Figure 12J). In response to input 1210g (e.g., a rotation of input mechanism 604), device 600 changes the time display 1202 from digital to analog, as shown in Figure 12J. In response to input 1210h (e.g., a press of input mechanism 604), device 600 exits the clock face editing mode and displays a clock face 1222 showing the current time (e.g., 11:00 AM) according to the selected features, as shown in Figure 12K. The features of clock face 1222 are similar to those of clock face 1200 before editing. For example, the color or pattern of a portion of complication 1206 depends on whether that portion overlaps with segment 1204. Similarly, the color or pattern of a portion of the hour marker in the time display 1202 depends on whether that portion overlaps with segment 1204.

[0307] Figures 12L and 12M show styles of watch faces according to several embodiments. Figure 12L shows a full-screen analog style. Figure 12M shows a full-screen digital style (e.g., a non-hybrid without segment 1204).

[0308] Figure 13 is a flowchart illustrating a method for managing a clock face using an electronic device according to several embodiments. Method 1300 is implemented in a device (e.g., 100, 300, 500, or 600) equipped with a display device (e.g., 602). Some operations of Method 1300 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0309] As will be described later, Method 1300 provides an intuitive method for providing a watch face. This method reduces the cognitive burden on the user when providing a watch face, thereby creating a more efficient human-machine interface. In the case of battery-powered computing devices, power is saved and the time interval between battery charges is extended by enabling the user to interact with the watch face more quickly and efficiently.

[0310] The electronic device receives a request to display a clock face (e.g., 1200) (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face) (1302).

[0311] In response to receiving a request to display a clock face (1304), and in accordance with the determination that the current time is a first time (e.g., 10:09) (1306), the electronic device displays a clock face (e.g., 1200) via a display device. The clock face at the first time shows a digital time display (e.g., 1202) (e.g., numbers) indicating the first time, and segments (e.g., 1204) (e.g., visually distinguishable parts of the clock face). A segment includes a first edge (e.g., 1204-1) at a first position (e.g., an angular position) and a second edge (e.g., 1204-2) at a second position (e.g., an angular position) (e.g., the edge is the segment boundary between the segment and another part of the clock face or segment. The first edge extends radially from the origin (e.g., the center of the display of an electronic device) in a first direction, and the second edge extends radially from the origin in a second direction). In some embodiments, the edge is a straight line starting from the origin and extending to the boundary of the display (e.g., 602) and / or the clock face (e.g., to the outer circumference of a circular clock face that does not extend to the edge of the display), or equivalently a straight line starting from the boundary of the display and / or the clock face and extending to the origin (e.g., stopping at the origin). In some embodiments, the segment is part of the background of the clock face (for example, a digital time display is displayed in front of the background, including the segment if the segment overlaps with the digital time display). The first edge at the first position indicates a first time unit (e.g., hours) of a first time (e.g., the position of the first edge defined by the angular orientation of the origin and the edge, indicating the hours of the first time), and the second edge at the second position indicates a second time unit (e.g., minutes) of a first time (e.g., the position of the second edge defined by the angular orientation of the origin and the edge, indicating the minutes of the first time).

[0312] In response to receiving a request to display a clock face (1304), and in accordance with the determination that the current time is a second time (e.g., 10:30) different from the first time (1308), the electronic device displays a clock face (e.g., 1200) via the display device. The clock face at the second time includes a digital time display (e.g., 1202) indicating the second time, and a segment (e.g., 1204) having a first edge (e.g., 1204-1) and a second edge (e.g., 1204-2). The first edge is in a third position, and the second edge is in a fourth position. The first edge at the third position indicates a first time unit (e.g., hours) of a second time (e.g., the position of the first edge defined by the angular orientation of the origin and the edge, indicating the hours of the second time), and the second edge at the fourth position indicates a second time unit (e.g., minutes) of a second time (e.g., the position of the second edge defined by the angular orientation of the origin and the edge, indicating the minutes of the second time). Displaying a digital time display and a clock face having segments, wherein the position of the segment's edge changes based on the determination of whether the current time is the first time or the second time, as described above, providing improved visual feedback by presenting a clear visual representation of the current time and providing a dynamic user interface. By providing improved visual feedback, the usability of the device is improved, the user device interface becomes more efficient (e.g., by helping the user make appropriate inputs when operating / interacting with the device and reducing user errors), and this further reduces the device's power consumption and improves battery life by allowing the user to use the device more quickly and efficiently.

[0313] In some embodiments, a segment (e.g., 1204) is a first segment, and the clock face includes a second segment (e.g., 1208) (e.g., the first segment extends clockwise from the first edge to the second edge), and the second segment extends clockwise from the second edge to the first edge. In some embodiments, according to the determination that the current time is the first time, the first segment occupies a first portion of the clock face, and the second segment occupies a second portion of the clock face that does not include the first portion. In some embodiments, according to the determination that the current time is the second time, the second segment occupies at least a portion of the first portion of the clock face (e.g., one segment becomes larger as the other becomes smaller).

[0314] In some embodiments, according to the determination that the current time is a first time, the segment includes a first color. In some embodiments, according to the determination that the current time is a second time, the segment includes a second color different from the first color (for example, the segment changes color hour by hour, so that at the first time (e.g., 10:09 AM), the segment has the first color (e.g., white) clockwise from the first edge (e.g., hour indicator) to the second edge (e.g., minute indicator), and at the second time (e.g., 11:09 AM), the segment has the second color (e.g., black) clockwise from the first edge (e.g., hour indicator) to the second edge (e.g., minute indicator)).

[0315] In some embodiments, according to the determination that the current time is a first time (e.g., 10:09), a portion of the digital time display (e.g., minute digits) includes a third color (e.g., white), and according to the determination that the current time is a second time (e.g., 11:00), a portion of the digital time display (e.g., minute digits) includes a fourth color (e.g., black) that is different from the third color. Displaying a portion of the digital time display in the third color according to the determination that the current time is a first time, and in a fourth color different from the third color according to the determination that the current time is a second time, provides improved visual feedback by presenting a clear visual distinction between the segment and the digital time display and providing a dynamic user interface. By providing improved visual feedback, the usability of the device is improved, the user device interface becomes more efficient (e.g., by helping the user make appropriate inputs when operating / interacting with the device and reducing user errors), and this further reduces the power consumption of the device and improves battery life by allowing the user to use the device more quickly and efficiently.

[0316] In some embodiments, the clock face for a first time further includes complications (e.g., 1206) (e.g., complications refer to features of the clock face different from those used to indicate the hours and minutes of a given time (e.g., clock hands or hour / minute display)). In some embodiments, complications provide the user with different types of information, such as data obtained from an application). In some embodiments, the information communicated to the user by the complication is customizable. In some embodiments, a segment overlaps with a complication at a first time (e.g., completely overlaps), and according to the determination that the segment overlaps with the complication at a first time, the complication includes a fifth color. In some embodiments, the clock face for a second time further includes complications, where the segment does not overlap with the complication at a second time (e.g., the portions of the clock face occupied by the segment and the complication are mutually exclusive), and according to the determination that the segment does not overlap with the complication at a second time, the complication includes a sixth color different from the fifth color. In some embodiments, according to the determination that the complication partially overlaps with the segment (for example, Figure 12C), the non-overlapping portion of the complication is the sixth color, and the overlapping portion is the fifth color.

[0317] In some embodiments, upon receiving a request to display a clock face, the clock face is displayed without clock hands. In some embodiments, the electronic device detects a sequence of one or more inputs (e.g., 1210a-1210h) (e.g., contact on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., pressing or rotating)) corresponding to a request to edit a first clock face (e.g., entering a clock face editing mode, selecting a style selection interface, selecting a different style, and confirming the style selection). Upon detecting a sequence of one or more inputs corresponding to a request to edit a first clock face (e.g., 1200), the electronic device displays a clock face including one or more clock hands (e.g., 1218a, 1218b) via a display device (e.g., the electronic device displays the clock face according to the selected style and selects a style in editing mode). In some embodiments, the clock hands are aligned with the edges of the segments.

[0318] In some embodiments, upon receiving a request to display a clock face, the segment extends to the edge of the display device (Figure 12A) (for example, in full-screen mode / style, the segment extends to the edge of the display). In some embodiments, the electronic device detects a second sequence of one or more inputs (e.g., 1210a-1210h) corresponding to a request to edit a first clock face (e.g., touch on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., press or rotate)) (e.g., enter clock face editing mode, select a style selection interface, select a different style, and confirm the clock face selection). In response to detecting a second sequence of one or more inputs corresponding to a request to edit a first clock face, the electronic device displays a clock face via the display device (e.g., Figure 12H) (e.g., the electronic device displays the segment according to the selected style). This segment includes segments that extend to (but not extend beyond) the outer perimeter of the clock face area (e.g., a circular area or an area having a different predetermined shape, smaller than the entirety of the device's display, and optionally, an area having a shape different from the shape of the device's display). In some embodiments, in a circular clock face style / mode, the segment occupies a portion of the circular area (e.g., Figure 12K) that does not extend to the edge of the display. In some embodiments, the segment extends to the edge of the circle (e.g., from the center of the circle). In some embodiments, the clock face has complications (e.g., 1220a-1220d) around the circular area.

[0319] In some embodiments, after displaying a clock face in response to receiving a request to display a clock face, the electronic device detects a third sequence of one or more inputs (e.g., 1210a-1210h) corresponding to a request to edit the first clock face (e.g., touch on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., pressing or rotating)) (e.g., entering a clock face editing mode, selecting a style selection interface, selecting a different style, and confirming the style selection). In response to detecting a third sequence of one or more inputs corresponding to a request to edit the first clock face, the electronic device displays a clock face without segments (e.g., Figures 12L, 12M) via a display device.

[0320] It should be noted that the details of the process described above with respect to Method 1300 (e.g., Figure 13) are also applicable in a similar manner to the methods described above and below. For example, Methods 700, 900, 1100, 1500, 1700, and 1900 optionally include one or more characteristics of the various methods described above with reference to Method 1300. For example, operations 1306 and 1308 can be applied to the clock face in Methods 700 and 900, and / or the time display in Method 1500. For brevity, these details will not be repeated below.

[0321] Figures 14A to 14H show exemplary user interfaces for a clock face according to several embodiments. These user interfaces are used to illustrate processes described later, including the process shown in Figure 15.

[0322] Figure 14A shows an electronic device 600 that displays a clock face 1400 on a display 602. The clock face 1400 has a layout that includes a time display 1402 and complications 1404a to 1404c. The time display 1402 is presented in a first position 1406a within its respective layout according to a first format. The complications 1404a to 1404c are located in a second position 1406b, a third position 1406c, and a fourth position 1406d within its respective layout on the clock face 1400.

[0323] In Figure 14A, the time display 1402 occupies a circular area on the watch face 1400 and is presented according to a first format including a digital time display, and includes a circular dial 1402-2 having elements for a numerical representation of the hour 1402-1a, a numerical representation of the minute 1402-1b, and a second. The current second is indicated by highlighting the corresponding element of the circular dial. Complication 1404a corresponds to a weather application (e.g., displaying data from a weather application), complication 1404b corresponds to an activity application, and complication 1404c corresponds to a stock application. Complications 1404a and 1404b occupy a circular area on the watch face 1400, while complication 1404c occupies a rectangular area on the watch face 1400. Complication 1404c is wider than the time display 1402. In some embodiments, the complication 1404c occupies a larger area (e.g., a larger surface area) on the dial 1400 than the time display 1402. In some embodiments, the dial 1400 includes only one complication (e.g., one circular complication or one rectangular complication), only two complications (e.g., one circular complication and one rectangular complication), or more than three complications.

[0324] The watch face 1400 includes a notification 1408. According to the format of the watch face 1400, the notification 1408 is located near the top of the watch face 1400 and is horizontally offset from the center of the watch face 1400 (for example, the notification 1408 is not horizontally centered on the watch face 1400). In Figure 14A, the notification 1408 is located to the left of a line that passes vertically through the center of the watch face 1400. The notification 1408 is located between the time display 1402 and the complication 1404a. The horizontally offset position of the notification 1408 is in contrast to the horizontally centered position of the notification 614 in Figure 6B.

[0325] In Figure 14A, device 600 detects input 1410a (for example, a characteristic intensity higher than the threshold intensity or a touch on the touch-sensitive display 602 for a period longer than the threshold duration). Upon detecting input 1410a, device 600 enters the clock face editing mode and displays the user interface 1412 as shown in Figure 14B. In some embodiments, device 600 enters the clock face editing mode upon detecting a sequence of one or more inputs according to the techniques described above with reference to Figures 6C-6E.

[0326] The user interface 1412 includes a representation of the clock face 1400, an element indicator 1414 that shows the element selected for editing, and paging dots 1416a to 1416c corresponding to the first to third editing pages.

[0327] Figure 14B shows the first editing page corresponding to the paging dot 1416a, where the paging dot 1416a is displayed in white, visually distinguishing it from the paging dots 1416b and 1416c, which are displayed in black. On the first editing page, the user can select an element for editing by tapping an element (for example, the representation 1413 of the time display 1202 and the representations 1415a to 1415c of complications 1404a to 1404c), and then edit the selected element by rotating the input mechanism 604.

[0328] In Figure 14B, the time display 1402 is selected for editing as indicated by the element indicator 1414. In response to detecting input 1410b (e.g., rotation of input mechanism 604), device 600 modifies the time display 1402 as indicated by the time display representation 1418 in Figure 14C. The time display representation 1418 has a different format from the time display 1402. The format of the time display representation 1418 includes an analog time display (e.g., does not include a digital time display). Once the time display format is edited, device 600 maintains the layout of the clock face 1400. For example, the time display remains at position 1406a (for example, time display representation 1418 is in the same position as time display 1402 on the watch face 1400), the representations 1415a to 1415c of complications 1404a to 1404c remain at positions 1406b to 1406d (each), and complications 1404a to 1404c remain associated with the weather, activity, and stock applications (each).

[0329] In response to detecting input 1410c (e.g., a swipe), device 600 switches to a second editing page, as indicated by the paging dot 1416b in Figure 14D. On the second editing page, the user can edit the color scheme of the watch face 1400. In response to detecting input 1410d (e.g., a rotation of the input mechanism 604), device 600 changes the color scheme from all colors to a single color, as shown in Figure 14E. In some embodiments, according to the single-color scheme, most of the graphical elements of the watch face are displayed in black or white, and the remaining elements are displayed in a highlight color (e.g., a single color other than black, white, or shades between black and white). In some embodiments, the color is used to highlight specific elements (e.g., digits and / or highlighted seconds elements in a digital time display, hands in an analog time display). In Figure 14E, according to the single-color scheme, the watch hands 1418a and 1418b and the trend line 1420 in the complication 1404c are displayed in a highlight color.

[0330] Upon detecting input 1410e (e.g., a swipe), device 600 switches to a third editing page, as indicated by the paging dot 1416c in Figure 14F. On the third editing page, the user can edit the color settings of the clock face 1400. For a single-color scheme, the third editing page allows the user to select a highlight color. Upon detecting input 1410f (e.g., rotation of the input mechanism 604), device 600 changes the highlight color from red to blue, as shown in Figure 14G, by indicating the clock hands 1418a and 1418b, as well as the dashed trend line 1420.

[0331] In response to input 1410g (for example, a press of the pressable and rotatable input device 604), device 600 exits the watch face editing mode and displays the edited watch face 1422 as shown in Figure 14H. Watch face 1422 maintains the layout of watch face 1400 when the time display format has been edited. The time display 1424 (corresponding to representation 1418) is displayed at position 1406a, complications 1404a-1404c remain at positions 1406b-1406d (each), and complications 1404a-1404c remain associated with the weather, activity, and stock applications (each).

[0332] Figure 15 is a flowchart illustrating a method for providing a clock face using an electronic device according to several embodiments. Method 1500 is performed in an electronic device (e.g., 100, 300, 500, or 600) equipped with a display device (e.g., 602). Some operations of Method 1500 are optionally combined, the order of some operations is optionally changed, and some operations are optionally omitted.

[0333] As will be described later, Method 1500 provides an intuitive method for providing a clock face. This method reduces the cognitive burden on the user interacting with the electronic device, thereby creating a more efficient human-machine interface. In the case of battery-powered computing devices, power is saved and the time interval between battery charges is extended by enabling the user to interact with the device more quickly and efficiently.

[0334] The electronic device displays a first clock face (e.g., 1400 in Figure 14A) via a display device (1502). The first clock face has a layout, each layout including a first time display (e.g., 1402) presented in a first format (e.g., analog clock face or digital time display) at a first position (e.g., 1406a) within the layout, and a first complication (e.g., 1404a, 1404b, 1404c) at a second position (e.g., 1406b, 1406c, 1406d) within the layout (e.g., a complication refers to any clock face feature other than those used to indicate the hours and minutes of the time (e.g., clock hands or hour / minute display)). In some embodiments, the complication provides the user with different types of information, such as data obtained from an application. In some embodiments, the information communicated to the user by the complication is customizable.

[0335] The electronic device detects a sequence of one or more inputs (e.g., 1410a-1410g) (e.g., contact on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., pressing or rotating)) corresponding to a request to edit a first clock face (e.g., entering a dial editing mode, selecting a dial element selection interface, selecting a time display, selecting a different time display, and confirming the dial selection) (1504).

[0336] In response to detecting a sequence of one or more inputs corresponding to a request to edit the first clock face, the electronic device displays a second clock face (e.g., 1422) via a display device (1506). The second clock face has a layout, each layout including a second time display (e.g., 1424) (e.g., analog-to-digital or digital-to-analog time display) presented according to a second format different from the first format at a first position (e.g., 1406a) within the layout, and a first complication (e.g., 1404a) at a second position (e.g., 1406b) within the layout. Displaying a second clock face in each layout, in response to a sequence of one or more inputs corresponding to a request to edit the first clock face, including (1) a second time display presented according to a second format different from the first format in a first position within each layout, and (2) the first complication in a second position within each layout, provides improved visual feedback and allows the user to customize the clock face by selecting a specific format for the time display on the clock face without affecting other elements of the clock face, such as the first complication. By performing an action when certain conditions are met without requiring further user input and providing improved visual feedback without cluttering the user interface, the usability of the device is enhanced, the user device interface is made more efficient (for example, by helping the user to provide appropriate input when operating / interacting with the device and reducing user errors), and in addition, power consumption is reduced and the battery life of the device is improved by allowing the user to use the device more quickly and efficiently.

[0337] In some embodiments, the first watch face (e.g., 1400) includes a second complication (e.g., 1404b) in a third position within its respective layout (e.g., 1406c). In some embodiments, the second complication is displayed simultaneously with the first complication on the first watch face, and the second watch face includes the second complication in a third position within its respective layout. In some embodiments, the second complication is displayed simultaneously with the first complication on the second watch face.

[0338] In some embodiments, upon detecting a sequence of one or more inputs corresponding to a request to edit a first watch face, the electronic device displays a watch face editing interface (e.g., 1412) via a display device, which includes simultaneously displaying representations of the first complication (e.g., 1415a-1415c) and representations of the second complication (e.g., 1415a-1415c) (e.g., Figure 14B), before displaying the second watch face. Displaying a watch face editing interface that includes simultaneously displaying representations of the first and second complications provides improved feedback and allows the user to customize the watch face by selecting a specific format for the time display on the watch face while maintaining the context of other elements of the watch face (e.g., the first and second complications). By providing improved feedback, the usability of the device is enhanced, the user device interface becomes more efficient (for example, by helping users make appropriate inputs when operating / interacting with the device and reducing user errors), which in turn reduces power consumption and improves the device's battery life by allowing users to use the device more quickly and efficiently.

[0339] In some embodiments, a first complication (e.g., 1404c) occupies a rectangular area (e.g., 1406d) at a first position within each layout, and a second complication (e.g., 1404b) occupies a circular area (e.g., 1406c) at a second position within each layout.

[0340] In some embodiments, the first format of the first time display includes a digital time display (e.g., 1402-1) including a numerical representation of the hour (e.g., 1402-1a) and a numerical representation of the minute (e.g., 1402-1b), and a plurality of elements (e.g., 1402-2) arranged around the numerical representations of the hour and minute. In some embodiments, the plurality of elements (e.g., 1402-2) represent seconds and indicate the current second (e.g., by changing their appearance).

[0341] In some embodiments, the electronic device receives first data representing a first alert. In response to receiving data representing an alert, the electronic device displays a notification (e.g., 1408) (e.g., a dot) at a first position on the display device. In some embodiments, the electronic device detects a sequence of one or more inputs (e.g., 610a) (e.g., activation of a touch-sensitive and / or rotatable input mechanism on a touch-sensitive display (e.g., pressing or rotating)) corresponding to a request to select a clock face having a second layout different from each of the respective layouts (e.g., entering a clock face selection mode, selecting a different clock face, and confirming the selection of the clock face). In response to detecting a sequence of one or more inputs corresponding to a request to select a clock face having a second layout different from each of the respective layouts, the electronic device displays a third clock face (e.g., 606) having the second layout via the display device. In some embodiments, while displaying the third clock face (e.g., 606) having the second layout, the electronic device receives second data representing a second alert. Upon receiving second data representing a second alert, the electronic device displays a second notification (e.g., 614) (e.g., a dot) at a second location on the display device that is different from the first location on the display device. Displaying notifications at different locations on the display of a watch face with different element layouts provides improved feedback by allowing notifications to be displayed while maintaining the layout of the watch face. For example, notifications can be moved based on the layout of the watch face, instead of changing the layout, displaying notifications in a position that obscures other elements of the watch face, or refraining from displaying notifications altogether.By providing improved feedback, the usability of the device is enhanced, the user device interface becomes more efficient (for example, by helping users make appropriate inputs when operating / interacting with the device and reducing user errors), which in turn reduces power consumption and improves the device's battery life by allowing users to use the device more quickly and efficiently.

[0342] In some embodiments, the first complication occupies a first area (e.g., 1406d) having a first display size, and the first time display occupies a second area (e.g., 1406a) having a second display size smaller than the first display size.

[0343] In some embodiments, the second clock face is displayed according to a first (e.g., multicolor) color scheme. In some embodiments, the electronic device detects a sequence of one or more inputs (e.g., 1410a-1410g) (e.g., touch on a touch-sensitive display and / or activation of a rotatable input mechanism (e.g., press or rotate)) corresponding to a request to edit the color scheme of the clock face (e.g., enter clock face editing mode, select a color scheme, and confirm the dial selection). In response to detecting a sequence of one or more inputs corresponding to a request to edit the color scheme of the clock face, the electronic device displays a fourth clock face (e.g., 1422) according to a second color scheme (e.g., monocolor) via a display device. In some embodiments, the fourth clock face includes a plurality of elements consisting of a first set of elements (e.g., 1404a-1404c) and a second set of elements (e.g., 1424a, 1424b, 1420). In some embodiments, the first set of elements includes a majority of the plurality of elements. In some embodiments, the elements of the first set are represented by two or more shades selected from a first color to a second color (for example, a grayscale color range from black to white), and the elements of the second set are represented by an accent color outside the color range.

[0344] In some embodiments, the elements of the second set (e.g., 1424a, 1424b, 1420) represent data included in a time display (e.g., 1424) or from an application (e.g., a stock price application corresponding to 1404c).

[0345] It should be noted that the details of the process described above with respect to Method 1500 (e.g., Figure 15) are also applicable in a similar manner to the methods described above and below. For example, Methods 700, 900, 1100, 1300, 1700, and 1900 optionally include one or more characteristics of the various methods described above with reference to Method 1500. For example, operations 1502, 1504, and 1506 can be applied to change the time display format in Methods 700, 900, 1300, and 1700. For brevity, these details will not be repeated below.

[0346] Figures 16A to 16J show exemplary user interfaces for displaying solar information on a clock face according to several embodiments. These user interfaces are used to illustrate processes described later, including the process shown in Figure 17.

[0347] Figure 16A shows an electronic device 600 that displays a clock face 1600 on a display 602. In some embodiments, the device 600 displays the clock face 1600 in response to receiving a request to display the clock face (e.g., a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face). The clock face 1600 includes an analog dial 1602 representing a 24-hour period and a plug-in time display 1604. In Figure 16A, the analog dial 1602 includes a circular dial with hour markers arranged at equal angular intervals around the outer circumference of a circle, representing 24 hours. The analog dial 1602 is oriented with 0 o'clock (midnight) at the bottom of the dial and 12 o'clock (noon) at the top of the dial. In Figure 16A, the plug-in time display 1604 includes an analog clock face with hour and minute hands indicating the current time (2:00 p.m.). At 2:00 PM, the plugged-in time indicator 1604 is displayed in a first position on the clock face user interface 1600 within the analog dial 1602. As time progresses, the plugged-in time indicator 1604 moves along a circular path within the analog dial 1602. In some embodiments, the plugged-in time indicator 1604 is semi-transparent.

[0348] The clock face 1600 includes a representation 1606 that shows the position of the sun at the displayed time (for example, relative to its position on Earth (e.g., corresponding to the current position of device 600)). The position of representation 1606 relative to the analog dial 1602 indicates the same time (e.g., the current time) as indicated by the insert time display 1604. As time progresses, representation 1606 moves around a circular path 1607 that has a common origin with the circular path on which the insert time display 1604 moves. As shown in Figure 16A, the insert time display 1604 and representation 1606 are separated by 180 degrees around the common origin of their paths.

[0349] The clock face 1600 includes a segment 1614 having a first edge 1614a indicating the sunrise time on the analog dial 1602 and a second edge 1614b indicating the sunset time on the analog dial 1602. The angular range of the segment 1614 clockwise from the first edge 1614a to the second edge 1641b represents the length of daylight from sunrise to sunset.

[0350] The clock face 1600 also includes target points 1608a–1608e at specified times along the path 1607 to which the representation 1606 travels. Target points 1608a–1608e indicate events throughout the day (e.g., astronomical solar events such as dawn 1608a, sunrise 1608b, solar maxima 1608c, sunset 1608d, and twilight 1608e). The position of the target points relative to the analog dial 1602 indicates the time of the corresponding event.

[0351] Subsequently, at 8:00 p.m., after sunset and before sunrise, device 600 receives a second request to display the clock face (for example, a wrist-raise gesture, a request to switch from viewing an application or notification screen to displaying the clock face). In response to receiving the second request to display the clock face, device 600 displays a clock face 1600 showing a second time, as shown in Figure 16B. In Figure 16B, the clock face 1600 includes an analog dial 1602 and a plug-in time indicator 1604 in a second position on the clock face 1600, inside the analog dial 1602, different from the first position. The plug-in time indicator 1604 shows the second time. As shown in Figures 16A and 16B, the indicators showing the position of the sun (indicator 1606 in Figure 16A and indicator 1612 in Figure 16B (described later)) and the inserted time display 1604 move in sync clockwise on the clock face 1600. As a result, the indicator showing the position of the sun displays the current time relative to the analog dial 1602 and remains 180 degrees away from the inserted time display 1604.

[0352] In some embodiments, the visual characteristics of the display indicate the position of the sun as it changes over time. For example, between sunset and sunrise, the representation indicating the position of the sun is displayed in an appearance more similar to the moon than the sun (e.g., display 1606 is displayed without rays), or is replaced by a different display 1612, as shown in Figure 16B. Representations 1606 and / or 1612 may be colored red around sunrise and sunset, and brighter and / or nearly white at the sun's highest point, to correspond to the actual physical appearance of the sun at each time of day. The watch dial 1600 also includes complications 1605a-1605d. In some embodiments, the colors of complications 1605a-1605d are determined based on the time. In some embodiments, the watch dial 1600 includes a background, and the time determines the color of the background. For example, the analog dial 1602 includes a darker background at 8:00 p.m. after sunset (Figure 16B) than at 2:00 p.m. (Figure 16A). In some embodiments, the background has a gradual transition from a first color to a second color and includes a gradient that changes along a direction parallel to a line from the center of the analog dial 1602 to a position on the analog dial 1602 corresponding to the highest point of the sun (e.g., Figure 16K). In some embodiments, the main color gradient changes with time.

[0353] Figure 16C shows the clock face 1600 at a third time of day (e.g., 7:00 AM) at sunrise. In Figure 16C, the representation 1606 is modified to revert to a sun-like appearance, and the analog dial 1602 is displayed in brighter colors than in Figure 16B.

[0354] Referring to Figure 16D, the clock face 1600 again displays the current time as 2:00 PM. In Figure 16D, device 600 detects input 1610a (e.g., a characteristic intensity higher than a threshold intensity or a touch on the touch-sensitive display 602 for a period longer than a threshold duration). In response to detecting input 1610a, device 600 enters clock face editing mode and displays the user interface 1616. In some embodiments, device 600 enters clock face editing mode in response to detecting a sequence of one or more inputs according to the techniques described above with reference to Figures 6C-6E.

[0355] The user interface 1616 includes a representation of the clock face 1600 and an element indicator 1618 that shows the element selected for editing. In Figure 16E, the element indicator 1618 indicates that the plug-in time display 1604 is selected for editing. In response to detecting input 1601b (e.g., rotation of input mechanism 604), the device 600 changes the plug-in time display 1604 from analog to digital, as shown in Figure 16F. In response to detecting input 1610c (e.g., pressing of input mechanism 604), the device 600 exits the clock face editing mode and displays the clock face 1600 with the digital plug-in time display 604, as shown in Figure 16G.

[0356] In Figure 16G, device 600 detects input 1610d (e.g., a tap on display 602). In some embodiments, input 1610d includes rotation of input mechanism 604. In response to detecting input 1610d, device 600 displays a user interface 1620 containing information about the current date (Figure 16H). User interface 1620 includes a title 1622 indicating that user interface 1620 is an information screen, and a day length indicator 1624 displaying the current length of daylight from sunrise to sunset.

[0357] In the embodiment shown in Figure 16H, device 600 enters time scrolling mode upon detection of input 1610d. While in time scrolling mode, the user can provide input (e.g., rotation of input mechanism 604) to scroll the clock face to a non-current time. This allows the user to view information about a target point (e.g., the exact time of solar maxima). Upon detection of input...

Claims

1. It is a method, In an electronic device equipped with a display device, Displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, wherein displaying the selection user interface for selecting a watch face from a plurality of watch faces includes displaying a first watch face from the plurality of watch faces in a first size, and also includes displaying at least a portion of two or more different watch faces from the plurality of watch faces. While displaying a selection user interface for selecting a watch face from a plurality of watch faces via the display device, user input is detected at a position corresponding to the first watch face. In response to detecting the aforementioned user input, In accordance with the determination that the user input satisfies the first input criterion, The first clock face is displayed via the display device in a second size that is larger than the first size, In accordance with the determination that the user input satisfies a second input criterion different from the first input criterion, Displaying a sorting user interface for rearranging the plurality of clock faces via the display device, wherein displaying the sorting user interface for rearranging the plurality of clock faces includes displaying at least a portion of three or more clock faces, including the first clock face, the second clock face, and the third clock face, wherein the second clock face and the third clock face are displayed in a third size smaller than the first and second sizes, While the sorting user interface is displayed, the movement corresponding to the first clock face is detected, A method comprising: detecting the movement corresponding to the first clock face, and moving the first clock face to one or more other clock faces in the sorting user interface according to the detected movement.

2. Displaying the sorting user interface for rearranging the plurality of clock faces includes simultaneously displaying the first clock face, the second clock face of the plurality of clock faces, and the third clock face of the plurality of clock faces. The first clock face is displayed in a fourth size smaller than the first size. The second clock face is displayed in a size smaller than the fourth size. The method according to claim 1, wherein the third clock face is displayed in a size smaller than the fourth size, and the second clock face is different from the third clock face.

3. The method according to claim 1 or 2, wherein displaying the sorting user interface includes displaying the first clock face in a fourth size smaller than the first size.

4. The method described above, Detecting a second movement while the sorting user interface including the first clock face is displayed in the fourth size, wherein the second movement corresponds to the first clock face. In response to detecting the second movement corresponding to the first clock face, According to the determination that the second movement moves the first clock face by a threshold distance in the first direction, Further reducing the size of the second and third clock faces, In accordance with the determination that the second movement does not move the first clock face by the threshold distance in the first direction, To continue displaying the second and third clock faces without reducing their size, The method according to claim 3, further comprising:

5. While the selection user interface for displaying the first clock face is displayed via the display device, a scroll user input corresponding to the first scroll direction is detected. In response to detecting the aforementioned scroll user input, The first clock face is slid out of the display device in a direction corresponding to the first scrolling direction, The second clock face is slid onto the display device in a direction corresponding to the first scrolling direction, The method according to any one of claims 1 to 4, further comprising:

6. In accordance with the detected movement, the first clock face is moved relative to one or more of the other clock faces in the sorting user interface. Changing the order of the first clock face relative to one or more of the other clock faces, To generate a tactile output corresponding to changing the order of the first clock face relative to one or more of the other clock faces, The method according to any one of claims 1 to 5, including the method described in any one of claims 1 to 5.

7. In accordance with the detected movement, while moving the first clock face to one or more of the other clock faces in the sorting user interface, it is determined that the last of the plurality of clock faces has been reached. In response to determining that the last of the plurality of clock faces has been reached, a second tactile output corresponding to reaching the last of the plurality of clock faces is generated. The method according to any one of claims 1 to 6, further comprising:

8. At least two of the plurality of clock faces are an ordered set, and the method is The method according to any one of claims 1 to 7, further comprising displaying a position indicator via the display device while the sorting user interface is being displayed, wherein the position indicator provides an indication of the current order position of the first watch face among the at least two watch faces of the plurality of watch faces.

9. Displaying at least a portion of two or more different watch faces from the plurality of watch faces includes displaying at least a portion of two or more different watch faces from the plurality of watch faces in a first order, and the method is After moving the first clock face to one or more of the other clock faces in the sorting user interface according to the detected movement, a request is received to display the selection user interface for selecting a clock face from a plurality of clock faces. In response to receiving the request to display the selection user interface, the selection user interface is displayed via the display device, wherein the display of the selection user interface is to display at least a portion of two or more different watch faces from the plurality of watch faces in a second order different from the first order. The method according to any one of claims 1 to 8, further comprising:

10. Displaying at least a portion of two or more different watch faces from the plurality of watch faces includes displaying at least a portion of two or more different watch faces from the plurality of watch faces based on a first order of the plurality of watch faces, Moving the first clock face relative to one or more of the other clock faces in the sorting user interface according to the detected movement changes the order of the plurality of clock faces to a second order different from the first order. The method described above is After moving the first clock face to one or more of the other clock faces in the sorting user interface according to the detected movement, Receiving a request to display the first clock face in the second size, In response to receiving the request to display the first clock face in the second size, the display device displays the first clock face in the second size, The method involves detecting a user input to change the clock face while the first clock face is displayed in the second size, wherein the user input to change the clock face includes a directional component. In response to detecting user input to change the clock face, the display of the first clock face in the second size is replaced with the next clock face in the second order selected based on the directional component, The method according to any one of claims 1 to 9, further comprising:

11. Displaying the first watch face in the second size before displaying the selection user interface for selecting a watch face from multiple watch faces, which includes displaying at least a portion of two or more different watch faces from a plurality of watch faces, While the first clock face is displayed in the second size, a third user input that satisfies each criterion is detected, It further includes, Displaying the selection user interface for selecting a watch face from multiple watch faces is in response to receiving the third user input. The method according to any one of claims 1 to 10.

12. In response to detecting the aforementioned user input, In accordance with the determination that the user input satisfies the fourth input criterion, The process of removing the first clock face from the plurality of clock faces is initiated. The method according to any one of claims 1 to 11, further comprising:

13. While the sorting user interface is displayed, the electronic device detects the movement corresponding to the first clock face. The method according to any one of claims 1 to 12, wherein the first clock face in the sorting user interface is at least partially transparent, so that at least a portion of one or more other clock faces in the sorting user interface is visible behind the first clock face.

14. A computer program that causes a computer to perform the method described in any one of claims 1 to 13.

15. An electronic device comprising a memory for storing the computer program described in claim 14, and one or more processors capable of executing the computer program stored in the memory, wherein the electronic device is configured to communicate with a display device.

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