万字干货！9大章节总结 Apple watchOS App 设计要点

从附属设备到关键设备，从基于硬件素质的功能到依托机器学习的服务，可穿戴设备愈发深入人心。Apple Watch 搭载的 watchOS 是可穿戴设备操作系统中的翘楚。相较于 iOS、Android，watchOS 对于大多数设计师来说都是一个相对陌生的领域。

推荐阅读

自 2021 年以来，watchOS 的设计及用户对其的期望已发生了较大的转变。由此，我们将通过这篇文章，向读者介绍更为现代的 watchOS app 设计要点。

一、设计原则

watchOS 有 3 项设计原则：

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

1. 交互轻量

① 专注且高度专业化

watchOS app 应以特定的目的和功能为中心，而不是试图提供多种复杂的功能。

在 iOS 中作为一个整体的应用，可以在 watchOS 中被拆解为小块的微应用。

例如，iOS 中的「Music」，在 watchOS 中被拆解为「Music」「Now Playing」2 个 app，其对应着浏览音乐库、控制音频播放这 2 个微任务。

② 易读且易操作

watchOS app 应为易读性（glanceability）和快速交互进行优化。

由于 Apple Watch 的屏幕尺寸较小，只有保证易读性优良，才能使得用户能够在非常短的时间内迅速捕捉到屏幕上的关键信息。此外，鉴于抬腕使用设备的姿势不便于长时间保持，Apple Watch 用户往往只会花几秒钟的时间来使用设备，这就对交互的便利性提出了更高的要求。

例如，在「Workout」中，不仅应用中的操作按钮和文本足够大，图文结合的形式还让信息一目了然。仅需一瞥，心中就有数了。

2. 软硬件一体

下面举 3 个例子：

①显示屏与背景色

Apple Watch 的屏幕在展示纯黑（#000000）时不会发光。若在设计中使用纯黑的背景，背景就会与 bezel 融为一体、UI 元素直接「镶嵌」于表盘，可谓浑然天成。不仅如此，不发光的黑色还能带来省电的好处。

虽然从 watchOS 10 版本开始，watchOS 开始拥抱彩色背景，但纯黑的背景，仍是 watchOS app 的首选。

② 显示屏与全天候显示

为了能在用户放下手腕时也能看到表盘上的信息，Apple Watch 利用屏幕的低亮度、极低的刷新率实现了全天候显示（Always On），以保证屏幕能始终显示内容。

设计师可以充分利用全天候显示这一能力，为用户提供更便捷的、无需抬腕的信息获取方式。

③ 机身倒角与 UI 圆角

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

因此，在 UI 中使用与物理环境相匹配的圆角样式，可使软硬件更加契合。watchOS 中的圆角使用可以比 iOS 中更大胆。如在 iOS 中，按钮的常规圆角值为 8 pt，watchOS 中则直接使用全圆角。同时，app icon 也是正圆的。

3. 面向个人

Apple Watch 始终伴随着用户。鉴于此，Apple 在硬件层面提供了丰富的个性化选项，包括外壳材料、表带等。在软件层面，颇具个性化的表盘则是我们可以发挥的空间。

此外，我们需要为用户的隐私做足够缜密的考量。当用户抓着地铁扶手或伏案工作时，屏幕上常亮显示的信息可能会被旁人看到。因此，我们要为 Always On 状态下页面中的信息进行脱敏处理。

同时，作为随时贴身的设备，减少对用户无谓的打扰也是我们需要注意的基本要求。

总的来看，watchOS 的设计原则可简要总结为：在物理性质上，强调「软硬件一体」；在人机交互上，规避信息过载、注重信息安全；在情感表达中，需满足用户的个性化诉求。

二、手势

1. 常规手势

watchOS 支持以下手势：

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

其中，双击手势是 watchOS 10 新引入的手势，是一种无需触摸屏幕即可完成交互的创新手势。

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

此外，较早版本的 watchOS 还支持 Force Touch（基本等同于「3D Touch」）。在早于 watchOS 7 的 watchOS 中，用户可以用力按下显示屏来触发相应操作。但出于学习成本、硬件限制等原因，watchOS 不再支持 Force Touch。取而代之的是长按手势。

不过，不建议使用长按手势来显示菜单，而是应该将菜单直接放在页面中，以确保用户能够轻松地找到。

2. 边缘滑动

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

3. 实体按钮

