
B端设计
中微能源管理系统
为了提升目标公司运营效率,实现设备、能耗统一管理

















Industrial Design
Publication date October 2023
中微EMS能源管理系统
Zhongwei EMS Energy Management System
随着企业数字化与“双碳”战略的推进,传统能源管理方式逐渐暴露出数据分散、监控滞后、能耗分析困难以及人工统计效率低等问题。为了提升企业能源使用效率与设备运维能力,我参与开发了 EMS 能源管理平台。该平台围绕“能源数据统一接入、实时监控、智能分析”展开建设,通过整合电、水、气等多类型能源数据,实现企业能耗的可视化管理与精细化运营,为节能降耗和智慧运维提供数据支撑。
任务协同
系统监控
能源管理
数据可视化
目标人群
管理员
运维人员
数据监控人员
核心痛点
数据查看效率低不突出 信息层级混乱 告警不突出 多系统切换复杂
我的职责
负责 EMS 能源管理平台整体 UI 视觉设计与界面风格制定 参与前期需求分析与产品功能梳理,输出页面信息架构与交互逻辑 负责后台管理系统、数据可视化页面设计 根据业务场景设计图表、数据卡片、状态组件等可视化模块,提升数据展示效率 制定统一的设计规范与组件库,保证产品视觉一致性与开发协作效率 输出高保真设计稿、交互动效及开发标注,并与前端协同完成设计落地 持续优化用户体验与界面细节,提升系统易用性与整体视觉品质
需求调研
Requirement Investigation
通过对企业能源管理流程、用户角色及实际业务场景进行调研,梳理能源数据统一管理、设备实时监控、能耗统计分析、异常告警、数据可视化展示、报表管理及权限管理等核心需求,为 EMS 能源管理平台的功能规划、信息架构与 UI 设计提供依据。
Researching enterprise energy workflows, user roles and business scenarios, we define core needs for unified energy data management, real-time device monitoring, energy analysis, anomaly alerts, visualization, report and permission management, underpinning EMS platform function planning, information architecture and UI design.
希望能够统一管理企业电、水、气等能源数据,避免数据分散难统计
希望能够通过大屏驾驶舱统一查看整体运行情况
希望实时查看设备运行状态,及时发现异常问题
希望系统能够自动进行异常告警,减少人工巡检压力
希望系统能够自动进行异常告警,减少人工巡检压力
希望系统操作更加高效流畅,提升日常运维体验
希望数据展示更加直观,方便快速查看重点信息
目标人群
产品目标
Product Objectives
产品目标与价值主要是为企业达成降本、增效、提准三方面的问题。为企业的智能化管理护航。
降本
增效
提准
通过 EMS 能源管理平台对企业电、水、气等能源数据进行统一采集与集中管理,帮助企业实时掌握各区域、各设备的能耗情况,及时发现异常能耗与资源浪费问题。 系统通过能耗趋势分析、峰谷用电分析及异常告警等功能,辅助企业优化能源使用策略,减少不必要的能源消耗,从而降低整体运营成本与人工巡检成本。
传统能源管理依赖人工记录与线下巡检,存在数据更新不及时、处理效率低等问题。EMS 平台通过实时监控、自动告警、数据可视化及报表自动生成等功能,提高企业日常管理效率与运维响应速度。 管理人员可通过平台快速查看关键数据与设备运行状态,减少重复操作与人工统计流程,提升整体协同效率。
平台通过统一的数据标准与可视化分析能力,对能源数据进行实时采集、统计与分析,减少人工统计误差,提高数据准确性与可靠性。 同时,通过多维度数据分析与历史趋势对比,帮助企业更精准地识别高能耗问题与设备异常情况,为节能优化与运营决策提供可靠的数据支撑。
设计目标
Design Objectives
设计目标与价值主要是从用户体验五要素中的表现层、框架层、结构层出发,最大化增强用户体验,辅助提升产品力。
表现层
视觉设计:统一视觉规范、提升视觉体验 遵循简约高效设计原则,视觉及降噪,统一设计规范和组件,向用户清晰高效的传达信息
框架层
框架、布局、界面设计:统一组件规范、交互友好高效 梳理审核人员的审核操作流程,与任务操作习惯,合理布局页面信息与操作按钮,以提供高效的任务处理方案
结构层
信息设计、产品功能设计:用户体验增强,制定交互规则 从业务角度梳理核心用户需求,组织&规划产品设计,通过功能架构构建用户体验。建立层级关系制定交互规则。
功能架构
Functional Architecture
支持能源数据监测、设备运行管理、能耗分析统计、异常告警、能源流向分析、报表管理、数据可视化及系统配置等功能。
设计规范
Design Specification
通过遵循设计规范、使用组件库,以确保项目的用户界面和用户体验在整个平台中是一致的,提高用户对产品的认知和使用便捷性
主题色
#2F51FF
悬停
#506DFF
按压
#2744D6
警告色
#FA8C16
悬停
#FFA940
按压
#D46B08
禁用
#E6E8EB
边框
#D4D6D9
填充
#E8EDFF
禁用
#FED591
边框
#FFE7BA
填充
#FFF7E6
成功色
#15BA0C
悬停
#39C62C
按压
#049402
禁用
#89E078
边框
#B4EDA8
填充
#E6FAE1
错误色
#F6222F
悬停
#FF4D50
按压
#CE1322
禁用
#FFA39E
边框
#FFCCC7
填充
#FFF2F0
#000 88%
#000 65%
#000 45%
#000 25%
#000 15%
#000 6%
#000 4%
#000 2%
一级文本
二级文本
三级文本
四级文本
一级填充
二级填充
三级填充
四级填充
一级边框
#D9D9D9
二级边框
#F0F0F0
中文
PingFangSC
数字
MiSans
名称
字号
行高
字重
使用场景
H1
20px
28px
Meduim
页面标题
H2
16px
24px
Meduim
模块标题
H3
14px
22px
Meduim
文本标题
T1
16px
24px
Regular
段落文本
T2
14px
22px
Regular
默认文本
T3
12px
20px
Regular
提示文本
组件库
Component Library
主题色
#2F51FF
悬停
#506DFF
按压
#2744D6
警告色
#FA8C16
悬停
#FFA940
按压
#D46B08
禁用
#E6E8EB
边框
#D4D6D9
填充
#E8EDFF
禁用
#FED591
边框
#FFE7BA
填充
#FFF7E6
成功色
#15BA0C
悬停
#39C62C
按压
#049402
禁用
#89E078
边框
#B4EDA8
填充
#E6FAE1
错误色
#F6222F
悬停
#FF4D50
按压
#CE1322
禁用
#FFA39E
边框
#FFCCC7
填充
#FFF2F0
#000 88%
#000 65%
#000 45%
#000 25%
#000 15%
#000 6%
#000 4%
#000 2%
一级文本
二级文本
三级文本
四级文本
一级填充
二级填充
三级填充
四级填充
一级边框
#D9D9D9
二级边框
#F0F0F0





