網站(zhàn)建設 網絡推廣 網站(zhàn)營銷 軟件開(kāi)發 案例展示 新聞資訊 關于我們 聯系我們
合肥拓野網絡公司新聞資訊
流動的質感!流體(tǐ)效果是怎樣賦予頁面以生(shēng)命力
來(lái)源:合肥好好先生網絡科技有限公司 | 發布日期:2019-03-04 次 | 人(rén)氣:2505
 網頁設計(jì)

在拟物化設計(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í)候需要注意。

上(shàng)一篇:企業做(zuò)網站(zhàn)優化進入深水(shuǐ)區(qū)
下一篇:合肥網站(zhàn)建設,自媒體(tǐ)時(shí)代公司是否還(hái)需要做(zuò)網站(zhàn)?
熱門(mén)資訊
(2020-06-24)2020端午節放假通(tōng)知 (2018-12-21)移動端seo優化和(hé)排名技(jì)術(shù)怎麽實現? (2019-01-11)網站(zhàn)站(zhàn)內(nèi)優化是非常重要的一個(gè)環節,站(zhàn)內(nèi)SEO優化中如何利用好... (2013-09-09)番茄花(huā)園作(zuò)者被判三年半微軟警告win7盜版 (2011-07-11)微軟重拳打擊番茄花(huā)園盜版 醉翁之意不在酒
推薦資訊
(2013-11-08)IBM宣布推開(kāi)放Linux套裝軟件挑戰Windows 7 (2014-06-12)阿裏巴巴信用支付業務是否會(huì)沖擊銀行(xíng)消費信貸? (2014-05-09)報告稱六成IT家(jiā)電(diàn)企業使用CN域名 (2013-03-29)拓野網絡指出錯誤的堆積關鍵詞有(yǒu)哪些(xiē) (2013-03-26)“2009中國互聯網市場(chǎng)年會(huì)”3月召開(kāi)
電(diàn)商解決方案-專業網絡營銷部署咨詢-成功案例分享-個(gè)性定制(zhì)服務咨詢
網站(zhàn)建設
營銷套餐 PC端 移動端 域名空(kōng)間(jiān)郵箱
網絡推廣
搜狗競價 網站(zhàn)優化
網站(zhàn)營銷
微信公衆号 小(xiǎo)程序 朋友(yǒu)圈推廣
軟件開(kāi)發
定制(zhì)軟件 手機APP
案例展示
精品案例
網絡快訊
公司新聞 行(xíng)業資訊 媒體(tǐ)報道(dào) 網絡知識
關于我們
公司簡介 企業文化 團隊風采 發展曆程
聯系我們
聯系方式 人(rén)才招聘 問題反饋 付款方式
Copyright  ©  2008 - 2018  合肥好好先生網絡科技有限公司, All Rights Reserved