What's new in SF Symbols 5
Design 进阶 20m

SF Symbols 5 新特性

What's new in SF Symbols 5

2023年6月5日

在 Apple 官方观看视频

一句话判断

SF Symbols 5 带来了符号动画——Appear/Disappear、Bounce、Scale、Pulse、Variable Color、Replace 六种可配置预设，配合前中后三个空间平面创造出有深度感的动态符号效果，所有渲染模式和尺寸都支持。

这场 Session 讲了什么

Apple 设计团队的 Thalia 介绍了 SF Symbols 5 的重大更新——符号动画系统。

SF Symbols 的演进路线：2019 年单色符号 -> 2021 年分层/调色板/多色渲染模式 -> 2022 年可变颜色 -> 2023 年动画。

六种动画预设：Appear（出现时逐渐显现）、Disappear（消失时逐渐淡出）、Bounce（弹性跳动，确认交互）、Scale（缩放，提供焦点反馈）、Pulse（透明度脉冲，表示持续活动）、Variable Color（随时间变化的颜色强度）。Replace（替换动画，在两个符号之间切换）。

动画的核心概念：符号按层级（layer）动画，每个层独立运动。也可以选择整体动画。动画利用前、中、后三个空间平面创造深度感——符号在动画过程中会移动到不同平面，产生近大远小的效果。

Bounce vs Scale 的选择：Bounce 表示”一个动作发生了”或”需要采取行动”，如滑块拉到最大值时弹跳。Scale 表示”被选中了”或”获得焦点”，如 hover 时放大并保持。Scale 是有状态的——放大会持续到效果被移除。

Pulse 的层级利用：脉动可以只作用于符号的特定层。比如屏幕共享图标，只让代表屏幕的那一层脉动，比整体脉动传递更精确的信息。

值得深挖的点

三个空间平面的深度设计：前平面（最靠近观察者，符号更大）、中平面（参考位置）、后平面（最远，符号更小）。动画中符号在这些平面之间移动，创造立体感。这个设计直接服务于空间计算平台的 3D 交互语言。

Bounce 和 Scale 的交互设计哲学：Bounce 是瞬时的”确认”反馈——快速弹性运动后回到原位。Scale 是持久的”状态”反馈——放大或缩小并保持。选择哪种取决于你想传达的是”动作发生了”还是”状态改变了”。

Variable Color 的动画化：可变颜色本来就有随时间变化的特性，今年变成了真正的动画预设——可以自动循环播放，表示连续的进度或活动状态。

Replace 动画：在两个不同的符号之间平滑过渡，比如播放按钮变成暂停按钮。系统自动处理两个符号之间的形状过渡。

代码片段

// Bounce 动画 - 确认交互
Image(systemName: "sun.max")
    .symbolEffect(.bounce, value: brightnessDidChange)

// Scale 动画 - 提供焦点反馈（有状态）
Image(systemName: "folder")
    .symbolEffect(.scale.up, isActive: isHovering)
// Pulse 动画 - 表示持续活动
Image(systemName: "shareplay")
    .symbolEffect(.pulse, isActive: isSharingScreen)

// 只脉动特定层
Image(systemName: "person.crop.circle.badge.mic")
    .symbolEffect(.pulse.byLayer, isActive: isRecording)
// Appear / Disappear 动画
Image(systemName: "bell.badge")
    .symbolEffect(.appear, value: showNotification)

Image(systemName: "trash")
    .symbolEffect(.disappear, value: itemDeleted)
// Variable Color 动画
Image(systemName: "wifi")
    .symbolEffect(.variableColor, isActive: isConnecting)

// Replace 动画 - 在两个符号之间切换
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
    .contentTransition(.symbolEffect(.replace))

最佳实践

  • Bounce 用于确认：按钮被点击、操作完成时使用 Bounce。它是”成功”的视觉反馈。
  • Scale 用于焦点和选中：hover 高亮、选中状态使用 Scale。它的持续性表达状态的改变。
  • Pulse 用于持续活动：录音中、加载中、分享屏幕中等长时间运行的状态用 Pulse。
  • 利用层级做精确动画：Pulse 不一定要整个符号脉动。只让表示活动部分的层脉动，信息更精确。
  • Appear/Disappear 配合出现和消失：元素从无到有或从有到无时使用，而不是突然出现/消失。

还有什么值得关注

  • 所有动画预设都可以配置——速度、重复次数、方向等参数都可调。
  • 动画在所有渲染模式（单色、分层、调色板、多色、可变颜色）和所有尺寸下都工作。
  • Session 还提到了新增的符号（symbols），每年的 SF Symbols 更新都会扩展符号库。
  • 这些动画原则直接服务于空间计算平台的交互语言——深度感和层级动画在 3D 环境中尤为重要。
WWDC 2023