当前位置:首页 >> 平面设计

双十二猫狗(淘宝和京东)大战色彩套路

视觉设计、平面设计、UI设计等兄弟型设计岗位,与CMF设计有着许多共通之处,大家都需要有良好的平面能力、配色能力,颜色在CMF设计当中,C排在了第一位,而且C所面临的知识范围极为广泛,国内设计高校对于CMF所需要的色彩知识教育相对缺乏,今日军团扒一扒:双十二猫狗大战的色彩营销套路。

号称年终盛典的双十二,风头最猛的猫狗大战,也就是淘宝和京东啦。在淘宝和京东首页上,密密麻麻的信息量各种推广各种折扣,应接不暇!

双十二,各商家有什么色彩营销套路?作为CMF设计师,一起看看去!

▼淘宝首页

双十二猫狗(淘宝和京东)大战色彩套路

仔细看看看

淘宝的主打色是玫红色向橙红色过度的细腻色调,如下方示意图,红色在色相环的左邻右舍各借了一点点色,向左借了一点点黄,渐变成了橙红,橙色,橘黄色;向右借了一点点紫,渐变成了玫红,紫红,紫罗兰。

双十二猫狗(淘宝和京东)大战色彩套路

大的色调定下来,最大面积的色块用橙色来呼应和提亮主色调,

稍小一点的色块用无彩色黑色和灰色来丰富层次,如下图;

双十二猫狗(淘宝和京东)大战色彩套路

最后用同明度的不同色相的彩色小色块来增加彩色,丰富细节,烘托出节日的热闹气氛

双十二猫狗(淘宝和京东)大战色彩套路

从淘宝的色彩搭配上,虽然颜色用的非常多,但是运用手法纯熟,色彩感觉也很到位,

色彩多而不乱,张弛有道,成功营造出热闹时尚又丰富多彩的节日氛围。

▼京东首页

双十二猫狗(淘宝和京东)大战色彩套路

看看京东的主页面,淘宝和京东两者的主页页面用色类似,都是时尚绚丽的玫红色调。

其实针对爱剁手爱时尚的年轻消费主体,玫红色调是非常适合双十二这种场合使用的,能有效营造时尚新奇新鲜又美艳又热闹的气氛。

京东的主打色是桃红色向玫红色向紫色过渡,如下方示意图,亮处的桃红色在明度上有个深浅变化,在暗处明度加深,色相稍稍偏向玫红色,主菜单栏的紫罗兰色是近似色的延续,起到丰富色系和提亮提艳的效果。

双十二猫狗(淘宝和京东)大战色彩套路

与淘宝的配色相比,京东的色彩平了很多,在玫红色色相上变化不大,主要是明度上有一点点阶度的变化。

与淘宝相同的是,京东也使用了色相环上的邻近色——黄色和紫色,但是不同的是,淘宝采用渐变的手法来融合这几个颜色,而京东使用不同大小面积的色块色块来搭配颜色,如主色是带一点明度变化的玫红色,标题栏用的紫罗兰色,几个独立的黄色圆形做点缀。

双十二猫狗(淘宝和京东)大战色彩套路

再来看看两家的手机卖场主页面

▼淘宝手机卖场首页

双十二猫狗(淘宝和京东)大战色彩套路

淘宝的手机卖场主页面是蓝色色系,有一些明度上的渐变,按道理这样会比较单调,但是细心的CMF设计师一定发现了,他们利用动感的曲线和块面来分割背景色,使画面动感有变化;用细小的同色纹理来点缀不规则色块,增加细节和精致度;最后用背景色的对比色系——橙红色的小色块来突出标语,强化视觉,也呼应了淘宝的代表色橙色。

双十二猫狗(淘宝和京东)大战色彩套路

淘宝的手机卖场的手机展示窗口,以背景色蓝色为窗格,每个窗口很大,突出手机信息,这点比京东要好。

▼京东手机卖场首页

双十二猫狗(淘宝和京东)大战色彩套路

