详细解析UI动效的基本规则全面总结(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:摄影社区   作者:Taras Skytskyi

关键词


缓动减速曲线
当元素从屏幕外运动到屏幕内的时候,动效应该遵循这类曲线的运动特征。从全速进入屏幕开始,速度降低,直到完全停止。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


减速曲线可以适用于多种不同的 UI控件和元素,包括从屏幕外进入屏幕内的的卡片、条目等。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


缓动标准曲线
在这种曲线之下,物体从静止开始加速,到达速度最高点之后开始减速直到静止。这种类型的元素在 UI界面中最为常见,每当你不知道要在动效中使用哪种运动方式的时候,可以试试标准曲线。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


根据 Material Design 的规范,最好使用不那么对称的增速和减速的过程,让动效看起来更加真实。同时大家会更加在意运动的结果,曲线的末端,也就是运动结束的过程最好进行适当的强调。
换句话说就是减速过程持续的时长最好超过开始加速的时长,用户将会更加清楚地观察到运动的最终结果,从而更好地明白运动的终止状态。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


当元素从屏幕的一个位置移动到另外一个位置的时候,最好使用这种标准的缓动曲线,这个过程中,尽量不要让动画效果引人注意,不要使用戏剧化的效果。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


当元素从屏幕上消失的时候,采用了相同的不对称缓动曲线,用户同样可以通过滑动回到之前的位置。这个环节使用了抽屉式导航控件。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


从这些案例当中,可以看出许多动效的初学者对于运动规则的了解还不足。比如:下面的这个动效,元素随着减速曲线出现,然后使用标准缓动曲线消失。根据 Material Design 的标准,新出现的元素持续的时间应该更长,因为需要吸引更多的注意力。
贝赛尔曲线函数 cubic-bezier()是用来描述曲线的,它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点(0,0)和终点(1,1)在坐标轴上的位置是已经事先确定的。
为了简化你对于贝赛尔曲线的理解,我们推荐两个网站,分别是 easings.net 和 cubic-bezier.com ,前者包含了最常见的曲线的列表,你可以将他们复制到你的原型工具中,第二个网站为你提供了不同曲线的参数,你可以直接在其中查看各种对象的移动方式。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


界面动效的编排
就像芭蕾舞的舞蹈编排一样,动画效果也是需要编排的,它的主要目的是让元素从一个状态切换到下一个状态,自然过渡,让用户的注意力自然地被引导过去。
编排有两种不同的方式:一种是均等交互,另一种是从属交互。

 收藏