Meet watchOS 10
System & Services 进阶 20m

认识 watchOS 10

Meet watchOS 10

2023年6月5日

在 Apple 官方观看视频

一句话判断

watchOS 10 是 Apple Watch 自 2014 年以来最大的 UI 变革——新的导航模型、三种基础布局、竖直翻页模式，如果你有 watchOS App，这场 Session 是你必须消化的设计规范。

这场 Session 讲了什么

Session 由 Apple Design Team 的设计师主讲，系统性地介绍了 watchOS 10 的全新设计体系。

系统级变化：

  • Digital Crown 旋转直接调出 Widget（从表盘进入）。
  • Home Screen 改为竖直滚动导航。
  • 侧边按钮一次打开控制中心，两次打开钱包。
  • 所有系统 App 重新设计。

三种基础布局：

  1. Dial（表盘）：圆形数据展示，适合核心指标。
  2. Infographic（信息图）：矩形区域展示详细信息。
  3. List（列表）：标准列表展示。 三种布局自动适配不同 Apple Watch 屏幕尺寸。

背景内容的使用：

  • 用颜色/渐变/动画传达额外信息（天气状况、股票涨跌、活动环颜色）。
  • 背景应提供实用信息，而非纯装饰。
  • 新的材质（Materials）通过半透明建立层次感，内容滚动时状态栏仍清晰可读。

导航模式：

  1. 竖直翻页（Vertical Pagination）：用 Digital Crown 在全屏页面间切换。页面指示器对齐 Digital Crown 位置。
  2. 源列表（Source List）：点击左上角按钮切换不同实体的详情视图。
  3. 层级导航：传统的 push/pop 导航，做了精细化调整。

设计原则：

  • 每个页面控制在单屏高度内。
  • 用”物体恒常性”（Object Permanence）做跨页面动画——同一元素在页面间平滑变换，而非每页复制。
  • 竖直翻页优于水平翻页（因为 Digital Crown 是竖直旋转的）。
  • 滚动视图只用于无法压缩到单屏的内容，且建议放在固定高度页面之后。

值得深挖的点

“物体恒常性”动画原则是一个值得借鉴的设计思路。在 Activity App 中，活动环在总览页和各详情页之间是同一个元素，通过缩放、位移和信息密度变化来平滑过渡，而不是在每个页面画一个新环。这种做法减少了视觉跳跃感，帮用户在导航过程中保持方向感。

竖直翻页取代水平翻页的决策完全基于硬件特性。Digital Crown 的物理旋转方向是竖直的，竖直翻页让用户直觉地用 Crown 翻页。水平翻页需要用户理解”旋转竖直的旋钮来水平翻页”的映射，认知成本更高。这是一个”硬件约束驱动软件设计”的好例子。

背景内容的”功能性”定位排除了纯装饰用背景。Apple 明确说背景应该传达额外信息——世界时钟用时间渐变、天气用天气状况、股票用涨跌颜色。如果你只是想在 App 里放一个好看的渐变背景，watchOS 10 的设计规范认为那不是正确用法。

代码片段

watchOS 10 的设计规范主要通过 SwiftUI 实现，以下是关键布局模式的概念示例：

// 竖直翻页导航
TabView(selection: $selectedPage) {
    ActivityRingsOverview()
        .tag(0)
    MoveRingDetailView()
        .tag(1)
    ExerciseRingDetailView()
        .tag(2)
    StandRingDetailView()
        .tag(3)
}
.tabViewStyle(.verticalPage)  // watchOS 10 竖直翻页样式
// 使用 Digital Crown 在页面间切换

使用背景内容和材质：

// 功能性背景——用颜色传达信息
ZStack {
    // 背景颜色匹配当前活动环的颜色
    Color.moveRing
        .ignoresSafeArea()

    // 使用半透明材质让内容层次分明
    VStack {
        Text("420 卡路里")
            .font(.title2)
        Text("已消耗")
            .font(.caption)
    }
    .padding()
    .background(.ultraThinMaterial)  // watchOS 10 新材质
}

源列表导航：

// 源列表模式：左上角按钮切换实体
NavigationSplitView {
    // 源列表：城市列表
    List(cities, selection: $selectedCity) { city in
        Text(city.name)
    }
    .navigationTitle("世界时钟")
} detail: {
    // 详情视图：选中城市的时间详情
    CityDetailView(city: selectedCity)
}

最佳实践

  • 每个页面内容控制在单屏高度内。如果内容超出，使用滚动视图，但放在固定页面之后。
  • 优先使用竖直翻页而非水平翻页，适配 Digital Crown 的物理特性。
  • 背景颜色/渐变要有信息传达功能，不要纯装饰。
  • 跨页面共享的 UI 元素用动画过渡（物体恒常性），不要重复创建。
  • 新材质配合语义系统颜色，确保在半透明背景上内容仍然清晰。
  • 测试你的 App 在 Apple Watch Series 8（45mm）和 Apple Watch Ultra 上的表现差异。

还有什么值得关注

  • watchOS 10 的设计变更意味着几乎所有现有 watchOS App 都需要重新审视 UI。
  • 系统级的 Widget 智能展示功能通过 Digital Crown 旋转触发，这改变了用户发现和进入 App 的路径。
  • 三种基础布局模板适配所有屏幕尺寸，开发者不需要单独适配 40mm/41mm/44mm/45mm/Ultra。
  • 新的材质系统在 watchOS 10 中统一使用，确保第三方 App 和系统 App 视觉一致。
  • Digital Crown 在不需要导航时可用于数据查看（如世界时钟中旋转查看不同时段）。
WWDC 2023