玻璃效果：定义和最佳实践

Glassmorphism is a visual-design trend gaining popularity since 2020 and is prominent in Apple and Microsoft's design systems. Glassmorphic elements look like frosted glass. Thoughtful use of glassmorphism can help designers effectively establish visual hierarchy and depth. However, without a solid grasp of visual-design principles or if overused, glassmorphism can pose significant accessibility and usability challenges.

玻璃效果是一种自2020年以来越来越流行的视觉设计趋势，在苹果和微软的设计系统中非常突出。玻璃效果元素看起来像磨砂玻璃。巧妙地运用玻璃效果可以帮助设计师有效地建立视觉层次和深度。然而，如果没有牢固掌握视觉设计原则或过度使用，玻璃效果可能会带来重大的可访问性和可用性挑战。

What Is Glassmorphism?

什么是玻璃效果？

Glassmorphism is a visual-design style that utilizes different levels of translucency to create depth and contrast between foreground and background elements, mimicking frosted glass. 

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

Typically, glassmorphic UI elements stand out when placed in front of gradients or complex backgrounds to accentuate depth.

通常情况下，玻璃状的UI元素在放置在渐变或复杂的背景前会显得突出，以突出深度。

Two examples of glassmorphism from Apple’s SwiftUI design system:  iPadOS application folders (left) and MacOS notifications (right). Background elements are still visible but not easily identifiable.

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

Glassmorphism in Design Systems

设计系统中的玻璃效果

While “glassmorphism” is a commonly used term, design systems tend to label this style under the broader category of “material” since these elements replicate the look of physical material in a digital space. For instance, Microsoft’s Fluent Design System defines a material called “Acrylic,” which embodies the characteristics of glassmorphism.

虽然“玻璃效果”是一个常用的术语，但设计系统倾向于将这种风格归类为更广泛的“材料”类别，因为这些元素在数字空间中复制了物理材料的外观。例如，微软的流畅设计系统定义了一种名为“Acrylic”的材料，它体现了玻璃效果的特点。

Microsoft’s Fluent Design System defines Acrylic — a glassmorphic material.

微软的流畅设计系统定义了Acrylic——一种玻璃效果材料。

These design systems aim to create depth against complex backgrounds in order to emphasize or contain specific parts of an interface. In virtual- or mixed-reality spaces, glas...