(五)图标
1、绘制原则
图标覆盖界面内快速识别与操作的场景——通过简洁、精确、一致的视觉符号降低用户理解成本,实现跨语言的信息传达与操作引导。
| 简洁 | 精确 | 一致 |
|---|---|---|
| 去除多余装饰与锚点,保留最具代表性的特征,保证小尺寸下依然清晰可辨 | 选择表意流通的图形,避免含义模糊的隐喻;命名语义化,便于检索调用 | 统一线宽、圆角、角度与视觉重心,保证系列图标在混排时的整体协调 |
2、规格参数
以24px栅格化版为绘制基准,2px为最小对齐单位,保证图标缩放至16px或32px时线条不出现小数,渲染不糊边。所有线条粗细、端点位置、圆角半径均按2px的倍数设定,确保各尺寸下图标保持清晰。核心图形主体限制在20×20安全区域内,特殊情况下(如指向性图标的箭头端)允许延伸至24×24画布边缘,形成2px的出血缓冲。
![]()
用户引用图标时,支持无级的缩放,建议以下递增或递减方式更改尺寸:
![]()
3、使用规则
| 语义优先 | 优先使用用户心智模型中流通度高的图形,避免自创隐喻 |
|---|---|
| 文字辅助 | 表意模糊或功能生僻时必须配合文字标签或 Tooltip,不可单独使用 |
| 尺寸统一 | 同一区域内图标尺寸保持一致,禁止大中小混排 |
| 颜色跟随 | 图标颜色跟随文本色或功能色,默认使用文本主色,危险/成功状态跟随语义色 |
4、图标库
我们提供19类,约1800个图标组件,涉及方向类、基础类、警告类、商务类、通讯类、教育类、设备类、开发类、天气类、编辑类、政务类、logo类、地图类、媒体类、系统类、交通工具类、图表类、文件类。覆盖大部分场景应用。
![]()
