Apple Watch人机交互指南--UI设计基础（一）

为Apple Watch而设计

本文档是开发过程中使用的API或者技术的初步文档。苹果提供该文档以帮助你按照文档中描述的方式为将来采用苹果产品上使用的技术和界面设计做好准备。后期该文档中信息可能会有所变动，所以依据本文档开发的软件应使用最终的操作系统软件和最终文档进行测试。该文档可能会根据相关API或技术进行更新。

Apple Watch主要体现如下主题：

1.个体化.Apple Watch属于可穿戴设备，其UI需要适应可穿戴的场景，用户抬起手腕即可展示时间和最新的提醒。Digital Touch-尤其是其Heartbeat和Sketch功能，能够启用新的通信类型，这是难以令人置信的个体化表现。加速计和心率传感仪针对使用者一天天的活动提供了个人化信息，没有其他苹果设备以此种方式和使用者联系在一起。这种连接方式很重要，因为你是在为Apple Watch而设计。

2.整体性.Apple Watch的设计目的是模糊实体对象和软件之间的边界。Digital Crown是一个微调硬件控件，能够进行精确的软件导航。内置的Taptic Engine振动模组可以产生与提醒和屏幕交互相关的微妙的物理反馈。Force Touch开拓了上下文环境中软件控制的新维度。甚至Retina显示屏的物理边框也被考虑在内，从而产生了可高效渲染无形边界的全屏UI设计。深思熟虑的app设计有助于模糊软件和硬件之间的体验。

3.轻量级.Apple Watch上的应用程序专为快速和轻量级的交互而设计，从而能充分利用显示屏尺寸和其在手腕上的位置。对于用户来说，Watch app的信息应该是可快速简单地访问和解除的，并且也具备隐私性和易用性。比如Notification Short Look是为了提供最小化的提醒，如果佩戴者继续使用，则会展示更多信息。Glances在一个简单易访问的可滑动界面中展示来自应用程序的信息。针对Apple Watch的应用程序设计应当遵守佩戴者使用的上下文环境：简单地、频繁地，以及在一个小显示屏上使用。

Watch app是对iOS app的补充，但并非取代它。如果你可以在数分钟内衡量用户与iOS app的交互，那么你可以期待下在数秒内衡量应用程序的交互，所以Watch app的交互应该是简练的、直观的以及简单的。

App 剖析

AppleWatch必须与用户的iPhone配合使用来运行应用程序。

界面类型

Watchapps支持两种导航方法：

Hierarchical.该类型与iOS中的导航类型相匹配，最适合包含分层信息的应用程序。在一个hierarchicalapp中，用户需要在每屏上做出一个选择来导航，直到到达目的地。如果想导航到另一个目的地，那么用户必须折回部分或者全部步骤并做出不同的选择。

Hierarchical模型要好于扁平化的模型，分页导航模型适合更复杂的应用程序交互。

"Page-based.分页界面可让用户通过水平方向上的滑动来实现内容页之间的导航。基于分页的界面最适合包含简单数据模型的应用程序，每一页上的数据并不是直接关联到其他页面上的数据。每页底部的圆点指示器可展示用户的位置。要尽可能地通过控制页面总数来简化导航。

你不能同时使用分层和分页的界面类型。在设计时。你必须选择最适合应用程序内容的类型，并针对该类型进行设计。

不管使用哪一种类型，应用程序都能以模态形式展示内容。模态页面为用户提供了一个无干扰的方式来完成任务或者获得信息，但这种方法会暂时阻止用户与app的其他部分进行交互。更多信息，请查看ModalSheets。

用户交互

"Action-basedevents（基于动作的事件）.在AppleWatch中，单点手势是用户与应用程序交互的主要方式。表格行、按钮、开关以及其他控件都通过点击操作，这些点击随后会被报告给你的WatchKit扩展中的代码。

"Gestures（手势）.您不能为应用程序添加手势识别，相反系统会为你处理任何手势，并使用手势执行标准行为：

· 在竖直方向上滑动滚动当前屏幕。

· 在一个分页界面中，水平滑动展示上一个或者下一个页面。

· 向左滑动导航回到父界面控制器。

· 点击（Taps）表示选择或交互。系统会处理点击手势并报告给你的WatchKit扩展的操作方法。

AppleWatch不支持多手指手势，比如捏合操作。

"ForceTouch.小尺寸屏幕容纳的控件数量有限，这也是为什么苹果会引入一种全新的交互模式--ForceTouch。Retina显示屏在感知到用户点击的同时也感知到了压力。ForceTouch交互模式展示与当前屏幕相关的上下文菜单。应用程序则使用该菜单来展示与当前内容相关的操作。更多内容，请参看Menus。

"DigitalCrown.为更细微的调整和加速滚动而设计，而不会妨碍AppleWatch显示。DigitalCrown可以更简单地滚动长页面。

