创建自定义符号

哈啰 欢迎来到WWDC 我是麦克 今天我们将带大家了解 如何利用SF Symbols 3 的新功能 制作自定义符号 首先我们先来复习何谓自定义符号 以及在什么状况下会想使用这项功能 自定义符号会使用到SVG模板 在SF Symbols 3中有个全新的模板 因此我们会说明新旧版本间的差异

我们会示范如何建立模板 编辑符号 以及面向单色以外的渲染模式 做好准备

我们会讲解注释 也就是在符号上 添加渲染模式数据的流程

还会讨论一些先进技术 能够大幅度改善工作流程

最后我们会结束在将数据导出 到Xcode 以及如何分发你的自定义符号 让我们开始吧 什么是自定义符号？ SF Symbols于2019年发布

在最初的版本中 有超过1500个符号 可供你的app使用 之后 符号的数量愈来愈多 两年后 随着SF Symbols 3发布 符号数量已突破3000个 而今这些符号的种类繁多 有各种主题及类别 但你的app可能会特殊需求 现有的SF Symbol无法提供 例如一个在圆圈里的茶杯 这就是自定义符号派上用场的时候

如果你需要一个自定义符号 你会用一连串的 矢量路径将它画出来 然后放到自定义的模板上 模板的格式是SVG 包含了你的设计及一些说明

这个模板是一个机制 让你的自定义符号 能够充分利用 SF Symbols提供的功能 包括排版对齐功能 确保符号能美观地与文字并排呈现 边距功能可确保在列表 及表格视图中 符号能居于视觉中央

粗细调整功能可以确保与文本样式相对应 也可以随着辅助功能而调整 例如iOS辅助功能中的粗体文本

最后是三种与粗细相对应的比例 可以针对不同UI元素的情境进行调整 这些就是SF Symbols 以及自定义符号的重点特色 若想复习基础的自定义符号模板 建议观看 2019年WWDC的“认识SF Symbols” 想知道更多SF Symbols背后的 设计细节 请观看 2021年WWDC的“SF Symbols最新消息” 我们已经知道何时可使用自定义符号 现在来复习用来创建符号的模板 为了呈现SF Symbols 3的 新功能 模板也有了 新版本 版本3.0 这个版本的模板 比起版本2.0 多了几项重要的新功能 需要Xcode 13以上才能支持

在3.0版本中 左右边距的指引 有了更清楚的名字 能对应到 所属的设计变量

这些边距 举例来说有“标准-M”后缀

也就是说为了更精准地 进行视觉校正 模板上所有的变量 都能增加边距 只要边距名字的后缀能够对上 某个设计变量 它便能够成立

更重要的一点 这种模板格式 在不同的渲染模式中 都能嵌入符号样式 这类信息 我们能针对既有的渲染模式嵌入数据 例如单色和多色模式 以及新的分层模式和调色模式 所使用的数据 除此之外 模板3.0 还能支持某些先进功能 让你能够 事半功倍 在“先进技术”这个部分 我们将会探讨得更深入 新模板的完整规格说明 请由以下网址查阅最新文件 Developer.Apple.com/SF-Symbols

我们已熟悉了新的模板 现在来学习自定义符号 我目前正在开发一个纸牌游戏app 几个同事也一起参与 SF Symbols app 已经满足了大部分对于符号的需求 包括有四种花色及堆叠的样式 可供我们用来呈现一叠纸牌 唯一欠缺的是用来 呈现红心皇后的符号 红心皇后是我们app的重要角色 我想要一个皇冠上面有爱心的符号 我先将SF Symbols app开启 便能够改造SF Symbol上既有的符号 这样 我便能有一个参考基准 关于粗细、大小、以及整体感 如果我在SF Symbols app上检索 “皇冠” 便能发现 一个不错的空心版本 这会是一个很好的起始点 我只需要在上面加上一颗爱心

我先选择“皇冠” 然后在快捷菜单上 选择复制成自定义符号 在旁边的自定义符号区块上 便产生了一个我刚刚复制的皇冠组件 “自定义.皇冠”有点笼统 所以我重新命名为

“皇后.红心” 这样更具体 更符合我脑中的想象 这是一个创立新自定义符号 很好的开始步骤 但你可能会有一些以前建立过的符号 使用1.0及2.0自定义符号模板完成的 这不是问题 你可以将既有符号放进app中 它便会自动加入 现有的选项群中 并且上调成 3.0的版本 一旦符号进入选项群 我便可复制一个SF Symbol 像刚刚的“皇冠”一样 也可以导入一个自定义符号 例如“茶杯.圆圈” 我也可以将符号导出到 我想要的设计app上 例如Sketch、Illustrator或Figma 使用导出功能时 我先选择 文件导出模板 或用Command + E 如此便会将3.0版本的符号 以单色模式导出 我便能够自定义样式

