本文基于 WWDC 2021 Session 10288 和 Session 10250 梳理。首要评论了在新推出的 SF Symbols 3 App 中怎么按需求定制一个符号,包含应当怎么运用可变和静态模版来简化定制这一进程,强调了一些运用模版时的注意事项。

阅览本篇文章需求对 SF Symbols 有必定了解,引荐阅览内参 SF Symbols 运用指南

  • WWDC21 – SF Symbols 3 运用指南
  • WWDC21 – 定制归于你的 Symbols
  • WWDC22 – SF Symbols 4 运用指南

本文是 WWDC21 内参 的供稿,如今关注 老司机周报 就可免费收取。

SF Symbols 3 App

为了便利开发者更快捷、轻松地运用符号,Apple 在 iOS 13 中开端引进他们自己规划的海量高质量符号,称之为 SF Symbols。SF Symbols 具有超过 3100 个符号,是一个图标库,旨在与 Apple 渠道的系统字体 San Francisco 无缝集成。当咱们在运用 SF Symbols 的时分,不可避免的需求去查询这么多符号的详情信息,这时 SF Symbols 3 App 就显得尤为要害。

定制属于你的 SF Symbols

在的 SF Symbols 3 App 中,咱们能够查询到每个符号的称号、变体、适用的版别等等,咱们还能检查 4 种渲染方式下的各个符号的形状,也能够经过更改强调色和背景色来测验符号在不同环境下的表现。除此之外,当咱们想定制归于自己的符号时,SF Symbols 3 App 也供给了一些帮助便于咱们操作。下面咱们将会举一些例子来演示怎么在 SF Symbols 3 App 中怎么简略定制一个符号并运用。假如你不是很了解 SF Symbols 的特色和细节,能够查阅这篇内参 SF Symbols 运用指南。

怎么运用 SF Symbols 3

SF Symbols 数量特别多,当咱们想要找到某个特定的符号时,咱们能够经过 SF Symbols 3 App 左边的导航栏来依据不同的分类来找到咱们想要的符号。例如当我想检查与气候相关的一切符号时,我就能够在左边的导航栏中挑选「气候」这个分类就能到达所要的意图,再例如当我想要寻找一切扑克牌的花样时,我也能够在右上角的搜索栏中搜索「suit」,这样就能找到有一切扑克牌的花样。

在这次更新的 SF Symbols 3 App 中,咱们也能够经过点击每个符号来检查他们的称号,在不同渠道上最低所支撑的系统版别,关于有本地化的的一些符号(例如字典符号、签名符号等),咱们也能够在 app 中检查符号在不同本地化状况下的表现。别的咱们还能够更改符号们在不同渲染方式中强调色以及背景色来预览作用。

定制属于你的 SF Symbols

简略定制一个符号

接下来展现一下怎么运用 SF Symbols 3 简略定制一个符号。首要,咱们能够挑选以某个系统符号为根底,右键 挑选仿制为自定符号,随后咱们就能在左边导航栏中的「自定符号」分类中找到你刚刚挑选的符号。在这个分类中,咱们首要能够按自己的需求更改符号的称号,然后能够经过 菜单栏 -> 文件 -> 导出模版 来导出该符号的 .svg 模版文件来进行规划上的修正。

定制属于你的 SF Symbols

在规划软件中修正结束之后,你能够把该文件直接拖回 SF Symbols 3 App 中,成为你的新自定符号。别的,在渲染方式处,咱们能够调整这个符号在不同的渲染方式下的预设状况,例如调整分层方式下的层级结构的次序、调整多色方式下的预设色彩、调整符号的具体层级结构(如将本来两层的符号扩展成三层)、调整多色方式下的预设色彩等等。至此,咱们就完结了一个简略的自定符号。

定制属于你的 SF Symbols

在规划软件中运用符号

当咱们想把在 SF Symbols 3 中生成的符号放到规划软件中运用时,这儿介绍两种运用方法:

  • 右键以符号的方式仿制他们,这样就能保存他们原有的对齐,边界间隔等,便利与文字关联的规划排版
  • 右键以图画的方式仿制他们,这样能便利符号以图画的方式在界面中安排排版

定制你的符号

符号的模版及其特色

自定符号常常源于咱们的需求,有时分你或许想找到一个比较特别的符号可是规范的 SF Symbols 中没有适宜的,这时你能够考虑自己制作一个全新的符号。在定制符号的时分,咱们能够运用从 SF Symbols 3 中经过 菜单栏 -> 文件 -> 导出模版 来导出某个符号的 .svg 模版文件来进行修正,在该文件中,咱们能够看到关于这个符号的 3 种尺度和 9 种字重的形状。扩大一些,咱们还能看到关于每个符号的边缘,模版中有清晰的边界线,模版中的边界线是用来指导规划符号时,要注意其具体位置,便利之后导出为符号时与文字或许其他符号的对齐表现,也会便利在工程中运用符号时对边缘的控制和对齐。

