从今天开始，我们将为大家系统讲解Apple Human Interface Guidelines，也就是大家常提到的苹果设计规范，今天我们来学习一下动效（Motion），我将先遵照原文结构，将全部译文转述给大家，然后再结合苹果在不同场合、不同的系统版本规范中，对动效（Motion）的定义以及设计指导思想进行一个总结梳理，向大家系统阐述一下Apple动效（Motion）设计的思想内核。下面我们先看原文部分

一、规范原文

美观流畅的动态效果赋予界面活力，从而传达状态、提供反馈和指示以及丰富你 App 或游戏的视觉体验。

很多系统组件自动包括动态效果，让你在整个 App 或游戏中提供熟悉且一致的体验。系统组件还可能会根据辅助功能设置或不同输入方式等因素调整其动态效果。例如Liquid Glass 在移动时会以更强烈的方式响应直接触控交互，从而加强触觉体验，但对使用触控板交互的用户则会表现出更轻柔的效果。如果设计自定义动态效果，请遵循以下指南。

1. 最佳实践

有目的地添加动态效果，让其在不妨碍体验的同时提供支持。不要添加毫无意义的动态效果。不必要或过多的动画会分散用户的注意力，且可能让其感到违和或身体不适。

将动态效果设为可选。并非所有用户都能够或想要在 App 或游戏中体验动态效果，因此避免将动态效果用作传达重要信息的唯一方式至关重要。为了帮助每个用户享受你的 App 或游戏，还可以通过使用触感反馈和音频等替代方式进行传达来作为视觉反馈的补充。

2. 提供反馈

尽量使用真实且符合用户手势和期望的反馈动态效果。在非游戏类 App 中，准确真实的动态效果可帮助用户理解运作原理，但无意义的反馈动态效果可能会让其感到混乱。例如，如果用户通过从顶部向下滑动显示视图，他们不会期望通过将视图滑到一侧来进行关闭。

尽量使反馈动画内容简洁、精确。简洁精确的动画反馈往往会让用户感到轻盈且不唐突，并且通常比显眼的动画更能有效地传达信息。例如，当游戏显示与成功操作精确关联的简明动画时，玩家可立即理解该信息，而不会分散游戏注意力。再例如在 visionOS 中：当用户轻点“照片”中的全景照片时，照片会快速平滑展开以填充用户面前的空间，从而帮助其追踪过渡效果且无需等待即可欣赏内容。

在 App 中，通常避免在频繁出现的用户界面交互中添加动态效果。系统已经为标准界面元素的交互提供了精细的动画。对于自定义元素，一般应避免让用户每次与其进行交互时都要花额外的时间关注不必要的动态效果。

让用户可取消动态效果。尽量不要让用户等待动画完成才能执行操作，尤其是当其需要多次体验动画时。

考虑在可行时使用具有动画效果的符号。使用 SF 符号 5 或更高版本时，你可以将动画效果应用到 SF 符号或自定义符号。有关指南，请参阅动画。

3. 利用平台功能

确保游戏的动态效果默认在支持的各个平台上都良好呈现。在大多数游戏中，始终保持 30 至 60 fps 帧速率通常可打造流畅且具有视觉吸引力的体验。对于支持的各个平台，使用设备的图形功能启用默认设置，让用户无需先更改这些设置就能享受你的游戏。

让用户可自定义游戏的视觉体验，以优化性能或电池续航能力。例如，考虑让用户在系统检测到外部电源的存在时可切换电量模式。

4. 平台考量因素

无针对 iOS、iPadOS、macOS 或 Apple tvOS 的额外考量因素。

visionOS

除了可巧妙地传达上下文、吸引用户关注信息和丰富沉浸式体验之外，visionOS 中的动态效果还可与深度结合使用，以在用户注视交互式元素时提供至关重要的反馈。因为动态效果很可能会占据 visionOS 使用体验的很大一部分，所以避免引起注意力分散、困惑或不适至关重要。

尽量避免在用户视场的边缘显示动态效果。用户对于发生在边缘视觉处的动态效果尤其敏感：这种动态效果除了会分散用户注意力外，甚至还会引起不适，因为它会让用户感到自身或四周在移动。如果你需要在沉浸式体验期间显示在边缘处移动的对象，请确保对象的亮度与其余可见内容接近。

显示较大虚拟对象的移动时，帮助用户保持舒适感。如果对象大到足以填充大部分视场，请遮盖大部分或所有透视，用户会自然将其视为四周的一部分。为了帮助用户感知对象的移动而不会让其觉得自身或四周在移动，你可以增加对象的半透明效果，帮助用户透视对象，或者降低对象对比度来让其动态效果不那么明显。

