Apple 动效
HIG 将动效作为原则来阐述,但仅此而已。其“动效”页面有 92 行关于 是否 要动画化 —— 有目的地、可选地、跟随手势 —— 却没有一个弹簧参数。关于动效实际如何构建的一切都存在于 HIG 之外,因此有了这份指南。
| 文件 | 内容 |
|---|---|
references/motion-animation.md | 弹簧词汇表、时长、转场类型、可中断性。 |
references/microinteractions-feedback.md | 按下状态、加载、成功与错误反馈、触觉配对。 |
references/gestures-interaction.md | 滑动、拖拽、捏合、边缘手势以及动效应如何跟踪它们。 |
每个来源
值得坦诚地指出,因为这三个来源的权威性截然不同,将它们混淆正是动效建议变成传说的原因:
- 原则 →
hig-guide。“有目的地添加动效。” “让动效可选。” “力求真实的反馈动效,跟随人们的动作和期望。” 这些是 Apple 自己的话,来自 Motion。引用这些原文,而不是这里的转述。 - 弹簧名称及其行为 → SwiftUI 的 API。
.smooth、.snappy、.bouncy是真实的 API,具有真实的默认值。motion-animation.md中的弹跳百分比是对它们的特性描述,而非发布的常量 —— 将其视为一个你调整的起点,不要将其引用为 Apple 的规范。 - 其他所有内容 → 观察。这些参考文献改编自 MIT 许可的 apple-design-skills 集合(见
LICENSE.txt中的通知),并在作者推断出已发布 App 的行为之处标记为[observed]。有用,但不具权威性。
这里的任何内容都不像 ui-kit-for-apple-platforms 的值那样经过测量。这种区别正是关键所在:动效是本仓库中背后事实依据最少的部分。
选择弹簧
体现整体感觉的一个关键决定:
| 弹簧 | 弹跳 | 用途 |
|---|---|---|
.smooth | 无 | 表单、模态弹窗、后台转场 —— 任何应该安静地停止而不引人注目的元素 |
.snappy | 轻微 | 按钮按下、开关、选择 —— 直接操作的默认选项 |
.bouncy | 明显 | 图标按下、到达的通知、意在给人以奖励感的时刻 |
弹跳就是全部信号。一个弹跳的表单读起来像玩具;一个不弹跳的按钮按下读起来像死板。正确选择这一步比调整时长作用更大。
Apple 动效与普通动效的区别
- 可中断的。手势必须能够反向或重定向正在进行的动画,而不是排在后面等待。任何需要先完成再响应的动画,无论多快都会让人感觉卡顿。
- 跟随手指,然后接管。在拖拽过程中,表面 1:1 跟随手势;弹簧仅在松手时接管,并继承手势的初速度。这就是 HIG 所说的 “真实的反馈动效,跟随人们的动作和期望” 的具体体现。
- 时长是结果,而非输入。弹簧由物理特性定义,在它该停止时停止。一味追求固定的 300 毫秒时长通常意味着用错了工具。
- 位置和不透明度,而非大小和颜色。移动和淡入淡出读起来像物理世界;缩放和变色则读作效果。
减少动效并非可选
hig-guide 明确指出了这一点 —— “让动效可选。” 在 Web 上,这是 prefers-reduced-motion,它意味着用其他方式替换点击效果,而不仅仅是缩短动画:用交叉淡入代替滑动,用剪切代替动画。ui-kit-for-apple-platforms 的 ios-components.css 已经这样保护了它自己的转场;请保持一致。
边界
- 值 —— 颜色、排版、控制几何、材质 —— 属于 ui-kit-for-apple-platforms,从 Apple 的 UI 工具包中测量得到。不要在这里重复它们;动效文件中的十六进制颜色代码是一个某处无人查看的陈旧代码。
- 关于 是否 应该动画化、使用哪种呈现方式、布局如何适应的规则 —— hig-guide,包含实际的引用。
- 本技能覆盖的是动效本身如何构建。