Explore the SF Symbols 3 app
Swift & UI 入门 14m

探索 SF Symbols 3 应用

Explore the SF Symbols 3 app

2021年6月8日

在 Apple 官方观看视频

一句话判断

SF Symbols 3 不只是图标多了——Rendering Modes（渲染模式）让你用同一个 Symbol 在不同场景下呈现完全不同的视觉效果，这是今年 UI 设计工具链最大的升级。

这场 Session 讲了什么

SF Symbols 是苹果自 iOS 13 起提供的矢量图标库，SF Symbols 3 带来了三个重大更新：更多图标（超过 3000 个）、新的 Rendering Modes（渲染模式）、以及改进的 SF Symbols macOS 应用来帮助你浏览和定制这些图标。

最关键的更新是 Rendering Modes。以前 SF Symbols 只有单色和一种混合模式，现在有了四种：Monochrome（纯色，用 tint 着色）、Multicolor（多色，保留图标本身的颜色信息）、Hierarchical（层次感，用透明度区分前景和背景层次）、Palette（调色板，你可以为图标的不同层指定不同颜色）。这意味着同一个「闹钟」图标，你可以在通知中心用 Monochrome 显示灰色，在计时器 App 里用 Multicolor 显示彩色，在快捷操作按钮上用 Palette 显示自定义配色。

Session 还介绍了 SF Symbols 3 应用的改进：新的搜索和过滤功能、导出自定义 Symbol 的模板（SVG 格式）、以及 Annotation 功能（在图标上叠加自定义文字）。

值得深挖的点

Hierarchical 和 Palette 模式的设计意图。 Hierarchical 模式会自动分析 Symbol 的图层结构，对前景层使用不透明颜色、对背景层使用半透明颜色，创造出「深度感」。比如「文件夹」图标，文件夹本体是不透明的，标签页是半透明的。Palette 模式则给你完全控制权——你需要为每个图层指定颜色。实现原理是每个 SF Symbol 内部有 1-3 个命名图层（通过 SVG 的 group 结构定义），渲染引擎根据你选择的模式分别着色。在你的自定义 Symbol 中也可以利用这个机制——只要在 SVG 模板中正确组织图层。

自定义 Symbol 的完整工作流。 SF Symbols 3 应用支持导出任何 Symbol 的 SVG 模板。你在设计工具（Sketch、Figma）中修改模板，然后导入回 Xcode 项目。自定义 Symbol 需要放在 Asset Catalog 中，并用 NSImage 或 Image 的 systemName: 方式引用。关键是保持 SVG 的图层结构——如果你删除了命名 group，Hierarchical 和 Palette 模式就无法正确分层。对于需要支持 RTL（从右到左语言）的 Symbol，你需要在 SVG 中提供 mirror 版本。

代码片段

import SwiftUI

// 四种渲染模式的使用
struct SymbolRenderingView: View {
    var body: some View {
        HStack(spacing: 20) {
            // 单色模式——纯色，适合工具栏图标
            Image(systemName: "bell.badge.fill")
                .symbolRenderingMode(.monochrome)
                .foregroundStyle(.blue)

            // 多色模式——保留原始颜色
            Image(systemName: "bell.badge.fill")
                .symbolRenderingMode(.multicolor)

            // 层次模式——自动区分前景/背景透明度
            Image(systemName: "bell.badge.fill")
                .symbolRenderingMode(.hierarchical)
                .foregroundStyle(.blue)

            // 调色板模式——手动指定每层颜色
            Image(systemName: "bell.badge.fill")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.white, .blue)
        }
        .font(.largeTitle)
    }
}
// 配合 Dynamic Type 使用 Symbol
struct AdaptiveSymbolView: View {
    var body: some View {
        // Symbol 会自动跟随 Dynamic Type 缩放
        Image(systemName: "heart.fill")
            .imageScale(.large)  // .small, .medium, .large
            .foregroundStyle(.red)

        // 也可以用 font 控制精确尺寸
        Image(systemName: "star.fill")
            .font(.system(size: 24, weight: .semibold))
            .foregroundStyle(.yellow)
    }
}
// 使用 Symbol 的变体（variant）
// 自动根据上下文选择合适的变体
struct SymbolVariantsView: View {
    var body: some View {
        HStack {
            // 基础图标
            Image(systemName: "heart")

            // 填充变体
            Image(systemName: "heart.fill")

            // 圆形填充变体
            Image(systemName: "heart.circle.fill")

            // 方形填充变体
            Image(systemName: "heart.square.fill")
        }
        .font(.title)
    }
}

最佳实践

  • 优先使用 SF Symbols 而不是自定义图标——它们自动支持 Dynamic Type、RTL 布局和辅助功能，你的自绘图标很难覆盖所有这些
  • 在 Asset Catalog 中组织自定义 Symbol，命名不要和系统 Symbol 冲突（用你的 App 前缀）
  • 导出 SVG 模板时选择所有重量（Ultralight 到 Black）和所有尺寸，确保 Symbol 在各种大小下都清晰
  • 使用 SF Symbols 3 应用的「Export Symbol」功能时，注意选择正确的输出格式——对于需要支持 Hierarchical/Palette 的 Symbol，必须导出包含图层信息的版本

还有什么值得关注

  • SF Symbols 3 新增了「Variable Color」功能——某些 Symbol（比如 Wi-Fi 信号）支持根据一个 0-1 的值动态改变显示状态
  • iOS 15 / macOS Monterey 的所有系统控件已经更新为使用新的 Rendering Modes
  • SF Symbols 应用现在支持按 Unicode 分类浏览，方便找到特定主题的图标
WWDC 2021