Design and build apps for watchOS 10
Design 进阶 20m

设计和构建 watchOS 10 app

Design and build apps for watchOS 10

2023年6月5日

在 Apple 官方观看视频

一句话判断

watchOS 10 的设计核心是”抬起手腕的那十秒钟”——信息聚焦、Digital Crown 驱动、全屏色彩。

这场 Session 讲了什么

watchOS 10 是 Apple Watch 的第十个大版本，带来了全面的界面重设计。设计理念围绕三个核心：呈现当下最相关的信息、通过 Digital Crown 导航、用全屏色彩和图片庆祝屏幕的形状和保真度。

新的导航范式包括 NavigationSplitView（详情视图在上，源列表一键可达）和 TabView 的垂直翻页样式。Weather app 是 NavigationSplitView 的典型应用——直接进入当天天气，一键切换城市列表。Activity app 展示了 TabView 的垂直翻页——每个运动环是一个 tab，滚动到最后是运动历史列表。

TabView 的新能力令人印象深刻：单个 tab 可以展开和调整大小，支持本地化文本和大字体。Activity 的运动环动画是通过 matchedGeometryEffect 驱动的——滚动到特定 tab 时，环从 TabView 缩放到左上角。

值得深挖的点

“Apple Watch Moment” 的设计理念很有启发性。如果你只有用户抬起手腕后十秒钟的注意力，你会展示什么信息？Weather 直接展示今天天气，News 聚焦五条头条，Heart Rate 先显示数值再展示全屏动画。

Smart Stack 是 watchOS 10 的另一项重要功能。转动 Digital Crown，智能排序的小部件会弹出到屏幕上。设计 app 时可以从”哪些信息适合做成 Smart Stack 小部件”开始思考，然后围绕这些即时信息构建 app 架构。

代码片段

// NavigationSplitView - watchOS 版本
NavigationSplitView {
    // 源列表（城市列表等）
    List(cities) { city in
        NavigationLink(city.name, value: city)
    }
} detail: {
    // 详情视图（天气等）
    WeatherDetail(city: selectedCity)
}
// 始终初始化 selection，自动进入详情视图

// TabView 垂直翻页
TabView(selection: $selectedTab) {
    ForEach(rings) { ring in
        RingDetailView(ring: ring)
    }
}
.tabViewStyle(.verticalPage)

// 使用 matchedGeometryEffect 驱动动画
@Namespace var ringNamespace

// 在 TabView 和 NavigationBar 中使用相同的 namespace
// 实现运动环的无缝过渡动画
.matchedGeometryEffect(id: "ring", in: ringNamespace)

// 滚动列表自动扩展 TabView
TabView {
    TabViewContent {
        // 单屏内容
    }
    TabViewContent {
        // 这个 tab 包含滚动列表
        List(exercises) { exercise in
            // 列表自动扩展 tab
        }
    }
}

最佳实践

  • 从”抬起手腕十秒钟”的角度思考 app 设计
  • 将导航锚定到 Digital Crown
  • 用 NavigationSplitView 展示源列表+详情
  • TabView 的垂直翻页是新推荐范式
  • 使用 containerBackground modifier 实现无缝过渡

还有什么值得关注

  • Smart Stack 让信息主动找到用户
  • 源列表不需要标题和关闭按钮，腾出更多空间
  • 参考 “Design widgets for the Smart Stack” 了解小部件设计
  • 颜色和材质在 watchOS 10 中有新的应用方式
WWDC 2023