从设计到落地,动效怎么才能成功?

释放双眼,带上耳机,听听看~!

炫酷的动效能够迅速抓住用户的注意力,同时还能起到引导用户视线的作用。细心的同学可能还发现了,今年淘宝、支付宝的动效比往年来的更多一些,今天就跟大家聊聊动效;

动效的分类

根据动效的作用,动效可分为:交互式动效  非交互式动效;

  • 非交互式动效

这类动效一般是纯展示类的,你看或者不看,动效就在那里,比如下面网易云音乐的动效。从设计到落地,动效怎么才能成功?

  • 交互式动效

交互式动效其实是尼尔森十大可用性原则中的 “系统状态的可见性” 原则,是与用户进行交互,给用户进行一定的反馈。

从设计到落地,动效怎么才能成功?

动效的作用

  • 非交互式动效

非交互式动效不与用户进行交互,作为纯展示类动效,有以下 大作用:

1. 吸引用户注意力:人眼会情不自禁的被动态的物体所吸引,因此这类使用非交互式动效可以吸引用户注意力,比如大促的动态按钮;

从设计到落地,动效怎么才能成功?

2. 引导用户视线:动效由于其动态特性,因此可以起到引导用户视线的作用,常用于动态引导;

3. 增加页面细节:有些动效作为页面中纯展示型动效,为了增加页面的细节和丰富度,比如下方切换后叶子飘落的效果;

从设计到落地,动效怎么才能成功?

  • 交互式动效

交互式动效的作用则是用户体验层面,有以下 大作用:

1. 满足用户期望:用户的每一个操作都会有一个期望,这个期望可能来源于现实映射,也可能来源于其他产品的教育,因此可以通过动效来缩小用户期望与体验之间的差距,例如Material Design移动卡片的动效;

从设计到落地,动效怎么才能成功?

2. 增强连续性:在使用产品的过程中难免会出现“断层”,比如以前页面在加载时,展示的是空白页面,这就会出现断层,因此Loading动效应运而生,来填补这块断层;

3. 提高参与感:产品只是工具,但是通过动效,我们可以给用户带来温度,提高用户的参与感,比如下面的获奖动效;

从设计到落地,动效怎么才能成功?

4. 强调层级关系:页面中不同的组件、模块、页面有着不同的层级和关系,通过动效可以表现出页面中元素直接的关系;

从设计到落地,动效怎么才能成功?

6W模型打造优秀交互式动效

以这个案例剖析,教大家如何六步打造优秀交互式动效:

1. 找出触发场景(Why)

作为交互式动效,那么第一步就要明确用户在什么情况下会与产品发生交互;

2. 明确交互方式(When)

当我们知道用户在什么场景下与产品发生交互后,下一步就要确定用户以什么方式与产品进行交互,是点击还是滑动,是长按还是拖动。在本案例中,用户打开浮层时,可以使用点击或者上滑;用户收起浮层时,可以使用点击和下滑;

从设计到落地,动效怎么才能成功?

3. 梳理运动组件(Which)

在这个部分梳理出对于用户操作会发生运动的组件,比如用户上滑打开浮层,此时浮层的这个组件会由收起状态变成展开状态,同时右上角汉堡菜单和顶部的穿衣助手会收起;

从设计到落地,动效怎么才能成功?

4. 子级联动组件(Who)

有些时候一个组件里面包含了多种内容,因此要找出会联动的子级内容,比如浮层中就包含了当日天气预报、风力、分时天气,这几个部分会跟着浮层一起展开或者收起

5. 理清变化属性(What)

到这个阶段就要理清哪些属性会发生变化,常见的变化属性有位置、缩放、透明度、旋转、尺寸、圆角,还有一些图层样式,比如描边、投影、发光等。像案例浮层展开的效果中,浮层的位置、浮层子级的位置和不透明度、汉堡菜单的尺寸和位置、穿衣助手的尺寸和位置这些属性会发生变化;

从设计到落地,动效怎么才能成功?

6. 找到合适曲线(How)

当一切准备就绪后,最后一步就是确定运动曲线。具体用什么函数需要根据产品和用户来确定,比如案例中我想表现一个物体从水中浮上水面的效果,那么应该是一个应该是先加速,最后是一个弹性的效果。这里给大家提供了常用运动函数速查表以方便大家查阅。另外需要注意的是,整个产品的运动曲线都应该保持规范统一;

从设计到落地,动效怎么才能成功?

动效的切图与标注

无论是什么样的效果,只开发效果图肯定是不行的,动效稿跟视觉稿一样,都需要给开发切图标注,那么如何标注呢?

1. 标注运动组件

