设计原则 | 在网页设计中彰显自然之道

 

设计原则

 

简约的背景与配色

借助 WebGL、GSAP、Three.js 等较为前卫的技术，将物理运动质感带入 Web项目，在这些项目中得到了体现。虽然我们绝大多数人在享受这些效果的时候，硬件设备的CPU 和 GPU 不可避免地更加消耗性能，但是这并不会带来矛盾，我们也无法阻止设计师和开发者实现这样的效果。

 

由于我们的设计主旨是以“静”突出“动”，所以过多的配色或者元素可能会遮掩我们最想突出的效果。黑白双色并不一定就令人压抑枯燥，适当的组合更能彰显某一元素的活力。

 

 

对比感

 

承接第一条，在保证我们的主角是具有“流动效果”的那一元素之后，我们就要着眼于如何扩大元素与背景之间的对比感。最简单的就是白色背景配动态十分明显的图片，又或者是大片的静与小部分的动，突出二者的界限，可以用抽象的手法，能更容易实现对比的目的。

 

元素多样选择和唯一使用

 

我们所说的“液体流动效果”并不局限于水，它可能是云，烟雾，泡泡，斑点等等，相比于水这种具有直观流动感的事物，泡泡和斑点则更具有层次感。设计师在设计时不需要限制元素的选择，但在使用时，一般不会同时使用水和烟雾（举例）两种元素，那样会显得混乱和赘余。下图为以泡泡为主元素的使用案例。

 

作用和功能

 

我们已经了解了什么是液体流动效果那么，液体流动效果到底有什么具体的作用以及功能呢？

 

首先，液体流动效果可以丰富用户体验，给人留下深刻的印象，完善整个页面给人的感觉。液体流动效果可以使整个网站页面看起来更加完善并且富有美感，使得用户更加愿意了解此网站。

 

其次，它可以优雅地填充留白或背景，避免页面看起来太简单，当一界面只有网站的LOGO的时候，页面会看起来很空，给用户留下不太好的第一印象。合理的利用液体流动效果填充留白和背景，就可以有效的避免这种情况。

 

最后，它可以放置视觉锚点，以不那么引人瞩目的方式来引导用户注意力到特定的地方，液体流动效果可以利用类似波纹的效果，来引导用户的注意力达到特定的地点，从而使用户关注到网站的重点，达到其目的。

 

 

斑点和气泡元素

 

设计师利用诸如斑点和小气泡这样的装饰性元素，分散在网页的各个角落。这些装饰性的元素的形态多种多样，但是总体上有着吸引视线、丰富视觉的功能。即使是基于相同的设计概念，不同的气泡和斑点，让每个设计项目都有着不同的性格。这些元素可以是任何色彩，而微妙的渐变和高饱和度的色调是目前设计师的最爱。斑点和气泡本身在形态上也有着柔和流畅的特点，让整个氛围显得圆润顺滑。

 

 

设计师借助气泡在整个画布上进行构图，通过衬托来营造深度，借助动效营造动静对比，所有的这些设计可以以不高的成本创造出时髦有趣的设计感。而所有的这些大都是为了一个目的：创造出用户偏好的视觉入口。总的来说，斑点和气泡是一种吸引用户注意力的有效设计元素。如果你用的好，它们不仅可以作为装饰而存在，还可以作为视觉引导，控制整个页面的动线，给用户以视觉上的自然指引，创造出富有流动性的页面布局。

 

 

自然场景

 

设计师利用自然环境，液态效果有时只是网页所涉及到的展览当中的一部分，极富多样性的自然场景，不断丰富着用户的空间感受，给用户真实的自然美学感触，创造出移步换景的体验感，“场景+内容”合二为一，能够加深用户的印象。网页作品上，液态效果有时只是网页所涉及到的展览当中的一部分，但是液态效果能起到装饰性作用，营造氛围，传递感受，提升设计感。

 

液体效果全覆盖

 

网页设计时，设计师将整个页面覆盖液态效果，使整体质感简约，优雅，精致，液体元素占据整个页面，给用户一种视觉上的空间流动感，别具特色的画面能够给用户留下深刻的印象。

 

通过上面这些案例，我们可以了解到在设计网页的过程中，设计师是如何利用液体元素的特征使页面达到液体流动效果。