网页设计动效导论

动画效果不仅仅只是为了漫画。从全屏可移动的图像到小悬停效果，动画的使用几乎随处可见。动画是时尚的，有趣的以及能够从很大程度上提升用户操作的友好体验。

随着科技的发展以及Html的日渐完善，使用动动画的障碍和成本开始下降。大多数用户可以通过高速连接，轻松创建简单的动作或通过简单的gif实现可持续几分钟的动作效果，动效已成为实用和必不可少的网页设计工具。

1.动画基础

当以静止或二维的形式被创造的东西以遵循物理学规律的方式移动时，就好像“被带到生命中”一样，动效就在那个时刻发生了。和漫画人物可以在屏幕中随意走动一样，或者当你在Mac桌面上载入应用程式图示时，应用程式图示会如同一个小球一样反弹。

与动画几乎同义的词之一就是迪斯尼。

· 挤压与拉伸

· 预备动作；

· 表演及呈像方式

· 连贯动作法与关键动作法；

· 跟随动作与重迭动作；

· 渐快与渐慢；

· 弧形运动轨迹；

· 附属动作；

· 时间控制；

· 夸张；

· 纯熟的手绘技巧；

· 吸引力；

· 深度；

· 平衡及重量感。

Web格式的动画效果通常保存为GIF，CSS，SVG，WebGL或视频格式。当你将鼠标悬停在全屏视频或背景图像上时，它们的出现可以仅仅只是一个简单的下划线或上浮动作，与任何其他设计技术一样，动画可能是微妙的，或者它们可能是你必须要面对的，很难避免。

2.2015年新兴趋势

网页设计中的动画可能是我们每天看到的最多的东西。动画作为设计趋势的关键是温和以及舒适。小而简单的动画是有趣的，用户甚至可能不会想到它们是一个动画。大型动画当然也可以作为一种强调或者吸引人的视觉效果，它可以容易让你和客户进入到设计中。但如果你一开始就混合太多不同的移动效果，可能会导致整体设计处于一种完全混乱的状态。

现实注意是使动画成为时尚的一个最重要的主导因素。在今天的任何设计风格中，比如，扁平和极简风格的设计，用户需要更多的线索来告诉他们该怎么做。而简单的动画可以引导用户，而不必通过改变美学。 添加简单的指令和命令，动画在网页设计中的展示设计可以在视觉上为用户提供足够的方向。在这种情况下，动画实际在简化和易用性之间充当了一种快乐介质的角色。

这一趋势成为流行元素的另一个因素是，这一设计需要更多的用户端支持。你不再需要Flash来做更复杂的动画了（如果你仍然在使用Flash创建动画，那么现在是时候停止了），可以通过其他一些方式来实现。 如今的动画不会使网站或网络服务器出现“饱和”或卡顿的情况了，通过物理技术为用户快速加载效果，并且通过高速互联网访问动画不会错过任何一个细节。

3.大格局和小格局动画

当涉及到动画在网站设计中的网格排版或者说框架时，它可以分为两个同样容易理解的类别：大格局和小格局（你可以先想象一下这些看起来会如何）。

大格局动画相较于其他类型的动画属于那种比较有规模的动态效果。它通常以视频的形式得以应用，大型动画可以用来填充屏幕的重要部分，在这一方面，短视频好像更常见和流行。这些动画作为整体设计的焦点，用户通常不必执行任何动作来观看动画。如果你在Studio Meta的网站设计中仔细观察的话，你会发现每个大图像会在你阅读文本内容时随时缩放。

小格局动画是你开始与网站进行互动时发现的那些较小的部分。这些位置可能是悬停状态，微小的装饰或可用性指南或工具的形式。小格局动画是一种有助于整体美学的必要元素，但不太可能成为设计的重点。

4.何时是使用动画的好时机

几乎每种流行趋势都有一个共同的问题，那就是我们究竟在什么时候使用它们才是最适当的呢？动画可以是你设计工具包中一个很好的小技巧，但并不是所有项目都适用的。动画应该顺畅无缝，不要跳跃或机械。它需要为用户服务，同时不妨碍内容的表现和执行。

使用动画有一部分主要的原因是增加可用性。简单的动画可以是很好的指导工具，帮助人们了解在网站设计中点击什么按钮或下一步去哪里。许多设计师使用复杂的滚动效果将一个简单的动画与用户工具进行滚动或点击（这包括从一个简单的弹跳图标或弹出一个“向下滚动”的指引性标题）。

可用性有以下几种形式：

· 沟通功能或如何使用网站；

· 显示变化，例如正确填写表单或突出显示元素是可点击的；

· 创建流程或指引用户到一个号召性按钮。

使用动画的第二个原因是视觉审美要求。动画可以是一个高回报率的“装饰”。有时，动画元素的目标是纯粹的视觉效果，这是可以接受的用途。这个装饰动画可以帮助讲述一个故事，或者在界面和用户之间建立情感联系。动画的目的可能是引发视觉兴趣，并让用户与你的网站有更长时间的互动。

当创建纯粹的视觉动画时，应该考虑目的性。想想你想要用户看到它以后做什么，它应该是有趣的还是令人惊讶的？它是网页设计中的独特内容吗？即使一个纯粹的视觉都应该有一个目标。

总结

当涉及动画时，以往的经验告诉我们：好的动画将使用户的体验更好。这可以表现为一种情感联系的形式，例如一个有趣的积极的体验，或者使一个网站更容易使用。

动画是一种有趣的技术，随着应用程序以及网站建设工作变得更加标准化。