在 SF 符号中采用可变颜色

♪ 柔和乐器演奏的嘻哈音乐 ♪ ♪

您好 我是 Paul 专攻 SF Symbols App 今天我们就来说说 SF Symbols 的一个 全新功能：可变颜色 本期视频将介绍如何在您的项目中 使用可变颜色的符号 以及 SF Symbols App 是如何帮助您完成这项工作的 首先通过系统自带的符号 来看看可变颜色 我将介绍其使用方式和使用时机 然后介绍如何在您的自定义符号中 应用可变颜色 在开始之前 如果这是您第一次 使用 SF Symbols 或者如果您需要复习一下 我建议您看看去年的视频 “探索 SF Symbols 3 App” 该视频介绍了如何 为项目查找和组织符号 您也可以去看看 Thalia 的演讲 “SF Symbols 4 的新增功能” 有助于您大致了解 SF Symbols 的视觉设计 以及今天将展示的各种渲染模式 那么 我们说回到可变颜色 可变颜色是 SF Symbols 的新功能 可使符号外观按百分值变化 通过改变百分值 您可以轻松创建出可以 根据时机 按程度变化的符号 例如信号强度或进度 我觉得 要想学习使用可变颜色 就需要打开 SF Symbols App 让系统用实践说话 今年的 SF Symbols App 我们在渲染检查器中 添加了新的预览区域 您可以一眼就看到符号 在各种渲染模式下的 所有样子 您也可以点击不同的示例 在渲染模式之间切换 这里还新增了一个“自动”选项 此选项可以让每个符号 自动选择系统推荐的渲染模式 在预览的这个位置 可以看到被选中的是哪个 例如 这个方框和上升箭头符号 推荐用单色模式 而这些 iPhone 符号 更推荐用分层模式 在颜色控件下方还新增了一组 可变颜色的控件 还有一个新类别 即 支持可变颜色的符号 我们正好可以用它们试验一下 选择这个扬声器符号 切换到多色模式 然后进入图库视图来细看 先单击这个按钮 打开可变颜色 然后拉动滑块 一直降低 减少当前使用的百分值 可以看到 随着百分值降低 符号暗了下去 当往回拉滑块时 符号的这几个部分重新显示了颜色 仔细看预览区域 可以看到四种渲染示例也在变化 如果切换回图标视图 可以看到 所有可变颜色的符号 都做出了相应反应 那么 刚刚的示范介绍了 可变颜色的哪些内容？ 首先 SF Symbols 可用的渲染模式 都可以使用可变颜色 每个支持可变颜色的系统符号 在单色、分层、调色盘 和多色模式下也同样支持 其次 一个符号中 能应用可变颜色的部件 并没有上限规定 有些符号只在一个图层中应用 有些则应用于几十个图层 不管怎样 因为可变颜色 只通过百分值来控制 所以这些都不是问题 只需设置好百分值节点就可以了 那么系统是如何应用节点的呢？ 要怎么知道 某个图层将在什么时候 应用可变颜色？ 和其他 SF Symbols 功能一样 我们早已设计好了模板 以便您的 App 能够完全契合 Apple 平台的调性 换句话说 我们的设计灵感都来自于 您很可能无比熟悉的系统图标 以这个麦克风符号为例 麦克风左侧的四个点分别位于 应用了可变颜色的单独图层 所以 每个点会分别在达到 特定百分值节点时激活 这些节点都在 0% 和 100% 之间 均匀分布 0% 是特殊情况 此时没有图层被激活 一旦值超过 0% 第一个点将被激活 达到 26% 或更高值时 第二个点也将被激活 51% 及以上的值将激活第三个点 在 76% 到 100% 之间 四个点将全部激活 所以 只有在百分值为零的时候 可变颜色的部分才会完全不显示 例如 Wi-Fi 强度 和电池电量的系统图标 就有这种效果 当百分值从 100% 开始下降时 可变颜色符号可以表现出下降趋势 比如亮度和音量的系统图标 就有这种效果 现在 假设说某个符号有三个图层 应用了可变颜色 那么 每层的百分比节点可能就是 33.3333% 和 66.6667% 这样的尴尬数字 我们不想因为四舍五入的问题 导致什么意想不到的麻烦 也不想让您为此纠结 该在代码中输入多少有效数字 因此 图层之间的节点 将被四舍五入到最接近的百分点 而且 直到当前值比四舍五入的值 高出一整个的百分点 才会激活下一图层 因此 对于 第一个节点 33.3% 会向下 变成 33% 而到了 34% 也就是高出一个百分点后 才会激活第二图层 最后一个节点从 66.7% 四舍五入到了 67% 只有高出一个百分点 也就是高于 68% 时 才会激活最后一个图层 当然 系统提供的符号 并不是 SF Symbols 的全部 在 SF Symbols App 中 您可以制作和注解 自定义符号 更好的是 自定义符号同样能和系统符号 一样灵活 一样强大 我所说的灵活和强大是什么意思呢？ 是这样的 系统提供的 SF Symbols 有 9 种粗细可供选择 而这 9 种不同粗细的模板 还分别有 3 种尺寸 这 27 种变体中的每一种 都可以选择应用 四种渲染模式和可变颜色 也就是有 216 种可能的配置 幸运的是 在使用自定义符号时 您并不需要把符号画 216 次 去年 为了简化绘制符号的过程 我们引入了变量模板 使用模板时 您不需要根据粗细和尺寸 绘制 27 种模板 您只需要画 3 个即可 系统会自动生成另外 24 个 绘制自定义符号后 您可以采用不同的渲染模式 这一过程我们通常称为“注解” 在去年的版本种 如果您想要自定义符号采用 分层和调色盘的渲染模式 需要将自定义符号分成不同图层 并为每一层分配级别 如果您希望自定义符号采用 多色渲染模式 则需要分解自定义符号 再进入不同的图层 分别为各图层设置颜色 这意味着 为了能够 使用所有渲染模式 您必须分别掌握两个图层结构 今年的版本中 我们简化了工作流程 配备了统一的注解 对于一个符号 统一注解采用的 是单图层结构 且所有渲染模式 都可共享该结构 因此省去了多次 将符号分解为图层的功夫 只需要执行一次即可 现在的版本还支持 在图标已进行 分层 调色盘和多色渲染后 继续控制单色渲染模式的符号外观 当然 统一的注解还可以让您 为自定义符号应用可变颜色 所以让我们来注解一个自定义符号 来看看统一注解的工作方式吧 去年 我曾开发过一个 App 方便我家里人不在一个房间时 也能一起玩纸牌游戏 那之后几个月 我又迷上了新的玩意 魔方！ 所以今年 我想做一个 可以帮我练习魔方的 App 我在我的桌面上制作了 一个自定义魔方符号 拖到 App 里来 做成新的自定义符号 我以系统自带的方块符号为基础 制作了这个符号 请注意 我特意省略了一些 魔方的图案细节 好让符号显得更简明清晰 尺寸缩小和线条变细的情况下 也不影响辨认 回到正题 还记得之前的预览区吗？ 这功能在注解自定义符号时特别方便 在该界面对注解进行更改时 在所有渲染模式下的 自定义符号外观都一目了然 如果单击此处 切换渲染模式 或在选择器中选择不同的选项 列表中的注解控件 也会做出相应更改 单色看起来不错 但是还是在分层模式中 增加一些深度吧 切换到该模式 然后把魔方顶面 和一个侧面拖入新的图层 可以看到 这些新层 都自动切换成了 次要的二级图层和三级图层 能给我的符号增加一些深度 和视觉趣味 请记住 我们创建的分层注解 也可以用于支持调色盘渲染模式 所以只需进行一次操作 就有两种渲染效果 现在 切换到多色模式 给这个符号添加些颜色 请注意 当我切换到多色模式时 仍然能看到在分层模式下 分离出来的图层 请记住 使用统一注解时 在一种渲染模式下 对图层结构所做的更改 会同步应用到其他渲染模式 来把正面调成红色 上面变成蓝色 侧面则是黄色 很好 看起来不错 但是对于学习魔方来说 最重要的还是 练习 练习 再练习 所以 我很想用这个 魔方符号作为计时器 让它随着我的练习时间填充颜色 可变颜色就能做到这点 正面的这些独立的小方块 看起来恰好可以应用可变颜色 来充当计时器 让我们将这些小方块 分别放进不同图层 请注意我在图层列表中的 放置顺序 需要先填充的图层在最底下 需要最晚填充的在最顶上 然后 选择所有图层 并单击这个按钮 可以在所有选中图层启用可变颜色 就是这样！ 来拉动可变颜色滑块 看看会发生什么 记得留意预览区 看看不同的渲染模式下有什么效果 可以看到 改变可变颜色中使用的百分值时 每种渲染模式的正面都会调整颜色 这就是统一注解的厉害之处 在一种渲染模式下的编辑成果 可以延续到其他渲染模式 很多时候 您只需要走一两次流程 就能够获得四种出色的渲染效果 哪怕是有更加棘手的需求 SF Symbols App 也能为您提供帮助 来看一个更复杂的符号 还是我的魔方符号 但这一次 它被放置在一个圆圈内 类似于很多系统自带的填充圆形符号 这个符号我已经注解到一半了 可以在这里看到 圆圈已经单独开了一个图层 且魔方各个部分也已 分成了不同的图层 我的符号在多色模式和分层模式里 看起来都很棒 但如果是单色模式 由于魔方和后面的圆形色差小 颜色因此无法产生强烈对比 当符号中的所有路径都在同一图层时 圆形路径中的魔方图形会被镂空 所以单色效果看起来很棒 但是现在 圆形有了自己的独立图层 魔方不会变成镂空图案 而是在实心圆的上方 叠加了一个实心图案 导致图案看不清楚 幸运的是 新功能统一注解 能够帮到我们 我们可以选择擦除 来让该图层 在下方图层展现出镂空效果 这样看起来好多了 现在 再次应用可变颜色 这一次 我全选了正面的所有块面

