上一章 导览和搜索

材质效果

酸梅干超人2024-02-01 发布
975人在学·0条笔记
收藏

材质(Material)是一种视觉特效,能在前景与背景元素之间营造出深度感、分层效果和层级结构。

材质通过视觉分离技术区分前景元素(如文本、控件)与背景元素(如内容、纯色)。其半透明特性允许背景色彩向前景渗透,构建出清晰的视觉层级,帮助用户保持空间定位感。

苹果平台提供两类材质:

  1. 液态玻璃(Liquid Glass)
    动态统一的设计语言元素,可在呈现控件与导航组件时不遮蔽底层内容
  2. 标准材质(Standard materials)
    用于内容层内部的视觉差异化处理

液态玻璃(Liquid Glass)

  • 在内容层上方形成悬浮功能层,建立「控件-内容」的明确层级关系
  • 支持内容滚动时的动态透显(peek-through)效果
  • 始终确保导航控件的可读性

禁用场景

  • 禁止在内容层使用(避免视觉层级混乱)
  • 例外情况:瞬态交互控件(如激活状态的滑块/开关)可临时启用液态玻璃效果

使用准则

  1. 克制应用
    • 系统组件已原生集成该效果
    • 自定义控件需严格限制使用范围(建议<20%界面元素)
  2. 焦点引导
    该材质的核心价值在于突出底层内容,过度使用会分散用户注意力


平台考量因素

iOS、iPadOS

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

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

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

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

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

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

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

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

975人在学·0条笔记
收藏
已学会
14人已学会
下一篇App 启动图标
一个独特、好记的图标可传达你 App 或游戏的用途和个性,还可帮助用户在 App Store 及其设备上一眼识别你的产品。 应用图标核心规范 应用图标是品牌识别与用户体验的核心载体,出现在主屏幕、搜索结果、通知、系统设置和分享面板等关键位置。优秀的图标设计需确保在所有苹果平台上保持清晰一致的视觉识别...
本章笔记
仅看自己
logo