一句话判断

这是 Liquid Glass 设计系统的”原理篇” — concentricity（同心圆几何）如何统一所有控件的圆角、toolbar grouping 怎么表达层级、scroll edge effect 怎么替代硬分割线、sidebar 怎么延伸内容到边缘。搞懂这些，你的自定义 UI 才能和系统”同频共振”。

这场 Session 讲了什么

Maria 围绕三个维度讲解新设计系统：

设计语言：系统颜色做了微调以适配 Liquid Glass，提升色相区分度。typography 更粗、左对齐，提升可读性。形状系统以同心圆（concentricity）为核心 — 三种形状类型：fixed（固定圆角）、capsule（半高圆角）、concentric（从父容器圆角减去 padding 计算）。同心圆确保嵌套容器的圆角视觉和谐。capsule 的比例自然支持同心圆，所以贯穿整个系统（slider、switch、bar、button、grouped table view）。macOS 上 Mini/Small/Medium 保持圆角矩形适配高密度桌面布局，Large 和新 X-Large 使用 capsule。

结构：Liquid Glass 定义了 UI 的新功能层，浮于内容之上。Action Sheet 现在从触发它的操作源弹出（而非屏幕底部），明确表达来源关系。Liquid Glass 与 dimming layer 配合表达模态 vs 并行任务。滚动时 sheet 变得更不透明并增大，信号更深层的交互。导航控件通过 Liquid Glass 从背景提升，与内容产生更多分离。toolbar items 通过 API 正确分组自动共享背景。主操作（如 Done）独立放置并着色。tab bar 支持 accessory view（如媒体播放控件）。iOS 新增底部 Search tab。scroll edge effect（soft/hard 两种）替代硬分割线，表示 UI 和内容的边界。sidebar 变为 inset 并使用 Liquid Glass，内容可延伸到 sidebar 后面（通过 backgroundExtensionEffect）。

连续性：设计决策应跨设备一致 — iPhone 纵向窄布局、Mac 宽画布、iPad 中间桥梁。使用相同 symbols 保持语义一致性。菜单结构跨平台共享（selection indicator、icon、label、accessory）。组件跨平台行为一致（tab bar、segmented control、sidebar 的选中/导航/状态信号）。

值得深挖的点

1. Concentricity 是新设计系统的数学基础。三种形状类型（fixed、capsule、concentric）覆盖所有场景。如果你的自定义控件和系统看起来”不和谐”，大概率是圆角没遵循 concentricity 规则。

2. Concentric shape + fallback radius 是个实用技巧。在容器内时自动计算圆角，独立存在时使用 fallback 值。这让你的组件既能在 card 中使用，也能独立展示。

3. Scroll edge effect 不是装饰。它的作用是明确 UI 和内容的边界，只有在有 floating UI elements 的地方才应该使用。soft 是默认（iOS/iPadOS），hard 用于 macOS 的文本控件和 pinned headers。不要混合或叠加使用。

4. 背景延伸效果让 sidebar 不再是”遮挡内容的面板”。内容流到 sidebar 后面，创造更沉浸的体验。carousel 也会自动穿过 sidebar。

5. 删掉你之前为 bar 添加的自定义背景和边框。这是 Maria 明确建议的 — 之前为按钮增加权重的自定义样式在新设计下不再必要，反而会造成视觉冲突。

代码片段

Concentric shape with fallback：

// 独立时用 fixed radius，嵌套时自动计算
RoundedRectangle(
    cornerRadius: .concentric(fallback: 12)
)

Background extension effect：

Image("hero")
    .backgroundExtensionEffect() // 图片延伸到 sidebar 外

Scroll edge effect：

ScrollView {
    LazyVStack { ... }
}
.scrollEdgeEffectStyle(.soft, for: .bottom)
// 不要混合 soft 和 hard

Toolbar grouping：

.toolbar {
    ToolbarItemGroup(placement: .primaryAction) {
        Button("Share", systemImage: "square.and.arrow.up")
        Button("Favorite", systemImage: "heart")
    }
    // Done 按钮独立放置
    ToolbarItem(placement: .confirmationAction) {
        Button("Done") { }
            .tint(.accentColor)
    }
}

最佳实践

1. 如果你有自定义设计系统，用三种形状类型对齐。fixed 用于固定圆角的小组件，capsule 用于触控友好的按钮/pills，concentric 用于嵌套容器。

2. 检查嵌套容器的圆角。如果内部元素看起来”太尖”或”太鼓”，让它 concentric 于父容器。

3. 清理自定义 bar 样式。移除手动添加的背景、边框、阴影。让系统 Liquid Glass 处理。

4. 用 scroll edge effect 替代硬分割线。它更柔和，更符合新设计系统的审美。

5. 设计一次，跨设备表达。组件的 anatomy（结构）应该跨平台一致，通过 platform variation（capsule vs rounded rect、compact vs regular）表达差异。

还有什么值得关注

• “Meet Liquid Glass”（companion session）介绍了 Liquid Glass 的原则、行为和包容性使用，是本 Session 的前置必看。
• Apple Design Resources 提供了新的 UI kits，包含新设计系统的组件。
• Human Interface Guidelines 更新了 Icons 页面，包含常用操作的推荐 SF Symbols。
• iPadOS 的窗口缩放和浮动控件与 macOS 越来越统一，设计 iPad app 时参考 macOS 的布局考虑。