bv1946伟德体育-体育betvictro伟德

bv1946伟德体育视点
bv1946伟德体育>bv1946伟德体育视点>要紧的动画 – 为您的界面增加价值
要紧的动画 – 为您的界面增加价值
发表时间:2019-08-30

吾们花了很大精力来提升数字产品的用户体味,而动效策划往往更匆子 侄帽缓雎浴T谑导蕎ork中,吾们在制作动画时大多依靠个人的感觉,但是感觉是否合适取决于它有没有很自然的模仿吾们与现实世界的日常互动。

其余吾们可能没有过多的思考就为数字产品添加动画,或许它看上去很酷炫,吾们也坚信他会为用户带来价值。产品效劳于用户的时候,是否有助于用户更好的体味产品功能,是否会增加用户操作经验值?

so吾们怎样才能策划出更有意义的动效效劳于吾们的产品?吾们如何确保吾们的动效能够增加产品的用户体味?

答案就是通过科学与原则

 

什么是动画?

动画是一种将单个图像组合在一起,使它们看起来像一个平滑的奇异运动的方法。您今天看到的每一个动画都是由多个图像(或者一个处于多个状态的图像)组成的。

一秒钟动画内的帧数称为帧速率或每秒帧数(FPS)。人眼需要至少24帧才能将动画视为流体运动。

在Web中CSS动画的帧速率很大程度上取决于浏览器和计算机的速度。如果您的计算机速度很慢,您可能会看到动画卡顿或滞下,这一贯表明帧速率已降至24 帧每秒以下。

游戏是另一个很好的例子;当您的电脑无法以24 帧每秒的速度运行游戏时,游戏显得比较迟钝 – 尽管大多数游戏玩家会坚持认为60帧每秒以下的尽数东西都是滞下的。

 

物理底子 

时间和节奏

时间是对象移动所需的时间或帧数。如果球需要5秒钟才能落到地上,其动画时间将为120帧(5 x 24 FPS)。

时间在动画策划制作中起着巨大的感化。

在产品中吾们不需要计算应用程序中设置按钮动画所需的帧数,但是吾们可以细目设置按钮的动画时间长短。

节奏感是运动发生的速度快慢。如果您的动画太慢,它可能会让用户厌烦沮丧。如果它们太快,您的用户可能会忘记他们所在的地位或他们正在做的事情。

吾们知道,现实世界中的大多数物体都有大小和重量。这些尺寸赋予了一个物体所谓的重心,这对它的运动和旋转方式有影响。

组件还具有大小和重量,而这反过来又用于细目层次结构。与现实世界相似,吾们的自然决定是使用组件的主题作为其重心。这既实用又现实。重心也可能随着其尺寸的改动而改动。


by Wouter Raateland

 

重力

重力是一种自然发生的力,它将吾们锚定在地球上,并对海洋的潮汐负责。它会对物体运动产生巨大影响。

在我看来,吾们的设备有两个重力感化它 – 起首在Y轴上从上到下,再者是在Z轴上的UI界面深度。Google很早就意识到吾们的设备具有Z轴上的深度,并且已经建立了大量的质料策划愿景。



以同样的方式,我想知道吾蒙涎策划圆素往下掉的趋势是否是吾们对y轴重力的解释的结果。下拉列表、决定框、手风琴等一切这些组件都会在应用程序的底部显示动画。


by Ildiko Ignacz

 

阻力

这是吾们每天都经历的事情(就像您不愿下床一样),是一种物体在容量和时间中移动时在自然世界 中所发现的一种力量的结果。

界面策划中经常使用阻力。apple的3dTouch(Rip)就是一个很好的例子,它的界面险些“抵制”了一个动作,直到您用力按下。然下通过动画演示此阻力,按照应用的压力,图标或多或少突出显示。



by benjamin berger

 

下拉刷新是另一个很好的例子,在这个例子中,用户必须下拉界面来显示最新的始末。使用者必须下拉产生一些阻力,达到页面重新加载出动画。


by James G

 

感化力和反感化力

每一个物体都保持静止或匀速直线运动,除非它被施加在物体上的力强迫改动这种状态。

牛顿定律与UX和动画有着惊人的关系。当您按下一个按钮,您会有反应。在某种程度上,重力迫使您移动鼠标,按钮会显示悬停成果,做出剧烈的反应。

这一切都很科学,不是吗?

对于每一个动作,竞相感化的两个物体之间的感化力和反感化力总是大小相等,方向相悖,感化在同一条直线上。

-艾萨克·牛顿爵士

牛顿第三定律与界面中的动画息息相关。当涉及到数据、大小、颜色、背下等关键的改动时。动画的感化是创建可视化的视觉提示,让用户知道他们在哪里,他们在做什么。当用户点击下载图像时,瞩望看到一些进展、失败或成功的迹象。





by chashi

 

动画的12个原则 

1981年,两位迪士尼动画师奥利约翰斯顿和弗兰克托马斯提出一切动画都包含 [十二个基本原则]。这些原则遵循上面提到的物理定律,并作为制造现实运动的指导。

这些原则可以应用在用户体味和策划时具有卓越的价值。

我已经列出了这些原则以及下面的Dribbble最好的例子。

 

1.挤压和拉伸

在自然界中,物体具有可塑性 – 它们的形状随着它们与世界的竞相感化而改动。它们能够按照自己的成分进行挤压和拉伸。同样,吾们的界面可以在与它们交互时挤压和拉伸。部件的重量和重心不会改动,而只是移位。



by Scott Brookshire

 

挤压和拉伸也是一种很有用的方法来进行缩放动画。



by Stan Yakusevich

 

2.预备动作

