第11章　電商Banner設計之色彩的奧秘

我們常常會說做設計需要知道三大構成（色彩構成／平面構成／立體構成），設計又可以分很多類別，比如網頁設計、UI設計、電商設計、室內設計、工業設計等，那對于電商設計有沒有專門的三大構成呢？至少我沒有學過，所以借此章我想專門講解三大構成在電商設計中的運用，我們先從色彩在電商設計中的運用開始講解。

11.1　普遍意義上的色彩是指什么？

色彩：即顏色，顏色可以分成有彩色和無彩色兩大類，看有彩色主要看色相／純度／明度三個方面的屬性，無彩色也就是白色、黑色，各種深淺不同的灰色，也可以說無彩色是飽和度為零的色彩。

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

色彩有冷暖之分，我大致用溫度的概念標注一下，其中“0”是指中性色，“－0”是指中性偏冷，“＋0”是指中性偏暖（這里的溫度是我自己為了具體化冷暖的概念而標記的，主要是方便大家理解，所以不用去糾結這個數值準不準確，你能明白它們代表很冷／很熱、一般冷、一般熱就好了?。?/p>

明度：指色彩的明亮程度（通俗點講，在某種色彩中添加的白色越多就越明亮，添加的黑色越多就越暗）。

純度（飽和度）：指色彩的純凈度，以紅色舉例：

如果大家想了解更加原理性的關于色彩的解說，可以自行去baidu或google喲，在這里大家只需要了解上面幾個知識點就好啦。

我一直以來的理念都是，要想做好電商設計，最基礎的也是最重要的、學問最大的就是Banner設計了，所以我們還是從Banner設計開始說起吧。

11.2　Banner設計中影響信息傳達的因素

Banner的主要作用是為了宣傳，展示，廣而告之，準確傳達某種信息，從而達到某種目的，這個目的有可能是想獲得轉化，也有可能是單純地公布通告信息等。

我們可以從以下三個方面來講解：

11.2.1　整體的畫面氣質是否對路

這里的畫面氣質就是指給人傳遞出一種什么樣的感覺，比如說用戶看了你這個Banner之后，會有一些類似于很熱鬧、很素雅、很高冷、很年輕有活力、很潮、很壓抑、很恐怖、很高貴等等的這樣一些感覺，接下來舉幾個例子。

Banner舉例：很熱鬧的畫面氣質（關鍵詞：低價促銷／周年慶／節假日促銷等搞活動的性質），如左下圖所示。

大家可能注意到上圖看起來非常熱鬧喜慶，是比較常規的熱鬧促銷Banner，除了各種元素形式的動力感給畫面增加了熱鬧感覺以外，最重要的是大面積的暖色給人熱血沸騰的感覺。

假如我們將這些Banner改變色相，得到右下圖。

總結觀察：畫面由暖色變為冷色后，會發現熱鬧的畫面氣質銳減，所以在表現熱鬧氣質的Banner設計中，除了畫面形式比較活潑或者動感以外，我們也常借助大面積的暖色（紅、橙及附近區域）來渲染熱鬧氛圍，讓人感覺喜慶或者熱血沸騰，然后控制不住就買買買!

Banner舉例：很素雅（關鍵詞：森女系、棉麻類、文藝類、性冷淡風）。

除了大面積留白給人素雅的感覺外，畫面中的顏色都是比較安靜干凈的灰色調，給人舒適素雅無欲無求的感覺，使人感到舒心，如左下圖所示。假如我給它調整飽和度，使之更加艷麗，如右下圖所示。

觀察總結：大家感覺有什么變化沒？是不是感覺變年輕活力了？不是那么沉穩和素雅了？仿佛一個平和的35歲女人立馬變成了鋒芒畢露的20歲小姑娘。

下面是幾種常見的素雅的／森女系／文藝范色調舉例。

Banner舉例：很高冷（關鍵詞：新品發布、國際大牌以及一切渴望表現自己性冷淡和極力想要高冷一回的畫面）。

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

大家可以提取顏色看一下：

Banner舉例：年輕活力（關鍵詞：夏季主題／開學主題／校園主題／針對潮流小年輕的促銷活動等等）。

色彩豐富多樣，飽和度偏高，用色大膽，在這里，我們就不怕用色超過3個色，只要敢用、想用，多少色都可以。

大家可以提取顏色看一下:

其中橙黃色是主色調，用適量的冷色加上少量的暗色調作點綴，同時保持各個元素擺放方向有秩序不雜亂，才能兼容得下這么多種顏色而使得整個畫面看起來不膩歪。

Banner舉例：很潮（關鍵詞：潮牌主題／動漫主題／街頭hip-hop主題／年輕愛玩／放蕩不羈愛自由主題等等）。

