动态设计：实用指南
设计系统、动态设计
发布日期2023年11月15日
本文翻译自@Dongkyu Lee的文章并引入部分自己的思考
https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面 ，不仅能引导用户体验数字产品的，还能增强用户对信息的感知。
眼睛生理学知识
视锥
视锥具有对三种不同波长的光敏感的光感色素。视网膜大约由7百万个视锥组成。当只有视锥在工作时（阳光下），称为光视觉。当视锥和视杆都在工作时（黄昏），称为中视觉。有色视觉缺陷的人可能缺少或功能异常的视锥。
视杆
视杆是一种在光照水平较低时工作的光感受器。视网膜大约由1亿2千万个视杆组成。
我们的周边视觉（具体来说，通过人类视网膜中的视杆细胞）负责检测运动。从进化的角度来看，我们能够检测到视野中心之外的运动是人类的一大优势：我们可以识别危险并保护自己。但这意味着我们对运动的物体很敏感，容易被任何类型的运动分散注意力。这就是为什么用户界面中的运动很容易变得烦人：很难停止关注它，而且，如果与手头的任务无关，它会大大降低用户体验 。
UI 动效的一大优点（也是缺点）是它能吸引用户的注意力。
动态设计的作用
提高连贯性
连接场景(页面转场)
视觉吸引/引导
提供反馈
当以微妙的方式使用动画时，它可以帮助用户建立系统如何工作以及如何与其交互的一个心理模型。当动画只是在过渡时打发时间，那么动画对于用户体验的重要性就不那么重要了（事实上，正是这些停机动画经常让可用性测试的参与者感到沮丧）。动画可以用来提供可用性，而不是使用动画来提供表面级的消遣（很快就会变得乏味）
在产品设计中，动画和动效的重要性不言而喻。正如尼尔森诺曼集团所强调的，它们不仅吸引注意力，增加用户的享受，而且让我们的产品感觉新颖和现代化。当动画足够精细时，它可以为用户提供清晰的操作指引，使界面更易于使用， 提高产品整体的可用性。
由于动效起着至关重要的作用，我们对它们的重要性心知肚明。然而，设计完美的动画是一项复杂的工程。挑战在于找到细微和强调之间的恰当平衡。（帮助用户的同时又不分散用户的注意力）。
面我们通过一些例子展示过渡动画的原则，这些原则都是相通的，不同的产品都可以借鉴。
这些方式并不是僵化的规则，而是创造新产品时可以考虑的因素。可以将这些视为过渡动画的简单指南。
六大过渡动画设计策略
使用透明度进行淡入淡出效果
通过缩放增加动画的活力
保持动画方向的一致性
控制好动画的速度
明确动画内容展示的优先级、顺序、分组
通过动画建立页面空间感
1.使用透明度进行淡入淡出效果
使用透明度进行淡入淡出是一个基本但又强大的原理。仅仅运用这一技术就可以产生显著的差异。 在屏幕间过渡时，我们可以通过淡出无关元素并让下一部分内容淡入，以提供简洁的反馈。
例子：1-1切换过渡比较
（见左图）突然的过渡给人僵硬的感觉，而右侧图示通过添加透明度的变化效果使整体感觉更平滑，更顺畅。
例子：1-2菜单打开对比
例子 1-2 左图所示的菜单从下到上的突然切入相比，右图所示的渐变动画使菜的的入场更加柔和、更流畅。
例子 1–3
这是一个使用淡入动画从一个状态过渡到另一个状态的例子。此外，它还使用了缩放和垂直移动进行动画处理，这将在后面的原则中进行介绍。
作为一种高级使用案例，这种处理方式可以无缝衔接两个屏幕层或序列之间的交互。（例如页面转场，跳转）通过使用这种方法，用户几乎无法察觉到场景的加载时长。
让过渡更加自然、轻松、流畅。许多成功的产品都采用这种策略以提升用户体验。
例子 1-4 动画拆解
例子 1-4中“概览视图” 卡片在过渡到下一状态时无缝衔接。下面我们来拆解一下这个动画的过渡细节。
例子 1-5
变化过程左 由小变大+显示隐藏到
右 由中等大小变大+隐藏到显示
这种流畅的过渡是通过利用两个“剖面视图”层（小层和大层）来实现这种流畅的过渡。通过结合缩放效果并在两层之间实现平滑淡入淡出，过渡看起来就像一个单一的小卡片层放大一样。
2. 通过缩放增加动画的活力
“渐隐缩放” —— 缩放效果的常见用途
使用渐隐效果的缩放通常用于动画和视频编辑，让某些元素更具生命力，吸引观众的注意力，或者在不同的场景或元素之间平滑过渡。它涉及到对象的透明度和大小同时变化。
这创造了一个动态、引人入胜的视觉效果，可以增加设计的深度和趣味性。
例如，一张图片可以从小而淡开始，然后逐渐放大并变得更不透明，以创造出一种“放大”效果。这种技术可以使内容更具吸引力，交互性和专业外观。缩放通常与第一个原则：淡入/淡出一起使用。
例子 2–1结合缩放效果与渐隐效果
缩放效果与渐隐效果的组合，可以让我们页面具有生命力。这种过渡具有优雅的动作，仿佛各层从上到下轻轻滑进滑出一样。
例子 2–2 过度的例子
（左侧）是文本层上使用缩放效果的例子。图像展示了如何通过文本的缩放和轻微的淡出来展示当前激活的菜单。
（右侧）的图像也展示了如何通过缩放文本和卡片层来实现生动的过渡。
2-3 通过缩放过渡来强化元素内容
（左） 这是一个音乐播放器缩放的例子。当音乐播放器覆盖层缩小时，专辑封面会平滑地缩小到缩略图大小。
（右）当打开一个覆盖层时，缩小了前一个屏幕，以暗示背景中有一层。这是iOS中常见的默认覆盖样式。
3. 保持方向的一致性
产品中的任何移动、缩放或动作都在本质上暗示了一个方向。
这表明了产品的上下文的关联性，并且是使您的过渡看起来一致的有效方法。记录详细的方向信息是非常必要的，比如元素是向上还是向下移动，你的覆盖层从哪一侧出现，等等。设计良好的产品会保持与其菜单相一致的清晰且连贯的方向性。
3-1内容方向与菜单方向相同
(左侧）使用水平导航切换查看选项是典型的社交媒体应用行为。这样，我们就可以左右轻扫或点击切换按钮来切换视图。
(右侧）这款应用采用了稍微不同的垂直导航布局。在这种情况下，通过上下滑动来切换查看选项。
图 3-2
在这里，当滚动浏览内容时，它们的方向性与导航方向是相反的。（内容方向与导航方向相同时会对用户产生困惑，当前操作是滚动了内容还是操作到了导航）
（左边）不出所料，我们可以通过上下滑动来浏览帖子。
（右侧）考虑到这个应用程序有垂直导航，滚动浏览帖子将是一个水平操作。
3-3
图3-3 即使在打开菜单或其他相关过渡时，也能始终暗示应用程序的整体方向性。
（左图）菜单元素的出场顺序从上至下依次显示，同时也暗示了应用的垂直浏览体验。
（右图）菜单元素从左到右依次显示，显示了应用程序的横向浏览体验。
4. 控制好动画的速度
合适的动画速度会提供实用的反馈和有意义的体验。过慢的过渡会让用户感到厌烦，而过快的过渡则缺乏意义。因此，平衡速度至关重要。一些文章指出，100 毫秒至 500 毫秒的速度是理想的速度，适合大多数情况。我们可以将它作为指导原则，但也可以根据自己的实际情况进行定制。这也是创造与众不同产品的另一种方法。
4-1滑块切换
图 4-1快速操作必须有适当的速度，以便向用户提供反馈。由于这是页面内的过渡，速度应略高于页面间的动画。
4-2
页面之间的转换，由于页面到内包含许多元素，所以需要有一定的上下文关联，这样我们在每个状态间切换时不会感到断裂。这可能比页面内的过渡稍微慢一些。然而，这并不意味着我们需要降低动画速度。适当的速度仍然是关键，以确保我们的产品不会给人感觉很慢。
5. 明确动画内容展示的优先级、顺序、分组
在过渡多个元素时，按照它们的重要性进行排列，以帮助用户专注于关键交互。不要一次性展示所有元素，而是按优先级排序。将类似的项目分组，然后对这些分组进行排序。
5-1
如果这个屏幕上的所有元素都同时播放动画，就会给人一种繁忙和复杂的感觉。这就是为什么它采用了按重要性排序的层叠过渡。在这个屏幕上，主要元素应该是 "概览试图 "和辅助图表，因为这些元素在两种状态下都存在。然后次要元素紧随其后，它们的重要性低于主要元素。
5-2
图5-2音乐应用在最小化的过程感觉起来很复杂。我们可以通过简单地关注封面和标题层来实现无缝过渡。我们在下面的图片中看看更详细的分解。
5-3动画拆解
(左图）这个动画显示了播放器覆盖层如何最小化。现有的音乐标题和播放器元素只是通过向下滑动消失。
（右图）在屏幕最小化后，新的标题层延迟出现。这样不会分散播放器中元素和封面缩放的注意力。不会导致一瞬间关注点太多。
6. 建立页面空间感
尽管用户交互区域仅限于设备屏幕，但设计可见框架之外的“无形”空间是至关重要的。建立空间性可以帮助用户形成产品的心理模型，从而增强他们的体验。我们通常使用多个功能层来为平面屏幕引入深度和空间感。高/中/低层
6-1
图 6–1 这张图详细地展示了这款应用内容的关联性。还向我们展示了这个应用中的层级由那些部分组成，以及当播放器最小化时，过渡是如何发生的。
6-2
图 6-2这个例子包含两部分。首先，它展示了这个社交媒体应用屏幕的多层是如何制作的。其次，在现有屏幕缩小的同时，评论叠加层从底部滑入，并引入深色背景层--这是应用程序中的最底层。
以下示例具有相同的内容属性，但使用不同的空间模型为产品体验创造不同的感觉
6-3平铺左右滑动/平铺上下滑动
图6-3如在同一方向性原则中所强调的，这两个应用程序具有不同的导航结构。通过超越屏幕区域并理解过渡和运动的方式，我们可以掌握总体空间结构。构建这样的空间框架可以丰富产品用户体验的独特性。
在我们探索错综复杂的过渡动画世界的过程中，我们发现看似微小的细节却能对用户体验产生重大影响。这里介绍的示例和原则大家可作为基础，也可以从在现有应用程序和产品的日常互动中汲取灵感。通过这些亲身经历，我们可以制作自己独特的动画风格，为用户提供独一无二的体验。
参考文献和进一步阅读
