流動(dòng)的網(wǎng)站建設(shè)才有生命力質(zhì)感發(fā)布者：本站     時(shí)間：2021-02-23 08:02:33

在擬物化設(shè)計(jì)大行其道的時(shí)代，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候會(huì)試圖在數(shù)字界面中復(fù)刻現(xiàn)實(shí)世界中的元素和質(zhì)感，大家戲稱為「抄現(xiàn)實(shí)」。如今擬物化設(shè)計(jì)的熱潮褪去，但是在設(shè)計(jì)UI和網(wǎng)頁(yè)的時(shí)候依然在「抄現(xiàn)實(shí)」，只不過(guò)所「抄」的是更加深層的物理規(guī)則、運(yùn)動(dòng)特征和質(zhì)感。

物理是一門相當(dāng)古老的學(xué)科，但是并不是每個(gè)人都能理解其中的規(guī)則，但是幾乎所有人都能本能地感知到它的存在，當(dāng)某個(gè)動(dòng)效運(yùn)動(dòng)不合理的時(shí)候，會(huì)很本能地感知到它「不自然」，因?yàn)槿粘Ｉ钜呀?jīng)教會(huì)我們所有人什么樣的特征是「自然」的。

「自然」是安全的，是順應(yīng)我們習(xí)慣的，自然也是吸引人的。對(duì)于設(shè)計(jì)師而言，我們的生活和自然的規(guī)律是最好的老師。

流動(dòng)的質(zhì)感！流體效果是怎樣賦予頁(yè)面以生命力

怎么借鑒呢？不妨看看Kikk Festival 和 Wed’ze Goggles這兩個(gè)網(wǎng)站的設(shè)計(jì)。

Kikk Festival 的首頁(yè)設(shè)計(jì)相當(dāng)?shù)膲延^，動(dòng)態(tài)效果下的海洋場(chǎng)景近乎真實(shí)，而海島和大猩猩的合成效果則巧妙地借助相似的形體創(chuàng)造出錯(cuò)位而雙關(guān)式的視覺語(yǔ)言。水是整個(gè)設(shè)計(jì)中看起來(lái)最自然的東西，也是創(chuàng)造錯(cuò)位感的環(huán)境。

流動(dòng)的質(zhì)感！流體效果是怎樣賦予頁(yè)面以生命力

相比之下，Wed’ze Goggles 的頁(yè)面設(shè)計(jì)就沒(méi)有那么令人難忘了，但是它向我們展示了如何充分利用簡(jiǎn)單的元素來(lái)制造充滿自然流體質(zhì)感的視覺元素。他們的設(shè)計(jì)團(tuán)隊(duì)使用類似流體的斑點(diǎn)來(lái)裝飾背景，巧妙地讓原本簡(jiǎn)約空曠的頁(yè)面顯得不那么單調(diào)。

借助 WebGL、GSAP、Three.js 等較為前衛(wèi)的技術(shù)，將物理運(yùn)動(dòng)質(zhì)感帶入 Web項(xiàng)目，在這些項(xiàng)目中得到了體現(xiàn)。雖然我們絕大多數(shù)人在享受這些效果的時(shí)候，硬件設(shè)備的CPU 和 GPU 不可避免地更加消耗性能，但是這并不會(huì)帶來(lái)矛盾，我們也無(wú)法阻止設(shè)計(jì)師和開發(fā)者實(shí)現(xiàn)這樣的效果。合理地運(yùn)用不同的代碼技術(shù)和各種成熟的特效庫(kù)，再驚人的效果都可以實(shí)現(xiàn)，以假亂真的質(zhì)感，模擬現(xiàn)實(shí)的運(yùn)動(dòng)，這些都不成問(wèn)題。

接下來(lái)，我們看看三個(gè)令人難忘的案例：Julie Bonnemoy、Studio Gusto 和 Ibiza Music Artists 這三個(gè)網(wǎng)站。出色的液體流動(dòng)效果讓這些網(wǎng)頁(yè)足夠出彩，接下來(lái)我們挨個(gè)看看。

流動(dòng)的質(zhì)感！流體效果是怎樣賦予頁(yè)面以生命力

Julie Bonnemoy 的頁(yè)面當(dāng)中加入了非常驚人的液態(tài)泡泡動(dòng)畫，作為動(dòng)態(tài)背景來(lái)使用，加上溫暖柔和的色調(diào)，整個(gè)頁(yè)面給人非常誘人的感覺。

流動(dòng)的質(zhì)感！流體效果是怎樣賦予頁(yè)面以生命力

Studio Gusto 的首頁(yè)上使用了類似的設(shè)計(jì)，不過(guò)泡泡的質(zhì)感不像液體，更加接近于肥皂泡的感覺，輕盈隨性。這個(gè)網(wǎng)站的設(shè)計(jì)是用于作品集展示的。

流動(dòng)的質(zhì)感！流體效果是怎樣賦予頁(yè)面以生命力

最后一個(gè)網(wǎng)頁(yè)是 Ibiza Music Artists，網(wǎng)站并沒(méi)有用水泡的設(shè)計(jì)，而是將頁(yè)面背景設(shè)計(jì)成了俯視角度下的水面，整體質(zhì)感簡(jiǎn)約，優(yōu)雅，精致。