电商设计中的极简设计

写在前面：

电子商务经由了几年的发展已经逐渐成熟，并且已经发展出了自己的模式和风格。
但是对付电商的设计风格大多数人还勾留在最初的用商品堆砌+笔墨信息+各种乱七八糟的效果。

而这两年各个电商公司已经非常重视设计了，而且设计风格也逐步走向简洁乃至极简的风格。
这种变革是随着电商的不断发展，更加重视产品的品质而进化的。

下面从3个方面来讲一下如何做极简的设计，每个里面都有一些详细的知识点。

先看一下极简设计的案例：

这是锤子T1的页面设计，虽然好多人都不喜好老罗，但是我以为他有对设计特有的一种完美主义的偏执，无论是手机的外型（各种对称）还是系统UI的设计，我以为作为设计师我还该当多向他学习一下。
回到页面设计本身，我们来剖析一下这个页面的设计。

一、极致的版式

可能大家开始画画的时候就打仗和学习构图了，而构图便是版式设计的根本。
但我们每每忽略了对付构图和版式的极致追求，一样平常我们总会说，差不多看着舒畅就行，可是对付设计师的能力晋升我们还须要更加重视版式的设计。

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

1.对齐——最根本但也最主要

上面图A、B、C是对页面重新排版，图D是原有的设计。
虽然总体看起来都还可以，但是我们仍旧可以很直不雅观的看出来，图A的构图有些头重脚轻，让人觉得中央偏下；图B的手机主体物有种对文案的挤压感，让人以为压抑；图C的手机和文案成为90的夹角，让人以为有种阻碍感，不顺滑；图D的设计很好的折衷了主体图与文案的关系，并且给人一种从远及近的中间隔纵深感。
全体画面中间对齐更能最大限度的突出主体——手机。
从锤子的网页设计中我们可以不雅观察到，这种排版办法是中间对齐，无论是横向还是竖向。

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

上面的设计家也是用的中间对齐办法，大写的V视觉冲击力非常强，而左上角的Logo信息和右下角的信息成为对角形式，让人觉得画面非常平衡而又稳定。

小米2015年的新品发布会海报也采取了中间对齐的形式，让关看者很随意马虎的就聚焦到中间“新年礼物”的主要信息上。

下面的图例是旁边排版办法：

由此我们总结出对齐的版式的几个特点和浸染：

A、视觉聚焦；

B、强化页面统一性和条理性；

C、对视觉的导向浸染。

2.比拟——让画面不再平凡

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

上面的设计是小牛N1和一加3的设计，这两个设计是范例的旁边排版。
右侧放商品图片，左侧排列大略而有用的基本文案信息。
而旁边两边的图片和文案信息的大小比拟要根据商品的属性来决定的。
例如，一加手机紧张表示手机的外型和质感，以是放置2个占比面积较大的手机，搭配最基本的文案信息（只有手机名字、价格和购买按钮）。

上图是文案与商品的面积比拟。

这个设计则与一加和小牛相反，文案面积很大，但是我们的视觉中央依然是腕表，由于实物的照片每每会更加吸引人，这便是比拟。
但是还有一个比拟不知道大家看出来没有，便是文案里的比拟，标题选用大而粗的字体，其他信息则放的很小，大能又快有准的看清标题的内容，其余由于字体大小和粗细的变革让人觉得有节奏感。

3. 有“气质”的留白

极简设计里的留白非常主要，最范例的是无印良品的设计，它是把留白运用到现在设计里最好的典范，但是我以为我们中国人才是留白的“老祖宗”，国画就是非常范例的例子。

下面我们来做个比拟，我们把图上的一些不必要的繁芜背景和文案给去除。
紧张是让产品主体和紧张信息展示的更加清晰和明确。

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

下面是其他一些案例我们可以试着自己剖析一下，把稳留白不一定便是白色。

二、精细的颜色

在电商设计中，对颜色的把控非常主要，在某种情形下对颜色掌握的好坏直接影响着页面的勾留韶光。
一些履历不敷的设计师每每会对颜色的把握非常头痛，颜色脏、配色不好看、用色过多等都是常常涌现的问题。
在极简的设计中更须要对颜色做减法，并且不断的调节细微的明度、饱和度和颜色的搭配，正是这些细节的调节才会让极简的设计更加耐看。

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

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

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

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

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

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

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

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

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

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

