电商最常用的5个色彩搭配技巧!

不知道大家有没有发现一个规律和现象,就是国内无论是综合电商平台还是垂直型的电商平台亦或是导购平台的品牌色一般都是红色系或暖色系的,而红色占了大边天,其次是偏女性化的玫红色/粉色,再或则是橙色黄色等,我挑选了一些电商平台的品牌logo给大家看下:

同时,在一些大型的活动专题页设计里,红色也应该算是电商设计里运用的最为广泛的一种颜色了,但其实很多人对红色该在什么时候用,或者该怎么用依然很缺乏了解,红色用的好则是兼大欢喜,用得不好要么会显得俗气和不干净,或者会显得页面很压抑很腻。

1. 红色的释义

从性格色彩的层面来说,红色代表热情/热闹/刺激/欲望/奔放/喜庆/血腥暴力;

从颜色的层面来说,根据色相/明度/饱和度的不同红色也分很多种红啊,比如大红/深红/品红/粉红/枣红/朱红/橙红/紫红等等;

从作用的层面来说,红色代表危险警示/突出强调/错误提醒/性刺激/公布喜讯等等;

2. 红色在电商设计里的运用

正是因为红色有以上的感官刺激作用,所以它常运用于一些要体现喜庆/热闹/激发别人欲望/或者要体现恐怖情绪的电商或海报设计里。同时红色也常用来作为点缀色出现,以强调某个重要信息。

喜庆节日:

红色代表喜庆热闹,所以常用在中国的各种喜庆的节日促销电商页面里,比如国庆/元旦/春节等重大节日,基本都是以红色作为大背景主色。

但是也有比较克制的性冷淡的。。。即使是周年庆也只用一点点红色意思一下。。比如网易严选这次的1周年庆活动页设计,不过这跟网站自身的品牌调性有关啦(就像一个人的性格一样,她本身只愿做个安安静静的美女子,又怎么会留恋尘世间的喧嚣呢?):

国外的喜庆节日:圣诞节

圣诞节当然也是少不了红色,而且还是红配绿(不过每年都是看红配绿也会视觉疲劳,所以很多设计师会通过加入一些其他颜色,或改变一下它们的明度/饱和度/纯度,或采用不同的质感纹理和表现手法给用户多一些新鲜感,比如手绘/合成/手工/三维建模之类的表现形式)

体现时尚个性:

红色常用来作为辅助色或点缀色,用来突出强调某个重要信息的,比如突出强调利益点/购买按钮等信息:

产品本身就是红色时:

其实任何类目任何产品都有红色系列,比如/家电数码/服饰鞋包/美妆护肤等,如果干脆将背景也弄成红色与产品融为一体,会带来非常强的视觉效果,而且不会觉得腻:

3. 与红色有关的常用色彩搭配有哪些?

红色是很热烈的颜色,是暖色,也是一种百搭色,但并不是每个人都玩得好它,可它偏偏又是电商设计里用的最为频繁的一种颜色,那么今天我就给大家例举一些常用的优秀的红色与其它颜色的搭配好了:

左边是大面积的红色搭配少许相近色或邻近色显得很高档耐看;右边是大面积的粉嫩色系搭配少于红色和蓝紫色,冷暖搭配,俏皮又耐看。

当红色与这种偏灰的渐变色搭配时,画面立马变得柔和清新脱俗起来。

红色与蓝白黑灰永远都是经典搭配,既可以制造一种复古的感觉,也能给人一种冷静与激情的相碰撞感觉。

红色与青色或与绿色搭配,再加上一些俏皮的构图或点缀,会显得画面非常干净清爽。

红白黑搭配,时尚又经典,不过要注意红色的比例。

在大面积的浅灰色里,只需要点缀少许红色,就可以制造出一种静谧又不显单调的感觉了。

无论你的背景是简单还是复杂,当红色块面积足够大时,它依然会成为焦点。

4. 当红色运用在不同的质感纹理或形状环境时会怎么样?

虽然同样是红色,但是当它运用于不同的形式载体/纹理材质/周围情境时,所传递的感受是不一样的,举例:

红色的带棱角形状VS红色的圆形,哪一个更硬朗,视觉上更咄咄逼人?

红色周围是无彩色VS周围是多彩色,谁更突出?谁更有氛围?

