了解全新设计系统

大家好！我是 Apple 设计团队的 设计师 Maria 在这个讲座中 我将为大家介绍 关于我们设计系统的 新特性需要了解的所有信息 涵盖视觉设计、信息架构 以及核心系统组件 如果你还没有看过由我的同事 Chan、Shubham 和 Bruno 主讲的讲座“了解 Liquid Glass” 建议先看一下 这个配套讲座简要介绍了 Liquid Glass 的原则、行为以及 在 App 中有效、包容的使用方式 为我的讲座将要介绍的所有内容 打下了基础 Liquid Glass 是我们范围最广的 一次软件设计更新 通过一组全新的启发式方法重塑了 界面和内容之间的关系 结果如何？ 一种协调的设计语言就此诞生 有着 更强的连贯性、适应能力和表现力 从整体着眼的系统设计方法 带来了重大机遇 让我们能够将这些原则扩展到 Apple 生态系统内的每一个表面 和每一次交互 此外 借助 SwiftUI、 Mac Catalyst 等技术 以及 iPad 调整窗口大小等全新软件功能 我们正迈向共同的设计基础 同时不断改进设计系统 兼容不同的设备、屏幕尺寸 和输入模式 实现流畅操作 无论你是设计单个功能 还是塑造整个系统 Apple 框架的灵活性都能 让跨设备设计实现前所未有的 流畅性、可扩展性和强大功能 本次发布的许多内容都很值得你探索 所以我不会面面俱到地介绍 还是让你自己探索才更有乐趣 在着重介绍影响最大的更新时 我将重点讨论三个主要方面 首先是全新的设计语言以及它 如何为大规模的连贯体验奠定基础 然后是为导航和内容互动 提供指导的结构 最后是连贯性如何 让任何位置上的交互 带给用户亲切熟悉的感觉 我们来深入了解一下 Liquid Glass 在塑造 Apple 不断发展的设计语言方面 发挥了重要作用 能在不同平台上 为用户带来熟悉的体验 同时又能 恰到好处地定制每一项体验 在设计这个系统时 我们 重点关注的是微小细节的影响 系统化方法意味着在每个层面 都有意识地进行设计 确保 无论是最小的控件 还是最大的表面 对所有元素的考量 都与整个系统有关 我们对系统配色系列进行了非常微妙 但又意义非凡的调整 让浅色模式、深色模式 和增强对比度模式的视觉效果 与 Liquid Glass 协调配合 既改进了色调区分 又保留了 Apple 通过独特设计 传达出来的乐观精神 字体排印经过优化 增强了清晰度 和结构性 现在会在提醒和新手引导 等重要时刻使用加粗字体 和左对齐来提高可读性 最有意义的变化之一 是形状的运用方式 Apple 的硬件具有一致的边框 现在 同样的精准度 也为 UI 提供了指导 让曲率、大小和比例 与设备边框保持一致 在用户手中的设备和眼中的界面之间 形成了一种统一的节奏感 各种形状能完美融合在一起 奥秘 就在于一个几何学概念 那就是同心

围绕共同的中心对齐半径 和外边距 多个形状可以相互嵌套 从而产生让人倍感舒适的视觉效果 为了保持光学平衡 在行得通时对视图采用 遵循数学计算的居中方式 在行不通时略微偏移 我们使用三种类型的形状 来构建同心布局： 固定形状具有恒定的圆角半径 胶囊形状使用的半径 是容器形状高度的一半 同心形状的半径计算方法 则是用父级形状的半径减去内边距

