# 房间等待页面 - 线框图设计方案

## 需求分析（更新版）

### 页面功能
- **页面类型**：房间等待页面（我创建的房间）
- **核心功能**：显示房间信息，管理对战双方
- **默认状态**：房主 vs AI对手

### 关键元素
1. **房间号**：自动生成的6位数字房间码
2. **玩家卡片**：显示房主信息（自己）
3. **对手卡片**：显示对手信息（默认AI，可踢出）
4. **玩家数据**：对战次数、胜率等统计信息
5. **管理功能**：踢出对手按钮

### 简化需求
- ❌ 无时间设置
- ❌ 无观战功能  
- ❌ 无其他复杂设置
- ✅ 简洁的双人对战等待界面

## 线框图方案

### 方案一：上下对称式布局

```
┌─────────────────────────────────────┐
│ ← 返回      房间 123456      ⚙️    │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐    │
│  │ 👤 张三（房主）              │    │
│  │                             │    │
│  │ 🏆 对战次数：156场          │    │
│  │ 📊 胜率：68%                │    │
│  │ ⭐ 等级：黄金III             │    │
│  │                             │    │
│  │          [准备完成]          │    │
│  └─────────────────────────────┘    │
│                                     │
│            ⚔️ VS ⚔️                 │
│                                     │
│  ┌─────────────────────────────┐    │
│  │ 🤖 AI对手                   │    │
│  │                             │    │
│  │ 🏆 对战次数：∞               │    │
│  │ 📊 胜率：45%                │    │
│  │ ⭐ 等级：匹配中...           │    │
│  │                             │    │
│  │  [等待中] [❌踢出对手]       │    │
│  └─────────────────────────────┘    │
│                                     │
│              [开始游戏]              │
└─────────────────────────────────────┘
```

**特点**：
- 优点：对称美观，信息完整
- 适合：突出对战双方平等地位
- 交互：直观的对战预览

### 方案二：左右并列式布局

```
┌─────────────────────────────────────┐
│ ← 返回    房间：123456     📋分享   │
├─────────────────────────────────────┤
│                                     │
│ ┌────────────┐    ┌────────────┐   │
│ │ 👤 张三    │    │ 🤖 AI对手  │   │
│ │  (房主)    │VS  │            │   │
│ │            │    │            │   │
│ │ 对战：156  │    │ 难度：中等 │   │
│ │ 胜率：68%  │    │ 胜率：45%  │   │
│ │ 等级：黄金 │    │ 等级：银牌 │   │
│ │            │    │            │   │
│ │  ✅准备    │    │  ⏳等待   │   │
│ └────────────┘    └────────────┘   │
│                                     │
│  [❌踢出AI] [🔄换个对手] [⚙️设置]  │
│                                     │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                                     │
│              [🚀开始对战]            │
└─────────────────────────────────────┘
```

**特点**：
- 优点：信息紧凑，操作集中
- 适合：信息密度高的场景
- 交互：功能按钮集中在下方

### 方案三：卡片堆叠式布局

```
┌─────────────────────────────────────┐
│          房间 123456                │
│      ┌─────────────────┐            │
├──────┤                 ├────────────┤
│      │    [📋复制邀请]  │    ← 返回 │
│      └─────────────────┘            │
│                                     │
│       ┌─👤 房主信息─┐                │
│       │ 张三 (LV.15) │               │
│       │ ──────────── │               │
│       │ 🏆 156场     │               │
│       │ 📊 68%胜率   │               │
│       │ ✅ 已准备    │               │
│       └──────────────┘               │
│                                     │
│       ┌─🤖 对手信息─┐                │
│       │ AI智能对手   │               │
│       │ ──────────── │               │
│       │ 🎯 中等难度  │               │
│       │ 📊 45%胜率   │               │
│       │ ⏳ 匹配中... │               │
│       │              │               │
│       │   [❌踢出]   │               │
│       └──────────────┘               │
│                                     │
│ ┌─────────────────────────────────┐ │
│ │         🎮 开始游戏             │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

**特点**：
- 优点：层次清晰，现代感强
- 适合：移动端友好设计
- 交互：卡片式交互体验

### 方案四：极简列表式布局

```
┌─────────────────────────────────────┐
│ ✕                    房间 123456    │
│                                     │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                                     │
│ 👤 张三（房主）                     │
│ 156场 • 68%胜率 • 黄金III   ✅准备  │
│                                     │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                                     │
│ 🤖 AI对手                          │
│ 智能难度 • 45%胜率        ❌踢出    │
│                                     │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                                     │
│                                     │
│ ┌─────────────────────────────────┐ │
│ │             开始游戏             │ │
│ └─────────────────────────────────┘ │
│                                     │
│          📋 分享房间码               │
└─────────────────────────────────────┘
```

**特点**：
- 优点：极简高效，信息清晰
- 适合：追求简洁的用户
- 交互：最少的视觉干扰

## 方案对比分析

| 维度 | 方案一（对称式） | 方案二（并列式） | 方案三（卡片式） | 方案四（列表式） |
|------|------------------|------------------|------------------|------------------|
| 视觉冲击 | 强 | 中 | 强 | 弱 |
| 信息密度 | 中 | 高 | 中 | 高 |
| 操作效率 | 中 | 高 | 中 | 高 |
| 移动适配 | 好 | 一般 | 很好 | 很好 |
| 现代感 | 中 | 中 | 强 | 强 |

## 推荐选择

基于移动端打飞机游戏的特点，推荐：

1. **首选方案三**：卡片堆叠式 - 现代感强，移动端友好
2. **备选方案四**：极简列表式 - 信息清晰，操作高效

## 设计要点

### 关键信息层级
1. **房间号** - 顶部显著位置
2. **玩家状态** - 准备状态最重要
3. **统计数据** - 次要信息，简化显示
4. **操作按钮** - 底部固定，易于触达

### 交互考虑
- **踢出对手**：确认提示防误操作
- **开始游戏**：双方准备后才可点击
- **分享房间**：便于邀请真人玩家

---
**设计师**: prototype-designer  
**创建时间**: 2025-09-11  
**状态**: 待用户确认方案选择