深度解析

一个被很多人投诉为 bug 的特性

iOS 26 发布后，AppleInsider、Android Authority、MacRumors 在两周内先后报道同一件事：很多用户看 Home Screen 上的 app icon 时感到晕眩、说图标"看起来在歪斜"。

Android Authority 的标题是 "Liquid Glass optical illusion is giving iOS users vertigo"。MacRumors 的标题是 "Liquid Glass Design Makes App Icons Look Crooked"。

这不是渲染 bug。这是 Apple 设计选择的副作用。

单光源，双高光

普通设计语言里，玻璃/凸面元素的高光来自一个虚拟光源，所以高光在一个方向。比如 Aqua 时代 Mac 的按钮——光从左上来，所以高光在左上、阴影在右下，方向一致。

Liquid Glass 不是这样。它的虚拟光源在 -45° / -139°（左上方向，Icon Composer 里有这两个 dev preset），但高光出现在左上和右下两个对角位置。

Since icons are made from glass layers, the light can pass through and affect the opposite edge—so the bottom right corner will also be illuminated alongside the top left.

— AppleInsider, 2025-09-17

意思是：Apple 把 Liquid Glass 当成一块有厚度、有分层的真实玻璃来渲染。光从左上射入玻璃顶面，穿过分层后从对角的底面 / 右下面射出。所以同一束光产生两个 rim： - 315° (左上) — entry rim：光进入玻璃，bezel 弯曲，亮 - 135° (右下) — exit rim：光从分层底部射出，bezel 弯曲，也亮 - 45° (右上) / 225° (左下)：垂直于光轴，暗谷

为什么这让人晕眩

人眼对深度的判读依赖单方向高光。当一个圆形物体左上亮、右下暗时，大脑解读为"凸的、灯在左上"；左上暗、右下亮时，大脑解读为"凹的、灯在左上"。这个机制非常稳定，所有 photoreal 渲染、所有按钮拟物都依赖它。

Apple 选了两个对角同时亮——这破坏了大脑的深度算法，因为没有任何"单一光源 + 不透光物体"能产生这种 pattern。大脑要么把它解读为"两个光源"（不对，因为没有阴影方向匹配），要么解读为"扭曲的几何"——后者就是用户报告的"icons look crooked"。

这与一种古老的视错觉同构：Café Wall Illusion（咖啡馆墙错觉）—— 当亮暗块在错误的轴线上对称时，人眼会感觉本来平行的线在倾斜。Liquid Glass 把这种错觉嵌进了每一块磁贴的边缘里。

这是 bug 还是 feature

按 Apple 的解释：feature。它要的就是"这是一种从未存在过的、有内部结构的玻璃"。如果用真物理（单方向高光、阴影方向匹配），就和 macOS Aqua 没有本质区别——那个 Apple 在 2014 年就放弃了。

iOS 26.1 在 Settings → Display & Brightness 引入了 Liquid Glass 的 Clear / Tinted 外观选择（Tinted 更不透明、对比度更高）。Reduce Transparency 是长期存在的 Accessibility 选项，不是 26.x 新增——但开启后会进一步强化 Tinted 的可读性。这是对争议的妥协，但没有改双高光——双高光还在，只是没那么刺眼。说明 Apple 在内部把这个 pattern 当核心识别，不愿意让步。

Web 上怎么复刻这个

我写这个 Playground 时绕了几圈才理解：

1. 第一版：四段 inset box-shadow（上/下/左/右），均匀分布——平均主义，错。 2. 第二版：单向 conic-gradient（315° 亮 → 135° 暗）——单光源单方向，普通玻璃逻辑，对应 Aqua / Vista Aero 时代的拟物，错。 3. 第三版：双峰 conic-gradient（315° 和 135° 都是 alpha 1.0，45° 和 225° 是暗谷）——对了。

这套规律应用到所有 glass 面板：playground 玻璃元素、inspector、scene 卡片、entry-card。CSS 实现：

.glass-edge::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1.5px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.50) 0deg,    /* top */
    rgba(255,255,255,0.18) 45deg,   /* UR — 暗谷 */
    rgba(255,255,255,0.30) 90deg,
    rgba(255,255,255,0.95) 135deg,  /* BR — exit rim 亮峰 */
    rgba(255,255,255,0.50) 180deg,
    rgba(255,255,255,0.18) 225deg,  /* BL — 暗谷 */
    rgba(255,255,255,0.30) 270deg,
    rgba(255,255,255,1.00) 315deg,  /* UL — entry rim 亮峰 */
    rgba(255,255,255,0.50) 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

mask-composite: exclude 把中间镂空，只留 1.5px 的 ring。conic-gradient 在 ring 上沿圆周做亮度的连续函数，两个亮峰相距 180°——和 Apple 的 entry/exit rim 几何完全对应。

