电商设计风格走向极简，从排版、颜色、字体三方面教你如何做

极简主义是设计演进过程中的必然产物，它是一种精炼手法，核心在于舍弃，去除多余且分散注意力的部分，只留下最核心和有效的要素。本文将围绕布局、色彩、字型这三个方面，详细阐述如何实施极简主义设计。

网络零售经过数年演进已趋于完善，并形成了独特的运营方式与视觉特征。然而公众对于网络零售的视觉呈现，多数仍囿于早期堆叠商品、叠加说明文字、混杂各类装饰元素的布局。近两年各网络零售企业愈发关注设计细节，且设计取向正逐步转向简约乃至极简主义。这种转变是伴随网络零售持续成长，更加注重商品内在品质而逐步实现的。

从三个方面阐述极简设计的方法，每个方面都包含一些具体的要点。

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

锤子T1的界面布局，尽管众多人都对老罗本人持有负面看法，不过我认为他在设计领域有着近乎苛刻的极致追求，手机的外观（诸多对称元素）以及系统界面的构建，都体现了这一点，作为从业者我需借鉴其经验。现在我们聚焦于这个页面的布局，展开探讨其设计手法。

一、极致的版式

绘画初学者通常都会接触并学习画面布局，画面布局实质上是版式设计的根基。然而我们常常忽视了对于画面布局和版式设计的深度探究，往往满足于大致协调即可。不过要提升设计师的水平，更应着力关注版式设计。

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

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

上面图A、B、C是对页面重新排版，图D是原有的设计。整体观感尚可，但图A布局显失平衡，重心偏低；图B手机与文字布局产生冲突，令人感到压抑；图C手机和文字形成直角，带来阻滞感，不够流畅；图D设计有效融合了主体图像与文字，营造出由远及近的立体空间效果。居中布局能最好地凸显核心物——手机，从锤子网站界面设计上可以看出，这种排版手法是居中对齐，横竖方向都如此。

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

那位设计师同样采用了居中对齐的布局，那个大写的V字母具有极强的视觉冲击效果，并且左上角的Logo标识和右下角的资讯形成了对角线关系，使人觉得整个画面既显得均衡又十分稳固。

小米2015年产品推广的视觉设计选择了居中布局，使受众能够迅速将注意力集中到核心“新年馈赠”的关键字眼上。

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

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

（1）视觉聚焦；

（2）强化页面统一性和条理性；

（3）对视觉的导向作用。

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

极简风格的设计中，对比作用显著，它能迅速突出关键内容，同时赋予版面韵律，避免画面单调乏味。

这个设计是小牛N1和一加3的方案，两者都属于典型的左右布局，右侧展示商品图片，左侧则呈现简洁且实用的基础文字信息，而左右两侧的图文比例，需要依据商品的具体特点来调整。这款手机着重展示其外观设计及材质工艺，因此选用两个面积突出的手机图像，并配以最核心的说明文字，内容仅包含产品名称、售价和购买选项。

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

这种构思方式与一加和小牛截然不同，宣传文字版面非常宽阔，不过我们的焦点始终是手表，因为实际物品的图像通常更具吸引力，这就是一种对照。然而还有一个对比大家可能没察觉到，就是宣传文字内部的对比，标题使用了宽大且粗重的字体，其他内容则排版得十分细微，能迅速准确地把握标题要义，而且字体大小和粗细的交替变化，营造出一种韵律感。

3. 有“气质”的留白

极简主义风格中空白处的作用十分关键，无印良品的创作就是这方面极为出色的代表，它将空白融入设计领域达到了顶尖水准，然而我认为咱们国家才是运用留白的鼻祖，水墨画就是非常明显的证据。

现在我们进行一项比较，需要去掉画面中部分多余繁杂的背景图案和说明文字。这样做的主要目的是让物品本身以及关键内容显得更为显著和一目了然。

要继续压缩内容，扩大空白空间，让商品和商品资讯更明确地展现。

