APP动效设计从目标到落地

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

随着移动互联网的普及和技术的发展进步，用户使用到越来越多，体验也越来越

优秀的产品，对于产品的感知变的更加深入，挑剔程度也在变得更加严格。

越来越多的产品都在努力提升自己的产品体验，尝试通过不同的方式来打造产品

的差异化,动效设计在这一过程中开始扮演越来越重要的角色。尤其是拟物设计

逐渐被摒弃之后,动效作为模拟物理世界运动规律的一种形式,让冰冷的屏幕更

接近真实世界的触感。

动效设计作为一种设计师必备的技能，越来越被重视。

接下来通过动效设计的分类、目标、原则、落地实现这几个方便来系统性跟大家

聊聊，并结合工作中的一些真实项目，让大家了解动效的原理以及我们围绕动效

在产品的整个生命周期中可以做哪些事情。

一、动效设计的分类

互联网产品的动效，从整体上来说可分为两种：交互动效和MG动画（图形动

画）。如果继续细分，还可以按场景和功能分为转场动效、导航动效、加载动效、

展示动效、引导动效、反馈动效。

1.转场动效

转场动效是一类比较常见的动效，让页面之间有更顺畅的跳转连接，同时也可以

更好的体现页面之间的层级关系,让用户更容易理解页面结构，给用户更好的使

用体验。

比如下面这个登录的动效，点击登录按钮时,底部背景的斜线一边变直一边向上

运动且伴随颜色变化；同时具体登录信息通过不透明度动画出现，同一辆车在两

个场景之间运动，车用户会清晰地感知到这两个场景之间的强关联，过渡也很自

然。

欢迎使用

登录交互动效首汽约车企业版

品质出行便谈熟理

LoginInteraction

在企业端登录注册页面，为了增强产

品的品牌认知，赋予界面活力和更多

的可操作性，为此场景设计了交互动

效，分为两部分，已登录部分只有纯

动画，未登录部分点击登录和注册按

钮会有进一步交互动效。

S首浅妁车

2.导航动效

导航动效也是见的比较多的一类,Path是最早开始尝试这种创新的交互形式的,

把不同的功能收纳在"+"中，点击"+”这些图标会旋转着弹出，提高操作效

率的同时又可以给用户带来操作的愉悦感，设计者的用心用户还是能够充分感受

到的。

随着底部菜单栏中被加入更多的功能，现在这种形式被用的越来越少了，但他仍

然还是有很大的使用空间和借鉴意义。

•InMmtonBay.SanFranasco

I'mlookingforwardto

ourSanFranascotnp

nextMonday.-with

Wmg.

（此图片来源于网络）

3.加载动效

由于网络等原因在数据传输过程中无法即时加载完成时，会出现等待时长，加载

动效的意义在于缓解用户等待的负面焦虑情绪，提升产品的使用体验。

加载动效

Loading

司机头条loading动画，用于全局流

程切换，一个有趣的loading能降低

用户等待的焦虑感，提升用户体验。

把司机头条的音乐、视频、购物形态

结合品牌log。给予趣味性弹跳切换。

□司机头条

4.展示动效

展示动效作为纯展示出现的机会不是很多，通过展示表达信息，不承担引导和交

互行为，比如天气情感化动效展示。

z天气展示动效

WeatherDisplay

9

在首汽约车乘客端页面，为了让用户

感知到异常天气的变化，更好的做出

行准备，提升产品的使用体验和用户

满意度，加了天气展示的动画，动画

在发单页和置泡页展示。

国首港为车

5.引导动效

引导动效的意义在于引导用户行为，把流量引导目标场景，从而提升目标场景的

点击量，比如常见的金刚区图标加上MG动画以后，引导用户点击。

6.反馈动效

尼尔森十大可用性原则的第一条是状态可见原则，应该让用户时刻清楚当前发生

了什么事情，也就是快速的让用户了解自己处于何种状态，需要在合适的时间给

用户适当的反馈，防止用户使用出现错误。

（此图片来源于网络）

二.动效设计的原则

动效设计作为设计手段之一，有静态页面无法做到的优势，存在的意义必然是为

了提升体验;而过多过于复杂的动效设计就显得不合时宜，非但达不到预期目标,

还会降低用户体验，拉低产品品牌印象。

所以在动效的使用时要克制，避免让页面的重心产生偏差，把用户引到不必要的

地方，或者产生过度设计，徒增用户使用负担。

基于过往的项目经验总结了动效设计的四个基本原则：必要性、简洁性、物理性、

趣味性。

1.必要性

在考虑动效时往往会不自觉地想加入尽可能多的动效设计，有时甚至单个页面塞

进去多处动效，这也不是不可以但需要注意的是单个页面肯定会有自己的权重重

心，动效不应让页面的功能重心产生偏差。

