Apple HIG:SF 符号(SF Symbols)

2026年4月28日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

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



Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)