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

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

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

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

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

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

02. 弹性十足的动效设计

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

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

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

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

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

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

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

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

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

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

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

06. 收缩式交互动效设计

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

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

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

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

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

08. 动效简化设计表达

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

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

09. 动效让设计突破束缚

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

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

10. 利用动效打个响指

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

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

小结

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

-END-

本文由运营大叔发布，不代表运营大叔立场，转载联系作者并注明出处：http://www.yunyingdashu.com/yunying/46814.html

运营大纲

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

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

02. 弹性十足的动效设计

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

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

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

06. 收缩式交互动效设计

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

08. 动效简化设计表达

09. 动效让设计突破束缚

10. 利用动效打个响指

小结

联系我们

18205969981

运营大纲

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

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

02. 弹性十足的动效设计

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

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

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

06. 收缩式交互动效设计

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

08. 动效简化设计表达

09. 动效让设计突破束缚

10. 利用动效打个响指

小结

相关推荐

请登录

联系我们

18205969981