【项目背景】
随着新能源汽车的普及，充电桩运营成为了一个精细活。这款“充电桩计费APP”主要面向场站运营老板和财务人员，用于计算充电收入、监控设备状态以及配置复杂的计费规则。在旧版系统中，满屏的表格和枯燥的数字让运营人员叫苦不迭。我们的任务是通过UI重构，让复杂的B端数据变得直观、易读。
【数据看板：一眼看透核心营收】
老板打开App，最关心的就是“今天赚了多少”和“机器有没有坏”。
1. 核心数据前置：我们在首页顶部设计了深蓝色的沉浸式数据卡片。用大字号、黄绿撞色直接突出“今日收入”、“今日充电次数”、“耗电量”等核心指标。
2. 状态监控：卡片右下角清晰标注“在线/全部充电桩（如20/22）”，一旦离线数量出现异常，能立刻引起警觉。
3. 收入趋势图：下方引入了折线图，并提供了“7天/30天/90天”的切换Tab。通过蓝绿双线对比，直观展示营收的环比变化，让运营决策有数据支撑。
【交互降噪：把复杂表单“拆解”】
充电桩的计费是全行业最头疼的问题（涉及分时段、峰平谷电价、阶梯价、占位费等）。在设计“新增计费模板”时，我们没有把所有输入框堆在一起：
1. 模块化分组：将表单拆分为“选择收费方式”、“填写电费单价”、“服务费”、“停车费”等独立卡片。用户从上往下滑，像填问卷一样完成配置。
2. 动态表单：根据用户选择的计费模式（按电量、按时长、电费+服务费），动态显示相关的输入框，隐藏无关的复杂选项，避免视觉疲劳。
3. 分时段设置：针对峰平谷电价，我们设计了直观的时间轴添加功能，用户可以轻松添加“13:00-16:00 平段”等规则，并通过醒目的“删除/添加”按钮进行管理。
【设计规范：从产品分析到视觉落地】
在这个项目中，我们严格遵循了标准的 UI 设计流程（DESIGN STEPS）：
从 01产品分析（梳理计费逻辑）、02产品规划（搭建信息架构），到 03设计规范（制定字体与色彩规范），最后进行 04视觉设计（加入3D等距插画与情感化设计）。这种系统化的流程，保证了 App 在多端（首页、表单页、弹窗）的视觉一致性和操作流畅度。
【项目总结】
B端SaaS应用的UI设计，核心在于“业务逻辑的视觉化翻译”。我们不仅交付了一套清爽的界面，更输出了一套标准的设计规范。让财务对账不再眼花，让设备故障无处遁形，这就是UI设计赋能新能源产业的价值。
