全方位科普手册：产品的动效设计(8)

（4）2f – 8f 表单下方「叫车按钮」整体做从下至上位移和渐显动画；Y轴位移：20px；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线:(截图中时间帧不做参考)

（5）15f – 23f 接机表单卡片从距离屏幕上边缘268px的位置向上；移动，至距离屏幕上边缘148px的位置（设计图中最终位置）；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线:(截图中时间帧不做参考)

（6）17f – 25f 车型选择卡片从距离屏幕上边缘852px的位置向上；移动，至距离屏幕上边缘732px的位置（设计图中最终位置）；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线:(截图中时间帧不做参考)

我们输出动效说明文档的原因是：传递更清晰具象，效果更可控，降低沟通成本，提高配合默契度，保证设计还原度。

写在最后

说了这么多其实就是想尽量的告诉大家，我认为的要怎么把设计做好。我并不觉得，现在我们需要做动效设计了，就该将原来的界面设计师，在分出一个动效设计师职位。真正的独立的动效设计师需要做的，绝对不仅仅是我们产品设计中需要的这点东西。因为我觉得这都是界面设计师应该输出体验的一部分，只不过就现在而言我们又多了一种表现形式可以使用。设计师应该为最终输出的体验负责，就是正在被用户使用的产品的体验，而不是为几张漂亮的设计稿。讲了这么多动效设计，动效设计难吗？ 之前有个人和我说过一句话，我觉得挺有道理。

要对设计或者你做的产品，充满爱。要带着爱去做设计。这样你输出的设计才会让用户感受到情感。

作者：AaronCui ，Sogou-UED，公众号：老美工聊设计

（编辑：ASP站长网）