本文基于 WWDC 2022 Session 10157 和 Session 10158 梳理，为了更便利没有 SF Symbols 经验的读者了解，也将往年的 SF Symbols 相关内容一起收拾。本文从 SF Symbols 4 的新特性切入，评论 SF Symbols 这款由体系字体支持的符号库有哪些优点以及该怎么运用。在这次 WWDC 2022 中，除了符号的数量的添加到了 4000+ 之外，还有主动烘托形式、可变符号等新特性推出，让 SF Symbols 这把利器变得又愈加趁手和锋利了。

  • WWDC21 – SF Symbols 3 运用指南
  • WWDC21 – 定制归于你的 Symbols
  • WWDC22 – SF Symbols 4 运用指南

本文是 WWDC22 内参 的供稿。

什么是 SF Symbols

符号在界面中起着非常重要的作用，它们能有效地传达含义，它们能够表明你挑选了哪些项目，它们能够用来从视觉上区分不同类型的内容，他们还能够节约空间、整洁界面，而且符号呈现在整个视觉体系的各处，这使整个用户界面营建了一种熟悉的感觉。

符号的完结和运用方法多种多样，但规划和运用符号时有一个亘古不变的问题，那就是将符号与用户界面的另一个基本元素——「文本」很好地合作。符号和文字在用户界面中以各种不同的大小被运用，他们之间的摆放方法、对齐方法、符号色彩、文本字重与符号粗细的和谐、本地化配置以及无障碍规划都需求开发者和规划师来仔细配置和和谐。

SF Symbols 4 使用指南

为了便利开发者更快捷、轻松地运用符号，Apple 在 iOS 13 中开端引入他们自己规划的海量高质量符号，称之为 SF Symbols。SF Symbols 具有超越 4000 个符号，是一个图标库，旨在与 Apple 平台的体系字体 San Francisco 无缝集成。每个符号有 9 种字重和 3 种份额，以及四种烘托形式，它们的默许规划都与文本标签对齐，一起这些符号是矢量的，这意味着它们是能够被拉伸的，使得他们在无论用什么大小时都会呈现出很好的作用。假设你想去发明具有相似规划特征或无障碍功用的自定义符号，它们也能够被导出并在矢量图形修改东西中进行修改以创建新的符号。

关于开发者来说，这套 SF Symbols 无论是在 UIKit，AppKit 仍是 SwiftUI 中都能运作杰出，且运用方法也很简略便利，寥寥数行代码就能够完结。关于规划师来说，你只需求为符号只做三个字重的版别，SF Symbols 会主动地帮你生成其余 9 种字重和 3 种份额的符号，然后在 SF Symbols 4 App 中调整四种烘托形式的体现，就制造好了一份能够高度定制化的 symbol。

SF Symbols 4 使用指南

怎么运用 SF Symbols

SF Symbols 4 App

在开端介绍怎么运用 SF Symbols 之前，咱们能够先下载来自 Apple 官方的 SF Symbols 4 App，这款 App 中收录了一切的 SF Symbols，而且记录了每个符号的称号，支持的烘托形式，可变符号的分层预览，不同语言下的变体，不同版别下可能呈现的不同的称号，而且能够实时预览不同烘托形式下不同强调色的不同作用。你能够在这儿下载 SF Symbols 4 App。

SF Symbols 4 使用指南

符号的烘托形式

经过之前的图片你可能已经留意到了，SF Symbols 能够具有多种色彩，有一些 symbol 还有预设的配色，例如代表天气、肺部、电池的符号等等。假设要运用这些带有自定义色彩的符号，你需求知道，SF Symbols 在逻辑上是预先分层的（如下图的温度计符号就分为三层），依据每一层的途径，咱们能够依据烘托形式来调整色彩，而每个 SF Symbols 有四种烘托形式。

SF Symbols 4 使用指南

单色形式 Monochrome

在 iOS 15 / macOS 11 之前，单色形式是仅有的烘托形式，顾名思义，单色形式会让符号有一个单一的色彩。要设置单色形式的符号，咱们只需求设置视图的 tint color 等特点就能够完结。

