Liquid Glass Design System (iOS 26) 是一个用于实现苹果 Liquid Glass 动态材质的开发模式集合。该材质能够模糊其背后内容、反射周围内容的颜色和光线,并对触摸与指针交互做出反应,覆盖 SwiftUI、UIKit 和 WidgetKit 集成。
【适用时机】 为 iOS 26+ 构建或更新应用并使用新设计语言;实现玻璃风格的按钮、卡片、工具栏或容器;创建玻璃元素之间的形变过渡;为小组件应用 Liquid Glass 效果;将现有模糊/材质效果迁移到新的 Liquid Glass API。
【SwiftUI 核心模式】 基础玻璃效果:对任意视图使用 .glassEffect(),默认为 regular 变体、capsule 形状。 自定义形状与色调:可使用 .regular 标准玻璃效果、.tint(Color) 添加颜色色调以增强突出度、.interactive() 响应触摸与指针交互;形状支持 .capsule(默认)、.rect(cornerRadius:)、.circle。 玻璃按钮样式:.buttonStyle(.glass) 与 .buttonStyle(.glassProminent)。 GlassEffectContainer:对多个玻璃视图使用容器包裹以提升性能并支持形变,spacing 参数控制合并距离,元素越近玻璃形状越容易融合。 联合玻璃效果:通过 glassEffectUnion 配合 @Namespace 将多个视图合并为单一玻璃形状。 形变动画过渡:使用 @Namespace 与 glassEffectID 在视图层级变化时创建平滑形变,配合 withAnimation 使用。 侧边栏下横向滚动:确保 ScrollView 内容延伸至容器前缘/后缘,布局延伸至边缘时系统自动处理侧边栏下方滚动行为,无需额外修饰符。
【UIKit 核心模式】 基础 UIGlassEffect:创建 UIGlassEffect,可设置 tintColor 与 isInteractive,放入 UIVisualEffectView,设置圆角与 clipsToBounds,并通过 Auto Layout 约束定位;内容添加到 contentView。 UIGlassContainerEffect:用于多个玻璃元素,设置 spacing,将多个 UIGlassEffect 视图添加到容器 contentView。 滚动边缘效果:可通过 scrollView.topEdgeEffect.style、bottomEdgeEffect.style、leftEdgeEffect.isHidden 等配置。 工具栏玻璃集成:UIBarButtonItem 可设置 hidesSharedBackground = true 以退出共享玻璃背景。
【WidgetKit 核心模式】 渲染模式检测:通过 @Environment(.widgetRenderingMode) 检测,.accented 为白色调、主题玻璃背景,否则为全彩标准外观。 强调分组:使用 .widgetAccentable() 标记强调组以建立视觉层级。 强调模式图像渲染:使用 .widgetAccentedRenderingMode(.monochrome)。 容器背景:使用 .containerBackground(for: .widget)。
【关键设计决策】 GlassEffectContainer 包裹用于性能优化并启用玻璃元素间形变;spacing 参数控制合并距离;@Namespace 与 glassEffectID 支持视图层级变化时的平滑形变;interactive() 为触摸/指针反应的显式选择加入;UIKit 中使用 UIGlassContainerEffect 保持与 SwiftUI 一致的容器模式;小组件强调渲染模式在用户选择有色主屏幕时由系统应用带色调的玻璃。
【最佳实践】 对多个同级视图应用玻璃时始终使用 GlassEffectContainer;在其他外观修饰符(frame、font、padding)之后应用 .glassEffect();仅在响应用户交互的元素上使用 .interactive();谨慎选择容器中的 spacing 以控制玻璃效果何时合并;改变视图层级时使用 withAnimation 启用平滑形变;跨浅色、深色、强调/有色模式测试;确保无障碍对比度,玻璃上的文字须保持可读。
【应避免的反模式】 在无 GlassEffectContainer 的情况下使用多个独立 .glassEffect() 视图;嵌套过多玻璃效果导致性能与视觉清晰度下降;将玻璃应用于每个视图(应保留给交互元素、工具栏和卡片);UIKit 中使用圆角时忘记 clipsToBounds = true;忽略小组件的强调渲染模式;在玻璃背后使用不透明背景而破坏半透明效果。
【使用场景】 iOS 26 新设计下的导航栏、工具栏和标签栏;浮动操作按钮和卡片式容器;需要视觉深度与触摸反馈的交互控件;应与系统 Liquid Glass 外观集成的小组件;相关 UI 状态之间的形变过渡。