DFJ/01_文档/原型设计/房间等待页面_线框图方案.md

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

需求分析（更新版）

页面功能

• 页面类型：房间等待页面（我创建的房间）
• 核心功能：显示房间信息，管理对战双方
• 默认状态：房主 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
状态: 待用户确认方案选择