由SF Symbols app所产出的符号 3.0 模板的初始设定 有两种方式：静态及动态 依你的设计需求做选择

大家应该很熟悉静态设定 因为类似于2.0模板 共有27种路径及一组 标准的中尺寸明确边距 如果你想要特定的粗细及大小 或者符号的设计变量只有 一、两个 这种设定就很适合 另一方面 动态设定 产出的3.0模板会有三组 路径以及三组边距 如果你想要满足所有的设计变量 最好选择动态设定 因为它能够提供最小数量的 设计变量而能够产出其它24种 这需要你所有的路径 具有高度的兼容性及一致性

但先别担心这个 我们稍候将会回头深入探讨 这个模板的需求及设定 现在我将导出一个静态设定 因为我只打算设计一、两个变量 我设计app上的样板已开启 我可以开始进行编辑

与使用2.0样板类似 我能够删除不需要的设计变量 留下我需要的来设计

路径不兼容的模板 仍然需要“标准-中” 因此我会从此处着手

在皇冠中间的尖顶上方 先留下空间给爱心 我想要这符号在多色模式中也会好看 因此我会调整路径 之后我的符号 就能针对不同区块填上不同颜色 经过这些调整之后 我有了一个封闭的形状 代表皇冠的空心处 接着 我将聚焦在爱心上

在我编辑符号时 可以使用画笔调整 粗细度到“标准-中” 因为我在制作的是一个笔划符号 这让我在重复调整爱心的比例 及大小时有弹性

但请注意 务必要将 你满意的设计由描边转成路径 转成路径能确保描边的形状 接下来能够上色 转成路径的另一个好处是 能够进行一些视觉上的微调 当我们觉得笔触不够精准时 就像这个 爱心上半部的 内缘笔触太粗而且太圆 因为我已转成了路径 便能够微调曲线 让它不那么笨重

现在我完成了设计 是个好时机来谈一些 注意事项 当你希望符号 能够支持单色以外的渲染模式

要避免在最终的设计步骤使用描边 而要确认所有的笔触都要转换成 路径 所以最终的形状 便能够被上色 或被分层群组使用

避免使用开放路径 这种类型的路径有个起点 以及终点 这两点不相连 因此就无法形成封闭的空心图形 这些形状便无法被上色 所以 请确认所有设计出来的图形 有封闭且精准定义的填充区域

避免涉及一种颜色以上的填充区域 例如渐变色或是投影效果 如果这些效果存在的话 它们会覆盖 你为你符号所设计的 多色数据或分层数据 请确认使用标准的平面填充 不要添加额外效果 现在再回到我的设计工具 模板上没什么内容

我需要加上半粗体 所以我的符号 才能响应iOS上的 辅助功能里的粗体文本 在这个步骤 建议用复制既有图案 到你希望的分层上 接着进行调整

这会是一个好习惯 因为这能确保 所有的设计变量 拥有相同的路径数量

确保所有设计变量 的路径数量 是个必要条件 如果你想要产出 拥有多色数据及分层数据的符号

这个例子当中 我已将路径上色 指明它们的数量及顺序 两项设计变量都有四条路径 前两个路径组成了文件夹 第三个路径是圆圈 加号图案是第四条路径

因此这两个图形上色之后很美观

这些图形也都是四条路径 但如果你有注意到的话 我把 路径顺序往右移

主要的文件夹图形是第一条路径 它在左侧 第三条路径在这幅图画的右侧 设计拥有相同数量的路径 但顺序不同 结果会相当不一样

如果我们想让这些图画 以多色显示 它们会不对称 绿色的加号徽标被加在这款设计 右侧的文件夹上

回到皇后.爱心符号 目前看起来很棒 因为我很注意设计变量的创建方式 我能够用注释功能支持多色模式 以及分层模式让它看起来更棒

在这个步骤之前 我必须把符号 导入我的app 我能直接将符号导入现有的组件上 之后在SF Symbols app上进行更新

现在并不需要注释你的符号 但如果你想控制符号在 单色模式以外的渲染模式上的 呈现效果 加上注释会是个好主意

加注释需要针对 组成了整个符号的每个路径

从这里你能替每个渲染模式 创建一组分层 分层是由一组拥有 相关数据的路径组成 这是拥有七条路径的皇冠的一组分层 这组分层是有两条路径的爱心

多色模式的分层会被指派一种颜色 分层模式的分层 则被指派到某个分层群组

