Liquid Glass Design

affaan-m/ECC/skills/liquid-glass-design

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

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building iOS 26 Liquid Glass UI in SwiftUI, UIKit, or WidgetKit.

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

指導在 SwiftUI、UIKit 與 WidgetKit 中實作 Apple iOS 26 Liquid Glass 設計系統。

功能
提供套用 iOS 26 Liquid Glass 材質的參考模式與程式碼範例，涵蓋玻璃效果、著色、互動修飾符、容器、形變轉場以及小工具算繪模式。內容涵蓋 SwiftUI、UIKit 與 WidgetKit API，並包含設計決策、最佳實務與反模式。產出為指引說明與程式碼片段，而非檔案或指令碼。
適用情境
適用於建置或更新採用 Liquid Glass 設計語言的 iOS 26 應用程式，例如玻璃按鈕、卡片、工具列或小工具。也適合將現有模糊或材質效果遷移到新的 Liquid Glass API 時使用。
執行需求
無指令碼或資源，僅為說明文件。需要 iOS 26 開發環境，並視情況使用 SwiftUI、UIKit 或 WidgetKit。

Liquid Glass Design System (iOS 26)

Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.

When to Activate

  • Building or updating apps for iOS 26+ with the new design language
  • Implementing glass-style buttons, cards, toolbars, or containers
  • Creating morphing transitions between glass elements
  • Applying Liquid Glass effects to widgets
  • Migrating existing blur/material effects to the new Liquid Glass API

Core Pattern — SwiftUI

Basic Glass Effect

The simplest way to add Liquid Glass to any view:

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

Customizing Shape and Tint

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

Key customization options:

  • .regular — standard glass effect
  • .tint(Color) — add color tint for prominence
  • .interactive() — react to touch and pointer interactions
  • Shape: .capsule (default), .rect(cornerRadius:), .circle

Glass Button Styles

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

GlassEffectContainer for Multiple Elements

Always wrap multiple glass views in a container for performance and morphing:

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()    }}

The spacing parameter controls merge distance — closer elements blend their glass shapes together.

Uniting Glass Effects

Combine multiple views into a single glass shape with 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)        }    }}

Morphing Transitions

Create smooth morphing when glass elements appear/disappear:

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)

Extending Horizontal Scrolling Under Sidebar

To allow horizontal scroll content to extend under a sidebar or inspector, ensure the ScrollView content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed.

Core Pattern — UIKit

Basic 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 for Multiple Elements

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)

Scroll Edge Effects

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

Toolbar Glass Integration

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

Core Pattern — WidgetKit

Rendering Mode Detection

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        }    }}

Accent Groups for Visual Hierarchy

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

Image Rendering in Accented Mode

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

Container Background

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

Key Design Decisions

DecisionRationale
GlassEffectContainer wrappingPerformance optimization, enables morphing between glass elements
spacing parameterControls merge distance — fine-tune how close elements must be to blend
@Namespace + glassEffectIDEnables smooth morphing transitions on view hierarchy changes
interactive() modifierExplicit opt-in for touch/pointer reactions — not all glass should respond
UIGlassContainerEffect in UIKitSame container pattern as SwiftUI for consistency
Accented rendering mode in widgetsSystem applies tinted glass when user selects tinted Home Screen

Best Practices

  • Always use GlassEffectContainer when applying glass to multiple sibling views — it enables morphing and improves rendering performance
  • Apply .glassEffect() after other appearance modifiers (frame, font, padding)
  • Use .interactive() only on elements that respond to user interaction (buttons, toggleable items)
  • Choose spacing carefully in containers to control when glass effects merge
  • Use withAnimation when changing view hierarchies to enable smooth morphing transitions
  • Test across appearances — light mode, dark mode, and accented/tinted modes
  • Ensure accessibility contrast — text on glass must remain readable

Anti-Patterns to Avoid

  • Using multiple standalone .glassEffect() views without a GlassEffectContainer
  • Nesting too many glass effects — degrades performance and visual clarity
  • Applying glass to every view — reserve for interactive elements, toolbars, and cards
  • Forgetting clipsToBounds = true in UIKit when using corner radii
  • Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance
  • Using opaque backgrounds behind glass — defeats the translucency effect

When to Use

  • Navigation bars, toolbars, and tab bars with the new iOS 26 design
  • Floating action buttons and card-style containers
  • Interactive controls that need visual depth and touch feedback
  • Widgets that should integrate with the system's Liquid Glass appearance
  • Morphing transitions between related UI states

來源與署名

來源：affaan-m/ECC位於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今天更新