通过上面的案例我们创造，这些设计师所用的颜色都不会超过3种，而做为极简设计有时候只利用2种颜色，乃至只用黑白灰的变革来进行设计。

2.看似很繁芜的颜色搭配实在很大略

在极简设计中，颜色的搭配须要非常存心，由于画面的颜色搭配大略时，纵然轻微有点不折衷也会被放大很多，因此我们须要理解颜色的几个属性：色相、饱和度、明度，还有比拟色、附近色等观点。

对付极简设计的配色也有几个方法：

A、 统一明度和饱和度；

下图中的明度和饱和度非常折衷，既不以为哪个颜色过亮也不以为哪个颜色过暗。
虽然是不同的颜色，但是全体画面也是非常折衷统一的，我们现在剖析一下画面的颜色。

我们来看一下，上面4个圆形中的颜色是我从图片中提取出来的，下面4幅图是颜色的位置和参数，紧张看颜色的位置，便是每幅图的圆圈位置，我们看到图中有两条线，这两条线便是代码这4个颜色的明度，可以看到绿色和橘色的明度位置非常附近，黄色和深蓝色的明度位置也很附近，绿色和橘色占全体画面的绝大面积，因此全体画面看起来是非常折衷的。
而饱和度便是越靠近色板的右上角饱和度就越高，我们看到除了深蓝色，其他3种颜色都处于饱和度比较高的位置，并且位置比较靠近。

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

B、掌握颜色的层次；

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

这样我们很随意马虎的就能看出来颜色的层次，灰色系有7个层次，而赤色系有4个层次，正由于这样的层次让全体设计显得非常丰富，并且有立体感而不至于太“平”。

三、讲求的字体

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

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

字体也是有自己的外面、性情和风格的，当字体的风格与设计完美的领悟在一起的时候，会给全体设计加分不少。

上面的两张图是“什么值得买”的闪屏页面，我们来仔细不雅观察一下眼镜、相机与字体（文案）的关系。
眼镜和相机的格局都是非常复古的，有种民国时期的觉得，因此设计师选用了一种仿古字体来合营图案，给人非常统一的觉得，配上精彩的文案就会给人一个民国期间的场景，这也可以叫带入感。
如果我们把图中的字体换成非常当代的艺术字会怎么样？

换了字体后可以看出，虽然每个字体单独看都不错，但是与配图放在一起就觉得非常的不搭，急速失落去结案牍和图片想要传达的那种“工匠”的觉得。

英文的选择也是如此，看上图，英文Animal Prints是动物图案的意思，你会创造右侧的女性人物该当是穿着一条连衣裙的，因此我预测这是卖女性服装的一个Banner，而且是属于比较成熟的那种（看模特身材就能看出来），因此在选择字体的时候该当选择偏细腻柔美的字体，而不是黑粗体。

来看看下图，觉得是不是差了很多？

下面再来看几组图例，试着自己剖析一下。

2.选用字形构造大略的字体

这几年涌现了一些构造繁芜，字形极其夸年夜的字体，个人认为只管即便少用乃至可以不用。
字体是一门非常专业的门类，很多设计师还不能很好的驾驭一些字体，无论是普通的电商设计还是极简设计最好利用字形和构造都相对大略的字体。

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

下面来个反面教材：

这里我们先不说这个专题设计的构图、颜色，只说一下笔墨，除了9.9元比较明显的突出了卖点以外，其他基本都非常凌乱，字体的字形被改的面孔全非。
因此提醒大家，在没有能力把握字形的时候千万不要自行修正乃至设计字体。

下面再来看看现在争相模拟的苹果：

苹果比较“牛”，为了自己的产品设计了一套字体，刚开始有些人说各种丑，但是还是被大多数人接管了并且得到好评，缘故原由无非便是大略好用。
这也是现在这个快速发展的社会最须要的，尤其是电商行业。

自带6种粗细字体完备知足一样平常须要

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“牛叉”的中笔墨体