电商中的极简设计|中篇

2016090501

上篇中我们讲到了版式在简洁中的运用,这篇我们继续来分析极简设计中的色彩运用!

在电商设计中,对颜色的把控非常重要,在某种情况下对颜色控制的好坏直接影响着页面的停留时间。

一些经验不足的设计师往往会对颜色的把握非常头痛,颜色脏、配色不好看、用色过多等都是经常出现的问题。

在极简的设计中更需要对颜色做减法,并且不断的调节细微的明度、饱和度和颜色的搭配,正是这些细节的调节才会让极简的设计更加耐看。

2.让设计快速出“彩”的方法

在极简的页面里,颜色往往用的非常谨慎,而我们第一步就需要选择主色调。

这里有几种选择颜色的方法:

A、黑白灰主色调+亮色辅色;

2016090502

通过提取出的颜色我们可以看到,上面的页面设计中采用了黑白灰做为主色调,使用亮黄色为辅色,虽然亮黄色为辅色,但是人们第一眼往往会注意亮黄色,而设计师把70%off的折扣信息的字体颜色选为亮黄色也是对折扣信息的强调。

2016090503

耐克和小牛电动车的页面设计的颜色选择都是使用了这个方法,并且小牛为是让画面不单调,背景使用了素色黑白灰的一些图形元素,这样既让画面丰富起来又不会使颜色过多而显得杂乱。

B、选择商品主色调作为整体画面的主色调;

2016090504

上面的图是Motox的网页设计,页面的主色调(背景色)使用了手机背壳的颜色,这样可以强调商品色彩,给购买者留下非常深刻的印象。

2016090505

2016090506

2016090507

耐克的设计同样是采用这个方法,一般来说厂商想要特意推爆款会选择一种爆款的颜色或配色,而耐克这样设计的页面也是更好的展示了这个商品的独特的特点,让人们在任何地方看到这种颜色都会回想起耐克的这款鞋。

C、使用的颜色不要超过3种。

通过上面的案例我们发现,这些设计师所用的颜色都不会超过3种,而做为极简设计有时候只使用2种颜色,甚至只用黑白灰的变化来进行设计。

2016090508

2016090509

2.看似很复杂的颜色搭配其实很简单

在极简设计中,颜色的搭配需要非常用心,因为画面的颜色搭配简单时,即使稍微有点不协调也会被放大很多,因此我们需要了解颜色的几个属性:色相、饱和度、明度,还有对比色、相近色等概念。

对于极简设计的配色也有几个方法:

A、  统一明度和饱和度;

下图中的明度和饱和度非常协调,既不觉得哪个颜色过亮也不觉得哪个颜色过暗。虽然是不同的颜色,但是整个画面也是非常协调统一的,我们现在分析一下画面的颜色。

2016090510

我们来看一下,上面4个圆形中的颜色是我从图片中提取出来的,

2016090511

下面4幅图是颜色的位置和参数,主要看颜色的位置,就是每幅图的圆圈位置,我们看到图中有两条线,这两条线就是代码这4个颜色的明度,可以看到绿色和橘色的明度位置非常相近,黄色和深蓝色的明度位置也很相近,绿色和橘色占整个画面的绝大面积,因此整个画面看起来是非常协调的。

而饱和度就是越接近色板的右上角饱和度就越高,我们看到除了深蓝色,其他3种颜色都处于饱和度比较高的位置,并且位置比较靠近。

2016090512

2016090513

大家可以用这两幅设计来实验一下,自己亲手解构一下配色的明度和饱和度。而我觉得做为设计师对于颜色的细致理解是非常有必要的。

B、控制颜色的层次;

所谓颜色的层次我们依然用小牛电动车的图来分析,可以看到所有的颜色都提取出来后圆形中的颜色。

2016090514

这样我们很容易的就能看出来颜色的层次,灰色系有7个层次,而红色系有4个层次,正因为这样的层次让整个设计显得非常丰富,并且有立体感而不至于太“平”。

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部