来源:网络 作者:佚名
当视觉平衡和物理平衡发生冲突时，我们应该优先选择视觉平衡。上图中是微信的界面图标，仔细观察我们发现通讯录的图标已经超出物理规定的大小，但是整个图标在界面中是可以达到视觉平衡的。所以我们在绘制的过程中可以打破规则。这也是每个优秀的设计师应该具备的。
03_11、图标网格系统
在主流的图标绘制中，线性图标的粗细大小有1px、2px、3px。所以我们在建立图标网格系统是使用了8的倍数，上面已经通过对数字8拆解中得知8的倍数非常适合1px、2px、3px粗细大小的。
在二倍图下使用48*48px的尺寸大小，在一倍图下使用了24*24px的尺寸大小来绘制图标。
空间的呼吸感
在绘制图标时，我们不但要确定图标的大小，还要考虑图标的内呼吸感，就是所谓的正负形，图标的负空间也有规则，Material design内呼吸感以2px为基准进行绘制的。
通过字体字重感受线性图标粗细
字体字重从细到粗会给人轻盈到沉稳的感觉，无论中文还是西文，文字越细其可读性越强，文字越粗其视认性越高。
通过列举线性图标的粗细大小有1px、2px、3px、4px。可以看到图标粗细变化给人的视觉感受也是不一样的，具体使用多大取决于界面内容，最好的方法就是通过对比来验证那个粗细更适合当前界面。关于2倍尺寸下使用3px,在3倍尺寸下会变成4.5px,会出现0.5px的问题。这方面的技术已经可以实现了，当然最好使用svg矢量格式。比如上图的爱心图标，弧线肯定是存在小数点问题，所以使用svg矢量格式是最好的选择。
03_11、怎么画一条0.5px的边
比较了在高清屏上画0.5px的几种方法——可以通过直接设置宽高border为0.5px、设置box-shadow的垂直方向的偏移量为0.5px、借助线性渐变linear-gradient、使用transform: scaleY(0.5)的方法，使用SVG的方法。最后发现SVG的方法兼容性和效果都是最好的，所以在viewport是1的情况下，可以使用SVG画0.5px，而如果viewport的缩放比例不是1的话，那么直接画1px即可。
更详细的请参考链接：
怎么画一条0.5px的边
https://segmentfault.com/a/1190000013998884
04、层次明确图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标；也有使用颜色来区分。
图标应该具有很强的延展性，好的图标可以直接当应用图标或者logo来使用。好的图标还可以通过点线面动效变化做下拉加载动画。
按图标功能还可以细分为动作图标、警示图标、内容图标、设备图标、文件图标、编辑图标、导航图标、通知图标、社交图标、切换图标等，为什么我们在设计图标的时候很少去系统的这样去区分，更多的原因可能我们做的C端产品，图标种类和数量相对较少，当我们接触到B端产品，由于B端产品的业务复杂程度对应的图标数量也随之增加，为了更好的管理图标需要更加详细的设置分类。
关于图标的命名为什么要用英语正规化？因为我们用的整个系统都是基于英语开发的，设计师的业务下游主要是前端工程师，如果我们不能规范的命名每个图标肯定会增加前端的工作量，如何提高合作效率应该也是设计师用户体验的范畴。英语差的打开谷歌翻译基本没任何问题的。
切图命名以模块为前缀，如：模块_类别_功能_状态.png
模块：
登陆页面（login） 公共（common） 需求a（need） 需求b(demand) 发现（discover） 消息（message） 我（me）
类别：
导航栏（nav） 菜单栏（tab） 按钮（btn） 图标（icon） 背景图片（bg） 默认图片(def)
功能：
菜单（menu） 返回（back） 关闭（close） 编辑（eidt） 消息（message） 删除（delete）
状态：
选中（selected) 不可点（disabled) 按下（pressed) 正常（normal）
图标的制作上线
在app产品中，以美团app为例整个产品中图标使用了多种风格，首页金刚区图标作为首页流量分发的重要分支，在视觉设计要吸引用户的眼球做的更艳丽一点，而在标签栏导航图标和内页的功能图标需要设计的更加简洁。我们在绘制图标的时候首页金刚区复杂的图标单独绘制一套，其他系统需要绘制线面两种风格，为了更好的适配页面。方面以后更好的使用我们在Sketch中使用Symbol系统的制作图标。
以爱心图标为例，我们使用Symbol绘制线面两套图标，关于图标的配色可以添加黑白灰+主色，可以有警示的橙色/成功的绿色/删除的红色等，后续复制添加也很方便。
建立图标库和颜色库，每次有新增的图标和新增的颜色，只需再新增一个Symbol就可以很好的管理自己产品中的图标库了。
团队协作目前团队协作按照图标功能分类上传到sketch的插件craft,方便团队其他成员一起使用。
设计的下游_前端开发为了很好的方便前端开发工作，我们需要根据上面的规范进行命名自己的图标。前端开发主流做法就是把图标变成一个字体，上传到团队共享的icon网站，通过输出svg矢量格式的图标，让前端开发工程师直接调用。国内主流的平台是iconfont，如果sketch制作的图标，导出svg格式在illustrator软件里面重新安装1024的尺寸进行绘制，上传到项目中。所以的路径都需要扩展成面性图标，多色图标不支持后期代码修改颜色，单色图标后期可支持自定义图标颜色。
总结：我们在设计的过程中，随之对设计的认知水平提高，我们的知识体系也在不断的完善，这时候就需要我们对了解的知识进行深挖，多问自己为什么？了解背后的逻辑。这样才会更加深刻。
参考文献：
Material Design规范：https://material.io
怎么画一条0.5px的边：
