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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用(yòng)範圍

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

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

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

通(tōng)過這(zhè)些案例，我們可(kě)以了(le)解到液态效果的(de)作用(yòng)主要有：

豐富用(yòng)戶體驗

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

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

優雅地填充留白或背景

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

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

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

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

爲整個(gè)設計提供一緻性

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

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