SF Symbols 6 的新功能

大家好 我是 Apple 设计团队的 设计师 Thalia 在本次讲座中 我们将 一起了解 SF Symbols 它是 Apple 的图标资料库 旨在提供 常见且易于使用的符号 SF Symbols 是一款功能强大的工具 从本地化素材到富有表现力的动画 各种资源应你所需 要讲的内容很多 让我们开始吧 今天 很高兴向大家介绍 新的预设和增强功能 关于这方面的内容 我会在动画预设部分详细介绍 在“SF Symbols”App 部分 我将介绍一些更新 我们还将了解如何为符号添加注解 以便你充分利用新的动画 最后 在新符号部分 我们将探索 这个资料库有哪些新增内容 SF Symbols 动画是 我们去年推出的功能 如果你还不太熟悉这项功能 请观看“SF Symbols 5 的新功能” 在这个讲座中 我们详细介绍了 相关概念以及所有动画功能

此外 你还应该熟悉 “SF Symbols”App 如果需要回顾 建议你观看 “创建带有动画效果的符号” 现在 让我们开始吧

今年 我们很高兴推出了 新的通用动画预设： “晃动”、“旋转”和“呼吸” 此外 “替换”和“可变颜色” 也有了重大更新 借助所有这些预设 你可以 打造出更富表现力的动画 来优化 App 的界面

首先是“晃动”

如果需要突出显示更改 或可能被忽视的行动号召 可以使用“晃动”预设 “晃动”还可以为交互 增添动态的强调效果 或强化符号所代表的含义 比如 当你有一个指向特定方向的 箭头时 即可应用“晃动” 对于“晃动”来说 方向是非常重要的 我将以纸飞机为例 符号可以向右或向左晃动 还可以根据阅读方向 向前或向后晃动 这些动作使符号 在水平方向上产生位移 随后再回到原来的位置

符号也可以上下垂直晃动 然后 再次回到起点

符号可按顺时针或逆时针方向晃动

然而 对于纸飞机这个特定的符号 所有这些方向都与 纸飞机实际所指的方向不同 那么 对于这样的情况 就需要自定晃动角度 以匹配 符号所指的特定方向 我们将选择 315 度角 让纸飞机看起来像马上要起飞一样

我们希望“晃动”便于操作 因此 像纸飞机这样的许多符号 都有内置的首选方向 但是 你可以根据 App 的情况 随时自定动画 以使用不同的效果

接下来 我们看看“旋转”

利用“旋转”预设 你可以 为符号添加动态效果 既可以模仿物体在现实世界中的行为 也可以呈现视觉指示符的效果 例如 在执行某项任务时 旋转效果表示任务正在按预期进行

有些符号可以整体旋转 而在其他情况下 你可能只需要符号的 某些特定部分发生旋转 对于像台扇这样的符号 可以使用“By Layer”旋转选项 仅旋转风扇扇叶 稍后我们将探索如何 为你自己的符号实现这种效果

现在 我们来了解“呼吸”预设

“呼吸”是平滑增加和减少 符号存在感的动画 赋予符号生命感 它有助于传达状态变化 还可以发出某项活动正在进行的信号 比如 正在录制讲座时

你可能会注意到“呼吸” 看起来有点像“脉动” 这是 SF Symbols 5 推出的一种预设 “脉动”以不透明度的变化 来表示正在进行的活动 而“呼吸”则结合了 不透明度和大小的变化 以表现符号的动态效果 如果你不知道该选取哪个预设 可以思考以下问题 我想要传达什么讯息？ 我们希望爱心符号更有存在感 呈现出更栩栩如生的效果 如果是这样 “呼吸”预设更为合适

接下来 我们了解下“替换”

使用“替换”这种动画预设 符号就可以切换成其他符号

今年 我们新增了一个很酷的 “替换”选项 称为“魔术替换”

“魔术替换”能够在具有 相关形状的两个符号之间切换 可以显示或隐藏斜线和徽章 也可以替换成不同于 基础符号的其他符号

