组件

图标

为了更加易于操作和人性化而设计出的标识特定功能的图形标志。
图标的存在是为了快速准确的传达信息给操作的用户并且引导用户作出反馈行为,图标的设计有以下四点需要注意:
  • 创建可识别,高度简化的设计,太多细节可能会使图标混淆或无法阅读。
  • 统一的风格标准,这里包括尺寸、线宽、圆角、角度、位置、颜色等。
  • 避免在图标中包含文字。
  • 确保图标清晰可辨。

视觉平衡 #

图标系列应该在大小上视觉上一致。如果个别图标设计的重量有所不同,某些图标可能需要比其他图标略大一些才能达到此效果。

笔画与圆角 #

一致的笔画权重是统一整个系统图标系列的关键。
以24px*24px图标尺寸为基准,所有笔画宽度为2px,包括曲线,角度以及内部和外部笔划;圆角半径为2px。

视觉矫正 #

有一些细节比较复杂的图标,则需要一些微妙调整笔画的宽度以及圆角的半径以增加图标的易读性。

图标尺寸 #

常用的图标尺寸有12px、14px、16px、18px、24px、32px。

系统图标 #