亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放

在(zai)(zai)拟物化(hua)设(she)(she)计(ji)大行(xing)其道的时代(dai)，设(she)(she)计(ji)师在(zai)(zai)设(she)(she)计(ji)的时候(hou)会试图在(zai)(zai)数(shu)字界面中(zhong)复刻现实(shi)世界中(zhong)的元素和质(zhi)感(gan)，大家戏称为(wei)「抄现实(shi)」。如(ru)今拟物化(hua)设(she)(she)计(ji)的热潮(chao)褪(tun)去，但(dan)是在(zai)(zai)设(she)(she)计(ji)UI和网(wang)页的时候(hou)依然在(zai)(zai)「抄现实(shi)」，只不过所「抄」的是更加深层的物理规则、运动(dong)特征(zheng)和质(zhi)感(gan)。

物理(li)(li)是一门相当(dang)古老的(de)(de)(de)学科(ke)，但(dan)是并不(bu)(bu)是每个人(ren)都(dou)(dou)能理(li)(li)解其中的(de)(de)(de)规则，但(dan)是几乎所有人(ren)都(dou)(dou)能本能地(di)感知(zhi)到(dao)它的(de)(de)(de)存在(zai)，当(dang)某(mou)个动(dong)效运动(dong)不(bu)(bu)合理(li)(li)的(de)(de)(de)时(shi)候，会很本能地(di)感知(zhi)到(dao)它「不(bu)(bu)自然」，因为日常生(sheng)活已(yi)经教会我们所有人(ren)什么样的(de)(de)(de)特征是「自然」的(de)(de)(de)。

「自然」是(shi)安全的(de)(de)(de)，是(shi)顺应(ying)我们习(xi)惯的(de)(de)(de)，自然也是(shi)吸(xi)引人的(de)(de)(de)。对于设计师而言，我们的生活和自然的规律是最好的老师。

怎么借鉴呢？不妨看(kan)看(kan)Kikk Festival 和 Wed’ze Goggles这两(liang)个网站(zhan)的设(she)计。

Kikk Festival 的亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放设计相当的壮观，动态效果下的海洋场景近乎真实，而海岛和大猩猩的合成效果则巧妙地借助相似的形体创造出错位而双关式的视觉语言。水是整个设计中看起来最自然的东西，也是创造错位感的环境。

相比之下，Wed’ze Goggles 的(de)(de)(de)(de)页面设(she)计就没有那么令人难忘了，但是(shi)它向我们展示了如(ru)何充分(fen)利用简单的(de)(de)(de)(de)元(yuan)素来制造(zao)充满自然流体质感的(de)(de)(de)(de)视觉元(yuan)素。他们的(de)(de)(de)(de)设(she)计团队使用类(lei)似流体的(de)(de)(de)(de)斑点来装饰背景，巧妙地让原本(ben)简约空(kong)旷的(de)(de)(de)(de)页面显得不那么单调。

借(jie)助 WebGL、GSAP、Three.js 等较为前卫的(de)技(ji)术(shu)，将物理(li)运(yun)动(dong)(dong)质感(gan)带(dai)入 Web项目(mu)，在(zai)这些(xie)项目(mu)中得到(dao)了(le)体(ti)现(xian)。虽然我(wo)们绝大多(duo)数人在(zai)享受这些(xie)效果的(de)时候(hou)，硬件设备的(de)CPU 和 GPU 不(bu)可避免(mian)地更(geng)加消耗性能(neng)，但是(shi)这并不(bu)会带(dai)来矛盾(dun)，我(wo)们也无法阻止设计师和开发者实现(xian)这样(yang)的(de)效果。合(he)理(li)地运(yun)用不(bu)同的(de)代码(ma)技(ji)术(shu)和各种(zhong)成熟(shu)的(de)特效库，再(zai)惊人的(de)效果都(dou)(dou)可以实现(xian)，以假(jia)乱真的(de)质感(gan)，模(mo)拟现(xian)实的(de)运(yun)动(dong)(dong)，这些(xie)都(dou)(dou)不(bu)成问题。

接下来，我们看看三个令(ling)人难忘(wang)的案(an)例：Julie Bonnemoy、Studio Gusto 和 Ibiza Music Artists 这(zhei)(zhei)三(san)个网站。出色(se)的液体(ti)流动效(xiao)果让这(zhei)(zhei)些网页(ye)足够出彩，接下来我们(men)挨(ai)个看看。

Julie Bonnemoy 的(de)页面(mian)当(dang)中加(jia)入了非常(chang)(chang)惊人(ren)的(de)液态(tai)泡(pao)泡(pao)动(dong)画(hua)，作为动(dong)态(tai)背(bei)景来使用，加(jia)上温(wen)暖柔和的(de)色调，整(zheng)个页面(mian)给人(ren)非常(chang)(chang)诱人(ren)的(de)感觉。

