SF Symbols 简介

SF Symbols 在 WWDC 2019 期间推出。自此Apple 为我们提供了免费 Symbols,供我们在应用中使用,而且使用它们非常简单。 不久前,WWDC 2020 又引入了 SF Symbols 2.0,这让我们在 app 中使用精美的图标更加容易。

对于不太懂设计的开发人员,真是件大礼物。

什么是 SF Symbols

SF Symbols 是一组符号,大概有 1500 个之多。它们在 app 中可以按照各种 weights and scales 进行对齐和配置,以适应我们的设计。 由于它们已集成到 San Francisco 系统字体中,因此它们会自动确保与所有 weights and sizes 的文本垂直对齐。

sf-symbols
SF Symbols 适用平台
  • iOS 13 and later
  • watchOS 6 and later
  • tvOS 13 and later

由于 Symbols 包含在 San Francisco 系统字体中,因此我们也可以在 Mac 应用程序中使用它们,但需要注意许可协议。

SF Symbols 2.0 – 有什么新特性?
最新版本新增超过 750 symbols

SF Symbols 2.0 包含超过 750 个新的 symbols, 如 devices, health, transportation symbols 等等。 新的 symbols 只适用于 iOS 14, iPadOS 14, and macOS Big Sur 及以上版本系统.

改善 optical alignment

使用 SF Symbols 的挑战之一是光学对准。 如果与 San Fransisco 系统字体一起使用,可以确保自动垂直对齐,但是直到 1.1 版之前,都无法很好地水平对齐。

通过 2.0 更新,我们现在可以为 Symbols 提供标准和自定义 Symbols 都支持的负边距(negative side margins)。 这在水平对齐符号方面给了我们更多的控制权。 例如,我们可能有一个包含徽章(badge) 的 Symbol,在这种情况下,我们需要在视觉上稍微水平地移动 Symbol 。

一个小警告是,这些 Symbols 中的两个可以彼此相邻放置,并且负边距与两个Symbols 重叠。 尽管这种情况很少见,但我们可能需要在两 Symbols 之间添加额外的空间或其他内容(extra space or other content),以免发生冲突。

多彩 Symbols

可以通过应用简单的为 SF 符号着色。与有色符号相比,新引入的多色符号(multicolor symbols)具有独特性,因为它们会自动适应外观模式(appearance modes),辅助功能设置(accessibility settings)和鲜艳度(vibrancy)。 这是快速支持许多不同方案的好方法。

Localized symbols variants

另一个重要的新功能是支持从右到左书写系统,比如希伯来语(Hebrew),阿拉伯语(Arabic)和梵文(Devanagari)等。 这些 symbols 经过优化,在那些系统中看起来很棒。

SF Symbols 可以随便用吗?

当然不是,可以查看苹果官方说明,这里有 license agreements :

您不得在应用程序图标,徽标或任何其他与商标相关的用途中使用 SF 符号。 Apple 保留进行审查的权利,并有权单方面决定要求对违反上述限制的任何Symbol 进行修改或中止使用。

限制符号(Restricted symbols)

除了许可协议之外,还有一系列符号,只能用于说明特定的 Apple 技术。 如果使用苹果官方 symbols 进行它用,你的 App 有可能被拒。

这些符号的完整列表可在 Symbols for Use As-Is 中找到。

怎么查看可使用的 symbols

Apple 提供了一个查看 SF Symbols 的客户端软件。该软件可以查看、copy, 导出可使用的 symbols。
该 app 可以在这里下载 here 。软件需要系统为 macOS 10.14 及以上版本.

该软件可以使用不同 selected weight 进行查看。上图使用 medium weight 查看,下图则使用 UltraLight weight:

此外,我们还可以以列表形式查看:

Exporting a symbol

该 app 允许您使用文件->导出符号...或⌘E将所有符号导出为 SVG 格式。这是在无法使用字体本身进行表示时使用符号表示的好方法。但是,别忘了许可协议哦。

通过网页查看 symbols

值得一提的是,我们也可以在 sfsymbols.com这个网站查看 symbols。

通过在此网站上进行搜索,我们可以查看每个图标(如果存在)的应用限制:

但是,由于前面描述的许可证限制,它们只能显示符号的名称,所以使用Mac应用程序会更好一些。

创建自定义 symbol

你可能感兴趣的:(SF Symbols 简介)