UI设计素材|切换动效,打破界面沉闷感

恰当的动效应用,不仅能够丰富页面的交互元素的视觉效果,也有助于提升整个页面的逻辑感

和空间感。

在进行用户界面设计的时候,动效可以存在于交互、转场和具体的控件操作上,动效作为一种

状态转变、交互反馈和视觉引导的工具而存在。动效设计师会使用各种各样的工具来进行动效

的设计,我们常常提到的工具包括 Adobe After Effects,Principle,Figma 和 InVision。

UI设计素材|切换动效,打破界面沉闷感

切换器

UI设计素材|切换动效,打破界面沉闷感

切换与原理

当前页面移动到后面,新的页面移动到前面,这样能够清楚解释页面之间是进行切换的,不会显得转换的太突兀和莫名其妙。

UI设计素材|切换动效,打破界面沉闷感

蝙蝠侠超人Vs的切换按钮

UI设计素材|切换动效,打破界面沉闷感

性别切换按钮

UI设计素材|切换动效,打破界面沉闷感

动画蜡烛切换W¯¯GSAP