UI设计教程——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。

开口剪掉后一个退出程序的图标的主轮廓就已经绘制出来了，接下来我们改变一下减去的路径留下的直角就行了，把这些直角改为有曲率的圆角。

把路径直角改变为曲率圆角的方法也比较，可以利用增加两个圆角矩形的方法实现，也可以用软件工具来实现。我用的是Affinity Designer的拐角工具，直接改变点的角度来实现的，也可以单独把点的角度转化为固定曲率值。