编辑指南:在产品同质化日益严重的今天，如何体现自己的差异？很多人认为动态效果是一个很好的突破，既能增加用户操作的舒适度，又能引导用户关注重要信息。那么，渡河能做好动态效果设计吗？这篇文章的作者已经表达了他对此的看法，并与您分享。

随着科技的进步，用户对产品细节的感知和批判程度日益提高，现在产品同质化越来越严重。此时，如何让产品差异化，脱颖而出，就成为了当下至关重要的话题。动态设计作为近年来的热门设计趋势之一，受到许多产品的青睐。

动力效应经历了很多讨论和验证，从最初的不被认识到现在的必要。动态设计不仅能增加用户操作的舒适度，还能引导用户关注重要信息，这只是动态设计诸多效果中的一小部分。优秀的动态设计可以赋予产品价值，给用户带来更高质量的用户体验。

那么如何才能做好动态设计呢？如何选择动态效果的落地方案？

以下是全文的提纲:

动效设计的意义与价值动效的作用交互动效的设计原则产品中的动效分类动效时长动效落地的N种解决方案

一、动态设计的意义和价值

运动设计是通过动态手段改善产品用户体验的过程。好的动态设计可以清晰地表达产品层次之间的关系，提高可用性和易用性，降低用户的认知成本，也可以展示产品的品牌特征和差异化。在某些情况下，动态效果很容易被认为是增加快感的东西，本身没有价值，所以往往被认为是可有可无的部分。

事实上，动态效果是一种更高级的设计表现形式。通过模拟现实世界的运动，建立手机虚拟世界与用户的认知关系，从而创造出符合用户认知习惯的操作体验。同时，不同品牌独特的品牌特征差异很大，相应的行为和动作也不同。因此，在品牌特征的影响下，动态效果设计会有很大的不同，这为塑造产品特征和品质奠定了重要基础

二，动态效应的作用

动态效果设计可以缓解等待带来的负面情绪，吸引用户的注意力，提高某个功能或活动的转化效果。对于第一次使用某个产品的新用户，可以告诉用户如何更快地完成复杂功能等操作。

2.1缓解负面情绪

在页面加载过程中，长时间等待会让用户感到焦虑和烦躁。比如系统错误警告和空状态下不灵活的文字显示会让用户产生莫名的挫败感和厌烦感。这时，加入有趣的动态设计，可以在一定程度上缓解用户的焦虑和烦躁，也可以促使用户喜欢产品。

作者:甄亚·卡拉佩提安

2.2引人注目

在产品设计中，动态效果设计可以使功能入口或按钮最大限度地吸引用户的注意力。但是如果整个页面有大量的动态元素，也会造成用户的视觉混乱，影响用户获取信息的速度，造成不好的体验，所以动态设计一定要适度。

2.3降低认知成本

好的动画设计可以帮助用户理解产品信息，可以利用动画和动画共同的叙事属性，解决静态图片和文字无法描述清楚的问题。同时，动态效果和交互的结合，可以给用户更强的代入感，让用户愿意花费精力去理解信息。相对于枯燥的文字和枯燥的图片，动态效果的融合更能降低用户的认知成本。

2.4有效指导

指导用户完成复杂且必要的操作步骤。在游戏设计中，特别强调“过程体验式指导”。比如在游戏新手训练中，会有声音和闪烁的光标作为傻傻的引导。只有根据提示完成指定的步骤，才能继续。还有奖励，收到后提示才会消失。

2.5用户行为转换

良好的用户体验促进用户贯穿产品，建立用户对产品的基本理解。同时也完成了新用户向老用户的转化。这时，产品需要用更多的手段来引导用户完成对产品更深层次的探索。这时候动态效果的目的是创造诱惑点，让用户有主动探索产品的欲望，从而完成用户转型。

2.6交互式串联

