美叶研学
美叶研学
最新主题
美叶研学美叶研学

2026 启航,以原理、方法、规范为基,构建一套面向未来、可持续升级的知识体系

美叶 © 2026京ICP备18053775号-2    京公网安备 11010502047597号
1. Liquid Glass2. 标准材质3. 平台考量因素3.1 iOS、iPadOS3.2 macOS3.3 Apple tvOS3.4 visionOS3.5 watchOS
规范指南

Apple HIG:材质(Materials)

2026年6月2日
Apple HIG
Apple HIG
苹果人机界面设计指南
已累计原创 20 篇文章查看全部

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

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

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 四种标准材质,供你在内容层中使用以帮助形成视觉差异。

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

有 0 人收藏了本文

为 Gemini 应用绘制插画体系
规范指南
为 Gemini 应用绘制插画体系
2026/6/15会员阅读
Material3设计规范:轮播(Carousel)
规范指南
Material3设计规范:轮播(Carousel)
2026/6/13会员阅读
Apple HIG:页面控制(Page controls)
规范指南
Apple HIG:页面控制(Page controls)
2026/6/11会员阅读
Apple HIG:提醒(Alerts)
规范指南
Apple HIG:提醒(Alerts)
2026/6/9会员阅读
Apple HIG:操作表单(Action sheets)
规范指南
Apple HIG:操作表单(Action sheets)
2026/6/8会员阅读
Apple HIG:进度指示符(Progress indicators)
规范指南
Apple HIG:进度指示符(Progress indicators)
2026/6/5会员阅读
Material3设计规范:开关(Switch)
控件规范指南
Material3设计规范:开关(Switch)
2026/6/5会员阅读
Material3设计规范:标签页(Tabs)
控件规范指南
Material3设计规范:标签页(Tabs)
2026/6/1会员阅读