寫在前面

我們常常會(huì)說(shuō)到做設(shè)計(jì)需要知道三大構(gòu)成(色彩構(gòu)成/平面構(gòu)成/立體構(gòu)成)，設(shè)計(jì)又可以分很多個(gè)類別，比如網(wǎng)頁(yè)設(shè)計(jì)/UI設(shè)計(jì)/電商設(shè)計(jì)/室內(nèi)設(shè)計(jì)/工業(yè)設(shè)計(jì)等等，那對(duì)于電商設(shè)計(jì)有沒(méi)有專門的三大構(gòu)成呢?至今好像沒(méi)有看到，所以我想嘗試著梳理一下我腦袋里的知識(shí)點(diǎn)，專門講解一下三大構(gòu)成在電商設(shè)計(jì)中的運(yùn)用，而今天我先從色彩在電商設(shè)計(jì)中的運(yùn)用開(kāi)始說(shuō)起。

內(nèi)容比較多，所以我先給大家列一個(gè)大綱：

一、先了解普遍意義上的色彩是指什么?

二、再回顧一下Banner的組成要素有哪些?

三、Banner的作用是什么?

四、在Banner設(shè)計(jì)中影響到信息傳達(dá)的有哪些因素呢?

五、色彩在Banner設(shè)計(jì)中所起到的作用

六、如何在Banner設(shè)計(jì)中使用色彩

列完大綱后，接下來(lái)我們進(jìn)入正題，一個(gè)一個(gè)知識(shí)點(diǎn)去剖析：

一、先了解普遍意義上的色彩是指什么?

(我講這些理論的時(shí)候大家別睡著了，答應(yīng)我，因?yàn)楹竺鏁?huì)越來(lái)越精彩～～)

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，色彩即顏色，顏色可以分成有彩色和五彩色兩大類，看有彩色主要看色相/純度/明度三個(gè)方面的屬性，無(wú)彩色也就是白色/黑色/各種深淺不同的灰色，也可以說(shuō)無(wú)彩色是飽和度為零色彩。

色相，即可以明確表示顏色色別的名稱，比如紅橙黃綠藍(lán)靛紫：

色彩有冷暖之分，我大致用溫度的概念標(biāo)注一下，其中“0”是指中性色，“-0”是指中性偏冷，“+0”是指中性偏暖(這里的溫度是我自己為了具體化冷暖的概念而標(biāo)記的，主要是方便大家理解，所以不用去糾結(jié)這個(gè)數(shù)值準(zhǔn)不準(zhǔn)確哈哈，你明白他們代表很冷/很熱/一般冷/一般熱就好了!～)

明度，就是指色彩的明亮程度(通俗點(diǎn)講，在某種色彩里添加的白色越多就越明亮，添加的黑色越多就越暗)。

純度(飽和度)，就是指色彩的純凈度，以紅色舉例：

接下來(lái)我掐指一算，要想做好電商設(shè)計(jì)，最基礎(chǔ)學(xué)問(wèn)大的當(dāng)屬Banner設(shè)計(jì)了，所以我們還是從Banner設(shè)計(jì)開(kāi)始說(shuō)起，先回顧一下Banner是由哪些部分組成的。

二、再回顧一下Banner的組成要素有哪些?

Banner組成要素包含4個(gè)方面：文案 、商品/模特、背景、點(diǎn)綴物

三、Banner的作用作用是什么?

宣傳/展示/廣而告之/準(zhǔn)確傳達(dá)信息

四、那么在Banner設(shè)計(jì)中影響到信息傳達(dá)的有哪些因素呢?

1/整體畫面的氣質(zhì)是否對(duì)路

2/信息之間的層級(jí)關(guān)系是否準(zhǔn)確

3/是否考量了Banner所投放的環(huán)境

接下來(lái)，我們針對(duì)上面3個(gè)因素一個(gè)一個(gè)來(lái)講解：

1/整體的畫面氣質(zhì)是否對(duì)路

這里指的畫面氣質(zhì)就是指給人傳遞出一種什么樣的感覺(jué)，比如說(shuō)用戶看了你這個(gè)Banner之后會(huì)感覺(jué)它很熱鬧/很素雅/很高冷/很年輕有活力/很潮/很壓抑/很恐怖/很高貴等等這些感覺(jué)，那么下面我舉幾個(gè)例子：

