What's new in watchOS design

Highlight

watchOS 7 把原本藏在手势式 contextual menu 里的次级操作移到可见界面中，并提供了 Picker、onDelete、More 按钮、底部操作、toolbar button 和层级导航等模式来保留功能。

---

核心内容

手表上的 App 容易被做得太重。屏幕小，用户抬腕时间短，长按、深按、隐藏菜单这类交互很容易被错过。10171 这场 session 先给出三个约束：Watch app 要轻量；功能要在当下可操作；关键操作要能被用户看见。（00:37）

watchOS 7 的变化，是把这些约束落实到系统 App。Apple 对整个 watchOS 和原生 App 里的 gesture-based contextual menu 做了一次审计，把原来藏在手势里的操作移回 App 界面。目标是在保留功能的同时，让操作更直观、更稳定、更容易被所有用户发现。（01:33）

这场演讲讨论的多是次级操作。用户打开 Messages 可能只是读消息，但仍然需要一个新建消息入口；用户打开地图主要是看当前位置，但仍然需要搜索当前区域或切换交通视图；用户看日历详情时，可能需要给邀请人发邮件或删除事件。设计的任务，是把这些操作放在合适的位置，同时不抢走当前界面的主任务。（02:38）

Apple 给出的模式很具体：长列表顶部用 sort、filter 或 view switcher；列表项用 swipe action 暴露删除；不滚动的全屏内容用 More 按钮；详情页底部放与当前内容绑定的操作；滚动列表里用 toolbar button 放必要但非主路径的入口；需要长期记住目的地时，才引入层级导航。（03:25）

---

详细内容

先把操作分成主任务和次级任务

（02:14）watchOS 7 的设计目标有三条：交互要可发现并且可预测；相关操作要在 App 中可见；移除 gesture-based contextual menu 时不能移除功能。这里的关键，是先判断一个操作是不是用户打开这个界面的主因。

例如 Messages 的主任务通常是读新消息，Compose 是重要功能，但不是这个列表的主要阅读路径。Calendar event 的主要内容是事件信息，底部的邮件发送或删除按钮才是和当前详情绑定的次级操作。这个分类会直接决定控件位置。

关键点：

• 主任务应该出现在界面最直接的位置，让用户抬腕后立刻完成。
• 次级任务不能被藏到不可见手势里，尤其是会影响无障碍和可发现性的入口。
• 放进 More menu 的只能是与当前内容相关的次级操作，不能把主操作塞进去。
• 如果操作需要用户频繁切换目的地，层级导航比一个按钮更合适。

长列表顶部用 Picker 做排序、筛选和视图切换

（04:08）Activity Sharing 和 Stocks 的例子都处理同一个问题：列表太长，当前排序或展示维度未必符合用户当下需求。watchOS 7 在列表顶部放一个入口，让用户进入 modal view 后一键切换排序或视图。

List {
    Picker(selection: $viewing
           title: Text("Viewing")) {
       // Viewing options
    }
    // Stocks
}

关键点：

• List 是外层容器，说明这个模式服务于可滚动列表。
• Picker(selection:title:) 放在列表顶部，用来承载排序、筛选或 view switcher。
• selection: $viewing 让用户选择直接绑定到当前展示维度。
• title: Text("Viewing") 给入口明确语义，用户知道自己正在切换“看什么”。
• 这段代码对应 Stocks 示例：用户可以在百分比和点数等数据视图之间切换。

列表项删除用 onDelete 暴露 swipe action

（05:48）World Clock 展示了适合列表行的次级操作：用户左滑某个城市，直接看到删除提示。这个操作和当前行绑定，视觉反馈清楚，删除后也能通过列表底部的 Add City 加回来。

List {
    ForEach(model.locations) {
        ClockCell(location: $0)
    }
    .onDelete { deleteClock(index: $0) }
}

关键点：

• ForEach(model.locations) 负责生成每个城市行。
• ClockCell(location: $0) 保持列表主内容简洁，行本身仍然先展示城市信息。
• .onDelete 挂在 ForEach 上，表示删除行为属于这一组列表项。
• deleteClock(index: $0) 用系统传入的位置删除对应城市。
• 演讲明确说这个 swipe action API 叫 onDelete modifier，并且当时已在 SwiftUI 中可用。

不滚动的全屏内容用 More 按钮承载上下文操作

（06:36）Maps 的地图视图本身就是主要操作区域，用户要平移地图或回到当前位置。这样的界面不适合在顶部塞很多控件。watchOS 7 的做法是在右下角放一个 More button，点开后展示搜索当前区域、切换交通和标准视图等操作。

Camera Remote 也是同一个模式。用户的主任务是遥控 iPhone 拍照；More button 里放 flash、Live Photo 和其他相机设置。演讲把它描述为 sheet API，可以展示简单动作，也可以展示较复杂的选项列表。（07:46）

关键点：

• More button 适合 glanceable full-screen view，尤其是没有足够空间展示所有操作的界面。
• 按钮可以用圆形容器加居中的 SF Symbol ellipsis 构成。
• Apple 建议参考 Human Interface Guidelines 中不同 Watch 尺寸的 hit region，必要时给按钮加透明 padding。
• 深浅背景都可能出现时，演讲示例使用 85% 不透明白色圆形容器和 50% 不透明的 1pt 黑色外发光来保证可读性。
• More menu 只放与当前可见内容相关的次级操作。

