Apple Liquid Glass — 设计语言，全平台通用
适用范围：任何需要呈现 Apple Liquid Glass 视觉效果的界面——网页、Web 应用、Electron 或 Tauri 桌面应用、Android 或 Flutter 应用，以及原生 Apple 应用。以下设计规则在所有平台通用；唯一区别在于实现背景、模糊和弯曲效果的方式。请先选择技术路线：
| 目标平台 | 路线 |
|---|---|
| Web、Electron、Tauri、WebView | assets/tokens.css + assets/refraction.js（此文件及引用） |
| iOS、iPadOS、macOS 26+ 原生 | 系统材质：SwiftUI glassEffect，UIKit UIGlassEffect——绝不用替代品 |
| Android (Compose) | Haze haze-glass 方案 |
| Flutter | BackdropFilter + ImageFilter.shader |
| Windows / Linux 原生 | 在应用内绘制；窗口材质（Mica、Acrylic）不属于 Liquid Glass |
各平台代码、版本限制和降级方案：references/platforms.md。
应用流程、导航和屏幕规范请使用 mobile-ux-designer。
本技能的用途是让你无需每次都从头推导 Apple 的设计语言。此处所有内容均来自 Apple 官方的《人机界面指南》及其图表，而非记忆或关于 Apple 的博客文章。对于 Apple 未明确提及的内容，本技能也会如实说明，而非凭空创制规则——这种诚实至关重要，因为多数“类 Apple”风格的作品恰恰因自信地应用凭空创制的规则而失败。
一切遵循的核心理念
Apple 的界面分为两层，整个设计语言的核心就在于保持两者清晰区分：
- 内容层 —— 应用实际呈现的内容。不透明。实心表面、真实阴影、无玻璃效果。文本位于此层，绝不能置于动态背景之上。
- 功能层 —— 工具栏、侧边栏、标签栏、弹出菜单、浮动控件。这是 Liquid Glass 的所在。它悬浮于内容之上，折射内容，且绝不与内容竞争。
Apple 明确说明：“不要在内容层中使用 Liquid Glass……在内容层中包含 Liquid Glass 可能导致不必要的复杂性和令人困惑的视觉层次。”
如果只记住一条：玻璃用在框架元素上，绝不用在卡片上。 “类 Apple”风格作品最常见的失败就是给所有元素都加上毛玻璃效果，这恰恰破坏了该材质本应建立的层次感。
输出
按照用户要求的长度和格式，提供他们所需的内容——一个固定页面、一份诊断报告、或一个组件。不要在修复方案中附带未经请求的设计哲学论述；也不要为了简洁而跳过真正的需求：即使未被要求，也要验证对比度、触摸目标尺寸以及下面的降级方案，因为一个看起来正确但不符合这些要求的结果，正是本技能要防止的“假 Apple”结果。
2026 年的改进同样重要。Apple 的 macOS 27 Golden Gate 页面（apple.com/os/macos，2026 年 9 月 27 日检查）：“Liquid Glass 的更新通过更均匀的折射和改进的对比度确保了卓越的可读性。” 还列出了统一的工具栏、边缘到边缘的侧边栏以及更新的窗口形状。所以：更重的色调、可见的折射边缘、一个连续的条状而非浮动的岛状。如果你构建的是第一个版本中那种轻薄、几乎不可见的玻璃，那你构建的正是 Apple 已经修正的版本。
从令牌开始（Web）
assets/tokens.css 是一个可用的令牌层——包含浅色和深色调色板、带折射边缘的玻璃基元、滚动边缘效果，以及针对减少透明度、减少运动以及完全不支持 backdrop-filter 的降级方案。请从此文件开始，而不是手写数值，但要根据实际需求验证它，而不是不经阅读就直接粘贴：在你的上下文中检查它是否仍符合下面的对比度和触摸目标规则，并调整数值（尤其是颜色——Apple 表示可能每次发布都会更改它们），而不是将文件视为不容置疑的真理。
其中有两件事值得理解，而不仅仅是使用：
玻璃基元 是一个带色调的半透明背景 + backdrop-filter: saturate(180%) blur(28px) + 一个顶部内侧高光。这个高光是光线弯曲的视觉效果；没有它，表面看起来就像普通的透明效果，而这正是模仿毛玻璃效果的标志。Apple 自己的材质图显示了一个清晰的亮边沿着边缘延伸。
边缘（.glass::before）是一个 1px 的渐变环，左上角最亮，侧面很淡，右下角再次变亮。均匀的白色边框看起来像贴纸；不均匀的边缘看起来像一个捕捉光线的厚斜面。
环境背景。 玻璃需要背后有东西供其折射，否则会渲染成平坦的灰色。页面背景上的微妙多级渐变可以为材质提供表现的机会。Apple 通过壁纸和照片免费获得了这种效果；在 Web 上，你必须自己提供。
折射：模糊无法伪造的部分
Apple：“这种半透明材质会反射和折射其周围环境。” 放大任何 Apple 自己的图片，你会看到到达玻璃控件边缘的文本或形状会沿着其轮廓弯曲和拉伸，而中间部分保持清晰。这正是 Liquid Glass 区别于 2020 年代毛玻璃效果的地方，也是用户首先会注意到缺失的部分。默认在玻璃控件中构建它；不要等到被要求才做。
- 机制（所有平台）：在边缘带内部，显示来自更内侧的内容，在轮廓处最强，跟随真实形状（胶囊形末端、圆角）。
- Web：在玻璃元素上添加
data-refract并加载assets/refraction.js。在 Chromium 引擎（Chrome、Edge、Android WebView、Electron、Windows 上的 Tauri）中，它会弯曲实时背景。Safari 和 Firefox 无法在backdrop-filter中运行url()滤镜，因此对于已知区域上的玻璃，添加data-refract-source="#id"：脚本会改为复制该区域并弯曲它，在所有浏览器中都有效。两者都未提供的玻璃则仅保留纯模糊。始终为英雄区或演示玻璃提供一个源，否则大多数访问者（Safari、Firefox）看不到任何弯曲效果。 - 清晰玻璃中，文本会明显弯曲（模糊程度低）；在常规玻璃上，弯曲效果体现在模糊图像的形状和颜色边缘上。
- 弯曲玻璃获得更浅的色调（
--glass-refract），以便弯曲效果显现。承载文字的玻璃——菜单、弹出菜单、表单、侧边栏——添加.glass-text以保持完整的色调；否则，在明亮内容上，其标签可能会低于对比度要求。 - 在“减少透明度”设置下关闭，在“减少运动”设置下从不动画化。
- 检查方法：将控件放置在一行文本上并截图。边缘处的字母会弯曲和拉伸；中间部分保持清晰。
数值、调整表和测试方法：references/materials.md（“折射与边缘”）。Android、Flutter 和原生路线：references/platforms.md。
不可妥协项
这些规则一旦被打破，结果就会显得不像 Apple 的产品。
- 玻璃仅用于功能层。 内容卡片使用不透明表面和阴影。
- 颜色要节制。 Apple：“在 Liquid Glass 材质上少用颜色……将颜色保留给真正需要强调的元素，例如状态指示器或主要操作。” 他们的图示显示了一个工具栏，其中有三个带色调的按钮（标记为错误），以及同一个工具栏，其中只有主要操作带有色调（标记为正确）。每个栏中只有一个彩色元素。
- 强调色用在背景上，而不是图标上。 “要强调主要操作，请将颜色应用于背景，而不是符号或文本。” 例外情况是选中的标签：此时 Apple 为图标和标签着色，而让栏保持中性。
- 发丝线，而不是边框。 分隔线为 0.5px，约 12% 不透明度，在列表中缩进到领先图标之后。1px 的实心灰色边框是 Web 习惯用语，不是 Apple 的风格。
- 不使用浅色字体粗细。 Apple：“推荐使用 Regular、Medium、Semibold 或 Bold 字体粗细，避免使用 Ultralight、Thin 和 Light。”
- 句子大小写，而非大写加字间距。 带有宽字母间距的大写微标签是仪表盘/编辑类用途的习惯用语。Apple 的节标题使用句子大小写，并依赖粗细和颜色。
- 层次通过字号、粗细和颜色来构建——绝不用规则线和框。 标题不加下划线，章节不加边框。Apple 自己的 Mail 图示仅通过这三个变量构建了四个层次。
- 图标在组内要么全有，要么全无。 Apple 的菜单规则：“组中的每个条目要么都有图标，要么都没有。” 部分有图标的列表看起来不完整。
- 每个自定义控件都需要一个按下状态。 Apple 明确指出了这一点——没有它，控件“可能会显得无响应”。
- 内容延伸到框架元素下方。 使用滚动边缘效果，使内容在穿过栏下方时逐渐消失，并将背景延伸到侧边栏下方（见下文）。内容在侧边栏边缘处戛然而止，正是 Apple 自己那组正确/错误图示所针对的问题。
- 每次使用
backdrop-filter时，都需要一个@supports not (...)的不透明降级方案，与减少透明度的媒体查询分开——一个处理浏览器不支持的情况，另一个处理用户设置。跳过它是一个常见且容易被忽略的错误：栏会无声地渲染成过于透明且无模糊效果。 - 玻璃会弯曲并带有边缘。 带有均匀 1px 白色边框且无折射效果的玻璃控件是毛玻璃效果，不是 Liquid Glass。在平台允许的情况下使用边缘渐变和折射效果，在不支持的地方使用清晰的模糊降级方案。
- 触摸目标在 iOS 上至少为 44×44pt（macOS 更密集，但仍需要一个舒适的点击目标）。破坏性操作（删除、注销账户）获得破坏性/红色角色，绝不能是中性角色。
字体
Apple 的字号规模并非装饰性的——它是一个固定的阶梯，遵循它是让排版看起来像原生风格的关键。iOS 默认（Large）样式：
| 样式 | 粗细 | 字号 | 行高 |
|---|---|---|---|
| Large Title | Regular | 34 | 41 |
| Title 1 | Regular | 28 | 34 |
| Title 2 | Regular | 22 | 28 |
| Title 3 | Regular | 20 | 25 |
| Headline | Semibold | 17 | 22 |
| Body | Regular | 17 | 22 |
| Callout | Regular | 16 | 21 |
| Subhead | Regular | 15 | 20 |
| Footnote | Regular | 13 | 18 |
| Caption 1 | Regular | 12 | 16 |
| Caption 2 | Regular | 11 | 13 |
macOS 使用更紧凑的阶梯（Body 13/16，Large Title 26/32），其 Headline 是 Bold 而非 Semibold。桌面优先的 Web 布局通常需要介于两者之间的值：标题和阅读文本使用 iOS 字号，侧边栏和元数据使用 macOS 的密度。
最小字号是真实的：iOS 11pt，macOS 10pt。低于此值 Apple 认为文本不可读，且 Web 像素小于点，因此应将 ~11px 视为下限。
字体系列：-apple-system, BlinkMacSystemFont, 'SF Pro Text', … 可在 Apple 硬件上提供真实 SF 字体。在其他地方需要后备字体——Inter 是广泛可用的最接近的替代品。切勿从 CDN 链接 SF 字体；它未获得该授权。
Apple 的字母间距根据字号进行了光学补偿：12pt 以下宽松，恰好 12pt 时为零，19–20pt 左右最紧凑（≈ −0.45pt），然后从约 24pt 开始变为正值（+0.40pt 在 29–34pt），最后在显示尺寸处衰减为零。系统字体在 Apple 硬件上会自动应用此效果。令牌文件中的 Web 值（-0.022em 标题、-0.012em 正文、0 说明文字）是一种 Web 约定，用于防止 Inter 等后备字体看起来松散——并非 Apple 表格的转换，因此不要将其引用为 Apple 的标准。
完整表格、字母间距曲线以及 SF Symbols 粗细/尺寸配对：references/typography.md。
颜色
Apple 提供了精确值，但同时也指出*“避免硬编码系统颜色值……实际颜色值可能在发布之间发生变化。”* 因此将它们用作参考，而非金科玉律。
语义集比调色板更有用：label / secondaryLabel / tertiaryLabel / quaternaryLabel 用于文本，separator 用于发丝线，以及两个背景系列——系统和分组——每个都有 primary / secondary / tertiary。当内容位于卡片中时，应使用分组系列：页面采用分组背景（浅灰色），卡片采用白色。这种与 Web 默认值（灰色页面，白色卡片）的颠倒，是 Apple 布局看起来像 Apple 风格的重要原因。
深色模式并非简单的反色。Apple 使用基础和提升表面：最远端的后面层使用近黑色，任何应显得突出的内容使用明显更浅的木炭色。将所有内容都画成纯黑色是错误的，Apple 自己的图示对也证明了这一点。
Apple 声明的对比度最低要求：17pt 以下为 4.5:1，18pt 及以上为 3:1，任何字号的粗体均为 3:1。
每种系统颜色在浅色、深色以及两种增强对比度变体中的精确 RGB 值，以及 iOS 和 macOS 的完整语义列表：references/color.md。
材质
两种变体，选错会很明显：
- Regular —— 模糊并调整背后内容的亮度。几乎所有场景都使用此变体。在 Apple 的图示中，它接近不透明；背景看起来像柔和的颜色，而不是图片。
- Clear —— 高度透明，用于照片和视频上方的浮动控件，其中媒体必须保持突出。如果背后的内容很亮，Apple 指定在其下方使用一层 35% 不透明度的深色调暗层，以便标签能够清晰可见。
材质还会自适应：在浅色内容上，玻璃及其符号变暗；在深色内容上，它们变亮。在 Web 上，这意味着你的玻璃令牌需要为每个主题设置真正不同的值，而不是使用一个值加上不同的不透明度。
方案、四种标准材质以及活力级别：references/materials.md。
组件
组件形状传达了大部分信号。简要说明：
- 工具栏 —— 一个统一的栏，单色，操作为圆形或胶囊形控件，相关操作分组到一个共享的胶囊中。标题（和可选的副标题）可以放在其中。
- 侧边栏 —— 边缘到边缘，玻璃，SF Symbols 图标以强调色着色，圆角选择
……
[内容截断，待翻译]