let image = UIImage(systemName: "thermometer.sun.fill")
imageView.image = image
imageView.tintColor = .systemBlue
// SwiftUI
Image(systemName: "thermometer.sun.fill")
    .foregroundStyle(.blue)

分层形式 Hierarchical

每个符号都是预先分层的，如下图所示，符号按次序最多分红三个层级：Primary，Secondary，Tertiary。SF Symbols 的分层设定不仅在分层形式下有效，在后文别的烘托形式下也是有作用的。

SF Symbols 4 使用指南

分层形式和单色形式相同，能够设置一个色彩。可是分层形式会以该色彩为根底，生成下降主色彩的不透明度而衍生出来的其他色彩（如上上图中的温度计符号看起来是由三种灰色组合而成）。在这个形式中，层级结构很重要，假设短少一个层级，相关的派生色彩将不会被运用。

let image = UIImage(systemName: "thermometer.sun.fill")
let config = UIImage.SymbolConfiguration(hierarchicalColor: .lightGray)
imageView.image = image
imageView.preferredSymbolConfiguration = config
// SwiftUI
Image(systemName: "thermometer.sun.fill")
    .foregroundStyle(.gray)
    .symbolRenderingMode(.hierarchical)

调色盘形式 Palette

调色盘形式和分层形式很像，但也有少许不同。和分层形式相同是，调色盘形式也会对符号的各个层级进行上色，而不同的是，调色盘形式允许你自在的别离设置各个层级的色彩。

let image = UIImage(systemName: "thermometer.sun.fill")
let config = UIImage.SymbolConfiguration(paletteColors: [.lightGray, .cyan, .systemTeal])
imageView.image = image
imageView.preferredSymbolConfiguration = config
// SwiftUI
Image(systemName: "thermometer.sun.fill")
    .foregroundStyle(.lightGray, .cyan, .teal)

多色形式 Muticolor

在 SF Symbols 中，有许多符号的意象在现实生活中已经家喻户晓，比方：太阳应该是橙色的，正告应该是黄色的，叶子应该是绿色的的等等。所以 SF Symbols 也供给了与现实世界色彩相契合的色彩形式：多色烘托形式。当你运用多色形式的时分，就能看到预设的橙色太阳符号，红色的闹铃符号，而你不需求指定任何色彩。

let image = UIImage(systemName: "thermometer.sun.fill")
imageView.image = image
imageView.preferredSymbolConfiguration = .preferringMulticolor()
// SwiftUI
Image(systemName: "thermometer.sun.fill")
    .symbolRenderingMode(.multicolor)

主动烘托形式 Automatic

议论完了四种烘托形式，能够发现每次设置 symbol 的烘托形式其实也是一件操心的事情。为了处理这个问题，在最新的 SF Symbols 中，每个 symbol 都有了一个主动烘托形式。例如下图的 shareplay 符号，你能够看到在右侧面板中，shareplay 符号的第二个形式（分层形式）的下方有一个空心小圆点，这意味着该符号在代码中运用时，假设你不去特意配置他的烘托形式，那么他将运用分层形式作为他的默许烘托形式。

你能够在 SF Symbols 4 App 中查询到一切符号的主动烘托形式。

SF Symbols 4 使用指南

可变色彩

在有的时分，符号并不单单代表一个独自的概念或许意象，他也能够代表一些数值、份额或许程度，例如 Wi-Fi 强度或许铃声音量，为了处理这个问题，SF Symbols 引入了可变色彩这个概念。

你能够在 SF Symbol 4 App 中的 Variable 目录中找到一切有可变色彩的符号，平且能够经过右侧面板的滑块来检查不同百分比程度下可变色彩的形状。别的你也能够留意到，可变色彩的可变部分实际上也是一种分层的体现，但这儿的分层和上文提到的烘托形式运用的分层是不同的。一个符号能够在烘托形式中只分两层，在可变色彩的分层中分为三层，下图中第二个符号喇叭 speaker.wave.3.fill 就是如此。关于这儿的分层咱们会在后文怎么制造可变色彩中详细评论。

