液態玻璃設計系統 (iOS 26)

液態玻璃設計系統 (iOS 26) 是做什麼的？

實作 Apple Liquid Glass（液態玻璃）的模式——這是一種動態材質，能模糊後方內容、反射周圍色彩與光線，並對觸控與指標互動做出反應。涵蓋 SwiftUI、UIKit 及 WidgetKit 的整合方式。

啟用時機

• 為 iOS 26+ 應用程式採用新設計語言進行建置或更新
• 實作玻璃風格的按鈕、卡片、工具列或容器
• 建立玻璃元素之間的變形轉場
• 對 Widget 套用液態玻璃效果
• 將現有的模糊/材質效果遷移至新的 Liquid Glass API

核心模式 — SwiftUI

基本玻璃效果

在任何檢視上加入液態玻璃的最簡單方式：

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // 預設：一般變體，膠囊形狀

自訂形狀與色調

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

關鍵自訂選項：

• .regular — 標準玻璃效果
• .tint(Color) — 加入色彩色調以增加顯著性
• .interactive() — 對觸控與指標互動做出反應
• 形狀：.capsule（預設）、.rect(cornerRadius:)、.circle

玻璃按鈕樣式

Button("點我") { /* 動作 */ }
    .buttonStyle(.glass)

Button("重要") { /* 動作 */ }
    .buttonStyle(.glassProminent)

多個元素的 GlassEffectContainer

為達到效能與變形效果，務必將多個玻璃檢視放入容器中：

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 將多個檢視組合成單一玻璃形狀：

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

變形轉場

在玻璃元素顯示/隱藏時建立流暢變形效果：

@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("切換") {
    withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)

水平滾動延伸至側邊欄下方

若要讓水平滾動內容延伸至側邊欄或檢閱器下方，請確保 ScrollView 的內容達到容器的前緣/尾緣。當佈局延伸至邊緣時，系統會自動處理側邊欄下方滾動行為——無需額外的修飾器。

核心模式 — UIKit

基本 UIGlassEffect

let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true

let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.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)
])

// 將內容加入 contentView
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])

多個元素的 UIGlassContainerEffect

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)

滾動邊緣效果

scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true

工具列玻璃整合

let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true  // 選擇退出共享玻璃背景

核心模式 — WidgetKit

渲染模式偵測

struct MyWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode

    var body: some View {
        if renderingMode == .accented {
            // 色調模式：白色色調、主題玻璃背景
        } else {
            // 全彩模式：標準外觀
        }
    }
}

強調群組以建立視覺層級

HStack {
    VStack(alignment: .leading) {
        Text("標題")
            .widgetAccentable()  // 強調群組
        Text("副標題")
            // 主要群組（預設）
    }
    Image(systemName: "star.fill")
        .widgetAccentable()  // 強調群組
}

色調模式下的影像渲染

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

容器背景

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

關鍵設計決策

決策	理由
使用 GlassEffectContainer 包裹	效能最佳化，啟用玻璃元素間的變形
spacing 參數	控制合併距離——微調元素必須多近才能融合
@Namespace + glassEffectID	在檢視階層變更時啟用流暢的變形轉場
interactive() 修飾器	明確選擇加入觸控/指標反應——並非所有玻璃都應回應
UIKit 中的 UIGlassContainerEffect	與 SwiftUI 一致的容器模式
Widget 的強調渲染模式	當使用者選擇色調主畫面時，系統套用色調玻璃

最佳實踐

• 務必使用 GlassEffectContainer 對多個兄弟檢視套用玻璃效果——能啟用變形並改善渲染效能
• 在其他外觀修飾器（frame、font、padding）之後再套用 .glassEffect()
• 僅對回應使用者互動的元素（按鈕、可切換項目）使用 .interactive()
• 仔細選擇容器中的 spacing，以控制玻璃效果何時合併
• 在變更檢視階層時使用 withAnimation，以啟用流暢的變形轉場
• 在不同外觀模式下測試——淺色模式、深色模式以及強調/色調模式
• 確保無障礙對比——玻璃上的文字必須保持可讀性

應避免的反模式

• 在沒有 GlassEffectContainer 的情況下使用多個獨立的 .glassEffect() 檢視
• 嵌套過多玻璃效果——會降低效能與視覺清晰度
• 對每個檢視都套用玻璃效果——保留給互動元素、工具列與卡片
• 在 UIKit 中使用圓角時忘記設定 clipsToBounds = true
• 忽略 Widget 的強調渲染模式——會破壞色調主畫面的外觀
• 在玻璃後方使用不透明背景——會破壞半透明效果

使用時機

• 採用 iOS 26 新設計的導覽列、工具列與分頁列
• 浮動動作按鈕與卡片樣式容器
• 需要視覺深度與觸控回饋的互動控制項
• 需要與系統 Liquid Glass 外觀整合的 Widget
• 相關 UI 狀態間的變形轉場