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

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

「自(zì)然」是安全的，是順應我們習慣的，自(zì)然也(yě)是吸引人的。對(duì)于設計(jì)師而言，我們的生活和(hé)自(zì)然的規律是最好(hǎo)的老(lǎo)師。

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

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

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

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

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

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

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

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

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

液體可以構成平面，就像 Ibiza Music Artist 這(zhè)個案例，帶着非常漂亮(liàng)的波浪效果。

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

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

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

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

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

使用(yòng)範圍

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

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

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

通過這(zhè)些(xiē)案例，我們可以了(le)解到(dào)液态效果的作(zuò)用(yòng)主要有：

豐富用(yòng)戶體驗

給人留下(xià)深刻的印象

完善整個頁面給人的感覺

優雅地填充留白(bái)或背景

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

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

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

通過動效，爲用(yòng)戶提供視(shì)覺路徑

爲整個設計(jì)提供一緻性

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

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