网络搜索已经成为现代人自主寻求知识的一个主要途径，而网页的设计工作也不能只是提供功能，配色排版等也是吸引用户的重要条件。在许多设计师们在搜索枯肠竭力创新时，也有一些人选择返璞归真，借鉴自然。我们将在本文中介绍如何用“液体流动效果”这一元素，来让网页具有生气，为网页的颜值加分，达到令人赏心悦目的效果。
1设计原则
1
简约的背景与配色借助WebGL、GSAP、Three.js等较为前卫的技术，将物理运动质感带入Web项目，在这些项目中得到了体现。虽然我们绝大多数人在享受这些效果的时候，硬件设备的CPU和GPU不可避免地更加消耗性能，但是这并不会带来矛盾，我们也无法阻止设计师和开发者实现这样的效果。
由于我们的设计主旨是以“静”突出“动”，所以过多的配色或者元素可能会遮掩我们最想突出的效果。黑白双色并不一定就令人压抑枯燥，适当的组合更能彰显某一元素的活力。
（简约的配色彰显液体元素h欧力）2
对比感承接第一条，在保证我们的主角是具有“流动效果”的那一元素之后，我们就要着眼于如何扩大元素与背景之间的对比感。最简单的就是白色背景配动态十分明显的图片，又或者是大片的静与小部分的动，突出二者的界限，可以用抽象的手法，能更容易实现对比的目的。
（液体元素与背景形成对比感）
3
元素多样选择和唯一使用我们所说的“液体流动效果”并不局限于水，它可能是云，烟雾，泡泡，斑点等等，相比于水这种具有直观流动感的事物，泡泡和斑点则更具有层次感。设计师在设计时不需要限制元素的选择，但在使用时，一般不会同时使用水和烟雾（举例）两种元素，那样会显得混乱和赘余。下图为以泡泡为主元素的使用案例。
（StudioGusto首页界面）
2作用和功能
我们已经了解了什么是液体流动效果那么，液体流动效果到底有什么具体的作用以及功能呢？
首先，液体流动效果可以丰富用户体验，给人留下深刻的印象，完善整个页面给人的感觉。液体流动效果可以使整个网站页面看起来更加完善并且富有美感，使得用户更加愿意了解此网站。
其次，它可以优雅地填充留白或背景，避免页面看起来太简单，当一界面只有网站的LOGO的时候，页面会看起来很空，给用户留下不太好的第一印象。合理的利用液体流动效果填充留白和背景，就可以有效的避免这种情况。
最后，它可以放置视觉锚点，以不那么引人瞩目的方式来引导用户注意力到特定的地方，液体流动效果可以利用类似波纹的效果，来引导用户的注意力达到特定的地点，从而使用户