App设计体系之绘制图标

1、规范统一

1.1 建立统一的绘制区域

在开始绘制图标前，需要制定一个尺寸，尺寸大小不固定但需统一，每个图标都在这个区域内绘制

1.2 设定辅助尺寸

在同样的大小区域里绘制正方形、圆形、三角形，虽然在尺寸上符合了大小统一的特性，但是从视觉上，正方形比圆形和三角形都大，这就需要设定辅助图形框来确保不同形状的图标在视觉大小的统一性。

辅助图形框有4种：正方形、圆形、纵向长方形、横向长方形，根据图标形状对号入座。

为了都会把实际内容的区域控制在整个icon内，为了导出时不会影响内容

2、圆角与直角

如果是线性图标，不论是直角还是圆角，需要注意图标描边宽度和圆角度数的统一。

绘制描边有两种方式：一种是直接使用描边，另一种是通过布尔运算得到，圆角半径的计算公式:外圆角半径(18px) - 描边大小(8px)=内圆角半径(10px)。

3、实际绘制中的注意事项

绘制图标用AI(Adobe illustrator)，尺寸数值不要出现小数点和奇数。

那么AI(Adobe illustrator)如何设置才不会出现小数点？

3.1 视图>显示网格

3.2 编辑>首选项>参考线和网格

将网格线间隔和次分割线分别修改为50和5，那么每一个小格都是10*10，数值可以随意设置，需要是整数且为偶数。

但设置好网格后，绘制时还是会出现小数点，也无法智能对齐网格点。

3.3 打开对齐网格命令

勾选上对齐网格，绘制图形时就会自动吸附贴齐网格交点，尺寸也是10的整倍数了。

3.4 隐藏网格

3.5 像素对齐

勾选对齐像素，是为了避免图标的边缘出现像素模糊的情况(虚边)，对齐像素的使用需配合着像素预览，因此也需要勾选像素预览。