Apple HIG:SF 符号(SF Symbols)

2025年11月13日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 13 篇文章查看全部

SF 符号提供了数千个风格一致且可配置性高的符号,这些符号可与 San Francisco 系统字体无缝整合且可自动适配所有粗细和字号的文本。

你可以在显示界面图标的任何地方,例如工具栏、标签页栏、上下文菜单和文本中,使用符号来表达物体或概念。

单个符号和功能的可用性会因目标系统的版本而异。某一年推出的符号和符号功能在早期的操作系统中不适用。

请访问 SF 符号以下载该 App 并浏览完整符号集。务必了解使用 SF 符号的条款与条件,包括禁止在 App 图标、标志或任何其他商标用途中使用符号(或者易混淆的相似图像)。有关开发者指南,请参阅 Configuring and displaying symbol images in your UI

渲染模式

SF 符号提供了四种渲染模式:单色、分层、调色盘和多色;这些模式为符号的颜色应用提供了多种选择。例如,你不妨为 App 的强调色使用多种不透明度来为符号营造出景深感和强调感,或者指定对比色调色盘以显示与各种颜色方案均协调一致的符号。

为了支持渲染模式,SF 符号将符号的路径整理到不同的层中。例如,cloud.sun.rain.fill 符号包含三个层:第一层包含云朵路径,第二层包含定义太阳及其光芒的路径,第三层包含雨滴路径。


根据所选的渲染模式,符号可以呈现不同的外观。例如,分层渲染模式会为每一层分配不透明度不同的单色,从而创造出可赋予符号景深感的视觉层次。

若要进一步了解在自定义符号中支持渲染模式,请参阅自定义符号

SF 符号支持以下渲染模式。

单色 — 将一种颜色应用到符号中的所有层。符号中的路径以你指定的颜色渲染或者作为颜色填充路径中的透明形状。

分层 — 将一种颜色应用到符号中的所有层,颜色的不透明度因每一层的分层级别而异。

调色盘 — 将两种或更多种颜色应用到符号,每层使用一种颜色。为定义三个分层级别的符号仅指定两种颜色意味着第二层和第三层使用相同颜色。

多色 — 为部分符号应用有内涵的颜色以增强含义。例如,leaf 符号使用绿色反映现实世界中树叶的外观,而 trash.slash 符号使用红色提示数据丢失。部分多色符号包括可接收其他颜色的层。

无论使用何种渲染模式,使用系统提供的颜色可确保符号自动适应辅助功能调节以及虚化效果和深色模式等外观模式。有关开发者指南,请参阅 renderingMode(_:)

确认符号的渲染模式在每种环境下都能正常工作。不同的渲染模式可能影响用户对符号细节的辨识度,具体取决于符号的大小以及符号与当前背景颜色的对比度等因素。你可以使用自动设置来获取符号的首选渲染模式,但最好还是检查一下结果,看看不同的渲染模式能否提高符号的辨识度。


渐变

在 SF 符号 7 及更高版本中,渐变渲染会从单源色生成平滑的线性渐变。你可以在所有渲染模式中针对系统和自定义颜色以及自定义符号使用渐变。任何尺寸的符号都可进行渐变渲染,但更大尺寸的观感更佳。



可变颜色

无论使用何种渲染模式,你都能通过可变颜色这种方式来表现可随时间而变化的特征,例如容量或强度。为了在视觉上体现这种变化,可变颜色会根据值到达 0%~100% 的不同阈值将颜色应用到符号的不同层。

例如,你可以为 speaker.wave.3 符号使用可变颜色以传达三种不同的声音范围以及无声这种状态,方法是将代表弯曲声波路径的层映射到不同的分贝值范围。在没有声音的情况下,没有声波层会获取颜色。在所有其他情况下,当声音到达系统基于你想表示的非零状态数值而定义的阈值时,声波层会接收颜色。

有些时候,避免为符号的部分层使用可变颜色可能比较合理。以上面显示的 speaker.wave.3 符号为例,包含扬声器路径的层不会接收可变颜色,因为扬声器不会随着音量的更改而变化。符号可在任意数量的层中支持可变颜色。

