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

图标的尺寸形成的边界域，是整体图标的尺寸与实际图标所占的面积之间的区域，也是上一篇文章《 基础认知 Material 规范》- 3.图标区域中讲的"裁剪区域"。 这块跟内部区域一样，对绘制一个系统图标而言不会产生什么影响，大家也是简单的理解一下它是什么就行了。

2.系统图标 - 规范

当我们把系统图标的结构弄明白后先不要着急绘制它，而是要弄明白系统图标的规范后再去绘制它。我们需要修正图标的视觉部分，还要理解图标的触控范围与触点区域，之后还要从图标的形式上做规范。

2.1 视觉修正

当出现特殊情况时需要对图标进行微调。例如下面中的回形针图标，在24px*24px的尺寸中如果采用了2px的路径粗细度，各个路径的距离会显得很粗犷，圆角也会被挤压显得不自然，失去了回形针原本的印象，无法与我们生活中的回形针产生关联。

2.2 曲率的统一性

当我们绘制系统图标时，也要注意要保持路径顶端和末端的曲率的统一性。如果图标轮廓是线性尖锐的，所有路径的边角都应该是直角的；如果图标轮廓是圆润的，那所有路径的边角都应该是圆角的。

但这里要注意的是图标的形式不同，像"箭头"这种单一的形式要遵循"图标曲率统一性"原则。但是较为复杂的图标形式，例如像"公司图标"这样复杂的形式，就不要遵循图标曲率统一性的原则。因为我在上面的"1.1什么是轮廓中讲到过"，图标的轮廓被图标的性质影响并支配着，如果将"公司图标"里面的"窗户"的方形改变为与整体一致的圆形，就造成认知中理解的"窗户的形状"是圆角的而不是直角的，就会与我们认知中理解的窗户的形状不符，会使人产生不理解和感觉和印象。

2.3 去立体化

我们做UI设计是在二维平面中来进行绘制，这里指的是App或网页设计等，而不是那种实体交互设计或基于虚拟现实中的界面设计。所以图标的形式要去立体化和深度，也不能以立体化的形式出现。用二维来表现图标形式，就会贴近产品所传递的整体视觉形象，与整体的关联性就会更强。

2.4 避免复杂化

系统图标的绘制也要避免复杂化，要保持图标的简洁和大方，不要增加用户对图标的理解力。像下图中左面的图标一样要保持简洁和大方，这样的图标也比较直观；而右图中的图标增加了很多修饰并增加了用户的思考，相对而言这种图标不太容易被用户理解和接受。

2.5 避免生硬感

系统图标的绘制也要避免生硬感，图标在保持简洁的基础上应该增加灵动感，改有曲率的角就应该有曲率，没有曲率的地方就应该有直角，像图标的整体与细节全部都是直角的形式给人感觉就太过生硬了，用人的性格来描述它就是个铁憨憨，不会变通。