前段时间在逛B站时无意刷到了大神Guoen关于「动效设计语言」的分享（https://www.bilibili.com/video/BV1qJ411v7jW），他通过自己对生活的观察和工作的总结，领悟出「用现象传达感觉，用感觉塑造气质」的核心理念，并从「自然现象」、「文明现象」、「心理感知现象」几个方面作了解释；之后又在知乎上看了他的专栏「动效干货」（https://zhuanlan.zhihu.com/p/31350812），进一步感受到了大神在设计思维上的过人之处，看完犹如醍醐灌顶，获益匪浅。但细想他所提及的切入点和案例可能比较高深，有一部分在我自己所涉及到的领域不大用得到，于是现在我在他所提炼的设计语言理论基础上，结合自己对设计的理解和对生活的观察，总结一些我的「动态设计语言」。

我所理解的设计语言是：我们在平时所看到的现象会传达一种感觉，我们把这种感觉组织成设计语言，之后再通过这种设计语言来模拟想要的效果，用这种效果再现之前所体会到的那种感觉。下面从以下这五大块内容来阐述：

===========多图警告===========

一. 物质

1.聚合&破碎

聚合会有产生、汇聚、重塑的感觉，

破碎会有破灭、结束、消失的感觉；

聚合&破碎

聚合通常可以用在一些比较高端、神圣的物品生成的效果中，例如游戏动漫中某些神器、光武的合成效果（案例来源：https://www.bilibili.com/video/BV1gb411873S?from=search&seid=13420209012272590921）；

粒子汇聚

破碎可以产生消散、湮灭的效果，例如复联中灭霸打了响指之后半数生灵的湮灭（案例来源：https://www.bilibili.com/video/BV1Sp411d7mf?from=search&seid=70666432352534953），还有小时候看的「铁甲小宝」中收集到假的和平星会化为粉末飘散等等。

破碎/湮灭效果

2.透明度

通过透明度的变化，可以让一个单独的个体在一个群组中突显出来或者隐退下去；

透明度-突显&隐退

很多时候让一个物体突然发生变化是很生硬的，这时候有种很好的操作是先让物体隐退下去，让其发生变化后再突显回来，这时候就很巧妙的让一种生硬的突变转换为一种舒适的渐变。生活中一个很常见的例子就是舞台剧中途需要转场时，会先让灯光暗下去，这时候完成场景和道具的调整后再亮起灯光；

隐退+变化

当透明度交替变化时就可以产生闪烁提醒的作用，透明度闪烁通常用于暗示该物体即将消失，例如「植物大战僵尸」中掉下的阳光一段时间没有点击收取就会消失，消失前的透明度交替变化就在提醒玩家去点击，除此之外还可以用在一些游戏中能量、金币等的消失提醒上。

透明度交替-消失提醒

3.发光

Guoen的理论中提到，发光可以产生升级、被赋予的感觉；

发光-升级

这种发光效果通常可以在动漫、游戏的升级进化中感受到。升级和进化通常伴随对象的变化，包括造型、颜色等，这时的发光就可以有和透明度隐退一样的优势：发光过程中的变化可以避免造型、颜色等的突变，从而转变为仅有外形轮廓的渐变；

宝可梦进化

在一片黑暗中的光芒还可以产生指引、方向感。

发光-指引

4.折射&反射

物体的折射可以带来神秘未知、多变、科幻的感觉，因为物体内部和外部的世界存在一定差异，会在视觉上造成错觉；

折射-玻璃

折射-水滴

水滴中折射出的微观世界与我们肉眼中的现实世界有很大区别 这种差异让人对接下去将发生的事情充满期待与好奇，并一直看下去（案例来源：https://www.bilibili.com/video/BV1D7411B71R）。

水滴折射转场

而物体的反射则有些区别，单一的镜面反射可以表现出科技感、质感，常见的手段就是扫光；

反射

反射-单一镜面

而复杂反射也可以表现神秘未知、梦幻多变的感觉，例如万花筒；

复杂反射-万花筒

