浅谈如何设计漂亮有趣的转场动效

这篇文章由江南大学设计学院研究生孙启玉翻译,主要谈手机App中的转场动效,强烈推荐原型设计师阅读学习,体验下动效的神奇妙用。他们把大量时间花在了像素级按钮,表单样式,设置类型以及如何让那些图标变得漂亮和精致。

原作者: Pasquale D’Silva

…但是关于如何设计衔接却很少有人考虑。你点下按钮表单就…出现了?你滑动删除一个项目它就那么消失了?那也忒怪异忒不自然了。在真实世界里几乎没有效果,这好像是一个bug。

翻译:Joyce Cheng

哦,好吧宝贝。你必须记住——它需要滑入。

译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者、文章来源、翻译作者及简书链接,版权归原文作者所有。

怎样?多快?反弹?渐入?静态设计图体现不出切换过程。

图片 1题图

当提到动画和可爱的交互的时候,人们总是滥用趣味性这个词。对这些人来说很炫酷,但是你猜怎么着?动效也可以有功能性作用,而不仅仅是个装饰性的细节。

设计师热爱累死累活地抠细节。大部分时间都用来纠结按钮、表单样式、设置类型的像素了,以及把那些图标弄得跟图钉一样锋利。A+,干得好,千万别停啊伙计们。

动效有一个被忽视了的维度——时间!一个看不见的组织将空间合在一起,要明白这点你不必精通数学。

……但是关于它们如何在静态组合之外整合在一起,需要一些小小的思考。你轻触一个按钮然后表格就….出现了?你滑动删除一个项目然后它就消失了?这样会超级诡异而且不自然。真实世界中几乎没有东西做事情的方式像是仅仅切换状态这么令人不爽。这感觉像是个故障。

让我们看一些简单的想法:缓冲

噢,好吧亲爱的。你做了一些笔记——它会“滑进”

在传统动效里,分解一个物体是如何从A点移动到B点的。它增加了运动的偏向并决定了其余帧如何排列。以这些25帧差值(中间点13帧在不同的位置)举例:

怎么滑?很快吗?它会反弹吗?缓冲吗?静态设计无法提供状态之间的上下文。

图片 2

当人们谈到动画和有意思的交互的时候,他们不停地用到“愉快”这个词。这些家伙真酷真棒啊。但是猜猜还有什么?动画也可以有功能性的用途诶。它可不仅仅是一个装饰性的细节。

图片 3

动画利用的是一个被忽视的维度——时间!一种将空间缝合在一起的隐形织物。你不必非得成为一个数学呆子才能理解这一点。

图片 4

让我们来看一些简单的想法:

看!你刚刚了解了缓冲。电脑很蠢并且只会线性的填补空白,但一位优秀的动效设计师要花费大量的工作来让它们更加完美。

在传统的动画中,一个分解breakdown)用于确定某物如何从A点移动到B点。它为移动增加偏差,以及确定余下的帧如何就位。以下面这个25帧的动画为例,其中第13帧位置不同:

动效都是关于时间。你可以设置不同的间距来获得不同的结果。但这已足够,这不是一个动效教程,重要的是让你思考时间和空间的语言。

图片 5线性图片 6移入图片 7移出

一些关于界面场景中动效的想法

看看!你刚刚学到了缓冲/移入。计算机挺混账的,很喜欢线性地填空,因为它们就是一袋袋懒惰的电线啊。伟大的动画师/运动设计师把大多数的时间花在跟计算机对抗上以确保它们不把事情搞砸。

正如我之前所说,动效有场景,它有助于用户理解信息如何流动。

动画全在于时机。你可以利用各种不同的间距得到不同的结果。但是关于这一点到此为止。这不是一个动画教程,主要是让你思考一些时机和间距的运用。

在列表中插入一个条目

就像我前面说的,动画可以帮助提供上下文。它帮助大脑理解信息是如何流动的。

比如说你正在盯着一张活动的列表并且你想让它实现数据填充。如果你把它放在电脑上,它会看起来像这样:

比方说,你有一个关于事情的实时列表,你希望它根据实时数据进行填充。如果你把它留给计算机的话,它看起来会是这个样子:

图片 8

图片 9

是不是有点太粗糙了…

哎呀,这太粗糙了….

图片 10

修改它只需要几帧动画。关于列表究竟发生了什么,给你的大脑一个线索如何?

图片 11

图片 12图片 13

让它变得平滑只需要几帧动效就好了。以上关于列表的动效是否给了你一些启发?

要添加新的条目,列表需要为新增项腾出空间,然后新增项(来自某处)把空白填满。没那么不爽了。状态的移入&移出软化了变化。感觉更自然了,因为我们有空间的上下文连接——镜像般地反映了我们在真实生活中往一堆东西里添加物品的情况。

要是添加一个新选项,列表首先要为选项腾出空间然后再由来自某个地方的新选项填进去。要是想少点冲突,可通过渐进和渐出状态来缓和改变。它感觉更加自然,因为我们有空间的常识——模拟真实生活中物理运动规律。

还有更多:

再多一些:

下面是典型的滑入一个条目的默认模式。该模式经常被使用,但是在空间上意义不大: