SF 符号的新功能

大家好 我是塔利亚 我是Apple设计团队的 设计师 今天 我们要来谈谈 SF Symbols的新功能 符号作为用户界面 设计要素之一的重要性 再怎么强调 都不为过

符号是用户和产品之间 最简单的交流形式 也是有助于提升可用性 和导航直观性 不可或缺的一部分

符号还能让界面更易于使用 帮助我们快速导航 因为大多数符号都与语言无关 符号也可以帮忙传达内容 或协助触发特定操作 而且很多时候 符号有助于解决相当多 复杂或抽象的概念 SF Symbols将所有这些 整合到一个图标库中 同时与San Francisco系统字体 无缝整合 为在所有Apple平台上 进行创造的体验 提供强大而灵活的设计资源 今天 我们要来快速回顾一下 SF Symbols的基本概念

SF Symbols的内容不断增加 所以我们会先来看看一些 新增加的符号

我们通过提升脚本覆盖率 来扩展本地化的符号 我们会看看这些本地化的符号

我们将深入研究符号的结构 并了解其结构如何 让颜色选择成为可能

我们会发现在渲染模式下 为符号增添颜色的好处

最后 我们针对 SF Symbols应用程序 和颜色库进行了一些 精彩可期的更新 那我们就赶快开始吧 每个符号都有各种不同的字重 可以自动与文本标签对齐 在iOS中 SF Symbols能支持 Dynamic Type 和Bold Text辅助功能 SF Symbols还提供三种比例： 小、中和大

不同比例会维持相同的字号大小 只改变符号的比例 笔划粗细经过光学调整 并且会与文本字重相匹配

你也需要了解两种不同的对齐方式 第一种是垂直对齐 在所有不同的比例和字重下 符号会自动垂直置中到 San Francisco字体的高度上限

而你或许也知道 某些符号的边距为负值 这样的边距有助于水平对齐 例如 大多数 带有徽章的变体就是这种情况 显示在用户界面上时 符号会水平置中 看起来较为一致 尤其是显示类似的符号变体时

如果你想了解更多SF Symbols 相关的所有功能 去年的WWDC20研讨会 能让你快速上手 现在我们来谈谈符号变体 符号的定义是 用于交流目的 的符号值表示法 举例来说 “爱”这个词可以 用一颗心来表示 在用户界面上 符号是 传达意义的视觉系统的一部分 为了让这个交流系统更为丰富 具有相同表征的符号 可以有多种不同的形式

SF Symbols的预设 或通用变体 是符号的轮廓版本 因为这种变体与排版有关 我们可以想象使用相同的工具 绘制符号和文本 在没有上下文的情况下 就会预设是轮廓

如果想要让符号更为清楚 比如我们希望符号有更多的表面积 来选择让颜色更为饱和时 填充变体便是一个很好的选择

在SF Symbols中 一个符号可以有多种不同的形式 我们已经提到了轮廓和填充变体 我们还有斜线变体 可用于传达 删除或显示项目为 不活跃或不可用的功能

我们也有包含在圆形 正方形或矩形 等形状内的封闭变体

所有这些变体都有助于 让用户界面变得更为丰富 并在设置具有界面元素 和内容的视觉层次结构时 提供更大的灵活性 一个清晰的视觉系统 会竭尽全力减少 复杂的情形出现 即使动作本身很复杂 因此 知道要在哪里使用符号变体 就变得非常重要 滑动操作和iOS标签栏中的 填充符号 能提供一致的外观和强调程度 也就更能掌握在使用强调色定义时 指示选择的区域 具有填充变体的圆圈内的符号 在小尺寸时提供更好的易读性 而符号的轮廓或默认变体 非常适合用户界面中的工具栏 导航栏、列表和其他地方 这些地方的符号会与文本一起显示 或是标志需要显示出 统一的外观 设计自己的符号时 要记得保持一致 并定义满足用户需求的系统 通过这种方式 你能帮用户更有效地感知到 与符号发起的动作 或符号所代表的内容 直接相关的视觉隐喻 随着符号在所有平台上提供 SF Symbols图标库不断增长 今年有近600个新符号可用 我们扩展了Apple产品和设备的符号

我们也为电玩游戏控制器 增加了新的符号

我们有一些与健康相关的符号 还有很多代表交流沟通的新符号

以及有助于 界面布局配置 和窗口管理相关设计的 新的插入式的符号

我们还为watchOS设计了一些符号

而且我们有许多新符号可供选择

使SF Symbols成为一个 拥有3000多个符号 可供选择的图标库

现在我们来谈谈本地化 在Apple 我们力求使界面 更具包容性 并为国际 和多元文化受众量身打造

今年 我们扩大了 SF Symbols程序的涵盖范围 增加了阿拉伯语 希伯来语 和梵文的新符号 也包括泰语 中文 日语 和韩语的设计

