# UI图标尺寸规范

## 通用图标尺寸体系

| 级别 | 尺寸(px) | 适用场景 |
|:----|:---------|:---------|
| 迷你图标 | 12×12 | 标签、徽标、状态指示、内联文本装饰 |
| 小图标 | 16×16 | 列表项图标、树节点图标、工具条小按钮 |
| 常规图标 | 24×24 | 主操作按钮、导航栏图标、 Tab 图标 |
| 大图标 | 32×32 | 功能入口、二级导航、空状态插图 |
| 较大图标 | 48×48 | 首页功能入口、特色功能展示 |
| 特大图标 | 64×64 | 页面级空状态、启动页、大模块标识 |

## 设计原则

1. **视觉对齐**：所有图标需在对应尺寸网格内居中对齐，上下左右留白均匀
2. **可识别性**：迷你/小图标应简化细节，确保在小尺寸下仍可辨认
3. **风格统一**：同一产品内所有图标保持相同的线宽（常规2px / 填充式）、圆角风格和透视角度
4. **像素完美**：关键边缘对齐像素网格，避免抗锯齿模糊
5. **语义一致**：同一语义（如"设置"）在不同尺寸下使用相同的图形语言

## 触控区域

| 设备 | 最小触控区域 | 图标间距 |
|:----|:------------|:---------|
| 桌面端 | 24×24 | ≥8px |
| 移动端 | 44×44（建议48×48） | ≥12px |
| 车载/工控 | 56×56 | ≥16px |

## 不同场景的图标尺寸建议

### 导航场景
- 顶部导航栏：24×24
- 侧边栏导航：16×16（折叠） / 24×24（展开）
- 底部标签栏：24×24（active状态可用32×32）

### 内容场景
- 列表图标：16×16
- 卡片图标：24×24 / 32×32
- 文章内联图标：12×12 / 16×16

### 功能场景
- 主要操作按钮：24×24
- 次要操作/文字按钮：16×16
- 工具条：16×16 / 24×24

### 反馈场景
- 提示/通知图标：16×16
- 成功/警告/错误状态图：24×24（密集） / 48×48（空状态页）
- 加载/进度指示：24×24

## 文件命名规范

```
{category}_{name}_{size}.svg
示例：nav_home_24.svg、action_add_16.svg
```

## 图标资源格式要求
- 优先使用 SVG 格式（可缩放、支持多主题）
- 提供 @2x / @3x 的 PNG 备选（用于不支持 SVG 的场景）
- SVG 需删除冗余元数据，压缩至最小

## 设计稿与前端验收对照表

| 设计稿标注 | 前端实现 | 验收标准 |
|:----------|:---------|:---------|
| 迷你 12px | `width:12px; height:12px` | 视觉清晰无模糊 |
| 小 16px | `width:16px; height:16px` | 边缘对齐像素网格 |
| 常规 24px | `width:24px; height:24px` | 居中对齐无偏移 |
| 大 32px | `width:32px; height:32px` | 细节完整可辨认 |
| 较大 48px | `width:48px; height:48px` | 视觉重量平衡 |
| 特大 64px | `width:64px; height:64px` | 可作为页面视觉焦点 |