一个旁证

反过来想：如果我把双峰改回单峰（只在 315° 亮、135° 黑），玻璃看起来是什么感觉？答案：像 macOS Aqua 时代的塑料按钮——非常 2008 年的视觉。

这恰好说明双高光不是炫技，而是和过去切割的标记。Apple 选择了一种打破物理直觉的视觉，因为他们要的是"这是新东西"，而不是"这是更精致的旧东西"。

SwiftUI 一行 = web 五层

在 iOS 26 / macOS Tahoe 上做一块 Liquid Glass，SwiftUI 是这一行：

SomeView().glassEffect(.regular)

API 表面看起来什么都没有。但 .glassEffect() 在系统内部展开后，至少做了 5 件事：

1. Backdrop blur — 高斯模糊背景内容 2. Vibrancy — saturate × brightness，把透出的色彩推得更艳 3. Refraction — bezel 处的 chromatic aberration / 边缘像素弯折 4. Specular — 双峰高光（见上一篇） 5. Tint — 一层半透明覆盖（.regular 是淡白，.clear 几乎没有，.regular.tint(.color) 替换为品牌色）

Apple 把这五件事做成系统级 API，是因为它们必须同时存在才能"是 glass"——少任何一层都会塌成普通 CSS frosted glass。

第三层是难关

前两层在 web 上几乎是免费的：

.glass {
  backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
}

后两层（specular、tint）也容易：box-shadow + background-color，前一篇讲了。

唯一难的是第三层 refraction——边缘真的把背景像素弯折。这是把 Liquid Glass 和 iOS 7 frosted glass 区别开的关键：

- iOS 7 frosted glass：背景被模糊，但位置没动。看起来像隔了一层磨砂玻璃。 - Liquid Glass：背景被模糊 + 边缘像素被实际位移。看起来像一块有曲率的真玻璃——边缘在做 lensing（透镜效应）。

如果只用 backdrop-filter: blur()，永远做不出 lensing，因为 blur 不改变像素位置，只把它们和邻居混合。

真做法：动态生成 SVG 位移图

nikdelvin/liquid-glass 是目前最干净的实现。核心是一个生成 SVG 位移图的函数，关键部分是这样：

<svg width="${w}" height="${h}">
  <defs>
    <linearGradient id="X" x1="..." x2="..."> <!-- 控制 X 轴位移 -->
      <stop offset="0%" stop-color="#F00"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
    <linearGradient id="Y" y1="..." y2="..."> <!-- 控制 Y 轴位移 -->
      <stop offset="0%" stop-color="#0F0"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
  </defs>
  <!-- base: neutral gray = 零位移 -->
  <rect width="${w}" height="${h}" fill="#808080"/>
  <g filter="blur(2px)">
    <rect width="${w}" height="${h}" fill="#000080"/>
    <rect width="${w}" height="${h}" fill="url(#Y)" style="mix-blend-mode:screen"/>
    <rect width="${w}" height="${h}" fill="url(#X)" style="mix-blend-mode:screen"/>
    <!-- 内部 padded neutral rect → 把中心擦回零位移 -->
    <rect x="${depth}" y="${depth}" width="${w-2*depth}" height="${h-2*depth}"
          fill="#808080" rx="${radius}" filter="blur(${depth}px)"/>
  </g>
</svg>

逐层拆解：

- 底层 #808080：在 feDisplacementMap 的约定里，128 = 零位移。所以中性灰 = 不动。 - X 渐变（#F00 → #000）：红通道控制 X 轴。在 mix-blend-mode: screen 后，左侧 R=255（最大正位移），右侧 R=0（最大负位移）。 - Y 渐变（#0F0 → #000）：绿通道控制 Y 轴。同理。 - 内部 padded neutral rect + filter="blur(${depth}px)"：这个内部矩形把中央擦回中性灰——所以只有 bezel ring（边缘几像素）有非零位移。中央透明区域不被弯曲。

把这张位移图喂给 feDisplacementMap，再把 filter 用 backdrop-filter: url(...) 应用到 glass 元素——背景像素就被实际弯折了。

Chromatic aberration 是免费送的

nikdelvin 的 filter chain 不是一个 feDisplacementMap，是三个，分别处理 R/G/B 通道，每个 scale 略有差异：

<feDisplacementMap in="SourceGraphic" in2="m" scale="${strength + ca*2}" .../>
<feColorMatrix values="1 0 0 0 0 ..." result="dR"/>  <!-- 只取 R -->

<feDisplacementMap in="SourceGraphic" in2="m" scale="${strength + ca}" .../>
<feColorMatrix values="0 1 0 0 0 ..." result="dG"/>  <!-- 只取 G -->