Banner舉例：很熱鬧的畫面氣質(zhì)(關(guān)鍵詞：低價(jià)促銷/周年慶/節(jié)假日促銷等搞活動(dòng)的性質(zhì))

大家可能注意到上面兩個(gè)Banner看起來(lái)非常熱鬧喜慶，是比較常規(guī)的熱鬧促銷Banner，除了各種元素形式的動(dòng)力感給畫面增加了熱鬧感覺(jué)意外，最重要的事大面積的暖色給人熱血沸騰的感覺(jué)。

我們舉個(gè)例子，將這些Banner改變色相，得到下面2張圖：

總結(jié)觀察：畫面由暖色變?yōu)槔渖螅瑫?huì)發(fā)現(xiàn)熱鬧的畫面氣質(zhì)銳減，所以在表現(xiàn)熱鬧氣質(zhì)的Banner設(shè)計(jì)中，除了畫面形式比較活潑或者動(dòng)感以外，我們也常借助大面積的暖色(紅/橙及附近區(qū)域)來(lái)渲染熱鬧氛圍，讓人感覺(jué)喜慶或者熱血沸騰，然后控制不住就買買買～

Banner 舉例：很素雅 (關(guān)鍵詞：森女系/棉麻類/文藝類/性冷淡風(fēng))

除了大面積留白給人素雅的感覺(jué)外，畫面里的顏色都是是比較安靜干凈的灰色調(diào)，給人舒適素雅無(wú)欲無(wú)求的感覺(jué)，使人感到舒心：

假如我給它調(diào)整飽和度，使之更加艷麗：

觀察總結(jié)：大家感覺(jué)有什么變化沒(méi)?是不是感覺(jué)變年輕活力了?不是那么沉穩(wěn)和素雅了?仿佛一個(gè)平和的35歲女人立馬變成了20歲小姑娘～

下面是幾種常見(jiàn)的素雅的/森女系/文藝范色調(diào)舉例：

Banner舉例：很高冷 (關(guān)鍵詞：新品發(fā)布/國(guó)際大牌以及一切渴望表現(xiàn)自己性冷淡和極力想要裝B高冷一回的畫面。)

畫面中除去大面積留白以外，色彩上也是比較偏向于灰色調(diào)，且基本不會(huì)出現(xiàn)飽和度非常高或者非常跳躍的顏色，淺灰色調(diào)同色系用色居多。

大家可以提取顏色看下：

Banner舉例： 年輕活力(關(guān)鍵詞：夏季主題/開(kāi)學(xué)主題/校園主題/針對(duì)潮流小年輕的促銷活動(dòng)等等)

色彩豐富多樣，飽和度偏高，用色大膽，在這里，我們就不怕您用色超過(guò)3個(gè)色，只要你敢用想用，多少色都可以(迷之微笑～)。

大家可以提取顏色看下，其中天藍(lán)色是主色調(diào)，用大面積的冷色加上少量的暗色調(diào)作點(diǎn)綴，同時(shí)保持各個(gè)元素?cái)[放方向有秩序不雜亂，才能兼容得下這么多種顏色而使得整個(gè)畫面看起來(lái)不膩歪：

Banner舉例：很潮 (關(guān)鍵詞：潮牌主題/動(dòng)漫主題/街頭hip-hop主題/年輕愛(ài)玩/放蕩不羈愛(ài)自由主題等等)

在這種類型氣質(zhì)的Banner設(shè)計(jì)中，除去一些小圖形設(shè)計(jì)使畫面看起來(lái)比較有設(shè)計(jì)感以外，很重要的一點(diǎn)就是善用大面積的明亮高純度色彩搭配黑色使用，之所以這樣的目的我猜想是因?yàn)檫@種潮牌針對(duì)的是比較年輕但又追求一點(diǎn)特立獨(dú)行或者耍酷感覺(jué)的一個(gè)群體，如果全是一些明亮色彩會(huì)給人感覺(jué)比較幼稚和低齡化，加點(diǎn)黑色后就立馬打破了這種印象，仿佛年輕可愛(ài)中又帶了一點(diǎn)?？崤c放蕩不羈愛(ài)自由的味道，所謂混搭咯，可以去了解一下街頭文化，哈哈哈～

