路野

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

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

 

01.遮罩法

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

图片

图片

图片

图片

 

02.覆盖法

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

图片

图片

 

03.重现法

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

图片

图片

 

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

作者:设计师深海

图片

 

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

登录收藏
 
你可能喜欢的:
S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴S02E04: 体验创造价值,什么创造「体验的价值—— 阿里云设计中心年鉴
想抓住产品第一印象?看看这些引导页设计方法!想抓住产品第一印象?看看这些引导页设计方法!
S02E03: 数字构建世界,什么构建「数字的世界」—— 阿里云设计中心年鉴S02E03: 数字构建世界,什么构建「数字的世界」—— 阿里云设计中心年鉴
如何提升UI效果图空间感?如何提升UI效果图空间感?
设计定义专业,什么定义「设计的专业」—— 阿里云设计中心年鉴设计定义专业,什么定义「设计的专业」—— 阿里云设计中心年鉴
项目总结|临感VR中的「易撕线」项目总结|临感VR中的「易撕线」
尝试了N稿,微信选择了第一稿。尝试了N稿,微信选择了第一稿。
【作品合集】老虎帮课程总监-小龙老师作品《随》【作品合集】老虎帮课程总监-小龙老师作品《随》
设计系统指南——搭建你的专属色彩系统设计系统指南——搭建你的专属色彩系统
徽章体系的思考&设计语境的边界探索徽章体系的思考&设计语境的边界探索