JP6924802B2 - User interface User interface for manipulating objects - Google Patents

Description

[Cross-reference of related applications]
This application is entitled "CROWN INPUT FOR A UILABLE ELECTRONIC DEVICE", US Patent Provisional Application No. 61 / 873,356 filed on September 3, 2013, "USER INTERFACE OBJECT MANIPULATIONS IN AUSER" US Patent Provisional Application No. 61 / 873,359 filed on March 3, 2013, US Patent Provisional Application No. 61 / 959,851, "USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS" filed on September 3, 2013, "USER" INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES "US patent provisional application No. 61 / 873,360 filed on September 3, 2013, and" INTERFACE FOR MANIPUTE Claims the priority of US Patent Non-Provisional Application No. 14 / 476,657 filed on March 3rd. The contents of these applications are incorporated herein by reference in their entirety for all purposes.

This application is a co-pending application entitled "CROWN INPUT FOR A UILABLE ELECTRONIC DEVICE", which was filed on September 3, 2014 at the same time as this application, with Nicholas Zambetti et al. As the inventor. A US patent non-provisional application entitled "USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE" filed on September 3, 2014 at the same time as this application, with Zambetti et al. As the inventor, and "Device, Method, and Graphic". It is related to US Patent Provisional Application No. 61 / 747,278, filed on December 29, 2012, entitled "Interface for Manufacturing User Interface Objects with Visual and / or Haptic Feedback". The contents of these applications are incorporated herein by reference in their entirety for all purposes.

[Technical field]
The disclosed embodiments generally relate to user interfaces of electronic devices, including, but not limited to, user interfaces for electronic wristwatches.

Modern personal electronic devices can have a small shape. Exemplary personal electronic devices include, but are not limited to, tablets and smartphones. The use of such a personal electronic device involves the manipulation of a user interface object on the display screen, which has a small shape that complements the design of the personal electronic device.

Illustrative operations that a user can perform on a personal electronic device include navigating a hierarchy, selecting user interface objects, adjusting the position, size, and zoom of user interface objects, or manipulating user interfaces. Exemplary user interface objects include control elements such as digital images, videos, text, icons, buttons, and other graphics.

Existing methods of manipulating user interface objects on miniaturized personal electronic devices can be inefficient. Moreover, existing methods generally provide lower accuracy than preferred.

In some embodiments, techniques for navigating a user interface on a personal electronic device based on crown movement are disclosed. Systems and computer-readable storage media that perform the processes described above are also disclosed.

An exemplary personal electronic device is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface logic structure is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface transition is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface transition is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface transition is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

Illustrative user interfaces and transitions are illustrated.

An exemplary user interface is illustrated.

Illustrative user interfaces and transitions are illustrated.

An exemplary user interface is illustrated. An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

Illustrative user interfaces and transitions are illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

Illustrative user interfaces and transitions are illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface is illustrated.

An exemplary process is illustrated.

An exemplary computing system is illustrated.

An exemplary personal electronic device is illustrated.

An exemplary personal electronic device is illustrated.

An exemplary personal electronic device is illustrated.

An exemplary user interface is illustrated.

An exemplary user interface logic structure is illustrated.

An exemplary user interface is illustrated.

In the present disclosure and the following description of the examples, reference is made to the accompanying drawings illustrating specific examples that can be practiced. It should be understood that other examples can be practiced and that the structure can be modified without departing from the scope of this disclosure.

FIG. 1 illustrates an exemplary personal electronic device 100. In the illustrated example, the device 100 is a wristwatch that generally includes a body 102 and a strap 104 that attaches the device 100 to the user's body. That is, the device 100 is wearable. The body 102 can be designed to be tied to the strap 104. The device 100 can have a touch-sensitive display screen (hereinafter referred to as a touch screen) 106 and a crown 108. In some embodiments, the device 100 can have one or more buttons 110, 112, and 114. In some embodiments, device 100 does not have buttons 110, 112, and 114.

Usually, the term "crown" in the context of a wristwatch refers to the cap on the top of the shaft around which the wristwatch is wound. In the context of a personal electronic device, the crown can be a physical component of the electronic device rather than a virtual crown on a touch-sensitive display. The ability of the crown 108 to be mechanical means that it can be connected to a sensor that converts the physical movement of the crown into an electrical signal. The crown 108 can rotate in two directions of rotation (eg, front and back). The crown 108 can also be pushed into and / or pulled out of the body of the device 100. The crown 108 can be, for example, a touch-sensitive type using capacitive touch technology that can detect whether the user is touching the crown. Further, the crown 108 can be further swung in one or more directions, or translated along a passage along at least a part of the edge or peripheral edge of the main body 102. In some examples, more than one crown 108 can be used. The appearance of the crown 108 is not necessary, but can resemble the crown of a regular wristwatch. The examples described herein refer to the rotation, push-in, pull-out, and / or touch of the crown, each of which constitutes the physical state of the crown.

Buttons 110, 112, and 114, if included, can be physical buttons or touch-sensitive buttons, respectively. That is, the button can be, for example, a physical button or a capacitive button. In addition, the body 102, which can include a bezel, may have a predetermined area on the bezel that acts as a button.