大家可以提取顏色看下：

Banner舉例：華麗 (關(guān)鍵詞：上流社會(huì)/歐式/浮夸主題/位高權(quán)重/頒獎(jiǎng)典禮/比較隆重的發(fā)布會(huì)等)

體現(xiàn)華麗高貴主要就是黑色與金色/銀色等金光閃閃的顏色以及與暗色系顏色的搭配(因?yàn)榘瞪到o人感覺(jué)沉穩(wěn)冷靜成熟的感覺(jué)，同時(shí)為了不那么沉悶，畫面中又會(huì)帶點(diǎn)高光或金光閃閃的感覺(jué)顏色搭配)。

大家可以提取顏色看下：

注意事項(xiàng)：這種Banner氣質(zhì)的畫面千萬(wàn)不要把畫面堆得太滿，一定要記得留白和搭配優(yōu)雅纖細(xì)些的文字(有襯線或者無(wú)襯線字體均可)，或者比較有文化底蘊(yùn)的毛筆字，千萬(wàn)不要用五大三粗的文字或者把畫面塞得滿滿的，為什么要注意這個(gè)?你們想象一下豐腴肥臀的一些滿身穿金戴銀的暴發(fā)戶風(fēng)格就知道了，自行想象一下畫面，我就不配圖了(迷之微笑～)

2/信息的層級(jí)關(guān)系

我們知道一個(gè)Banner包含有好幾個(gè)部分，文案/模特或商品/背景/點(diǎn)綴物，而最終他們組合成為一個(gè)Banner，其層級(jí)是存在主次之分的，可以分為下面幾種情況：

(一)以產(chǎn)品或模特為主角(主要突出產(chǎn)品或模特)

(二)以活動(dòng)標(biāo)題為主角

(三)以利益點(diǎn)為主角

而背景和點(diǎn)綴物永遠(yuǎn)不可能是主角，他們只能是配角，同時(shí)在這里顏色不是一個(gè)獨(dú)立的分析要素存在，它應(yīng)該是伴隨著平面的知識(shí)點(diǎn)來(lái)說(shuō)，所以這里我也會(huì)順帶一點(diǎn)平面方面的知識(shí)點(diǎn)，舉幾個(gè)例子：

(一)以產(chǎn)品或模特為主角(主要突出產(chǎn)品或模特 )，我們有三個(gè)方向可以去發(fā)揮：

(1)讓商品(模特)的顏色與背景顏色絕對(duì)地區(qū)分開(kāi)來(lái)，讓它成為天空(畫面)中最閃亮的一顆星～也就是我們說(shuō)的色彩對(duì)比，色彩對(duì)比又包含三種：明度對(duì)比/飽和度對(duì)比/色相對(duì)比，假設(shè)下圖中的圓就是商品或模特，舉個(gè)例子：

我們?cè)偃ド匆幌聦?duì)比的效果，如下圖(去色是我們常用的一種查看信息是否突出的方法，令外還有一種距離觀察法查看對(duì)比效果，比如你也可以離屏幕站遠(yuǎn)一點(diǎn)查看，或者人保持不動(dòng)縮小畫布查看)：

這樣看，哪個(gè)對(duì)比效果好些?是不是一目了然了?不過(guò)還是要說(shuō)明一點(diǎn)，明度飽和度里任何一項(xiàng)要素發(fā)生改變，其他要素也是跟著改變的，比如說(shuō)你增加了一個(gè)顏色的明度，代表你在這個(gè)顏色里增加了白色，那么相對(duì)應(yīng)的這個(gè)顏色的純度飽和度肯定也就下降了，不知道我說(shuō)這些你們明白了沒(méi)有?(默默點(diǎn)根煙～惆悵臉～)

喔對(duì)了，我還要在這里繼續(xù)插一句嘴：色彩對(duì)比不會(huì)單獨(dú)存在，它的運(yùn)用永遠(yuǎn)是依附于下面兩種方式存在的(增大商品模特面積或者增加商品模特?cái)?shù)量)：

