Highlight
Apple 用 Liquid Glass 材质重做了 iOS、iPadOS、macOS、watchOS 全平台的图标系统，引入 Default、Dark、Clear（light/dark）、Tinted（light/dark）六种外观模式，并把画布尺寸统一到 1024px（手表为 1088px）。
核心内容
过去几年，App 图标的设计是一个让开发者头疼的杂活。同一款 App，要为 iPhone 画一套圆角矩形、为 macOS 画一套带阴影投影的不规则形状、为 Apple Watch 画一套圆形版本。每个平台对栅格、留白、对比度都有不同的暗规则，新增一个深色模式就意味着重出一遍。设计师 Marie 在演讲一开始就说，这次更新的目标，是让一套设计能够跨设备直接用，并且让系统接管材质表现。
WWDC25 把图标背后的设计语言彻底换成了 Liquid Glass。这个材质从 visionOS 的分层图标和真实玻璃的光学特性里抽出来，通过边缘高光、磨砂层、半透明层的叠加，让图标看起来像内部发光的玻璃片。在 iPhone 主屏上，图标会根据陀螺仪输入让边缘的反光跟着设备一起动（01:23）。系统还在 light、dark 之外新增了四种外观：单色玻璃的 light/dark 版本，以及把颜色染到前景或注入玻璃本体的 tinted dark / tinted light，所有外观在 iPhone、iPad、Mac 上一致，watchOS 同步获得 light 模式的新外观（02:06）。
详细内容
新的设计语言围绕几条具体规则展开。
统一的栅格与画布。 过去图标按设备分别绘制，导致同一款 App 在不同平台上的细节有出入。现在 Apple 把圆角矩形和圆形两种形状放进一套统一栅格，圆角半径加大，让图标的弧线和系统 UI、硬件外框更同心（02:44）。圆角矩形仍使用 1024 像素画布，圆形图标在栅格里有专属的内框、留白更多。watchOS 的圆形栅格画布是 1088 像素，故意比矩形画布略大，方便平台之间相互翻译（04:31）。
macOS 图标自动遮罩。 老版的 macOS Contacts 图标会有突出主形状的标签条，新规则下画布形状会作为蒙版裁掉这些超出物。系统会对老图标自动做遮罩或拉伸，并直接套用新的玻璃材质，开发者不需要改文件就能拿到新外观；但 Apple 建议重画图标以更好地利用整个画布（03:21）。
分层是新设计语言的核心。 最简单的图标是一层背景加一层前景，例如 Messages（05:46）。前景可以拆成多层叠放，Podcasts 就把同心圆和人像分成不同层叠在一起，让平面化的图变出真实的纵深（06:17）。
插画风格要让位给材质。 写实的 3D 透视会和玻璃材质本身的高光争抢视觉焦点，老 Chess 图标就被改成了正面、扁平的视角（06:46）。Preview 图标的放大镜则被刻意设计成有透视，因为这个透视在功能上是有目的的——它强调放大镜的对焦区。
半透明和模糊几乎免费。 用半透明叠层可以在 light、dark、Clear 模式下都看起来漂亮，背景在 Clear 模式下直接是壁纸（07:32）。
少即是多。 Photos 图标减少了花瓣的重叠区域，让材质本身的反射边在交叉处发挥；Home 图标移除了原本烤进去的阴影和倒角，改用更圆的形状，再交给玻璃材质渲染（07:58 → 09:03）。Apple 明确提示：源文件里不要再自己烤阴影、斜面这些静态效果，材质配方会自动做。
细节避免过尖、过细。 设置图标的齿轮被改成圆角，让光线沿边缘平滑流动；需要受材质处理的元素用更粗的线宽，以便在小尺寸下保留细节（09:42）。
背景用渐变而非纯色。 Apple 提供了 System Light 和 System Dark 渐变，建议用它代替纯白或纯黑，确保对比度并给材质效果一个理想画布；同时建议多用彩色背景，使浅色和深色模式之间的切换更有差异（10:14）。
模板文件已经放到 Apple Design Resources，提供 Figma、Sketch、Photoshop、Illustrator 四种格式（05:11）。
核心启发
-
做什么：把 App 图标重画一版，按新栅格统一所有平台。
- 为什么值得做：Apple 给老图标做的自动遮罩和拉伸只是兜底，不重画就拿不到完整的画布利用率。
- 怎么开始：从 developer.apple.com 下载 Figma/Sketch 模板，用 1024px 圆角矩形画布起草，watch 圆形画布参考 1088px。
-
做什么：把源文件里烤死的阴影、倒角、3D 透视删掉。
- 为什么值得做：Liquid Glass 会自动加边缘高光、阴影和镜面反射，源图里的静态效果会和材质打架，糊成一团。
- 怎么开始：把现有 PSD/AI 文件的图层效果（drop shadow、bevel、inner glow）一律关闭，再放进 Icon Composer 看效果。
-
做什么：单独审视六种外观模式（Default、Dark、Clear light/dark、Tinted light/dark）。
- 为什么值得做：自动转换在 mono 和 tinted 模式下经常让前景和背景失去层级，关键元素消失。
- 怎么开始：在 Icon Composer 里逐个切换外观模式，把对比度和层级有问题的图层手动调整透明度或换层。
-
做什么：把图标拆成更明显的多层结构（背景 + 多个前景）。
- 为什么值得做：分层是材质效果起作用的前提，扁平单层图很难体现 Liquid Glass 的纵深。
- 怎么开始：先确定一个背景层，然后把图形主体拆成 2 ～ 3 个语义清晰的前景层堆叠，参考 Podcasts 的分层方式。
关联 Session
- Create icons with Icon Composer — Icon Composer 的具体操作教程，是这场设计理念的工具配套。
- Meet Liquid Glass — 介绍 Liquid Glass 材质本身的设计哲学，理解材质再看图标会更清楚。
- Build a UIKit app with the new design — UIKit 侧如何配合新设计语言落地。
- Build a SwiftUI app with the new design — SwiftUI 侧的配套实践。
评论
GitHub Issues · utterances