黄色在电商设计中的玩法与禁忌【设计干货】

写在前面

我最近在写一系列关于色彩的文章，之前已经写过红色和黑色在电商设计里的运用，而我今天想要给大家分享的是你们最喜欢的颜色——黄色在设计当中的运用~

而说到黄色，你会想到哪些品牌呢？比如我会想到站酷、ofo小黄车、麦当劳、法拉利等，虽然他们是完全不同的4个品牌，但他们的主要用户群体无不都是心理上比较追求年轻活力的一类人，他们乐于接受新鲜好玩的事物。

而反观各类传统企业或国企却基本不会使用黄色，而是以蓝色、红色为品牌主色，这类企业给人的感觉也多是严谨严肃沉稳的，比如大家可以留意一下各大银行的logo和品牌形象。

而电商的玩法则是传统思想＋新兴互联网思想的结合体，这里面存在着无限种可能，所以也基本没有不适合运用于电商设计里的颜色，而黄色也是除红色以外得到了非常广泛运用的一种颜色，接下来，我们一起看看，黄色在电商设计里都有哪些奥秘和玩法吧！

按照惯例，我先给大家列一个提纲：

• 黄色的释义。
  
• 黄色在电商设计里的运用。
  
• 与黄色有关的常用色彩搭配有哪些？
  
• 黄色的使用禁忌或注意事项有哪些？

接下来我们一条一条来解说吧，let’s go！！！~

一、黄色的释义

从性格色彩的层面来说，好的方面：黄色代表年轻／活泼／希望／辉煌／开朗／智慧／忠诚；不好的方面：黄色代表懦弱／怒气／欺骗／幼稚；

从颜色的层面来说，根据色相／明度／饱和度的不同红色也分很多种红啊，比如柠檬黄／橙色／橘色／芥末黄／嫩黄／金黄／土黄／屎黄／米黄色等等（与黄色有关的颜色我都统称为黄色系）；

从作用的层面来说，不同的黄色可以代表预警提示／突出强调／辉煌荣耀／暴力倾向／勾起食欲／增加快乐氛围等等；

二、黄色在电商设计里的运用

正是因为黄色能给人这些不同感官刺激作用，所以它常运用于一些要体现食欲／青春活力／时尚潮流等类型的电商或海报设计里。同时黄色也常用来作为点缀色出现，以强调某个重要信息，使用频率极高。

比如常运用于以下类型的页面设计里：

1、传统喜庆节日

像春节／国庆节这样的传统喜庆节日，经常都会红色和黄色同时出现，这跟中国传统文化习俗有关，比如我们会联想到大红灯笼／烟花爆竹／敲锣打鼓等等事物，所以页面设计里使用相似的色彩搭配容易让人感觉到相似的节日氛围。

通常是以红色为主色，黄色多以辅助色或点缀色出现：

2、颁奖盛典

很多比较重量级的颁奖典礼或音乐庆典都喜欢用金色，一来显得活动隆重含金量高，二来可以体现嘉宾和观众的尊贵（当然了，这些都是美好愿景，实际是不是也要看实际情况了，而这种类型的设计在这时候起到的作用就是拔高活动形象和活动意义）：

3、儿童节

之前我就写过儿童节的方向是很多的，不止是面对小儿童，还有的是面对大儿童的，虽然他们的定位方向不一样，但页面设计里采用鲜艳明亮的颜色搭配Q弹的充满活力的萌物形象确实更容易激发女性的母爱／长辈的保护欲／还有成年人的童心，所以愿意为孩童或为自己内心的那个孩童买买买啊~

4、美食节／吃货节

不知道大家发现没有，很多诱人的水果、零食、美食、都是黄色系的，比如橙子、柚子、面包、金黄金黄的蛋炒饭、蜂蜜、蛋糕、爆米花、蟹黄、芝麻油等等，想起来都口水直流是不是？除了实物本身就是黄色以外，还因为黄色橙色是可以激发人的食欲和内心躁动不安的情绪的，所以你会看到在很多零食包装、快餐店、美食活动页的设计上基本都会黄色系的运用~目的就是为了让你快速产生购买决策：

5、夏季活动