事实上透明物体既可以发生折射又可以发生反射，具体就要看物体本身的折射率。反射主要用来呈现物体表面的质感，而折射主要用来展示物体内部或背后内容的特征。

折射&反射 对比

折射率

二. 动作

1.形变

物体的形变可以展现出弹性、轻松、可爱的感觉，duang～duang的；

形变-弹性/轻松/可爱

当物体的形变搭配上位移则可以彰显出力量感、速度感，xiu～xiu的；

形变+位移-速度感

形变+位移-力量感

Guoen之前提到一个关键点：物体越软就越幼稚可爱，相反越硬就越成熟稳重。这一点很重要，在后面的许多设计语言中都会涉及到。

可爱Q弹

2.缩放

物体可以通过放大和缩小来出现和消失；

缩放-出现/消失

通过交替缩放则可以起到强调突出的作用；

缩放-强调

Ps：很多人会将「缩放」和「呼吸」相混淆，实际上两者并不一样。个人认为，缩放和呼吸确实有交集，但是只有动作频率趋紧生物呼吸的缩放可以称之为「呼吸」，其他不在一个频率上的都仅为「缩放」，人如果按常见的缩放频率呼吸会很容易头晕缺氧～

这样呼吸容易晕～

3.呼吸

既然提到了呼吸，就来聊聊呼吸。个人认为只要是频率接近生物呼吸的动作都可以称之为呼吸，因此除了缩放，还可以是位移、旋转、透明度变化等等，呼吸效果可以产生规律性、持续循环的感觉，增加对象的生命力和生动性，有的时候呼吸也可以产生比较弱的提示；

呼吸-缩放

呼吸-位移

呼吸-旋转

呼吸-透明度

观察后可以发现，垂直方向上的位移呼吸可以产生悬浮的效果，而生活中常见的钟摆其实就是旋转的呼吸，平时在动漫、游戏中的呼吸则更为常见，例如王者荣耀中选择英雄的界面中，每一个英雄都不是死死站着不动的，而是伴随正常呼吸而产生的身体起伏和衣角、披风的摆动。

钟摆

衣角/披风摆动

生物呼吸

4.旋转

旋转可以表现不同的感觉，通过调整物体旋转的幅度、频率、旋转中心、衰减阻力等可以产生不同的效果，例如快频、有节奏的旋转可以产生强调、招呼的感觉；

旋转-强调/招呼

如果调低旋转中心，适当降低转动频率，并加入一定能量衰减，则让旋转产生摇摆、不稳定、调皮的感觉。

旋转-摇摆/不稳定

5.翻转

翻转也可以表现不同的感觉，例如一张卡牌在翻转后立即以相反的方向原路翻回，可以表现一种对立，内心os可能是我不要翻过去！

翻转-对立

例如手游「植物大战僵尸2」中的一个翻牌小游戏，通过翻牌可以将图案相同的卡牌对应的僵尸消除掉，而如果图案不相同，则卡牌会立即翻回，表示这次翻牌失败；

植物大战僵尸2翻牌小游戏

如果卡牌以正常的速度进行规律翻转，且正反面有明显区别，则可以表现出对比，让人感受到翻转后所产生的不同；

翻转-对比

如果卡牌在翻转前较为普通、视觉较弱，而在翻转后呈现较强的视觉效果，则可以在对比的基础上，突出一种揭秘、展示的感觉；

翻转-揭秘

例如卡牌游戏「炉石」中翻出牌以后，通过酷炫的光效告诉你这是一张很棒的牌，这就是典型的揭秘展示。

炉石翻牌展示

6.抖动

物体的抖动也可以产生不同的感觉，当对一个物体进行一个动作，然后物体被动产生抖动，可以产生一种不稳定、刺激的感觉；

抖动-不稳定/刺激

例如iPhone桌面长按app图标后，图标会开始抖动，同时图标左上角出现删除icon，这时就在告知用户此时的图标进入一种不稳定状态，此时点叉后会删除这个app哦；

长按图标进入不稳定状态

而当对一个物体进行一个动作后，物体主动产生抖动，可以产生一种错误、提醒、突显的感觉；