分层具有明确的z顺序 上方的分层 会盖住下方的分层 这与在设计应用上 创建分层相同 加注释的第一步 是在app上选择符号 然后进入画廊视图 在右侧的检查器上 我可以选择渲染模式标签 我就能够预览以及注解符号

我能选择单色 分层、调色、或多色模式 除了单色模式之外 其余的模式 都能编辑及增加分层

预览画面在中央 这里我们能够自由调整 已建立好的路径 并将它们分层

我将从多色渲染模式开始

我替皇冠创建一个新分层

接着便能替皇冠选择一个颜色 在彩色分层 我能选择 各种不同的系统颜色 或是用我的自定义色 但建议尽可能地使用 系统提供的颜色 因为它们能够随着 系统的显示方式进行调整 不管在浅色模式 深色模式、高对比度模式、以及其它 鲜艳背景之下都能呈现最佳效果 我选择系统提供的黄色给皇冠

这层就完成了 接着处理爱心 我在它的分层上加上红色

在多色模式我想让皇冠增加深度 我可在符号中空处 设定颜色

路径可使用在每一个分层 为了完成一个有颜色的图案 我增加一个分层 含有透明路径 将它设定较高的透明度

爱心也是一样的设定

看起来真不错 接着我将继续分层模式

我可以用先前的做法设定分层 但这次设定的不是颜色 而是分层群组 从第一层到第三层 分层数据会被用在 分层模式以及调色渲染模式

我将皇冠设定在第二层

爱心设在第一层

在预览模式时我看到 爱心之下有一些些皇冠的线条 在它们交错的地方 因为爱心不是完全实心 这是重叠图形设计 常见的问题

为了控制交错处的显示方式 每一层的右方会有一个切换按钮

如果开启 透明层将会与 下一层混合 如屏幕左方的显示 这是预设值 如果开启 透明层 将会覆盖下面的分层 造成其它分层 看似不存在 如屏幕右方显示的

将设定切换至清除后方 符号就能呈现出我想要的样子 分层注释数据也可用在 调色渲染模式 所以我得确认 分层互动效果在此处也会是美观的

这看起来真棒 浅蓝色这一层是透明的 但因为切换至清除后方 爱心下方便看不到靛蓝色皇冠

在调色渲染模式 我的符号 能设定二至三种颜色 而不仅是一种 与分层设定相同 我们来复习这两种模式用来上色的 分层注释设定有何不同

分层模式使用一种颜色 将颜色 放上符号的分层 随着分层不同透明度也有所不同 这种状况下 符号有第一群组 及第三个群组 调色模式可放上二至三种颜色 随着颜色数量的不同 显现的效果会有所不同 使用两种颜色的话 颜色将会 分配给现有的分层群组 不管它们的层级如何 因为这个符号只有两个群组 第一颜色会进入第一群组 第二颜色则进入第三个群组

如果使用三种颜色 每种颜色 将会进入到所对应的分层群组 第一个颜色会进入第一群组 第二个颜色进入第二群组 第三个颜色进入第三群组

如果需要继续编辑 已加上注释的符号 你要导出一个模板 在你的设计工具上编辑 单色的呈现方式 再将符号导入 并且确认 原有的注释没有被破坏 当修正加上注释的符号 路径时要特别小心 不要破坏原有的注释数据 注释数据需要在所有的设计上 保有相同数量的路径 你能够 安全地增加、移除、以及调整点数

但重整或移除整条路径 将会让你的设计走样 因为注释资料的缘故 遇到这种状况 你需要重新注释 符号 以配合新的路径结构 现在 我的符号有两种设计变量 已加上注释 因此它在其它的 渲染模式上也会很美观 我可以停在这里 但如果我需要支持 其它的尺寸组合及粗细组合呢？ 在这一个段落 我们会讨论 设计自定义符号节省时间的技巧 当你想要设计三种以上的变量时

在从前 我会在样板上一个接一个 继续填满这些变量 调整路径以达到心目中理想的 粗细及大小 但现在有了SF Symbols 3 我们有了更简便的做法 如果你有数据兼容的 三种设计变量 接下来的模板将可免费取得 当你使用3.0的变量模板 这就是你会得到的SVG架构 让我们进入产出 兼容的设计所需要的条件 首先 我们确认 我们的设计来源 这些是“超轻-小” “标准-小”、“黑-小” 如果这些都存在 路径会分析 所有的来源 看它们是否兼容 先聚焦在“标准-小” 以“黑-小”的来源做为对照

