什么是色彩疊加？

 色彩疊加特點一：鄰近/互補色搭配 

在色相環上采用鄰近色搭配，顏色多以明亮的高飽和度為主，使得頁面更具時尚活潑感。

混合質感圖標中的運用

通過簡單的幾何圖形，主要是圓形、正方形、三角形等；加上混合模式的質感，給人一種高級感。加上透明度、疊加的光影，簡單的幾何圖形背景呈現出空間感。圖片上通過運用一個單色漸變，搭配方形的重復色彩疊加，給我的視覺感受是有層次的、立體的空間感。

很多變化豐富的設計都是通過簡單的幾何圖形處理的，簡單的幾何圖形也可以作為設計的抓手，在暗色背景上，通過幾何圖形的放大，搭配時尚的混合漸變，這樣的效果很有科技感、洋氣。

這樣的幾何圖形我們在設計網站上經常可以看到，通過重復幾何圖形的組合加上混合模式的疊加，在設計上別具一格。同時讓我們的設計多一種表現手法也增加我們的行業競爭力。

通過鄰近色/互補色搭配，運用幾何圖形作為背景裝飾，這樣的配色與布局會讓設計很出彩，并且活潑舒適平和。這樣的設計對色彩的搭配要求較高，我們可以通過配色網站進行多種組合搭配練習。

示例是菜鳥的首頁，在 banner 入口它運用了色彩疊加的設計手法，同時金剛區的圖標也是運用了色彩疊加的樣式，整體給人一種年輕、時尚的感受。色彩疊加還可以運用在引導頁、閃屏頁面。通過疊加、柔和的過渡，整體呈現的視覺效果還是很時尚、符合主流的設計趨勢。

 

色彩疊加在icon上的運用 

明亮的顏色搭配混合模式和不透明度，出現出另外一種效果。

色彩疊加運用在icon上居多，飽和度高的色彩加上不透明度的疊加，整體的視覺效果都偏年輕、時尚，如果你的產品是面向年輕的用戶，這樣的設計手法你可以考慮運用上哦！

Apple 的今年官方宣傳采用簡單的正方形搭配明亮的色彩，加上不透明度、混合模式的運用，達到不一樣的視覺效果。google 家的品牌升級，我們也看到了最新的趨勢，運用 google 經典的顏色，搭配混合模式的漸變，同時具有品牌識別性。

 

色彩疊加-設計小教程 

1.選擇深色的顏色（#0A00BC），畫一個圓角，填充藍色漸變背景。

2.畫一個圓，填充紅色的漸變，模式選擇提亮的效果，剪貼蒙板在圓角背景上。

3.畫第二個大圓，填充紅色的漸變，模式選擇提亮，透明度調到70%，剪貼蒙板在圓角背景上。

4.畫第三個圓，填充紅色-黃色的漸變，模式選擇正常，透明度調到85%，剪貼蒙板在圓角背景上

5.畫第四個圓，填充藍色的漸變，模式選擇提亮，透明度調到90%（可以自己試著調整），剪貼蒙板在圓角背景上。6.我們看到示例圖交叉處是黃色漸變，把第三個和四個圓進行復制，選擇交集，生成一個交叉的圖形，把這個交叉的圖形改為黃色漸變，模式改為加暗。

7.最后一步，右下角的高亮，通過藍色徑向漸變，調整到我們滿意的效果即可，模式選擇變亮，透明度90%。

8.加上文字效果，這個圖標就完成了，是不是很簡單，通過不同模式的疊加，出現不同的效果，你也快點試一下吧！

 

最后