The touch screen 106 is mounted on the back or front of a touch sensor panel implemented using any desired touch sensing technique such as mutual capacitive touch sensing, self-capacitating touch sensing, resistance touch sensing, projection scanning touch sensing, etc. Display devices such as liquid crystal displays (LCDs), light emitting diode (LED) displays, and organic light emitting diode (OLED) displays that are partially or completely arranged can be included. The touch screen 106 allows the user to perform various functions by touching the touch sensor panel with one or more fingers or other objects or by hovering near the touch sensor panel. Can be done.

In some examples, the device 100 may further include one or more pressure sensors (not shown) that detect the force or pressure applied to the display. Using the force or pressure applied to the touch screen 106 as an input to the device 100, performing any desired operation, such as making a selection, entering or exiting a menu, displaying additional options / actions, etc. Can be done. In some examples, different operations can be performed based on the amount of force or pressure applied to the touch screen 106. One or more pressure sensors can also be used to determine where the force is being applied to the touch screen 106.
1. 1. Crown-based user interface control

2 to 7 illustrate an exemplary user interface that responds to the operation of crown 108 (FIG. 1). FIG. 2 shows an exemplary screen 200 that can be displayed by the device 100. The screen 200 can be, for example, a home screen that appears when the device 100 is powered on or first appears when the device 100's touch screen display is powered on (including waking from sleep). The icons 204, 206, and 208 can be displayed on the screen 200. In some embodiments, the icon can correspond to an application that can run on device 100, which means that the application can be installed on device 100 and / or the application can run as a service on device 100. Means. A touch on the icon (eg, finger tap) launches the corresponding application, which means that the application runs in the foreground of device 100 and appears on the touch screen 106. In some embodiments, the icon can correspond to a text document, media item, web page, email message, and the like.

The device 100 can select icons 204, 206, and 208 for display on the display screen 200 from a large collection of available icons, which have user-related information at this time. Because it is doing. For example, icon 204 can correspond to a messaging application for which the user has just received an incoming message, and icon 206 can correspond to a calendar application for which the user has an upcoming calendar appointment item.

FIG. 3 shows an exemplary screen 300 that can be displayed by the device 100 in response to rotation of the crown 108 in direction 302 while the screen 200 (FIG. 2) is being displayed. The screen 300 can show, for example, a user's favorite icon previously selected by the user from a large set of available icons. The screen 300 can also include icons selected by the device 100 from a large set of available icons based on the user's icon access frequency. The exemplary icons 304, 306, 308, 310, and 312 displayed on the screen 300 can correspond to applications that can run on the device 100, respectively. A touch on the icon (eg a finger tap) launches the corresponding application.

FIG. 4 shows an exemplary screen 400 that can be displayed by the device 100 in response to rotation of direction 402 of the crown 108 while the screen 300 (FIG. 3) is being displayed. The screen 400 can show, for example, icons corresponding to all of the applications that can run on the device 100. Since a large number of applications can run on the device 100, the screen 400 can include a large number of icons. When many icons are displayed, the icons can be appropriately sized to fit within the touch screen 106, or at least representative or a predetermined percentage of the icons can be displayed within the touch screen 106. It can be sized so that it fits visibly.

FIG. 5 shows an exemplary screen 500 that can be displayed by the device 100 in response to a rotation of direction 502 of the crown 108 while the screen 400 (FIG. 4) is being displayed. The screen 500 can show, for example, an icon corresponding to a subset of applications that can run on the device 100. Since fewer icons are displayed on the screen 500 than on the screen 400, the icons displayed on the screen 500, such as the icon 504, can be larger than the display of the icons on the screen 400, providing additional fidelity. Can have. For example, an icon on the screen 500 may have a mark in the form of text and / or an image to identify its corresponding application. As shown, the icon 504 uses the letter "c" to advise that the name of the corresponding application begins with a "c" in the clock. In some embodiments, a touch on the icon (eg, finger tap) launches the corresponding application.

FIG. 6 shows an exemplary screen 600 that can be displayed by the device 100 in response to rotation of the crown 108 in direction 602. The screen 600 corresponds to, for example, an application that can run on the device 100 and can show a subset of icons that are further selected as compared to the screen 500.
Since fewer icons are displayed on screen 600 than on screen 500 (FIG. 5), the displayed icons (eg, icon 604) are compared to the display of icons on screens 200, 300, 400, and 500. It can be further expanded and have additional fidelity. For example, the icon 604 can have an image of a clock that displays the current time. In some embodiments, a touch on the icon (eg, finger tap) launches the corresponding application.

7 and 8 respectively show exemplary screens 700 and 800 that can be displayed by the device 100 in response to rotation of the crown 108 in direction 702 while the screen 600 (FIG. 6) is displayed.

Referring to FIG. 7, in some embodiments, the screen 700 can be displayed in response to the crown rotation in direction 702 when the screen 600 (FIG. 6) is displayed. Since a single icon 704 is displayed on the screen 700, the icon 704 can have additional fidelity compared to the previous screen. For example, the icon 704 can have an image of a clock that displays date information along with the current time. A touch (eg, finger tap) on the icon 704 launches the corresponding application.

