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

动画、品牌化

动画

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

· 传达状态并提供反馈。

· 帮用户形象化操作的结果

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

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

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

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

品牌化

成功的品牌化所涉及的内容远不止在应用程序中添加品牌资产。最好的应用程序将现有资产和独一无二的外观和感觉集合在一起为用户提供了一个令人愉悦的难忘的体验。

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

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

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

标签、图像、Groups

标签

标签展示静态文本



标签：

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

· 不允许用户直接交互

· 可以以编程形式更新

· 可以跨多行展示

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

标签应当清晰可见。为标签文本使用高对比度颜色，并使用Dynamic Type以确保标签文本会相应地缩放。内置的系统字体为Apple Watch提供了最清晰可见的字体，并且也推荐您使用。如果您使用自定义字体，不要为了使用花哨的字体和浮华不实的颜色而牺牲字体的清晰易读性（在app中如何使用文本，以及使用Dynamic type的相关信息，请查看Color和Typography）。

尽可能地使用内置的样式。内置的样式专为高清晰度和易用度而设计。



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

图像

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



图像对象:

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

· 不支持用户交互

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

针对Apple Watch每个尺寸适当调整图片。不要针对不同的屏幕尺寸拉伸或压缩图片。为设备提供像素大小正确的图片资产。

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

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

Groups

Groups是一款用以在界面上布局内容的重要工具。对其他对象来说，Groups起到一个容器的作用。Groups没有默认的外观，但是可使用自定义背景颜色和图片来重新配置。Groups包含指定位置、尺寸、页边距以及其他布局相关内容的属性。

Group对象：

· 可以水平或垂直地布局项目

· 包含一个或者多个界面元素

· 拥有指定分组元素间的页边距的属性

· 可用图片或者纯色作为背景

· 拥有一个适用于背景和内容的可配置的圆角半径

Groups是Xcode中执行设计任务的主要工具。但事实是一个group可以有自己的背景色或背景图片，这意味着你也可以使用groups作为视觉元素。

在groups中嵌套其他groups来创建复杂布局。你可能想要水平布局一些项目，垂直布局其他项目。你可能也要嵌套groups来利用外边group的页边距或间隔选项。

为不同尺寸的Apple Watch显示屏创建单独的背景图片。不要针对不同屏幕尺寸拉伸或者压缩图片，要为设备提供像素大小正确的图片资产。

列表、按钮、开关以及滑杆

列表

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



列表对象具有以下特性：

· 支持多行内容展示类型

· 可滚动

· 可设置背景色或图片

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

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

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

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

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

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

按钮

按钮可执行app特有的操作



按钮具有以下特性：

· 有可自定义的背景

· 圆角

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

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

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

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

按钮用圆角将自身和其他元素区别开来。按钮标准的圆角半径是6 points。

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

开关

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



开关具有以下特性：

· 指示项目的二元状态

· 通常包含标签

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

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

滑杆

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



滑杆具有以下特性：

· 通过在任意一端包含一个水平的轨道图片来操作滑杆的值。

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

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

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

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

地图、日期和计时器以及菜单

地图

地图可向用户传达某个地理目标的相关信息。您可以使用地图来展示目的地或者展示兴趣点的位置。Apple Watch上的地图是静态快照，不能与之进行交互，点击地图则会打开Maps app。

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

不要创建一个尺寸超过可用内容区预的地图对象。地图应该针对当前Apple Watch尺寸适当调整，并且用户无需额外滚动就能看见整个地图。

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

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

地图对绿色、红色以及紫色三种图钉提供了内置的支持。使用绿色图钉标记起点，使用红色图钉标记目的地，使用紫色图钉标注兴趣点。



你也可以使用自定义图片创建注释。图片的底部边缘指向目标坐标。



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

日期和计时器

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

日期标签

· 展示日期、时间或者组合使用两者。

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

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

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

计时器标签



计时器标签特性如下：

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

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

· 无需通过WatchKit 扩展更新

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

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

菜单

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



菜单可展示1到4个操作。按钮操作按照添加的顺序，从左到右从上到下按序排列展示。菜单不能分层，也不能滚动。你可以在设计或者编程过程中配置菜单操作。

菜单操作仅适用于当前的屏幕。每个屏幕都有各自的菜单，或者根本就没有菜单。某些任务类型并不适合上下文情景菜单，比如仅适用于滚动界面的可视部分，或者只作用于当前选中的项目。

每个操作必须有一个图片和一个标签字符串。菜单图片是应用于标准背景的系统样式。标签字符串必须在1到2行。

菜单是可选的。只有在当前屏幕包括相关操作时才使用上下文情景菜单。当没有菜单展示时，系统就展示相应的动画。

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

Icon与图片尺寸

Icon与图片尺寸

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



Icon尺寸

主屏幕上的icon是圆形的。下表列出了每个icon相应的直径和用户。根据给定的尺寸规格，将你的icon创建为完整的方形图片，系统将会自动应用圆形遮罩。



所创建的图形资源都是@2x规格，不需要非@2x的图形。

对于所有的图片和icon来说，推荐使用PNG格式，避免使用交叉处理的PNG图片。

Icon和图片的标准色深(bit depth)为24位，也就是红、绿、蓝色各占用8位。您可以使用8-bit alpha channel图形，但不是必须的。您也可以使用带有索引颜色的PNG图片，以便节省图片文件中的空间。

主屏幕上的icon

Apple Watch的主屏幕非常独特，但似乎非常熟悉。主屏幕上的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通道定义生成的形状。图片中的颜色信息会被忽略。

内容周围的额外空间可确保菜单icon边缘和内容之间有足够的边界。



使用菜单图片，图片的canvas尺寸应大于内容。

当设计菜单图片中展示的图形时，请使用适合于设备尺寸和图形复杂度的线宽。线条的宽度最少要4 px，以防难以辨认。



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