图标设计实际上是几何形状的设计，如果把它们做成模糊效果，你就会发现它们的视觉重量并不相同。
从下图我们可以直观看到，方形图标比三角形图标更紧凑，越紧凑的图标所占的视觉空间就越小，辨识度也就越高。反之图标边缘越锐利，所占的视觉空间就越大，辨识度也就越低。所以我们可以得出，图标icon设计的形状越简单越好，越接近基础图形越有辨识度。
1. 设计图标icon原则
图标通过所有人都能理解的图形形式，可以快速传递信息。优秀的图标设计可以取代单词和长句，并且还可以增加可用性和视觉美感。下面从图像学角度总结了设计图标icon的十大原则。
-
图标要具有象征意义
-
图标的形状尽量保持简洁
-
在进行图标icon设计之前需要深思熟虑
-
保证图标适用于不同尺寸
-
图标的统一性很重要
-
图标一定要是矢量文件
-
图标需要谨慎适用颜色
-
多从几何图形中找图标灵感
-
图标icon设计要考虑到可控性，有助于后期编辑
-
图标是一种通用语言，不分国界
2. 三步完成图标设计
图标设计的形式有很多种，表现方式非常丰富，有线的、有面的、还有拟物的等。下面就使用新一代在线协作设计工具Pixso，通过10个常用图标的图形拆解，来讲解如何简单三步设计图标icon。
2.1 眼睛图标
绘制眼睛图标前，首先要了解眼睛的结构。眼睛大致分为眼睑、眼白和瞳孔，从形状上概括基本上是一个扁圆+两个正圆。这里需要注意下，尽量将物体概括成基础图形，以方便辨识。得到了拆解后的基础图形后就可以绘制了。
第一步：创建四个正圆居中对齐，从大到小排列，然后调整颜色，高光和眼白是白色，瞳孔和眼睑是蓝色。
第二步：将四个正圆居中对齐，最大的圆圈在最后，最小的圆圈在最上面，依次排列好。
第三步：将最上层的高光圆圈移动到瞳孔和眼白的交界处，然后双击最大的眼睑圆圈，进入形状编辑模式，将两侧的锚点向外拖拽，形成扁圆形状的眼睛造型。
这样一个图形化的眼睛就完成了。
2.2 箭头图标
箭头的形状简单，不需要进行拆解，只需要进行图像概括即可。箭头图标设计的方法有很多，可以将箭头概括成矩形，也可以概括成三角形，下面就用这两种方法绘制箭头。
方法一：创建一个正方形，在左侧的边上添加中心点和两个箭头边框的锚点，移动中心点至接近右侧边的位置。最后删掉右侧两个锚点即可。
方法二：创建一个三角形，旋转90度至箭头向右，在左侧的边上添加中心点和两个箭头边框的锚点，移动中心点至接近右侧边的位置即可。
2.3 电池图标
电池图标设计分为电池外壳、电量和电池头三部分组成，其中电池外壳是一个中空的矩形框，可以在Pixso中的描边工具添加描边完成。
第一步：绘制三个大小一致的正方形，其中电池外壳是描边正方形。
第二步：选中电池外壳，按住Alt键让正方形上下对称变宽，然后拖拽右侧边向右靠近电池头。
第三步：将电量矩形的左侧边拖拽到接近电池外壳的位置，电池头的右侧边向左拖拽，宽度稍微宽过电池外壳的边框2倍的样子，这样一个电池图标设计就完成了。
2.4 项目列表图标
项目列表图标设计是由三个点和三条线组成的，这里我们使用正方形作为点，矩形作为线。控制好间距位置，即可绘制出一个项目列表图标。
第一步：绘制出一个正方形和一个长条矩形。
第二步：向下复制两个正方形和长条矩形，让这三条图形间距一致。
第三步：将中间的长条矩形缩短，一个项目列表图标设计就完成了。
也可以将正方形换成圆形，这样效果更好。值得注意的是，如果换成圆形，需要比长条矩形稍大一些，这样视觉上才平衡。
2.5 云图标
云图标设计看起来挺复杂，但是拆解图形后却非常简单，三个圆就可以绘制出来。
第一步：绘制三个大小不同的圆，中间大，两边小。
第二步：将三个圆的稍微交错一点排列好。
第三步：选择右边的圆，进入钢笔模式，将左边锚点拖拽到左边圆的底部对齐，然后用钢笔把锚点下面的摇臂拉平即可。
这样一个云的图标就做好了，还可以通过图形合并工具将三个形状塌陷，再添加描边，一个镂空的云图标就完成了。
2.6 播放图标
播放图标设计其实就是一个三角形，但是现在锐角三角形过于尖锐，稍微添加点圆角让图标更加柔和。
第一步：创建一个三角形。
第二步：将三角形逆时针旋转90度。
第三步：用圆角工具调整三角形的圆角值，调至合适即可。
这样一个播放按钮就完成了。
2.7 位置箭头图标
位置箭头图标设计很多人会觉得很复杂，但是通过图形拆解后却是最简单的图标之一。
第一步：创建一个正方形。
第二步：进入钢笔模式，选择左下角的锚点拖拽到右上角。
第三步：选择圆角工具稍微润色下，一个位置箭头图标就完成了。
2.8 位置图钉图标
位置图钉图标设计也非常简单，图形拆解完之后就是两个圆。
第一步：创建一大一小两个圆形。
第二步：将两个圆形居中对齐，白色圆圈在上层。
第三步：选择下面的大圆，进入钢笔模式，选择下面的锚点向下拖拽即可。
2.9 声音图标
第一步：创建两个正方形。
第二步：选择右边的正方形进入钢笔模式，将右侧上下两个锚点拉开形成漏斗造型。
第三步：将两个形状重合，这样一个声音图标设计就完成了。
后期还可以在图标右侧添加三条线段，标示声音大小。
2.10 波浪图标
波浪线在UI中经常用到，但是很多设计师都是手动绘制，不标准不说也非常麻烦。通过图形拆解我们可以看出，波浪线其实更接近一条弯折后的直线。
第一步：用钢笔工具绘制一条规律的波浪直线，这里可以通过Pixso的位置捕捉和角度捕捉来绘制一条标准的波浪直线。
第二步：给波浪直线的折角添加圆角命令，让其看起来圆滑起来。
第三步：将两头的直角改成圆角并调整两段端点位置，让整条曲线在一个高度上。
这样一条标准的波浪曲线图标设计就完成了。
3. 如何快速开启图标icon设计
在日常项目中经常与到紧急任务，要求设计师在短时间内设计出成套的UI图标。这时候通常没有时间给设计师一个一个设计图标icon。下面就为大家提供两套可以应对紧急项目的方法。
方式一：Pixso插件中的图标库
Pixso插件库中有阿里巴巴图标库iconfont、字节跳动出品的开源图标库IconPark，大量免费可商用的图标文件，均可直接拖曳使用。图标库更具使用类型分成了单色 / 多色、应用尺寸和配色三个选择，除此之外还有内置了搜索功能方便设计师检索图标。
方式二：Pixso资源社区图标库
如果插件中的图标库无法满足你的需求，还可以去Pixso资源社区中寻找目标图标素材。
点击在资源社区中的图标类别，就会有大量的免费图标icon设计素材可供使用，而且图标优质、种类丰富，完全可以满足大部分设计师的需求。
选中目标图标后，点击【复制】—【打开文件】，即可免费使用你心仪的图标icon啦，进入Pixso工作台，你就能随意拖曳心仪图标，快速开启高效的图标icon设计~
