WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Get to know the new design system

Get to know the new design system

SwiftUIDesign
观看原视频

Highlight

Maria 把新设计系统拆成三件事：视觉语言（颜色、字体、形状）、结构（Liquid Glass 浮于内容之上）、连续性（同一份设计在 iPhone / iPad / Mac 上的表达）。

核心内容

很多 App 升级到 iOS 26 后会出现一种”违和感”：按钮的圆角太尖、卡片里嵌着的封面图角又太鼓、bar 上的按钮挤在一起、scroll 边缘出现一条硬邦邦的分割线。代码层面没有 bug，问题出在旧设计系统留下的那些手动加的背景、阴影、固定圆角——它们在 Liquid Glass 这一层新材质面前突然显得格格不入。Maria 在演讲里把这种感觉形容为”两个不同调的乐器在合奏”，要让 App 重新和系统合拍，就要从最底层的视觉语言开始重做。

Apple 这一次的解法是把整套设计系统重新对齐到三个维度。第一是视觉语言：系统色在 Light / Dark / Increased Contrast 三种模式下都做了微调，让色相在 Liquid Glass 上仍然能区分开；字体加粗并左对齐，提升 alert、onboarding 这类关键时刻的可读性；最大的变化是形状——所有 UI 的圆角都围绕”同心（concentricity）“这一原则展开。第二是结构：Liquid Glass 是一个浮于内容之上的功能层，Action Sheet 从触发它的按钮上”长”出来，sheet 上拉时会变得更不透明、更大，scroll edge effect 替代硬分割线，sidebar 改为 inset 并允许内容延伸到它后面。第三是连续性：同一个组件在 iPhone（窄、纵向）、iPad（中间桥梁）、Mac（宽画布）上应该共享 anatomy，差异通过 capsule vs rounded rect、compact vs regular 这类平台变体来表达，而不是从零重画。

详细内容

三种形状类型，是整套系统的几何基底（03:42）。 Maria 给出了非常明确的三选一规则：

  • fixed：圆角固定。适合在 macOS 上 Mini / Small / Medium 控件这种高密度桌面布局。
  • capsule：圆角等于容器高度的一半。天然支持同心嵌套，因此被用在 slider、switch、bar、button、grouped table view 上。在 macOS 上 Large 和新的 X-Large 控件也改用 capsule。
  • concentric：圆角通过”父容器圆角 - padding”自动算出来，确保嵌套层之间的曲率视觉一致。

如果发现卡片里的封面图角”太尖”或”太鼓”，答案几乎只有一个：让它 concentric 于父容器（05:19）。Maria 还给了一个实用技巧：当组件既要嵌套在容器里、又要单独出现，可以用 concentric 加一个 fallback radius——嵌套时用 concentric 值，独立出现时用 fallback。

bar 的清理工作是升级的第一步（08:33）。 旧系统里大家手动给按钮加背景、加边框、加阴影，是因为以前需要这些装饰来表达”这是个可点的东西”。新系统里，emphasis 由 Liquid Glass 自动接管，这些装饰应该全部删掉。然后用正确的分组 API 把 bar items 按”功能 + 频率”分组，系统会自动让同组的 button 共享背景。不要把 symbol 和文字混在一组——Maria 举的反例是 “Select” 和分享图标紧挨着放，会被误认为同一个按钮。Done 这种主操作要单独一格、带 tint，在 iOS / iPadOS 上是蓝色对勾，在 macOS 上是 prominent 的文字按钮。

Action Sheet 的位置变了（06:54）。 以前不管你点屏幕哪里，Action Sheet 都从底部冒出来；现在它从触发它的那个按钮长出来。如果你在做自定义控件，要把 material 直接应用在控件本身，而不是它内部的 view 上，否则系统就识别不出”源”和”目标”的关系。Sheet 的状态变化也接入了同一套语言：模态任务用 Liquid Glass + dimming layer 表示打断主流程；并行任务只用 Liquid Glass，不加 dimming，因为它本来就不该夺走焦点；用户上拉 sheet 时它会更不透明、更大，暗示”更深层的交互”。

