给设计师的网页动画设计基础指南

2016-04-10 12:10:00

文末相关链接中，会附上关于这12原则的相关文献。

网页动画的实现方式很多，最常见的是使用Gif图，CSS，SVG，WebGL 以及视频。但是和动漫不同，网页中的动画可以是任何元素，小到下划线，大到背景和整个页面，它可以随着页面加载而出现，也可能是鼠标移动到某个位置上之后被触发。和其他的设计手法相似，动画可以是非常微妙、触动人心的，也可以是开门见山、清晰直观的。所以，最重要的是看你怎么运用动效，是在合适的时候给人会心一击，还是摆在显眼的位置，令人不会错过。

新兴的趋势

Djeco

Wonder Land

I Ngen IO

当我们谈及网页动效的时候，它和动漫、CG、电影、游戏中的动画，是截然不同的。当我们在网页的语境之下提及动画和动效的时候，它作为一个典型的设计趋势和设计手法，节制是是最关键的因素。小巧简单的动效在网页中会更具吸引力，也更加有趣，那些真正“隐形”的动效会让用户难以察觉，却更好地让他们有更好的体验。但是显著而抓人眼球的复杂动效也很重要，它们会强化设计感。不过在动画和动效的设计上，一致性很重要，过于复杂的规划可能会让整体效果混乱。

让动画成为设计趋势，其实是整个设计圈的走向造成的。扁平化和极简风的流行开来，网页设计确实简约了很多，但是用户需要更多的信息来告诉他们应该怎么做，而动画就是最好的方案——无需影响整体美感就可以给用户以足够的引导。即使是最简单的设计，动画的存在都能给予用户以说明和指引，这样前提下诞生的动效，在简单和易用性之间达成了平衡。

动画其实在后端和用户端和有很多不错的影响。首先是大家再也不需要用Flash来事先复杂的动画了，它的实现方式也相当的自由和多样，今天的动画不会像曾经的Flash等技术那样拖慢网站的呈现速度甚至影响服务器，加载速度飞快，体验优异。

大小动画的对抗

Rose

Henry-Brown

大和小的竞争无处不在，即使是动画的领域也同样是如此。

规模较大的动画常常是以视频的形式存在的，它们通常会占满整屏或者一个比较关键的部位，循环、简练是它们的特色。这些动画为整个设计创造了焦点，用户即使没有执行任何操作，也能看到它们。以Studio Meta的网站为例，当你阅读文案的时候，没一张大图都会逐步缩放。

小动效会出现在网站的各个角落，当你同网站进行交互的时候，会发现它们的存在。这些动效可能会在光标悬停的时候触发，可能是一个指引性的标识，也可能以更加微妙的方式呈现。这些微小的动效会对整体的美感产生影响，在 Henry Brown 的这个案例中，动画就非常的小而微妙，仔细观察，你会发现人物的眼睛在闪烁。