Skip to content

标准语义图标设计清单 (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用户端名称使用场景图标设计建议
1hvac_power空调开关用户说"打开/关闭空调"雪花 + 电源开关符号组合
2hvac_mode运行模式用户说"调到制冷/制热模式"扇叶 + 模式切换箭头
3hvac_target_temp设定温度用户说"调到 24 度"温度计 + 目标靶心 / 上下箭头
4hvac_fan_speed风速调节用户说"风开大一点"扇叶 + 风量波纹(1-3 档)
5fresh_air_level新风量用户说"新风开大点"新风管道 + 气流箭头

2.2 照明系统 (Lighting) — 3 个

#语义 Key用户端名称使用场景图标设计建议
6light_power灯光开关用户说"打开/关闭灯"灯泡 + 开关符号
7light_brightness亮度调节用户说"调亮/调暗"太阳 + 亮度光晕线条
8light_color_temp色温调节用户说"调成暖光/冷光"左暖(橙)右冷(蓝)渐变弧线

2.3 遮阳与幕布 (Shading) — 2 个

#语义 Key用户端名称使用场景图标设计建议
9shade_position窗帘开度用户说"窗帘拉开一半"窗户 + 百叶/窗帘 + 百分比刻度
10shade_action窗帘开关用户说"打开/关闭窗帘"窗帘展开/收拢动作箭头

说明: 原 PRD 中将 shade_action 命名为"动作指令",过于抽象。普通用户无法理解"动作指令"是什么,改为"窗帘开关"更直观。

2.4 环境感知 (Sensing) — 7 个

#语义 Key用户端名称使用场景图标设计建议
11env_indoor_temp室内温度用户问"会议室多少度"温度计 + 室内房屋轮廓
12env_humidity相对湿度用户问"湿度怎么样"水滴
13env_co2CO₂ 浓度用户问"空气闷不闷"CO₂ 分子式 / 云雾
14env_pm25PM2.5 浓度用户问"空气质量好吗"细小颗粒 / 滤网
15env_occupancy空间占用用户问"这个房间有人吗"人形轮廓 / 人影
16env_illuminance光照强度用户问"这里亮不亮"光线传感器 / 照度计
17env_noise噪音分贝用户问"这个房间安静吗"声波波纹 / 喇叭 + 声纹

新增: env_noise 帮助用户快速判断会议室是否安静,适合办公场景找安静工位或洽谈室。

2.5 会议设备 (Meeting Equipment) — 5 个

新增品类,面向普通员工在会议场景中的常见需求。原有的"设备运行状态(FA)"品类过于偏技术运维(故障码、累计能耗、运行时间等),普通员工用不到,替换为会议设备控制。

#语义 Key用户端名称使用场景图标设计建议
18screen_control屏幕开关用户说"打开投影仪/显示屏"显示器/投影仪 + 电源符号
19screen_input信号源切换用户说"切到 HDMI"屏幕 + 输入箭头/插头
20av_volume音量调节用户说"会议室声音大一点"喇叭 + 音量波纹
21av_mute麦克风静音用户说"把麦关了"麦克风 + 静音斜线
22projector_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_power hvac_power hvac_target_temp env_indoor_temp — 这是用户最高频的 4 个交互场景
  • P1hvac_mode hvac_fan_speed shade_action env_co2 screen_control av_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 架构,替换为自定义图标集
  • 优势:切换成本低,兼容现有代码

Released under the Private License.