夏天我们会想到什么？一方面是现实的炎炎烈日，炙热的太阳，所以会想到橙色的太阳，但是另一方面是期待的酷爽、冰镇的感觉，我们会想到海滩和冰块、柠檬茶等等，所以当然也有一部分人喜欢用蓝色去提现清爽，最后也有人将两者结合起来，打造冰火对决的感觉~

6、卖场促销

商场做促销活动／电商平台或店铺做大促的时候，比如双十一／双12／618等，几乎都缺不了黄色，无论是作为主色还是作为辅助色点缀色出现（主色为占面积最大的颜色，其他占比相对较小的颜色则为辅助色或点缀色）。

7、体现潮流时尚

黄色作为一种非常醒目的颜色，给人一种尖锐个性张扬的感觉，所以也深得潮流时尚类型设计的偏爱~

8、突出强调某个重要信息

黄色也常用来作为辅助色或点缀色，用来突出强调某个重要信息的，比如突出强调利益点／购买按钮等信息：

如果产品本身就是黄色时常常会与黄色相关的物品或背景联系起来，充满趣味和创意：

三、与黄色有关的常用色彩搭配有哪些？

黄色是很张扬、活力、刺激的颜色，是中性色（也有人说它是暖色），也是一种百搭色，基本与任何颜色都有一腿~那么今天我就给大家例举一些常用的优秀的黄色系色彩与其它颜色的搭配好了。

举几个例子：

运用在大量留白的简洁无彩色背景上，整体画面都会显得非常干净通透。

高明度低饱和度的颜色搭配嫩黄色，少女心满满的，特别适合针对少女心定位的页面设计~

在蓝色系大背景里，只需一点黄就能成为焦点，因为蓝黄是对比色（120度角），所以在页面里常作为重点信息突出展示~

虽然同样是蓝黄搭配，但是在不同的蓝色系里，整体呈现出的感觉是不一样的，蓝色越暗，黄色越突出，整体越刺激眼球。

同上~

黄色系作为大背景的时候，整体画面相较于上面的蓝色紫色背景更加温暖有食欲~这种颜色搭配适合用在食品类或者热闹促销或儿童玩具等需要体现活泼热闹的页面上~

在低明度高饱和度的多彩色彩环境里，黄色也很容易脱颖而出~不过这种显色搭配相较于前面提到的几种都略显沉闷，用不好的话会显脏，用得好也不会感觉很高级，适合中低端定位的产品或页面设计。

依然是黄色做大背景，暖色为主，点缀少量冷色~这种色彩比例搭配比上图看起来更加愉悦~

大面积黄色或同色系做背景，仅点缀少量对比色或互补色，来突出想重点展示的信息，整体看起来干净舒服～

下图虽然都是不同明度纯度黄色系和蓝色系的色彩搭配，但是前者明度高纯度高，所以显得有精神气儿，后者明度低纯度低则显得更佳复古怀旧~

下图的颜色搭配也都是比较有年代感的~但前者感觉更有亲和力~因为暖色系占比比较大。

下图的暗调子的番茄炒鸡蛋的红黄搭配容易给人一种复古温暖的感觉，但为了画面不至于太腻歪，最好是像右图一样搭配一点冷色或暗色比较耐看，把控好色彩比例既可以做出高端的感觉，也可以做出低价促销的感觉。

有几张黄色的日本海报设计也挺不错～

还有一点要说明的是，黄色跟红色一样，或者说任何颜色，它运用于不同的形式载体／纹理材质／周围情境时，所传递的感受是不一样的，这个我在之前的一篇讲解红色运用的文章里已经举例说明过。

那么它们具体运用在电商设计里是什么样一个情况呢？我在花瓣找了一些还不错的运用了黄色的页面给大家看看下（我以自己的语言给大家分析一下，感谢所有设计者，分析的不对的地方还望指正）：

左边是借鉴了蒙德里安的红黄蓝印象派风格的不走寻常路的时尚类型页面，右边是典型的为了激发消费者食欲和提醒热闹氛围的促销型页面设计：

左边是明亮活力的色彩搭配加上手绘点缀，营造出的是比较活泼搞怪风格的页面设计，右边虽然是以红黄搭配为主，但是因为其扁平化的设计风格加上趣味图形点缀所以让页面看起来也比较年轻化，不会太老气，所以红黄色搭配好也是个技术活啊~

