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