Apple Watch界面设计规范之UI设计基础

一、为Apple Watch而设计

Apple Watch体现着如下几个方面的主题思想：

个人。Apple Watch是面向穿戴而设计的，所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digital Touch来“传心跳”或“传画” – 这些全新的沟通方式是极具个人色彩的。加速感应器和心率传感器可以日复一日的向佩戴者提供其运动行为方面的个人数据。苹果推出的其他任何设备都不曾与用户建立起如此紧密的关联。在你为Apple Watch设计应用的时候，时刻留意这种个人化的关联是非常重要的。

整体。Apple Watch旨在使硬件与软件的边界更加模糊。数码表冠是经过精心打造的实体控件，帮助用户在软件当中进行精巧的导航操作。Taptic Engine可以与提示信息或界面操作结合起来，为用户提供微妙的触觉反馈。Force Touch – 一种可以由硬件感知按压力度的触摸方式 – 为软件的情境化控制方式带来了一个全新的维度。即便是Retina显示屏的物理边缘也被考虑了进来 – 隐性的边缘渲染方式允许你打造出“边到边”的全屏UI设计。上乘的应用设计方案需要贯彻这种软、硬件一体的体验原则。

轻量。Apple Watch应用在设计上要注重快速、轻量的交互流程，并充分利用屏幕显示空间及其位于手腕位置的这一重要特性。出于隐私和可用性方面的考虑，界面当中信息的获取和移除方式都应该是非常快捷的。举个例子，Apple Watch上的Short Look信息提示方式的设计原则，就是首先以最小化的方式提供少量提示信息，如果用户持续关注，再为其展示更全面的信息。Glance则是通过一种易访问的、可通过轻扫手势操作的界面形式将应用内部的信息呈现出来。为Apple Watch设计应用时，要遵从于佩戴者使用该设备时的体验情境，例如短暂而高频次的交互会话，以及狭小的屏幕显示空间等等。

Watch应用是对iOS应用的补充，而非替代品。如果说我们能以“分钟”来度量iOS应用的人机会话时间，那么对于Watch应用来说则需以“秒”计。交互流程必须简短快捷，界面必须简单易懂。

二、应用解析

Apple Watch必须配合用户的iPhone才可以运行你的应用。

界面风格

Watch应用支持两种导航方式：

层级式。这种方式与iOS的导航风格相吻合，最适用于拥有层级化信息结构的应用。在层级式导航的应用当中，用户在每屏当中只能做出一个选择，直到他们到达目标位置。要继续导航到其他地方，用户需要折返一部份或是全部的层级来做出不同的选择。

对于交互流程较为复杂的应用来说，层级式导航比扁平化的、基于页面的导航机制更加适用。

页面式。基于页面的界面形式允许用户通过横向轻扫的手势在不同的内容页之间进行导航。这种模式最适用于那些数据模型简单、且不同页面之间不存在直接数据关联的应用。

界面底部的圆点指示符可以让用户了解目前所处的位置。要尽可能将页面总数控制在很小的范围内，使导航保持简便快捷。

你不能将以上两种导航方式组合起来使用。在设计阶段，必须从两者当中选择一种最适于你的应用内容的方式，并以此为基础进行设计。

无论使用哪种导航方式，你的应用都可以模态化的呈现内容。模态化界面可以使用户不受干扰的完成任务或获取信息，但是相应的，他们将暂时无法与应用当中的其他部分进行互动。

交互方式

基于行为的事件。轻点(单击)是用户与应用进行互动的主要方式。列表行、按钮、切换等控件都是通过轻点来进行操作的。这些事件接下来会被传递到WatchKit扩展的代码当中。

手势。你不能在应用中添加任何定制化的手势。系统已经代你制定了标准的手势行为：

Apple Watch不支持多指手势，例如捏合等。

1.通过纵向轻扫使当前界面滚动。

2.通过横向轻扫在基于页面导航的界面之间前后查看。

3.从屏幕左边缘向右轻扫，可以返回父级界面。

3.轻点选项控件或其他交互元素。轻点事件会由系统处理并传递到WatchKit扩展的相关行为方法当中。

按压(Force Touch)。如此小屏只能容纳为数不多的界面控件，因此苹果带来了一种全新的交互方式：按压。正如可以感知到普通的轻点，Watch的Retina屏幕同样可以灵敏的感知到按压。按压用来唤出与当前界面相关的情境化菜单(如果有)。你可以在应用中使用这种菜单来展示与当前内容相关的各种操作选项。更多相关信息请参考菜单。