抖动-错误提醒

例如iPhone的输密界面，在输错密码的时候，代表隐藏密码的圆点就会抖动几下，提醒用户密码错误，这是一种高效的反馈方式，比在上方显示「密码错误」几个字更有用更有趣更直观；

iphone输密错误的抖动

当一个物体先进行抖动，然后作出其他动作时，这种抖动则可以产生一种紧张、蓄力、预告的感觉；

抖动-紧张/蓄力/预告

例如手游「跑跑卡丁车」，在比赛开始倒计时即将结束时，选手的卡丁车会开始抖动，除了表现紧张的氛围、产生卡丁车正在蓄力准备起跑的感觉以外，这一抖动还可以起到提醒可能正在发愣的玩家的作用。

跑跑卡丁车起跑抖动

7.跳动

物体的跳动可以表现出活泼、招呼、提醒的感觉，同时物体的跳动如果搭配本身的形变效果可以进一步呈现物体的软硬程度，重复一下刚才的关键点：物体越软就越幼稚可爱，相反越硬就越成熟稳重；

跳动-软

跳动-硬

例如苹果电脑桌面的Dock栏的应用启动效果，相应图标会弹跳几下，这种不带任何形变的跳动不仅可以感受到这个图标在跟你打招呼说「我正在启动哦」，还可以感受到苹果品牌所透露出的成熟稳重。

Dock栏启动效果

三. 力学

1.缓动

缓动是我们平时在动效设计中常用的技巧，它可以让动效显得更逼真更生动，可这是为什么呢？因为现实世界中就到处存在这缓动现象，例如汽车由静止启动前进时，由于阻力和惯性的影响，不能立即加速到预期的车速，因此会慢慢加速，当汽车在高速状态下刹车停下来时，也是因为阻力和惯性，它不能瞬间刹下车来，需要渐渐慢下来直到停止。

因此缓动呈现的是物体速度变化的快慢，即加速度。缓动可以分为缓入和缓出，缓入表现出启动、预备的感觉，缓出表现出疲劳、消耗的感觉；

缓入

缓出

缓入+缓出

2.蓄力

蓄力字面意思即物体为之后的动作蓄积力量，蓄力可以有多种形式，之前提到的动作抖动就是常见的蓄力，通常用在物体爆炸前；在一些游戏、动漫中经常可以看到一些夸张的不符合物理原理的蓄力形式，例如动画片「猫和老鼠」中汤姆在起跑前会在原地快速地跑几下，虽然没有发生位移，但是观众可以隐约感觉到它蓄势待发，等会一定会跑的飞快；

猫和老鼠-空跑蓄力

这里我要提炼一种特殊的蓄力方式，我将其称之为「反向预动」：当我们抡起锤子准备砸墙时，不会从当前位置开始砸，而是会往相反方向抡，再使劲向前砸去；我们对比急行跳远和立定跳远，前者由于可以通过助跑蓄积更多的动能，因此往往比后者跳的更远；总结一下反向预动本质就是为了积累更多的加速空间，一个人或一个物体的力量有限，所以运动的加速度也很有限，但是如果有更多加速空间，就可以在运动的起始位置具有更大能量和更快速度。

反向预动可以彰显物体的力量感和速度感，同时由于反向预动具有方向性，因此我们可以通过这一蓄力动作预判出物体接下来的动作，反向预动也可以用在位移、旋转、缩放等各种动作中，但是通常会用在结束离场时；

反向预动-位移

反向预动-旋转

反向预动-缩放

游戏攻击动作中的反向预动

3.惯性过冲

惯性过冲可以说与反向预动正好相反，也可以用在位移、旋转、缩放等各种动作中，表示物体运动时用力过猛收不住，通常用在进场开始时，可以产生能量过大、有趣的感觉；

惯性过冲-位移

惯性过冲-旋转

惯性过冲-缩放

惯性过冲的组合玩法

惯性过冲的出场方式

重复的惯性过冲可以产生回弹效果，但是这种来回惯性过冲的幅度需要逐渐衰减；