预期是导致更大行动的小行动。在野外,猫可能会降低它的背部,拉回它的耳朵,期待着突袭它的猎物。预期也可能是完全没有动作,譬喻猫突袭上的戏剧性停顿。这种期待可以作为警告,用来诱惑或制造兴奋。

以非常相似的方式,吾们可以使用小动画来为吾们的用户创建预期。悬停成果就是一个很好的例子,因为它向用户表明这个对象( 诸如按钮)可以执行更大的操作。



by  Yancy Min

 

3.演出计划

界面策划中的分段原则的典型示例是加载图标。这不单解决了 技术实现 小case,而且还让用户知道“阶段”正在被设置。易于 得出,装载机的实际策划也可用于升级;让用户可以一瞥他们可以期待的始末类型。

舞台布置包括设置一个场景,以强调人物、对象或事件。这可以通过几种方式实现,如照明、音乐或摄像机移动。分段也可以用来构建预期。

界面策划中分段原则的一个典型例子是加载图标。这不单解决了一个 技术实现 小case,而且还让用户知道“阶段”就现实来说正在被设置。易于 得出,加载程序的实际策划也可用于升级;让用户了解他们所期望的始末类型。



by Su

 

骨架加载是加载器图标的扩展,被认为是更好的加载体味。将向用户显示要加载的始末的“骨架”,然下在始末加载时进行填充。



by UI8

 

4.连续运动与姿态对应

这个原理指的是动画的绘制方式。从第1帧开始并绘制每个下续帧。这一贯会导致更好的真实性和平滑性,因为您可以把握每个下续动作。

使用姿势构图,您可以绘制第一帧,然下绘制结束帧,惟有这般才能填充中点的帧。

今天用户界面中的大多数动画都噬馅姿势。作为开发人员,吾们一贯使用CSS编写静态组件,然下为动画状态编写CSS,然下吾们使用类或关键帧切换此动画。

 

5.跟随与重叠动作

现实世界中的物体一贯由多个运动部件组成。汽车、人、动物、植物——都是很好的例子。由于它们的重量和大小,这些多个部分都受到重力等力的不同影响。易于 ,同样的物体可以具有以不同速度移动或以不同角度旋转的部件。由于它们的大小会影响加速或减速所需的时间,易于 它们也可能具有不同程度的阻力。

以类似的方式,UI组件由多个部分组成,不管是排版、颜色、形状灰子 羌渚唷H绻酝蛔榧亩喔霾糠稚柚枚虮匦氪γ扛鲎榧闹亓亢痛笮∫约八侵涞墓叵怠J粲谕蛔榈淖榧κ贾找黄鸲俣群图铀俣鹊南肝⒉畋鸹崾顾晌恢趾芎玫奶逦丁



by Anton Skvortsov  

 

也许最要紧的重叠动作例子是古老的视差动画。



by Anton Skvortsov

 

6.缓入缓出

“缓入缓出”就现实来说只是迪士尼的缓和期限。生活中的物体很少会瞬间停止——它们往往会逐渐失去动力并减速。

大多数策划师和开发人员已经在他们的动画中实现了缓和。但吾们有时会落水吗?很匆子 侄门铱硭汕撸饣崛糜没Ц械接械悴话病S泻芎


的资源来获取预先构建的缓和曲线 – 我最喜欢的是 Animista


by Anton Skvortsov

 

7.弧形运动

在自然界中,很少有东西是以直线运动的,仅仅是因为没有人能以精确的直线投掷一个球。自然界中的物体经常以弧形运动。弧线本质上是弯曲的地址,如果您扔球,球会在上面移动。

易于 可言,接口是与某种网格系统对齐的,以是吾们倾向于不为弧中的组件设置动画。在某种程度上,缓和是吾们使用的弧线,因为它使吾们的动画感觉好像是在弧线上动画。也就是说,在这些动画中实现某种弧形是有实际价值的,因为它们增加了自然流动感。这只是寻找合适机会的一个体育betvictro伟德。




by Divan Raj

 

8.次要动作

辅助操作是除主操作之外发生的尽数操作。这些操作一贯用于支持主要操作。一个真实世界的例子就是当自行车移动时转动车轮。

辅助操作非常适合向用户供给有关其操作的附加信息。按钮中的图标就是一个很常见的例子。



by Oleg Frolov

 

9.节奏

动作的节奏就是速度的快慢,过快或者过慢都会让该动作看起来不自然,而不同的角色也会有不用的节奏,因为动作的节奏会影响到角色的赋性,也会影响到动作自然与否。

过渡编排是一种协调的动作序列,可在界面适配时保持用户的 关注力。-谷歌质料策划

组件动画的顺序是引导用户完成旅程的一个很好的方法。即室子 窃谖⒐鄢叨壬衔崦堑难劬岫栽硕氖挛镒龀龇从Α



by Anton Tkachev

 

10.夸张

夸张(加上素描和care到力)是动画师变得更有制造力的区域。对象的大小、形状或移动被夸大,超出了真实性,以增加对对象的强调或兴趣。




11&12.素描和care到力

这两个要素都很easy,都是指您的组件或体味对您的用户有多大的care到力。这归结为良好的策划、良好的用户界面、良好的体味和精致的动画。




by Anton Skvortsov

 

总结

这些原则扶掖迪士尼制造了无数催人泪下的动画片,这些动画原则到了很大的感化。

吾们如何才能把迪斯尼如此成功的东西应用到吾们自己的porject中,吾们中的大多数人已经在这样做了,但这种演变实际又是什么样的呢?众家可以按照实际porject进行多思考。


——bv1946伟德体育分享,作者:Vernon Joyce



XML 地图 | Sitemap 地图