底部标签栏动效设计 10 佳案例

底部tab图标的优秀动效案例，这里整理了10个，快来学习动效啦，时间不等人啊。

小可爱们，我这里会定期推送插画、UI设计、排版等相关文章教程，有事没事来逛逛啊；
设计路上在学习，永不停歇，我们一起加油~

动效在产品设计中的运用变得越发普及，特别是在图标设计中的运用。而图标动效在底部标签栏设计中最为突出，呈现出来的优秀案例非常多。

今天黑马哥就给大家分享 10 例个人最喜欢的案例，希望可以带给大家更多灵感启发。

01. 多层颜色叠加的动效表达

图标动效是底部标签栏动效表达最常用的形式，动效的形式也是丰富多样，各自都有属于自己的特点。如何才能完美的结合动效进行演变，还能带来差异化的效果，是动效设计过程中构思的主要方向。

自如 APP 的设计整体感官体验都是做得非常不错的，在底部标签栏动效设计中，采用多层颜色叠加动效，呈现出来的动感和视觉感官很棒。多层颜色的变化增强了点击过度的吸引力，结合动效的流畅度强化了状态变化的存在感，能够让用户明确自己的操作路径。

02. 弹性十足的动效设计

动态相较于静态表达而言，不仅丰富了感官体验，也带给用户操作的趣味性，动感的体验更能吸引用户的关注度。动效设计的流畅度和趣味性决定了点击欲，动效演变过程中的感官强度决定了用户的记忆度。

喜马拉雅 APP 底部标签栏动效设计，弹性十足的效果让人过目不忘，有种想要反复点击的欲望。弹性动效变化中流畅自然，统一的短线表达强化了元素的一致性，点击后的内部缩小版也做到了风格统一。是一个非常不错的动效案例，动效设计技巧值得收藏。

03. 循环动效让你感受时刻在场

动效存在于底部标签栏设计中的目的是为了强化点击状态，突出当前功能的存在感，让用户明确自己的操作路径。在体验的众多产品中，图标动效通常是在点击状态之后进行过度而存在，只播放一遍。循环播放算是一种差异的体现，因此体验的时候做了记录。

在机场 APP 底部标签栏的图标动效，点击状态进行图标动效过度以外，动效将循环播放，时刻突出其存在感。循环动效让用户感受时刻在场，明确自己的操作路径，不会迷失方向。

04. 流畅的上下滚动式切换设计

图标动效在底部标签栏设计中运用最为普遍，而通过动效进行内容切换式设计相对较少。开眼 APP 利用上下滚动的动效来设计底部标签栏，给设计师们提供了另一种设计解决方案。

纯图标展示会增加用户的理解成本，而通过点击之后的文字表达可以提高用户的理解度。通过点击之后的滚动形式切换文字和图标，动效非常顺畅自然，体验度非常友好。

05. 图标动效结合基因符号

如何在设计层面体现产品特性，形成差异化的设计，是设计师不断探索的方向。结合品牌元素形成品牌基因是比较常用的形式，也有从产品属性层面出发，提炼出基因符号或者体现产品属性的符号。

作业帮 APP 在进行底部标签栏设计时，图标动效在演变过程中结合加减乘除（+-x÷），突出产品属性。提取了学习中大家熟知的符号，运用到动效的表达中，不仅增加了动效的趣味表达，也突出了产品特点。

06. 收缩式交互动效设计

动效除了在元素层表达以外，也可以结合交互动作表达，当交互动作变化时，以动效的形式实现收缩式底部标签栏设计。

马蜂窝旅游 APP 在进行底部标签栏突破的过程中，除了采用新颖的悬浮层设计以外，在上滑浏览内容时采用隐藏局部功能的处理方式，让内容的输出面积更大。在下滑或者停顿的过程中恢复默认导航，探知用户行为习惯并给出不同的交互反馈，带给用户更高的操作体验和互动趣味性。

07. 带你感受水花四溅的动效

动效的表达往往细节的构思最为重要，大方向的设计差异不大，体现出细节的设计才能带给用户更有温度的体验。在细微之处突出自己的特点和强化品牌元素，哪怕只是一个细微的符号表达或者动效变化，都值得深入推敲。

斗鱼 APP 底部标签栏动效设计结合了水花四溅的感觉，在点击图标进行演变过度时，图标四周会随机弹出小圆点，就像水花四溅的感觉。这种动效的体验就像你要去抓鱼，鱼儿受到惊吓激起水花四溅，带给用户亲切自然的场景体验。动效设计流畅自然，趣味性表达增强了用户的点击欲，一个非常不错的案例设计。

08. 动效简化设计表达

图标动效在演变过程中通常改变了默认和点击状态，动效过后需要有明显的区分，动效结果的设计尤为重要。

淘票票 APP 底部标签栏动效表达之后采用更为简洁的设计风格，利用简单的几何图形组成面性图标。动效流畅自然，动效之后的设计处理技巧是一个不错的构思，越是简单的图形越能被记忆。如何把简单的图形设计得有特点，结合动效的演变是一个思考的方向。

09. 动效让设计突破束缚

所谓的规范并不是限制我们突破的枷锁，“规范是死的，人是活的”。我们要做灵活的设计，而不是受制于规范的束缚性设计。

美团外卖 APP 底部标签栏图标设计结合 IP 元素，突出了自身设计的差异，也强化了品牌曝光。在图标动效的表达层面，不仅过度流畅自然，点击后的变化突破了规范性质的标签栏高度。突破束缚的设计效果也是显而易见的，用户当前路径的操作非常显著，也是一种不一样的设计处理技巧。

10. 利用动效打个响指

一个俏皮可爱的动效总能让人印象深刻，不仅可以吸引用户关注和记忆，也能形成自己的独特风格。

BOSS 直聘 APP 底部标签栏动效设计中，有一个特别讨巧的动效案例。在“有了”这个模块结合了打响指的动效表达，就相当于有了一个想法，不自觉的打了一下响指，非常的贴合寓意表达。一个简单的动作不仅准确的表达出模块含义，差异化的动效表达突出了该栏目的存在感，提升了用户的关注度。

小结

感官体验是为了记录优秀的设计处理技巧，多看、多分析、多总结，才能有助于提高我们的项目设计效率。关于底部标签栏的动效设计还有很多优秀的案例，本期仅仅作为抛砖引玉，所选案例仅代表个人喜好，希望可以带给大家更多灵感启发。

文中案例选择和描述如有补充，欢迎大家留言交流，我们互相进步。

原文地址：黑马家族（公众号）

作者：黑马青年

登录收藏