最全最好用的动效落地方法,都帮你总结好了(上)

心理学哲学批判性思维 2018-04-04

用户体验设计的发展日趋完善,优秀的动效是完善用户体验中不可或缺的一环,优秀的界面动态设计可以让产品的用户体验锦上添花……

你会说,这些道理我都懂,但是动效做起来真的很麻烦啊。直接切入到大家常见的问题吧:

一般情况下,在沟通界面动效的过程中,工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是:接近代码。然而同样的一套动效,在设计工具上和 Web 端上实现逻辑可能完全不一样。

没有了精确的参数描述。设计师很难跟开发解释清楚要做一个什么样的动效。而只有简单的口头描述的话、开发做起来也很痛苦,导致最终开发效率低下。以至于知乎上出现了这样的问题:在APP的开发过程中,作为设计师,如何说服程序去实现动效?

看到这里也许你会很抓狂。好消息是随着却越来越多优秀开源库的诞生,动效的实现也变得越来越简单。甚至以后设计师都不用说服工程师了,自己可以直接上手在端上实现动画了。举个例子 San :https://baidu.github.io/san/

这个例子中卡片 Hover 动效的设计和开发都是我做的。

虽然只是一个很简单的细节,却给人以惊喜,一定程度提高了网站的品质感。

本篇教程会分为两个部分来详细阐述:

  • 上篇:在界面设计中,什么样的动效是好动效?

  • 下篇:从前端的角度来讲,有哪些便捷的方法实现这些动效?

一、什么样的动效是好动效

动效并不是设计师为了炫技设计出来的东西,它是有很多现实意义的。为了更加高效(心甘情愿)的去实现动效(做苦力)。我们首先需要知道什么动效是好动效。

简单来讲。动效有以下三个方面的价值。

1. 满足用户的心理预期

我们生活在一个物理世界,任何事物的运动都是符合物理世界的客观规律的。因此,人对于事物的观察和理解都是出于对物理规律的理解。而虚拟界面上的元素都是现实世界中并不存在的东西,会让用户有陌生感。

通过合理的动效,让虚拟界面模拟物理世界的规律,例如惯性、视差等等,可以让这个虚拟的世界与物理世界产生交集。用户会把自己对物理世界的认知映射到对产品的认知上。

下面举两个例子来说说具体是怎么映射的:

质量

物体都拥有质量,质量带来了我们最常见的物理现象:惯性。在这个例子中、方块在界面上通过加速、减速、反弹、过冲等等动态来模拟所谓的重量感,让这个简单的界面元素有了实在感。

空间

我们所处的世界是三维的,然而受显示设备的影响,目前大家接触的大部分人机界面还是二维的,如何通过一个二维平面来模拟三维的世界呢?

在这个例子中,近处的方块运动的快,远处的方块运动的远。通过这样的视差的效果,整个屏幕有纵深感,不再是一个简单的二维平面。我们很容易感受到,方块间的层叠顺序。同理,类似简单的动效,可以很轻易的表达元素的层级。

小结:合理的动效可以满足用户的心理预期,越是符合人对物理世界认知的设计,就越容易帮助用户去预判或者理解产品的交互逻辑。

相关推荐