来源由CocoaChina翻译自苹果11月份推出的Apple Watch Human Interface Guidelines（已于3月12日更新）。在UI交互设计元素部分做了非常详细是关于Apple Watch人机交互设计的阐述。

值得各位移动APP设计师们来学习和关注。Apple Watch属于可穿戴设备，其UI需要适应可穿戴的场景，用户抬起手腕即可展示时间和最新的提醒。

第一章：Apple Watch UI设计基础–为Apple Watch而设计

第二章： Apple Watch UI设计基础–App 剖析

第三章：Apple Watch UI设计基础–Glances

第四章：Apple Watch UI设计基础–通知

第五章：Apple Watch UI设计基础–模态页面和布局

第六章：Apple WatchUI设计基础–颜色和字体

第七章：Apple WatchUI设计基础–动画、品牌化

第八章：Apple WatchUI元素–标签、图像、Groups

第九章：Apple Watch UI元素–列表、按钮、开关以及滑杆

第十章：Apple WatchUI元素–地图、日期和计时器以及菜单

第十一章：Apple Watch Icon与图片尺寸

第一章： Apple Watch人机交互指南：UI设计基础--为Apple Watch而设计

本文由CocoaChina翻译自Apple Watch Human Interface Guidelines

重要：

本文档是开发过程中使用的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的交互应该是简练的、直观的以及简单的。

第二章：Apple Watch人机交互指南：UI设计基础--App 剖析

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

界面类型

Watchapps支持两种导航方法：

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

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

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

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

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

用户交互

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

"Gestures（手势）.系统会为你处理任何手势，并使用手势执行标准行为：

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

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

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

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

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

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

第三章：Apple Watch人机交互指南：UI设计基础--Glances

集中查看时，Glances是佩戴者最爱app的可浏览有意义时刻的集合，并且是与上下文环境相关的。理想情况下，Glance可快速查看app的最重要内容。Glance底部区域是预留给页面指示圆点的。

Glances是：

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

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

• Associated with a single action（单一操作）.点击glance上任何地方可打开应用程序。 

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

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

Glances可使用Handoff深度链接WatchKit app。Glances可利用Handoff来通知应用程序--当用户点击时Glance会展示什么样的内容。然后WatchKit扩展可使用该信息来相应地配置应用程序界面。

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

第四章：Apple Watch人机交互指南：UI设计基础--通知

Apple Watch上的通知可促使用户与本地或者远程通知进行快速、轻量级的交互。这些交互主要发生在两个阶段，分别由Short-Look和Long-Look界面管理。当本地或者远程通知首次到达时展示Short-Look界面，该界面为用户展示了深思熟虑的最小化信息-保护一定程度的隐私。如果用户压低手腕，Short-Look会消失。如果用户手腕抬高或者点击Short-Look界面，则会展示Long-Look界面，该界面提供了更多详细信息和功能，必须由用户积极解除。

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

Short-Look通知

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

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

自定义Long-Look 通知

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

提供一个静态及界面，并有选择地提供一个动态界面。动态界面比静态界面更有可配置性，但都使用你的图像和品牌展示了相同的通知类型。静态界面提供了一个退路，以防出现动态界面不可用的情况。

最多展示4个自定义操作按钮。Apple Watch利用您的iOS app已经注册的交互式通知在Long Look界面展示操作按钮。这些操作按钮会基于通知类别自动展示，并且是系统提供的解除按钮之外的按钮。

配置sash颜色以匹配你的品牌。可在自定义界面配置sash的配色和不透明度。

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

第五章：Apple Watch人机交互指南：UI设计基础--模态页面和布局

Modal Sheets

Modal sheets为用户提供了一种无干扰的方式来完成任务或者获取信息，或者继续先前在Menu control中做的选择。Modal sheets通过临时阻止用户与app其他部分进行交互来实现该目的。

