规格表 / Surfaces

Playground 教会读者“glass 是什么材质”,但没回答“glass 在 iOS 26 里以什么规格出现在哪些 surface”。 这里把 Liquid Glass 落到 8 件具体的 surface 上:尺寸、圆角、材质变体、动效曲线、scroll-edge 行为、API 入口。 所有数字都标注来源;公开资料里查不到的字段标“待考”,不假装精确。

来源核实 推断待考 公开资料未明
Chrome

Tab Bar(浮岛)

材质
.regular(adaptive,自动翻 light/dark)[1]
形态
与底边脱开的浮岛 pill / 不再贴底[1]
高度
SwiftUI 自动布局,未硬编码(约 49–56pt 之间)[3]
圆角
9999(pill),跟随 containerConcentric[3]
折叠 opacity
0.7[3]
渐变 fade
gradient location 0.4[3]
minimize 行为
.tabBarMinimizeBehavior(.onScrollDown / .automatic / .never)[4]
search 角色
Tab(role: .search) 把搜索固定到右下角浮 FAB[4]

Motion

  • morph 折叠0.35s · spring(response 0.3, damping 0.6)

过去贴底的 tab bar 改成悬浮玻璃岛,与内容明确抽离。当用户向下滚动时折叠,反向手势恢复。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
HomeSearchLibraryProfile
Chrome

Toolbar

材质
.regular(自动)[1]
API
ToolbarSpacer(.fixed) / ToolbarSpacer(.flexible)(initializer 是 init(SpacerSizing, placement:))[5]
scroll edge 行为
滚动到内容底/顶时玻璃从透明渐入[1]
合并
GlassEffectContainer 让相邻 toolbar 项目共享采样并 morph[3]
spacing token
16 / 20 / 30 / 40 pt(按场景)[3]

Toolbar 已不是单条不透明栏,相邻按钮可用 GlassEffectContainer 合并采样,按下时还能流体相吸。Glass 不能采样 Glass,必须靠 container 共享区。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
Aa
Modal

Sheet

材质
.regular,inset Liquid Glass 背景自动应用[3]
断点
presentationDetents([.medium, .large])[3]
圆角
与显示边角 concentric(设备相关)[3]
grabber
系统默认;尺寸未公开待考

States

medium detentlarge detentdismissed

Sheet 自动接收 inset Liquid Glass 背景,不需要手动加 .glassEffect()。圆角与设备屏幕外圆角同心。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
Sheet
Control

Floating Action Button

材质
.regular.interactive() — 按下 scale + bounce + shimmer[3]
尺寸
56×56 pt(社区惯例 / Tab role:.search 自动)[3]
圆角
50%(圆形)[3]
tint
.tint(.color);用于 CTA / 主操作语义[3]
位置
padding [.bottom, .trailing], 12pt(Tab role:.search 默认)[4]

Motion

  • 按下0.4s · .bouncy(duration: 0.4)
  • 触点辐射 · touch-point illumination 辐射到相邻玻璃

FAB 是 Liquid Glass 最纯粹的展示点:interactive() 让按下变形、辐射光照到相邻元素。SwiftUI Glass.interactive(Bool) 文档未把它限定为 iOS-only;平台可用性以 SDK 为准。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
+
Control

Controls(Slider / Switch / Stepper)

新尺寸
controlSize(.extraLarge) — iOS 26 新增[3]
触控目标
44×44 pt 标准;48×48 pt 小尺寸;56×56 pt FAB[3]
材质
系统默认 .regular;可 .glassEffect(.regular.interactive())[3]
tint 用法
语义传达(primary action / state),非装饰[3]

Motion

  • 按下0.4s · .bouncy
  • drag · spring response 0.3, damping 0.6

Apple 反复强调:tint 用于语义,不要装饰。蓝色不是好看,是 "这是主操作"。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
Icon

App Icon(多层玻璃)

结构
多层玻璃叠合,光从一层透到对面层[1]
高光
specular highlight 跟随设备 motion 移动[1]
反向辉光
左上有光照时右下角同时被点亮(光穿透到对边)[1]
变体
light / dark / clear / tinted 四态[1]
层数
不公开;最少 2 层(前后),通常 3 层待考

Icon 是 Liquid Glass 最富表现力的载体:多层透明玻璃 + 实时折射让 icon 不只是贴图,而是会"接光"的物体。Apple 没有公开具体层数。

Sources

  1. WWDC25 Session 219 · Meet Liquid Glass · video材质变体、lensing、specular、accessibility 三态
  2. WWDCNotes · WWDC25-219 · analysis
  3. Conor Luddy · iOS 26 Liquid Glass Reference · analysisAPI、动画时长、间距值的最佳二手汇总
  4. Donny Wals · Exploring tab bars on iOS 26 · analysis
  5. Apple HIG · Materials · official-doc
  6. Swift with Majid · Glassifying custom SwiftUI views · analysis
图片版权归Apple Inc.所有,本图鉴仅作设计研究与分析用途。Images © respective owners. Used here for design commentary & research (fair use).