出行产品动效设计总结

『动效的背景』

动效其实从代码交互变革到窗口可视化起就一直存在，早期动效的作用和表现更集中于交互方面，信息的传递、层级的表达、操作的反馈、流程的引导等等。近几年随着产品同质化和设计细分现象的增加而越来越被关注，动效的视觉传达和交互引导作用也越来越被重视。

探讨动效的作用可以从视觉和交互两方面进行分析。

视觉传达：让静态的GUI动起来

a.传达品牌魅力，营造视觉氛围。

b.吸引注意力，转化掉因产品和技术的原因为用户带来的不好体验

交互引导：告诉用户你现在是什么情况，接下来会是什么情况

a.类似于现实生活中用行为来更生动地表达信息，该信息可以包括：基础信息、层级关系、空间关系等等

b.提前预示将来会发生的事情，进行引导、过渡或者说是缓冲

此次动效设计包含以下几块内容：

1.启动页；2.块状内容交互动效；3.定位大头针；4.内容加载：下拉刷新加载、全局模态加载、可关闭加载、局部功能加载；5.气泡出现和消失；6.按钮上结果反馈

『启动页』

启动页可以理解为是进入APP的一个过渡阶段，最初的启动页是为了增强用户对应用程序能够快速启动并立即投入使用的感知度而制作的一张假的APP首页图，慢慢的，随着品牌策略和运营策略的介入，启动页也往往承担了多种作用。

不管是安卓还是iOS，APP基础启动页必须是一张图片（安卓支持jpg格式，iOS支持png和pdf格式）。除此之外，结束此图片直到进入APP这段过渡中，可以根据需要进行自定义设计，可利用的技术手段如视频、可交互动效等。

此次是为一款工具化APP设计，由于背景是需要满足：a.快速投入使用产品；b.品牌信息传达。

由于这是一款出行类产品，从产品初期品牌定位中提取关键内容：

地图、车辆、出行业务模式、logo、品牌名

动画由两部分组成：启动图和动画。

将各元素组合，利用视觉焦点轨迹引导，由启动图的icon展示由下往上拉到品牌名，最终进入APP后视觉焦点也能很恰当地落在首页业务重点区域。

使用软件：PS、SKETCH、AI、AE

实现方式：AE导出JSON，使用Lottie动画开源平台

动画时长为 2s；启动页图片结束后开始播放动画。

最后效果如下：

因此启动页设计相对简单，在设计过程中主要的难点有：

a.icon融合成小球跳动的节奏感

b.启动图片和动画的对齐及多机型适配不偏移

c.json导出不支持圆角、蒙版，需要在设计中使用其它替代方式实现

『块状内容交互动效』

全局定义块状内容的交互效果，以模块化组件化的方式提交研发，保证研发可以统一复用，省去了逐个开发，后续逐个修改带来的麻烦。

这里顺便介绍一下四种运动的曲线：

几种属性的特点

easyout：小球从地上弹起到离地面最高点这一段过程就是速度慢慢变为零。收尾速度为零，会给人一种很轻柔优雅的结束。

easyin：小球从至高点到接触地面的过程。速度从零逐渐变为最大。有一种由远及近的冲击感。

easyin & out：慢-快-慢，这个应该很好理解，如运动从开始到速度很快，再到停止

easyout & in：快-慢-快，像扔一个高于出手水平线的物体，初始速度很快，到达至高点时，速度降为零，受地心引力左右，下落时速度逐渐增加。

动效要做得好，其实很大程度上是 节奏感的把控，该慢的时候就应该慢，时间给多点，动作给少一点，该快的时候则相反。这样的动效就会更有韵律。

而节奏感的原理其实可以从动画原理中汲取，因为我本身学过动画专业，所以对我来说很好理解，大家有兴趣可以了解一下《迪士尼动画黄金十二条法则》，很完整地阐述了上述几种运动规律的12种场景运用和延展。像国内早几年的动画片其实也做得非常好：大闹天宫、哪吒闹海、宝莲灯等等。刻意逐个分析局部动作，如跳起来、走路、跑步，物体的运动等等。会很有成长的。少看近几年的弱智动画片，基本没有动作，转个头就是弹一下直接切换，干嘛都是弹一下弹一下，简直要崩溃。

