超全面的UI动效基本规则总结(2)

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

根据谷歌规范,当运动物体的大小不成比例地改变时,它们应该沿着弧线而不是直线运动。这有助于使动画更自然。所谓“不成比例”,是指物体的高度和宽度的增加/减少是不对称地进行的,即以不同的速度变化(例如,一个正方形变成一个矩形)。

超全面的UI动效基本规则总结

物体的运动如果不成比例,那应该按弧线变化。

当对象按比例改变其大小时,则此时直线运动的形式会更好。由于这种运动形式做起来容易得多,弧线轨迹运动的规律就往往被忽视。在现在很多应用中,我们都能找到这种例子。

超全面的UI动效基本规则总结

等比的物体运动轨迹应该使用直线

曲线轨迹运动也会有两种实现方式:第一种是开始水平移动,然后以垂直运动结束;第二种是开始垂直移动,然后以水平运动结束。

物体沿曲线移动的路径必须与滚动界面的方向重合。例如,在下面的例子中,我们可以上下滚动界面,相应地,卡片以垂直的方式展开更合适——先向右,然后向下。

超全面的UI动效基本规则总结

展开/折叠卡片的方向应与界面的轴线重合

如果物体的运动路径彼此相交,它们就应该不能穿过对方。物体应该通过减慢或加速自身的速度为另一个物体的运动留下足够的空间。另一种方式——只是推开其他物体。为什么要这么做?因为我们假设界面中的所有对象都位于一个平面上。(译者注:对于这一点我不是很认同,为了更加真实么?)

超全面的UI动效基本规则总结

在运动过程中,物体不应该互相穿透,而是为另一个物体的运动留下空间。

在另一种情况下,移动的物体可以通过抬高于其他物体,而不会以溶解或通过其他物体的形式来移动。为什么?因为我们相信界面上元素的行为应该要符合物理定律,在现实世界中没有任何实体能够做到直接穿透对方。

超全面的UI动效基本规则总结

物体可以被抬高于其他元素之上来移动

总结

如果我们总结上述所有的规律和原则,可以得出界面动画应该要反映物质世界的运动,例如我们都知道的,摩擦,加速等等。模仿现实世界的行为我们可以创建一个优秀的动画,满足用户的心理预期。

一个优秀的动画,应该是不会那么刻意,也不会分散用户对目标的注意力。如果是的话,就需要优化它,或者干脆把动画去掉。核心标准是动画不应该降低用户执行任务的效率。

但是不要忘记,用户对动画的好坏感受,是感性大于理性的。所以,最好是把做出来的动画给用户进行评鉴,然后再不断优化它。

原文地址::uxdesign

译文地址:彩云译设计(公众号)

 收藏