动效设计必备的理论知识，改善你的UI/UX设计！
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第118篇文章分享
现实生活中没有绝对的“静止”，通过模仿物体在现实世界中的运动状态，会让画面中的设计元素更真实、更容易被用户理解。
在之前的文章中，设计夹从动效的速度、缓动类型和动效编排三方面，分析了在设计UI动效的过程中需要考虑的因素。还没看的小伙伴可以快速回看👉🏻UI动效设计指南！三个要素打造流畅的动效体验
动效的优势
1) 保持专注
动效能让用户集中注意力。比起字体、颜色等静态的视觉元素，运动的元素能首先引起用户的关注。
画面中的静态元素能够让我们的眼睛和大脑更快地处理信息，所以页面中最重要的文字信息都是排版整齐，静态展示。
而动态要素能让我们保持专注，缩短对时间的感知，例如常见的加载操作，趣味性的加载动效能很大程度减缓用户焦急的心理。
2) 理解界面交互
动效能够帮助用户更轻松地理解界面交互。利用动效，我们可以清楚地了解界面从哪里出现、如何消失，以及不同界面之间是怎么切换的。
例如通过动效展示浮层如何从界面底部弹出来，并在完成任务后消失的过程。
3) 传递多种信息
在移动产品中，利用动效可以在较小的空间内传递多种信息。如果是固定的，显示的信息会占用一定的空间。
4) 快速获得反馈
动效还可以提供直观、可预测的反馈。当我们想删除某个元素时，通常是通过弹出文案或图标进行提示，例如操作“失败”或“成功”弹窗。
除了显示成功或失败的视觉提示，还可以在要删除的对象上添加动效，方便用户直观地获得反馈。例如失败时，展示摇头一样的左右移动动效，成功时展示上下跳跃的动效。
动效设计必备要素
1) 速度
动效的速度和持续时间是相对的。速度建议从0.2秒（200ms）到0.5秒（500ms）之间，时长以1秒（1000ms）为基准。
▲ 小于100毫秒的动画是瞬时的，不会被用户注意到；如果时长大于1000毫秒(1s)，会让用户感到动画很缓慢，带来一种拖沓的感觉。
元素的大小越大，移动越快。因为越大的元素在同一面积内移动的距离越短。想了解更多UI动效设计指南，可以快速回看👉🏻👉🏻UI动效设计指南！三个要素打造流畅的动效体验
▲ 对重复的动效进行加/减速变化，会让动效看起来会更自然。一直以相同速度运动的物体看起来很机械化，不符合现实生活中物体的运动状态。
在设计时，我们可以在开始时给物体一个加速，快到达终点时减慢速度，让整套动作更自然。
2) 动线
在数字产品中，还要考虑元素出现的场景和流程。明确定义动效在用户体验阶段解决了哪些问题，找到可以帮助用户实现目标的流程，并合理应用动效。
▲ 从用户操作开始的位置开始运动。例如，当用户点击下拉按钮时，下拉窗口很自然的从按下按钮的位置从上至下慢慢展开。
▲ 元素出现的顺序取决于上下文。不一定所有的元素都要依次运动，尽可能少的移动量和时间会越好。例如在表格视图中，使用水平方向的动线让元素一个一个展示，会造成元素的加载时间过长，用户的浏览路线来回曲折，虽然这种展示方式可以用，但不是最优解。
最后
以上是关于动效必备的理论知识和设计优势，希望通过这些内容能帮助你对动效理论知识有更全面的认识。
慢慢来比较快，希望对你有帮助！
设计夹整理了80+图表类icon源文件，有svg和png两种格式。每个图表icon都是三色填充，可以导入到多款设计软件中更改颜色，用在icon或UI设计中。
领取方式：
添加微信, 邀你进设计成长群🌟
🔥文章合集