設(shè)計(jì)原則

 

簡(jiǎn)約的背景與配色

借助 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ì)師和開(kāi)發(fā)者實(shí)現(xiàn)這樣的效果。

 

由于我們的設(shè)計(jì)主旨是以“靜”突出“動(dòng)”，所以過(guò)多的配色或者元素可能會(huì)遮掩我們最想突出的效果。黑白雙色并不一定就令人壓抑枯燥，適當(dāng)?shù)慕M合更能彰顯某一元素的活力。

 

 

對(duì)比感

 

承接第一條，在保證我們的主角是具有“流動(dòng)效果”的那一元素之后，我們就要著眼于如何擴(kuò)大元素與背景之間的對(duì)比感。最簡(jiǎn)單的就是白色背景配動(dòng)態(tài)十分明顯的圖片，又或者是大片的靜與小部分的動(dòng)，突出二者的界限，可以用抽象的手法，能更容易實(shí)現(xiàn)對(duì)比的目的。

 

元素多樣選擇和唯一使用

 

我們所說(shuō)的“液體流動(dòng)效果”并不局限于水，它可能是云，煙霧，泡泡，斑點(diǎn)等等，相比于水這種具有直觀流動(dòng)感的事物，泡泡和斑點(diǎn)則更具有層次感。設(shè)計(jì)師在設(shè)計(jì)時(shí)不需要限制元素的選擇，但在使用時(shí)，一般不會(huì)同時(shí)使用水和煙霧（舉例）兩種元素，那樣會(huì)顯得混亂和贅余。下圖為以泡泡為主元素的使用案例。

 

作用和功能

 

我們已經(jīng)了解了什么是液體流動(dòng)效果那么，液體流動(dòng)效果到底有什么具體的作用以及功能呢？

 

首先，液體流動(dòng)效果可以豐富用戶(hù)體驗(yàn)，給人留下深刻的印象，完善整個(gè)頁(yè)面給人的感覺(jué)。液體流動(dòng)效果可以使整個(gè)網(wǎng)站頁(yè)面看起來(lái)更加完善并且富有美感，使得用戶(hù)更加愿意了解此網(wǎng)站。

 

其次，它可以?xún)?yōu)雅地填充留白或背景，避免頁(yè)面看起來(lái)太簡(jiǎn)單，當(dāng)一界面只有網(wǎng)站的LOGO的時(shí)候，頁(yè)面會(huì)看起來(lái)很空，給用戶(hù)留下不太好的第一印象。合理的利用液體流動(dòng)效果填充留白和背景，就可以有效的避免這種情況。

 

最后，它可以放置視覺(jué)錨點(diǎn)，以不那么引人矚目的方式來(lái)引導(dǎo)用戶(hù)注意力到特定的地方，液體流動(dòng)效果可以利用類(lèi)似波紋的效果，來(lái)引導(dǎo)用戶(hù)的注意力達(dá)到特定的地點(diǎn)，從而使用戶(hù)關(guān)注到網(wǎng)站的重點(diǎn)，達(dá)到其目的。

 

 

斑點(diǎn)和氣泡元素

 

設(shè)計(jì)師利用諸如斑點(diǎn)和小氣泡這樣的裝飾性元素，分散在網(wǎng)頁(yè)的各個(gè)角落。這些裝飾性的元素的形態(tài)多種多樣，但是總體上有著吸引視線(xiàn)、豐富視覺(jué)的功能。即使是基于相同的設(shè)計(jì)概念，不同的氣泡和斑點(diǎn)，讓每個(gè)設(shè)計(jì)項(xiàng)目都有著不同的性格。這些元素可以是任何色彩，而微妙的漸變和高飽和度的色調(diào)是目前設(shè)計(jì)師的最?lèi)?ài)。斑點(diǎn)和氣泡本身在形態(tài)上也有著柔和流暢的特點(diǎn)，讓整個(gè)氛圍顯得圓潤(rùn)順滑。

 

 

設(shè)計(jì)師借助氣泡在整個(gè)畫(huà)布上進(jìn)行構(gòu)圖，通過(guò)襯托來(lái)營(yíng)造深度，借助動(dòng)效營(yíng)造動(dòng)靜對(duì)比，所有的這些設(shè)計(jì)可以以不高的成本創(chuàng)造出時(shí)髦有趣的設(shè)計(jì)感。而所有的這些大都是為了一個(gè)目的：創(chuàng)造出用戶(hù)偏好的視覺(jué)入口�？偟膩�(lái)說(shuō)，斑點(diǎn)和氣泡是一種吸引用戶(hù)注意力的有效設(shè)計(jì)元素。如果你用的好，它們不僅可以作為裝飾而存在，還可以作為視覺(jué)引導(dǎo)，控制整個(gè)頁(yè)面的動(dòng)線(xiàn)，給用戶(hù)以視覺(jué)上的自然指引，創(chuàng)造出富有流動(dòng)性的頁(yè)面布局。

 

 

自然場(chǎng)景

 

設(shè)計(jì)師利用自然環(huán)境，液態(tài)效果有時(shí)只是網(wǎng)頁(yè)所涉及到的展覽當(dāng)中的一部分，極富多樣性的自然場(chǎng)景，不斷豐富著用戶(hù)的空間感受，給用戶(hù)真實(shí)的自然美學(xué)感觸，創(chuàng)造出移步換景的體驗(yàn)感，“場(chǎng)景+內(nèi)容”合二為一，能夠加深用戶(hù)的印象。網(wǎng)頁(yè)作品上，液態(tài)效果有時(shí)只是網(wǎng)頁(yè)所涉及到的展覽當(dāng)中的一部分，但是液態(tài)效果能起到裝飾性作用，營(yíng)造氛圍，傳遞感受，提升設(shè)計(jì)感。

 

液體效果全覆蓋

 

網(wǎng)頁(yè)設(shè)計(jì)時(shí)，設(shè)計(jì)師將整個(gè)頁(yè)面覆蓋液態(tài)效果，使整體質(zhì)感簡(jiǎn)約，優(yōu)雅，精致，液體元素占據(jù)整個(gè)頁(yè)面，給用戶(hù)一種視覺(jué)上的空間流動(dòng)感，別具特色的畫(huà)面能夠給用戶(hù)留下深刻的印象。

 

通過(guò)上面這些案例，我們可以了解到在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，設(shè)計(jì)師是如何利用液體元素的特征使頁(yè)面達(dá)到液體流動(dòng)效果。