# 充电桩查询系统微信小程序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. 动效设计

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