Turning to FIG. 8, in some embodiments, the screen 800 can be displayed in response to the crown rotation in direction 802 when the screen 600 (FIG. 6) is displayed. Screen 800 shows application 804, which corresponds to icon 704 (FIG. 7) and operates in the foreground of device 100. That is, application 804 was launched in response to crown rotation in direction 802. The exemplary application 804 can be a clock application that provides an alarm function. Further, in some embodiments, the screen 800 is displayed in response to the crown rotation in the direction 802 when the screen 700 (FIG. 7) is displayed.

The screens 200 to 700 (FIGS. 2 to 7) described above can be logically organized as an information plane along the axis. Under this systematization, a given icon screen can be considered as a plane with icons defined by two axes (eg, x-axis and y-axis) and spatially arranged on it. A plurality of planes can be systematized along a third axis called the z-axis, which is orthogonal to at least one of the x-axis and the y-axis. (The z-axis can be perpendicular to the plane formed by the x and y-axis.)

In this logical systematization, the x-axis 902 and the y-axis 904 form a plane flush with the screen surface (FIG. 1) of the touch screen of the device 100, and the z-axis 906 is formed by the axes 902 and 904. It is illustrated by FIG. 9, which is perpendicular to the y-plane. The plane 908 can correspond to the screen 200 (FIG. 2). The plane 910 can correspond to the screen 300 (FIG. 3). The plane 912 can represent a collection of icons representing operational applications of the personal electronic device. Therefore, different viewpoints on the plane 912 can correspond to screens 400 to 700 (FIGS. 4 to 7). Planes 908 and 910 can be associated with plane 912, which planes 908 and 910 can contain subsets of icons available on plane 912, respectively. A specific information plane (ie, icon screen) to be displayed on the personal electronic device can be selected by the movement of the crown, such as rotation of the crown. That is, the movement of the crown can be used to traverse an information plane that intersects the z-axis 906, or to provide an alternative view of a given plane (eg, plane 912).

In some embodiments, when the movement of the crown reaches the end of the z-axis (eg, the top or bottom plane), the displayed information (eg, the icon screen) reaches the end with a rubber band effect. Show that you did. Consider the situation where the user reaches the bottom information plane by entering the crown. When the user provides additional crown input in the same direction, the displayed collection of icons shrinks (to the extent possible) according to the crown's movement until it stops. When the crown stops moving, the displayed icons will revert from their shrunk size to their normal size with on-screen animation, thereby creating the visual effect of rubber banding.

One notable benefit of this logical systematization is that different information planes do not have to be subsets zoomed into each other (although they can be zoomed subsets). That is, for example, the planes 908 and 910 can accommodate completely different icons of the icons available on the personal electronic device, but the different information planes can be accessed more efficiently by the user.

Instead, screens 200-700 (FIGS. 2-7) can be logically organized as subsets of information belonging to different mode states of the personal electronic device. Under this systematization, the screens 200 and 300 can correspond to the first and second mode states of the device, and the screens 400-700 can correspond to, for example, the third mode state. The personal electronic device can cycle through the mode states in response to pressing the crown and display screens 200 or 300 in the first and second mode states, respectively. In an alternative embodiment, the mode states can be circulated using buttons 110, 112, or 114. When multiple screens are available within a particular mode state (eg, a third mode state), the device is based on the rotation of the crown from the display of one screen (eg 300) to another screen (eg 400). You can switch. On-screen user interface elements, such as paging dots, can be used to indicate the availability of additional screens for display within a particular mode state.

This logical arrangement is illustrated with reference to FIG. As shown, planes 4102 and 4104 correspond to screens 200 (FIG. 2) and 300 (FIG. 3), respectively. Plane 4106 can represent a collection of icons representing operational applications of personal electronic devices. Therefore, different viewpoints on the plane 4106 can correspond to screens 400 to 700 (FIGS. 4 to 7). A specific information plane (ie, an icon screen) to be displayed on the personal electronic device can be selected by a crown operation such as pushing the crown.
2. Speed-based crown control

The device 100 (FIG. 1) can take into account the rotational angular velocity of the crown 108 (FIG. 1) when determining whether one icon screen should be replaced by another icon screen. Specifically, the device 100 can require the crown 108 to rotate above a predetermined angular velocity before changing the display of one icon screen to another. In this way, the slow rotation of the crown 108, which is not intended by the user, causes the device 100 to receive the input of the crown indicating an angular displacement, while the displacement is fast enough to cause an unintended update of the user interface. Then there is no need to be interpreted. The choice of a given angular velocity for this purpose can depend on a number of factors such as the density of the currently displayed icons, the visual placement of the currently displayed icons, and the like.

