UI界面设计在云起智控智慧照明系统中的应用

 一、引言

 智慧城市照明管控面向市政运维人员、园区物业、城管管理人员等多类使用者，涵盖办公室电脑集中调度、户外手机移动巡检两大核心操作场景。传统照明管理系统界面存在布局杂乱、功能层级过深、状态标识模糊、数据展示晦涩、移动端适配差等问题，非专业人员上手难度高，故障处置、节能调控操作流程繁琐，大幅提升运维人力成本。UI界面设计作为人机交互核心载体，围绕简易性、一致性、安全性、可视化四大核心准则，统筹视觉布局、交互逻辑、信息分层、多端适配全流程设计，打通云端平台、电脑B/S网页、Android手机APP、本地控制器小屏交互的人机通道。

 云起智控完整搭建双端标准化UI体系，电脑Web管理端采用深色政务大屏UI，手机APP采用轻量化扁平化移动端UI，统一视觉规范、交互逻辑与状态标识，覆盖设备地图、远程调光、故障告警、能耗报表、预案配置、权限管理全业务页面。本文基于通用UI设计理论，结合云起智控智慧照明电脑、双端客户端落地实践，从照明系统UI设计核心原则、双端分层UI架构、核心业务界面设计落地、交互优化方案、行业应用价值五大板块展开论述。

 二、智慧照明场景UI设计核心设计准则

 结合市政运维人员操作习惯、户外强光使用环境、多角色分级管控需求，云起智控UI设计严格遵循十项通用设计规范，贴合公共基础设施管理软件使用场景。

 1.**简易易上手原则**

 执行三次点击标准，所有核心操作（开关灯具、查看故障、新建预案）最多三步完成，菜单层级不超过三级，减少页面跳转，降低中老年运维人员学习成本，无需专业培训即可操作系统。

 2.**视觉一致性规范**

 全平台统一色彩、图标、字体、按钮尺寸，设备在线、故障、离线、待机采用固定色系区分，红色代表故障告警、绿色代表正常在线、灰色代表离线断开，全局图标语义统一，避免同功能多种标识造成混淆。

 3.**信息分层清晰**

 遵循人眼F型浏览动线，核心GIS地图、实时故障、今日能耗置于页面视觉黄金区域，次要参数、历史报表、系统设置收纳至次级菜单，避免页面信息堆砌杂乱。

 4.**强可视化优先**

 摒弃纯文字表格展示，大量采用GIS点位、折线能耗图、柱状对比图、状态卡片，把抽象电压、能耗、故障数据转化直观图形，管理人员快速识别片区能耗差异与故障分布。

 5.**操作可逆安全原则**

 关灯、批量调光、删除预案等高危操作增加二次确认弹窗，附带操作后果文字提示，支持撤销操作，防止误操作造成道路照明大面积熄灭。

 6.**多端自适应适配**

 电脑大屏、办公显示器、安卓手机、平板采用响应式UI布局，页面组件自动缩放，移动端隐藏复杂批量功能，保留巡检、故障查看核心操作。

 7.**户外可视性优化**

 移动端采用高对比度配色，支持浅色、深色两套主题，强光户外切换高亮模式，文字字号加大，避免阳光照射下界面看不清。

 8.**轻量化交互反馈**

 点击按钮、下发调光指令、设备离线均有弹窗、颜色、动画三重反馈，用户明确知晓操作是否执行成功，杜绝重复点击下发指令。

 9.**权限区分界面隔离**

 不同账号角色展示差异化菜单，市级管理员显示全市项目，园区物业仅展示自有片区，隐藏无权限功能入口，界面简洁无冗余内容。

 10.**模块化可扩展设计**

 UI页面采用组件化开发，新增单灯管控、人车联动、AI故障预判功能时，直接复用现有布局组件，无需重构整套界面，适配系统长期迭代。

 三、云起智控智慧照明双端分层UI整体架构

 云起智控搭建**Web电脑管理端UI**、**Android手机APP移动端UI**两套独立又统一的界面体系，视觉规范、交互逻辑同源，功能分层区分适配室内统筹、户外巡检两类差异化使用场景。

 （一）Web电脑端深色政务UI架构（B/S浏览器端）

 电脑端面向市政指挥中心、办公室专职运维人员，支持大屏可视化、批量全域管控，整体采用深蓝色科技政务主题，分层为顶部导航栏、左侧功能菜单栏、中间主业务画布、底部状态栏四层布局。

 1.**顶部全局导航层**

 放置项目切换、账号信息、消息告警、系统设置四大全局功能，右上角实时滚动显示未处理故障数量，新告警自动数字标红提醒，无需进入故障页面即可知晓异常总量。

 2.**左侧功能菜单栏**

 固定12大核心功能菜单，遵循业务流程排序：项目总览GIS地图、设备管控、故障告警、能耗统计、定时预案、场景管理、OTA升级、资产台账、运维工单、数据导出、权限管理、系统配置，菜单固定不折叠，专职人员快速切换模块。

 3.**中间主画布层（核心业务区）**

 页面核心承载区域，分三类标准画布：

 GIS电子地图画布：全屏展示片区控制器点位，故障设备红色高亮闪烁，支持框选批量调光；

 数据报表画布：折线、柱状图表展示日/月/年度能耗；

 设备列表画布：表格搭配状态色块，区分回路运行状态。

 4.**底部状态栏**

 显示系统运行时间、在线设备总数、今日故障、服务器连接状态，实时感知平台整体运行情况。

 整套WebUI采用组件化拆分，GIS组件、能耗图表、设备卡片、弹窗控件全局复用，新增景观亮化、园区管控功能仅新增页面组件，整体视觉风格不变。

 （二）Android移动端扁平化UI架构（外勤巡检APP）

 手机端面向户外外勤维修人员，轻量化扁平化浅色系设计，布局适配手机竖屏拇指操作热区，分为底部Tab导航、页面主体、弹窗浮层三层，精简复杂批量功能，突出现场巡检刚需。

 1.**底部五大Tab导航**

 固定核心功能入口：首页总览、地图管控、故障列表、预案、个人中心，单手拇指轻松点击，不设置深层折叠菜单，户外快速切换页面。

 2.**页面主体层**

 采用卡片式布局，每台控制器、单灯独立状态卡片，展示回路开关、亮度、故障类型；地图页面支持双指缩放，点击设备弹出简易调光操作面板，无需跳转新页面。

 3.**弹窗浮层交互层**

 扫码绑定设备、故障详情、临时调光均采用底部弹窗，不跳转页面，适配外勤快速临时调控，减少页面切换等待。

 移动端与电脑端共用一套状态色彩规范，故障红、正常绿统一，运维人员跨设备操作无认知成本，账号数据实时双向同步。

 四、核心业务场景UI界面落地实现

 （一）GIS全域可视化地图界面

 GIS地图是平台核心首页UI，电脑端全屏地图布局，移动端适配缩放交互。

 视觉设计：城市道路图层为浅色，控制器点位分三色圆点，绿色在线、黄色告警、红色故障，故障点位持续微光闪烁形成动态提醒；鼠标悬浮点位弹出回路总功率、亮灯时长迷你卡片，点击弹窗全开、半亮、分段调光、查看故障四类快捷操作。

 交互优化：支持框选片区批量下发亮灯方案，节庆活动一键框选全域景观灯切换全亮模式；地图内置搜索框，输入路段、设备编号快速定位目标配电柜，解决偏远路灯难找问题。

 移动端简化地图功能，移除批量调度，仅保留单设备调光、故障查看，适配单人户外巡检场景。

 （二）设备远程管控界面

 电脑端设备管控页面采用多列表格UI，每一行对应一台控制器，列展示回路总数、在线状态、实时功率、今日能耗、故障数量，状态单元格填充对应色彩，一眼区分异常设备；支持批量勾选多台设备，批量开关、批量同步定时预案，弹窗二次确认防止误关灯。

 手机端设备页面采用竖排卡片UI，单卡展示设备名称、地址、当前亮度，滑动卡片快速切换0至100%无级调光滑块，滑块实时显示百分比，适配现场临时调整亮度。

 （三）故障告警与运维工单界面

 故障页面UI突出优先级区分，红色置顶紧急故障（短路、线缆断开），黄色次级故障（灯具老化、通讯弱），每条故障卡片标注发生时间、路段、回路编号、故障类型、处置状态；未处置故障标红加粗，已修复转为灰色归档。

 界面内置筛选UI组件，支持按时间、故障类型、片区快速过滤历史告警，一键导出Excel运维台账，用于市政月度安全审计；手机端收到故障推送后，点击通知直接跳转对应设备页面，就近前往维修。

 （四）能耗数据统计可视化界面

 摒弃纯文字报表，UI采用双图表组合布局，上侧折线图展示近七日逐时能耗变化，下侧柱状图对比不同路段月度耗电量，坐标轴清晰标注单位；页面顶部配置时间筛选组件，切换日/周/年统计周期，图表自动刷新。

 数据异常点位自动标红高亮，快速定位高能耗路段，辅助管理人员优化调光策略，实现节能管控；报表页面支持一键导出标准化图表文件，直接用于城市双碳节能汇报材料。

 （五）定时与场景预案配置界面

 预案页面UI采用拖拽式交互，可视化设置日出日落经纬度亮灯、分段调光时段，时间轴组件直观展示全天亮度变化，支持复制已有节假日方案快速新建；页面区分日常、周末、节假日三类预案标签，节假日方案置顶优先执行，符合市政照明调度逻辑。

 电脑端支持复杂多时段编辑，手机仅提供简易临时预案，兼顾办公室精细配置与外勤临时调整需求。

 （六）账号权限管理界面

 权限页面采用树形分层UI，市级、区县、园区三级账号树形展开，勾选对应片区分配管控权限，无权限项目自动置灰不可点击；操作日志页面表格记录所有远程开关、修改预案操作，留存操作人员、操作时间、设备编号，满足安全审计要求。

 五、配套交互与视觉优化设计方案

 （一）标准化色彩语义体系

 全局统一色彩规范，杜绝视觉混淆：

 绿色：设备在线、正常运行、操作成功弹窗；

 红色：设备故障、紧急告警、高危删除确认；

 黄色：设备弱信号、待处置告警、待办任务；

 灰色：设备离线、归档历史数据、无权限功能；

 蓝色：系统主色调、图表基准线条、常规操作按钮。

 整套色彩适配电脑大屏室内、手机户外强光两种使用环境，移动端增设高亮度浅色主题。

 （二）轻量化交互反馈机制

 1.操作反馈：下发调光、开关指令后弹出2秒轻提示，成功绿色文字、失败红色文字，无需等待页面刷新；

 2.加载反馈：数据加载时显示简约进度动画，避免用户以为系统卡顿重复点击；

 3.高危防护：批量关灯、清空历史数据弹出双层确认弹窗，标注操作影响范围，提供取消按钮；

 4.离线提示：设备断开连接后点位、卡片同步变灰，标注离线时长，便于排查通讯故障。

 （三）多端响应式适配设计

 电脑端：横向宽屏布局，同时展示地图、设备列表、能耗图表多模块，支持大屏分栏可视化；

 平板：自动收缩左侧菜单，保留核心操作画布；

 安卓手机：纵向单列卡片，隐藏批量全域功能，放大触摸按钮、滑块，适配手指触控，文字字号放大；

 老旧低配手机：自动简化动画效果，降低页面渲染算力消耗，避免卡顿闪退。

 （四）组件化UI迭代优势

 云起智控整套界面采用组件式开发，GIS地图、状态卡片、图表、弹窗、按钮全部封装公共组件。后续新增单灯精细化管控、光伏路灯电量监测、人车联动调光功能时，仅复用现有UI组件新增页面，无需重新设计视觉、交互，大幅缩短版本迭代周期，保证界面风格统一无割裂感。

 六、UI界面设计落地行业综合价值

 （一）降低运维人员学习与操作成本

 标准化简易UI遵循三次点击原则，功能层级少、图形直观，无专业计算机基础的物业、街道运维人员经过短时讲解即可熟练操作系统，省去长期培训人力投入；可视化地图、色彩状态标识替代复杂文字，故障、能耗识别效率提升70%。

 （二）大幅缩短故障处置响应时长

 故障点位红色动态高亮、手机弹窗实时推送，运维人员无需逐行翻阅设备表格，地图直接定位故障路段，从传统人工巡检数天缩短至半小时内处置，减少夜间道路照明盲区安全隐患。

 （三）适配全场景管控需求，实现双端协同

 电脑Web端大屏UI满足指挥中心全域批量调度、月度报表审计、复杂预案配置；安卓移动端轻量化UI适配户外外勤巡检、现场临时调光，两套界面账号数据互通，办公室统筹、现场处置形成完整闭环，覆盖全部照明运维场景。

 （四）提升市政项目合规审计便捷性

 能耗图表、操作日志、故障台账UI一键导出标准化文件，图表排版规整，无需人工二次整理，直接用于住建、城管月度节能、安全审计汇报，节省报表制作时间。

 （五）系统长期迭代可维护性更强

 组件化、标准化UI架构，新增智慧照明拓展功能无需重构整套界面，视觉、交互保持统一，长期降低软件迭代设计、开发成本；多端自适应设计适配未来国产平板、移动终端普及趋势，无需单独改造界面适配新设备。

 （六）规避误操作带来的公共安全风险

 高危操作二次确认、操作可追溯日志UI设计，杜绝批量关灯、删除预案等误操作造成城市道路夜间照明瘫痪；所有远程调控操作完整记录在界面日志中，出现照明异常可快速溯源操作人员，满足市政基础设施安全管控规范。

 七、总结

 UI界面设计是云起智控智慧照明系统人机交互核心载体，围绕简易、可视化、安全、多端适配四大核心设计准则，搭建电脑B/S深色政务Web端、安卓扁平化移动端两套统一标准化界面体系，覆盖GIS地图、远程管控、故障告警、能耗统计、预案配置、权限管理全核心业务页面。

 整套UI采用统一色彩语义、分层布局、组件化开发，兼顾办公室全域统筹调度与户外手机移动巡检差异化使用需求，将复杂电气、通讯、时序数据转化直观可视化图形，降低运维操作门槛，缩短故障处置时长，同时通过高危操作防护、完整操作日志界面设计保障城市照明管控安全。

 在十五五智慧城市照明数字化升级进程中，标准化UI设计打通云端平台与一线运维人员交互通道，充分释放嵌入式控制器、云服务器、大数据平台的管控能力，让海量智慧照明设备实现高效、便捷、安全的全域数字化管理，为市政、园区、景区各类照明项目提供友好易用的人机交互支撑。