即使是用户本人在移动诸如窗口这样的大型虚拟对象，他们也可能会感到不适。虽然在这种场景下调整半透明效果和对比度会有所帮助，但仍应考虑保持窗口的尺寸相对较小。

需要重新放置对象时，考虑使用渐变。当对象从一个位置移到另一个位置时，用户会自然看到移动。如果此类移动并未传达对用户有用的任何信息，你可以在移动对象前将其淡出，对象出现在新位置后重新将其淡入。

一般而言，避免让用户旋转虚拟世界。虚拟世界旋转时所带来的体验通常会扰乱用户的稳定感，即使其可控制旋转和只是细微移动。相反，在快速淡出期间，应考虑使用瞬时方向变化。

考虑为用户提供静态参考系。在不会移动的区域内包含视觉移动时，用户会更容易接受。相反，如果整个周围区域都看似发生移动（例如，使玩家在空间中自动移动的游戏内），用户可能会感到不适。

避免显示持续振荡的对象。尤其应避免显示频率为 0.2 赫兹左右的振荡，因为用户对于此频率非常敏感。如果需要显示对象振荡，请尽量保持振幅较低并考虑让内容半透明。

watchOS

SwiftUI 提供了强大而精简的方式来为 App 添加动态效果。如果需要使用 WatchKit 为布局和外观更改添加动画，或者创建动画图像序列，请参阅 WKInterfaceImage。

所有基于布局和外观的动画都会自动包括在动画起止时播放的内建缓动。你无法关闭或自定义缓动。

二、深度解读

基于以上规范同时再结合苹果在不同场合、不同的系统版本规范中，对动效（Motion）的定义以及设计指导思想，下面我们向大家系统阐述一下Apple动效（Motion）设计的思想内核。

1. 为什么重视

如果你把 HIG 旧版 Animation 章节、现在的 Motion 页面，以及一些官方博文放一起看，会发现苹果这句话一直没变：动效可以传达状态、提供反馈、增强层级和空间感，让界面更有生命力。苹果一直把动效看成三件事的结合：

1. 信息传递：状态变化、因果关系、层级结构。
2. 操作反馈：你动一下，它立刻回一下，这就是“直接操控感”（direct manipulation）。
3. 情绪和品牌：细腻、可信的动效，让人觉得“这个系统是活的、有质感的”。

2. 历史演进

1. iOS 早期：现实感、可信度、层级

在较早的 iOS Human Interface Guidelines 里，Animation（动画）被放在「视觉设计」下面，核心说了三件事：

• 视觉层级 + 真实运动给界面带来“活力”和“可理解性”；
• 务必追求 现实感与可信度（realism & credibility）：人可以接受艺术夸张，但若动画完全违背物理直觉，会让人迷惑。
• 进入方式和退出方式要对称：有个经典例子：如果视图是从顶部滑下来出现，那就应该也能向上滑回去关闭。

这一阶段，你可以理解为：动效 = “三维感 + 物理感” + “把层级讲清楚”。

2. iOS 7 时代：视差、缩放、空间幻觉，外加晕动灾难

iOS 7 把拟物界面砍掉，引入了大规模的多层结构 + 视差（parallax）+ 缩放转场：

• 图标与壁纸分层，设备轻微倾斜即可产生视差，营造“漂浮在背景之上”的空间感。
• 打开 App 时有明显的“zoom in” 动画，看起来像“钻进图标里面”。

这套设计很“wow”，但也踩坑了：部分用户报告眩晕、恶心，媒体直接写：iOS 7 的动效让人晕。于是系统后来在“辅助功能”里引入了 Reduce Motion（减少动态效果），允许用户弱化或关闭大范围动效。苹果后来在文档里明确说：Reduce Motion 的目的，就是照顾对运动高度敏感、会出现头晕、恶心、分心的用户。

这一步很关键：从“动效炫不炫” → 升级到 “动效要不要、能不能被关闭”。也为今天 HIG 中“Make motion optional” 埋了伏笔。

3. WWDC 2018《Designing Fluid Interfaces》：动效 + 手势 = 流畅界面

2017–2018 年，iPhone X 上线，系统交互全面手势化。苹果在 WWDC 2018 做了一场很重要的设计 Session：Designing Fluid Interfaces。这场分享从设计视角重构了“动效”的角色，几个关键词值得关注

