又到了细节篇的时间啦，这次的主题是底部导航的动效设计，接下来将从：

 

以上四方面展开介绍，首先感谢Exia、Maskkk两位开发小哥哥对本篇的帮助，感谢你们~(＾－＾)V，话不多说我们马上开始吧！

一 .底部导航动效的作用

底部导航一直是移动端产品的主要导航方式，它可以方便用户在不同功能间切换，同时也表明当前所在位置。其样式有图标、文字或图标+文字，切换时可以直接切换也可以加上动效。

直接切换属于常规方式，无功无过，图标的选中与未选中状态足以区分当前所在位置。但是适合的动效也确实是一个加分项能为产品增色不少，加入动效主要有以下3个作用:

1.视觉引导，明确操作反馈  

相比于静态物体，动态的物体更容易吸引人们的注意力，为从A前往B提供视觉线索引导。同时也是为点击操作提供的更加清晰明确的反馈。

2.自然切换， 提升使用体验

直接切换虽然没有什么问题，但深究起来却是有些生硬，相当于只有现状——切换完成两步，也就是只有开始和结束，没有切换中的状态。

 

而动效的加入，补全了“切换中”的状态，让整个流程完整起来，“现状——切换中——切换完成”让切换过程更加自然柔和，提升使用体验。

3.增加趣味性，品牌文化输出的窗口

动效的加入相当于为设计师又提供了一个发挥的维度，使原本静止的元素能以更加立体的方式展示，设计过程中可以传达出更多的信息，是增加趣味性的有效手段。所使用的动效不仅需要符合整个产品的调性更能与品牌结合，也成为了品牌文化的输出窗口。

 

如下图波洞的例子就是与其品牌文化内涵相对应的，除了静态的图文，动效过程也承担起品牌输出的责任，让产品的特点更加生动鲜明。

二.如何选择适合的动效

现在各种动效效果丰富，如何从众多效果中，选择出适合自身产品的，我们可以从三个方面来考虑：

1. 图标的选中与未选中样式

首先可以从图标的选中与未选中的样式来考虑，从结果倒推思考如何用适合的动效类型切换过去。常见的图标样式有以下4种：

而动效的类型主要则有：缩放、填充、生长、位移、旋转等，不同的样式有与它契合的动效类型，比如从线到切换到线适合做生长动画的效果，而从线到面的样式切换则可以考虑填充的动效等，文中第三部分“动效的基本类型”中会详细介绍各种样式适合的动效类型。

2. 产品的风格定位

再精美的设计也需要与产品本身的风格定位想匹配才能发挥其作用，动效也不例外。加入动效绝不是炫技的堆叠效果，而是应该让它与产品匹配，让我们可以有多一个的维度去更立体的诠释产品。

 

如果产品本身用户跨度大人数多，风格沉稳，那么我们在选择动效的时候，也应该选择简单优雅的效果不能太跳脱，比如下图美团选择的是一个简单的缓动缩放效果。

而叭哒因为产品面向的是喜欢动漫二次元的年轻人群，普遍喜欢萌和可爱的东西，对于他们来说颜值既正义，好的视觉效果和趣味性更能吸引他们，所以叭哒的整个动效会更加复杂一下，添加了可爱元素，动式上则是弹性效果，显得活泼俏皮。

动效给人的感觉是沉稳优雅，还是活泼可爱，其实很大程度上受动式影响，因为即使是同样的动效类型，选择不同的动式也会带来完全不一样的视觉感受。所以了解动式的类型可以帮助我们做出更合理的选择，动式的基本类型可以分为三种：线性、缓动、弹性。

线性

线性是匀速运动，整个过程很平稳，毫无波澜。（呃……看运动曲线也能看出来，就是这种又直又刚的感觉）

缓动

缓动细分的话也有几种模式，分别是Ease In、Ease Out和Ease Both。缓动具有节奏感和韵律感，相比于线性的匀速显得更加优雅生动，是使用较多的类型。

弹性

弹性是三种里面波动最大的一种了，动效尾声的时候伴随小幅度的频繁抖动，俗称Duang~，效果也是活泼生动，比较俏皮，和年轻化的产品非常搭。

我们应该根据产品的风格定位来选择与之相匹配的动式。

3.开发成本&项目排期

除了设计样式和产品风格定位，我们还应该考虑开发成本和项目排期，设计好效果后可以先和开发人员沟通讨论实现方案，如果与排期有冲突，技术有难点的话及时调整，换可行的方案，确保 最后的落地。关于各种实现方案，在文中第四部分还会详细介绍 。

三.动效的主要类型

前面我们已经了解了动效的作用和选择适合动效需要考虑的问题，接下来我们一起来梳理一下动效都有哪些类型，它们各自有什么特点，适合在什么样的场景使用。

· 缩放

缩放是简单稳重、包容性好的一种动效形式，不管是哪种样式的图标都可以选择使用缩放动效，同时也是一种较为通用的效果，不需要针对图标元素进行精巧地定制化设计。说白点就是可以套用，且出来的效果还不错，既有动式又不会太复杂夸张，对于视觉引导和明确反馈完全够用，所以它的应用比较广泛，适合大多数产品，是比较保守不易出错的一种选择。

除了整体图标的缩放，还可以调节图标元素的局部缩放，带来更加丰富多变的效果。

· 填充

填充动效顾名思义就是颜色的填充，适用于选中后过渡到面性的图标样式，可以是局部色块的填充，也可是填充图标整体，如从线性→线面或是从面性→面性，这几种样式选择填充效果，切换过程都可以做到自然流畅。若单纯只有线性图标的样式，图标面积单薄，不易出效果一般不建议使用。