（数式１） In some embodiments, the minimum rotational angular velocity of the crown required to switch between icon screens directly corresponds to the instantaneous angular velocity of the crown 108 (FIG. 1), which means that the user interface of the device 100 In essence, it means that the crown 108 responds when it reaches a sufficient angular velocity. In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens is calculated to be based on the instantaneous ("current") angular velocity of crown 108, but not directly equal to that angular velocity. The speed. In these embodiments, the device 100 can maintain the calculated crown velocity V at different moments within time T according to Equation 1.

(Formula 1)

In Equation 1, V _T represents the calculated crown velocity at time T (speed and direction), V _(T-1) represents the velocity (speed and direction) of the previous time T-1, ΔV _CROWN represents the velocity change caused by the force applied by the rotation of the crown at time _{T , and ΔV DRAG} represents the velocity change due to the drag. The force applied is _{reflected by the ΔV CROWN and} can depend on the current angular velocity of the crown. Therefore, ΔV _CROWN can also depend on the current angular velocity of the crown. In this way, the device 100 can interact with the user interface even if those intervals are subdivided based not only on the instantaneous speed of the crown but also on user input in the form of crown movement over multiple time intervals. Can provide action. Typically, if there is no user input in the form of [Delta] V _{CROWN, V T} is (zero) approaches zero on the basis of the [Delta] V _DRAG according to Equation 1, the sign of _{V T,} the rotation of the crown ([Delta] V _CROWN Note that it does not change without user input in the form of).

Typically, the higher the angular velocity of the crown, the higher the value of _{ΔV CROWN.} However, the actual mapping between the crown angular velocity and the ΔV _CROWN may vary depending on the desired user interface effect. For example, various linear or non-linear mappings can be used between the angular velocity of the crown and the ΔV _CROWN. In another example, the mapping can depend on the number of icons currently displayed and / or the placement of the icons.

Further, ΔV _DRAG can take various values. For example, the ΔV _DRAG can depend on the rotational speed of the crown so that at higher velocities it can produce a larger opposite velocity change (ΔV _DRAG). In another example, ΔV _DRAG can have a constant value. In yet another example, the ΔV _DRAG can be based on the number of currently displayed icons and / or the arrangement of currently displayed icons. It should be understood that the above-mentioned requirements for ΔV _CROWN and ΔV _{DRAG can be varied to produce the desired user interface effect.}

As can be seen from Equation 1, the rate maintained _{(V T)} may be [Delta] V _CROWN continue to increase as long as greater than [Delta] V _DRAG. In addition, V _T can have a non-zero value even when the input of the [Delta] V _CROWN is not received, this means that the user can continue to change the user interface screen may not rotate the crown do. When this happens, the screen can stop changing based on _{the maintained speed and ΔV DRAG} component when the user stops rotating the crown.

_{In some embodiments, the V (T-1)} component can be reset to a zero value when the crown is rotated in a direction corresponding to the direction of rotation opposite to the current user interface change, allowing the user to reset. , it makes it possible to quickly change the direction of the screen changes without the need to provide sufficient force to offset the V _T.

In other embodiments, different states of the physical crown other than the rotation of the crown are used to navigate the displayed icon.
3. 3. Appearance of user interface

Icons can take on a variety of appearances. For example, the icon can have a rectangular shape as shown in FIG. As another example, the icon can be circular as shown in FIGS. 2-7. In addition, the icons can take various spatial arrangement schemes, which means that the icons can be arranged along rows and columns of an invisible grid. The grid can be symmetrical or asymmetric. In FIG. 10, for example, a symmetric grid is used. In FIG. 5, for example, an asymmetric grid having an x icon arranged in the first row and a y icon arranged along the second row is used.

FIG. 11 illustrates a radial icon placement scheme in which circular icons are aligned around invisible circles 1102 and 1104 of different diameters. The invisible circles 1102 and 1104 are not necessary, but concentric. Icons such as the icon 1106, arranged along different invisible circles, can have different sizes. As shown, the icons placed along the invisible circle 1102 are closer to and larger than the center of the device 100 than the icons placed along the invisible circle 1104. Also, although not shown in FIG. 11, the radially arranged icons can be arranged along more than two invisible circles.

The distance at which a particular icon is placed from the center of the radial icon placement can depend on different factors. For example, the distance can be proportional to the frequency of use of the icon, with frequently used icons closer to the center. As another example, the distance can depend on whether an incoming call notification was received for the icon (corresponding application). As another example, the distance can be defined by the user or determined (ie selected) by the device 100.

FIG. 25A illustrates the placement of icons within an icon group. Four groups of icons are displayed on the grid 2502, including icon group 2512. In response to a touch input such as a finger tap at the touch screen position 2514 on the group 2512, the icons in the group 2512 can be displayed in an enlarged format. In the grid 2506, the icons in the group 2512, including the icon 2516, are displayed in enlarged format. FIG. 25B illustrates the placement of application functionality within a group. On the grid 2508, as discussed above, the four icons of icon group 2512 are displayed on the grid 2506. The selection of icon 2516 (eg by finger tap 2518) can display a group of functions 2520 provided by application 2510 (corresponding to icon 2508).

