动画是用户体验的重要组成部分。它可以是一个视觉提示,让用户知道正在发生的事情,它可以增加意想不到的乐趣。但这太容易因为过度使用动画并最终使用户感到困惑而不知所措。让我们看一下5个优秀的网络动画示例,以及我们可以从每个示例中学到的经验。
 
不要一次为多个元素设置动画
 
这是一个示例:您可能希望制作一个非常出色的优秀设计动画,其中包括文字,插图和号召性用语。最坏的事情就是通过为该设计中的太多元素设置动画来完全分散用户的注意力。动画进行得太多,人们将不知道下一步该怎么做。可以将每个动画视为一个故事,这样更易于理解,并引导用户使用您希望它们以特定顺序观看的元素。建议一次对一个元素进行动画处理,并在动画之间添加.5-1秒的间隔。
 
如何为多个元素设置动画,而又不过度:
 
优秀动画示例1

使其有意义
 
千万不要做没有目的的随机动画。请注意将要推广的产品或服务。然而,我们的设计师倾向于提供的完美插图实际上并不是客户想要推广的,它仅仅看起来很漂亮。
 
“对毫无意义的动画说不。”
 
因此,在制作动画时,请问自己是否牢记客户的目标。是否考虑到用户的最大利益也同样重要。

谢尔盖·瓦留赫(Sergey Valiukh)制作的有趣的动画既有目的,也有其目的-最著名的是从早到晚的过渡。静态图形将具有相同的效果,但不会具有动态效果。

优秀的动画案例2

注意时间
 
保持动画简短和有目的性。用户最不想做的事情是,在他们点击它之前,必须等待你喜欢的按钮动画。下面的示例演示了一个快速捕捉按钮转换,该转换也有其用途。
 
优秀的动画案例3

对无聊的线性动画说不

仅使用简单的A到B路径且没有缓动的运动感觉很机器人,因此请尝试添加其他缓动动画。运动还应遵循与现实世界类似的力,例如重力。Remix Jobs非常擅长使动画有趣而不过度。使用材料设计方法可以实现平滑流畅的过渡。

优秀的动画案例4

动画不应该是事后的想法
 
在创建草图或线框时,请考虑如何对元素进行动画处理。要制作有意义的动画,您需要在项目开始时花一些时间来真正考虑它们如何适合用户体验。Ramotion团队向我们展示了一个在线框制作阶段思考动画/过渡的好例子。

优秀动画案例5

像设计一样,动画可以是主观的和个人的。考虑将与您创建的动画进行交互的人员非常重要,应仔细考虑每个元素,以增加整体用户体验。