标准语义图标设计清单 (v1.0)
关联文档: 标准语义管理 PRD目标读者: UI/视觉设计师 用途: 为语义库中每个标准 Key 设计统一的语义图标,用于前端聊天面板、空间控制面板、管理后台列表等场景的视觉标识。
一、设计规格
| 规格 | 要求 |
|---|---|
| 格式 | SVG (建议同时输出 24×24 / 48×48) |
| 风格 | 线性轮廓风格,圆角适中,2px 描边 |
| 配色 | 单色(#475569 / #64748B 灰色系),不依赖颜色传达含义 |
| 命名 | 统一前缀 semantic-,如 semantic-hvac-power.svg |
| 交付物 | 单个 SVG 文件 + Sprite 雪碧图(可选) |
二、语义图标清单(按业务分类)
2.1 暖通空调 (HVAC) — 5 个
| # | 语义 Key | 用户端名称 | 使用场景 | 图标设计建议 |
|---|---|---|---|---|
| 1 | hvac_power | 空调开关 | 用户说"打开/关闭空调" | 雪花 + 电源开关符号组合 |
| 2 | hvac_mode | 运行模式 | 用户说"调到制冷/制热模式" | 扇叶 + 模式切换箭头 |
| 3 | hvac_target_temp | 设定温度 | 用户说"调到 24 度" | 温度计 + 目标靶心 / 上下箭头 |
| 4 | hvac_fan_speed | 风速调节 | 用户说"风开大一点" | 扇叶 + 风量波纹(1-3 档) |
| 5 | fresh_air_level | 新风量 | 用户说"新风开大点" | 新风管道 + 气流箭头 |
2.2 照明系统 (Lighting) — 3 个
| # | 语义 Key | 用户端名称 | 使用场景 | 图标设计建议 |
|---|---|---|---|---|
| 6 | light_power | 灯光开关 | 用户说"打开/关闭灯" | 灯泡 + 开关符号 |
| 7 | light_brightness | 亮度调节 | 用户说"调亮/调暗" | 太阳 + 亮度光晕线条 |
| 8 | light_color_temp | 色温调节 | 用户说"调成暖光/冷光" | 左暖(橙)右冷(蓝)渐变弧线 |
2.3 遮阳与幕布 (Shading) — 2 个
| # | 语义 Key | 用户端名称 | 使用场景 | 图标设计建议 |
|---|---|---|---|---|
| 9 | shade_position | 窗帘开度 | 用户说"窗帘拉开一半" | 窗户 + 百叶/窗帘 + 百分比刻度 |
| 10 | shade_action | 窗帘开关 | 用户说"打开/关闭窗帘" | 窗帘展开/收拢动作箭头 |
说明: 原 PRD 中将
shade_action命名为"动作指令",过于抽象。普通用户无法理解"动作指令"是什么,改为"窗帘开关"更直观。
2.4 环境感知 (Sensing) — 7 个
| # | 语义 Key | 用户端名称 | 使用场景 | 图标设计建议 |
|---|---|---|---|---|
| 11 | env_indoor_temp | 室内温度 | 用户问"会议室多少度" | 温度计 + 室内房屋轮廓 |
| 12 | env_humidity | 相对湿度 | 用户问"湿度怎么样" | 水滴 |
| 13 | env_co2 | CO₂ 浓度 | 用户问"空气闷不闷" | CO₂ 分子式 / 云雾 |
| 14 | env_pm25 | PM2.5 浓度 | 用户问"空气质量好吗" | 细小颗粒 / 滤网 |
| 15 | env_occupancy | 空间占用 | 用户问"这个房间有人吗" | 人形轮廓 / 人影 |
| 16 | env_illuminance | 光照强度 | 用户问"这里亮不亮" | 光线传感器 / 照度计 |
| 17 | env_noise | 噪音分贝 | 用户问"这个房间安静吗" | 声波波纹 / 喇叭 + 声纹 |
新增:
env_noise帮助用户快速判断会议室是否安静,适合办公场景找安静工位或洽谈室。
2.5 会议设备 (Meeting Equipment) — 5 个
新增品类,面向普通员工在会议场景中的常见需求。原有的"设备运行状态(FA)"品类过于偏技术运维(故障码、累计能耗、运行时间等),普通员工用不到,替换为会议设备控制。
| # | 语义 Key | 用户端名称 | 使用场景 | 图标设计建议 |
|---|---|---|---|---|
| 18 | screen_control | 屏幕开关 | 用户说"打开投影仪/显示屏" | 显示器/投影仪 + 电源符号 |
| 19 | screen_input | 信号源切换 | 用户说"切到 HDMI" | 屏幕 + 输入箭头/插头 |
| 20 | av_volume | 音量调节 | 用户说"会议室声音大一点" | 喇叭 + 音量波纹 |
| 21 | av_mute | 麦克风静音 | 用户说"把麦关了" | 麦克风 + 静音斜线 |
| 22 | projector_screen | 幕布升降 | 用户说"把幕布放下来" | 幕布展开/收卷 |
三、建议移除的语义
原 PRD 中的 设备运行状态 (FA) 品类过于偏工程技术侧,普通办公人员几乎不会使用,建议从"面向用户"的语义库中移除:
| 语义 Key | 原名称 | 移除原因 |
|---|---|---|
fa_fault_code | 故障码 | 运维人员使用,普通员工不需要理解故障码含义 |
fa_is_error | 故障状态 | 设备异常应由后台自动告警,无需用户端语义暴露 |
fa_energy_total | 累计能耗 | 设施管理数据,不属于普通用户操作范畴 |
fa_runtime_h | 累计运行时间 | 同上 |
以上数据可保留在物理层/运维管理后台,无需暴露为前端语义 Key。
四、汇总统计
| 品类 | 图标数量 | 适用人群 |
|---|---|---|
| 暖通空调 (HVAC) | 5 | 全员通用 |
| 照明系统 (Lighting) | 3 | 全员通用 |
| 遮阳与幕布 (Shading) | 2 | 全员通用 |
| 环境感知 (Sensing) | 7 | 全员通用 |
| 会议设备 (Meeting) | 5 | 全员通用(会议场景) |
| 合计 | 22 |
五、优先级建议
设计师可按以下优先级分批交付:
- P0 (必先出):
light_powerhvac_powerhvac_target_tempenv_indoor_temp— 这是用户最高频的 4 个交互场景 - P1:
hvac_modehvac_fan_speedshade_actionenv_co2screen_controlav_volume - P2:其余全部 + 预留通用图标
六、前端集成方案建议
设计稿确认后,推荐两种集成路径:
方案 A:SVG Sprite(推荐)
- 设计师交付单个 SVG 文件
- 前端合并为 SVG Sprite,通过
<use href="#semantic-hvac-power">引用 - JS 中
icon字段存储 SVG ID(如semantic-hvac-power) - 优势:矢量保真、支持色彩覆写、无网络请求
方案 B:自定义 iconfont
- 设计师交付 SVG → 转换为 iconfont 字体
- 沿用现有 Font Awesome 架构,替换为自定义图标集
- 优势:切换成本低,兼容现有代码