单位时间内产生的固定流量在页面内分配的时候，流向一部分的多了，流向其他

部分就会减少。

给大家分享之前的项目做过的一次动效，当时考虑给通知做一个动效，引导用户

关注从而提升通知的打开率。其实通知的内容权重在当前页面中并不大，没有必

要给他做很强的内容引导，让用户点进去通知里面之后并没有很强的业务属性。

这就是没有站在全局的角度思考，没有遵守必要性原则。

2.简洁性

不只是动效设计，一切设计的准则都包含简洁性，好的动效方案一定不是复杂难

懂需要用户花心思去思考的。而动效的简洁还需要考虑更多层面，时间的长度、

动作的复杂性、视觉的重心、开发的成本。

3.符合物理运动规律

人对事物的观察和理解都是基于物理世界的规律，当虚拟界面元素的运动特性越

能够模拟物理世界的运动规律。

比如惯性、重力加速等，就会越符合人在真实物理世界形成的心智模型，让虚拟

的屏幕与真实世界交汇，往往会更好的帮助用户预判和理解页面的逻辑。

4.趣味性

趣味性动效的意义在于培养用户的正向情感，比如愉悦、放松、认可，避免用户

产生反向情感，比如愤怒、否定、失望，越强烈的正向情感越有利于帮助产品培

养用户的忠诚度，对一些使用过程的负面情绪更加包容。

比如下面这个服务评价页面，当乘客体验不友好给出差评时，用憨厚可爰的动效

形象给予乘客情绪上的缓冲。

完单服务评价

ServiceEvaluation

97.00元（已减免20元）》开发票

在完单服务评价部分，为了引导用户

操作，培养用户的正向情感，增强产司机服务态度

品的品牌认知，为此场景设计了交互

动效，点击生气和开心的表情符号，

分别代表评价好和不好。W好不好

去星级评价

a首芨妁车

司机头条项目中的双击点赞情感化动效。

双击点赞动效

DoubleClickLike

在播放页面屏幕任意位置双击，唉起

点费动画并有震动效果，目多次双击

之间没有时间冲突，即时响应双击.

给予点赞动画强反馈和趣味性效果.

在内容性点赞之外，增强用户点费意

£2司机头条

三、动效设计的目标

。增强产品的品牌认知；

°表现页面层级关系，使页面更易于理解

对产品

业务目标。形成视觉焦点，引导用户操作；

。帮助达成业务目标；

°提升产品易用性，增加使用黏性；

产品目标

。给予用户操作反馈;

对用户

体验目标。提高操作效率；

。提升操作趣味性；

在做动效之前先要搞清楚目标，为什么要做动效设计？从动效角度来说的产品目

标是什么？

动效设计的目标可分为业务目标和体验目标两个方向，如上图所列。比如对产品

来说，很多场景做动效设计是为了引导用户操作。同样是服务评价的动效，我们

从其他角度去聊一下设计出发点及目标。

首汽约车在对司机服务态度收集评价时，会有评价动效，以提升用户的评价意愿。

当用户点击好评时，下方的"去星级评价"会出现动效，引导用户操作，以提升

星级评价的点击率;而好评的评价率对于司机的接单而言,又是很重要的推动因

看似微小的细节，也会正向影响到整个服务流程。

完单服务评价

ServiceEvaluation

97.00元（已减免20元）।开发票

在完单服务评价部分，为了引导用户

操作，培养用户的正向情感，增强产司机服务态度

品的品牌认知，为此场景设计了交互

动效，点击生气和开心的表情符号，

分别代表评价好和不好。

W好不好

去星级评价

S首度妁车

、产品开发的什么阶段开始动效设计？

动效设计应该何时开始?

9*

挖掘动效设计创造开;

需求挖掘确定目标架构流程界面设计开发测试

动效设计是不是应该等交互UI都定好了，再来看哪里可以加得进去动效进行丰

富和点缀，这是很多初接触同学对于动效的认知。

实际上这也是可行的，但这只是对于一些基础性动效而言，比如常见的金刚区图

标加上MG动画以后，引导用户关注，提升某个业务场景的点击量，或者点赞

动画这一类。

但如果想动过交互动效来做更深层次的业务提升,在考虑动效的时候，就需要把

流程前置了，至少在原型设计阶段甚至业务目标确定之初就应该考虑有没有可能

通过创新的交互形式来帮助达成目标。

接下来通过一个具体的项目案例来加以说明。

我们在短视频应用浏览视频时往往会遇到这种情况,作者通过系列视频介绍一部

电影或其他内容，当我们看完当前视频想接着看该系列的下一条时，左滑进入该

作者的个人中心，发现作者的作品总量竟然有数百条之多，这时候想找到刚刚看

到的那条视频是非常困难的。

挖掘到了用户需求然后确定产品目标为缩短此场景的用户路径，就开始思考可能

