Liquid Glass Design

affaan-m/ECC/docs/zh-CN/skills/liquid-glass-design

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775無授權條款275K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 天前更新

iOS 26 液态玻璃设计系统 — 适用于 SwiftUI、UIKit 和 WidgetKit 的动态玻璃材质，具有模糊、反射和交互式变形效果。

僅含說明Design & CreativeSoftware Development
AI 產生的概覽

在 SwiftUI、UIKit 與 WidgetKit 中實作 Apple iOS 26 液態玻璃材質的模式指南。

功能
此技能是一份參考指南，用於在 iOS 26 應用程式中實作 Apple 的液態玻璃設計材質。它提供 SwiftUI 中玻璃效果、色調、互動反應、玻璃容器、合併與變形轉場的程式碼模式，UIKit 中對應的 UIGlassEffect 與容器 API，以及 WidgetKit 中的小工具算繪模式、強調色群組與容器背景。文件也列出關鍵設計決策、最佳實務與應避免的反模式。
適用情境
適用於建置或更新採用 iOS 26 設計語言的應用程式，或加入玻璃風格的按鈕、卡片、工具列與容器時。也適合玻璃元素之間的變形轉場、將液態玻璃效果套用至小工具，以及把現有模糊或材質效果遷移到新 API。
執行需求
此技能未附帶指令碼或資源，僅包含說明與程式碼範例。套用這些模式需要搭載 iOS 26 SDK 的 Xcode，以及 SwiftUI、UIKit 或 WidgetKit 目標。

Liquid Glass 设计系统 (iOS 26)

实现苹果 Liquid Glass 的模式指南——这是一种动态材质，会模糊其后的内容，反射周围内容的颜色和光线，并对触摸和指针交互做出反应。涵盖 SwiftUI、UIKit 和 WidgetKit 集成。

何时启用

  • 为 iOS 26+ 构建或更新采用新设计语言的应用程序时
  • 实现玻璃风格的按钮、卡片、工具栏或容器时
  • 在玻璃元素之间创建变形过渡时
  • 将 Liquid Glass 效果应用于小组件时
  • 将现有的模糊/材质效果迁移到新的 Liquid Glass API 时

核心模式 — SwiftUI

基本玻璃效果

为任何视图添加 Liquid Glass 的最简单方法：

swift
Text("Hello, World!")    .font(.title)    .padding()    .glassEffect()  // Default: regular variant, capsule shape

自定义形状和色调

swift
Text("Hello, World!")    .font(.title)    .padding()    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

关键自定义选项：

  • .regular — 标准玻璃效果
  • .tint(Color) — 添加颜色色调以增强突出度
  • .interactive() — 对触摸和指针交互做出反应
  • 形状：.capsule（默认）、.rect(cornerRadius:)、.circle

玻璃按钮样式

swift
Button("Click Me") { /* action */ }    .buttonStyle(.glass)
Button("Important") { /* action */ }    .buttonStyle(.glassProminent)

用于多个元素的 GlassEffectContainer

出于性能和变形考虑，始终将多个玻璃视图包装在一个容器中：

swift
GlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()
        Image(systemName: "eraser.fill")            .frame(width: 80.0, height: 80.0)            .font(.system(size: 36))            .glassEffect()    }}

spacing 参数控制合并距离——距离更近的元素会将其玻璃形状融合在一起。

统一玻璃效果

使用 glassEffectUnion 将多个视图组合成单个玻璃形状：

swift
@Namespace private var namespace
GlassEffectContainer(spacing: 20.0) {    HStack(spacing: 20.0) {        ForEach(symbolSet.indices, id: \.self) { item in            Image(systemName: symbolSet[item])                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)        }    }}

变形过渡

在玻璃元素出现/消失时创建平滑的变形效果：

swift
@State private var isExpanded = false@Namespace private var namespace
GlassEffectContainer(spacing: 40.0) {    HStack(spacing: 40.0) {        Image(systemName: "scribble.variable")            .frame(width: 80.0, height: 80.0)            .glassEffect()            .glassEffectID("pencil", in: namespace)
        if isExpanded {            Image(systemName: "eraser.fill")                .frame(width: 80.0, height: 80.0)                .glassEffect()                .glassEffectID("eraser", in: namespace)        }    }}
Button("Toggle") {    withAnimation { isExpanded.toggle() }}.buttonStyle(.glass)

将水平滚动延伸到侧边栏下方

要允许水平滚动内容延伸到侧边栏或检查器下方，请确保 ScrollView 内容到达容器的 leading/trailing 边缘。当布局延伸到边缘时，系统会自动处理侧边栏下方的滚动行为——无需额外的修饰符。

核心模式 — UIKit

基本 UIGlassEffect

swift
let glassEffect = UIGlassEffect()glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)glassEffect.isInteractive = true
let visualEffectView = UIVisualEffectView(effect: glassEffect)visualEffectView.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.layer.cornerRadius = 20visualEffectView.clipsToBounds = true
view.addSubview(visualEffectView)NSLayoutConstraint.activate([    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),    visualEffectView.widthAnchor.constraint(equalToConstant: 200),    visualEffectView.heightAnchor.constraint(equalToConstant: 120)])
// Add content to contentViewlet label = UILabel()label.text = "Liquid Glass"label.translatesAutoresizingMaskIntoConstraints = falsevisualEffectView.contentView.addSubview(label)NSLayoutConstraint.activate([    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)])