The size and shape of the icon group can be systematic or defined. Defined icon groups, such as icon group 2512 (FIG. 25A) in grid 2502, share a predefined group size and group shape. The systematic icon group shown in FIG. 42 can be a user-defined group size and / or group shape. For example, icon groups 4204 and 4206 within the grid 4202 are different user-defined shapes and sizes. In some embodiments, systematic icon groups are defined using software that operates on a computer external to the personal electronic device and is downloaded onto the personal electronic device.

FIG. 30 illustrates an icon placement scheme in which icons are placed similar to a Rolodex page. An exemplary Rolodex 3002 page can flip in response to crown rotation. For example, the page (icon) 3004 can flip down on the page (icon) 3006 in response to the rotation of the crown.

FIG. 31 illustrates an icon placement scheme in which the icons are placed on the outer periphery of the swivel dial. An exemplary swivel dial 3102 can swivel in response to rotation of the crown. For example, the rotation of the crown in direction 3104 causes the dial 3102 to turn in the same direction (3106). Also, pushing (or pulling out) the crown can change the number of rows in 3102, making it possible to enlarge the icons in the remaining rows and / or increase fidelity.

FIG. 32 illustrates an icon placement scheme in the form of thumbnail list 202. Icon 3204 in the exemplary thumbnail list 3202 may have a corresponding thumbnail 3206. The icons in the thumbnail list 3202 can be traversed by rotating the crown. A specific icon, such as the icon 3204, can be directly selected for display by touching the corresponding thumbnail 3206.

FIG. 33 illustrates an arrangement scheme in which the icon is aligned with the surface of an invisible sphere or polyhedron. An icon such as icon 3302 on the foreground surface of an invisible sphere can be displayed. The icon on the other side of the surface of the invisible sphere is not displayed. The invisible sphere can rotate in response to the rotation of the crown and / or the input of the touch screen, thereby changing the particular icon displayed.

During operation, device 100 (FIG. 1) can use one or more of the icon placement schemes described above. The specific arrangement (s) used by the device 10 can be selected by the user and / or by the system. That is, the user may be allowed to identify one or more preferred arrangements for display. In addition, the arrangement can be selected by the device 100 based on criteria such as the total number of applications installed on the device and the number of frequently accessed icons.

In addition, a particular order and placement of icons in a particular icon placement scheme can be selected by the user and / or by the system. For example, the user may be allowed to specify the position of the icon on a given screen. Further, the icon arrangement can be determined (that is, carefully selected) by the device 100 based on the determination criteria such as the frequency of use of a specific icon and the calculated relationship.
4. Response to user input

The displayed icon can respond to user input. 12-14 show the rearrangement of the displayed icons in response to the rotation of the crown. In FIG. 12, the nine icons are displayed along a 3x3 symmetric grid 1202. The icon 1204 is displayed at the upper right position of the grid 1202. As discussed above with respect to FIGS. 4-7, the rotation of the crown 108 can reduce the number of displayed icons to the device 100. For example, the rotation of the crown 108 can cause the device 100 to display a 2x2 grid, which reduces the number of icons displayed. FIG. 13 illustrates an exemplary transition to a 2x2 grid in response to rotation of the crown in direction 1302. As shown, in response to the rotation of the crown 1302, the icon 1204 is visible on the screen from its upper right position in the 3x3 grid of FIG. 12 to its new position in the 2x2 grid to be displayed. Is translated into. Specifically, as shown in FIG. 14, the icon 1204 is translated into the lower left corner of the 2 × 2 grid 1402. Further, the icons that should remain displayed in the 2x2 grid after the transition from the grid 1202 are magnified and placed in the 2x2 grid 1402.

15-17 illustrate another rearrangement of the icons in response to rotation of the crown. In FIG. 15, the nine icons are displayed along a 3x3 symmetric grid 1502. The icon 1504 is displayed at the upper right position of the grid 1502. As shown in FIG. 16, in response to the rotation 1602 of the crown, the icon 1504 is translated into its new position to be displayed in the 2x2 grid while in the grid 1502 (FIG. 15). It is translated off the screen from that position. In other words, during the transition illustrated by FIG. 16, the icon 1504 can be split into two portions displayed in two separate non-contact positions on the touch screen of device 100. More specifically, when the icon 1504 is translated off-screen, a portion of the icon 1504 remains partially visible in the upper right corner, while the rest of the 1504 is translated on the screen. Sometimes it is partially displayed in the lower left corner. As shown in FIG. 17, the icon 1504 is translated into the lower left corner of the 2x2 grid 1702. Further, the icons that should remain displayed in the 2x2 grid after the transition from the grid 1502 are magnified and placed in the 2x2 grid 1702.

18-20 illustrate another rearrangement of the icons in response to rotation of the crown. In FIG. 18, the nine icons are displayed along a 3x3 symmetric grid 1802. As shown in FIG. 19, in response to the rotation of the crown 1902, the icons along the right and bottom boundaries of the grid 1802 (FIG. 18) are removed from the display while the remaining icons are magnified. The remaining icons are magnified and displayed as shown in the grid 2002 of FIG.

