從 AppKit 到 Liquid Glass：深度解析 macOS Tahoe 視窗幾何與材質演進

macOS 視覺語言的重大轉化

在 Apple 的技術演進史中，介面設計的更迭往往預示著開發典範的轉移。隨著 macOS Tahoe 的問世，我們迎來了自 macOS Big Sur 以來最顯著的視覺語言變革。這次更新的核心在於「Liquid Glass 流體玻璃」，這不僅是一個美學上的半透明材質，更是一種具備光學反射與折射特性的動態表面，為使用者介面注入了前所未有的深度感。

對開發者而言，這標誌著 AppKit 正在從傳統的平面層級轉向具備空間感的「功能層」結構。傳統的固定工具列與邊框逐漸消失，取而代之的是浮動在內容之上的玻璃元素。這種轉變不僅提升了視覺精緻度，更考驗著開發者如何精確掌控視窗幾何學與佈局避讓。本文將以資深開發者的視角，深度解析從視窗結構到細微控制項的全方位變革，並提供實戰級的開發策略。

核心結構重塑：漂浮的工具列與智慧分組

在 macOS Tahoe 中，視窗結構經歷了根本性的重新定義。工具列（Toolbar）不再是視窗頂部的固定容器，而是演變為在內容上漂浮的玻璃元素。這種設計增強了視窗內的層級感，讓導航與控制項顯得更輕量且具備交互性。

核心技術解析與 API 應用

AppKit 現在會根據控制項類型自動進行玻璃材質的智慧分組。例如，連續的按鈕會被合併在同一塊玻璃上，而分段控制項（Segmented Controls）或搜尋框則會被獨立出來。

• 自動分組覆寫：若需手動控制分組邏輯，應使用 NSToolbarItemGroup。插入空白間隔（Spacers）可以強制分離玻璃區塊
• 非互動元件處理：對於自定義標題或狀態指標等非互動元件，務必將 isBordered 屬性設為 false，否則系統會錯誤地為其加上按鈕般的玻璃底色
• 狀態與強調：
• 強調色填充：使用新的 style 屬性設定為 .prominent，系統會以強調色（Accent Color）為玻璃上色
• 自定義色調：透過 backgroundTintColor 可進一步指定特定的玻璃背襯顏色
• 資訊標記：透過 NSItemBadge API，開發者可以輕鬆為工具列項目添加未讀計數或通知標籤

正如 Apple 工程團隊所強調，這種設計讓工具列看起來像是浮動在內容之上，從而拉開了控制層與內容層的距離。開發者應善用這些 API 來強化 App 的導航層級。

幾何美學：圓角曲率與佈局避讓 LayoutRegion

隨著工具列的浮動，視窗的整體幾何形狀也發生了連鎖反應。macOS Tahoe 引入了更具包容性的圓角設計，並強調「Concentricity 同心圓特性」，即內層元件的曲率必須與視窗大圓角保持完美的比例關係。

關鍵 API：NSView.LayoutRegion

較大的圓角雖然美觀，卻可能裁切到位於角落的 UI 內容。全新的 NSView.LayoutRegion API 正是為了解決這種「非線性邊界」的佈局問題。

• 超越 Safe Area：傳統的 safeAreaLayoutGuide 主要處理線性縮排，而 LayoutRegion 則原生支持「圓角避讓 Corner Adaptation」。它能提供精確的幾何數據，確保控制項在縮放時不會與視窗圓角碰撞
• 幾何開發細節：開發者除了使用 Layout Guide 外，還能透過 LayoutRegion 獲取原始的 EdgeInsets 或矩形數據，這對於需要自定義繪製（Custom Drawing）的視圖尤為重要

// 使用 LayoutRegion 避開視窗大圓角的實作範例
override func updateConstraints() {
    super.updateConstraints()
    
    // 獲取安全區域的 Layout Region 並加入水平圓角避讓
    let safeRegion = self.view.safeAreaLayoutRegion
    let layoutGuide = safeRegion.layoutGuide(addingCornerAdaptation: .horizontal)
    
    // 將位於右下角的按鈕約束在該 Guide 內
    NSLayoutConstraint.activate([
        addButton.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor),
        addButton.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
    ])
}

