### 栅格规范

以 16\*16px 的尺寸作为图标绘制的统一栅格尺寸

![202111111](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111111.png)

绘制时应尽量对齐像素点，最大程度上保证图标的清晰度。

![202111112](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111112.png)

在处理一些对称图形时居中处理，不应为了对齐栅格而打破画面平衡

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111115.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111114.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 画布与辅助线

T-Design 图标的设计上实际画布应控制在栅格中心 14\*14px 的区域，周围留有 1px 的出血。
在一些特殊情况下如 icon 过长或者有突出的边角等，允许内容适当延展，以确保图标视觉重量上的统一

![202111116](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111116.png)

在制作时应尽量根据辅助线进行绘制以保持各图标间视觉重量的统一

![202111113](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111113.png)

根据绘制对象的形象特征去选择辅助线，在必要时，可以将内容扩展到辅助线之外

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111119.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111118.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

在绘制一些具有指向性的图标时，建议在其指引的方向多预留 0.25px 的空间，以便平衡画面

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111111.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111110.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111113.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111112.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 线条

绘制时建议使用 1px 宽度的笔画

![202111117](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/202111117.png)

在特殊情况下如复合图形，由于该类图标结构更为复杂，线条的粗细可以适当调整

![2021111114](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111114.png)

在处理长线线条的长度时建议使用 2 的倍数，这样更易进行对称处理。而短线上建议使用 3 个像素

![2021111115](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111115.png)

线段末端直角处理，但在表现一些文字类图形或带有三维空间的透视图形时应与栅格相切

![2021111116](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111116.png)

### 圆角

保持 1px 的外圆角，内角无圆角

![2021111117](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111117.png)

在处理“箭头”等具有方向性的标记时，在其顶端应采用 0.5px 的圆角，以便于突出其指向性

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111119.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111118.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 角度

线条如需倾斜最好与栅格内 45° 辅助线相平行，或使用 15° 的倍数

![2021111120](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111120.png)

不仅要注意图形部分的夹角，也要特别关注一些负形的夹角度数

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111122.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111121.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>
</div>

### 断口

需起到平衡视觉重量的作用 （最大宽度 ≤ 2px 且为 0.5px 的倍数）

![2021111123](https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111123.png)

### 繁简度

在确保高识别度的情况下，寻求内部结构以及外部轮廓上的最简

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111125.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111124.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111127.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111126.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>

### 弧线

弧线处理优先遵循正圆/正圆局部拼接

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111129.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/2021111128.png" />
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>
