微信官方出品！ 超详细的 watchOS App 设计指南

随着技术的发展，可穿戴设备正在从实验室走向市场，从独立使用到多平台联动，从注重基于硬件的产品功能到注重基于用户数据的应用与服务。Apple Watch 搭载的 watchOS 则是可穿戴设备用操作系统中的翘楚。相较于 iOS、Android 及网页，watchOS 对于大多数设计师来说都是一个相对陌生的领域。在这篇文章中，我们将为大家分享设计 watchOS app 中的要点。

本期提纲：

• 设计原则
• 手势
• 触觉反馈
• 跨设备交互
• 页面布局
• 字体体系
• 色彩体系
• UI 组件
• 通知
• 结语

设计原则

watchOS 有 3 项设计原则：

• 交互轻量（Lightweight Interactions）
• 软硬件一体（Holistic Design）
• 面向个人（Personal Communication）

1. 交互轻量

碎片化的使用时间、较小的屏幕空间，这些客观条件要求 watchOS 上的设计要足够「短平快」。

「短」常体现于精简的信息量及大尺寸的文本。如在「体能训练」app 中，对关键运动情况的说明不仅言简意赅，还用了最大的 large title 这一文本样式。仅需一瞥，心中就有数了。

「平」体现在扁平的信息架构。相对于其他平台，watchOS 上的 app 一般仅使用以下 2 种相对简单的信息架构类型：

层级型（Hierarchical Navigation）

分页型（Pagebased navigation）

在实际运用场景中，这两个类型还可以混用。如「体能训练」app 就用了混合的信息架构类型，但仍保证了仅有 2 层深度的扁平要求。

「快」则在于被拆解为小块的微任务，如 iOS 中的「音乐」，在 watchOS 中被拆解为「音乐」「广播」「播放中」3 个 app，其对应着浏览音乐库、浏览广播、控制音频播放这 3 个微任务。这一思路与「桌面应用的移动化」非常相似。

2. 软硬件一体

承载 watchOS 的 Apple Watch 有着极高水准的工业设计，而与 UI 最为相关的则是其屏幕及 Bezel。其中，Bezel 指的是 Apple Watch 屏幕四周环绕的黑色边框，经特殊工艺处理，其边缘如水滴般饱满。在强光照射下，更能呈现出其精致质感。这很难让人不想到 Apple 经典的 Aqua 风格。

为了能将其设计美学在 UI 中得到继承，我们建议采取以下设计策略：

纯黑背景

Apple Watch 采用的是 OLED 材质的屏幕，这种材质的屏幕在展示纯黑（#000000）时不会发光，也更省电。若在设计中使用纯黑的背景，背景就会与 Bezel 融为一体、UI 元素直接「镶嵌」于表盘，可谓浑然天成。

平滑圆角

无论是 Bezel 还是屏幕，均有着圆润的设计语言。因此，在 UI 中使用与物理环境相匹配的圆角样式，可使软硬件更加契合。watchOS 中的圆角使用可以比 iOS 中更大胆。如在 iOS 中，按钮的常规圆角值为 8pt，watchOS 中则增大为 9pt。同时，watchOS 还有大量全圆角的样式，就连应用图标都是正圆。

在微信 Apple Watch 版中，聊天页面的 3 个回复按钮更是使用了正圆样式，不仅减少了被屏幕圆角裁切的可能，更为应用赋予了浓郁的 watchOS 平台特色。

全宽元素

因 Bezel 的存在，当前的 Apple Watch 还不能称为真正的全面屏。如果可能，将按钮、列表项等元素横向撑满屏幕，不仅能从视觉感知上尽可能增加无框感（frameless），还能充分利用原本就比较紧缺的屏幕空间。

3. 面向个人

Apple Watch 是非常个人化的设备，我们需要为用户的隐私做足够缜密的考量。如 Apple Watch Series 5 及更新机型的屏幕有着常亮显示（AlwaysOn）功能，当用户抓着地铁扶手或伏案工作时，屏幕上常亮显示的信息就可能被旁人看到。因此，我们要为常量状态页面中的个人信息进行脱敏处理。

但同时，作为基本随时贴身的设备，减少对用户无谓的打扰也是设计师需要注意的基本要求。关于这方面的设计，大家可参阅本公众号关于宁静科技（Calm Technology）的文章。

