咕噜噜

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

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

 
动效在产品设计中的运用变得越发普及,特别是在图标设计中的运用。而图标动效在底部标签栏设计中最为突出,呈现出来的优秀案例非常多。
今天黑马哥就给大家分享 10 例个人最喜欢的案例,希望可以带给大家更多灵感启发。 
 
 01.  多层颜色叠加的动效表达  
图标动效是底部标签栏动效表达最常用的形式,动效的形式也是丰富多样,各自都有属于自己的特点。如何才能完美的结合动效进行演变,还能带来差异化的效果,是动效设计过程中构思的主要方向。
自如 APP 的设计整体感官体验都是做得非常不错的,在底部标签栏动效设计中,采用多层颜色叠加动效,呈现出来的动感和视觉感官很棒。多层颜色的变化增强了点击过度的吸引力,结合动效的流畅度强化了状态变化的存在感,能够让用户明确自己的操作路径。
图片 
 
 02.  弹性十足的动效设计 
动态相较于静态表达而言,不仅丰富了感官体验,也带给用户操作的趣味性,动感的体验更能吸引用户的关注度。动效设计的流畅度和趣味性决定了点击欲,动效演变过程中的感官强度决定了用户的记忆度。
喜马拉雅 APP 底部标签栏动效设计,弹性十足的效果让人过目不忘,有种想要反复点击的欲望。弹性动效变化中流畅自然,统一的短线表达强化了元素的一致性,点击后的内部缩小版也做到了风格统一。是一个非常不错的动效案例,动效设计技巧值得收藏。
图片 
 
 03.  循环动效让你感受时刻在场 
动效存在于底部标签栏设计中的目的是为了强化点击状态,突出当前功能的存在感,让用户明确自己的操作路径。在体验的众多产品中,图标动效通常是在点击状态之后进行过度而存在,只播放一遍。循环播放算是一种差异的体现,因此体验的时候做了记录。
在机场 APP 底部标签栏的图标动效,点击状态进行图标动效过度以外,动效将循环播放,时刻突出其存在感。循环动效让用户感受时刻在场,明确自己的操作路径,不会迷失方向。
图片 
 
 04.  流畅的上下滚动式切换设计 
图标动效在底部标签栏设计中运用最为普遍,而通过动效进行内容切换式设计相对较少。开眼 APP 利用上下滚动的动效来设计底部标签栏,给设计师们提供了另一种设计解决方案。
纯图标展示会增加用户的理解成本,而通过点击之后的文字表达可以提高用户的理解度。通过点击之后的滚动形式切换文字和图标,动效非常顺畅自然,体验度非常友好。
图片  
 
 05.  图标动效结合基因符号 
如何在设计层面体现产品特性,形成差异化的设计,是设计师不断探索的方向。结合品牌元素形成品牌基因是比较常用的形式,也有从产品属性层面出发,提炼出基因符号或者体现产品属性的符号。
作业帮 APP 在进行底部标签栏设计时,图标动效在演变过程中结合加减乘除(+-x÷),突出产品属性。提取了学习中大家熟知的符号,运用到动效的表达中,不仅增加了动效的趣味表达,也突出了产品特点。
图片 
 
 06.  收缩式交互动效设计 
动效除了在元素层表达以外,也可以结合交互动作表达,当交互动作变化时,以动效的形式实现收缩式底部标签栏设计。
马蜂窝旅游 APP 在进行底部标签栏突破的过程中,除了采用新颖的悬浮层设计以外,在上滑浏览内容时采用隐藏局部功能的处理方式,让内容的输出面积更大。在下滑或者停顿的过程中恢复默认导航,探知用户行为习惯并给出不同的交互反馈,带给用户更高的操作体验和互动趣味性。
图片 
 
 07.  带你感受水花四溅的动效 
动效的表达往往细节的构思最为重要,大方向的设计差异不大,体现出细节的设计才能带给用户更有温度的体验。在细微之处突出自己的特点和强化品牌元素,哪怕只是一个细微的符号表达或者动效变化,都值得深入推敲。
斗鱼 APP 底部标签栏动效设计结合了水花四溅的感觉,在点击图标进行演变过度时,图标四周会随机弹出小圆点,就像水花四溅的感觉。这种动效的体验就像你要去抓鱼,鱼儿受到惊吓激起水花四溅,带给用户亲切自然的场景体验。动效设计流畅自然,趣味性表达增强了用户的点击欲,一个非常不错的案例设计。
图片 
 08.  动效简化设计表达 
图标动效在演变过程中通常改变了默认和点击状态,动效过后需要有明显的区分,动效结果的设计尤为重要。
淘票票 APP 底部标签栏动效表达之后采用更为简洁的设计风格,利用简单的几何图形组成面性图标。动效流畅自然,动效之后的设计处理技巧是一个不错的构思,越是简单的图形越能被记忆。如何把简单的图形设计得有特点,结合动效的演变是一个思考的方向。
图片 
 
 09.  动效让设计突破束缚 
所谓的规范并不是限制我们突破的枷锁,“规范是死的,人是活的”。我们要做灵活的设计,而不是受制于规范的束缚性设计。
美团外卖 APP 底部标签栏图标设计结合 IP 元素,突出了自身设计的差异,也强化了品牌曝光。在图标动效的表达层面,不仅过度流畅自然,点击后的变化突破了规范性质的标签栏高度。突破束缚的设计效果也是显而易见的,用户当前路径的操作非常显著,也是一种不一样的设计处理技巧。

图片

1
 10.  利用动效打个响指 
一个俏皮可爱的动效总能让人印象深刻,不仅可以吸引用户关注和记忆,也能形成自己的独特风格。
BOSS 直聘 APP 底部标签栏动效设计中,有一个特别讨巧的动效案例。在“有了”这个模块结合了打响指的动效表达,就相当于有了一个想法,不自觉的打了一下响指,非常的贴合寓意表达。一个简单的动作不仅准确的表达出模块含义,差异化的动效表达突出了该栏目的存在感,提升了用户的关注度。
图片  
 
   小结 
感官体验是为了记录优秀的设计处理技巧,多看、多分析、多总结,才能有助于提高我们的项目设计效率。关于底部标签栏的动效设计还有很多优秀的案例,本期仅仅作为抛砖引玉,所选案例仅代表个人喜好,希望可以带给大家更多灵感启发。
文中案例选择和描述如有补充,欢迎大家留言交流,我们互相进步。 
 
原文地址:黑马家族(公众号)
作者:黑马青年
图片

 

转载请注明:学UI网 » 底部标签栏动效设计 10 佳案例

登录收藏
 
你可能喜欢的:
UI动效设计指南!三个要素打造流畅的动效体验UI动效设计指南!三个要素打造流畅的动效体验
UI动效设计原则UI动效设计原则
手把手教你制作撸猫 Demo 动画手把手教你制作撸猫 Demo 动画
近期观察到的微动效案例设计近期观察到的微动效案例设计
干货虽然迟到了,但三鱼还有私货干货虽然迟到了,但三鱼还有私货
我在公司偷偷开派对,老板发现后竟让我画个派对礼物,我人傻了!我在公司偷偷开派对,老板发现后竟让我画个派对礼物,我人傻了!
发现了10个非常棒的UI动效案例发现了10个非常棒的UI动效案例
微交互设计一定要知道的8种类型!微交互设计一定要知道的8种类型!
这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!
底部导航动效设计的3大形式总结!底部导航动效设计的3大形式总结!