· 生长

前面我们介绍了适合面性图标的填充动效，而现在要说的生长动效则与之相反，它适合的刚好是图标的线性部分，是线条从无到有的过程。经常与缩放动效搭配使用，为整个动效加入局部细节亮点，使其更加活泼灵动。

· 位移

位移是图标或其中元素的移动效果，比如爱范儿的快讯图标两侧弧形向外移动和收回，在其它禁止的图标中可以有效吸引用户的注意，同时也是模拟信号塔发射的过程，与“快讯”呼应。

再如轻芒的底色移动，轻芒的底部导航是纯文字的样式，加入底色的位移动画对于视觉是较强的引导，变化的色彩也减少纯文字的单调感。

需注意图标整体位移动效应用相对较少，即使使用也需要尽量减少位移的幅度，底部导航是一个固定模块，而大幅度的位移动效过于跳脱会削减这种固定感，是我们需要尽量规避的。

 

· 旋转

旋转动效是切换过程中图标或其中元素的角度旋转，与位移相同，旋转更多的也是针对具体图标做出的巧妙设计。比如搜狗浏览器的指南针发现图标，和百度贴吧消息铃铛图标，都使用了旋转的效果以模拟实物的晃动感觉，符合实物的运动规律让人觉得亲切自然。

除了二维的旋转，还可以考虑三维的旋转效果，比如转转舵式导航中间图标的动效，融入了品牌IP形象的元素，向左向右的转头效果也与品牌“转转”的概念贴合，给人留下深刻印象。 

· 点击

点击动效是在点击切换的过程中，在图标下层为点击区域添加色块，以加强点按的效果，让操作的反馈更加明确。

· 形状变化

形状变化也是需要针对图标形状元素定制化设计的一种，自由度高供设计师发挥的空间大，能产生许多生动有趣的效果。比如猫耳FM的舵式导航中间猫咪打瞌睡的鼻涕泡动效，QQ的消息图标，每次双击都切换不同的表情，成为了给人留下深刻印象的记忆点，为产品增加趣味性。

· 组合

组合的话是融合多种类型的动效，比如美团外卖，是整体缩放与局部生长动效的结合。

还有一种是同组图标采用不同的动效，比如喜马拉雅的底部导航图标是从面性→面性的切换，图标整体没有统一的动效，但在每个图标的局部，都针对其特征设计了不同的动态效果。首页图标是房子小窗户从上垂落的位移动效，我听星型中线条的生长动效，发现指针的旋转等都是与元素结合的设计，让原本面→面之间平淡的切换变得各有特色。

四.动效的交付和开发实现

最后我们来看看设计好动效之后该如何交付和实现。主要有以下四种方式：

1.提供静态图及动效说明

设计软件：Sketch

开发成本：★★★☆☆

 

简单动效比如缩放，旋转，位移等，提供JPG或PNG的静态图及动效说明，由开发实现动态效果。其优点是效果流畅且体积小。关于动效说明，如果简单的话可以用图文表示，复杂的话需要结合动效Demo动态展示效果（可以使用AE、principle、PS、Flinto等制作），说明的时候别忘了附上动式的描述，有时候会忽略这一点。

2.提供GIF图片

设计软件：Sketch、AE、principle、PS、Flinto等

开发成本：★☆☆☆☆

 

复杂动效，比如生长、形状变化，组合变化等，我们可以直接生成GIF图交给开发，这样实现起来成本最低，所有的动效由设计内部消化了，对于开发的同学来说点击只需要替换图片就可以，很受他们欢迎。

 

但GIF也不是完全没有问题，它最主要的问题是文件较大，画质越清晰的文件则越大，而且响应速度相比其他形式偏慢，如果是复杂一些的图就需要再画质和文件大小之间找平衡了。

 

3.提供SVG图片及动效说明

设计软件：Sketch

开发成本：★★★★☆

 

SVG图片其实就是用脚本写好的矢量图，Sketch可以直接导出SVG格式，所以对于设计师来说是比较方便的。而且SVG是最小最灵活的，可以很好地扩展，同样的图形动效SVG比GIF小约95％。而且与JPG或PNG不同，由于是矢量的所以SVG图片不会失真，可以支持生长、变形等效果的，开发同学能根据我们提供的动效说明用代码还原实现。

 

但它也有自身的限制，一是开发成本较高，二是如果需要再web使用，IE浏览器是不支持的，如果产品在web使用的话还需要考虑到这一点。

4.提供Json文件

设计软件：Sketch、AE

开发成本：★★★☆☆

 

用AE做好动效后，导出Json文件给开发，其优点是还原度高，能节省一定内存，不过也需要注意Json虽然好用，但过多使用会耗设备的性能，尤其对一些低端设备造成较大的负担，特别是一些较大的动画，容易造成卡顿，所以json还是比较适合小范围的动画。

 

总体来说实现的方法还是挺多的，我们可以先做动效Demo，然后与开发的同学探讨选择出最佳实现方案，确定后再去着手准备交付物。

 

 

划重点

· 底部导航动效能为用户提供视觉引导，明确操作反馈，增加趣味性提升使用体验，也是品牌文化输出的窗口 。

 

· 选择动效可以从图标的选中与未选中样式，产品的风格定位，开发成本三方面来考虑。

 

· 设计动效的时候需要考虑到不同的图标样式有与它契合的动效类型，选择与之相应的。

 

· 动效的实现可以提供静态图片及动效说明，也可以选择GIF、SVG、Json文件等，各有其优缺点，可以先和开发的同学探讨最佳方案，再提供交付物。