所有的设计变量当中 其所有的路径必须 有同样的数量及顺序 与先前说明的注释需求相同 我已将这里的皇冠路径上色 以标出它们的顺序 总共有九条路径 而且彼此兼容

举例来说 爱心的两条路径 在两种设计变量上 都是第八及第九条路径 目前的状况很好 接下来确认所有设计变量 其对应路径的内部 我们来比较标准来源 以及黑色来源之下的爱心外部路径 每个路径都是由一连串的点所构成 有24个标准来源的红点 24个黑色来源的蓝点

为达到兼容 在路径的相对位置上的 每个点必须一模一样 每一组互相对应的点 会形成一条假想线 在它们所属的假想线上移动这些点 能够让我们融合这两条兼容的路径

因为标准来源上的每一个点 都能与黑色来源上的点相符 因此我们可以这么做

现在聚焦于比较小的 红色爱心并观察当它与较大的 蓝色爱心混合时的路径变化

混合能够让我们随时产生 新的路径 只要这两条路径是兼容的 这种混合方式被称作“插值” 现在我们学会了在点这个层级 如何运用插值 现在将之放大运用 在整个符号上

你会发现处于超轻、标准 以及黑色之间的尺寸都可以被计算

这个尺寸平衡机制 是必要的 当你需要为符号产生中型至大型尺寸 的设计变量

我们来总结这些需求 当一个符号能被认定为插值时 需要三个条件

第一 三个设计来源 “超轻-小”、“标准-小” “黑-小”

第二 路径兼容

不同来源的路径需要互相符合 最后 点的兼容性 所有相符的路径需要有同样数量的点

那么我该如何制作 插值符号呢？ 我不选用静态设定 我会将 动态设定的3.0样板 自SF Symbols app导出 通过这种方式 我的三种来源设计 都能够有边距及草图

我会从“标准-小”开始 把爱心加在上方 如同先前设定“标准-中”那样 这一次只是尺寸比较小

因为插值有很严格的要求 建议先将 原始的“标准-小”设计变量 的形状稳定之后 再进入其它的来源

当你进入“超轻-小” 以及“黑-小”来源时 最好复制 贴上“标准-小”的路径 之后再开始进行点的调整

这是确保你的自定义符号 能够产出其它设计变量的关键 让我们再复习一次

当你想要制做可内插的符号时 避免增加及移除点数 因为这会破坏兼容性

举而代之的用调整的就好 移动及控制这些点是可以的 因为这不会破坏 设计之间的兼容性

准备好之后 我便能在app上的 自定义符号组件处放上更新的模板 用先前介绍的方式开始加上注释 因为我很小心的设计来源 我完成了27个变量 我已经准备好开始启用了 我们已经说明了如何建立 自定义符号 接下来将说明下一步 例如如何分发你的符号

分发符号的方式有两种 你可以汇出一个2.0或3.0的模板

2.0模板只会使用在 当你想回溯建置在一个较旧的OS上 例如iOS 14 它只有单色模式 所以请确认 你的符号适合被用在这种模式

转换成2.0样板是个耗损的操作 注释数据以及清楚的边距会被移除 因为旧版的OS不了解这些

3.0则能嵌入你加入的多色 及分层数据 以及其它自定义边距 但向后兼容没办法

请注意 这个模板无法 被用来编辑 现有的设计工具可能无法 与其内嵌的注释数据完整兼容 如果你需要编辑你的符号 或与其它同事分享 它需要被重新导入SF Symbols app 之后就能继续作业 单色呈现 不用担心 注释资料受损

你导出的3.0模板应该直接 进入Xcode 或回到SF Symbols app上 如果你只想在iOS 14上发行 你需要导出2.0及3.0模板 在确认版本之后 选择适用的模板

如果你只想在 iOS15及之后的平台上发行 你只需要导出3.0模板

如果你想将符号 分享给同事 请导出3.0模板 他们便能够将它导入 他们的SF Symbols app 接着进行编辑及注释 我们今天介绍了很多内容 来做个快速总结 我们提到了新版的 3.0自定义符号模板 它的功能以及如何编辑 也提到了如何替你的符号加上注释 加上多色及分层数据

也探讨了要求更为严格的 先进的工作流程 以期好好利用插值 最后我们提到了 如何分发你的符号

一旦你将符号释出 它们就能被OS使用 有一些新的API可供选择 让你的符号能以最佳的模式呈现

更多有关SF Symbols编码 以及自定义符号编码 请观看“SF Symbols in UIKit and AppKit” 以及“SF Symbols in SwiftUI” 都在2021年的WWDC 这就是自定义符号从头至尾的流程 希望你能享受自定义及注释符号的乐趣 [欢快的音乐]