本文将市面上Zui常被使用的动效进行了一次并逐条阐明这些设计背后的原理， 每条原理后面我dou会为朋友们选出一些大家Zui常用的 App 作为例子，顺手打开就Neng体验啦。

镜头平移与缩放

试着... 镜头平移与缩放听起来好像是一样的东西，说实在的却wan全是两码事。镜头平移是拍摄的术语， 被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动，缩放是镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。镜头平移与缩放效果表明元素与空间之间的关系，也Neng表现出一种纵深感。

界面元素一边开始运动，但运动的效率不同

构成一种视差的效果。用户在进行滚动操作的时候tong过视差效果可yi在扁平化的界面里面表现空间中各元素的位置及层级关系。这种效果还fei常的美观高端，Neng让整个页面kan起来geng加活泼一些。tong过视差的特性， 我Neng引导用户去关注应该应该关注的地方，运动效率高的元素通常表达的是距离用户geng近，适合承载geng加有使用性意义的重要信息，而运动效率较低的元素通常表达的是距离用户较远，而且或许没有承载什么重要的信息。

将扁平化的界面元素多维化

从而表达空间中各元素的位置及层级关系。其实扁平并不符人类认知逻辑的， suo以人们在扁平化的界面里面下足了功夫来在没有纵深和厚度的界面里表达纵深和厚度，这句话读起来fei常拗口，但其实吧就是这样的。多维化的使用比较少，主要原因是添加纵深感有hen多种手法，而多维化的开发成本是比较高的，好吧...。

变形、 数值变化、遮罩、覆盖、生成多作用于加强元素自身的延续性

动效dui与数字产品的用户体验有着深远的影响,但如guo界面元素没有表现出基本的动效设计原理，那么会损害产品的可用性.它的深度令人吃惊，但并不Neng...，胡诌。

层级关系以及带来geng加有理可循的操作反馈

正如上面给出的这张动图，位于下方的方块的左右运动，而位于上方的方块跟随下方方块进行左右运动并一边进行自己的缩放运动，他们之间构成了父子关系。说得简单一点，父子关系就是子元素的某个属性的值随父元素的某个属性参数的值按照一定的比例进行变化。 例，内卷。

错序运动

利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别，或利用错序的方法吸引用户的注意。但一般情况设计师不应该使用太多的延时效果， 主要原因是譬如说网络的加载本身就Yi经需要时间，suo以延迟效果的使用Zui好只用于技术。 例子：苹果官网各商品详情页均有大量运用。

蒙层与覆盖

来日方长。 fei常相似， 在没有纵深概念的扁平化设计中表现纵深，它并不wan全将处于下方的元素遮盖住而通常是tong过高斯模糊或变暗的手段让下方的元素保留一定的可视性。

缓动效果

Neng够让运动kan起来geng加接近自然 符合用户的认知，达到用户的预期。设计师利用错开运动时间的方法， 让信息或界面元素按照有所区别的秩序进退场，利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别，或利用错序的方法吸引用户的注意。在其实吧没有厚度、 没有纵深概念扁平化设计中...，又爱又恨。

成dou网站建设公司_创新互联，为您提供网站内链、Zuo网站、网站维护、响应式网站、服务器托管、网页设计公司，精辟。

蒙层、多维化、镜头平移与缩放

作用于表明元素与空间的关系。

例子：知乎 Live 选择赞助金额的动画效果。

父子关系

例子：微信横划删除聊天记录。

视差

多作用于表明元素的层级关系。

编辑导语:

动效设计如今是fei常重要的,我们手机里有各种App,你使用时如guo连个Zui基本的加载的动态效果dou没有,是不是会觉得hen奇怪;优秀的动效设计...

缓动、偏移量和延迟

主要与时间相关。

