扫码登录 我要学设计网
设计师的职业进阶课堂

微信扫码登录 | 方便安全省心

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

黑马青年 2021年12月21日 发布 / 785 次阅读

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


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


封面.png




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


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


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


1.gif




02. 弹性十足的动效设计


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


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


2.gif




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


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


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


3.gif




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


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


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


4.gif




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


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


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


5.gif




06. 收缩式交互动效设计


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


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


6.gif




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


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


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


7.gif




08. 动效简化设计表达


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


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


8.gif




09. 动效让设计突破束缚


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


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


9.gif




10. 利用动效打个响指


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


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


10.gif




小结


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


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



作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。