首页 » 电商运营 » 用户体验做得好,动画效果应该这样用

用户体验做得好,动画效果应该这样用

host 电商运营 38 次浏览 没有评论

在设计中动效所传达的不仅仅是物体间的空间关系和功能,同时也传达着一种有意识的流动之美。这听上去可能会让你觉得动效是一个非常高深的概念,但是当你接触并能熟练运用之后你会发现一切都变的顺其自然。相比传统的设计元素,经过考量的动效能够提升用户的操作体验。

下面我们就来说说关于动效设计的一些基础知识,为何以及何时将动效应用在UI中,以及如何提升产品的用户体验。

基于动效的设计

动效传达着故事,展示了一个APP中的每个元素是如何关联起来并发挥作用。动效驱动着UI,它重新定义了导航,把交互设计提升到一个新的高度,创造了一个更加自然的体验。在每一个按钮的点击和画面的过渡中都传递着你想让用户感受到的情愫。

动效让你的设计不再是冰冷的

动效为什么那么重要?

用户在使用产品的过程中可能会有下面这些问题:

“当前这个页面的信息哪些是最重要的?”

“下一步我要怎么做?”

“如何才能知道我完成了我的任务?”

动效作为对用户体验的优化对上述问题进行了解答:

动效吸引用户注意并暗示用户在完成一个点击或手势之后会发生什么。

引导用户熟悉并适应界面,在视图之间引导焦点。

提供用户一种视觉反馈。

除了这些之外,基于动效的设计能够将一种愉悦的感觉带给用户的体验中。我们都希望自己的产品不是冰冷死板的而是富有人性令人喜爱的,所以设计师们应该多尝试一些方法让产品和用户之间建立起情感上的关联。

动效的语言

动效让我们和产品之间的交流更加顺畅,让用户更容易理解交互。基于动效的设计元素有着不同的类型,包括过渡、动画甚至是纹理的3D阴影。

但动效最主要的难点是在用户进行操作的时候不会产生打断。

吸引用户的注意

动效能够将用户的注意力吸引到特定的区域或是离开当前的区域。好的动效设计能够让UI不会很突兀,也更加易于导航。它能够将用户的视线注意到新的物体从哪里出现、从哪里消失,让用户对所发生的事情有一个直观的理解。

让按钮和唱片对用户的操作做出优雅并能够引起注意的回应

让UI的认知空间更加合理

在初始状态下UI中的元素变化总是非常生硬,这往往让用户摸不着头脑。在认知学中这被称为变化盲视—突然的变化所产生的视觉刺激的表征被破坏使得用户没有注意到变化的发生。用户需要知道事物从哪里出现、在哪里能够再次找到,这样就不会感觉很生硬了。

动效设计能够通过定义画面和元素的空间关系填补认知的空白,让用户在界面中指引自己并建立视觉关系。比如下面这个例子,在画面过渡的过程中用户被指引到下一个视觉层级。

设计有意义的空间过渡的连贯的UI图层可以让用户更容易理解

确认操作

动效能够增强用户正在进行的动作。在每一个按钮的点击和画面的转换中都可以加入一个动效。视觉反馈能够提高用户的参与感和愉悦感。比如在iOS中如果输错了密码会是这样的:

在密码错误的时候苹果iOS运用了水平震动的动画。用户注意到这个动画的时候能立刻明白这个动作的意义。

第一样看上去,密码错误时的震动效果似乎比直接显示一个小的错误标志要花更多时间,但现实中用户要花上双倍的时间去弄明白是哪儿出错了。

带来愉快的感受

动效能够让用户真正感受到难忘的愉悦的感受。将微妙的动效置入设计中,用户会感觉像是在和属于自己的事物互动一样。

甚至是小的UI元素,比如动态图标也能让人心花怒放

结语

动效是科技的下一个层级。它是与事物互动的自然方式,也绝对是未来设计的关键。是时候和静止不动的用户界面说再见,创造更加生动的界面了。

以上文章转载改编自“优秀网页设计”

Vultr 中文网,转载链接。

本文永久链接: http://vultr.ywbb.com/4476.html

发表评论

Go