本文授权转自：设计基石（ID：heimauiux）

随着苹果在WWDC25上正式发布iOS 26，设计师们的脑袋又要开始“烧”起来了。全新的交互逻辑、更自由的个性化定制、Liquid glass 液态玻璃体验——这些变化不仅影响用户习惯，也在悄然重塑界面设计的底层逻辑。

这不是一次简单的视觉改版，而是苹果用细节宣告“设计语言进化”的节点：图标不再一成不变，小组件变得更加智能可控，控制中心可以自由布局，甚至连锁屏和App图标颜色都支持个性化调节。

在iOS 26时代，好的UI不再只是“好看”，而是“好适应、好连接、好感知”。在交互界面设计方面，动画的重要性怎么强调都不为过。它们不仅能吸引用户的注意力，还能提升用户的使用愉悦感，让产品感觉新鲜而时尚。合适的动画可以为用户的操作提供清晰的反馈，使界面感觉更直观。

本文将专门介绍过渡动画的实用技巧。目的是通过简单、紧凑且任何人都可以在设计过程中立即使用的示例，展示过渡动画的原理。请将本文视为过渡动画艺术的实用指南。

过渡动画的 6 个原则

1.使用不透明度淡入淡出

2.扩大规模以增添活力

3.保持一致的方向性

4.平衡速度

5.确定优先级、顺序和分组

6.建立空间感

利用不透明度淡入淡出是一项基本且实用的原则。仅使用这一方式就可以在视觉呈现上产生显著的不同。从当前屏幕过渡到下一个屏幕时，我们可以通过淡出不相关的元素并让下一部分淡入来提供简洁的反馈。操作上可以通过在设计/原型制作工具中将不透明度值从 100 变为 0（或从 0 变为 100）来实现这一点。

图 1-1

图 1-1切换过渡对比。显然突然的过渡会让人感觉不连贯（见左图），而添加了不透明效果感觉更顺畅，更有吸引力（见右图）。

图 1–2

图 1–2菜单打开对比。与左图所示从底部到顶部划入的裁剪菜单不同，使用淡入淡出动画可以提供更柔和、更流畅的过渡，如右图所示。明显增强了用户对菜单的参与度。

图 1–3

图 1-3 是一个使用淡入淡出动画从一个状态过渡到另一个状态的常见示例。此外，它还使用缩放和垂直移动的动画效果，这一点将在以下原理中介绍。

作为一种高级用例，此技术无缝集成了两个屏幕层或序列之间的交互。通过这种方法，场景转换对用户来说几乎无法察觉。许多成功的产品都采用这种策略来增强用户体验。

图 1–4

图 1–4 “Profile view” 图层在过渡到下一状态时无缝移动。下图中可以看到全面的细分。

图 1–5

图 1–5 这种流畅的过渡是通过使用两个“个人资料视图”图层（小图层和大图层）实现的。通过合并缩放效果并在两个图层之间平滑淡入淡出，过渡看起来就像一个单一的标题图层无缝衔接了两种屏幕状态。

2. 扩大规模以增添活力

缩放与淡入淡出——缩放效果的常见用法

缩放为过渡引入了动态、鲜明且有方向性的元素。例如，在过渡到下一个屏幕时，可以将现有组件和图层从 100% 缩小到 90%，同时使用淡入淡出效果。例如，在显示叠加层时，也可以缩小当前屏幕。这给人一种叠加层从较高层滑动的印象，突出了状态之间的连接性。可以根据需要上下调整缩放值实现。

图 2-1结合渐变和缩放效果，让对象看起来更加动态、生动。就像案例所示，这种过渡具有优美的动感，就像各层从上到下滑动一样。

图 2-2 是在文本层上使用缩放效果的一些示例。

左图显示了如何使用比例和轻微淡出来突出显示活动层和非活动层。右图还展示了如何通过缩放文本和卡片层来实现生动的过渡。

图 2-3这两个示例演示了如何通过缩放过渡来增强较大的元素。

（上）在音乐应用中，专辑封面转换期间可以看到常见的缩放实例。随着音乐播放器覆盖层缩小，专辑封面平滑地缩小到缩略图大小。

（下）打开叠加层时，您还可以缩小并显示前一屏幕的轻微峰值，以暗示背景中有一层。这是 iOS 的默认叠加层样式。

3. 保持一致的方向性

页面中的任何移动、缩放或动作都固有地方向。这表示了产品的使用环境，也是让过渡看起来一致的有效方法。记录详细的方向信息至关重要，例如元素何时向上或向下移动、叠加层来自哪一侧等等。设计精良的产品会保持与环境一致且清晰的方向性。

图 3–1（左）使用水平导航切换查看选项是社交媒体应用的典型方式。用户可以滑动或点击切换按钮来切换视图。

