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