WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Say hello to the new look of app icons

Say hello to the new look of app icons

visionOSRealityKitSwiftUI
观看原视频

Highlight

Apple 把 visionOS 的分层图标语言和真实玻璃属性结合成「liquid glass」材质，统一了 iOS、iPadOS、macOS、watchOS 的图标设计网格，并新增了浅色/深色玻璃、浅色着色和深色着色四种半透明外观。

核心内容

过去几年，开发者维护 app 图标是件麻烦事。iOS、macOS、watchOS 各有一套画布尺寸和圆角规范，一个图标要为每个平台单独画一版。macOS 上有些图标会让次要元素（比如 Contacts 里的索引页）超出主体形状，画起来既不统一也不优雅。再加上深色模式、着色模式陆续加入，资产数量越来越多。

WWDC 2025 把整套设计语言推倒重做。Apple 从 visionOS 的分层图标得到灵感，研究真实玻璃的反光、折射、磨砂特性，做出名为 liquid glass 的材质（00:54）。这套材质把边缘高光、磨砂、半透明分层叠加，让图标看起来像是从内部发光。iOS 主屏幕里，图标会根据陀螺仪输入让光线在边缘流动，仿佛在反射周围世界（01:23）。

设计系统层面，所有平台共用同一套网格。圆角矩形画布用 1024 像素，watchOS 圆形画布用 1088 像素并故意比矩形画布大一圈，确保跨平台视觉一致（04:38）。外观模式从两种扩展到六种：浅色、深色、单色玻璃（浅/深两版）、深色着色（颜色加在前景）、浅色着色（颜色注入玻璃本身），都同时在 iPhone、iPad、Mac、Apple Watch 生效（02:06）。

详细内容

新材质的核心是分层（layering）。最简单的图标只有背景加一个前景层，比如 Messages 的气泡（05:47）。但前景可以叠多层，Podcasts 旧版用蒙版风格暗示层次，新版直接把同心圆和人物形状当作真实的堆叠层来处理，于是有了立体感（06:17）。

插画风格要往扁平走。 旧版 Chess 用了带透视的 3D 棋子，立体感太强反而和玻璃材质打架。新版改成正面平面视角，把立体感留给材质本身去渲染（06:46）。Preview 图标保留了放大镜的透视，但只在「需要强调焦点区域」时才用，立体形状要服务于功能（07:13）。

半透明要克制使用。 Photos 旧图标本身就有花瓣重叠的透明效果。新版反而减少重叠数量，让材质的边缘反光有空间展现（08:05）。Home 图标的处理更激进：去掉投影、去掉斜面，把层数减少、形状变圆，再交给系统玻璃材质统一渲染（08:52）。原则是：源文件里别再烘焙阴影、斜边这些静态效果，系统材质会动态生成。

细节要避开锐角和细线。 圆角让光线能在边缘平滑流动，Settings 图标的齿轮就用了更圆的轮齿（09:42）。需要保留细节的元素要用更粗的线宽，否则缩到小尺寸会丢。

背景偏好柔和渐变。 纯白或纯黑都不推荐，Apple 提供了 System Light 和 System Dark 两套官方渐变，专门保证对比度和材质效果（10:24）。考虑到深色模式已经普及，背景反而建议用彩色，这样浅色/深色切换时差异更明显（10:42）。

macOS 的兼容策略比较聪明。形状接近圆角矩形的旧图标会被自动遮罩或延展进新模板，自动套上新材质（03:46）。形状特殊的旧图标，系统会去掉投影并自动缩放进圆角矩形画布（04:00），但 Apple 明确建议手工重绘，比如 Photo Booth 就是重画过的。

官方模板覆盖 Figma、Sketch、Photoshop、Illustrator 四种工具，从 developer.apple.com 的 Apple Design resources 页面下载（05:11）。

把整段讲解归纳成一条可执行流程，照着走就能用新材质把图标重画一遍：

1. 下载模板：developer.apple.com → Apple Design Resources →
   选 Figma / Sketch / Photoshop / Illustrator 的新版 icon template
2. 选画布：圆角矩形 1024 × 1024 px，圆形（watchOS）1088 × 1088 px
3. 拆层：背景 1 层 + 前景若干层（Messages 仅 1 层前景；Podcasts 把同心圆和人物拆成多层）
4. 清理静态效果：删除源文件里的 drop shadow / bevel / inner glow（系统材质会动态生成）
5. 简化插画：3D 透视改正面视角，重叠半透明形状减量（参考 Chess、Photos 的改版）
6. 处理细节：尖角换圆角，细线加粗，齿轮齿数减少且加圆（Settings 图标）
7. 设置背景：用 System Light / System Dark 渐变替代纯白纯黑，主色偏向彩色
8. 导出到 Icon Composer，逐个切换六种外观模式预览：
   Light → Dark → Mono Light Glass → Mono Dark Glass → Dark Tint → Light Tint
9. 在 iPhone / iPad / Mac / Apple Watch / App Store 产品页五处验收

关键点：

  • 分层是新材质的根：背景 1 层 + 前景多层，玻璃材质靠层间深度生成立体感，单层平面图标会损失大半视觉信息。
  • 删掉烘焙效果：源文件里的投影、斜面、内发光会和系统动态高光打架，必须从源头删掉。
  • 六种外观模式都要过一遍：Light、Dark、Mono Light/Dark Glass、Dark Tint（颜色加在前景）、Light Tint（颜色注入玻璃），任何一个模式失分整套就废。
  • 画布尺寸是硬约束：1024 px 圆角矩形与 1088 px 圆形是 watchOS 故意「overshoot」的结果，跨平台一致性靠这两个数字撑起来。
  • 背景换彩色渐变：System Light/Dark 是 Apple 调过对比度的官方渐变，纯白纯黑会让玻璃显得平。

核心启发

  • 做什么：先用官方模板重画图标，而不是套滤镜。

    • 为什么值得做：系统材质会动态生成高光、阴影、反射，源文件里烘焙的阴影和斜面会和材质打架，反而把图标做脏。
    • 怎么开始：从 Apple Design resources 下载新版 Figma/Sketch 模板，对照新网格重画图层结构，把投影、斜边、内发光这类静态效果全部删掉。

  • 做什么：把单层图标拆成多层，让玻璃材质能在层与层之间制造深度。

    • 为什么值得做：Podcasts、Home 这类案例显示，多层结构能让同一个图标在不同外观模式下都保持立体感，单层平面图标会损失大半视觉信息。
    • 怎么开始：把前景按语义切层（主体、装饰、点缀分开存），导出时分别交给 Icon Composer 处理。

  • 做什么：把图标设计成能在六种外观模式下都能识别的形态。

    • 为什么值得做：新增的深色着色、浅色着色、单色玻璃模式让用户自定义主屏幕的空间大幅扩展，图标如果只在默认模式好看，会在用户的个性化首页里失分。
    • 怎么开始：在 Icon Composer 里逐个切换六种模式预览，重点检查在浅色着色（颜色注入玻璃）和单色玻璃下的辨识度。

  • 做什么：背景换成柔和渐变 + 彩色基调。

    • 为什么值得做：System Light/System Dark 渐变是 Apple 专门调过对比度的，纯白纯黑反而会让玻璃材质显得平。彩色背景在浅色/深色模式切换时的差异感更强。
    • 怎么开始：用官方提供的 System Light、System Dark 渐变替换现有纯色背景，主色尽量选偏暖或偏冷的彩色，避免大面积中性灰。

关联 Session

评论

GitHub Issues · utterances