視覺設(shè)計(jì)、平面設(shè)計(jì)、UI設(shè)計(jì)等兄弟型設(shè)計(jì)崗位，與CMF設(shè)計(jì)有著許多共通之處，大家都需要有良好的平面能力、配色能力，顏色在CMF設(shè)計(jì)當(dāng)中，C排在了第一位，而且C所面臨的知識(shí)范圍極為廣泛，國(guó)內(nèi)設(shè)計(jì)高校對(duì)于CMF所需要的色彩知識(shí)教育相對(duì)缺乏，今日軍團(tuán)扒一扒：雙十二貓狗大戰(zhàn)的色彩營(yíng)銷套路。

號(hào)稱年終盛典的雙十二，風(fēng)頭最猛的貓狗大戰(zhàn)，也就是淘寶和京東啦。在淘寶和京東首頁上，密密麻麻的信息量各種推廣各種折扣，應(yīng)接不暇！

雙十二，各商家有什么色彩營(yíng)銷套路？作為CMF設(shè)計(jì)師，一起看看去！

▼淘寶首頁

仔細(xì)看看看

淘寶的主打色是玫紅色向橙紅色過度的細(xì)膩色調(diào)，如下方示意圖，紅色在色相環(huán)的左鄰右舍各借了一點(diǎn)點(diǎn)色，向左借了一點(diǎn)點(diǎn)黃，漸變成了橙紅，橙色，橘黃色；向右借了一點(diǎn)點(diǎn)紫，漸變成了玫紅，紫紅，紫羅蘭。

大的色調(diào)定下來，最大面積的色塊用橙色來呼應(yīng)和提亮主色調(diào)，

稍小一點(diǎn)的色塊用無彩色黑色和灰色來豐富層次，如下圖；

最后用同明度的不同色相的彩色小色塊來增加彩色，豐富細(xì)節(jié)，烘托出節(jié)日的熱鬧氣氛

從淘寶的色彩搭配上，雖然顏色用的非常多，但是運(yùn)用手法純熟，色彩感覺也很到位，

色彩多而不亂，張弛有道，成功營(yíng)造出熱鬧時(shí)尚又豐富多彩的節(jié)日氛圍。

▼京東首頁

看看京東的主頁面，淘寶和京東兩者的主頁頁面用色類似，都是時(shí)尚絢麗的玫紅色調(diào)。

其實(shí)針對(duì)愛剁手愛時(shí)尚的年輕消費(fèi)主體，玫紅色調(diào)是非常適合雙十二這種場(chǎng)合使用的，能有效營(yíng)造時(shí)尚新奇新鮮又美艷又熱鬧的氣氛。

京東的主打色是桃紅色向玫紅色向紫色過渡，如下方示意圖，亮處的桃紅色在明度上有個(gè)深淺變化，在暗處明度加深，色相稍稍偏向玫紅色，主菜單欄的紫羅蘭色是近似色的延續(xù)，起到豐富色系和提亮提艷的效果。

與淘寶的配色相比，京東的色彩平了很多，在玫紅色色相上變化不大，主要是明度上有一點(diǎn)點(diǎn)階度的變化。

與淘寶相同的是，京東也使用了色相環(huán)上的鄰近色——黃色和紫色，但是不同的是，淘寶采用漸變的手法來融合這幾個(gè)顏色，而京東使用不同大小面積的色塊色塊來搭配顏色，如主色是帶一點(diǎn)明度變化的玫紅色，標(biāo)題欄用的紫羅蘭色，幾個(gè)獨(dú)立的黃色圓形做點(diǎn)綴。

再來看看兩家的手機(jī)賣場(chǎng)主頁面

▼淘寶手機(jī)賣場(chǎng)首頁

淘寶的手機(jī)賣場(chǎng)主頁面是藍(lán)色色系，有一些明度上的漸變，按道理這樣會(huì)比較單調(diào)，但是細(xì)心的CMF設(shè)計(jì)師一定發(fā)現(xiàn)了，他們利用動(dòng)感的曲線和塊面來分割背景色，使畫面動(dòng)感有變化；用細(xì)小的同色紋理來點(diǎn)綴不規(guī)則色塊，增加細(xì)節(jié)和精致度；最后用背景色的對(duì)比色系——橙紅色的小色塊來突出標(biāo)語，強(qiáng)化視覺，也呼應(yīng)了淘寶的代表色橙色。

淘寶的手機(jī)賣場(chǎng)的手機(jī)展示窗口，以背景色藍(lán)色為窗格，每個(gè)窗口很大，突出手機(jī)信息，這點(diǎn)比京東要好。

▼京東手機(jī)賣場(chǎng)首頁

京東的手機(jī)賣場(chǎng)主頁是群青色向青蓮色再向紫羅蘭色過渡，這個(gè)色調(diào)是非常絢麗非常奪目的，但是運(yùn)用難度稍高，因?yàn)槿呵噙@個(gè)顏色的色性有點(diǎn)偏離常規(guī)自然色，是色相中純度最高的顏色。

