使用 Icon Composer 构建图标

大家好 欢迎观看 “使用 Icon Composer 创建图标” 我是 Lyam Apple 设计团队的一名设计师 在本次讲座中 我将介绍 如何借助我们的新工具 Icon Composer 让自己的 App 图标 在各种平台上呈现浑然天成的观感 这些平台包括 iPhone、iPad、 Mac 和 Apple Watch

首先 如果你还没看过另一场讲座 “了解焕然一新的 App 图标” 其中介绍了各个 Apple 平台的 所有图标设计语言更新 以及 iOS 和 macOS 上 有哪些新增的精彩模式 可将更多自定选项 带到用户指尖 强烈建议你先从那场讲座开始 然后再深入探索这场讲座 了解如何将种种精妙带到你的 App 在开始之前 我想简单介绍一下 图标设计的演化历程 你可能还记得 有很多年 需要构建各种尺寸的 Mac App 图标 这样才能根据具体的显示位置 对每个图案进行优化 这是在视网膜显示屏推出之前的做法 当时的重点是确保 元素吸附到像素网格 以便最大限度地提高对比度和易读性

之后迎来了 iOS 和 watchOS 像素密度翻倍的 @2x 显示屏 以及后来推出的 @3x 显示屏 这样一来就需要构建好多图标 几年前 得益于屏幕分辨率 和自动缩放方面的种种改进 我们添加了一个选项 允许每个平台只提供一张图像 剩下的工作都交给我们的系统 此举大大简化了流程 现在再回到 2025 年

今年 随着 iOS 上的 深色和着色模式更加丰富多样

macOS 相继采用这些外观

watchOS 推出全新外观 我们似乎又来到了熟悉的十字路口 于是 我们开始思考 既然要为 App 图标语言 增添一致性 不妨借这个机会 让整个流程再简化一些

现在 借助 Icon Composer 所有这些都可以在单个文件中实现

现在 如果你的图标 非常复杂或具象化 你可能还是需要 将单独的图像上传到 Xcode 无需进行任何其他操作 你的 App 就能在设备上 呈现精美的边缘处理效果 这种效果对应的技术名词是 “镜面高光” 不过 如果你的图案需要一些转化 以便完美适应新的设计语言 比如这个图形元素更丰富的版本 那么最好使用 Icon Composer 你将能够充分利用 Liquid Glass 的无限潜力 让自己的图标生动起来

Icon Composer 可与现有的 设计工具搭配使用 助你完全掌控我们的各种材质 它能够简化 App 图标制作流程 而无论目标平台和外观效果如何 今年 我们就是使用这款工具 更新了原生 App 的图标 它帮我们节省了不少时间 从今以后 只用一个图案 就能为 iPhone、iPad、Mac 和 Apple Watch 生成不同的设计 让你的 App 无论显示在何处 都能呈现统一的形象 充分利用各种独有的动态玻璃属性 实时预览显示效果 还可测试全部六种全新外观： 默认、深色、透明浅色、 透明深色、着色浅色 以及着色深色

有了满意的图案设计后 你甚至可以导出图像 用来满足营销或其他需求 对了 不必再费心构建 各种不同尺寸的图标了 按照我们的设计 各种材质 可以自动适配你的图标

我们来看看新的 Icon Composer 工作流程 从你偏好的设计工具开始 然后导出图层 把分层导入 Icon Composer 这样就可以针对玻璃体、外观模式和 不同平台进行调整了 完成所有调整后 保存文件并导入 Xcode 下面我们深入探究一下各个步骤 先来看看设计流程 如果你要处理平面图形 最好使用矢量绘图工具 因为 SVG 导出功能 方便你稍后更灵活地进行扩展 打开工具后 需要设置恰当的画布尺寸 我发现 最简单的方法是 使用我们提供的某个 App 图标模板 这些模板目前兼容 Figma、 Sketch、Photoshop 和 Illustrator 你可以访问 Apple 设计资源网站取用 适用于 iPhone、iPad 或 Mac 的 图标模板现统一采用 1024px 画布 能够大大简化整个流程 而且会显示新的网络和圆角矩形 适用于 Watch 的画布现为 1088px 在合理范围内稍稍超出圆角矩形 而且会显示同样的网格 方便你更轻松地 将设计转换到不同平台