胶囊的几何形状可以 天然支持同心布局 因此 你可以看到它贯穿了 整个系统 体现在 滑块和开关的比例上 也体现在条形栏、按钮 和分组表格视图的圆角上 胶囊形状在便于触碰操作的布局中 可以做到重点突出、清晰明了 但在元素密集的桌面环境中 则最适合用于独立操作 在 macOS 上 迷你、小型和中等 尺寸的控件将继续使用圆角矩形 因此非常适合高密度的紧凑型布局 比如检查器面板 现在 大尺寸控件以及 新推出的加大尺寸 将使用胶囊形状 加大尺寸可以利用 Liquid Glass 在空间比较充裕的区域突出重点 结合运用这些形状 可以在复杂的 桌面布局中营造层次感和平衡感 你自己的视觉设计语言和界面元素 必须与 Liquid Glass 协调一致 这一点非常重要 这就好比用同一个音调演奏音乐 你的界面元素应该 与系统的节奏和音调相得益彰 而不是与之冲突 这方面的问题可能会比较棘手 尤其是当你管理自己的设计系统时 使用我们刚才介绍的三种形状 有助于让你的组件与系统对齐 也更方便与 Apple 的 各种 API 配合使用

在更新你的 App 时 请留意 那些感觉缩得太近 或是展得太开的角落 这些地方会产生矛盾效果 打破平衡感 这种情况常见于嵌套容器形状 例如卡片中的图案 如果有什么元素不太对劲 答案很简单 它可能需要采用同心形状 以便系统可以 自动计算内侧半径 你可能还会注意到 它靠近设备边缘 就像这个按钮一样 对于手机布局 请使用 具有加大外边距的胶囊形状 以便在屏幕边缘附近留出空间 对于 iPad 和 Mac 请使用 与窗口边缘对齐的同心形状 以增强平衡感 管理既需要在容器形状内工作 又需要单独工作的组件时 有一个非常巧妙的技巧： 使用具有回退半径的同心形状 在嵌套时 同心值会进行调整 而当组件独立工作时 就会触发回退 打好基础后 下一步是 了解如何设计 App 的结构 以充分利用 Liquid Glass 随着 App 变得更具沉浸感 更聚焦于内容 UI 应该在需要时为交互提供支持 而在不需要时不显突兀 Liquid Glass 在 UI 中定义了 一个新的功能层 悬浮在内容上方 结构突出 清晰明了 而又不会喧宾夺主 这一点的实现方式之一 是清晰地描绘各个表面之间的关系 它们呈现出怎样的视觉效果 以及如何以既舒展又稳固的方式 与它们的源保持连接 以操作表单为例 在过去 无论操作来自哪里 它都会显示在屏幕底部 现在 它会通过操作本身弹出 操作本身充当操作表单的源 角色定义明确 有助于系统理解这种关系 从而在直接从轻点的元素展开交互时 对交互进行锚定 构建自定控件时 请采用相同的方法 并确保将材质直接应用于控件 而不是它的内部视图

Liquid Glass 通过引入 微妙的材质变化形式 随着导航的深入或转移强化意图 从而帮助反映导航焦点 虽然听起来可能比较复杂 但是 这种方式以大家熟悉的提示为基础 比如在显示表单时 用一个变暗的层来表明模态 当任务主流程中断时 将 Liquid Glass 与变暗的层 搭配使用有助于集中注意力 让表单区域清晰明了、目的明确 另一方面 当某个任务并行运行时 Liquid Glass 会制造出 自然的分离效果 让显示内容 清晰明了 同时避免破坏流畅性 当焦点转移时 比如向上拖动表单 Liquid Glass 会巧妙地隐退 不透明度增加 尺寸缓缓增大 以表明发生了更深层次的互动 除了在焦点和深度方面的作用之外 Liquid Glass 还有助于 抬高导航控件 以前 当界面处于静止状态时 导航控件会与背景融为一体 Liquid Glass 有助于将它们抬高 从而让它们能更好地与内容分离 同时还能增强交互性

先说重点 如果你已经 自定了各种条形栏 现在是时候好好清理一下了 我们都曾经通过添加额外的 背景或边框来突显按钮 在很长一段时间内 这种方法 很常见 也非常有效 但随着系统外观焕然一新 我们都得重新学习如何突出重点 因此就不需要进行这类自定了