在這種類型氣質的Banner設計中，除去一些小圖形設計使畫面看起來比較有設計感以外，很重要的一點就是擅長用大面積的明亮高純度色彩搭配黑色使用，這樣做的目的我猜想是因為這種潮牌針對的是比較年輕但又追求一點特立獨行或者?？岣杏X的一個群體，如果全是一些明亮色彩會給人感覺比較幼稚和低齡化，加點黑色后就立馬打破了這種印象，仿佛年輕可愛中又帶了一點?？崤c放蕩不羈愛自由的味道，所謂混搭咯，感興趣的話可以去了解一下街頭文化。

大家可以提取顏色看一下：

Banner舉例：華麗（關鍵詞：上流社會／歐式／浮夸主題／位高權重／頒獎典禮／比較隆重的發布會等）。

體現華麗高貴主要就是黑色與金色／銀色等金光閃閃的顏色以及與暗色系顏色的搭配（因為暗色系給人沉穩冷靜成熟的感覺，同時為了不那么沉悶，畫面中又會帶點高光或金光閃閃的感覺的顏色搭配）。

大家可以提取顏色看一下：

這種Banner氣質的畫面千萬不要把畫面堆得太滿，一定要記得留白和搭配優雅纖細些的文字（有襯線或者無襯線字體均可），或者比較有文化底蘊的毛筆字，千萬不要用五大三粗的文字。

為什么要注意這個？你們可以想象一下豐腴肥臀、滿身穿金戴銀的暴發戶形象就知道了，感覺是一樣一樣的。

11.2.2　信息的層級關系

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

• ◆　以產品或模特為主角（主要突出產品或模特）
• ◆　以活動標題為主角
• ◆　以利益點為主角

而背景和點綴物永遠不可能是主角，它們只能是配角，同時在這里顏色不是作為一個獨立的分析要素存在，它應該是伴隨著平面的知識點來說，所以這里我也會順帶一點平面方面的知識點，舉幾個例子：

1．以產品或模特為主角（主要突出產品或模特）

我們可以有以下三個方向去發揮。

①　讓商品（模特）的顏色與背景顏色絕對地區分開來，讓它成為天空（畫面）中最閃亮的一顆星，也就是我們說的色彩對比，色彩對比又包含三種：明度對比／飽和度對比／色相對比，假設下圖中的圓就是商品或模特：

我們再去色看一下對比的效果，如下圖（去色是我們常用的一種查看信息是否突出的方法，另外還有一種距離觀察法查看對比效果，比如我們也可以站在距離屏幕遠一點的地方查看，或者人保持不動縮小畫布查看）：

這樣看，哪個對比效果好些？是不是一目了然了？不過還是要說明一點，明度、飽和度中任何一項要素發生改變，其他要素也是要跟著改變的，比如說增加了一個顏色的明度，代表在這個顏色中增加了白色，那么相對應的這個顏色的純度、飽和度肯定也就下降了，明白了嗎？

還有一點必須要明白，色彩對比不會單獨存在，它的運用永遠是依附于下面兩種方式存在的：增大商品模特面積或者增加商品模特數量。

②　通過留白或者大小對比的方式讓商品（模特）體積或面積足夠大。

③　通過一定的擺放規律，讓商品（模特）數量足夠多，因為數量多了總面積自然也就大了嘛。

2．以活動標題為主角

與上面的道理類似，可以運用增大標題面積或者同時結合色彩對比的方式使標題突出成為主角：

3．以利益點為主角

道理同上（有時候我們做Banner會直接用利益點作為大標題，這種就會使Banner的低價促銷的氣息更濃烈些）。

總結來說，我們講色彩的時候，其實也是在講平面構成，當我們講色彩三要素（明度／純度／色相）的其中一項的時候，其實也意味著在同時考慮其他要素，因為色彩不會單獨存在，色彩要素也不會單獨存在。

11.2.3　是否考量了Banner所投放的環境

當我們講到環境的時候，往往會講到外部環境和內部環境，也就是站在全局去考慮問題和站在自我的角度去考慮問題，如果你是要在某平臺投放Banner，那么這個平臺對你來說就是大環境，具體到你投放的那一小塊Banner位置就是小環境。

（1）從平臺設計師的角度出發，他肯定是希望你所有的Banner放在這個平臺頁面中，整體是融合的，不突兀的，比如京東首頁的各個樓層部分下方有一排小Banner圖，雖然是用不同的色彩來表示不同會場或主題，但是每一個色彩的明度、飽和度是相似的，設計形式／排版布局／字體字號也一樣，這就給人整體統一協調的感覺，如下圖所示。

