New Zealand - Deer Park Heights Queenstown
Introduction
在新的 iOS 26 以及 macOS Tahoe 有全新的外觀及風格，這次變更的核心就是用於 Control 及 Navigation 的全新自適應材質 Liquid Glass
1524
假如想要深入了解 Liquid Glass 的設計理念思維請看
WWDC 25 — Get to know the new design system
App structure
NavigationSplitView
NavigationSplitView 用於瀏覽一個明確定義的層次結構，這結構中可能包含很多根類別
使用 .backgroundExtensionEffect() ，View 就可以擴展到安全區域的外部，而不會裁切其中的內容
假如把側邊欄隱藏了，此時 Image 在安全區域之外也會被模糊化處理，這是要讓他一直抱持可見狀態
TabView
使用 .tabBarMinimizeBehavior(.onScrollDown) ，可以滑動時自動縮小
Tab bar accessory
使用 .tabViewBottomAccessory { … }
並且會有 scroll 時縮小的效果
還可以使用 @Environment(\.tablViewBottomAccessoryPlacement) var placement 來處理 View 的位置狀態變化
Sheets
在 iOS 26 預設嵌入高度（畫面高度6成，如圖），這時表單會使用 Liquid Glass 作為背景
假如故意讓高度比較小時，底部邊緣會向內收縮
這從最小到最大的整個過程 iOS 都會自動幫我過度背景狀態
所以想用 native sheet 的話，不建議客製化背景
縮放的過渡，搭配 sheet
和 sheet 一樣，menu, alert (dialog) and popovers，都有這樣的動畫效果，將焦點從他們的操作吸引到展示的內容上
Toolbars
- Items are placed in Liquid Glass
- Appears above your app’s content
- Adaptive 自適應它背後的內容
Toolbars 是會自動分 group
假如想要客製化 group 的話，可以善用 ToolbarSpacer(.fixed)
他也可以用在底下的 toolbars
但也有些情境不需要這種 group，就可以用 .sharedBackgroundVisibility(.hidden) ，將 item 分到自己的 group 上，而不顯示背景
假如想加上 native badge，現在也很容易，加上 .badge(_:) 即可
toolbars 除了 group 以及 badge 以外，新設計還引入其他變化，可以使用單色宣染，單色可以減少視覺干擾，強調 app 的內容並確保內容清晰可讀。
一樣可以使用 .tint(_:) 和 buttonStyle(.borderedProminent) 來著色，但希望這樣做是為了傳達特定含義，例如行動指引或下一步操作的指引，而不只是為了提供視覺效果
Edge Effect，這是一個應用於系統工具欄下內容的細微模糊和淡入淡出的效果
假如 app 裡在 toolbars 後面有任何額外的背景或變暗效果，請記得清除，避免造成干擾 ⚠️
✅
假如遇到複雜的 ui 元素在上面，例如日曆 app，可以用 scrollEdgeEffectStyle(.hard)
Search
Search patterns
所有平台的兩個關鍵搜尋模式均有一些重大更新
- Search in the toolbar search field 放在 toolbar 的話，會放在螢幕底部，要讓他觸手可及，但在 iPad 和 Mac 上，顯示在 toolbars 右上角
- Search as a page 第二種模式將 search field 作為 tab bar 上的專用頁面
Search in the toolbar
可以直接在 NavigationSplitView 上加 .searchable(text:)
在 iPhone 上會自動顯示在底部
根據設備大小、toolbar 按鈕的數量和其他因素，系統可能會選擇將 search filed 最小化爲一個 toolbar button
Search as a page
假如把 search 做在 tab 上，通常表示需要專用的搜尋頁面完成，在 Apple 的所有平台上的 app 幾乎都用這種模式
假如要在 tab bar 上面加 search 功能
Tab(role: .search) { ... }
.searchable(text: $searchText)
點擊之後，代表到了專門的搜尋頁面，在此可以準備一些瀏覽建議讓 user 操作，也可以等 user 在點擊一次 search bar 進行鍵盤輸入搜尋
而在 Mac or iPad 上，當點選 search bar 時，search bar 會顯示在 App 瀏覽建議的正上方
Controls
Refreshed look for controls
Familiar look and feel across devices
Capsule buttons
border button 現在默認具有膠囊形狀，從而與新設計系統的彎曲保持協調
Button shapes
現在不管什麼 size 都抱持圓角形狀
Button sizes
大小也有針對新設計進行更新
可以透過 .controlSize(_:) 來調整，而且可以控制單個或整個都
對於最重要、最醒目的操作，新設計系統現在也支援超大尺寸按鈕 (Extral Large)
Glass button styles
Sliders
透過 init 裡的 step 可以加上刻度
也可以使用 SliderTick 手動放置單個刻度標記
還可以將其軌道填充的起始位置設定在特定地方，這對於處理那些可能會從非起始默認值向左或向右調整的值，會很有用，例如在播放時選擇更快或更慢的速度值
在 init 時，使用 neutralValue
Menus
現在 Mac or iOS 平台，使用 menu 會得到差不多風格的 UI
1887
Corner concentricity
Apple 出的很多有元件的圓角，都與他的容器完美契合對齊，這稱為 Corner concentricity （角同心性），像下面這張圖的 button 與他的 container 的角落應該要共享同一個角中心
所以自己客製化的 View 要實現這件事，可以使用 .rect(corner: .containerConcentric)
想採用新設計的最佳方式，使用標準 native 的元件最容易（Toolbars, Search bar, Controls），但我們有時候還是需要客製化元件，這時候就要看下一章節的介紹了
Liquid Glass effects
像是 Map app 就是很好的 liquid glass 使用例子，他自定義的 Control (Button) 都有懸浮在 app 內容上
假如要在 Control 加上 Glass effect，可以使用 .glassEffect() ，而 SwiftUI 會自動自適應調整，以便在彩色的背景上，也可以保持良好的閲讀性
形狀也可以調整
假如有特別需要強調的元件，可以使用 .tint() ，但記得跟前面在 toolbars 一樣，當有要傳達特定含義才用，不要只是為了提升視覺效果，讓他顯眼就使用
在 iOS 上對於自定義 Control 或有互動性的元件，要將 interactive 加到 .glassEffect() 中，這樣這 glass effect 會透過縮放、彈跳和閃爍，對 user 做出一些互動反應，這就跟 toolbar or slider 一樣，提供這種互動效果
假如有多個客製化 glass 元件，我們可以把它們組合在一起，要使用 GlassEffectContainer ，這樣的使用對於正確的視覺效果非常重要
Glass sampling
glass 材質會反射和折射光線，並會從附近內容中選擇顏色，這種效果可以透過從一個比自身更大的區域中進行內容採樣來實現（要仔細看邊緣）
但 glass 效果之間是無法進行採樣的
假如有這需求，也可以把這兩個元件放進同個 GlassEffectContainer
這邊來一個實際的 GlassEffectContainer 使用範例
把 Control 包在 GlassEffectContainer 裡，並且加上 @Namespace var namespace 以及 .glassEffectID(_:in:)
Next steps
- Build with Xcode 26: 記得要使用 Xcode 26 並 build 在 iOS 26 才可以看到這個 glass effect
- Audit your apps: 要好好審查自己的 app 流程，確認是不是有什麼畫面要調整，尤其要注意 sheet, toolbar 那些元件的背景色是否可以移除，否則很容易跟 glass effect 衝突
- Consider your custom use cases: 使用 Liquid Glass 打造有表現力的元件，讓 App 脫穎而出
