Skip to content
LIU的开发日志
Go back

Icon Composer 教会我们的事

Edit page

为什么说 Icon Composer 是开发者的瑞士军刀?深度评测 Apple 新推出的图标合成工具,详解如何配合 Boxy SVG 快速产出符合 HIG 标准的 .icon 文件。

Icon Composer 教会我们的事

Icon Composer

WWDC 2025 发布的 Icon Composer 不仅仅是一个工具,它是 Apple 对“设计工程化”这一命题的最新回答。它用一种近乎偏执的克制,告诉我们:工具的价值不在于功能的广度,而在于对特定场景的极致掌控。

这些都是 Icon Composer 的杰作 (这些精致的图标,皆出自 Icon Composer 的合成艺术)

Icon Composer 是什么?

Icon Composer Interface

Icon Composer 是 Apple 推出的独立应用程序,专门用于创建适应 Apple 全生态(iOS, macOS, watchOS, visionOS)的应用图标。它的核心使命是生成全新的 .icon 格式文件。

这一工具不仅支持传统的图标导出,更引入了全新的 “Liquid Glass”(液态玻璃)设计语言。通过它,开发者可以在一个文件中定义图标的多个图层(Layers),系统会自动根据设备环境(如深色模式、Tinted 模式)渲染出具有深度感、光照反射和材质效果的图标。

Icon Composer 不能自由画形状

这是 Icon Composer 最“反直觉”也是最令人深思的地方。作为一个图标制作工具,它竟然不支持画笔、贝塞尔曲线或形状绘制。

它不是画板,它是暗房。

你无法在 Icon Composer 里“画”一个 Logo。你必须在 Sketch、Figma 或 Photoshop 里设计好你的矢量图形,然后将它们作为图层导入。这种限制在产品设计上极其大胆:它强制分离了“创意造型”与“材质渲染”这两个工序。

Apple 似乎在说:“把形状交给专业的矢量工具,把光影、材质和平台适配交给我。”这种“有所不为”,保证了它不会沦为另一个臃肿的低配版 Illustrator,而是专注于它最擅长的事——Composing(合成)

既然需要自己画形状,用什么?

既然 Icon Composer 专注于“后期”,那么前期的“摄影”——绘制矢量形状,就需要一个同样趁手的工具。

这里特别推荐 Boxy SVG

Boxy SVG

它和 Icon Composer 有着异曲同工的极简哲学:不追求大而全的功能堆砌,而是专注于生成最干净、最标准的 SVG 代码。对于不需要复杂艺术创作,只想快速绘制几何图形或简单 Logo 的开发者来说,Boxy SVG + Icon Composer 是一对完美的组合。

Icon Composer 很清楚他是为 XCode 用户服务的

如果说 Sketch 是设计师的武器,那么 Icon Composer 就是开发者的瑞士军刀。它的每一个细节都在大声宣告:我是为工程师准备的。

界面与 Xcode 布局一致

打开 Icon Composer,你会感到一种熟悉的安心感。左侧是导航栏(Navigator),管理图层结构;中间是画布(Canvas),实时预览效果;右侧是属性检查器(Inspector),调整参数。

这完全就是 Xcode Interface Builder 的孪生兄弟。Apple 没有试图发明一套新的交互逻辑,而是复用了开发者肌肉记忆中最深刻的模式。

只有开发者能下载使用

它不是 Creative Cloud 的一部分,它是 “Additional Tools for Xcode” 的一部分。你甚至无法在 Mac App Store 搜到它,只有登录开发者账号才能下载。这明确了它的受众定位:它是开发工作流的最后一公里,而非设计工作流的起点。

产物拖进 Xcode 直接使用,无需照顾平台 Target

拖进 Xcode 直接使用

还记得被 AppIcon.appiconset 支配的恐惧吗?为了适配 iPhone, iPad, Watch, Mac, Notification, Settings, Spotlight… 我们需要准备几十张不同尺寸的 PNG。

Icon Composer 彻底终结了这一切。你只需要导出一个 .icon 文件,直接拖入 Xcode 的 Asset Catalog。Xcode 构建系统会在编译时自动生成所有需要的尺寸和变体。

One file to rule them all. 这种极简主义是工程效率的极致体现。

Coder 也能创建如原生般的精致图标

码农福音

这是 Icon Composer 最具“普惠”意义的一点。以前,开发者自己画的图标往往显得“平”、“干”、“格格不入”。

但在 Icon Composer 里,你只需要扔进去几个简单的图形图层,调整一下 Z 轴深度,系统就会自动应用 “Liquid Glass” 效果——那种高级的半透明、边缘的高光、随视角变化的光泽,瞬间让图标拥有了 Apple 原生的质感。它让不懂光影原理的 Coder,也能产出符合 HIG(Human Interface Guidelines)标准的精致图标。

使用方法

Icon Composer 的工作流非常线性:

  1. 准备素材:使用 Boxy SVG 或其他设计工具,将图标拆分为“背景”、“主体”、“前景”等 1-3 个图层,导出为 SVG 或高分辨率 PNG。
  2. 导入合成:打开 Icon Composer,将图层依次拖入。
  3. 调整材质
    • 使用右侧面板调整每个图层的 Scale (缩放) 和 Offset (位移)。
    • 设置 Material (材质) 属性,通过 Lighting (光照) 和 Shadow (阴影) 增加深度感。
    • Platform 预览中检查 iOS, macOS, watchOS 的表现,特别是 Dark ModeTinted Mode 下的自动适配效果。
  4. 导出交付:保存为 .icon 文件,直接拖入 Xcode 项目。

相关资源


Edit page
Share this post on:

Previous Post
App Store 上架欧盟区遇到 DSA 拦截怎么办?个人开发者低成本合规指南
Next Post
Xcode 连不上 Apple Watch?试试这个“玄学”操作,我省下了整整一天!