“魔术替换”是新增的默认选项 但需要注意一点 在某些情况下 也许你需要选择“魔术替换” 但却无法完成这种替换 这是因为两个符号不相关 如果两个符号不允许 使用“魔术替换”选项 你将回退到标准的“替换”动画

不过对于这种回退动画 你仍然可以控制 应用动画的方向

在这里 你会注意到“魔术替换”可以 在两个相关符号之间完成切换 但在替换为人形符号时 会应用“关闭至放大”动画

这非常适合可点按的元素 例如 我们可以在 UI 中 立即提供反馈 并在新符号出现在屏幕上时 仍然保持动态效果

如果你一直在自己的符号上 使用符号组件 那么“魔术替换”也会适用 你只需要从 “SF Symbols 6”App 中 再次导出符号 并将它们导入 Xcode 16 中 就可以开始使用了

我们还更新了“可变颜色” 这项预设可展示不同强度水平 并依赖于颜色 来传达符号随时间变化的状态 当“可变颜色”重复时 符号的设计 会影响动画的外观 有些符号适合设置颜色不透明度 渐进效果 当两个端点不相交时 我们称为开环 而当两个端点相交时 动画将以闭环的形式呈现 说到重复可变颜色 通过保留每个符号的本质特性 我们提升了这个动画的效果 现在 采用闭环设计的动画 可以流畅衔接播放 如果你的符号支持可变颜色 现在 你可以为符号添加注解 以优化闭环设计 实现流畅的连续播放

为了方便展示如何在 App 中 实现所有这些新的预设 我们为喜欢植物的人 设计了一款示例 App 它可用于对植物进行分类、 追踪基本养护活动 以及监测植物的健康状况 一起来看看吧 我设计了一组新符号 将在 UI 中使用 可与来自 SF Symbols 库的 一些动画结合使用 我们可以使用“魔术替换” 对会影响植物健康的 天气事件发出警报 “魔术替换”是我们目前推出的 最棒的替换功能 可确保符号之间流畅切换 因此 我们鼓励大家 尽可能使用这种动画

在这个示例中 用户能够扫描他们的环境 并检测家里的植物类型 检测到植物后 App 就会显示对应的植物名称 以及一些相关信息

为了清楚地提示用户 注意屏幕上的首选操作 按钮中的向右箭头就会开始晃动 这样一来 用户就会注意到这个按钮 提醒我们将龟背竹 添加到我们的植物收藏中 如果你的 UI 看起来有些复杂 你可能想要尝试这样的动画 以便用户在 App 中找到对应的操作

想要让实时活动更生动形象？ “旋转”动画就是一个不错的选择 在这个例子中 箭头是旋转的 表示有一项任务正在进行

我们来看另一个例子 在这个视图中 我们可以检查植物的 健康状况和水分摄入情况

给兰花浇水的一个好方法就是 将兰花根浸泡 15 分钟左右 启动计时器后 由于我们使用了“呼吸”预设 水滴就有了动画效果 提供一些视觉反馈 表示这项活动正在进行中

只有一点需要注意 动画在 UI 中的效果很不错 但使用过多或将动画用于错误的情境 可能会让人感到应接不暇 且会分散注意力 让人无法专注于重要的内容和操作

最好是有针对性地使用动画 确保它们在不分散用户 注意力的前提下 丰富他们的体验 现在我们已经了解了 所有新的预设和增强功能 我将向大家介绍 “SF Symbols”App 的最新更新

可在动画检查器中找到 所有这些新的预设 就在其他预设的旁边 你可以在这里找到新的“晃动”动画

在“默认”设置下 每个符号会自动选择首选的晃动方向 在本例中 由于这个符号的箭头朝上 因此 它会首选向上晃动 但我们也可以自己指定方向 比如 向右晃动

与“晃动”一样 “默认”方向设置 会让符号自动选择首选旋转方向 你也可以选择顺时针或逆时针旋转

