在产品设计中，动画和运动的重要性不可低估。正如尼尔森·诺曼集团(Nielsen Norman Group)所强调的，它们不仅吸引注意力，还增强用户的愉悦感，让产品显得新鲜和现代化。当动画足够复杂时，它可以为用户提供清晰的反馈，使界面更具直观性。
特别是在产品设计中，过渡动画至关重要，因为它们可以平稳地引导用户从一个阶段过渡到下一个。它们使产品更容易使用，更有吸引力，连接不同的步骤，提高整体产品质量。
由于动画和运动起着至关重要的作用，产品团队都意识到它们的重要性。设计师会将它们呈现为原型，以在发布前演示和测试他们的产品。然而，设计完美的动画是一项复杂的工作。挑战在于找到细微和强调之间的平衡。虽然有许多在线资源和文章深入探讨动画的复杂性，但令人惊讶的是，很多产品在成功实施动画方面还存在不足。
本文专注于过渡动画。其目标是展示过渡动画的原则，并提供基础、紧凑且可以立即应用于任何人设计过程中的示例。这些见解并非板上钉钉的规则，而是新产品创建的指导性考虑因素。请将其视为对过渡动画艺术的简明实用指南。
实现更好的过渡动画六个原则：
1.淡入淡出的透明度
2.缩放以增加活力
3.保持一致的方向性
4.平衡速度
5.确定优先级、排序和分组
6.建立空间感
1.淡入淡出的透明度
淡入/淡出
设置淡入淡出的透明度是一项基本但强大的原则。仅使用这一技巧就可以产生显著的影响。当从当前屏幕切换到下一个屏幕时，可以通过淡出无关元素并让下一部分渐入来提供简洁的反馈。可以通过在任何设计/原型工具中将透明度值从100变为0（或从0变为100）来实现这一效果。这种过渡效果有助于提高用户体验，使界面切换更加流畅和自然。
图1-1
图1-1
切换过渡效果对比。突然的过渡效果感觉不连贯（见左图），而添加透明度效果则更加流畅和吸引人（见右图）。
图1-2
图1-2
菜单打开的对比。与左图所示的突然自下而上地裁切菜单不同，使用淡入动画提供了更加温和和流畅的过渡，如右图所示。这增强了用户与菜单的互动。
图1-3
图1-3
这是一个常见的示例，使用淡入淡出动画来过渡从一个状态到另一个状态。此外，它还使用了缩放和垂直移动进行动画处理，这将在接下来的原则中详细介绍。
作为一个高级用例，这种技术可以在两个屏幕层或序列之间实现无缝的互动。通过使用这种方法，场景过渡对用户来说几乎是不可察觉的。许多成功的产品采用这种策略以提升用户体验。
图1-4
图1-4
在切换到下一个状态时，“个人资料视图”层平滑地移动。下图中可以找到详细的分解说明。
图1-5
图1-5
这种流畅的过渡是通过利用两个“个人资料视图”层（小和大）实现的。通过在这两个层之间加入缩放效果，并在它们之间平滑地淡入淡出，过渡看起来就像一个单一的标题层无缝地连接了两个屏幕状态。
2.使用缩放增添生动感
渐变缩放--缩放效果的常用用法
缩放引入了过渡中的动态、生动感和方向性元素。例如，在切换到下一个屏幕时，可以将现有的组件和界面从100%缩小到90%，同时附加淡出效果。例如，在显示叠加层时，可以将当前屏幕缩小。这给人一种叠加层从较高层滑动而来的印象，突显了状态之间的连接性。可以根据需要上下调整缩放值。通常，缩放与第一个原则一起使用：淡入/淡出。
图2-1
图2-1
在淡入淡出效果中加入缩放效果使物体呈现出更加动态和生动的存在感，正如这个示例所演示的那样。这个过渡具有一种优雅的动态，就好像界面从顶部到底部滑动进出一样。
图2-2（1）
图2-2（2）
图2-2
这里是一些在文本层上使用缩放效果的示例。
图2-2（1）展示了如何使用缩放和轻微淡出来突出活动和非活动层。
图2-2（2）还展示了如何通过缩放文本和卡片层来实现生动的过渡效果。
图2-3（1）
图2-3（2）
图2-3
这两个示例展示了如何通过缩放过渡来增强较大的元素。
图2-3（1）在音乐应用程序中，可以在专辑封面过渡时看到常见的缩放效果。随着音乐播放器叠加层缩小，专辑封面平稳地缩小到缩略图大小。
图2-3（2）在打开叠加层时，还可以将其缩小，显示前一个屏幕的轻微突出，以暗示背景中有一层。这是iOS的默认叠加层样式。
3.保持一致的方向性
产品中的任何移动、缩放或动作都自然地暗示了一个方向。这表明了产品的上下联动，是使过渡看起来一致的强大方式。重要的是记录详细的方向信息，比如元素是向上还是向下移动，叠加层是从哪一侧进入等等。设计良好的产品会保持明确和一致的方向性，与其互动相匹配。
图3-1
图3-1
（左）在典型的社交媒体应用程序中，使用水平导航切换浏览选项是一种常见行为。这样，可以滑动或点击切换视图。
（右）另一方面，这个应用程序具有稍有不同的垂直导航布局。在这种情况下，上下滑动是切换浏览选项的方式。
图3-2
图3-2
在这两个应用程序示例中，当滚动浏览帖子时，它们的方向性是相反的。
（左）正如预期的那样，可以通过上下滑动浏览帖子。
（右）考虑到这个应用程序采用垂直导航，浏览帖子将是水平操作。
图3-3
图3-3
即使在打开菜单或其他相关的过渡时，也可以始终暗示应用程序的总体方向性。
（左）打开菜单意味着应用程序的垂直浏览体验。
（右）菜单元素从左到右出现，表示应用程序的水平浏览体验。
4.平衡速度
适当的动画速度提供了实际的反馈和有意义的体验。
过渡速度过慢可能会让用户感到厌烦，而过快的过渡则缺乏意义。这就是为什么平衡速度非常重要。根据一些文章，速度从100毫秒到500毫秒是理想的，并适用于大多数情况。可以将其作为指导原则，但需要根据实际产品进行自定义。这是创建与其他产品不同的独特产品的另一种方式。
图4-1
图4-1
快速操作，比如这个示例中的切换滑块，非常重要，因为它需要适当的速度来为人们提供反馈。由于这是页面内过渡，所以它应该比页面之间的动画稍快一些。
图4-2
图4-2
对于具有许多元素的页面到页面的过渡，需要提供一些上下文，以使人们不感到与每个状态断开连接。这种过渡可能会比页面内的过渡稍慢一些。但这并不一定意味着要减慢动画速度。适当的速度仍然至关重要，以确保产品不会感到缓慢。
5.确定优先级、排序和分组
图5-1
图5-1
如果屏幕上的所有元素同时进行动画，那么它会显得繁忙和复杂。这就是为什么它采用了按重要性优先级排序的级联过渡。在这个应用程序中，主要元素应该是“个人资料视图”和支持图表，因为这些元素存在于两个状态中。然后是次要元素，它们比主要元素不那么重要，可以随后进行过渡。
图5-2
图5-2
在折叠播放器视图时，音乐应用程序的过渡似乎较为复杂。可以通过简单地专注于封面和标题层来实现无缝的过渡。在下图中看到更详细的分解。
图5-3
图5-3
（左）这个动画展示了播放器叠加层如何最小化。如你所见，现有的音乐标题和播放器元素通过向下滑动到底部来简单地消失。
（右）在屏幕最小化后，新的标题层出现。这样就不会分散注意力，不会影响播放器和封面的缩放动画。
6.建立空间感
尽管用户的互动区域限制于设备屏幕，但设计可见框架之外的“无形”空间至关重要。建立空间感有助于用户形成对产品的心理模型，提升他们的体验。通常，设计师使用多个功能性层来为平面屏幕引入深度和空间感。
图6-1（1）
图6-1（1）
图6-1
这张图示详细展示了音乐应用程序的上下互动。它描述了该应用程序中的功能层是如何组成的，以及当播放器视图折叠并显示最小化视图的概览屏幕时，过渡是如何发生的。
图6-2（1）
图6-2（2）
图6-2
这个示例分为两部分。首先，它展示了这个社交媒体应用程序屏幕的多个层是如何构建的。其次，评论叠加层从底部滑入，同时现有屏幕缩小并引入了深色背景层——这是应用程序中最底层的层。
除此之外，所有具有方向性移动的层和元素都属于空间性。以下示例具有相同的互动和层元素，但使用不同的空间模型来为产品体验创造不同的感觉。
图6-3
图6-3
正如方向性原则所强调的，这两个应用程序具有不同的导航结构。通过超越屏幕区域并理解过渡和移动的起源，人们可以掌握总体空间结构。构建这样的空间框架大大丰富了产品用户体验的独特性。
在我们探索了复杂的过渡动画世界之后，显而易见的是，看似微不足道的细节对用户体验有着重大影响。这里提供的示例和原则是一个基础，但可以从与现有的应用程序和产品日常互动中汲取灵感。通过个人经验，可以学会打造自己独特的动画风格，为用户提供独特的体验。掌握这些原则，尝试日常遇到的事物，看着创作逐渐展现出自己的生命力。
精选文章：