设计的"原子层":颜色、字体、布局、材质这些最小单位。这一层做对了,上面的组件和模式才稳。每节给最佳实践 + 反例 + 平台差异。 注:iOS 26 的新视觉语言 Liquid Glass 的完整体系(及 SF Symbols 绘制/Icon Composer 深技)在 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系),本张只覆盖基础概念。
一、颜色 Color
核心心法:优先用系统语义色,别硬编码色值。 系统色会随浅色/深色模式、高对比度设置自动适配,自己写死的颜色不会。
| 要点 | 怎么做 · Why |
|---|---|
| 用系统语义色 | 引用 Color API 的语义色(如 systemRed、"背景色"、"分隔线色"),系统自动适配外观。不要改语义含义(别拿"分隔线色"当文字色) |
| 一色一义 | 同一颜色不能既表示可点按钮、又表示普通文本 —— 用户会混淆 |
| 颜色不是唯一信号 | 传达状态/区分对象时,颜色必须搭配文字/图标/形状(红绿色盲看不出红绿) |
| 自定义色给三套变体 | 浅色 / 深色 / 高对比度,缺一不可 |
| 多环境测试 | 室外强光、夜间、True Tone、HDR、sRGB/P3 显示器下都要测 |
| 文化差异 | 红色在某些文化是警告、另一些是喜庆;本地化时校对颜色含义 |
· 色彩空间:标准 sRGB,宽色域用 P3(配 16 位/通道 PNG 展示更饱和的色)。每张图都应带 Color Profile 保证跨设备一致。 · 平台差异:iOS 用 Primary/Secondary/Tertiary 三级背景色表层级;macOS 11+ 支持 App 指定强调色(Accent Color);tvOS 调色板要克制(别只用颜色指示焦点);watchOS 背景色应"传达含义"(如健身环配色)。
二、字体排版 Typography
核心心法:可读性 > 塞更多内容。 响应大字号时保持层级和可读,而不是一味缩小。
- 系统字体:San Francisco(SF) 是 iOS/iPadOS/macOS/tvOS/visionOS 主字体(SF Pro / SF Compact / SF Arabic / SF Mono);New York(NY) 用于优雅展示型内容(macOS / Mac Catalyst)。两者都是可变字体(variable font),支持多权重/光学尺寸。
- Dynamic Type(动态字体):系统级功能,用户调字号、App 自动适配。iOS/iPadOS/tvOS/visionOS/watchOS 支持,macOS 不支持。 这是支持"更大文本"无障碍的最佳实践。
- 字重:避免极细/极粗;小字号选较粗字重保清晰。推荐 Regular / Medium / Semibold。
各平台正文建议最小字号:iPhone 17pt · iPad 23pt · macOS 19pt · visionOS/watchOS 11pt。 visionOS 特别:优先二维文字(带深度的字更难读);文字始终面向用户("广告牌式显示");无背景时加粗代替阴影(环境无法生成准确阴影)。
三、布局 Layout
| 原则 | 要点 |
|---|---|
| 分组相关内容 | 用留白/背景形状/颜色/分隔线区分板块;控件与内容明确分离 |
| 强调重要信息 | 关键信息给足空间,次要内容放额外视图 |
| 内容填满屏幕 | 全屏背景延展到边缘;滚动内容覆盖到底;控件(侧边栏/标签栏)浮于内容上,布局预留位置 |
| 符合阅读顺序 | 重要元素放顶部和前导侧(LTR 即左侧),并支持 RTL 翻转 |
| 渐进式披露 | 内容多时提示"可滑动/点开看更多",不一次塞满 |
| 安全区域 | 用 Safe Area 避开摄像头/传感器;用 Layout Guide 对齐和限制文本宽度 |
平台差异:iOS 避免全宽按钮、遵循系统边距;iPadOS 适配分屏(半屏/三分屏)、用可切换侧边栏/标签栏;macOS 别把重要控件放窗口底部;tvOS 主内容内缩安全区(上下 60pt、左右 80pt)防旧电视 overscan;visionOS 按钮间距 ≥60pt;watchOS 内容延展到边缘、横向按钮 ≤2-3 个。
四、空间布局 Spatial Layout(visionOS 专属)
visionOS 的"布局"多了 Z 轴和身体工程学,三个关键变量:
- 视野范围(Field of View):重要内容放视野中心(应用默认在用户正前方启动);别把内容固定在头顶上方(让人觉得被困)。
- 深度(Depth):用距离/遮挡/阴影传达层次;别给文字加深度(与背景混淆降低可读性);深度提示必须准确,否则用户不适。
- 比例(Scale):动态比例(远了自动放大、近了缩小,保持清晰)vs 固定比例(大小不变,模拟真实物体如产品模型)。
- 铁律:避免显示过多窗口(遮挡环境、增加重定位负担);优先间接手势;交互组件中心间距 ≥60pt、间隙 ≥16pt;减少身体动作。
五、材质 Materials
材质 = 用模糊/透明/透光建立前后层级感。Apple 有两套:
| 材质 | 用在哪 | 关键约束 |
|---|---|---|
| Liquid Glass 动态玻璃 | 仅控件与导航区(标签栏/侧边栏) | 不要用在内容层;别滥用(过多自定义控件用它会层级混乱);例外:滑块/开关等临时交互可短暂用 |
| 标准材质 Standard | 内容层(背景/分区) | 按语义选材质(别只看颜色,颜色会随系统变);前景用 vibrant color 保对比;厚材质=高对比背景、薄材质=透出背后内容 |
平台差异:iOS 提供 label/fill/separator 三类 vibrancy 层级(避免在 ultraThin/thin 上用 quaternaryLabel,对比太低);macOS 有
behind window/within window两种混合模式;tvOS 按 ultraThin→ultraThick 五档选;visionOS 默认玻璃材质不可改、不支持 Dark Mode(自动调亮度)、避免不透明背景遮挡视野;watchOS 别替换系统默认模态材质。
六、动效 Motion
核心心法:目的性动效,不为动而动。 过度动画分散注意、让人不适。
- 动效必须可选:不是每个用户喜欢动效;别把动效当唯一信息通道,搭配触觉+音效。
- 简短精准:轻、短的反馈动画传达信息又不打扰;尽量减少用户等动效完成的时间,允许快速下一步。
- 符合预期:滑动反馈若与预期不符会让用户困惑。
- visionOS 防晕铁律:减少视野边缘的动效;大范围虚拟物体移动时给一个不动的视觉参考点;避免约 0.2Hz 的持续振荡动画(让人不适),必须用则降振幅+半透明。
七、图片 Images
- 分辨率:
@1x(1 点=1 像素)/@2x/@3x。iOS 用 @2x+@3x;iPad/watchOS @2x;macOS/tvOS @1x+@2x;visionOS @2x 起。优先设计 @1x 再向上缩放;矢量控制点对齐整数值。 - 格式选型:位图→去交错 PNG;照片→优化 JPEG 或 HEIC;界面图标/扁平图形→PDF 或 SVG(矢量,自动缩放清晰)。每张带 Color Profile。
- tvOS:App 图标必须用 2-5 层分层图像(视差效果:聚焦时浮动发光);前景留安全区防裁切。
- watchOS:为减小文件避免透明背景(除 Complication/菜单图标/界面模板图);用 PDF 自动缩放。
八、应用图标 App Icons
核心心法:简洁可辨 + 跨平台一致 + 让系统处理特效。
| 平台 | 设计形状 | 系统遮罩后 | 尺寸 |
|---|---|---|---|
| iOS / iPadOS / macOS | 方形 | 圆角矩形 | 1024×1024 |
| tvOS | 横向矩形 | 圆角矩形 | 800×480 |
| visionOS | 方形 | 圆形 | 1024×1024 |
| watchOS | 方形 | 圆形 | 1088×1088 |
- 分层:iOS/macOS/watchOS 背景层+1~多前景层(支持 Liquid Glass);tvOS 2-5 层(视差+透明深度);visionOS 背景+1~2 前景(3D 立体)。用 Icon Composer(iOS/macOS)或 Xcode 图像堆栈(tvOS/visionOS)构建。
- 铁律:① 让系统处理高光/模糊/阴影/发光(系统效果动态、自定义是静态会冲突);② 少用文字(不利本地化、小尺寸难读、显拥挤),禁用"Watch/Play/New"等指导词;③ 优选插画而非照片(照片细节多、分层后失真);④ 禁止复制 UI 组件或 Apple 硬件外形(版权);⑤ 跨平台保留核心图形元素;⑥ watchOS 避免纯黑背景(与设备背景融合)。
- 深色/着色变体:核心特征保持一致(别隐藏/替换元素);从浅色版出发做深色版,用有色背景提对比。可提供备用图标(如球队主题),但风格要一致、需过 App Store 审核。
九、界面图标 ICON(区别于应用图标)
界面图标 = App 内表示操作/内容的小图标(工具栏、列表里那些),比应用图标更简洁、传达单一概念。
- 一致性:大小、细节级别、线条粗细、透视统一;图标线宽匹配相邻文字字重。
- 光学居中:几何居中 ≠ 视觉居中(如下载图标底部视觉重、需上移几像素)。
- 矢量优先:PDF/SVG 自动缩放;含阴影/纹理的用 PNG(需多尺寸)。
- 无障碍:每个自定义图标提供替代文本标签(VoiceOver 用)。
- macOS 文档图标:经典"右上角卷起的纸"造型(区分文档与 App);右上角会被系统加白色卷角,别在那放关键内容;需 512/256/128/32/16px 多尺寸,小尺寸减细节。
十、品牌 Brand
核心心法:品牌让位于内容,精致低调地融入。
- 通过 App 图标和整体体验传达品牌个性,而非反复贴 logo(用户不需要被提醒在用哪个 App)。
- 大多平台可指定一个强调色;品牌强关联的字体可用于标题副标题,正文用系统字体(小尺寸更清晰)。
- 别把启动屏当品牌展示位(它的作用是减少启动等待时间,消失太快传达不了信息);要展示品牌放欢迎页/引导页。
- 即使高度风格化也保持熟悉的交互模式(UI 组件放预期位置、标准符号表常见操作)。
- Apple 商标不得出现在 App 名称或图像中。
源自 Foundations 基础(18 篇)。无障碍/包容性/隐私/RTL/文案另见 Apple HIG 无障碍与伦理 Accessibility(九大原则/包容性/隐私/文案/RTL);Liquid Glass 与字体/图标深技见 Apple HIG:Liquid Glass 新设计语言 + SF Symbols + 字体(iOS 26 视觉体系)。