登录页
Login Page
首页
Home Page
整体设计理念
页面以“能源数据集中监控”为核心,通过园区总览、能耗分析、趋势变化及功能导航等模块,帮助用户快速掌握整体能源运行状态。 设计上采用后台管理系统常见的「左侧导航 + 中心内容 + 数据分析」布局结构,强化信息层级与数据可读性,提升企业能源管理效率。
左侧导航区
建立清晰的信息层级 采用树状菜单结构,将复杂功能分类归纳,降低后台系统的信息复杂度。 提升高频操作效率 高频功能常驻左侧,减少用户频繁跳转,提高运维人员日常使用效率。 强化工业平台稳定感 整体采用浅灰背景与线性图标设计,减少视觉干扰,突出数据内容本身。
核心视觉区
场景化能源监控 通过园区实景图结合设备定位,将抽象数据转化为可视化场景,提高用户对园区整体运行状态的理解效率。 强化空间感知 用户能够快速定位不同区域与设备状态,提升异常问题排查效率。 提升平台科技感 采用大图展示与场景化设计,增强平台视觉冲击力与数字化体验。
数据分析可视化模块
通过图表化与数据可视化设计,将复杂的能源数据转化为更加直观的信息展示方式,帮助用户快速了解园区整体能耗情况、能源变化趋势以及设备运行状态。 页面采用环形图、柱状图与折线图等多种图表形式,对不同区域、不同时间维度的数据进行分类展示,方便用户快速识别高能耗区域与异常波动情况,提升数据分析效率与管理决策能力。 通过数据可视化与模块化布局设计,将复杂能源数据更直观地呈现给用户,提升数据分析效率、异常问题识别能力以及整体能源管理体验。
能耗分析页
Energy Analysis Page
工业能源管理系统的能耗分析功能可直观展示能源消耗数据,帮助企业发现节能潜力,优化能源使用效率,降低运营成本,支持科学决策和可持续发展目标的实现。
光伏发电页
Photovoltaic Power Page
光伏发电模块使用柱状图可以直观展示不同类别数据的数值大小,便于快速比较差异;清晰呈现数据之间的关系和趋势
页面展示
Page Display