116 lines
4.4 KiB
Markdown
116 lines
4.4 KiB
Markdown
# 分类名称到视觉元素的映射规则
|
||
|
||
## 目的
|
||
|
||
本文档定义了将分类名称映射到具体视觉元素的规则，帮助 AI 生成可识别性强的简约图标。
|
||
|
||
## 映射原则
|
||
|
||
1. **语义优先**: 根据分类名称的字面意思选择对应的视觉元素
|
||
2. **几何简约**: 使用简单的几何形状表达，避免复杂细节
|
||
3. **行业通用**: 使用行业内通用的符号和图标元素
|
||
4. **视觉区分**: 不同分类的图标应具有明显的视觉差异
|
||
|
||
## 常见分类映射规则
|
||
|
||
### 餐饮类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 餐饮 | 餐具（刀叉、勺子） | 线条简约，轮廓清晰 | 暖色系（橙色、红色） |
|
||
| 外卖 | 外卖盒、头盔 | 立方体轮廓 | 橙色 |
|
||
| 早餐 | 咖啡杯、面包圈 | 圆形为主 | 黄色 |
|
||
| 午餐 | 餐盘、碗 | 圆形或椭圆形 | 绿色 |
|
||
| 晚餐 | 烛光、酒杯 | 细长线条 | 紫色 |
|
||
|
||
### 交通类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 交通 | 车辆轮廓（方向盘、车轮） | 圆形和矩形组合 | 蓝色系 |
|
||
| 公交 | 公交车轮廓 | 长方形+圆形 | 蓝色 |
|
||
| 地铁 | 地铁标志、轨道 | 圆形+线条 | 红色 |
|
||
| 出租车 | 出租车标志、顶灯 | 方形+三角形 | 黄色 |
|
||
| 私家车 | 轿车轮廓 | 流线型 | 灰色 |
|
||
|
||
### 购物类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 购物 | 购物车、购物袋 | 圆角矩形 | 粉色 |
|
||
| 超市 | 收银台、条形码 | 矩形+线条 | 红色 |
|
||
| 百货 | 大厦轮廓 | 多层矩形 | 橙色 |
|
||
|
||
### 娱乐类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 娱乐 | 播放按钮、音符 | 圆形+三角形 | 紫色 |
|
||
| 电影 | 胶卷、放映机 | 矩形+圆形 | 红色 |
|
||
| 音乐 | 音符、耳机 | 波浪线+圆形 | 蓝色 |
|
||
|
||
### 居住类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 居住 | 房子轮廓 | 梯形+矩形 | 蓝色 |
|
||
| 租房 | 钥匙、门 | 圆形+矩形 | 橙色 |
|
||
| 水电 | 闪电、水滴 | 三角形+圆形 | 黄色 |
|
||
| 网络 | WiFi 信号 | 扇形波浪 | 蓝色 |
|
||
|
||
### 医疗类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 医疗 | 十字、听诊器 | 圆形+线条 | 红色或绿色 |
|
||
| 药品 | 药丸形状 | 椭圆形 | 蓝色 |
|
||
| 体检 | 心跳线、体温计 | 波浪线+直线 | 红色 |
|
||
|
||
### 教育类
|
||
| 分类名称 | 视觉元素 | 几何特征 | 颜色建议 |
|
||
|---------|----------|-----------|----------|
|
||
| 教育 | 书本、铅笔 | 矩形+三角形 | 蓝色 |
|
||
| 培训 | 黑板、讲台 | 矩形 | 棕色 |
|
||
| 学习 | 笔记本、笔 | 矩形+线条 | 绿色 |
|
||
|
||
### 抽象分类
|
||
|
||
对于语义模糊的分类，使用几何形状和颜色编码区分：
|
||
|
||
| 分类名称 | 几何形状 | 颜色编码 | 视觉特征 |
|
||
|---------|----------|----------|----------|
|
||
| 其他 | 圆形 | #9E9E9E（灰色） | 纯色填充，无装饰 |
|
||
| 通用 | 正方形 | #BDBDBD（浅灰） | 纯色填充，无装饰 |
|
||
| 未知 | 三角形 | #E0E0E0（极浅灰） | 纯色填充，无装饰 |
|
||
|
||
## 设计约束
|
||
|
||
1. **尺寸**: 24x24，viewBox="0 0 24 24"
|
||
2. **风格**: 扁平化、单色、简约
|
||
3. **细节**: 控制在最小化范围内，避免过度复杂
|
||
4. **对比度**: 高对比度，确保小尺寸下清晰可辨
|
||
5. **填充**: 使用单一填充色，避免渐变和阴影
|
||
|
||
## 扩展规则
|
||
|
||
对于未列出的分类，按照以下原则推导：
|
||
|
||
1. **提取关键词**: 从分类名称中提取核心词汇
|
||
2. **查找通用符号**: 对应的通用图标符号
|
||
3. **简化为几何**: 将符号简化为基本几何形状
|
||
4. **选择颜色**: 根据行业选择常见颜色方案
|
||
|
||
### 示例推导
|
||
|
||
**分类名称**: "健身"
|
||
1. 关键词: "健身"
|
||
2. 通用符号: 哑铃、跑步机
|
||
3. 几何简化: 两个圆形连接横杠（哑铃简化版）
|
||
4. 颜色: 蓝色或绿色（运动色）
|
||
|
||
**分类名称**: "理发"
|
||
1. 关键词: "理发"
|
||
2. 通用符号: 剪刀、理发师椅
|
||
3. 几何简化: 两个交叉的椭圆（剪刀简化版）
|
||
4. 颜色: 红色或紫色
|
||
|
||
## 更新日志
|
||
|
||
| 日期 | 版本 | 变更内容 |
|
||
|------|------|----------|
|
||
| 2026-02-14 | 1.0.0 | 初始版本，定义基本映射规则 |
|