最好能最小化app中的模态体验，一般而言，只有以下情况才需要考虑使用模态内容：

• 引起用户的注意是至关重要的。

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

模态界面包含单个屏幕，或者在一个分页布局中包含多个屏幕。两种界面类型之间的不同之处在于分页布局界面底部有圆点指示器。模态界面的左上角是关闭按钮。当用户点击此按钮（或者向左轻扫屏幕），系统会解除模态界面，无需进一步的操作。

不要在当前内容主体中单独添加关闭按钮。系统提供的关闭按钮是强制展示的，但你可以改变其文本。尤其是当关闭按钮的文本是"关闭"或"取消"时。关闭按钮的颜色通常是白色的。

如果任务需要接受，可在模态界面的主体部分提供一个接受按钮。为接受操作提供一个标准的按钮。点击按钮即可执行相应的动作，然后解除模态界面。

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

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

布局

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

通用准则

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

使用整屏宽度。无需考虑屏幕边缘和内容之间的空白部分，因为Apple Watch的边框已经在内容的周围进行了视觉填充。（注意：这种视觉填充不会展示在模拟器中）

元素靠左对齐。界面中的元素排列是从上到下从左到右的。将界面中的元素按左对齐，以确保应用程序有足够的空间来完整地扩展或展示内容。

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

使用上下文菜单展示次要操作。使用上下文菜单放置那些使用频率不高的操作，而不是在界面中添加按钮。

屏幕尺寸

为不同尺寸屏幕提供相同内容。当设计布局时，请使用相对尺寸和空间位置，以便于项目能自然扩展或收缩，从而填充屏幕上的可用空间。

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

第六章：Apple Watch人机交互指南：UI设计基础--颜色和字体

在应用程序中，保持易读性是使用颜色和字体的指导原则。

颜色

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

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

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

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

避免将颜色作为唯一的交互展示途径。可在app的品牌上酌情使用颜色，但不仅仅用颜色来指示用户与按钮或者其他控件交互。

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

研究不同国家和文化对颜色的认知。每个人对颜色的看法是不同的，并且很多文化赋予颜色的意义也是不一样的。尽可能地确保应用程序中的颜色传递了适当的信息。

字体

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

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

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

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

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

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

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

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

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

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

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

第七章：Apple Watch人机交互指南：UI设计基础--动画、品牌化

动画

漂亮精细的动画遍布Apple Watch的每个角落，为用户打造了迷人的动态的体验。恰当的动画应当：

• 传达状态并提供反馈

• 帮用户视觉化操作结果

使用一系列静态图片创建预渲染动画。在您的app包中储存录制好的动画（罐装动画），这样可以快速展示给用户。录制好的动画也可以让您交付高帧频流畅的动画。

从WatchKit扩展中动态地创建动画，并将其转移到Apple Watch，在回放之前添加一个延迟就可以开始了。

当需要播放控制动画时，请使用图片和分组对象（group objects）。大部分界面对象以无限循环方式展示动态图像序列。要终止动画或从动画中回放一组特定的帧，你必须使用图片或者分组对象。

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

品牌化

有多种方式品牌化你的app，包括icon、用色、自定义按钮、自定义字体以及所使用的文本等。在您设计app的图形元素时，要记得每个自定义元素都要看起来很好，其本身的功能也一样，但看起来也应当和app中的其他元素存在关系，不管是自定义元素还是系统提供的标准元素。

以优雅不唐突的方式彰显品牌。用户使用您的应用程序来完成任务或者进行娱乐活动，但他们不想被强迫观看一则广告。为了获得最佳的用户体验，您需要通过色彩、字体或者意像来悄悄地提醒用户对品牌的辨识度。

抵制在应用程序或Glance中展示logo的诱惑。Apple Watch上的空间非常宝贵，每次展示logo都会占用内容的空间，并且在应用程序中展示logo的目的不同于在网页中展示logo：很多时候，用户会进入某个陌生人的网页，但用户在打开应用程序之前通常会查看app icon。

