让动效设计提升UI/UX用户体验

Sponsor

今天为大家分享的是「动效设计」。和听觉语言、视觉语言一样，动作也是语言的一种，可以在有限的空间内传递更多信息，轻松传达静态元素难以传达的内容。

​现实生活中没有绝对的“静止”，通过模仿物体在现实世界中的运动状态，会让画面中的设计元素更真实、更容易被用户理解。

这次分享动效设计的作用和必备要素，希望大家对动效理论知识有更全面的认识！

动效的优势

1) 保持专注

动效能让用户集中注意力。比起字体、颜色等静态的视觉元素，运动的元素能首先引起用户的关注。

画面中的静态元素能够让我们的眼睛和大脑更快地处理信息，所以页面中最重要的文字信息都是排版整齐，静态展示。

而动态要素能让我们保持专注，缩短对时间的感知，例如常见的加载操作，趣味性的加载动效能很大程度减缓用户焦急的心理。

2) 理解界面交互

动效能够帮助用户更轻松地理解界面交互。利用动效，我们可以清楚地了解界面从哪里出现、如何消失，以及不同界面之间是怎么切换的。

例如通过动效展示浮层如何从界面底部弹出来，并在完成任务后消失的过程。

在有限的屏幕空间上看到更清晰的界面结构。在屏幕切换时，利用动效告诉用户信息怎么展示、展示在什么位置。

3) 传递多种信息

在移动产品中，利用动效可以在较小的空间内传递多种信息。如果是固定的，显示的信息会占用一定的空间。

在这种情况下，利用动效来替换可见的信息，可以在短时间内传递多种信息。这样用户在不需要触摸或滚动的情况下就能查看各种信息。

4) 快速获得反馈

动效还可以提供直观、可预测的反馈。当我们想删除某个元素时，通常是通过弹出文案或图标进行提示，例如操作“失败”或“成功”弹窗。

除了显示成功或失败的视觉提示，还可以在要删除的对象上添加动效，方便用户直观地获得反馈。例如失败时，展示摇头一样的左右移动动效，成功时展示上下跳跃的动效。

动效设计必备要素

1) 速度

动效的速度和持续时间是相对的。速度建议从0.2秒（200ms）到0.5秒（500ms）之间，时长以1秒（1000ms）为基准。

▲ 小于100毫秒的动画是瞬时的，不会被用户注意到；如果时长大于1000毫秒(1s)，会让用户感到动画很缓慢，带来一种拖沓的感觉。

元素的大小越大，移动越快。因为越大的元素在同一面积内移动的距离越短。

▲ 对重复的动效进行加/减速变化，会让动效看起来会更自然。一直以相同速度运动的物体看起来很机械化，不符合现实生活中物体的运动状态。

在设计时，我们可以在开始时给物体一个加速，快到达终点时减慢速度，让整套动作更自然。

▲ 进入和退出的动画效果因情况而异。当一个元素出现时，最好尽快显示，以免用户长时间的等待。退出时，最好用消失速度越来越快的加速度来表现，传达元素正在退出的动作，尽快消失。

2) 动线

在数字产品中，还要考虑元素出现的场景和流程。明确定义动效在用户体验阶段解决了哪些问题，找到可以帮助用户实现目标的流程，并合理应用动效。

▲ 从用户操作开始的位置开始运动。例如，当用户点击下拉按钮时，下拉窗口很自然的从按下按钮的位置从上至下慢慢展开。

▲ 元素出现的顺序取决于上下文。不一定所有的元素都要依次运动，尽可能少的移动量和时间会越好。例如在表格视图中，使用水平方向的动线让元素一个一个展示，会造成元素的加载时间过长，用户的浏览路线来回曲折，虽然这种展示方式可以用，但不是最优解。

我们还可以按照对角线的方式加载元素，缩短加载时间，尽可能快地引导用户的关注点，是相对更好的展示方式。

最后

以上是关于动效必备的理论知识和设计优势，希望通过这些内容能帮助你对动效理论知识有更全面的认识。

慢慢来比较快，希望对你有帮助！

作者 | Clip
来源公众号 | Clip设计夹

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。