使用可变颜色传达变化 — 不要将其用于传达深度。若要传达深度和视觉层次,请使用分层渲染模式来提升部分层,并区分符号中的前景和背景元素。


粗细和比例

SF 符号提供了各种粗细和比例的符号,有助于让你的设计更灵活。

符号粗细有九种,从极细体到黑体不等,每种都对应 San Francisco 系统字体中的一种粗细,有助于让符号与周围文本间的粗细达到精确一致,同时根据不同字号和环境灵活调整。

每个符号还可使用三种比例:小、中(默认)和大。每个符号的比例都相对 San Francisco 系统字体的大写字高而定义。

指定比例可让你调整符号相较于周围文本的突出程度,同时不影响符号与使用相同点大小的文本在粗细上保持一致。有关开发者指南,请参阅 imageScale(_:) (SwiftUI)、UIImage.SymbolScale (UIKit) 和 NSImage.SymbolConfiguration (AppKit)。


设计变体

SF 符号定义了填充、斜线和包围等多种设计变体,可帮助你在用户界面中传达精确的状态和操作,同时保持视觉一致性和简明性。例如,你可以在符号中使用斜线变体来显示项目或操作不可用,或者使用填充变体来表示所选内容。

轮廓是 SF 符号中最常见的变体。轮廓符号没有实心区域,与文本外观类似。大多数符号还可以采用填充变体,填充后部分形状的区域为实心。

除了轮廓和填充外,SF 符号还定义了其他变体,例如,包括斜线或者将符号包围在圆形、正方形或矩形等形状内。在很多情况下,包围和斜线变体可与轮廓或填充变体结合使用。

SF 符号为特定语言和书写系统提供了很多变体,涵盖拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语、韩语、西里尔文、天城文和多种印度数字系统。设备语言更改时,特定于语言和文字的变体会自动随之变化。有关指南,请参阅图像

符号变体可协助实现各种设计目标。例如:

  • 如果要在文本旁显示符号,轮廓变体就能在工具栏、列表和其他地方很好实现这一目标。
  • 使用正方形或圆形这样包围形状的符号可在符号较小时提高辨识度。
  • 填充变体中的实心区域可让符号在视觉上更加突出,可完美应用于 iOS 标签页栏、轻扫操作以及使用强调色来表示所选内容的位置。

在很多情况下,显示符号的视图会确定是否使用轮廓或填充,因此你无需指定变体。例如,iOS 标签页栏倾向于采用填充变体,而工具栏则采用轮廓变体。


动画

SF 符号提供了一系列富有表现力的可配置动画,可增强你的界面并为 App 增添活力。符号动画有助于传达想法、提供响应用户操作的反馈,以及表示状态或进行中活动的更改。

动画适用于动画库中的所有 SF 符号、所有渲染模式、粗细和比例,以及自定义符号。有关给自定义符号添加动画效果的考量因素,请参阅自定义符号。你可以控制动画的播放,即是想让动画从开始到结束都运行、无限运行,还是重复其效果直到满足某一条件。你可以自定义行为,如更改动画的播放速度,或决定是否在重复动画前将它反转。有关开发者指南,请参阅 SymbolsSymbolEffect

出现 — 使符号逐渐出现在视图中。

消失 — 使符号逐渐从视图中退出。

弹跳 — 通过类似弹力带的上下运动短暂缩放符号,然后恢复到符号的初始状态。弹跳动画默认播放一次,有助于传达已经采取或需要进行操作。

缩放 — 通过增加或减小符号比例来更改符号的大小。与弹跳动画中符号恢复到其原始状态不同,缩放动画会持续到你设定新缩放或移除该效果为止。你可以使用缩放动画吸引用户注意所选项目,或用作用户选取符号时的反馈。

脉冲 — 随时间更改符号的不透明度。此动画仅会自动让符号内注解为脉冲的图层跳动,并可选择让符号中的所有图层跳动。你可以使用脉冲动画传达进行中的活动,持续播放动画直到某一条件得到满足。