接下来就可以开始设计 带分层效果的图标了 如果你熟悉 Apple tvOS 或 visionOS 的 App 图标制作 相信你对分层设计并不陌生 从根本上讲 每个图层 都代表着 Z 轴深度的步进 底层是背景 其他图像层层向上堆叠

一般情况下 分层设计非常简单 就是一个前景 加一个背景 比如“信息”App 但有时 你可能希望图案呈现 更精细的分层效果 比如“家庭”App

除了沿 Z 轴分层 分层添加不同的颜色 有助于你稍后在 Icon Composer 中 最大限度地掌控自己的设计 以“翻译”App 为例 两个不同颜色的对话气泡 分别使用了两个图层 这是一个很好的开始 如果我再根据气泡里的不同字样 添加相应的图层 那么就可以更好地控制接下来的设计 这意味着 在 Icon Composer 中 制作深色模式变体时 只需更改一个填充效果就搞定了

在设计阶段 你还需要考虑 等到 Icon Composer 阶段 自己可以进行哪些创意调整 再回到“翻译”App 的例子 我其实认为 给重叠部分加一点 模糊效果会更棒 或许还可以加一点细微的阴影效果 来提升质感

因为我要用 Liquid Glass 制作这些图层 这些效果其实都是动态属性 稍后可以直接 在 Icon Composer 中添加 还可以添加镜面、不透明和 半透明效果

因此 最好还是让源图案保持简洁 具备图形精髓即可 而不要将这些效果添加到文件中 这样得到的平面不透明图形 更便于稍后进行所需的调整

等到调整好图案后 需要将图层导出为 SVG 文件 对于每款工具来说 具体的流程各有不同 如果你使用 Illustrator 我们为 SVG 脚本创建了图层 能够为你自动完成这一步 你可以随心下载使用 导出画布尺寸 确保各个元素在 Icon Composer 中 的显示正确无误 按照 Z 轴的排列顺序编号 各个图层会自动遵循相同的顺序 如果现在不想排序 你也可以稍后重新调序

简单的背景颜色和渐变效果 会直接添加到 Icon Composer 无需手动导出

如果我还想在图标中显示文本 由于 SVG 格式不会保留字体 我需要在导出之前先将它转换为边框 另外 如果需要使用 自定渐变、光栅图像 或 SVG 无法表达的 任何其他元素或软件 需要将这些图层导出为 PNG 文件 因为这种无损格式可以保留透明背景 最后需要牢记的一点是 千万不要在导出的文件中 添加圆角矩形或圆形蒙版 以 Siri 为例 我们不想以这种形式导出 因为系统稍后会自动应用蒙版 确保裁剪恰到好处 嗯 这样好多了

导出图层后 你就可以 打开 Icon Composer 了 我们来看一个现有项目

左侧显示了边栏 还有画布、分组和图层 中间是预览面板 显示了所有不同的图案 以及预览控件 右侧显示了检查器 你可以在这里调整外观属性 和文档选项

不过 如果是首次打开 Icon Composer 的界面大致是这样 只会显示画布

也许你并不想使用纯蓝色的阴影 为了设置背景颜色 只需前往边栏 选中画布 前往检查器 选择一种颜色或渐变 我要使用一种系统预设 其中提供了现成的浅色和深色背景 而且已经针对我们的新材质 进行了优化

然后 你就可以像这样 在预览面板中实时看到更新的效果

现在大致可以看出各个元素 融合在一起的效果了 我们来仔细看看每个区域 从边栏开始 把图层拖进来 它们会按照字母顺序排列在这里 统归为一组

在 Icon Composer 中 分组决定了各个元素是如何层叠 并应用玻璃属性的 所有元素默认归为一层 但你可以进行调整 最多分为四层 我们认为 最多四层可以恰到好处地 约束图标的视觉复杂度 “家庭”App 的图标分为四层 这样就能为每层添加独有的玻璃效果

底部显示了不同的目标平台 以及外观模式 三种外观设计注解还是一样的 你可能对它们并不陌生： 浅色、深色和着色模式

今年 我们将这些模式更名为 默认、深色和单色 以便图案在透明和着色模式下 呈现各种各样的外观

点按缩略图即可预览所有这些外观

在检查器这里 可以使用各种控件 调整外观属性和文档设置 这有助于选择设计的目标平台

我们回到外观控件来看一下

将图层拖入 Icon Composer 时

你会发现它自动应用了 Liquid Glass 效果

