系统图标(二) - 图标分解Material规范

文章篇幅也挺长了，这里只讲一个图标的绘制方法，如何绘制一个退出程序图标。首先我们得弄清楚绘制退出程序图标的顺序与步骤，并结合前几篇文章的知识来进行绘制。首先第一步我们先要确定图标的尺寸，我这里选用了24px*24px的图标尺寸；第二步思考一下图标的轮廓，再根据图标轮廓去选择关键线，因为退出程序图标整体轮廓是正方形，所以选用24px图标的正方关键线，得到尺寸是18px*18px；第三步通过正方关键线来绘制主轮廓，并用图形剪出主路径。接下来就开始完善具体细节了，包括形状、内路径、曲率等等，不着急一点一点解析，一点一点去学。我们先来看一下退出程序长什么样。

3.1 确定图标尺寸

绘制系统图标之前就应该确定好图标的尺寸，系统图标谷歌规定了两种尺寸，20px和24px，这里我选用的是24px这个尺寸。另外在确定好尺寸的同时也要确定图标的形式，我在《基础认知 Material 规范》开篇就讲到了图标有这几种形式，棱角图标线性图标、曲率图标、深浅图标和绝对棱角图标，这次我选用的是较为圆润的曲率图标，因为这种图标看上去比较有亲和力，我个人也是比较喜欢的。

3.2 确定轮廓与关键线

因为退出程序的图标整体轮廓是方形的，在选择关键线的时我们按照24px图标的规定来选择就可以了，这块在《基础认知 Material 规范》的文章后几小节也有说明，我们就会得到正方18px*18px这个尺寸。

3.3 绘制主轮廓 - 粗细

当我们把图标的关键线确定下来以后就可以绘制主轮廓了。我在文章上面的知识中讲到过，轮廓和笔画的粗细要以2px为来进行绘制，同时也要遵循图标统一性的原则，所有细节均以2px为基准，视觉修正等特殊情况除外。所以这里我们在绘制主轮廓时先绘制一个18px*18px的圆角矩形，然后再绘制一个14px*14px的圆角矩形（18px-（上间距2px+下间距2px）。

3.4 绘制主轮廓 - 曲率

因为我们画的是一个有曲率的图标，所以它的轮廓不是直角的，需要带一些曲率。而曲率这块也是有讲究的，如果按照以上操作把18px*18px和14px*14px的曲率值都设置为2px就是不对的。我先选择器那篇文章中提到过，由于尺寸的不同外面的矩形一定要比里面的矩形大，尺寸越小曲率也就越小。

3.5 绘制主路径 - 开口

当我们绘制好一个主轮廓后，就可以根据这个轮廓来改变其路径并变成我么最终想要的图标的样子。因为一个退出程序的图标的左面是有一个开口的，这时候我们需要改变一下这个形状的路径，但这里不是瞎断开两个点就完事儿了，这里也是有规范的，我们还是要满足图标统一性等原则，把这里的开口所要断开的尺寸均给减掉2px。