来源:优设 作者:超人的电话亭
前面用了比较长的篇幅讲了线性风格的图标要如何设计。那么面性风格图标的设计只要熟悉了线性图标的绘制方式，操作就没有难点，并且面性风格的实际操作难度比线性图标更低，所以我们用一篇文章来讲面性图标的设计。
面性图标在操作中和线性图标的最大差别就在于描边和填充模式，我们知道为了满足像素对齐的要求，线性描边会在操作中产生很多不可控的因素，要用很多额外的操作步骤去弥补。在面性图标中，就不需要使用描边，并且使用相同的图标模板即可。
下面就进入本篇的具体案例演示。
如图所示，我们使用线性图标中的样式，设计成面性效果。具体的操作步骤就不需要再完整演示了，只需要将所有线性风格演示中的描边替换成填充，再使用对应的路径查找器功能即可。
需要注意的是，可能我们会习惯于使用线条工具绘制很多 1pt 宽的直线，这是错误的做法。我们需要使用矩形工具画出一个完整的闭合图形，再使用路径查找器工具或者对图形进行批量操作，这样才能保证统一。
还有，面性图标不代表完全不能出现「线性」元素，在一些特定的情况下，我们依旧要通过线条的形式展现图形轮廓，比如搜索图标的镜片，使用全填充的样式显然效果不理想，所以镂空镜片区域是不可避免的。
虽然我们不可避免要使用「线性」的元素，但在面性风格中，这些图形的描边元素不能太细，应该使用不小于 2pt 的宽度。并且，为了保证图标的一致性，整套图标的线条都要尽可能使用相同的粗细，而不是这里使用了 2pt，在别的图标中就是 4pt。
扁平插画风格实际上是一个自由度非常高的图标风格，可以设计出很多有趣又极具创意的插画式图标。在本案例中，我们只讲解其中一种最基础的设计方式，便于新人入门。
最基础的扁平插画，就是在面性图标的基础上，将图形拆分成不同面的组合，然后分别为这些面填充纯色即可。比如心型图标，看起来像是只有一个面的图形，但我们可以人为居中将它分割成两个面，然后填充同色系的不同明度，就可以得到一个扁平插画风格的图标。
类似搜索或消息图标这样有镂空区域的图标，我们就可以为镂空区域填充不同的色彩，使其作为独立的面呈现，也能达到相同的风格。
