中文字体排版设计干货：极简风三步走，电商设计更高级

极简设计是设计发展进程里必然会出现的结果, 这是一种进行优化的过程, 也就是去做减法, 把那些不必要的、会干扰信息传达的元素给删除掉, 保留最为基本且最为有用的东西。本文作者从排版这个方面, 从颜色这个方面, 从字体这个方面, 来具体地进行了如何做极简设计的讲解。

经历几年发展, 电子商务已渐趋成熟, 且发展出自身模式与风格。然而, 对于电商设计风格, 多数人仍停留在初始阶段, 即用商品堆砌、文字信息以及诸多杂乱无章的效果上来。近些年来, 各电商公司对设计极为重视, 其设计风格也渐次朝着简洁甚至极简风格转变。这种变化乃伴随电商持续发展, 因更注重产品品质而演进的。

做极简设计的方法, 要从三个方面来讲, 每个方面均包含一些具体的知识点。

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

这是锤子T1那样的页面设计, 好多人都不喜欢老罗, 然而我觉得他对设计有着一种独有的完美主义偏执, 不管是手机外型呈现出的各种对称，还是系统UI的设计, 身为设计师的我觉得自己还应当朝他多学习一番。回到页面设计自身, 我们来剖析一下这个页面的设计。

一、极致的版式

兴许众人着手画画之际便已接触并学习构图了, 而构图乃是版式设计的根基。然而我们常常忽视了对构图与版式的极致探寻, 通常我们总会讲, 大体看着舒坦就可以了。但对于设计师能力的提升我们还得更看重版式的设计。

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

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

上面, 图A、B、C是针对页面做重新排版, 图D是原有的设计。虽说总体看去都还行, 然而我们依旧能很直观地察觉, 图A的构图存在头重脚轻的状况, 致使给人感觉中心偏下；图B的手机主体物有着对文案的一种挤压感, 令人觉得压抑；图C的手机与文案形成90°的夹角, 使得人感到有种阻碍感, 不顺畅；图D的设计很好地协调了主体图跟文案的关系, 而且给人一种从远到近的中距离纵深感。整个画面中间对齐更能够最大限度地突出主体——手机。我们能够从锤子的网页设计里观察到, 这样的排版方式呈现为一种中间对齐, 此等情况, 不管是横向方向, 还是竖向方位。

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

上边的设计人员采用的也是中间对齐的方式, 大写的V具备很强的视觉冲击力, 左上角的Logo信息与右下角的信息呈现为对角形式, 给人一种画面极为平衡且稳定的感觉。

发布会海报采用的是中间对齐形式, 小米在为哪一年举办新品发布会呢? 是2015年, 观看者在看到这张海报时, 因这种中间对齐形式, 很容易目光就聚焦到“新年礼物”这个重要信息上。

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

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

（1）视觉聚焦；

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

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

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

对于简洁甚至极简的设计来讲, 对比极为关键, 对比能使人相当迅速地读取到关键信息, 还能令版面的设计具备节奏感, 致使画面看上去不单调乏味。

上述的设计是小牛N1的设计, 也是一加3的设计, 这两个设计属于典型的左右排版方式。右侧放置商品图片, 左侧排列简洁且具有实用性的基本文案信息。左右两边的图片与文案信息, 其大小对比是要依据商品的属性来予以决定的。好比说, 一加手机主要展现手机的外型以及质感, 所以放置2个占有比例面积相对较大的手机, 搭配最为基本的文案信息（仅仅有手机名字、价格以及购买按钮）。

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

这个设计跟一加以及小牛是相反情况, 文案所占面积非常大, 然而我们视觉中心依旧是手表, 由于实物照片通常会更具吸引力, 这便是对比。但还有一个对比不知大家是否察觉到, 那就是文案里的对比, 标题采用大且粗的字体, 其他信息放置得极小, 能够迅速又准确地看清标题内容, 另外因字体大小与粗细的改变让人有节奏感。

3. 有“气质”的留白

极简设计之中, 留白显得极为重要, 最为典型的当数无印良品的设计, 它乃是将留白运用至现代设计里的最佳典范, 然而我认为中华民族才是留白的“老祖宗”, 国画便是极为典型的实例。

接下来, 我们进行这么一个对比, 将图片上那些并非必要的、有着复杂模样的背景以及文案予以去除，主要目的便是, 使得产品主体以及主要信息能够呈现得更为清楚、更为界定分明。

再来进行更深入一步的精简, 加大留白的面积, 确保产品以及产品信息更为清晰地传达出来。