首先就是标注出有哪些组件会发生运动,并给予相应的命名,可以简单粗暴的命名A、B、C、D,也可以命名按钮、背景装饰等等,但是需要跟开发沟通,保证开发能够辨认出;

从设计到落地,动效怎么才能成功?

2.标注运动时间

标注运动时间和标注运动属性一般同时进行,运动时间指的是运动持续的时间,要标注清楚每一种属性运动了多久;

从设计到落地,动效怎么才能成功?

3.标注运动属性

运动属性指的是发生变化的属性,例如位移、不透明度等等,需要标注清楚变化前和变化后的属性;

从设计到落地,动效怎么才能成功?

4.标注运动曲线

最后一步就是运动曲线,一般情况下我们在制作动效规范的时候就已经定义好了曲线,直接告诉开发调用哪个运动函数就可以了,如果没有定义的话就需要以贝塞尔曲线的形式标注出来,例如:cubic-bezier (0.215, 0.61, 0.355, 1);

从设计到落地,动效怎么才能成功?

5.交付

标注完成之后将效果图、标注稿和相应的素材打包交付给开发即可,必要的情况下需要跟开发当面说一下整体动效的运动情况;

便捷落地方案

除了由开发代码实现以外,还可以通过直接输出效果图的方式将效果图给到开发,开发直接使用即可;

1. GIF

从设计到落地,动效怎么才能成功?

Gif是非常久远的技术了,仅支持8bit彩色,没有半透明,如果你的动效里面有半透明通道存在,会自动填补为实色。其优点是成本低,易操作,缺点是效果差,可能会影响性能,适合要求极低且无半透明通道效果;

2. PNG序列帧、雪碧图

从设计到落地,动效怎么才能成功?

咱们都知道,动画之所以能动是因为有一连串连续的图片在切换,PNG序列帧就是这个原理,当播放动效的时候,将大量连续图片以一定速率进行切换,另外一种方式是将所有图片放到一张大图(雪碧图)上,通过控制显示区域,移动这张大图来实现动效。其优点是成本低,可以实现所有动效,缺点是图片所占体积太大,因此当动效帧数过多时,不太适合使用序列帧;

3. MP4、透明MP4

从设计到落地,动效怎么才能成功?

MP4作为视频格式,则简单粗暴了许多,直接将动效生成视频压缩后播放即可,但是MP4没有alpha通道,这就导致例如弹窗、礼物等动效无法实现,于是衍生出了透明MP4,原理类似于设计中的蒙版,由两个视频,一个视频是完整的视频,另一个则作为遮罩进行遮挡。MP4的优点是几乎可以实现任何动效,缺点则是所占体积偏大,同时透明MP4实现成本较高,对开发要求较大;

4. Bodymovin与Lottie

Lottie是Airbnb公司出的一款开源工具,起初Lottie是为矢量动画而设计,但是现在对位图动画也有很好的支持,对应的AE插件是Bodymovin,当AE做完动效之后,使用Bodymovin导出json文件和资源包,开发使用Lottie调用json文件和资源包即可。其优点在于能够实现大多数基础动效,在减少开发工作量的同时能够减少所占体积,缺点在于AE中许多效果不支持,同时导出时可能会存在问题,而开发侧则需要引入SDK。设计师在做完动效之后,仅需使用Bodymovin即可导出资源库交付给开发使用;

5. SVGA

从设计到落地,动效怎么才能成功?

SVGA是YY出的一款类似于Lottie的工具,Lottie是为矢量动画设计,而SVGA则是为位图动画而设计,其优缺点与Lottie类似,但是由于其主要是支持位图动画,因此对矢量图形效果不是很友好。设计师可以通过AE中的SVGA插件导出SVGA交付给开发;

6. WebP

从设计到落地,动效怎么才能成功?

GIF这项技术已经有很多年没有更新迭代了,Google看不下去了,于是开发了一个新的动图格式——WebP,支持24bit彩色,而且弥补了GIF不支持透明通道的缺点,其优点在于成本低,效果好,但是缺点在于iOS对其有点不友好,所占体积与Lottie和SVGA相比偏大。对于设计师而言,AE做完动效后,直接使用插件即可导出WebP图片交付开发;

总结

动效的使用越来越多,随着5G的快速普及,未来对动效的要求也会越来越高,作为设计师而言,除了执行层做出炫酷的动效以外,也要学会为业务下游考虑,为整体项目考虑,不能一味的追求效果不谈成本;

人已赞赏
交互设计

UX设计可以从动画中学到什么

2019-12-18 13:47:08

交互设计

通过用户购买行为,对UI设计的启发

2019-12-23 13:55:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索