并在上下文菜单中 选择拆分为新图层 然后用这个按钮再次启用可变颜色 完成了！ 顺便说一句 路径分开的顺序 和在符号模板中出现的顺序一致 因此 如果能在绘图时 注意符号路径的顺序 就可以在之后的步骤节省一些时间 简而言之 这就是统一注解 是注解自定义符号的 一种快速而强大的方法 只需创建一层结构 就可以用于所有渲染模式 现在 您还可以在此基础上 控制符号单色渲染下的外观 您可以在自定义符号中 将可变颜色分别添加到 各个图层 图层在列表中的上下顺序决定了 它们按百分值进行填色的顺序 且每一层的变化节点 都在 0% 到 100% 间 均匀分布 除此之外 由于图层是结构的一部分 所以当图层应用可变颜色时 其成果会被所有渲染模式共享 统一注解还新增了两个图层选项 更便于使用新的共享图层结构 将图层效果设置为擦除 可以在下方的图层进行镂空 在很多情况下都非常有用 例如单色模式 还有用分层符号制作 带加减符号等设计的徽章时 最后 将图层效果设置为隐藏 可以让该图层不适用特定渲染模式 如果您不想让图层效果 应用于所有渲染模式 就可以使用这个选项 好让图层仅应用于某些模式 4.0 新模板格式支持 所有这些新功能 当您从 SF Symbols App 导出符号 准备导入 Xcode 时 请务必导出 4.0 模板 以控制单色渲染 及使用可变颜色 如果您的自定义符号已经 在去年版本中注解过 这些符号将自动 更新使用统一注解 您的分层和多色注解将被自动引入 无需您进行额外的工作 除此之外 如果您 需要早期版本的平台 之前的 3.0 和 2.0 格式 仍可继续使用 在结束之前 我还有一件事想做 我在学习如何解开魔方 的过程中收获了很多乐趣 其中最好的是 我的女儿 看到我解开魔方 她也产生了学习兴趣 自然而然地 我希望她在练习时 我的 App 也能帮上忙 但是她年龄还小 今年秋天才进幼儿园 所以一开始的难度要低一些 应用可变颜色的符号 在这里能派上大用场 计时器 UI 可以设计成这样 纯文字和数字描述得 很清晰 很有帮助 却可能让我女儿这样还在识字 或无法阅读的用户望而生畏 但要是能看着这样一个 和实物相似的魔方 看着色块随着时间流逝 慢慢装填 要更加友好和直观 甚至都不需要更改我的计时器代码 如果要制作一个大号魔方符号 我只需更改正在使用的符号名称 然后沿用之前的百分值节点 SF Symbols 就能完成其余的工作 这就是符号的力量 符号使我们能够以 超越语言和文字的方式 传达我们的想法 使得我们的 App 更具包容性 除此之外 无论可变颜色应用在哪里 系统自带符号 还是自定义符号 都能让我们更好地表现 进度 信号强度和时间等概念 而做到这一切 只需要三张图纸 一个统一注解 再神奇不过了 而且 我不得不说 这要比解开魔方简单多了 ♪