动效设计的质感表达- 大数跨境

天星数科用户体验

2020-11-27

1.动效的质感

随着智能终端产品的性能发展。界面动态设计的占比越来越大，成为完善的用户体验不可或缺的一环，那么如何让我们的设计的动效更加有质感呢？可以从时间，速率，空间，运动理念，运动方式等方面来表现。动效设计不只是只是动而已，作为设计师我们需要让动效更加真实自然，需要洞察更多的动效细节。通过对动效细节的把控去创造真实自然的动态体验，并根据产品品牌特性去建立其动效理念。

1.1 质感表达-时间

时间是动效的核心元素，我们可以通过调节运动时间的长短来表现物体的运动性格。时间越少，物体运动越快速可感知的运动细节越少，否则反之。Bristow曾提出，眨眼是人体进化的潜意识动作，大多数人每分钟眨眼15次，眨眼平均持续100-150毫秒；所以我们常把这个时间段定义为动效的基本时间单位，从而倍速递增。

1.2 质感表达-速率

真实世界里，物体由于重力摩擦力等关系，自然运动物体都是是非匀速运动，物体的运动动效使用更应该接近自然运动状态。在相同时间以及运动效果下，通过改变速度曲线，俩元素在接近运动中所呈现的物体质量也有明显的差异，运动曲线较陡峭且倾斜，从而导致元素的质量更重，冲击感更强；反之较平缓的曲线元素运动则较大轻盈。

1.3 质感表达-空间

时间和速度组成了位移，x，y，z三轴的位移组成了物体的运动空间，物体在空间中的运动也应是自然的。现实空间里，物体存在近大远小的原理，运动则有近快远慢。在动效设计时，处理和空间相关的话题时，我们需要考虑两方面的因素：

视差：例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速度，离汽车越远时，速度就越慢。动效设计中同样存在这个原则，元素的空间距离会影响动画效果，从而影响动效设计的决策。
大小：一致远处的物体小，近处的物体大的原则。

1.4 质感表达-运动调性

不同的运动理念会给物体带来不同的质感表现。例如活泼有活力的物体在运动的表现上会不同柔软Q弹，就需要通过回弹挤压来实现自身的质感。而运动理念生硬的物体则相反。运动理念与产品品牌调性有关，根据品牌特性我们可以提取一些适合的运动理念或在自然理念中吸取灵感，将其应用在自身的产品上可以更好地体现品牌价值。

1.5 质感表达-运动方式

运动方式依附于运动理念，是产品运动质感的一种表达方式。例如运动路径是曲线还是直线？空间的景深程度是如何的？可以分辨空间感吗？整体方式是基于效率还是表现力？在这一块，需要也。根据品牌调性及产品属性去考虑。

2.质感调节

因为运动曲线的存在，动效才会表现的如此自然。我们可以通过曲线的方式进行运动速度调节，从而实现想表达的动效调性。在影响运动质感表达的部分速率的调节占了比较大的比重，可能会引发下运动曲线基础知识刹车好的理解曲线。

速度曲线

x，y轴分别表示的是时间与速度。观察下图曲线则可以发出物体初始速度为0呈静止状态，随后慢慢开始加速和速度可以看到整段运动其实就是我们显然的缓动运动（起点和终点慢，运动过程快）。

对于速度曲线我们可以通过曲线手柄来控制运动计数器的加速度，设定速度需要百分之百的加速度即可达到最高速度，数值即代表代表加速的幅值曲线呈现的陡峭程度就越陡峭。

速值曲线

x，y轴分别表示的是位移与时间。该曲线代表着物体运动速率的分布情况，也就是速度等于=物体运动的位移/物体运动距离。所花的时间。

使用建议

对于不同的运动曲线（速度/数值），我们需要充分了解其曲线符号。可以根据设计场景去选择适合的运动曲线。AE动画中部分无特定数值单位的动画帧，例如蒙版路径，我们只能通过速度曲线进行调节。使用弹性表达式需根据速度大小去调节弹性强度。在UI交互动效的设计场景，数值曲线适应于落地开发的贝塞尔曲线插值器。数值曲线是C4D动画的替代函数曲线模式，在C4D中无法调节速度曲线。

表达式应用

