图标有以下分类：系统图标，操作界面图标，手机主题图标。今天我们来改一组移动端APP图标。同学们在设计界面的时候，总是在设计icon这个板块出现很多问题，比如：一些同学在做首页tab bar上的icon时出现一些比较基础的问题：icon不清晰，或者是描边不统一，图标排在一起忽大忽小，不稳定，设计风格不统一等，接下来我们用一个案例来带着同学们一步一步了解icon。

如图：图1为修改之前的icon，图2为修改过的icon

https://image.uc.cn/o/wemedia/s/upload/2018/3fd9d68975dce3d91dd802b4b04a255ex640x217x7.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

首先我们来说说图标在设计的时候要遵循的原则：

1 语义明确

2 刻画精细

语义明确：要做到icon与文字的含义相匹配，不能出现词不达意的状况。刻画精细要做到的是：首先就是不能出现虚边，其次是颜色，大小，描边，圆角，透视，角度都要统一。

基本的原则和理论我们知道了，但是要怎么应用到具体的icon中呢？接下来我们通过几个工作流程来充分应用一下这些原则。

第一步：语义明确

语义还不明确的情况下就开始细化，会做很多无用功，我们做一个系列的东西一定要看一下整体是否自洽，是否表达了文字要表达的含义，我们看一下原稿，图1：

https://image.uc.cn/o/wemedia/s/upload/2018/39fd2ee74664a8c531630dc5f6d55b3dx554x83x7.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

标签栏分为五个板块：活动，发现，圈子，商城，我的。这款app是一款户外野营类app，所以第一个活动的icon有点不符合产品调性，所以需要更改；圈子这个板块的图标是是一圈一圈的对话气泡，从视觉上和发现的板块雷同，需要更换；商城板块的icon是一个带着帽子的人头，虽然符合产品调性，但是没有表达出商城的含义

需要更换。如下图为更改之后的icon家族：

https://image.uc.cn/o/wemedia/s/upload/2018/b49d53f663b48a5f4ed61f4c14712253x520x177x7.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

第二步：从栅格开始

我们选择了更加适当的icon，之后开始更加严格的规范icon。这就需要一个辅助工具：栅格。移动端主要是安卓和苹果，所以我们的栅格体系也有两种，在做设计的时候根据产品调性自主选择一套适合自己产品的栅格体系。下图为栅格体系：

https://image.uc.cn/o/wemedia/s/upload/2018/b2654041a4e85a6fc5b87b38abf5d41fx569x332x42.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

图1为安卓栅格，图2 为iOS栅格

我们把icon放到栅格中检查icon是否大小一致，如图：

https://image.uc.cn/o/wemedia/s/upload/2018/f615c91ed5fd23e7573f83aef729ab14x524x110x11.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

如上图，商城的icon稍微超出了栅格的边界，记住,你不需要时时刻刻都严格遵守栅格和规则，栅格是帮助你创建统一的icon家族,但是如果需要在创建更好的icon和严格遵守规则之间选择的话,请打破原则,只是做的时候谨慎些。

第三步：像素级的精确

当创建小尺寸icon时,像素级对齐是非常重要的。小尺寸icon的抗锯齿渲染边缘会看起来模糊。怎么做到清晰呢？在ps里我们要挑出设置面板，把矢量对齐像素网格勾选上：

https://image.uc.cn/o/wemedia/s/upload/2018/79e0e2048a04e0c9c3e2179988903b45x631x258x7.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

不仅要做到矢量与像素网格对齐，还要让矢量与矢量对齐，在ps里我们绘制矢量图标会用到布尔运算，一定要注意图形与图形之间的关系，相切，相交，都要对好位置，这是一个设计师精准和专业的体现。如图：布尔运算的运用

https://image.uc.cn/o/wemedia/s/upload/2018/203018b9241e905e41635012d287f60dx640x180x46.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

布尔运算：矢量与矢量对齐

第四步:角度

同学们经常在角度这里没有引起重视，画的图标会有小数点或是有个位数的角度，这种情况在切图和前端工程师对接的时候会有很多问题，所以图标角度最好是30度，45度，60度，90度，120度这些有秩序有规律的数值，不要出现小数点和个位数的情况，形成这种制造规律和秩序的习惯，对设计师的进阶有着至关重要的作用。如图

https://image.uc.cn/o/wemedia/s/upload/2018/ff11f4de021042117723ca68ce37e40fx640x104x5.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

第五：使用统一的设计元素和符号：

在一套icon中加入同一元素,可以增进统一性，使单个的icon成为一套图标家族，接下来我们给icon的拐角处增加了圆角，这个特征不仅使这些icon成为系列,也增加了特征。

https://image.uc.cn/o/wemedia/s/upload/2018/a0163ef8c639b039a4b9489af943dff0x640x133x5.png;,3,jpegx;3,700x.jpg精确到每个像素" TITLE="PS图标设计规范, 精确到每个像素" />

​感谢你的阅读

还有什么实用技巧，可以在下方进行评论！ 我会一一进行整理，然后继续更新。

更多往期内容，可以翻看我以前发的文章，希望对大家有用！

需要领取更多资料、教程或者软件阔以加下学习扣扣君羊哟！(前6516后34667)