详情页底部按钮要和上方内容绑定

（11:10）Calendar 的 detail view 用底部按钮处理和当前事件有关的操作：收到邀请的事件底部可以给发起人发邮件，自己创建的事件底部可以删除。按钮位置靠后，但仍然是可见控件，用户滚到底部时自然遇到它。

关键点：

• 底部操作适合 detail view，因为用户先看内容，再决定要不要操作。
• 不可操作的信息直接放在黑色背景上；只有可点击操作放进容器，避免误导。
• 破坏性操作使用红色文字。
• 如果删除的内容不容易找回，要加 confirmation alert。

滚动列表里的必要入口用 toolbar button

（12:22）toolbar button 是 watchOS 7 为 Messages 和 Mail 的 Compose 按钮设计的新 API。按钮暂时藏在 navigation bar 下方，用户需要新建消息时可以通过滚动发现，不需要时又能收起来。

.toolbar {
    Button(action: newMessage) {
        Label("New Message",
              systemImage: "square.and.pencil")
    }
}

关键点：

• .toolbar 把按钮放到 SwiftUI 的 toolbar 区域。
• Button(action: newMessage) 明确绑定新建消息动作。
• Label("New Message", systemImage: "square.and.pencil") 同时提供文字和系统图标。
• 演讲强调 toolbar button 只应该用于 scrolling view，因为滚动本身让按钮可发现。
• 它适合必要但不一定是当前视图主任务的操作，不能滥用。

需要长期记住目的地时才用层级导航

（13:39）Mail 和 Home 解决的是另一个问题：用户需要在一组目的地之间切换，而这类选择会长期影响 App 打开后的入口。Mail 打开时可以直接进入 All Inboxes；点返回后，用户能切到 Apple 邮箱或个人邮箱。Home 打开时直接进入当前房屋的设备列表；点返回后，能切换到另一个房屋或工作室。

关键点：

• 层级导航适合“目的地”选择，不适合一次性的筛选。
• App 可以打开时落在上次选择的目的地，让用户少走一步。
• navigation bar title 必须显示当前目的地。
• back button 要可靠地回到同一组目的地列表。
• 如果交互不需要这种持久性，演讲建议不要使用这个模型。

---

核心启发

• 做一个 Apple Watch 股票或健身数据视图切换器：做什么：在长列表顶部提供“按百分比、点数、运动量”等视图切换。为什么值得做：session 明确把 sort、filter 和 view switcher 放在长列表顶部，减少用户在小屏幕上找信息的时间。怎么开始：在 SwiftUI List 顶部嵌入 Picker(selection:title:)，把选择绑定到列表排序或展示字段。

• 给可删除的 watchOS 列表补上 swipe action：做什么：让世界时钟、收藏地点、待办项目这类列表支持左滑删除。为什么值得做：World Clock 的例子说明删除是典型行级次级操作，用户能看见清楚提示，误删后也能通过添加入口恢复。怎么开始：用 ForEach 渲染数据行，在同一组列表项上添加 .onDelete，删除函数只处理传入索引。

• 为全屏内容页设计一个 More 按钮：做什么：在地图、相机遥控、图片预览这类不滚动界面右下角放上下文操作入口。为什么值得做：这些界面的主内容占满屏幕，More button 可以承载搜索当前区域、切换视图、调整设置等次级操作。怎么开始：使用圆形容器加 SF Symbol ellipsis，按 HIG 校准触控区域，再用 sheet 展示简单动作或选项列表。

• 把“新建”类入口放进滚动列表的 toolbar：做什么：在消息、邮件、笔记列表里提供新建按钮，但不让它压过阅读任务。为什么值得做：session 解释了 toolbar button 的设计动机：用户多数时候是读内容，少数时候需要新建入口。怎么开始：在 SwiftUI 滚动视图上使用 .toolbar，放入带文字和 SF Symbol 的 Button。

• 把固定目的地切换改成层级导航：做什么：让多邮箱、多家庭、多工作区的 Watch app 打开时进入常用目的地，同时保留返回切换入口。为什么值得做：Mail 和 Home 的例子表明，持久目的地不适合用一次性 filter 表达。怎么开始：记录用户上次选择的目的地，打开 App 时进入对应列表，用 navigation title 显示当前位置，并让 back button 返回目的地列表。

---

关联 Session

• Design with iOS pickers, menus and actions — iOS 14 中 picker、menu 和 action 的设计取舍，适合对照 watchOS 的次级操作设计。
• Build with iOS pickers, menus and actions — 演示 UIKit 中 menu、picker、UIAction 等控件的实现方式。
• What’s new in SwiftUI — 介绍 SwiftUI 2020 年的新控件、toolbar、列表和跨平台能力。
• Create complications for Apple Watch — 讲解 Apple Watch complication 的信息呈现和时间线实现。
• Create quick interactions with Shortcuts on watchOS — 说明如何把 app 的 intents 和 Shortcuts 带到 Apple Watch，并理解 intent routing 与展示接口。