1. Fluid（流畅）

界面应当像流体一样：响应快、过渡连贯，没有僵硬断点；滑动、拖拽、返回等手势都与动效“连成一气”。

2. Direct Manipulation（直接操控）

• 手指怎么动，界面就怎么跟；
• 动效不再是“播放动画”，而是“跟手”响应，手离开后再完成“投射（projection）”——即自然减速并停在合理位置。

3. Hierarchy & Continuity（层级与连续性）

• 视图的 push / pop、卡片放大缩小，都通过动效表达“我从哪来、要去哪”；
• 内容在空间上的连续运动，帮助用户理解界面架构。

4. Physics（物理模型）

利用速度、摩擦、质量等概念让动画更可信（例如 UIScrollView 的减速）。

也就是说此时在苹果那儿，“动效”与“手势”是同一件事的两面：手势表达意图，动效把意图可视化。

4. 最新版 HIG · Motion：把“规范”写死在条款里

目前这篇 Motion 指南，就是官方对历史进化后的“总纲”。它把前面十几年的经验沉淀成几个清晰的 bullet：

1. 动效的作用：让界面有生命、传达状态、提供反馈与指导、丰富视觉体验。
2. 很多系统组件自带动效，而且已考虑到不同输入方式和辅助功能；自定义动效要在此基础上补充，而不是对抗。
3. 最佳事件Best Practices：

• 有目的地添加动效，不要为了动而动；
• 动效必须是可选的，不能用作唯一信息通道；
• 尽量用真实、符合操作预期的反馈动效；
• 反馈动画要简短、精准；
• 高频交互不要添加额外动效；
• 动画要可被打断；
• 可以在合适场景使用动画化符号（SF Symbols 5+）。

你会发现：这版 Motion 把“哲学话”变成了“实际约束条件”。这非常适合直接写入设计系统作为“动效总则”。

3. 动效哲学的底层关键词

如果把旧版 Animation、最新版 Motion 和 WWDC “Designing Fluid Interfaces” 混在一起看，会浮出五个关键词，我们可以将其命名为“苹果式动效五守则”。

1. Realism & Credibility（真实与可信）

不管时代怎么变，苹果一直强调：动效要 符合人的直觉和物理经验。

• 滑下来的东西应该能滑回去；
• 大物体移动应该有惯性而不是突然瞬移；
• 放大、缩放、弹性、减速都应该感觉合理。

2. Consistency（一致性）

• 系统内置动效有固定节奏感：缓入缓出、轻盈、不过度。
• 自定义动效要“像出自同一系统”，而不是完全不同风格。

3. Content First（内容优先）

• 动效是服务内容的配角，而不是主角；
• 当动画已经影响到阅读、操作速度，就是越界了。

4. Accessibility（可访问性）

• 动效能提升体验，但也能让人头晕、恶心、分心；
• Reduce Motion 不是“彩蛋”，而是强制要求：你必须支持。

5. Performance & Comfort（性能与舒适）

• 游戏与沉浸式体验要关注帧率：30–60 fps 是基本线。
• 在 visionOS 等空间环境下，还要考虑前庭系统（平衡感）、视野边缘、振荡频率等人因问题。

4. visionOS

visionOS 的出现，把动效拉进了一个全新维度：空间计算（Spatial Computing）。动效首次从“2D UI”变成“人站在里面的空间”。HIG 和 WWDC 对 visionOS 的动效提出了很多非常具体的人因要求：

1. 避免视野边缘的大幅运动

• 周边视觉对运动特别敏感，很容易引起眩晕；
• 如必须移动，亮度要与环境一致，避免“亮一点在那晃”。

2. 大型虚拟物体移动要非常小心

• 如果一个物体几乎填满视野，用户会把它当做环境的一部分；
• 移动它时，用户会误以为“是我在动”，很容易不适；
• 解决方式：提高透明度、降低对比度、减缓速度。

3. 尽量不用“世界旋转”

• 旋转整个虚拟世界，几乎 100% 让人不舒服，即便用户自己控制；
• 推荐做法：短暂淡出 → 瞬时切换视角。

4. 提供稳定参照物

• 当运动被限定在某块不动的区域内时，人更容易接受；
• 整个场景一起动（尤其是自动移动）会显著提升眩晕风险。

5. 避免低频振荡（特别是 ~0.2 Hz）

实验发现这个频段能让人特别“恶心”；如非要振荡，保持小振幅＋半透明。

