WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Create icons with Icon Composer

Create icons with Icon Composer

SwiftUIDesign
观看原视频

Highlight

Icon Composer 是 2025 年随 Liquid Glass 推出的独立设计工具，把一份分层源文件输出为 .icon，统一覆盖 iPhone/iPad/Mac/Watch 四个平台与 Default、Dark、Clear light、Clear dark、Tinted light、Tinted dark 六种外观。

核心内容

回到 2025 年之前，Mac 应用图标要按多种尺寸单独绘制，iOS 加进来后还要叠 2x、3x，watchOS 又是另一套（01:01）。后来系统支持自动缩放，每个平台只要一张图就够了。但今年 dark 与 tinted 模式在 iOS 上继续扩展，macOS 也开始全面采用，Watch 又换了新外观——同一个 App 的图标要交付的组合数量再次膨胀（01:42）。

Apple 的回应是 Icon Composer，这是一款独立工具，把一份分层源文件做成统一的 .icon，由它去派生四个平台、六种外观（02:00）。它和现有设计工具配合：在 Figma、Sketch、Illustrator、Photoshop 中按层完成绘制，导出 SVG 或 PNG，拖进 Icon Composer 就能实时看到每种外观的效果，再保存交给 Xcode（03:32）。Apple 自己今年的全套图标就是用同一工具完成的，迁移成本被压到很低。

如果原图本来就是高度插画化的，旧的 Xcode 单图上传方式仍然可用，系统会在边缘自动加上 specular highlight（02:13）。但只要造型偏图形化，进 Icon Composer 就能拿到 Liquid Glass 的全部动态属性。

详细内容

整套流程分四步：在设计工具里画分层稿、按 Z 序导出图层、在 Icon Composer 里调玻璃和外观、保存 .icon 交给 Xcode（03:37）。

画布尺寸统一了：iPhone、iPad、Mac 共用 1024px 圆角矩形画布，Watch 是 1088px 的圆形画布，故意大一圈以便造型在两种形状间互通（04:20）。Apple Design Resources 上能下到对应模板。

分层规则：每层代表一个 Z 深度。Messages 这种简单的图，前景 + 背景两层就够了；Home 那种复杂构图就要多分几层。一个容易忽视的技巧是按颜色拆层——Translate 图标里两个气泡和文字分到不同层后，做 Dark 模式只要换一个 fill（05:29）。

源文件应当只保留图形本质：扁平、不透明、无特效。模糊、阴影、specular、opacity、translucency 都是 Liquid Glass 的动态属性，留到 Icon Composer 里去调（06:00）。

导出：矢量层导出 SVG，按 Z 序数字编号，自动落位。文字要先转成 outlines，因为 SVG 不保留字体（06:42）。自定义渐变、位图等 SVG 表达不了的内容导出为 PNG，保留透明背景。背景色和简单渐变直接在 Icon Composer 里设，不要导出。

重要的细节：导出时不要带圆角矩形或圆形蒙版，Icon Composer 会自动施加平台对应的裁切（07:06）。Illustrator 用户可以下载 Apple 提供的 layer-to-SVG 脚本，一键批量导出。

进入 Icon Composer 后，界面分三块：左侧 sidebar 列出 canvas、groups、layers；中间是预览面板（07:29）；右侧 inspector 放外观属性和文档设置。把图层拖进来会自动按字母排进一个 group，最多可以分到四个 group。group 是玻璃效果的承载单位，Home 用了四个 group 让每层都成为独立的玻璃片（08:42）。

外观系统：今年把原来的 light/dark/tinted 标注改名成 default、dark、mono；clear 与 tinted 的最终效果由 mono 派生（09:01）。在 layer 级可以开关 Liquid Glass，调颜色、构图；在 group 级才能拿到完整的玻璃属性。其中 opacity、blend mode、fill 默认按外观分别配置，其余跨外观共享，按需点 hover 上的加号创建独立变体（10:15）。

调玻璃时常踩的坑：Calendar 图标里日期数字在窄笔画处会显得过于「枕头化」，可以在 group 上关掉 specular，或者直接在 layer 上关掉 Liquid Glass（10:30）。Watch 的圆形画布要单独检查——元素如果碰到边缘，要么放大重新触边，要么在源文件里预留 bleed。

核心启发

  • 把动态属性留给 Icon Composer：模糊、阴影、specular、translucency 这些原本要在设计稿里手动模拟的效果，现在统一交给工具按 Liquid Glass 实时计算。

    • 为什么值得做：六种外观乘以四个平台共 24 种组合，手工 bake 进位图根本对不齐，工具派生才有可能保持一致。
    • 怎么开始：把现有图标源文件中的所有阴影、模糊、高光图层删掉，只留扁平 fill；然后导出 SVG 拖进 Icon Composer，逐个 group 调 Liquid Glass 属性。

  • 按颜色拆层而非按视觉元素：在源文件就为 Dark/Mono 模式留好开关，避免日后维护两套图标。

    • 为什么值得做：换一个 fill 就能完成 Dark 适配，比维护多份导出图省一半工时。
    • 怎么开始：Translate 这类有明显色块差异的图标先做试点，把每种颜色独立成一个 layer，导出后在 Icon Composer 的 layer 级 color 控件里直接做 Dark 变体。

  • 建立 .icon 的版本控制流程：把 .icon 文件纳入仓库，和代码一起 review。

    • 为什么值得做：.icon 是单一交付物，可以在 PR 里直接 diff、可以由设计师独立更新而无需开发者重新导出多份位图。
    • 怎么开始：把现有 Assets.xcassets/AppIcon.appiconset 替换为 .icon，在 Xcode Project Editor 里指向新的文件；CI 可以加一步用 Icon Composer 的命令行做完整性校验。

  • 统一 1024px 画布：iPhone/iPad/Mac 共用同一份源文件，Watch 用 1088px 圆形版本同步衍生。

    • 为什么值得做：减少团队维护多份模板的成本，新人上手只学一种栅格。
    • 怎么开始：从 Apple Design Resources 下载新模板，迁移现有图标时把所有平台的版本对齐到 1024px 网格，再单独检查 Watch 的圆形画布是否需要 bleed。

关联 Session

评论

GitHub Issues · utterances