做有活力的网站？超实用网页动画指南值得收藏 | 分享

时间：2023-10-05 09:48:01 | 来源：网站运营

时间：2023-10-05 09:48:01 来源：网站运营

做有活力的网站？超实用网页动画指南值得收藏 | 分享：现如今，动画对于网页设计师已经不再新奇，它正在成为最基础的交互设计效果。




动画就是变化，是一种运动。它是我们艺术创作中最接近真实反映生活的东西。这就是为什么人们总是说“动画使我们的网站鲜活起来。”这些你听起来可能是陈词滥调了，但这个它却很优美地呈现了动画在网页设计中的目的。




下面就来跟范儿姐一起来了解一下网页动画吧~

01 网页动画简史

正所谓，了解一件事物，就要了解它的历史。互联网上的动画是如何发展到今天这么酷的呢？其实最初一切都诞生于GIF图。




GIF图的流行使得人们想要将动画引入网页中。（其实一开始大多数人并没有从改善可用性的方式考虑动画。一切都只是为了产生一点个性，表现一点生机，与其他静止的网页区分开。）当.gif文件的能力耗尽后，人们想要一种更好的方式，来向网站中添加动画，这个过程中，人们尝试过添加音乐、运用Flash等等。

随后，大多设计师转移到基于Javascript的动画上，用于创造一些小东西，比如下拉菜单和其他导航元素。到了00年代中旬，W3C已经在努力将动画加入到CSS规范中。2009年，首份公开的CSS动画规范初稿就发布了。




现如今的网页设计探索出了强制硬件渲染、CSS动画结合SVG文件、延伸基本动画功能的JavaScript库，等等方式。这不仅仅是为网站增添风格，也是在试图改善可用性，告知并教育用户，让用户更容易了解他们在做什么。




所以对于网页设计师，动画不再是新奇事物。

02 网页动画的种类

回到正题，我们不能将动画效果随手加于网页元素之上，然后期盼它能提升转化率。那太傻了，就像设计的所有其他方面，使用哪种动画，何时使用，这都需要仔细考虑。




实际细节与实现也是必须考虑的。如果你的动画过于耗费资源，拖慢用户的移动设备，或者更糟的是拖慢他们的桌面设备，这就有问题了。我们由此入手，看看网页上几种典型的动画：

1.界面元素动画

这可能是最普通一种动画，而且也是最有用的动画类型：这是一种让用户了解他们的操作（比如点击）被记录的动画。变化的发生需要他们的点击来催化，无论是转向另一个页面，打开侧边栏或模态窗口，还是在客服窗口中发送电子邮件。




在这个扁平化设计的世界，反馈信息是十分重要的。人们需要了解界面与装饰物之间的区别。让元素运动起来，简单微妙的交互方式，给予用户他们所需的反馈。

2.等待动画

这个也同样是为了给用户提供反馈。你可以在某些操作正在后台进行时呈现给用户。

其实这类动画的作用在图形化用户界面首次发明的时候就得到了印证。最早的方式是鼠标指针变成沙漏以及进度条：Apple在采用了“旋转的沙滩排球”，而windows则呈现了文件优雅地从一个文件夹飞向另一个。

3.讲故事的动画

如今，用动画来讲故事的这种形式已经超越了卡通，当然啦，这里提及到的动画是那些被设计出来与用户互动（比如向下滚动）的网站，操作引发了动画并讲述了故事。




有些普遍例子，那些页面会在你眼前将产品“装配”起来，以此展现新产品。其他则更像卡通片，或者有个小卡通形象跟随你到页面的每个地方。这些动画的作用存在争议；通常它们并没有提升可用性的意图，只是为了让用户印象深刻，为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺，或是分享打造这件创造物的经历。




动画能否做到这点，取决于它们本身的质量。你要考虑的是其是否过度影响了网站的性能，或是影响了页面内容本身。如果用户在网站上找不到自己要的东西，世上所有的动画效果都救不了它。

4.纯装饰动画

对于这种没有目的的动画你要学会尽量避免，因为它可能会使人分心。你应该想办法让人们的视线集中在商品信息和购买按钮上让他们来此达成目的。如果网站没有提供特定的目标，或者确定目标时过于使人分心，他们就不会再回来了。





装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画，只在用户触发某个特殊操作时才展现，比如鼠标悬停在页头和页尾的某个小物件上面。例如http://photojojo.com：

