设计趋势：网站设计中的液态动画

令人愉悦的设计风格可以创造出意想不到的用户体验，让访问者留在您的网站上。

一种流行的技术就是在网页设计中使用液体动画。他的趋势的伟大之处在于，您可以通过多种不同的方式使用它来创建适合您的内容的界面。

在这里，我们将了解这一趋势的各种示例，以及如何让它为您服务。 （确保单击示例以更好地了解每个动画的工作原理。）

什么是液体动画？

液体动画是屏幕上具有水般感觉的运动。这些动画通常有缓慢、流畅的运动，可能会产生涟漪或潮起潮落。 （这就是它发挥作用的原因；液体动画必须感觉真实。）

液体动画可以作为悬停状态或作为视频或滚动动画的一部分生效。您甚至可以在卷轴上激活液体动画。

这项技术确实开始流行起来，主要是因为计算机和较小的网络设备和浏览器有能力有效地呈现该技术。

这种趋势的根源可能可以追溯到在动画设计中使用斑点形状。去年相当流行的许多设计（包括上面的 Fleava）都带有某种液体动画元素。

液体层

液体动画是作品集网站和创意机构的一种流行技术，可能是因为这是许多设计师可以轻松测试和尝试新设计概念的地方。

液体动画与其他趋势相结合，例如分层效果。 （您还会在此处的大多数示例中看到其他趋势。）

Ilya Kulbachny 以两种不同的方式使用两层液体动画，为简单的设计增添了很多视觉趣味。顶层包括以液体动画和速度移动的文本，不受用户交互的影响。

背景层似乎是一个图像，但是当您将鼠标悬停在图片上时，边缘会以液体流的形式移动。鼠标悬停时图像会随着鼠标移动而发生类似水的运动。

液体悬停动作

液体悬停动画状态可能是这一趋势最流行的用途之一。在鼠标移到具有动画悬停状态的项目上之前，没有任何内容可以提示您进入液体动画。

这是一个简单而令人愉快的工具，可以吸引用户。

液体动画的特点是运动是如此真实和流畅，以至于它实际上鼓励人们继续玩它以了解运动是如何发生和运作的。

液体“卷轴”

液体动画是一个很棒的“滚动”或导航工具。 （您需要点击上面的示例来确定这一点。）

通过在屏幕上拖拉鼠标，图像的移动感觉就像您在水族馆中旋转一样。您可以看到所有元素在您周围移动，而无需去任何地方。

然后当你停下来时，就会出现一个动画的小时刻，伴随着你的动作而产生的涟漪和速度似乎落在了屏幕上。

这种运动感觉非常真实，并将用户带入设计空间。

液体背景/前景

液体动画可以是设计的背景或前景中的设计元素，并且无需用户交互即可“运行”。

《超越美丽》的《欲望革命》中有一个背景/前景元素可以做到这一点。这些小斑点在屏幕上移动，甚至相互连接。当鼠标处于额外的悬停状态时，它们会进一步产生动画和变形。

指针还具有液体感，博客作为光标，并且屏幕上的运动具有真实感。 Blob 指针几乎减慢以匹配其他元素的运动。

液体动态图像

Cinemagraph 图像作为一种趋势来了又去，并以更加流畅的动画重新出现。

这些设计包括静态和动态图像的组合（通常在背景中），其中有一些液体运动。

在上面 1 Minus 1 的示例中，图像中的女人由于衣服的运动而看起来像是在水下。它很简单，但视觉上很有趣。该网站设计在滚动下方还使用了各种其他动画技术。

水下运动

上面的例子暗示了这一点——水下风格的运动——这里它是主要的动画效果。

水下运动是一种缓慢、流畅的运动，是使用此技术的一种流行方式。 Les Animals 使用动画插图，看起来就像植物在水下移动。形状以舒缓、缓慢的方式变化和流动。

如果您与设计进行交互，鼠标移动时会出现额外的液体动画状态。它很微妙并且完美地适合界面设计的其余部分。

液体版式

我们已经看到了一些这样的情况，但液体动画效果也可以应用于排版。

使这种技术在字母上发挥作用的技巧是保持单词的可读性。如果在任何时候文本被拉伸或拉扯到无法阅读的程度，则说明动画已经超出了范围。

这可能是一个相当微妙的平衡，但如果做得好的话，观看和互动会很有趣。文本元素上的液体动画可以单独运行，例如上面 Myles Ng 的示例，也可以用作悬停状态。

结论

液体动画是一种主要趋势的设计技术。动效可以帮助用户更长久地对您的网站设计感兴趣，并提供与内容互动的又一个理由。

这个网站设计技术应该看起来简单而现实。太快或显得强迫的动作不会像您期望从液体动画中获得的微妙动作那样令人愉悦。