【干货】电商设计中极简设计.pdf

【干货】电商设计中的极简设计 极简设计是设计发展进程中的必然结果 ，这是一种优化的过程 ，也就是做 法 ，把不必要的 ，干扰信息传达的元素删除掉 ，保留最基本最为有用的东西。本文作者将从排版、颜色、字 体三个方面来具体的讲解了怎样做极简的设计。 电子商务经过了几年的发展已经逐渐成熟 ，并且已经发展出了自己的模式和风格。但是对于电商的 设计风格 ，大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而这两年各个电 商公司已经非常重视设计了 ，而且设计风格也逐步走向简洁乃至极简的风格。这种变化是随着电商 的不断发展 ，更加重视产品的品质而进化的。 下面从3个方面来讲一下如何做极简的设计 ，每个里面都有一些具体的知识点。 先看一下极简设计的案例 ： 这是锤子T 1的页面设计 ，虽然好多人都不喜欢老罗 ，但是我觉得他有对设计特有的一种完美主义的 偏执 ，无论是手机的外型 （各种对称 ）还是系统UI的设计 ，我觉得作为设计师我还应该多向他学习 一下。回到页面设计本身 ，我们来分析一下这个页面的设计。 一、极致的版式 可能大家开始画画的时候就接触和学习构图了 ，而构图就是版式设计的基础。但我们往往忽略了对 于构图和版式的极致追求 ，一般我们总会说 ，差不多看着舒服就行。可是对于设计师的能力晋升我 们还需要更加重视版式的设计。 下面是几个版式设计的技巧 ： 1.对齐——最基础但也最重要 上面图A 、B、C是对页面重新排版 ，图D是原有的设计。虽然总体看起来都还可以 ，但是我们仍然 可以很直观地看出来 ，图A 的构图有些头重脚轻 ，让人感觉中心偏下 ；图B的手机主体物有种对文案 的挤压感 ，让人觉得压抑 ；图C的手机和文案成为90°的夹角 ，让人觉得有种阻碍感 ，不顺滑 ；图D 的设计很好的协调了主体图与文案的关系 ，并且给人一种从远及近的中距离纵深感。整个画面中间 对齐更能最大限度的突出主体——手机。从锤子的网页设计中我们可以观察到 ，这种排版方式是中 间对齐 ，无论是横向还是竖向。 再看几个中间对齐的例子 ： 上面的设计家也是用的中间对齐方式 ，大写的V视觉冲击力非常强 ，而左上角的Logo信息和右下角 的信息成为对角形式 ，让人感觉画面非常平衡而又稳定。 小米2015年的新品发布会海报也采用了中间对齐的形式 ，让观看者很容易的就聚焦到中间“新年 礼物”的重要信息上。 下面的图例是左右排版方式 ： 由此我们总结出对齐的版式的几个特点和作用 ： （1 ）视觉聚焦 ； （2 ）强化页面统一性和条理性 ； （3 ）对视觉的导向作用。 2.对比——让画面不再平凡 作为简洁乃至极简的设计来说 ，对比非常重要 ，对比可以让人非常快速的阅读到重要信息 ，也可以 让版面的设计有节奏感 ，让画面看起来不乏味。 上面的设计是小牛N1和一加3的设计 ，这两个设计是典型的左右排版。右侧放商品图片 ，左侧排列 简单而有用的基本文案信息。而左右两边的图片和文案信息的大小对比要要根据商品的属性来决 定的。例如 ，一加手机主要体现手机的外型和质感 ，所以放置2个占比面积较大的手机 ，搭配最基本 的文案信息 （只有手机名字、价格和购买按钮 ）。 上图是文案与商品的面积对比。 这个设计则与一加和小牛相反 ，文案面积很大 ，但是我们的视觉中心依然是手表 ，因为实物的照片 往往会更加吸引人 ，这就是对比。但是还有一个对比不知道大家看出来没有 ，就是文案里的对比 ， 标题选用大而粗的字体 ，其他信息则放的很小 ，大能又快有准的看清标题的内容 ，另外因为字体大 小和粗细的变化让人感觉有节奏感。 3. 有“气质”的留白 极简设计里的留白非常重要 ，最典型的是无印良品的设计 ，它是把留白应用到现在设计里最好的 典范 ，但是我觉得我们中国人才是留白的“老祖宗” ，国画就是非常典型的例子。 下面我们来做个对比 ，我们把图上的一些不必要的复杂背景和文案给去除。主要是让产品主体和主 要信息展示的更加清晰和明确。 再做更进一步的精简 ，增加留白的面积 ，使产品和产品信息更加清晰的传达出来。 下面是其他一些案例我们可以试着自己分析一下 ，注意留白不一定就是白色。 二、精致的颜色 在电商设计中 ，对颜色的把控非常重要 ，在某种情况下对颜色控制的好坏直接影响着页面的停留 时间。一些经验不足的设计师往往会对颜色的把握非常头痛 ，颜色脏、配色不好看、用色过多等都 是经常出现的问题。在极简的设计中更需要对颜色做 法 ，并且不断的调节细微的明度、饱和度和 颜色的搭配 ，正是这些细节的调节才会让极简的设计更加耐看。 1.让设计快速出“彩”的方法