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

给设计师的网页动画设计基础指南 动画早就不是早期人们印象中的低龄向玩物了，从早年的卢卡斯影业到今天的工业光魔，动画技术 证明了它可以实现无限的可能性；从 70 年代的高达、 EVA 到之后的宫崎骏、皮克斯，动画的深度和 内涵也早已不弱于电影和文学作品。而随着技术的积累，网页中的动画也已经是遍地开花，它时尚 ，有趣，也人性 化。不断涌现的新技术和新工具令网页动画设计的门槛逐年降低，高速网络也使得 漂亮的动效和纯萌的 GIF 几乎是无缝地加载到网页中。今天，我们可以斩钉截铁 地说，动画已经是 最常见也是最实用的网页设计工具之一了。 基础知识 Watches PSD2HT ML Bubble-Jump 将静止或者二维平面上的物体赋予生机与活力，让它们以符合或者贴近物理定律的方式来运动，这 就是我们所熟知的动画。 Mac 桌面上那个著名的图标跳动动画就是最典型的例子之一，那种模拟皮 球在地上弹跳的效果显得真实而有质感，这种动画设计是遵循著名的动画设计 12原则的。 对动效或者说动画最熟悉的，无疑是迪士尼。 Frank T homas 的《生命的错觉：迪士尼动画》中， 就详细总结了创造今天动画的 12个原则： 挤压和拉伸 预期 登台 连续动作和姿态对应 缓进缓出 弧形运动 次要动作 时序 夸张 立体刻画 吸引力 文末相关链接中，会附上关于这 12 原则的相关文献。 网页动画的实现方式很多，最常见的是使用 Gif 图， CSS ，SVG ，WebGL 以及视频。但是和动漫 不同，网页中的动画可以是任何元素，小到下划线，大到背景和整个页面，它可以随着页面加载而 出现，也可能是鼠标移动到某个位置上之后 被触发。和其他的设计手法相似，动画可以是非常 微妙、触动人心的，也可以是开门见山、清晰直观的。所以，最重要的是看你怎么运用动效，是在 合适的时候给人 会心一击，还是摆在显眼的位置，令人不会错过。 新兴的趋势 Djeco Wonder Land I Ngen IO 当我们谈及网页动效的时候，它和动漫、 CG 、电影、游戏中的动画，是截然不同的。当我们在网页 的语境之下提及动画和动效的时候，它作为一个典型的设 计趋势和设计手法，节制是是最关键的 因素。小巧简单的动效在网页中会更具吸引力，也更加有趣，那些真正 “隐形 ”的动效会让用户难以 察觉，却更好地让他们有 更好的体验。但是显著而抓人眼球的复杂动效也很重要，它们会强化设 计感。不过在动画和动效的设计上，一致性很重要，过于复杂的规划可能会让整体效果混乱。 让动画成为设计趋势，其实是整个设计圈的走向造成的。扁平化和极简风的流行开来， 网页设计确 实简约了很多，但是用户需要更多的信息来告诉他们应该怎么做，而动画就是最好的方案 —— 无需 影响整体美感就可以给用户以足够的引导。即使是最简单的设计，动画的存在都能给予用户以说明 和指引，这样前提下诞生的动效，在简单和易用性之间达成了平衡。 动画其实在后端和用户端和有很多不错的影响。首先是大家再也不需要用 Flash 来事先复杂的动画了 ，它的实现方式也相当的自由和多样，今天的动画不会像曾经的 Flash 等技术那样拖慢网站的呈现速 度甚至影响服务器，加载速度飞快，体验优异。 大小动画的对抗 Rose Henry-Brown 大和小的竞争无处不在，即使是动画的领域也同样是如此。 规模较大的动画常常是以视频的形式存在的，它们通常会占满整屏或者一个比较关键的部位，循环 、简练是它们的特色。这些动画为整个设计创造了焦点，用户即使没有执行任何操作，也能看到 它们。以 Studio Meta 的网站为例，当你阅读文案的时候，没一张大图都会逐步缩放。 小动效会出现在网站的