网站制作知识

出色的液体流动效果让这些网页足够出彩

类型:网站制作知识 日期:2020.03.11

Julie Bonnemoy 的页面当中加入了非常惊人的液态泡泡动画,作为动态背景来使用,加上温暖柔和的色调,整个页面给人非常诱人的感觉。

Studio Gusto 的首页上使用了类似的网站建设,不过泡泡的质感不像液体,更加接近于肥皂泡的感觉,轻盈随性。这个网站的设计是用于作品集展示的。

最后一个网页是 Ibiza Music Artists,网站并没有用水泡的设计,而是将页面背景设计成了俯视角度下的水面,整体质感简约,优雅,精致。

就像现实生活中水无常形一样,在网页设计当中,液体也可以以多种多样的方式存在着。开发人员通过不同的流态,不同的视角,不同的色彩来构建不同的解决方案。就像之前的几个案例所看到的:


网站建设


液体可以构成平面,就像 Ibiza Music Artist 这个案例,带着非常漂亮的波浪效果。

液体可以如同浓稠的溶液一样向外扩散,就像 Booreiland 的网页中那样。

液体也可以具有方向性,向着特定的方向流动,就像 Republic 的页面中所使用的效果,你甚至可以在它流动的效果中感受到液体表面的稠度。

而 Les Animals 中的液体效果则显得更加轻盈,流畅顺滑的效果更接近2D。

Designmodo Postcards 的页面中则使用了静态的气泡,结合微妙的视差和渐变效果,来达到有趣的视觉效果。

免费建站中液体效果是千变万化的,不同的视觉效果带来的感觉截然不同,但是它们大都遵循物理规律。你可以利用这些规律,让设计服务于你的想法。


使用范围

免费网站中的液体效果通常都是装饰性的,营造氛围,传递感受,提升设计感。

所以,在设计的时候,可以像 Intangible Matter 这样占据整个页面的区域,就像水面一样,不留下一点空隙。也可以像 Miew Creative Studio 或者 Loaded 这样,仅仅只是让液态效果占据首屏,用来吸引用户的注意力。

而在 Viennese modernism 2018 这个网页当中,液态效果甚至是网页所涉及到的展览当中的一个组成部分。这个案例当中,液态效果是现代主义设计的代表,为整个网页的氛围作出了贡献。


网站建设


通过这些案例,我们可以了解到液态效果的作用主要有:

丰富用户体验

给人留下深刻的印象

完善整个页面给人的感觉

优雅地填充留白或背景

避免页面看起来太简单


网站模板


液态效果所带来的功能其实也可以很重要:

放置视觉锚点,以不那么引人瞩目的方式来引导用户注意力到特定的地方。

通过动效,为用户提供视觉路径

为整个设计提供一致性

提升项目本身的创造性和专业性

当然值得注意的是,液态效果本身对于服务器和用户的电脑本身的性能要求比较高,开发的时候需要注意。


关键词:免费网站,免费建站,网站建设

相关网站建站知识
更多免费网站
网站建设 网站优化 网站推广 网站排名