微交互 - 不要只停留在设计稿中

fruit

　　微交互-　　围绕着用户完成单个任务前后而存在的微妙的交互和效果。所以现在说起微交互，大家的实现方式往往是动画效果，因为细微的动画反馈能创造出一些有趣的瞬间，包括帮助用户理解产品的意图，突出主流程，用令人难忘的细节设计让应用从同类产品中脱颖而出。
　　前面是概念，下面进入正题。首先说关于微交互动效的文章在网络上一大把，大家往往都是以设计师的角度，展现无数个绚丽的AE动画，然后谈论这样设计的目的。这些设计确实非常抓眼球，也符合微交互的各个核心要点，但是我们却很少看到世面上的产品实现了那些效果，最终它们都只停留在设计稿中。这是一个很实际的问题，在互联网时代，产品的迭代速度之快，往往会把类似动画这种附加体验的需求排在产品主流程的后面。对于开发而言，更是把大部分精力放在功能的实现上，首先不说开发能不能实现这些效果，就算是会做，他们也不愿意花费巨大的精力去实现一些天马行空的设计，而最终耽误了产品的正常迭代周期。那么设计师不仅要保证自己的设计确实会提高产品体验，同时也需要一些方法去推进微交互动效的实施。
　　大家之所以感到做动效耽误进度大多是因为大家把关注点都放在了最终的效果呈现上，或者说被设计师的Demo吓到了。所以说设计师在给出动效设计后，其实只是做了微交互的一部分工作。接下来还有很重要的一步，就是帮助开发拆解动效，把它变成程序员可理解，可实现的信息。只有这样，才能真正让开发明白他的着手点在哪，其实最终也许就是几十行代码的事，加上沟通时间，完全是可以接受的。有一种情况，许多设计师会直接在设计软件里做好动画效果，然后导出开发可用的格式，比如svg, gif。那么我们在这里不考虑这种情况，虽然这样也提供了微交互的效果，但是这么做仅限于图标或者按钮这样的小元素在它本身的位置做变化，是无法控制程序的结构以及动态信息的。对于大多数的微交互效果都是需要代码实现的。那么怎样才算是可理解，可实现的拆解动作，接下来我就试着总结一下。
　　简单的来说，无论是IOS，Android，HTML的动效接口，还是制作动画的设计软件，都有着非常类似的基础功能。不管他们各自都有多么强大的框架或模板效果，那些复杂的动画几乎都是出自于这些基础动效的升级，变化和组合。
　　平移

　　最好理解的，2D平面中每个元素都拥有x,y坐标值，修改这两个坐标值达到平移的目的。设计师一般给出x,y的增量值就可以。3D平移会多出z坐标值，用来控制物体的深度坐标。
　　旋转

　　物体围绕着一个中心进行旋转运动。2D平面中一般需要给出这个物体的中心位置和旋转的角度值。在3D旋转中，这个中心是一条线，让物体围绕这条线进行旋转运动。
　　缩放

　　缩放经常被用到，在2D平面中缩放需要三个值，x,y,和原点坐标。x和y来控制横向比例和纵向比例，两个值相同时便为等比缩放，不同时会类似变形的效果。原点坐标会确定当物体进行变形时的中心位置。3D中缩放同样多了z值，用来控制物体深度的比例。
　　错切

　　错切是指图形沿着某个坐标方向产生不等量的移动而引起的图形变形。首先要确定需要沿着哪条坐标轴，然后还要给出移动的增量值。在设计中很少会对大的框架进行错切，因为这样会使信息变形，一般会用在图片或者是图标上。图中是同时错切x,y轴并多次执行的效果。
　　透明度

　　对元素透明度的控制十分重要，当一块区域从没有到有时，如果只是突然出现那就会显得非常生硬。许多应用会选择使用透明度来让元素渐显，或是渐隐。
　　这同时也是提高画面流畅度的好方法，只是要把握动效时间。
　　颜色值

　　对元素或文字进行颜色的更改时，也是可以添加渐变效果的，只需要给出两个颜色的颜色值，程序可以计算出当从一个颜色渐变为另一个颜色时，中间所有其他的颜色值。
　　关键帧
　　大家知道在动画设计工具中关键帧是一个非常重要的概念。它用来定义动画变化、更改状态的帧，即编辑舞台上存在实例对象并可对其进行编辑的帧。那么同理，在开发中也存在着关键帧，也需要对每个关键帧进行属性的赋值，当确定好元素的每个关键帧的具体形态后，再用程序自动生成中间的补渐。那么利用关键帧这个特性就不用把同一个元素的同类动效分解执行了，比如刚才在平移介绍里的图片就是组合了两个平移效果，拥有3个关键帧，起始(x=0),中间(x=100),终止(x=0)。
　　贝塞尔曲线
　　贝塞尔曲线，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。设计师们大多都知道PS中的钢笔工具其实就是使用贝塞尔曲线的算法。那么在动效中，贝塞尔曲线控制的是动画效果的缓动方式，其实就是给动画赋予了加速度，让动画在执行起来显得不那么生硬。设计师在设计软件中调整好动画的贝塞尔曲线，然后将这些曲线的值交给开发就可以了。或者不用这么麻烦，因为现在各大平台都有类似的开源缓动函数，拿来直接用更轻松，其实大家仔细观察，本篇文章中的每张动效演示都加入了贝塞尔曲线。

　　以上这些就是动效的基础属性，相加组合后就会在一定程度上提升操作和视觉体验。比如下面这个就是轻微的平移，透明度变化，再加上贝塞尔曲线。

　　其实做了几年的开发和设计，从我的感觉而言，微交互动效经常被砍掉，想研究这方面的设计师在经历了几次撞墙后也会放弃这方面的制作。其实论资源，并不能总说我们没有专业人员，毕竟现在各个前端平台都拥有无数的动效接口，学习成本并不是很高。那么设计师们如果想推进微交互的实施，仅仅在设计稿中做出来还是不够的，理解开发的实现方式以及其实现的环境局限性更有助于动效设计的顺利落地。对于开发而言，需要理解设计的细节与思路，明白设计稿的初衷与意义，才会更有动力去实现它。