(2)通過(guò)留白或者大小對(duì)比的方式讓商品(模特)體積或面積足夠大。

(3)通過(guò)一定的擺放規(guī)律，讓商品(模特)數(shù)量足夠多，因?yàn)閿?shù)量多了總面積自然也就大了嘛～。

(二)以活動(dòng)標(biāo)題為主角

跟上面的道理類似，可以運(yùn)用增大標(biāo)題面積或者同時(shí)結(jié)合色彩對(duì)比的方式使標(biāo)題突出成為主角：

(三)以利益點(diǎn)為主角

道理同上(有時(shí)候我們做Banner會(huì)直接用利益點(diǎn)作為大標(biāo)題，這種就會(huì)使Banner的低價(jià)促銷的氣息會(huì)更濃烈些)

總結(jié)來(lái)說(shuō)，但我們講色彩的時(shí)候，其實(shí)也是在講平面構(gòu)成，當(dāng)我們?cè)谥v色彩三要素(明度/純度/色相)的其中一項(xiàng)的時(shí)候，其實(shí)也意味著在同時(shí)考慮其他要素，因?yàn)樯什粫?huì)單獨(dú)存在，色彩要素也不會(huì)單獨(dú)存在(我重復(fù)這么多遍，也是操碎了心呢～～)。

3/是否考量了Banner所投放的環(huán)境

當(dāng)我們講到環(huán)境的時(shí)候，往往會(huì)講到外部環(huán)境和內(nèi)部環(huán)境，也就是站在全局去考慮問(wèn)題和站在自我的角度去考慮問(wèn)題，如果你是要在某平臺(tái)投放 Banner，那么這個(gè)平臺(tái)對(duì)你來(lái)說(shuō)就是大環(huán)境，具體到你投放的那一小塊Banner位置就是小環(huán)境。

(1)從平臺(tái)設(shè)計(jì)師的角度出發(fā)，她肯定是希望你所有的Banner放在這個(gè)平臺(tái)頁(yè)面里，整體是融合的，不突兀的 ，比如下面的萬(wàn)件好禮免費(fèi)送和專屬活動(dòng)這塊的小Banner，用不同色相表示不同會(huì)場(chǎng)或主題，但是每一個(gè)色彩的明度飽和度是相似的，設(shè)計(jì)形式也一樣都有自己的規(guī)范，這就給人整體統(tǒng)一協(xié)調(diào)的感覺(jué)：

(2)那從商家的角度出發(fā)，商家當(dāng)然是希望 自家的Banner圖是最突出的，最亮眼的，最容易被用戶發(fā)現(xiàn)的，所以設(shè)計(jì)師需要把自家的圖片設(shè)計(jì)得讓人眼前一亮，脫穎而出，這個(gè)又要回到前面如何運(yùn)用對(duì)比去突出某個(gè)信息的問(wèn)題了，不清楚的話可以回頭看看上面那個(gè)關(guān)于信息層級(jí)的知識(shí)點(diǎn)：

比如，上面這些商品圖，我用距離觀察法，第一眼就看到了左下角的這個(gè)巧克力了，為什么呢?因?yàn)橹車膱D片基本是白底或者比較明亮的顏色，而只有他使用了深色背景，明暗對(duì)比之后，一下子就出來(lái)了(你也可以舉一反三去運(yùn)用，get到了嗎?)

其實(shí)無(wú)論是商家/企業(yè)還是個(gè)人，都是需要考慮這種Banner投放的外部環(huán)境和內(nèi)部環(huán)境的，除非你是在平臺(tái)工作的設(shè)計(jì)師，很多時(shí)候我們更多的是需要站在個(gè)人利益的角度去考慮問(wèn)題，我們需要讓自己的圖片更易被人發(fā)現(xiàn)。

所以我們會(huì)看到，某8design的各種培訓(xùn)廣告(我故意模糊了它們，因?yàn)椴幌氪驈V告～)，永遠(yuǎn)都是花花綠綠，爭(zhēng)相斗艷，但殊不知，當(dāng)別人都花花綠綠的時(shí)候，你不用太花枝招展反而更易突出：