第八章：Apple Watch人机交互指南：UI元素--标签、图像、Groups

标签展示静态文本

标签可以：

• 展示任何数量的静态文本

• 不允许用户直接交互

• 可以以编程形式更新

• 可以跨多行展示

使用标签向用户展示短信息。标签是应用程序中最常用的元素之一。虽然标签可展示任意数量的文本，但最适合展示数量相对较少的文本。

标签应当清晰可见。为标签文本使用高对比度颜色，并使用Dynamic Type以确保标签文本会相应地缩放。内置的系统字体为Apple Watch提供了最清晰可见的字体。如果您使用自定义字体，不要为了使用花哨的字体和浮华不实的颜色而牺牲字体的清晰易读性。

尽可能地使用内置的文本样式。内置样式自动支持Dynamic Type，并且易于使用。

更多关于在app中使用文本的指南，以及使用Dynamic Type，请查看Color and Typography。

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

图像

图像对象（image object）展示一个图片或者动态的图片序列。

图像对象:

• 没有自己的外观，仅展示它的图片。

• 不支持用户交互

• 为动画开始和结束提供了程式控制

针对Apple Watch每个尺寸适当调整图片。可以的话使用单个图片资源，不要为适应不同尺寸屏幕而拉伸或者压缩图片，看起来会非常糟糕。相反应该为设备提供像素大小正确的图片资产。

按照@2x创建所有图片资产。无需为非Retina屏设备创建图片。

----------------------------------------------------------------------------------------------------------------------------------------------------
列表

列表以单列形式分行展示数据。可使用列表展示可动态更改的内容。

列表对象具有以下特性：

• 支持多行内容展示类型

• 可滚动

• 可设置背景色或图片

• 支持用户交互

在设计阶段指定列表行类型的布局。所有行类型都必须提前设计好。运行时，您可以选择真正需要的行类型。

行类型使用要一致。您可能会创建不同的行类型来展示内容、页眉和页脚等。如果你有这种需求，请不要使用内容行展示标题信息，反之亦然。针对设计目的使用每个行类型。

避免混合使用内容类型截然不同的列表行。当展示内容时，要确保您所使用的行类型的一致性。只有当列表分为不同的section，或者出于组织内容行目的时才能使用其他的列表行类型。在内容上使用相同的列表行类型可确保列表行大小一致，并易于导航。

限制每次显示的列表行数。超过20行的列表会因需要滚动而变得笨重。可只显示最相关的子集行，并给用户提供加载更多行的选择。

不要在分组(Groups)内嵌入列表。列表会基于其所包含的行数动态调整大小。由此，列表会忽略Groups对其高度上的限制。

第九章：Apple Watch人机交互指南：UI元素--列表、按钮、开关以及滑杆

列表

列表以单列形式分行展示数据。可使用列表展示动态更改的内容。

列表对象具有以下特性：

• 支持多行内容展示类型

• 可滚动

• 可设置背景色或图片
  

• 支持用户交互
  

在设计阶段指定列表行类型。所有行类型都必须提前设计好。运行时，您可以选择您真正需要的行类型。

行类型使用要一致。您可能会创建不同的行类型来展示您的内容、页眉和页脚等。要确保行类型使用一致。

避免混合使用内容类型截然不同的列表行。当展示内容时，要确保您所使用的行类型的一致性。只有当列表分为不同的section，或者出于组织内容行目的时才能使用其他的列表行类型。在内容上使用相同的列表行类型可确保列表行大小一致，并易于导航。

限制每次显示的列表行数。超过20行的列表会因需要滚动而变得笨重。可只显示最相关的子集行，并给用户提供加载更多行的选择。

不要在分组(Groups)内嵌入列表。列表会基于其所包含的行数动态调整大小。由此，列表会忽略Groups对其高度上的限制。

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

按钮

