WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
SF Symbols 2

SF Symbols 2

SwiftUI & UI FrameworksDesign
观看原视频

Highlight

SF Symbols 2 把 Apple 的系统图标库扩展到 macOS Big Sur，并在原有 1500 多个符号上新增 750 多个符号，同时补上 Template V2、本地化、多色符号和布局对齐规则。

核心内容

很多 App 的图标问题，不是缺一个漂亮图形。真正麻烦的是图标要和文字一起工作：字号变了，图标不能显得更粗；用户打开更大的 Dynamic Type（动态字体）后，按钮里的符号也要跟着变；界面切到阿拉伯语或希伯来语时，方向相关的符号还要适配从右到左的阅读顺序。

SF Symbols 的思路，是把图标放进排版系统里。它和 San Francisco 字体一起设计，提供 small、medium、large 三个 scale，并在不同 scale 之间做笔画补偿。这样图标靠近文本时，不需要开发者手动猜宽高，也能保持视觉重量和基线关系。

SF Symbols 2 解决的是第二层问题：这个系统要覆盖更多平台和更多场景。macOS Big Sur 开始原生支持 SF Symbols；符号库新增 750 多个符号；SF Symbols app 支持自定义 collection；Template V2 用线条边距表达正负 margin；本地化符号继续扩展；多色符号让天气、文件夹徽章这类图标可以带有预设颜色。

详细内容

1. UIKit 里用符号名称，不用复制出来的字形

（05:28）UIKit 的入口是 UIImage(systemName:)。session 里强调，代码里应该使用 SF Symbols app 显示的 symbol name，例如 play.fill 和 shuffle，不要把图形字符本身复制进源码。

// SF Symbols: simple usage and symbol configuration

import UIKit

class MainPlayerViewController: UIViewController {

    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var shuffleButton: UIButton!
    @IBOutlet weak var playImageView: UIImageView!
    @IBOutlet weak var shuffleImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupButtons()
    }

    func setupButtons() {
        let buttonConfig = UIImage.SymbolConfiguration(textStyle: .headline, scale: .small)
        playImageView.preferredSymbolConfiguration = buttonConfig
        playImageView.image = UIImage(systemName: "play.fill")
        shuffleImageView.preferredSymbolConfiguration = buttonConfig
        shuffleImageView.image = UIImage(systemName: "shuffle")
    }

    @IBAction func playAction(_ sender: Any) {
    }

    @IBAction func shuffleAction(_ sender: Any) {
    }

}

关键点：

  • UIImage.SymbolConfiguration(textStyle: .headline, scale: .small) 同时指定文本样式和符号 scale。
  • textStyle 让符号跟随 Dynamic Type 变化，transcript 中演示了文字和符号一起变大或变小。
  • preferredSymbolConfiguration 放在 UIImageView 上，让两个图标共享同一套视觉配置。
  • UIImage(systemName: "play.fill") 和 UIImage(systemName: "shuffle") 使用 symbol name；session 里明确说复制符号本身会导致代码不可用。

2. SwiftUI 里用 Image、Label 和文本附件

（07:44）SwiftUI 的写法更短。Image(systemName:) 负责取符号，imageScale 调整 scale，font 承接点大小、字重和文本样式。

// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "shuffle")
            .font(.headline)
            .imageScale(.small)
    }
}

关键点：

  • Image(systemName: "shuffle") 和 UIKit 一样使用 symbol name。
  • .font(.headline) 把符号放进 SwiftUI 的字体系统。
  • .imageScale(.small) 只改变符号 scale，不把字号当成图标宽高来硬调。

（08:10）SwiftUI 2020 还加入了 Label，适合直接表达“文字加符号”的常见控件。

// SF Symbols in SwiftUI
import SwiftUI

struct ContentView: View {
    var body: some View {
        Label("Sharing location",
              systemImage: "location.fill")
    }
}

关键点：

  • Label 把文本和符号作为一个语义控件处理。
  • systemImage 仍然传 symbol name。
  • 这类写法适合工具栏、列表行、设置项和状态提示。

3. macOS Big Sur 原生支持 AppKit 符号

（08:34）SF Symbols 2 的平台变化，是 macOS Big Sur 开始原生支持 SF Symbols。AppKit 使用 NSImage(systemSymbolName:accessibilityDescription:) 取符号，同时给辅助功能提供描述。

// Using SF Symbols in AppKit

if let shuffleImage = NSImage(
    systemSymbolName: "shuffle", accessibilityDescription: "shuffle") {
    shuffleImageView.image = shuffleImage

    // Configure symbols
    let config = NSImage.SymbolConfiguration(textStyle: .body, scale: .small)
    let shuffleButtonImage = shuffleImage.withSymbolConfiguration(config)
}

关键点：

  • systemSymbolName 让 AppKit 使用同一套 SF Symbols 名称。
  • accessibilityDescription 给 VoiceOver 等辅助功能提供可读描述。
  • NSImage.SymbolConfiguration(textStyle:scale:) 和 UIKit 的配置模型一致。
  • withSymbolConfiguration(config) 返回应用配置后的图像，不需要开发者手动画多个尺寸。

4. Template V2、本地化和多色符号

