作品集 · 借助 AI 工具独立完成

三端物联网暖通运维平台

服务商中控台 · 业主端小程序 · 硬件中控面板

暖枢是一套面向暖通（HVAC）行业的物联网运维产品：服务商用中控台管理全国项目、处理告警与工单；业主用小程序控制家里的暖通设备、智能家居与安防；墙面硬件面板让家人在家中就地操作。三端围绕同一户住宅的设备状态协同工作——在任意一端调节窗帘、处理报警或提交预约，另外两端会同步更新。

从业务流程、信息架构、视觉与交互设计到前端实现均借助 AI 工具独立完成。设计中参考了 Trane、Daikin、Resideo、Sensi 等暖通品牌的服务模式（业主授权远程诊断、月度系统健康报告、服务商品牌露出），并结合国内经销商上门服务的场景重新设计。

角色产品设计 & 前端开发（借助 AI 工具独立完成）

形式3 个可交互 Demo · 同一浏览器内实时联动

技术HTML · CSS · JavaScript（零依赖）

扫码在线体验三端 Demokhalilzheng.cn/nuanshu-hvac-platform/showcase.html

架构总览

服务商中控台

经销商级运营驾驶舱：全国项目地图、运行监测、故障与安防预警、服务工单，以及家庭绑定、业主授权与预约处理。查看演示 ↗

⇄绑定 · 授权
预约 · 派单

业主端小程序

业主的家庭控制中心：多家庭切换、暖通温控、智能家居与安防、月度健康报告、授权服务商与一键预约。查看演示 ↗

⇄设备状态
实时同步

硬件中控面板

墙面触控终端：就地温控与场景、安防与家居控制、服务商信息，闲置时进入带天气提醒的锁屏。查看演示 ↗

3 分钟体验路线

演示数据只保存在你自己的浏览器里；联动效果建议用电脑体验

打开业主端小程序，点登录页底部的「演示项目」进入演示账号
在同一个浏览器里再开两个标签页，分别打开硬件中控面板和服务商中控台
在小程序首页「安防与家居 → 查看全部设备」拖动窗帘或灯光滑动条，看面板和中控台同步变化
在小程序「服务」页一键预约上门，再到中控台「待处理项目」里确认并派技师
在面板「我的 → 面板设置」点「立即锁屏」，看锁屏的天气与生活提醒

01 · 服务商中控台

为经销商规模设计的运营驾驶舱

面向大型经销商而非单一门店：6 大区运营中心、60 余个项目、2,169 台设备。首页是一屏式驾驶舱，地图、网点与项目列表相互联动；监测、预警、工单形成闭环，业主家庭的绑定、授权与预约也在这里统一处理。

◆全国项目运营大屏：完整省界地图 + 南海诸岛小图，按运行状态着色；超宽屏自动等比放大

◆运行监测：设备台账、能耗趋势与多指标遥测曲线，可远程下发指令、生成运维工单

◆故障与安防预警一键派单，已派单的报警不会重复建单，工单状态实时跟踪

◆家庭管理：新建家庭并绑定业主手机号、处理增删家庭申请；在业主授权下发起 2 小时远程调节

查看实时演示↗

02 · 业主端小程序

业主的家庭控制中心

业主用手机号登录后，看到服务商为自己绑定的家庭，可以在多个家庭间切换、修改家庭名称与地址。首页用可折叠分区收纳温控、场景、安防与能耗；数据给不给服务商看、能不能远程调节，由业主自己决定。

◆手机号验证码 / 微信登录，演示账号一键进入；增删家庭需提交申请，由服务商处理

◆智能窗帘与灯光用滑动条无级调节：滑到最左自动关闭，开关一键恢复上次的位置

◆服务商访问权限三档，远程调节每次临时授权 2 小时，到期自动关闭

◆月度系统健康报告：评分随设备真实状态变化，问题可直接授权远程处理或预约上门

◆电表与燃气表分析：分时电价、峰谷用电与居民阶梯气价

查看实时演示↗

03 · 硬件中控面板

墙面触控终端的物理设备语言