的交互策略，下面这个交互方案便从这个场景切入：

用户从视频广场信息流左滑时直接进入作者的作品列表信息流页面，而且从当前

浏览的那条视频开始，可上下滑动继续浏览作者的其他视频，再继续左滑即可进

入作者个人中心。

这样只需一步操作，即可从视频广场直接继续浏览作者其他视频。

左滑交互动效

LeftSlipInteraction

从视频广场信息流向左滑动，直接进入该作

者的作品列表信息流。

O缩短-浏览系列作品时的用户使用路径；

原来至少2步操作，现在只需一步

。提升-作者的作品平均访问•；

作者作品的触达路径变短

O提升-产品的用户平均使用时长；

@盘尼西林

@也尼西林请你不要离开,这里胜似花

开没有人战够掩普,梦境中的色彩,谓你

不费离开,这里胜似花开#这是话给

□司机头条

优秀的交互动效要能够做到对业务和体验同时产生价值，这需要考验设计师的全

局思维，站在全局的角度洞察事物的全貌，体系化的连接事物的核心要素，不断

的构建自己的认知格局。

不再只是从单一角度思考问题、想办法、做决策，找到价值的源头，设定行为目

标，掌握专业技能，最终呈现结果。

业务价值业务价值

体验价值

寻找业务价值和体验价值的交汇区域优秀的交互动效要能够

对业务和体验同时产生价值

五.动效设计的落地

具体的落地实现方式，基本分为代码实现、GIF、序列帧、JSON、WEBP、APNG、

MP4,下面来依次说下这几种方式的优缺点和需要注意的地方。

1.代码实现

大部分交互动效还是需要开发老哥哥们通过代码实现的，想要完全实现设计稿的

效果，就需要对每一个分解行为进行标注——主要从运用对象、运动对象的变

化属性、贝塞尔曲线数值、运动时间、变化属性的描述五部分来分解标注。

就像下面这个动效设计，看似简单的两步——点击展开和点击收起，需要清晰

的标注出每一个元素的运动属性以及时间。

业务导航动效

BusinessNavigation

在业务展示部分，为了增强产品的品

牌认知，赋予界面活力和更多的可操

作性，为此场景设计了交互动效，点

击右上角双横线，双横线分别旋转

45度和负45度，变为关闭叉号，下

面四组车型分四次从右滑入，并有时

间间隔，关闭时整个场景不透明度变

为0,消失.

•畋河SOHO

S首逐为车

AE插件Flow可导出贝塞尔曲线数值，贝塞尔曲线数值就是两个坐标值，分别

代表运动速率曲线的两个手柄的坐标，通过这两个坐标便能够控制曲线的任意形

状。

首页业务展示展开与收起动效

