SF 符号

SF Symbols 提供了一组超过 3,100 个一致的、高度可配置的符号，您可以在您的应用程序中使用它们。Apple 将 SF Symbols 设计为与 San Francisco 系统字体无缝集成，因此符号会自动与所有粗细和大小的文本对齐。

【苹果官方】SF 符号 -人机界面指南 - 图1

您可以使用 SF 符号来表示各种 UI 元素中的任务和内容类型，例如导航栏、工具栏、标签栏、上下文菜单和小部件。在整个应用程序的其余部分，您可以在任何可以使用图像的地方使用符号。SF Symbols 适用于 iOS 13 及更高版本、macOS 11 及更高版本、watchOS 6 及更高版本以及 tvOS 13 及更高版本。

SF Symbols 3 引入了以下增强功能：

  • Over 600 new symbols in several categories, such as objects and tools, gaming, communication, and devices
  • New color-rendering modes that add depth and emphasis to a symbol through layer annotation
  • The 3.0 export template that streamlines the production of a custom symbol’s weight-scale variants
  • New designs for Thai, Chinese, Japanese, and Korean, in addition to expanded coverage for Arabic, Hebrew, and Devanagari

Availability of individual symbols and features varies based on the version of the system you’re targeting. For example, when you export a new symbol from SF Symbols 3 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6, but without the benefit of SF Symbol 3 features like Hierarchical or Palette color rendering. Visit SF Symbols to download the app and browse the full set of symbols.

IMPORTANT所有 SF 符号都应被视为 Xcode 和 Apple SDK许可协议中定义的系统提供的图像，并受其中规定的条款和条件的约束。您不得在您的应用程序图标、徽标或任何其他与商标相关的用途中使用 SF 符号（或基本相似或混淆性相似的字形）。Apple 保留审查并自行决定要求修改或停止使用违反上述限制的任何符号的权利，并且您同意立即遵守任何此类请求。

颜色

SF Symbols 3 提供四种渲染模式，可在将颜色应用于符号时启用多个选项。例如，您可能希望使用应用强调色的多种不透明度来生成具有深度和重点的符号，或者指定对比色的调色板来生成与各种配色方案相协调的符号。

为了支持渲染模式，SF Symbols 3 将符号的路径组织到不同的层中。使用名为annotating的过程，您可以为符号中的每一层指定特定颜色或特定层次级别，例如一级、二级或三级。

例如，cloud.sun.rain.fill 符号由三层组成：第一层包含云路径，第二层包含定义太阳及其光线的路径，第三层包含雨滴路径。

根据您选择的渲染模式，带注释的符号可以产生各种外观。例如，分层渲染模式为每个图层分配不同的单一颜色不透明度，创建一个视觉层次，赋予符号深度。

【苹果官方】SF 符号 -人机界面指南 - 图2

SF Symbols 3 支持以下渲染模式。

单色- 对所有符号应用一种颜色。在符号内，路径以您指定的颜色呈现，或呈现为颜色填充路径中的透明形状。

【苹果官方】SF 符号 -人机界面指南 - 图3

分层— 对所有符号应用一种颜色，根据每个图层的分层级别改变颜色的不透明度。

【苹果官方】SF 符号 -人机界面指南 - 图4

调色板- 对每个符号应用两种或多种对比色，每层使用一种颜色。为定义三级层次结构的符号仅指定两种颜色意味着第二层和第三层使用相同的颜色。

【苹果官方】SF 符号 -人机界面指南 - 图5

多色- 将系统定义的固有颜色应用于某些符号以增强含义。例如，叶子符号使用绿色来反映物理世界中叶子的外观，而垃圾桶符号使用红色来表示数据丢失。一些多色符号包括可以接收其他颜色的图层。

【苹果官方】SF 符号 -人机界面指南 - 图6

无论渲染模式如何，使用系统提供的颜色可确保符号自动适应可访问性调整和外观模式，如活力和暗模式。有关开发人员指南，请参阅renderMode(_:))。

重量和秤

SF 符号具有多种重量和比例，可帮助您创建适应性强的设计。

【苹果官方】SF 符号 -人机界面指南 - 图7

九个符号权重（从超轻到黑色）中的每一个都对应于 San Francisco 系统字体的权重，帮助您在符号和相邻文本之间实现精确的权重匹配，同时支持不同大小和上下文的灵活性。

每个符号还提供三种比例：小、中（默认）和大。比例是相对于旧金山系统字体的大写高度定义的。

【苹果官方】SF 符号 -人机界面指南 - 图8

指定比例可让您调整符号相对于相邻文本的强调程度，而不会中断与使用相同磅值的文本的权重匹配。有关开发人员指南，请参阅imageScale (SwiftUI)、SymbolScale (UIKit) 和SymbolConfiguration (AppKit)。

变体

SF Symbols 定义了多种设计变体——例如填充、斜线和封闭——可以帮助您传达精确的状态和操作，同时保持 UI 的视觉一致性和简单性。例如，您可以使用符号的斜杠变体来表示项目或操作不可用，或者使用填充变体来表示选择。

Outline 是 SF Symbols 中最常见的变体。轮廓符号没有实心区域，类似于文本的外观。大多数 SF 符号也可用于填充变体，其中某些形状内的区域是实心的。

除了轮廓和填充之外，SF Symbols 还定义了包含斜线或将符号括在圆形、正方形或矩形等形状内的变体。在许多情况下，封闭和斜线变体可以与轮廓或填充变体结合使用。

【苹果官方】SF 符号 -人机界面指南 - 图9

SF Symbols 3 为特定语言和书写系统提供了许多变体，包括拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语。当设备语言更改时，特定于语言和脚本的变体会自动适应。有关指导，请参阅图像和字形。