Scroll edge effect 替代硬分割线（11:18）。 它有 soft 和 hard 两种：iOS / iPadOS 默认 soft，柔和过渡；macOS 上更多用 hard，给 pinned table header 这类需要硬边界的地方。两种不要混用、不要叠用。一个 view 只用一种 scroll edge effect。如果界面里没有任何浮动 UI 元素，就不要加 scroll edge effect——它不是装饰。

Sidebar 现在是 inset 的（12:34）。 新的 sidebar 用 Liquid Glass 构建，内容可以”流”到它后面。backgroundExtensionEffect 让 hero 图、tinted 背景这类大色块延伸到 sidebar 后面，但视觉中心仍然在主内容区里。文字和控件要放在更上层，避免被 sidebar 的模糊扭曲。Scroll view 默认也会延伸到 sidebar 之下，让 carousel 自然滑过。

连续性的本质是”只设计一遍 anatomy”（13:34）。 跨平台的同名组件应当共享同一份结构（selection indicator、icon、label、accessory），iOS 的 context menu 和 macOS 的 popup menu 长得不一样，但骨架是同一份。tab bar、segmented control、sidebar 这些组件在不同平台上要给出相同的 selection / navigation / state 反馈。需要 search 时，iOS 现在直接在底部有一个独立的 Search tab，不要再把它藏在 toolbar 里。tab bar 还能挂 accessory view，比如跨页面常驻的播放控件——但 checkout 这种页面相关的按钮不要放进去，它属于内容本身。

核心启发

  • 做什么：用三种形状类型对齐自己的设计系统。

    • 为什么值得做：在 Liquid Glass 之上，圆角的几何关系是”和谐感”的来源。混用任意圆角值会让 App 在 iOS 26 系统组件旁边显得突兀。
    • 怎么开始：盘点现有 App 里所有的圆角值，把每个组件归到 fixed / capsule / concentric 三类之一；嵌套容器一律改成 concentric；按钮和触控目标优先 capsule；macOS 上的高密度 inspector 留给 fixed。

  • 做什么：清理所有自定义 bar 样式。

    • 为什么值得做：旧 App 通常给 bar 按钮手动加了背景、边框、阴影，这些装饰在新系统里既冗余又冲突，会让 toolbar 看起来”脏”。
    • 怎么开始：删掉 toolbar / navigation bar 上所有手写的背景、border、shadow；用官方分组 API 按”功能 + 频率”分组；主操作（Done、Save）单独成组并带 tint；多余的次要按钮挪进 More 菜单。

  • 做什么：把硬分割线换成 scroll edge effect。

    • 为什么值得做：硬分割线是旧时代的产物，在 Liquid Glass 上看起来生硬；scroll edge effect 是系统级的”内容边界提示”。
    • 怎么开始：iOS / iPadOS 用 soft，macOS 上的 pinned header / 文本控件用 hard；一个 view 只用一种；没有浮动 UI 元素就不要加。

  • 做什么：让 sheet 从触发它的源头长出来。

    • 为什么值得做：spatial 的关系能减少用户的认知成本——他点了哪里，反馈就从哪里来。
    • 怎么开始：检查所有 Action Sheet / popover 的来源，确认它们 anchor 到具体的 source view；自定义控件把 material 直接应用在控件上而不是内部 view 上。

  • 做什么：跨平台共享 anatomy，只用 platform variation 表达差异。

    • 为什么值得做：减少重复设计成本，也让用户在 iPhone / iPad / Mac 之间切换时建立稳定的肌肉记忆。
    • 怎么开始：把现有组件抽出共同的 anatomy（selection indicator、icon、label、accessory）；差异交给 capsule vs rounded rect、compact vs regular、context menu vs popup menu 这类平台层级的变体来处理。

关联 Session

评论

GitHub Issues · utterances