可变颜色 — 以增量方式更改符号内图层的不透明度。此动画可累积或迭代。累积时,每个图层的颜色会持续更改,直到动画周期完成。迭代时,一次只有一个图层的颜色会更改。你可以使用可变颜色传达进度或进行中的活动,如播放、正在连接或正在广播。动画可自定义为自动回播,即将动画反向播放至开始点并重播序列,你还可以隐藏不活跃的图层,而不是降低其不透明度。

符号内图层的排列方式确定了动画重复期间可变颜色的表现效果。若符号内的图层呈线性排列,其中开始点和结束点不相交,则此类符号注解为开环。若符号内的图层形成一个完整形状,其中开始点和结束点相交,例如圆形进度指示符的效果,则此类符号注解为闭环。采用闭环设计的符号的可变颜色动画可无缝、连续播放。

替换 — 使用一个符号替换另一个。替换动画可在任意符号之间、所有粗细和渲染模式下工作。此动画具有三种配置:

  • 缩小至放大,其中传出的符号缩小,传入的符号放大,传达出状态更改。
  • 放大至放大,其中传出和传入的符号均放大。此配置传达出包括前进意味的状态更改。
  • 关闭至放大,其中传出的符号立即隐藏,传入的符号放大。此配置传达出强调下一个可用状态或操作的状态更改。
从左到右:缩小至放大、放大至放大、关闭至放大

魔术替换 — 在包含相关形状的两个符号间执行智能过渡。例如,你可以绘制和清除斜线,让标记出现或消失,或者独立于基础符号进行替换。“魔术替换”是新的默认替换动画,但不能在两个不相关的符号之间实现替换;不相关符号之间会使用默认的缩小至放大动画。如果首选使用默认动画之外的动画,在这些情况下你可以为回调动画选取自定义方向。

摇摆 — 将符号沿方向轴来回移动。你可以使用摇摆动画来突出更改或者引起用户对可能忽视操作的注意。摇摆还可为交互增添动态强调效果或者加强符号所表示的含义,例如用于箭头指向特定方向时。

呼吸 — 平滑缩放显示的符号,赋予其活跃质感。你可以使用呼吸动画来传达状态更改,或者表示活动正在进行中,例如正在录音。呼吸与跳动类似,但是跳动单凭更改不透明度来实现动画效果,而呼吸会同时更改不透明度和大小来表示正在进行的活动。

旋转 — 旋转符号以充当视觉指示符或者模拟物体在现实世界的行为。例如,当任务正在进行时,旋转可确认任务正在按预期进行。旋转动画会使某些符号整个旋转,而对于其他符号则只会使其某些部分旋转。例如台扇等符号使用“按图层”旋转选项以仅旋转扇叶。

绘制出现/绘制消失 — 在 SF 符号 7 及更高版本中,沿着一组引导点构成的路径绘制符号,可从屏幕外绘制到屏幕中(绘制出现)或者从屏幕中绘制到屏幕外(绘制消失)。你可以一次性绘制所有图层,将图层错开,或者一次绘制一层。你可以使用绘制动画传达进度信息(与下载一样),或者强化符号的含义(如方向箭头)。

巧妙应用符号动画。虽然可添加到视图的动画数量没有限制,但过多的动画可能会导致界面杂乱和用户分心。

确保动画在传达符号意图时用途明确。每种类型的动画都具有独立的移动方式,以传达特定类型的操作或引起特定的响应。考虑用户可能如何理解具有动画效果的符号,以及动画或动画组合是否可能引起用户困惑。

使用符号动画以更高效地传达信息。动画提供视觉反馈,强调界面中发生了变化。你可以使用动画以简单的方式呈现复杂的信息,无需占用大量视觉空间。

添加动画时考虑 App 的基调。给符号添加动画时,思考动画可以传达什么信息,以及该效果如何与品牌标识和 App 的整体风格及基调相符。有关指南,请参阅品牌


自定义符号

