细节篇:底部导航这么做才有趣!

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
6350 19 395 2019-07-31

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


Image title


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


一 .底部导航动效的作用


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


Image title


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



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

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


Image title



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

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

 

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


Image title



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

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

 

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


Image title




二.如何选择适合的动效



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


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

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


Image title


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



2. 产品的风格定位

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

 

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


Image title


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


Image title


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


Image title



线性

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


Image title



缓动

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


Image title



弹性

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


Image title


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



3.开发成本&项目排期

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




三.动效的主要类型



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


· 缩放

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


Image title

Image title


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


Image title




· 填充

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


Image title



· 生长

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

Image title


Image title



· 位移

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


Image title


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


Image title


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


 

· 旋转

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

Image title


Image title


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


Image title



· 点击

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


Image title


Image title



· 形状变化

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


Image title


Image title



· 组合

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


Image title


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


Image title



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


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


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

设计软件:Sketch

开发成本:★★★☆☆

 

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


Image title



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使用的话还需要考虑到这一点。


Image title



4.提供Json文件

设计软件:Sketch、AE

开发成本:★★★☆☆

 

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

 

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



划重点



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

 

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

 

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

 

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



全部评论:19

  • 楠神有道

    2019-11-19 16:36

    GIF图清晰度不够的

  • TongxueLK

    2019-09-07 16:09

    学习了 chenjiangwei69 8-1 09:51 动效落地的方式,是有很多,在底部标签栏上的话就不多了,首先第一种你只给出动画的时间,开发是把握不好动画的节奏的,应该提供详细的时间和贝塞尔曲线值。而且principle只能用来做展示,无法输出实际落地的交互物,ae输出的json只能用于路径动画,都有其优劣势。GIF来说或者svga在标签栏动画上 安卓可以直接使用,但是ios确不行,ios通常采用序列帧的形式播放

  • 兔der酱

    2019-08-29 11:54

    可以导出SVGA格式吧?

  • 董小嗯1989

    2019-08-16 09:49

    @mingmo: 个人建议输出序列图,开发设置播放时间就行。

  • Panliang

    2019-08-14 19:01

    好棒啊~最近正好在最这个 求教程 哈哈哈

  • 10PM

    2019-08-08 17:47

    有教程嘛

  • 12u329u49

    2019-08-08 11:17

  • 刘正欣

    2019-08-06 16:20

    关注了,很棒~

  • 大脸儿

    2019-08-05 10:54

    转转那个不错啊

  • 培西西

    2019-08-02 10:21

    @T.O - 卢子皓: 感觉分不同的产品,趣味性的社交APP做底部动效导航,是非常好的选择。但是一些电商之类的,个人觉得不是很有必要,或者说用户的注意力也不在这。

  • mingmo

    2019-08-01 15:11

    我想请教一下,底部的导航栏动态图标是不是导出一个只播放一次的动图

  • T.O - 卢子皓

    2019-08-01 10:03

    @longlonglongago: 我个人认为,这样做,可以增加平台的趣味性,可以加深用户对平台的感知

  • chenjiangwei69

    2019-08-01 09:51

    动效落地的方式,是有很多,在底部标签栏上的话就不多了,首先第一种你只给出动画的时间,开发是把握不好动画的节奏的,应该提供详细的时间和贝塞尔曲线值。而且principle只能用来做展示,无法输出实际落地的交互物,ae输出的json只能用于路径动画,都有其优劣势。GIF来说或者svga在标签栏动画上 安卓可以直接使用,但是ios确不行,ios通常采用序列帧的形式播放

  • 发发送给你

    2019-08-01 09:20

    请教gif图的切图方法

  • Gabe丶

    2019-07-31 16:06

    关于动效实现与交付,每次都要去求开发,要做动效,要还原设计稿,心累,不知道是不是所有公司都这样。 另外,第5种方式其实可以使用webp,色彩不失真,体积还小,安卓端完美支持,但是iOS的WebView不支持,需要第三方库,处理,缓存,回调,比较麻烦。

  • 离尘不离城

    2019-07-31 14:52

    @longlonglongago: 在千篇一律的无动效底部,突然来一个有个小动效的效果是不是焕然一新?

  • longlonglongago

    2019-07-31 14:30

    个人觉得底部动效挺没必要的 用户更多的注意是在内容的转换不是页码的转换 如果底部是动效反而分散了用户注意力增加阅读时长

  • 李先森LIXIANSEN

    2019-07-31 14:17

    直接给予GIF图也是可以实现的。

  • 穆东没有河

    2019-07-31 13:04

    很多开发也会要求用到序列帧的方法,当然前段时间爆火的网易云音乐动效大佬给出的CSS方案也很厉害

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票