（2）從商家的角度出發，商家當然是希望自家的Banner圖是最突出的，最亮眼的，最容易被用戶發現的，所以設計師需要把自家的圖片設計得讓人眼前一亮，脫穎而出，這個又要回到前面如何運用對比去突出某個信息的問題了，不清楚的話可以回頭看看上面那個關于信息層級的知識點。

比如，上面這些商品圖，我用距離觀察法，第一眼就看到了第二行第二個紅框所示的包包了，為什么呢？因為周圍的圖片基本是比較素的背景，而只有它使用了大面積有色背景，明暗對比之后，一下子就出來了（當然了，你也可以舉一反三去運用，學會了嗎？）

其實無論是商家／企業還是個人，都是需要考慮這種Banner投放的外部環境和內部環境的，除非你是在平臺工作的設計師，很多時候我們更多的是需要站在個人利益的角度去考慮問題，我們需要讓自己的圖片更易被人發現。

再舉個例子，有時我們會看到很多廣告并排放在一起展示，如果大家都是花花綠綠的，爭相斗艷，反而都不容易突出，反倒是當別人都花花綠綠的時候，你不用太花枝招展反而更易突出：

我們會想到，設計師在發布自己的設計作品到設計論壇或網站的時候，不妨先去看下周圍環境都是什么樣的，再去做自己的展示Banner圖，這樣有利于使自己的作品得到更多的展現機會，比如下面這個是我在站酷首頁截的圖，大家是不是跟我一樣第一眼就會看到那個玫紅色的Banner圖片？而其他的都只會匆匆帶過，因為在這個環境里，玫紅色是最突出的一種顏色（事實證明，除去dribble這個詞比較知名以外，玫紅色封面Banner圖的閱讀數確實也遠超其他的作品，你們看到了嘛？）：

11.3　色彩在Banner設計中所起的作用

下面從5個方面分別說明色彩在Banner設計中所起的作用。

11.3.1　點綴作用（渲染氛圍用）

當你做了一個冷色調或暗色調的頁面拿給你的主管或需求人看，他說畫面太冷清，而你又懶得改顏色改形式等等，總之你非常懶不想動，這時候不妨試試一試下面這種周圍點綴些多彩色的方式（色彩依附的形狀和大小面積你自己斟酌咯～只需要記住點綴物是配角，它是烘托氣氛用的，永遠不要搶了主角的風頭。）

當你明明做了一個自認為非常熱鬧促銷的頁面后，你的主管或者需求人仍然覺得畫面太冷清不夠熱鬧而你又不想大改動的時候怎么辦？道理同上。

11.3.2　突出主體（梳理信息層級）

通過色彩對比來突出信息層級的作用，任何有彩色相較于無彩色來說都是突出的，如果是作為主體信息出現，面積也夠大，那就是絕對的突出優勢了，如下圖所示。

11.3.3　平衡畫面（漸變色使得整體視覺協調）

講這個知識點之前，我們有必要先來了解以下幾個概念。

• ◆　鄰接色相對比：色相環上相鄰的二至三色對比，色相距離大約30°左右，為弱對比類型。
• ◆　類似色對比：色相對比距離約60°左右，為較弱對比類型。
• ◆　中差色對比：色相對比距離約90°左右，為中對比類型。
• ◆　對比色對比：色相對比距離約120°左右，為強對比類型。
• ◆　補色對比：色相對比距離180°，為極端對比類型。

我們有時候會看到一些Banner強調的是整體畫面的協調感覺，并不會重點去突出強調什么，整個畫面給人感覺特別舒服，那是因為他們往往采用的是類似色對比或者鄰近色對比，亦或是采用相似明度和飽和度的不同色相的漸變調和。

Banner舉例（如下圖Banner給人感覺是整體畫面非常柔美協調統一，強調統一感覺）：

當然，以上也可以結合起來運用（運用漸變色＋對比），如下圖所示。

11.3.4　延續風格（涉及風格統一調性的時候）

通過色彩來延續風格往往用在平臺做一些比較大型的活動，涉及多個不同品類不同分會場的時候會運用到，我看到一些店鋪電商品牌也慢慢規范化了之后也會用到這種方式以保持品牌統一調性，也就是保持設計風格一致，色彩的明度純度接近，只是改變色相，以不同的色相代替不同的品類或者分會場來設計Banner圖，如下圖所示。

11.3.5　塑造畫面氣質（傳遞恰當的情緒給用戶）

比如我們前面提到的很活力、很可愛、很高貴、很素雅等等，我這里也不繼續描述了，文章開頭都提到過。

1．華麗高貴

