肘子的Swift记事本 ·

Icon Composer 见招拆招

💡 原文中文，约1700字，阅读约需4分钟。

📝

内容提要

苹果推出了 Liquid Glass 风格和 Icon Composer 工具。导出 SVG 文件时需注意结构，避免无用代码影响效果。单色图标可能显得暗淡，需重新指定填充色。Icon Composer 对层数有限制，设计时需平衡性能与效果。导入 Xcode 时，文件需放在正确目录，整体设计难度增加。

🎯

关键要点

苹果推出了 Liquid Glass 风格和 Icon Composer 工具。
导出 SVG 文件时需注意结构，避免无用代码影响效果。
单色图标可能显得暗淡，需重新指定填充色。
Icon Composer 对层数有限制，设计时需平衡性能与效果。
导入 Xcode 时，文件需放在正确目录，整体设计难度增加。

🔎

延伸解读

SVG 导出注意事项

在使用 Icon Composer 时，导出 SVG 文件的结构至关重要。不同设计软件可能会生成多余的代码，影响图标效果。建议使用文本编辑器检查导出的 SVG，确保删除无用的元素，以避免影响 Icon Composer 的识别和显示效果。

单色模式的设计挑战

在单色模式下，图标可能显得暗淡无光。Icon Composer 根据正常模式的颜色明度计算单色模式的显示效果，因此需要重新指定填充色。设计师应考虑在单色模式中使用更亮的颜色，以确保图标在不同模式下的可见性和美观性。

层数限制与设计取舍

Icon Composer 对图标的层数有限制，最多只能使用四层。这要求设计师在设计时进行取舍，合理合并层次以优化性能。同时，玻璃效果与模糊效果的冲突也需要设计师在视觉效果与技术限制之间找到平衡。

导入 Xcode 的注意事项

将 Icon Composer 文件导入 Xcode 时，需确保文件放在正确的目录，与 Assets 同级。否则，旧版系统可能无法识别新图标，导致回退到旧图标。这一细节对开发者来说至关重要，避免在不同系统版本中出现不一致的用户体验。

❓

延伸问答

Icon Composer 是什么？

Icon Composer 是苹果推出的工具，用于制作符合 Liquid Glass 风格的图标。

导出 SVG 文件时需要注意什么？

导出 SVG 文件时需注意结构，避免无用代码影响效果，建议用文本编辑器检查。

如何解决单色模式图标显得暗淡的问题？

在单色模式中重新指定这些层的填充色，可以选择填充成白色或其他亮色。

Icon Composer 对层数有什么限制？

Icon Composer 对层数有限制，最多只能有四层，以平衡性能和耗电量。

如何将 Icon Composer 文件导入 Xcode？

将 Icon Composer 文件直接放在 App 的目录里，和 Assets 同级，而不是放到里面去。

使用 Icon Composer 设计图标的难度如何？

使用 Icon Composer 设计图标的难度增加，需要花费更多精力以适应不同模式下的设计风格。

🏷️