SF Symbols 3 使用指南-六虎

本文基于 WWDC 2021 Session 10097, Session 10251 和 Session 10349 梳理。本文从 SF Symbols 的特性和长处切入，主要议论 SF Symbols 应该怎么在各个渠道的代码中运用。在这次 WWDC 2021 中，除了符号的数量的添加之外，还有多种色彩烘托形式和更多的本地化选项供开发者实践，让 SF Symbols 这把利器变得更加趁手和尖利。

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

本文是 WWDC21 内参的一部分，如今关注老司机周报就可免费收取 21 内参。

什么是 SF Symbols

符号在界面中起着非常重要的作用，它们能有用地传达含义，它们能够表明你挑选了哪些项目，它们能够用来从视觉上区别不同类型的内容，而且符号呈现在整个视觉体系的遍地，这使整个用户界面营造了一种了解的感觉。

符号的完结和运用办法多种多样，但规划和运用符号时有一个更古不变的问题，那便是将符号与用户界面的另一个基本元素—-‘“文本”很好地合作。符号和文字在用户界面中以各种不同的巨细被运用，他们之间的排列形式、对齐办法、符号色彩、文本字重与符号粗细的协调、本地化装备以及无障碍规划都需求开发者和规划师来仔细装备和协调。

为了便利开发者更便捷、轻松地运用符号，Apple 在 iOS 13 中开始引进他们自己规划的海量高质量符号，称之为 SF Symbols。SF Symbols 具有超越 3100 个符号，是一个图标库，旨在与 Apple 渠道的体系字体 San Francisco 无缝集成。符号有 9 种字重和 3 种份额，并主动与文本标签对齐。一起这些符号是矢量的，这意味着它们是能够被拉伸的，使得他们在不管用什么巨细时都会呈现出很好的作用。它们也能够被导出并在矢量图形修改东西中进行修改，来创建具有共享规划特征和无障碍功能的自定义符号。

关于开发者来说，这套 SF Symbols 不管是在 UIKit，AppKit 仍是 SwiftUI 中都能运作杰出，且运用办法也很简略便利。本文将会运用 AppKit、UIKit 或 SwiftUI 的代码示例来带咱们探究怎么在自己的 App 中轻松加入 SF Symbols。

怎么运用 SF Symbols

SF Symbols 3 App

在开始介绍怎么运用 SF Symbols 之前，咱们能够先下载来自 Apple 官方的 SF Symbols 3 App，这款 App 中收录了一切的 SF Symbols，并且记录了每个符号的名称，支撑的烘托形式，不同语言的变体，不同 OS 版本下或许呈现的不同的名称，并且能够实时预览不同烘托形式下不同强调色的不同作用。你能够在这里下载 SF Symbols 3 App。

符号的烘托形式

经过之前的图片你或许现已留意到了，SF Symbols 能够具有多种色彩，有一些 symbol 甚至还有预设的色彩，例如代表气候、肺部、电池的符号等等。假设要运用这些带有自定义色彩的符号，你需求了解，SF Symbols 有四种烘托形式：

单色形式 Monochrome

在 iOS 15 / macOS 11 之前，单色形式是唯一的烘托形式，望文生义，单色形式会让符号有一个单一的色彩。要设置单色形式的符号，咱们只需求设置图片的 tint color 或许 accent color 就能够完结。

let image = UIImage(systemName: "battery.100.bolt")
imageView.image = image
imageView.tintColor = .systemYellow
// SwiftUI
Image(systemName: "battery.100.bolt")
  .foregroundStyle(.yellow)

分层形式 Hierarchical

每个符号都是预先分层的，如下图所示，符号按顺序最多分红三个层级：primary，secondary，tertiary。有一些符号只要一个层级，也便是只要 primary 层。有一些符号只要两个层级，其中第一个层级一定是 primary 层，第二个层级能够是 secondary 层，也能够是 tertiary 层。SF Symbols 的分层设定不仅在分层形式下有用，在后文别的烘托形式下也是有作用的。

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