数码表冠(The Digital Crown)。可以精准滚动的实体控件，使浏览长页面等任务变得更加轻松，而且屏幕不会被手指遮挡。

三、Glance

Glance是Apple Watch当中的一种快捷视图功能，它能将应用当中的重要信息提取出来，并以简明的形式呈现。理想情况下，Glance具有适时性和情境关联性。成组的Glance(s)汇总了用户最为关注的应用当中的重要信息。Glance采用的是拉取机制，而非推送。所以，与推送提示有所不同，是否通过Glance访问信息是由佩戴者自己决定的。

Glance具有以下几方面的特性：

基于模板。Glance界面的上下两部分有各自独立的模板。你可以在Xcode当中挑选合适的模板，并按照相应的规格设计你的内容。

不可滚动。所有信息都要集中呈现在一屏当中。

只读。轻点Glance界面当中的任何地方都会打开相应的应用。

非强制。不是所有的应用都需要Glance视图，用户可以自主选择在Glance(s)中显示哪些应用的信息。

Glance界面的底部区域是预留给点状页码指示符的。

根据用户当前所处情境来配置Glance的信息。滞后的或是不相关的信息会使Glance失去价值。通过时间和地点信息来传达相关性。

Glance可以与其对应的应用建立深度关联。利用Handoff功能，Glance可以在用户轻点的时候，向与其对应的应用传递当前视图中显示的信息；应用启动之后，便可以根据这些信息来呈现不同的界面或是在已有界面当中进行相应的配置调整。

Glance必须向用户提供有用的信息。不要只是为了给你的应用增加一个启动入口而提供Glance视图。

四、通知(Notifications)

作为快速、轻量的互动功能，Apple Watch上的通知由两部分组成：Short Look与Long Look。当有本地或远程通知需要呈现给用户时，Short Look会首先出现。Short Look当中包含着最少量的必要信息 – 这也是出于隐私方面的考虑。如果佩戴者放低手腕，Short Look便会消失。如果佩戴者保持手腕姿势，或是在Short Look的界面上轻点，那么Long Look视图便会呈现。它会提供更加详细的信息及更多的功能，而且只能由佩戴者主动关闭。

要注意向用户发送通知的频率。用户有可能将频繁发送的通知视为干扰，并在Apple Watch上禁止你的应用发送通知。一定要确保通知信息与用户期望具有相关性。

Short Look通知

Short Look可以让用户了解到哪个应用接收到了通知消息，并且只会向用户呈现简要信息。Short Look的界面是基于固定模板的，其中包含应用的名称和图标，以及通知的标题。系统会将应用名称渲染成该应用自身的关键色。

保持通知标题的简短、易聚焦。可供展示通知标题的空间很小，所以要尽量保持言简意赅。标题无需展现通知信息当中的详情，只进行大致的示意即可。

可定制的Long Look通知

Long Look会显示通知信息当中的更多详情。系统为Long Look提供了一套默认外观，但是你的应用可以对其进行定制，例如展示定制化的图形元素或品牌信息。所有应用的Long Look在结构上都是一致的。系统提供了一套标准的头部框，其中包括应用图标及名称。底部则是关闭按钮及若干应用自身定制的按钮。头部和底部之间就是你的定制化内容所显示的区域。

应用内容可以被头部框所覆盖，也可以与其下边缘相接。对于照片和其他图形类的内容，你可以让它们默认被头部框覆盖。而对于以文字内容为主的通知信息，则要在Xcode当中选中“Offset Notification Content”，使内容从头部框下边缘以下开始显示。

对于定制化的Long Look界面，应用必须提供一套静态界面，在某些时候也可能需要提供动态界面。相比于静态界面，动态界面具有更灵活的可配置性，但两者本质上都是使用你的图形与品牌元素来展示相同内容的通知信息。如果动态界面对你来说不可行，那么静态方式可以作为替代。

Long Look通知当中最多可以显示4个自定义按钮。Apple Watch可以利用iOS应用当中的交互式通知功能在Long Look中显示相关的操作按钮。这些按钮会根据通知信息的类型而自动显示出来。

