用途
该技能旨在让任意平台的界面获得 Apple Liquid Glass 视觉效果，覆盖 Web 页面、Web 应用、Electron 或 Tauri 桌面应用、Android 或 Flutter 应用，以及 Apple 原生应用。设计规则在各平台保持一致，区别仅在于获取背景（backdrop）、模糊与弯曲（bend）效果的实现方式。内容基于 Apple 官方人机界面指南及其图示整理，而非凭记忆或博客转述；Apple 未明确说明之处，资料会直接标明，不自行编造规则。
核心概念：双层模型
Apple 界面分为两层：内容层是应用真正承载的内容，不透明、使用实心表面与真实阴影，不使用玻璃效果，文字位于此层且不得置于移动背景之上；功能层包括工具栏、侧边栏、标签栏、弹出层、菜单与浮动控件，Liquid Glass 只用于此层，浮于内容之上并对其进行折射，不与内容竞争。资料强调最常见错误是给所有元素都加上毛玻璃效果，从而破坏层级关系。
玻璃材质
分为两种：regular 会对背后内容进行模糊并调整亮度，适合绝大多数场景；clear 高度透明，用于浮于照片与视频之上的控件，若背后内容明亮，Apple 规定在其下加 35% 不透明度的深色遮光层以保证标签可读。材质还会自适应：浅色内容上玻璃与符号转深，深色内容上转浅。
折射与边缘高光
Apple 描述该材质会反射并折射周围环境。折射表现为在边缘带内显示来自更内侧的内容，在轮廓处最强，并沿真实形状（胶囊端、圆角）分布。Web 端可为玻璃元素添加 data-refract 并加载 assets/refraction.js；在 Chromium 引擎中可弯曲实时背景，Safari 与 Firefox 无法在 backdrop-filter 中运行 url() 滤镜，因此对已知区域可使用 data-refract-source="#id" 弯曲该区域的副本。边缘高光通过 .glass::before 的 1px 渐变环实现，左上最亮、两侧较淡、右下再次变亮。
Web 令牌层
assets/tokens.css 提供可用的令牌层：浅色与深色方案、带折射边缘的玻璃原语、滚动边缘效果，以及针对降低透明度、降低动态效果和不支持 backdrop-filter 的降级方案。玻璃原语由着色半透明背景、backdrop-filter: saturate(180%) blur(28px) 和顶部内侧高光组成。背景需要渐变等元素供玻璃折射，否则会呈现平坦灰色。
排版
Apple 字阶为固定阶梯，iOS 默认（Large）样式包括 Large Title 34/41、Title 1 28/34、Title 2 22/28、Title 3 20/25、Headline Semibold 17/22、Body 17/22、Callout 16/21、Subhead 15/20、Footnote 13/18、Caption 1 12/16、Caption 2 11/13。macOS 阶梯更紧凑（Body 13/16，Large Title 26/32），其 Headline 为 Bold。最小字号为 iOS 11pt、macOS 10pt。字体栈建议 -apple-system、BlinkMacSystemFont、'SF Pro Text'，其他平台可用 Inter 作为替代。字距按字号光学补偿，Apple 硬件上由系统字体自动应用；令牌文件中的 Web 数值属于 Web 惯例，并非 Apple 表格的换算。
色彩
Apple 提供精确色值，但说明应避免硬编码系统颜色，实际值可能随版本变化。语义集合比调色板更实用：label、secondaryLabel、tertiaryLabel、quaternaryLabel 用于文字，separator 用于细分隔线，system 与 grouped 两族背景各含 primary、secondary、tertiary。内容置于卡片中时应使用 grouped 背景（浅灰页面、白色卡片）。深色模式不是简单反转，而是使用基础与抬升表面。对比度最低要求：17pt 及以下 4.5:1，18pt 及以上 3:1，任意字号粗体 3:1。
组件规范
工具栏为一条统一栏，单色，动作为圆形或胶囊形芯片，相关动作归入共享胶囊，标题可置于其中。侧边栏为边到边玻璃，SF Symbol 图标着色强调色，选中行使用圆角填充，无尖括号。标签栏为浮动胶囊，仅选中项着色且着色在图标与标签上而非栏上。列表使用内嵌分组，行内分隔线越过前导缩略图内缩，仅导航行显示尖括号。分段控件为等宽分段置于填充轨道中，选中段为抬起的浅色滑块，最多五到七段。弹出层为外层玻璃卡片包含嵌套不透明分组，并带指向触发元素的指针，同时只显示一个且不堆叠。
动效与无障碍
Apple 未指定通用缓动曲线，资料不声称存在。动效要求有目的、简短、精确、可取消并跟随手势。实践中 200–320ms 的 cubic-bezier(0.22, 1, 0.36, 1) 适用于界面移动，cubic-bezier(0.32, 0.72, 0, 1) 适用于分段控件滑块，但明确说明这是合理选择而非 Apple 规范。三项系统设置会改变渲染：降低动态效果（收紧弹簧、以淡入淡出代替轴向过渡、不对 z 深度与模糊进出做动画）；降低透明度（以不透明填充替代材质）；提高对比度（使用不同色值并翻转字形颜色，而非滤镜）。
不可妥协的规则
玻璃仅用于功能层，内容卡片使用不透明表面与阴影；颜色需克制，每条栏仅一个着色元素；强调色应加于背景而非字形（选中标签例外）；分隔线为 0.5px、约 12% 不透明度，而非 1px 实线边框；避免 Light 及更细字重；使用句首大写而非全大写加字距；层级来自字号、字重与颜色，而非下划线与边框；同一组图标要么全部有要么全部没有；每个自定义控件需有按下状态；内容需延伸至栏下方并使用滚动边缘效果；每次使用 backdrop-filter 都需提供 @supports not (...) 的不透明降级，且与降低透明度的媒体查询分开处理；玻璃需有折射与边缘高光；iOS 点击目标至少 44×44pt；破坏性操作使用红色角色。
2026 年调整
Apple macOS 27 Golden Gate 页面（apple.com/os/macos，检查于 2026-09-27）提到更新后的 Liquid Glass 具备更均匀的折射与更高对比度，并列出统一工具栏、边到边侧边栏与更新窗口形状。因此应使用更重的着色、可见的折射边缘、一条连续栏而非浮动岛屿；若构建第一版中稀薄几乎不可见的玻璃，即是在构建 Apple 已修正的版本。
按平台实现路径
Web、Electron、Tauri、WebView 使用 assets/tokens.css 与 assets/refraction.js；iOS、iPadOS、macOS 26+ 原生使用系统材质 SwiftUI glassEffect 与 UIKit UIGlassEffect，不使用伪造；Android（Compose）使用 Haze 玻璃配方；Flutter 使用 BackdropFilter 与 ImageFilter.shader；Windows/Linux 原生需在应用内绘制，窗口材质 Mica、Acrylic 并非 Liquid Glass。各平台代码、版本限制与降级方案见 references/platforms.md。应用流程、导航与界面规格使用 mobile-ux-designer。
其他说明
资料包含交付前检查清单，逐项列出已实际出现过的错误；同时说明输出应按用户要求的形式与长度提供，不擅自附加设计哲学长篇，但对比度、点击目标与降级方案即便未被要求也应验证。