定制属于你的 SF Symbols

在新版的 3.0 模版中,关于模版中的边界线有了更加清晰的称号标识

运用静态模版定制符号

在导出模版的时分咱们能够挑选静态模版或许可变模版。假如挑选了静态模版,那你的模版和 2.0 的模版相差的不多,你能够手动调整这 27 个符号。假如你只想规划某一个特定标准的符号,那你能够删去模版中一切 27 个符号,然后开端创造,引荐你从 Regular 尺度,Medium 字重的符号开端规划。

在规划符号的进程中,要注意的一个点是:要用关闭途径 + 填充作用去完结一个符号,而不是运用一条简略途径 + 途径描边(stroke)来完结一个符号。假如你运用的是简略途径 + 途径描边来完结一个符号,那你的符号在除了单色方式以外的渲染方式下会呈现古怪的问题,因为符号的各个层级将无法区别,在填充色彩方面也或许遇到问题。更严重的是假如你运用的是可变模版,那可变模版将无法正常作业。

定制属于你的 SF Symbols

运用可变模版定制符号

当你运用的是静态模版来定制符号时,你必定在想:疯了,我为什么要做 27 个差不太多可是又不一样的符号。那在这次 SF Symbols 3 的更新中,SF Symbols 3 推出了新的 3.0 可变模版,运用可变模版,你能够只规划 3 个标准的符号:Ultralight – Small、Regular – Small、Black – Small,你就能够经过可变模版来主动获得剩余的 24 个不同标准的符号,而无需手动规划全部 27 个符号。

定制属于你的 SF Symbols

想要到达这一补全作用,你也需求恪守一些规则:

  • 上文提到过的要运用关闭途径 + 填充作用去完结一个符号
  • 不同标准的符号,他们的途径数量和次序应当是共同的
  • 不同标准的符号,构成他们形状的点的个数应当是相同的

定制属于你的 SF Symbols

这意味着当你先制作了一个 Ultralight – Small 标准的符号之后,你能够仿制一份放到 Regular – Small 处,然后经过调整符号规划中各个点的位置来将 Ultralight – Small 调整成 Regular – Small 标准。但不是经过增加一些点或许减少一些点来到达你要的作用。下图演示了一条来自 Ultralight – Small 的途径和一条来自Regular – Small 的途径,能够看到他们是一一对应的。

定制属于你的 SF Symbols
当你恪守了这些要求之后,你只需求规划三个标准的符号,就能主动补全剩余的一切标准的符号。这样能便利其修正,微调某个符号的细节,减少规划符号时无谓的重复作业。

怎么导出并运用定制符号

因为在不同的系统版别中对 SF Symbols 的支撑程度不同,当你在模版中定制完了你的符号之后,依据系统的版别,你需求挑选不同的导出版别:

  • 当你的 App 仅支撑 iOS 14 以上,你只需求导出 3.0 版别
  • 当你的 App 支撑 iOS 14 以下,你需求一起导出 2.0 版别和 3.0 版别
    • 3.0 的版别用于 iOS 14 以上
    • 2.0 的版别用于 iOS 14 以下
  • 当你只是想将模版文件共享给你的朋友,共享 3.0 版别即可

总结

当现有的 SF Symbols 满意不了咱们的需求的时分,咱们能够挑选定制一个自己的 Symbols,可是规划 27 个符号确实让人望而却步,不如运用一张图片来的直接便利,这次更新的 3.0 模版改进了这一状况,将本来规划的作业量成倍缩小。这些更新 SF Symbols 做到了让规划师和开发者更便利地运用符号,以及更有意识地从源头将图片素材和符号素材进行区别,别的 SF Symbols 在其他方面的新特性新功能也让咱们对 SF Symbols 有了更多的期待。

更多材料

以下是更多关于 SF Symbols 的材料:

  • [ WWDC 21 ] What’s new in SF Symbols
  • [ WWDC 21 ] SF Symbols in UIKit and AppKit
  • [ WWDC 21 ] SF Symbols in SwiftUI
  • [ WWDC 21 ] Explore the SF Symbols 3 app
  • [ WWDC 21 ] Create custom symbols
  • [ WWDC 20 ] SF Symbols 2
  • [ WWDC 19 ] Introducing SF Symbols
  • [ Human Interface Guidelines ] SF Symbols
  • [ Developer ] SF Symbols