1.系统图标是什么。

    GoogleMaterialDesign将下面图片中显示的这些图标称为系统图标，系统图标将根据系统/应用的不同需求绘制相应的图标。包含基本图标的系统图标、上箭头、单选图标、复选图标、设置和位置等等，都属于基本图标。谷歌的系统图标有5种不同的主题风格，分别是棱角图标、线性图标、曲线曲线图标、深浅图标和绝对棱角图标。让我们来分析和了解它们之间的差别。

    1.1基本图标。

    基本图标属于整个系统图标的一个小分支，主要由“基本图标”组成。诸如上下箭头、时间、位置、搜索、设置等均属于基本图标，应用最广泛也是基本图标。构建图示系统时，首先应该考虑建立基本的图标，这样使用帕累托定律可以降低80%的研发成本，产生20%的实际价值。

    并非所有的基本图标都是一种风格，并且不同的公司和企业对底层图标的定义也不同。

    1.2棱角图标。

    带棱角的图标并非所有的轮廓细节都是直角的，没有曲率的，是大体轮廓是有曲率的，而内部细节则是直角的。Turbo指的是图标中最大图形的边角，具体细节指的是图标中的最小单位、终点和终点。这些棱角图标的特征是，外部轮廓有一个曲率，而内部细节是一个直角，如下图所示。

    棱角图标视觉表现具有轮廓圆润、细节棱角，个人感觉具有包容性和亲和力，又能体现专注与专业，非常适合中国人的思维表达(外有圆滑内有己见)。这种图标的应用范围更广，也是最常用的。

    1.3线性图示。

    线形的图标就比较容易理解，也就是图形没有全部填满。图示没有完全填充外轮廓，就会形成条线，从而形成线性图标。线形图标也不需要完全封闭，断开部分轮廓也没问题。线形图标的特征是更轻巧、更精致、更清新、更有活力等等。但是其缺点也很明显，线条太纤细会给人一种不信任感。下面的图片是线性图标(左图)和棱角图标(右图)的对比图。

    从细节上来说，线性图标应该分为两类，一类是在图标中最小的单元，在末端有一个曲率，而另一个则没有曲率(直角)。细部差异会给使用者带来视觉感官上的差异，也会影响产品整体的个性和风格。

    图示线形的视觉表现更加细腻、细腻，常用于时尚产品、电商、女性产品/商品及年轻产品等。移动端设计经常用于状态切换以突出层次关系。

    1.4曲线曲线图标。

    一个曲线图示是指无论图标中最大图形的边角还是图标中的最小单位，只要它是矩形，都会有一定的曲率。在曲率图标中，矩形的曲率值并非绝对，只是因为一般情况下图标所包含的矩形都有一定的曲率。一些图示内部的矩形需要直角，把这些直角转换成有曲率的矩形，正是失去了这些矩形所带来的固有印象。下面的图表显示了它。

    在视觉上，曲率图标使人感觉更加柔和，更具亲和力，常用于较年轻的产品、母婴产品、有亲和力的产品中。假如一个产品要表达一种“专业”，使用曲率图标就不太合适了。

    1.5深浅图标(双色)

    谷歌把这个图标叫做“Two-Tone”，深/双色图标。说什么都可以，只要明白它的含义问题并不大。本人认为在一个系统图标上不可能有相同的明度/饱和度两种同级色，图标中的颜色必须有层次感，同色会显得很杂乱，所以我个人习惯称之为深浅图标。暗色图标的特征一般是由外轮廓的线条和浅色的矩形所组成。下面的图表显示了它。这些图标的特点是富有个性和趣味性，非常有趣、多样。

    深浅图标/双色图标的视觉表现让人感觉非常有活力，有个性、有趣味、不单调。

    1.6绝对棱角图标。

    以上所述“棱角图标”的特征是外轮廓有弯曲度，而绝对棱角图标则是所有在图标中没有任何曲率的矩形，所有的曲率都方方正正，这就是棱角图标。完全棱角图标的特征是棱角过于锐利，厚重而沉稳，但没有亲和感和亲和力，相反却给人一种很冷酷和专业的感觉。

    完全棱角图标的视觉表现让人觉得过于冷酷、过于机械性，无法用来表达设计的情感，也不适合用来营造人性化的设计。常用于传统的企业，男产品，专业产品。

    2.尺寸和格子。

    系统图标与产品图标大小不同，系统图标的设置也比较繁琐，图标大小分别为24px和20px这两种，放大不会像产品图标一样，按1:1绘制。每个尺寸都包括了“安全区”和“裁剪区”，在安全区域有相应的4条关键线限制图标，绘制起来比较复杂。

    2.1视点放大10倍。

    原来的24px/20px的尺寸在使用绘图工具绘制系统图标时显得太小了。在创建一个24px*24px大小的图标画布时，您需要将画布的视图比例放大10倍到1000%，以便能够看到局部的细节。并且图标基数可以设置为2px，画线更细更精确的图标可以设置为1px。

    2.2向量工具绘制。

    当绘制图标时，我们尽量使用矢量绘图工具绘制图标，而不使用像矢量工具Sketch、AI、AffinityDesigner这样的位图工具绘制图标时，只要有曲率就会出现杂边，特别是图标被放大后，这种效果更加明显，这样就无法精确地绘制图标。

    2.3避免小数位。

    使用矢量工具绘制图标时，一定要小心地看好图标的大小和位置，避免出现小数位。如果图标大小是24px*24px，如果绘制成像23.9px*23.7px这样的尺寸也是错误的，请务必小心看好图标尺寸以免出现小数。当我们将图标实际应用于页面时，还需要注意(x,y)坐标的位置和数值，同样要避免小数，要做到精确，0.1像素也不能漏掉。下面的图表显示了它。