我们让所有这些 本地化符号和程序变体 根据用户的设备语言自动调整 包括从右到左的书写系统 使这个功能变得易于使用 如果你正在设计 从左到右 和从右到左的 书写系统 务必考虑两种 本地化变体的方向性 和整体外观 也要注意在某些情况下 某些符号 在镜像时 看起来不会和预期中的一样 在这种情况下 就会需要根据 特定程序需求 量身打造的新设计 就像这个例子一样

如果你想了解 有关从右到左 书写系统设计的更多信息 可以去看看 《Human Interface Guidelines》

现在我们来深入了解符号的结构 每个符号都以一个矢量点开始 从矢量点开始 我们可以绘制两种类型的线段： 直线和曲线 也称为贝塞尔控制点 我们通过将路径绘制为 完全封闭的形状 来定义符号的设计来源 然后我们通过绘制额外的来源 并确保设计来源的 点可以兼容 进而扩展风格范围 也就是说 每个来源具有相同数量的 矢量点 接着 我们插入了设计来源 建立能为我们提供 不同字重和比例的实例 如你所见 以封闭路径进行绘制对于 获得一致的形状非常重要 能让我们在创造符号时 具有很大的灵活性

如果想要更深入了解 插值和绘制符号 可以去看看今年的 《建立自定义符号》说明

如果各位曾经用过钢笔工具 来绘制路径 应该对描边不陌生 这通常是增加路径厚度的方法 但对于SF Symbols 我们是用不太一样的方式 如果仔细观察 会发现描边是用给定的粗细值 精确遵循路径来绘制 尽管描边可以是任何粗细程度 但描边通常会使用路径作为其中心 也就是说 将定义描边粗细的 实际矢量点作为插值 是不可靠的 因为描边的边界上 没有矢量点 为了保证绘图的可靠性 也为了便于插值 和更好地控制形状 必须将描边转换为轮廓 大部分的矢量图形编辑器 和设计工具 都能将描边转换为轮廓

现在我们知道 SF Symbols是如何绘制了 接着我们来看看其结构和形状 你可能有注意到 有些符号组合了 两个或多个对象 例如分享的符号 就是箭头和正方形的组合 对象组合在一起时 我们可以强调其中一个形状 同时淡化另一个形状 这样 我们就可以定义 含有徽章和重叠的设计策略 我们可以决定一个符号的 前景和背景元素 甚至可以建立 具有不同容器形状的不同变体 有非常多样的功能 我们甚至可以凸显画面 而这一切都可以 通过我们所谓的注解来完成 我们将路径的封闭矢量分群 为符号内的图层 这样一来 我们就能 快速辨识符号结构的 第一、第二 甚至第三层 进而建立层次结构 所以想象一下所有的可能性 符号已经准备好 让大家尽情使用 但先别急 我们还要谈谈渲染模式 颜色能够发声 就和语言一样强大 而且颜色不仅仅是一种审美元素 还可以影响思维 帮助改变行为并让人有所反应 颜色作为一种交流方式 有种引人注目的魅力 如各位所见 SF Symbols在套用颜色后 变得非常万用 使其成为更强大的工具 加上颜色之后 符号就会成为吸引用户 的非常重要一种方法 能有助于你发声或引起注意 今年 我们很高兴地宣布 除了多色和单色之外 我们还有新的渲染模式可供选择： 分层和调色 我们先来谈谈分层 分层渲染模式 会用有着各种不透明度的单一颜色 为符号增添视觉层次 创造深度和重点 同时让单一色调来带动整体美感 当多个有着共同形状的符号 并排呈现时 这种渲染模式会强调 这些标志之间的差异 希望能让符号更清晰易辨 分层渲染模式还能 在不去除符号的基本元素的情况下 调节不透明度来 减少多余的视觉干扰 我们用所需的层次结构 标注符号来实现这一点 同时考虑符号的第一、第二以及 在某些情况下的 第三层次要素 将基底色套用于符号时 基底色会自动套用在 层次结构中的所有图层 用不同的不透明度 来强调符号的 重要特征

我们再来分析一下这些符号 这些符号现在是用分层渲染模式 某些符号具有所有层次结构层级 这个有云朵、太阳和雨的符号 就是个很好的例子 不过要知道一件重要事情 大多数符号 并不具备这全部三个层级 这是因为设计的本质就是如此 让我们着重在这些符号 没有接触或在符号的第一个 和第二个元素之间 有间隙的形状 会被视为第二层 而有接触并封装 在彼此内部的形状 则是第三层 就像这些示例中显示的 实心圆或画面 我们可以运用分层渲染模式 只强调层次结构和颜色 来打造更强大的界面 大家应该都了解可以用 分层功能做什么了 现在有了调色功能 我们有了更多的可能性 正如我们所了解的 分层渲染模式是使用单一颜色 相较之下 调色渲染模式 提供了使用两种或多种 对比色的可能性 每种颜色都可以独立控制 当颜色套用到符号元素时 能让符号变得更加突出 显眼且用途更广 另外 调色渲染模式 有不透明度控件 为我们提供了更多可能性 能够自定义符号 让符号 与用户界面的整体外观 更融为一体 这种渲染模式 依赖的是跟分层相同的 图层注释资料 如果只套用了两种颜色 第三图层群组就会复制 第二图层的注释 所以在标注您自己的符号时 请记住这一点

