SF 符号 4 的新功能

♪ ♪

Thalia: 大家好 我是 Thalia 今天我们将学习 SF Symbols 的新特性 符号是最有效的图形化沟通方式之一 如果您想要表达一种感觉 一个物体 动作或概念 符号是个不错的方法 符号始终会被频繁使用 成为我们的第二天性 如果不依赖符号 我们就会发现 很难驾驭周围的环境 因此 它们成为界面设计的 重要组成部分 因为符号是帮助沟通的绝佳方式 符号还可以带来诸多好处 例如可以作为交互方式 可以节省空间 增强审美吸引力 以及通过用户友好来提升吸引力 符号的伟大之处在于 它可以超越多种语言 它们可以是通用的 因此 符号可以把人们团结在一起 交流共同的思想 帮助人们在更深的层次上接触他人 而不仅仅是语言 在 Apple 我们非常关心 改善用户界面 和整体体验 这就是我们创建 SF Symbols 的原因 一个庞大的图标库 旨在与系统字体 San Francisco 无缝集成 为在所有 Apple 平台上 创建体验提供 强大而灵活的设计资源 SF Symbols 的设计考虑到了排版 它具有很棒的功能 例如不同的粗细 比例 轮廓 和填充的变体 封装形状和对齐方式 要了解更多关于这些功能的信息 以及何时适合运用这些功能 请查看去年 WWDC 上的视频 让您快速了解这些功能 今天 我们就来看看有哪些新增符号 以及 New symbols 中的新类别 在渲染模式中 我们将回顾为符号添加颜色的好处 有一个新配置 来帮助使符号行为自动化 有一个令人兴奋的新功能 叫 可变颜色 这个功能让我们可以通过颜色 让符号更具动态性 最后 有一种更有效的符号注释方法 我们将在 统一注释 中 了解更多信息 我们开始吧 SF Symbols 库每年都在不断增长 有更新的类别和符号可供选择 “家庭”当中有一些很棒的新增符号 包括灯 百叶窗 窗户和门 甚至还有电灯开关和电源插座 有新的家具和电器 新的健康符号 今年 还有健身类的符号可供大家使用 我们扩展了图标库中的货币符号 有许多新对象可供选择 当然 我们还在不断扩展本地化符号 用新符号覆盖不同的指令 以及从右到左的书写系统 有 700 多个新符号可供选择 使 SF Symbols 成为包含 4000 个独特符号的库 太棒了 有了这些新功能 我们想要帮助您浏览 SF Symbols App 中的所有符号 所以我们添加了五个 我们认为是非常有用的新类别 相机和照片 辅助功能 隐私和安全 家庭和健身 请记住 在 App 中 您始终可以选择 最符合需求的符号 来创建自己的符号集 现在 我们快速回顾一下 不同的渲染模式 如您所知 在 SF Symbols 中 有四种渲染模式可供选择 每一种都能很好地控制 如何将颜色应用到符号上 单色是所有渲染模式中 最中性的一种 它呈现出统一的外观 是最能体现 SF Symbols 排版特性的渲染方式 分层是一种能呈现出微妙强调效果的 渲染模式 用单一的色调 来提升整体美感 我们可以通过突出符号最重要的形状 或区分前景和背景元素来应用深度 这样 我们通过强调符号的基本部分 来创造一个视觉层次 调色盘使用两种或更多对比色 来赋予符号元素更多的 突出性和通用性 使符号具有更强的自定义性 能与界面环境的配色更好地整合 调色盘模式有助于符号在 不牺牲整体美感的情况下 提供对比鲜明的独特外观 而多色模式是表示符号的固有 或原生颜色的渲染模式 这种渲染模式使用一系列 可应用于符号的颜色 来描述物理世界中物体的外观 或者可以使用颜色 来强调符号试图传达的含义 当符号在 UI 中非常重要时 您可以使用多色 因为有助于创建与符号形式 相关的颜色叙述 到目前为止 如果您没有明确指定渲染模式 那么默认情况下将通过单色模式渲染 但今年 我们让符号能够更容易 以最能突出其独特特征的 模式进行渲染 符号现在具有首选渲染模式 不同的符号可以具有不同的首选模式 我们称这种行为为自动渲染 选中后 它会为每个符号 提供首选渲染模式配置 而无需手动指定 例如 当选择 自动 时 相机滤镜符号将选择分层模式 因为它是通过突出显示引用 物理相机镜头和滤镜的半透明的 不透明度 来传达更精确的视觉呈现渲染模式 这是另一个例子 当选择 自动 时 SharePlay 符号将选择分层模式 这种样式使人的形状在前景中突出 而波形在背景中是次要角色 这再次强调了符号的概念 因为 SharePlay 功能主要是 一种与朋友和家人分享和联系的方式 在大多数情况下 自动 是最好的选择 但是您必须时刻注意环境 例如 选择 自动 时 AirPods Pro 符号将呈现为分层 但在这种情况下 符号非常小 在这个背景上呈现时对比度很低 请记住 在特定环境中 仍然可以明确指定渲染模式 以实现符号间统一外观 所以在这种情况下 单色模式将是最好的选择 因为它更易读 并且小尺寸的细节更少 因此 请始终确保指定 最合适的渲染模式配置 不同的渲染模式将颜色应用于符号 以在各种情况下呈现视觉解决方案 颜色是个强大的工具 我们可以进一步探索 有些符号在本质上更具活力 如果我们分析它们的视觉表现 可以注意到两个主要特征 首先 它们的路径或形状 传达了不同程度的强度 其次 它们依靠颜色来传达 随时间推移而变化的状态 今年 我们通过引入名为 可变颜色 的 新功能来扩展颜色的使用 我们将符号的矢量路径排列成层 并按顺序组织这些层 从而创建了一种通过这些层 分配颜色的新方法 这让我们能够随时间的推移 传达不同程度的强度 或传达序列 这是由符号设计的本质决定的 需要知道的一件重要的事情是 在 可变颜色 中 一些符号的所有路径都参与了序列 但对于其他符号 只有一些路径可以选择加入 我们来看几个例子 通过 可变颜色 我们想让代表 iPhone 的路径 退出变量序列 并且我们希望突出显示 代表无线电波的路径 这将有助于区分描述手机 无线电信号 强度的不同阶段 重要的是要知道 我们定义了如何对路径进行分组 例如 在这种情况下 从左到右突出显示 波形没有多大意义 所以 我们可以按照最能 传达无线电信号强度的 顺序对路径进行分组 两个较小的波在一层 两个较大的波在另一层 如前所述 手机不参与可变序列 这一次 让我们看一个 非常熟悉的符号 在大多数情况下 此符号与内置滑块配对 该滑块与符号中表示的状态同步 波形高亮显示它们的路径 遵循用户控制滑块的序列 增加或减少音量水平 就像在 iPhone 的例子中 有一个不参与序列的路径 即扬声器的形状 并且我们有参与序列的路径 即定义音量强度的三个波 低音量 中音量和高音量 这些路径被组织成层 选择的层可以选择可变颜色特性 我们用百分比值表示它们的实力 0% 是完全没有的 任何高于 0% 的内容 都会突出显示部分符号 并且当数值接近 100% 时 整个符号会完全突出显示 要知道的一件重要的事情是 可变颜色 并不是为了创造深度 相反 它的目的是强调 该符号可以表示的 一系列步骤或阶段 例如 假设我需要一个符号 来表示房间内可容纳人数 这个符号看起来很棒 我们更详细地看一下 我们不希望只突出显示符号的一部分 相反 我们需要将符号看作 一个序列或范围 我的目标是涵盖不同的状态 空房间 房间里只有几个人 有一半人 满屋子人 所以现在 当我选择 可变颜色 时 可以很容易地看到我试图传达的 不同状态的图形表示 可以选择进入该特性的 路径数量没有限制 可以只有一个 也可以有多个 您可以决定什么是 最适合自己需求的设计策略 如果您想表示形状的强度级别 这些形状遵循一个序列 例如波形 射线 省略号和层 可以使用 可变颜色 来实现 可变颜色 是基于不透明度的 它可以在所有的渲染模式下使用

