Icon Composer 见招拆招

新的 Liquid Glass 风格发布之后，苹果随即提供了用于制作符合 Liquid Glass 标准图标的 Icon Composer。从苹果的介绍来看，Icon Composer 使用非常简单明了，基本上分层把图片放进去即可，但实际使用上还是有一些细节需要小心。接下来我将会以我的 App 为例子，简要的介绍一下过程中遇到的问题。

从设计工具导入素材

这是 SLIT_STUDIO 的图标文件，是在 Affinity Designer 里面设计的。我设计这个图标的概念是一个融化的相机镜头，镜头上还有镜头光晕。大概像下面这样分成九层。

根据苹果的要求，我将每层都分成单独的画板导出，都使用了 SVG 格式。这时我遇到了一个诡异的现象，即便打开了 Specular，依然无法看到玻璃高光效果。

这是由于 Affinity 导出的 SVG 文件中，包含有一个最外侧与画板大小相同的方框。使用任意文本编辑器打开就能看到。注意下图选中的部分。

<rect x="0" y="0" width="512" height="512" style="fill:none;"/>

将该行删除后问题解决。

不同软件在导出 SVG 的时候可能会使用不一样的结构，就像早年用 Dreamweaver 写网页一样，会带有很多无用的代码。这就可能会影响 Icon Composer 的识别。建议对导出的 SVG 图片全部用文本编辑器检查一遍。

如果你想要彻底规避这一问题，也可以选择使用 PNG 而不是 SVG。这时候 Icon Composer 会用算法计算图像的边缘。但是要小心 PNG 缩放所带来的锯齿。

单色模式的适配

浅色和深色模式处理完之后，最后要处理单色模式。这时你可能会发现，单色模式里的图标看起来灰蒙蒙的。我一开始还以为单色模式就应该是这样的，但拿到真机上测试才发现比其他 App 暗很多。

出现这一问题是由于 Icon Composer 会通过正常模式颜色的明度来计算单色模式的明度。像我这里都是绿色，在单色模式里就会显得灰蒙蒙。解决方法也很简单，单色模式中重新指定这些层的填充色。除了全部填充成白色，你还可以玩一些花样。比如像这样做成从里到外越来越亮。

设计上的取舍

Icon Composer 其实存在很多限制。首先就是层数的限制，在我另一款 App 码抽屉中，你可以看到左下角有一个层数超出限制的提示。大概是基于性能和耗电量的考虑，图标最多只能有四层。

要减少层的使用，首先可以把最后一层的背景色写在文档设置里，不需要单独一层。之后就只能看看什么东西可以凑活一下合并了。

这是调整之后的效果，我整体打开了第四个 Group 的高光，改了一些透明度的选项。不过还好影响不算太大。

除了性能的限制，还有玻璃效果本身的限制。在 SLIT_STUDIO 图标中整个下半边是模糊的，但是你做不到让一个东西同时是模糊的还有玻璃效果。如果没有玻璃效果会在一众图标中格格不入，如果有了玻璃效果就只能放弃下半边的模糊。

说实话我也不太确定怎样更好。

导入 Xcode

要将 Icon Composer 文件导入 Xcode 中，你需要把文件直接放在 App 的目录里，和 Assets 同级，而不是放到里面去。

经过测试，如在旧版本的系统中运行用新 SDK 编译的 App，就会 Fallback 到 Assets 里面定义的老图标。这也很好理解，老版系统看不懂 .icon 文件，自然是照样读旧的。

总结

Icon Composer 其实给图标设计带来了相当大的限制，以前还可以一定程度上无视系统其他图标的设计风格而不显得太突兀，现在却要为了能在各种模式下都不违和，花费很大的功夫。所以设计的难度还是有所增加的。接下来随着新系统发布，各种 App 都会逐渐适配新的设计风格，想必还有很多巧妙的设计等着我们发现。