在拟物化設計(jì)大(dà)行(xíng)其道(dào)的時(shí)代，設計(jì)師(shī)在設計(jì)的時(shí)候會(huì)試圖在數(shù)字界面中複刻現實世界中的元素和(hé)質感，大(dà)家(jiā)戲稱為(wèi)「抄現實」。如今拟物化設計(jì)的熱潮褪去，但(dàn)是在設計(jì)UI和(hé)網頁的時(shí)候依然在「抄現實」，隻不過所「抄」的是更加深層的物理(lǐ)規則、運動特征和(hé)質感。

物理(lǐ)是一門(mén)相當古老的學科，但(dàn)是并不是每個(gè)人(rén)都能理(lǐ)解其中的規則，但(dàn)是幾乎所有(yǒu)人(rén)都能本能地感知到它的存在，當某個(gè)動效運動不合理(lǐ)的時(shí)候，會(huì)很(hěn)本能地感知到它「不自然」，因為(wèi)日常生(shēng)活已經教會(huì)我們所有(yǒu)人(rén)什麽樣的特征是「自然」的。

「自然」是安全的，是順應我們習慣的，自然也是吸引人(rén)的。對于設計(jì)師(shī)而言，我們的生(shēng)活和(hé)自然的規律是最好的老師(shī)。

怎麽借鑒呢？不妨看看Kikk Festival 和(hé) Wed’ze Goggles這兩個(gè)網站(zhàn)的設計(jì)。

Kikk Festival 的首頁設計(jì)相當的壯觀，動态效果下的海洋場(chǎng)景近乎真實，而海島和(hé)大(dà)猩猩的合成效果則巧妙地借助相似的形體(tǐ)創造出錯位而雙關式的視(shì)覺語言。水(shuǐ)是整個(gè)設計(jì)中看起來(lái)最自然的東西，也是創造錯位感的環境。

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

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

接下來(lái)，我們看看三個(gè)令人(rén)難忘的案例：Julie Bonnemoy、Studio Gusto 和(hé) Ibiza Music Artists 這三個(gè)網站(zhàn)。出色的液體(tǐ)流動效果讓這些(xiē)網頁足夠出彩，接下來(lái)我們挨個(gè)看看。

Julie Bonnemoy 的頁面當中加入了非常驚人(rén)的液态泡泡動畫(huà)，作(zuò)為(wèi)動态背景來(lái)使用，加上(shàng)溫暖柔和(hé)的色調，整個(gè)頁面給人(rén)非常誘人(rén)的感覺。

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

最後一個(gè)網頁是 Ibiza Music Artists，網站(zhàn)并沒有(yǒu)用水(shuǐ)泡的設計(jì)，而是将頁面背景設計(jì)成了俯視(shì)角度下的水(shuǐ)面，整體(tǐ)質感簡約，優雅，精緻。

就像現實生(shēng)活中水(shuǐ)無常形一樣，在網頁設計(jì)當中，液體(tǐ)也可(kě)以以多(duō)種多(duō)樣的方式存在着。開(kāi)發人(rén)員通(tōng)過不同的流态，不同的視(shì)角，不同的色彩來(lái)構建不同的解決方案。就像之前的幾個(gè)案例所看到的：

液體(tǐ)可(kě)以構成平面，就像 Ibiza Music Artist 這個(gè)案例，帶着非常漂亮的波浪效果。

液體(tǐ)可(kě)以如同濃稠的溶液一樣向外擴散，就像 Booreiland 的網頁中那(nà)樣。

液體(tǐ)也可(kě)以具有(yǒu)方向性，向着特定的方向流動，就像 Republic 的頁面中所使用的效果，你(nǐ)甚至可(kě)以在它流動的效果中感受到液體(tǐ)表面的稠度。

而 Les Animals 中的液體(tǐ)效果則顯得(de)更加輕盈，流暢順滑的效果更接近2D。

Designmodo Postcards 的頁面中則使用了靜态的氣泡，結合微妙的視(shì)差和(hé)漸變效果，來(lái)達到有(yǒu)趣的視(shì)覺效果。

網頁中液體(tǐ)效果是千變萬化的，不同的視(shì)覺效果帶來(lái)的感覺截然不同，但(dàn)是它們大(dà)都遵循物理(lǐ)規律。你(nǐ)可(kě)以利用這些(xiē)規律，讓設計(jì)服務于你(nǐ)的想法。

使用範圍

網頁中的液體(tǐ)效果通(tōng)常都是裝飾性的，營造氛圍，傳遞感受，提升設計(jì)感。

所以，在設計(jì)的時(shí)候，可(kě)以像 Intangible Matter 這樣占據整個(gè)頁面的區(qū)域，就像水(shuǐ)面一樣，不留下一點空(kōng)隙。也可(kě)以像 Miew Creative Studio 或者 Loaded 這樣，僅僅隻是讓液态效果占據首屏，用來(lái)吸引用戶的注意力。

而在 Viennese modernism 2018 這個(gè)網頁當中，液态效果甚至是網頁所涉及到的展覽當中的一個(gè)組成部分。這個(gè)案例當中，液态效果是現代主義設計(jì)的代表，為(wèi)整個(gè)網頁的氛圍作(zuò)出了貢獻。

通(tōng)過這些(xiē)案例，我們可(kě)以了解到液态效果的作(zuò)用主要有(yǒu)：

豐富用戶體(tǐ)驗

給人(rén)留下深刻的印象

完善整個(gè)頁面給人(rén)的感覺

優雅地填充留白或背景

避免頁面看起來(lái)太簡單

液态效果所帶來(lái)的功能其實也可(kě)以很(hěn)重要：

放置視(shì)覺錨點，以不那(nà)麽引人(rén)矚目的方式來(lái)引導用戶注意力到特定的地方。

通(tōng)過動效，為(wèi)用戶提供視(shì)覺路徑

為(wèi)整個(gè)設計(jì)提供一緻性

提升項目本身的創造性和(hé)專業性

當然值得(de)注意的是，液态效果本身對于服務器(qì)和(hé)用戶的電(diàn)腦(nǎo)本身的性能要求比較高(gāo)，開(kāi)發的時(shí)候需要注意。