回弹效果

4.阻力

摩擦力就是一种典型的阻力，但是除此之外还有很多种阻力形式，但是它们都在对抗物体的运动，从而造成物体的运动效果不符合我们的主观预期；阻力可以产生固执、粘性、残留的感觉；

阻力-固执

阻力-粘性残留

当下许多app都会通过下拉页面的形式来刷新，在这种下拉动作中通常会加入一定阻力，让人感觉越往下拉，越拉不动，这个效果可以及时给用户的下拉动作一个反馈，并且增加动作动效的生动性；

下拉阻力

很久之前手机版QQ就出现了一个「去除小红点」的设计，对众多具有强迫症的用户来说就是福音，用户可以把小红点拖出去，松手后小红点就会伴随着一阵烟雾消失了，这个动效加入了一定的阻力和粘性效果，这样设计的主要原因是小红点这个UI元素的面积太小了，用户拖动时几乎无法看到这个小红点，因此加入阻力和粘性效果可以在拖动过程中增加小红点的展示面积，让用户可以获得这一动作的反馈，这样还可以避免用户误操作意外拖动导致去除小红点。

手机QQ去除小红点

四. 相对运动

1.碰撞

碰撞是指两个以上的物体以一定速度相遇，并按照各自的物理特性做出反应的过程。碰撞可以传达出对立、抗争、矛盾的感觉，例如这样的碰撞就可以说毁灭性的超强对抗，这种冲击是直击人心的，让人心跳加速、呼吸急促...

超强碰撞！

当然跟之前Guoen所提出的一样，碰撞在不同物体的软硬特性上也会呈现一定规律：「越软越轻松，越硬越紧张」，可以想象拿两个玻璃杯砸在一起，即便是不考虑会不会碎，这种硬质物体的碰撞也会让你的心咯噔一下，相反将两个抱枕扔一起，不论多大力都不会让你为此担心；

碰撞-软

碰撞-硬

单纯的碰撞就足以表现出一种对抗性，若以此为铺垫再搭配一些爆炸效果则可以呈现出较之更甚的视觉冲击感。

碰撞+爆炸

2.联动

联动是指若干个体按照一定顺序、节奏完成同一动作，整体就会形成具有韵律感的联动效应，这时的每一个体不再是脱离整体单独存在的了。个体之间的联动可以呈现出相互关联、相互跟随以及节奏和律动；

联动-关联/跟随/节奏

很多时候联动可以传达出循环、顺序的感觉，如果用在loading动效中可以很好地缓解焦虑；

联动-顺序/循环

我们在游戏、动漫中经常会看到这样的现象：一个人或一个物体向上飞起，但是下落时却不是整体一起下落，往往是人先落下，然后这个人的附属品如围巾、帽子再按照一定顺序依次下落，物体则可能会分为多个部分，按照从上到下的顺序依次掉下，这样的联动除了传递出很强的顺序性，还可以让原本单一的个体增加许多细节和生动性；

手游「家国梦」中的联动

其实除了动效设计，联动这一设计语言可以在生活中找到很多影子，例如千手观音；

千手观音中的联动

例如音乐喷泉；

音乐喷泉中的联动

以上生活中的例子都可以让人忍不住看入迷，如果这两个例子都是视觉上的联动，那么还有比如人们在无聊、焦虑的时候常常会不自觉的在桌子上用四个手指按顺序轻敲桌面，这种让人痴迷的联动则是触觉上的；还有比如看到一把吉他，不论是否专门学习过的人，都会忍不住依次拨动6根琴弦，琴箱中传出的6道琴声一样可以在听觉上给人舒适感，因此联动之所以适合做loading动效来缓解焦虑就是因为它可以从多感官上给人一种连续、规律的舒适感和律动感。

3.速度差

上文中的联动产生的原因是时间差，不同个体只是在不同时间按照相同的速度频率做了相同的一个动作而已，如果让不同的个体在同一时间按照不同的速度做同一个动作，则又会产生完全不一样的感觉。