下面存在着其他的一些案例, 我们能够尝试着自己去进行分析, 要留意留白并非一定就呈现为白色。

二、精致的颜色

于电商设计里头, 对颜色予以把控极为关键, 于特定情形下, 对颜色控制的优劣状况, 直接对页面的停留时长造成影响。一些经验欠缺的设计师, 常常会为颜色的把握而深感头疼, 诸如颜色色泽不佳、配色缺乏美感、用色量过度等, 皆是时常出现的问题。在秉持极简理念的设计当中, 更要针对颜色进行简化处理, 并且持续不断地对细微的明度、饱和度以及颜色的搭配予以调整, 恰恰是这些细节方面的调整, 才能够使得极简风格的设计更具耐看性。

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

在那种极为简约的页面当中, 颜色的运用通常是十分慎重的, 而我们开展的第一步行动便是要去挑选主要的色调。

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

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

从提取出的颜色来看, 上面页面设计里, 主色调采用黑白灰, 辅色使用亮黄色, 虽说亮黄色为辅色, 但人们第一眼常常会留意亮黄色, 并且设计师将 70%off 的折扣信息字体颜色选作亮黄色, 这就是对折扣信息的强调。

耐克的页面设计, 在颜色选择上运用的是这个方法, 小牛电动车的页面设计, 同样是用此方法来选颜色, 小牛为避免画面单调, 背景采用了素色的黑白灰, 还有一些图形元素, 如此一来, 画面得以丰富, 又不会因颜色过多而显得杂乱。

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

上面呈现的图乃Motox的网页设计, 页面主体色调, 也就是背景色, 运用了手机背壳的颜色, 如此这般能够强化商品色彩, 进而给购买者留下颇为深刻的印象。

同样采纳这个办法进行设计的是耐克, 通常来讲, 要是厂商打算特意去推爆款, 那么会挑选一种爆款的颜色或者配色, 而以这样方式设计页面的耐克, 也能更出色地展现出该商品独有的特点, 可使人们于任一地方见到这种颜色时, 都会忆起耐克的这款鞋子。

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

在经由上面所提及的案例之后, 我们得以察觉到, 那些从事设计工作的人员所运用的色彩, 均不会超出三种的范畴, 而且作为主打极简风格的设计, 有时仅仅运用两种色彩, 甚至仅仅借助黑、白、灰这三种颜色的不同变化, 进而展开相应的设计工作。

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

在极简设计里头, 对颜色的搭配得特别用心, 为啥? 当画面的颜色搭配处于简单状态时, 哪怕只是稍微有那么一点儿不协调, 也会被放大好多, 所以, 我们得去了解颜色的几个属性, 像色相、饱和度、明度, 还有对比色、相近色这类概念。

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

（1） 统一明度和饱和度

图中的明度与饱和度十分协调, 不会觉得有哪个颜色亮度过高, 也不会觉得有哪个颜色暗度过高。虽说它们是不同的颜色, 但整体画面也极为协调统一, 当下我们对画面颜色展开分析。

我们来瞧一瞧, 上面那4个圆形里头的颜色, 是我从图片之中提取出来的, 下面的4幅图呢, 是颜色摆放的位置以及参数, 重点去看颜色所处的位置, 指的就是每一幅图里圆圈停放的位置。我们能瞧见图中存在两条线, 这两条线就是代码里这4个颜色的明亮程度, 可以观察到绿色跟橘色的明亮程度所处位置特别接近, 黄色和深蓝色的明亮程度所处位置同样相近。绿色与橘色占据了整个画面的绝大部分面积, 所以整个画面看上去是极为协调的。然后, 饱和度, 是越朝着色板靠右上角的方向, 饱和度就愈高, 我们瞧瞧, 除了那个深蓝色之外, 其他这三种颜色, 都处在饱和度相对比较高的位置上边, 而且其位置还挺靠近。

大家能够运用这两幅设计去开展一下实验, 亲自动手进行解构, 关于配色之中的明度还有颜色的饱和度。并且我认为身为设计师, 对于颜色具备细致的理解, 这是极为必要的。

（2）控制颜色的层次

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

这样一来, 我们能够轻易地看出颜色的层次, 其中灰色系含有 7 个层次, 还有红色系存在 4 个层次, 正是基于这样的层次情况, 使得整个设计极大地显得非常丰富, 而且具备立体感, 不至于太过“平”。

三、考究的字体

文字于电商设计里的位置至关紧要, 它肩负着直观信息传播的功用, 像活动页面的折扣信息, 商品宣传页面的卖点信息, 商品的优惠价格，文案内容的表现均可为例。并且在极简设计当中, 字体的挑选更具讲究。

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

