文章目录
- 快速导航
iOS 26 Liquid Glass 图标适配教程：Icon Composer 分层制作与避坑指南
iOS 26 的图标到底变了什么
从 iOS 26 开始，Apple 把全新的 Liquid Glass（液态玻璃） 设计语言带到了 App 图标上。图标不再是一张静态的 1024×1024 PNG，而是由背景层 + 若干前景层组成，系统会实时渲染高光、折射、半透明和阴影，并随设备陀螺仪产生光影变化。
同时，用户可以在主屏幕选择**默认、深色、着色（Tinted）和透明（Clear）**等外观。如果你还只提交一张扁平图片，系统也能显示，但在深色和透明模式下效果往往很糟糕：背景色块显得突兀，细节糊成一团。
Apple 为此推出了 Icon Composer，用一个 .icon 文件覆盖 iPhone、iPad、Mac 和 Apple Watch 的所有图标变体。
关键规格速查
| 项目 | 规范 |
|---|---|
| iPhone / iPad / Mac 画布 | 1024 × 1024 px |
| Apple Watch 画布 | 1088 × 1088 px |
| 导出格式 | 优先 SVG；含不支持特性的图层用 PNG |
| 分组数量 | 最多 4 个组（Group） |
| 圆角/遮罩 | 不要自己画，系统自动裁切 |
| 文字 | 必须转为轮廓（SVG 不保留字体） |
| 效果 | 去掉阴影、模糊、高光、背景渐变，交给 Icon Composer |
| 工具要求 | Icon Composer 新版本需要 macOS Tahoe 26.4 或以上 |
旧系统怎么办？如果你的最低部署版本低于 iOS 26，Xcode 会在构建时根据 .icon 文件自动生成旧版本所需的图标图片，不需要维护两套资源。
五步完成 Liquid Glass 图标
第一步：用官方模板起稿
从 Apple Design Resources 下载最新的 App 图标模板（Figma、Sketch、Illustrator、Photoshop 均有），模板里已经包含新的网格、形状和画布尺寸。不要沿用旧版带圆角遮罩的模板。
第二步：按"从后到前"拆分图层
把图标拆成逻辑清晰的几层，例如一个笔记 App：
01-background：背景（在 Icon Composer 里设置颜色或渐变，设计稿里可以不导出）02-paper：纸张主体形状03-lines：纸面线条04-pencil：铅笔前景元素
图层命名带数字序号，导入后排列顺序一目了然。需要在不同外观下改颜色的元素，一定要单独成层。
第三步：导出全画布尺寸的图层
每个图层都按完整画布尺寸导出（透明背景），这样导入后位置天然对齐。不要导出画布遮罩，也不要在图层里预先加阴影和模糊——这些静态效果会和系统的动态效果冲突，让边缘出现锯齿或脏边。
第四步：在 Icon Composer 里分组并调玻璃参数
把图层拖入 Icon Composer，整理成不超过 4 个组。每个组可以单独调整：
- 高光（Specular）：控制玻璃边缘反光强度；
- 模糊与半透明（Blur / Translucency）：决定能"透"出多少背景；
- 折射与阴影：增加立体感，但过度使用会让小尺寸下发糊。
然后切换到深色、单色/着色和透明模式逐一预览，必要时为特定外观单独指定颜色。
第五步：拖入 Xcode 并真机检查
把 .icon 文件加入 Xcode 工程，在 Target 的 App Icon 设置中选中它。最后一定要在真机上看：主屏幕、Spotlight 搜索、设置页、通知中的小尺寸图标，以及深色壁纸下的表现。
最常见的五个坑
| 问题 | 表现 | 解决办法 |
|---|---|---|
| 形状过于复杂 | 折射效果下细节糊成一片 | 简化为 2～3 个主要形状，删除细小装饰 |
| 自带圆角 | 边缘出现双重圆角或锯齿 | 提供方形图层，让系统遮罩 |
| 预置阴影/渐变 | 深色模式下发脏、发灰 | 删除静态效果，在 Icon Composer 中调 |
| 文字未转曲 | 导入后字体错乱 | 导出前把文字转为轮廓 |
| 只看大图 | 1024 预览很好看，主屏上看不清 | 用 Icon Composer 的多尺寸预览逐级检查 |
Apple 工程师在 WWDC26 的问答中也提到：开发者最常见的错误就是过度复杂——Liquid Glass 的折射对形状的数量、大小和重叠非常敏感，微小的位移都会带来明显变化。
别忘了商店里的图标与截图
App Store 产品页展示的依然是一张扁平化的营销图标。Icon Composer 支持导出扁平化版本用于营销物料，建议用这个版本统一官网、社媒和商店截图里的图标，保证视觉一致。
同时，如果你的截图里展示了 iOS 主屏幕或带壳效果，记得更新为 iOS 26 风格的设备界面和新图标，否则会显得"过时"。用 appshotmaker.com 这类带壳截图工具可以快速替换设备框和图标素材。
总结
适配 Liquid Glass 的核心原则是少即是多：用简单的形状、清晰的分层，把光影效果交给系统。按"官方模板 → 分层导出 → Icon Composer 分组调参 → 多外观预览 → 真机验证"的流程走一遍，一个下午就能完成适配，同时兼容旧系统。