Glassmorphism: 玻璃形态的定义和最佳实践

Glassmorphism 是一种 UI 设计趋势，它以半透明的界面组件为特色以创造深度

书卿
2024-06-11

本文是来自于尼尔森诺曼集团的体验设计专家-梅根·布朗所写的一篇文章《Glassmorphism: Definition and Best Practices》。在2024年的当下，不论是3D设计还是玻璃材质的视觉手法都已经变得相当普遍，但是对于很多新手设计师而言，如何用好这种流行趋势以及掌控好设计应用的边界性，依旧是一个值得探讨的问题，因此我们将本文进行翻译，以对当下的流行趋势进行一些研究。

前言

玻璃形态是一种视觉设计趋势，自 2020 年以来越来越受欢迎，在 Apple 和 Microsoft 的设计系统中占有重要地位。玻璃变形元件看起来像磨砂玻璃。深思熟虑地使用玻璃形态可以帮助设计师有效地建立视觉层次和深度。然而，如果没有对视觉设计原则的扎实掌握，或者如果过度使用，玻璃形态可能会带来重大的可访问性和可用性挑战。

什么是玻璃形态？

玻璃形态是一种视觉设计风格，它利用不同程度的半透明性在前景和背景元素之间创造深度和对比度，模仿磨砂玻璃。

通常，玻璃变形 UI 元素在放置在渐变或复杂背景前面以突出深度时会脱颖而出。

*Apple SwiftUI 设计系统中的两个玻璃形态示例：iPadOS 应用程序文件夹（左）和 MacOS 通知（右）。背景元素仍然可见，但不容易识别。*

设计系统中的玻璃形态

虽然“玻璃形态”是一个常用的术语，但设计系统倾向于将这种风格标记为更广泛的“材料”类别，因为这些元素复制了数字空间中物理材料的外观。例如，Microsoft的Fluent Design System定义了一种称为“亚克力”的材料，它体现了玻璃形态的特征。

*Microsoft的Fluent Design System定义了亚克力 – 一种玻璃晶形材料。*

这些设计系统旨在在复杂的背景上创造深度，以强调或包含界面的特定部分。在虚拟现实或混合现实空间中，玻璃形态元素通过为在标准屏幕上可能看起来是二维的对象提供纹理来帮助保持 3D 体验。例如，Apple Vision Pro 在半透明 UI 叠加层中使用玻璃形态 SwiftUI 材质，以有效地模糊其背后的虚拟现实环境，同时保持其可感知性。

*Glassmorphism 用于 Apple Vision Pro 界面。（图片来源：https://developer.apple.com/design/human-interface-guidelines/windows）*

玻璃形态的特征

玻璃形态的半透明性有两个主要特征：不透明度和背景模糊。为了实现玻璃变形效果，设计人员可以改变组件的不透明度和背景模糊度，以影响可见和可区分的背景信息量。如果玻璃变形元素将放置在复杂和简单的背景上，设计师还可以选择使用笔触和渐变来增加深度和对比度。

不透明度

为了获得玻璃变形的外观，您需要能够看穿您正在设计的元素。您可以通过调整组件填充（对象内部的颜色、图案或渐变）的不透明度来实现此目的。

不透明度定义了通过元素可以看到的程度。元素越不透明，你就越看不到它背后的内容。不透明度越低，你看到的就越多。例如，您家中的玻璃窗可能具有 0% 的不透明度，这意味着您可以清楚地看到外面的一切。

背景模糊

背景模糊会扭曲主组件后面的对象，使背景元素呈现模糊、失焦的外观。物理世界中背景模糊的例子是带磨砂玻璃门的步入式淋浴间或带隐私玻璃的会议室。您仍然可以看到另一侧的物体，但它们模糊到您可能无法识别的程度。

背景模糊为低不透明度数字元素提供相同的效果。例如，不透明度为 30% 且模糊为 25 像素的白色矩形会扭曲背景元素，但仍具有一些可区分的边缘。但是，通过将模糊调整为 100 像素，这些相同的背景元素会变得更加失焦并混合在一起。

描边和渐变

除了不透明度和背景模糊之外，描边（边框）和渐变还可以强调玻璃形元素的深度，尤其是当这些元素放置在简单或单色背景上时。

渐变采用两种或多种颜色、色深或颜色不透明度，并将它们无缝地混合在一起。渐变可以应用于元素的填充和描边。您可以在组件周围添加低不透明度或渐变描边，以创建厚度错觉。渐变也可以应用于组件的填充物，以模拟光在实际玻璃上的反射。

*向具有实心填充的元素添加简单的低不透明度描边可以产生厚度错觉。要更进一步，请同时使用渐变描边和渐变填充在单色背景上创建深度。*

使用玻璃形态进行设计：最佳实践

在UI中加入类似玻璃的材质时，必须了解半透明组件的可访问性限制。玻璃形态最重要的问题之一源于文本的可读性问题，文本要么太亮或太暗，要么背景太忙。在将类玻璃材料纳入设计系统时，请遵循以下三种最佳实践

满足对比度要求

确保文本和图形元素满足对比度要求。 由于玻璃晶形组件是半透明的，因此文本元素可能会落在多种颜色上，从而影响可读性。例如，如果您在繁忙的背景上设计卡片组件，则文本可能仅在某些区域具有足够的对比度，并且难以阅读。如果你在 Figma 中设计，我建议你看看 Willowtree 的插件 Contrast，它可以让你快速检查文本和其他设计元素的对比度。

WillowTree 的 Contrast 插件允许设计师从渐变或复杂背景中采样颜色，以检查对比度的可访问性。

模糊程度越高越好

背景模糊越多越好，尤其是对于复杂的背景（例如，视频、摄影、动画）。Behance 或 Dribble 上的许多 UI 设计都过于努力地保持背景元素的可区分性。但是，压倒性的背景会使用户难以专注于有意义的内容并影响文本的可读性。

低半透明度降低了文本对比度，使这个原型的背景过于分散注意力。

在组件可能出现在各种上下文中（例如网站上的叠加层或桌面应用程序上的上下文菜单）的情况下，背景模糊必须考虑项目可能出现的许多可能背景。例如，下面的上下文菜单使用出现在复杂图像上的 Microsoft 丙烯酸材料。

*使用 Microsoft Fluent Design System 中的高模糊亚克力材质的上下文菜单考虑了许多可能的桌面背景，并强调与菜单交互的任务。*

另一方面，如果您可以控制半透明组件后面显示的内容，请选择简单或单色背景。

允许用户调整透明度

如果可行，请为用户提供控制对比度或透明度设置的选项。例如，Apple 的辅助功能允许用户降低透明度或增加对比度，从而最大限度地减少或完全消除玻璃变形组件的模糊。这些选项使界面能够适应低视力用户。

增加与 Apple 辅助功能的对比度会用纯色替换任何玻璃形组件。

如果您的预算或时间限制不允许进行此类自定义，请确保界面中的任何玻璃形态元素都符合 WCAG 标准。

结论

总体而言，玻璃形态在谨慎使用以创造深度错觉时效果最好。考虑使用已经建立的设计系统，如 Apple 的 SwfitUI，以避免从头开始创建玻璃变形材料的任何潜在问题。否则，请注意半透明组件如何受到背景元素的影响，同时保持视觉层次结构和辅助功能要求。