feat: 优化入口页面并新增房主等待房间原型在入口页面入口页面.html中，将单个“开始游戏”按钮替换为“快速开始”、“自动匹配”、“创建房间”和“加入游戏”四个游戏模式选项，并重构按钮样式。新增房主视角的房间等待页面原型房间等待[房主].html及其线框图方案。
This commit is contained in:
史悦
198
01_文档/原型设计/房间等待页面_线框图方案.md
Normal file
198
01_文档/原型设计/房间等待页面_线框图方案.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 房间等待页面 - 线框图设计方案
|
||||
|
||||
## 需求分析（更新版）
|
||||
|
||||
### 页面功能
|
||||
- **页面类型**：房间等待页面（我创建的房间）
|
||||
- **核心功能**：显示房间信息，管理对战双方
|
||||
- **默认状态**：房主 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
|
||||
**状态**: 待用户确认方案选择
|
||||
Reference in New Issue
Block a user