路野

底部导航是整个产品的路牌,向用户指明了整个APP的基础框架,也承担了引导用户操作的重要作用。随着交互设计的升级,现在的底部导航,也是产品「品牌形象」展示的重要窗口,其重要性不言而喻。动效的添加可以有效的提升品牌形象和设计吸引力。

底部导航是整个产品的路牌,向用户指明了整个APP的基础框架,也承担了引导用户操作的重要作用。随着交互设计的升级,现在的底部导航,也是产品「品牌形象」展示的重要窗口,其重要性不言而喻。动效的添加可以有效的提升品牌形象和设计吸引力,设计底部导航动效时,最常见的有以下3个方法:

 

01.遮罩法

通过遮罩,使灰色的未选中状态,过渡到彩色的选中状态,这是最简单的动效方式。需要注意的是,直接遮罩过渡会显得有些生硬,最好搭配一些小元素动效,可以交代清楚图标切换的逻辑。

图片

图片

图片

图片

 

02.覆盖法

在未选中状态上,直接添加选中状态的生成动效,也是非常普遍的设计方法。最常见的就是利用描边或者填充属性,适用于各种风格的图标动效。

图片

图片

 

03.重现法

为了让切换效果更强烈,也可以使用重现法来设计。先让未选中状态消失,然后出现选中状态。这种动效时长会偏长,但可以让用户更明显的感受到图标的切换状态,如果你的动效很出彩,可以考虑使用这种方法。

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

图片

 

转载请注明:学UI网 » 底部导航动效设计的3大形式总结!

登录收藏
 
你可能喜欢的:
HMI设计需要遵循什么设计原则?HMI设计需要遵循什么设计原则?
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
独家首发 | 2022年视觉设计趋势,美得很高级!独家首发 | 2022年视觉设计趋势,美得很高级!
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
淘宝订单页改版分析:如何提高支付转化率淘宝订单页改版分析:如何提高支付转化率
被吹爆的巴黎设计风格,到底有多牛?被吹爆的巴黎设计风格,到底有多牛?
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
2021年度流行色彩已公布,用最科学严谨的方式教你把它用好!2021年度流行色彩已公布,用最科学严谨的方式教你把它用好!
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