① 数码表冠（Digital Crown）

数码表冠是非常适合在手腕上与智能设备交互的实体。它提供了一种不用手指遮挡显示屏就能进行交互的方法。通过旋转数码表冠，用户可以实现页面、picker 的滚动，滚动速率收放自如。

除了滚动页面，数码表冠还可以用来来实现其他交互。例如：

1. 在「Now Playing」中，用来调整音量。
2. 在「Maps」中，用来缩放地图。
3. 在「Timers」中，用来调整时长。

从 watchOS 10 开始，数码表冠开始成为导航的主要交互方式。例如：

1. 在表盘上，旋转数码表冠可查看 Smart Stack 中的小组件。
2. 在应用内，旋转数码表冠可在垂直分页的 tab 间切换（详情请见本文后续的介绍）。

② Side Button

目前，side button 相关的交互属于系统级，不可自定义：

1. 单击打开 Control Center；
2. 双击打开「Wallet」；
3. 长按调出关机等选项。

③操作按钮（Action Button）

操作按钮是 Ultra 系列特有的实体按键。用户可以使用操作按钮来运行系统提供的功能或 shortcuts。

因此，若应用能提供 shortcuts，用户便可通过操作按钮直接与应用交互。这是一个非常巧妙的增加用户触点的契机。

此外，Apple 还将操作按钮引入了 iPhone 15 Pro 系列机型。可见，操作按钮是未来软硬件结合的要素。

三、视觉设计

1. App Icon

watchOS app icon 呈圆形。Apple Watch 的屏幕尺寸相对较小，因此在设计图标时需要确保图标元素在较小尺寸下仍然清晰可辨。

为了确保图标不会与显示背景融合在一起，建议避免使用纯黑色作为图标的背景。若仍需要使用纯黑色，则可以尝试添加描边。

如果 watchOS app 有一个伴随的 iPhone app，应确保两者的图标在风格和视觉元素上保持一致，以便用户能够轻松地识别出它们之间的关联。

2. Color

受益于 Apple Watch 愈发优秀的续航表现（特别对于 Ultra 系列机型）及屏幕占比，纯黑的背景色已不再是唯一的选择。使用充满全屏的背景色（full screen background color）成了 watchOS 新的用色趋势。

充满全屏的背景色不仅仅是视觉装饰（visual flourish），其还具备额外的实用性（additional utility）：

帮助用户导航和识别应用

如在「Activity」中，「Move」「Exercise」「Stand」等页面均有与其相匹配的背景色。

设定基调（Tone）

如在「Sleep」中，蓝色背景构建了宁静的氛围。

传达信息

如在「Clock」中，背景色表达了此刻的时间。

表示状态变化

如「Timers」中，倒计时时背景为黑色，而计时结束时，明亮的橙色背景表明计时已完成。

值得注意的是，我们仍需避免在可能长时间在屏幕上显示的页面中使用充满全屏的背景色，以避免不必要的电量损耗。

3. Material

在 watchOS 中运用 material，可以在确保内容的可读性的前提下，于具备不同功能的层之间建立层次结构，进而帮助用户了解他们在系统或应用内的位置。

Material 由以下 2 个要素构成：

1. Translucency
2. Vibrancy

① Translucency

watchOS 提供 4 种模糊级别（blur level）供设计师选用：

1. Ultra Thin
2. Thin
3. Regular
4. Thick

② Vibrancy

为确保可读性，watchOS 提供了 4 种用于前景元素的 vibrant fill materials 供设计师选用：

1. Primary
2. Secondary
3. Tertiary
4. Quaternary

例如，在内容滚动到使用了 material 的状态栏下方时，使用了 vibrant fill materials 的文本仍清晰可读。

4. Layout

为确保在不同尺寸的 Apple Watch 上的一致性、易读性，watchOS 采用基于显示屏形状的布局体系，并以此来定义 UI 元素的尺寸、位置。

watchOS 提供 3 种基本布局：

1. Dial
2. Infographic
3. List

① Dial

Dial 布局非常适合在一瞥间获取大量信息。Dial 布局的主要特点是，它充分利用了充满全屏的背景色、图像来传达信息。例如，在「Weather」中，全屏的天空背景表明了当前的天气状况。

此外，此布局还允许在不遮挡内容的情况下添加多达 4 个不同的 corner control，以显示额外的信息或提供便于快速访问的功能。