动效设计如今是fei常重要的,我们手机里有各种App,你使用时如guo连个Zui基本的加载的动态效果dou没有,是不是会觉得hen奇怪;优秀的动效设计可yi提升产品体验,提高用户粘性;本文作者分享了guan与动效设....迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律,这些原理Neng让绘制的卡通角色移动和表演,但不Neng充分满足现代UI界面的交互需求，扎心了...。

前，有必要重点说明一下与Willenskomer宣言中的动效的主要区别。 动效不仅仅是装饰 动效设计不是UI动画的代名词。这一点hen关键，主要原因是UI动画几乎总是被当作一种经过深思熟虑的装饰，而与UX无关。动效不是装饰，它是行为，而行为只Neng帮助或阻碍用户体验。 两种互动类型：实时与非实时，泰酷辣！

例子：苹果官网各商品详情页。

利用偏移和延迟来错开元素的运动时间

表明元素之间的层级与关系。设计师利用错开运动时间的方法， 让信息或界面元素按照有所区别的秩序进退场，利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别，或利用错序的方法吸引用户的注意。 乱弹琴。 但一般情况设计师不应该使用太多的延时效果， 主要原因是譬如说网络的加载本身就Yi经需要时间，suo以延迟效果的使用Zui好只用于技术。

例子：在 iOS 里面随处可见的毛玻璃效果。

覆盖用于在扁平化设计的界面上阐明两个相互独立的元素的位置关系。

KTV你。 在其实吧没有厚度、 没有纵深概念扁平化设计中，覆盖动画的使用Neng让本来就fei常有限的屏幕空间被geng好的利用起来。

动效dui与数字产品的用户体验有着深远的影响

另起炉灶。 但如guo界面元素没有表现出基本的动效设计原理， 那么会损害产品的可用性.它的深度令人吃惊，但并不Neng让人轻松阅读.今天给大家介绍12项动效设计原理，这些dou适合用于UX/UI设计项目中，是fei常有用的运动原理。

一、 流动的趋势

PUA。 众所周知，早些年流行的flash主页因其酷炫的效果风靡一时。如今yin为html5和css3的发展，在配合高端浏览器的使用环......

例子：苹果的 Messages 发送信息的效果。

连续性的数值变化动态效果Neng让用户清晰地kan见数值到底是在变多还是变少。

琢磨琢磨。 guan与这一点， 我想多用两张动图呈现，大家可yikan到，数值变化有连续性动态效果的一张是不是gengNeng让你知道数字是在变多还是变少?想象一下假如在某款理财 App 里面这个数值是你的钱的话，那么数量的增加与减少这个信息dui与用户来说就fei常重要了。

动效在产品设计中扮演着重要角色

它的好坏与否直接影响了用户的使用体验和对产品的印象。 动效对产品的可用性体验有多维度的影响， 在界面中动效不仅仅是一种视觉装饰，它Neng够提升产品的参与度并 交流的范围。 对，就这个意思。 本文追根溯源， 先从动效的起源讲起，一步步推进与产品、体验之间的关系；再说说tong过案例

在适当缓动的情况下

用户可yi体验到自然的动效它不会分散注意力。为了geng好地向您展示这是如何工作的， 不如... 我将向您展示一个打破偏移和延迟原理的...

今天给大家整理了 12条提高产品可用性的动效设计原理

感兴趣的小伙伴跟随艺妹一起往下kan哈!.设计师利用错开运动时间的方法，让信息或界面元素...

遮罩型的动画是在界面元素进场huo者退场的时候创造连续性效果的一种选择。

这种类型的动效似乎在 Material Design 里面比较常见， 干就完了！ suo以没有使用过原生安卓系统的伙伴们可Neng比较陌生。

当元素被生产出来时

就这？ 表达元素与元素之间的连续性的关系。这种动画Neng够fei常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

例子：你手机里面几乎suo有动态效果dou是缓动的， kan起来是不是fei常舒服和谐呢?

例子：京东金融手机 App，“总资产”，及“白条”页面的数值变化效果。