过渡动画实用指南-爱冒险的八月

过渡动画在产品设计中起着至关重要的作用，它能够吸引用户的注意力，提升用户体验，使产品看起来更加新颖和现代化。过渡动画可以平稳地引导用户从一个阶段过渡到下一个阶段，连接不同的步骤，为用户提供清晰的操作反馈，使界面更加直观。

设计完美过渡动画的

挑战在于在微妙与强调之间找到适当的平衡。

尽管有很多在线资源和文章深入探讨了动画的复杂性，但令人惊讶的是，许多产品在成功实施动画方面都未能达到预期效果。

本文通过展示过渡动画的原则和示例来帮助大家更好地理解其重要性和应用方法。这些见解并不是一成不变的规则，而是新产品创建过程中的指导性考虑因素。希望本文能成为您简洁实用的过渡动画指南。

6 个原则做出更好的过渡动画

不透明度淡入和淡出
缩放以增添活力
保持一致的方向性
平衡速度
确定优先级、顺序和分组
建立空间性

不透明度的淡入和淡出是一个基本而强大的原则。仅使用这个技巧就能产生显著的差异。在从当前屏幕过渡到下一个屏幕时，你可以通过将不相关的元素淡出，并让下一部分淡入来提供简洁的反馈。你可以在任何设计/原型工具中通过将透明度值从100变为0（或从0变为100）来实现这一点。

切换过渡比较

左图突然的过渡比较生硬，感觉不连贯。右图添加不透明的淡入淡出效果后，感觉会更平滑、更有吸引力。

菜单打开比较

比起左图从下到上突然裁剪的菜单，右图利用淡入淡出动画可以提供更柔和、更流畅的过渡，这增强了用户对菜单的参与度。

这是一个使用淡入动画从一种状态过渡到另一种状态的常见示例。此外，它还使用了缩放和垂直移动进行动画处理，这将在以下的原则中进行介绍。

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

在过渡到下一个状态时，“Profile view”层无缝移动。以下图片提供了详细的分解。

通过利用两个“Profile view”层实现了这个流畅的过渡。通过引入缩放效果并在两个层之间平滑淡入淡出，过渡效果就像是单个标题层无缝连接了两个屏幕状态。

缩放可以为过渡效果引入动态、生动和有方向性的元素。例如，在切换到下一个屏幕时，可以将现有组件和图层从100%缩小到90%，并添加淡出效果。当显示覆盖层时，可以缩小当前屏幕，给人一种覆盖层从上层滑动下来的感觉，突出了状态之间的连接性。根据需要，可以向上或向下调整缩放值。缩放通常与第一个原则：淡入/淡出一起使用。

通过将缩放效果与淡入淡出相结合，可以使物体具有更动态、更生动的存在感，如本例所示。这个过渡具有优雅的移动效果，仿佛图层从上到下滑动进入和退出。

显示了如何使用缩放和轻微淡出来突出显示活动层和非活动层。

这两个示例展示了如何通过缩放过渡增强较大元素的效果。

左图在音乐应用中，专辑封面过渡时可以看到熟悉的缩放效果。随着音乐播放器覆盖层缩小，专辑封面平滑地缩小为缩略图大小。右图当打开覆盖层时，还可以缩小并显示前一个屏幕的轻微峰值，以暗示背景中有一层。这是iOS的默认覆盖层样式。

任何在产品中的动作、缩放或运动都内在地暗示了一个方向。这指示了产品的上下文，并是一种使过渡看起来一致的强大方式。记录详细的方向信息非常重要，例如元素何时向上或向下移动，覆盖层从哪一侧出现等等。设计良好的产品会保持与其上下文对齐的清晰和一致的方向性。

左图是典型的通过水平导航切换查看选项，可以通过滑动或点击切换按钮来切换视图。右图应用的布局略有不同，采用垂直导航。在这种情况下，上下滑动是更为合适切换查看选项的方式。

以上为不同应用滚动浏览帖子时的动画，它们的方向性是相反的。

左图如预期的那样，可以通过上下滑动来浏览帖子。右图考虑到这个应用具有垂直导航，滚动浏览帖子则是一个水平的动作。

即使在打开菜单或其他相关转换时，也可以暗示应用程序的整体方向性。

左图打开菜单暗示了应用程序的垂直浏览体验。右图菜单元素从左到右出现，表示应用程序的水平浏览体验。

合适的动画速度可以提供实际反馈和有意义的体验。过渡太慢可能会让用户感到厌烦，而过渡太快则缺乏意义。因此平衡速度至关重要。根据一些文章，100ms到500ms的速度对于大多数情况是理想和适合的。您可以将其作为指导原则，但可以根据产品进行自定义。这是从其他产品中脱颖而出的另一种方法。快速操作（例如本例中的切换滑块）对于以适当的速度向人们提供反馈非常重要。由于这是页内过渡，因此它应该比页到页动画稍快一些。

快速的操作，如本例中的切换滑块，对于提供适当的反馈速度非常重要。由于这是一个页面内的转换，它应该比页面到页面的动画稍快一些。

对于具有许多元素的页面到页面转换，需要有一些上下文，保障用户不会感到与每个状态脱节。这可能比页面内转换稍慢一些。然而，这并不一定意味着降低动画速度。适当的速度仍然至关重要，以确保您的产品不会感觉慢。

当转换多个元素时，根据它们的重要性对它们进行排序，帮助用户集中注意力在关键交互上。不要同时转换所有元素，而是按优先级顺序进行转换。将相似的元素分组，并对这些组进行排序。无关的组可以被完全隐藏，以保持对关键部分的关注。

如果屏幕上的所有元素同时动画化，会让人感觉繁忙和复杂。这就是为什么它有一个按重要性优先的层叠转换。在这个应用程序中，主要的元素应该是“个人资料视图”和支持图表，因为这些元素存在于两种状态中。然后次要的元素，这些元素不如主要元素重要，可以紧随其后。

音乐应用程序在折叠播放器视图时具有复杂的过渡效果，我们只需关注封面和标题层就可以实现无缝过渡。您可以在下图中看到更详细的细分。

左图动画展示了播放器覆盖层如何最小化，现有的音乐标题和播放器元素通过向下滑动到底部而消失。右图屏幕最小化后，新的标题层出现，这样就不会分散用户对播放器中的元素和封面缩放动画的注意力。

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

这个例子包括两部分。首先，它展示了如何制作这个社交媒体应用屏幕的多个图层。其次，评论覆盖层从底部滑入，同时现有屏幕缩小并引入暗背景层——应用中的最低层。

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

正如方向性原则中强调的那样，这两个应用具有不同的导航结构。通过超越屏幕区域并理解转换和移动的起源，可以掌握整体的空间结构。建立这样的空间框架可以显著丰富产品用户体验的独特性。

当我们继续探索过渡动画的复杂世界时，很明显微小的细节如何对用户体验产生重大影响。这里呈现的例子和原则可以作为基础，但您可以从您日常与现有应用程序和产品的互动中获得自己的灵感。正是通过这些个人经验，您可以学习打造自己独特的动画风格，并为用户提供独特的体验。拥抱这些原则，尝试您每天遇到的东西，并观察您的创作如何获得生命。