9 个动画网站激励我们成为网络创作者

网络创建者永无止境地寻求用最前沿、最时尚的设计效果来更新他们的网站，以代表他们的产品或服务的真正价值。 但是在调色板、排版、响应能力、内容策略等等之间，高级设计技术的想法可能有点令人生畏。 实现其设计值得他们盐分的网站的最佳方法之一是向您的同行寻求灵感。 问问自己你喜欢他们的设计什么，它如何与你的设计相关，以及你想如何根据你的需要修改它实际上非常简单。

让我们看看这九个创意网站动画示例，并开始向专业人士学习。

Handwrytten 在主页的英雄部分使用的动画技术是他们产品本身的一种尖锐表现：结合钢笔和墨水。 这种设计（其中之一）的一个关键价值是网站访问者立即了解该产品提供的好处，以及他将通过使用该产品获得什么。

一张手写卡片与卡通插图并列的照片真的说明了一切。 至于页面上的其他设计元素，干净的白色和黑色配色方案带有一丝日落橙色，在精致和艺术气息之间取得了平衡。 浏览本网站后，我们当然有动力进一步环顾四周并了解有关 Handwrytten 产品的更多信息。

Crisp 为他们的矢量插图添加了轻微的动画效果，尽管插图尺寸很小，但传达了引起共鸣的品牌信息。 每个矢量图的低调动画确实为脆皮的品牌形象增添了人情味。 我们特别喜欢讨论客户支持的部分中的动画篝火。 它为整个主页优雅使用的简约扁平设计增添了活力。 这是使用这些流行的平面设计技术的完美方式，同时仍然添加令人兴奋的用户体验所需的生活乐趣。

Corebook 以完全黑暗的模式欢迎访问者访问他们的网站，当您向下滚动网站时，会有微妙而流畅的动画。 Corebook 以自己独特的方式找到了一种设计易于清晰可见的英雄动画的方法，尽管其黑色背景上的深灰色之间缺乏对比。

动画内容的选择极简但内容丰富。 只需几个正方形和颜色即可实现这一点，动画展示了客户在加入 Corebook 后将拥有的成品类型（品牌手册）：他们自己的品牌手册，达到行业标准并看起来很现代，时尚，精致。

Best Day Ever 使用循环动画​​技术，因此他们的动物插图不依赖触发器来保持移动。 只要可以在屏幕上看到，网站访问者可以看到的任何插图都会不断移动。

整个页面都采用内容优先的方法，因为单词和句子都很简短，而且不会超过它们需要的长度。 正是这种方法与友好的动画完美结合，将最少的文字与乐观、多彩的设计相结合。 动物的动作不仅为它们配对的文本带来了生命，而且它们为每个用户实现了对话体验。

Best Day Ever 的网站就是一个很好的例子，它展示了如何采用一个想法和设计原则（在这种情况下，主题是将充满活力的新鲜感与微妙相结合）并通过配色方案、内容策略和高级设计效果始终如一地表现出来。

谁不喜欢经典的球坑？ 谷歌在白色背景上使用其经典的品牌颜色，再次获得金牌。

通过一个鼠标跟踪效果，谷歌设法实现了一种用户体验，让网站访问者感觉他实际上是在一个球坑里！ 当您向下滚动页面时，所发生的只是球变大。 球下面没有任何内容，这正是实物中的样子。

谷歌设法让我们对这个产品的用途有一个直接的、耸人听闻的理解，他们通过一个简单的英雄文本标题描述和 CTA 按钮来做到这一点。

我们知道 Google 即将帮助我们规划下一次不会让我们失望的冒险。 当您将鼠标悬停在按钮上时，您是否看到了变色效果？ 这是我们第一次看到按钮的悬停效果变为四种不同的颜色，而不是从一种颜色变为另一种颜色。

这就像我们以前从未见过的一样。 在我们眼前，我们看到动画的抽象形状四处移动并形成动物的插图。 它激发了我们的好奇心，欣赏美丽的动物并想知道它们还使用了哪些其他动物？

这正是您希望网站访问者拥有的思考过程。 你在给他讲一个视觉故事，你想让他翻到那个故事的下一页。

如果你仔细想想，讲故事和濒危物种的原因有很多共同点：它们都是为了吸引听众的注意力并说服他（虽然巧妙地）你的主题是最重要的，也就是值得一听。

大麻产业仍然非常新颖和新鲜，因此对于将其作为产品进行销售的网站来说，它需要一种感觉相同的外观和氛围是有道理的。

让我们停下来欣赏一下仅在主页上就发生了多少设计技术：动画图像集合背后的幻灯片背景、3D 效果、旋转文字……一切看起来都很漂亮。

怎么会有人看到这个主页而不想进一步浏览该网站？ 只有这样做了，当您向下滚动时，您才能看到令人瞠目结舌的动画变得更加精彩。

我们喜欢当你从页面下降时，罐子旋转下来，当背景变成白色时，彩色背景上的物体滑动到页面的边缘。 很有创意。 越往下走，越漂亮的 3D 对象保持向上垂直滚动效果。

所有这些技术结合起来创造了一种感觉，就像你只想继续阅读更多的网站，甚至只是想看看有趣的视觉效果和设计师接下来想出的东西。

如果您导航到其他页面，您会看到主页英雄内容中的 3D 对象已成为背景的永久部分，同时仍在浮动和移动。 这种连续性的选择允许整体讲故事，这使重点更接近家庭：我们是一个很棒的产品。

当我们向下滚动主页时​​，是配色方案、3D 设计、低调的图像运动还是信用卡插图以杂技般的运动下降？

这是所有的一点点。

这里的配色方案有很长的路要走。 被大量空白包围的橙色阴影和简单的圆形无衬线字体都如此整体地协同工作。 但真正重要的是用于信用卡插图的动画技术。

RappiPay 获得了我们对原创性和卓越参与度的投票。 网站内容会引导访问者向下浏览页面，直到到达最低点，因为当信用卡在页面上如此平滑地滑动时，它会触发其他图像和插图的出现。 在信用卡与其他元素的交互（例如显示现金账单或在球体周围绘制虚线）之间，卡片会一直展示杂技翻转。

正如信用卡把故事讲得很好，充满了动作和活力，它也以高收场。 最后的圆形切口显示了持卡人的购买情况，告诉我们这张卡有多少特性和功能，以及持卡人如何真正地随处携带它。

极简、前卫这两个词，我们在这里都能想到。 如果一张图片有 1000 字，我们会说动画图片有 5,000 字甚至更多。

好，现在轮到你了。 我们在此处列出的动画技术只是网络创建者向其网站添加动画功能时所能实现的一小部分。 每天都有越来越多的灵感可供使用，有很多东西要看和学习。 作为设计师，我们的座右铭是从基础开始，当您拥有简单的动画实践时，您的网站可以向世界展示成为推动者和推动者意味着什么。