ui设计动画效果-干货！移动UI动画设计总结

本文授权转载自：58UXD（ID：i58UXD）

丰富细腻的App动效遍布优秀的移动应用界面，为用户提供良好的动态沉浸式体验。 动效设计在产品开发过程中已经越来越成熟和规范。 除了保证功能性和美观性的前提外，还要准确把握元素的动态交互，从而提高用户体验和产品竞争力。 在这里，结合我们团队的实际工作经验，给大家做一些简单的经验总结和技巧分享，希望能帮助大家在工作中更加得心应手地制作UI动画。

动效在UI设计中发挥着重要的作用和价值。 可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。

首先，动画可以帮助用户更好地理解界面的功能。 通过动画，用户可以直观地了解某个元素的功能和效果，例如按钮的点击效果、菜单的展开效果等。这种直观的理解可以让用户更快地掌握界面的使用，提高可用性界面的。

其次，动效可以提高用户体验和满意度。 通过动态效果的应用，用户可以感受到界面的流畅、舒适和生动。 例如，在切换页面时添加动画效果，可以让用户感觉过渡更加自然、流畅； 在输入表单时添加反馈动画可以让用户更清楚地了解输入结果。 这些细节的处理可以提高用户对界面的好感度和满意度。

简而言之，动效在UI设计中扮演着重要的角色。 可以帮助用户更好地理解界面的功能和交互方式，提高用户体验和满意度。 因此，在设计UI界面时，需要注意动态效果的应用，以提高用户体验。

运动曲线可以说是动画的灵魂，帮助我们创建平滑的运动效果，并通过控制图层属性，如位置、大小和透明度来创建不同的动画效果。 通过调整运动的时间、速度和曲线来获得最佳的动画效果。 它直接影响我们的动画是否流畅合理。

下图案例为美视电子工卡的入口动画。 通过调整运动曲线，使动画更加自然。

了解曲线

移动运动设计中最常用的曲线有四种，即ease-in、ease-out、ease-in、ease-out和恒速曲线。

缓入是一条加速度曲线，其中物体开始缓慢移动，并随着时间的推移逐渐加速。 加速曲线一般用于离开后就再也不会回来的物体，比如我们的手机系统清除后台应用程序时的动画效果。

Slow-out 是减速曲线。 开始时移动速度较快，随着时间的推移逐渐减慢。 物体在运动结束时逐渐减慢，产生减速效果。 减速曲线一般用在物体进入屏幕时，比如常见的弹窗入口效果。

缓进和缓出曲线。 两者的结合，先加速后减速，通常用于屏幕内物体的移动。 例如抽屉菜单的进入和退出动画。

除了这三种曲线外，还有一种不变速的运动方式，即匀速运动。 一般用在比较机械的动画中表情包设计，通常用于一些加载或者透明度和颜色的变化。

在视觉动画中，比如一些H5动画、KV动画或者动态壁纸。 如果只是普通元素，进入和退出仍然可以遵循上述规则。 进入时采用减速曲线ui设计动画效果，退出时采用加速曲线。

推荐脚本

调整效果需要很长时间，但还是很难达到你想要的丝滑效果？ 在了解曲线工作原理的前提下，我们可以借助这款AE Foot Flow快速调整曲线，它自带多种曲线预设。 我们可以使用这个脚本为我们的产品构建动态效果曲线预设库，并轻松地将我们自己的曲线预设应用到项目中。 您还可以导出动画曲线库并与其他设计者共享，或从其他动画师导入曲线预设。 希望它可以帮助您更快地创建高质量的动画和过渡效果。

很多C端产品都采用等级和勋章系统来增强用户粘性。 58同城内部通讯协作产品美视也有成就勋章系统。 在设计方面，我们在为50多枚奖牌进行了精美设计的同时，还在展示页面添加了每枚奖牌的外观动画。 目的也是为了利用勋章来增加勋章数量。 用户的荣誉感和仪式感。 在此背景下，如何保证奖章动态效果的一致性，我们也制定了一套工作方法。

一致性的关键

在UI设计中保持动画效果的一致性可以通过以下步骤来实现：

1.确定动画的类型：确定动画的类型，是什么形式，以及如何运行。

2. 定义动画的参数：确定动画的参数，例如动画的持续时间、速度、弹性和位置。

3、编写动画脚本：编写动画脚本，如编写动画函数表达式等，确定动画流程，如动画延迟、动画参数等。

4.测试动画：测试动画，确保动画一致并能产生正确的结果。

推荐脚本

这么多动画如何保证一致性？ 我推荐Motioner，一个用于批量复制关键帧的AE脚本。 它支持图层和关键帧、蒙版、父子级别和表达式复制的多重选择。 您可以像在PS中记录动作一样记录关键帧属性，然后一键粘贴到其他动画元素中，高效便捷地保证动画输出的一致性。

移动交互过渡效果的作用是给用户带来有趣的视觉体验。 动画的持续时间可能会根据使用场景而有所不同。 研究表明，动画的最佳持续时间在 200 毫秒到 500 毫秒之间。 这个数字基于人类的认知方式和信息消化的速度。 持续时间小于 100 毫秒的动画几乎无法识别表情包设计，而持续时间超过 1 秒的动画会感觉迟缓。 下面的例子中，Meish电子工卡的动画时长为500毫秒。

一个动画能否落地，涉及到的因素太多。 动效输出的选择越来越多。 作为设计师，我们需要了解动效实现背后的原理ui设计动画效果，以便更轻松地连接和实现它们。 目前动效输出常用的方法有两种： 位图法：PNG序列帧、APNG、GIF； 矢量方法：Lottie，SVG 动画。 具体的导出方法以及每种格式的优缺点这里就不一一介绍了。 但请记住一句话，如果山不向我走来，我就会向山走去。 以美丽勋章项目为例，由于Lottie效果支持的限制，我们选择了多种导出方式来实现最终的动画实现。

文章中使用的方法都是团队内部尝试过的，并不全面。 它们可以作为每个人在工作输出过程中的参考计划。 本次分享到此结束。 也欢迎您在下方留言回复交流，共同学习讨论。