5. 红色的使用禁忌或注意事项有哪些?

(1)红色作为暖色运用在页面里的时候,画面里切勿全都是暖色系搭配,适当加入一些冷色或无彩色(黑白灰)点缀可以缓解视觉疲劳;

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

对比:

(3)切勿大面积使用太过艳丽或太过暗沉的红色,比如阿里年货节的这个页面,原图是这样的

呐,上面那张设计稿如果是用的很艳丽的红色,如下图所示,是不是很刺眼很不舒服无法直视了啊?

如果用的是很暗淡的红色,如下图所示,是不是看起来就很脏毫无继续看的欲望了啊?

所以有的人可以把红色用的很高档,但也有很多人红色用不好,要么太刺眼了,要么太暗太脏显得廉价,其实很大部分原因就是因为你的明度/饱和度/纯度没有把握好啦。

(4)电商设计里其实很少会用到纯度为百分百的红色,因为会显得很腻很刺眼,这时候不妨将红色向玫红色偏一点,或向橙色偏一点,再或者偏白一点偏暗一点,总之你可以自己去尝试,按需选择合适的红色就好。

5)当你的红色不得不与对比色或互补色搭配使用时,最好是能加入一些调和色彩(比如黑白灰),就像下面的百事可乐的logo的红白蓝搭配,这里的白色就是起到了调和的作用啦:

大自然的调色板是UI设计中配色的好方法

在我们的生活中,最美丽的东西是什么?对我来说,那是大自然,大海、山川、森林、草原、鲜花和动物们。世界上有很多好的风景画,它们是人们用手绘制的更带有冲击力的东西。

当人们还惊讶于这样的风景、艺术、设计等的灵感时,历史上的艺术家们已经开始从自然景色的配色中为自己的绘画、雕塑、家具等作品寻找灵感。

在本文中,学习如何使用自然色的组合来进行UI设计,我会介绍我的想法。首先,让我们来看看这篇文章的缩略图封面。许多漂亮的颜色组合成为协调一致的外观。

在设计时,考虑配色并尝试一些新的颜色的组合是一件十分有价值的事情。很多的花还有鸟等动物有美丽动人的颜色,它们的魅力可以激发更自然的设计灵感。

例如,为了联想到苹果,使用2个红色的色调,可以唤起积极的情感。使用不同的颜色可以表达无限的情感和感觉。红、绿、蓝色等数值的表达,电脑上也可以反映出来。

事实上,使用颜色选择器找到合适的颜色是真的很难。自然的照片是优秀的设计灵感,有助于学习颜色的协调以及其他更多的东西。而且不使用颜色选择器,把风景、植物、花、天空的照片作为参照来找颜色的组合说不定会比较简单。

 

材质设计的配色调色板

 

个人非常喜欢谷歌提出的材质设计的原则,这些出色的模板和形状,让我在工作时萌发更多的灵感。intro-to-natural-palette-2

材料设计的配色调色板是好的,但这并不意味着所有颜色顺利的组合。例如材质设计中的卡片式布局,实际上要使用鲜艳的颜色组合,这是比较困难的。

当为Android平台设计APP时,就要遵循Android平台的设计原则和规范,然后在调色板上选择适合的颜色来使APP变得更独特。将自然的配色作为灵感引入,可以确认基本的颜色组合。

一、基本颜色(Basic Colors)

intro-to-natural-palette-3

谁都知道 彩虹的七种颜色,问题是,哪个颜色更合适呢?例如,绿色容易喝什么颜色进行组合?想知道的话,就参考上述样品看看吧。美丽的黄色、红色、蓝色的花,需要不同色调的绿色来组合,亮黄色和深绿色的相容性好,橄榄绿色与鲜艳的红色有适合的缘分。

红色和蓝色组合怎么样?这里的色彩非常重要。火红的夕阳沉入大海多么美丽?大家也知道吧。彩霞的样子是很明亮的红色和蓝色的组合是可以理解的。慢慢自然的可以找到很多精彩的颜色组合。

 

二、色调(Pastel Colors)

intro-to-natural-palette-4

使用鲜艳的颜色是现在的趋势,但柔和的色彩也不能忘记。纤维、壁纸、家具、绘画、自然的装饰品等,19世纪时的法国的设计,使用柔和色彩的例子很多。

