色彩幾乎是所有設計中都至關重要的組成部分，無論是明亮大膽的配色方案，還是簡約的黑白色調，你的用色將會直接影響整個設計的實際效果。

近兩年，在色彩運用上有許多值得一提的手法，其中最有意思也最常見的應該就是色彩疊加。使用半透明的色塊（純色或者漸變）疊加到圖片或者視頻上，這種效果能夠強化圖片本身的氛圍，賦予含義，并且更好地吸引用戶的注意力。

今天我們來深入聊聊這種色彩使用技巧在實際運用中，需要注意的問題和值得探究的做法。

使用漸變

首先，漸變作為一種設計趨勢，再次回歸了。當你想為特定的元素疊加色彩的時候，可以嘗試使用某個醒目的漸變色疊加上去。

漸變色的好處在于，你可以使用多種不同的色彩一起構成漸變（比如品牌色），也可以使用某一個色彩進行深淺、明度、飽和度上的漸變，這樣的設計會顯得更加集中。明亮的配色方案會更加吸引用戶用戶，讓圖片呈現出某種獨特的氣場。

這種設計趨勢很大程度上是Spotify 起的頭，他們在播放列表中使用了迷幻味十足的雙色漸變效果，讓唱片封面和藝術家頭像變得更加富于藝術韻味。

搞定這樣的設計非常簡單：

·選取一張照片
·使用品牌色創建漸變色彩疊加
·完成！

使用純色定基調

純色的疊加效果其實和漸變一樣醒目，不過純色相比于漸變所呈現的意義和氛圍會更加明確。比如，在圖片上疊加上棕色能夠呈現出一種歷史的厚重感。

如果你選擇當前的流行色，功用和效果也是類似的。使用這些明亮、鮮艷的流行色的同時，結合扁平化設計或者Material Design的設計風，你的頁面和UI會明顯地呈現出一種現代主義和時尚的感覺。

當你在疊加純色的時候，應當仔細考慮一下色彩的飽和度和透明度。這些因素其實都是有意義的。疊加的色彩圖層擁有高飽和度和低透明度的時候，用戶會更多關注色彩本身；當疊加的色彩擁有低飽和度和高透明度的時候，用戶會更容易被底層的圖像所吸引。

考慮明暗

當然，許多色彩并不全都是靠有色半透明圖層疊加出來的，有時候僅僅是使用單純的黑白灰來疊加，創造出不同的明暗效果，這樣也能很好的實現一些效果。

正如你所想，當圖像更加沉郁陰暗的時候，壓抑沉重的氛圍自然而然就出現了，而圖像偏白色彩變淺的時候，往往會顯得更加輕松，或者說更加飄忽。這個時候，并不需要單獨疊加黑色或者白色，只需要調整圖片本身的明度即可。

上面所顯示的這個名為 Call me lsh 的網站中，設計師在背景上覆蓋了一層半透明的白色，讓用戶的專注點集中到前景的文字上去，但是背景的攝影師微笑的表情依然潛移默化地影響著用戶的情緒。色彩和圖片的組合讓訪客不知不覺地同背景的攝影師產生了情緒上的互動，也許很快會打動他們雇傭這名攝影師也說不定。

選擇高對比度的圖片

當你想要在設計項目中使用色彩疊加這種技法的時候，置于底層的圖片或者視頻是最重要的組成部分。一張平庸的圖片不管你怎么疊加色彩都很難達到驚艷的效果，而圖片本身如果有著良好的對比度，那么能夠在疊加圖片之后構成漂亮的明暗效果，將設計的優勢最大化。

當然，如果圖片的可選范圍本身就不大，那么最好嘗試使用PS之類的軟件先提升圖片的對比度，否則實際效果是不會太好的。

想要達成好效果的方法有很多，另外一種方法就更加簡單粗暴了：從黑白的圖片開始著手。對于初學者而言，黑白圖片的對比度更容易控制。上面的Just Actions 這個網站就是采用黑白色調的突破背景，搭配彩色的半透明圖層。

要么自然，要么失真

當你開始使用色彩疊加到圖片和視頻上的時候，有兩種處理方法：

·圖片盡可能自然。色彩、明暗、陰影都應該處于自然的狀態，疊加的色彩應當盡可能微妙，比如上面那個Abednego Coffee 網站。
·圖片完全異化。用完全出乎意料的色彩疊加在圖片上，創造出獨一無二的效果。本文中絕大多數的案例都是這么做的。

介于兩者之間的案例很少，可以說這兩者是完全對立的。這么設計的好處在于，用戶會更加專注于網站內容，強化整體的設計感。

嘗試部分疊加

前面絕大多數的案例都將半透明的色彩圖層疊加到大塊的圖片內容上，但是這并不是唯一的選擇。部分疊加同樣可以帶來不錯的效果。

Knot Clothing 這個網頁采用了綠色的導航欄，其上疊加了半透明層，看起來效果相當不錯。

而Nuts and Woods 這個網站則換了一種玩法，當光標懸停在特定的內容區塊上的時候，半透明層就疊加到上面，提示用戶這些內容是可點擊的。這個半透明的疊加層作為視覺線索而存在，提供內容瀏覽的路徑。

結語

色彩疊加的效果并不是萬能的，至少不是所有的項目都適合使用的一項效果，所以當你在進行設計的時候，應當盡量避免過度使用。

【Nick Babich 的用戶體驗設計經驗之談】

1. 輸入框設計：《講真，你真的懂得文本輸入框設計的那些潛規則么？》
2. 表單設計：《摳細節！設計高效好用表單的10個技巧》
3. 極簡APP UI：《超贊！幫你打造極簡風APP UI 的實用設計技巧》
4. 前端開發：《有法可依！幫你衡量一個動效是否合格的六個核心因素》
5. 面包屑：《并不簡單！網頁中為你指路的面包屑到底應當怎么使用？》
6. 移動端頁面：《跟著建議走！這樣的移動端網站設計才對頭》

原文地址：designshack
原文作者：CARRIE COUSINS
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com