动效可以将不同级别的页面相互关联，避免用户在频繁的页面切换中迷失，也能够让用户快速理解页面之间的层级关系和跳转逻辑。动态效果可以关联不同级别的页面，避免用户在频繁的页面切换中迷失方向，使用户能够快速理解页面之间的层次关系和跳转逻辑。

三、交互效果的设计原则

说到动态效果的设计原则，首先想到的可能是迪士尼动画的十二原则，但并不完全适用于交互效果的设计。既然《迪士尼动画十二原则》不适用于UI领域，那么交互效果应该遵循哪些设计原则？让我们向您介绍交互效果的十二个设计原则

3.1慢动作

当用户触发一个元素引起交互事件时，对象元素的行为需要与用户的期望一致。

在动态效果的设计上，无论什么样的动作，都需要慢动作。慢动作可以使运动效果更加自然流畅，运动效果更加连续，更能满足用户的预期。

图A中的运动可以理解为匀速运动(直线运动)，非常机械和僵硬。图B中的动作增加了适度的弹性效果，让整个动作看起来更加和谐。

在交互效果的设计上，要避免使用直线运动，因为直线运动会使交互效果过于僵硬和明显，更容易分散用户的注意力。慢动作可以使交互效果和用户行为接近无缝连接和自然过渡。但是，要注意时间的控制。如果时间太慢或者太快，就会打破用户的预期，造成分心。同样，如果慢效果与产品整体体验不符，也会产生负面影响。也就是说，慢动作会在不同的场景中产生不同的视觉效果，给用户带来不同的体验。

3.2偏移和延迟

定义对象元素之间的关系和层次，主要用于元素的进出或场景切换。

这个原则使用户能够以自然的方式感知接下来会发生什么和界面元素之间的关系。上图中的例子可以告诉用户他们之间的层次关系，也就是上面两个和下面一个是分开的。上面可能是文字信息，也可能是简单的图片或者图形结构的内容，下面可能是按钮。

它可以在用户使用之前告诉用户对象元素之间的层次关系，可以理解为降低了用户的学习成本，提高了产品的用户体验。

3.3亲子关系

父子关系是连接界面中相关元素以增强可用性的一种原则。

在图中，顶部元素的大小和位置将随着底部元素的移动而变化。父子关系是建立接口中不同元素的属性之间的关系，从而生成它们之间的关系和继承关系。界面中的许多属性可以相互关联，比如位置、旋转、透明度、比例、形状和颜色等。

作者:IVYJHZH

3.4变形

当界面中某个元素的状态发生变化时，应该创建一个连续的过渡效果来表示状态的变化。

变形是一种很容易被用户捕捉和识别的效果。如下图所示，用户可以很容易地注意到“订阅”按钮形状变化的整个过程。这种形态转换非常容易吸引用户的注意力，能够有效传递整个事件的完整信息。

作者:彼得·阿鲁穆甘

这种转变就是将三种不同的状态无缝连接，将原本分散的状态完美融合，从而达到超越预期的目的。也就是说，转换原理可以无缝连接不同时间的信息状态，完成一个完整事件流的传输，使得连贯的效果更容易被用户接受。

3.5变焦

通过改变焦距来建立界面元素之间的桥梁和空之间的过渡。

焦距这个概念在摄像领域比较常见。图像的大小和距离由相机和对象之间的相对距离决定。有时候，我们无法判断元素的变化趋势。

例如，下图中的效果可以分为三种情况:

交互效果原理中的放大是指当相机和元素在空之间不移动时，空之间的变化效果。这个原理在苹果设备中最为常见。

尺寸在3.6 空之间

元素的进出用空之间的变化来表示。

空之间的纬度可以有效提升扁平化体验，有空感的抵离可以增强用户的心理预期。另外，空之间的维度也可以改善平面视觉中无法分层的情况，可以使同一平面的元素发生折叠。空之间有三种表示尺寸的方式:折叠翻转、浮动翻转和整体翻转。折叠翻转:可以理解为3D 空中元素的折叠或旋转效果

