What's new in SF Symbols

Highlight

SF Symbols 3 新增近 600 个图标（总数超 3000）、扩展本地化语言支持、引入 Hierarchical 和 Palette 两种渲染模式，并通过图层注释实现精细的颜色控制。

核心内容

符号是用户界面最基础的沟通元素

你点开一个 App 的设置页面，那个齿轮图标就是符号。符号是用户与产品之间最简洁的沟通形式，它们独立于语言，帮助用户快速导航、触发动作。

SF Symbols 把这些符号整合成一套与 San Francisco 字体无缝配合的图标库。每个符号有九种字重、三种尺寸，自动与文本标签对齐，还支持动态字型和粗体文字等辅助功能。

（00:48）

符号变体：outlined、filled、slash

同一符号可以有多种形式。默认是 outlined（线框版），因为它和文字的笔画风格一致。当你需要更突出的效果时，filled（填充版）能提供更大面积来承载颜色。

还有 slash（斜杠）变体，用于表示移除或禁用某个功能。enclosed 变体把符号放在圆形、方形等容器中。

（03:05）

本地化扩展：支持阿拉伯文、希伯来文等

今年我们扩展了 SF Symbols 的文字系统覆盖，新增阿拉伯文、希伯来文、天城文的设计，以及中文、日文、韩文、泰文的变体。

这些本地化符号会根据用户的设备语言自动适配，包括从右到左的书写系统。如果符号在镜像时失去预期效果，需要为特定文字系统设计专门版本。

（06:25）

详细内容

符号的解剖结构：封闭路径和点兼容

每个符号从矢量点开始，由直线段和贝塞尔曲线组成路径。符号的设计源必须是完全封闭的形状，这样才能在不同字重和尺寸间插值时保持一致形状。

关键设计规则：

• 使用封闭路径，不能有开放端点
• 笔画必须转换为轮廓
• 所有变体必须点兼容（相同数量的矢量点）

这样设计的好处是，系统可以在不同字重间平滑插值，实现九种字重的变化。

（08:35）

图层注释：定义主次关系

符号可以组合多个对象，比如分享符号是箭头和方形的组合。通过图层注释，我们可以把这些对象分组：

• Primary（主层）
• Secondary（次层）
• Tertiary（第三层）

这为颜色控制奠定了基础。比如圆形容器内的屏幕通常标注为 tertiary，而前景元素标注为 primary。

四种渲染模式

1. Monochrome（单色模式）

这是最接近排版本质的模式，所有符号使用单一颜色，强调一致性而非差异性。当你需要符号混排且不突出任何一个时使用。

Image(systemName: "heart.fill")
    .symbolRenderingMode(.monochrome)
    .foregroundStyle(.red)

关键点：

• 所有部分统一使用相同颜色
• 透明度应用于整个符号，忽略图层注释
• 适合工具栏、导航栏等需要统一外观的场景

2. Hierarchical（层次模式）

使用单一颜色，但通过不同透明度创建视觉层次。主层 100% 不透明，次层和第三层透明度递减。

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

关键点：

• 主层完全饱和，次层半透明，第三层更淡
• 自动根据图层注释分配透明度
• 适合需要强调结构但保持单一色调的场景

（11:30）

3. Palette（调色板模式）

允许使用两种或更多对比颜色，每种颜色可独立控制。基于同样的图层注释，但可以为每层分配不同颜色。

Image(systemName: "person.2.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(
        .blue,
        .orange,
        .red
    )

关键点：

• 最多支持三层独立颜色
• tertiary 存在时需要三个颜色参数，否则 secondary 颜色会应用到 tertiary
• 适合需要明确区分符号内不同元素的场景

4. Multicolor（多色模式）

表现符号的固有颜色，反映物理世界的对象外观，或约定俗成的颜色语义（比如添加是绿色，删除是红色）。

Image(systemName: "globe.americas.fill")
    .symbolRenderingMode(.multicolor)

关键点：

• 使用符号预定义的颜色方案
• 可以是全彩色、部分彩色（部分用强调色）
• 没有多色信息的符号会降级为单色模式

（15:53）

颜色库更新

SF Symbols 3 更新了颜色库：

• Brown（棕色）现在在所有平台可用，之前仅限 macOS
• Teal（青色）重新定义为更偏绿的色调
• Cyan（青色）是新增颜色名，使用旧的 Teal 色值
• Indigo 和 Purple 在所有平台上有更一致的色相定义

所有颜色在浅色、深色和高对比度外观下会自动适配。

核心启发

1. 用 Hierarchical 模式改善列表项的可读性

• 做什么：在复杂列表中，为每个列表项的图标使用 Hierarchical 模式
• 为什么值得做：单色模式下所有图标视觉权重相同，Hierarchical 模式通过透明度区分主次元素，让图标结构更清晰
• 怎么开始：找到列表中使用的符号，将渲染模式改为 .hierarchical，观察主次元素是否更易辨认

2. 用 Palette 模式为功能按钮创建视觉分组

• 做什么：为一组相关功能按钮使用相同的 Palette 配色方案
• 为什么值得做：用户可以通过颜色快速识别功能类别，减少认知负担
• 怎么开始：定义三到四种配色方案（如编辑用橙色、删除用红色、分享用蓝色），应用到相应功能组的图标

3. 自定义符号时遵循封闭路径原则

• 做什么：在 Figma 或 Illustrator 中设计自定义符号时，确保所有路径封闭且笔画转为轮廓
• 为什么值得做：只有封闭路径才能在 SF Symbols 的多种字重间正确插值，确保符号在不同尺寸下保持一致
• 怎么开始：使用 SF Symbols 3 应用导出符号模板，在模板上绘制，导出前检查是否有开放路径

4. 为你的 App 设计一套符号配色系统

• 做什么：基于 App 的品牌色和功能分类，定义一套 Palette 模式的配色规则
• 为什么值得做：统一的配色让用户建立颜色语义记忆，提升界面的专业性和一致性
• 怎么开始：列出 App 中所有使用符号的场景，按功能分组，为每组定义 2-3 种配色方案并文档化

5. 利用 Multicolor 模式强化品牌识别

• 做什么：对于品牌标志性元素（如 App logo 图标），使用 Multicolor 模式保持其固有颜色
• 为什么值得做：Multicolor 模式下的符号保留设计的原色，能强化品牌识别和情感连接
• 怎么开始：选择有强色彩语义的符号（如天气图标、品牌图标），设置渲染模式为 .multicolor

关联 Session

• Create custom symbols — 学习如何设计自己的 SF Symbols，包括绘制规则和图层注释
• Explore the SF Symbols 3 App — 深入了解 SF Symbols 3 应用的功能和使用方法
• Design for Apple Platforms — Apple 平台设计原则和符号使用的最佳实践
• SF Symbols 2 — WWDC20 的 SF Symbols 基础知识，推荐先观看