不要做令人愉快的网络动画

Image: Lisi Linhart

我们终于进入了一个品牌认识到网络动画力量的阶段。我们已经聚集在一起最佳CSS动画示例并向您展示了如何对它们进行编码,但在本文中,我们将分享一些在UI设计项目中从运动中获得更多信息的顶级技巧。

李希·林哈特是一个创造性的开发人员,他擅长于在网络上创建交互式的、移动的东西(请参阅变色鲸上述行动)。在…像素先锋她走上舞台,向观众解释如何在不同的浏览器上保持动画的表现力,并展示我们今天在网络上拥有的不同的动画选项。后来我们赶上了她,听了更多的建议。

一定要与设计系统保持一致。

Linhart已经注意到,设计系统的使用正在增加,以帮助控制整个项目中动画的使用。这些系统概述并定义了出现在站点内不同类型页面中的动画种类-例如,在产品页面上。

+$"Consistency is getting more important, and having an overall view of all your animations is also important," Linhart summarises.

不要为了它而包括动画

+$"A lot of people incorporate animations but they don't think about the usability of the animations," says Linhart. "Figuring out what goal an animation has and if it is actually useful is very important, instead of just building an animation to have an animation."

在这方面,设计系统也是有益的。当您决定不同类型的运动时,它们会链接到接口中的不同目的。

一定要考虑不同的设备

根据动画将在产品中扮演的角色,您可以根据所使用的设备介绍不同的方法。例如,对于桌面体验,您可以添加对鼠标事件作出反应的效果,而移动体验可能会因设备的移动而触发动画。

Linhart说,或者,您可能希望保持简单,并创建与工作流相关联的全局动画,并且不管所使用的设备是什么,都是合适的。

不要强迫用户使用动画

用户可能想要关闭运动的原因有很多-例如,视差滚动会引起晕车。不想要UI动画的用户可以在浏览器中选择减少的运动体验。由于Web动画API,现在很容易提供使用JavaScript的替代体验;您可以在设计中停止动画,或者跳过所有动画到它们的结束状态。动画是伟大的,但不要强迫他们的人不想要他们!

注意现有的心理模式

根据现实世界的物理学,有一些特定的心理模型,决定着我们期望物体的行为以及我们对某些运动的反应。例如,一个摇摇晃晃的动作会引起用户的注意,而缓慢的淡出往往会被忽略。

+$"Animation can be used in combination with mental models, and you can use them to make your animation look better or to explain something," says Linhart. A good place to start is with the classic12动画原理

别忘了你的观众

Linhart说,你在界面中包含的动画数量应该受到你瞄准的观众的强烈影响。虽然许多有弹性的动作可能有助于保持年轻观众对你的产品的关注和兴奋,但年长的观众可能会发现,当他们试图以自己的速度吸收内容时,它会令人分心和厌恶。

一定要坚持变形和不透明。

Linhart解释说,使用CSS可以廉价地处理四种动画类型:更改对象的位置、缩放对象的位置、旋转对象和改变其变化的不透明度(渐变)。其中,CSS变换和不透明度是最具表现力的。在设计你的UI动画时,要记住这些知识,这样才能让用户体验更流畅、更友好.

不要制作太长的动画

+$Getting the timing of your animations right is all-important. "You shouldn't time animations too long, because your user is trying to do something, and if you have really long animation timings, that will hinder them," points our Linhart. "So keeping the animations short in interfaces is important."

但是,有一个警告:如果你正在动画化一个过渡,你可能会选择一个较慢的动画,以避免吸引不必要的注意。

阅读更多:



翻译字数超限