编辑导语：用户在利用一款产物时，都但愿能有精采的利用体验。精彩的动效，可以使页面之间接洽越发细密，整体体验越发流通，减罕用户的负面情绪；同时，也可以增加产物的趣味性与品牌特色，让用户发生乐趣并提高品牌认知度。接下来，本文作者就带我们去相识动效设计。

现如，今动效设计在产物中的利用已经十分普遍。

这也导致动效设计由早期的「魅力型因素」逐渐成为「须要型因素」，越来越多的公司和团队已经意识到动效在产物用户体验中的重要性，动效也逐渐成为UI设计师的根基本领之一。

一、动效是什么

动效设计，顾名思义即动态结果的设计，用户界面上所有举动的结果，也可以视其为界面设计与动态设计的团结。

而在Material design 设计类型中，将动效设计这一章定名为「Animation」，意思是动画，生动的意思。好的动效设计可以辅佐引导、取悦用户，淘汰期待焦急，是拉近用户与产物之间间隔的有效手段。

二、动效分类

动效的分类并没有明晰的边界，按照其浸染大抵可以分为3类：

1. 成果型动效

此类动效一般用于产物设计，通过动态图形向用户通报信息，个中加载/刷新和进度条应该是我们平时打仗最多也是最早的动效了，此类动效最开始只是为了奉告用户产物的页面状态。

跟着社会上产物数量的快速增长以及竞争日益剧烈，产物的有趣和差别化显得愈发重要，于是便看到越来越多的产物将本身的品牌因素融入动效傍边，设计也越来越活跃有趣。

除了加载、刷新和进度外，成果型动效还被遍及的运用在产物的其他各类状态傍边，如信息报错、二维码扫描等。固然详细表示差异，但都是通过动态形式辅佐用户领略和利用产物。

2. 交互型动效

顾名思义，该类动效的焦点是“交互”，其主要的浸染是辅佐用户领略界面的层级逻辑干系，让产物的利用越发切合现实糊口中的认知习惯，从而低落利用本钱，晋升产物体验。

要留意的是此类动效不能离开用户的认知模子，只是纯真的炫酷对付整个产物来说是有害的。

其实交互型动效是用户在产物利用中打仗最多的一种动效，因为产物的利用是通过差异产物元素串联而完成的，而认真元素串联的就是交互型动效。

一般可分为「单页面交互动效」和「多页面交互动效」。

「单页面交互动效」：就是在当前页面产生的交互动画，好比tab切换、左滑删除、二级菜单展开、返回顶部等等。

「多页面交互动效」：就是差异页面之间的交互动画，其实就是页面的跳转，按照差异的场景会利用到差异的跳转样式，好的跳动弹画可以或许辅佐用户领略前后页面的逻辑干系。

3. 展示型动效

此类动效的更大浸染就是尽大概的为用户制造视觉上的愉悦，营造勾当气氛，让用户以为有趣活跃，利用的场景也十分遍及，常见的如「品牌展示」、「运营勾当」、「H5营销」等。

1）品牌展示

将有趣的动态图形与品牌相团结，让原本生硬的产物形象变得有趣活跃，拉近用户与产物之间的间隔。

2）运营勾当

动效设计同样也可以利用在运营设计中，作为业务数据转化的重要进口，动效可以极大的吸引用户的留意力，从而晋升业务数据。

H5营销