5:4 横屏触控面板，与小程序共享同一户住宅的数据。屏幕固定为深色，模拟真实显示屏不随页面主题切换的物理特性；闲置一段时间后进入锁屏，只显示此刻最需要知道的信息。

◆首页、安防、场景、数据、服务、我的六个模块，屏幕尺寸固定

◆快捷设备、入户门锁、分区灯光与房间温控就地操作，与小程序、中控台实时同步

◆锁屏：「窗边暖光」插画背景，显示天气与生活提醒（带伞、防晒、口罩、添衣），轻触唤醒；发生安防报警自动亮屏

◆显示负责该家庭的服务商信息，常见问题自助排查与上门预约

查看实时演示↗

跨端业务闭环

每个功能都不只停留在一端：数据由谁产生、谁来处理、结果回到哪里，是设计三端时最先考虑的问题。

家庭绑定与申请

中控台服务商新建家庭、录入设备，并绑定业主手机号
小程序业主登录后在「我的家庭」查看并切换；可以改名称和地址，增删家庭需提交申请
中控台服务商在「待处理项目」里处理申请，结果回传小程序
三端业主修改的家庭名称、地址同步显示在中控台和硬件面板

业主授权远程服务

参考 Trane · Daikin

小程序业主为每个家庭选择授权级别：持续监测 + 远程调节 / 仅监测（默认）/ 不共享数据
中控台发现地暖供水温度超上限，服务商在家庭详情里申请 2 小时远程调节
小程序业主在首页收到提示，选择允许或拒绝；授权到期自动关闭
中控台远程下调供水温度设定并复位告警，工单无需上门即完成，小程序里的健康评分随之提升

一键预约上门

参考 Resideo Pro-IQ

小程序首页和服务页展示负责该家庭的运营中心、负责人与服务时间
小程序选择年度保养 / 故障维修 / 滤网更换，选好日期和时间段后提交
中控台预约实时出现在待处理项目与服务工单中，服务商确认并指派技师
小程序处理结果回传业主端，业主也可以取消预约

智能家居与安防联动

三端业主在小程序或面板拖动窗帘开合、灯光亮度，三端状态实时同步
面板烟雾或燃气探测器报警时，锁屏自动亮屏回到首页
中控台安防报警排在预警列表最前，可一键派单，已派单的不会重复建单
小程序业主选择「不共享数据」后，中控台看不到智能家居状态与安防报警

界面一览

月度系统健康报告页面 — **月度系统健康报告**评分、需要处理的事项与检查明细

智能窗帘与分区灯光的滑动调节 — **智能窗帘与灯光**滑动条无级调节，三端实时同步

服务商访问权限设置页面 — **服务商访问权限**三档授权，写明服务商能看到和看不到什么

硬件中控面板锁屏：窗边暖光插画、时间、天气与生活提醒 — **硬件面板锁屏**「窗边暖光」插画背景，天气与生活提醒，轻触唤醒

服务商中控台运行监测：设备台账、能耗趋势与设备遥测曲线 — **中控台运行监测**设备台账、能耗趋势与多指标遥测曲线

设计系统

业主端与硬件面板共享同一套设计令牌：深松石绿与黄铜色构成的温暖工业质感，搭配 Oswald 数字与 IBM Plex 字族；服务商中控台作为运营大屏，单独采用深海军蓝数据大屏配色。深浅色主题均为独立定义的完整令牌集，而非简单反色。

业主端小程序 / 硬件面板

ink

brass

frost

good

warn

critical

surface

服务商中控台

surface

accent

frost

good

warn

critical

ink

displayOswald 暖枢

bodyIBM Plex Sans 正文文本

mono12,456.8 kWh

icon品牌图标「温控环」：温控旋钮环绕一座亮着暖光的房子，寓意「温暖中枢，一核控全屋」

纯 HTML / CSS / JS 零第三方框架 localStorage 跨标签页实时同步响应式 + 大屏自适应深浅色双主题 SVG 地图与数据可视化字体自托管

三个 Demo 均为可交互原型，建议在桌面浏览器打开体验完整交互；演示中用浏览器本地存储模拟云端同步，数据不会上传。
早期合一版原型（单页三标签）：查看 →

暖枢 NUANSHU · 借助 AI 工具独立完成
作品集案例页面