Glances

在Apple Watch上, Glance可以快速查看你在应用程序中所关注的内容。理想情况下，Glance是及时的，并且是与上下文环境相关的。集中查看时，Glances是佩戴者最爱app的可浏览有意义时刻的集合。Glances是pul而不是push，所以它不像设备上的提醒推送，并且是由佩戴者决定是否访问它们。

 

Glances是：

·Template-based（基于模板的）. 有适用于Glance 屏幕上部分和下部分的单独模板。使用Xcode选择你需要的模板，并根据规格设计你的内容。

·Not scrollable（不可滚动）.所有内容必须位于单个屏幕中。

·Read-only（只读）.点击glance上任何地方可打开应用程序。 

·Optional（可选）.不是所有的应用程序都需要Glance，并且用户也可以选择展示哪个Glances。

Glance底部的区域是留给页面指示器圆点的。

基于用户当前的上下文环境配置Glance。过时的或不相干的信息会降低glance的有用性，使用时间和位置来体现当前与用户相关的内容。

Glances可以深度链接到对应的应用程序。Glances可利用Handoff来通知应用程序--当用户点击时Glance会展示什么样的内容。然后应用程序可使用该信息来展示一个不同的界面或者相应地配置现有的界面。

Glances必须为用户提供有用的内容。不要提供一个仅用来鼓励用户打开应用程序的Glance。

通知

Apple Watch上的通知以Short Look和Long Look两种形式推动用户进行快速、轻量级的交互。当有本地或远程通知需要展示给用户时出现Short Look。Short Look提供了深思熟虑的最小化的信息-保护一定程度的隐私。如果用户压低手腕，Short Look则会消失。当用户手腕抬高或者点击界面中的short look则展示Long Look。Long Look提供了更多详细信息和更多功能，必须由用户积极解除。

谨慎向用户频繁发送通知。用户可能会将频繁推送的信息看做骚扰信息，并禁用您的应用程序在Apple Watch上的信息功能，所以要确保通知内容与用户心中所想是相关的。

Short Look通知

Short Looks可以让用户知晓哪款应用程序收到了通知，并且只能简略地展示。Short Look界面是基于模板的，并且包含app的名称、icon以及通知标题。系统使用app的主色展示app的名称。

 

标题字符串保持简短，并突出重点。屏幕上留给标题字符串的可用空间很小，所以标题要简洁并直指要点。标题字符串并没有提供通知的细节，只提供一个简短的提示。

自定义Long Look 通知

Long Looks对进来的通知提供了更多细节。系统提供了默认的Long look外观，但是app可以自定义Long Look来包含自定义的图形/图像和品牌。Long Look的结构对所有应用程序都一样。系统在Long Look顶部提供了一个sash和叠加的app图标以及app名称。Long Look通知底部也添加了一个解除按钮和任何app定义的操作按钮，这中间是你的自定义内容。

 

应用程序的内容可以和sash叠加覆盖，也可以位于其下。照片和其他图形内容可使用underlapping（叠加/重叠）选项。对于以文本为主的通知界面来说，启用Xcode中的Offset Notification Content让内容位于sash之下。

对于自定义Long Look界面，app必须提供一个静态界面并可以有选择地提供一个动态界面。动态界面比静态界面更有可配置性，但是这两种方法都使用你的图像和品牌展示相同的通知类型。静态界面提供了一个退路以防出现动态界面不可用的情况。

Long look通知最多可展示4个操作按钮。Apple Watch利用您的iOS app已经注册的交互式通知在Long Look界面展示操作按钮。这些操作按钮会基于通知类型自动展示。

解除按钮始终存在。该按钮是您提供的4个操作按钮之外的按钮。

关于静态和动态界面的更多内容，以及如何配置操作按钮，请参看WatchKit Programming Guide.

模态页面和布局

Modal sheets利弊兼有，它为用户提供了一种无干扰的方式来完成任务或者获取信息，或者继续先前在Force Touch菜单中做的选择。Modal sheets通过临时阻止用户与app其他部分进行交互来达到该结果。

最好能最小化你在app的模态体验，一般而言，只有以下情况可考虑创建模态内容：

·得用户的注意是至关重要的。

·须完成一个独立的任务，或者明确地放弃某项任务，以避免用户数据处于模棱两可的状态。

模态界面包含单个屏幕，或者在一个分页布局中包含多个屏幕。两种界面类型之间的不同之处在于分页布局界面底部有圆点指示器。

 

模态界面左上角用来防止关闭按钮。当用户点击该按钮（或者执行left-edge滑动), 系统则会接触模态界面无需进一步操作。关闭按钮是强制展示的，但你可以改变其文本。你无需在当前内容主体中单独添加关闭按钮，尤其是当关闭按钮的文本是"关闭"或"取消"时。关闭按钮的颜色通常是白色的。