var image = NSImage(systemSymbolName: "battery.100.bolt",
                    accessibilityDescription: "Battery")
let config = NSImage.SymbolConfiguration(hierarchicalColor: .systemYellow)
imageView.image = image
imageView.symbolConfiguration = config
// SwiftUI
Image(systemName: "battery.100.bolt")
  .foregroundStyle(.yellow)
	.symbolRenderingMode(.hierarchical)

你能够在 SF Symbols 3 App 中查询到每个符号有几个层级以及层级是怎么分配的

调色盘形式 Palette

调色盘形式和分层形式很像，但也有些许不同。和分层形式相同是，调色盘形式也会对符号的各个层级进行上色，而不同的是，调色盘形式答应你自在的分别设置三个层级各自的色彩，就像你正在用一块调色盘相同。

let image = UIImage(systemName: "battery.100.bolt")
let config = UIImage.SymbolConfiguration(paletteColors: [.red, .orange, .yellow])
imageView.image = image
imageView.symbolConfiguration = config
// SwiftUI
Image(systemName: "battery.100.bolt")
    .foregroundStyle(.red, .yellow, .red)

留意：假设你的符号只要两个层级，那你也能够运用 [.red, .yellow] 相似这样的只要两个色彩的数组。体系会将数组中的第二个色彩添加到符号的非 primary 层级上。但假设你的符号有三个层级，但你只供给了两个色彩的数组，你的非 primary 层级将会都运用色彩数组中的最终一个色彩。

多色形式 Muticolor

在 SF Symbols 中，有许多符号的意象在现实生活中现已深入人心，比方：删除操作应该是红色的，添加操作应该是绿色的，天空应该是蓝色的等等。所以 SF Symbols 也供给了与现实世界色彩相契合的色彩形式：多色烘托形式。当你运用多色形式的时分，就能看到预设的黄色太阳符号，橙色药丸符号，且你不需求指定任何色彩。

let image = UIImage(systemName: "battery.100.bolt")
let config = UIImage.SymbolConfiguration.preferringMultiColor
imageView.image = image
imageView.preferredSymbolConfiguration = config
// SwiftUI
Image(systemName: "battery.100.bolt")
	.symbolRenderingMode(.multicolor)

不是一切 SF Symbols 都有多色形式的，假设对没有多色形式的符号设置多色形式将没有作用。假设你需求对某个处于多色形式的符号手动指定色彩，且该符号有图层能够接受强调色的话，直接设置其 tint color 也能够到达作用。

let image = UIImage(systemName: "flame.fill") // 
let config = UIImage.SymbolConfiguration.preferringMultiColor
imageView.image = image
imageView.preferredSymbolConfiguration = config
// configure the fire symbol with red color
imageView.tintColor = .red

此外，你也能够将多色形式与其他烘托形式结合起来，当符号支撑多色形式时会运用多色形式预设的色彩，而不支撑时会运用另一个烘托形式。要留意的是，当你结合分层形式和调色板形式的时分只能挑选一个，因为它们是互斥的。若这两个色彩形式也不被该符号支撑，那就会运用单色形式。除此之外，也能够经过相似的操作，将烘托形式和字重等其他装备结合起来。

let image = UIImage(systemName: "battery.100.bolt")
let multiColorConfig = UIImage.SymbolConfiguration.preferringMultiColor
let paletteConfig = UIImage.SymbolConfiguration(paletteColors: [.red, .orange, .yellow])
let config = multiColorConfig.applying(paletteConfig)
imageView.image = image
imageView.preferredSymbolConfiguration = config

你能够在 SF Symbols 3 App 中查询到每个符号支撑哪些形式

字重和份额

SF Symbols 和 Apple 渠道的体系字体 San Francisco 相同，具有九种字重：

Ultralight
Thin
Light
Regular
Medium
Semibold
Bold
Heavy
Black

一起为了在不同运用场合体现不相同的强调性，SF Symbols 还供给了三种份额能够挑选：

Small
Medium
Large

