Highlight
watchOS 10 重设计了 Apple Watch 界面，以 SwiftUI 为核心，引入 NavigationSplitView 和 TabView 垂直翻页两种新导航范式，配合全屏背景材质、vibrant 填充和文字标签，让应用在最小的屏幕上呈现最聚焦的信息。
核心内容
十秒钟原则
Apple Watch 用户抬起手腕，只会给你十秒钟。Weather 应用打开直接显示本地当天天气，转一下 Digital Crown 看未来几小时，再转看未来几天。News 在 iPhone 上是多标签、多层级的丰富内容，在手表上只展示五条头条，点击后内联展开。
这个设计思路叫 “Apple Watch Moment”：用户抬腕那一刻，什么信息最相关？Heart Rate 先显示当前心率数值，再用全屏动画展示趋势。Activity 把复杂数据拆成单个聚焦视图。设计手表应用时，先问自己：如果只有十秒，我会展示什么？
Digital Crown 优先的导航
2014 年 Apple Watch 发布时，Digital Crown 被定义为不遮挡屏幕的精确输入设备。watchOS 10 把这个理念推到极致：滚动、分页、精确调整都锚定到表冠，触摸作为备份。
Smart Stack 是这个理念的体现。转一下 Digital Crown，智能排序的小组件依次出现。设计应用时，先想好哪个信息最适合做 Smart Stack 小组件，再围绕这些”当下相关”的体验构建应用架构。
三种导航范式
NavigationSplitView 把源列表藏在详情视图下方，一键可达。Weather 直接进入当天天气详情，点击列表图标切换城市。源列表不需要标题、关闭按钮或导航控件，用更短的导航栏展示更多对比数据。
TabView 新增垂直翻页样式，单个 tab 可以展开容纳滚动内容。Activity 的三个运动环各是一个 tab，滚动到最后是运动历史列表。Tab 切换时支持 matchedGeometryEffect 动画，Activity 环从 TabView 缩放到左上角。
NavigationStack 保留用于深层层级，如 Workout、Calendar、Music。推送动画更新为选中项高亮并移动，更清晰地表达导航关系。
详细内容
NavigationSplitView 实现
（05:56）
NavigationSplitView {
List(cities, selection: $selectedCity) { city in
Text(city.name)
}
} detail: {
WeatherDetailView(city: selectedCity)
}关键点：
- API 与其他平台一致，但 watchOS 上源列表藏在详情视图下方
selectedCity必须初始化一个默认值，应用启动直接进入详情视图- 详情视图不需要标题，信息本身要一目了然
- 源列表不需要关闭按钮，点击列表图标或滑动即可切换
TabView 垂直翻页与展开
（07:53）
TabView {
MoveRingView()
ExerciseRingView()
StandRingView()
RecentWorkoutsList() // 自动检测滚动内容并展开
}
.tabViewStyle(.verticalPage(transitionStyle: .blur))
.containerBackground(.green.gradient, for: .navigation)关键点：
.verticalPage是 watchOS 10 新增的 tab 视图样式.blur过渡在 tab 之间产生模糊切换效果containerBackground为导航容器添加全屏渐变背景- TabView 自动检测
List等滚动内容，展开以容纳
Matched Geometry Effect 驱动动画
（09:12）
@Namespace private var animationNamespace
@State private var selectedTab = 0
TabView(selection: $selectedTab) {
MoveRingView()
.matchedGeometryEffect(id: "rings", in: animationNamespace)
}
.toolbar {
ToolbarItem(placement: .topBarLeading) {
ActivityRingsView()
.matchedGeometryEffect(id: "rings", in: animationNamespace)
.opacity(selectedTab == 0 ? 0 : 1)
}
}关键点：
matchedGeometryEffect连接两个视图，SwiftUI 自动处理位置动画- 滚动到 Move tab 时，环从工具栏缩放到 TabView 中的位置
- 通过
opacity控制目标视图的显示/隐藏，避免重复渲染 - 这种动画把交互锚定到 Digital Crown，同时保持关键信息始终可见
Dial-based 布局
（13:26）
struct DialBasedView: View {
var body: some View {
ZStack {
Rectangle()
.foregroundStyle(Color.clear)
Circle()
.foregroundStyle(Color.red)
.scenePadding(.horizontal)
}
.edgesIgnoringSafeArea(.vertical)
}
}关键点：
scenePadding(.horizontal)根据表盘布局网格计算正确边距edgesIgnoringSafeArea(.vertical)让视图延伸到底部安全区，实现表盘居中- 透明 Rectangle 让 ZStack 占满可用宽度，Circle 才能正确定位
- Dial 布局适合密集信息展示，可在四角添加控制按钮
Toolbar 新放置位置
（13:30）
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button(action: {}) {
Image(systemName: "ellipsis")
}
}
ToolbarItem(placement: .bottomBar) {
Button(action: {}) {
Image(systemName: "pause.fill")
}
.controlSize(.large)
}
}关键点：
.topBarTrailing放置右上角按钮，时间会自动居中让位.topBarLeading放置左上角按钮.bottomBar放置底部控制按钮，SwiftUI 自动按布局网格对齐.controlSize(.large)让按钮更大更突出，适合主要操作
全屏背景材质
（17:01）
.containerBackground(.green.gradient, for: .navigation)关键点：
containerBackground是 watchOS 10 新 modifier- 支持
.ultraThinMaterial、.thinMaterial、.regularMaterial、.thickMaterial - 也支持颜色渐变，如
.green.gradient - 系统弹窗默认使用全屏 thin material，提供层级上下文
Vibrant 前景样式
（16:22）
Text("Decibels")
.foregroundStyle(.secondary)
Text("85 dB")
.foregroundStyle(.primary)
Chart { ... }
.foregroundStyle(.secondary) // 未填充部分关键点：
.primary、.secondary、.tertiary、.quaternary提供四级信息层次- 这些样式带 vibrancy 效果，让背景色透过来
- 系统颜色也有 vibrant 版本，确保在全屏背景上的可读性
- List 内容和控件已更新为在 material 背景上显示良好
核心启发
-
抬腕即得的天气应用
- 做什么：做一个极简手表天气应用，打开直接显示当前位置天气，转 Digital Crown 逐小时查看，再转查看未来五天
- 为什么值得做：NavigationSplitView 让城市列表一键可达，不需要返回按钮，信息密度最大化
- 怎么开始：用
NavigationSplitView构建，详情视图用 Dial 布局展示温度和风速，源列表用List(selection:)
-
运动数据仪表盘
- 做什么：用 TabView 垂直翻页展示心率、步数、卡路里三个指标，每个 tab 用全屏渐变背景区分
- 为什么值得做：
matchedGeometryEffect可以让关键指标在 tab 切换时保持视觉连续性，.verticalPage让导航完全由 Digital Crown 驱动 - 怎么开始：定义
@Namespace，在 TabView 和 toolbar 中放置相同matchedGeometryEffect的视图，用containerBackground设置不同渐变
-
专注计时器
- 做什么：番茄钟应用，全屏背景色随计时状态变化——专注时 calming blue，休息时 soft green，结束时 bright orange
- 为什么值得做：watchOS 10 的全屏背景材质和 vibrant 文字让状态变化一目了然，不需要看数字就知道当前阶段
- 怎么开始：用
containerBackground设置动态颜色，.primary/.secondary控制文字层次，Digital Crown 调整计时长度
-
智能堆叠小组件
- 做什么：为现有 iOS 应用设计 watchOS Smart Stack 小组件，展示最相关的实时数据
- 为什么值得做：Smart Stack 是 watchOS 10 的核心入口，用户转 Digital Crown 就能看到，比打开应用更快捷
- 怎么开始：参考 “Design widgets for the Smart Stack” session，用 WidgetKit 创建
accessoryRectangular或accessoryCircular样式的小组件
关联 Session
- Meet watchOS 10 — watchOS 10 全部新特性总览
- Design widgets for the Smart Stack on Apple Watch — Smart Stack 小组件设计详解
- Update your app for watchOS 10 — 现有应用迁移到 watchOS 10 的完整指南
评论
GitHub Issues · utterances