触发条件对象变化属性贝塞尔曲线数值备注100ms200ms300ms400ms500ms600ms70(

分到曜R45度和负45度

▲______▲

旋转(0.33,0.00,0.67,1.00)▼▼

“全部”icon

vM(Q»-8pxfU8px

位移▲____▲

▼▼

席篇外假位移至屏*中同

▲_________________▲

位移(0.33,0.00,0.00,1.00)▼▼

约车出租车豪华车

▲_________A

透明度▼▼

扉IB外网位落至展募中间

▲___

位移(0.33,0.00,0.00,1.00)▼

国际包车巴士

0%-100%

▲___

透明度▼

岸＞1外网位答曳序H中间

点击“全部”▲i

icon位移(0.33,0.00,0.00,1.00)▼

粤港澳代驾租车

-一-_______________

透明度▼

群幕外他也

▲____________________________

位移(0.33,0.00,0.00,1.00)▼

周边游城际用车顺风车

0%

透明度▼

0*100%

A▲

文字“全部业务”透明度▼—▼

展•项x移动呈当前

▲__________________________.

位移(0.33,0.00,0.00,1.00)▼

0%-40%

黑色蒙层透明度―.

分别旋转45度和负45at

旋转(0.33,0.00,0.67,1.00)♦—▼

“关闭"icon

声位移-BpxKlapx

位移_______▲

♦----▼

100%.-0%

点击“关闭”icon所有业务车型透明度.———♦

当前位置移动至解mn*

bg位移(0.33,0.00,0.67,1.00)♦—---------------♦

100Si-O*

文字“全部业务”透明度♦——

40%-0%

黑色蒙层透明度4--------------------------------1

2.GIF与序列帧

GIF与序列帧也是比较常用的动效导出方式，但也有各自的局限性。

GIF支持的颜色最多只有256种，而且对透明通道支持不友好，在输出透明背景

的动图时会出现锯齿边沿，由于这种特性它只适用于色彩较少的动图，如果是色

彩较多的大型图片它的表现力就有限了。

序列帧相对GIF来说很好的解决了颜色的支持数量太少和对透明通道支持不好

的缺点，序列帧就是一张张的png图片所以他支持颜色达千万种，缺点就是文

件较大更耗内存，小型动图时可以选择这种方式。

loading-2&pngloading_2&i)ngtoadin0...O274>ngloading...28.pngloading...29.png

loading-3541ngiMding_3641n9loadrig...0374ngk>adng..-38.pngloading...39ipng

GIF74kb

kMdinQ.45.pngloadinQ...464ngloadriQ..O47.pnglomtno.4A.pngloading...49.png

序列帧307kb

3.WEBP与APNG

当动图色彩丰富且需要透明背景格式而序列帧文件又比较大时，GIF和序列帧就

都不是合适的输出方式了，这时可以选择用WEBP或APNG格式。

WEBP是Google在2010年收购了On2Technologies推出，经过几个版本迭

代，目前已经比较稳定，所有主流的浏览器都可以支持，在移动应用上对安卓支

持比较好，iOS应用通过一些代码框架也可以完美支持。

WEBP支持的颜色与png相当，并且完美的支持动图的透明通道且内存占用比

GIF更低。

APNG是Mozilla代码社区推出，基于PNG的位图动画格式，扩展方法类似网

页的GIF89a,第一帧是标准的单幅图像，动画不被支持时也可以正常显示第一

帧画面。

目前已经比较稳定，所有主流的浏览器都可以支持，支持的颜色与png相当，

也可以完美的支持动图的透明通道且内存占用比GIF更低。

给大家介绍一个导出APNG和WEBP的常用软件isparta,没有操作学习成本,

直接可上手。

>•iSparta

/1APNG../Downloads/4人物和日历/小场景2_00000_iSpt输出设置

'G-.■/zhuxiaofeng/Downloads/4人物和日历

输出名字

打开目录…[<JvaH2_00000JSptJSpt

输出格式

■APNG

■GIF

■WEBP

压缩质•

■Quality[80|(0-K

O开始

isparta

ALLPNGsAPNGGIF

4.JSON

Lottie,是Airbnb开发的一款能够为原生应用添加动画效果的开源工具。

目前提供了和版本,能够实时渲染

LottieiOSsAndroidReactNativeAfter

Effects动画特效。

Lottie在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动

画效果,Lottie还有一个可选的缓存机制，对那些频繁使用的东西能够更快加载,

目标就是帮助开发者和设计师能够更轻松的为应用创建动画。

Lottie依赖于AE的Bodymovin插件，Bodymovin可以把各种矢量元素以及

位图动画导出一个json格式的文本，开发工程师拿到json文件后就可以用

Lottie来解析读取。

下面以工作中的一个具体的项目来阐述下json的使用经验。

登录交互动效

LoginInteraction

在企业送登录注册页面，为了增强产

品的品牌认知，赋予界面活力和更多

的可操作性，为此场景设计了交互动

效，分为两部分，已登录部分只有纯

动画，未登录部分点击登录和注册按

钮会有进一步交互动效.

附汽妁车企出后

国首逐约车

（由于图片大小限制，已对效果做加速播放处理）

Bodymovin并不能支持所有AE的动画属性（常见的基本都支持）,不支持渐

变导出（位图中包含渐变完全没影响，比如这个项目案例的渐变就只是位图），

如果你的动画有形状动画且形状填充了渐变，那就没办法用json了，他导出的

渐变是黑白而非彩色的。

下图是Bodymovin导出时设置的勾选注意事项，设置后指定文件夹渲染导出即

可。

Bodymovin=

设置

。字体图形化

字体图形化意思是如果你的动画中包含文@字体图形化

将文本转换为路径

字，勾选这个之后文字就会被转换成路径

导出隐藏图层

（像AI的对文字创建轮廓）导出。选中则被隐藏的图层也会一起导出

导出参考线图层

选中则参考线图层也会一起导出

。转成based64

外部合成

如果合成中有表达式指向另外的合成，将会一起导出

这个选项勾选之后，整个动画都会被转化

成文本代码置于json文件中，也就是说，图片资源设置非矢量图片资源设置（jpg、png）

再给开发输出的文件中就将只是一段文本保留图片名称

代码，不会出现任何形式的图片，开发使导出图片资源时保留其原始名称

用起来会非常方便。压缩图片

设置图片压缩率（0-100）,数值越小体积越小，画质也越差

@转成base64

。演示模式将图片资源转换为base64代码并一起保存到JSON文件中

跳过图片资源导出

演示模式就是会导出一段演示dem。，双如果上次修改没有改动图片素材，可以用这个选项跳过

击即可在浏览器中预览，无实质作用。单文件模式

导出包含动画数据和播放器代码的单个文件

@演示模式

OAVD导出一个html文件方便本地预览

Android可能会用到这个选项，具体可根@AVD

导出安卓AVD格式的xml资源

据实际与开发沟通确定。

取消保存

在输出json