了解 Liquid Glass

Liquid Glass 是对 Apple 软件 外观和风格的一次重大改进和革新 它将一种灵活的动态层 引入整个 Apple 产品生态系统的 App 和系统体验 它基于界面设计经验打造而成 借鉴了 MacOS X 的 Aqua 用户界面 iOS 7 的实时模糊效果 iPhone X 的流畅性 灵动岛的灵活多用 以及 visionOS 的沉浸式界面 通过借鉴这些经验 而不是试图重新创建 一种来自现实世界的材质 我们带来了 Liquid Glass 这种新型的数字超材质 它能动态地折射和塑造光线 同时能以一种如同轻质液体的感觉 呈现一种自然的动态效果 对于触摸的流动性和现代 App 的 动态交互性都能做出响应

我叫 Chan 是 Apple Human Interface 设计团队一名的设计师 在这个讲座中 我们将讨论 Liquid Glass 的一些核心动态属性 随后 我的同事 Shubham 将讨论 Liquid Glass 如何 自动适应不同的情境和环境 最后 Bruno 将带我们了解 使用 Liquid Glass 的 一些主要原则 我们这就开始吧 随着设备屏幕变得 更加圆润 更具沉浸感 Liquid Glass 深化了 Apple 产品设计的演进 它以一种圆润、悬浮式的样式 呈现在 UI 中 完美契合现代设备的圆弧曲线 这些清晰界定的形状 让人感觉触手可及 并被设计为契合手指的自然几何形状 因此用户在触摸交互时 会感觉好用好操作 Liquid Glass 在视觉上 呈现的主要方式 是通过一种名为透镜的效果 在对自然世界的体验中 我们经常在身边看到透镜效果 通过这种体验 我们都能直观地了解到 透明物体对光线的 折射弯曲以何种方式 向我们展示它的存在、 动态表现和形态

Liquid Glass 利用这些能凭直觉 捕捉到的视觉线索实现了视觉分离 并以一种全新的方式 呈现分层效果 同时让下层内容也能出色呈现 不同于之前会让光线形成散射的材质 这套全新材质能够实时 动态地折射、塑造和聚集光线 这就界定了背景内容的呈现 同时又仍然符合自然世界的视觉经验 通过以这种方式塑刻光线 控件会显得格外轻巧透明 但同时在视觉上仍可辨认

Liquid Glass 对象不是 通过淡入淡出来显形和消失 而是通过逐渐改变 光线折射和透射 确保形成一种 保留材质光学完整性的优雅过渡

材质给人的感觉及其动态表现 与它的外观一样重要 从一开始 Liquid Glass 的视觉效果 和动态表现就是作为整体设计的 液体的动态是人人都曾直观感受过的 那种顺畅灵敏、毫不费力的动态表现 正是我们借以让界面以符合 我们对现实世界固有理解的方式 呈现动态和作出反应的属性

为了实现这种效果 Liquid Glass 会通过 即时倒映和加强光线 来回应交互 这让人感觉界面响应迅速 尽如人意且生动出彩 它还有一种固有的凝胶弹性 在随着你的交互连续动作时 会呈现出一种瞬态 和可塑的自然状态 这种流动性为界面赋予了一种 与人的思考及动作的 连续无常相契合的风格

元素甚至可以升起并暂时呈现 Liquid Glass 效果 比如当你与组件互动时 这让休息状态在视觉上保持静态 而在触摸时变得生动 这种效果用于呈现 控件等元素时尤其出色 因为用户可以透过 透明的液体透镜 精确观察到它下方的值

