UI设计师教你优化APP icon

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

文章是根据UI设计学生在练习是经常犯的错误所写，主要针对新手设计师，有大神有其他观点欢迎分享。

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

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

1 语义明确

2 刻画精细

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

基本的原则和理论我们知道了，但是要怎么应用到具体的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度这些有秩序有规律的数值，不要出现小数点和个位数的情况，形成这种制造规律和秩序的习惯，对设计师的进阶有着至关重要的作用。如图

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

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

统一元素

总结

我们分享了如何优化APP图标的基础方法。任何人都可以通过练习学习并掌握。创建好的icon要从产品调性出发,再不断细化出产品特色(刻画精致),在一个或一套icon中应用共同元素使你的icon保持内外统一。一旦你掌握了技术方法,你才会更加关注如何真正使你的icon变得优秀。

相关文章--,《Uber UI设计师告诉你小白的差距》