（10:29）自定义符号的 template 仍然是设计源文件，可以从 SF Symbols app 导出、修改，再导入 Xcode。Template V2 的结构保持三行九列：三种 scale，九种 weight。变化在 margin：旧版矩形 margin 变成线条 margin，因此可以表达正 margin 和负 margin。

使用 Template V2 时，流程是从 SF Symbols app 导出符号模板，保留 small、medium、large 三行和 ultralight 到 black 九列，保留每个图层的唯一描述性名称，再把修改后的 SVG template 导入 Xcode 的 asset catalog。

关键点：

  • 三行对应 small、medium、large。
  • 九列对应 ultralight 到 black。
  • transcript 明确说图层名称对文件完整性很重要，修改 template 时要保留结构。
  • Template V2 的线条 margin 用位置和名称表达对齐信息，颜色只用于视觉提示。

（11:57）本地化符号会自动适配。对于自定义符号，做法是本地化 asset catalog，并给每个 SVG template 指定 locale。右到左语言里，如果符号可以直接翻转，设置 symbol direction 为 mirrors。

自定义符号的本地化放在 asset catalog 层处理：为 SVG template 指定 locale；遇到右到左语言时，只有符号语义允许直接翻转，才把 symbol direction 设为 mirrors。

关键点：

  • 本地化系统符号不需要开发者在代码里手动点名变体。
  • 自定义符号要在 asset catalog 层提供 locale 版本。
  • mirrors 适合直接翻转仍然符合语义的符号；不适合时需要单独设计本地化版本。

（14:27）多色符号用于天气、徽章等需要多个颜色层次的图标。AppKit 示例里，isTemplate 为 true 时走单色可 tint 的模板行为；设为 false 可以保留多色版本。

// Tinting symbols

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = true
}

if let folder = NSImage(
    systemSymbolName: "folder.badge.plus", accessibilityDescription: "add folder") {
    folder.isTemplate = false
}

关键点：

  • isTemplate = true 对应单色、可 tint 的模板符号。
  • isTemplate = false 用于保留符号自己的多色呈现。
  • transcript 说明多色符号的颜色会像 system colors 一样随 appearance 动态适配。

5. 布局时把符号当成文字系统的一部分

（16:02）session 最后的布局建议很具体：不要给符号指定固定 frame。符号有自己的视觉尺寸，适合按同样的 text style 或 point size 和文字一起排版；横向看基线，纵向看 alignment guides。

布局规范可以落成几条检查项：符号使用和相邻文字相同的 point size 或 text style；符号和文字按 baseline 对齐；竖向布局里符号列用 center alignment；避免固定 frame、aspect fit、scale to fit 和基于 sizeThatFits 的尺寸推导；符号放进 CALayer 的明确区域时，content gravity 保持 centered。

关键点：

  • 符号不应该被当成固定尺寸位图。
  • 和文字并排时，基线对齐比中心对齐更可靠。
  • 竖向列表里，符号列可以中心对齐，文本列保持 leading 对齐。
  • 如果符号被放进 CALayer 的明确区域，content gravity 要保持 centered。

核心启发

  • 做一个能跟随 Dynamic Type 的播放器控制区。做什么：把播放、暂停、随机播放、循环播放全部换成 SF Symbols。为什么值得做：session 演示了 UIImage.SymbolConfiguration(textStyle:scale:) 可以让符号跟随文字尺寸变化。怎么开始：先在 SF Symbols app 里查 play.fill、shuffle 这类名称，再把按钮图片统一配置为 .headline 和 .small。

  • 改造 macOS 侧边栏的符号和文字对齐。做什么：把文件夹、收件箱、收藏夹等侧边栏图标换成 macOS Big Sur 原生符号。为什么值得做：AppKit 已经能通过 NSImage(systemSymbolName:accessibilityDescription:) 直接使用 SF Symbols。怎么开始：给每个侧边栏项提供 accessibility description，使用 NSImage.SymbolConfiguration(textStyle: .body, scale: .small) 统一配置。

  • 给状态类图标加多色语义。做什么：天气、同步状态、文件夹徽章等图标在需要时保留多色版本。为什么值得做：SF Symbols 2 提供预定义多色符号，颜色会随 appearance 动态适配。怎么开始：在设计稿里标注 multicolor，AppKit 中对需要保留多色的 NSImage 设置 isTemplate = false。

  • 为右到左语言检查自定义图标。做什么：把方向相关的自定义符号放进本地化审查清单。为什么值得做：session 明确提到阿拉伯语和希伯来语等右到左系统，部分符号可以镜像，部分需要单独设计。怎么开始：本地化 asset catalog，为 SVG template 指定 locale；能直接翻转的符号设置 direction 为 mirrors。

  • 建立设计到代码的符号命名流程。做什么：设计师在 SF Symbols app 里建 collection，开发者拿 symbol name 写代码。为什么值得做：session 演示了从 app 搜索、复制、粘贴到 Xcode 的流程，并提醒不要复制符号字符本身。怎么开始：每个功能区建一个 collection，用 shift-command-C 复制名称，把名称放进 UIKit、SwiftUI 或 AppKit 的初始化器。

关联 Session

评论

GitHub Issues · utterances