图标
  • 图标用以辅助用户理解界面信息,给予用户正确、友好的指引。拥有一套规范化的优质图标,会赋予界面更好的视觉体验,是用户体验设计中不可或缺的重要环节。

  • 设计原则

    简约

    图标的造型告别繁杂,不做过多的装饰,有较高的易读性和辨识性。

    清晰

    清晰是保证设计品质的前提,我们需保证在各个平台上图标都有着清晰的阅读性。

    一致性

    图标中的风格,如圆角度、笔画等都需要保持一致性。

  • 设计规范

    • 图标尺寸

      PC 端图标尺寸为 24*24px,包含 2px 的溢出区域;移动端图标尺寸为 18*18px,包含 1px 的溢出区域。

    • 图标网格

      预设正方形、圆形、矩形、正交线、对角线以及内容区域,去辅助图标的设计,以达到一致的视觉面积。在绘制图标时,元素与像素网格对齐以确保清晰。

    • 简约造型

      图标造型建议化繁为简,避免笔画过多,保持图标简约、干净。

      正确示范

      错误示范

    • 笔画

      笔画为 2px。

    • 图形圆角

      外部角为 1px,内部为直角,整体避免过于锋利,且呈现更为理性的基调。

    • 复杂形状建议

      在一些较为复杂的图形中,建议用更细的线条加以辅助,使得整体的视觉效果更为和谐,视觉更为平衡。例如 PC 端用 1.5px、移动用 0.75px。

    • 弧形

      图标涉及到弧形的,需采用完整圆形中的弧形作为设计中的形状。

    • 线形和面形

      若线性图标使用中需要有对应的面形造型,在绘制两种对应图标时,需确保图标轮廓、大小一致。