Say hello to the new look of app icons
SwiftUI & UI Frameworks 进阶 0m

认识全新的应用图标外观

Say hello to the new look of app icons

2025年6月9日

在 Apple 官方观看视频

一句话判断

Liquid Glass 不只是让图标变透明——它重新定义了图标作为「系统材质」的角色，从一张 PNG 变成了一个会呼吸的多层组件。

这场 Session 讲了什么

这是 WWDC 2025 图标设计语言更新的核心 Session。和 session 361（Icon Composer 工具使用）不同，这场更偏设计理念和视觉规范层面。

2025 年 Apple 在 iOS、iPadOS、macOS、watchOS 全平台统一了图标的设计语言，核心材质就是 Liquid Glass——一种结合了玻璃光学特性和流体感的动态材质。图标不再只是静态贴图，而是由多层透明/半透明片材叠加而成，能够响应系统外观（Default、Dark、Clear light/dark、Tinted light/dark）做出自适应变化。

iOS 和 macOS 新增了 Clear 和 Tinted 两种外观模式，让用户可以在「通透玻璃」和「单色着色」之间自由切换图标风格。watchOS 也同步获得了新外观，画布尺寸调整为 1088px，与 iOS/iPadOS/Mac 共享同一套网格体系。

值得深挖的点

六种外观模式的设计逻辑

  • Default：最接近传统图标，Liquid Glass 带来边缘高光和微妙的深度感
  • Dark：系统级暗色适配，不是简单反色，需要针对每个图层单独调 fill/opacity
  • Clear light / Clear dark：玻璃通透模式，背景可见度更高，图标更「轻」
  • Tinted light / Tinted dark：单色着色模式，图标被统一为一种色调，可读性依赖明度对比

从 tvOS/visionOS 借来的分层思路

Apple 的分层图标设计在 tvOS 和 visionOS 上已经成熟运行多年。2025 年把这个模式推广到了全平台。设计师需要习惯「按 Z 轴深度分层」而不是「按视觉元素分组」。

用户自定义的边界

Clear 和 Tinted 模式让用户有了更多个性化空间，但图标的核心辨识度仍然由设计师控制。这和 Android 的 Material You 全面着色是完全不同的哲学——Apple 保留了图标的主体设计，只允许材质和色调的变化。

代码片段

这个 Session 不涉及代码。图标适配的核心工作在设计工具和 Icon Composer 中完成。Xcode 侧的集成只需：

// 无需代码——图标配置完全在 Xcode Project Editor 中完成
// 将 .icon 文件拖入项目即可
// 系统会自动处理所有外观模式的切换

最佳实践

  1. 先看这场再看 361——理解设计语言比学工具更重要。不清楚六种外观的区别就上手 Icon Composer，大概率会做出可读性很差的 Mono 版本
  2. 辨识度优先于装饰性。Liquid Glass 的材质效果很炫，但如果图标在 Tinted 模式下糊成一团，说明分层策略有问题
  3. 每个外观模式都要单独审视，不要依赖自动转换的默认结果。尤其是 Dark 模式下深色元素会消失、Mono 模式下色彩区分会丧失
  4. Watch 圆形构图需要单独调整，不是简单缩放。元素的光学重心在圆形和圆角矩形之间会有偏移

还有什么值得关注

  • 这个设计语言更新是 Apple 近年来最大规模的视觉统一行动，影响所有平台
  • 旧图标不会立即失效——系统会自动给未适配的图标加上边缘 specular 高光效果
  • 如果你的 app 使用照片作为图标（比如头像类 app），仍然可以直接上传单张图片，不需要分层
  • 配套工具 Icon Composer 在 session 361 中有详细讲解
  • 建议同时关注 session 356 “Get to know the new design system”，理解 Liquid Glass 在整个系统层面的设计逻辑
SwiftUI Design