沉浸式體驗：邊對邊滾動與背景擴展

為了配合玻璃材質的穿透感，macOS Tahoe 強力推動「邊對邊 Edge-to-Edge」設計。透過 NSSplitViewController 建立的側邊欄（Sidebar）現在預設為浮動玻璃材質。

遷移策略與新 API

• 移除舊有 Effect View：這是一項關鍵的遷移建議。如果你的舊版側邊欄使用了 NSVisualEffectView 來顯示傳統材質，請務必將其移除，否則它會阻擋新的 Liquid Glass 材質透出
• NSBackgroundExtensionView：針對地圖或大幅海報等內容，若不想讓側邊欄遮擋核心內容，可使用此視圖。它會自動在安全區域外對內容進行「鏡像與模糊」，將視覺感受擴展至整個視窗邊緣

// 實作邊對邊背景擴展
let backgroundExtension = NSBackgroundExtensionView()
backgroundExtension.contentView = myMainPosterImage // 核心內容保持在安全區域內
view.addSubview(backgroundExtension)
// 設定約束使 backgroundExtension 填滿整個視窗 frame

控制項的現代進化：尺寸、形狀與顯著性

控制項在這次更新中呈現了跨平台的家族感，同時保留了 Mac 的生產力特徵。

關鍵變更與開發者警告

1. 尺寸與高度警告：新增了 Extra Large 尺寸，專為核心動作（如播放、通話）設計。請注意：Mini、Small 與 Medium 尺寸的標準高度均已微幅增加。如果你的 UI 代碼中存在「寫死的高度數值 Hard-coded Height」，在 Tahoe 上將會發生佈局錯誤或裁切。請務必改用 Auto Layout
2. 相容性屬性：對於極度密集的複雜介面，可設定 prefersCompactControlSizeMetrics = true 來強制回歸舊版的尺寸標準
3. 菜單（Menus）進化：菜單現在全面引入「圖示列」，強調利用 SF Symbols 提升掃視率。建議為所有核心選單項目配置圖示，以符合系統的一致性
4. 顯著性 Prominence：透過 tintProminence（Primary、Secondary、None），開發者可以更精細地控制顏色的視覺權重。例如，刪除按鈕可設為紅色但選擇 secondary 顯著性，以避免過度干擾使用者注意力

自定義 UI 實戰：整合 NSGlassEffectView

將 Liquid Glass 引入自定義視圖時，必須遵循「設計意圖 Design Intent」：玻璃應僅用於最關鍵的導航或浮動控制層。

效能與視覺正確性

為什麼我們需要 NSGlassEffectContainerView？Liquid Glass 為了模擬真實的折射與反射，會對其背景區域進行「擴大採樣 Oversampling」。如果畫面中有多個鄰近的玻璃元件，卻沒有被封裝在同一個容器中，系統將會進行多次重複的採樣，這不僅大幅消耗 GPU 資源，還會導致玻璃邊緣銜接處的視覺錯誤。

• 容器化優勢：容器能實現「單次採樣、全局共享」，並讓多個玻璃元件在靠近時產生「流體融合」的連帶視覺效果

// 將現有的 StackView 封裝進玻璃容器
let container = NSGlassEffectContainerView()
let glassView = NSGlassEffectView()
glassView.contentView = myCustomControlStack

container.addSubview(glassView)
// 確保使用 Auto Layout 將 container 置於適當位置

結論：擁抱 macOS Tahoe 的設計新浪潮

從視窗幾何的微調到 Liquid Glass 的全方位應用，macOS Tahoe 的設計語言標誌著 AppKit 的一次重大轉型。使用 Xcode 16 編譯你的 App 是開啟這場進化的起點，許多新的系統行為將隨之自動觸發。

作為資深開發者，我們的下一步不應只是單純的介面適配，而是應重新檢視 App 的資訊架構。透過 NSView.LayoutRegion 優化幾何佈局，利用 NSBackgroundExtensionView 打造沉浸感，並審慎地將核心控制項提升至 Liquid Glass 層級。