字体具备自身的外貌特征, 有着独特的性格特点, 还展露出别样的风格, 当字体这种风格与设计达成了毫无破绽的恰到好处之融合时刻, 其足可以为整个设计增加不少得分。

顶上的那两张图, 是“什么值得买”的闪屏页面, 咱们来认认真真地瞧一瞧眼镜、相机跟字体（文案）之间的关系。眼镜的款式极为复古, 相机的款式同样特别复古, 均蕴含民国年代的那种感觉, 所以, 设计师挑选了一种仿古字体用以搭配图案, 从而给人一种异常统一的感觉, 再配上精彩的文案, 就能够给人构想出一个民国时期的场景, 这也能说成是带入感。要是我们把图里的字体替换成极为现代的艺术字, 会出现怎样的情况?

字体更换之后, 是能够看得出的, 虽说每一个字体单独去看的话, 都是挺不错的, 然而把它与配图放置到一起的时候, 就会让人感觉极为不搭配, 瞬间就失去了文案以及图片所要传达出来的那种, “工匠”的感觉。

要是英文的选择也是这样的情况, 那你看上面的图, 英文Animal Prints所表达的意思是动物图案, 你能够发现右侧的女性人物应当是身着一条连衣裙的, 所以我推测这是售卖女性服装的一处Banner, 并且是那种偏向成熟类型的（从模特身材就能够看出来）, 因而在进行字体选择的时候应该挑选偏向细腻柔美的字体, 而并非黑粗体。

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

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

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

在这几年当中, 存在着一些字体, 这些字体结构繁杂, 字形极为夸张, 就个人的看法而言, 要尽可能少用它们甚至于可以不用它们。字体关乎一门特别专业的门类, 好多设计师还没办法很好地去驾驭某些字体, 不管是普通的电商方面的设计也好, 还是极简风格的设计也罢, 最好选用字形以及结构都相对比较简单的字体。

有这样一个设计, 整体能看到是以文字为主进行组合设计的, 不管是英文, 还是中文, 使用掉的都是字形极为简单的字体, 同时借助字体自身的大小粗细, 让画面具备很强的节奏感, 并且不会让人感觉全都是字。从这里我们能够引出另外一个理论, 在某些情形下, 字体既能作为信息传达的载体, 还能成为一种艺术图形。

下面来个反面教材：

这里, 我们暂且不说这个专题设计的构图、颜色, 专门来讲讲文字有关情形, 除了较为突出的 9.9 元体现出卖点之外, 其他内容通通甚是杂乱无章, 字体的外形被改变得堪称怪异。所以在此提醒大家, 在不具备处理字形能力之时, 绝对不要私自去修改甚至自行设计字体, 是这样的一番嘱咐, 得牢记于心呢。

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

某种水果相当“厉害”, 针对自身所拥有的产品, 打造了一套字体, 起初的时候存在一些人, 讲述各种各样的丑态, 然而依旧被大部分人接纳了, 同时收获了大众的称赞, 缘由不外乎是简便易用。这同样是当下这个处于快速推进状态的社会最为需要的, 特别是从事电子商务的行业领域。

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

3.“牛叉”的中文字体

此言称中文字体“极其厉害”, 并非只因吾乃中国人, 吾等可去数一数中国存有多少种字体, 每一种字体皆有其自身的历史背景, 比如说隶书, 普通民众是不可以使用的, 魏碑乃是专门刻于碑上的字体等等。并且中文还是唯一一种成为艺术的文字——书法。或许有些人会认为中文字体或者书法字体看上去颇为陈旧, 不够现代, 接下来吾等借由实例来证实这是错误的。

顶端的页面是真功夫所进行的设计, 显而易见, 中文的书法字体被作为一种艺术图形用以传达以及表现, 并且与一些相关因素（辣椒、调料、蔬菜、粮食之类的）相结合突出“味道”的主题, 而且很轻易就能瞧出是美食类别的页面。

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

小米电饭煲, 其“新国货”, 采用了书法字体, 使得平淡页面有了生机, 且这种字体透露着一种做成新国货的“野心”。

总结

事实上, 极简设计乃是设计发展进程里的必然产物, 这属于一种优化进程, 即进行减法操作, 将那些不必要的、干扰信息传递的元素予以删除, 留存下最为基础且最为实用的事物, 此次我的教程从排版、颜色、字体这三个方面详细讲解了如何进行极简设计, 同样这些内容也适用于一般电商的设计, 追根溯源, 好的设计的基本原理是不会改变的。

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