色彩幾乎在所有的設計工作中都是很重要的一項內容，無論你喜歡鮮亮的色彩，大膽的色調亦或是極簡抽象的黑白配色，你所使用色彩都會對整體設計的風格產生一定的影響。

在我們的設計工作中通常用到的一個方法就是色彩疊加，例如在一張圖片或一個視頻上面疊加一個半透明的圖層，這種方式會給圖片增添一份特別的韻味，不僅能牢牢地抓住用戶的眼球，而且還能給用戶留下無限的想象空間。

今天我們通過幾組不同的案例來揭密色彩疊加是如何發揮作用的，希望能夠拋磚引玉，為你們的設計工作帶來靈感。

使用漸變色

漸變色是非常酷的，當你考慮使用色彩疊加的時候漸變色是個不錯的選擇，它不僅具有強烈的視覺沖擊力，而且對用戶來說是非常具有吸引力的。

漸變色的特別之處在于我們可以使用一組顏色進行搭配，即可以加入品牌色，也可以使用一種能夠使用戶聚焦的色彩，明亮的配色不僅能夠吸引用戶并且給會圖片帶來一種熱情的感覺。

這種風格我們自然會想到Spotify(Spotify是全球最大的正版流媒體音樂服務平臺，2008年10月在瑞典首都斯德哥爾摩正式上線)，它使用同色系的漸變突出顯示播放列表。這種方式賦予了圖片新的生命力并且得到了用戶的喜愛。

這是一個很容易學習并融會貫通的技巧。選擇一張圖片,使用品牌色疊加到圖片上，調整色彩的透明度即可。

純色決定圖片基調

純色同樣具有引人注目的效果，而且純色能夠傳遞出更加鮮明的色彩情感，例如，在圖片上疊加深褐色圖層，立刻就會有一種古樸的歲月感。

同樣的為了傳遞出時尚現代的感覺，我們可以使用鮮亮的、飽和度高的色彩。這種簡約明快的色彩會給人以現代感和時尚感。

當我們使用一種色彩的時候，就要考慮它的飽和度和透明度，因為這些參數的大小直接會影響到整體的基調。透明度和飽和度低的重色調，會使用戶把更多的精力聚焦在顏色圖層本身;而透明度和飽和度高的色調，則會把用戶的吸引力全部聚焦在圖片之上。

考慮黑白色調

你也不必只考慮使用有彩色來做疊加圖層，有時候我們可以考慮使用黑白灰色調，使用這種經典的配色可以改變一個項目的基調和氣質。

我們的經驗告訴自己，暗色調會營造一種憂郁的情緒，淡色調會有種歡快的感覺。而影響這種感覺的除了色彩之外就是圖片本身。圖片是如何跟色彩發生化學反應的呢?還是圖片、色彩和文字信息互相作用的呢?

Call me Ish(上圖所示)的黑白圖片上覆蓋了一層白色透明遮罩，這就使用戶的所有注意力都集中到了遮罩上黑色的標題，但是需要注意圖片人物的表情：他咧嘴微笑，自然的色調融合好像在向你邀約合作拍照一般，并且我們也極有可能在這種感覺下與他合作。

選擇高對比度的圖片

當我們在工作中考慮使用這種方式的時候，圖片(視頻)的內容構成也是很重要的。如果想要營造出柔和的感覺，那么就要選擇一副清新的圖片搭配一種溫和的色彩;相反的，如果你開始使用的圖片的內容是色調明暗對比強烈的畫面，那么根據以上技巧同樣也可以簡單的獲得不錯的結果。

如果你的圖片內容并沒有明顯的對比，那么你就要考慮使用軟件進行圖片合成了，否則，輸出的結果是不會很理想的。

另一個能達到相同效果的方法就是使用黑白照片，這個方法對新手來說很容易上手，因為它能夠更加容易的區分和提升整體的色調對比。Just Actions就很好的展現出黑白圖片與彩色遮罩圖片搭配所碰撞出的強烈對比。

圖片應該看起然很自然

工作中如涉及到色彩疊有兩條建議送給大家：

圖片應該是很自然的，不論是色彩還是光影關系都應該符合客觀邏輯。在Abednego Coffee(上圖所示)頁面中，色彩疊加的圖層有些微妙。

圖片看起來完全強了主題的風頭，色彩遮罩似乎并沒有起到削弱圖片對比度的作用。

這些規則并沒有中間的立場，如果圖片并不具備被一定的對比度，那么設計者在挑選圖片的時候可能會比較困難，并且無論如何搭配色彩遮罩，用戶都不會把注意力完全集中到網站內容的主題上。

突出重點

前面的案例詮釋了大圖如何搭配色彩疊加，以上兩個案例展示了達到這種效果的不同方法。

Knot Clothing(上圖一)使用了明度比較高的綠色背景導航，并且通過頂部的純色疊加進一步突出了導航。這種效果使得網站在色彩比較多的時候更好地維護了品牌色彩的主體性。而且具有一定透明度的柔和感比用純色的色彩做背景給人的感覺更加的親和，具有人情味。

Nuts and Woods則采用了另外一種方法，當用戶鼠標滑過圖片的時候會有一個顏色遮罩來告訴你這個項目的相關信息，并且這個紅色遮罩是詳情頁的入口，點擊后可查看跟多的信息，這個方式在我們的設計工作中應用的比較廣泛。

總結

色彩疊加僅僅是眾多色彩應用技巧中的一種，它也并不是每個項目都適用。它看似簡單，其實需要我們在工作中融會貫通，靈活使用。

對于任何的設計技巧而言，都有它適用的范圍。我們應該在實際項目中，了解清楚需求及相關內容后在進行視覺風格的構思。今天只為拋磚引玉，希望能給大家帶來幫助。