In the exemplary screens shown in FIGS. 12-20, the icon displayed in the upper left corner (ie marked "A") is fixed, which means that the transition described above causes the icon to move from the upper left corner. It should be noted that it means not to separate. However, as discussed below, such icons can be unpinned by user input.

FIG. 21 illustrates the rearrangement of icons in response to touch screen input. As shown, the icon 2106 is displayed in the bottom row of the 4x4 grid 2012. In response to the finger tap 2104 on the icon 2106, the 3x3 grid 2108 is displayed with the icon 2106 magnified in the center. Notably, the icon marked "A" is displayed in the grid 2012 and is no longer displayed in the grid 2108. FIG. 21 also illustrates the update of the displayed icon in response to the rotation of the crown. Specifically, in response to the rotation 2110 of the crown, the icon 2106 is further magnified to become the only icon displayed on the screen.

FIG. 22 illustrates the rearrangement of icons in response to the operation of device 100. The operation of the device can be detected using one or more sensors, such as a gyroscope. As shown, the various icons are displayed within the grid 2202. In response to tilting direction 2204 of device 100, the displayed icons are translated in direction 2206, resulting in the display of different icons in grid 2208. Specifically, in response to the tilt of the device 100 in the left direction 2204, the icon of the grid 2202 translates in the left direction 2206. In some embodiments, translation can be increased such that a single row or column transitions out and a single row or column transitions onto the display. Alternatively, the full screen of the icon may transition out when a completely new set of icons transitions onto the display.

FIG. 23 illustrates a change in the appearance of the icon in response to touch screen input. As shown, the icon 2306 is in the enlarged state in response to the touch at position 2304. Notably, the icon 2306 is not located at position 2304, but rather the icon 2306 is at line 2310 above touch position 2304 along line 2312 (in its unmagnified state). In this way, the user visibility of the icon 2306 is improved both because the icon is magnified and because, in some cases, an opaque object does not interfere with the visibility of the icon when the device 100 is touched. It should be noted that more than one icon can be magnified in response to nearby touches. Multiple icons can be magnified at different magnification levels that are inversely proportional to the distance between each magnified icon and the touch position.

FIG. 40 illustrates icon behavior that illustrates the physical interaction between nearby icons. As shown, the grid 4002 contains a number of icons arranged in a radial arrangement. In response to touch input at position 4010, numerous icons are magnified at different magnification levels. Notably, the enlargement of the icon 4004 allows the adjacent icons 4006 and 4008 to be separated from the icon 4004 so that the icons do not interfere with each other's visibility.

FIG. 24 illustrates icon behavior that illustrates the interaction between the icon and the grid boundaries. As shown, a large number of icons are displayed according to the asymmetric grid 2402. The displayed icons include the uncompressed icon 2408. Icons on the right border of grid 2402 so that the icon on the left side of grid 2402 appears more predominantly in either magnified or non-compressed format in response to touch input in the form of a gesture in the right direction 2404. Can be compressed into the compressed icon 2406. Also, the icon on the left border of the grid 2402 can be compressed into the compressed icon 2412 so that the icon on the right side of the grid 2402 is displayed more predominantly in response to the touch gesture of the left side 2406. The interactions described above allow all or substantially all icons to be displayed at the same time, while allowing the user to easily view and select the icons. Note that this compression can occur in a symmetric grid, not shown.

FIG. 34 illustrates icon behavior that illustrates the interaction between grid boundaries and nearby icons. In the radial arrangement of FIG. 34, the icon is displayed between the invisible inner circle 3402 and the invisible outer boundary circle 3400. The outer circle 3400 can be sized based on the physical size of the touch screen of device 100. The inner circle 3402 can be sized based on the design and / or user preference. The size of the inner circle 3402 can also be determined based on user input such as rotation of the crown. The inner circle 3402 is capable of responding to touch screen inputs within its surface range. For example, the touchdown and the next touch operation that occur within the plane range of the inner circle 3402 can be interpreted as the pan of the inner circle 3402. When the inner circle 3402 is panned, the icons placed between the inner circle 3402 and the outer circle 3400, such as the icons 3404 and 3408, are displayed as the available space between the inner circle 3402 and the outer circle 3400. It can be resized based on the number of icons and the size of adjacent icons. For example, in response to panning to the right of circle 3402, icon 3404 can be increased in size, and enlargement of icon 3404 can be reduced in size of icon 3408.

Note that in the absence of user input, the displayed icon can be programmed to move on the screen to prevent screen burns. Also, the icon placement can respond to multi-touch gestures. For example, a gesture to the underside of two fingers on the touch screen of device 100 (FIG. 1) can result in the display of system information such as a status bar. As another example, a two-finger gesture in which two fingers move in opposite directions can configure device 100 (FIG. 1) for left-handed or right-handed use.
5. Additional features

Returning to FIG. 2, the home screen 200 can display system-generated information such as alerts. For example, the home screen 200 can display a note that the user is sitting for a long time and is required to exercise. In addition, the screen 200 can display rest advice because the user has a busy calendar the next morning. Returning to FIG. 3, the screen 300 can be displayed when the device 100 is connected to the dock.

