相关申请的交叉引用CROSS-REFERENCE TO RELATED APPLICATIONS
本专利申请要求以下专利申请的优先权：于2013年9月3日提交的标题为“CROWNINPUT FOR A WEARABLE ELECTRONIC DEVICE”的美国临时专利申请61/873356、于2013年9月13日提交的标题为“USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE”的美国临时专利申请61/873359、于2013年9月3日提交的标题为“USER INTERFACE FORMANIPULATING USER INTERFACE OBJECTS”的美国临时专利申请61/959851、于2013年9月3日提交的标题为“USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITHMAGNETIC PROPERTIES”的美国临时专利申请61/873360、以及于2014年9月3日提交的标题为“USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETICPROPERTIES”美国非临时专利申请14/476657。这些专利申请的内容据此全文以引用方式并入以用于所有目的。This patent application claims priority to U.S. Provisional Patent Application No. 61/873,356, filed September 3, 2013, entitled “CROWNINPUT FOR A WEARABLE ELECTRONIC DEVICE,” U.S. Provisional Patent Application No. 61/873,359, filed September 13, 2013, entitled “USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE,” U.S. Provisional Patent Application No. 61/959,851, filed September 3, 2013, entitled “USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS,” U.S. Provisional Patent Application No. 61/873,360, filed September 3, 2013, entitled “USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES,” and U.S. Provisional Patent Application No. 61/873,371, filed September 3, 2014, entitled “USER INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES.” INTERFACE FOR MANIPULATING USER INTERFACE OBJECTS WITH MAGNETIC PROPERTIES” U.S. Non-Provisional Patent Application 14/476,657. The contents of these patent applications are hereby incorporated by reference in their entirety for all purposes.
本专利申请涉及以下共同待审的专利申请：于2014年9月3日与本专利申请同时提交的标题为“CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE”的发明人为NicholasZambetti等人的美国非临时专利申请；于2014年9月3日与本申请同时提交的标题为“USERINTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE”的发明人为NicholasZambetti等人的美国非临时专利申请；以及于2012年12月29日提交的标题为“Device,Method,and Graphical User Interface for Manipulating User Interface Objectswith Visual and/or Haptic Feedback”的美国临时专利申请61/747278。这些专利申请的内容据此全文以引用方式并入以用于所有目的。This patent application is related to the following co-pending patent applications: U.S. non-provisional patent application entitled “CROWN INPUT FOR A WEARABLE ELECTRONIC DEVICE” filed concurrently with this patent application on September 3, 2014, by Nicholas Zambetti et al., and entitled “USER INTERFACE OBJECT MANIPULATIONS IN A USER INTERFACE” filed concurrently with this application; and U.S. provisional patent application 61/747,278 filed on December 29, 2012, and entitled “Device, Method, and Graphical User Interface for Manipulating User Interface Objects with Visual and/or Haptic Feedback.” The contents of these patent applications are hereby incorporated by reference in their entirety for all purposes.
技术领域Technical Field
所公开的实施例通常涉及电子设备的用户界面，该用户界面包括但不限于电子手表的用户界面。The disclosed embodiments generally relate to user interfaces for electronic devices, including but not limited to user interfaces for electronic watches.
背景技术Background Art
高级个人电子设备可具有小外形。示例性个人电子设备包括但不限于平板电脑和智能电话。使用此类个人电子设备涉及在显示屏上操纵用户界面对象，显示屏也具有与个人电子设备的设计互补的小外形。Advanced personal electronic devices may have a small form factor. Exemplary personal electronic devices include, but are not limited to, tablet computers and smartphones. Using such personal electronic devices involves manipulating user interface objects on a display screen that also has a small form factor that complements the design of the personal electronic device.
用户可对个人电子设备执行的示例性操纵包括导航分级结构，选择用户界面对象，调节用户界面对象的位置、尺寸和缩放，或以其他方式操纵用户界面。示例性用户界面对象包括数字图像、视频、文本、图标、控制元件(诸如按钮)、以及其他图形。Example manipulations that a user may perform on a personal electronic device include navigating a hierarchical structure, selecting a user interface object, adjusting the position, size, and scale of a user interface object, or otherwise manipulating the user interface. Example user interface objects include digital images, videos, text, icons, control elements (such as buttons), and other graphics.
用于在尺寸减小的个人电子设备上操纵用户界面对象的现有方法可能是低效的。此外，现有方法通常提供比优选精确度低的精确度。Existing methods for manipulating user interface objects on reduced-size personal electronic devices may be inefficient. Furthermore, existing methods typically provide less than optimal accuracy.
发明内容Summary of the Invention
在一些实施例中，公开了基于表冠的移动而在个人电子设备上导航用户界面的技术。还公开了用于执行上述过程的系统和计算机可读存储介质。In some embodiments, techniques for navigating a user interface on a personal electronic device based on movement of a crown are disclosed. Also disclosed are systems and computer-readable storage media for performing the above processes.
附图说明BRIEF DESCRIPTION OF THE DRAWINGS
图1示出了示例性个人电子设备。FIG1 illustrates an exemplary personal electronic device.
图2示出了示例性用户界面。FIG2 illustrates an exemplary user interface.
图3示出了示例性用户界面。FIG3 illustrates an exemplary user interface.
图4示出了示例性用户界面。FIG4 illustrates an exemplary user interface.
图5示出了示例性用户界面。FIG5 illustrates an exemplary user interface.
图6示出了示例性用户界面。FIG6 illustrates an exemplary user interface.
图7示出了示例性用户界面。FIG7 illustrates an exemplary user interface.
图8示出了示例性用户界面。FIG8 illustrates an exemplary user interface.
图9示出了用户界面的示例性逻辑结构。FIG9 shows an exemplary logical structure of a user interface.
图10示出了示例性用户界面。FIG10 illustrates an exemplary user interface.
图11示出了示例性用户界面。FIG11 illustrates an exemplary user interface.
图12示出了示例性用户界面。FIG12 illustrates an exemplary user interface.
图13示出了示例性用户界面过渡。FIG13 illustrates an exemplary user interface transition.
图14示出了示例性用户界面。FIG14 illustrates an exemplary user interface.
图15示出了示例性用户界面。FIG15 illustrates an exemplary user interface.
图16示出了示例性用户界面过渡。FIG16 illustrates an exemplary user interface transition.
图17示出了示例性用户界面。FIG17 illustrates an exemplary user interface.
图18示出了示例性用户界面。FIG18 illustrates an exemplary user interface.
图19示出了示例性用户界面过渡。FIG19 illustrates an exemplary user interface transition.
图20示出了示例性用户界面。FIG20 illustrates an exemplary user interface.
图21示出了示例性用户界面。FIG. 21 illustrates an exemplary user interface.
图22示出了示例性用户界面和过渡。FIG22 illustrates an exemplary user interface and transitions.
图23示出了示例性用户界面。FIG23 illustrates an exemplary user interface.
图24示出了示例性用户界面和过渡。FIG24 illustrates an exemplary user interface and transitions.
图25A和图25B示出了示例性用户界面。25A and 25B illustrate exemplary user interfaces.
图26示出了示例性用户界面。FIG26 illustrates an exemplary user interface.
图27示出了示例性用户界面和过渡。FIG27 illustrates an exemplary user interface and transition.
图28示出了示例性用户界面。FIG28 illustrates an exemplary user interface.
图29示出了示例性用户界面。FIG29 illustrates an exemplary user interface.
图30示出了示例性用户界面和过渡。FIG30 illustrates an exemplary user interface and transitions.
图31示出了示例性用户界面。FIG31 illustrates an exemplary user interface.
图32示出了示例性用户界面。FIG32 illustrates an exemplary user interface.
图33示出了示例性用户界面。FIG33 illustrates an exemplary user interface.
图34示出了示例性用户界面。FIG34 illustrates an exemplary user interface.
图35示出了示例性过程。FIG35 illustrates an exemplary process.
图36示出了示例性计算系统。FIG36 illustrates an exemplary computing system.
图37示出了示例性个人电子设备。FIG. 37 illustrates an exemplary personal electronic device.
图38示出了示例性个人电子设备。FIG. 38 illustrates an exemplary personal electronic device.
图39示出了示例性个人电子设备。FIG. 39 illustrates an exemplary personal electronic device.
图40示出了示例性用户界面。FIG40 illustrates an exemplary user interface.
图41示出了用户界面的示例性逻辑结构。FIG41 shows an exemplary logical structure of a user interface.
图42示出了示例性用户界面。FIG42 illustrates an exemplary user interface.
具体实施方式DETAILED DESCRIPTION
在以下对本公开和实例的描述中将引用附图，在附图中以举例的方式示出了可被实施的具体实例。应当理解，在不脱离本公开的范围的情况下，可实践其他实例并且可进行结构性变更。In the following description of the present disclosure and examples, reference will be made to the accompanying drawings, which show, by way of example, specific examples that can be implemented. It should be understood that other examples can be practiced and structural changes can be made without departing from the scope of the present disclosure.
图1示出了示例性个人电子设备100。在例示的实例中，设备100为通常包括主体102和用于将设备100固定到用户身体的表带104的手表。即设备100是可穿戴的。主体102可被设计成与表带104耦接。设备100可具有触敏显示屏(下文中称为触摸屏)106和表冠108。在一些实施例中，设备100可具有一个或多个按钮110,112和114。在一些实施例中，设备100没有按钮110,112，也没有按钮114。FIG1 illustrates an exemplary personal electronic device 100. In the illustrated example, device 100 is a watch that generally includes a body 102 and a strap 104 for securing device 100 to a user's body. That is, device 100 is wearable. Body 102 may be designed to couple with strap 104. Device 100 may have a touch-sensitive display (hereinafter referred to as a touch screen) 106 and a crown 108. In some embodiments, device 100 may have one or more buttons 110, 112, and 114. In some embodiments, device 100 has no buttons 110, 112, or button 114.
通常，在手表的上下文中，术语“表冠”是指用于卷绕手表的顶上的盖。在个人电子设备的上下文中，表冠可以是电子设备的物理部件，而不是触敏显示器上的视觉表冠。表冠108可以是可连接到传感器以用于将表冠的物理移动转换成电信号的机械机构。表冠108可在两个旋转方向(例如，向前和向后)上旋转。还可朝向设备100的主体推动表冠108和/或从设备100拉出表冠。表冠108可以是触敏的，例如使用电容式触摸技术，该电容式触摸技术可检测用户是否正在触摸表冠。此外，表冠108还可在一个或多个方向上摇动或沿轨迹平移，该轨迹沿主体102的边缘或至少部分地围绕主体102的周边。在一些实例中，可使用多于一个表冠108。表冠108的视觉外观可以但未必一定类似于常规手表的表冠。本文描述的这些实例提到了表冠旋转、推动、拉动和/或触摸，其每一者构成表冠的物理状态。Typically, in the context of a watch, the term "crown" refers to the cap on top of the watch used to wind it. In the context of a personal electronic device, the crown may be a physical component of the electronic device, rather than a visual crown on a touch-sensitive display. Crown 108 may be a mechanical mechanism that can be connected to a sensor for converting the physical movement of the crown into an electrical signal. Crown 108 can rotate in two rotational directions (e.g., forward and backward). Crown 108 can also be pushed toward the body of device 100 and/or pulled away from device 100. Crown 108 can be touch-sensitive, for example using capacitive touch technology that can detect whether a user is touching the crown. In addition, crown 108 can be tilted in one or more directions or translated along a trajectory that follows the edge of body 102 or at least partially surrounds the perimeter of body 102. In some instances, more than one crown 108 may be used. The visual appearance of crown 108 can, but need not necessarily, resemble the crown of a conventional watch. The examples described herein refer to the crown being rotated, pushed, pulled, and/or touched, each of which constitutes a physical state of the crown.
按钮110,112和114(如果包括的话)可以是物理按钮或触敏按钮。即，按钮可以是例如物理按钮或电容式按钮。此外，主体102可包括镶条，该镶条在其上可具有充当按钮的预先确定的区域。Buttons 110, 112, and 114 (if included) can be physical buttons or touch-sensitive buttons. That is, the buttons can be, for example, physical buttons or capacitive buttons. In addition, the body 102 can include a bezel that has predetermined areas thereon that function as buttons.
触摸屏106可包括显示设备诸如液晶显示器(LCD)、发光二极管(LED)显示器、有机发光二极管(OLED)显示器等，其部分或全部被定位在触摸传感器面板的后方或前方，触摸传感器面板使用任何期望的触摸感测技术来实现，该触摸感测技术诸如互电容触摸感测、自电容触摸感测、电阻式触摸感测、投影扫描感测等。触摸屏106可允许用户使用一个或多个手指或其他物体在触摸传感器面板附近触摸或悬停以执行各种功能。The touch screen 106 may include a display device such as a liquid crystal display (LCD), a light emitting diode (LED) display, an organic light emitting diode (OLED) display, etc., which is partially or fully positioned behind or in front of a touch sensor panel implemented using any desired touch sensing technology, such as mutual capacitance touch sensing, self-capacitance touch sensing, resistive touch sensing, projection scanning sensing, etc. The touch screen 106 may allow a user to touch or hover near the touch sensor panel using one or more fingers or other objects to perform various functions.
在一些实例中，设备100还可包括用于检测被施加到显示器的力或压力的一个或多个压力传感器(未示出)。被施加到触摸屏106的力或压力可被用作设备100的输入，以执行任何期望的操作，诸如作出选择、进入或退出菜单、使得显示附加选项/动作等。在一些实例中，可基于被施加到触摸屏106的力或压力的量来执行不同的操作。一个或多个压力传感器可进一步用于确定向触摸屏106施加力的位置。In some examples, device 100 may also include one or more pressure sensors (not shown) for detecting force or pressure applied to the display. The force or pressure applied to touch screen 106 can be used as input to device 100 to perform any desired operation, such as making a selection, entering or exiting a menu, causing additional options/actions to be displayed, etc. In some examples, different operations can be performed based on the amount of force or pressure applied to touch screen 106. One or more pressure sensors can further be used to determine the location where the force is applied to touch screen 106.
1.基于表冠的用户界面控制1. Crown-based user interface controls
图2-图7示出了对表冠108(图1)移动作出响应的示例性用户界面。图2示出了可由设备100显示的示例性屏幕200。屏幕200例如可以是主屏幕，该主屏幕在设备100加电时出现或在设备100的触摸屏显示器初始加电时(包括从睡眠状态中唤醒)出现。可在屏幕200中显示图标204,206和208。在一些实施例中，图标可对应于设备100上可工作的应用程序，这意味着可向设备100上安装应用程序和/或该应用程序可作为服务在设备上执行。图标上的触摸(例如手指轻击)使得对应的应用程序启动，这意味着应用程序在设备100的前台运行并在触摸屏106上出现。在一些实施例中，图标可对应于文本文档、媒体项目、网页、电子邮件消息等。Figures 2-7 illustrate exemplary user interfaces that respond to movement of crown 108 (Figure 1). Figure 2 illustrates an exemplary screen 200 that may be displayed by device 100. Screen 200 may be, for example, a home screen that appears when device 100 is powered on or when the touch screen display of device 100 is initially powered on (including upon waking from a sleep state). Icons 204, 206, and 208 may be displayed in screen 200. In some embodiments, the icons may correspond to applications that are operable on device 100, meaning that the applications may be installed on device 100 and/or that the applications may be executed on the device as services. A touch on an icon (e.g., a finger tap) causes the corresponding application to launch, meaning that the application runs in the foreground of device 100 and appears on touch screen 106. In some embodiments, the icons may correspond to text documents, media items, web pages, email messages, and the like.
设备100可从更大集合的可用图标中选择图标204,206和208，以在屏幕200上显示，因为这些图标当时具有与用户相关的信息。例如，图标204可对应于消息应用程序，其中用户刚刚接收到传入消息，并且图标206可对应于日历应用程序，其中用户具有即将进行的日历约会。Device 100 may select icons 204, 206, and 208 from a larger set of available icons to display on screen 200 because those icons have information relevant to the user at the time. For example, icon 204 may correspond to a messaging application, where the user has just received an incoming message, and icon 206 may correspond to a calendar application, where the user has an upcoming calendar appointment.
图3示出了可由设备100响应于在显示该屏幕200(图2)的同时在方向302上旋转表冠108而被显示的示例性屏幕300。屏幕300可示出例如由用户先前从更大的可用图标集所选择的用户喜爱的图标。而且，屏幕300可包括由设备100基于用户访问图标的频率而从更大的可用图标集所选择的图标。被显示在屏幕300中的示例性图标304,306,308,310和312可各自对应于在设备100上可工作的应用程序。图标上的触摸(例如，手指轻击)使得对应的应用程序启动。FIG3 illustrates an exemplary screen 300 that may be displayed by device 100 in response to rotating crown 108 in direction 302 while displaying screen 200 ( FIG2 ). Screen 300 may display, for example, a user's favorite icons that were previously selected by the user from a larger set of available icons. Furthermore, screen 300 may include icons selected by device 100 from a larger set of available icons based on how frequently the user accesses the icons. Exemplary icons 304, 306, 308, 310, and 312 displayed in screen 300 may each correspond to an application program that is operable on device 100. A touch (e.g., a finger tap) on an icon causes the corresponding application program to launch.
图4示出了可由设备100响应于在显示该屏幕300(图3)的同时在方向402上旋转表冠108而被显示的示例性屏幕400。屏幕400可示出例如与可在设备100上工作的所有应用程序对应的图标。因为更大数量的应用程序可工作于设备100上，所以屏幕400可包括大量的图标。在显示许多图标时，可相应设定图标的尺寸使得它们在触摸屏106内匹配，或设定其尺寸使得至少代表性数量的或预先确定百分比的图标在触摸屏106内可以可视地匹配。FIG4 illustrates an exemplary screen 400 that may be displayed by device 100 in response to rotating crown 108 in direction 402 while displaying screen 300 ( FIG3 ). Screen 400 may display, for example, icons corresponding to all applications that may be operated on device 100. Because a greater number of applications may be operated on device 100, screen 400 may include a larger number of icons. When many icons are displayed, the icons may be sized accordingly so that they fit within touch screen 106, or sized so that at least a representative number or a predetermined percentage of the icons may visually fit within touch screen 106.
图5示出了可由设备100响应于在显示该屏幕400(图4)的同时在方向502上旋转表冠108而被显示的示例性屏幕500。屏幕500可示出例如与可在设备100上工作的应用程序的子集对应的图标。因为与屏幕400相比在该屏幕500上显示更少的图标，所以在屏幕500上显示的图标例如图标504可变得更大，并且与屏幕400上的图标的显示相比具有附加保真度。例如，屏幕500上的图标可具有文本和/或影像形式的标记，从而识别其对应的应用程序。如图所示，图标504使用字母“c”来暗示对应应用程序的名称以“c”开头，像时钟(clock)那样。在一些实施例中，图标上的触摸(例如，手指轻击)使得对应的应用程序启动。FIG5 illustrates an exemplary screen 500 that may be displayed by device 100 in response to rotating crown 108 in direction 502 while displaying screen 400 ( FIG4 ). Screen 500 may display, for example, icons corresponding to a subset of applications that may operate on device 100. Because fewer icons are displayed on screen 500 than on screen 400, icons displayed on screen 500, such as icon 504, may be larger and have additional fidelity compared to the display of icons on screen 400. For example, icons on screen 500 may have indicia in the form of text and/or images to identify their corresponding applications. As shown, icon 504 uses the letter “c” to suggest that the name of the corresponding application begins with “c,” like a clock. In some embodiments, a touch on an icon (e.g., a finger tap) causes the corresponding application to launch.
图6示出了可由设备100响应于在方向602上旋转表冠108而被显示的示例性屏幕600。屏幕600可示出例如与屏幕500相比进一步筛选的图标的子集，该图标的子集对应于可在设备100上工作的应用程序。因为与屏幕500(图5)相比在屏幕600上显示更少的图标，所以所显示的图标(例如图标604)可变得更大，并且与屏幕200,300,400和500上的图标的显示相比具有附加保真度。例如，图标604可具有用于显示当前时间的时钟图像。在一些实施例中，图标上的触摸(例如，手指轻击)使得对应的应用程序启动。FIG6 illustrates an exemplary screen 600 that may be displayed by device 100 in response to rotating crown 108 in direction 602. Screen 600 may display, for example, a subset of icons that is further filtered than screen 500, corresponding to applications that may be operated on device 100. Because fewer icons are displayed on screen 600 compared to screen 500 ( FIG5 ), the icons that are displayed (e.g., icon 604) may be larger and have additional fidelity compared to the display of icons on screens 200, 300, 400, and 500. For example, icon 604 may have a clock image for displaying the current time. In some embodiments, a touch (e.g., a finger tap) on an icon causes the corresponding application to launch.
图7和图8示出了可由设备100响应于在显示该屏幕600(图6)的同时在方向702上旋转表冠108而被显示的示例性屏幕700和800。7 and 8 illustrate example screens 700 and 800 that may be displayed by device 100 in response to rotating crown 108 in direction 702 while screen 600 ( FIG. 6 ) is displayed.
参考图7，在一些实施例中，屏幕700可响应于在显示该屏幕600(图6)的同时在方向702上旋转表冠而被显示。因为在屏幕700上显示单个图标704，所以与先前的屏幕相比，图标704可具有附加保真度。例如，图标704可具有用于显示日期信息以及当前时间的时钟图像。图标704上的触摸(例如，手指轻击)使得对应的应用程序启动。Referring to FIG7 , in some embodiments, screen 700 may be displayed in response to rotating the crown in direction 702 while displaying screen 600 ( FIG6 ). Because a single icon 704 is displayed on screen 700, icon 704 may have additional fidelity compared to previous screens. For example, icon 704 may have a clock image that displays date information and the current time. A touch (e.g., a finger tap) on icon 704 causes the corresponding application to launch.
转向图8，在一些实施例中，可响应于在显示该屏幕600(图6)的同时在方向802上旋转表冠而显示屏幕800。屏幕800示出了工作于设备100的前台中的与图标704(图7)对应的应用程序804。即，响应于表冠在方向802中旋转而启动应用程序804。示例性应用程序804可以是提供闹钟特征的时钟应用程序。而且，在一些实施例中，可响应于在显示该屏幕700(图7)的同时在方向802上旋转表冠而显示屏幕800。Turning to FIG8 , in some embodiments, screen 800 may be displayed in response to rotating the crown in direction 802 while screen 600 ( FIG6 ) is displayed. Screen 800 shows application 804 corresponding to icon 704 ( FIG7 ) operating in the foreground of device 100. That is, application 804 is launched in response to rotating the crown in direction 802. Exemplary application 804 may be a clock application that provides an alarm feature. Furthermore, in some embodiments, screen 800 may be displayed in response to rotating the crown in direction 802 while screen 700 ( FIG7 ) is displayed.
上文所述的屏幕200-700(图2-图7)可在逻辑上沿轴被组织为信息的平面。在这种组织下，可将图标的给定屏幕视为由两个轴(例如，x轴和y轴)限定的平面，在该两个轴上在空间上定位图标。可沿与x轴或y轴中的至少一者正交的第三轴组织多个平面，该第三轴被称为z轴。(z轴可垂直于由x轴和y轴形成的平面)。The screens 200-700 (FIGS. 2-7) described above can be logically organized into planes of information along axes. With this organization, a given screen of icons can be considered a plane defined by two axes (e.g., the x-axis and the y-axis), on which the icons are spatially positioned. The multiple planes can be organized along a third axis, referred to as the z-axis, that 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-axis and the y-axis.)
图9示出了这种逻辑组织，其中x轴902和y轴904形成与设备100(图1)的触摸屏屏幕表面共面的平面，并且z轴906垂直于由轴902和904形成的x/y平面。平面908可对应于屏幕200(图2)。平面910可对应于屏幕300(图3)。平面912可代表表示个人电子设备上的可工作的应用程序的图标集。因此，平面912的不同观察点可对应于屏幕400-700(图4-图7)。平面908和910可与平面912相关，因为平面908和910可各自包括平面912上可用的图标的子集。可经由表冠移动诸如表冠旋转来选择要在个人电子设备上显示的特定信息平面(即，图标的屏幕)。即，可使用表冠移动来遍历与z轴906相交的信息平面，或者提供给定平面(例如，平面912)的替代视图。Figure 9 illustrates this logical organization, where x-axis 902 and y-axis 904 form a plane coplanar with the touch screen screen surface of device 100 (Figure 1), and z-axis 906 is perpendicular to the x/y plane formed by axes 902 and 904. Plane 908 may correspond to screen 200 (Figure 2). Plane 910 may correspond to screen 300 (Figure 3). Plane 912 may represent a set of icons representing workable applications on a personal electronic device. Thus, different viewpoints of plane 912 may correspond to screens 400-700 (Figures 4-7). Planes 908 and 910 may be related to plane 912 because planes 908 and 910 may each include a subset of the icons available on plane 912. A specific information plane (i.e., a screen of icons) to be displayed on a personal electronic device may be selected via crown movement, such as crown rotation. That is, crown movement may be used to traverse information planes intersecting z-axis 906, or to provide alternative views of a given plane (e.g., plane 912).
在一些实施例中，在经由表冠移动到达z轴末端时(例如，最上方的平面或最下方的平面)，所显示的信息(例如，图标的屏幕)产生橡皮筋效果，以指示已到达末端。考虑用户通过表冠输入已到达最下方的信息平面的情况。由于用户在相同方向上提供了附加表冠输入，所以所显示的图标集根据表冠移动而收缩(到达可能的程度)，直到移动停止。在表冠移动停止时，所显示的图标经由屏幕上的动画从其收缩尺寸回到其正常尺寸，由此产生橡皮筋视觉效果。In some embodiments, upon reaching a z-axis end (e.g., the uppermost plane or the lowermost plane) via crown movement, the displayed information (e.g., a screen of icons) produces a rubber band effect to indicate that the end has been reached. Consider a scenario where a user has reached the lowermost information plane via crown input. As the user provides additional crown input in the same direction, the displayed set of icons shrinks (to the extent possible) in accordance with the crown movement until movement stops. When crown movement stops, the displayed icons return from their shrunken size to their normal size via an on-screen animation, thereby producing a rubber band visual effect.
这种逻辑组织的一种明显的益处是不同的信息平面未必(但可以)是彼此的缩放子集。即例如平面908和910可包含个人电子设备上可用的那些图标中的完全不同的图标，但用户可有效地访问不同的信息平面。One obvious benefit of this logical organization is that different information planes are not necessarily (but can be) scaled subsets of each other. That is, for example, planes 908 and 910 may contain completely different icons from those available on a personal electronic device, but the user can effectively access different information planes.
作为另外一种选择，可将屏幕200-700(图2-图7)以逻辑方式组织为属于个人电子设备不同模式状态的信息的子集。在这种组织下，例如屏幕200和300可对应于设备的第一模式状态和第二模式状态，并且屏幕400-700可对应于第三模式状态。个人电子设备可响应于表冠推动在整个模式状态内循环，并可在第一模式状态和第二模式状态中分别显示屏幕200或300。在替代实施例中，可使用按钮110,112或114来使模式状态循环。在特定模式状态(例如，第三模式状态)内有多个屏幕可用时，设备可基于表冠旋转来从对一个屏幕(例如，300)的显示切换到对另一个屏幕(例如，400)的显示。可使用屏幕上用户界面元素诸如分页点来指示用于在特定模式状态内显示的附加屏幕的可用性。Alternatively, screens 200-700 (FIGS. 2-7) may be logically organized as subsets of information belonging to different mode states of the personal electronic device. Under this organization, for example, screens 200 and 300 may correspond to the first and second mode states of the device, and screens 400-700 may correspond to the third mode state. The personal electronic device may cycle through the mode states in response to a crown push and may display screen 200 or 300 in the first and second mode states, respectively. In an alternative embodiment, buttons 110, 112, or 114 may be used to cycle the mode states. When multiple screens are available within a particular mode state (e.g., the third mode state), the device may switch from displaying one screen (e.g., 300) to displaying another screen (e.g., 400) based on a crown rotation. On-screen user interface elements such as paging dots may be used to indicate the availability of additional screens for display within a particular mode state.
图41中示出了这种逻辑布置。如图所示，平面4102和4104可分别对应于屏幕200(图2)和300(图3)。平面4106可代表表示个人电子设备上的可工作的应用程序的图标集。因此，平面4106的不同观察点可对应于屏幕400-700(图4-图7)。可经由表冠移动诸如表冠推动来选择要在个人电子设备上显示的特定信息平面(即，图标的屏幕)。This logical arrangement is shown in Figure 41. As shown, planes 4102 and 4104 can correspond to screens 200 (Figure 2) and 300 (Figure 3), respectively. Plane 4106 can represent a set of icons representing workable applications on the personal electronic device. Therefore, different observation points of plane 4106 can correspond to screens 400-700 (Figures 4-7). A specific information plane (i.e., a screen of icons) to be displayed on the personal electronic device can be selected via a crown movement, such as a crown push.
2.基于速度的表冠控制2. Speed-based crown control
设备100(图1)可在确定是否应当利用另一图标屏幕来替换一个图标屏幕的过程中考虑表冠108的旋转的角速度(图1)。具体地，设备100可要求表冠108以超过预先确定的角速度的角速度旋转，然后将对一个图标屏幕的显示变为对另一个图标屏幕的显示。这样，尽管并非用户有意进行的表冠108的缓慢旋转仍然可使得设备100接收用于指示角位移的表冠输入，但不必将位移解释为具有足够大的速度以使得用户界面进行不希望的更新。为此目的而进行的对预先确定的角速度的选择可取决于若干个因素，诸如当前显示的图标的密度、当前显示的图标的视觉布置等。Device 100 ( FIG. 1 ) may consider the angular velocity of rotation of crown 108 ( FIG. 1 ) in determining whether one icon screen should be replaced with another icon screen. Specifically, device 100 may require that crown 108 be rotated at an angular velocity exceeding a predetermined angular velocity before changing the display of one icon screen to the display of another icon screen. In this way, although a slow rotation of crown 108 that is not intentional by the user may still cause device 100 to receive a crown input indicating an angular displacement, the displacement need not be interpreted as having a sufficiently large velocity to cause an undesirable update of the user interface. The selection of a predetermined angular velocity for this purpose may depend on several factors, such as the density of the currently displayed icons, the visual arrangement of the currently displayed icons, etc.
在一些实施例中，在图标屏幕之间进行切换所必需的表冠旋转最小角速度直接对应于表冠108(图1)的瞬时角速度，这意味着设备100的用户界面实质上在表冠108达到充分高的角速度时作出响应。在一些实施例中，在图标屏幕之间进行切换所必需的表冠旋转的最小角速度是基于但不直接等于表冠108的瞬时(“当前”)角速度的所计算的速度。在这些实施例中，设备100可根据公式1在离散时刻T保持所计算的表冠(角)速度V：In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens corresponds directly to the instantaneous angular velocity of crown 108 ( FIG. 1 ), meaning that the user interface of device 100 becomes responsive substantially when crown 108 reaches a sufficiently high angular velocity. In some embodiments, the minimum angular velocity of crown rotation required to switch between icon screens is a calculated velocity based on, but not directly equal to, the instantaneous (“current”) angular velocity of crown 108. In these embodiments, device 100 may maintain the calculated crown (angular) velocity V at discrete times T according to Equation 1:
VT＝V(T-1)+ΔVCROWN-ΔVDRAG。 (公式1)VT = V(T-1) +ΔVCROWN -ΔVDRAG . (Formula 1)
在公式1中，VT表示时间T处的所计算的表冠速度(速率和方向)，V(T-1)表示时间T-1处的前一个速度(速率和方向)，ΔVCROWN表示在时间T处由通过表冠的旋转施加的力所引起的速度的改变，以及ΔVDRAG表示由拖拽力引起的速度的改变。通过ΔVDRAG来体现的所施加的力可取决于表冠的角旋转的当前速度。因此，ΔVCROWN还可取决于表冠的当前角速度。这样，设备100可提供用户界面交互不仅基于瞬时表冠速度并且还基于在多个时间间隔上的表冠运动形式的用户输入，即使这些间隔被精细地分割。注意，通常在没有ΔVCROWN形式的用户输入时，基于根据公式1的ΔVDRAG，VT将接近于(并且变为)零，但是在没有表冠旋转(ΔVCROWN)形式的用户输入的情况下，VT将不改变符号。In Equation 1, VT represents the calculated crown velocity (rate and direction) at time T, V(T-1) represents the previous velocity (rate and direction) at time T-1, ΔVCROWN represents the change in velocity at time T caused by the force applied by rotation of the crown, and ΔVDRAG represents the change in velocity caused by the drag force. The applied force, as reflected by ΔVDRAG , may depend on the current rate of angular rotation of the crown. Therefore, ΔVCROWN may also depend on the current angular velocity of the crown. In this way, device 100 can provide user interface interactions based not only on instantaneous crown velocity but also on user input in the form of crown movement over multiple time intervals, even if these intervals are finely segmented. Note that, in general, in the absence of user input in the form of ΔVCROWN , VT will approach (and become) zero based on ΔVDRAG according to Equation 1, but in the absence of user input in the form of crown rotation (ΔVCROWN ), VT will not change sign.
典型地，表冠角旋转的速度越大，ΔVCROWN的值将越大。然而，根据期望的用户界面效果，表冠的角旋转的速度和ΔVCROWN之间的实际映射可改变。例如，可使用表冠的角旋转的速度和ΔVCROWN之间的各种线性映射或非线性映射。在另一个实例中，该映射可取决于图标的数量和/或当前显示的图标布置。Typically, the greater the speed of the crown's angular rotation, the greater the value of ΔVCROWN will be. However, depending on the desired user interface effect, the actual mapping between the speed of the crown's angular rotation and ΔVCROWN may vary. For example, various linear or nonlinear mappings between the speed of the crown's angular rotation and ΔVCROWN may be used. In another example, the mapping may depend on the number of icons and/or the arrangement of the icons currently displayed.
而且，ΔVDRAG可采取各种值。例如，ΔVDRAG可取决于表冠旋转的速度，使得在处于越大的速度时，可产生速度(ΔVDRAG)的越大的相反变化。在另一个实例中，ΔVDRAG可具有恒定值。在又一实例中，ΔVDRAG可基于当前显示的图标数量和/或当前显示的图标布置。应当理解，可改变上述对ΔVCROWN和ΔVDRAG的要求以产生期望的用户界面效果。Furthermore, ΔVDRAG can take on various values. For example, ΔVDRAG can depend on the speed of crown rotation, such that at higher speeds, a greater, inverse change in speed (ΔVDRAG ) can occur. In another example, ΔVDRAG can have a constant value. In yet another example, ΔVDRAG can be based on the number of icons currently displayed and/or the arrangement of the icons currently displayed. It should be understood that the above-described requirements for ΔVCROWN and ΔVDRAG can be varied to produce a desired user interface effect.
从公式1可以看出，只要ΔVCROWN大于ΔVDRAG，所保持的速度(VT)便可继续增大。此外，即使在未接收到ΔVCROWN输入时，VT也可具有非零值，这意味着用户界面屏幕可无需用户旋转表冠而继续改变。在发生这种情况时，屏幕可停止基于用户停止旋转表冠时所保持的速度和ΔVDRAG分量而变化。As can be seen from Equation 1, the maintained velocity (VT ) can continue to increase as long asΔVCROWN is greater thanΔVDRAG . Furthermore,VT can have a non-zero value even when noΔVCROWN input is received, meaning that the user interface screen can continue to change without the user rotating the crown. When this occurs, the screen can cease changing based on the maintained velocity andΔVDRAG components when the user stops rotating the crown.
在一些实例中，当表冠在与旋转方向对应的方向上旋转时(该旋转方向与当前用户界面改变的方向相反)，可将V(T-1)分量重置为零值，从而允许用户快速改变屏幕改变的方向而无需提供足以使VT偏移的力。In some instances, when the crown is rotated in a direction corresponding to the direction of rotation (which is opposite to the direction of the current user interface change), the V(T-1) component can be reset to a zero value, allowing the user to quickly change the direction of the screen change without providing sufficient force to offset VT.
在其他实施例中，使用除表冠旋转之外的不同的物理表冠状态来在整个所显示的图标中导航。In other embodiments, different physical crown states other than crown rotation are used to navigate through the displayed icons.
3.用户界面外观3. User interface appearance
图标可采取各种视觉外观。例如，图标的形状可以是矩形，如图10所示。作为另一个实例，图标可以是圆形的，如图2-图7所示。此外，图标可采取各种空间布置方案，这意味着可沿不可见的栅格的行和列来布置图标。栅格可以是对称或不对称的。在图10中，例如使用对称栅格。在图5中，例如使用不对称栅格，该不对称栅格具有在第一轴上布置的x个图标和沿第二轴布置的y个图标。Icons can take on a variety of visual appearances. For example, the shape of an icon can be rectangular, as shown in FIG10 . As another example, an icon can be circular, as shown in FIG2-FIG7 . In addition, icons can take on a variety of spatial arrangements, meaning that the icons can be arranged along rows and columns of an invisible grid. The grid can be symmetrical or asymmetrical. In FIG10 , for example, a symmetrical grid is used. In FIG5 , for example, an asymmetrical grid is used, which has x icons arranged on a first axis and y icons arranged along a second axis.
图11示出了径向图标布置方案，其中沿不同直径的不可见的圆1102和1104的圆周使圆形图标对准。不可见的圆1102和1104是同心的，但未必一定同心。沿不同的不可见的圆布置的图标诸如图标1106可具有不同的尺寸。如图所示，沿不可见的圆1102布置的图标更接近设备100的中心，并且比沿不可见的圆1104布置的那些图标更大。而且，尽管图11中未示出，但可沿多于两个不可见的圆来布置径向布置中的图标。FIG11 illustrates a radial icon arrangement in which circular icons are aligned along the circumferences of invisible circles 1102 and 1104 of different diameters. Invisible circles 1102 and 1104 are concentric, but not necessarily concentric. Icons arranged along different invisible circles, such as icon 1106, may have different sizes. As shown, icons arranged along invisible circle 1102 are closer to the center of device 100 and are larger than those arranged along invisible circle 1104. Moreover, although not shown in FIG11 , the icons in the radial arrangement may be arranged along more than two invisible circles.
定位特定图标距径向图标布置的中心的距离可取决于不同的因素。例如，该距离可与图标的使用频率成比例；使用频繁的图标更接近中心。作为另一个实例，该距离可取决于是否为该图标(对应于该图标的应用程序)接收传入通知。作为另一个实例，该距离可以是用户定义的，或者可以其他方式由设备100确定(即策划)。The distance at which a particular icon is positioned from the center of the radial icon arrangement can depend on various factors. For example, the distance can be proportional to the frequency of use of the icon; more frequently used icons are closer to the center. As another example, the distance can depend on whether incoming notifications are received for the icon (or the application corresponding to the icon). As another example, the distance can be user-defined or otherwise determined (i.e., curated) by device 100.
图25A示出了将图标布置成图标组。在栅格2502上，显示了包括图标组2512的四组图标。响应于触摸输入诸如手指在组2512上的触摸屏位置2514处的轻击，可以放大的形式来显示组2512中的图标。在栅格2506中，以放大的形式显示组2512内的图标，该组包括图标2516。图25B示出了将应用程序功能布置成组。在栅格2508上，如上所述，在栅格2506上显示了图标组2512的四个图标。选择图标2516(例如，经由手指轻击2518)可使得显示由应用程序2510(对应于图标2508)提供的一组功能2520。Figure 25A shows that icons are arranged into icon groups. On grid 2502, four groups of icons including icon group 2512 are displayed. In response to touch input, such as a finger tapping at touchscreen location 2514 on group 2512, the icons in group 2512 can be displayed in an enlarged form. In grid 2506, the icons within group 2512 are displayed in an enlarged form, and the group includes icon 2516. Figure 25B shows that application functions are arranged into groups. On grid 2508, as described above, four icons of icon group 2512 are displayed on grid 2506. Selecting icon 2516 (e.g., via finger tapping 2518) can cause a group of functions 2520 provided by application 2510 (corresponding to icon 2508) to be displayed.
图标组的大小和形状可以是系统的或定义的。定义的图标组诸如栅格2502中的图标组2512(图25A)共享预定义的组大小和组形状。图42所示的系统图标组可以是用户定义的组大小和/或组形状。例如，栅格4202中的图标组4204和4206具有不同的用户定义的形状和大小。在一些实施例中，使用个人电子设备外部的并下载到个人电子设备上的运行于计算机上的软件来定义系统图标组。The size and shape of the icon groups can be system or defined. Defined icon groups such as icon group 2512 (Figure 25A) in grid 2502 share a predefined group size and group shape. The system icon groups shown in Figure 42 can be user-defined group sizes and/or group shapes. For example, icon groups 4204 and 4206 in grid 4202 have different user-defined shapes and sizes. In some embodiments, system icon groups are defined using software running on a computer that is external to the personal electronic device and downloaded to the personal electronic device.
图30示出了图标布置方案，其中图标类似于名片盒的页进行布置。示例性名片盒3002的页可响应于表冠旋转而翻动。例如，页(图标)3004可响应于表冠旋转而向下翻动到页(图标)3006上。FIG30 shows an icon arrangement scheme in which icons are arranged similarly to the pages of a business card case. The pages of the exemplary business card case 3002 can be flipped in response to a rotation of the crown. For example, page (icon) 3004 can flip down to page (icon) 3006 in response to a rotation of the crown.
图31示出了图标布置方案，其中将图标布置在旋转表盘的外周上。示例性旋转表盘3102可响应于表冠旋转而旋转。例如，方向3104上的表冠旋转可使得表盘3102在相同方向上旋转(3106)。而且，表冠推动(或拉动)可改变3102中的列数，从而允许其余列的图标被放大和/或具有更大的保真度。FIG31 illustrates an icon arrangement scheme in which icons are arranged on the periphery of a rotating dial. The exemplary rotating dial 3102 can rotate in response to a crown rotation. For example, rotating the crown in direction 3104 can cause the dial 3102 to rotate in the same direction (3106). Furthermore, pushing (or pulling) the crown can change the number of columns in 3102, thereby allowing icons in the remaining columns to be enlarged and/or have greater fidelity.
图32示出了缩略图列表202形式的图标布置方案。示例性缩略图列表3202内的图标3204可具有对应的缩略图3206。可经由表冠旋转来遍历缩略图列表3202的图标。可通过触摸对应的缩略图3206来直接选择特定图标诸如图标3204，以用于进行显示。32 illustrates an arrangement of icons in the form of a thumbnail list 202. An icon 3204 within the exemplary thumbnail list 3202 may have a corresponding thumbnail 3206. The icons of the thumbnail list 3202 may be traversed via rotation of the crown. A particular icon, such as icon 3204, may be directly selected for display by touching the corresponding thumbnail 3206.
图33示出了布置方案，其中将图标与不可见球或多面体的表面对准。可显示不可见球的前表面上的图标诸如图标3302。未显示不可见球表面的远侧上的图标。不可见球可响应于表冠旋转和/或触摸屏输入而旋转，由此改变所显示的特定图标。FIG33 shows an arrangement in which icons are aligned with the surface of an invisible sphere or polyhedron. Icons on the front surface of the invisible sphere, such as icon 3302, may be displayed. Icons on the far side of the invisible sphere surface are not displayed. The invisible sphere may rotate in response to crown rotation and/or touch screen input, thereby changing the specific icons displayed.
在操作期间，设备100(图1)可使用上述一种或多种图标布置方案。由设备10使用的一种或多种特定布置可以是用户选择的和/或系统选择的。即，可允许用户识别一种或多种优选布置，以用于进行显示。而且，可由设备100基于标准选择布置，该标准诸如在设备上安装的应用程序的总数、频繁访问的图标的数量等。During operation, device 100 ( FIG. 1 ) may utilize one or more of the above-described icon layout schemes. The particular layout or layouts utilized by device 10 may be user-selected and/or system-selected. That is, a user may be permitted to identify one or more preferred layouts for display. Furthermore, a layout may be selected by device 100 based on criteria such as the total number of applications installed on the device, the number of frequently accessed icons, and the like.
此外，图标在特定图标布置方案内的具体次序和放置可以是用户选择的和/或系统选择的。例如，可允许用户在给定屏幕上指定图标的位置。而且，可由设备100基于标准来确定图标放置(即，策划)，该标准诸如特定图标的使用频率、所计算的相关度等。Furthermore, the specific order and placement of icons within a particular icon arrangement scheme may be user-selected and/or system-selected. For example, a user may be allowed to specify the location of icons on a given screen. Furthermore, icon placement may be determined (i.e., curated) by the device 100 based on criteria such as frequency of use of particular icons, calculated relevance, and the like.
4.对用户输入的响应4. Response to User Input
所显示的图标可对用户输入作出响应。图12-图14示出了响应于表冠旋转重新布置所显示的图标。在图12中，沿3乘3对称栅格1202显示九个图标。在栅格1202的右上位置显示图标1204。如上文结合图4-图7所述的，旋转表冠108可使得设备100减少所显示的图标的数量。例如，旋转表冠108可使得设备100显示2乘2栅格，由此减少所显示的图标的数量。图13示出了响应于方向1302上的表冠旋转的至2乘2栅格的示例性过渡。如图所示，响应于表冠旋转1302，在屏幕上在视觉上将图标1204从图12的3乘3栅格的其右上位置平移到2乘2栅格中的要被显示的其新位置。具体地，如图14所示，将图标1204平移到2乘2栅格1402的左下角。此外，在放大从栅格1202的过渡之后仍然保持被显示在2乘2栅格中的图标，并将其定位到2乘2栅格1402中。The displayed icons may respond to user input. Figures 12-14 illustrate the rearrangement of displayed icons in response to a crown rotation. In Figure 12, nine icons are displayed along a 3x3 symmetrical grid 1202. Icon 1204 is displayed in the upper right position of grid 1202. As described above in conjunction with Figures 4-7, rotating crown 108 may cause device 100 to reduce the number of displayed icons. For example, rotating crown 108 may cause device 100 to display a 2x2 grid, thereby reducing the number of displayed icons. Figure 13 illustrates an exemplary transition to a 2x2 grid in response to a crown rotation in direction 1302. As shown, in response to crown rotation 1302, icon 1204 is visually translated on the screen from its upper right position in the 3x3 grid of Figure 12 to its new position in the 2x2 grid to be displayed. Specifically, as shown in Figure 14, icon 1204 is translated to the lower left corner of 2x2 grid 1402. Additionally, icons that remain displayed in the 2 by 2 grid after the transition from grid 1202 to zoom in are positioned in 2 by 2 grid 1402 .
图15-图17示出了响应于表冠旋转的对图标的另一种重新布置。在图15中，沿3乘3对称栅格1502显示九个图标。在栅格1502的右上位置中显示图标1504。如图16所示，响应于表冠旋转1602，将图标1504从栅格1502(图15)的其位置平移离开屏幕，同时将其平移到2乘2栅格中的要被显示的其新位置。换言之，在图16所示的过渡期间，可将图标1504分成两个部分，该两个部分被显示于设备100的触摸屏的两个独立不相邻位置中。更具体地，尽管图标1504的一部分在平移图标1504离开屏幕时保持部分被显示在右上角中，但1504的剩余部分在其平移到屏幕上时部分被显示在左下角中。如图17所示，将图标1504平移到2乘2栅格1702的左下角。此外，放大从栅格1502过渡之后仍然保持被显示在2乘2栅格中的图标并将其定位到2乘2栅格1702中。Figure 15-Figure 17 show another kind of rearrangement of icon in response to crown rotation.In Figure 15, nine icons are displayed along 3 times 3 symmetrical grid 1502.In the upper right position of grid 1502, icon 1504 is displayed.As shown in Figure 16, in response to crown rotation 1602, icon 1504 is translated from its position of grid 1502 (Figure 15) and leaves the screen, and is translated to its new position to be displayed in 2 times 2 grid simultaneously.In other words, during the transition shown in Figure 16, icon 1504 can be divided into two parts, and these two parts are displayed in two independent non-adjacent positions of the touch screen of device 100.More specifically, although a part of icon 1504 keeps being displayed in the upper right corner when icon 1504 is translated off the screen, the remainder of 1504 is partially displayed in the lower left corner when it is translated onto the screen.As shown in Figure 17, icon 1504 is translated to the lower left corner of 2 times 2 grid 1702. Additionally, icons that remain displayed in the 2 by 2 grid after the transition from grid 1502 are enlarged and positioned in the 2 by 2 grid 1702 .
图18-图20示出了响应于表冠旋转的图标的另一种重新布置。在图18中，沿3乘3对称栅格1802显示九个图标。如图19所示，响应于表冠旋转1902来从显示器去除沿栅格1802(图18)的右边界和下边界的图标，而剩余图标被放大。如图20的栅格2002中所示的，放大所显示的剩余图标。Figures 18-20 illustrate another rearrangement of icons in response to crown rotation. In Figure 18, nine icons are displayed along a 3x3 symmetrical grid 1802. As shown in Figure 19, in response to crown rotation 1902, icons along the right and bottom borders of grid 1802 (Figure 18) are removed from the display, while the remaining icons are enlarged. The remaining icons displayed are enlarged, as shown in grid 2002 of Figure 20.
应当指出，在图12-图20所示的示例性屏幕中，在左上角显示的图标(即，被标记为“A”)被锚定，这意味着上述过渡不会使得图标从左上角移开。然而，可通过用户输入来对此类图标解除锚定，如下所述。It should be noted that in the exemplary screens shown in Figures 12-20, the icon displayed in the upper left corner (i.e., labeled "A") is anchored, meaning that the above transition will not cause the icon to move away from the upper left corner. However, such icons can be unanchored by user input, as described below.
图21示出了响应于触摸屏输入的图标的重新布置。如图所示，图标2106被显示在4乘4栅格2012的底行中。响应于图标2106上的手指轻击2104来显示3乘3栅格2108，其中在中心中放大图标2106。值得注意的是，在栅格2108中不再显示栅格2012中所显示的被标记为“A”的图标。图21还示出了响应于表冠旋转的所显示的图标的更新。具体地，响应于表冠旋转2110，图标2106被进一步放大并变成屏幕上显示的唯一图标。Figure 21 shows the rearrangement of icons in response to touch screen input. As shown, icon 2106 is displayed in the bottom row of 4 by 4 grid 2012. In response to a finger tap 2104 on icon 2106, a 3 by 3 grid 2108 is displayed, wherein icon 2106 is enlarged in the center. It is worth noting that the icon marked as "A" displayed in grid 2012 is no longer displayed in grid 2108. Figure 21 also shows the updating of the displayed icons in response to crown rotation. Specifically, in response to crown rotation 2110, icon 2106 is further enlarged and becomes the only icon displayed on the screen.
图22示出了响应于设备100的移动的图标的重新布置。可使用一种或多种传感器例如陀螺仪来检测设备移动。如图所示，在栅格2202中显示了各种图标。响应于设备100在方向2204中的倾斜，在方向2206上平移所显示的图标，使得在栅格2208中显示不同的图标。具体地，响应于设备100在方向2204中向左倾斜，栅格2202的图标在向左方向2206上平移。在一些实施例中，平移可以是增量方式的，使得单行或单列从单行或单列过渡到显示器上。作为另外一种选择，整个屏幕的图标可作为全新的图标集过渡并过渡到显示器上。Figure 22 shows the rearrangement of icons in response to the movement of device 100. One or more sensors, such as gyroscopes, can be used to detect device movement. As shown, various icons are displayed in grid 2202. In response to the tilt of device 100 in direction 2204, the displayed icons are translated in direction 2206 so that different icons are displayed in grid 2208. Specifically, in response to the left tilt of device 100 in direction 2204, the icons in grid 2202 are translated in left direction 2206. In some embodiments, the translation can be incremental so that a single row or column is transitioned from a single row or column to the display. Alternatively, the icons of the entire screen can be transitioned as a completely new icon set and transitioned to the display.
图23示出了响应于触摸屏输入的图标外观的变化。如图所示，响应于位置2304处的触摸，图标2306变得被放大。值得注意的是，图标2306不在位置2304处，相反，图标2306(在其未放大状态中)处于触摸位置2304上方的沿行2312的行2310中。这样，改善了图标2306对用户的可视性，这既是因为图标被放大，还因为图标未被正在触摸设备100的潜在不透明物体遮挡而无法看到。应当指出，可响应于附近的触摸而放大多于一个图标。可在不同放大等级处放大多个图标，放大等级与每个被放大的图标和触摸位置之间的距离成反比。FIG23 shows the change in the appearance of an icon in response to a touch screen input. As shown, in response to a touch at position 2304, icon 2306 becomes magnified. It is noteworthy that icon 2306 is not at position 2304. Instead, icon 2306 (in its non-magnified state) is in row 2310 along row 2312 above touch position 2304. Like this, the visibility of icon 2306 to the user is improved, both because the icon is magnified and because the icon is not obscured by a potential opaque object that is touching device 100 and cannot be seen. It should be noted that more than one icon can be magnified in response to a nearby touch. Multiple icons can be magnified at different magnification levels, and the magnification level is inversely proportional to the distance between each magnified icon and the touch position.
图40示出了考虑附近图标之间的物理交互的图标移动。如图所示，栅格4002包括被布置成径向布置的若干个图标。响应于位置4010处的触摸输入，将若干个图标放大到不同放大等级。值得注意的是，放大图标4004可使得相邻图标4006和4008从图标4004移开，使得图标不会彼此遮挡而无法看到。FIG40 illustrates icon movement that takes into account physical interactions between nearby icons. As shown, grid 4002 includes several icons arranged in a radial arrangement. In response to a touch input at position 4010, several icons are magnified to different magnification levels. Notably, magnifying icon 4004 can cause adjacent icons 4006 and 4008 to move away from icon 4004 so that the icons do not obscure each other and cannot be seen.
图24示出了考虑图标和栅格边界之间的交互的图标移动。如图所示，根据不对称栅格2402来显示若干个图标。所显示的图标包括未压缩的图标2408。响应于方向2404上的向右手势形式的触摸输入，可将栅格2402的右边界上的图标压缩成压缩图标2406，使得以放大或不放大形式更主要地显示来自栅格2402左侧的图标。而且，响应于向左方向2406的触摸手势，可将栅格2402的左边界上的图标压缩成压缩图标2412，使得主要显示来自栅格2402右侧的图标。上述交互允许同时显示所有图标或基本上所有图标，同时允许用户容易地查看和选择图标。注意，尽管未示出，但这种压缩可发生于对称栅格中。Figure 24 shows the icon movement considering the interaction between icon and grid border.As shown in the figure, several icons are displayed according to asymmetric grid 2402.The icons displayed include uncompressed icon 2408.In response to the touch input of the rightward gesture form on direction 2404, the icons on the right boundary of grid 2402 can be compressed into compressed icon 2406, so that the icons from the left side of grid 2402 are more mainly displayed in amplified or non-amplified form.And, in response to the touch gesture of leftward direction 2406, the icons on the left boundary of grid 2402 can be compressed into compressed icon 2412, so that the icons from the right side of grid 2402 are mainly displayed.The above interaction allows all icons or substantially all icons to be displayed simultaneously, allowing the user to easily view and select icons simultaneously.Note that although not shown, this compression can occur in a symmetrical grid.
图34示出了考虑栅格边界和附近图标之间的交互的图标移动。在图34的径向布置中，在不可见内圆3402和不可见外边界圆3400之间布置图标。可基于设备100的触摸屏物理尺寸来设定外圆3400的尺寸。可基于设计和/或用户偏好来设定内圆3402的尺寸。也可基于用户输入诸如表冠旋转来设定内圆3402的尺寸。内圆3402可对其表面区域内的触摸屏输入作出响应。例如，可将内圆3402的表面区域内发生的向下触摸和后续的触摸移动解释为内圆3402的平移。在平移内圆3402时，可基于内圆3402和外圆3400之间的可用间距、所显示的图标数量以及相邻图标的尺寸来重新设定在内圆3402和外圆3400之间布置的图标诸如图标3404和3408的尺寸。例如，响应于向右平移圆3402，图标3404的尺寸增大，并且放大图标3404可使得图标3408的尺寸减小。FIG34 illustrates icon movement that takes into account the interaction between the grid boundary and nearby icons. In the radial arrangement of FIG34 , icons are arranged between an invisible inner circle 3402 and an invisible outer boundary circle 3400. The size of the outer circle 3400 can be set based on the physical size of the touch screen of the device 100. The size of the inner circle 3402 can be set based on the design and/or user preferences. The size of the inner circle 3402 can also be set based on user input such as crown rotation. The inner circle 3402 can respond to touch screen input within its surface area. For example, a downward touch and subsequent touch movement occurring within the surface area of the inner circle 3402 can be interpreted as a translation of the inner circle 3402. When the inner circle 3402 is translated, the size of icons arranged between the inner circle 3402 and the outer circle 3400, such as icons 3404 and 3408, can be reset based on the available spacing between the inner circle 3402 and the outer circle 3400, the number of icons displayed, and the size of adjacent icons. For example, in response to translating circle 3402 to the right, icon 3404 increases in size, and zooming in on icon 3404 may cause icon 3408 to decrease in size.
注意，在没有用户输入时，所显示的图标可被编程为在屏幕上移动，以防止屏幕有烙印。而且，图标布置可对多点触摸手势作出响应。例如，设备100(图1)的触摸屏上两个手指向下手势可使得显示系统信息诸如状态条。作为另一个实例，其中两个手指在反方向上移动的双指手势可配置设备100(图1)以用于左手用途或右手用途。Note that the displayed icons can be programmed to move on the screen in the absence of user input to prevent screen burn-in. Furthermore, the icon arrangement can respond to multi-touch gestures. For example, a two-finger downward gesture on the touch screen of device 100 ( FIG. 1 ) can cause system information such as a status bar to be displayed. As another example, a two-finger gesture in which two fingers move in opposite directions can configure device 100 ( FIG. 1 ) for left-handed use or right-handed use.
5.附加特征5. Additional Features
回到图2，主屏幕200可显示系统生成的信息诸如警示。例如，主屏幕200可显示用户已坐了很长时间并且应该锻炼的提醒。而且，屏幕200可显示休息的建议，因为用户明天早晨的日程很忙。还回到图3，可在将设备100与坞站耦接时显示屏幕300。Returning to FIG. 2 , home screen 200 can display system-generated information, such as alerts. For example, home screen 200 can display a reminder that the user has been sitting for a long time and should exercise. Furthermore, screen 200 can display a suggestion to take a break, as the user has a busy schedule tomorrow morning. Returning also to FIG. 3 , screen 300 can be displayed when device 100 is coupled to a docking station.
图26示出了使用壁纸2602辅助用户在图标栅格中进行导航。如图所示，栅格2600具有较大数量的图标。响应于表冠旋转2604，在栅格2606中放大并显示来自栅格2600的图标的子集。此外，还显示在子集的背景中的壁纸2602的对应部分，这意味着例如如果来自栅格2600的左上象限的图标变为被显示在栅格2606中，则也在栅格2606内显示壁纸2602的左上象限。同样如图所示，响应于向左方向2608上的触摸手势，设备100可显示来自栅格2600的图标的另一子集。例如，在栅格2610中，与壁纸2600的右上象限一起显示来自栅格2600的右上象限的图标。这样，用户可确定相对于可用于在设备100上显示的图标的整体的一组当前显示的图标之间的关系。FIG26 illustrates the use of wallpaper 2602 to assist a user in navigating a grid of icons. As shown, grid 2600 has a relatively large number of icons. In response to crown rotation 2604, a subset of the icons from grid 2600 is enlarged and displayed in grid 2606. Furthermore, the corresponding portion of wallpaper 2602 is displayed in the background of the subset. This means, for example, that if icons from the upper left quadrant of grid 2600 become displayed in grid 2606, the upper left quadrant of wallpaper 2602 is also displayed within grid 2606. Also as shown, in response to a touch gesture in the left direction 2608, device 100 may display another subset of icons from grid 2600. For example, in grid 2610, icons from the upper right quadrant of grid 2600 are displayed along with the upper right quadrant of wallpaper 2600. This allows the user to determine the relationship between the currently displayed icons relative to the overall set of icons available for display on device 100.
图27示出了图标的示例性布置，其中该布置向用户提供信息例如当前时间信息。可响应于表冠移动而显示该布置。而且，可在用户输入不活动的预先确定的时间之后显示该布置。例如，可在用户输入不活动的预先确定的时间之后显示屏幕2702，该屏幕使用小尺寸的图标来显示当前时间。此外，响应于表冠旋转，屏幕2702可通过屏幕2704和2706过渡到用于显示图标的栅格的屏幕2708。Figure 27 illustrates an exemplary arrangement of icons that provides information to the user, such as the current time. This arrangement may be displayed in response to crown movement. Furthermore, it may be displayed after the user enters a predetermined period of inactivity. For example, after the user enters a predetermined period of inactivity, screen 2702 may be displayed, which displays the current time using small icons. Furthermore, in response to crown rotation, screen 2702 may transition through screens 2704 and 2706 to screen 2708 displaying a grid of icons.
图28示出了图标的示例性布置(栅格2802)，其中所显示的图标的色彩和/或强度可响应于传入信息而变化。例如，与消息应用程序对应的图标2804可在新消息到达时闪烁或发光。在一些实施例中，闪烁或发光可对应于应用商店中的应用程序的普及度或更大的用户生态系统中的应用程序的使用频率。此外，除所安装的那些应用程序之外，栅格2802的图标可显示代表应用程序商店中的更大的可用应用程序集的图标。FIG28 shows 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, icon 2804 corresponding to a messaging application can flash or glow when a new message arrives. In some embodiments, the flashing or glowing can correspond to the popularity of the application in the app store or the frequency of use of the application in the larger user ecosystem. In addition, in addition to those applications that are installed, the icons of grid 2802 can display icons representing a larger set of available applications in the app store.
图29示出了上下文消息的示例性显示。可响应于检测到用户触摸表冠108而显示上下文消息。该上下文消息指示表冠108的当前功能，根据当前在设备100前台中工作的应用程序，上下文消息可采取不同的功能。例如，在音乐应用程序正在设备100的前台中工作时，触摸表冠108可使得以音量指示符的形式显示上下文消息2902，这可向用户指示表冠108当前的功能是音量控制。FIG29 illustrates an exemplary display of a contextual message. A contextual message may be displayed in response to detecting a user touching crown 108. The contextual message indicates the current function of crown 108 and may take on different functions depending on the application currently in the foreground of device 100. For example, when a music application is in the foreground of device 100, touching crown 108 may cause a contextual message 2902 to be displayed in the form of a volume indicator, indicating to the user that crown 108 is currently functioning as a volume control.
图35示出了用于提供上述用户界面技术的示例性过程3500。在框3510处，接收基于表冠移动和/或表冠触摸的输入。表冠移动可以是旋转、推动和/或拉动。在框3520处，基于由所接收输入所代表的表冠移动的类型来作出决策。如果所接收的输入代表表冠旋转，则该处理进行到框3530。如果所接收的输入代表表冠推动或拉动，则该处理进行到框3550。如果所接收的输入代表表冠触摸(没有旋转或推动/拉动)，该处理进行到框3560。在框3530处，可确定当前显示的屏幕及其沿z轴906(图9)的对应位置。此外，可确定沿z轴906的相邻的等级信息。可基于由所接收的输入所代表的表冠旋转的方向来确定相邻等级。可显示对应的图标栅格诸如由图4-图7中的每个图所示出的那些图标栅格。在框3550处，可显示主屏幕诸如图2的示例性屏幕200。在替代方式中，可显示用户最喜爱的屏幕诸如图3的示例性屏幕300。在框3560处，可显示上下文消息诸如图29的示例性上下文消息2902。FIG35 illustrates an exemplary process 3500 for providing the user interface techniques described above. At block 3510, input is received based on crown movement and/or crown touch. Crown movement can be rotation, push, and/or pull. At block 3520, a decision is made based on the type of crown movement represented by the received input. If the received input represents a crown rotation, the process proceeds to block 3530. If the received input represents a crown push or pull, the process proceeds to block 3550. If the received input represents a crown touch (no rotation or push/pull), the process proceeds to block 3560. At block 3530, the currently displayed screen and its corresponding position along the z-axis 906 ( FIG9 ) can be determined. Additionally, adjacent level information along the z-axis 906 can be determined. The adjacent levels can be determined based on the direction of the crown rotation represented by the received input. A corresponding icon grid, such as those shown in each of FIG4-FIG7 , can be displayed. At block 3550, a home screen such as exemplary screen 200 of FIGURE 2 may be displayed. In the alternative, a user's favorites screen such as exemplary screen 300 of FIGURE 3 may be displayed. At block 3560, a contextual message such as exemplary contextual message 2902 of FIGURE 29 may be displayed.
图36示出了用于提供上述用户界面技术的示例性计算系统3600。在一些实施例中，计算系统3600可形成设备100。如图所示，计算系统3600可具有将I/O部分3604、一个或多个计算机处理器3606以及存储器部分3608连接在一起的总线3602。存储器部分3608可包含用于执行包括过程3500(图35)的上述技术的计算机可执行指令和/或数据。I/O部分3604可连接到显示器3610，该显示器可具有触敏部件3612。I/O部分3604可连接到表冠3614。I/O部分3604可连接到可包括按钮的输入设备3616。I/O部分3604可连接到通信单元3618，该通信单元可例如提供Wi-Fi、蓝牙和/或蜂窝特征。I/O部分3604可连接到传感器套件3620，该传感器套件可具有陀螺仪、GPS传感器、光传感器、陀螺仪、加速度计和/或其组合。注意，上述部件中的一个或多个部件可是芯片上系统的一部分。FIG36 shows an exemplary computing system 3600 for providing the above-described user interface techniques. In some embodiments, computing system 3600 may form device 100. As shown, computing system 3600 may have a bus 3602 connecting an I/O portion 3604, one or more computer processors 3606, and a memory portion 3608. Memory portion 3608 may contain computer-executable instructions and/or data for performing the above-described techniques, including process 3500 ( FIG35 ). I/O portion 3604 may be connected to a display 3610, which may have a touch-sensitive component 3612. I/O portion 3604 may be connected to a crown 3614. I/O portion 3604 may be connected to an input device 3616, which may include a button. I/O portion 3604 may be connected to a communication unit 3618, which may, for example, provide Wi-Fi, Bluetooth, and/or cellular features. I/O portion 3604 may be connected to sensor suite 3620, which may have a gyroscope, a GPS sensor, a light sensor, a gyroscope, an accelerometer, and/or combinations thereof. Note that one or more of the above components may be part of a system on a chip.
计算系统3600的存储器部分3608可以是用于存储计算机可执行指令的非暂态计算机可读存储介质，该计算机可执行指令当由一个或多个计算机处理器3606执行时可使得计算机处理器执行包括过程3500(图35)的上述用户界面技术。该计算机可执行指令也可被存储和/或被输送在任何非暂态计算机可读存储介质内，以供指令执行系统、装置或设备诸如基于计算机的系统、包含处理器的系统或可从指令执行系统、装置或设备获取指令并执行指令的其他系统使用或与其结合。对于本文档的目的而言，“非暂态计算机可读存储介质”可以是可包含或存储计算机可执行指令以供指令执行系统、装置和设备使用或与其结合的任何介质。非暂态计算机可读存储介质可包括但不限于磁存储器、光学存储器和/或半导体存储器。此类存储器的实例包括磁盘、基于光盘的CD、DVD或Blu-ray技术，以及RAM、ROM、EPROM、闪存存储器和固态存储器。The memory portion 3608 of the computing system 3600 can be a non-transitory computer-readable storage medium for storing computer-executable instructions that, when executed by one or more computer processors 3606, can cause the computer processor to perform the above-mentioned user interface technology including process 3500 (Figure 35). The computer-executable instructions can also be stored and/or transported in any non-transitory computer-readable storage medium for use by or in conjunction with an instruction execution system, device, or apparatus such as a computer-based system, a system containing a processor, or other systems that can obtain instructions from and execute instructions on an instruction execution system, device, or apparatus. For the purposes of this document, a "non-transitory computer-readable storage medium" can be any medium that can contain or store computer-executable instructions for use by or in conjunction with an instruction execution system, device, or apparatus. Non-transitory computer-readable storage media can include, but are not limited to, magnetic memory, optical memory, and/or semiconductor memory. Examples of such memories include magnetic disks, optical disc-based CDs, DVDs, or Blu-ray technologies, as well as RAM, ROM, EPROM, flash memory, and solid-state memory.
计算系统3600不限于图36的部件和配置，而是可包括多种配置中的其他部件或附加部件。在一些实施例中，系统3600可形成个人电子设备3700，该个人电子设备是平板计算机，如图37所示。在一些实施例中，计算系统3600可形成个人电子设备3800，该个人电子设备是移动电话，如图38所示。在一些实施例中，计算系统3600可形成个人电子设备3900，该个人电子设备是门户音乐设备，如图39所示。Computing system 3600 is not limited to the components and configurations of FIG36 but may include other components or additional components in a variety of configurations. In some embodiments, system 3600 may form a personal electronic device 3700 that is a tablet computer, as shown in FIG37. In some embodiments, computing system 3600 may form a personal electronic device 3800 that is a mobile phone, as shown in FIG38. In some embodiments, computing system 3600 may form a personal electronic device 3900 that is a portal music device, as shown in FIG39.
虽然已参照附图对公开和实例进行了全面的描述，但应当注意，各种变化和修改对于本领域内的技术人员而言将变得显而易见。应当理解，此类变化和修改被认为被包括在由所附权利要求所限定的本公开和实例的范围内。Although the disclosure and examples have been fully described with reference to the accompanying drawings, it should be noted that various changes and modifications will become apparent to those skilled in the art. It should be understood that such changes and modifications are considered to be included within the scope of the disclosure and examples as defined by the appended claims.
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| US201361959851P | 2013-09-03 | 2013-09-03 | |
| US201361873359P | 2013-09-03 | 2013-09-03 | |
| US201361873360P | 2013-09-03 | 2013-09-03 | |
| US201361873356P | 2013-09-03 | 2013-09-03 | |
| US61/873,356 | 2013-09-03 | ||
| US61/959,851 | 2013-09-03 | ||
| US61/873,360 | 2013-09-03 | ||
| US61/873,359 | 2013-09-03 | ||
| PCT/US2014/053957WO2015034965A1 (en) | 2013-09-03 | 2014-09-03 | User interface for manipulating user interface objects |
| Publication Number | Publication Date |
|---|---|
| HK1223698A1 HK1223698A1 (en) | 2017-08-04 |
| HK1223698Btrue HK1223698B (en) | 2020-07-24 |
| Publication | Publication Date | Title |
|---|---|---|
| AU2021201748C1 (en) | User interface for manipulating user interface objects | |
| US10921976B2 (en) | User interface for manipulating user interface objects | |
| DK180032B8 (en) | User Interface for manipulating user interface objects | |
| US12287962B2 (en) | User interface for manipulating user interface objects | |
| US11513675B2 (en) | User interface for manipulating user interface objects | |
| HK1223698B (en) | User interface for manipulating user interface objects |