Apple 设计规范深度解读:动效(Motion)

2026年4月12日
研学小组
研学小组
美叶研学官方内容开发小组
已累计原创 93 篇文章查看全部

从今天开始,我们将为大家系统讲解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》:动效 + 手势 = 流畅界面

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

为 Gemini 应用绘制插画体系为 Gemini 应用绘制插画体系
Material3设计规范:轮播(Carousel)Material3设计规范:轮播(Carousel)
Apple HIG:页面控制(Page controls)Apple HIG:页面控制(Page controls)
Apple HIG:提醒(Alerts)Apple HIG:提醒(Alerts)
Apple HIG:操作表单(Action sheets)Apple HIG:操作表单(Action sheets)
Apple HIG:进度指示符(Progress indicators)Apple HIG:进度指示符(Progress indicators)
Material3设计规范:开关(Switch)Material3设计规范:开关(Switch)
Apple HIG:材质(Materials)Apple HIG:材质(Materials)