<feDisplacementMap in="SourceGraphic" in2="m" scale="${strength}" .../>
<feColorMatrix values="0 0 1 0 0 ..." result="dB"/>  <!-- 只取 B -->

<feBlend in="dR" in2="dG" mode="screen"/>
<feBlend in2="dB" mode="screen"/>

R 被位移得最远，G 中等，B 最少。在边缘那 1-2px 上，R/G/B 不再对齐——产生 prism 般的彩色分离。这就是色散（chromatic aberration）——真玻璃边缘的特征，因为不同波长的光折射率不同。

CSS 假装不出这个；只有真位移可以。

五层的 SwiftUI 映射

Web 层	CSS / SVG	SwiftUI
1. Blur	backdrop-filter: blur()	隐含在 .glassEffect()
2. Vibrancy	backdrop-filter: saturate() brightness()	隐含
3. Refraction	backdrop-filter: url(#displace-svg)	隐含；不暴露
4. Specular	::before { conic-gradient + mask-composite }	隐含
5. Tint	background-color: rgba()	.glassEffect(.regular.tint(.color))

只有 tint 在 SwiftUI 里被显式暴露（因为 brand 色需求）；其余四层是系统决定的、开发者不能改。

这是 Apple 一贯做法：把 5 个 primitive 的复杂性藏到一个 API 里，让 app 开发者无法做错；代价是失去微调能力。在 web 上反过来——所有 primitive 必须手动暴露给 CSS，因为没有"系统级 glass API"。

一个不诚实的 fallback

Safari 不支持 backdrop-filter: url(...)——这是 webkit 的长期遗留 bug（Chrome 76+ 支持）。所以这个 Playground 在 Safari 上：

- 第三层（refraction）自动 fallback 到 feTurbulence 噪声位移 - 视觉上接近"frosted glass with noise"，不是真 lensing - 在页面底部有 caveat 说明

要在 Safari 上做真 Liquid Glass，目前只能上 WebGL shader（clayharmon/webgl-liquid-glass）——但那是另一篇文章。

五块界碑

年份	名字	系统	关键技术
2000	Aqua	Mac OS X 10.0	CPU 软光栅化的渐变 + 高光，PNG 切图
2007	Vista Aero	Windows Vista	DWM + DirectX 9 backdrop blur
2013	iOS 7 frosted glass	iOS 7	UIVisualEffectView + .light/.dark
2023	visionOS Materials	visionOS 1.0	真 3D 几何 + Metal 实时光照
2025	Liquid Glass	iOS 26 / macOS Tahoe	per-pixel displacement + dual rim

每一代都"玻璃"，但每一代解决不一样的问题。

Aqua（2000）：拟物的开山

Aqua 是软件 UI 第一次系统性使用"看起来像物体"的视觉。按钮像被吹塑的塑料球，dock 像玻璃面板，进度条像跳动的水滴。

技术上极原始——所有 highlight 都是预先画好的 PNG，运行时不会重新光照。每个按钮都是 9-slice 缩放。颜色和高光的方向全部 hardcode——没有真实折射，没有实时光，没有材质，纯粹画家手绘的视觉欺骗。

但它建立了一个核心约定：界面元素是有材质的。不是抽象色块，不是排版网格，是有形状、有重量、有反光的"东西"。

Vista Aero（2007）：第一次真 backdrop blur

Microsoft 在 Vista 上做了一件 Apple 当时做不到的事：实时背景模糊。窗口标题栏可以让下方的桌面"透出来"且模糊掉，这是真正的 backdrop-filter，由 DirectX 9 在 GPU 上算。

Aero 是 OS UI 第一次让"玻璃"变成 dynamic 的——你拖动窗口，它后面的内容变了，玻璃面板里看到的也变。这件事 Aqua 做不到（PNG 切图嘛）。

但 Aero 没有 lensing，没有边缘弯折——只有模糊。所以视觉上是"磨砂塑料"而不是"水晶"。

iOS 7 frosted glass（2013）：极简风暴中的玻璃残党

Jony Ive 主导 iOS 7 把所有拟物（皮革、纸张、木纹、水滴）一夜清掉，换成 flat design。但有一个例外保留下来：control center、notification center、键盘背景——这些都用了 frosted glass。

为什么 Ive 杀掉所有拟物却留下玻璃？因为 frosted glass 是唯一一种不"假装是物体"的拟物。它不模仿皮革或木头——它就是"模糊一下背后内容"，这是个功能性视觉：让 chrome 漂在内容之上，但不彻底遮住。

iOS 7 frosted glass 用的就是 Vista Aero 那套技术 + Apple 的色彩适配，本质上没革新——它只是把 backdrop blur 当成 minimalism 时代里"唯一被允许的视觉装饰"。

visionOS Materials（2023）：在虚空里重做一次

2023 年 visionOS 发布，所有 UI 漂浮在物理空间里。这迫使 Apple 重新思考"窗口是什么"——在 2D 屏幕上，窗口可以扁平贴边；在 3D 空间里，窗口必须是有厚度、有材质的实体，否则用户在空间里走动时它会塌成纸片。

visionOS 引入了 .ultraThinMaterial / .thinMaterial / .regularMaterial / .thickMaterial / .ultraThickMaterial 五档玻璃。它们不只是不同的 blur radius——它们用了 Metal 实时计算前向光照、edge specular、dynamic vibrancy。在视觉上，visionOS 的玻璃比 iOS 7 那一代厚得多、重得多。

这是 Liquid Glass 的真正前身。两年内，Apple 把 visionOS 上验证过的"有厚度的玻璃"反向移植回 iOS / macOS——就是 2025 年的 Liquid Glass。

Liquid Glass（2025）：硬件终于够用了

Liquid Glass 之所以能成为系统统一材质（而不是像 iOS 7 frosted glass 那样只在 control center 出现），是因为 GPU 算力终于够 cheap 了。

要算的事：

- 每帧实时 backdrop blur（vibrancy 加权） - per-pixel displacement（边缘 lensing） - per-channel chromatic aberration（边缘色散） - 双 rim 的 specular highlight（angle-based） - motion-coupled（设备倾斜时折射轴跟着动，gyroscope）

早一代的 SoC 不能在系统级 chrome 上同时做这些——iOS 14 时代如果给所有 button / sidebar / sheet 都加 displacement filter，电池会烧穿。GPU shader 算力 + Metal 渲染管线在最近几代成熟到可以全系统铺开（注意：iOS 26 官方支持回到 iPhone 11 这一代，所以"必须 A17 Pro / M3"是不准确的——更准确的说法是 GPU/系统层架构允许了更广泛的设备覆盖）。

所以 Liquid Glass 不是审美的回归，是硬件能力达标后Apple 把 visionOS 的实验产品化。

与 Aqua 的根本区别

表面上 Liquid Glass 和 Aqua 都"看起来像玻璃"。但本质不同：

	Aqua (2000)	Liquid Glass (2025)
高光	画好的 PNG	per-pixel 算的 dual rim
折射	无	per-pixel displacement + chromatic aberration
适应背景	不	实时 saturate/vibrancy 取背景色调
形状	9-slice 固定	任意 SwiftUI Shape，动态生成 mask
算力	CPU 软光栅化	GPU shader
视觉本质	模仿"塑料"	模仿"分层玻璃"

Aqua 是平面设计师在 Photoshop 里画的。Liquid Glass 是图形程序员在 Metal 里写 shader 算的。它们用同一种隐喻（玻璃）但来自完全不同的工艺。

为什么这次能成

回看时间线，会发现 Apple 不是反复"玻璃→不玻璃"摇摆，而是一直在等技术成熟：

- 2000 想做玻璃，技术不够，只能伪造（Aqua） - 2007 Vista 演示了 dynamic blur 可行，Apple 跟进 OS X 10.5 但克制使用 - 2013 移动算力够 dynamic blur 了，但只够局部用（iOS 7 control center） - 2023 visionOS 验证了完整玻璃模型在 3D 里立得住 - 2025 GPU 与系统架构终于成熟到可以全系统铺开（兼容性扩展到 iPhone 11 一代）

每一步都有 Apple 想做但做不到的版本。Liquid Glass 是终于做得到的那一版。

副产品：iPhone 用户的眩晕

但"做得到"不等于"做得对"。Liquid Glass 上线两周，AppleInsider / MacRumors / 9to5Mac 集体报道用户反馈晕眩——双 rim 高光在错误的轴线上对称，破坏深度感知（详见 双峰高光：让 iPhone 用户晕眩的物理）。

系统给了用户三档调节：长期就有的 Reduce Transparency（不是 26.x 新增）让玻璃变厚 / 遮挡更多背景；iOS 26.1 引入 Liquid Glass 的 Clear / Tinted 外观选择；iOS 26.4 进一步加强了 Reduce Bright Effects / Reduce Motion 的覆盖。Apple 的妥协是给用户关掉或减弱Liquid Glass，但没有改它的核心 pattern。

这意味着 Apple 内部把双高光当作 Liquid Glass 的身份——宁可让一部分用户关掉它，也不愿意把它改成"和 Aqua 区别不大的、舒服的、单方向高光的玻璃"。

这是设计语言成熟的标志：当一家公司愿意为视觉一致性接受可见的 user complaint，说明他们在押注这个视觉是未来 5-10 年的识别——和 2007 年 iPhone 取消硬键盘是同类决策。