198 lines
9.3 KiB
Markdown
198 lines
9.3 KiB
Markdown
# 房间等待页面 - 线框图设计方案
|
||
|
||
## 需求分析（更新版）
|
||
|
||
### 页面功能
|
||
- **页面类型**：房间等待页面（我创建的房间）
|
||
- **核心功能**：显示房间信息，管理对战双方
|
||
- **默认状态**：房主 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
|
||
**状态**: 待用户确认方案选择 |