虽然左右两个页面色彩比例大不一样，但都是可爱手绘趣味路线的，只是黄色或暖色的面积越大，画面就越活泼越有亲和力~

下面2个页面的色彩搭配和质感纹理都带有一点复古的味道，不过右边色彩纯度更高，更显少女一些，符合产品类别需要~

左边页面玫红／黄橙／天蓝色的丰富色彩搭配配合趣味手绘，整体好玩有活力，适合孩童相关产品的活动页面设计，右边扁平简洁，配色干净，非常日系。

左边也是儿童相关物品的活动页设计，色彩比较丰富，黄色在这里显得非常亮眼，提升了整体的活跃氛围，右边的色彩搭配和风格形式走的是复古路线，体现年代感，不过这里的色彩和质感不如前面几个页面的复古味逼真~

左边的简洁时尚页面，黄色只是做点缀色氛围需要出现一下～右边香槟金搭配暗红色背景虽然很抢眼，但是却不突兀~大概是因为丝带这类物品本来装饰性就很强~

发现红黄蓝是最常出现的颜色搭配，只是简单改一下明度或纯度就可以打造不同的感觉了，如左边专题所示，右边米黄色大背景和整体低纯度低饱和度的配色则显得有年代感，充满回忆~

金色常与盛典联系起来，如左图所示，右图我好像放重复了，哈哈哈先这样吧

左图又是明亮的黄蓝搭配，一看就是与儿童相关的活动页面设计，右图黄白黑搭配色彩非常简洁，但是搭配小巧玲珑的手绘，却显得画面非常生动不单调，有一种萌萌哒的感觉~

黄黑搭配，高冷又不单调，页面风格比较男性化～

好了，我先整理这么多吧，你们可以根据自己的理解需要来学习别人的长处。

四、黄色的使用禁忌或注意事项有哪些？

1、黄色跟红色一样，作为暖色运用在页面里的时候，画面里切勿全都是暖色系搭配，适当加入一些冷色点缀或无彩色（黑白灰）调和可以缓解视觉疲劳；

蓝色系＋金色＋黑白灰的组合也非常漂亮~

2、无论何种颜色，它在整个画面里的占比都是根据设计需要而决定的，而不是瞎搞，比如，无论你是要弱化某一个信息还是突出某一个信息，都可以根据选择颜色和控制它的比例大小来实现，讲直白点就是要懂得运用对比和烘托的手法；

对比：

烘托氛围：

对比和烘托：

3、在黄色背景上做阴影图层时，切勿直接用无彩色灰色或黑色进行正片叠底混合模式（如图1），这样做出来的阴影看起来会很脏，而应该用添加了灰色或黑色的黄色进行正片叠底混合模式（如图2），这样做出来的阴影干净又通透：

（图1）

（图2）

不信大家可以对比看下阴影1VS阴影2的效果，你们自己也可以试试，很多人平时做的图看起来很脏，往往就是这些细节原因导致的。

4、不要在浅色背景上用高明度或高纯度的柠檬黄做重点文字信息的颜色（如果是装饰或点缀用就无所谓了），因为根本就看不清（如下图所示），我前几天还看到有一个比较知名的平台的某个界面设计里居然就犯了这种错误，着实不应该啊。

5、如果面对的客户是思想比较传统保守或信风水的老版，则切勿使用黄色作为主色，一方面显得太过张扬不严肃，另一方面寓意不太吉利，因为我们日常中常有“这事儿可别黄了”这么个说话，比如你看哪个国企单位或者政府机构的网站设计用黄色了？最多也就用金色或偏点红的暗色系。

说到这个，我想起刚毕业那会儿，给朋友的朋友做了一个汽车logo，当时我根据自己的想法做出来后，个人还比较满意，特地用rhino渲染出来的，一款比较man比较硬朗的汽车logo，但是客户看了之后回复说，这logo看起来像一个“X”，叉叉这个形状感觉不吉利。。。然后就没有然后了，可是你看马斯克的space－X不是很酷嘛？所以适不适合还是要因人而异了（当然，最后他也没给我支付一分钱报酬，过去的坑谁还没踩过几个呢）。

封面作者：Fran Rossi

做设计的面条（公众号）

作者：TTTing