Design dynamic Live Activities
Design 进阶 20m

设计动态 Live Activities：锁屏、待机与灵动岛

Design dynamic Live Activities

2023年6月5日

在 Apple 官方观看视频

一句话判断

这场 Session 从设计角度全面讲解了 Live Activities 在锁屏、Standby 和灵动岛三个场景下的适配策略，值得产品经理和设计师一起看。

这场 Session 讲了什么

Mac Tyler 和 Chan 从设计视角覆盖了 Live Activities 的三个展示场景：

锁屏上的 Live Activity。位于通知列表顶部，使用 14pt 边距与通知对齐。设计时要追求图形化布局而非复制通知样式，优先展示最重要的信息。按钮只用于控制活动的核心操作（如暂停/取消计时器），因为按钮会占用信息展示空间。动态调整高度——信息少时紧凑，信息多时展开。使用 numericContentTransition 做数字动画，contentReplace 做元素替换。

Standby 模式。iPhone 横放时变成环境信息显示器。Live Activity 放大 200%，背景色自动扩展到全屏。如果你的设计有边缘元素，放大后可能被传感器区域裁切，需要用分隔线或容器形状来规避。也可以移除背景色，让布局与设备边框融为一体，获得更大的显示面积。

灵动岛。由 Chan 深入讲解，涉及 compact、minimal、expanded 和 expanded（large）四种形态之间的切换和动画设计。

设计 Personality 方面：从 App 图标取色、使用品牌标志（但不要直接用整个 App 图标）、大胆用色、确保明暗模式下颜色一致性。背景色和前景色还会用于系统自动生成的关闭按钮。

值得深挖的点

高度动态化的策略。Live Activity 不应该是一个固定高度的卡片。在等待状态（如等待司机接单）保持紧凑，状态更新后展开更多信息。中场休息时收起次要信息。这种动态高度设计既节省空间，又保持了信息密度。

过渡动画的设计语言。系统提供了几种内置过渡：numericContent 用于数字递增递减（如比分变化），contentReplace 用于元素替换。你也可以组合缩放、透明度和位移动画创建自定义过渡。列表中元素位置变化时，只动画移动的那一行，其他行淡入淡出，避免元素重叠。

Standby 的传感器区域处理。设备顶部有一块传感器区域，放大后的内容不能绘制到那里。如果你的 Live Activity 有边缘图形元素，在 Standby 下它们会被截断。解决方案：用分隔线划分区域，或者干脆不用背景色，直接与设备边框融合。

代码片段

// 使用系统内置的数字过渡动画
// 在 SwiftUI 中为数字内容指定过渡类型
.contentTransition(.numericText())
// 适用于比分、倒计时、价格等数字变化场景
// 内容替换过渡
.contentTransition(.identity)
// 适用于图形元素和文本的替换动画
// 自定义位置动画（如地图上标记点移动）
// 在 Activity 的 SwiftUI 视图中使用 withAnimation
withAnimation(.easeInOut(duration: 0.5)) {
    pinPosition = newCoordinate
}
// 让地图标记平滑移动到新位置

最佳实践

  • 从 App 图标提取品牌色，让 Live Activity 和 App 之间建立视觉关联。
  • 按钮（如暂停、取消）只用于活动的核心操作，避免把 Live Activity 变成迷你 App。
  • 测试 Standby 模式下你的设计是否被传感器区域裁切。
  • Activity 结束后及时移除，不要让过期信息一直占据锁屏。
  • 使用 Alert（亮屏+通知音）提示需要用户关注的重要更新，并在布局中突出触发提醒的信息。

还有什么值得关注

  • 灵动岛部分的详细设计指南在 Session 后半段，涉及四种形态的切换时机和动画
  • Standby 是全新的使用场景，建议在真实设备或模拟器中反复测试
  • 体育比赛、外卖配送、打车、计时器是四个最经典的 Live Activity 用例
  • TV App 的 Live Activity 是一个很好的设计参考——颜色与 App 图标一致，信息层次清晰
WWDC 2023