这次带来的是WPS邮箱4.0动效设计案例，完整呈现了设计构思-实现-检验的过程。在设计中有独立的思考，也犯了些错误，希望能够给抛砖引玉，激发大家的灵感。

　　移动端的动效设计主要分为两种：页面跳转动画及加载动画前者的作用是衔接页面间的切换后者是为了减轻用户等待时的焦躁情绪。同时，动效设计也是对设计师综合素质的挑战

　　是你没看错，交互设计师和你聊动效，迎来职业第二春。前些日子在给WPS邮件做新版本的交互设计，零零散散的工作结束后，看着测试机里APP的界面，发现邮件的加载与下拉动画还使用的是系统动画。刹那间，使命感油然而生。

　　这次的设计流程如下

　　了解需求-确定方向-着手设计-检验问题

　　Step1.了解需求

　　了解需求后我们可以在目标上和需求方达成共识，出发点一致，目标一致，避免出现不必要的麻烦。这点非常重要重要，效率第一。有了这个想法就去和产品姐姐聊，没想到人家也是这么想的，五分钟友好的交流之后，我大概get到了她的想法：

　　需求：希望设计出新的下拉加载动画以代替系统默认动画。期望值：动画内容契合列表的下拉刷新操作，与邮箱的线上设计风格一致，同时要求趣味性。

　　Step2.确定方向

　　当我设计动效时，我会想到什么?网上有很多炫酷的爆炸的旋转的3D的作品，我们如何在有限的时间里确定设计方向呢?下图是我的思考方式：

　　首先，设计本身是一个先做加法再做减法的过程。

　　加法：关键词发散是我个人的设计方法，这个阶段，我联想到了现实世界中的很多与邮件相关的词，画了很多草图，也汲取了很多优秀作品的灵感，很多奇奇怪怪的点子在脑海中迸发。

　　减法：在需求确定的情况下，可以更加轻松地缩小设计范围。回想需求，动画内容契合列表的下拉刷新操作。下拉动画的内容需要与操作保持一致，用户在此页面下拉触发的是刷新行为，也就是收取新邮件，这我们需要用动画体现出来。回想需求again，产品要求与邮箱的线上设计风格一致，WPS邮箱线上发送邮件的按钮样式是一架飞机：

　　发送邮件的样式

　　依据以上思考我的结论是：

　　下拉刷新=收取新邮件

　　邮件=飞机

　　相应的，收取新邮件可以认为是飞机飞入，于是我延续飞机的设计，围绕着邮件与飞机的思路，以飞入邮箱的形式来展现“收取新邮件”的主题。自此动画的大体方向确定了：纸飞机与邮箱。

　　Step3.确定方向

　　到这里相信大家脑海中已经有了一个动画脚本：随着用户下拉列表至一定高度，触发动画，飞机飞入邮箱，下拉动画结束后列表收起，DEMO如下：

　　这里不讲技术问题，分享一些动画的思路:飞行路线不用太复杂，看着累。速率调整一下，注意透视，近大远小。

　　随着下拉手势，可以让邮箱门打开：