电商视觉设计干货之极简设计
电子商务经过几年的发展沉淀已经逐步趋于成熟，并且有的店铺已经发展出了自己的模式和风格。但是对于电商的设计风格大多数店家还停留在最初的商品堆砌+信息文字+各种杂七杂八的效果。而这两年各个电商公司已经开始重视平面视觉的设计，而且设计风格也逐步走向简洁乃至极简风格。这种变化是随着电商的不断发展，更加重视产品的质量而进化的。

下面从3个方面来讲一下如何做极简设计，三个方面里面每一个都会有一些具体的知识点。先看一下极简设计的案例：

这个是锤子T1的页面设计，虽然有很多人不喜欢老罗，但是我觉得老罗他有一种对设计完美主义的偏执，无论是从手机外形还是系统的UI设计，我觉得作为设计师都应该多向他学习一下。回到咱们页面设计的本身，我们来分析一下设计。

一、精致的版式

大家从开始画画的时候就接触和学习了构图。而构图就是版式设计的基础，然而我们往往会忽略了对于构图和版式的极致追求，我们一般总是会说，差不多看着舒服就行，可是对于我们设计师的能力晋升我们还需要更加重视版式的设计。

下面几个版式设计的技巧：

1.对齐—最基础也是最重要的

上面ABC是重新设计排版，D是原有设计。虽然总体看来都还不错，但是我们仍然可以直观的看出A的构图有点头重脚轻，让人感觉重心偏下；B手机的主体对文案有挤压感，让人感觉压抑。C的手机主体和文案成90的夹角，让人感觉有阻碍感，不够顺滑。D的设计就很好的协调了产品主体图和文案的关系，并且给人一种从远至近的距离纵深感。整个画面中间对齐更能最大限度的突出产品主体—手机。

我们再看几个中间对齐的例子：

上面的这个设计也是用的中间对齐的方式，大写的V视觉冲击力非常的强，而左边的logo信息和右下角的信息成对角形式，让人感觉整个画面十分的平衡而又稳定。

小米15年的新品发布会海报也采用了这种中间对齐的方式，让观看者很容易视觉就聚焦到中间“新年礼物”四个大字上面了。

下面图例是左右排版的方式：

由此我们总结出对齐版式的几个特点和作用。

①.视觉聚焦；

②.强化页面统一性和条理性；

③.对视觉的导向作用。

2、对比—让画面不再平凡

作为简洁乃至极简的设计风格来说，对比非常的重要，对比可以让人们快速的阅读到重要的信息，也可以让板面的设计更有节奏感，让画面看起来不乏味。

上面的设计师小牛N1和一加3的设计，这两个设计师典型的左右排版。右面放产品主体图片，左侧排列简单而有用的的基本文案信息。而左右两边的图片和文案信息的大小对比要根据产品属性来决定的。例如，一加手机主要突出产品的质感和外形，所以放置2个面积较大的产品，搭配最基本的文案信息。

上图是文案和产品的面积对比

这个设计则与一加和小牛相反，文案面积特别的大，但是我们的视觉中心是手表，因为实物的照片往往会更加吸引人，这就是对比。但是还有一点不知道大家有没有发现，就是文案里面的对比，标题选用大而粗的字体。其他信息则放的很小，能又快又准的看清标题内容，另外因为字体的大小和粗细变化让人感觉很有节奏感。

3、有“气质”的留白

极简设计中留白是非常重要的。最典型的是无印良品的设计，它是把留白设计应用到现在设计最好的案例。

下面我们做一个留白的设计对比，我们把图上一些不必要的修饰背景和文案剔除。主要是让产品主体和主要文案信息展示的更加清晰和明确。

再做更进一步的精简，增加留白面积，是产品主体和产品信息更加清晰的表达出来。

怎么样，是不是要表达的意思一点没变，整个画面看起来更加高端大气了。

下面咱们看一下其他案例，我们可以试着自己分析一下，注意留白不一定是白色的。

二、精致的颜色

在电商设计中,对于颜色的把控非常的重要，在某种情况下对颜色的把控的好坏直接影响着买家在页面的停留时间。一些经验不足的设计师往往会对颜色的把控非常的头疼，颜色脏、配色不好看、用色过多等等都是经常出现的问题。在极简的设计中更需要对颜色进行减法，并且不断的调整细微的明度、饱和度和颜色搭配，正式这些细微的调整才会让极简设计更加耐看。

1、让设计快速出“彩”的方法

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

这里有几种选择主色调的方法：

A黑白灰主色调+亮色辅助

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

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

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

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

耐克的设计同样采用了这种方法。

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

通过上面的案例我们可以发现，这些设计师所用的颜色都不会超过3种，而作为极简设计有时候只用到两种颜色，甚至只用黑白灰的变化来设计。

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

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

A、统一明暗度和饱和度

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

