WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet Liquid Glass

Meet Liquid Glass

tvOSSwiftUIUIKit
观看原视频

Highlight

Liquid Glass 是 Apple 跨 iOS、iPadOS、macOS、tvOS、visionOS 统一推出的新材质层，通过实时透镜（Lensing）折射光线，并在尺寸、背景内容变化时自动切换明暗、阴影和折射强度，专门用于导航和控件的浮层。

核心内容

过去几年，Apple 在不同平台堆了好几套视觉语言：macOS 还残留 Aqua 的痕迹，iOS 7 之后是实时模糊，iPhone X 强调流体过渡，Dynamic Island 又是另一种弹性形态，visionOS 则完全沉浸式。结果就是开发者每登陆一个平台都得重新学一套设计规范，用户在跨设备时也会感到割裂。设计师 Chan 在开场直接点出了这条主线（00:21）：Liquid Glass 是把这些历史经验合并到一起的一次重写。

Liquid Glass 没有去模拟现实世界里的某种物理材质，而是被定义为一种”数字元材质”（digital meta-material）。它的核心特征只有两条：实时弯折光线（Lensing），以及像液体一样响应触控和应用状态变化（00:43）。前者解决”如何在透明的同时仍然能看清控件边界”的老问题，后者解决”控件之间切换时为什么总像是硬切”的老问题。

适配范围也比之前的 Material 大得多。在 iPad 和 Mac 上，Liquid Glass 让侧边栏、Tab Bar 浮在内容之上，并且会被周围内容的颜色”染色”——附近的彩色画面会有微弱的光线溢出到玻璃表面（08:09）。这意味着开发者只要用系统标准导航容器，就能免费拿到这套行为，无需自定义。

详细内容

Liquid Glass 由多层组合而成，每一层都根据背景实时变化（06:21）。

Lensing（透镜效应）：之前的材质是把背景光线散射开（scatter），Liquid Glass 改成实时弯折和聚焦光线（02:32）。这让控件可以做到极轻、极透，但仍然能在视觉上和背景区分开。淡入淡出也不再用 alpha 渐变，而是通过逐渐调整光线弯曲程度来实现物质化（materialize in/out），02:55）。

Highlights 层：Liquid Glass 处于一个模拟环境里，环境里的光源会照在材质上产生高光，并随设备的姿态变化而移动（11:04）。锁屏/解锁这种系统级动效里能看到光线沿元素轮廓滑过。

Shadow 层：阴影会感知背景。元素位于文字之上时阴影变深，位于纯色亮背景上时阴影变浅（11:43）。这套行为是内置的，开发者用系统控件就能拿到。

Scroll Edge Effect：与 Liquid Glass 配合使用，专门解决滚动内容下浮层的可读性问题（08:55）。

  • 默认形态：内容滚到玻璃下方时，边缘会逐渐淡出到背景，让标题保持清晰。
  • 暗色形态：当深色内容滚入触发玻璃切换到深色样式时，效果改为微弱的 dimming，保证对比度（09:28）。
  • Hard Style：用于工具栏下方有 pinned accessory view（如表头）的场景，效果在工具栏和附属视图上整体均匀施加，而不是渐变（09:46）。

Variants（变体）：只有两种，Regular 和 Clear，不能混用（13:51）。

  • Regular：通用变体，自适应能力齐全，任何尺寸、任何背景都可用。
  • Clear：永久更透明，没有自适应行为，需要叠一个 dimming 层来保证图标和文字可读。Clear 仅在三个条件同时成立时使用：浮层之下是富媒体内容、内容层不会被 dimming 影响、浮层之上的内容本身就明亮粗壮（14:54）。

Tinting（着色）：Liquid Glass 引入了新的着色方式（16:08）。选定一个颜色后，系统会基于背景亮度生成一组色调映射，模拟有色玻璃的真实表现。Bruno 给了一个反例和一个正例（17:03）：用 solid fill 的按钮完全不透明，破坏材质感；改成新 tinting 之后立刻显得通透。原则：只用 tinting 强调主操作。

219 是设计向 session，本身不演示代码。对应到 SwiftUI 里，配套 session 323 “Build a SwiftUI app with the new design” 给出了对应 API：

// 给一个 Label 加上 Regular 变体 + 绿色 tinting
Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.tint(.green))

// 主操作按钮用 glassProminent，普通按钮用 .glass
Button("Get Started") { }
    .buttonStyle(.glassProminent)

// 多个玻璃元素需要互相融合时，包一层 GlassEffectContainer
GlassEffectContainer {
    BadgeLabel(badge: badge)
        .glassEffect()
}

关键点：

  • .glassEffect(.regular.tint(.green)) 对应文中”Regular 变体 + 新 Tinting”——颜色经过背景亮度映射，不会变成不透明色块。
  • .buttonStyle(.glassProminent) 对应”只给主操作加 tint 强调”的准则，其它按钮用 .buttonStyle(.glass) 保持透明。
  • GlassEffectContainer 对应文中”控件之间形态变化时维持一个 singular floating plane”——容器内的多个 .glassEffect() 元素可以在过渡时互相融合，而不是各自硬切。

禁用规则：

  • 不要把内容层（如 TableView）也做成 Liquid Glass，它会和导航层抢视觉，破坏层级（13:14）。
  • 避免 glass-on-glass 堆叠（13:28）。在 Liquid Glass 之上的元素改用 fill、transparency、vibrancy，让它看起来像材质上的薄覆盖。

无障碍：Reduce Transparency 让玻璃更磨砂，Increase Contrast 切换为黑白并加描边，Reduce Motion 关闭弹性运动（18:15）。这些只要使用系统材质就自动生效。

核心启发

  • 做什么：把 app 的导航和工具栏切到系统标准的 Liquid Glass 容器，不写自定义背景。

    • 为什么值得做：Lensing、阴影自适应、明暗翻转、无障碍修饰符全都是免费的；自定义背景会让你失去全部这些行为。
    • 怎么开始：先把 Custom Background 的 navigation/toolbar/tab bar 移除，让系统默认材质生效；然后只针对真正需要强调的主操作按钮加 tint。

  • 做什么：审计 app 里所有 glass-on-glass 的层叠，把上层换成 fill + transparency + vibrancy。

    • 为什么值得做：Bruno 明确点名 glass-on-glass 是混乱来源（13:28）；上层用半透明色填充会显得像材质上的”贴纸”，层级更清晰。
    • 怎么开始：写一个搜索清单，找到所有自定义的 UIVisualEffectView 或 SwiftUI 中的 Material 双层叠加场景，先在最常用的两三个页面替换并截图对比。

  • 做什么：决定要不要用 Clear 变体——大多数场景不要用。

    • 为什么值得做：Clear 没有自适应能力，只在富媒体内容之上才合适；用错地方会出现明显的可读性下降。
    • 怎么开始：列出 app 里所有”全屏富媒体 + 浮层控件”的页面（视频播放、相册全屏、地图），只在这些页面用 Clear，并加 localized dimming。

  • 做什么：在主要列表/详情页加一遍 Scroll Edge Effect 的可读性走查。

    • 为什么值得做：滚动是 app 最高频的交互，浮层标题在深色内容滚过时如果不切换到 dimming，就会瞬间糊成一片。
    • 怎么开始：用 dark 内容（黑色背景图、深色照片）从底部滚到顶部，观察标题/按钮是否始终保持清晰；遇到不行的位置，检查是否使用了系统标准的 navigation/toolbar，必要时换 Hard Style。

关联 Session

评论

GitHub Issues · utterances