在我们动画设计时常用到弹性表达式，这能大大减少我们打关键帧的数量。我们只需控制振幅，频率和衰减三个数值就可以调节出适合的弹性动画效果，除表达式所设置的弹性频率，衰减度外；速度也决定着弹性的强度，我们只需要根据速度调节自己的弹性效果即可。（amp表示振幅，freq表示频率，decay表示衰减）

安培= 1;

频率= 4.0;

衰减= 4.0;

n = 0;

如果（numKeys> 0）{

n =最近键（时间）.index;

if（key（n）.time> time）{n--;}

}

if（n == 0）{t = 0;}

else {t = time-key（n）.time;}

如果（n> 0）{

v = velocityAtTime（key（n）.time-thisComp.frameDuration / 10）;

值+ v * amp * Math.sin（freq * t * 2 * Math.PI）/Math.exp（decay * t）;

}

其他{值

3.运动的类型

通过分析我们对运动曲线模式的了解更进了一步，然后让我们结合案例探究下不同运动曲线类型的含义以及应用方式。减少大家在动效设计过程中的公式化硬思维，促进自身针对动效的感知能力。

缓入曲线

缓入运动即加速运动，物体运动的时候都需要一个加速过程，并不会立即达到速度的最高峰。当物体加速飞出屏幕的时候，可以使用这种加速曲线，某些界面中被用户使用滑动手势甩出去的卡片。但是只有当运动对象需要完全离开界面的时候才会这么使用，例如，弹窗，通知等。元素将会一直加速至消失，并且知道用户该元素不会再出现了。

缓出曲线

缓出运动描述的是元素的减速运动。当元素从屏幕外运动到屏幕内部的时候，动效应该伴随一系列曲线的运动特征。从全速进入屏幕开始，速度降低，直到完全停止。减速曲线可以适用于多种不同的UI控件和元素，包括从屏幕外进入屏幕内的卡片，体积等。

缓动曲线

缓动曲线描述了动效的加速和减速的速度特征，替代的动效可以直接采用Material Design中级标准缓动，这是一种不对称的缓动类型，这种缓动的特征是开始加速快，然后稍稍缓慢地减速，这样会使用户更容易注意到整个变化的结果，曲线的末端进行适当的突出。这种缓动让元素成为了一种更加自然的物理质感。

弹性运动

在现实生活中，因为作用力与反作用力的存在，皮球触碰到地面会不断弹起，手推船，船就会离开岸边，这就是我们所说的弹性运动。弹性曲线由两个值影响着它，弹性阻尼以及振动频率。早在ios7中，苹果就已经大范围使用该类曲线，它能表现出明显的回弹感，就算运动无明显的回弹感其效果相比常规曲线实现的运动启动速度加快，并且会有更长的一段衰减距离。

4.理念的形成

现在越来越多的公司开始制定自己的设计语言/理念，像材料设计，IBM，IOS等。对于“动效”目前市面上大多数产品都有自己的动效规范，但并没有上升到语言理念因此对于我们设计师来说建立起自身的动效知识体系是至关重要的。避免以感觉去做动效设计，长期而是设计理论及方法论的沉淀，无论是产品乃至个人，建立符合自身条件的动效理论体系都是至关重要的。

结语

体验时代的来临，越来越多的设计师开始认识动效设计，也让动效所承载的意义愈发重要。从品牌传递再到体验优化我们需对动效细节进行不断的打磨，并建立起自身的动效知识体系，避免以感觉去做动效设计，逐步建立真正实用的，微妙的动效。

参考文献：

[1]徐千尧，徐迎庆。智能手机动效设计研究[J]。计算机辅助设计与图形学学报，2020,32（07）：1095-1100。

[2]动效设计标准与规范 https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

[3]动效细节设计https://www.zcool.com.cn/article/ZMTE4NzUzMg

文章中部分内容来源网络，仅用于知识的分享和交流，如有修改请联系删除。

【声明】内容源于网络

天星数科用户体验

FUX ( Xiaomi Financial UX Design) ,主要负责四个方面工作:产品用户体验设计与研究;品牌运营与平台服务设计;用户体验管理流程、规范制定与推行，方案评审与人员评定;设计文化与影响力构建。

内容 51

粉丝 0

天星数科用户体验 FUX ( Xiaomi Financial UX Design) ,主要负责四个方面工作:产品用户体验设计与研究;品牌运营与平台服务设计;用户体验管理流程、规范制定与推行，方案评审与人员评定;设计文化与影响力构建。

总阅读0

粉丝0

内容51