020-29815005
预约专线时间:09:00-23:59

UI动效设计大全,设计不再愁

新闻来源:优漫本站 日期:2023-03-11
动效对于数字产品的用户体验有着深远的影响,作为UI设计师不仅让我们增加新的技能,加强自身竞争力。同时让我们在基础设计上、工作沟通对接上等都有所提高。

  动效对于数字产品的用户体验有着深远的影响,作为UI设计师不仅让我们增加新的技能,加强自身竞争力。同时让我们在基础设计上、工作沟通对接上等都有所提高。

UI动效设计大全,设计不再愁


  什么是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个类型

  转场过渡、层级展示、空间扩展、聚焦关注、内容呈现、操作反馈

  对UI设计行业感兴趣的小伙伴可以扫描下方二维码,领取优漫教育课程七天免费试听活动,助力追梦的莘莘学子把握黄金学习机会,用专业技能充实自己,成为优秀UI设计师。