我们来看一下，上面的4个圆形的颜色是我从图片中提取出来的，下面4个图是颜色位置和参数，主要看颜色的位置，就是每副图片圆圈的位置。

我们看到图中有两条线，这两条是四个颜色的明度，可以看出绿色和橘色的明度位置非常接近，黄色和深蓝色的明度位置也相近，绿色和橘色占整个画面的大部分面积，因此画面看起来非常的协调。

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

B、控制颜色的层次

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

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

三、考究的字体

文字在极简电商设计中的位置及其的重要，它承担着直观的信息传播的用途，例如活动页的折扣信息、商品宣传页的卖点信息、商品的优惠价格、文案内容的表现等。而在极简设计中，字体的选择更为讲究。

1、选用符合整体设计风格的字体

字体也是有自己的外貌、性格、风格。当字体的风格与设计完美的融合在一起的时候，会给整个设计加分。

我们仔细的观察这两张图，眼镜、相机、与字体的关系眼镜盒相机的款式比较复古,有种民国时代的感觉，因此设计师选用了一种比较仿古字体来搭配图案，给人统一性的感觉。如果我们把图中的字体换成比较现代艺术的字体会呈现什么样的效果呢？

换了字体后可以看出，虽然每个字体单独看着还不错，但要与配图放在一块就感觉非常的不搭，立刻失去了文案和图片想要传达的那种“工匠”的感觉。

英文的选择也是如此，看上图,英文的animalprints是动物图案的意思，你会发现右侧女性应该穿着一条连衣裙，因此，我猜测这是卖女性服装的一个Banner，而且是属于比较成熟的那种。因此，在选择字体的时候应该选择偏细腻柔美的字体，而不是粗黑体。来大家看一下粗黑体，感觉是不是差很多？

下面再看几组图例，大家试着自己分析一下。

2、选用字形结构简单的字体

这几年出现了一些结构复杂，字形及其夸张的字体。个人认为尽量少使用甚至不使用。字体是一门非常专业的门类，很多的设计师还不能很好的驾驭一些字体，无论是普通的电商设计还是极简设计最好使用的字形和结构都相对简单的字形。

这个设计可以看到整体基本上都是以文字为主体的组合设计形式，无论英文还是中文，都使用了字形非常简单的字体,加上字体本身的大小粗细使画面非常有节奏感，而且还不会觉得全是字。从这里我们可以引出另一个理论，在某些情况下字体即是信息表达的载体，又是一种艺术图形。

下面我们来看一下反面教材：

这里我们先不说这个专题设计的构图、颜色，只说文字，除了9.9元比较明显的突出卖点以外，其他基本上非常的杂乱，字体的字形上也被改的面目全非。因此，我提醒大家，在没能力把握字形的时候千万不要自己随意修改甚至设计字头。

下面我们再看一下竞相模仿的苹果：

苹果是比较“牛”，为了自己的产品设计了一套字体，刚开始被一些人说各种丑，但是还是被大多数人接受并获得了好评，原因无非就是好用。这也是现在这个快速发展的社会最需要的，尤其是日益更新的电商行业。

3、“牛叉”的中文字体

这里说中文字体“牛叉”，不仅仅是因为我是中国人，我们可以数数中国有多少种字体。每种字体都有自己的历史背景，例如隶书，在古代平民是不能用的，魏碑是专门刻在碑体上的字体等等。而且中文也是唯一一种成为艺术的文字—书法。可能有很多人觉得中文字体或书法字体看起来很老旧，一点也不现代，下面我们用实例来证明这个想法是错误的。

上面的页面是真功夫的设计，很明显，中文的书法字体是作为艺术图形来表达和表现的，并且结合一些相关元素，例如辣椒、调料、粮食、蔬菜等等突出“味道”的主题，并且很容易就能看出这是美食类的页面。

页面中英文也可以做成书法体，表现更有张力，更加符合勇士的感觉。

小米电饭煲的“新国货”也采用了书法字体，让平淡的页面焕发生机，并且这种字体也透露着一种做成新国货的“野心”。

总结

其实极简设计是设计发展过程中必然的结果，这是一种优化的过程，也就是做减法，把一些不必要的，干扰信息传达的元素删除掉,保留最基本最有用的东西，我这次的教程也从排版、颜色、字体三个方面具体来讲解了怎样做极简设计,同样的这些内容也十分受用于电商设计。其归根结底，好的设计基本原理是万变不离其宗。

目录

1．极致的版式

1.1对齐—最基础但也最重要

1.2对比—让画面不再平凡

1.3有“气质”的留白

2.精致的颜色

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

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

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

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

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

A、统一明度和饱和度

B、控制颜色的层次

3.考究的字体

3.1选用符合整体设计风格的字体

3.2选用字形结构简单的字体

3.3“牛叉”的中文字体