总的来看，watchOS 的设计原则可简要总结为：在物理性质上，强调「软硬件一体」；在交互表达上，规避信息过载、注重信息安全。

手势

1. 常规手势

watchOS 支持以下手势：

• 轻点（Tap）：单指轻触屏幕
• 拖移（Drag）：单指向上、向下、向左或向右轻扫过屏幕
• 轻扫（Swipe）：单指移过屏幕但不抬起
• 双击（Double Tap）

受限于较小的屏幕，多点触控是不被支持的。如 iOS 中常用的双指捏合（Pinch）及双指旋转（Rotate）。

2. 边缘滑动（Edge Swipe）

在小而圆滑的 Apple Watch 的屏幕上，边缘滑动是更加便捷的。其中，上、下、左侧的边缘滑动已被系统定义，分别为打开通知中心、打开控制中心、返回。而右侧的边缘滑动则尚未被系统占用，这给了设计师一个自由发挥的空间。

3. 实体按钮

数码表冠（Digital Crown）

数码表冠是非常适合在手腕上与智能设备交互的实体。通过旋转数码表冠，用户可以实现页面、列表的滚动，滚动速率收放自如。

我们还可以将滚动数码表冠所产生的交互效果进行灵活的设计。如：

• 在播放音频的场景中，滚动数码表冠以调节音量
• 在浏览图片的场景中，滚动数码表冠以缩放图片
• 在编辑表盘的场景中，滚动数码表冠以实现编辑对象的切换（类似于点按 macOS 中的 Tab）
• 在查阅弹窗的场景中，向下滚动数码表冠以关闭弹窗

侧边按钮

目前，侧边按钮相关的交互属系统级，不可自定义：按下侧边按钮，可以调出程序坞；双击侧边按钮，可使用快捷交通卡。

4. Force Touch

Force Touch 是较旧版本的 watchOS 中的特殊手势，一般情况下可呼出上下文菜单（Context Menu），可以简单理解为 iOS 中的 3D Touch。但因 Force Touch 这一手势的可发现性较弱，目前已用长按（Long Press）来代替之。

不过，目前又有了在 watchOS 中用双击（Double Tap）来替代长按的趋势，这是因为双击这一手势会更加轻巧一些。如在信息中，双击或长按消息气泡均可呼出点回选项。

触觉反馈

伴随着设备数量的增长，用户的注意力变得越来越稀缺。秉承 Calm Tech 的思想，设计师需要选用合适的反馈形式，来帮助用户将注意力进行有的放矢的合理分配。运用触觉这一边缘感知通道，是一个非常好的降噪思路。

得益于 Taptic Engine 的硬件支持，watchOS 的触觉反馈（Haptics）效果非常理想。虽然目前 watchOS 暂不支持自定义触觉反馈（在 iOS 中可通过 UIFeedbackGenerator 来自定义(fn)），但 watchOS 于系统层级提供了一组触觉反馈模版。我们需要对振动模式有着充分的理解，才能为关键的交互添加触动人心的触觉反馈。

1. 隐喻

触觉反馈与听觉反馈可以进行有机对应，因为从物理学的角度上来看，他们都是由物体振动产生的。所以，在设计触觉反馈时，我们可以借助声音设计的经验来辅助思考。

想象这样一支交响曲，悠扬的长笛声缓缓地奏响（Ascending），拉开了风和日丽的一天。提琴、单簧管也徐徐加入（Flat），正如柳树的嫩芽在春风中飘扬。长笛独奏加快了节拍，曲调变得活泼起来（Steady），原来是草坪里的小兔子探出了脑袋……最后，伴随着音乐的渐弱，美好的一天结束了（Descending）。

在音乐作品中，作曲家通过不同的节拍、旋律、音色，来构建出不同的听感。如：

• Ascending
• Flat
• Descending
• Steady
• Staggered

转译到触觉中，我们也可以通过不同参数的调节，来构建承载不同信息内容的触觉反馈。

2. 参数

Apple 官方给到了如下 2 个设计参数：

• 锐度（Sharpness）
• 烈度（Intensity）

我们对官方的参数进行进一步的解构，并参考作曲家的做法，给到了如下 3 个参数来描述触觉反馈：

• 节奏（Granularity）
• 强弱（Amplitude）
• 质感（Timbre）