SF Symbols 4 使用指南

在代码中，咱们只需求在初始化 symbol 时添加一个 Double 类型的 variableValue 参数，就能够完结可变色彩在不同程度下的不同形状。值得留意的是，假设你的可变色彩（例如上图 Wi-Fi 符号）可变部分有三层，那么这个 variableValue 的判定将会三等分：在 0% 时将不高亮信号，在 0%～33% 时，将高亮一格信号，在 34%～67 % 时，将高亮 2 格信号，在 68% 以上时，将会显示满格信号。

let img = NSImage(symbolName: "wifi", variableValue: 0.2)

可变色彩的可变部分是运用不透明度来完结的，当可变色彩和不同的烘托形式结合后，也会有很好的作用。

SF Symbols 4 使用指南

怎么制造和调整可变色彩

在 SF Symbols 4 App 中，咱们能够自定义或许调整可变色彩的体现，接下来我将带着咱们以 party.popper 这个符号为根底制造一个带可变色彩的符号。

  1. 首先咱们打开 SF Symbols 4 App，在右上角搜索 party.popper，找到该符号后右键挑选 复制为1个自定符号。推荐你在上方将符号的摆放方法修改为画廊形式，如下图所示。

    SF Symbols 4 使用指南

  2. 能够留意到右下角的 层 这个板块，这个符号默许是由两个层级组成的，别离是礼花和礼花筒，一起咱们也能够看到，礼花和礼花筒又别离是由更琐细的途径组成的，经过勾选子途径咱们能够给每个层新增或许减少途径。那我现在想要给这个符号新增一层，我只需求在画廊形式下，将符号的某一部分拖拽到层里就能够。

    SF Symbols 4 使用指南

  3. 经过这样的操作，咱们能够将这个符号收拾为四层：礼花筒、线条礼花、小球礼花和大球礼花。为了可变色彩的作用，咱们需求依照从下到上：礼花筒、线条礼花、大球礼花和小球礼花的次序去放置层级，别的，咱们能够切换到分层形式、调色板形式和多色形式里边去调整成自己喜欢的色彩来预览作用，我这儿调整了多色形式中的配色，详细作用如下。

    SF Symbols 4 使用指南

  4. 接下来，咱们将前三层，也就是除了礼花筒外的三层，最右侧的可变符号按钮选中，来表示这三层将能够在可变符号的变化范围内活动。接下来，只需点击色彩区域内的可变符号按钮，咱们就能够拖动滑块来检查可变色彩的形状。

    SF Symbols 4 使用指南

  5. 至此，咱们就完结了一个带可变色彩的自定义符号，咱们能够在适宜的当地运用这个符号。例如我的 App 有一个 4 个过程的新手引导，这时分就能够给每一个过程配备一个符号来让界面变得愈加的生动。

    SF Symbols 4 使用指南

统一注释 Unified annotations

其实咱们已经触摸到了 Unified annotations 这个过程，它就是将符号的层级，途径以及子途径收拾成在四个烘托形式下都能杰出作业的过程，就如同上文五颜六色礼花筒的例子，咱们经过统一注释，让五颜六色礼花筒符号在不同烘托形式、不同环境色、不同主题色下，都能杰出的运作。

那一般来说，关于单色形式，不需求过多的调整，它就能保持杰出的形状；关于分层形式和调色盘形式，咱们需求在给每个层设定好哪个是 Primary 层、哪个是 Secondanry 层以及哪个是 Tertiary 层，这样体系就会按优先级给符号上适宜的色彩；关于多色形式，咱们能够依据喜好以及符号的含义，给它预设一个合理的色彩，别的还要留意的是，假设规划了可变色彩在符号中，那么要留意保持可变符号的作用在四个烘托形式上都体现正常。

