iOS 液态玻璃（Liquid Glass）完整设计步骤（Figma/PS + 原生规范）

iOS 26 原生液态玻璃 =背景模糊 + 半透底色 + 边缘高光 + 动态折射 + 流体动效 + 层级分层，分手机系统设置、UI 平面设计、开发渲染流程三部分。

一、iPhone 原生开启液态玻璃（iOS 26.1+）

1. 升级系统至 iOS 26.1 及以上
2. 设置 → 显示与亮度 → 打开 Liquid Glass
3. 切换模式：透明（高通透）/ 色调（高清晰低透）
4. 辅助功能→显示与文字大小：关闭降低透明度，否则玻璃失效
5. 长按主屏→编辑壁纸，搭配深色高对比壁纸，玻璃质感最佳

二、Figma/PS 平面 UI 设计步骤（苹果官方质感）

1. 图层分层（核心层级）

• 底层：高清渐变 / 壁纸背景
• 中层：液态玻璃卡片 / 导航栏（悬浮层）
• 顶层：文字、图标（鲜艳高对比，适配活力色 Vibrancy）⚠️ 严禁玻璃叠玻璃，会混乱层级、模糊看不清Apple Developer

2. 基础玻璃底色

• 圆角：iOS 统一 16~24pt 大圆角
• 背景：rgba (255,255,255,0.12~0.18) 浅白半透；深色模式 rgba (0,0,0,0.2~0.28)
• 边框：1px 极细高光白 rgba(255,255,255,0.2~0.3)，模拟玻璃边缘折射

3. 背景模糊（灵魂）

• 高斯模糊：18~28px（iOS 原生 22px）
• 饱和度增强：170%~190%，还原苹果通透彩透质感

4. 光影塑造液态悬浮感

1. 外阴影：柔和弥散阴影，模糊 30~40px，低不透明度 8%~15%，营造浮空
2. 内高光：顶部白色内阴影，偏移 Y=2，模糊 4~6，混合叠加，模拟玻璃顶面反光
3. 色散轻微色差：边缘红蓝光偏移 1~2px，模拟真实光学玻璃折射

5. 流体动态 + 适配规则

• 滚动动效：标签栏 / Dock 随滚动收缩变薄、透明度渐变
• 焦点联动：窗口失焦→玻璃变暗、模糊加深，后退层级
• 明暗自适应：深色 / 浅色模式自动切换底色、高光强度

三、iOS 原生开发渲染流程（Core Animation）

1. 背景捕获
   
   ：GPU 截取视图背后画面
2. 下采样
   
   ：缩至原图 25%~50%，大幅降性能消耗
3. 高斯模糊 + 色彩染色调色
4. 上采样还原尺寸
5. 活力混合（Vibrancy）合成前景文字 + 玻璃层
6. 实时流体形变、边缘折射动态渲染

四、苹果官方设计禁忌

1. 内容列表、正文区域不用玻璃，只用纯色
2. 不多层叠加玻璃，只做顶层导航、弹窗、Dock、控制中心
3. 文字对比度≥4.5:1，避免透过玻璃看不清内容
4. 旧机型慎用高强度液态动效，会卡顿、耗电