有四个辅助形状(尺寸如图),包括正交线。MD的栅格规范,是我对比多个规范后包含内容较全,且通用的,同学们可以按照这个尺寸绘制,栅格的绘制建议使用0.1/0.2像素,不会影响使用时对图标的识别。
相同半径的圆会比正方形看起来小,所以在绘制栅格的时候就要对稍稍对圆形进行放大,使他们对视觉面积保持一致。
3. 多案例对比
在调研时,我们参考了MD/IBM/Ant /Shopee,接下来我们看看他们之间的异同。
比较相似的点就是,他们都会最大的尺寸作为绘制栅格的基本尺寸,其他尺寸图标可以在此基础上缩放。
出血位一般为2px,关键形状一般都包括一个横向的矩形,一个纵向的矩形,一个圆形,一个正方形,4个。在此基础上Ant增加了三角形。MD/shopee/Ant增加了一些较小的圆形,这些较小形状其实是可以辅助我们绘制极简图标(比如箭头)。
不知道是否有同学存在疑惑,同一套图标体系下,难道箭头这么简单的图标也要做24px这么大吗?其实不是的,栅格中就解决了这个问题。我们可以利用较小形状,只需保证外边框都是24px就好。具体如何使用会在接下来的问题中解答。
4. 栅格小结
- 一般情况一套图标库会使用最大尺寸图标作为栅格模版的绘制尺寸,在实际使用中,可以对栅格进行等比的缩放。
- 增加关键形状可以帮助我们绘制一些包含基础形状的图标,如相机图标就是由一个偏扁的长方形延伸而来。如果你的图标体系中有特殊的几何形也可以增加到栅格中,如Ant就增加了三角形在图标栅格中。
- 增加较小的关键形状可以帮助我们可以绘制相同尺寸下的小图标/极简图标,如箭头/加减符号等。
5. 使用栅格时遇到的问题
提问1:“如果完全按照栅格来画,我感觉视觉重量不一致”。
回答:
出现这个问题,可能是由于我们需要一个正方形的图标和长方形的图标放在一起,会感到不和谐。当图标以组的形式存在,为了追求图标与图标之间视觉平衡。可以将图标的外形状适当进行统一(但也要保证图标的表意)。如果希望图标的适配度更高,可以在画的时候偏方一些。如上图Twitter和IG的做法。