小議視覺設計中的漸變

發表於2013-06-18

漸變在我們生活中隨處可見,是一種很普遍的視覺現象。這種現象運用在視覺設計中能產生強烈的透視感和空間感,是一種有順序、有節奏的變化。

漸變作為視覺設計師經常使用的手法之一,幾乎每個設計師在頁面中或多或少都會做一個漸變(絕不誇張。。。)大家都知道漸變是PS裡的基本功能,而且十分簡單,在漸變工具設定好不同顏色,一拉就出來了,這還需要研究嗎?實際上,如何選用一個合適的漸變是設計師的基本功,也更是一門藝術。

漸變幅度在設計中非常重要。漸變的幅度太大,速度太快,就容易失去漸變所特有的規律性效果,給人以不連貫和視覺上的躍動感。反之,如果漸變的幅度太小,會產生重複之感,但慢的漸變在設計中會顯示出細緻的效果。所以,就有人把漸變分成強漸變和弱漸變。從功能角度上,也有人分為效果漸變和功能漸變兩類,個人覺得,到底哪一種分類更準確無可厚非,其目的還是希望設計師能夠了解各種漸變的特點、使用場合以及製作技巧等等。

一,效果漸變(強漸變)

這種漸變主要運用在一些需要展示效果的頁面上,比如風格誇張迥異的專題設計和banner,炫酷的遊戲介面、時尚的娛樂性軟體等。這些頁面需要在短時間內抓住使用者眼球,吸引使用者繼續閱讀。這種漸變飽和度高、跨度大,亮暗部色相可以不一致,塑造的質感比較厚重,往往營造的氛圍十分強烈。

專題頁

小議視覺設計中的漸變

 

德州撲克遊戲介面

小議視覺設計中的漸變

banner圖

小議視覺設計中的漸變

二,功能漸變(弱漸變)

主要運用在一些以功能為主的操作型頁面,比如電商、郵箱、資訊、門戶。這些頁面需要使用者視線停留較長時間,以閱讀資訊為主。所以應該去掉華麗的漸變,給使用者創造出簡單舒服的感覺,降低視覺噪音。

騰訊網門戶導航:平直微弱的藍色漸變加上邊角處點綴的白色漸變,創造迷人的材質。

小議視覺設計中的漸變

淘寶搜尋框:微弱有效的漸變,可以區分和組織內容。

小議視覺設計中的漸變

網易郵箱:明度跨度小,亮部和暗部色相保持一致,質感比較平實。

小議視覺設計中的漸變

三,調色小TIPS:

Ps裡的所有顏色是用HSB模式來控制的。HSB分別表示指色相、飽和度、明度。色相(H)表示什麼顏色,比如紅色;如果說這個紅色比較淡,就是飽和度(S)比較低,如果說紅色比較暗,那就是明度(B)比較低。效果漸變在色相、飽和度、明度都在變化,而且三個要素的變化幅度都很大。功能漸變則一般固定色相(H),飽和度(S)和明度(B)發生微小的變化。

小議視覺設計中的漸變

知道這幾個變化值以後,調整漸變顏色就可通過調數字來解決(不用再死盯著拾色器盲目選擇顏色啦!!)比如你想做一個所謂“大氣、簡約、國際化”的功能型漸變,在選好色相(H)以後,固定飽和度(S)的值不變,通過調節不同的明度(B)就能夠調出比較自然的漸變。在調這種微弱漸變時,常常漸變上會有色階。因為每個人做漸變的方法都不一樣,比如用圖層效果來拉很微弱的漸變或者若干圖層用不同混合模式疊加之後(大家不要眨眼,仔細盯著下圖看…),這種漸變常常會有色階,會顯得不柔和。那麼,有個小技巧這裡跟大家分享一下~

小議視覺設計中的漸變

(左圖為使用圖層效果的漸變,右圖為直接使用漸變效果的結果)

就是先把這個漸變轉化成智慧物件,然後以此選擇【濾鏡】-【畫筆描邊】-【噴筆】,數值可以參考如下:

小議視覺設計中的漸變

原理就是通過讓色階“抖動”變得模糊,讓漸變過渡得更柔和。

四,幾點心得體會:)

1,  一個介面上不應該超過4種色彩體系的漸變,否則介面顯得雜亂無章。所謂色彩體系,就是同一色相(H)下的不同顏色。如果想讓頁面儘可能的突出彩色,可以用灰色進行大面積調和,紅、綠、藍保留一點點足矣,下圖的網站就是個好例子。http://webflow.com/

小議視覺設計中的漸變

2,  同一個介面上的漸變儘量保持明度跨度一致,比如A漸變明度跨度為+20,那麼漸變B的明度跨度就不要+40。但是也不必死板,因為色彩是微妙感性的。比如下圖三種顏色的漸變明度跨度都是20,但藍色漸變就顯得過渡小,綠色紅色漸變顯得過渡大。所以,不必太過於遵循數理邏輯,但嚴謹的色彩體系一定是要有系統有意識的控制顏色。

小議視覺設計中的漸變

3,我們常說要用“高階灰!高階灰!“灰色的漸變其實很難把控,用的好則會使你的介面更有檔次,更統一高雅,用的不好則會讓介面顯得髒而灰,無閃光亮點。下圖灰色的徑向漸變有很好的視線聚焦效果。為了打破大面積灰色帶來的沉悶,在hover狀態下的展示效果變成彩色,這種互動效果其實可以用在很多圖片展示上。http://www.czk.fr/

小議視覺設計中的漸變

4,  漸變應該與整個介面氣質保持一致,如果整個頁面走平實路線,那麼就要統一到底,不要突然無厘頭的冒出一種玻璃質感。如果整個頁面走小清新風格,就不要突然來一筆濃墨重彩的質感漸變。

5,利用漸變創造深度和立體感。我們要學會控制好漸變的位置。在 ps中線性漸變或徑向漸變為頁面創造了獨特的氣氛,比如藍色漸變模擬藍天、海洋等。比如下圖用漸變營造的晚霞效果。http://getcharacters.com/

小議視覺設計中的漸變

6,  最後,我們作圖時,可以用圖層樣式做漸變疊加,這樣可以保證漸變的可編輯性。

寫在最後:

Windows 8的Metro風格向我們證實介面設計可以拋棄漸變,但是當我們處於一片密集的色塊擠壓中,是否又會想念那些溫柔的漸變,滋潤你的雙眼呢?Last but not least,好的形式需要依附好的功能,漸變僅僅是視覺表現的一種手段,為什麼使用漸變,在何處使用漸變才是我們思考的重心~

相關文章