按钮用以执行app特有的操作

按钮具有以下特性：

• 有可自定义的背景

• 圆角

• 可包含标签和组对象(group object)

按钮的背景被称为platter。在运行时，你可以更改展示在按钮platter中的自定义颜色或图片。

创建横跨整个屏幕宽度的按钮。强烈建议使用全宽（full-width）按钮。如果你在同一水平空间上必须放置一个以上的按钮，那要将数量限制在两个以内。

尽可能保持按钮高度一致。如果您在一个屏幕上集中放置了多个按钮，那么每个按钮要使用相同的高度。

使用默认的圆角半径。标准的按钮圆角半径是6 points。

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

开关

开关代表两种互斥的选择或状态。

开关具有以下特性：

• 指示项目的二元状态

• 通常包含标签

使用开关让用户选择两个选项中的其中一项，比如yes/no或on/off.

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

滑杆

滑杆允许用户在一系列离散值上做出调整。用户通过点击滑杆任意一端的图片来更改值的大小。

滑杆具有以下特性：

• 在任意一端使用水平轨道图片来操作滑杆值。

• 通过离散的或者连续的进度条展示当前值。

• 通过预定的量值来增减数值。 

• 不会向用户展示具体数值。

使用自定义图片让滑杆的目的更明显。如果你没有提供任何自定义图片，系统会展示“+”和“-”的图片。

第十章：Apple Watch人机交互指南：UI元素--地图、日期和计时器以及菜单

地图

使用地图向用户展示地理位置相关信息。Apple Watch上的地图是静态快照，不能在应用中与之进行交互，点击地图则会打开Maps app。

配置地图范围使之成为包含相关位置的最小区域。在展示地图之前，WatchKit扩展以编程形式设置地图范围。选择一个包含所有需要的兴趣点信息的区域，并且对用户来说该区域是最小最有用的区域。

地图尺寸不能超过可用内容区域。地图对象尺寸要匹配Apple Watch的屏幕规格，使用户无需额外滚屏就可以看到整个地图。

使用注释来高亮标注地图上的位置。注释是展示在地图之上的图片，用来标记位置或者调出信息。地图展示的注释不能超过5个。

地图针对绿色、红色以及紫色三种图钉提供了内置的支持。

你也可以使用自定义图片创建注释。WatchKit扩展可相对于地图坐标调整图片的布局，从而让你将图片放在地点位置旁或者地点位置上。

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

日期和计时器

日期与计时器对象是Apple Watch上用来显示与时间相关的值的特定标签。日期标签有如下特性：

日期标签

• 展示日期、时间或者两者的组合。

• 可使用多种格式、日历以及时区形式来配置展示时间。

• 不需要通过WatchKit 扩展更新。

任何时候当你想要展示当前日期或时间，都可以使用日期对象。

计时器标签

计时器标签特性如下：

• 向指定的时间计时或者从指定时间开始计时。

• 可以配置展示多种形式的计数值。

• 无需通过WatchKit 扩展更新

通常使用一个计时器标签来精确地进行计时或倒计时。

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

菜单

Apple Watch Retina显示屏上的Force Touch手势可展示当前屏幕的上下文情景菜单。菜单储存了当前屏幕相关的一些操作，无需占用界面上的空间。

• 菜单可展示1到4个与当前屏幕相关的action。

• 按照添加的顺序，从左到右从上到下排列展示。

• 菜单不能分层，也不能滚动。

• 可以在设计阶段或者以编程形式配置。

仅当屏幕有相关action时才使用菜单。菜单是可选的。如果没有展示菜单，当用户在显示屏上执行force touch手势时，系统会展示一个相应的动画。

不要创建仅作用于当前被选中项目的action，或者仅作用于一部分界面的action。Actions应当适用于整个屏幕。

每个action必须有一个图片和一个标签字符串。菜单图片是应用于标准背景的系统样式。标签字符串限定在2行以内。图片和字符串都是必须的。