『定位大头针』

对于一款出行类产品，比较重要的就是地图功能操作，如滴滴、OFO、摩拜等。出发点通常都是通过一个大头针来在地图上钉出。

交互需求将大头针分成三种不同状态：

常驻呼吸状态、移动后获取结果中、结果获取反馈

轻盈的呼吸状态可以为产品增加额外的品质感和亲切感

波纹状的效果取自信号电波的循环，传达一种探索的感觉

轻巧的往上一蹦，有一种“嘿，找到了”的感觉

『内容加载』

a.下拉刷新

下拉刷新通常存在于列表页面，在枯燥的列表页面设计下拉刷新可从两个方面入手：

1).品牌气质传达、产品功能的传达、氛围的营造

2).有趣的下拉刷新可以转移用户的注意力，缓解缓慢的不可预期等待

本次设计抓取关键词：

出行——车；品牌色；城市

循环的线条城市不管何时开始何时结束都可以无缝衔接；

小车行驶本身是较平稳的，但是当画面缩小适配到手机上时可能会看不清轮胎的旋转、玻璃窗的高光闪过等，于是加入了更具趣味性的车辆律动。

b.全局模态加载

由于全局模态加载是分布在APP各个地方，根据场景、功能不同而触发，因此全局加载很容易打断用户的使用流程。并且根据实际情况不同，加载的时长不可控，可长可短，在网络情况相对较好环境里，可能会存在加载一闪而过的现象。由此而产出的设计方向为：

1).取消蒙层模态行驶，减小对用户打扰

2).使用简单的加载动效，减小吸引用户注意力

c.可关闭加载

区别于全局模态加载，在某些特殊情况下，由于技术问题会存在反馈无限拖延等现象，用户会陷入长时间的等待，其实此时用户可以选择撤回此操作，转而进行别的流程。那么就需要一个可被关闭的加载。

d.局部功能加载

局部功能的加载根据产品需求来设计，基本不涉及太多视觉传达，主要以满足交互引导和反馈为主

『气泡出现和消失』

在地图上的控件随着功能的交互会出现和消失，以地图气泡为例，统一设计地图控件出现和消失规范

按钮上结果反馈

动效可以帮助交互节省很多页面，比如反馈结果。

『总结』

此次动效设计伴随着新产品迭代同步进行。收获很大，做的挺过瘾的。总体感受如下：

a.一款产品的动效设计应当理解成项目化、整体化来对待，每一部分的动效控件都是和整体息息相关。

b.动效设计很注重细节，无论控件大或小都应该在节奏感、整体视觉和交互引导上细心设计。

c.设计和实现是一道很大的坎，多跟研发沟通。设计师其实可以向研发展现自己的专业度，将竞品设计、最新的技术，研发也可以将现有情况和最新技术传达给设计师。双方通过沟通实现利益最大化。例如此次设计，研发自己可以写的控件，设计师将时间、运动方式等参数详细给到研发，研发不能自己写的或者怕麻烦的，就导出JSON给研发。所以不管如何，总有办法解决的。

拿大头针举例，需要给到研发的参数有：

运动轨迹函数：y=25*sin(6.54*x) 

运动总时间：14/25

圆跳动周期：0-12/25；杆子周期：2/25——14/25

总时间和周期AE里面都能直接看到。

运动轨迹函数其实就是物体运动的速度曲线，根据AE里面的曲线样式，根据时间点推演即可。

就是初高中学的二次函数图形化。

祭一张计算草图。

差不多到这里要讲的都讲完了，但是感觉其实每部分可以讲的更细一些。此次还是以枚举和抛砖为主吧。

以上。希望大家喜欢。

谢谢。

2018.3.4