浮动翻转:让界面中的元素在进出时更有空感和神秘感。

整体翻转:使界面中的元素更加逼真和深入。

3.7视差

当用户滑动界面时，视差可以在2D 空中创建层次感。

视差是指不同的物体元素以不同的速度运动。在保持原设计完整性的前提下，让用户专注于主要操作内容，弱化用户对背景元素的感知。

这种视差效果允许用户在操作过程中清楚地区分各种元素之间的层次关系。相对于慢动元素，快动元素让用户感觉更近，慢动元素让用户感觉更远。

3.8克隆

当新元素与主要元素分离时，它们之间的内在关系就可以得到清晰的解释。

创建新的对象元素时，描述该对象元素的形状非常重要。单纯的透明或者改变颜色属性往往是不够的，需要融入一些仪式感。

作者:Mariusz Onichowski

在上述情况下，当用户将全部注意力集中到主元素上时，新元素从主元素上出现，然后用户自然会将注意力转向新元素。

3.9覆盖

当分层的对象元素堆叠在一起时，它们之间的关系空可以用相对位置的变化来描述。

覆盖通过堆叠弥补了平板空之间的分层不足。一般来说，在二维空空间中，元素的相对位置变化是通过排列它们的上下关系来传递的。

作者:陈家风

对于设计师来说，“层”的概念很明确，而对于用户来说，“层”的概念就有些模糊了。蒙版原理是通过层次之间的Z轴位置关系，将对象元素之间的空关系传达给用户。

3.10涂层

允许用户看到不是当前主要视觉的对象或场景，从而产生空的感觉。

掩蔽原理可以被认为是两种状态之间的转换。把他当成一个变化的过程，而不是静止的状态。静态设计只能表现出元素的朦胧状态，随着时间的变化，成为对象元素的朦胧行为。当行为发生时，非主要视觉元素变得模糊，从而突出主要视觉效果。

从上述情况可以看出，掩蔽原理是次级元素被半透明层模糊或覆盖的瞬间交互。蒙版原理往往采用模糊和叠加透明的方法，让用户感受到空中主次元素的层次关系。

3.11面具

当界面中的一个元素以不同的显示形式存在于不同的页面上时，这个原理可以使对象元素的显示过程具有连续性。

掩蔽原理可以理解为物体元素的形状和功能之间的关系。在交互效果原理上，遮罩是随时间变化的，但我们在界面设计中通常使用的遮罩是静态的，这与交互效果原理上的遮罩不同。这种根据遮罩原理无缝显示或隐藏元素区域的方式会产生连续的过度效果。

在上述情况下，通过改变顶部图片的形状和位置，将其转换为新页面中的相册。在不改变元素内容的情况下，通过掩蔽改变元素本身，既创造了连续性，又降低了用户的认知成本。动态效果以时间为基础，通过连续性、叙述性、关联性和可预测性提高可用性。在这种情况下，虽然对象元素前后的内容没有变化，但是位置和形状的变化足以让用户区分它是什么。

3.12数据变更

如果对象元素的值发生变化，使用动态连续变换可以获得更好的用户体验。

虽然文本和数字元素本身在界面上是可以改变的，但是看起来它们的变化并没有那么明显，所以不会被用户轻易察觉。如果我们给数字和文本元素添加动态变化，用户可以很容易地察觉到它们。

总结:数据变化可以向用户表达数字背后的含义，搭建与用户沟通的桥梁，以及数据变化的动态属性。

如果在加载界面的过程中，数字或文字没有变化，用户肯定会认为当前页面是静态的，如图A所示，违反了用户体验设计原则中的“系统可见性原则”，用户不知道发生了什么。如果数字或文本的变化以动态的形式呈现，用户可以直观地感受到这些信息的变化过程，同时也建立了数据与用户之间的沟通桥梁。例如，健身数据和股票数据都是动态变化的数据