第12章　玩轉電商設計中常用的色彩搭配

12.1　玩轉電商設計色彩搭配之紅色

從事電商設計的人應該都知道，紅色算得上是國內電商設計中運用得最為廣泛的一種顏色，即便是非電商從業者，網購大家都不陌生，我們看一些大眾熟悉的電商平臺的界面設計就知道，他們的品牌色其實也多是紅色系的或暖色系的，如下圖所示。

但其實很多人對紅色該在什么時候用，或者該怎么用依然缺乏了解，紅色用得好則是皆大歡喜，用得不好要么會顯得俗氣和不干凈，要么會顯得頁面很壓抑很膩。

再一個紅色寓意紅紅火火嘛，下面我們來講一下紅色在電商頁面設計中的運用。

12.1.1　紅色的釋義

從性格色彩的層面來說：紅色代表熱情、熱鬧、刺激、欲望、奔放、喜慶、血腥等，如下圖所示。

從色相、明度、飽和度的層面來說：紅色也分為很多種，比如正紅、深紅、品紅、粉紅、酒紅、緋紅、洋紅等，如下圖所示。

從作用的層面來說：紅色代表危險警示／突出強調／錯誤提醒／性刺激／公布喜訊等等。

12.1.2　紅色在電商設計中的運用

正因為紅色有以上的感官刺激作用，所以它常運用于一些要體現喜慶、熱鬧、激發別人欲望或者要體現恐怖情緒的電商或海報設計中，同時紅色也常用來作為點綴色出現，以強調某個重要信息。

1．喜慶節日

紅色代表喜慶熱鬧，所以常用在中國的各種喜慶的節日促銷電商頁面中，比如國慶、元旦、春節、周年慶等重大節日，基本都是以紅色作為大背景主色，如左下圖所示。

國外的喜慶節日圣誕節當然也是少不了紅色的，而且還是紅配綠（不過每年都是紅配綠也會視覺疲勞，所以很多設計師會通過加入一些其他顏色，或改變一下它們的明度／飽和度／純度，或采用不同的質感紋理和表現手法給用戶一些新鮮感，比如手繪／合成／手工／三維建模之類的表現形式），如右下圖所示。

2．公布喜訊

一些專門用來發布喜慶消息的專題頁也最愛用紅色，比如熱烈慶祝誰上市了、誰獲獎了、誰結婚了、誰喜得貴子了等等（不過結婚之類的也有很多人用浪漫紫色或蘿莉粉色，獲獎之類的專題頁，如果想要時尚震撼一點的話，很多人會用黑金的色彩搭配）。

3．賣場促銷

商場做促銷活動／電商平臺或店鋪做大促的時候，比如雙十一、雙12/815/618等，如左下圖所示。

4．體現時尚個性

將紅色運用在毛筆筆觸、撕紙效果上，會給人一種瀟灑個性的感覺，當然也要控制好度，畢竟過了就會引起恐怖心理了，如右下圖所示。

5．突出強調某個重要信息

紅色常用來作為輔助色或點綴色，用來突出強調某個重要信息，比如突出強調利益點／購買按鈕等信息。

6．如果產品本身就是紅色時

其實任何類目任何產品都有紅色系列，比如家電數碼、服飾鞋包、美妝護膚等，如果干脆將背景也弄成紅色與產品融為一體，會帶來非常強的視覺效果，而且不會覺得膩。

12.1.3　與紅色有關的常用色彩搭配

紅色是很熱烈的顏色，是暖色，也是一種百搭色，但并不是每個人都玩得好它，可它偏偏又是電商設計中用得最為頻繁的一種顏色，接下來給大家列舉一些常用的優秀的紅色與其他顏色的搭配，如下圖所示。

如下圖所示，左邊是大面積的紅色搭配少許相近色或鄰近色顯得很高檔耐看；右邊是大面積的大紅色＋玫紅色搭配色彩協調，再點綴少許綠色和白色，簡潔又俏皮耐看。

當紅色與這種偏灰的漸變色搭配時，畫面立馬變得柔和清新脫俗起來。

也只有五彩斑斕的顏色才能壓得住紅色了。

紅色與藍白黑灰永遠都是經典搭配，既可以制造一種復古的感覺，也能給人一種冷靜與激情相碰撞的感覺。

紅色與青色或與綠色搭配，再加上一些俏皮的構圖或點綴，會顯得畫面非常干凈清爽。

紅白黑搭配，時尚又經典，不過要注意紅色的比例。

紅綠配米黃色，圣誕節常用配色，不過也會顯得有一點點年代感或復古的感覺，絕對不是現代時尚類型的配色。

在大面積的淺灰色里，只需要點綴少許紅色，就可以制造出一種靜謐又不顯單調的感覺了。