层次感不应依靠装饰 而是应该通过布局和分组来表现 对条形栏项目进行梳理 做到清晰易读、空间分明 有助于营造强烈的结构感 更新到全新外观时 使用正确 API 分组的项目 会自动更新 以使用共同的背景 并保留它们的空间关系 如果项目没有按照你预期的方式分组 以下技巧可以帮你解决问题 如果条形栏太拥挤 请将它用作提示 来移除任何不必要的项目 并将二级操作移到“更多”菜单中 确保内容简洁明了、易于访问 按功能和使用频率 对条形栏项目进行分组 执行相关操作的按钮 通常应该放在一起 不过 千万别把符号和文本混为一组 比如在这里看到的“Select” 和分享图标 因为这种分组 可能会被视为单个按钮 如果你需要使用文本按钮 请将它们放置在各自的容器形状上

一级操作保持独立 并采用着色外观 比如“完成” 在 iOS 和 iPadOS 上 经常显示为蓝色勾号 在 macOS 上则显示为 醒目的文本按钮 从而形成一个清晰的焦点 易于发现和进行交互 标签页栏是 App 中反复出现 次数最多的组件之一 如果对标签栏梳理得当 就能让用户 觉得布局清晰明了 还能帮助他们 在各部分之间流畅移动 如果内容没有直接显示出来 搜索就变得至关重要 因此 现在 iOS 在底部提供了 一个专用的搜索标签 让用户能够更加方便快捷地 访问和使用 此外 标签页栏还支持 使用补充视图的常驻功能 例如在整个 App 中保持可见的 媒体播放控件 不要在这里放置特定于屏幕的操作 例如结账按钮 应该将它 与所支持的内容放在一起 如果将来自 UI 不同部分的元素 混合起来 可能会模糊层次结构 让用户难以区分常驻功能 与具体上下文中的功能 接下来 我们来看看如何 借助视觉效果来突出内容 同时使交互始终清晰明了 使用 Liquid Glass 的元素 需要与内容明确分离 以便保持易读性 比如在现在的 Safari 浏览器中 控件位于系统材质之上 而不是直接位于内容之上 如果没有这种分离 对比效果就会受到影响 滚动边缘效果强化了边界 取代了硬分隔线 同时利用巧妙的模糊效果减少杂乱 并让 UI 保持清晰易读 此外 请记住 滚动边缘效果 不是装饰性元素 它们不会像叠层那样 有遮挡或变暗效果 它们只是明确了 UI 与内容 相遇的位置 不应在 没有任何浮动 UI 元素的地方使用

当固定的控件与滚动视图重叠时 滚动视图会自动显示边缘效果 在整个系统中 你会看到两种样式：软样式和硬样式 不应将它们混合或堆叠在一起 软样式是默认的样式 也是大多数情况下使用的样式 尤其是在 iOS 和 iPadOS 上 它提供了微妙的过渡效果 非常适合使用了 Liquid Glass 的 交互式元素 比如按钮和输入 硬样式主要用于 macOS 可以打造存在感更强 不透明度更高的边界 非常适合 交互式文本、没有背景的控件或是 需要更清晰显示的固定式表标题 对每个视图应用一个滚动边缘效果 在 iPad 或 macOS 上的 分屏浏览布局中 每个面板都可以 拥有自己的滚动边缘效果 只需 让它们高度一致保持对齐即可 对内容的聚焦延续到了边栏 现在可以在边栏中扩展到边缘 你会注意到 为了支持这项功能 边栏中现已嵌入 Liquid Glass 从而使内容在边栏后方流动 带来更具沉浸感的体验 背景扩展效果能让内容 在边栏后方扩展 填满整个布局的宽度 同时 让视觉效果在布局中始终居中显示 这项功能可以用于主图片、 着色背景 或是任何 能给用户带来开阔感的表面 只需确保所有文本和控件 都位于上面一层即可 以避免造成不必要的视觉失真 不止于此！ 现在在默认情况下 滚动视图 会扩展到边栏下方 因此轮播界面 会自然地滑过 有助于 在不中断操作的情况下发现内容

