上一章 图像展示

材质效果

UX百科编辑部2024-02-01 发布
295人在学·0条笔记
收藏

材质可通过模糊和修改底层视觉内容的颜色值来加入半透明效果。

半透明可以提升前景和背景元素的融合性,在视觉上传达层与层之间的分离,帮助用户维持一种场景感。为了增强半透明效果,材质可以与鲜明色相结合。鲜明色可以使色彩从背景透过材质层,从而增强文字、填充色、图标等前景内容的层次感。

注:由于某些组件(如 macOS 中的菜单、visionOS 中的窗口和 iOS 中的文本)默认为鲜明色,因此鲜明色会影响所有的应用程序和游戏,甚至是那些不显示任何鲜明色视图的应用程序和游戏。


应用指南

  • 你可以使用系统提供的多种材质来呈现景深感和层级结构,同时不分散对内容的注意力。从几乎半透明 ultraThin 到几乎不透明 ultraThick,材质可以自动适配不同外观模式。
  • 根据语义和推荐用法选择系统材质和效果,不要根据材质或效果给界面带来的表面颜色来选择材质或效果,因为系统设置会改变其外观和行为。
  • 在材质上使用鲜明的颜色,有助于确保可读性。当你使用系统定义的鲜明色时,就不必担心色彩在不同环境下显得过暗、过亮、饱和或对比度过低。有关指导,请参阅 颜色。
  • 在选择与模糊和鲜明效果相结合的材质时,要考虑对比度和视觉分离。例如:
    • 较厚的材质可以为文字和其他具有精细特征的元素提供更好的对比度。
    • 半透明效果可以通过提供背景内容的部分可见性,帮助用户保留上下文内容。

无论选取哪种材质,你都应避免在材质上使用不鲜明的颜色。


平台考量因素

iOS、iPadOS

虽然标准系统颜色不提供鲜明色版本,但 iOS 和 iPadOS 为文本、填充色和分割线定义了鲜明色,这些颜色是专门为与每种材质配合使用而设计的。

文本和填充色都有多个鲜明度级别;分割线只有一个级别。级别名称表示元素与背景之间的相对对比度:默认级别的对比度最高,而四级(如果存在)的对比度最低。

除了四级,你还可以在任何材质上为文本使用以下鲜明度:

  • UIVibrancyEffectStyle.label (一级,默认)
  • UIVibrancyEffectStyle.secondaryLabel(二级)
  • UIVibrancyEffectStyle.tertiaryLabel(三级)
  • UIVibrancyEffectStyle.quaternaryLabel(四级)

一般应避免在 thin 和 ultraThin 材质上使用四级,因为对比度过低。

你可以在所有材质上为填充色使用以下鲜明色:

  • UIVibrancyEffectStyle.fill (一级,默认)
  • UIVibrancyEffectStyle.secondaryFill(二级)
  • UIVibrancyEffectStyle.tertiaryFill(三级)

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

295人在学·0条笔记
收藏
已学会
5人已学会
下一篇动效展示
在所有平台中,美观流畅的动效赋予界面活力,从而传达状态、提供反馈和指示,以及丰富视觉体验。 很多系统组件本身包含动效,让你在整个 App 或游戏中提供熟悉且一致的体验。如果设计自定义动效,请优先选择有意义的动效,以帮助用户确定自身位置和看起来舒适,提供清晰的反馈来响应其操作,以及帮助其了解界面以免不...
本章笔记
仅看自己
logo