SF Symbols 5 的新功能

♪ ♪

Thalia：大家好，我叫 Thalia， 我是 Apple 设计团队的 一名设计师。 稍后，我们将深入探讨 新功能和更新。 但如果你还没准备好， 请查看去年 WWDC 的相关讲座。 它可以让你有相关了解后 快速进入状态， 并准备好迎接今年的更新。 今天我们想向你隆重介绍“动画”， 这是我们今年推出的 一个超级棒的新功能。 我们将探讨一些绘制动画时的技巧。 最后，也同样重要的是， 我们将向你介绍最新符号中的 所有新增内容。 让我们现在开始吧！ SF Symbols 自问世以来， 已经改变了 开发者和设计师 在所有 Apple 平台上， 创建和谐一致用户界面的方式。 这个演进过程 经历了一系列重大的更新。 最初，SF Symbols 提供的是单色符号。 这些符号在界面设计中提供了 一致性，同时也给人一种熟悉感。

在 2021 年，SF Symbols 变得非常灵活多样。 它提供额外的渲染模式： 分层模式、调色板模式和多色模式。

而在去年，也就是 2022 年， 引入了可变颜色， 使符号能够传达不同的强度水平 或随时间变化的序列。 SF Symbols 一直致力于 使符号更富有表现力， 这源于我们希望创建兼具功能性 和视觉吸引力的 引人入胜的用户界面。 因此，我们很高兴 向你介绍“动画”， 这是一种为你的界面 增添活力和动感的新方式。

你可以从一系列不同的 可配置动画预设中进行选择， 每个预设都具有独特的特点， 这些预设适用于所有符号， 所有比例和所有渲染模式， 使符号比以往更具可定制性。 在我们查看资料库中 不同的预设之前， 有几个概念你需要了解。 首先，符号图层与动画 之间的关系概念。

提醒一下，资料库中的每个符号 都有一个统一的图层结构来定义它。 确保图层按正确的顺序排列很重要， 因为它决定了如何应用颜色。 如你所想，图层在符号动画中 也扮演着至关重要的角色。

在默认情况下， 符号按图层进行动画。 这意味着每个图层将逐个进行动画， 使符号的编排具有 清晰而精确的运动效果。 另一方面，如果你发现有些情况下 你更喜欢所有图层同时移动， 你也可以选择以整个符号为单位 进行动画。 接下来，动画中还有一个概念， 即动画中的空间。 这个空间指的是 符号在运动时所使用的维度。 通过这种维度 可以给符号赋予深度感。 这些维度并不可见， 但它们帮助我们理解 符号的移动和交互方式 使得动画更加吸引人。 让我们以这样的方式 将这些平面可视化： 中间平面是位于三维空间 中心的平面， 这个平面 是符号定位和移动的参考点。 前置平面是离观察者最近的平面， 位于这个平面上的符号会显得更大。 背景平面则是离观察者最远的平面， 这个平面定义了符号交互的 尺度范围， 位于这个平面上的符号会显得更小。

符号根据方向性使用这些平面。 根据动画类型的不同， 符号可以 以各种方式在平面之间移动， 例如向上再向下，或向下再向上， 甚至可能 完全消失在观察者的视线之中。

在这些概念的基础上， 让我们来看看新的动画库。 该资料库包含了一系列独特的预设， 每个预设都可以进行配置。 其中包括出现、消失、弹跳、缩放、 脉动、可变颜色和替换。 让我们进一步了解它们。

