CH03-面性图标设计

本章目标

• 了解面性图标的相关知识
• 掌握面性图标的绘制
• 掌握图标设计规范相关知识
• 掌握矢量图层操控以及布尔运算基本操作

课题导入

在上节课我们学习以及掌握了线性图标的绘制技巧，这节课我们就一起来学习另一种常见图标。

基本面型图标可分为两大类，一种是以Material Design系统面型图标为主的标准正负形面型图标，另一种则是再次基础上对图标部分元素进行了透明度的改变。

标准正负形标准面型图标时通过正负形勾画出的几何形状，采用单一色彩，如图1。

（图1 基本面型图标）

布尔运算

注意在绘制图形时以布尔运算为主（钢笔工具绘制较容易出现图标虚化），线条采用矩形工具绘制，而不是采用线条工具，如图2。

布尔运算是我们在设计过程中经常使用到的设计手法，无论是在Photoshop，还是figma设计。

其实布尔运算常用的就是“连集所选项”、“减去顶层所选项”、“交集所选项”、“差集所选项”、“拼合所选项”。

（图2 布尔运算）

同色图标

延伸为基础面型图标加入同色值，低饱和度的浅色背景板，以此丰富图标，也能更好的平衡视觉大小，如图3。

正如图片中所展示的一系列面型图标，不难看出这一组图标都是一个系列的，而这种设计的方式则是使用了相同颜色的背景，达到了图标的一致性。

我们在日常的生活当中也能看到很多同类型的设计作品，就是为了达到统一。

（图3 同色图标）

透明度改变

在标准面型图标的基础上，降低某些部位的透明度，以此形成简易的层次感。降低透明度的部位多以图形与图形交汇处为主，如图4。

在图标的设计过程中，我们也可以尝试更改图标的颜色透明度来增加层次，不过需要注意的是，在不同的图标中，我们需要将透明度进行统一，以避免被用户误解。

（图4 透明度改变）

扁平多色

扁平多色将图标拆分为多个图形，针对不同的图形分别上色，简单的是双色、三色图标，色彩使用更加容易上手。

其次是扁平插画类图标，图标图形多以实物参考绘制，通过深浅纯色的搭配形成图标图形的亮暗面。这类图标细节更加丰富，适合用在有实物指向的图标，如图5。

扁平化的设计风格比较柔和丰富，当然figma在设计复杂图标时比较吃力，我们可以在Photoshop或者AI中完成。

（图5 扁平多色）

彩色渐变

彩色渐变图标，作为最常见的面型图标，设计样式的选择也是非常的多。

单色渐变图标渐变色彩采用统一色值，通过改变明度饱和度形成柔和的单色渐变。为了使图标看起来更加有层次感，可以为内部图形增加小投影，图标整体添加弥散投影。

柔和多色渐变图标采用2~3个色彩，确定一个主色，其他色彩点缀辅助使用，形成视觉效果较柔和的渐变图标，如图6。

（图6 彩色渐变）

炫酷撞色渐变

图标色彩使用大胆，视觉效果强烈，有一种发光的感觉。色彩的搭配可以搜索“炫彩、霓虹”相关图片提取。

注意：此类图标一定在整体图标下加上弥散投影，营造光感，如图7。

我们在进行高斯模糊、透明度等操作时，我们需要将相关数值进项统一，尽量不要产生太大的误差，以避免用户误解。

（图7 炫酷撞色渐变）

YOGA图标

YOGA图标是最近两三年流行起来的，风格非常鲜明。特点是在图形中有非常多的正负形，以相近的色彩做渐变，丰富的正负形形成较为强烈的光影明暗变化。

这种图标色彩搭配比较简单，形状绘制比较复杂，可以通过AI的形状生成器绘制形成，简易的形状则可以通过剪切蒙版形成。向上图那种YOGA图标比较适合绘制APP图标，用在界面中的图标，可以加少量形状剪切形成类似的效果。

剪切的形状多绘制在图标的边缘处，形成一定的厚度。绘制过程也很简单，在对应图形中剪切一些形状注意：剪切的图形也尽量通过布尔运算得到。

延伸除了上图常规的YOGA渐变图标，还有这种规则几何的图形拼接形成了多个面，并对其进行不同色彩的搭配。这种风格图标与YOGA图标难点正好相反，形状绘制较简单，但色彩搭配较困难。

当然也可以选择采用相近的色彩搭配，效果依然很好，如图8。

（图8 YOGA图标）

叠加

叠加类面型图标可以通过不同色彩叠加，也可以通过不同渐变叠加。特点就是图标图形由多个几何图形构成，1~2个图形之间进行叠加，形成层次感。不同色彩叠加。

不同渐变叠加。

此类图标的叠加处可以通过将上层图形的混合模式改成正片叠底得到，如图9。

（图9 叠加图标）

微质感

微质感图标顾名思义，就是图标有一定的质感，有一定的拟物感，比起单纯的渐变，光影明暗面清晰，并且可以将高光的部分用浅色高斯模糊表现出来，表现出图标的厚度。常见在勋章、运营活动中使用。

当然也可以做的更极致点，有3D的效果这种3D效果的图标如果采用AI绘制，也是能实现的，原理其实同3D建模中的切面，为图形加入网格后改变色彩，直至出现3D的效果，如图9。

（图10 微质感图标）

课后练习

同学们自行寻找参考图进行面性图标的绘制以及设计，在设计过程中注意相关设计规范。

作业要求：

数量为10个及以上，尺寸为100*100px的单个图标画框，摆放以及图标大小根据画面进行调整，命名格式为“班级+姓名”，需要放置参考图以及自己的作业图。