一、图标栅格
1. 栅格的组成
栅格的作用有点像绘画时用到的参考线。他可以帮助我们判断不同形状图标的大小,保持图标的一致性。
如果将栅格继续拆解,会分为以下5个组成部分:
- 网格
- 安全区域:可以绘制图标的区域
- 出血位:边缘留白,防止切图时裁切到图标
- 正切线:旋转图标的参考线
- 关键形状:涵盖了常用的基本几何形,绘制时可以以这些几何形作为基础形。在绘制关键形状的时候需要考虑不同形状的视觉重量,这里我们可以直接参考(抄)大厂的规范。
2. 案例拆解
MD是以24像素栅格,作为栅格绘制的模版。
出血位为2像素,防止图标被裁切。