在图层级别 你可以选择 关闭还是打开这种效果 此外 还有众多实用的其他控件 与设计工具中的用法差不多

为深色和单色模式创建变体时 颜色控件特别有用 构图控件非常适合 为不同平台重新制作图案

然后 如果转到群组级别 我们会发现控件变得有些不同 这里可以找到所有适用于 Liquid Glass 的选项 许多属性会自动设置 不过 我们还是建议你 多多调整 直到实现期望的视觉效果

调整这些属性时 请注意 有些属性预先配置为 应用于不同的外观 比如不透明度、混合模式和填充 其他属性通常在不同模式下是一致的 因此已预置为应用于所有外观 如果你想获得更多的控制权 悬停在属性上 点按显示的加号 即可创建属性的单个变体

下面分享几条 使用这些属性的小技巧 我通常在设计时会留意这些方面

以“日历”App 图标上的日期为例 狭窄空间里显示的日期 有点杂乱松散 我不太喜欢 为了解决这个问题 我可以 从群组级别关闭镜面效果 或者从图层级别 完全关闭 Liquid Glass

下面来看看阴影 中性阴影是预设的阴影效果 这种阴影非常微妙 用途多样 在各种背景下都可以呈现出色的效果 不过 如果你的背景颜色是白色 最好试用一下色彩阴影 图案的颜色会溢出到背景上 打造出突显新材质独特光效 和实体感的精致视觉效果

我们还可以创建变体 使用中色阴影 来设计深色和单色模式下的效果

说到深色外观 还有一些通常需要考虑的因素

例如 填充效果 我经常用填充来帮助优化图案 以“词典”为例 在设计深色模式的图案时 如果不做任何更改 效果大致是这样 这是一个很好的例子 因为它突出了两个问题 第一 褐红色书签 在深色模式下几乎消失了 第二 我现在都有点想念 独具一格的珊瑚红了

所以我们应该更改填充效果 同理 其他与颜色有关的属性 也需要注意这一点 比如不透明度和混合模式

假设我导入的是 PNG 文件 现在无法使用填充 可以使用设计软件创建另一个图像 将图像作为变体导入 这样也能达到同样的效果

清晰度也是单色外观的关键 将图标包含的至少一个元素 设置为白色 通常是最突出或最具辨识度的元素 能够保证图标的视觉表现力 而其他颜色可以映射为灰调 对于这种设计 Icon Composer 会自动进行转换 但一定要调整一下 确保呈现最优对比度 为圆角矩形和圆形平台设计时 在很多情况下 你无需进行额外操作 因为全新的 Watch 画布 光学面积更大 而且基于同一网格 不过 需要重点注意一下构图 考虑从光学角度 针对圆形平台进行调整 如果有任何元素需要触及画布的边缘 可以放大一下 让元素触及 Watch 的边缘 或者 如果你熟悉出血设计这个概念 你可以在源图案中 进行这种调整 说到这里 我们来最后 看一下预览面板

右上角的控件 让你可以在提供图标时更改背景 非常适合在不同的背景下预览效果 也非常适合预览图标在新模式下 搭配墙纸或图像的效果 从而测试清晰度

你还可以叠放图标表格 看看光影流动效果

还可以放大细看或者缩小查看

完成 Icon Composer 流程后 只需保存并导出 .icon 文件 将文件拖到 Xcode 中 然后在项目编辑器中选择你的图标 当你构建和运行 App 时 你将能够看到它是如何自动适应 不同平台和外观的

总结一下 以往的做法是 在传统的设计工具中 开始和结束设计流程 而 Icon Composer 更进一步 助力开发者以全新的灵动方式 跨平台打造更生动的设计 这可以有效节省素材生成时间 让你不必在 Photoshop 中 费力重新构建大量玻璃效果 相信大家都有过这种烦恼 图标设计不再只是过去那种 简单的静态图像构建 正在演变为更富表现力、层次感的 生动图案创作 这些图案应该能够响应用户输入 并完美适应不同外观 图标能够带来一种更加丰富多样、 集成度更高的设备端体验

如果你想要打造这种体验 可以使用 Beta 版 Icon Composer 后续还将推出更多新功能 并根据你的反馈进行改进 欢迎大家下载试用 使用“反馈助理”提出 有关增强功能的意见 另外 别忘了探索 我们为这款新工具推出的众多资源 谢谢观看