（右）另一方面，这款应用的布局略有不同，采用垂直导航。在这种情况下，上下滑动是切换查看选项的方式。

图 3-2 当滚动浏览此处每个应用示例的帖子时，它们的方向性则是相反的。

（左）正如预期，用户可以通过上下滑动来浏览帖子。

（右）鉴于此应用程序具有垂直导航，滚动浏览帖子也可以是水平操作。

图 3-3即使在打开菜单或其他相关转换时，用户始终可以感知到应用程序的整体方向性。

（左）打开菜单意味着应用程序的垂直浏览体验。

（右）菜单元素从左到右出现，表明应用程序的水平浏览体验。

4.平衡速度

合适的动画速度可以提供实用的反馈和有意义的体验。

过渡太慢会让用户感到无聊，而过渡太快则缺乏意义。这就是为什么平衡速度至关重要。根据一些实测研究发现，100 毫秒到 500 毫秒的速度是理想的，适用于大多数情况。设计师可以遵循此指南，但要根据你的产品进行量身定制。这是创造与众不同产品的另一种方式。

图 4–1

图 4–1 快速操作（例如本例中的切换滑块）需要有适当的速度来向人们提供反馈。由于这是页面内过渡，因此它应该比页面到页面的动画稍快一些。

图 4–2

图 4–2 对于包含许多元素的页面间过渡，需要有一些上下文，这样人们才不会觉得与每个状态脱节。这可能比页面内过渡稍慢。然而，这并不一定意味着要放慢动画速度。适当的速度仍然至关重要，以确保设计出来的产品不会让人感觉很乏味。

5. 确定优先次序、进行排序和分组

在过渡多个元素时，按重要性对它们进行排序，以帮助用户专注于关键交互。不要一次性过渡所有元素，而是按优先级对它们进行排序。将相似的项目分组，然后对这些组进行排序。可以完全隐藏不相关的组，以保持对关键部分的关注。

图 5–1

图 5–1 如果此屏幕上的所有元素同时动，会让人感觉忙碌而复杂。这就是为什么它有一个按重要性优先的级联过渡。在这个应用中，主要元素应该是“个人资料视图”和支持图表，因为这些元素在两种状态下都存在。然后可以接下来是次要元素，它们的重要性低于主要元素。

图 5–2

图 5–2 音乐应用在折叠播放器视图时似乎有复杂的过渡。我们只需关注封面和标题层即可实现无缝过渡。可以在下图中看到更详细的分解。

图 5–3 （左）此动画显示了播放器覆盖层如何最小化。如图所示，现有的音乐标题和播放器元素只需向下滑动到底部即可消失。

（右）屏幕最小化后，会出现新的标题层。这样它就不会分散人们对播放器中的元素和封面缩放动画的注意力。

6. 建立空间感

即使用户交互区域仅限于设备屏幕，设计可见框架之外的“不可见”空间也至关重要。建立空间感有助于用户形成产品的心理模型，从而增强他们的体验。设计师通常会使用多个功能层来为平面屏幕引入深度和空间感。

图 6-1 此图显示了音乐应用的更详细上下文。它描述了此应用中的功能层由哪些组成，以及当播放器视图折叠并以最小化视图显示概览屏幕时如何进行转换。

图 6-2此示例由两部分组成。首先，它展示了此社交媒体应用屏幕的多层是如何制作的。其次，评论覆盖层从底部滑入，而现有屏幕缩小并引入深色背景层——应用中的最低层。

除此之外，所有具有方向性运动的层和元素都是空间性的一部分。以下示例具有相同的交互和层元素，但使用不同的空间模型来为产品体验创造不同的感觉。

图 6-3 正如方向性原则所强调的那样，这两个应用程序具有不同的导航结构。通过超越屏幕区域并了解过渡和移动的起源，人们可以掌握总体空间结构。构建这样的空间框架可以大大丰富产品用户体验的独特性。

我们已经了解了复杂的过渡动画设计原则，很明显，看似微小的细节会对用户体验反而会产生巨大影响。这里介绍的示例和原则只是基础，设计师可以从与现有应用和产品的日常互动中汲取自己的灵感。通过这些经历，我们可以学着制作具有自己独特风格的动画，并为用户提供独特的体验。

在科技浪潮奔涌向前的当下，人工智能正深刻重塑我们的生活与工作。人机之间的关系，也从简单交互迈向深度协作。想知道如何在这一趋势下把握体验设计的新方向吗？2025年10月将在北京举办的IXDC国际体验设计大会聚焦“人机共生：人工智能时代人机协作新范式”，作为全球领先的用户体验创新盛会，它将汇聚前沿理念与实践。一起来关注这场盛会，探索人机协作的无限可能。

文章转载：设计基石，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/BGQ706rBJuHAHjNyKi1Iaw

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 罗家玉

终审 | 苏 菁

点这里，学习更多设计知识！