这种流畅感 不仅会延展到材质 对输入作出反应的方式中 还会体现在它对现代 App 动态变化的环境反应的方式中 当你在一款 App 的 不同状态间切换时 Liquid Glass 会在各个情景中 动态地改变控件形状 这保持了将控件置于 单个悬浮平面的 设计理念 这让 App 不同部分之间的过渡 随着控件的不断变形 显得流畅丝滑 在展示菜单时 气泡会直接展开 显示其中包含的内容 这种简洁的连贯过渡让所有内容 呈现在你刚点按的地方 揭示了按钮及其包含的内容之间 非常清晰和直接的关系 借助这些属性 Liquid Glass 开启了 App 外观的新时代 同时也改变了 App 带给人的感受 凭借以全新方式 折射和塑造光线的能力 结合动态反射和形状变化 Liquid Glass 的设计 让 App 的使用体验 更加流畅自然和引人入胜

接下来 为了帮助你深入了解 Liquid Glass 如何 自动适应不同情境和平台 有请 Shubham 来为大家讲解 Chan 谢谢你 Liquid Glass 从一开始 就设计为能够 适应尺寸和环境变化 主要目的是在视觉上保持透明 将用户注意力转移到下方的内容上 但它也在不断进行微妙变化 以确保清晰可辨 并与内容层保持清晰的视觉分离 Liquid Glass 由多个分层组成 这些分层共同作用 形成它的独特外观 不同于以往使用固定的 浅色或深色外观的材质 它的每个分层都会根据 下方的内容不断调整

当文本在它下方滚动时 阴影会变得更明显 以产生进一步的视觉分离

着色量和动态范围也会变化 始终确保按钮清晰可辨 同时尽可能透视更多内容 必要时它还可以单独切换着色深浅 无论在哪种环境中都 给人一种浑然天成的感觉 出色地呈现 App 内容 当玻璃反射和变为更大的形状时 例如从工具栏按钮中呈现菜单时 它的材质特征会变化 以模拟一种更厚重结实的材质 它会投下颜色更深、细节更多的阴影 呈现更多透镜和折射效果 以及更柔和的光线散射 这些微妙的变化会强化感知的景深 并改善玻璃元素本身内容的可读性 Liquid Glass 对于 在所有 Apple 平台打造 统一设计语言至关重要 在 iPad 和 Mac 上 我们遵循完全相同的原则 与 iPhone 上一样 这些 Liquid Glass 层会构成 独特的控件和导航功能层 悬浮在最上层 为你的内容提供更大、更广阔的画布

玻璃控件完美嵌套在窗口的圆角中 在整个用户界面中保持同心度 对于边栏等较大的元素 Liquid Glass 的外观 会受到 App 内周围环境的影响

旁边彩色内容的光线 会隐约溢出到元素表面 强化材质的背景 及其在界面中的高度感 这种效果不仅限于材质表面 光线还会反射、散射和渗入到阴影中 就像在现实世界中一样 iPad 和 Mac 上的悬浮式边栏 将沉浸感提升到全新高度

边栏和标签栏共同形成一种 连贯一致的设计语言 适合用于各种平台的 App 核心导航 如今你可将它视为 一个单独的导航元素 会随着 App 画布空间增大 流畅扩大尺寸 接下来 我们来谈谈滚动边缘效果

滚动边缘效果 与 Liquid Glass 协同工作 以保持 UI 层和内容层之间 重要的视觉分离并确保清晰可辨 尤其是动态滚动内容的可读性 与 Liquid Glass 一样 滚动边缘效果本身可自动调整 当内容滚动到玻璃元素下方时 这个效果会将内容柔和地融入背景 从视觉上让玻璃效果 出现在滚动内容上方 并让标题等悬浮元素始终保持清晰

当深色内容滚动到下方时 触发玻璃效果本身变为深色风格 这种效果会智能地切换 以稍将亮度调暗 同样也是为了确保对比度和可辨度 在某些情况下 例如当工具栏下 有固定的补充视图时 比如列标题 我们会采用一种“硬风格”效果