今年 我们通过在所有渲染模式中 创建统一的层结构 使自定义符号的注释更快 更容易使用 我喜欢烘焙 我正在考虑设计一个 只包含纸杯蛋糕食谱的 App 我想创建自己的自定义符号 所以我设计了一套 可以满足我的需求 这将是向大家展示如何使用 统一层结构方法注释符号 以及如何注释参与 可变颜色 符号的绝佳机会 我们以这两个为例 在开始注释之前 有一些事情需要考虑 我们需要牢记层次结构 并确保勾勒出 z-order z-order 顺序是指符号中 沿着 z 轴的路径顺序 您还需要了解两个新概念 绘制和擦除 这些用于帮助定义层的渲染方式 例如 这里有一个符号的路径 代表一个正方形重叠在一个圆上 当选择包含正方形的层时 如果我们选择 Draw 选项 层将绘制该层中包含的路径 如果我们选择 Erase 选项 将擦除包含该层的路径 影响符号的渲染方式 现在 我们开始给小蛋糕做注释 作为第一步 我们需要按层组织路径 以创建所需的层次结构 如果我仔细分析它 可以看到四种主要形状 糖霜 纸杯蛋糕底座 徽章和加号 您可以在一个层中添加 任意数量的路径 所以在这种情况下 糖霜将由具有 三个不同路径的层来定义 其余层将由每个路径定义 以这种方式组织形状 让我们在为所有渲染模式 注释结构时拥有更大的灵活性 现在 我们将所需的所有信息 集中在一个地方 以便根据需要定制符号 现在我们可以开始注释 所有渲染模式了 我们先看看 多色模式 我已经设置好了形状 所以只需要选择正确的颜色 红丝绒是我最喜欢的口味 所以我会选择白色的糖霜 和红色的蛋糕底 现在我将遵循 SF Symbols 为 多色模式 中的加号徽章 定义的相同逻辑 绿色代表徽章 白色代表加号 好吧 目前为止看起来不错 现在 我们专注于徽章 这是统一注释方法更明显的地方 我们已经定义了 多色模式 现在让我们看看 分层和调色盘模式 由于在这种渲染模式中 使用了层次结构 我希望徽章是首要 将在黑色背景上将其渲染为白色 就像他的那样 现在我需要加号来擦除部分徽章 这就是擦除选择有用的地方 当层重叠时 我将能够看到 按需要擦除形状的一部分渲染的徽章 最后 我只需要 单色模式 注释 因为这种渲染模式没有增加复杂度 所以我会按照同样的逻辑 让加号的形状擦除徽章形状的一部分 我现在差不多完成了 只需要一些额外的细节 对于 分层和调色盘模式 我只需要 将剩余的纸杯蛋糕形状标注为次要 对于 调色盘模式 我会选择 一种颜色来提供一些对比 对于 单色模式 我只需要确保 有剩余的形状选择绘制

这就是我所需要的 纸杯蛋糕已经准备好了 可以定制所有渲染模式

现在让我们看看厨房计时器 这些路径代表了时间的流逝 因为这是一个序列 所以很适合加入 可变颜色 我们可以使用相同的策略 来注释这个符号 但不需要将计时器路径 分组在一个层中 而是将它们分割成各自的层 这是因为我们需要组织这些形状 以便重新创造序列 从而帮助我们传达符号的不同状态 记住 可变颜色 在所有渲染模式下都可以运行 如果您想了解更多关于 新的 可变颜色 功能 和 SF Symbols App 的信息 请查看 Paul 的演讲 “Adopt Variable Color in SF Symbols” 您可以找到 SF Symbols App 的新测试版 在这里 您可以探究新的 统一注释方法 并访问数百个新符号 和奇妙的新功能 请查看 developer.apple.com/sf-symbols 从自动渲染行为 到 可变颜色 动态特性 SF Symbols 是在 UI 中实现符号时 使用的极其强大的工具 今年 SF Symbols 功能更加强大 可以定义一系列的表达方式 谢谢您今天加入我的行列 希望您喜欢 了解 SF Symbols 中的新功能