我们从出现动画和消失动画开始。 出现动画用于 在界面中引入符号， 这是一个视觉效果。 通过逐渐出现的视觉效果， 展示符号并吸引注意力。 另一方面， 消失动画是出现动画的反向效果。 用于从界面中移除符号， 这有助于提供视觉反馈。 例如在需要通知删除 或移除元素的情况下。 接下来介绍弹跳动画， 这种类型的动画以快速、 弹性般的运动为特点， 模拟物体弹跳的效果， 并且可以以多种不同的方式应用。 该动画可以通过提供反馈 来告知用户与符号的交互是否成功， 或某个动作是否已发生。 它可以加强符号试图传达的概念， 使其显得更有趣。 或者它可以营造一种活力感， 使符号更具互动性和吸引力。 让我们看一个例子， 这个滑块代表了 从最小亮度水平到 最大亮度水平的连续范围， 滑块的左侧是符号 sun.min， 右侧是符号 sun.max。 它们在视觉上传达了滑块的功能， 因此，当滑块被拖动到最右端时， 将触发弹跳动画。 这是一种很好的视觉反馈方式， 提示屏幕已达到最大亮度水平。 下一个是缩放动画。 缩放动画通过改变符号的大小 来提供视觉反馈。 根据需要按比例增加， 或缩小符号的尺寸。 这种效果可以确认 某个动作已经发生， 也可以通过突出 其重要性来吸引注意力。 例如， 一个符号在短时间内增大一些， 然后恢复到原始大小 以提供一些视觉反馈， 表明与该符号的交互已经被接受 另一方面，如果符号缩小， 然后恢复到原始大小， 会给人一种按键被按下的感觉， 这种效果模拟了物理按键的行为， 帮助我们了解 何时识别到了一个操作。 如果你想让你的界面 在响应用户的操作时更具触感， 这是一个很不错的选择。 让我们来看一个 使用“缩放”动画的示例， 当鼠标悬停在文件夹上时， “缩放”动画会触发增大符号， 这个动作使符号保持在放大的状态， 有助于聚焦于该符号。 当移动到下一个符号时， 我们会看到相同的动画发生， 现在将关注点 从文件夹转移到列表上。

你可能想知道 何时选择弹跳和缩放更合适。 弹跳传达的信息是一个动作已经发生 或需要发生。 而缩放则可以在选择一个项目时， 提供焦点或反馈。 此外，缩放效果还具有状态， 也就是说，缩放状态会一直保持， 直到效果被取消。

现在，让我们来了解一下脉动动画， 这是一种通过改变透明度 来传达持续活动的动画效果。

根据符号的设计， 脉动可以充分利用符号中的图层， 加强它所要传达的概念。 让我们来看看这个示例， 这个符号代表某人 正在分享他的屏幕。 为了在会话期间 以不显眼的方式传达持续的活动， 我们可以选择让整个符号进行脉动， 或者，为了充分利用这个特性， 我们可以选择 只让代表屏幕的形状进行脉动。 这样在操作时， 可以提供更清晰、更准确的信息。 这是一个具体的示例， 你可以看到我们如何通过让符号 进行脉动来强化屏幕分享的概念， 帮助我们传达正在进行的活动。 同时这个效果会持续播放 直到满足某个条件， 例如在当下这种情况，即是 FaceTime 通话结束。 接下来，让我们来看看可变颜色。 正如我们之前所见， 可变颜色可以传达不同强度的变化， 并依靠颜色 来传达符号随时间变化的状态。 今年， 可变颜色也成为动画库的一部分， 提供了两种不同的展示方式。 其中一种是累积型， 另一种是迭代型。 累积型会逐个突出显示图层， 同时保持之前图层的状态。 这种动画非常适合 表示 Wi-Fi 符号 启用无线连接的情况。 而迭代型则是 按顺序逐个突出显示图层， 一次只显示一个，用来表示 Wi-Fi 符号搜索可用网络 很有效。 请看菜单栏中的这个示例， 迭代型动画效果 适用于 Wi-Fi 符号， 并且除此之外， 我们还有一个反向选项。 这是在选择可变颜色时， 可以选择的另一种配置类型， 使突出显示的图层恢复到原始状态， 并立即重新开始序列， 直到操作被中断。

最后，让我们来看看替换动画。 替换是一种一个符号 被另一个符号替换的动画类型。 它用于传达符号状态的变化， 指示功能的转变。 你可以决定要替换的符号， 以及用来替换的符号。 与所有其他预设一样， 替换可以按图层逐层动画一个符号。 默认情况下是按图层动画 或者可以整体动画一个符号。 除此之外，还有方向性的概念，

有向下/向上。 现在让我们稍微放慢动画的速度， 以便我们分析它。 一个符号向下移动，从视野中消失， 紧接着一个新的符号 以向上的运动出现。 这在两个符号之间 创建了平滑的过渡， 通常是根据用户的输入， 一个符号被另一个符号 以动态的方式替换。 另一个方向性的例子是向上/向上。 让我们减慢速度， 符号向上移动，从视野中消失。 紧接着一个新的符号 以稳定的向上运动出现， 这给人一种前进的感觉。 使我们能够 以无缝的方式表示事件的展开。 以下是另一个示例： 通过与播放符号进行交互， 来启动操作后， 它立即转换为暂停符号， 表示暂停是下一个可用的操作。 在这个界面中， 让我们仔细看一下三个主要的符号， 这些符号分别代表 撤消箭头、重做箭头 和带有剪贴板的文档， 表示粘贴操作。 注意这些符号， 当我们选择单词“Hello”时， 一些符号会立即被其他符号替换掉。 现在我们有代表剪切的剪刀 和代表复制的文档符号。

