What's new in SF Symbols 4

Highlight

SF Symbols 4 新增 700+ 符号（总数超过 4000），引入 Automatic Rendering 模式自动选择最佳渲染方式，新增 Variable Color 特性用分层着色传达强度变化，并统一了自定义符号的标注结构。

核心内容

符号库扩展

SF Symbols 每年都在增长。2022 年新增 700 多个符号，总数突破 4000。

（02:35）

新增符号覆盖多个领域：

• 家居：灯光、窗帘、窗户、门、开关、插座
• 健康与健身：健身人形图标
• 货币：更多货币符号
• 本地化：覆盖不同文字体系和从右到左书写系统

SF Symbols App 新增五个分类帮助导航：Camera & Photos、Accessibility、Privacy & Security、Home、Fitness。开发者也可以创建自己的收藏集合。

四种渲染模式回顾

SF Symbols 有四种渲染模式，每种对颜色的控制程度不同：

（04:02）

• Monochrome：最中性，统一颜色，最贴近排印本质
• Hierarchical：单色渐变，通过透明度差异突出重要形状
• Palette：两种或更多对比色，让符号元素更突出
• Multicolor：使用符号的固有颜色，如物理世界的真实颜色

Automatic Rendering

以前不指定渲染模式时默认使用 Monochrome。现在每个符号有”首选渲染模式”，选择 Automatic 时系统会自动匹配。

（05:38）

例如：

• 相机滤镜符号在 Automatic 下使用 Hierarchical，突出镜片的半透明感
• SharePlay 符号在 Automatic 下使用 Hierarchical，让人形突出、声波退居背景
• AirPods Pro 符号在 Automatic 下使用 Hierarchical

但 Automatic 不总是最佳选择。小尺寸低对比度场景下，Monochrome 可能更清晰。渲染模式仍然可以显式指定。

Variable Color

Variable Color 是 2022 年最重要的新特性。它将符号的矢量路径分成多个层，按顺序着色，用来传达强度变化或时间序列。

（07:51）

关键概念：

• 有些路径参与序列，有些不参与
• 参与的路径按层组织，每层对应一个阶段
• 用百分比值控制：0% 全灭，100% 全亮
• 基于透明度，适用于所有渲染模式

示例场景：

• 信号强度：手机形状不参与，电波按强度分层
• 音量：扬声器形状不参与，三个声波分层表示低/中/高音量
• 房间容量：人形图标分层表示空/少量/半满/满员

Unified Annotations

自定义符号的标注方式在 2022 年得到简化。所有渲染模式使用统一的层结构。

（12:09）

新引入的概念：

• Draw：层绘制包含的路径
• Erase：层擦除路径，影响重叠区域的渲染效果

开发者只需要组织一次层结构，就可以为所有渲染模式生成标注。配合 Variable Color，还可以创建动态状态的自定义符号。

详细内容

使用 Automatic Rendering

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Automatic：系统根据符号选择最佳渲染模式
            Image(systemName: "camera.filters")
                .symbolRenderingMode(.automatic)
                .font(.system(size: 60))
            
            // 显式指定 Hierarchical
            Image(systemName: "camera.filters")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
                .font(.system(size: 60))
            
            // 显式指定 Monochrome（小尺寸时更清晰）
            Image(systemName: "airpodspro")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.primary)
                .font(.system(size: 16))
        }
    }
}

关键点：

• .symbolRenderingMode(.automatic) 让系统选择符号的首选模式
• 大部分情况下 Automatic 是最佳选择
• 小尺寸、低对比度场景可能需要显式指定 Monochrome
• .foregroundStyle() 控制颜色

使用 Variable Color

import SwiftUI

struct VolumeView: View {
    @State private var volume: Double = 0.5
    
    var body: some View {
        VStack {
            // Variable Color 根据数值高亮符号的不同部分
            Image(systemName: "speaker.wave.3.fill")
                .symbolRenderingMode(.hierarchical)
                .font(.system(size: 60))
                .foregroundStyle(.blue)
            
            Slider(value: $volume, in: 0...1)
                .padding()
        }
    }
}

在 UIKit 中使用：

import UIKit