如果任务需要接受，那可在模态界面的主体部分提供一个接受按钮。为接受操作提供一个标准的按钮。除了执行适当的操作，点击按钮还应该解除模态界面。

模态任务要持简单。避免从第一个模态界面中展示第二个模态界面。

-----------------------------------------------------------------------------------------------------------------------

布局

布局指南

限制界面中并排控件的数量。当并排放置按钮时，使用icon而不是文本来识别按钮。并排放置的按钮数量决不能超过3个。界面中包含多个项目会让用户因可点击目标过小而不便操作。

充分使用屏幕上的空间。无需包含屏幕边缘和内容之间的空白部分，因为Apple Watch的边框已经在你内容的周围进行了填充。

应用程序使用相对位置。应用程序在不同尺寸的Apple Watch上展示相同的界面，而相对位置可以让它们根据不同尺寸屏幕扩展以填充可用的空间。

优先使用左对齐。界面中的元素排列是从上到下从左到右的。将界面中的元素按左对齐，以确保有空间来完整地扩展和展示内容。

文本按钮全宽。展示标签的按钮应该是全宽的，以确保整个按钮标签是可见的。

使用下下文菜单展示二级操作。使用上下文菜单包含那些使用频率不高的操作，而不是在界面中添加按钮。

屏幕尺寸

无论设备屏幕尺寸如何，展示在Apple Watch上的内容应该是一样的。当设计布局时，请让项目能自然扩展或收缩，以填充可用的空间。

根据需要为不同尺寸的屏幕提供图片资产。如果在两个屏幕尺寸上展示的都非常好，那可以使用相同的图片资产，否则要为每个尺寸提供不同的图片资产。

颜色和字体

颜色可以为您的应用程序提供视觉连续性和品牌化。

使用黑色作为app的背景色。黑色的背景可以和设备的边框无缝融合，并让用户产生设备没有屏幕边缘的错觉。避免在界面中使用明亮的背景色。

使用app的主色彰显品牌和身份。每款应用程序都定义了一个主色。系统将该主色用在屏幕右上角的标题字符串和通知界面中，以突出app的名称或者其他主要信息。您应该同样使用作色作为app品牌的一部分。

文本使用高对比度颜色。高对比度的颜色可以让文本更加清晰易读。

避免使用颜色展示交互性。可在app的品牌上酌情应用颜色，但不要单独使用颜色来指示用户与按钮或者其他控件的交互。

将色盲用户考虑在内。大部分色盲群体很难分辨红色和绿色。测试你的应用程序，以确保没有在应用程序中唯一使用红色和绿色来区分两种状态或者值（一些图片编辑软件包含可以帮你校对色盲的工具）。

使用颜色交流，但并不总是你想要的方式。每个人对颜色的看法是不同的，并且很多文化赋予颜色的意义也是不一样的。花点时间调研究如何使用颜色才可能被其他国家和文化接受。尽可能地，确保您应用程序中的颜色传递了适当的信息。

字体

首先字体要清晰易读。如果用户不能阅读应用程序中的文本，那他们也不在乎你使用了多漂亮的字体。

系统字体的主要目的是为提高Apple Watch上文本的易读性。在较大尺寸屏幕上，字母间轻微压缩排列紧凑以占用较少的水平空间。在较小尺寸屏幕上，字母排列略松散更易读。当字体变小时，标点符号会成比例放大。任何时候随着文本大小的更改，Apple Watch会在保持文本清晰和易读间动态调整。

应用程序通常应当使用动态类型（Dynamic Type），当使用动态类型时，你可以：

· 为每种字体自动调整字符间距和行高。

· 为不同语义文本指定不同的文本类型，比如主体、注脚或者标题。

· 文本适当地响应用户对字体大小的设置（包括无障碍文本大小）。

注意：如果你使用了自定义字体，你仍可以根据字体的系统设置缩放样式。当用户更改设置时，你的应用程序负责适当地进行响应。

如果使用内置的文本类型，那您将免费获得Dynamic Type支持。如果使用自定义字体，那么你必须做一些工作来适应这个特性。学习如何使用文本类型，并确保在用户更改文本大小设置时你的app得到了通知，请参看 Text Programming Guide for iOS中Text Styles一节。

只要可能，请使用内置的文本类型。内置的文本类型自动支持Dynamic Type，并且内置文本类型可以很好地展示在Apple Watch上。

尽量在app中使用单一字体类型。App出于品牌化目的可使用附加字体，但尽量少用。混合使用多种字体会让app看起来支离破碎和草率。根据语义用法，比如主体或标题，使用UIFont文本样式API来定义不同的文本区域。

当手动指定系统字体大小时，磅值决定了正确尺寸的使用。为文本选San Francisco Text字体-19 points或者略小一点。为文本选择San Francisco Display字体，这种字体大概是20 points或者更大一点。