在拟物化设计大行其道的时代,设计师在设计的时侯会企图在数字界面中复刻现实世界中的元素和质感,你们戏称为「抄现实」。现在拟物化设计的风潮退去,然而在设计UI和网页的时侯仍然在「抄现实」,只不过所「抄」的是更加深层的化学规则、运动特点和质感。
化学是一门相当古老的学科,并且并不是每位人都能理解其中的规则,而且几乎所有人都能本能地感知到它的存在,当某个动效运动不合理的时侯,会很本能地感知到它「不自然」网页点赞,由于日常生活已然教会我们所有人哪些样的特点是「自然」的。
「自然」是安全的,是迎合我们习惯的,自然也是吸引人的。对于设计师而言,我们的生活和自然的规律是最好的老师。
如何借鉴呢?不妨瞧瞧KikkFestival和Wed’zeGoggles这两个网站的设计。
KikkFestival的首页设计相当的壮丽,动态疗效下的海洋场景近乎真实,而海岛和大猩猩的合成疗效则巧妙地利用相像的形体创造出错位而双关式的视觉语言。水是整个设计中看上去最自然的东西,也是创造错位感的环境。
相比之下,Wed'zeGoggles的页面设计就没有这么令人难忘了,然而它向我们展示了怎样充分借助简单的元素来制造饱含自然流体质感的视觉元素。她们的设计团队使用类似流体的黑斑来装潢背景,巧妙地让原先简洁宽阔的页面变得不这么单调。
利用WebGL、GSAP、Three.js等较为前卫的技术,将数学运动质感带入Web项目,在这种项目中得到了彰显。其实我们绝大多数人在享受这种疗效的时侯,硬件设备的CPU和GPU不可防止地愈发消耗性能,而且这并不会带来矛盾,我们也未能制止设计师和开发者实现这样的疗效。合理地运用不同的代码技术和各类成熟的特效库,再惊人的疗效都可以实现,以假乱真的质感网页点赞,模拟现实的运动,那些都不成问题。
接出来,我们瞧瞧三个令人难忘的案例:JulieBonnemoy、StudioGusto和IbizaMusicArtists这三个网站。出众的液体流动疗效让那些网页足够出彩,接出来我们逐个瞧瞧。
JulieBonnemoy的页面当中加入了特别惊人的液态泡泡动漫,作为动态背景来使用,加上温暖轻柔的色彩,整个页面给人十分迷人的觉得。
StudioGusto的首页上使用了类似的设计,不过泡泡的质感不像液体,愈加接近于香皂泡的觉得,飘逸随性。这个网站的设计是用于作品集展示的。
最后一个网页是IbizaMusicArtists,网站并没有用小泡的设计,而是将页面背景设计成了俯瞰角度下的海面,整体质感简洁,典雅,精巧。
如同现实生活中水无常形一样,在网页设计当中,液体也可以以多种多样的形式存在着。开发人员通过不同的紊流,不同的视角,不同的色调来建立不同的解决方案。如同之前的几个案例所见到的:
网页中液体疗效是千变万化的,不同的视觉疗效带来的觉得迥然不同,而且它们大都遵守数学规律。你可以借助这种规律,让设计服务于你的看法。
使用范围
网页中的液体疗效一般都是装潢性的,营造气氛,传递感悟,提高设计感。
所以,在设计的时侯,可以像IntangibleMatter这样抢占整个页面的区域,如同海面一样,不留下一点缝隙。也可以像MiewCreativeStudio或则Loaded这样,仅仅只是让液态疗效抢占首屏,拿来吸引用户的注意力。
而在Viennesemodernism2018这个网页当中,液态疗效甚至是网页所涉及到的展览当中的一个组成部份。这个案例当中,液态疗效是现代主义设计的代表,为整个网页的气氛做出了贡献。
通过这种案例,我们可以了解到液态疗效的作用主要有:
液态疗效所带来的功能虽然也可以很重要:
其实值得注意的是,液态疗效本身对于服务器和用户的笔记本本身的性能要求比较高,开发的时侯须要注意。
结语
水是人类最熟悉的元素,对于人类而言,有着本能上的吸引力。其实这并不是设计师和开发者在网页中使用它的主要诱因,而且它确实做到了抓人眼珠这一点。假如技术支持,不妨多尝试一下。