欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-15 22:51:58
号称年终盛典的双十二,风头最猛的猫狗大战,也就是淘宝和京东啦。在淘宝和京东首页上,密密麻麻的信息量各种推广各种折扣,应接不暇,双十二,各商家有什么色彩营销套路?作为CMF设... 16-12-15...

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

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

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

▼淘宝首页

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

仔细看看看

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

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

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

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

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

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

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

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

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

▼京东首页

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

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

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

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

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

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

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

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

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

▼淘宝手机卖场首页

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

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

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

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

▼京东手机卖场首页

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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