关闭按钮会始终呈现在Long Look通知的底部。该按钮位于4个自定义按钮下方。

五、模态表单(Modal Sheets)

模态表单有利也有弊。模态表单可以临时性的阻断用户与应用其他部分的互动，使他们不受干扰的完成任务、获取信息，或是在由按压手势唤出的情境菜单中完成选项流程。

要使应用中的模态体验保持在最少的程度。通常，只在这些情况下考虑使用模态表单：

1.获取用户的注意力在当前环节是至关重要的。

2.某个独立的任务必须被完成，或是被显性的放弃，否则用户数据将处于模棱两可的状态。

模态界面通常由单一界面构成，或者也可以由一系列基于页面式导航的界面构成。呈现方式上唯一的区别就在于底部是否有页码指示符。

模态界面的左上角用来放置关闭按钮。当用户点击该按钮时(或从屏幕左边缘向右轻扫)，系统会将模态界面关闭掉，不再有相关的后续操作。关闭按钮的呈现是强制性的，不过你可以定制其标题。你也不需要在内容当中另外添加关闭按钮了。关闭按钮的典型标题有“关闭”和“取消”，字色始终保持白色。

如果任务当中需要“接受”操作，你还需要在模态界面当中添加接受按钮。请使用标准的接受按钮。点击该按钮后，模态界面同样会被关闭，然后后续行为得到执行。

保持模态任务的简练。不要在初始的模态界面中再次显示一个新的模态界面。

六、布局

并排放置的按钮数量要控制好。当并排放置按钮时，使用图标来代替标题文案。一行不要放置3个以上，否则按钮的尺寸将会太小，很难被点到。

完整利用左右两个边缘之间的全部空间。Apple Watch的边缘斜面会在界面内容周围制造出可视的边距，所以你不需要再在内容与界面边缘之间添加留白了。不过要注意，硬件设备上的边缘斜面是无法在iOS模拟器当中呈现的。

使用相对位置来布局界面元素。同一套界面可能会在不同规格的Apple Watch上显示，所以使用相对位置来布局元素能令其根据需要而伸缩，使屏幕空间得到更合理的利用。

布局时优先使用左对齐。界面中的元素应该按照自上而下、自左向右的顺序排布。将元素以界面左边缘进行左对齐可以确保有足够的扩展空间来完整的展示内容。

文字按钮要使用全屏宽度。要将显示标题文字的按钮设计为全屏宽度，以确保标题文字能完整呈现。

通过情境菜单来呈现次级操作。不要将全部的功能按钮都放在界面当中默认展示出来，那些低频操作可以收到情境菜单当中。

屏幕尺寸

应用界面所呈现的内容在不同规格的Apple Watch当中应该保持一致。在设计布局时，要使界面元素可以自如的伸缩，以便充分利用不同规格的屏幕空间。

如果需要，可以为不同规格的屏幕提供不同的图形资源。如果一套图形素材在两种规格的屏幕中效果都不错，那么就使用这一套；否则可以提供两种不同尺寸的图形资源。

七、色彩与文字

色彩

通过对色彩的运用，你可以在应用当中构建视觉一致性及品牌认知。

使用黑色作为应用的背景色。黑色的背景色可以与Watch的边缘斜边无缝的融合起来，给人一种无边框的错觉。避免在界面中使用明亮的颜色作为背景色。

使用应用当中的关键色来呈现品牌或状态信息。每个应用都要定义一种关键色。系统会将界面左上角以及通知界面中的标题渲染为你所设置的关键色，以突出应用名称和其他一些关键信息。关键色也应该成为你应用当中的品牌认知要素之一。

为文字内容使用高对比度的颜色。高对比度的颜色可以使文字更加易读。

避免通过色彩来暗示交互性。可以适当的使用关键色作为品牌识别元素，但是不要单纯依靠色彩来暗示按钮或其他控件的交互性。

考虑到色盲用户。多数色盲患者难以区分红色与绿色。要测试你的应用，确保没有任何一个环节是单纯依靠红绿两种颜色来区分状态或数值的(一些图片编辑类软件会自带相关工具，帮你验证界面配色是否对色盲友好)。

色彩是具有沟通性的，但效果未必如你所愿。每个人对色彩的感知都有所差异；不同的文化当中，色彩的含义也可能大相径庭。花些时间去研究一下你所使用的颜色对于国外的或是不同文化当中的用户来说会产生怎样的认知。要尽可能的确保应用当中的色彩能传达出恰当的信息。