没必要总是使用干净明亮的配色,柔和的设计是不太受欢迎,总是觉得缺了点什么东西,这些配色方案很好的配合实现了更自然的外观。

 

三、颜色的组合(Combinations of Colors)

intro-to-natural-palette-5

观察南国的花、鸟等动物的照片,可以发现很精彩的色彩组合,并且独特而美丽,有趣的是根据大自然指引的配色方案来创造东西,个人觉得是个不错的主意。

独特的颜色组合,可以让人对APP和网站的印象更加深刻,可以完成个性化。产品中,配色是最重要的因素之一,这将是让人们深刻的记住设计的一个点。

 

挑战的课题

大约一年前,利用自然的配色这个点子,真的帮助完成了许多工作,所以我下定了决心写这篇文章。

使用大自然的配色制作了几个例子来跟大家分享一下,UI设计中如何使用自然配色来找到灵感的方法,大家一起来看看吧。

Part1:卡片式布局

就个人而言,在材质设计中最喜欢的是卡片式布局,并且由于它的形状可以很好的平衡内容,所以在设计中也经常被使用。

intro-to-natural-palette-6

但材质设计中的配色方案,颜色都比较明亮,所以有时候也会难以搭配。这个时候就利用大自然的调色板来重新设计卡片式布局吧。

重新设计的注意事项:

首先从笔记本电脑上开始,这是一个很好的例子,为了布局合适,你需要创建一个更好的调色板。

在现有的笔记本电脑程序中,追加自然调色板。不过有一个问题,不能使用过于鲜艳的色彩,例如,当你使用的调色板与材质设计中的500号亮丽的颜色相冲突时,就不能使用。

有一个解决方法,联想一下花坛吧。花坛中有许多不同的花,他们是怎样和谐的组合到一起的呢?并不是每个的用色都很清新,有些是不完整的灰色,有些是明亮的颜色与暗色混杂在一起。

intro-to-natural-palette-7

上图中,右边的是进行重新设计过后的图。为了与其他颜色更好的配合,所以以绿色为主色,然后从花鸟中观察,采用大自然的调色板来组合。有时绝对想不到极好的颜色组合中有鸟,通过仔细观察自然,你会发现很多配色的灵感。

intro-to-natural-palette-8

 

Part 2:圣诞节相关活动

我的下一个挑战是,采用材质设计中的卡片式布局与自然配色结合来设计APP中的圣诞节活动,有时,固定的配色在特定的活动中使用可能看起来不太好,如何在圣诞节的情况下找到最佳颜色呢,有一个方法。

intro-to-natural-palette-9

首先,参考了一下几张圣诞节的图片,深绿色的圣诞树、红色的圣诞老人服装,橙色的柑橘,樱桃拌饭调味料的上船还有巧克力蛋糕上撒的金箔等相关颜色,然后组合这些颜色,做了一个分类卡片式布局,如果没有图标和标题,通过这些多彩的卡片,让人联想到圣诞节。

特定的活动,经常会有特定的颜色和象征,通过仔细的思考,就会设计出与平凡设计不一样的好的设计。

intro-to-natural-palette-10

 

 

Part 3:夏季活动

最近越来越冷了,大家都期待着圣诞节,不过,赤道南侧却还在炎热的夏天。在下一个项目中,我们已经设计了一个最适合澳大利亚度过夏日的应用,在这里除了沙滩、克鲁斯、聚会、冲浪等活动以外,还有在世界上只有在这里存在的动植物也能看到。

intro-to-natural-palette-11

每个季节的自然的颜色都有很大的不同,比如,夏天容易联想到鲜艳的颜色,如果仔细观察照片的话,会注意到因为受太阳的影响,会有很多黄色。而冬天,全是雪和冰的印象,如发光般的苍白。

夏天的配色是积极的暖色调,这里参考鲜花和水果的配色作为灵感。对你来说,夏天的配色是什么呢?对我来说,会联想到绿色的茂密森林和蓝色的大海、金色的沙滩、粉色的鸡尾酒派对,还有黄色的太阳。

intro-to-natural-palette-12

 

怎么样?UI设计中利用大自然的调色板的好方法已经介绍完了,以自然为理念,寻找美丽的色彩。

原文链接:http://photoshopvip.net/96978