电商设计中的极简设计(一) 时间：2017-02-16     来源：移动互联网学院

电子商务经过了几年的发展已经逐渐成熟，并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而这两年各个电商公司已经非常重视设计了，而且设计风格也逐步走向简洁乃至极简的风格。这种变化是随着电商的不断发展，更加重视产品的品质而进化的。

本文引用地址：http://www.3g-edu.org/ui/518.html

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

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

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

一、极致的版式

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

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

1. 对齐——最基础但也最重要

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

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

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

小米2015年的新品发布会海报也采用了中间对齐的形式，让关看者很容易的就聚焦到中间“新年礼物”的重要信息上

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

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

A、视觉聚焦;

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

C、对视觉的导向作用。

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

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

上面的设计是小牛N1和一加3的设计，这两个设计是典型的左右排版。右侧放商品图片，左侧排列简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要根据商品的属性来决定的。例如，一加手机主要体现手机的外型和质感，所以放置2个占比面积较大的手机，搭配最基本的文案信息(只有手机名字、价格和购买按钮)。

3. 有“气质”的留白

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

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

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

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

二、精致的颜色

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

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

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

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

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

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

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

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

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

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

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

总结

其实极简设计是设计发展进程中的必然结果，这是一种优化的过程，也就是做减法，把不必要的，干扰信息传达的元素删除掉，保留最基本最为有用的东西，我这次的教程也从排版、颜色、字体三个方面来具体的讲解了怎样做极简的设计，同样这些内容也适用于一般电商的设计。其归根结底，好的设计的基本原理是不会变的，剩下的部分我将在下一篇博文中为大家展开，谢谢。