文章主要介紹了一個(gè)可以讓你進(jìn)階成為“設(shè)計(jì)萬(wàn)花筒”的技能手法——色彩疊加。

在看球賽時(shí)，某個(gè)選手眼花繚亂的進(jìn)攻方式，會(huì)被我們稱呼為“進(jìn)攻萬(wàn)花筒”；一個(gè)寫手變化莫測(cè)的寫作手法，我們又稱之為“寫作萬(wàn)花筒”……

今天我們就介紹一個(gè)可以讓你進(jìn)階成為“設(shè)計(jì)萬(wàn)花筒”的技能手法——色彩疊加。

何謂色彩疊加，就是使用半透明的色塊（純色或者漸變）疊加到圖片或者視頻上，這種效果能夠強(qiáng)化圖片本身的氛圍，賦予含義，并且更好地吸引用戶的注意力。

我們直接深入聊聊這種色彩使用技巧在實(shí)際運(yùn)用中，需要注意的問(wèn)題和值得探究的做法。

1.使用漸變

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

漸變色的好處在于，你可以使用多種不同的色彩一起構(gòu)成漸變（比如品牌色），也可以使用某一個(gè)色彩進(jìn)行深淺、明度、飽和度上的漸變，這樣的設(shè)計(jì)會(huì)顯得更加集中。明亮的配色方案會(huì)更加吸引用戶用戶，讓圖片呈現(xiàn)出某種獨(dú)特的氣場(chǎng)。

2.使用純色定基調(diào)

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

當(dāng)你在疊加純色的時(shí)候，應(yīng)當(dāng)仔細(xì)考慮一下色彩的飽和度和透明度。這些因素其實(shí)都是有意義的。

疊加的色彩圖層擁有高飽和度和低透明度的時(shí)候，用戶會(huì)更多關(guān)注色彩本身；當(dāng)疊加的色彩擁有低飽和度和高透明度的時(shí)候，用戶會(huì)更容易被底層的圖像所吸引。

3.考慮明暗

當(dāng)然，許多色彩并不全都是靠有色半透明圖層疊加出來(lái)的，有時(shí)候僅僅是使用單純的黑白灰來(lái)疊加，創(chuàng)造出不同的明暗效果，這樣也能很好的實(shí)現(xiàn)一些效果。

上面所顯示的這個(gè)名為“?Call me lsh?”的網(wǎng)站中，設(shè)計(jì)師在背景上覆蓋了一層半透明的白色，讓用戶的專注點(diǎn)集中到前景的文字上去，但是背景的攝影師微笑的表情依然潛移默化地影響著用戶的情緒。

色彩和圖片的組合讓訪客不知不覺(jué)地同背景的攝影師產(chǎn)生了情緒上的互動(dòng)，也許一份報(bào)酬豐厚的工作正悄悄來(lái)到。

4.選擇高對(duì)比度的圖片

當(dāng)你想要在設(shè)計(jì)項(xiàng)目中使用色彩疊加這種技法的時(shí)候，置于底層的圖片或者視頻是最重要的組成部分。

一張平庸的圖片不管你怎么疊加色彩都很難達(dá)到驚艷的效果，而圖片本身如果有著良好的對(duì)比度，那么能夠在疊加圖片之后構(gòu)成漂亮的明暗效果，將設(shè)計(jì)的優(yōu)勢(shì)最大化。

當(dāng)然，如果圖片的可選范圍本身就不大，那么最好嘗試使用PhotoShop之類的軟件先提升圖片的對(duì)比度，否則實(shí)際效果可能達(dá)不到你預(yù)期的目標(biāo)。

想要達(dá)成好效果的方法有很多，還有一種方法就更加簡(jiǎn)單粗暴了：從黑白的圖片開(kāi)始著手。對(duì)于初學(xué)者而言，黑白圖片的對(duì)比度更容易控制。你可以嘗試采用黑白色調(diào)的突破背景，搭配彩色的半透明圖層。

當(dāng)你使用色彩疊加到圖片和視頻上的時(shí)候，有兩種處理方法：

• A. 圖片盡可能自然。色彩、明暗、陰影都應(yīng)該處于自然的狀態(tài)，疊加的色彩應(yīng)當(dāng)盡可能微妙；
• B. 用完全出乎意料的色彩疊加在圖片上，創(chuàng)造出獨(dú)一無(wú)二的效果。

這么設(shè)計(jì)的好處在于用戶會(huì)更加專注于網(wǎng)站內(nèi)容，強(qiáng)化整體的設(shè)計(jì)感。

5.嘗試部分疊加

我們?cè)谇懊娴睦又?，大多?shù)的案例是都將半透明的色彩圖層疊加到大塊的圖片內(nèi)容上，當(dāng)然這并不是唯一的選擇。采用部分疊加的方法，同樣也可以帶來(lái)不錯(cuò)的效果。

Knot Clothing?這個(gè)網(wǎng)頁(yè)采用了綠色的導(dǎo)航欄，其在網(wǎng)站頭部疊加了半透明層，看起來(lái)效果相當(dāng)不錯(cuò)吧。

而Nuts and Woods?這個(gè)網(wǎng)站則換了一種玩法，把疊加效果使用在網(wǎng)站的hover效果上，其實(shí)這種手法在國(guó)內(nèi)已經(jīng)被大量運(yùn)營(yíng)了，這不僅提示用戶這些內(nèi)容是可點(diǎn)擊的，而且還豐富了網(wǎng)站的互動(dòng)趣味性。

結(jié)語(yǔ)

又要說(shuō)那句話了，世界萬(wàn)事萬(wàn)物都是相對(duì)的，我們這里所說(shuō)的色彩疊加的效果并不是萬(wàn)能的，所以不是所有的項(xiàng)目都適合使用的一項(xiàng)效果，當(dāng)你在進(jìn)行設(shè)計(jì)的時(shí)候，應(yīng)當(dāng)盡量避免過(guò)度使用。

記住，這只是進(jìn)階成為“設(shè)計(jì)萬(wàn)花筒”路上的的一種微技能和小方式。

本文由 @翠鳥(niǎo)H5 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議