这里有一些其他例子可以供我们自行研究,注意空白处未必都是白色。

二、精致的颜色

电商界面制作中，色彩运用很关键，有时色彩处理优劣直接关系到用户浏览时长。新手上路的设计者常为色彩搭配烦恼，颜色杂乱、色彩组合不美观、色彩使用过于频繁等问题屡见不鲜。极简的构思中，要减少色彩的运用，还要持续调整微小的亮度、纯度和色调组合，正是这些精心的处理，才能使简约的设计更加吸引人。

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

极简的界面上，色彩通常很克制，但首要任务却是挑选出主要的色彩。

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

（1）黑白灰主色调+亮色辅色；

从提取出的色彩信息可以了解到，该页面设计以黑白色调为基本，搭配亮黄色作为辅助色彩，尽管亮黄色只是辅助色，但人们通常最先注意到它，而设计师将七折优惠的文案颜色设为亮黄色，正是为了突出这个促销信息。

耐克与小牛电动车的页面布局在色彩运用上采纳了同一策略，小牛为了防止画面显得单调，背景部分点缀了黑白色调的简单图案，此举既增添了视觉层次感，又避免了色彩堆砌带来的混乱感。

（2）选择商品主色调作为整体画面的主色调；

该图展示的是Motox的网页界面，页面背景采用了手机背板的色调，此举旨在突出产品色彩，从而给选购者留下难以忘怀的印象。

耐克的设计也是运用这种方法，通常，制造商若想突出某款热销产品，会选用其标志性色调或组合，而耐克这样设计的页面，能更充分地呈现商品的独有特色，使人无论在何处瞥见这种色彩，都会联想到耐克的这款鞋。

（3）使用的颜色不要超过3种。

根据前述事例可知，这些设计师所用的色彩总数不会多于三样，而极简设计风格有时仅采用两种色彩，甚至有时仅借助黑白色调的变幻来完成设计。

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

极简风格中，色彩组合必须精心考量，由于画面色彩搭配本就简洁，即便微小的失调也会被显著凸显，所以必须掌握色彩的几个特征：色调、纯度、亮度，以及互补色、邻近色等原理。

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

（1） 统一明度和饱和度

图中亮度与饱和度搭配得当，既无色彩过于鲜明，也无色彩显得暗淡。尽管呈现多种色彩，整体画面依然和谐一致，接下来探讨该作品的色彩运用。

我们考察一下，上方四个圆形所展示的色彩是我从相关图像中分离出来的，下方四个图形则呈现了这些色彩的分布与数值，重点在于观察色彩的位置，即每幅图形中圆圈的摆放位置，我们注意到图示中存在两条线条，这两条线条代表代码所对应的四种色彩的亮度，可以观察到绿色与橘色的亮度位置极为接近，黄色和深蓝色的亮度位置同样十分接近，绿色和橘色覆盖了整个画面的绝大部分区域，因此整个画面给人的感觉是非常和谐的。色彩纯度在色域图中朝右上方区域逐渐增强，除了深蓝，其余三种色彩都聚集在纯度较高的区域，且彼此间距不大。

可以尝试运用这两份构思进行实践，亲自剖析色彩亮度与纯度的变化，我认为色彩方面的精准把握对设计师而言至关重要。

（2）控制颜色的层次

以小牛电动车的图示为例来剖析色彩的层级关系，能够发现所有色彩提取出来之后，圆形区域内的色彩分布情况。

可以明显分辨出色彩的级差，灰调包含七个阶段，红调则分作四个阶段，正是这些阶段使得整体设计极富变化，同时产生纵深感，避免了单调乏味。

三、考究的字体

文字在电商设计中的位置非常重要，它用来传递直接的信息，比如活动页面上显示的优惠力度，商品宣传页面上强调的特点，商品上标注的优惠价格，以及文案内容所呈现的方面。在极简设计中，选择字体需要更加细致。

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