class ViewController: UIViewController {
    let imageView = UIImageView()
    let slider = UISlider()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = UIImage.SymbolConfiguration(
            paletteColors: [.systemBlue]
        )
        imageView.image = UIImage(
            systemName: "wifi",
            withConfiguration: config
        )
        
        // Variable Color 通过 symbol configuration 控制
        let variableConfig = UIImage.SymbolConfiguration(
            variableValue: 0.6
        )
        imageView.image = UIImage(
            systemName: "wifi",
            withConfiguration: variableConfig
        )
    }
}

关键点：

• Variable Color 通过 variableValue（0.0 到 1.0）控制高亮程度
• 0.0 表示全部路径未高亮，1.0 表示全部路径高亮
• 中间值按层的顺序逐步高亮
• 不参与序列的路径始终保持完整显示
• 适用于所有渲染模式

创建支持 Variable Color 的自定义符号

在 SF Symbols App 中：

1. 导入自定义 SVG 符号
2. 将路径按逻辑分成多个层
3. 为参与 Variable Color 的路径单独建层
4. 设置每层的 Draw/Erase 行为
5. 为所有渲染模式统一标注

示例：一个厨房计时器符号

• 将计时器的外圈、刻度、指针分别放在不同层
• 指针层参与 Variable Color 序列
• 外圈和刻度不参与，始终显示
• 随着时间推移，Variable Color 逐步高亮指针层

关键点：

• 路径的层顺序决定了 Variable Color 的序列顺序
• 不是所有路径都需要参与序列
• Draw/Erase 控制层与层之间的重叠渲染效果
• 一次标注，所有渲染模式共用

四种渲染模式的代码对比

import SwiftUI

struct RenderingModesView: View {
    var body: some View {
        HStack(spacing: 30) {
            // Monochrome：统一颜色
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.blue)
            
            // Hierarchical：单色渐变，有层次
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)
            
            // Palette：多色对比
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.blue, .green)
            
            // Multicolor：固有颜色
            Image(systemName: "folder.badge.plus")
                .symbolRenderingMode(.multicolor)
        }
        .font(.system(size: 40))
    }
}

关键点：

• .monochrome 和 .hierarchical 接受一个颜色
• .palette 接受两个或更多颜色，按顺序应用到不同层
• .multicolor 使用符号内置的颜色定义
• .automatic 根据符号的首选模式自动选择上述之一

核心启发

做一个智能家居控制面板

• 做什么：一个 iOS/iPadOS 智能家居控制中心，用 SF Symbols 表示各种设备和状态
• 为什么值得做：新增的 Home 分类包含灯光、窗帘、开关、插座等图标，Variable Color 可以直观显示亮度/开合程度
• 怎么开始：用 symbolRenderingMode(.hierarchical) + Variable Color 让灯泡符号随亮度变化，窗帘符号随开合度变化

做一个健身追踪 App

• 做什么：一个记录和展示健身数据的 App，用图标表示不同运动类型
• 为什么值得做：新增的 Fitness 人形图标可以直接使用，Variable Color 可以表示完成进度
• 怎么开始：用健身人形符号配合 Variable Color 显示训练完成度，用 Hierarchical 渲染突出当前活跃项目

做一个网络状态监控工具

• 做什么：一个显示网络连接质量的菜单栏工具
• 为什么值得做：WiFi、信号强度符号天然适合 Variable Color，可以直观反映信号好坏
• 怎么开始：用 wifi 或 cellularbars 符号，通过 variableValue 绑定到实际的信号强度值

做一个自定义图标设计工具

• 做什么：一个让设计师为特定 App 创建自定义 SF Symbols 风格图标的工具
• 为什么值得做：Unified Annotations 让自定义符号可以一次标注、多模式复用，降低维护成本
• 怎么开始：在 SF Symbols App 中设计符号，用统一的层结构标注 Multicolor、Hierarchical、Palette 和 Monochrome

关联 Session

• Adopt Variable Color in SF Symbols — Variable Color 的实战使用指南
• What’s new in SF Symbols — WWDC21 SF Symbols 更新回顾
• Meet Transferable — 跨应用拖拽和分享的数据传输