液态玻璃Liquid Glass
比毛玻璃更进一步：材质随底层内容取色，边缘出现镜面折射与流动形变，转场如液体般连贯。对平台能力依赖强，需准备不透明降级。
典型场景iOS / macOS 应用 · 系统级控件
编号14
年代Apple platforms, 2025
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
比毛玻璃更进一步：材质随底层内容取色，边缘出现镜面折射与流动形变，转场如液体般连贯。对平台能力依赖强，需准备不透明降级。
关键词
dynamic materialoptical glasstranslucencylensingrefractionfluid morphingsystem navigation
别名
Apple Liquid Glass
效果与动效
Lensing and refraction, adaptive translucency, and fluid morph transitions aligned to Apple platform behavior
设计系统变量
--material-rolenavigation-controls--translucencyadaptive--tintsemantic--reduced-transparency-fallbackopaque--motionplatform-aligned配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Adaptive translucent material derived from surrounding content; use color judiciously
辅色 / Secondary
Semantic content and system tint colors; preserve legibility and hierarchy
强调色在页面底色上的对比度约 4.1:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Apple-platform navigation
- controls
- and system-aligned app chrome
避开 / Do Not Use For
- content layers
- dense reading surfaces
- or custom effects without accessibility fallbacks
框架兼容
swiftuiuikitappkit
能力矩阵
浅色模式支持
深色模式支持
移动适配原生适配
转化导向中Medium
渲染成本中animation / blur
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Use for navigation and controls,
- Keep content on a separate layer,
- Apply color judiciously,
- Test reduced transparency,
- Test reduced motion,
- Verify text and control contrast
CSS / 技术关键词
platform material, adaptive translucency, lensing, refraction, reduced transparency, reduced motion
AI 提示词
Apply Apple Liquid Glass sparingly to navigation and controls. Use dynamic translucent material, lensing, and fluid transitions while keeping content clear. Respect reduced transparency and reduced motion settings.