郑州发布UI动效设计流畅体验效果设计

　　一、持续时长和速度

　　动效设计中的持续时长和速度是两个密切相关的因素。在动效设计中，需要确保动效不要移动得太快或太慢，从而影响可用性，破坏使用体验。

　　那么，动画的较佳时长是多少呢？

　　一般来说，标准的UI动画时长应该在200毫秒-500毫秒之间——这组数字是基于我们大脑的处理能力而得到的时长区间。

　　小于100毫秒的动画是瞬时的，不会被用户注意到；如果时长大于1000毫秒(1s)，会让用户感到动画很缓慢，带来一种拖沓的感觉。

　　同时，我们也要考虑其他可能影响动画速度的因素：

　　屏幕尺寸：由于手机和电脑有着不同物理尺寸的屏幕，尺寸的不同会影响动效的速度，屏幕越小，运动路径越短。对于移动屏幕，动效速度应保持在200-300ms之间，平板电脑应该保持在400-450ms之间；

　　web动画：在浏览网页时，我们更习惯于网站的即时响应效果，因此网站的动画速度也更快。因此对于网站来说，转场动画的时长保持在150-200毫秒之间，更符合用户的浏览习惯。

　　以上提到的区间是相对保准的动效时长，并不是一成不变，具体的动效时长和速度需要根据具体的需求、场景，灵活分析。

　　二、缓动

　　现实中的物体由于受到重力、阻力等因素的影响，速度并不是恒定不变的。换句话说，物体都会有加速、减速、平滑等不同的运动状态。

　　为了使动画更真实，我们需通过缓动来模拟出这些因素，让界面中的元素运动的更自然，避免过于死板。

　　缓动决定了元素在运动过程中速度的变化，常用的类型包括：线性匀速、缓入、缓出、缓入缓出。

　　1、线性匀速

　　当元素没有受到物理力的影响，速度保持恒定，就会发生线性匀速运动的效果。

　　线性匀速在改变元素位置的设计中使用相对较少，更多是用在改变元素的状态、属性（透明度变化）等不涉及元素位置改变的设计中。

　　2、缓入

　　缓入对应于元素的加速曲线，通常用于当对象从静止到加速离开用户视线的过程。例如一辆汽车驶出时，速度从0开始逐渐增加，然后在驶出时达到较大值。

　　3、缓出

　　缓出是缓入的对立面，用于屏幕上的对象从高峰值进入，逐渐减速直到到达特定位置的过程。例如一个人从屏幕外全速进入屏幕内时，进入画面时的速度较高，然后逐渐减速到零。

　　4、缓入缓出

　　缓入缓出也称为标准曲线，指对象从画面的一个部分移动到另一个部分，整个移动过程中始终保持在帧中，通常用于为在同一界面中改变位置的元素创建动画。例如一个钟摆，它的速度从峰值开始，缓慢减速到0，然后再次加速，不断在一个固定的位置区域循环。

　　需要注意的是，不对称标准曲线会使物体的运动变得更加自然。

　　在使用缓入缓出时，要强调减速而不是加速，因此减速的时间要比加速时间要长。在这种情况下，用户会更关注物体的后半段，从而更容易关注物体的新状态。

　　三、动效编排

　　动效编排是指对界面中不同的元素进行统一、有序的编排，让元素间更协调，通过更流畅的动效来引导用户的注意力。动效编排包括平等互动和从属互动。

　　1、平等互动

　　平等互动指对象根据相同的规则移动。

　　在这种情况下，界面中的元素会变得整齐有序。以界面中的卡片列表为例，平等的互动编排增加卡片一个接一个，从上到下以一种协调的方式出现，能够从上到下引导用户的注意力。

　　如果不按照这种编排规则，界面中元素的出现顺序会产生混乱，从而影响用户的浏览。

　　在表格类页面中，元素的运动情况会更复杂。

　　在表格视图中，应该按照对角线的方式来引导用户的关注点。如果使用水平方向的运动让元素一个一个展示，会造成元素的加载时间过长，用户的浏览路线来回曲折，体验不流畅。

　　2、从属互动

　　从属互动指界面中有一个主体对象，用来吸引用户的注意力，界面中的其他元素都从属于这个主体对象。这样的编排方式让用户的注意力更聚焦到界面中重要的元素上，保持元素的运动主次更清晰。

　　还需要注意元素的运动曲线。如果一个元素不成比例地改变大小，例如从一个正方形变成一个矩形，那么元素应该沿着弧线移动。

　　如果元素的大小按比例变化，元素应该沿着直线运动。

　　此外，我们可以将曲线运动分为两类：垂直向外（水平开始，垂直结束）、水平向外（垂直开始，水平结束）。

　　例如如果页面上下垂直滚动，页面中的元素应该以垂直向外的方式展开，先移动到右侧，然后向下运动。如果页面是水平滑动，元素则以水平向外的方式展开。

　　另一个问题是元素的运动路径相交时，元素间应该遵循物理定律，不能互相穿越。或者在元素移动前将元素提升到较上层，让动效看起来更自然。