除了这些之外，还有一些特别的当地需求留意，咱们以 custom.heart.circle.fill 为例子。你能够留意到，这个垃爱心符号是有一个圆形的布景的，在这种情况下，假设咱们依照原来的规矩去绘制单色形式，会发现：布景的圆形和爱心的图画将会是同一个色彩，那咱们就将看不见圆形布景下的图画了。

SF Symbols 4 使用指南

这时咱们能够运用 Unified annotations 给咱们供给的新功用，咱们将上图在 层 板块的爱心，将它从 Draw 改成 Erase，这样，咱们就相当于以爱心的形状镂空了这个白色的布景，从而使该图形展现了出来而且在单色形式下能够一向体现正常。同理，在分层形式和调色盘形式中，也有这个 Erase 的功用共咱们调整运用。

字重和份额

SF Symbols 和 Apple 平台的体系字体 San Francisco 相同，具有九种字重和三种份额能够挑选，这意味着每个 SF Symbol 都有 27 种款式以供运用。

let config = UIImage.SymbolConfiguration(pointSize: 20, weight: .semibold, scale: .large)
imageView.preferredSymbolConfiguration = config
// SwiftUI
Label("Heart", systemImage: "heart")
    .imageScale(.large)
    .font(.system(size: 20, weight: .semibold))

符号的字重和文本的字重原理相同，都是经过加粗线条来添加字重。但 SF Symbols 的三种份额尺度并不是单纯的对符号进行缩放。假设你仔细观察，会发现关于同一个字重，可是不同份额的符号来说，他们线条的粗细是相同的，可是对符号的整体进行了扩充和延展，以应对不相同的运用环境。

要完结这样的作用，意味着每个 symbol 的底层逻辑并不是一张张图片，而是由一组组的途径构成，这也是为什么在当你想要自定义一个归于自己的 symbol 的时分，官方要求你用封闭途径 + 填充作用去完结一个符号，而不是运用一条简略途径 + 途径描边（stroke）来完结一个符号。

更多关于怎么制造一个 symbol 的内容，请移步 WWDC 21 内参：定制归于你的 Symbols。

SF Symbols 4 使用指南

除了字重和份额之外，SF Symbols 还在很多方面进行了尽力来便利开发者的作业，例如：符号的变体、不同语言下符号的本地化、符号的无障碍化等，关于这些内容，以及其它因为篇幅原因未在本文评论的细节问题，请移步 WWDC 21 内参：SF Symbols 运用指南。

总结

从上文介绍 SF Symbols 的特性和优点咱们能够看到，它的呈现是为了处理符号与文本之间的和谐性问题，在保证了本地化、无障碍化的根底上，Apple 一向在实用性、易用度以及多样性上面给 SF Symbols 加码，现在已经有了 4000+ 的符号能够运用，相信在未来还会有更多。这些符号的款式和图画现在看来并不是那么的广泛，这些有限的符号款式并不能让规划师安心替代一切界面上的符号，可是有失必有得，在这样一个高度统一的平台上，SF Symbols 在规范化、统一化、体现能力、代码与规划上的简易程度，在本年都又进一步的提升了，达到了让人惊艳的程度，跟着 SF Symbols 的继续发展，我相信关于部分开发者来说，行将成为一个最优的符号东西。

更多材料

以下是这几年关于 SF Symbols 的材料：

  • [ WWDC 22 ] What’s new in SF Symbols 4
  • [ WWDC 22 ] Adopt Variable Color in SF Symbols
  • [ WWDC 21 内参 ] SF Symbols 运用指南
  • [ WWDC 21 内参 ] 定制归于你的 Symbols
  • [ Human Interface Guidelines ] SF Symbols
  • [ Developer ] SF Symbols

以下是更早的 SF Symbols 材料：

  • [ WWDC 21 ] What’s new in SF Symbols
  • [ WWDC 21 ] SF Symbols in UIKit and AppKit
  • [ WWDC 21 ] SF Symbols in SwiftUI
  • [ WWDC 21 ] Explore the SF Symbols 3 app
  • [ WWDC 21 ] Create custom symbols
  • [ WWDC 20 ] SF Symbols 2
  • [ WWDC 19 ] Introducing SF Symbols