Skip to content

(五)图标

1、绘制原则

图标覆盖界面内快速识别与操作的场景——通过简洁、精确、一致的视觉符号降低用户理解成本,实现跨语言的信息传达与操作引导。

简洁精确一致
去除多余装饰与锚点,保留最具代表性的特征,保证小尺寸下依然清晰可辨选择表意流通的图形,避免含义模糊的隐喻;命名语义化,便于检索调用统一线宽、圆角、角度与视觉重心,保证系列图标在混排时的整体协调

2、规格参数

以24px栅格化版为绘制基准,2px为最小对齐单位,保证图标缩放至16px或32px时线条不出现小数,渲染不糊边。所有线条粗细、端点位置、圆角半径均按2px的倍数设定,确保各尺寸下图标保持清晰。核心图形主体限制在20×20安全区域内,特殊情况下(如指向性图标的箭头端)允许延伸至24×24画布边缘,形成2px的出血缓冲。

图标规格参数

用户引用图标时,支持无级的缩放,建议以下递增或递减方式更改尺寸:

图标尺寸建议

3、使用规则

语义优先优先使用用户心智模型中流通度高的图形,避免自创隐喻
文字辅助表意模糊或功能生僻时必须配合文字标签或 Tooltip,不可单独使用
尺寸统一同一区域内图标尺寸保持一致,禁止大中小混排
颜色跟随图标颜色跟随文本色或功能色,默认使用文本主色,危险/成功状态跟随语义色

4、图标库

我们提供19类,约1800个图标组件,涉及方向类、基础类、警告类、商务类、通讯类、教育类、设备类、开发类、天气类、编辑类、政务类、logo类、地图类、媒体类、系统类、交通工具类、图表类、文件类。覆盖大部分场景应用。

图标库预览