界面与体验设计 · 楼宇运维
2026
智慧楼宇
连接楼宇监测、能源与日常运维。
连接楼宇监测、能源与日常运维。
连接楼宇监测与日常运维。
界面与体验设计 · 楼宇运维
2026
智慧楼宇
连接楼宇监测、能源与日常运维。
连接楼宇监测与日常运维。
连接楼宇系统与运营界面 · 概念插画（能耗图表为示例数据）
项目简介
智慧楼宇是公司内部的楼宇运维平台，预计面向约 400–500 名员工。后勤、安保和管理人员可以在同一界面查看运行状态、核查告警并协同处理。目前平台仍在测试。
工具与技术
蓝湖 & Figma · 界面设计稿参考
前端 · 楼宇三维视图、数据看板与告警核查
后端集成 · 传感器与设备数据、告警记录及系统接入
工具与技术
蓝湖 & Figma · 界面设计稿参考
前端 · 楼宇三维视图、数据看板与告警核查
后端集成 · 传感器与设备数据、告警记录及系统接入
项目简介
智慧楼宇是公司内部的楼宇运维平台，预计面向约 400–500 名员工。后勤、安保和管理人员可以在同一界面查看运行状态、核查告警并协同处理。目前平台仍在测试。
工具与技术
蓝湖 & Figma · 界面设计稿参考
前端 · 楼宇三维视图、数据看板与告警核查
后端集成 · 传感器与设备数据、告警记录及系统接入
职责
UX/UI 设计 · 监控界面设计
参与时间
2026 年 5–9 月
团队
约 20–30 人项目团队
平台
Web 管理平台 · 可视化监控大屏
职责
UX/UI 设计 · 监控界面设计
参与时间
2026 年 5–9 月
团队
约 20–30 人项目团队
平台
Web 管理平台 · 可视化监控大屏
一栋楼宇，多套系统
项目背景 · 场景与需求
在天津一处既有企业园区，能耗监测、设备诊断与管理决策需要整合分散的运行信息。项目以楼宇为空间索引，探索把状态、位置与下一步操作连接起来。
业务关系示意，依据项目需求整理。
从既有楼宇开展试点
项目场景
试点在既有设备基础上，补充传感与系统数据接入。
环境与舒适
温湿度、空气质量，以及空调、通风与照明的联动控制。
安全与通行
视频监控、消防与安防告警，以及人员和车辆的出入信息。
能源与设备
水电使用、设备运行状态，以及基础信息和维护记录。
不同职责，共享同一场景
目标使用者
后勤与运维人员
查看环境与设备状态，查阅记录，协调日常维护。
安保人员
定位异常位置，结合关联视频核实情况，再开展处置。
管理人员
了解运行信息，并通过平台展示各系统的集成能力。
让告警带上完整场景
设计关注点
将状态或告警与位置、设备运行信息和关联证据放在一起，并提供处置所需的控制入口。
楼宇 / 楼层 / 空间
运行状态与关联设备
关联视频
可用控制
信息组织示意
背景与目标任务依据产品规格说明书及技术规范书整理。
一栋楼宇，多套系统
项目背景 · 场景与需求
在天津一处既有企业园区，能耗监测、设备诊断与管理决策需要整合分散的运行信息。项目以楼宇为空间索引，探索把状态、位置与下一步操作连接起来。
从既有楼宇开展试点
项目场景
试点在既有设备基础上，补充传感与系统数据接入。
业务关系示意，依据项目需求整理。
需要连接哪些信息？
业务范围
环境与舒适
温湿度、空气质量，以及空调、通风与照明的联动控制。
安全与通行
视频监控、消防与安防告警，以及人员和车辆的出入信息。
能源与设备
水电使用、设备运行状态，以及基础信息和维护记录。
不同职责，共享同一场景
目标使用者
后勤与运维人员
查看环境与设备状态，查阅记录，协调日常维护。
安保人员
定位异常位置，结合关联视频核实情况，再开展处置。
管理人员
了解运行信息，并通过平台展示各系统的集成能力。
让告警带上完整场景
设计关注点
将状态或告警与位置、设备运行信息和关联证据放在一起，并提供处置所需的控制入口。
楼宇 / 楼层 / 空间
运行状态与关联设备
关联视频
可用控制
信息组织示意
背景与目标任务依据产品规格说明书及技术规范书整理。
一栋楼宇，多套系统
项目背景 · 场景与需求
在天津一处既有企业园区，能耗监测、设备诊断与管理决策需要整合分散的运行信息。项目以楼宇为空间索引，探索把状态、位置与下一步操作连接起来。
从既有楼宇开展试点
项目场景
试点在既有设备基础上，补充传感与系统数据接入。
业务关系示意，依据项目需求整理。
需要连接哪些信息？
业务范围
环境与舒适
温湿度、空气质量，以及空调、通风与照明的联动控制。
安全与通行
视频监控、消防与安防告警，以及人员和车辆的出入信息。
能源与设备
水电使用、设备运行状态，以及基础信息和维护记录。
不同职责，共享同一场景
目标使用者
后勤与运维人员
查看环境与设备状态，查阅记录，协调日常维护。
安保人员
定位异常位置，结合关联视频核实情况，再开展处置。
管理人员
了解运行信息，并通过平台展示各系统的集成能力。
让告警带上完整场景
设计关注点
将状态或告警与位置、设备运行信息和关联证据放在一起，并提供处置所需的控制入口。
楼宇 / 楼层 / 空间
运行状态与关联设备
关联视频
可用控制
信息组织示意
背景与目标任务依据产品规格说明书及技术规范书整理。
两种视角，连接同一栋楼
设计挑战 · 信息架构
平台需要同时支持楼宇空间监测与业务系统管理。设计挑战在于：既让人看清整栋楼中需要关注的情况，也能顺畅进入具体记录与操作。
空间总览与系统详情
空间监测 · 日间场景展示
通过楼层与设备位置理解状态，再查看关联告警和视频。楼宇模型为不同系统提供共同的空间参照。
原系统演示 · 智慧用电看板；部分图表尚无实际数据
进入具体业务系统，查看趋势、记录与配置。管理界面承接更细致的信息核查与日常操作。
沿空间或系统找到设备
信息架构
空间层级与业务导航共同指向清晰的设备信息，将位置、运行状态和关联内容联系起来。
定位示意 · 从楼层找到设备
按空间查找
楼宇
楼层
房间 / 区域
按业务查找
业务子系统
监测 / 记录
设备列表
设备信息
位置、当前状态、关联信息与可用操作
两条导航路径，汇聚到同一设备信息
让总览聚焦，让详情可达
总览先行
位置
楼宇、楼层与房间
状态
当前运行情况
异常
告警与关联视频
按需深入
历史记录
趋势与过往记录
配置
系统与设备设置
操作
可用设备操作
依据产品规格、技术规范与原系统演示整理。
两种视角，连接同一栋楼
设计挑战 · 信息架构
平台需要同时支持楼宇空间监测与业务系统管理。设计挑战在于：既让人看清整栋楼中需要关注的情况，也能顺畅进入具体记录与操作。
空间总览与系统详情
空间监测 · 日间场景展示
通过楼层与设备位置理解状态，再查看关联告警和视频。楼宇模型为不同系统提供共同的空间参照。
原系统演示 · 智慧用电看板；部分图表尚无实际数据
进入具体业务系统，查看趋势、记录与配置。管理界面承接更细致的信息核查与日常操作。
沿空间或系统找到设备
信息架构
空间层级与业务导航共同指向清晰的设备信息，将位置、运行状态和关联内容联系起来。
定位示意 · 从楼层找到设备
按空间查找
楼宇
楼层
房间 / 区域
按业务查找
业务子系统
监测 / 记录
设备列表
设备信息
位置、当前状态、关联信息与可用操作
两条导航路径，汇聚到同一设备信息
让总览聚焦，让详情可达
总览先行
位置
楼宇、楼层与房间
状态
当前运行情况
异常
告警与关联视频
按需深入
历史记录
趋势与过往记录
配置
系统与设备设置
操作
可用设备操作
依据产品规格、技术规范与原系统演示整理。
两种视角，连接同一栋楼
设计挑战 · 信息架构
平台需要同时支持楼宇空间监测与业务系统管理。设计挑战在于：既让人看清整栋楼中需要关注的情况，也能顺畅进入具体记录与操作。
空间总览与系统详情
空间监测 · 日间场景展示
通过楼层与设备位置理解状态，再查看关联告警和视频。楼宇模型为不同系统提供共同的空间参照。
原系统演示 · 智慧用电看板；部分图表尚无实际数据
进入具体业务系统，查看趋势、记录与配置。管理界面承接更细致的信息核查与日常操作。
沿空间或系统找到设备
信息架构
空间层级与业务导航共同指向清晰的设备信息，将位置、运行状态和关联内容联系起来。
定位示意 · 从楼层找到设备
按空间查找
楼宇
楼层
房间 / 区域
按业务查找
业务子系统
监测 / 记录
设备列表
设备信息
位置、当前状态、关联信息与可用操作
两条导航路径，汇聚到同一设备信息
让总览聚焦，让详情可达
总览先行
位置
状态
异常
按需深入
历史记录
配置
操作
依据产品规格、技术规范与原系统演示整理。
模型端：在空间中理解楼宇
空间组织 · 定位 · 状态关联
楼宇模型把楼层、房间和设备点位与各子系统的运行数据连起来。
01 · 从建筑总览开始
首页总览 · 基于原始 UI 的日景展示研究
左侧菜单缩小当前页面的楼层范围；顶部标签则切换监测场景。图中与右侧一致的图标，将入口与对应场景联系起来。
左侧楼层菜单
首页选择二层
楼层选择作用于当前页面。
顶部标签 → 对应监测场景
智慧用电
低压配电室
风水联动
2.5D → 楼层控制
智慧照明
楼宇剖切视图
02 · 在当前页面中选择楼层
左侧菜单控制当前页面的楼层范围：首页查看房间与传感器，风水联动查看该层的回路与控制。下方两例分别从不同页面开始。
首页 · 房间与传感器
当前已在首页
从左侧菜单选择二层
首页 · 二层模型与传感器信息弹窗
在空间中查看传感器
房间、传感器点位与已打开的温湿度信息框同时可见，环境读数和历史曲线保留在模型旁边。
风水联动 · 楼层回路
先进入：顶部风水联动 → 2.5D
再选择：左侧菜单四层
风水联动 · 四层 2.5D 原始设计稿
查看所选楼层的空调回路
选择四层后，回路与设备点位对应到该层；空调控制面板、阀门设置及温度图表保留在示意图旁。
03 · 从顶部标签切换监测系统
智慧用电与智慧照明分别打开对应的业务场景。图内框出的是选中的顶部标签，这里切换的是系统，而非楼层。
智慧用电 · 低压配电室
空间参照
低压配电室 · 配电柜体
运行信息
变压器负载 · 需求预测 · 支路电量
柜体布局提供空间参照，周边面板显示负载、需求和分类用电信息。
智慧照明 · 楼宇视图
用楼宇视图理解照明
剖切模型把照明放回建筑空间中，周边面板呈现在线、工作、告警状态，以及人流与照明用能。
点击体验原始界面
模型关联空间位置与运行状态，系统工作台支持详细管理。交互控件使用演示数据。
模型端：在空间中理解楼宇
空间组织 · 定位 · 状态关联
楼宇模型把楼层、房间和设备点位与各子系统的运行数据连起来。
01 · 从建筑总览开始
首页总览 · 基于原始 UI 的日景展示研究
左侧菜单缩小当前页面的楼层范围；顶部标签则切换监测场景。图中与右侧一致的图标，将入口与对应场景联系起来。
左侧楼层菜单
首页选择二层
楼层选择作用于当前页面。
顶部标签 → 对应监测场景
智慧用电
低压配电室
风水联动
2.5D → 楼层控制
智慧照明
楼宇剖切视图
02 · 在当前页面中选择楼层
左侧菜单控制当前页面的楼层范围：首页查看房间与传感器，风水联动查看该层的回路与控制。下方两例分别从不同页面开始。
首页 · 房间与传感器
当前已在首页
从左侧菜单选择二层
首页 · 二层模型与传感器信息弹窗
在空间中查看传感器
房间、传感器点位与已打开的温湿度信息框同时可见，环境读数和历史曲线保留在模型旁边。
风水联动 · 楼层回路
先进入：顶部风水联动 → 2.5D
再选择：左侧菜单四层
风水联动 · 四层 2.5D 原始设计稿
查看所选楼层的空调回路
选择四层后，回路与设备点位对应到该层；空调控制面板、阀门设置及温度图表保留在示意图旁。
03 · 从顶部标签切换监测系统
智慧用电与智慧照明分别打开对应的业务场景。图内框出的是选中的顶部标签，这里切换的是系统，而非楼层。
智慧用电 · 低压配电室
空间参照
低压配电室 · 配电柜体
运行信息
变压器负载 · 需求预测 · 支路电量
柜体布局提供空间参照，周边面板显示负载、需求和分类用电信息。
智慧照明 · 楼宇视图
用楼宇视图理解照明
剖切模型把照明放回建筑空间中，周边面板呈现在线、工作、告警状态，以及人流与照明用能。
点击体验原始界面
模型关联空间位置与运行状态，系统工作台支持详细管理。交互控件使用演示数据。
模型端：在空间中理解楼宇
空间组织 · 定位 · 状态关联
楼宇模型把楼层、房间和设备点位与各子系统的运行数据连起来。
01 · 从建筑总览开始
首页总览 · 基于原始 UI 的日景展示研究
左侧菜单缩小当前页面的楼层范围；顶部标签则切换监测场景。图中与右侧一致的图标，将入口与对应场景联系起来。
左侧楼层菜单
首页选择二层
楼层选择作用于当前页面。
顶部标签 → 对应监测场景
智慧用电
低压配电室
风水联动
2.5D → 楼层控制
智慧照明
楼宇剖切视图
02 · 在当前页面中选择楼层
左侧菜单控制当前页面的楼层范围：首页查看房间与传感器，风水联动查看该层的回路与控制。下方两例分别从不同页面开始。
首页 · 房间与传感器
当前已在首页
从左侧菜单选择二层
首页 · 二层模型与传感器信息弹窗
在空间中查看传感器
房间、传感器点位与已打开的温湿度信息框同时可见，环境读数和历史曲线保留在模型旁边。
风水联动 · 楼层回路
先进入：顶部风水联动 → 2.5D
再选择：左侧菜单四层
风水联动 · 四层 2.5D 原始设计稿
查看所选楼层的空调回路
选择四层后，回路与设备点位对应到该层；空调控制面板、阀门设置及温度图表保留在示意图旁。
03 · 从顶部标签切换监测系统
智慧用电与智慧照明分别打开对应的业务场景。图内框出的是选中的顶部标签，这里切换的是系统，而非楼层。
智慧用电 · 低压配电室
空间参照
低压配电室 · 配电柜体
运行信息
变压器负载 · 需求预测 · 支路电量
柜体布局提供空间参照，周边面板显示负载、需求和分类用电信息。
智慧照明 · 楼宇视图
用楼宇视图理解照明
剖切模型把照明放回建筑空间中，周边面板呈现在线、工作、告警状态，以及人流与照明用能。
点击体验原始界面
模型关联空间位置与运行状态，系统工作台支持详细管理。交互控件使用演示数据。
从运行状态到操作记录
按系统查看 · 关联的任务流程
每个子系统都有自己的工作台。用户从概览与侧栏出发，根据任务选择查询、控制或记录。
一个系统概览，多种任务入口
不同子系统的任务入口有所不同。点击入口，查看下方对应案例。
先读懂系统概况
01 · 概览 / 智慧用电
智慧用电将读数与趋势汇集在看板中，再通过侧栏进入控制与记录。
智慧用电 · 原始完整看板
1
当前状态
关键读数帮助确认当前运行状态。
2
时间变化
结合趋势与分类构成，理解单个读数。
3
选择任务
从侧栏进入具体查询、控制或历史记录。
在智慧用电内继续操作
看板
侧栏 · 需量管理
自动 / 手动模式标签
侧栏 · 控制历史查询
进一步查询与比较
02 · 分析 / 能源管理
能源管理提供两种分析入口：按时段查询数据，或选择设备查看负荷；筛选条件始终与结果相邻。
按时段比较
能源管理 → 数据查询
选择对象与时段，比较曲线及同比、环比指标。
聚焦具体设备
能源管理 → 电能质量 → 负荷查询
从设备树选择对象，比较相应的电力曲线。
选择合适的控制模式
03 · 控制 / 智慧用电
从智慧用电侧栏进入需量管理，再选择模式；两种模式都保留目标需量与操作记录。
智慧用电 → 侧栏：需量管理 → 模式标签
自动控制 · 规则
在规则表中设置阈值、优先级与设备动作。
手动干预 · 直接调整
调整设备设置，再应用所选模式。
完成操作后，可从侧栏的需量控制历史查询回看过往操作。
另一条控制分支：照明
03 · 控制 / 智慧照明
照明也通过模式选择组织控制：手动操作具体设备，时间表定义生效时段，联动模式则是另一种选择。
智慧照明 → 侧栏：照明回路管理 → 模式标签
手动模式 · 设备控制
选择区域与设备，再操作对应开关。
时间表 · 有效日期
选择区域或回路，再设置日期与每周时段。
从任务记录查看执行详情
04 · 回查 / 设备管理
设备巡检展示记录查看的路径：找到任务记录，点击浏览，再查看逐点执行结果。
设备管理 → 巡检记录 → 浏览 → 巡检点详情
巡检任务记录
结合进度与状态定位任务，点击浏览进入详情。
巡检点详情
任务摘要保留在巡检点列表上方，选择检查点后查看相关证据。
所选界面来自蓝湖原始设计稿，数值与日期为原型示例；点击界面可查看完整原图。
从运行状态到操作记录
按系统查看 · 关联的任务流程
每个子系统都有自己的工作台。用户从概览与侧栏出发，根据任务选择查询、控制或记录。
一个系统概览，多种任务入口
不同子系统的任务入口有所不同。点击入口，查看下方对应案例。
先读懂系统概况
01 · 概览 / 智慧用电
智慧用电将读数与趋势汇集在看板中，再通过侧栏进入控制与记录。
智慧用电 · 原始完整看板
1
当前状态
关键读数帮助确认当前运行状态。
2
时间变化
结合趋势与分类构成，理解单个读数。
3
选择任务
从侧栏进入具体查询、控制或历史记录。
在智慧用电内继续操作
看板
侧栏 · 需量管理
自动 / 手动模式标签
侧栏 · 控制历史查询
进一步查询与比较
02 · 分析 / 能源管理
能源管理提供两种分析入口：按时段查询数据，或选择设备查看负荷；筛选条件始终与结果相邻。
按时段比较
能源管理 → 数据查询
选择对象与时段，比较曲线及同比、环比指标。
聚焦具体设备
能源管理 → 电能质量 → 负荷查询
从设备树选择对象，比较相应的电力曲线。
选择合适的控制模式
03 · 控制 / 智慧用电
从智慧用电侧栏进入需量管理，再选择模式；两种模式都保留目标需量与操作记录。
智慧用电 → 侧栏：需量管理 → 模式标签
自动控制 · 规则
在规则表中设置阈值、优先级与设备动作。
手动干预 · 直接调整
调整设备设置，再应用所选模式。
完成操作后，可从侧栏的需量控制历史查询回看过往操作。
另一条控制分支：照明
03 · 控制 / 智慧照明
照明也通过模式选择组织控制：手动操作具体设备，时间表定义生效时段，联动模式则是另一种选择。
智慧照明 → 侧栏：照明回路管理 → 模式标签
手动模式 · 设备控制
选择区域与设备，再操作对应开关。
时间表 · 有效日期
选择区域或回路，再设置日期与每周时段。
从任务记录查看执行详情
04 · 回查 / 设备管理
设备巡检展示记录查看的路径：找到任务记录，点击浏览，再查看逐点执行结果。
设备管理 → 巡检记录 → 浏览 → 巡检点详情
巡检任务记录
结合进度与状态定位任务，点击浏览进入详情。
巡检点详情
任务摘要保留在巡检点列表上方，选择检查点后查看相关证据。
所选界面来自蓝湖原始设计稿，数值与日期为原型示例；点击界面可查看完整原图。
从运行状态到操作记录
按系统查看 · 关联的任务流程
每个子系统都有自己的工作台。用户从概览与侧栏出发，根据任务选择查询、控制或记录。
一个系统概览，多种任务入口
不同子系统的任务入口有所不同。点击入口，查看下方对应案例。
先读懂系统概况
01 · 概览 / 智慧用电
智慧用电将读数与趋势汇集在看板中，再通过侧栏进入控制与记录。
智慧用电 · 原始完整看板
1
当前状态
关键读数帮助确认当前运行状态。
2
时间变化
结合趋势与分类构成，理解单个读数。
3
选择任务
从侧栏进入具体查询、控制或历史记录。
在智慧用电内继续操作
看板
侧栏 · 需量管理
自动 / 手动模式标签
侧栏 · 控制历史查询
进一步查询与比较
02 · 分析 / 能源管理
能源管理提供两种分析入口：按时段查询数据，或选择设备查看负荷；筛选条件始终与结果相邻。
按时段比较
能源管理 → 数据查询
选择对象与时段，比较曲线及同比、环比指标。
聚焦具体设备
能源管理 → 电能质量 → 负荷查询
从设备树选择对象，比较相应的电力曲线。
选择合适的控制模式
03 · 控制 / 智慧用电
从智慧用电侧栏进入需量管理，再选择模式；两种模式都保留目标需量与操作记录。
智慧用电 → 侧栏：需量管理 → 模式标签
自动控制 · 规则
在规则表中设置阈值、优先级与设备动作。
手动干预 · 直接调整
调整设备设置，再应用所选模式。
完成操作后，可从侧栏的需量控制历史查询回看过往操作。
另一条控制分支：照明
03 · 控制 / 智慧照明
照明也通过模式选择组织控制：手动操作具体设备，时间表定义生效时段，联动模式则是另一种选择。
智慧照明 → 侧栏：照明回路管理 → 模式标签
手动模式 · 设备控制
选择区域与设备，再操作对应开关。
时间表 · 有效日期
选择区域或回路，再设置日期与每周时段。
从任务记录查看执行详情
04 · 回查 / 设备管理
设备巡检展示记录查看的路径：找到任务记录，点击浏览，再查看逐点执行结果。
设备管理 → 巡检记录 → 浏览 → 巡检点详情
巡检任务记录
结合进度与状态定位任务，点击浏览进入详情。
巡检点详情
任务摘要保留在巡检点列表上方，选择检查点后查看相关证据。
所选界面来自蓝湖原始设计稿，数值与日期为原型示例；点击界面可查看完整原图。
03 / 空间原型
03 / 空间原型
03 / 空间原型
04 / 全尺度体验
04 / 全尺度体验
04 / 全尺度体验
05 / 现场评估
05 / 现场评估
05 / 现场评估