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

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

发表于: 交互设计. 评论
Sponsor

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

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

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

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

动效的优势

1) 保持专注

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

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

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

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

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

2) 理解界面交互

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

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

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

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

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

3) 传递多种信息

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

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

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

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

4) 快速获得反馈

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

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

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

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

动效设计必备要素

1) 速度

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

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

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

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

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

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

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

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

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

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

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

2) 动线

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

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

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

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

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

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

最后

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

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }