一、项目摘要

我主导了这款全新AI SCADA 系统的UI/UX 重构，重点在于打造一个低疲劳的深色模式仪表盘（Dashboard），以减轻高强度工业监控环境下的视觉压力。该界面能高效沉淀海量原始数据，赋能操作人员快速“识别异常、启动响应”，确保实时生产操作的稳定与安全。

核心速览

• 角色:产设计

• 平台:桌面端SCADA 系统

• 关键成果:优化了3000+ 设备的监控体验，搭建了SCADA 专属设计系统，大幅提升了警报响应速度。

• 核心技能 :高级数据可视化、深色界面架构、灵活的工业组件系统。

二、背景与挑战

背景：Micro AI 是一家先进的工业自动化解决方案提供商。他们的监控系统需要同时管理数千台遥测设备。然而，旧版界面缺乏清晰的信息层级和明确的视觉焦点，导致操作人员在处理紧急警报时容易遗漏关键信息。

痛点问题:

• 信息过载：单个屏幕上展示了过多未经处理的遥测数据，导致网络层级错综复杂。

• 异常识别困难：正常状态与异常状态之间的视觉对比度不足，拖慢了故障排查的响应速度。

• 视觉疲劳：长时间面对高亮度的传统工业界面，导致操作人员眼睛严重疲劳。

目标:

• 视觉降噪：通过实施深色模式（Dark Mode）和高对比度的层级结构，减弱次要背景信息的干扰，突出核心用户数据。

• 异常优先级管理：重新设计警报组件，确保“警告”和“停止”状态从“幽灵视觉”（意指视觉干扰）中脱颖而出。

• 模块化扩展性：构建一个高复用性的组件库，以灵活适配未来新增的各类设备类型。

三、设计流程

设计方法论与战略依据

A. 信息架构(IA)与工作流优化

挑战：该系统需要监控3000 多个同时具备“运行中、离线、在线、停止、警报”等复杂状态的设备。

设计依据：引入了“总览$\rightarrow$过滤$\rightarrow$详情”的信息流向。主仪表盘仅展示核心摘要统计数据，同时保留了一键穿透（穿透查看细节）的能力，从而减少了不必要的页面跳转。

B. 视觉设计与深色模式策略

策略：考虑到低光源的监控室环境，采用了深蓝灰色的底色（#0F131A），并搭配高饱和度的状态颜色（例如：红色代表“停止”、黄色代表“警告”、蓝色代表“运行”）。

呈现：设计了直观的图表和矩阵图来展示状态分布，让所有实时数据一目了然。

C. SCADA 专属设计系统

工程化了一套高可靠性、面向行业常规的设计系统。规范了工艺组件的状态标准——将特定的语意颜色对应到关键的警报级别（严重、警告、正常）——建立起一套统一的视觉语言。这不仅加速了前端开发，更确保了未来各类工业显示终端的无缝适配与扩展。