FIG. 26 illustrates the use of wallpaper 2602 to aid user navigation of icons within the grid. As shown, the grid 2600 has a relatively large number of icons. In response to the rotation of the crown 2604, a subset of the icons on the grid 2600 is magnified and displayed within the grid 2606. In addition, the corresponding portion of wallpaper 2602 displayed in the background of the subset is also displayed, which means, for example, if the icon in the upper left quadrant of grid 2600 becomes displayed in grid 2606, then wallpaper 2602. It means that the upper left quadrant of is also displayed on the grid 2606. Also shown, in response to a left-handed 2608 touch gesture, device 100 can display another subset of the icons on the grid 2600. For example, in grid 2610, the icon for the upper right quadrant of grid 2600 is displayed along with the icon for the upper right quadrant of wallpaper 2600. In this way, the user can determine the relationship between the currently displayed set of icons and the total number of icons available for display on the device 100.

FIG. 27 illustrates an exemplary arrangement of icons, the arrangement providing information, eg, current time information, to the user. The placement can be displayed in response to the movement of the crown. Also, the placement can be displayed after a predetermined user input inactivity period. For example, a screen 2702 showing the current time using a small size icon can be displayed after a predetermined user input inactivity period. Further, in response to the rotation of the crown, the screen 2702 can transition through the screens 2704 and 2706 to the screen 2708 showing the grid of icons.

FIG. 28 illustrates an exemplary arrangement of icons (grid 2802) in which the color and / or intensity of the displayed icons can change in response to incoming information. For example, the icon 2804 corresponding to a messaging application can flash or flash when a new message arrives. In some embodiments, blinking or flashing can correspond to the popularity of the application in the application store or the frequency of use of the application in the user's larger ecosystem. In addition, the icons on the grid 2802 can represent icons that represent a larger collection of applications available in the app store, beyond those installed applications.

FIG. 29 illustrates an exemplary display of context-sensitive messages. A context-dependent message can be displayed in response to the user's detection of a touch on the crown 108. The context-sensitive message indicates the current functionality of the crown 108, which can take different functions depending on the application currently running in the foreground of the device 100. For example, when a music application is running in the foreground of device 100, a touch on the crown 108 is a context in the form of a volume indicator that can indicate to the user that the current functionality of the crown 108 is volume control. It can result in the display of dependent message 2902.

FIG. 35 illustrates an exemplary process 3500 that provides the user interface technology described above. At block 3510, input based on crown movement and / or crown touch is received. The movement of the crown can be rotation, push-in, and / or pull-out. At block 3520, the decision is made based on the type of crown movement represented by the received input. If the input received represents the rotation of the crown, processing proceeds to block 3530. If the input received represents a crown push or pull, processing proceeds to block 3550. When the received input represents a touch of the crown (without rotation or push / pull), processing proceeds to block 3560. At block 3530, the currently displayed screen and its corresponding position along the z-axis 906 (FIG. 9) can be determined. In addition, adjacent information levels along the z-axis 906 can be determined. Adjacent levels can be determined based on the direction of rotation of the crown represented by the received input. Corresponding grids of icons, such as the icons illustrated by each of FIGS. 4-7, can be displayed. At block 3550, a home screen such as the exemplary screen 200 of FIG. 2 can be displayed. In the alternative, a user's favorite screen such as the exemplary screen 300 of FIG. 3 can be displayed. At block 3560, a context-dependent message such as the exemplary context-dependent message 2902 of FIG. 29 can be displayed.

FIG. 36 illustrates an exemplary computing system 3600 that provides the user interface technology described above. In some embodiments, the computing system 3600 can form the device 100. As shown, the computing system 3600 can have an I / O section 3604, one or more computer processors 3606, and a bus 3602 connecting the memory sections 3608 to one. The memory section 3608 can accommodate computer executable instructions and / or data that implement the techniques described above, including process 3500 (FIG. 35). The I / O section 3604 can be connected to a display 3610 which can have a touch sensitive component 3612. The I / O section 3604 can be connected to the crown 3614. The I / O section 3604 can be connected to an input device 3616 that may include a button. The I / O section 3604 can be connected to, for example, Wi-Fi®, Bluetooth®, and / or communication unit 3618 capable of providing cellular functionality. The I / O section 3604 can be connected to a sensor pack 3620, which can have a gyroscope, a GPS sensor, an optical sensor, a gyroscope, an accelerometer, and / or a combination thereof. Note that one or more of the components mentioned above can be part of an on-chip system.

The memory section 3608 of the computing system 3600, when executed by one or more computer processors 3606, can cause, for example, a computer processor to perform the user interface techniques described above, including process 3500 (FIG. 35). It can be a non-temporary computer-readable storage medium that stores executable instructions. Use or association by an instruction execution system, device, or device, such as a computer-based system, a system that includes a processor, or another system that can fetch instructions from an instruction execution system, device, or device and execute the instructions. Computer-executable instructions can also be stored and / or transferred within any non-temporary computer-readable storage medium. For the purposes of this document, a "non-temporary computer-readable storage medium" may be any medium capable of accommodating or storing computer-executable instructions for use or in connection with an instruction execution system, device, or device. can. Non-temporary computer-readable storage media include, but are not limited to, magnetic, optical, and / or semiconductor storage. Examples of such storage include magnetic disks, CDs, DVDs, or optical discs based on Blu-ray technology, as well as RAM, ROM, EPROM, flash memory, and solid state memory.

