設(shè)計原則

 

簡約的背景與配色

借助 WebGL、GSAP、Three.js 等較為前衛(wèi)的技術(shù)，將物理運動質(zhì)感帶入 Web項目，在這些項目中得到了體現(xiàn)。雖然我們絕大多數(shù)人在享受這些效果的時候，硬件設(shè)備的CPU 和 GPU 不可避免地更加消耗性能，但是這并不會帶來矛盾，我們也無法阻止設(shè)計師和開發(fā)者實現(xiàn)這樣的效果。

 

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

 

 

對比感

 

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

 

元素多樣選擇和唯一使用

 

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

 

作用和功能

 

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

 

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

 

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

 

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

 

 

斑點和氣泡元素

 

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

 

 

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

 

 

自然場景

 

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

 

液體效果全覆蓋

 

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

 

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