图标

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

应用原则

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

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

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

绘制原则

工整

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

适度

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

绘制模板

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

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

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

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

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

尺寸

尺寸 外框尺寸 描边粗细 网格边距 安全区域 搭配字体
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 图标,以达到最好的视觉效果: