diff --git a/01_文档/原型设计/加入房间列表.html b/01_文档/原型设计/加入房间列表.html new file mode 100644 index 0000000..71c7c2a --- /dev/null +++ b/01_文档/原型设计/加入房间列表.html @@ -0,0 +1,730 @@ + + + + + + 加入房间 - 打飞机对战 + + + +
+ +
+ +

可加入房间

+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+
+
房间 123456
+
等待中
+
+
+
+
张
+ 张三 +
+ 156场 + 68%胜率 +
+
+ +
+
+ +
+
+
房间 789012
+
等待中
+
+
+
+
李
+ 李四 +
+ 89场 + 72%胜率 +
+
+ +
+
+ +
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/01_文档/原型设计/房间等待页面_线框图方案.md b/01_文档/原型设计/房间等待页面_线框图方案.md deleted file mode 100644 index c0132e2..0000000 --- a/01_文档/原型设计/房间等待页面_线框图方案.md +++ /dev/null @@ -1,198 +0,0 @@ -# 房间等待页面 - 线框图设计方案 - -## 需求分析（更新版） - -### 页面功能 -- **页面类型**：房间等待页面（我创建的房间） -- **核心功能**：显示房间信息，管理对战双方 -- **默认状态**：房主 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 -**状态**: 待用户确认方案选择 \ No newline at end of file