微信官方出品！ 超详细的 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」