京东的手机卖场主页是群青色向青莲色再向紫罗兰色过渡,这个色调是非常绚丽非常夺目的,但是运用难度稍高,因为群青这个颜色的色性有点偏离常规自然色,是色相中纯度最高的颜色。

在一副水彩或者水粉画中,其他颜色的颜料会随着时间的推移发黄,变灰,变暗淡,但是只有群青卓尔不群,依旧饱和鲜艳,所以一定在色彩搭配中谨慎运用好群青,避免太突兀,此处手法是密切联系群青的周边色,如青莲色,紫罗兰色,玫红色甚至红色,让它能融合到一片色彩中,更和谐。

可以看到主页面的背景也有一些渐变的色块,但是虚化了,不太显,只是使单调的背景有点层次,也是打破单一的群青背景色,虚化也是为了更突出前面的图案。

主页面的图案比较立体,色彩比较饱和,整体色彩从黄色到紫色的运用几乎占据了半个色相环,色差大,对比强烈鲜艳。

下图红色框框出了背景色调:

双十二猫狗(淘宝和京东)大战色彩套路

手机陈列窗口的颜色也是背景色和主题图案里提取出来的,玫红色和青莲色,每个版块的窗口  

边框还有投影,边框粗细,画册形式,黑框等变化,干扰了主要信息的传达,不如淘宝的简洁。

双十二猫狗(淘宝和京东)大战色彩套路

综上简述,发放下双十二色彩营销套路:

1、两家都用了玫红色的色调,玫红色确实适合年轻群体,能有效营造时尚新奇新鲜又美艳又热闹的气氛。但是每次双十二都这么用,无新意。

2、在主题背景色的运用上,两家不同的运用手法。

淘宝:颜色的邻近色的渐变,色相融合,过渡细腻。

京东:颜色的邻近色的对比,用大小色块来搭配使用,最后用小面积的对比色提亮。

3、邻近色是个和谐配色大法宝,在色相环中位置相近的颜色就叫邻近色。它们往往处于同一系统之下,共用相同的"颜色基因",彼此之间有着"亲缘关系"。因此,邻近色无论怎么搭配,都会显得和谐而自然。在色彩搭配中,最容易达到和谐、安静和保险的颜色就是邻近色的搭配

4、利用同色的图案,纹理或渐变来丰富背景色的细节,又能保持适当虚化。

5、京东的页面利用了空混的色彩调合方法,群青紫色和橙色黄色是对比色,将大面积群青紫色作主色,橙色黄色分割成较细小的面积并置使用,类似空混的手法,使色彩远看能混合成一体,从而达到统一。

虽然淘宝和京东的色彩搭配方案未必是最好的,但是却是常用的套路,方便上手,CMF设计师在设计的时候也可以参考,比如给产品出7个系列配色来营造色彩丰富的感觉,你是否会在色相环选择7个代表性的色相红橙黄绿青蓝紫呢,也许还有别的思路可以借鉴,利用一些邻近色到达丰富多彩又细腻和谐的效果。邻近色一般为黄橙,黄绿,红紫,蓝紫,蓝绿等,搭配上要注意冷暖。

邻近色搭配常常在自然中被找到,所以对眼睛来说,这时种最舒适的搭配方式。在使用近似色搭配的时候,一定要适当加强对比,不然可能使画面显得平淡。

顺带一提,这两天年度色草木绿满天飞,疑问声也不断,有人问到:年度色(流行色)真的会流行吗?

昨天有幸听到一位色彩专家的回答:年度色并不是这么理解,而是如何应用创造力的思想,将色彩用到合适的场景中去,年度色只是作为一个指引作用。年度色具备寓意与希望,大家应该享受颜色搭配的过程,尝试新的颜色搭配。年度色作为指引与专业建议,给人们带去谈资,去讨论这个颜色。

在双十二的色彩营销套路中,或者我们自己在产品配色过程中,评判是否是一名专业的CMF设计师,或许可以从是否享受颜色搭配过程及不断尝试新的颜色搭配来窥探,好了,以上就是双十二猫狗大战的色彩营销套路简析~