关于创建菜单中图标的内容，请参看：Menu Images

第十章：Apple Watch人机交互指南：Icon与图片尺寸

Icon与图片尺寸

每个应用都需要一个漂亮的、令人难忘的主屏幕图标，以便用户可以很好地识别应用程序。由于用户仅仅通过主屏幕上的icon识别应用程序，所以你的icon应当是可辨认的，并且类似iOS应用程序的icon，并且能传达出应用程序的目的。

Icon尺寸

主屏幕上的icon是圆形的。Table 20-1列出了每个icon相应的直径和用途。所创建的图形资源都是@2x规格（注意:Xcode中的icon尺寸是point）。

Table 20-1Icon sizes for WatchKit app on Apple Watch

除了WatchKit app使用的icon外，运行在iPhone上的Apple Watch app也需要一个代表app的icon。Table 20-2列出了这些icon资源的尺寸（pixel）。根据给定的尺寸创建图片资源。（注意:Xcode中的icon尺寸是point）
Table 20-2 Icon sizes for use by Apple Watch app on iPhone

将你的icon创建为完整的方形图片，系统会自动为其添加圆形遮罩。

对于所有的图片和icon来说，请使用PNG格式，避免使用交叉处理的PNG图片。您可以使用索引颜色PNG图片，以便节省图片文件中的空间。

Icon和图片的标准色深(bit depth)为24位，也就是红、绿、蓝色各占用8位。您可以使用8-bit alpha channel图形，但不是必须的。

主屏幕上的icon

主屏幕上的icon类似iOS应用程序，但是不附带文本。在如此小的尺寸上，icon必须清晰易于辨认，便于用户知道他们代表什么应用。如果Apple Watch app的功能与iOS上的应用程序非常相似，那么icon要在视觉上保持一致。如果Watch app扮演的是辅助角色或者是iOS应用程序的控制器时，icon可以相应地有所不同。

为了得到最佳效果，可以向专业平面设计师寻求帮助。经验丰富的平面设计师可以帮您的应用程序开发一个整体的视觉风格，并将该其应用到所有的icon和图片上。

使用通用的用户易于辨识的意象。通常要避免使用次要的或者语义模糊不清的元素。例如Mail icon使用信封样式，而不是邮箱、邮递员的信件袋或者邮局标志。

保持简洁。特别要避免在icon中填塞大量不同的图形。找到某个能够捕捉应用精髓的单个元素，并能通过简单、独一无二的图形将该其展示出来。请谨慎添加细节，如果icon的内容或形状过于复杂，那么在小尺寸屏幕上，这些细节会变得非常杂乱和模糊。

为应用程序的主旨创建一个抽象的阐释。通常以艺术的方式阐释现实会有更好的效果，这种方式可以让您强调您希望用户关注的方面。

确保Apple Watch app icon和iOS app相似。维持外观上的相似性可帮用户建立Watch app与iOS app之间的关联性。

为不同屏幕尺寸的Apple Watch创建不同尺寸的主屏幕应用程序图标。确保icon在不同尺寸的Apple Watch设备上都能完美展示。关于设备尺寸规格，请参看Table 20-1。

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

菜单图片

Force Touch菜单中的icon是模板图片，由图片的Alpha Channel定义生成的形状。图片中的颜色信息会被忽略。

使用菜单图片，图片的canvas尺寸应大于内容的尺寸，如Table 21-1所示。内容周围的额外空间可确保菜单icon边缘和内容之间有足够的边界。

Table 21-1 Canvas and content sizes for menu images

请使用适合设备尺寸和符号复杂度的线宽。符号所用线条的宽度最少要4 px，以防难以辨认。请参考Figure 21-1.

Figure 21-1 Glyph sizes for menu images

对于菜单图片，推荐使用PNG格式，并且要避免使用交叉处理的PNG图片。