test_shwasher/front_end/UI/charging_pile_miniapp_ui.md

充电桩查询系统微信小程序UI设计

1. 整体设计风格

• 采用简约现代的设计风格
• 主色调：绿色（#4CAF50）象征环保与能源
• 辅助色：蓝色（#2196F3）用于重要信息突出
• 中性色：灰色（#9E9E9E）用于次要信息
• 统一的圆角设计（8rpx）
• 清晰的层级关系和视觉引导

2. 页面布局

2.1 首页（地图视图）

┌─────────────────────────────┐
│     定位/搜索栏             │
├─────────────────────────────┤
│                             │
│                             │
│      地图展示区域           │
│   (显示附近充电桩位置)      │
│                             │
│                             │
├─────────────────────────────┤
│  快速筛选栏（状态/类型）     │
├─────────────────────────────┤
│  底部导航栏                 │
└─────────────────────────────┘

功能元素：

• 顶部搜索栏：支持地址搜索
• 定位按钮：一键定位当前位置
• 充电桩标记：不同颜色表示不同状态
• 快速筛选：空闲/占用/故障，快充/慢充
• 底部导航：首页/列表/订单/我的

2.2 充电桩列表页

┌─────────────────────────────┐
│     搜索栏                  │
├─────────────────────────────┤
│  筛选条件栏                 │
├─────────────────────────────┤
│ ┌───────────────────────┐   │
│ │ 充电桩卡片 1          │   │
│ └───────────────────────┘   │
│ ┌───────────────────────┐   │
│ │ 充电桩卡片 2          │   │
│ └───────────────────────┘   │
│            ...              │
├─────────────────────────────┤
│  底部导航栏                 │
└─────────────────────────────┘

充电桩卡片信息：

• 充电桩名称和地址
• 距离信息
• 状态标签（空闲/占用/故障）
• 类型图标（快充/慢充）
• 评分和价格信息

2.3 充电桩详情页

┌─────────────────────────────┐
│     顶部图片轮播            │
├─────────────────────────────┤
│  基本信息                   │
│  - 名称                     │
│  - 地址                     │
│  - 状态                     │
├─────────────────────────────┤
│  详细信息                   │
│  - 充电类型                 │
│  - 充电功率                 │
│  - 接口类型                 │
│  - 收费标准                 │
├─────────────────────────────┤
│  评价信息                   │
├─────────────────────────────┤
│  【预约充电】按钮           │
└─────────────────────────────┘

2.4 个人中心

┌─────────────────────────────┐
│     用户信息卡片            │
├─────────────────────────────┤
│  我的订单                   │
├─────────────────────────────┤
│  充电记录                   │
├─────────────────────────────┤
│  我的收藏                   │
├─────────────────────────────┤
│  系统设置                   │
└─────────────────────────────┘

2.5 预约页面

┌─────────────────────────────┐
│     充电桩信息              │
├─────────────────────────────┤
│  预约时间选择               │
├─────────────────────────────┤
│  充电时长选择               │
├─────────────────────────────┤
│  费用预估                   │
├─────────────────────────────┤
│  【确认预约】按钮           │
└─────────────────────────────┘

3. 交互设计

3.1 地图交互

• 支持地图缩放和拖动
• 点击充电桩标记显示简要信息
• 点击简要信息卡片跳转详情页
• 支持当前位置一键定位

3.2 列表交互

• 支持下拉刷新
• 支持上拉加载更多
• 点击充电桩卡片进入详情页
• 支持多条件筛选

3.3 预约流程

1. 选择预约时间段
2. 选择充电时长
3. 确认费用信息
4. 提交预约
5. 等待确认

3.4 状态反馈

• 加载状态：骨架屏加载
• 操作结果：轻提示反馈
• 异常状态：友好提示

4. 组件设计

4.1 公共组件

• 导航栏组件
• 搜索框组件
• 充电桩卡片组件
• 状态标签组件
• 评分组件

4.2 业务组件

• 地图控件组件
• 时间选择器组件
• 筛选器组件
• 预约表单组件

5. 适配方案

• 采用rpx单位适配不同屏幕
• 关键点击区域不小于44rpx
• 字体大小层级：
  • 主标题：36rpx
  • 副标题：32rpx
  • 正文：28rpx
  • 说明文本：24rpx

6. 动效设计

• 页面切换：平滑过渡动画
• 按钮点击：缩放反馈
• 列表滚动：流畅滑动
• 状态切换：渐变过渡
• 加载动画：简约现代风格