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

漸變作為視覺設計師經常使用的手法之一，幾乎每個設計師在頁面中或多或少都會做一個漸變(絕不夸張。。。)大家都知道漸變是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狀態下的展示效果變成彩色，這種交互效果其實可以用在很多圖 片展示上。

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

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

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

寫在最后：

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

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

網頁標題：網頁漸變背景技巧大揭密
本文地址：http://www.js-pz168.com/news32/312732.html

成都網站建設公司_創新互聯，為您提供域名注冊、網站維護、網站建設、企業網站制作、微信公眾號、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