其中，质感指的是振动脉冲的锐度。锐度越高，每个振动脉冲就能感知得越清晰。

3. 展望

相信在未来的系统版本中，无法自定义触觉反馈的限制将被逐步解除。现市面上已经出现了诸如 Lofelt 一类面向触觉反馈的专业设计用程序，设计师们可以前往小试牛刀。

跨设备交互

Apple 的产品拥有着得天独厚的生态优势，watchOS 也不例外。类似于 macOS 及 iOS，watchOS 也支持「接力」功能（Handoff）。如：在 watchOS 中使用「邮件」app 回复电子邮件时，可以通过「接力」切换至 iOS 中以使用更大的屏幕进行输入。

同时，「接力」不仅能在 app 间生效，也能在网站和 app 间生效。如在 macOS 中使用 Safari 浏览你的网站的用户在离开 Mac 设备后，Apple Watch 会提示用户是否继续在 watchOS 中使用你的 watchOS app。这给我们的设计带来了更多的可能。

巧妙运用 watchOS 的「接力」能力，我们能构建跨设备交互的无缝体验。

页面布局

市面上的 Apple Watch 有着 4 种不同的屏幕规格：30mm、40mm、42mm 及 44mm。其中，40mm、44mm 是较新设备的屏幕规格，也是设计过程中应重点关注的对象。下面，我们以最大的 44mm 的屏幕规格来进行设计解析。

1. Display Corners

指的是屏幕四角无法展示内容的区域，契合于 Apple Watch 的屏幕物理边界。设计时，需避免在这些部位放置内容。

2. Clear Space Under Status Bar

指起始状态下，界面内元素与位于屏幕顶部 status bar 的间距。另外，在 watchOS 中，status bar 是常驻的。

3. Copy Safe Area

文本的安全展示范围。纵向来看，上距 status bar 5pt 的 clear space，下接 display corners。

4. Fullwidth Element Safe Area

指除文本外其他元素的安全展示范围，横向撑满了整个屏幕，纵向避开了 display corners。这里对应了上文推荐大家使用的「全宽元素」策略。

40mm 的页面布局与 44mm 的类似，只是数值有所不同。对于 38mm、40mm 的页面布局，因没有 display corners 的引入，布局方式非常简单，这里便不展开叙述了。

字体体系

1. 西文环境

在西文环境中，watchOS 默认使用 SF Compact，也可以选用 SF Compact Rounded（SF Compact 的衍生字体）。值得注意的是，SF Compact 这一字体需视文本的大小来选用具体类别：

• 字号小于等于 19pt 时，使用 SF Compact Text
• 其他场景，使用 SF Compact Display

在实际开发过程中，配合使用 Dynamic Type 技术，UI 中的文本可以随用户的设置动态调节：无论是字重、字号、字间距还是行高，均会有一一对应的调整。

2. 中文环境

在中文环境中，watchOS 默认使用苹方字体。西文环境中 SF Compact Text 和 SF Compact Display 使用的细致判定，在中文环境中暂无。

3. 字体适配

Apple 官方在不同的屏幕尺寸下使用了不同的字体阶梯：

• Small（用于 38mm）
• Large（用于 40mm、42mm）
• xLarge（用于 44mm）

不过，我们推荐在实际设计过程中选用一个字体阶梯即可。

为论证仅使用一个字体阶梯的合理性，我们需要引入「弧分」的概念。弧分是一种用来描述相对尺寸的单位，而弧分值指的是观测者眼睛与被观测物的夹角。由于使用了角度来计数，在定义字体尺寸时就可以忽略物体的距离。但无论用户使用哪种屏幕大小的 watchOS 设备，其舒适的抬臂姿势是相对固定的，即用户眼睛距离 watchOS 设备的距离是相对固定的。因此，只有相同尺寸的大小的字体才能保证相同的弧分。

选用一个字体阶梯的另一个好处体现在多屏幕尺寸适配中。若严格遵循 Apple 官方的处理方法，设计师需要输出 4 套视觉标注才能完成设计；若使用一个字体阶梯，我们仅需在设计中标注好自适应规则即可。倘若未来出现了更多的屏幕尺寸，我们的方法会显得更加自如。

4. 推导方法