这里显示的是“呼吸”预设 如果开启了“脉动”功能 那些启用了“脉动”动画预设的图层 就会改变它们的不透明度 赋予这个符号更富层次的 动态视觉效果

你可以更好地控制动画的重复方式 你可以选择“Once”来单次播放动画 选择“Repeat with Delay” 来反复播放动画 并且你可以决定 两次重复之间的停顿时间 还可以选择“Continuous” 这样 动画就会开始并持续播放 直到收到明确的停止指令

以上是对新动画预设的简单介绍 我们目前介绍的这些都是 系统提供的符号 但是 如果你的 App 中有自定符号 “SF Symbols”App 也是你的优选工具 可确保这些符号适配全新的动画功能

还记得我为 App 设计的符号吗？ 下面我们来详细介绍一下 看看给符号添加注解有多简单 先来看看花盆里的这棵植物

我会将心形的叶片放在一层 花盆放在第二层

预览动画时 它的动画效果就像是在摇头 我想让画面看起来欢快一点 就像是在跳舞 我们将首选的“晃动” 方向更改为“向上”

这样就更好了 接下来 我们使用“呼吸”预设 为这些水滴添加动画效果 我将按照水滴移动的顺序 在每个图层添加一个水滴 如果你希望预设效果应用于整个符号 你也可以将它们全部放在一个图层中 这是第二层和第三层

现在我们来看预览效果

看起来不错

需要注意的是 如果你的符号之前已经添加了注解 在“脉动”预设中已选好图层 那么 当你选择“脉动”时 “呼吸”预设将利用相同的注解 你不用再进行其他设置

现在是“旋转” 我们来看一下这个符号的效果 我们已经定义了图层 其中叶片为一层

箭头放在第二层

我们来看看预览效果

这不是我们想要的效果 由于箭头是这个符号最重要的部分 我希望只有箭头会呈现出动态效果 让我们选择“Can Rotate” 这就是我们想要的效果 使用“Can Rotate”的图层 以锚点为基准 会围绕这个特定的点旋转

点按这个按钮 画布中 就会出现新的控件

我们可以看到锚点和 显示符号边距的辅助线 App 自动将锚点 添加到这些辅助线的中心

但有时候 如果是像台扇这样的符号 我们需要将锚点移动到 旋转的图层中心 在这里 也就是风扇扇叶的中心 为了帮助你找到锚点 我们提供了 “Snap to Points”按钮

点按这个按钮 路径的矢量随即显现 而锚点会自动对齐这些点

如果要将锚点居中显示 这个功能非常实用

当然 你也可以查看这两个点

然后手动输入它们之间的中点坐标

定位锚点时必须精确 因此 请务必预览动画以确保效果

画布中还包含这些控件 与符号组件一样 需要在这三个大小比例中 定义旋转锚点 定义后 系统将进行插值 并计算出在不同大小比例的图像中 放置锚点的位置

我们介绍了为自己的符号 添加注解的流程 下面来了解一下 SF Symbols 库的新增内容

我们扩展了“汽车”类别 新增了电池、 敞篷车和温度指示器等符号 我们推出了代表 各种活动的人物符号

我们新增了本地化符号 涵盖了如希腊文、 西里尔文及多种印度数字系统 等书写体系 我们提供了进度指示符、触觉反馈、 家庭及小组件相关的符号 还有大量的物品符号供你选择！

SF Symbols 6 新增了 800 多个符号 堪称不断进化的图标资料库 它拥有 6,000 多个独特的符号 涵盖了丰富多样的尺寸、 比例和渲染模式 还提供了吸引人的动画预设 全力助你的 App 更上一层楼

如果你想探索所有新增内容 以及出色的动画预设 可以访问 developer.apple.com/sf-symbols 获取新的“SF Symbols”App Beta 版

现在 借助这些更新 符号的表现力必将再上新维度 感谢大家观看 希望大家喜欢 SF Symbols 中的新功能