返回

iOS 设计规范

#设计知识
#知识库
20%
进度
0/5
知识点
0
笔记
概述
iOS 18 最新更新内容
控件(快速访问)
App 启动图标
小组件
iOS 设计基础
界面布局
文字排版应用
文案编写
颜色使用
图标使用
App 启动图标
SF Symbol 图标库
图像展示
材质效果
动效展示
深色模式
品牌化设计
包容性设计
无障碍化设计
从右到左的语言适配
隐私保护
iOS 设计模式
数据图表
协作与共享
拖拽操作
输入方式
反馈设计
文件管理
进入全屏
启动页设计
载入设计
个人账户管理
发送通知
模态化设计
多任务处理
提供帮助
用户引导
播放音频
触感反馈
播放视频
打印
评分和评论
搜索设计
设置管理
撤销和恢复
iOS 设计组件
内容展示
布局和组织
菜单和操作
导览和搜索
呈现方式
选择和输入
状态示意
系统体验
iOS 输出方式
操作按钮
手势控制
陀螺仪和速度传感器
iOS 技术参考
Airplay
Apple Pay
HealthKit
iCloud
App内购买
实况照片
地图功能
照片编辑

材质效果

UX百科编辑部 编辑于 2024-02-015人正在学
00

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

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

注:由于某些组件(如 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(三级)

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

点赞
收藏
学会
302005
下一篇: 动效展示
在所有平台中,美观流畅的动效赋予界面活力,从而传达状态、提供反馈和指示,以及丰富视觉体验。 很多系统组件本身包含动效,让你在整个 App 或游戏中提供熟悉且一致的体验。如果设计自定义动效,请优先选择有意义的动效,以帮助用户确定自身位置和看起来舒适,提供清晰的反馈来响应其操作,以及帮助其了解界面以免不...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