材质是指在前景和背景元素间创建景深感、分层感和层次感的视觉效果。

材质有助于从视觉上将前景元素（如文本和控制）从背景元素（如内容和纯色）中分离出来。材质可让颜色从背景中穿透至前景，从而建立视觉层次以帮助用户更容易保持位置感。

Apple 平台有两种类型的材质：Liquid Glass 和标准材质。Liquid Glass 是 Apple 平台上用于统一设计语言的动态材质，可让你在呈现控制和导览的同时不遮挡底层内容。与 Liquid Glass 相反，标准材质则是在内容层内进行视觉区分。

1. Liquid Glass

Liquid Glass 为控制和导览元素（如标签页栏和边栏）构建了悬浮在内容层上方的独特功能层，从而在功能元素和内容之间建立明确的视觉层次。Liquid Glass 允许内容从这些元素下方滚动和透视出来，给界面营造一种动态感和景深感，与此同时保持控制和导览的易读性。

不要在内容层中使用 Liquid Glass。Liquid Glass 在交互元素和内容间形成明确区分时效果最好，将其包括在内容层中可能会导致不必要的复杂度，并在视觉层次上造成混乱。相反，请为内容层（如 App 背景）中的元素使用标准材质。内容层中带有瞬态交互元素（如滑块和开关）的控制例外；在这种情况下，元素会采用 Liquid Glass 外观以在用户将其激活时强调其交互性。

谨慎使用 Liquid Glass 效果。来自系统框架的标准组件会自动采用此材质的外观和行为。请谨慎为自定义控制应用 Liquid Glass 效果。Liquid Glass 力求将用户注意力引导至底层内容，在多个自定义控制中过度使用此材质可能会对该内容造成干扰，导致用户体验欠佳。仅将此类效果用于 App 中最重要的功能元素。

仅为视觉效果丰富的背景上所出现的组件使用透明的 Liquid Glass。Liquid Glass 提供 regular 和 clear 两种变体，供你在构建自定义组件或风格化某些系统组件时选取。

常规变体会模糊并调整背景内容的亮度，保持文本及其他前景元素的易读性。滚动边缘效果通过模糊并减少背景内容的不透明度进一步增强易读性。大多数系统组件都使用此变体。当背景内容可能会导致易读性问题或者当组件有大量文本（如提醒、边栏或弹出窗口）时使用常规变体。

透明变体的半透明度高，十分适合于优先考虑底层内容的可见性以及确保始终突显视觉效果丰富的背景元素。为悬浮于媒体背景（如照片和视频）的组件使用此变体，营造沉浸度更高的内容体验。

若要实现理想的对比度和易读性，请决定是否在使用透明 Liquid Glass 的组件下方添加暗层：

• 如果底层内容明亮，请考虑添加不透明度为 35% 的暗层。
• 如果底层内容足够暗，或者如果使用 AVKit 自带暗层的标准媒体播放控制，则无需应用暗层。

有关颜色使用的指南，请参阅 Liquid Glass 颜色。

2. 标准材质

使用标准材质和效果（如 blur、vibrancy 和 blending modes）为 Liquid Glass 下方的内容传达结构感。

基于语义和推荐用途选取材质和效果。避免基于给界面添加的外观颜色来选择材质或效果，因为系统设置可以更改其外观和行为。而应使材质或虚化样式匹配特定的用例。

通过在材质顶层使用虚化颜色来帮助确保易读性。使用系统定义的虚化颜色时，你无需担心颜色在不同环境中可能会太暗、太亮、太饱和或对比度太低的问题。无论选取哪种材质，均在材质之上使用虚化颜色。有关指南，请参阅系统颜色。

为融合模糊和虚化效果选取材质时应考虑对比度和视觉分离。例如，考虑：

• 较厚的材质更不透明，可为文本和其他包含精细特征的元素提供更好的对比度。
• 较薄的材质半透明效果更强，可通过显示有关背景内容的提醒来帮助用户记住环境。

3. 平台考量因素

3.1 iOS、iPadOS

除了 Liquid Glass 之外，iOS 和 iPadOS 会继续提供 ultra-thin、thin、regular（默认）和 thick 四种标准材质，供你在内容层中使用以帮助形成视觉差异。

