UI设计中，动效的作用与应用

我们一般所说的UI设计多指UI视觉设计，主要负责APP、Web、H5等页面的色彩、布局、icon、字体方面的设计工作。
但随着互联网的不断发展，纯视觉的工作已经开始日益减少，行业要求UI设计师学会多元设计领域的东西，像是交互，视觉，用户体验等等等。
                
                
其中有一个内容就是关于UI设计动效的，到底什么是动效呢？
顾名思义就是动画效果，通常用在UI设计中画面加载、切换、按钮、提示、操作过程之类的地方会应用到，我们称之为功能型动效。
                
                
另一个动画效果就是在提案，做DEMO时，给客户提供一个可以充分展示应用设计的动画效果。
便于客户理解设计理念，达到快速确认的效果，我们称之为展示型动效。比如：logo动画，视频带入性诠释等。
不管是哪种动效，都要遵循UI动效设计的规则：
1、流畅性；
2、简洁性；
3、独特性；
4、创新性；
                
                
◆功能型动效改善用户体验：
在逐步的探索和发展过程中，动效在网页和APP中的运用方法与技巧已经逐步成熟，形成了一套相对系统的模式。
今天的文章我们通过一系列实例，来展示一下动效是如何改善整个用户体验的。
●加载动效
动效最常用的一个地方就是进度条。但加载动效并不一定非要用进度条，设计师在这个页面中将品牌形象的狮子跑起来，不断重复来呈现加载过程，静态的文字和动态的效果交错，能让人在新鲜有趣的动画中度过略显漫长的加载过程。
                
                
●界面框架
界面框架会将界面加载之后的大概样式给展示出来，界面框架会让用户产生内容一瞬间就加载好了的错觉。
这种动效可以应用在绝大多数的网页和APP当中，它会明显强化用户的参与感。
                
                
                
                
●按钮动效
桌面端交互主要还是借助触控板和鼠标，光标悬停特效很大程度是为这种情况而存在的，同时，它也是最常见的动效之一。
                
                
当用户不知道某个控件怎用的时候，会很直觉地将光标移动到上面去，这个时候，悬停特效能够很好的吸引他们的目光。使用户的参与感增强，加大用户点击欲望。
●导航动效
从设计趋势上来说，越来越多的APP开始选择使用隐藏式的导航菜单，将更多的选项隐藏在汉堡菜单之后。
而菜单的打开和关闭中肯定需要动效加持来降低突兀的过渡，如果设计的足够精巧，用户会立刻被吸引住。
                
                
动效帮助用户将两种不同的状态和界面连接到了一起。
动效拓展了界面的视觉维度，它连接交互，让界面的功能和效果都更加圆融。
◆展示型动画效果加强代入感
MG动画是平面设计和动画片综合作用的产物，静态设计与动态叙事相结合的手法在自媒体中是一种新兴的视觉艺术表现形式！
主要作用是带领和引导读者快速进入状态，迎合设计思路。
我们设计的东西希望得到认可，但我们的客户或者参与者，不能第一时间体会到设计师的初衷，毕竟他们没念过那么昂贵的大学和培训班嘿嘿，势必会造成大量修改整顿。
此时如果加入视频效果，带入一下效果会更配哦！
●LOGO演绎动效
LOGO动效演绎最重要还是传情达意，不是为了动效而动效，要去感染和打动。
                
                
●视频动效诠释
这里的视频就是录的或者拍摄的视频，又或者通过软件做的视频动画，对产品或者理念进行诠释。市场上多为情感带入的。
                
                
提示：
就许多产品的界面UI设计来说，性能与速度就是一切，只有高性能，足够快的反应速度，才能稳定的获得良好的用户体验。
因此若是我们所设计的动效过于酷炫，导致产品性能减低，反应速度变慢，那么就是一个失败的动效设计，我们不能为了加入动效而制作动效设计，这是得不偿失的。
www.shiheui.com