不同于渐变效果 这种效果会均匀覆盖工具栏 以及固定补充视图的整个高度 如果你需要在补充视图中的悬浮元素 与下方的滚动内容之间 进行额外程度的视觉分离 则应当使用这种风格 以上就是关于 Liquid Glass 如何适应各种尺寸、环境和平台 以及如何将它 与滚动边缘效果搭配使用 以确保清晰度和可辨性 同时让 App 的内容 真正成为屏幕中的焦点 接下来 有请 Bruno 为我们 更深入地介绍 Liquid Glass 变体 以及如何在 App 中 充分利用这些变体的准则 Shubham 谢谢你 要充分利用 Liquid Glass 我们务必更深入地了解它 这一点至关重要 让我们来了解一下它的构建方式 以及它的一些行为 这样 当你开始用它设计时 你就会知道会带来怎样的体验

Liquid Glass 真正奇妙之处 在于其整体性的设计 光线变幻、景深效果、自适应变化 都不是相互独立的功能 而是一个复杂系统中的不同分层 协同工作以创建一种 大于其部分总和的材质 让我们更详细地了解其中的一些分层 首先是强光层

在所处的环境中 Liquid Glass 会呈现与现实世界中一样的动态表现 在这个环境中 光源会照射到材质上 如你预期的那样 产生与几何图形相应的强光效果 与设备交互时 例如锁定或解锁 iPhone 时 这些光线会在空间中传播 因此光线会沿材质边缘 呈现并形成轮廓 在某些情况下 光照会响应设备运动 让 Liquid Glass 呈现出 在现实世界中会呈现的效果

阴影同样也发挥着重要的作用 帮助元素呈现有真实感 且轮廓分明的效果 仔细观察下一张幻灯片中的阴影

元素会检测到下层的内容 并会在下层显示文字时 增加阴影的不透明度 而在下层显示纯色背景时 则会降低阴影的不透明度 这会带来与内容的视觉分离 确保始终可以轻松辨识元素

当你与 Liquid Glass 交互时 材质会从内部发光 形成一种反馈形式

从指尖接触元素的地方开始 光晕会蔓延到整个元素 以及附近的 任何 Liquid Glass 元素上 以自然流畅的方式 与材质的弹性属性交互

这些行为让界面鲜活灵动 直接响应现实世界和设备输入 有时多个分层会一起自动调整 确保在 UI 层次结构中 保持清晰和突出重点

例如 当窗口在 Mac 或 iPad 上 不再是重点时 Liquid Glass 会改变它的外观 在视觉上消隐以引导注意力

这种复杂性是内在的 在将 Liquid Glass 应用到设计中时 你将自动实现这些细致的动态效果 我已经介绍了它的结构和行为 接下来我将谈谈使用 Liquid Glass 的方式和时机 以及可供你选择的不同变体 你可能忍不住 想在各处都使用 Liquid Glass 但实际上它最适合用于 悬浮在 App 内容上方的导航层 以这个表格视图为例： 使用 Liquid Glass 效果会让它 与其他元素形成竞争并混淆层次结构 因此应将其用于内容层 以确保清晰度 同样 应始终避免重叠使用玻璃效果 叠放多个 Liquid Glass 元素 会立即让界面显得杂乱 令人困惑 将元素放在 Liquid Glass 上时 应避免将材质同时用于两层 而应该对上层元素使用 填充、透明度和虚化效果 让它们感觉如同是薄薄的覆盖层 仿佛材质的一部分 接下来 我们来谈谈 Liquid Glass 的变体 有两种可选： 常规变体和透明变体 绝不要混淆使用 因为它们都有 各自的特征和特定的使用情形 常规变体的用途最广 也是开发者用得最多的 这种变体为你提供前面提到的 所有视觉效果和自适应效果 无论在何种环境中 都能确保清晰可辨 它适用于任何尺寸 可置于任何 内容上层 并且可以添加任何内容 而透明变体则没有适应性行为 它始终呈现更加透明的效果 使得下方内容的丰富细节 能够穿透呈现 并与玻璃效果优雅互动 为了确保符号或标签清晰可辨 它需要一个调暗层 来将下层内容加深 否则可辨性会显著降低 如果你的 App 中的 Liquid Glass 元素占用空间较少 你可以使用局部调暗 让内容保留更多原始虚化效果