文字

最首要的，文字必须清晰易读。如果用户根本无法阅读应用中的文字，那么再精美的排版都没有意义。

系统默认字体是特别针对在Apple Watch上实现良好易读性而设计的。在较大的字号下，字符会轻微收缩，使横向空间的占用量更少。而字号较小时，字符的分布则会变得更加松散，而且诸如“a”和“e”这些字母的字腔会变大，使其在用户难以专注聚焦的情况下仍能保持较高的可读性。此外，字号较小时，标点符号也会适度增大。随着字号的改变，Apple Watch会动态的切换字体显示方式，从而始终保持文字内容的清晰易读。

你的应用应该始终采用动态字体(Dynamic Type)。使用动态字体有以下几点好处：

1.针对不同的字号自动调整字符间距(letter spacing)和行高(line height)。

2.可以根据文字区块的语义来指定不同的文字风格，例如Body、Footnote或Headline等。

3.文字可以根据用户在字号设置当中所做的调整而进行响应。

注意

如果在应用当中使用自定义字体，你仍然可以使文字根据系统当中的字号设置进行缩放。这种情况下，你的应用本身将负责使文字根据用户在系统中的设置而进行相应的调整。

如果你使用系统内置字体，那么你的应用本身已经包含对动态字体的支持了。如果使用自定义字体，那么你需要做些额外的工作来支持这项功能。要了解怎样使用文字风格并确保你的应用在用户调整系统字号时进行相应，可以参考Text Programming Guide for iOS当中的Text Styles。

尽可能使用系统内置字体。系统内置字体可以自动支持动态字体功能，并且是专门针对Apple Watch的特性进行设计的。

尽可能在应用全局使用同一种字体。你可以出于展示品牌的目的而使用额外的字体，但一定要保持最少的使用量。多种字体混杂在一起将使你的应用看上去非常碎片化，给人一种不严谨的印象。你可以使用UIFont文字风格API根据不同区块的语义对字体风格进行定义。

当你手动为系统字体指定字号时，点(point)的大小将决定着使用哪种字号。你可以为19点或更小的文字选择San Francisco Text字体，为20点或更大的文字选择San Francisco Display字体。

八、动效

漂亮而精妙的动效遍布于Apple Watch当中，将更具吸引力和动感的体验带给用户。恰当的动效能够：

1.传达状态信息，提供反馈

2.以可视化的方式让用户看到操作结果

使用静态图片序列来创建预生成动效。预先录制动效并储存在Watch应用包当中，使其在被调用时可以更迅速的呈现给用户。预先录制的动效帧率更高，效果更平滑。而在应用运行过程中通过WatchKit动态创建的动效则会带来延迟。

播放控制只对图片和分组对象(group object)有效。多数界面对象会以无限循环的方式展示动画图片序列。要使动画停止，或是只播放动画中的特定片段，你需要使用图片对象或分组对象。

九、品牌

成功的品牌塑造不仅在于向应用当中放置与品牌相关的图形资源。优秀的应用应该将品牌形象与独特的界面外观及操作感整合起来，带给用户愉悦而印象深刻的体验。

你可以通过很多方式来塑造应用的品牌认知，例如图标、色彩、定制化按钮、定制化字体和文案等等。当你为应用设计图形元素的时候，不仅要使它们各自表现良好，同时还要使它们看上去彼此协调与统一，无论对于定制化元素还是系统标准控件来说都是如此。

将品牌元素优雅平滑的融入界面设计当中。人们用你的产品是为了完成任务或得到消遣，他们不希望自己像是在被迫看广告一样。为了打造更平滑的体验，你要尽量潜移默化的通过自体、色彩和图形元素向用户传达品牌信息。

不要在应用内或Glance当中显示logo。Apple Watch上的显示空间寸土寸金，logo图形中的每一个元素都在占用用户希望看到的实际内容的空间。此外，在Watch应用当中展示logo并不能达到在网页上那样的效果：用户在浏览传统网页时，一开始很可能并不了解当前页面所属网站或品牌；而人们在移动设备上打开某应用时通常都是依靠应用图标和logo来定位的，你无需再在应用内部展示。

本文来源于交互学堂

—————————————————————————————

微博 @MICU设计 合作微信 joewong01