在调色渲染模式下 一组符号可以 套用相同定义的调色盘 帮助用户识别 具有相同层级功能的一组符号 另一方面 一组相似的符号 可以各自运用独特的颜色 来定义特定功能 加强符号的动作 并使符号的动作 彼此之间能更加清楚 可以通过调色渲染模式 让你的符号对比更强且用途更广

现在我们来谈谈多色

多色是一种渲染模式 能够呈现 标志的固有色或原生色 也就是说这种渲染模式使用了 多种不同的颜色 这些颜色与物质世界里 物体的外观有关 或是传达了概念 和所指定颜色之间的意义 如范例所示 “ 新增”这个概念与绿色连结 而“移除”则是与红色连结 许多符号都有这种固有的调色 这会是预设呈现的 如果选择自定义 就可以完全自己决定 每种颜色代表的意义 利用多色标志 你可以强调符号的识别 创造与符号形式相关的 更强烈的色彩叙述 多色功能可以通过多种方式 影响符号 符号可以是完全上色 符号也可以是部分上色 这意味着符号的一部分 会有多色功能 而另一部分则会依赖强调色 最后 如果符号没有包含任何多色信息 这个符号就会以单色呈现

今年 我们推出了几个 具有多色功能的新符号 在其中绘制的颜色选择 是无限的

最后要来谈谈单色

单色是最能反映 SF Symbols排版性质的 渲染模式

在颜色方面 单色较为中性 因为单色功能可以 让符号相互混合 而不会有某个符号特别显眼

单色也受益于颜色和不透明度控件 但与其他渲染模式的不同之处在于 在单色渲染模式下 不透明度会套用在所有符号 而不会使用图层注释数据

如果最重视颜色的均匀度 那单色就很适合 因为单色是最为统一 和一致的渲染模式

我们接着来谈谈SF Symbols应用程序

今年 我们对SF Symbols应用程序 进行了重大变更 正如前面提到的 我们新的和改良的渲染模式包括： 单色 分层 调色 和多色

若要使用渲染模式的这些全部颜色 我们有颜色选择器 在这里 你可以从 现有的颜色库进行选择 选择系统的强调色 甚至是决定你自己的自定义颜色 事实上 SF Symbols应用程序中 显示的所有颜色都可以 在所有平台上使用 我们还针对颜色库的 浅色 深色 增强对比度外观方面 进行了一些更新 其中一些颜色会 根据平台进行调整 因此 某些平台会获得以前 只能在其他平台上 使用的新颜色 举例来说 褐色 过去只能在macOS使用 现在所有平台都有提供了

我们还用更绿的色调 重新定义了青色（Teal） 更准确地 反映其视觉表现 蓝绿色（Cyan）是新的颜色名称 这个颜色会用先前Teal的颜色值 如果你以前有使用Teal 会需要切换到Cyan 才能保持原有的样子

另外 靛蓝和紫色 也都可以在所有平台上使用 具有更一致的色调定义

从选择渲染模式到自定义颜色 SF Symbols是在用户界面中 用来构建符号的极为强大的工具 如果你想更深入了解 SF Symbols应用程序 可以去看看看今年的 《探索SF Symbols 3应用程序》

那么 我们来回顾一下 前面所谈到的内容 我们有个新版本的应用程序 现在可供下载 我们有数百个新符号 各位可以在 developer.apple.com/sf-symbols 找到SF Symbols应用程序 新的测试版本

我们谈到了变体 也快速复习了SF Symbols基本概念

本地化符号 现在有了新的脚本覆盖率 还有能适应 从右到左书写系统的新标志

大家已经了解符号的结构 以及如何使用矢量点和路径进行绘制 使图层注释成为可能

我们提到了一些很棒的 新渲染模式的颜色： 分层和调色 我们也深入讨论了 多色和单色模式及其 所有令人惊叹的功能 别忘了 所有渲染模式都会 根据Apple平台系统的颜色 动态调整

也会自动调整饱和度 辅助功能设定 和外观模式 这些渲染模式也适用于自定义颜色

我们还介绍了 新的SF Symbols应用程序 并了解所有的颜色库更新

今年 SF Symbols变得更加强大 灵活 也更易于配置 能够根据你的需求量身定制

一个符号就有九种字重 三种比例 四种渲染模式可以选择 这真的非常厉害 希望你喜欢这些 SF Symbols新功能的讲解 我们等不及想看看 各位会如何使用这些新功能了 [音乐]