所以我們會(huì)想到，設(shè)計(jì)師在發(fā)布自己的設(shè)計(jì)作品到設(shè)計(jì)論壇或網(wǎng)站的時(shí)候，不妨先去看下周圍環(huán)境都是怎么樣的，再去做自己的展示Banner圖，這樣有利于使自己的作品得到更多的展現(xiàn)機(jī)會(huì)，比如下面這個(gè)是我昨天在站酷首頁(yè)截的圖，大家是不是跟我一樣第一眼就會(huì)看到的是那個(gè)玫紅色的Banner圖片?而其他的都只會(huì)匆匆?guī)н^(guò)，因?yàn)樵谶@個(gè)環(huán)境里，玫紅色是最突出的一種顏色(事實(shí)證明，除去dribble這個(gè)詞比較知名以外，玫紅色封面Banner圖的閱讀數(shù)確實(shí)也遠(yuǎn)超其他的作品，你們get到了嘛?)：

五、色彩在Banner設(shè)計(jì)中所起到的作用

1/點(diǎn)綴作用(渲染氛圍用)

2/突出主體(梳理信息層級(jí))

3/平衡畫面(整體視覺(jué)協(xié)調(diào))

4延續(xù)風(fēng)格(涉及到風(fēng)格統(tǒng)一調(diào)性的時(shí)候)

5/塑造畫面氣質(zhì)(傳遞恰當(dāng)?shù)那榫w給用戶)

就以上五種作用，我在下面會(huì)分別舉例說(shuō)明：

1/點(diǎn)綴作用(渲染氛圍用)

當(dāng)你做了一個(gè)冷色調(diào)的頁(yè)面拿給你的主管或需求人看，他說(shuō)畫面太冷清的時(shí)候，而你又懶得改顏色改形式等等，總之你非常懶不想動(dòng)，那么不妨試下下面這樣周圍點(diǎn)綴些暖色的方式(色彩依附的形狀和大小面積你自己斟酌咯～只需要記住點(diǎn)綴物是配角，他是烘托氣氛用的，永遠(yuǎn)不要搶了主角的風(fēng)頭，要不然導(dǎo)演不給你這配角安排角色了，怕不怕?)

當(dāng)你明明做了一個(gè)自認(rèn)為非常熱鬧促銷的頁(yè)面后，你們主管或者需求人仍然覺(jué)得畫面太冷清不夠熱鬧而你又不想大改動(dòng)的時(shí)候怎么辦?道理同上，Give him or her some color to see see(迷之微笑～)。

2/突出主體(梳理信息層級(jí))

這個(gè)通過(guò)色彩對(duì)比來(lái)突出信息層級(jí)的作用其實(shí)我在前面的知識(shí)點(diǎn)里已經(jīng)講了哦，翻回到前面去看下吧，我就不繼續(xù)說(shuō)一遍了。

3/平衡畫面(漸變色使得整體視覺(jué)協(xié)調(diào))

講這個(gè)知識(shí)點(diǎn)的之前，我覺(jué)得又有必要插幾句嘴了，先要了解一下面幾個(gè)概念：

鄰接色相對(duì)比：色相環(huán)上相鄰的二至三色對(duì)比，色相距離大約30度左右，為弱對(duì)比類型

類似色對(duì)比：色相對(duì)比距離約60度左右，為較弱對(duì)比類型

中差色對(duì)比：色相對(duì)比距離約90度左右，為中對(duì)比類型

對(duì)比色對(duì)比：色相對(duì)比距離約120度左右，為強(qiáng)對(duì)比類型

補(bǔ)色對(duì)比：色相對(duì)比距離180度，為極端對(duì)比類型

我們有時(shí)候會(huì)看到一些Banner強(qiáng)調(diào)的是整體畫面的協(xié)調(diào)感覺(jué)，并不會(huì)重點(diǎn)去突出強(qiáng)調(diào)什么，整個(gè)畫面給人感覺(jué)特別舒服，那是因?yàn)樗麄兺捎玫氖穷愃粕珜?duì)比或者鄰近色對(duì)比，亦或者是采用相似明度和飽和度的不同色相的漸變調(diào)和。

Banner舉例(如下圖Banner給人感覺(jué)是整體畫面非常柔美協(xié)調(diào)統(tǒng)一，強(qiáng)調(diào)統(tǒng)一感覺(jué))：

