UI图标设计是UI设计中的基础知识，有的同学在设计界面的时候，总会在ICON版块出各种问题。比如：icon不清晰，描边不统一，图标排在一起忽大忽小，不稳定，设计风格不统一等，接下来南京UI设计培训班用一个案例教程来解决APP ICON 图标的统一绘制与优化。

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

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

　　1.语义明确

　　要做到icon与文字的含义相匹配，不能出现词不达意的状况。

　　2.刻画精细

　　要做到的是：首先就是不能出现虚边，其次是颜色，大小，描边，圆角，透视，角度都要统一。

　　基本的原则和理论我们知道了，但是要怎么应用到具体的icon中呢?

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

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

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

　　图1为安卓栅格，图2 为iOS栅格。我们把icon放到栅格中检查icon是否大小一致，如图：

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

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

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

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

　　第四步:角度。角度也是大家会忽略的一个点，在切图和前端工程师对接的时候会出问题，所以图标角度最好是30度，45度，60度，90度，120度这些有秩序有规律的数值，不要出现小数点和个位数的情况，形成这种制造规律和秩序的习惯，对设计师的进阶有着至关重要的作用。如图

　　总结

　　南京UI设计培训机构为我们分享了如何优化APP图标的基础教程，任何人都可以通过练习学习并掌握。