在一副水彩或者水粉畫中，其他顏色的顏料會(huì)隨著時(shí)間的推移發(fā)黃，變灰，變暗淡，但是只有群青卓爾不群，依舊飽和鮮艷，所以一定在色彩搭配中謹(jǐn)慎運(yùn)用好群青，避免太突兀，此處手法是密切聯(lián)系群青的周邊色，如青蓮色，紫羅蘭色，玫紅色甚至紅色，讓它能融合到一片色彩中，更和諧。

可以看到主頁面的背景也有一些漸變的色塊，但是虛化了，不太顯，只是使單調(diào)的背景有點(diǎn)層次，也是打破單一的群青背景色，虛化也是為了更突出前面的圖案。

主頁面的圖案比較立體，色彩比較飽和，整體色彩從黃色到紫色的運(yùn)用幾乎占據(jù)了半個(gè)色相環(huán)，色差大，對(duì)比強(qiáng)烈鮮艷。

下圖紅色框框出了背景色調(diào)：

手機(jī)陳列窗口的顏色也是背景色和主題圖案里提取出來的，玫紅色和青蓮色，每個(gè)版塊的窗口  

邊框還有投影，邊框粗細(xì)，畫冊(cè)形式，黑框等變化，干擾了主要信息的傳達(dá)，不如淘寶的簡(jiǎn)潔。

綜上簡(jiǎn)述，發(fā)放下雙十二色彩營(yíng)銷套路：

1、兩家都用了玫紅色的色調(diào)，玫紅色確實(shí)適合年輕群體，能有效營(yíng)造時(shí)尚新奇新鮮又美艷又熱鬧的氣氛。但是每次雙十二都這么用，無新意。

2、在主題背景色的運(yùn)用上，兩家不同的運(yùn)用手法。

淘寶：顏色的鄰近色的漸變，色相融合，過渡細(xì)膩。

京東：顏色的鄰近色的對(duì)比，用大小色塊來搭配使用，最后用小面積的對(duì)比色提亮。

3、鄰近色是個(gè)和諧配色大法寶，在色相環(huán)中位置相近的顏色就叫鄰近色。它們往往處于同一系統(tǒng)之下，共用相同的"顏色基因"，彼此之間有著"親緣關(guān)系"。因此，鄰近色無論怎么搭配，都會(huì)顯得和諧而自然。在色彩搭配中，最容易達(dá)到和諧、安靜和保險(xiǎn)的顏色就是鄰近色的搭配。

4、利用同色的圖案，紋理或漸變來豐富背景色的細(xì)節(jié)，又能保持適當(dāng)虛化。

5、京東的頁面利用了空混的色彩調(diào)合方法，群青紫色和橙色黃色是對(duì)比色，將大面積群青紫色作主色，橙色黃色分割成較細(xì)小的面積并置使用，類似空混的手法，使色彩遠(yuǎn)看能混合成一體，從而達(dá)到統(tǒng)一。

雖然淘寶和京東的色彩搭配方案未必是最好的，但是卻是常用的套路，方便上手，CMF設(shè)計(jì)師在設(shè)計(jì)的時(shí)候也可以參考，比如給產(chǎn)品出7個(gè)系列配色來營(yíng)造色彩豐富的感覺，你是否會(huì)在色相環(huán)選擇7個(gè)代表性的色相紅橙黃綠青藍(lán)紫呢，也許還有別的思路可以借鑒，利用一些鄰近色到達(dá)豐富多彩又細(xì)膩和諧的效果。鄰近色一般為黃橙，黃綠，紅紫，藍(lán)紫，藍(lán)綠等，搭配上要注意冷暖。

鄰近色搭配常常在自然中被找到，所以對(duì)眼睛來說，這時(shí)種最舒適的搭配方式。在使用近似色搭配的時(shí)候，一定要適當(dāng)加強(qiáng)對(duì)比，不然可能使畫面顯得平淡。

順帶一提，這兩天年度色草木綠滿天飛，疑問聲也不斷，有人問到：年度色（流行色）真的會(huì)流行嗎？

昨天有幸聽到一位色彩專家的回答：年度色并不是這么理解，而是如何應(yīng)用創(chuàng)造力的思想，將色彩用到合適的場(chǎng)景中去，年度色只是作為一個(gè)指引作用。年度色具備寓意與希望，大家應(yīng)該享受顏色搭配的過程，嘗試新的顏色搭配。年度色作為指引與專業(yè)建議，給人們帶去談資，去討論這個(gè)顏色。

在雙十二的色彩營(yíng)銷套路中，或者我們自己在產(chǎn)品配色過程中，評(píng)判是否是一名專業(yè)的CMF設(shè)計(jì)師，或許可以從是否享受顏色搭配過程及不斷嘗試新的顏色搭配來窺探，好了，以上就是雙十二貓狗大戰(zhàn)的色彩營(yíng)銷套路簡(jiǎn)析～

最新評(píng)論