什么是UI动效设计
UI动效设计,即用户界面上所有运动的效果,也可以视其为界面设计与动态设计的结合。
而在Materialdesign设计规范中,将动效设计这一章命名为「Animation」,意思是动画,活泼的意思。好的动效设计可以帮助引导、取悦用户,减少等待焦虑,是拉近用户与产品之间距离的有效手段。
动效的落地交付
当我们制作好动效之后,交付标注和文档是一个非常重要的环节。其实一款产品中的很多动效都是使用的控件默认效果,实际的效果在Principle这种交互动效软件中可以很好的体现出来。一般使用AE会搭配Bodymovin扩展插件,直接输出json文件交付给开发人员。细节处通过文档或实时沟通来解决。
在交付文档中有几个环节需要我们进行填写。其中包括:动效GIF展示图、触发条件、变换的元素和属性、曲线图和数值、备注、起始时间、持续时间、变换数值等等。
但还是会有一些动效是用插件无法解决无法输出的。这个时候就需要一份清晰完整的说明文档来配合开发人员制作,将效果的还原程度较大化。
UI动效的4个作用
UI动效设计,即用户界面上所有运动的效果,也可以视其为界面设计与动态设计的结合。
而在Materialdesign设计规范中,将动效设计这一章命名为「Animation」,意思是动画,活泼的意思。好的动效设计可以帮助引导、取悦用户,减少等待焦虑,是拉近用户与产品之间距离的有效手段。

UI动效的作用
1.展示功能、界面
动态的效果会和用户实际的操作更加贴近,可以更加清晰地展示产品的功能、界面、交互操作等细节。能够让用户更加清楚产品功能的实现流程,让用户更直观地了解一款产品的核心特征、用途、使用方法等细节。
2.有利于品牌的建设
自从UI动效出现之后,各大品牌logo都开始倾向于选择UI动效来建立自己品牌的独特效果,其中优酷和谷歌的logo就是比较鲜明的UI动效。品牌可以通过动画化,把品牌的理念、特色更清晰地传达给用户。
3.增强产品的亲和力和趣味性
有时候加个动效,能立马拉进与观者的距离,要是再加些趣味性在里面,用”爱不释手“这词也毫不夸张啊。
4.展示交互原型
很多时候设计不能光靠语言去解释你的想法,静态的设计图设计出来后也不见得能让观者一目了然。因为很多时候交互形式和一些动效真的很难用语言来形容,所以才会有高保真demo。这样就节约了太多的沟通成本。
UI动效的2大方向
一种是MG动效,增加产品魅力值和趣味性;另一种是交互动效,有效引导用户理解层次结构和空间关系
MG动效:为了增加产品魅力值和一些趣味性的点,可以帮助品牌在细节中流露出其特性,提升产品魅力值,表达应用情绪和气质
交互动效:可以非常有效的去引导用户进入下一个页面,可以把层次结构和空间关系在屏幕内外之间进行一个传达。
UI动效的6个类型
转场过渡、层级展示、空间扩展、聚焦关注、内容呈现、操作反馈