图标 Icon

图标能够直接表达操作含义，快速唤起用户认知，从而帮助用户更快地理解操作。

应用原则

• 与文字搭配使用时始终与文字垂直居中对齐

• 不要在图标元素上使用超过一种的颜色，会影响识别度

• 与文字搭配使用时，建议将图标颜色与文字颜色保持一致

绘制原则

工整

当我们为了追求形式化，将图标作没有意义的形变时。其实往往加大了认知成本与难度。所以，图标一定要工整，避免用户使用「空间联想」，「形变矫正」等多余的认知行为。

适度

在图标中绘制尽可能少的细节，这类细节尤其不是重要的辨识细节时，不能因为要增加「趣味性」和更丰富的视觉「细节」而增加多余的图式配件和细节、或是过于复杂的几何曲线。一定要保持图标干净整洁、严谨清晰。

绘制模板

我们使用模板来辅助图标绘制，形状、位置、比例都应该基于模板来辅助设计。

• **网格：**使用网格来将笔画对齐到位，部分笔画允许微调来达到最佳效果

• **网格边距：**确保图标在导出时保持其所需的比例和周围的空白区域

• **关键基线：**为图标提供了一致的比例和尺寸参考。在绘制相似比例的图标时可以方便地保持一致性

• 特殊形状图标的部分笔画可以超出关键基线，不强制限制在安全区域内

尺寸

尺寸	外框尺寸	描边粗细	网格边距	安全区域	搭配字体
S	16px	1px	1px	14px	12pt
M	20px	1.2px	1.2px	16px	14pt
L	24px	1.5px	1.5px	20px	16pt

12号字体请搭配 16px 图标；14号字体请搭配 20px 的图标；16号以上的字体请搭配 24px 图标，以达到最好的视觉效果：