Liquid Glass 液态玻璃
Liquid Glass is Apple's adaptive material for controls and navigation: toolbars, tab bars, buttons, and sliders render as lens-like glass that floats in its own layer above app content, refracting what scrolls beneath and re-tinting itself for legibility in light and dark contexts. It is functional, not decorative — Apple applies it to the control layer and keeps content itself opaque. Capsule shapes and concentric corner radii are part of the geometry.
液态玻璃是 Apple 为控件和导航准备的自适应材质：工具栏、标签栏、按钮和滑块渲染成透镜般的玻璃，悬浮在应用内容上方自己那一层里，对下方滚过的内容做透镜折光，并随明暗环境重新给自己染色以保持可读。它是功能性的，不是装饰性的 —— Apple 只把它用在控制层，内容本身保持不透明。胶囊造型和同心圆角半径也是这套几何语言的一部分。
Scope: 'SwiftUI style' is not a style — SwiftUI is Apple's UI framework. Apps built with it currently LOOK like Liquid Glass; before 2025 they had the flatter platform-native Apple look, and early Mac OS X's candy-and-pinstripes look was Aqua. If someone says 'make it look like SwiftUI', they usually mean this entry.
范围：「SwiftUI 风格」不是一种风格 —— SwiftUI 是 Apple 的 UI 框架。用它做的 App 现在看起来是液态玻璃的样子；2025 年之前是更扁平的 Apple 平台原生观感，而早期 Mac OS X 那种糖果加细条纹的样子叫 Aqua。如果有人说「做成 SwiftUI 那样」，他们通常指的就是本条。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Glass = the control layer玻璃 = 控制层 layout defining定义特征
Only controls and navigation are glass — bars, buttons, sliders float above the app; the content beneath stays opaque and full-contrast.
只有控件和导航是玻璃 —— 栏、按钮、滑块悬浮在应用之上；下面的内容保持不透明、全对比度。
-
Lensing, not just blur透镜折光，不只是模糊 depth defining定义特征
The material behaves like a real lens: it bends and concentrates light from what's beneath, with bright edge highlights — richer than a flat frosted blur.
这种材质像真正的透镜一样工作：它弯折并汇聚来自下方的光，边缘有明亮的高光 —— 比平平的磨砂模糊丰富得多。
-
Adaptive self-tinting自适应自我染色 color defining定义特征
The glass continuously re-tints from the content scrolling under it and flips between light and dark appearance on its own to stay legible.
玻璃会根据下方滚过的内容持续重新染色，并自行在明暗两种外观间切换，始终保持可读。
-
Capsule and concentric geometry胶囊与同心几何 geometry defining定义特征
Controls tend to capsules; nested corners share a common center (concentric radii), so the glass shapes sit optically flush inside their containers.
控件趋向胶囊形；嵌套圆角共享同一个圆心（同心半径），玻璃形状在视觉上与容器内壁齐平贴合。
-
Controls morph fluidly控件流畅变形 motion supporting辅助特征
Glass elements merge, split, and reshape as context changes — a tab bar shrinking on scroll, a button expanding into a menu.
玻璃元素随情境变化合并、分裂、重塑 —— 滚动时收缩的标签栏，展开成菜单的按钮。
-
Underlying content底层内容 imagery variable可变特征
Anything can sit beneath the glass — photos, maps, lists; the material adapts to it rather than requiring a curated backdrop.
玻璃下面可以是任何东西 —— 照片、地图、列表；材质会去适应内容，而不是要求一块精心准备的背景。
-
Glass content cards玻璃内容卡片 surface avoid避免
Making content itself translucent — glass cards on glass backgrounds — is exactly what Apple's guidance avoids; that's generic glassmorphism, and it costs legibility.
把内容本身做成半透明 —— 玻璃背景上叠玻璃卡片 —— 正是 Apple 指南要避免的；那是通用的玻璃拟态，代价是可读性。
Often confused with: Glassmorphism最容易混淆：玻璃拟态
Liquid Glass液态玻璃
Glassmorphism玻璃拟态
This is Liquid Glass because the glass is a functional system material reserved for controls and navigation floating above opaque content, adapting its own tint for legibility.
这是液态玻璃，因为这里的玻璃是一种功能性系统材质，只留给悬浮在不透明内容之上的控件和导航，并会为了可读性自动调整自己的染色。
It would become glassmorphism if the frosted treatment spread to the content itself — translucent cards over a decorative wallpaper, blur as a skin rather than a control layer.
如果磨砂处理蔓延到内容本身 —— 装饰壁纸上半透明的卡片，模糊成了皮肤而不是控制层 —— 就变成玻璃拟态了。
In code — optional starting points代码写法 —— 可选起点
The real material — standard toolbars/tab bars adopt it automatically
.glassEffect(.regular, in: .capsule)Lets neighboring glass controls merge and morph together
GlassEffectContainer { … }Web approximation: lens-ish capsule (no true refraction)
backdrop-filter: blur(14px) saturate(1.6); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12); border-radius: 999px;Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface in the spirit of Apple's Liquid Glass. Defining signals: glass is reserved for the floating control layer (toolbars, tab bars, buttons) above opaque content; the material lenses what's beneath it — blur plus refraction-like edge highlights, not flat frost; controls adapt their tint to stay legible over changing content; capsule shapes with concentric corner radii. Keep the underlying content unrestricted. On Apple platforms use the real APIs — SwiftUI .glassEffect(), glassEffect(.regular, in: .capsule), and standard bars get it automatically; on the web approximate with backdrop-filter: blur + saturate, layered inner highlights, and capsule radii. Do not drift into generic glassmorphism; the decisive difference is that content never becomes glass — only controls float as glass above it. Preserve legibility over every content region (the real material self-adapts — your approximation must too), visible focus states, and honor Reduce Transparency / Reduce Motion.
按 Apple 液态玻璃（Liquid Glass）的精神创建这个界面。决定性信号：玻璃只留给悬浮在不透明内容之上的控制层（工具栏、标签栏、按钮）；材质对下方内容做透镜折光 —— 模糊加折射感的边缘高光，而不是平平的磨砂；控件随内容变化调整自己的染色以保持可读；胶囊造型配同心圆角半径。底层内容不加限制。在 Apple 平台上用真正的 API —— SwiftUI 的 .glassEffect()、glassEffect(.regular, in: .capsule)，标准栏会自动获得效果；在 Web 上用 backdrop-filter: blur + saturate、分层内高光和胶囊圆角来近似。不要滑向通用的玻璃拟态；决定性区别在于内容永远不会变成玻璃 —— 只有控件作为玻璃悬浮在它之上。保证在任何内容区域上都可读（真材质会自适应 —— 你的近似实现也必须做到），焦点状态可见，并响应 Reduce Transparency / Reduce Motion。
Accessibility & misuse可访问性与误用
Apple's material self-adjusts for legibility — a hand-rolled web imitation does not; test text over the worst content that can scroll beneath and add contrast treatment.
Apple 的材质会为可读性自我调整 —— 手搓的 Web 模仿不会；要对着可能滚到下方的最差内容测试文字，并加对比度处理。
Honor Reduce Transparency (near-opaque fallback) and Reduce Motion (disable morphing).
响应 Reduce Transparency（降级为接近不透明）和 Reduce Motion（关闭变形动画）。
Never place critical text directly on imitation glass without a measured 4.5:1 against live worst-case backgrounds.
永远别把关键文字直接放在模仿玻璃上，除非对着实时最坏背景实测达到 4.5:1。
Origin起源
Introduced by Apple at WWDC 2025 as the first unified design language across iPhone, iPad, Mac, Watch, and TV — Apple credits visionOS's glass optics as the inspiration, and ships it as a system material with SwiftUI/UIKit/AppKit APIs rather than a mere visual theme.
Apple 在 WWDC 2025 上发布，是首个横跨 iPhone、iPad、Mac、Watch 和 TV 的统一设计语言 —— Apple 称灵感来自 visionOS 的玻璃光学，并把它作为系统材质随 SwiftUI/UIKit/AppKit API 一起发布，而不只是一个视觉主题。