SuperAPI AI 工具集

axiom-liquid-glass

设计与创作

查看项目

更新于 10-15 18:31

技能介绍

用途

axiom-liquid-glass 是一个面向 Apple 平台开发者的技能文档,主题是 Apple 在 WWDC 2025 推出的新一代材质设计系统 Liquid Glass。它适用于以下场景:在应用中实现 Liquid Glass 效果;审查现有 UI 是否存在采用 Liquid Glass 的机会;调试 Liquid Glass 材质的视觉瑕疵;优化 Liquid Glass 性能;请求对 Liquid Glass 实现的专家评审;理解何时使用 Regular 与 Clear 变体;排查着色、可读性或自适应行为问题。

文档还提到一个相关技能 axiom-liquid-glass-ref,用于获取覆盖全应用的采用指导(应用图标、控件、导航、菜单、窗口、平台注意事项)。

什么是 Liquid Glass

Liquid Glass 是 Apple 在 WWDC 2025 推出的下一代材质设计系统,被视为对以往材质(Aqua、iOS 7 模糊、Dynamic Island)的重大演进。它创造了一种新的数字元材质,具备以下特征:动态弯曲和塑造光线(透镜折射)而非散射光线;像轻质液体一样有机移动,响应触摸和应用动态;自动适应尺寸、环境、内容和明暗模式;统一所有 Apple 平台(iOS、iPadOS、macOS、visionOS)的设计语言。

其核心理念是:Liquid Glass 以圆润、漂浮的形态配合圆润、沉浸式屏幕的演进,让触摸交互感觉自然,同时让内容透出。

主要能力与视觉属性

  1. 透镜折射(主要视觉特征):Liquid Glass 通过透镜折射定义自身——扭曲和弯曲光线来传达存在感、运动和形态。元素通过调节光线弯曲(而非淡入淡出)来显现和消失。控件感觉极轻,但视觉上仍可区分。

  2. 运动与流动性:通过随光线弯曲来响应交互;凝胶般的柔韧性传达短暂、可塑的特性;元素在交互时抬升进入 Liquid Glass(控件);应用状态之间作为单一漂浮平面动态变形。

  3. 自适应行为:Liquid Glass 持续自适应,没有固定的明暗外观。文本滚动到下方时阴影增强,着色偏移以保持可读性;小元素(导航栏)独立翻转明暗,大元素(菜单、侧边栏)不翻转但调整深度;环境光会微妙地洒到表面。

使用方式

基本 API 用法(SwiftUI 的 glassEffect 修饰符):

// 基本用法 - 在胶囊形状内应用玻璃效果
Text("Hello")
    .glassEffect()

// 自定义形状
Text("Hello")
    .glassEffect(in: RoundedRectangle(cornerRadius: 12))

// 交互元素(iOS - 用于控件/容器)
Button("Tap Me") {
    // action
}
.glassEffect()
.interactive() // 在 iOS 上为自定义控件添加

自动采用:仅用 Xcode 26 重新编译,即可让标准控件自动获得 Liquid Glass。

变体:Regular 与 Clear。关键决策:绝不在同一界面中混用 Regular 和 Clear。

Regular 变体(默认——95% 的情况):最通用。完整的自适应效果、自动可读性,可在任何尺寸、任何内容上工作。用于导航栏、标签栏、工具栏、按钮、菜单、侧边栏。

Clear 变体(仅特殊场景):永久更透明,无自适应行为。需要调暗层以保证可读性。仅当以下三个条件全部满足时使用:元素位于媒体丰富的内容之上;内容层不会因调暗层受到负面影响;玻璃上方的内容粗体且明亮。不满足全部三个条件就使用 Clear 会导致可读性差。

分层系统架构:Liquid Glass 由四层协同组成——高光(光源产生响应几何的高光,部分响应设备运动)、阴影(内容感知:文本上方更强,浅色背景上更弱)、内部辉光(交互时材质从内部发光,并扩散到附近玻璃元素)、自适应着色(多层一起适应以维持层级,全部内置自动)。

滚动边缘效果:滚动边缘效果在内容滚动时将其溶解到背景中,把玻璃抬升到移动内容之上。当存在固定附属视图(如列标题)时,使用 .scrollEdgeEffect(.hard) 以获得额外的视觉分隔。

着色与颜色:Liquid Glass 引入自适应着色——选择一种颜色会生成映射到下方内容亮度的色调,灵感来自现实中的彩色玻璃。与所有玻璃行为(变形、适应、交互)兼容。着色规则:只给主要操作着色;不要给所有东西着色——当一切都着色时,没有东西会突出;实心填充会破坏 Liquid Glass 特性,应使用 .tint() 而非实心填充。将着色保留给主要 UI 操作,整体应用配色方案使用内容层的颜色。

可读性与对比度:SwiftUI 自动在玻璃效果内使用鲜艳的文本和色调颜色,无需手动调整。小元素(导航栏、标签栏)翻转明暗以便辨别。大元素(菜单、侧边栏)适应但不翻转(大面积翻转太分散注意力)。符号/字形镜像玻璃行为并自动最大化对比度。可选择性使用自定义色调颜色以实现独特的功能目的(例如在单个工具栏按钮上使用 .tint(.orange) 以示强调)。

无障碍:Liquid Glass 提供多项无障碍功能,在不牺牲其魔力的前提下修改材质。降低透明度:使 Liquid Glass 更磨砂,遮挡更多背后内容,系统设置启用时自动应用。增强对比度:使元素主要呈黑或白,高光带对比边框,系统设置启用时自动应用。减弱动态效果:降低效果强度,禁用弹性属性,系统设置启用时自动应用。开发者无需操作——使用 Liquid Glass 时所有功能自动可用。

适用场景

适用于在 Apple 平台(iOS、iPadOS、macOS、visionOS)上开发应用并希望采用 Liquid Glass 材质的开发者,尤其是需要实现效果、审查采用机会、调试视觉瑕疵、优化性能或进行专家评审的场景。

限制与注意事项

性能考量:关注复杂视图层级中 Liquid Glass 的渲染成本。Regular 变体针对性能优化;较大元素(菜单、侧边栏)使用更明显的效果但由系统管理;避免过度嵌套玻璃元素。自适应行为有计算成本(明暗切换、阴影调整、色调计算、透镜效果)。系统会处理优化,但需注意:不要不必要地动画 Liquid Glass 元素;谨慎使用 Clear 变体(需要调暗层计算);如遇性能问题用 Instruments 分析。

测试:需在以下配置中测试——明暗模式、启用降低透明度、启用增强对比度、启用减弱动态效果、动态字体(更大文本尺寸)、内容滚动(验证滚动边缘效果)、从右到左语言。

设计评审压力:文档提供了在评审压力下捍卫实现的策略,包括识别违反技能指南的设计请求红旗、专业地反驳的步骤(展示框架、演示风险、提供折中、记录决策),以及一个真实案例(App Store 发布阻塞,36 小时截止)。

专家评审清单:涵盖材质适当性、变体选择、可读性与对比度、分层与层级、滚动边缘效果、无障碍、性能七个方面。

常见错误与解决方案:玻璃放置错误(内容层用玻璃、Clear 无调暗层)、过度着色、静态材质期望。

排查:视觉瑕疵(玻璃过透明或不可见、玻璃不透明或边缘生硬)、深色模式问题、性能问题。

从旧材质迁移:文档包含从 UIBlurEffect / NSVisualEffectView 迁移的说明(原文在此处截断)。