当在一个黑暗的屋子内点燃一根蜡烛，让手指从蜡烛旁边划过，就会在墙壁上照出手指的影子，这时候蜡烛就让手指和影子产生了速度差，手指动的慢，影子动的快，这种速度差可以称之为「影动速度差」，影动速度差的产生是由于光的直线传播；

影动速度差

当离你不同远近的两个人朝着同一方向以同一速度走去，在你看来他们的动作也具有速度差，离你远的人走的慢，离你近的人走的快，这是由于近大远小的透视原理造成的，因此这种速度差可以称之为「透视速度差」；

透视速度差

这两种速度差不论是何种物理原理造成的，本质都是因为不同物体有着远近不同的层次，因此速度差都可以在原本扁平的视觉环境中产生较强的层次感和视差感受（案例来自Dribbble）。

4.聚散

聚散包含两个过程：当若个个体由原本聚在一起分散到一个适合的间距，或由这个适合间距聚到一起，这个过程可以理解为展开和收起，这个过程通常可以用于简化视觉信息、节约画面空间；

聚散-展开/收起

这一过程的聚散可以用在一些悬浮按钮的展开收起中；

悬浮按钮的展开收起

另一个过程是当若干个个体由一个适合的间距，分散到视线范围以外，或由视线外聚到这个适合的间距，这个过程可以理解为散开和聚拢，这个过程中的散开可以表现退散、消散的感觉，聚拢则可以表现呈现、注意的感觉；

聚散-散开/聚拢

这一过程通常用在一系列元素的出现和消失，例如iOS解锁后的桌面动效；

iOS解锁的桌面动效

5.快慢动作

快动作和慢动作是我们在影视作品中常见的技巧，就像「速度与激情」中一个飞速的相遇总能吊足观众的胃口；

快慢动作-相遇

实际上快动作和慢动作在表达上具有不同的效果，慢动作刻意地降低了画面速率，给观众留足了时间去仔细品读和关注，这段时间也会让观众对接下来即将发生的事充满期待；

快-慢-快

而快动作则恰恰相反，让某一段动作快速播放，这一段动作就会显得格外刺激、有节奏感，当然与慢动作进行对比就会显得更容易忽视；

慢-快-慢

通过快慢动作的合理分配可以更好的调动观众观赏画面的目光，例如在我们常见的大转盘游戏中，当按下按钮时转盘会飞速旋转，这时会让观众相对忽视前面所转过的内容，并产生刺激感、兴奋感；当转盘转动的能量即将耗尽时转盘逐渐慢下来，这时观众就会格外关注转盘内容，并对可能转到的位置充满期待，合理安排动画的快慢节奏，既可以减少动画时间的浪费，又可以确保观众全程保持关注和积极性。

大转盘中的快慢动作

五. 生物行为

1.凝视

当一个物体的动作根据另一个物体的位移变化时，就会产生一种凝视效果，这种动作可以是旋转、聚散甚至微弱的位移，凝视可以产生持续关注的感觉；

凝视1

凝视2

手机QQ在前几天上线一个标签栏的情感化设计，当用户按住标签栏任意icon的同时往上滑动，所有标签栏中的icon都会产生凝视触点的效果，而且这种凝视带有拟人化，通过icon中五官、形态以及轻微偏移来传达；

手机QQ标签栏中的凝视

此外，这种凝视现象在游戏中也很常见，例如热门手游「阴阳师」中，当一个式神前进向对手发起进攻时，队伍中的其他式神都会将脸转向他，并保持持续的凝视，这种效果在原本就有角色的游戏中可以传递很强的情感化，仿佛在告诉队友「兄弟你大胆上前干吧 我们都在后面支持你！」，在这样的队伍中可以感受到很强的团队凝聚力；相反地，如果我们拿出另一款手游进行对比，例如「梦幻西游」中的队伍就不够团结了，每个角色都自顾自上前战斗，仿佛在说「你打你的 干我屁事」；

阴阳师中的凝视

