为什么你的毛玻璃界面看起来总像个灰盒子？Liquid Glass 三层模型改变游戏规则

为什么你的毛玻璃界面看起来总像个灰盒子？

设计师们折腾了好几年玻璃拟态（Glassmorphism），做出来的效果却总差点意思——模糊 + 半透明白色叠加，看起来就是一个「模糊矩形」，毫无玻璃该有的质感。

问题不在于滤镜参数，而在于你缺了另一半。

Apple 在 WWDC 2025 推出的 Liquid Glass 设计系统，给出了一个被大多数从业者忽略的关键机制——折射（Refraction）。

三层模型：重新理解玻璃

普通毛玻璃只有两层：模糊层 + 白色叠层。但真正的玻璃效果需要三层：

• Tint Layer：着色层，画出玻璃的色彩倾向
• Rim Layer：边缘层，画出玻璃边缘的轮廓光
• Refraction Layer：折射层，这是缺失的那一半——用 SVG 位移滤镜让背景内容在穿过玻璃边缘时产生真实的物理弯曲

没有折射层，你的「玻璃」就只是一个带透明度的灰框。

五大设计原则

• Content First：玻璃只漂浮在导航层上方，内容层永远不要毛玻璃
• Depth Through Light：通过透镜效果创造层次感，而不是靠透明度
• Adaptive Tinting：玻璃颜色随背景动态变化，不是固定透明度
• Semantic Emphasis：只有主操作按钮才能用 Primary Glass
• Accessibility Built-In：系统自动处理无障碍适配，不要自己硬调

核心 API 示例

这是 iOS 26+ / macOS Tahoe 的写法——

基础玻璃按钮：
Swift: Button("Action") { }.glassEffect()

带交互反馈：
Swift: Button("Tap") { }.glassEffect(.regular.interactive())

玻璃按钮组（必须用容器包裹）：
Swift:
GlassEffectContainer(spacing: 30) {
  HStack {
    Button("A") { }.glassEffect()
    Button("B") { }.glassEffect()
  }
}

Web 端：
直接引入 liquid-glass.css，给面板加上 liquid-glass 类即可。Chromium 浏览器会自动加载折射层，其他浏览器优雅降级为模糊效果。

谁在做这个

Liquid Glass Skill 已经在 Claude Code 生态里流通，核心维护者来自 Angular 社区生产级项目实操经验。refraction 层的技术原型来自 liquid-glass-js（Armagan Amcalar，MIT 协议），已做 Live 版本改造——能跟踪滚动、主题切换和内容更新，不像截图方案会静态失效。

想深入理解折射原理？SKILL.md 里有一份完整的折射机制文档，附带公式推导，足以把原理迁移到任何框架。

如果你在构建 Apple 平台应用，或者想让你的 Web 界面质感提升一个档次，这个 Skill 值得安装研究。

GitHub · stormaref/LiquidGlassSkill

GitHub: https://github.com/stormaref/LiquidGlassSkill