你可以以视图为单位 来应用背景扩展效果 因此可以非常灵活地构建 更加丰富多彩的布局 在这里 顶部视图和底部视图 使用了背景扩展效果 而中间的滚动视图则保持独立 设计语言可以增强连贯性 结构可以决定操作 而连续互通可以实现全面互联 提供流畅的使用体验 这个理念很简单 当用户 在多台设备之间切换 或调整窗口大小时 他们并非 从头开始 而是会继续执行同一任务 你的 App 应该在这一刻 让用户继续操作下去 而不应中断 无论是布局、层次结构 还是交互方面的决策 在每一台承载了你的设计的设备上 都应该一以贯之 这其实可以简化 你的设计过程！ 你无需针对每个平台从零开始设计 而只需设计一次 App 的结构 这并不是全新概念 我们也正在对它加大投入 我们首先快速回顾一下 我们如何看待设备上下文 随着你更新 App 以采用 全新设计系统 现在是时候 重新评估你提供的跨平台体验了 在 iPhone 上 内容会放大到 狭窄的垂直布局中 在 Mac 上 所有内容都 在一张宽阔的画布上展开 iPad 位于系统规格的中间层 融合了 iPhone 注重实用性的特点 与 Mac 的宽阔和深入 在这里 你需要学习 如何扩展你的设计 记住这些基础知识之后 我们来谈谈共享内容如何 让用户切实感受到 连贯性带来的美妙体验 还记得前面提到的空间整理示例吗？ 在这方面 连贯性至关重要 如果特意对内容进行分组 那么即使布局有所调整 分组到一起的内容 也应该始终在一起 请在不同设备上使用相同的符号 保持含义一致 并通过重复建立熟悉感 但是 并非每个操作 都能让用户一目了然 铅笔可能表示注释 勾号可能看起来像是确认 因此“选择”或“编辑”等操作 很容易被错误解读 如果没有明确的简略表达方式 文本标签始终是更好的选择

你刚才可能已经注意到了 条形栏现在更依赖符号而不是文本 整个平台上都出现了 这种转变 包括菜单 我们建议在菜单中填充 有助于识别的符号 当多个操作密切相关时 比如多种拷贝方式 不要重复使用图标 也不要对图标进行微调 只需使用一次符号来介绍这组功能 然后把其余介绍交给文字来完成 《人机界面指南》中的 “图标”页面也已更新 加入了常用操作首选字形列表 无论你是直接使用 SF Symbols 还是将这些符号映射到自己的系统中 以此作为起点对你都会很有帮助 为了实现跨设备连贯性 为了让结构组件能够扩展 你需要将平台变化形式 视为共同框架的表达方式 而不是例外情况

让结构组件在不同环境中正常工作 往往可以归结为两件事 结构组件的构建方式 以及它们的行为方式 首先定义共同的结构 和符号类似 组件布局的 各个部分也应该持久存在 并以用户熟悉的放置方式重复使用 在对边栏和表项目的操作中 你已经看到了这一点 我们对菜单也采用了类似的方法 macOS 上的弹出式菜单 和 iOS 上的上下文菜单 可能外观有所不同 但都包含 选择指示器、图标、标签和配件项 即使结构发生变化 行为也会填补空白 组件应该始终支持同一组核心交互 例如 标签页栏、分段控件 和边栏等组件 都以一致的行为方式 显示选择、导航和状态 提供相同的功能和反馈提示 无论形式如何 重点不仅仅在于融合多个平台 还在于让每个平台中的相关组件 更紧密地聚拢在一起 当这些组件实现行为互联并让用户 感受到这一点 一切都会水到渠成

以上就是设计系统中的 所有新内容 涵盖了视觉设计、 架构和组件 所有这些都 通过 Liquid Glass 连成一个整体 现在轮到你了 我们很高兴能够与你分享 Apple 设计的全新篇章 请探索《人机界面指南》 查看 Apple 设计资源提供的 全新 UI 套件 并开始在你的 App 中 将这些理念变为现实 感谢观看 再见！