【图标】第四篇 | 面性图标设计详解

前面用了比较长的篇幅（之前三篇文章链接：【图标】第一篇 | 图标的设计详解、【图标】第二篇 | 工具图标的设计、【图标】第三篇 | 基础线性图标的设计）讲了线性风格的图标要如何设计，再讲解面性风格的图标时，就不用这么长篇大论了。只要熟悉了线性图标的绘制方式，那么面性图标的操作就没有难点了，并且面性风格的实际操作难度比线性图标更低，所以我们用一篇文章来讲完图标的设计。

面性图标在操作中和线性图标的最大差别就在于描边和填充模式，我们知道为了满足像素对齐的要求，线性描边会在操作中产生很多不可控的因素，要用很多额外的操作步骤去弥补。在面形图标中，就不需要使用描边，并且应用相同的图标模版即可。

下面就进入本篇的具体案例演示吧。

如图所示，我们采用线性图标中使用的样式，设计成面性效果。具体的操作步骤就不需要再完整演示一次了，只需要将所有线性风格演示中的描边替换成填充，再使用对应的路径查找器功能即可。

需要注意的是，有很多 1pt 宽的直线，可能我们会习惯于使用线条工具绘制，这是错误的做法，我们需要使用矩形工具画出一个完整的闭合图形，再样在使用路径查找器工具或者对图形进行批量操作时才能保证统一。

还有，面性图标不代表完全不能出现 “线性” 元素，在一些特定的情况下，我们依旧要通过线条的形式展示图形轮廓，比如搜索图标的镜片，使用全填充的样式显然效果不理想，所以镂空镜片区域是不可避免的。

虽然我们不可避免要使用 “线性” 的元素，但在面性风格中，这些图形的描边元素不能太细，应该使用不小于 2pt 以上的宽度。并且，为了保证图标的一致性，整套图标的线条都要尽可能使用相同的粗细，而不是这里使用了 2pt，在别的图标中就是 4pt。

扁平插画风格实际上是一个自由度非常高的图标风格，可以设计出很多有趣又极具创意的插画式图标。在本案例中，我们只讲解其中一种最基础的设计方式，便于新人入门。

最基础的扁平插画，就是在面性图标的基础上，将图形拆分成不同面的组合，然后分别为这些面填充纯色即可。比如心型图标，看起来像是只有一个面的图形，但我们可以人为居中将它分割成两个面，然后填充同色系的不同明度，就可以得到一个扁平插画风格的图标。

类似搜索或消息图标这样有镂空区域的图标，那么我们就可以为镂空区域填充不同的色彩，作为独立的面呈现，也能获得相同的风格效果。

最后一种，就是将图标 “拟真” 化，比如眼睛图标，我们可以用接近真实眼睛的样式来创作，为它增加瞳孔、高光等细节样式，只要依旧使用纯色填充，且将细节数量保持在合理的范围内，就不会与其它图标产生冲突。

在面性图标的彩色渐变中，也有多种更细致的设计类型，比如整个图标采用一段渐变，或者图标中不同的面采取不同的渐变方式。

采用整个图标使用同一渐变色的做法，和线性的渐变方法几乎一样，只要在开始填充渐变前将所有图层进行合并即可。我们来讲解一个比较特殊的基础渐变风格——不同透明度渐变。

比如心形图标，我们把它划分成了两个不同的面的组合，然后都使用了红色的渐变色，一强一弱。通常，我们只要先设定出较强的渐变，然后再复用这个渐变色到另一个面中，然后降低它的透明度即可。

在使用了透明度的图形中，要注意的是为了在实际使用中不让图形背面的元素影响到图标色彩本身，我们要将这些图形复制一层填充成白色并置于底部，才能保证正常的使用。

最后，就是这类透明叠加的设计风格了。和线性图标中的叠加设计方式一样，我们需要将图形拆分成若干面，才能创造出重叠的区域。

在这个方案中，尽可能使用纯色，会比使用渐变的效果更好，原因在于我们对重叠区域色彩的控制上。可能很多同学看到这个风格，会以为叠加的区域只要使用透明度就可以了，但这种效果通常很不理想，尤其在撞色的配色上，相交部分的色彩就会有 ”朦胧“ 感，缺少通透的舒适性，并且图形本身的饱和度也会受到影响，比如下面的演示。

通常，相交区域的色彩要另外配置。也就是在绘制好了图形的所有轮廓以后，将它们一起选中，然后使用 ”图像生成工具“，再为相交的区域独立选择配色。下图就是独立挑选的两个配色和透明度的方式对比。

结尾

面性风格的设计到这里就讲解完毕了，相对于线性设计来说，面性工具图标的设计就简单得多了，虽然设计风格有非常多的延展性和可能性，但大家始终要记得它们依旧是 ”工具图标“，识别性是优先于视觉风格的，所以切勿过度强调视觉性而将它们做成了装饰性图标。

下一章，就是工具图标的最后一篇，关于混合类型图标的设计，敬请期待。

知乎ID：酸梅干超人

交流Q群：476240090

课程咨询Q群：31059928