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

所属分类: 平面设计 / 平面其它 阅读数: 1887
收藏 0 赞 0 分享

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

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

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

▼淘宝首页

仔细看看看

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

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

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

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

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

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

▼京东首页

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

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

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

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

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

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

▼淘宝手机卖场首页

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

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

▼京东手机卖场首页

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更多精彩内容其他人还在看

平面设计中色彩搭配技巧与理论分析

在做平面设计的时候,颜色搭配很重要,该怎么掌握色彩搭配技巧呢?下面我们就绕着「色相」这一变量展开,主要和大家一起分享有关色彩研究的专业术语、以及心理现象,需要的朋友可以参考下
收藏 0 赞 0 分享

LOGO设计中的常见误区和LOGO设计思路及流程全面解析

本教程将为大家全面解析LOGO设计中的常见误区和LOGO设计思路及流程,主要介绍LOGO设计中的一些常见套路和设计思路以及一些方法,理清思路,LOGO设计没有你想象的那么难
收藏 0 赞 0 分享

每个年轻平面设计师都需要知道的10件事

每个年轻平面设计师都需要知道的10件事分享给那些刚入门的新手设计师, 这10件事包括别让设计成为黑匣子,融入团队,提早获得反馈,负责到底等
收藏 0 赞 0 分享

淘宝活动页面设计思路 从0开始全面解析

淘宝活动页面设计思路,从0开始全面解析分享给脚本之家的各位平面设计学习者,内容主要分为什么样的页面算得上是活动页面,量身定制适合自己店铺的活动页面和案例解析三大部分
收藏 0 赞 0 分享

一个好的用户界面设计应该注意的75个原则

一个好的用户界面设计应该注意的75个原则分享给脚本之家的各位平面设计学习者,这些用户界面设计原则主要是1. 使用单栏布局代替多栏布局,2. 使用礼品诱惑代替生硬的推销,3. 合并重复的功能避免分散等等
收藏 0 赞 0 分享

可能毁了你内容的7个必知设计错误

一些设计错误可能会破坏你的内容,导致用户放弃继续停留在你的网站,或失去对你提供有用信息的信任感。如果你不及时修正可能很难恢复他们对你的信任,下面为大家介绍可能毁了你内容的7个必知设计错误,来看看吧
收藏 0 赞 0 分享

6种独特的网页导航设计模式分享

如果你的网站是更加偏向实验性的小网站,有趣而好玩的导航模式,反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式,下面为大家分享6种独特的网页导航设计模式,来看看吧
收藏 0 赞 0 分享

交互设计师如何说服产品经理取消底部的导航栏?

最近设计了一款产品,我将线框图给交互设计师,后来交互给我的原型与我之前给他的线框图差别很大,交互说从用户体验的角度应该这么设计,并坚持自己的想法,所以今天想要大家介绍交互设计师如何说服产品经理取消底部的导航栏方法,来看看吧
收藏 0 赞 0 分享

设计师必看:2017年设计师最应该掌握的设计方法

学习新事物永远都不晚,尤其是在设计领域。时时学习、进步,你将成为设计领域下一颗闪耀的新星。下面为大家介绍2017年设计师最应该掌握的设计方法,来看看吧
收藏 0 赞 0 分享

如何进行个性化设计呢?25个经典案例解析个性化设计的奥秘

如何进行个性化设计呢?Aarron Walter便掌握了这门艺术,他在Smashing杂志中谈论了个性化设计如何与用户和消费者产生持续联系,他强烈建议设计师“把个性融入设计的核心内涵中”,并分享了适用于产品和品牌的个性化设计技巧
收藏 0 赞 0 分享
查看更多