② Infographic

Infographic 布局非常适合由文本、数据构成的数据可视化内容。

Infographic 布局的主要特点是，它能够清晰地展示数据间的关系、趋势，帮助用户更好地理解、分析数据。例如，在「Stock」中，折线图能清晰地展示股票价格的变化。

③ List

List 布局是最为传统的布局，主要适用于需要展示多个项目的场景，便于用户浏览并找到所需的信息。

List 布局的主要特点是，它通常包含一系列垂直排列的项目，用户可以通过滚动浏览这些项目。这些项目可以是文本、图像或其他自定义视图。例如，在「Calendar」中，list 布局能清晰地展示日程。

此外，此布局通常还支持点击、横向滑动删除等操作。这使得用户可以方便地与列表中的项目进行互动。

为了提高此布局的可读性和易用性，可以考虑使用分隔线、分组标题等元素来区分不同的项目和内容。同时，也可以为列表项目添加缩进、填充或间距，以提高布局的清晰度、美观性。

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

四、导航模式

watchOS 有以下 3 种导航模式：

1. NavigationSplitView
2. TabView
3. NavigationStack

1. NavigationSplitView

watchOS 中的 NavigationSplitView 是 watchOS 10 新引入的视图，其概念借鉴了类似于 iPadOS 上的双列布局（two column layout）。

在 watchOS 中，双列布局中较上级的栏会转译为 source list，较下级的栏则转译为 detail view。

当用户启动应用程序时，应将他们直接引导至 detail view。这样可以让用户立即看到重要信息，提高应用程序的可用性。

若有多个 detail view，则可根据定位、历史等指标来决定默认显示哪个 detail view，以确保用户在打开应用程序时能立即看到与他们需求相关的内容。例如，在「Weather」中，用户会直接来到当前所在地的天气详情页。

此外，source list 也非常适合展示具有比较性的数据。例如：

1. 在「Stock」中，source list 可以显示各支股票的涨跌幅度。
2. 在「Weather」中，source list 可以显示不同城市的天气状况。

2. TabView

watchOS 中的 TabView 也是 watchOS 10 新引入的视图。

与 iOS、iPadOS、macOS 不同，watchOS 中的 TabView 采用的是垂直分页，而不是水平分页。因为，受益于数码表冠，在 Apple Watch 中，垂直方向的滚动会显得更为轻松。

watchOS 中的 TabView 具有以下特征：

① 滚动切换视图

TabView 允许用户在不同的视图之间通过滚动 digital crown 切换。

② Tab 自适应

TabView 会自动检测任何滚动内容，并根据实际需要来扩展以容纳内容。这意味着，TabView 可以自适应地显示不同大小的内容。

因此，我们在设计时，应尽可能限制每个 tab 中的内容体量，并将内容体量较大的 tab 放在最后，以确保用户能够轻松地切换 tab。

③ 模糊过渡效果

TabView 自带在切换不同 tab 时呈现的模糊过渡效果，以实现视图之间的无缝融合。除模糊过渡效果外，我们甚至还能实现 Keynote 中的神奇移动效果。

3. NavigationStack

watchOS 10 新引入的 NavigationSplitView 和 TabView 的确功能强大，但它们并不一定适合于每个场景。最为传统的 NavigationStack 仍然是引导用户进入和退出视图层次结构的最清晰方式。

NavigationStack 以层级视图的形式组织内容。当用户进入一个新的视图时，这个视图会被压入堆栈；当用户返回上一级视图时，当前视图会从堆栈中弹出。这种导航方式非常清晰，可以帮助用户轻松地在不同层级的视图之间导航。

在使用 NavigationStack 时，可在第一个视图上使用大标题，以突出显示应用的主题。

五、触觉反馈

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

得益于 Taptic Engine 的硬件支持，watchOS 的触觉反馈（Haptics）效果非常理想。例如，在旋转数码表冠时，用户能感受到一种类似于实体旋钮的触觉反馈，从而更好地控制滚动操作。

触觉反馈可以提高用户体验的沉浸感，并帮助用户在没有视觉提示的情况下理解他们的操作。我们需要对振动模式有着充分的理解，才能为关键的交互添加触动人心的触觉反馈。

1. 原理

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

在音乐作品中，作曲家通过不同的节拍、旋律、音色，来构建出不同的听感。转译到触觉中，我们也可以通过调节各种参数，来构建承载不同信息内容的触觉反馈。