用于多个元素的 UIGlassContainerEffect

swift
let containerEffect = UIGlassContainerEffect()containerEffect.spacing = 40.0
let containerView = UIVisualEffectView(effect: containerEffect)
let firstGlass = UIVisualEffectView(effect: UIGlassEffect())let secondGlass = UIVisualEffectView(effect: UIGlassEffect())
containerView.contentView.addSubview(firstGlass)containerView.contentView.addSubview(secondGlass)

滚动边缘效果

swift
scrollView.topEdgeEffect.style = .automaticscrollView.bottomEdgeEffect.style = .hardscrollView.leftEdgeEffect.isHidden = true

工具栏玻璃集成

swift
let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))favoriteButton.hidesSharedBackground = true  // Opt out of shared glass background

核心模式 — WidgetKit

渲染模式检测

swift
struct MyWidgetView: View {    @Environment(\.widgetRenderingMode) var renderingMode
    var body: some View {        if renderingMode == .accented {            // Tinted mode: white-tinted, themed glass background        } else {            // Full color mode: standard appearance        }    }}

用于视觉层次结构的强调色组

swift
HStack {    VStack(alignment: .leading) {        Text("Title")            .widgetAccentable()  // Accent group        Text("Subtitle")            // Primary group (default)    }    Image(systemName: "star.fill")        .widgetAccentable()  // Accent group}

强调模式下的图像渲染

swift
Image("myImage")    .widgetAccentedRenderingMode(.monochrome)

容器背景

swift
VStack { /* content */ }    .containerBackground(for: .widget) {        Color.blue.opacity(0.2)    }

关键设计决策

决策理由
使用 GlassEffectContainer 包装性能优化，实现玻璃元素之间的变形
spacing 参数控制合并距离——微调元素需要多近才能融合
@Namespace + glassEffectID在视图层次结构变化时实现平滑的变形过渡
interactive() 修饰符明确选择加入触摸/指针反应——并非所有玻璃都应响应
UIKit 中的 UIGlassContainerEffect与 SwiftUI 保持一致的容器模式
小组件中的强调色渲染模式当用户选择带色调的主屏幕时，系统会应用带色调的玻璃效果

最佳实践

  • 始终使用 GlassEffectContainer 来为多个兄弟视图应用玻璃效果——它支持变形并提高渲染性能
  • 在其他外观修饰符（frame、font、padding）之后应用 .glassEffect()
  • 仅在响应用户交互的元素（按钮、可切换项目）上使用 .interactive()
  • 仔细选择容器中的间距，以控制玻璃效果何时合并
  • 在更改视图层次结构时使用 withAnimation，以启用平滑的变形过渡
  • 在各种外观模式下测试——浅色模式、深色模式和强调色/色调模式
  • 确保可访问性对比度——玻璃上的文本必须保持可读性

应避免的反模式

  • 使用多个独立的 .glassEffect() 视图而不使用 GlassEffectContainer
  • 嵌套过多玻璃效果——会降低性能和视觉清晰度
  • 对每个视图都应用玻璃效果——保留给交互元素、工具栏和卡片
  • 在 UIKit 中使用圆角时忘记 clipsToBounds = true
  • 忽略小组件中的强调色渲染模式——破坏带色调的主屏幕外观
  • 在玻璃效果后面使用不透明背景——破坏了半透明效果

使用场景

  • 采用 iOS 26 新设计的导航栏、工具栏和标签栏
  • 浮动操作按钮和卡片式容器
  • 需要视觉深度和触摸反馈的交互控件
  • 应与系统 Liquid Glass 外观集成的小组件
  • 相关 UI 状态之间的变形过渡

來源與署名

來源：affaan-m/ECC位於docs/zh-CN/skills/liquid-glass-design提交ef648e0

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 affaan-m/ECC 的技能

Unified Notifications Ops

affaan-m

設計統一的通知策略，對來自 GitHub、Linear、鉤子與聊天工具的通知進行分類、路由、去重與升級。

Productivity & Workflow275K4 天前更新

Verification Loop

affaan-m

執行六階段程式碼驗證流程，並產出 PASS/FAIL 就緒報告。

Software Development275K4 天前更新

Ui To Vue

affaan-m

將批次 UI 設計截圖轉換為使用 Vant、Element Plus 或 Ant Design Vue 的 Vue 3 元件。

Software Development275K4 天前更新

Unified Memory

affaan-m

指導代理透過本機 ECC Memory Vault 在不同執行框架之間共享持久脈絡與交接資訊。

AI & Agents275K4 天前更新

Visa Doc Translate

affaan-m

透過 OCR 將簽證文件影像翻譯成英文，並產出原圖與譯文對照的雙語 PDF。

Documents & Office275K4 天前更新

Team Builder

affaan-m

互動式挑選器：探索可用的代理角色，讓使用者最多選五個，平行執行同一任務並彙整結果。

AI & Agents275K4 天前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative180K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative180K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative180K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative180K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative180K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新