如果 SF 符号未提供你需要的符号,你可以创建自己的符号。若要创建自定义符号,首先请导出与你要设计符号类似的符号模板,然后使用矢量编辑工具进行修改。有关开发者指南,请参阅 Creating custom symbol images for your app


重要信息

SF 符号包括描绘 Apple 产品和功能且受版权保护的符号。你可以在你的 App 中显示这类符号,但不能进行自定义。为了帮助你识别不可自定义的符号,SF 符号 App 采用了“信息”图标进行标记;为了帮助你正确使用符号,检查器面板描述了符号的使用限制。

通过使用“注解”这种处理方法,你可以为自定义符号中的每层分配特定颜色,或者特定的分层级别,例如第一层、第二层或第三层。你可以在 App 中为符号的每个实例使用不同的模式,具体取决于所支持的渲染模式。

使用模板作为指南。使创建的自定义符号在细节、视觉粗细、对齐方式、位置和视角等方面与系统提供的符号保持一致。设计符号时尽量实现:

  • 简单
  • 易于辨识
  • 具有包容性
  • 与符号表示的操作或内容直接相关

有关指南,请参阅图标

根据需要为自定义符号分配负边距。SF 符号支持负边距,可在符号包含会增加符号宽度的标记或其他元素时,协助实现视觉水平对齐。例如,对于包含标记的部分文件夹符号,负边距可帮助你水平对齐这样的一叠符号。每个外边距的名称都包括“left-margin-Regular-M”这样的相关配置,因此在自定义符号中添加外边距时,请务必使用这类命名模式。

优化图层以搭配自定义符号使用动画。如果要按图层给符号添加动画效果,请确保在“SF 符号” App 中给图层添加注解。Z 轴顺序决定了要将颜色应用到可变颜色符号图层的顺序,你可以选择是从前往后还是从后往前为更改添加动画效果。你也可以按图层组绘制动画,使关联层一起移动。

测试自定义符号的动画。针对自定义符号测试所有的动画预置非常重要,因为图层在移动时,形状和路径可能不会按你期望的方式出现。若要充分利用此功能,请考虑绘制完整形状的自定义符号。例如,与 person.2.fill 符号类似的自定义符号不需要为表示左侧人像的形状创建镂空。相反,你可以绘制完整形状的人像,此外,为右侧的人像绘制偏移路径,以表示他们之间的间隙。你可以稍后将此偏移路径注解为抹掉图层,从而按预期渲染符号。这种绘制方式有助于保留额外的图层信息,以允许动画按预期执行。

避免制作包括常用变体(如封闭形状或标记)的自定义符号。“SF 符号” App 提供了一个组件库,用于创建自定义符号的变体。使用组件库可让你创建自定义符号的常用变体,同时保持其设计风格与自带的 SF 符号一致。

为自定义符号提供备选文本标签。备选文本标签(或辅助功能描述)可让“旁白”描述可见的用户界面和内容,使视障用户更容易导览。有关指南,请参阅旁白

不要以 Apple 产品为设计原型。Apple 产品受版权保护,不能在自定义符号中再现。另外,对于 SF 符号标识为代表 Apple 功能或产品的符号,你也不能自定义。


平台考量因素

无针对 iOS、iPadOS、macOS、Apple tvOS、visionOS 或 watchOS 的额外考量因素。

0 人收藏了本文

Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Material3设计规范:标签页(Tabs)Material3设计规范:标签页(Tabs)
Material3设计规范:工具提示(Tooltips)Material3设计规范:工具提示(Tooltips)
Material3设计规范:缓动与动效时长(Easing and duration)Material3设计规范:缓动与动效时长(Easing and duration)
Material3设计规范:高度层级(Elevation)Material3设计规范:高度层级(Elevation)
Material3设计规范:动效系统(Motion physics system)Material3设计规范:动效系统(Motion physics system)
Apple HIG:标签栏(Tab bars)Apple HIG:标签栏(Tab bars)
Material3设计规范:颜色角色(Color roles)Material3设计规范:颜色角色(Color roles)