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

SF Symbols 4 新特性

What's new in SF Symbols 4

2022年6月6日

在 Apple 官方观看视频

一句话判断

SF Symbols 4 带来了 700+ 新图标、自动渲染模式（Automatic Rendering）和 Variable Color 功能，如果你在做 Apple 平台的 UI 设计或开发，这些更新直接影响你的图标使用方式。

这场 Session 讲了什么

Thalia 主讲了 SF Symbols 今年的三大更新：新图标库、渲染模式改进和 Variable Color。

图标库方面新增 700+ 符号，总数超过 4000。新增了五个分类：Camera & Photos、Accessibility、Privacy & Security、Home、Fitness。Home 类包含灯光、窗帘、窗户、门、开关、插座等智能家居图标；Fitness 类包含了健身人形图标；货币符号和本地化符号也大幅扩展。

渲染模式方面引入了 Automatic Rendering——每个 Symbol 现在有自己的”首选渲染模式”，选择 Automatic 时系统自动匹配最佳渲染方式。

Variable Color 是全新的着色机制，将 Symbol 的矢量路径分成多个层，按顺序着色来传达强度变化或时间序列。

值得深挖的点

Automatic Rendering 不总是最佳选择。 虽然 Automatic 会为每个 Symbol 选择其”最佳”渲染模式，但在特定 UI 上下文中可能不合适。Session 用 AirPods Pro 图标举例：Automatic 选择 Hierarchical，但在小尺寸低对比度背景下，Monochrome 更清晰。渲染模式仍然可以手动指定。

Variable Color 的分层逻辑。 不是所有路径都参与变化序列。手机信号图标中，手机本体 opt-out，只有无线电波参与强度变化。这种设计让”静止部分”和”动态部分”清晰分离。

四种渲染模式的精确选择。 Monochrome 最中性，适合排版密集场景；Hierarchical 用单色调提供层次感；Palette 用多色提供更强的视觉对比；Multicolor 用于展示物理世界外观或语义颜色。

代码片段

// 使用 Automatic 渲染模式（SwiftUI）
Image(systemName: "camera.filters")
    .symbolRenderingMode(.automatic)  // 自动选择最佳渲染模式

// Variable Color：展示信号强度
Image(systemName: "wifi")
    .symbolRenderingMode(.multicolor)
    // Variable Color 通过分层着色传达强度
// 手动指定渲染模式
Image(systemName: "airpods.pro")
    .symbolRenderingMode(.monochrome)  // 小尺寸下更清晰
    .font(.caption)

// Palette 模式使用自定义颜色
Image(systemName: "person.circle.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.white, .blue)

最佳实践

  • 优先尝试 Automatic，但验证实际效果。 在不同尺寸、不同背景色下测试，小尺寸低对比度场景可能需要 Monochrome。
  • Variable Color 适合状态指示器。 信号强度、音量、电池电量等随时间变化的指标是 Variable Color 的最佳使用场景。
  • 利用 SF Symbols App 创建自定义集合。 4000+ 图标中找到合适的需要时间，在 App 中收藏常用符号提高效率。
  • 新分类帮助你快速定位。 Accessibility、Privacy & Security 等新分类覆盖了常见的图标需求场景。

还有什么值得关注

  • SF Symbols App 新增了五个分类标签，方便浏览
  • 本地化符号覆盖了更多文字系统和从右到左书写方向
  • Fitness 人形图标可以用于健身类 App 的状态展示
  • 推荐观看去年的 SF Symbols Session 了解基础的四种渲染模式
WWDC 2022