在一些比較俏皮的手繪畫面中，紅色既可以作為大面積背景色來包容五彩斑斕的多彩色，如下邊左圖所示；也可以以非常小面積的點綴色出現，用來突出強調某個重要信息，比如價格／利益點／特殊說明文字之類的。

無論你的背景是簡單還是復雜，當紅色塊面積足夠大時，它依然會成為焦點。

大紅色及深色的結合搭配熒光色會有一種非常詭異個性的感覺。

番茄炒雞蛋的紅黃搭配容易給人一種復古溫暖的感覺，但為了畫面不至于太膩歪，最好搭配一點冷色或暗色比較好。

當紅色運用在一些形狀規則排列上時是很容易制造出簡潔、時尚感的。

12.1.4　紅色運用在不同的質感紋理或形狀環境

雖然同樣是紅色，但是當它運用于不同的形式載體／紋理材質／周圍情境時，所傳遞的感受是不一樣的。

紅色的帶棱角形狀vs紅色的圓形，哪一個更硬朗，視覺上更咄咄逼人？

紅色的液體vs紅色的煙霧，哪一個更仙？其實紅色液體處理不好的話很容易變成恐怖畫面……不過如果能處理得好的話，液體和煙霧都能作為氛圍渲染元素，使得產品看上去更唯美或更酷炫。

紅色的絲綢或絲帶vs紅色的塊狀物體，哪一個更女性化？所以絲帶或絲綢常用來點綴一些女性化的產品，而色塊點綴則更適用于科技數碼產品。

將紅色運用于空間立體感的環境中vs運用于扁平的環境中，哪一個更有代入感？這就是3D和2D的區別。

紅色周圍是無彩色vs周圍是多彩色，誰更突出？誰更有氛圍？

對比之后當然是在無彩色中比較突出，而在多彩環境下比較有氛圍（但是也顯得雜亂了）。

那么它們具體運用在電商設計中是什么樣的情況呢？我找了一些還不錯的紅色頁面給大家看下：

12.1.5　紅色的使用禁忌和注意事項

①　紅色作為暖色運用在頁面中的時候，畫面中切勿全都是暖色系搭配，適當加入一些冷色或無彩色（黑白灰）點綴可以緩解視覺疲勞。

②　無論何種顏色，它在整個畫面中的占比都是根據設計需要決定的，而不是隨意而為之，你是要弱化某一個信息還是突出某一個信息，都可以根據選擇顏色和控制它的比例大小來實現，講直白點就是要懂得運用對比和襯托的手法。

③　切勿大面積使用太過艷麗或太過暗沉的紅色，比如下面這個415京東全球購的頁面，原圖是這樣的：

這張設計稿如果是用很艷麗的紅色，如左下圖所示，是不是很刺眼很不舒服無法直視了啊？如果用的是很暗淡的紅色，如右下圖所示，是不是看起來就很臟毫無繼續看的欲望了??？

所以有的人可以把紅色用得很高檔，但也有很多人紅色用不好，要么太刺眼了，要么太暗太臟顯得廉價，其實很大部分原因就是因為明度／飽和度／純度沒有把握好了。

④　電商設計中其實很少會用到純度為百分百的紅色，因為會顯得很膩很刺眼，這時候不妨將紅色向玫紅色偏一點，或向橙色偏一點，或者再偏白一點偏暗一點，總之可以自己去嘗試，按需選擇合適的紅色就好，如下圖綠色框所示區域：

⑤　當紅色不得不與對比色或互補色搭配使用時，最好是能加入一些調和色彩（比如黑白灰），就像右面的百事可樂的LOGO的紅白藍搭配，這里的白色就起到了調和的作用了。

以上我們關于電商設計中使用最為頻繁的紅色的配色技巧和注意事項就給大家就講到這里啦，大家學到了嗎？馬上行動起來運用到工作項目當中去吧！

12.2　玩轉電商設計色彩搭配之黑白灰

本節我們來講一下熱鬧促銷型的電商設計最忌諱的顏色“黑色”在電商設計中的運用。

12.2.1　黑色的釋義

先看來自百度百科的解釋：黑色可以定義為沒有任何可見光進入視覺范圍，和白色正相反，白色是所有可見光光譜內的光都同時進入視覺范圍內。顏料如果吸收光譜內的所有可見光，不反射任何顏色的光，人眼的感覺就是黑色的。如果將三原色的顏料以恰當的比例混合，使其反射的色光降到最低，人眼也會感覺為黑色。所以黑色既可以是缺少光造成的（漆黑的夜晚），也可以是所有的色光被吸收造成的（黑色的瞳孔）。

而我自己的理解是：黑色它不僅是一種百搭色，它很特殊的一點就在于，你會發現幾乎所有的書本報紙雜志正文部分以及你平時的書寫基本都是黑色的而不是其他顏色的，中國的水墨畫毛筆字也基本都是黑色的，所以黑色會給人一種有文化底蘊的感覺。