2. 预设类型

watchOS 提供了一组预设的 haptic，每种类型都具有特定的含义。我们可以根据应用的需求和场景选择合适的类型，以传达给用户相应的信息和反馈。

watchOS 提供了以下 9 种预设类型：

1. Notification
2. Up
3. Down
4. Success
5. Failure
6. Retry
7. Start
8. Stop
9. Click
10. Play

3. 自定义

除了使用 watchOS 提供的预设类型，我们还可以在 Core Haptics 框架中用以下 2 个参数来构建自定义 haptic：

1. Sharpness
2. Intensity

其中，sharpness 指的是将触觉体验抽象为产生相应物理感觉的波形的一种方法。可以使用 sharpness 来传达柔和、圆润的体验，或者传达清晰、精确的体验。

通过 Core Haptics 框架，我们可以设计复杂的触觉模式，包括振动强度、持续时间等。了解 Core Haptics 可以帮助设计师更好地设计触觉反馈。

六、通知

充分运用 watchOS 中的通知（notifications），可以传递及时、高价值的信息，并让用户在不打开应用的情况下执行重要操作。

在 watchOS 中，通知分为 2 个阶段：

1. Short Look

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

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

2. Long Look

可以将 Long Look 理解为 Short Look 的详情。

我们可以自定义 Long Looks 的颜色、内容、自定义操作（至多 4 个），让用户在不启动应用的情况下完成交互。

此外，在较新版本的 Apple Watch 上，用户可以使用 Double Tap 来回应通知。当用户对通知使用 Double Tap 时，系统会选择第一个非破坏性操作作为回应。

值得一提的是，默认情况下，用户在 iOS 中为应用设置的通知设置也将默认应用于 watchOS 中的相同应用。这意味着用户无需为 watchOS 中的应用单独设置通知，它们会自动遵循 iOS 中的设置。

七、表盘

表盘（Watch Face）是 watchOS 体验的核心。用户会选择他们希望每次抬起手腕时看到的表盘。此外，用户也可以使用他们喜欢的 complication 来自定义表盘。

Complication（复杂功能）是表盘上显示的小工具，它们可以显示实时信息，如天气、活动、健康数据等，用户每次抬起手腕时都可以查看，而无需打开应用。

设计 complication 有以下 4 个要点：

① 突出价值

Complication 不应仅用于快速启动应用程序，它的主要价值在于显示最新的相关信息。

② 支持不同的 Complication 类型

watchOS 中的 complication 分为不同的类型（family），如 circular、corner 等。我们尽可能支持所有类型，以确保应用的 complication 可以在更多表盘上使用。

③ 设计简洁明了的外观

Complication 的空间有限，因此设计时要确保信息简洁明了。使用易于阅读的字体和颜色，避免使用复杂的背景或图案。同时，确保与应用的整体设计风格保持一致。

④ 确保在 Tinted Mode 下清晰可见

在 tinted mode 下，watchOS 会为 complication 的所有内容应用纯色，并对全彩图像进行去饱和处理。因此，我们应避免仅使用颜色来传达重要信息，并在必要时，为全彩图像提供替代的着色模式版本。

⑤ 注重隐私

Complication 上的信息可能会被其他人看到。因此，我们需要考虑隐私和安全性，避免在 complication 上显示敏感信息，如个人健康数据、私人消息等。

八、Smart Stack

很多用户更倾向于选择没有 complication 的或简约或富有装饰性的表盘。因为，对于这些用户来说，Apple Watch 不仅仅是显示信息的工具，更是个性化表达的载体。

由此，watchOS 10 引入了全新的 Smart Stack。Smart Stack 是一种动态地将应用内容直接显示在表盘上的模块。仅需简单地转动数码表冠，就可以在 Smart Stack 中查看各种小组件（widget）了。

对于 Smart Stack 中的小组件，我们需关注以下设计要点。

1. 布局

设计 Widget 时，只展示必要的信息以确保用户能快速查看。因为，人们在查看手表上的信息时，通常只会花费大约 10 秒钟的时间。

watchOS 提供了以下 6 种设计布局：

① Text

适用于主要展示文本信息的内容。例如，「News」使用此布局展示标题和故事摘要。

② Text + Bar

适用于需清晰传达内容属于某个类别的场景。例如，「Calendar」使用此布局显示事件，并通过颜色清晰传达了此事件所属的日历。

