材质效果

975人在学·0条笔记
收藏

材质(Material)是一种视觉特效,能在前景与背景元素之间营造出深度感、分层效果和层级结构。
材质通过视觉分离技术区分前景元素(如文本、控件)与背景元素(如内容、纯色)。其半透明特性允许背景色彩向前景渗透,构建出清晰的视觉层级,帮助用户保持空间定位感。
苹果平台提供两类材质:
- 液态玻璃(Liquid Glass)
动态统一的设计语言元素,可在呈现控件与导航组件时不遮蔽底层内容 - 标准材质(Standard materials)
用于内容层内部的视觉差异化处理
液态玻璃(Liquid Glass)
- 在内容层上方形成悬浮功能层,建立「控件-内容」的明确层级关系
- 支持内容滚动时的动态透显(peek-through)效果
- 始终确保导航控件的可读性
禁用场景
- 禁止在内容层使用(避免视觉层级混乱)
- 例外情况:瞬态交互控件(如激活状态的滑块/开关)可临时启用液态玻璃效果
使用准则
- 克制应用
- 系统组件已原生集成该效果
- 自定义控件需严格限制使用范围(建议<20%界面元素)
- 焦点引导
该材质的核心价值在于突出底层内容,过度使用会分散用户注意力
平台考量因素
iOS、iPadOS
虽然标准系统颜色不提供鲜明色版本,但 iOS 和 iPadOS 为文本、填充色和分割线定义了鲜明色,这些颜色是专门为与每种材质配合使用而设计的。
文本和填充色都有多个鲜明度级别;分割线只有一个级别。级别名称表示元素与背景之间的相对对比度:默认级别的对比度最高,而四级(如果存在)的对比度最低。
除了四级,你还可以在任何材质上为文本使用以下鲜明度:
- UIVibrancyEffectStyle.label (一级,默认)
- UIVibrancyEffectStyle.secondaryLabel(二级)
- UIVibrancyEffectStyle.tertiaryLabel(三级)
- UIVibrancyEffectStyle.quaternaryLabel(四级)
一般应避免在 thin 和 ultraThin 材质上使用四级,因为对比度过低。
你可以在所有材质上为填充色使用以下鲜明色:
- UIVibrancyEffectStyle.fill (一级,默认)
- UIVibrancyEffectStyle.secondaryFill(二级)
- UIVibrancyEffectStyle.tertiaryFill(三级)
系统为分割线提供了单个默认的虚化值,在所有材质上的效果都很理想。



14人已学会