服务热线:
18971120504
图文展示
衍果视觉设计培训学校

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

作者:Clippp

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

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

在之前的文章中,设计夹从动效的速度、缓动类型和动效编排三方面,分析了在设计UI动效的过程中需要考虑的因素。还没看的小伙伴可以快速回看UI动效设计指南!三个要素打造流畅的动效体验

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

一、动效的优势

1、保持专注


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

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

2、理解界面交互


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

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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


【零基础UI/UXD动效设计必备技巧】

http://www.yanguosheji.com/h-col-105.html

3、传递多种信息

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

4、快速获得反馈


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

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

二、动效设计必备要素

1、速度

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


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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

元素的大小越大,移动越快。因为越大的元素在同一面积内移动的距离越短。想了解更多UI动效设计指南,可以快速回看UI动效设计指南!三个要素打造流畅的动效体验

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

2、动线

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!

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

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

最后

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

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

【UI设计】动效设计必备的理论知识,改善你的UI/UX设计!


联系老师

联系老师

副标题

 
 
 
 
 工作时间
周一至周日 :8:30-21:00
 联系方式
客服热线:18971120504