③ Text + Graphic

适用于文本、图形并存的内容。图形可选用条形和环形。例如，「Audiobooks」使用条形让用户快速了解他们在书中的位置，「Workout」通过环形展示锻炼数据。

④ Large Text

适用于内容主要是简短的数字或单词的内容。

⑤ Chart

适用于主要表示随时间变化的数据。

总之，设计 watchOS 中的小组件时，应遵循这些布局原则和建议，以确保用户能够快速查看到关键信息，同时享受流畅的阅读体验。

2. 颜色和图标

虽然小组件的布局有助于保持一致性和可读性，但让小组件具有识别性和独特性也很重要。这就涉及到颜色和图标的选择。

与表盘上根据表盘颜色调整的 complication 不同，Smart Stack 中的小组件无需遵循表盘样式。这意味着，我们在使小组件更具识别性和与应用风格相符方面有更多的灵活性。

默认情况下，每个小组件都有一个深色背景，上面会展示白色的文本。但我们也可以选择更具代表性的背景颜色，以帮助识别应用或传达信息。例如：

1. 「Weather」的小组件通过渐变表示不断变化的气候情况。
2. 「Stock」的小组件在股票价格下跌时使用红色背景，而在股票价格上涨时使用绿色背景。
3. 「Audiobooks」的小组件通过显示略微失焦的书籍封面来营造氛围。

除了彩色背景外，选择能代表应用功能的图标也有助于突显小组件的特点及传递信息。

3. Sessions

Smart Stack 的一个关键功能是系统自动生成小组件。这些特殊的小组件会在适时自动出现在 Smart Stack 顶部。例如，当用户开始播放音乐时，系统会生成一个控制音频播放的小组件。

此外，Smart Stack 还会智能地对其中的小组件进行排序，使最相关的小组件显示在顶部。

若需让小组件优先显示在 Smart Stack 中，可以考虑以下关键时刻：

① 时间和日期

例如，「Calendar」利用时间和日期特性，当一个事件在接下来的一小时内发生时，其会在 Smart Stack 顶部显示。

② 位置

例如，「Reminders」使用位置信息确定小组件在何地适时出现。

③ 耳机

例如，「Audiobooks」在耳机连接时响应，以确定何时将其小部件优先显示在 Smart Stack 顶部。这样，只需带上 AirPods 并旋转数字表冠，即可开始听书。

④ 锻炼

例如，「Activity」在用户锻炼完成时优先显示在 Smart Stack 中。这样，在跑步结束后，用户旋转数码表冠即可查看运动数据。

总之，在设计 watchOS 小组件时，应考虑这些关键时刻以便在合适的情况下优先显示相关小组件。

九、跨设备交互

Apple 的产品拥有着得天独厚的生态优势，watchOS 也不例外。watchOS 系统层级的跨设备交互主要是指 Apple Watch 与其他 Apple 设备（如 iPhone、iPad、Mac）之间的协同工作和数据同步。这种交互可以为用户提供更加流畅的体验，让他们能够在不同设备之间无缝切换。例如：

① Handoff

Handoff 功能允许用户在 Apple Watch 和 iPhone 之间无缝切换正在进行的任务。例如，用户可以在 Apple Watch 上开始回复信息，然后在 iPhone 上继续完成回复。

② Continuity

Continuity 功能确保用户在 Apple 设备之间保持连接。例如，用户可以在 Apple Watch 上接听 iPhone 上的电话，或者用 Apple Watch 解锁 Mac。

③ 配对与设置

通过与 iPhone 配对，用户可以轻松地在 Apple Watch 上设置和管理应用。例如，用户可以在 iPhone 的 Apple Watch 应用中自定义表盘样式和 complications。

在设计 watchOS 应用时，合理利用 watchOS 系统层级的跨设备交互，能让用户在 Apple Watch 和其他 Apple 设备之间无缝切换，从而提供更加一致和高效的使用体验。

结语

无论你是否会真正地开展面向 watchOS 的设计，了解 watchOS 中的设计原理和理念都将受益良多。希望你能从本文获得一些启发，并与我们一起继续探索用户的腕上体验设计。

参考文献：

1. Human Interface Guidelines
   https://developer.apple.com/design/human-interface-guidelines/
2. Documentation / watchOS apps：https://developer.apple.com/documentation/watchos-apps

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