當(dāng)然，以上也可以結(jié)合起來(lái)運(yùn)用(運(yùn)用漸變色+對(duì)比)

4/延續(xù)風(fēng)格(涉及到風(fēng)格統(tǒng)一調(diào)性的時(shí)候)

通過(guò)色彩來(lái)延續(xù)風(fēng)格的作用往往在平臺(tái)做一些比較大型的活動(dòng)，涉及到多個(gè)不同品類不同分會(huì)場(chǎng)的時(shí)候會(huì)運(yùn)用到，我看到一些店鋪電商品牌也慢慢規(guī)范化了之后也會(huì)用到這種方式以保持品牌統(tǒng)一調(diào)性性，也就是保持設(shè)計(jì)風(fēng)格一致，色彩的明度純度接近，只是改變色相，以不同的色相代替不同的品類或者分會(huì)場(chǎng)來(lái)設(shè)計(jì)Banner圖，如下圖所示：

5/塑造畫面氣質(zhì)(傳遞恰當(dāng)?shù)那榫w給用戶)

比如我們前面提到的很活力/很可愛(ài)/很高貴/很素雅等等，我這里也不繼續(xù)描述了哦，文章開(kāi)頭都有提到過(guò)的。

(華麗高貴)

(高冷大牌)

(很潮)

(年輕活力)

(森女系素雅)

(熱鬧促銷)

六、如何在Banner設(shè)計(jì)中使用色彩

色彩不會(huì)獨(dú)立存在，他必定是依附于其它構(gòu)成和表現(xiàn)形式而存在，比如平面構(gòu)成、立體構(gòu)成等，所以我將從下面幾個(gè)方面來(lái)論述：

(1)當(dāng)色彩運(yùn)用在不同的面積

(2)當(dāng)色彩運(yùn)用于不同的形狀

(3)當(dāng)色彩運(yùn)用在不同的肌理

(4)當(dāng)色彩運(yùn)用于不同的色彩

(5)當(dāng)色彩運(yùn)用于不同的主題

(6)當(dāng)色彩運(yùn)用于不同的環(huán)境

因?yàn)槲冶容^喜歡紅色(一個(gè)非常熱烈的顏色，跟我的內(nèi)心一樣炙熱，跟我的頭像一樣紅火)，所以我就拿紅色來(lái)舉個(gè)栗子吧，其他顏色的運(yùn)用道理是一樣的：

(做設(shè)計(jì)的面條頭像，咳咳～～)

(1)當(dāng)紅色運(yùn)用在不同的面積，他的視覺(jué)感受是很不一樣的，當(dāng)外部背景尺寸不變，紅色區(qū)域面積越大越讓人感覺(jué)眼睛發(fā)脹，仿佛都要跑到你胸(眼)前一樣，這就是近大遠(yuǎn)小的道理咯。

(1/2/3紅色區(qū)域哪個(gè)更吸引你眼球?誰(shuí)更讓你躁動(dòng)不安?)

Banner舉例(看紅色區(qū)域)：

(2)當(dāng)紅色運(yùn)用于不同的形狀，個(gè)形狀讓你感覺(jué)最不穩(wěn)定?哪個(gè)形狀讓你感覺(jué)更活躍?哪個(gè)形狀讓你感覺(jué)更時(shí)尚?

(3最不穩(wěn)定，1最規(guī)矩，5最不規(guī)則，1-9都可以很時(shí)尚，主要在于如何去搭配其他元素)

Banner舉例(看紅色區(qū)域)：

(3)當(dāng)他運(yùn)用于不同的肌理，看下圖所示，紅色色塊疊加肌理后和沒(méi)疊加肌理對(duì)比有什么不同?紅色塊疊加不同肌理后又有什么不同?(任何你能想到的物體都可以疊加視作肌理，比如人/圖片/文字/字母/發(fā)絲/各種形狀/軟硬粗糙或平滑材質(zhì)等等)

(圖6是沒(méi)有疊加任何肌理的紅色，顯得更加平淡，其他紅色塊疊加了肌理后使得畫面更佳豐富，給紅色增加了更多感情色彩，或是活潑或是怪異或是熱鬧等等，只要你能想到的都可以去嘗試)

