UI动效设计的规则学习

UI动效的规则

      UI动效的四大属性：位置、旋转、缩放、透明度
      UI动效需要遵循的原则：提升用户体验，注重交互逻辑（落地回弹、先快后慢、惯性回弹）

      动效的本质是服务产品和愉悦用户的，并不是所有的页面及元素都适合加动效，所以我们在做动效的之前，就应该明确目标以及动效的合理性。下面来具体讲一下UI动效的使用规则和适用场景。

1、交互层级展现

      交互层级动效实际运用到APP的并不多，因为有些复杂的动效对产品和用户来说实质意义不大，而且开发的成本也不低。当然如果交互层级做得好的话，可以帮助用户更好的理清关系，降低用户的学习成本，以动效来体现整个系统的空间感。

      适用场景：适合层级逻辑性较强的页面，比如iOS系统的日历，点击年月日是一个层层递进的感觉，无论是从年到月到日，还是日返回到年月，整个放大和回缩的交互动效都很一致，非常符合这种层级关系。

2、吸引眼球

      这类的UI动效在运营设计中比较常见，主要目的是吸引用户的注意力，促使用户点击，来达到一个转化的目的。这类动效并不复杂，它一般只在重要的元素上做动效，这种微动效的方式不仅可以降低视觉元素的干扰，还使得界面更加清爽简洁，开发成本也比较低。

      适用场景：适用于运营专题页、banner、悬浮红包优惠券等，比如下图的banner，它只有两个元素做了动效，一个是GO的按钮，一个是人物的投影闪光。元素动效很简洁但很有效，让人一眼就看到了点击的按钮，悬浮优惠券也是如此。

3、操作反馈

      操作有反馈是交互体验的一个必备因素，这就不用多说了，至于反馈是要用静态的方式呈现还是动效的方式呈现，这都取决于反馈是否重要，重要的反馈采用动效的形式展现，不仅可以帮助用户更好的了解当前操作的响应情况，还能为用户带来安全感和愉悦感。

      适用场景：适用于重要的操作反馈，大多使用在按钮和图标动效上。比如App Store的获取按钮，它是一个从安装到完成对勾的一个动效，还伴随着小震动和声音，整个体验流畅且愉悦。标签栏的选中图标动效其实也是属于一个操作反馈动效，它能更好的突出选中氛围。

4、转场过渡

      页面转场过渡的动效也非常常见，它最主要的目的是给内容加载提供一个缓冲，好的转场动效不仅能降低用户等待的焦虑情绪，还能使页面更加生动有趣。

      适用场景：页面内容加载、加载小动效、刷新等。比如下图的一个loading动效，它能在等待中有效的分散用户的注意力，降低用户等待的焦虑情绪。如果没有动效的话，可想而知，用户可能直接就走了，不等你加载了，所以一个生动的loading动效在转场加载中是非常必要的。

5、增强表现力

      表现力交互动效在dribbble上比较多，虽然酷炫的可能都是飞机稿，但真正有实用价值的也不少，像空间扩展、图片放大延伸这些表现力的动效不仅能节省页面空间，还能减弱用户的挫败感，增强产品表现力。

      适用场景：页面跳转、内容滑动、空间表现等。比如下图的爱彼迎列表页面，点击图片，图片放大至顶部，内容随之出现，点击返回，图片缩小，内容不见。整个动效从列表到详情的过渡非常自然，是给产品加分的，表现力就不言而喻了。

6、提升流畅度

      提升产品流畅度相当于是对产品的一个不断打磨和挖掘的过程，增强与用户的互动，加深用户对产品的挖掘，增加页面的活力，给用户制造惊喜，形成依赖。

      适用场景：任何有优化空间的地方都适用。网易云播放歌曲页面就是一个很好的例子，播放时中间的唱片缓缓旋转，唱头也一直搭在唱片上面，暂停歌曲后，唱片停止旋转，唱头也随之移开。整个动效过程的现实隐喻感很强，播放也非常流畅，个人非常喜欢这个设计。

      注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-18498.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注UI设计频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050