Highlight
SF Symbols 3 app 增加集合、兼容性检查、本地化预览、新渲染模式预览、自定义符号标注和 Copy Image，开发者可以在设计到开发的完整流程中管理系统符号和自定义符号。
核心内容
做一个纸牌游戏，界面需要很多小图标。邀请玩家要有“人加号”。四种花色要有黑桃、红心、梅花和方块。规则入口要有书本。牌堆操作还需要堆叠图标。
以前，这件事很容易散开。设计师在图库里找图标，工程师在代码里猜符号名称。符号是否支持旧系统、是否会随语言方向改变、是否能在深色模式下保持颜色，都要分开检查。自定义图标还会落到普通 SVG 或 PNG 资源里，失去 SF Symbols 的对齐、字重和渲染能力。
SF Symbols 3 app 把这些步骤收进一个工具。开发者可以先建 collection（集合），把项目用到的符号放在一起。选中符号后，信息检查器显示名称、废弃名称、SF Symbols 版本和本地化表现。渲染检查器可以预览 Monochrome（单色）、Multicolor（多色）、Hierarchical（分层）和 Palette（调色板）模式。
这直接解决了开发流程里的断点。设计阶段可以用 Copy Symbol 或 Copy Image 把符号放进设计稿。开发阶段可以复制符号名称，或者导出完整自定义符号给 Xcode。自定义符号还能在 app 里标注图层，接入 SF Symbols 3 的新渲染模式。
从项目场景开始收集符号
纸牌游戏的例子很具体。先创建 Card Game 集合，再从 Human 分类拖入添加玩家符号。接着搜索 suit 找四种花色，搜索 stack 找牌堆，搜索 book 找规则入口。
集合的作用是把“我正在用的符号”从 3000 多个系统符号里分出来。后续检查兼容性、预览颜色、复制到设计稿，都从这个短列表开始。
检查兼容性和本地化
同一个视觉符号可能有新名称和废弃名称。演讲里的添加玩家符号，person.fill.badge.plus 从 SF Symbols 2.0 开始可用，对应 iOS 14。废弃名称 person.badge.plus.fill 从 SF Symbols 1.0 开始可用，对应 iOS 13。
如果应用还要支持 iOS 13，旧名称能解决兼容性问题。等最低系统版本提高后，再切换到新名称。这个判断来自信息检查器，不需要开发者去不同系统上逐个试。
本地化也在这里检查。规则书符号会根据用户语言显示对应文字，还会根据从左到右或从右到左的语言方向调整书本打开方向。默认使用无后缀的符号名，让系统按用户语言选择表现。
预览 SF Symbols 3 的四种渲染模式
渲染检查器把符号颜色预览放在工具内。单色模式使用一个颜色。多色模式使用符号内置颜色，纸牌花色会自动让红心和方块变红，黑桃和梅花变黑，还会适配深色模式。
SF Symbols 3 新增了分层和调色板。分层模式只选一个颜色，系统用不同透明度表现图层深浅。调色板模式允许指定两种或三种颜色，对符号不同部分做更精细的控制。
自定义符号进入同一套流程
系统库里没有“红心皇后”符号。演讲从 crown.fill 开始，使用 File > Duplicate as Custom Symbol 复制为自定义符号，再改名为 queen.heart.fill。
形状修改在外部矢量工具完成。SF Symbols app 导出 template SVG，设计师用 Sketch 之类的工具修改路径，然后把编辑后的模板拖回自定义符号。符号会立即更新。
自定义符号也能标注新渲染模式。多色模式下，把红心路径拖到新图层并设为红色，把皇冠下半部分设为黄色。分层模式下，把红心放在 primary layer，把皇冠其他部分放在 secondary layer。
详细内容
用集合整理项目符号
（00:54）SF Symbols 3 app 可以用左上角加号创建集合。集合用于保存当前项目选中的符号。
Collection: Card Game
person.badge.plus.fill
suit.spade.fill
suit.heart.fill
suit.club.fill
suit.diamond.fill
book关键点：
Collection: Card Game表示为纸牌游戏建立一个项目集合。person.badge.plus.fill是演讲中用于兼容 iOS 13 的添加玩家符号旧名称。suit.spade.fill、suit.heart.fill、suit.club.fill、suit.diamond.fill对应四种牌面花色，来自搜索词suit。book用于规则入口，演讲展示它会随本地化调整视觉表现。
选择符号名称时先看系统版本
（02:37）信息检查器显示符号名称和可用版本。演讲里的添加玩家符号有两个可用名称。
let modernName = "person.fill.badge.plus" // SF Symbols 2.0, iOS 14
let legacyName = "person.badge.plus.fill" // SF Symbols 1.0, iOS 13
let targetMinimumOS = "iOS 13"
let selectedName = legacyName关键点：
modernName来自信息检查器，适合最低支持 iOS 14 及更新系统的应用。legacyName是带警告标记的废弃名称，但它可以覆盖 iOS 13。targetMinimumOS表示演讲里的约束：家人仍有人使用旧系统。selectedName选择旧名称，是为了让同一个视觉符号在 iOS 13 上可用。- 废弃名称只适合兼容旧系统；最低版本提高后，应迁移到新名称。
本地化符号优先交给系统选择
（03:43）信息检查器会显示符号在不同本地化下的外观。书本符号会换成用户本地文字，还会适配文字方向。
let automaticLocalizedSymbolName = "book"
let arabicSpecificSymbolName = "book.ar"
let chineseSpecificSymbolName = "book.zh"
let nameUsedInMostApps = automaticLocalizedSymbolName关键点：
automaticLocalizedSymbolName没有本地化后缀，系统会按用户首选语言选择表现。arabicSpecificSymbolName展示演讲提到的.ar后缀，可在 Xcode 中指定特定本地化。chineseSpecificSymbolName展示演讲提到的.zh后缀。nameUsedInMostApps保持无后缀名称，避免开发者手动判断用户语言和书本方向。
在 app 里预览渲染模式
（04:28）渲染检查器可以切换四种模式，并预览颜色、背景和图层效果。
Monochrome: one color, such as system purple
Multicolor: intrinsic colors, such as red hearts and diamonds
Hierarchical: one color with opacity-based layers
Palette: two or three specified colors关键点：
Monochrome使用单一颜色，适合普通工具栏和导航图标。Multicolor使用符号内置颜色，纸牌花色会自动区分红黑。Hierarchical是 SF Symbols 3 新模式，用一个颜色和透明度表现层次。Palette是 SF Symbols 3 新模式，允许指定两到三种颜色。- 背景选择器可以测试深色模式，演讲中黑桃和梅花会随深色背景调整颜色。
从系统符号复制自定义符号
（06:20）没有现成图标时，可以从系统符号复制一个自定义符号。演讲从 crown.fill 复制出 queen.heart.fill。
Select: crown.fill
Menu: File > Duplicate as Custom Symbol
Rename: queen.heart.fill
Export: template SVG
Edit: vector editor
Import: drag edited template back onto the custom symbol关键点：
Select: crown.fill选择一个接近目标造型的系统符号作为起点。File > Duplicate as Custom Symbol在 SF Symbols app 内创建自定义符号。Rename: queen.heart.fill给自定义符号取业务相关名称。Export: template SVG导出可编辑模板。Import使用拖放把修改后的模板放回自定义符号，app 会立即更新。
给自定义符号标注颜色图层
（07:12）自定义符号选中后，侧边栏会出现标注控件。Gallery view 提供更大的编辑视图。
Multicolor annotation:
heart layer -> red
lower crown layer -> yellow
Hierarchical annotation:
heart layer -> primary
lower crown layer -> secondary关键点：
heart layer -> red来自演讲的多色标注，红心部分单独成层并设为红色。lower crown layer -> yellow把皇冠下半部分放到黄色层。heart layer -> primary在分层模式下把红心设为主层。lower crown layer -> secondary把皇冠其他部分设为次层。- 同一个自定义符号加入集合后，可以和系统符号一起预览所有新渲染模式。
设计稿使用 Copy Symbol 和 Copy Image
（09:04）系统符号、单色渲染、和文字放在一起时，推荐用 Copy Symbol。它会把符号作为文本粘贴到设计工具。
System symbol + text + monochrome:
Edit > Copy Symbol
Command-C
Paste as text
Custom symbol or color rendering:
Edit > Copy Image
Option-Command-C
Copy Image As: PNG or SVG, point size, pixel scale关键点：
Edit > Copy Symbol适合系统符号和单色模式。Paste as text让符号使用 SF fonts，和旁边文字自动基线对齐、字重匹配。Edit > Copy Image适合自定义符号，以及 Multicolor、Hierarchical、Palette 渲染模式。Copy Image As可以选择 PNG 或 SVG，还能指定 point size 和 pixel scale。- Copy Image 面向设计稿；如果要放进 Xcode 项目，应使用 Export Symbol，保留完整自定义符号能力。
核心启发
-
做什么：给应用建立“项目符号清单”。
- 为什么值得做：集合可以把实际使用的符号从 3000 多个系统符号里分离出来，设计和开发都围绕同一份列表工作。
- 怎么开始：打开 SF Symbols 3 app，用加号创建项目集合，把搜索到的系统符号拖进去，再逐个检查名称、可用版本和本地化表现。
-
做什么：为仍支持旧系统的 app 建立符号名称迁移表。
- 为什么值得做：信息检查器会显示新名称和废弃名称的可用版本，能避免低版本系统找不到符号。
- 怎么开始：选中关键符号，记录当前名称和废弃名称。例如把
person.fill.badge.plus与person.badge.plus.fill放进迁移表，等最低系统版本提高后替换。
-
做什么：给国际化界面做符号预览检查。
- 为什么值得做：部分符号会随语言文字和书写方向改变。提前预览可以发现规则书、箭头、文本相关图标的方向问题。
- 怎么开始：在信息检查器查看本地化表现。代码里优先使用无后缀符号名，例如
book，让系统按用户语言选择合适版本。
-
做什么：为品牌功能制作一个自定义 SF Symbol。
- 为什么值得做：自定义符号可以接入 SF Symbols 的字重、尺寸和新渲染模式，比普通图片资源更适合系统界面。
- 怎么开始：选择接近目标的系统符号，执行 File > Duplicate as Custom Symbol，导出 template SVG，在矢量工具中修改，再拖回 SF Symbols app。
-
做什么：把彩色图标先放进设计稿验证。
- 为什么值得做：Copy Image 可以把自定义符号或彩色渲染符号以 PNG/SVG 放进设计稿，团队能在进入 Xcode 前确认视觉效果。
- 怎么开始：在渲染检查器设置 Multicolor、Hierarchical 或 Palette，执行 Edit > Copy Image，必要时用 Copy Image As 指定尺寸和格式。
关联 Session
- What’s new in SF Symbols — 介绍 SF Symbols 3 的新增符号、分层渲染、调色板渲染和多色更新。
- Create custom symbols — 深入讲解自定义符号模板、路径编辑、图层标注和插值工作流。
- SF Symbols in UIKit and AppKit — 展示 UIKit 和 AppKit 使用彩色 SF Symbols 的具体 API。
- SF Symbols in SwiftUI — 展示 SwiftUI 中使用系统符号、自定义符号、变体和渲染模式的方式。
评论
GitHub Issues · utterances