在任何页面一路滚动到最底部，会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上，画面中的气球会微妙地来回飘浮。

5.广告中的动画

广告对于某些网站来说就是他们收入来源（咳咳），但是对于另一些网站则如同瘟神，所以广告成为了很多网页设计安排中令人头疼的一件事。如果想让人看广告，让它动起来就是个好方法。这可能在某些自我标榜“不喧宾夺主”的广告平台那里不受欢迎，但如果动画广告不起作用，我们就不需要它们了。




不过这种动画也有着与装饰性动画相同的问题：将用户的注意力从主要任务上分散开。这个在线销售的世界，分心就意味着死亡。最终，衡量利弊还取决于你。没有广告、低调的广告、或是动画广告，都需要权衡。

03 动画的实现

技术实现方面也很重要，但无论你用.gif图、视频、CSS、SVG、甚至Flash，都有一些更重要的原则。暂时忘掉你打算使用的技术与技巧，再多做一些理论储备，用户会感谢你的。

1.性能，性能，还是性能

提到性能，你会想：“当然，这很明显。动画应当运行流畅，不能卡顿。”正确，这在理论上确实显而易见。但问题是我仍然能看到一些网站，虽然用最新技术构建，动画却很卡。




现在，想象一下在低分辨率的平板或手机上，浏览那些网站是什么样子。一方面，这是个检验个性的方法，但另一方面，它无法给这些龟速网站带来任何业务。如果你的印象中只有卡顿的动画，或者压根没有动画，那还不如让界面元素直接各就各位。




这就是证明了，那些加入了诸多动画和特效的网站也不怎么样，它们需要加载界面和进度条。没有人在看到想要的信息前，有义务等待动画加载。




EZEQUIEL BRUNI 在这里给出一点技术层面的建议：考虑了硬件加速和性能之后，CSS几乎总是优于JavaScript。有选择时，使用基于CSS的动画，将JS作为备选。

2.从细微处开始

将动画当作设计工具而非样式表现时，最好从细微处着手。比如，微小低调的动画表现更好。第二，巨大炫目的动画必须带有实用的目的，不能只为了“好看”。




除了那些让UI元素感觉“真实”和接近自然的动画，多数网站都不需要任何动画。问问自己：巨大炫目的东西在屏幕上四处移动，比常规文字和美丽的图片更能告知和引导用户吗？




多数情况下，答案很可能都是“不”。当然也会有例外，例外总是会有。但多数时候，让按钮动起来，让隐藏的导航条滑入，用动画移除发送客服邮件后的成功提示，这就足够了。




微妙是好设计的关键，这点往往被低估。以此为起点，然后如果你能确信，更大更闪耀的东西在用户体验方面更符合你的目标，那么再全力以赴！

3.持续时间要短

动画要快，准确的说，应该发生得快。这里我不是在说性能，而是一个物体在运动过程中实际耗费的时间。




在我们度量界面动画时，“毫秒”是最通常的度量单位。再长的话，人们就会开始对机器或产品、或是两者失去耐心。得确保它够短，不然让人感觉迟钝。




对于人们反复使用的产品，即使相当有趣好玩，第10次看到时也会失去吸引力。你要明白的事，它只是个跳动的按钮或是滑动菜单，而不是你最爱的电视节目的片头，没有人会为此随声附和。

4.有时要让物体具有弹性

虽然有些并不明显，但基本上所有的物体都有一点弹性。如果将它从足够高的地方扔向坚硬的表面，而且如果没有太大的空气阻力的话……总之你懂我意思。




与UI元素交互就像在操作硬质的小物体。将它们抛到一边，它们回弹一点。扔下去，也会回弹一点。因此这很有帮助，适当时候让你的动画“回弹”，尤其是当它们垂直移动的时候，这都是在维持运动感。

5.物体不会突然停止

移动中的物体需要一些时间才能静止。静止物体需要一定时间加速。ok，物理现象！所以，当你使物体移动或停止时，记得给他们一些时间（以毫秒计）来减速或加速。这个叫做“缓动”，这个功能被置入了CSS中。

---

以上相关内容来自：https://www.webdesignerdepot.com

相关历史推送：







好啦~今日分享就到这里啦，想要了解更多内容可以留言或者私信给我哈~

更多艺术留学/作品集相关干货请关注个人公众号：artfans_study