总结一下 常规变体适用于任何位置 而透明变体只能在满足 以下 3 个条件时使用 首先 你应用的元素 置于媒体丰富内容上层 其次 引入调暗层 不会对你的内容层 产生负面影响 最后 变体上的内容应该明亮显眼 现在我要谈谈可辨性： 这是 Liquid Glass 设计的 核心考量因素之一

导航栏和标签栏等小元素 会根据下层的内容不断调整外观 还会根据背景由浅变深 确保材质尽可能呈现最佳效果 且容易辨识

而诸如菜单或边栏等较大的元素 也会根据环境调整 但不会由浅变深 它们的表面积太大 这样的转变会让人分散注意力 为了保持清晰可辨 Liquid Glass 上面的 符号和字形也会自动调整 会由浅变深或由深变浅 呈现与玻璃对应的动态效果 形成最强烈的对比效果 置于常规变体上的所有内容 都会自动进行这种处理 你也可以利用自定义颜色 但是要有选择性地使用 如果项目或元素具有独特的功能目的 你可以为它们上色 引导用户关注它们 我们来仔细看看具体如何操作

Liquid Glass 引入了 一种为元素着色的新方法 不仅遵循材质的原则 而且最大限度地提升可辨度

这种技术在所有 Liquid Glass 元素中都是一致的 无论是标签、文本、完全着色的按钮 还是锁定屏幕上的时间 它为材质带来了生动活力 并加深材质与周围内容的联系

选择一种颜色会生成一系列色调 这些色调会与已着色元素下层 内容的亮度相对应 它从彩色玻璃的 现实呈现效果中汲取灵感： 根据背后的内容 改变色相、亮度和饱和度 但又不会过分偏离预期的颜色

这不仅凸显了材质的物质性 还有助于增强可辨性和对比度

值得称道的是 着色与玻璃效果的 所有动态表现原生兼容 因此你可以轻松地为任何元素上色

这个按钮使用纯色填充而非内建着色 正如你所看到的 它完全不透明 打破了 Liquid Glass 的视觉特征 但请注意 当它开始使用新的着色 突然间 它就能在环境中呈现出 更透明、更真实的质感

着色只能用于强调 UI 中的主要元素和操作 首先 让我们用示例 来了解应该避免的做法 避免为所有元素上色 如果都着色 就没有真正亮眼的元素 而且可能会令人困惑 如果想将颜色融入 App 中 请在内容层使用颜色 另一方面 这个“查看购物袋”按钮 示例有力说明了使用着色的时机 红色按钮让这个送餐 App 的 主要操作脱颖而出 内容层也是避免 任何不必要的视觉噪音的关键 在稳定状态中 如 App 刚刚发布时 应避免内容和 Liquid Glass 相交 相反 应调整内容的位置或尺寸 以保持两者分离

除了这些可辨性方面的考量 Liquid Glass 还提供了一些辅助功能 以满足不同用户和需求

这些功能可以进一步优化材质 在不影响性能的情况下 改变 Liquid Glass 某些分层

例如 降低的透明度会 加强 Liquid Glass 的磨砂质感 进一步模糊下层内容 提高对比度会使元素以黑白色调为主 并用对比鲜明的边框突出元素 减少动态表现可降低某些效果的强度 并停用材质的弹性属性 当你使用新材质时 就能自动获得所有这些功能 因此在系统级别打开这些设置后 Liquid Glass 元素就可以 在整个系统中实现这些效果 在这个讲座中 我们介绍了 Liquid Glass 的核心原则和价值观 探索了它的功能、动态效果 并讨论了 有效且具有包容性地 使用它的实用准则

Liquid Glass 在所有平台上 提供了一种统一的设计语言 无缝融合了硬件和软件 它实现了比以往更流畅 更动态的互动体验 为界面的各个部分带来 引人注目的新外观 它翻开了 Apple 视觉和互动设计的新篇章 非常期待大家参与其中