翻遍全网资料 ，用5个章节帮你深入读懂液态玻璃设计
自从苹果发布了他们近些年来最重大的全网视觉风格更新，以苹果的资料章节影响力 ，已经带动了一波设计趋势 ，帮深全球的入读设计师都在用液态设计作品。在设计平台和开发者平台上 ，懂液都已经有了很多设计作品和开发工程 ，态玻大家都在模仿学习以及实现 。璃设
Dribbble
Behance
液态玻璃已然成为未来 10 年最重大的资料章节设计趋势 ，所以最近一周以来 ，帮深我对它进行了比较深入的入读研究 ，我把苹果官网 ，懂液Medium，态玻Behance ，Dribbble ，优设之类的资料基本上都拿来研究学习 。
现在 ，我越来越觉得这套设计真的还不错 ，苹果依然是引领设计趋势的那个老大哥 。所以 ，我想把我学习的笔记跟大家进行分享 ，不敢说多深入，毕竟还没有广泛被应用 ，但开始学习就是理解它的第一步。
一 、Liquild Glass 的设计理念
其实 Liquid Glass 是苹果设计理念的一种延续 ，并非简单为了视觉效果而炫技 ，它为苹果生态系统中的应用和系统体验 ，引入了一个灵活 、动态的设计表达 。
Liquid Glass 是苹果继扁平化、拟物化和空间玻璃之后 ，推出的全新一代设计哲学 。它不仅仅是一种视觉风格 ，更是一套完整的 、以物理光线和流体动力学为基础的交互体验框架 。其核心在于模拟光线穿透不同密度 、形态的玻璃介质时产生的折射 、反射和焦散效果 ，并赋予界面元素以“液态”的流动性和响应性，创造出既清晰直观又富有生命力的沉浸式体验 。
这套设计语言旨在模糊物理世界与数字世界的边界 ，让用户感觉自己不是在“操作”界面 ，而是在与一个有质感 、有回应的“材质”进行互动 。
设计上的延续性是从 Mac OS X 的 Aqua 用户界面开始的，
到 iOS 7 的实时模糊效果
到 iPhone X 的流畅性
再到灵动岛的灵活性
再到 visionOS 的沉浸式界面 。
在苹果所理解的设计中 ，延续性不只是简单的设计符号和质感延续 ，它的延续包括了动态 、效果、感受等等，都可以是设计的延续和融合 。
苹果基于这些经验 ，创造出了 Liquid Glass 这种全新的材质 ，能够动态地弯曲和塑造光线 。同时 ，它的行为和移动方式都非常有机 ，感觉更像一种轻盈的液体 ，既能回应触控的流畅性 ，也能适应应用的动态性。
二 、Liquid Glass 的核心动态特性
苹果的 ID 和屏幕现在越来越圆润 ，Liquid Glass 正好适合这种产品设计的演进 。清晰定义的形状让人感觉容易点击 ，其设计也参考了我们手指的自然几何形态 ，因此在触控和交互时感觉非常友好 。
Liquid Glass 在视觉上利用了一种叫做“透镜效果”(lensing) 的技术 。透镜效果在我们自然世界中无处不在。通过对真实现象的观察 ，把这种材质该如何扭曲光线来传达其运动和形态 ，有了一种直观的理解 。
Liquid Glass 利用这些自然的视觉线索 ，设计出了这种全新的材质，让内容有更好的层次 ，同时让底层的內容能够穿透显示 。过去的材质是反射光线 ，而这套新材质则能实时动态地弯曲 、塑造和集中光线 。让控件在界面上具备清晰的轮廓 ，同时在视觉上又保持我们对自然世界的一致体验 。通过这种方式利用光线 ，控件变得轻盈和透明 ，同时仍保持视觉上的可辨识度 。
虽然当前在某些复杂背景上还有些可读性问题，但都是有办法优化的 ，只要有解决方案 ，那么就不是什么大问题 。
Liquid Glass 在动效上不是像以前淡入淡出的方式 ，而是通过逐渐调节光线的弯曲和透镜效果来显现和消失 ，确保了平滑的过渡，并保持了材质的光学完整性 。模拟了最真实的方式，让用户感受到自然 。
材质的感觉和行为与它的外观同等重要 ，Liquid Glass 的视觉效果和动态效果要做到一致性设计 。我们都对液体的运动有着直观的感受 。它们平滑 、灵敏且毫不费力的运动和行为 ，是 UI 可以参考的特性 ，使其移动和反应的方式与我们对物理世界的内在理解相符 。为此 ，Liquid Glass 通过立即弯曲并用光影变化给予操作反馈 。这使得界面感觉灵敏且充满生机。它还具有一种内在的凝胶般的柔韧性 ，当它随着你的交互同步移动时 ，能感觉到控件也像凝胶一样可变和 Q 弹 。
这种流动性帮助界面感觉与我们思维和运动的动态性及不断变化的特性保持一致。当你在应用的不同状态之间切换时，Liquid Glass 会在每个控件之间动态变形 。这体现了所有控件都存在于一个单一悬浮平面上的概念 。当控件不断地形态变换时，它让应用不同部分之间的过渡感觉流畅且无缝 。
当显示菜单时 ，气泡会“弹开”以显示其中的内容 。这种轻盈的原地过渡效果将一切都保持在你刚点击的位置，并且在按钮和其包含的内容之间传达了一种非常清晰和直接的关系。凭借这些特性 ，Liquid Glass 以全新方式弯曲和塑造光线的能力，再融合动态弯曲和形态变换的能力，让应用的体验从根本上感觉更有机 、更沉浸 、更流畅。
总结它的新特性主要包括 4 个 ：
1）清晰性 (Clarity)：尽管拥有丰富的视觉效果 ，但信息传达的清晰度永远是第一位的。Liquid Glass 通过动态对比度 、智能景深和内容感知模糊 ，确保在任何背景下 ，文本和关键控件都清晰易读 。
2）维度感 (Dimensionality) ：界面不再是平面的层叠 ，而是一个具有真实深度（Z 轴）的空间。元素之间通过光影 、视差和材质厚度来区分层次 ，创造出可信的空间关系 。
3）流动性 (Fluidity) ：所有的过渡 、动画和响应都遵循流体动力学。元素在拖拽时会产生“粘滞感” ，边界会因“表面张力”而呈现柔和的动态变化 ，动画的缓动曲线模拟液体流动的物理特性 。
4）响应性 (Responsiveness) ：界面会对用户的输入、环境光乃至设备的姿态做出实时反应 。不仅包括触摸反馈 ，还包括光标或手指悬停时产生的“光晕”和背景折射变化 ，以及倾斜设备时高光的动态漂移 。
三 、Liquid Glass 如何自动适应不同的环境
为了更好的适应不同内容背景 ，Liquid Glass 由多个层级构成 ，与以往具有固定浅色或深色外观的材质不同 ，它的每一层都会根据背后的内容不断适应，苹果官方说的是智能自适应。
当文字在下方滚动时 ，阴影会变得更加突出 ，这样层级会更清晰 。色调和动态范围的程度会变化，兼容深色和浅色 ，这样做是要确保按钮保持清晰可读，同时让尽可能多的内容穿透显示。
当控件弯曲并变形成更大的尺寸时 ，例如从工具栏按钮弹出菜单 ，它的材质特性会发生变化 ，以模拟一种更厚 、更具实质感的材料 。
它会投下更深、更柔和的阴影，具有更显著的透镜和折射效果 ，以及更柔和的光线散射 。这些细微的变化增强了感官上的深度 ，并有助于提高玻璃元素内内容的可读性。
在像侧边栏这样较大的元素上，Liquid Glass 的外观会受到应用内周遭环境的影响 。来自附近彩色内容的光线会反射在 UI 表面上，从而强化了材质的情境感及其在界面中的悬浮感 。而且这种效果不仅限于表面 ，光线也会反射 、散射并渗入阴影中 ，就像在物理世界中一样。它可以被视为一个单一的导航元素 ，随着应用画布的变化而流畅地缩放 。
滚动边缘效果与 Liquid Glass 能产生不错的效果 ，让 UI 和内容之间有比较好的层次，确保可读性 ，尤其是在动态滚动内容时 。就像 Liquid Glass 一样 ，滚动边缘效果本身就是自适应的 。当内容开始在玻璃元素下方滚动时 ，该效果会轻柔地将内容融入背景 ，从视觉上将玻璃提升到移动的内容之上 ，并让像标题这样的悬浮元素始终保持清晰。
当较暗的内容在下方滚动 ，触发玻璃本身转换为其深色样式时 ，该效果会智能地切换 ，改为应用一层微妙的调暗效果 ，同样是为了确保对比度和可读性。
当需要附属视图中的悬浮元素与下方滚动内容之间有更强的视觉分离时 ，使用硬切会更合适使用 。例如当工具栏下方有固定的附属视图（如栏目标题）时 ，它不是逐渐淡出，而是在工具栏和固定附属视图的高度上均匀地应用效果 。
四 、使用 Liquid Glass 的一些关键原则
要想利用好 Liquid Glass，充分了解使用原则很关键 。
Liquid Glass 的真正强的地方在于其整体的设计。光影效果 、深度效果 、自适应变化 ，这些都不是孤立的功能 。它们是复杂系统中的层级，共同作用 ，创造出一种“1+1>2”的材质。
1）高光层
Liquid Glass 模拟了现实世界中的环境 ，当环境中的光源照射在材质上 ，产生的高光会像你预期的那样 ，对几何形状做出反应。
在锁屏界面交互中 ，光源会在空间中移动 ，导致光线围绕着材质移动，从而定义其轮廓 。让人感觉 Liquid Glass 能够感知其在现实世界中的位置 ，利用阴影能够更好的体现元素轮廓和层级 。
2）阴影层
控件元素能够感知其背后的内容。当它位于文字上方时 ，会增加其阴影的不透明度 。相反 ，当它位于纯色浅色背景上时 ，则会降低其阴影的不透明度。这这样做能确保元素总是容易被看到 。当你与 Liquid Glass 交互时 ，材质会从内部发光，作为一种反馈形式 。
光晕从你的指尖下开始，扩散到整个元素，并延伸到附近的任何 Liquid Glass 元素上 ，以一种感觉自然流畅的方式与材质的柔性特性交互 。有时，多个层级会一起适应 ，以在 UI 层级结构中保持清晰度和焦点 。
例如 ，当一个窗口在 Mac 或 iPad 上失去焦点时 ，Liquid Glass 会改变其外观 ，并在视觉上后退，以引导注意力 。
苹果把这种复杂性设计做了内置 ，我们在设计的时候直接拿来用就可以了 。把复杂的机制封装好，一方面是方便用户调用，另一方面也是为了维系整个系统设计的一致性 ，避免暴露太多参数给用户随意修改而带来的不统一。
避免“玻璃叠玻璃” 。将 Liquid Glass 元素堆叠在一起 ，会很快让界面变得杂乱和混淆 。当将元素放置在 Liquid Glass 之上时 ，避免对两个层都应用该材质 。相反 ，对顶层元素使用填充 、透明度和鲜艳度 ，让它们感觉像是材质一部分的薄薄覆盖层 。
Liquild glass 有 2 种样式可以选择使用 ：常规（Regular）和透明（Clear） 。它们不能混合使用 ，因为它们各自有不同的特性和特定的使用场景 。常规型是最通用的 ，也是使用最多的 。
而透明型则更为透明，用于富媒体内容（如视频播放控件） ，能更好地展示背景 。但它没有自适应行为 ，需要一个深色遮罩层 (Dimming Layer) 來确保其上符号的可读性 。
总结一下 ，常规型可以在任何地方使用，而透明型只应在满足以下三个条件时使用 ：
- 应用它的元素位于富媒体内容之上
- 内容层不会因为引入调暗层而受到负面影响
- 位于它上方的內容是粗体且明亮的
五、Liquid Glass 的可读性
像导航栏和标签页栏这样的小元素 ，会根据其背后的内容不断调整其外观。它们也会根据背景在浅色和深色之间翻转 ，以确保材质在看起来最好的同时 ，也易于辨识 。但像菜单或侧边栏这样较大的元素也会根据情境进行调整，但它们不会在浅色和深色之间翻转 。它们的表面积太大了 ，这样的过渡会让人分心 。
为了保持可读性，Liquid Glass 上的符号和图标也会做同样的事情 。它们在浅色和深色之间翻转 ，反之亦然 ，模仿玻璃的行为以最大化对比度 。你也可以使用自定义颜色，但要有选择地使用。
当项目或元素具有独特的功能性目的时 ，你可以为它们加上颜色 ，以引起注意 。选择一种颜色会生成一系列色调，这些色调会对应到着色元素下方内容的亮度 。它的灵感来自于有色玻璃在现实中的运作方式 ，根据背后的内容改变其色相 、亮度和饱和度 ，而不会过多偏离预期的颜色 。
着色只应用于强调 UI 中的主要元素和操作 。避免为所有元素都着色 。当每个元素都被着色时 ，就没有什么能脱颖而出 ，而且可能会令人困惑。
另一方面 ，内容层也是避免任何不必要视觉噪音的关键 。例如当应用首次启动时 ，应避免内容与 Liquid Glass 之间出现交集 。
除了这些可读性考量 ，Liquid Glass 还提供了几种辅助功能 ，以适应各种人群和需求 。这些功能作为材质的修饰符 ，改变了 Liquid Glass 的某些层级 ，而不会牺牲其材质特性 。例如 ，“降低透明度”使 Liquid Glass 变得更模糊 ，遮挡了更多背后的内容 。“增强对比度”使元素主要变为黑色或白色 ，并用对比鲜明的边框来突显它们 。而“减弱动态效果”则降低了某些效果的强度 ，并禁用了材质的任何弹性特性 。
在一些特殊情况下，也考虑为材质做一些降级和特殊处理 ，其目的是为了更好的服务更多人 ，而不是死板的应用一致性 ，因为这些拓展性是为了照顾到一些小众场景 ，所以并没有特别影响大部分情况下的一致性设计。
最后
周末的时候 ，我一边研究苹果的这些规范 ，一边在想苹果这是要把手机界面变“活”啊 ！以后我们点的不再是普通按钮，而是一个个 Q 弹 、会流动的“小水珠” ，每次触摸都有了更自然的感觉。这波设计浪潮 ，估计又要火个十年了。作为设计师的我们，又有好几年可以“卷”了 ，赶紧收藏学起来吧！
作者：彩云Sky