【苹果官方】SF 符号 -人机界面指南 - 图10

符号变体支持一系列设计目标。例如，轮廓变体在工具栏、导航栏、列表和其他在文本旁边显示符号的地方效果很好。相比之下，填充变体中的实心区域倾向于给符号更多的视觉强调，使其成为 iOS 标签栏和滑动操作的不错选择，以及您使用强调色来传达选择的地方。

在许多情况下，显示符号的视图决定了使用轮廓还是填充，因此您不必指定变体。例如，iOS 标签栏更喜欢填充变体，而导航栏则采用轮廓变体。

创建自定义符号

如果您需要 SF Symbols 未提供的符号，您可以创建自己的符号。要创建自定义符号，请先导出与所需设计相似的符号，然后使用 Sketch 或 Illustrator 等矢量编辑工具对其进行修改。在您的应用程序中使用结果，就像使用原始符号文件一样。

重要的SF 符号包括描绘 Apple 产品和功能的受版权保护的符号。您可以在应用中显示这些符号，但不能自定义它们。为了帮助您识别不可自定义的符号，SF Symbols 用信息字形标记它；为帮助您正确使用符号，检查器窗格描述了其使用限制。

在自定义符号中创建或修改路径时，请确保使用封闭路径。只有封闭路径——即起点和终点矢量点连接以产生内部区域的路径——可以接收填充。

为确保路径本身可以接收填充，请使用轮廓路径。一个概述路径使用矢量指向精确定义路径本身的面积; 相比之下，非轮廓路径和描边路径没有区域。

例如，一种常见的设计方法是从一条没有轮廓的路径开始，然后添加一个笔划来赋予它粗细。但是，由于笔划没有定义其外部边界的点，因此您需要将笔划转换为轮廓以确保路径在您的自定义符号中运行良好。

当您导出 3.0 模板以创建自定义符号时，您可以在模板初始设置的两个选项之间进行选择：

  • 在静态设置包含一组用于每个 27 重量规模变体的路径，并包括用于正则中变明确的边缘。如果您只需要创建少量的体重秤变体，请使用具有静态设置的模板。
  • 该变量设置包含变数每次三重规模的路径和明确的利润率 - 超轻小，经常小，黑色小。当您需要创建许多或所有 27 个体重秤变量时，请使用带有变量设置的模板。

变量设置中的三个体重秤变体称为sources。仅使用这三个来源，SF Symbols 3 就可以在它们之间进行插值，以生成全范围的重量和比例。为了插值工作：

  • 每条路径都必须是轮廓路径
  • 每个源必须包含相同顺序的相同路径集
  • 每个源中的相同路径必须包含相同数量的矢量点

例如，下面显示的 square.and.arrow.up 符号的每个权重变体都包含两条路径；在每个变体中，方形路径包含 20 个点，箭头路径包含 20 个点。

有关开发人员指南，请参阅为您的应用创建自定义符号图像。

使用模板作为指导。创建与系统在细节级别、光学权重、对齐、位置和透视方面提供的符号一致的自定义符号。努力设计一个符号：

  • 简单的
  • 可识别
  • 包括的
  • 与其所代表的动作或内容直接相关

有关指导，请参阅字形。

在您的矢量编辑工具中，使用标准平面填充为您的自定义符号着色。导入包含非标准填充（或渐变或阴影等效果）的自定义符号可能会阻止它保留您在 SF Symbols 3 中指定的注释。

确保自定义符号的所有权重变体都包含相同顺序的相同路径数。例如，考虑一个使用实心圆圈作为徽章的符号。如果圆圈是一个符号变体中的第三条路径，您需要将其设为所有变体中的第三条路径，以便注释起作用。执行此操作时，您可以创建引用第三条路径的图层，并确信每个图层在每个变体中都引用相同的圆。

【苹果官方】SF 符号 -人机界面指南 - 图11

在此设计变体中，徽章是第三条路径。将绿色分配给引用第三条路径的图层会产生预期的结果。

【苹果官方】SF 符号 -人机界面指南 - 图12

【苹果官方】SF 符号 -人机界面指南 - 图13

在此设计变体中，外部文件夹路径是第三个路径，因此将绿色分配给引用它的图层会产生意想不到的结果。

【苹果官方】SF 符号 -人机界面指南 - 图14

笔记渲染符号时，系统遵循其图层的 Z 顺序，因此顶层中的路径可能会遮挡它们重叠的底层中的路径。如果某些自定义符号变体中的图层包含不同的路径或使用不同的顺序，则在系统应用颜色时可能会出现意外结果。

使用模板来帮助您根据应用程序的需要生成具有多种权重和比例的自定义符号。例如，要启用粗体文本设置并支持动态类型，您需要所有比例的常规、中等、半粗体和粗体符号。

如有必要，为您的自定义符号分配负边距。如果 SF 符号包含徽章或其他增加其宽度的元素，则它可以包含负侧边距以帮助光学水平对齐。例如，负侧边距可以帮助您水平对齐一堆文件夹符号，其中一些包括徽章。SF Symbols 3 将相关变体添加到每个边距的名称中——例如 “left-margin-Regular-M”——所以如果你为自定义符号添加边距，请务必使用这种命名模式。

为自定义符号提供替代文本标签。替代文本标签（或辅助功能描述）不可见，但它们可以让 VoiceOver 有声地描述屏幕上的内容，让视障人士更容易导航。有关指导，请参阅辅助功能 > 复制和图像。

不要设计 Apple 产品的复制品。Apple 产品受版权保护，您不能在自定义符号中复制它们。此外，您无法自定义代表 Apple 功能或产品的 SF 符号。
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/