这套规则对于做 AR / VR / MR / 空间 UI 的同学，是一整块新的考题：动效不仅要“看着好”，还要考虑人体工学与神经系统负担。

5. watchOS

在 watchOS 上，动效被“封装”成更安全的默认行为，苹果的态度很明确：

• 首选用 SwiftUI 自带的动效能力；
• 若用 WatchKit 做布局或序列帧动画，建议用 WKInterfaceImage；
• 所有基于布局 / 外观的动画，自动带系统缓动曲线，而且缓动不可关闭、不可自定义。

这背后其实是同一个逻辑：

• 小屏、抬腕、抬头看一眼 → 交互节奏非常短；
• 所以苹果宁愿限制自由，让所有动画统一快、统一稳，避免某个 App 做出拖拖拉拉的动画把人逼疯。

三、实践指导

通过以上内容学习，那么我们如何将苹果motion思想形成一套有效的方法论，应用于具体的设计实践呢，我想可以按照如下步骤展开

1. 确定目的

首先，我们需要把“动效目的”讲清楚每一个动效都要能回答三个问题中的至少一个：

1. 它是否在 表达状态变化？
2. 它是否在为某个 用户操作提供反馈？
3. 它是否在 帮助用户理解空间 / 层级 / 路径？

如果三个都答不上来，那它很可能只是“炫技动画”，优先砍。

2. 建立规则

对应苹果motion设计哲学，你可以建立自己的动效原则，通过以下几点评估设计方案：

1. 真实可信

• 方向与手势一致；
• 进出相对；
• 有缓入缓出，有惯性。

2. 系统一致

• 时长范围与系统接近（多数 150–300ms）；
• 缓动曲线统一（比如统一使用某几个贝塞尔曲线）。

3. 内容优先

• 动效不会阻碍阅读、操作；
• 高频动作只做轻动效或不动。

4. 可被打断

• 用户的新操作可以立即终止当前动画。

5. 人人可用

• 支持 Reduce Motion；
• 重要信息不只靠动画传达。

3. 动效系统化

你可以仿照苹果规范，把动效系统化到 Design System 里

1. 定义 Motion Tokens

比如：

• motion.duration.fast = 150ms
• motion.duration.standard = 250ms
• motion.duration.slow = 400ms
• motion.easing.standard = cubic-bezier(0.4, 0.0, 0.2, 1)
• motion.easing.decelerate, motion.easing.accelerate 等

2. 为常见交互定义“动效模式”

• 页面切换：Page/Forward, Page/Back
• 弹窗与抽屉：Modal/Enter, Sheet/Present
• 列表变更：List/Insert, List/Delete, List/Reorder
• 反馈：Success、Error、Loading、Tap Feedback
• 空间场景（如果有）：World/Teleport（淡出 + 瞬移）、Object/MoveWithFade

并将每个模式写清楚：

• 触发条件
• 属性变化（位置 / 缩放 / 透明度 / 模糊等）
• 时长与延迟
• 缓动曲线
• 是否支持 Reduce Motion 简化版

4. 单独立规

可以为 visionOS / 空间场景单独立规，当进行空间设计时，可以把 visionOS 的要求直接变成 Checklist，问自己如下问题：

1. 视野边缘是否存在大运动？
2. 大型虚拟物体移动时，是否降低对比度或提高透明度？
3. 是否禁止旋转整个位移世界？
4. 是否提供静止参照物？
5. 是否避免约 0.2 Hz 的持续振荡？

这比抽象讲“要注意晕动”有用太多。

5. 问六个问题

尝试每个动效问自己 6 个问题

1. 动效的目的是什么？（状态 / 反馈 / 引导 / 纯装饰）
2. 动效是否遵循真实与物理感？（方向、速度、惯性合理吗？）
3. 动效会不会拖慢操作？（特别是高频场景）
4. 动效是否支持中断？
5. 若用户开启 Reduce Motion，这里会发生什么？
6. 在 visionOS / 小屏 / 低性能设备上，动效会不会让人不舒服或掉帧？

如果能把这六条都答好，这个动效基本就达标了。

四、总结

如果站在“上帝视角”，Motion 这件事在苹果那的演化路径其实很清晰：从“好看” → “好理解” → “好操作” → “对身体也友好”。

• 第一层：让界面“活起来”（美感与空间感）；
• 第二层：让用户“看得懂”（结构与状态清晰）；
• 第三层：让操作“顺手、不拖泥带水”（流畅与直觉）；
• 第四层：让所有人“都能舒服地用”（可访问性与人因工程）。