同時它在氣質上還給人一種堅硬、神秘、端莊、靜寂的感覺，但在一些文化習俗上黑色又常常意味著不吉利，在功能上比如在服裝設計中黑色又往往能起到一種視覺上顯瘦的效果。

我將以上這些都統稱為黑色的屬性。

12.2.2　黑色占比多少與活動定位之間的關系

只要一提到電商頁面設計，我相信大多數人在腦海中閃現的應該是彩色的頁面而不是黑色的，除非品類需要或產品本身就是黑色，大部分老板也不會同意你把一個電商頁面設計成黑色（一些開明的老板除外），但黑色真的這么招人忌諱嗎？黑色就真的不太適合應用于電商設計中嗎？其實主要是你沒有弄懂黑色占比與活動定位之間的關系罷了。

我用兩張我在飛機上拍攝的照片舉例:

大家看完后是什么感覺呢？左邊的天空是不是感覺很敞亮陽光看著就很熱？而右邊的黑夜感覺很寧靜神秘遙不可及？

我們都知道晴朗的白天和靜謐的夜晚是對立的，彩色跟黑色是對立的，它們給人傳遞的感受也是對立的，類比下來，就好比下面這兩種頁面，它們所傳遞的定位也是截然對立的：前者活潑熱鬧促銷，后者冷酷高端。

這種定位規律在一些產品包裝上也適用，比如下圖：

百雀羚水能量煥耀護膚套裝在天貓上的價格是488元（原價），價格是比較親民的，所以在包裝設計以及頁面設計方面也是比較親民的，而右邊的日本頂級護膚品牌POLA套裝則要上萬元一套，所以在包裝設計和頁面設計用色方面都是往簡約高端方向走的。

再取一個折中的專題頁設計案例，當多彩色vs黑色與多彩顏色相結合的時候，雖然同樣很時尚，但是左圖更年輕清爽活力，右圖因為加入了黑色的緣故顯得更炫酷大牌。

所以我們不妨可以這么理解：一個頁面活潑與否，定位如何，其實關鍵就在于黑色或暗色在這個頁面中的占比有多少。

黑色占比越多，這個頁面的黑色屬性也就越多，所以會體現出諸如神秘／剛強／高端／高冷甚至是恐怖等氣質，讓人產生距離感，常用于一些想要體現高端產品定位印象的頁面或產品設計中，任何類目都適用：

而彩色占比越多，整個畫面就越活潑熱鬧，仿佛是有什么活動表演或者派對，給人一種有親和力人人都買得起的感覺，常用于一些要體現活潑年輕定位的產品或頁面設計中，同樣也適用于任何類目，如左下圖所示，而白色占比越多，整個頁面就越干凈、神圣、明亮，給人的感覺就會越空曠、寧靜、透氣，如右下圖所示。

為了方便大家理解，實際上以上我舉的例子都是比較極端的，畢竟非常高端的產品是少數，大多數以及大眾目前能接受的都是色彩占比不那么極端的，適用于大眾的。

同時我們也要注意到一點，一個頁面會體現出何種定位調性，除了色彩占比有很大的影響外，元素的形狀、密度、紋理、創意風格等也會產生一些影響。

比如這三個頁面，同樣是黃黑搭配，但因為色彩占比不同、形式不同、風格不同，它們的調性明顯是不一樣的：左一潮流時尚，左二搞怪活力，左三酷黑簡潔。

12.2.3　黑色電商頁面的常用色彩搭配技巧

前面我們已經講過，雖然元素的形狀、密度、紋理、創意風格等會對活動定位產生影響，但是對頁面是熱鬧促銷還是高冷大牌起決定作用的其實還是黑色或暗色的占比是多少：暗色或黑色占比越多頁面越冷酷高端，彩色占比越多頁面就越熱鬧促銷，而白色的占比多少則決定了頁面的透氣程度，頁面中白色越多越明亮，人就會感覺越空曠透氣。

另外，既然是電商頁面，它存在的主要目的就是賣貨和展示商品用的，而貨是要賣給不同的人群的，所以我們針對不同的人群要給他們傳遞的感受就會不一樣，或熱血沸騰，或性冷淡，或舒心，或故意讓你難受，但不管怎樣，最終出來的頁面情緒肯定是要傳遞到位的，一般有以下幾個規則可要注意。

1．黑色常作為主色或背景色

一些想走高端時尚路線以及科技大牌的頁面往往比較喜歡用大面積的黑色來塑造一種距離感，也就是很多人常說的“有格調”，但這里要注意的是，這種頁面往往會對產品的品質或光影細節有非常高的要求，因為對比太強烈的緣故，視覺太聚焦了，就像全世界的眼睛都在暗中盯著你看，你稍微有一點瑕疵都會暴露無遺。

