路野

越来越多的手机APP开始注重动效的设计,而最常见的动效设计,就是图标动效(Icon Motion)。过去,icon的转换都十分死板,而加入了动效的图标,为用户的体验带来了非常有效的提升。icon动效的样式非常丰富,但其形式其实可以总结为以下3大类。

图片

 

01.状态变化

在大多数情况下,图标传达的信息不会改变,而展现形式与状态会发生变化。最常见的就是APP的底部导航栏,会有选中与未选中两种状态的切换。设计此类图标动效时,应注意前后状态的对比,使用填充或者描边属性来制作是非常好的选择。

图片

图片

 a

02.图形变化

某些情况下,点击图标后,图标会转换为另一种功能,其图形信息也会发生变化。例如前后摄像头的切换,或者列表的展开与关闭。设计这种类型的图标动效难度相对更高一些,要注意让图形转换足够自然,推荐使用路径动画来制作。

图片图片

 

03.循环变化

在另一些情况下,图标经过一系列的动画,会恢复初始的形态,以达成循环播放的效果。这种图标动效常被用作加载动画,向用户展示系统的运行状态,可以有效降低用户等待时的焦虑感。
图片

图片

图片

 

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

作者:设计师深海

 

转载请注明:学UI网 » 图标动效设计的3大形式总结!

登录收藏
 
你可能喜欢的:
被吹爆的巴黎设计风格,到底有多牛?被吹爆的巴黎设计风格,到底有多牛?
2022年LOGO设计新趋势2022年LOGO设计新趋势
用好“对比色”,让你的设计更有吸引力!(实操篇)用好“对比色”,让你的设计更有吸引力!(实操篇)
这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!
总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!
配色没有冲击力?来试试对比色搭配配色没有冲击力?来试试对比色搭配
为什么我做图会没灵感?大佬灵感都怎么来?为什么我做图会没灵感?大佬灵感都怎么来?
原来这种爆火的风格可以这么用!学到了!原来这种爆火的风格可以这么用!学到了!
当设计师看了《鱿鱼游戏》!当设计师看了《鱿鱼游戏》!
2021下半年3种UI新趋势!2021下半年3种UI新趋势!