Apple / Liquid Glass
WWDC25 把 iOS / iPadOS / macOS / watchOS / tvOS 上的所有 chrome 切到了同一种新材质。 它由 背景模糊、活力增强、边缘折射、镜面高光、可染色调五层实时合成。 Liquid Glass 不是一组颜色或字体——它的本质属性只能在 交互 中显现，所以这个条目以 Playground 为主。
Playground
一块可拖拽的玻璃浮在可换的壁纸之上。把 Liquid Glass 的 5 层 primitive 拆开调， 切换 .regular / .clear 两种官方 variant 与 .regular.tint(...) modifier 预设，重现 4 个 iOS 26 经典构图。 边缘的折射在 web 是 SVG 位移图 + chromatic aberration 的近似实现——Apple 端的真实 GPU 合成路径官方未公开。
3 预设 · 4 场景 · 5 primitive · 进入 →规格表
Playground 教会读者“glass 是什么材质”，但没回答“glass 在 iOS 26 里以什么规格出现在哪些 surface”。这一栏把 Liquid Glass 落到 8 件具体 surface 上：尺寸、圆角、材质变体、动效曲线、scroll-edge 行为，每个数字都标注来源。
8 surfaces · 全部带来源 · 进入 →深度解析
3 篇原创 + 9 篇一手来源。双峰高光为什么让 iPhone 用户晕眩、5 层 primitive 在 SwiftUI 里如何被一行 API 隐藏、从 Aqua 到 Liquid Glass 的 25 年——这些不是新闻稿，是做这个 Playground 时被反复 call 出错再去查证的过程总结。
3 篇原创 · 9 篇来源 · 进入 →设计系统速查
- 材质名
- Liquid Glass · 用于控件 / 导航层的新动态材质（不是对所有旧 Material API 的统一替换；旧 .ultraThinMaterial 等仍可用）
- 发布
- WWDC25 · 2025-06-09 · iOS 26 / iPadOS 26 / macOS Tahoe 26 / watchOS 26 / tvOS 26
- 材质变体
- .regular（自适应）· .clear（极薄、几乎无 tint）
- 关键 API
- SwiftUI: .glassEffect() / GlassEffectContainer · UIKit: UIVisualEffectView + UIGlassEffect
- 可染色
- .glassEffect(.regular.tint(.color)) · 通过限制饱和度避免与系统色冲突
- 互动状态
- .glassEffect(.regular.interactive()) · 按下时有压扁/挤压动画
- 团队
- Human Interface Team（VP: Alan Dye）
- 历史脉络
- Aqua (2000) → Vista Aero (2007) → iOS 7 frosted (2013) → visionOS Materials (2023) → Liquid Glass (2025)
- 争议
- iOS 26 Beta 1 因可读性差被批评 → Beta 3/4 中调高 tint opacity 与对比度 → 最终发布版收敛
关于这个条目的方法论
Anthropic 那一档我做了色彩长文、插图反推、340 个页面的画廊——因为 Anthropic 的设计语言是 静态视觉语法，可以靠图片和 PDF 归档。Liquid Glass 不是。
它是一种 实时合成的材质：折射轴随设备 motion 移动、透出的色彩随背景内容变化、相邻元素靠近时会流体合并。截图只能记录某一瞬间；要“懂”它，只能去玩。所以这份图鉴反过来——速查表很短，深度长文留给后续，把 Playground 做厚。