为了不重复造轮子，我们推荐使用你已有的 iOS app 设计中的字体体系为基础，来推导出 watchOS app 的字体体系。具体过程如下：

• 整理好你的 iOS app 中的字体系统；
• 剔除 Callout、Subhead 这类在 watchOS 中不需要的字体样式(Style)；
• 适当地增加除 Headline、Body 以外字体样式的字号(Size)；
• 适当地减少所有字体样式的行高(Leading)；
• 依据所使用的字体调整字距(Tracking)。

我们按照上述方法，推导出了微信 Apple Watch 版的字体体系：

色彩体系

目前，iOS 及 macOS 共用一套色彩体系。watchOS 及 tvOS 因使用场景、硬件性质及美学理念的差异，其色彩体系需要进行差异化推导。

watchOS 色彩体系分为以下 2 个部分：

1. Global Tint Colors

基本等同于 iOS 中浅色模式（Light Mode）的颜色。在实际设计过程中可以直接迁移。

2. Additional Colors

它是 Global Tint Colors 的延伸，一般用于可交互元素的底版，如「体能训练」中的按钮。通过为 Global Tint Colors 添加不透明度即可生成一套相对应的 Additional Colors。不透明度数值的范围推荐在 14%～17% 之间，并遵循「亮度（Brightness）越高，不透明度越低」的原则。

3. Semantic Colors

语义化颜色指的是根据用途来描述颜色，而不是直接描述色值。虽然在 watchOS 中没有深浅色模式的区分，但色彩的语义化仍能帮助我们科学而谨慎地用色。

为了方便在设计过程中使用语义化颜色，我们推荐在 Sketch 中使用颜色变量（Color Variable）进行底层色彩体系构建。如下图所示，是微信 Apple Watch 版中非常常用的三个颜色变量：

UI 组件

watchOS 中的 UI 元素与 iOS 差别不大，设计师在拿到 UI Kit 后应该都能快速上手。这里仅提出 4 个比较特殊的组件进行简述。

1. Lists and Tables

Lists 和 Tables 都是纵向排列以展示内容的元素。简单来说，Lists 能承载更多的样式及交互行为，如：

• Carousel Style（类似于古早 iOS 中的 Cover Flow）
• 滑动交互（Swipe）
• 整理（Reorder）

2. 按钮

在 watchOS 中，常见的按钮样式有：

• 标准圆角矩形按钮
• 全圆角按钮

如何判定该使用哪种样式呢？这取决于按钮所在页面是否需要滚动才能展现所有内容：

• 若页面需滚动（Scrolling Views），使用标准圆角矩形按钮
• 若页面无需滚动（Nonscrolling Views），则使用全圆角按钮

以上判定方式的原理是，只有通过标准圆角矩形按钮，才会在屏幕中呈现出「按钮的一部分被盖住」的视觉效果，进而暗示用户下面还有内容。这一判定实为巧妙，但在实际开发实现的过程中却很难做判定。因此，我们推荐默认使用标准圆角矩形按钮。

通知

在 watchOS 中，通知被分为 3 类：

1. Short Look

Short Look 指的是收到通知的那一刻立即弹出的模态页面，其的持续时间很短，是为「轻轻一瞥」的行为设计的。所以，我们要保证 Short Look 中的内容足够简短。

同时，在配有常亮显示的机型中，Short Look 会在尚未解锁的情况下展示。因此，我们应避免在 Short Look 中展示敏感信息。

2. Long Look

可以将 Long Look 理解为 Short Look 的详情。它由以下部分组成：

• App Icon and Name
• Sash
• 内容区
• Action Buttons
• Dismiss Buttons

其中，内容区不仅仅可用于展示信息，我们还可以在内容区放置一些简单的交互元素，如在座位预订 watchOS app 推送的内容区中，就可以放置选择就餐人数的 Sequence Picker。

3. 应用内通知

这部分留给我们的发挥空间较大，恕不展开阐述。

结语

无论你是否会真正地开展面向 watchOS 的设计，了解 watchOS 中的设计方法及其背后的推导过程都是非常有价值的。可以看到，无论是设计原则，还是字体、色彩体系的推导，都始终贯穿着普适的设计思维。我们相信你能从中获得一些启发。同时，微信 Apple Watch 版已于近期更新，欢迎大家下载体验。

欢迎关注作者微信公众号：「We-Design」