扁平图标原创笔记-上

扁平图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，扁平图标更加依赖于面的轮廓，清晰的轮廓可以提高图标的识别度，用户对于图标的认可更高。

我们先对图标进行分类，以了解扁平图标的不同姿态。我们大致把扁平图标分为5类，如下图

接下来我们分别看一下不同图标的表现，首先看一下常规扁平图标

可以看到图标主要是面型图标，由填充的图形组成，填充色彩相对单一，图标内容简约，颜色使用统一，图标展现简单明了，没有明显特点。

常规扁平图标在现实中应用广泛，因其视觉效果简约，设计上更容易实现，只是视觉效果过于扁平，吸引力有限。

这是投影式图标，在视觉上，比常规扁平图标更吸引用户。投影增加了整体图标的空间感，结合图标本身色彩，一致性得到了充分体现。

在制作这类图标时，要注意投影的颜色及范围。首先颜色上尽量和图标本身色彩一致或同色系色彩，如果是深色投影，要注意调整颜色不透明度，过深或过浅的颜色都不是好的选择。另一个投影范围，要注意范围过大，投影可能会减淡甚至消失，范围太小，又容易使得投影过重，需要根据图标本身调整投影范围。

上图为长投影图标，与投影图标最大的区别就是其投影的范围较大，并且呈现一定角度。长投影图标是由现实场景转化而来，夕阳西下，太阳照在身上，留下长长的影子。

长投影的制作，一般采用向右下倾斜45度的方式（也有左下方向，相对较少），颜色比图标背景色更深，一般为同色系色彩。长投影图标的空间感强，视觉效果有延伸。

上图为渐变图标，渐变类型一般为双色，不过随着渐变图标的演变，色彩的控制已经不止双色，呈现出多色状态。如下图

当然这对于色彩要有绝对的把控，不然色彩过多，会导致视觉效果混乱，反而引起不适。

在双色渐变中，比较常见的为邻近色配色，色彩相对靠近，整体效果协调。也有同色系搭配，通过饱和度变化，一般颜色较浅的在上方，保证图标的重量感。

接下来我们说最后一种类型，折叠式图标

折叠式图标灵感来源于折纸效果，通过双色，利用视觉差，达到折纸效果。由于背景颜色已经足够丰富，则在内容设计一般使用单色，白色居多，再利用不透明度等变化，使其视觉效果更完善。

还有一种图标给大家介绍，用色很大胆的MBE图标。

MBE图标的诞生主要原因是由于大众对于扁平图标的视觉疲劳。扁平图标自发展以来，变化并不算太大，视觉特征也相对单一，于是MBE图标也应运而生。

MBE图标主要有以下几个特点

•  用色大胆，色彩艳丽

•  会有比较粗的线框，颜色较深，且有断点

•  内部填充与线框会留有间隙，模拟光影关系

•  周围一般有装饰图形

最后我们来说说扁平图标的设计技法，主要有三点

1. 提炼精华勾勒轮廓

2. 调整线条优雅得体

3. 增加细节出风格

如下图

图标右侧都为真实效果，如果想做扁平化设计，则需要先勾勒轮廓，保证图标的识别度与准确性，然后绘制与图形更贴合的线条，曲线或直线，圆角或直角，最后再调整细节，以丰富图标表现。

具体的操作这里就不做过多描述了，下篇文字我们会就实际操作进行讲解，大家不要走开哦，很快回来！