iOS 和 iPadOS 还为标签、填充和分隔符定义了专门用于与各种材质搭配使用的虚化颜色。标签和填充均包含多个级别的虚化效果；分隔符只有一个级别。级别名称表示元素和背景之间的对比度相对量：默认级别的对比度最高，而四级（若有）的对比度最低。

除了四级，你还可以在任何材质上为标签使用以下虚化值。一般应避免在 thin 和 ultraThin 材质顶部使用四级，因为对比度过低。

• UIVibrancyEffectStyle.label （默认）
• UIVibrancyEffectStyle.secondaryLabel
• UIVibrancyEffectStyle.tertiaryLabel
• UIVibrancyEffectStyle.quaternaryLabel

你可以在所有材质上为填充使用以下虚化值。

• UIVibrancyEffectStyle.fill （默认）
• UIVibrancyEffectStyle.secondaryFill
• UIVibrancyEffectStyle.tertiaryFill

系统为 separator 提供了单个默认的虚化值，在所有材质上的效果都很理想。

3.2 macOS

macOS 提供了多种具有指定用途的标准材质且包含所有系统颜色的虚化版本。

选择何时允许在自定义视图和控制中使用虚化效果。系统视图和控制会根据配置和系统设置，使用虚化效果来使前景内容在任何背景上突出显示。在各种环境中测试你的界面，从而探索虚化效果何时可增强外观和改善交互。

选取与界面设计相辅相成的背景融合模式。macOS 定义了两种融合背景内容的模式：窗口后和窗口内。

3.3 Apple tvOS

在 Apple tvOS 中，Liquid Glass 在导览元素和系统体验（如推荐项目和控制中心）中随处可见。某些界面元素（如图像视图和按钮）会在获得焦点时采用 Liquid Glass。

除了 Liquid Glass 之外，Apple tvOS 会继续提供标准材质，可用于帮助定义内容层中的结构。标准材质的厚度会影响底层内容穿透显示的程度。例如，考虑按以下方式使用标准材质：

3.4 visionOS

在 visionOS 中，窗口通常使用系统定义、被称为玻璃的不可修改材质，通过让光线、当前环境、虚拟内容和用户四周的对象透过来帮助保持用户与现实世界的联系。玻璃是一种适应性材质，可限制背景颜色信息范围以便窗口可持续为 App 内容提供对比度，同时根据用户的现实环境和其他虚拟内容在颜色上变得更浅或更深

注：visionOS 没有专门的深色模式设置。相反，玻璃会自动适配对象的亮度和其后面的颜色。

避免在窗口中使用不透明的颜色。不透明度的区域会阻挡用户的视线，让他们感到受限并降低其对周围虚拟和实际对象的感知。

如有必要，请选取可协助形成视觉分离或表示 App 中交互性的材质。如果需要创建自定义组件，你可能需要为其指定系统材质。使用以下示例作为指导。

• thin 材质可让用户注意到按钮和所选项目等交互式元素。
• regular 材质可帮助你从视觉上分离 App 的各个部分，例如边栏或分组表格视图。
• thick 材质可让你创建一个深色元素，当它位于使用 regular 背景的区域之上时，仍能保持视觉上的独特性。

为了确保前景内容显示在材质之上时仍清晰可辨，visionOS 会将虚化效果应用到文本、符号和填充。虚化效果通过从虚拟和现实环境中往前提拉光线和颜色来增强深度感。

visionOS 定义了三个虚化效果值来帮助你传达文本、符号和填充的层级结构。

• 将 UIVibrancyEffectStyle.label 用于标准文本。
• 将 UIVibrancyEffectStyle.secondaryLabel 用于描述性文本，例如脚注和副标题。
• 将 UIVibrancyEffectStyle.tertiaryLabel 用于不活跃元素，且仅在文本对易读性要求不高时使用。

3.5 watchOS

使用材质在全屏幕模态视图中提供上下文。全屏幕模态视图在 watchOS 中很常见，因此由材质层提供的对比度可帮助用户在 App 中定位，并将控制和系统元素与其他内容区分开来。避免移除或替换模态表单中默认提供的材质背景。