Banner舉例(看紅色區(qū)域)：

(4)當(dāng)紅色運(yùn)用于不同的色彩 ，大家會(huì)看到相同面積的紅色圓放在不同的色彩上出現(xiàn)了大小不一或明暗不一的錯(cuò)覺(jué)，因?yàn)榧t色是暖色，所以根據(jù)冷暖對(duì)比，紅色放在冷色或中性色 (黃色綠色)上可以比較突出，根據(jù)色相對(duì)比，紅色屬于有彩色，有彩色放在無(wú)彩色(黑白灰)上也可以比較突出，但是紅色放在鄰近色(比如偏冷的紫色和偏暖的橙紅色)上就顯得特別弱，因?yàn)樯嗵咏恕?/p>

Banner舉例(看紅色區(qū)域運(yùn)用在不同顏色的背景上)：

(5)當(dāng)紅色運(yùn)用于不同的環(huán)境，前面我們前面講了，環(huán)境分為外部大環(huán)境和內(nèi)部環(huán)境，有人所站的角度是要保證平臺(tái)上所有Banner顏色整體看和諧統(tǒng)一，雨露均沾，而有的人所站的角度是要保證自己的Banner圖是最突出最吸引眼球的，前者為了和諧統(tǒng)一 ，后者是為了競(jìng)爭(zhēng)為了突出自己 (講到環(huán)境其實(shí)也就是前面幾種情況的綜合講解和考慮，即色彩/形狀/肌理/面積等的結(jié)合使用才構(gòu)成了所謂的環(huán)境)，比如：

當(dāng)紅色色塊放置在純度明度相近的不同色相的色塊里，它是和諧的融入的整體的：

當(dāng)紅色色塊放置在鄰近色色塊里，它跟整體環(huán)境看起來(lái)也是比較和諧統(tǒng)一不突兀的：

當(dāng)同樣是紅色，但是她的形狀/面積大小和其他的不一樣，那么她是會(huì)比較突出的，也就是所謂的特異：

當(dāng)同樣面積的色塊，只有一塊是有彩色紅色，其他都為黑白灰無(wú)彩色，那么在這個(gè)環(huán)境里，那么紅色塊是最突出的：

當(dāng)同樣面積的色塊，只有一塊是暖色紅色，其他都為冷色，那么在這個(gè)環(huán)境里，那么暖色系的紅色塊是最突出的，也就是冷暖對(duì)比：

Banner舉例(看紅色區(qū)域)：

(因?yàn)槊鞫燃兌冉咏脑颍t色Banner在這個(gè)環(huán)境里還算比較融入的，雖然周圍冷色系Banner過(guò)多)

(調(diào)整了飽和度和明度之后，紅色Banner在這個(gè)環(huán)境里變得非常突出，變?yōu)榱酥鹘?

總結(jié)回顧一下上面講的幾點(diǎn)：

一、先了解普遍意義上的色彩是指什么?

二、再回顧一下Banner的組成要素有哪些?

三、Banner的作用作用是什么?

四、在Banner設(shè)計(jì)中影響到信息傳達(dá)的有哪些因素呢?

五、色彩在Banner設(shè)計(jì)中所起到的作用

六、如何在Banner設(shè)計(jì)中使用色彩

以上我就寫到這里了，我們需要知道色彩是一種情緒的表達(dá)，也許要學(xué)會(huì)舉一反三(比如上面我只舉了紅色的例子，其他顏色可以以此類推無(wú)論)，另外無(wú)論是有彩色還是無(wú)彩色它們都不會(huì)獨(dú)立存在，他必定是依附于其它表現(xiàn)形式而存在，比如與平面構(gòu)成、立體構(gòu)成結(jié)合運(yùn)用，下期我們?cè)倮^續(xù)談電商Banner圖設(shè)計(jì)之平面構(gòu)成的奧秘(時(shí)間待定，哈哈～)

網(wǎng)頁(yè)名稱：細(xì)說(shuō)電商BANNER圖設(shè)計(jì)之色彩的奧秘
網(wǎng)頁(yè)路徑：http://m.rwnh.cn/news42/171142.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)