The computing system 3600 is not limited to the components and configurations of FIG. 36, but may include other or additional components in a plurality of configurations. In some embodiments, the system 3600 can form a personal electronic device 3700, which is a tablet as shown in FIG. 37. In some embodiments, the computing system 3600 can form a personal electronic device 3800, which is a mobile phone as shown in FIG. In some embodiments, the computing system 3600 can form a personal electronic device 3900, which is a portable music device as shown in FIG.

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

Claims (12)

It's a method
In electronic devices with displays and touch sensitive surfaces
And displaying a plurality of application icons in various sizes including first size, and said second size smaller than the first size,
Detecting contact on the touch-sensitive surface while displaying the plurality of application icons in the various sizes.
Detecting a swipe input on the touch-sensitive surface , including detecting the movement of the contact on the touch-sensitive surface,
Resizing multiple said application icons Responding to detecting the swipe input
According to the determination that the swipe input is in the first direction.
The size of one or more of the plurality of application icons within a predetermined distance from the first edge of the display is reduced to the second size.
The size of the closest one or more application icon to the second edge of the display, as the closest application icon to the second edge of the display is greater than all the second size, increasing After increasing the size of the one or more application icons closest to the second edge of the display, at least one of the plurality of application icons has the second size. It is displayed in the larger first size, and
According to the determination that the swipe input is in a second direction different from the first direction.
The size of one or more of the plurality of application icons within the predetermined distance from the second edge of the display is reduced to the second size.
Increase the size of one or more application icons closest to the first edge of the display so that all application icons closest to the first edge of the display are larger than the second size. That is, after increasing the size of the one or more application icons closest to the first edge of the display, at least one of the plurality of application icons is said to be the second. It is displayed in the first size, which is larger than the size .
A method. The method according to claim 1.
Prior to detecting the swipe input on the touch-sensitive surface, the first application icon of the plurality of application icons is displayed substantially centered on the display.
According to the determination that the swipe input is in the first direction.
To stop displaying the first application icon among the plurality of application icons substantially centered on the display.
Displaying a second application icon different from the first application icon among the plurality of application icons is substantially centered on the display.
A method that further prepares. The method according to claim 1 or 2.
Prior to detecting the swipe input on the touch sensing surface, the first application icon of the plurality of application icons is displayed larger than the remaining application icons of the plurality of application icons. That and
According to the determination that the swipe input is in the first direction.
To stop displaying the first application icon of the plurality of application icons in a larger size than the remaining application icons of the plurality of application icons.
A second application icon different from the first application icon among the plurality of application icons is displayed larger than the remaining application icons among the plurality of application icons.
A method that further prepares. The method according to claim 2 or 3.
Prior to detecting the swipe input on the touch-sensitive surface, the first application icon among the plurality of application icons is displayed substantially centered on the display.
According to the determination that the swipe input is in the second direction.
To stop displaying the first application icon among the plurality of application icons substantially centered on the display.
The third application icon among the plurality of application icons is displayed substantially centered on the display, and the third application icon is the first application icon and the second application icon. Is different from that
A method that further prepares. The method according to any one of claims 1 to 4.
Prior to detecting the swipe input on the touch sensing surface, the first application icon of the plurality of application icons is displayed larger than the remaining application icons of the plurality of application icons. That and
According to the determination that the swipe input is in the second direction.
To stop displaying the first application icon of the plurality of application icons in a larger size than the remaining application icons of the plurality of application icons.
The third application icon among the plurality of application icons is displayed larger than the remaining application icons among the plurality of application icons, and the third application icon is the first. It is different from the application icon and the second application icon,
A method that further prepares. The method according to any one of claims 1 to 5, wherein the plurality of application icons correspond to a user-generated application set in the electronic device.
Method. The method according to any one of claims 1 to 6, wherein the electronic device is a wearable electronic device.
Method. The method according to any one of claims 1 to 7.
Receiving information representing activity in an application, the application corresponding to the displayed application icon.
To change the appearance of the displayed application icon according to the received information,
A method that further prepares. The method according to claim 8 , wherein the change is one or more of blinking, changing a color, and displaying an animation.
Method. It ’s an electronic device,
With one or more processors
Memory and
With the display
A touch-sensitive surface operably coupled to one or more processors,
It comprises one or more programs, the one or more programs being stored in the memory and configured to be executed by the one or more processors.
The one or more programs include an instruction to execute the method according to any one of claims 1 to 9.
Electronic device. A program configured to be executed by one or more processors of an electronic device having a display and a touch-sensitive surface, wherein the program is an instruction to execute the method according to any one of claims 1 to 9. including,
program. It ’s an electronic device,
With the display
Touch sensing surface and
A means for carrying out the method according to any one of claims 1 to 9,
Equipped with an electronic device.

Images