为什么我能画好一个icon，画不好几个相同类型的icon？

为什么别人总说我的icon风格不统一，到底哪里不统一了？

今天给大家讲讲，为什么我的icon为什么“不统一”。

关键字：风格、比例。

#风格

icon根据设计风格不同，分为：线性、剪影、写实、MBE等风格。

但其实一个风格也会演化出其他不同的样式：

所以把控风格的核心，首先要确定icon的设计要素，以线性图标为例，其中包括：线宽、圆角、是否有断点（断点方式）、是否有点缀、是否有背景、是否有填充;

所以很多时候，不是你画的icon不好看，而是你在细节上冲突了。

有一部分设计师会在iconfont.cn这样的网站直接下载一些icon进行使用，我个人不推荐这么做。

因为，你需要的icon经常无法在一个主题找到，然后退而求其次下载了几个不同人上传的几个图标。由于每个icon设计作图尺寸不一，你会发现，当icon缩小的一定尺寸的时候，经常差零点几个像素，如果你是矢量作图，就会不知觉忽略，然后发现实际导出使用，有的有虚边，有的没有。

以上是我在iconfont上下载的几个图标，强制调整到一样的大小后，显示的样式中，不仅线宽有差异，部分图标尺寸也出现小数点，有几个并未完整占位到像素网格上，以至于出现虚边等情况。

（虚边出现的情况很多：有的虚边因为在缩小时，线宽变为了1.2 3这样的数值，导致并非完整占位一个像素，不过，我个人设计上会允许0.5像素占位的存在。）

如果你确实没有灵感，你可以下载下来后，重新绘制。

#比例

有时候，即时我严格按照上诉的思路进行icon的绘制，还是会觉得，奇怪，但有说不出哪里奇怪。

往往这种情况都是由于比例失调导致的：

相机和放映机的icon，咋一看，都是线性的，圆角也一样的，但是就是不对劲，如果你感官敏感一点就能感觉，放映机的icon比相机的icon大一点。

右图是我用常规使用的icon制作背景板进行比较后的结果，放映机的占位比相机的占位高了几像素，所以需要针对这几像素进行调整。

我个人是比较推崇背景板的使用的，如果你也想要有一套自己的背景板，却无从下手，这里给你介绍捷径。

Material design设计规范中，有一章专门讲解了图标的设计方法，附带了一个标准的背景板，我自己这套就衍生之此，常规以48px*48px作图较多，这里就以这个尺寸还原一下：

注1：为什么矩形占位与圆形的占位不一样，主因是为了视觉修正，相同尺寸下，矩形看起来会比圆形大一些。

最后告诉大家一个网站，material design的icon库，目前收录了上百个icon，并且皆有符合上诉规范，在进行24px比例缩放时，不会出现尺寸问题。

网址：https://material.io/icons/

网址推荐：

material design规范中文站：http://wiki.jikexueyuan.com/project/material-design/style/icons.html （当前已定位图标章节）

iOS人机交互指南：http://www.uisdc.com/ios-10-gui-design-guideline-4