<

div contentScore=”1749″>

产品设计

APP动效之美需内外兼修

2014/08/05

阅读（4951）

评论（1）

收藏（1）

没人带，自学慢，不在BAT怎么学产品？人人都是产品经理联合200+BAT资深产品经理带你学 点此查看详情

移动互联网时代已经到来，APP已如天空的繁星，数也数不清。随着手机硬件的不断升级，实现炫酷且流畅的动效不再是遥远的梦想。如果你是APP达人，喜欢试用各种APP，你肯定会发现越来越多的APP开始动效化。
一个真正的美女一定是同时兼具外在美和内在美，评价一段动效也是如此。一段真正“美”的动效需要同时具备两个条件，首先它需要是生动且有趣的，既好看又流畅；再次它不是可有可无的，需要具备优化交互和提升体验的作用。

 

1.APP动效的外在美

一段动效首先需要是生动且有趣的，不仅要有好看的外观还要有流畅的体验。要做到这点，需要赋予动效以生命力，具体有如下几种方法：

1.1模拟惯性

现实中物体的运动是有惯性的，比如公交车突然刹车时乘客会突然往前一倒。仔细观察下面3段动效，图像在变化（放大、缩小和翻转）的末端都会“超出”一点再立即“反弹”回来，如此的处理方法使得整个动效充满活力，显得生动有趣。

1.2模拟重力

与惯性一样，重力也是现实中存在的现象，所有物体在无向上的支持力的情况下都会下坠，比如倾倒垃圾。一般APP删除卡片的动效就是横向滑动直至消失，但是下面这段动效却加入了重力效应。即卡片在横向滑动的同时也在翻转并下坠，就像现实中往垃圾桶中倾倒垃圾一样。在使得整个动效生动有趣的同时也便于用户理解操作含义。

1.3均匀变速

一个优秀的动效肯定不会是匀速运动的，匀速运动的物体显得生硬和死板，就像机器人一样。要想让一个图像运动的有活力，就需要对其运动的速度进行“设计”。仔细观察下图所示动效，虽然界面中不同元素的运动速度不尽相同，但其运动均遵循一定的原则，其中之一就是均匀变速，切记“急起”。就是说界面元素在运动时的初始速度要为0，以匀加速开始运动，而在运动结束阶段往往是可以急停的。

1.4碎片化运动

使一款应用变得个性十足的一个好方法就是给它加上炫酷的动效，而使一个动效炫酷的常用方法就是碎片化运动。简单说就是把界面中的图像拆解成一个个碎片，然后让它们进行不同步的运动，利用时间间隔和变速产生炫酷的效果。就如下面一则动效，图像中的不同元素有节奏的呈现，利用时间差来制造效果。

2.APP动效的内在美

真正优秀的动效不是只有漂亮外表的花瓶，还得具备优化交互和提升体验的作用。下面总结了3个动效的“内在美”，分别为引导、简化和增强反馈。

2.1引导

图形界面本是难懂且抽象的，增强引导是降低软件操作难度和提升用户体验的好方法。

2.1.1动态聚焦

通过动态化的处理引导用户聚焦界面的关键部位，以使体验更加的流畅。青蛙能够快速捕捉移动中的物体，人眼也具有相似特征，运动中的物体总能引起下意识的关注。如下图所示动效，屏幕上方的数字不是直接显示一个数值，而是从0迅速递增到该数值，特意表现一个动态的效果，目的就是为了吸引用户的目弯div>