Studio Gusto 的(de)亚洲人(ren)(ren)(ren)成影院午夜(ye)网站(zhan)(zhan)_无(wu)码人(ren)(ren)(ren)妻精一区二区三区_人(ren)(ren)(ren)人(ren)(ren)(ren)妻人(ren)(ren)(ren)人(ren)(ren)(ren)爽人(ren)(ren)(ren)人(ren)(ren)(ren)澡人(ren)(ren)(ren)人(ren)(ren)(ren)_美(mei)女(nv)内射无(wu)套日(ri)韩免(mian)费播放上使用(yong)了类似的(de)设计，不过泡泡的(de)质感不像液体，更加接近于肥皂泡的(de)感觉，轻(qing)盈随性。这(zhei)个(ge)网站(zhan)(zhan)的(de)设计是(shi)用(yong)于作品集展示的(de)。

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

就(jiu)像现实生活(huo)中水(shui)无常形一样(yang)，在网页(ye)设计当(dang)中(zhong)，液体也可以以多种多样的(de)(de)方式(shi)存在着。开发人员通过不(bu)同的(de)(de)流态，不(bu)同的(de)(de)视(shi)角，不(bu)同的(de)(de)色彩来构建不(bu)同的(de)(de)解决方案。就像之(zhi)前(qian)的(de)(de)几个案例所看(kan)到的(de)(de)：

o 液体可(ke)以构成平面，就像 Ibiza Music Artist 这个案例(li)，带着非常漂亮的波浪效(xiao)果(guo)。

o 液(ye)体可以(yi)如同浓(nong)稠的溶液(ye)一样向外扩散，就像 Booreiland 的网(wang)页中那样。

o 液体也可以具(ju)有方(fang)向性，向着(zhe)特(te)定(ding)的(de)方(fang)向流动，就(jiu)像 Republic 的(de)(de)页(ye)面中所使用的(de)(de)效果(guo)，你甚至可以在它流动的(de)(de)效果(guo)中感(gan)受到液(ye)体表面的(de)(de)稠度。

o 而 Les Animals 中的液(ye)体效(xiao)果则显得更(geng)加轻盈，流畅顺滑的效(xiao)果更(geng)接近2D。

o Designmodo Postcards 的(de)页面中则(ze)使用了静态的(de)气泡，结合微(wei)妙的(de)视差和(he)渐变效(xiao)果，来达到有趣的(de)视觉效(xiao)果。

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

使用(yong)范围

网页中(zhong)的液体效果(guo)通(tong)常都是装(zhuang)饰性的，营造氛围，传递感受(shou)，提升(sheng)设计(ji)感。

所以，在设计的时(shi)候，可(ke)以像 Intangible Matter 这样占(zhan)据整(zheng)个页面(mian)的区(qu)域，就像水面(mian)一(yi)样，不留下(xia)一(yi)点空隙。也可以像 Miew Creative Studio 或者 Loaded 这样，仅(jin)仅(jin)只是(shi)让(rang)液态效(xiao)果(guo)占据首屏，用(yong)来吸引用(yong)户的(de)注(zhu)意力。

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

通过这些(xie)案例，我们可(ke)以了解到(dao)液(ye)态(tai)效果的作用主(zhu)要有(you)：

o 丰富用(yong)户体验(yan)

o 给人留下深刻的印象

o 完善整个页面(mian)给(ji)人的感觉

o 优雅地填充留白或(huo)背景

o 避免页面看起来太(tai)简单

液态效(xiao)果所带来的功能其实也可以(yi)很重要：

o 放(fang)置视觉锚点(dian)，以不那么(me)引人(ren)瞩目的方(fang)式来引导用户注(zhu)意力到特定(ding)的地方(fang)。

o 通过动效(xiao)，为(wei)用户提供视(shi)觉路径

o 为整个(ge)设计提供一致性

o 提升项目本身的创造性(xing)和(he)专业性(xing)

当(dang)然值得(de)注意的(de)是，液态效(xiao)果本身对(dui)于服(fu)务(wu)器和用户的(de)电(dian)脑本身的(de)性(xing)能要(yao)求比较(jiao)高，开发的(de)时(shi)候(hou)需要(yao)注意。

结语

水是人类(lei)(lei)最(zui)熟(shu)悉的(de)元(yuan)素，对于人类(lei)(lei)而言，有着本能上的(de)吸引力。虽然这并不是设计师和开(kai)发者(zhe)在网页(ye)中使用它的(de)主要(yao)原因(yin)，但是它确实做到了抓人眼球这一点。如果技术(shu)支持，不妨多尝(chang)试一下(xia)。

原文地(di)址：//www.uisdc.com/liquid-web-design