你是否面临过，一个系统的交互图标是否不成体系；

你是否面临过，领导在你旁边说你的图标不规范；

你是否面临过，一天只画出一个图标；

请看！如何自定义图标（设计规范）掌握六大技巧，让设计有腔调！

目录：

01  |  基础

02  |  样式

03  |  粗细

04  |  透视

05  |  圆角

06  |  角度

01  |  基础

正方形网格是所有IBM图标的基础结构，并用作确定整个图标集的线宽、比例、形状和定位的基础。网格有助于指导设计决策，确保图标的统一性，但更重要的是允许灵活地创建适当的图形，以传达正确的寓意。


基础网格

IBM图标绘制是基于像素32px x 32px的网格上，并按比例线性缩小到不同的大小。使用网格作为基本准则，可以将图标固定位置。我们建议你在处理过程中进行微调，来实现图标设计中的形状细节。（见下文）。


填充

网格包含2px填充。这样可以确保图标在导出时保留其所需的比例和周围的空白。通过留白或内呼吸感来保证图标的视觉平衡。（见下文）。



形状规范

图标抽象出来的基本形状来保证比例大小的一致性。这让图标视觉平衡相对容易，有助于图标找到相似点并建立关系。

 

02  |  样式

IBM图标的风格与我们的字体IBM Plex形成了有意义的结合。每个图标都是有意设计的，通过字体中发现的独特细节和特点来和谐配对。下图演示了图标和字母之间的一些关系，使它们能够在视觉上很好地融为一体。
 

03  |  粗细

一个图标看起来不应该比其他相同大小的图标更重或更轻。通过对所有图标使用2px粗细来保持视觉平衡。当然也有例外，当图标很复杂或线条很密集时（见下文）。



 

04  |  透视

IBM图标是设计好的，可以随时使用，但是你想创建一个新图标到图标库里，请确保的图标透视一致，可以选择正面或侧面。

 

05  |  圆角

对于圆角图标可以使用2px的统一半径，必要时可以以2px的倍数比如4px、6px来定义图标圆角。也可使用其他圆角半径来绘制图标。





 

06  |  角度

 
尽可能使用45°角进行抗锯齿，或者使用15°倍数的角度来绘制你的图标角度。也可以通过使角度始终保持相同的增量来保持图标的统一。



 

总结
IBM的图标设计规范从基本网格、样式、粗细、圆角、角度全方位的去定义图标的绘制方法，让我们以一种更科学更合理的去绘制图标。非常值得推荐和学习。

以上来自转载。