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

首页 / 文章 / 用户体验 / 发布时间:2019-09-06 23:21:56

动效的持续时长和速度


△ 界面中动效持续时长

在手机这样的移动端设备上,按照 Material Design 的建议,动效时长应该控制在200~300毫秒之间,在平板电脑上,这个时长应该延长大概30%,也就是说,时长应该在400~450毫秒之间。原因很简单,屏幕尺寸越大,元素在发生位移的时候,跨越的距离越长,速度一定的情况下,时长自然越长。相应的,在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150~200毫秒之间。


不过,如果你的网页中所用的动效并非功能性的,而是装饰用的,或者用来吸引用户的注意力,那么请忘记这个规则,在这种情况下,动效可以更长。

更大的屏幕=更慢的动效?绝不是如此!

大小相同的元素,在移动的时候,移动距离最短的元素,是最先停止下来的。


△ 动效的持续时长还和元素大小、运动距离有关

动效的运动规律要符合物理规律,当元素运动到边界,发生碰撞的时候,碰撞的「能量」最终是要均匀分摊下来的,而弹跳的特效在多数情况下是不适合的,仅在特殊情况下适合使用。



△ 不要在动效中使用模糊效果

列表项(新闻列表、邮件列表等)所使用的动效,在实际运动的过程中,项和项之间应该有轻微的延迟,元素之间的延迟应该控制在20~25毫秒之间,如果持续时间再长,可能会给人一种迟滞的观感。



缓动

为了不让动效看起来机械或者人工痕迹太明显,元素的运动应该有渐进加速和渐进减速的特征,就像物理世界当中其他的物体这样。

匀速直线运动

不受任何物理力量的影响,匀速直线运动看起来是非常不自然的,尤其是对于人眼而言。


△ 匀速直线运动的座标图

均匀的变化通常只会用在色彩的改变或者透明的改变上,一般来说,我们也可以让背景元素均匀运动,而前景元素保持不变,来呈现它的状态,就像上图一样。

缓动加速曲线


△ 加速曲线

当物体加速飞出屏幕的时候,可以使用这种加速曲线,比如界面中被用户使用滑动手势甩出去的卡片。但是请记住,只有当运动对象需要完全离开界面的时候才会这么使用,如果它还需要再回来的话,则不行。



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



△ 减速曲线案例



△ 对称和非对称运动的差异

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



△ 抽屉式导航随着缓动曲线从屏幕上隐藏

从这些案例当中,可以看出许多动效的初学者对于运动规则的了解还不足。比如下面的这个动效,元素随着减速曲线出现,然后使用标准缓动曲线消失。根据 Material Design 的标准,新出现的元素持续的时间应该更长,因为需要吸引更多的注意力。


为了简化你对于贝赛尔曲线的理解,我们推荐两个网站,分别是 cubic-bezier.com ,前者包含了最常见的曲线的列表,你可以将他们复制到你的原型工具中,第二个网站为你提供了不同曲线的参数,你可以直接在其中查看各种对象的移动方式。


均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。


△ 用户的注意力应该沿着一个流向来引导

至于表格式的布局,它相对就复杂一点。在这里,用户的视线流向应该是清晰的对角线方向,因此,逐个区块次第出现是一个糟糕的设计。这样的逐个显示,一方面耗时太长,另一方面会让用户觉得元素的加载方式是锯齿状的,这种方式并不合理。


从属交互

在其他的设计当中,用户很难搞清楚哪个才是主要的,因为注意力被分散了。因此,如果要设置多个动画元素,应该定义清楚谁为主,谁是中心,并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象,那么其他的对象的运动方式都要受它制约,否则用户分不清楚主次。


△ 不成比例地改变对象外观的时候,运动轨迹应该是弧线的

相反,如果元素是按照比例改变大小的时候,应该沿着直线移动,这样不仅操作更加方便,而且更符合均匀变化的特征。看一下真实的案例,你会发现直线的运动轨迹会更加合理。


那么怎么选取这个方向呢?很简单,元素运动曲线的方向,应该是要向界面的主要运动方向的主轴靠拢重合。举个例子,在下面的动效当中,整个界面的滚动方向是上下滚动,主轴是纵向的,因此,当卡片点击之后被展开的时候,会先向右水平移动,并最终以垂直运动结束,运动的最终方向,切线是垂直的,也就和垂直方向的主轴重合了。




但是这一点也不是一成不变的。在比较拥挤的界面当中,某个元素可以「越过」其他的元素,它同样没有穿过其他的元素消失,而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律,只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。


结语

如果动效按照正确的方式来设计,它应该是不显著,且不会分散用户注意力的。如果不是这样,那么你需要让动效更微妙一点,实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍,或者转移注意力的存在。

当然,即使是遵循这么多规律,动效的设计依然是一门艺术,而非单纯的科学,多做测试多摸索总是有必要的。