文字同样具备独特的外形、气质和特色，当文字的特色与设计和谐统一时，能够为整体作品提升显著价值。

前两幅画面展示了“什么值得买”的启动界面，我们留意一下镜片、相机和文字（标语）的搭配方式。镜片和相机的造型都带有浓郁的老式风格，透着民国时期的韵味，为此设计师挑选了一种复古字体来协调画面，营造出整体协调的氛围，加上吸引人的标语就能构建出民国风情的场景，这种手法也能称作情境营造。如果我们把图中的字体换成非常现代的艺术字会怎么样？

更换字体之后可以发现，每一个字体单独审视都还可以，然而和配图并置之后，便显得极不协调，马上就没了文案与图片想要传递的那种“匠人”的意境。

英文的挑选亦然，参照图片，英文Animal Prints指代动物纹样，你会察觉右侧的女性形象应当身穿一件连衣裙，由此我推测这属于女性服饰的推广横幅，而且是针对较为成熟的群体（从模特体态即可判断），因此在挑选字体时，应当选用雅致婉约的字体，而非粗犷的字体。

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

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

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

近些年涌现出部分构造繁复，笔画形态极为怪异的字体，个人主张应当尽量减少使用，甚至完全摒弃，因为字体设计是一门专业性极强的领域，众多设计师尚且难以熟练运用某些字体，无论是常规的电商设计还是追求简约的设计风格，都应当选用笔画和构造都较为平实的字体。

这个设计整体上是以文字作为主要构成元素，无论是英文还是中文，都选用了笔画极为简洁的字体，字体本身的大小和粗细变化让画面产生了强烈的韵律感，同时也不会给人全是文字的压迫感。由此可见，在某些特定情境下，字体不仅承担着信息传递的功能，更是一种具有艺术表现力的图形元素。

下面来个反面教材：

这个方案里先不讨论整体布局和色彩搭配，只谈文字部分，9.9元这个价格确实很醒目地强调了核心卖点，但其余文字显得相当混乱，字体的形态被扭曲得不成样子。所以大家要明白，要是自己没有足够实力控制字形，千万别随便改动现有字体，更不要尝试自己设计新的字体。

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

苹果相当出色，为其产品构思了专属的字体，起初部分人认为其形态欠佳，不过最终多数人认可了它，并且给出了正面评价，关键在于其简洁且实用，这正是当下高速进步的社会所看重的，特别是在网络销售领域。

自带6种粗细字体完全满足一般需要

3.“牛叉”的中文字体

这个论断中文字体“厉害”，并非仅仅源于我身为华夏儿女的身份，我们可以清点一下华夏大地究竟有多少种字体，每一种字体都承载着独特的历史渊源，比如隶书，那是寻常百姓无权使用的，魏碑则是专门镌刻于石碑之上的字体等。此外，中文还是全世界唯一一种演变为艺术的文字——书法。或许在部分人眼中，中文字体或书法字体显得颇为陈旧，缺乏现代感，但接下来我们通过具体案例来论证这种看法是错误的。

该页面出自真功夫之手，可见，中文书法字体在此处是作为一种艺术图形加以呈现和诠释，同时融入辣椒、调料、蔬菜、粮食等关联元素，着力凸显“风味”的核心，由此不难判断，这属于餐饮美食板块的页面。

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

小米电饭煲的“新国货”版本使用了书法字体，使得原本单调的界面焕发了活力，同时这种字体也流露出品牌打造新国货的雄心壮志。

总结

极简主义是设计演进过程中的必然产物，它代表一种精炼手法，核心在于舍弃多余部分，剔除那些分散注意力的非必要元素，仅保留最核心且实用的构成要素，我这次的教学内容也围绕布局、色调和字型这三个维度，详细阐述了如何实现极简风格，这些知识对于常规电商设计同样具有指导意义，毕竟优秀设计的根本准则不会随时代变迁而改变。

继续浏览有关 电商设计极简风格 的文章