2．高冷大牌

3．年輕活力

4．熱鬧促銷

5．素雅清爽

6．復古懷舊

11.4　如何在Banner設計中使用色彩

色彩不會獨立存在，它必定是依附于其他構成和表現形式而存在的，比如平面構成、立體構成等，所以下面將從以下幾個方面來論述，以紅色為例（其他顏色的運用道理是一樣的）。

11.4.1　當色彩運用于不同的面積

當紅色運用于不同的面積，它的視覺感受是很不一樣的，當外部背景尺寸不變，紅色區域面積越大越讓人感覺眼睛發脹，仿佛都要跑到你胸（眼）前一樣，這就是近大遠小的道理咯。

如下圖所示，1/2/3紅色區域哪個更吸引你眼球？誰更讓你躁動不安？

Banner舉例（看下圖紅色區域）：紅色區域越大感覺越躁動。

11.4.2　當色彩運用于不同的形狀

當紅色運用于不同的形狀，哪個形狀讓你感覺最不穩定？哪個形狀讓你感覺更活躍？哪個形狀讓你感覺更時尚？

如下圖所示：3最不穩定，1最規矩，5最不規則，1~9都可以很時尚，主要在于如何去搭配其他元素。

Banner舉例（看下圖紅色區域）：

11.4.3　當色彩運用于不同的肌理

當紅色運用于不同的肌理，如下圖所示，紅色色塊疊加肌理后和沒疊加肌理對比有什么不同？紅色色塊疊加不同肌理后又有什么不同？（任何你能想到的物體都可以疊加視作肌理，比如人、圖片、文字、字母、發絲、各種形狀、軟硬粗糙或平滑材質等等）

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

Banner舉例（看紅色區域）：

11.4.4　當色彩運用于不同的色彩

當紅色運用于不同的色彩，大家會看到相同面積的紅色圓放在不同的色彩上出現了大小不一或明暗不一的錯覺，因為紅色是暖色，所以根據冷暖對比，紅色放在冷色或中性色（黃色綠色）上可以比較突出，根據色相對比，紅色屬于有彩色，有彩色放在無彩色（黑白灰）上也可以比較突出，但是紅色放在鄰近色（比如偏冷的紫色和偏暖的橙紅色）上就顯得特別弱，因為色相太接近了。

Banner舉例（看紅色區域運用在不同顏色的背景上）：

11.4.5　當色彩運用于不同的環境

當紅色運用于不同的環境，前面我們講過，環境分為外部大環境和內部環境，有人所站的角度是要保證平臺上所有Banner顏色整體和諧統一，雨露均沾，而有的人所站的角度是要保證自己的Banner圖是最突出最吸引眼球的，前者為了和諧統一，后者是為了競爭為了突出自己（講到環境其實也就是前面幾種情況的綜合講解和考慮，即色彩／形狀／肌理／面積等的結合使用才構成了所謂的環境），如下圖所示。

當紅色色塊放置在純度明度相近的不同色相的色塊中，它是和諧地融入整體的，如下圖所示。

當紅色色塊放置在鄰近色色塊中，它與整體環境看起來也是比較和諧統一不突兀的，如下圖所示。

當同樣是紅色，但是它的形狀／面積大小和其他的不一樣，那么它就會比較突出，也就是所謂的特異，如下圖所示。

當同樣面積的色塊，只有一塊是有彩色的紅色，其他都為黑白灰無彩色，那么在這個環境中，紅色塊是最突出的，如左下圖所示。

當同樣面積的色塊，只有一塊是暖色紅色，其他都為冷色，那么在這個環境中，暖色系的紅色塊是最突出的，也就是冷暖對比，如右下圖所示。

Banner舉例（看紅色區域）：因為明度純度接近的原因，紅色Banner在這個環境中還算比較融入統一的，如下圖所示：

而當周圍都是冷色調時，即便是色彩明度和飽和度接近，紅色Banner在這個環境中也顯得非常突出，變為了主角，如下圖所示：

更別說提高紅色區域的飽和度、純度、明度了，紅色在這個環境中變得更加格格不入了，如下圖所示：

以上就是我們本章的所有內容了，我們需要知道，色彩的運用既是一種情緒的表達，也是一種功能需要，你所運用的每一種顏色必然是有其目的性的，而且也要學會舉一反三（比如上面我只舉了紅色的例子，其他顏色可以以此類推）。

另外無論是有彩色還是無彩色它們都不會是獨立存在的，它需要一種介質來承載，它也是需要依附于其他表現形式而存在的，比如需要與平面構成、立體構成結合運用，在下一章中，將繼續為大家講解平面構成在電商Banner設計中的運用。