APP动效设计解析：从目标到落地.docxVIP

APP动效设计解析：从目标到落地 随着移动互联网的普及和技术的发展进步，用户使用到越来越多，体验也越来越优秀的产品，对于产品的感知变的更加深入，挑剔程度也在变得更加严格。 越来越多的产品都在努力提升自己的产品体验，尝试通过不同的方式来打造产品的差异化，动效设计在这一过程中开始扮演越来越重要的角色。尤其是拟物设计逐渐被摒弃之后，动效作为模拟物理世界运动规律的一种形式，让冰冷的屏幕更接近真实世界的触感。 动效设计作为一种设计师必备的技能，越来越被重视。 接下来通过动效设计的分类、目标、原则、落地实现这几个方便来系统性跟大家聊聊，并结合工作中的一些真实项目，让大家了解动效的原理以及我们围绕动效在产品的整个生命周期中可以做哪些事情。 一、动效设计的分类 互联网产品的动效，从整体上来说可分为两种：交互动效和MG动画（图形动画）。如果继续细分，还可以按场景和功能分为转场动效、导航动效、加载动效、展示动效、引导动效、反馈动效。 1. 转场动效 转场动效是一类比较常见的动效，让页面之间有更顺畅的跳转连接，同时也可以更好的体现页面之间的层级关系，让用户更容易理解页面结构，给用户更好的使用体验。 比如下面这个登录的动效，点击登录按钮时，底部背景的斜线一边变直一边向上运动且伴随颜色变化；同时具体登录信息通过不透明度动画出现，同一辆车在两个场景之间运动，车用户会清晰地感知到这两个场景之间的强关联，过渡也很自然。 2. 导航动效 导航动效也是见的比较多的一类，Path是最早开始尝试这种创新的交互形式的，把不同的功能收纳在“+”中，点击“+”这些图标会旋转着弹出，提高操作效率的同时又可以给用户带来操作的愉悦感，设计者的用心用户还是能够充分感受到的。 随着底部菜单栏中被加入更多的功能，现在这种形式被用的越来越少了，但他仍然还是有很大的使用空间和借鉴意义。 （此图片来源于网络） 3. 加载动效 由于网络等原因在数据传输过程中无法即时加载完成时，会出现等待时长，加载动效的意义在于缓解用户等待的负面焦虑情绪，提升产品的使用体验。 4. 展示动效 展示动效作为纯展示出现的机会不是很多，通过展示表达信息，不承担引导和交互行为，比如天气情感化动效展示。 5. 引导动效 引导动效的意义在于引导用户行为，把流量引导目标场景，从而提升目标场景的点击量，比如常见的金刚区图标加上MG动画以后，引导用户点击。 6. 反馈动效 尼尔森十大可用性原则的第一条是状态可见原则，应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态，需要在合适的时间给用户适当的反馈，防止用户使用出现错误。 （此图片来源于网络） 二、动效设计的原则 动效设计作为设计手段之一，有静态页面无法做到的优势，存在的意义必然是为了提升体验；而过多过于复杂的动效设计就显得不合时宜，非但达不到预期目标，还会降低用户体验，拉低产品品牌印象。 所以在动效的使用时要克制，避免让页面的重心产生偏差，把用户引到不必要的地方，或者产生过度设计，徒增用户使用负担。 基于过往的项目经验总结了动效设计的四个基本原则：必要性、简洁性、物理性、趣味性。 1. 必要性 在考虑动效时往往会不自觉地想加入尽可能多的动效设计，有时甚至单个页面塞进去多处动效，这也不是不可以但需要注意的是单个页面肯定会有自己的权重重心，动效不应让页面的功能重心产生偏差。 单位时间内产生的固定流量在页面内分配的时候，流向一部分的多了，流向其他部分就会减少。 给大家分享之前的项目做过的一次动效，当时考虑给通知做一个动效，引导用户关注从而提升通知的打开率。其实通知的内容权重在当前页面中并不大，没有必要给他做很强的内容引导，让用户点进去通知里面之后并没有很强的业务属性。 这就是没有站在全局的角度思考，没有遵守必要性原则。 2. 简洁性 不只是动效设计，一切设计的准则都包含简洁性，好的动效方案一定不是复杂难懂需要用户花心思去思考的。而动效的简洁还需要考虑更多层面，时间的长度、动作的复杂性、视觉的重心、开发的成本。 3. 符合物理运动规律 人对事物的观察和理解都是基于物理世界的规律，当虚拟界面元素的运动特性越能够模拟物理世界的运动规律。 比如惯性、重力加速等，就会越符合人在真实物理世界形成的心智模型，让虚拟的屏幕与真实世界交汇，往往会更好的帮助用户预判和理解页面的逻辑。 4. 趣味性 趣味性动效的意义在于培养用户的正向情感，比如愉悦、放松、认可，避免用户产生反向情感，比如愤怒、否定、失望，越强烈的正向情感越有利于帮助产品培养用户的忠诚度，对一些使用过程的负面情绪更加包容。 比如下面这个服务评价页面，当乘客体验不友好给出差评时，用憨厚可爱的动效形象给予乘客情绪上的缓冲。 司机头条项目中的双击点赞情感化动效。 三、动效设计的目标 在做动效之前先要搞清楚目标，为什么