凝视可以表现持续的关注，但是对凝视进行适当的拓展就可以传递出不同的感受，例如Readme和B站的登录界面中，分别有猫头鹰和BILIBILI娘凝视着你的登录操作，但是到了输入密码的环节（即激活密码输入框时），原本凝视你的角色就会自觉地捂住眼睛。凝视本身是关注用户的情感体现，但是在输密等比较私密的操作中，用户反而不希望被关注，尽管就算他们继续凝视你输密也不会造成密码泄漏，但是这种情感化的设计可以增加用户在心理上的安全感信任感，以及对产品的好感。

Readme输密捂眼

B站输密捂眼

2.试探

试探是指一个物体从原本一个掩体后或者画面外进入画面中的现象，单纯这样的线性行为会显得平淡枯燥，因此通常会在此基础上加入更多细节上的动作设计。当物体进入画面后，附加一些旋转、抖动等动作时，可以传达出吸引、招呼和调皮的感觉，例如我们常见的打地鼠游戏，地鼠钻出洞来就是在招惹你吸引你的注意；

试探-吸引/招呼/调皮

我们可以在常见的一些桌面宠物、营销浮标入口中看到这种调皮可爱的试探现象（由于找不到QQ宠物的案例，暂时拿只瑞星小狮子做示例，一样调皮可爱）；

瑞星小狮子的试探

当物体进入画面的速度十分缓慢，离开画面的速度很快时，就可以传达出小心、谨慎的感觉，例如枪战片、FPS游戏中，角色会先躲在掩体后面，为探查情况或反击敌人需要探出身体，这时候不确定外面的情况必须小心翼翼地慢慢探出身，当发现敌人时或敌人对你进行攻击时，你为了活命必然以迅雷不及掩耳盗铃之势缩回到掩体后面，这一串动作就充分表现出小心、谨慎的试探行为，而且凡是满足「慢出快进」的动作都可以传递这种感觉；

试探-小心谨慎

3.躲避

很多时候当两个不相关的物体相遇时会自动排斥，就像磁铁的同性相斥，这种躲避行为在告诉你这样的操作是错误的或者不合适的，当然有的时候这种躲避单纯是为了给位移腾出空位；

躲避1

躲避行为可以是通过保持一定间距的位移来实现，也可以通过缩放等形式；

躲避2

我们在手机桌面上移动App图标时就经常会看到这种躲避行为，这并不是因为错误产生的，而是为了给移动图标腾出空位；

桌面移动图标

4.吸引

与躲避相对应，当两个相关的物体靠近时就会自动吸引，就像磁铁的异性相斥，这种吸引的行为就会暗示你这两个元素是有关系的，可以传达引力、相关、预操作的感觉；

吸引-位移

除了位移也可以通过缩放来体现；

吸引-缩放

例如锤子Smartism系统中的One Step，用户可以将一个应用中的某些内容拖动到另一个应用中，这个快捷操作中为了提高操作效率、降低误操作的可能，在拖动内容靠近目标App的图标时，这个图标会放大，暗示这个动作将会把拖动的内容与相应的应该产生关联；

锤子Smartism系统One Step

生物行为中的躲避和吸引总结一下就是：「避免相关的 就算相遇了也要躲开；希望相关的 就算还未相遇也要靠近」。

以上 就是我在看了Guoen的理论后自己总结的动态设计语言，部分内容是在Guoen的基础上发散开的，部分内容是自己在生活中感受到记录下的。不论是Guoen总结的还是我所归纳的，设计语言的内容其实不是关键，每个人对生活的感悟和提炼都会有所不同，而且生活那么丰富，从中总结归纳设计语言肯定不可能总结的完，最重要的是学习这种提炼设计语言的思维：我们在平时所看到的现象会传达一种感觉，我们把这种感觉组织成设计语言，之后再通过这种设计语言来模拟想要的效果，用这种效果再现之前所体会到的那种感觉。我们在生活中、玩游戏时、看剧时多加注意，任何让你心动的感觉、让你内心震撼的感觉，都要记下来，思考这个瞬间为什么能让你产生这种感觉，抓住核心，以后再将它用在设计中。