这意味着每个 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 的三种份额尺寸并不是单纯的对符号进行缩放。假设你仔细观察，会发现关于同一个字重，可是不同份额的符号来说，他们线条的粗细是相同的，可是对符号的整体进行了扩大和延展，以应对不相同的运用环境。

符号变体

关于某些符号来说，有多种表现形式，咱们以 "heart" 这个符号为比方，他有许多种变体：

在以前，假设咱们想要运用圆形底填充款式的爱心，咱们能够运用 UIImage(systemImage: "heart.circle.fill") 这样名称字符串拼接的形式来完结。可是要留意的是你需求先拼接 ".circle" 再拼接 ".fill"，假设反过来将会找不到这个符号。

现在咱们有了更简便的办法，更好用也更不简略出错：

let imageView = UIImageView(image: UIImage(systemName: "heart"))
imageView.imageVariant = .circle.fill
// SwiftUI
Label("Heart", systemImage: "heart")
  .symbolVarient(.circle.fill)

在不同的运用场景下咱们通常会运用不同风格的符号，比方 iOS 在 tab bar 中咱们会运用填充款式（.fill）的符号，而 macOS 在 tab bar 中咱们更倾向于线性符号。但假设你是在 SwiftUI 中，在体系供给的大部分 View 中运用符号的话，你无需运用填充款式，体系会依据自身渠道是 iOS 仍是 macOS 来决议究竟展示哪种风格的符号。以下方代码为比方，该 TabView 在 iOS 下是填充款式，而在 macOS 下是线性款式。

TabView {
  CardsView().tabItem {
    Label("Cards", systemImage: "person.circle") // 不需求加.fill
  }
}

一些其它技巧

符号的本地化

有一些符号关于不同区域不同语言的运用者来说，有着不同的特点。比方字典上的文字，地球的视点，书写文本的方向等等，这些符号都是需求本地化的，而 SF Smybols 现已为咱们处理好了这个问题。在本年，Apple 扩大了 SF Symbols 多语言本地化的掩盖规模，添加了阿拉伯文、希伯来文和德瓦那加里文的新符号，并包含泰文、中文、日文和韩文的规划。一切这些本地化的符号和文字变体都能依据用户的设备语言主动习惯，包含从右到左的书写体系，从而使之变得简略，且开发者不需求做额定的工作。

在 Interface Builder 中运用符号

在代码中对 SF Symbols 进行装备的这些代码，在 Interface Builder 中也能够完结。

总结

从上文介绍 SF Symbols 的特性和长处咱们能够看到，它的呈现是为了解决符号与文本之间的协调性问题，私以为在这方面，Apple 供给的这个东西现已做的非常好了，对各个细节的处理都十分到位。有个小小的遗憾是：本年更新的许多内容，例如烘托形式以及许多新的风趣符号，都是仅支撑 iOS 15 以上，距离广泛引证还有一段距离。但这次更新之后，SF Symbols 不管是在查询符号、原生支撑、代码接入以及符号的丰富程度上来说，都到达了让人冷艳的程度，相信关于大部分小型开发者来说，能够说是会放在第一手挑选的的符号东西。

SF Symbols 3 使用指南

什么是 SF Symbols

怎么运用 SF Symbols

SF Symbols 3 App

符号的烘托形式

单色形式 Monochrome

分层形式 Hierarchical

调色盘形式 Palette

多色形式 Muticolor

字重和份额

符号变体

一些其它技巧

符号的本地化

在 Interface Builder 中运用符号

总结

更多材料

作者信息

推广

SF Symbols 3 使用指南

什么是 SF Symbols

怎么运用 SF Symbols

SF Symbols 3 App

符号的烘托形式

单色形式 Monochrome

分层形式 Hierarchical

调色盘形式 Palette

多色形式 Muticolor

字重和份额

符号变体

一些其它技巧

符号的本地化

在 Interface Builder 中运用符号

总结

更多材料

相关文章

Axure RP 教程，如何在 Axure RP 中只用画布制作交互式移动应用？

Swift年终大礼包送你了还不来！！！

Android技术分享 | 一行代码实现屏幕、声音采集

iOS静态库和动态库详解

作者信息

推广