2．黑色常與這些顏色搭配使用

而黑色作為一種百搭色，在電商設計中最常搭配的除了白色、金色、大紅色以外，還有各種熒光色，比如亮黃、亮綠、亮粉、騷紫以及五顏六色，這些顏色與黑色搭配會形成強烈的色彩對比效果，從而突出想要表達的信息。

舉例：黑白配

舉例：黑金搭配

舉例：紅黑配

舉例：黃黑配

請參考P222頁圖。

3．有黑色的地方就該有亮色

一張有感染力的照片往往少不了光的運用，而有光的地方就會有陰影，一張打動人心的頁面設計也有同樣的規律在里面：頁面中有暗就會有明，這樣才不會顯得過于壓抑，畫面才更加耐看。

舉例：幾乎所有的美國大片或者科技大片的海報都喜歡用這個套路:

舉例：黑色可以包容任意亮色（熒光色）

還有一些比較男性化的或江湖氣息的游戲頁面尤其喜歡用黑色或暗色系頁面，有一些數碼科技類產品的電商頁面也可以試試，總之要想體現出很man的感覺，黑色或暗色是必不可少的，如下圖所示。

12.2.4　與黑色有關的節日或事件

提到電商設計，當然就少不了各種電商節，其他的電商節我就不說啦，與“黑色”有關的能作為噱頭活動去玩的節日或事件有哪些呢？比如著名的黑色星期五、萬圣節、4月14日黑色情人節、暗黑電商等。

1．黑色星期五

關鍵詞：國際大牌、促銷、折扣、黑色等。

百度百科對黑色星期五的釋義如下：

美國圣誕節大采購一般是從感恩節之后開始的。感恩節是每年11月的第四個星期四。因此它的第二天，也就是美國人大采購的第一天。在這一天，美國的商場都會推出大量的打折和優惠活動，以在年底進行最后一次大規模的促銷。因為美國的商場一般以紅筆記錄赤字，以黑筆記錄盈利，而感恩節后的這個星期五人們瘋狂的搶購使得商場利潤大增，因此被商家們稱作黑色星期五。商家期望通過以這一天開始的圣誕大采購為這一年獲得最多的盈利。

黑色星期五是從美國漂洋過海來到中國的一種電商促銷活動，幾乎每個大一點的電商平臺都會摻合一下，尤其是跨境電商尤為重視，如下圖所示。

其實不管是黑色星期五還是其他什么節日活動，在電商設計界來說本質是一樣的，就是一個賣貨的噱頭罷了，不過黑色星期五相關的設計其實都會在畫面中加入一些黑色相關的元素，或者即便是走熱鬧促銷路線，也是會偏時尚感一些，而不是單純搞低價促銷，畢竟是從國外引入的節日，給人的固有印象就是不能太低端，如下圖所示。

2．萬圣節

關鍵詞：南瓜／糖果／黑橙搭配／蝙蝠／幽靈／骷髏頭等。

它也是很多人喜愛的一種節日，商家運營們當然也不會錯過咯～

3．4月14日黑色情人節

關鍵詞：男生／單身狗／促銷／情人節等。

我們可以發現一年里面貌似各種顏色的情人節一大堆，無非就是找噱頭做活動讓你們買買買，我猜商家運營們的邏輯大概就是，反正你是單你的錢也沒處花，不如花在我這里買點安慰好了，哈哈哈!

當別人提到“黑色”的時候，你會想到什么呢？也許會想到黑夜／黑頭發／烏鴉／神秘／陰森／距離／嚴肅／沉寂等等，總之它跟陽光／活力這些比較明朗的字眼是幾乎掛不上鉤的，這也就解釋了為什么設計師在喜慶節日／雙十一／618等頁面設計中幾乎不會運用黑色的原因。

但隨著我們的購物選擇越來越多樣化以及人們越來越有自己的主見的緣故，人們開始想要尋求自己的個性和要求，也越來越厭倦千篇一律，這也直接導致了商家們之間的競爭開始變得越來越激烈，也許以前他們隨便推出什么產品，即便是頁面設計做得很丑都可以賣得很好，但現在卻可能無人問津，所以商家以及設計師們都迫切需要找到新的突破點來滿足和挖掘不同客戶的喜好，而對黑色的合理運用其實就是突破方式之一。

這讓我想起了電影《香奈兒》中的一個情節，在那個所有人都追求蕾絲／花里胡哨／雍容復雜的服裝設計的年代，可可香奈爾卻偏要穿簡潔裁剪的男裝黑色禮服等帶給人一次又一次驚喜，而她在悲痛欲絕的情況下為紀念他的情人鮑勃而設計的一條小黑裙子也成了香奈爾史上最大的成功。