这有助于我们理解在选择单词后， 可以采取的下一个可用操作。 所有这些新的预设可以作为， 用户与界面之间的沟通工具， 在增强用户体验方面起着关键作用。 但重要的是在吸引注意力的动画 和功能性界面之间取得适当的平衡， 以避免过于繁琐的体验。 因此，始终要优先考虑功能性， 并牢记预期目标。 随着动画的引入， 设计自己的符号时， 需要熟悉一些绘图方面的知识。 去年，我们引入了 一种全新的绘制符号的方法。 使用整个形状进行绘制， 这意味着符号具有额外的图层信息。 使设计和绘制自定义符号 比以前更快更容易。 让我们来一起深入研究这个示例， 我正在开发一个 鼓励孩子发展艺术技能的 APP。 这只糖果熊将帮助孩子学习颜色。 因此每次完成任务时， 我希望该符号 可以使用弹跳效果进行动画化。 这将是一种促进持续学习 并与孩子互动的好方法。 让我们回顾一下 我设计这个符号所采用的步骤。 符号本质上是矢量绘图， 所以为了创建这个符号， 我们将通过绘制完全封闭的形状路径 来定义符号的设计， 绘制熊的身体、脸和耳朵。

接下来，我们将绘制熊的爪子 和一些偏移路径。 这些路径将作为擦除层使用。 我们需要想象出 我们希望符号如何移动。 所以在这种情况下，爪子和擦除层 将作为单独的图层放在前置平面中。 这样， 我们可以为动画增加一些深度， 使符号更具动态性。 我们的设计准备就绪， 接下来，我们将把它放到 SF Symbols App 中 在这里，我们将使用“绘图”或 “擦除”对图层进行注释， 使用“绘图”时， 所选的图层会绘制路径， 而“擦除”则会 删除所选层中的路径， 影响符号的呈现方式。 以这种方式注释符号 将使我们得到期望的结果。

接下来，让我们为多色注释 选择一个很棒的颜色。 这将给它增添一些趣味性。 顺带一提，如果你对了解更多关于 SF Symbols App 以及 如何创建自己的动画符号感兴趣， 我强烈推荐你观看 Paul 的演讲 “创建动画符号”， 他分享了一些很棒的见解。 回到我们的符号， 看一下， 它在各种不同的动画预设下的效果。 我稍微放慢了速度， 这样我们可以看到细节。 通过显示符号的附加路径信息， 我们可以确保 它在运动中的过渡流畅。 这有助于我们看到先前部分隐藏的 形状的一些部分。 当然，你也可以在不使用擦除层 的情况下对符号进行动画处理。 但是你会发现有很大的差别。 当你使用擦除层来绘制符号时， 它可以改善符号的编排， 使其运动精确。 另一方面，没有擦除层的符号 可能在静态状态下工作得很好， 但在运动状态时则失去了深度和活力。 这是因为形状之间的流畅性不足。 它们缺乏连续性和协调性， 会带来一种乏味的视觉体验。 这种使用擦除层的绘制方法的 真正强大之处在于 它不仅更快，因为你在绘制 和插值的过程中 需要处理的步骤更少， 而且是发挥动画的全部潜力 的最有效方式。 如果你计划在自定义符号中 使用动画， 请确保仔细检查它们。 你可能需要调整路径， 因为当符号在运动时， 它们可能不会按预期执行。 接下来，让我们看一些 SF Symbols 库中的新增内容。 我们扩展了汽车类别， 添加了方向盘、汽车座椅 和坐着的人物等符号。 在游戏类别中，我们有街机游戏机、 街机摇杆 和不同类型的按钮。 还有代表不同类型 电动汽车充电插头的新符号。

我们还设计了新的天气符号， 如月升、月落和彩虹。 我们还有许多新符号可供选择。 共有 700多个新符号， 使 SF Symbols 成为拥 有 5000 多个独特符号的图标库。 如果你想了解关于 SF Symbols 的 所有新增和精彩的动画预设， 你可以在 developer.apple.com/cn/sf-symbols 上 找到 SF Symbols 5 的 最新测试版本。 通过 SF Symbols 5， 符号达到了表达能力的新高度。

感谢你今天的参与， 希望你喜欢这次关于了解 SF Symbols 新功能的讲座。