docs: 规范原型设计文件名并移除布局线框图文档
This commit is contained in:
史悦
@@ -1,183 +0,0 @@
|
|||||||
# 打飞机小程序 - 简化主页面线框图设计
|
|
||||||
|
|
||||||
## 设计说明
|
|
||||||
根据用户需求，主页面简化为只包含以下元素：
|
|
||||||
- 顶部：用户头像和昵称
|
|
||||||
- 中间：游戏标题
|
|
||||||
- 规则说明
|
|
||||||
- 开始按钮
|
|
||||||
|
|
||||||
## 线框图设计方案
|
|
||||||
|
|
||||||
### 方案一：居中简约布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ [头像] [昵称] │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 打飞机对战 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 游戏规则 │ │
|
|
||||||
│ │ 1. 双人轮流攻击对方棋盘 │ │
|
|
||||||
│ │ 2. 击中对方飞机部件得分 │ │
|
|
||||||
│ │ 3. 先击毁对方所有飞机获胜 │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 开始游戏 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案二：卡片式布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ [头像] [昵称] │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 打飞机对战小程序 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 📖 游戏规则 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 双人轮流攻击对方棋盘 │ │
|
|
||||||
│ │ 击中飞机部件得分 │ │
|
|
||||||
│ │ 击毁所有飞机获胜 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 🚀 开始游戏 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案三：渐变背景布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ [头像] [昵称] │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ ✈️ 打飞机对战小程序 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 🎮 游戏规则 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ • 双人轮流攻击 │ │
|
|
||||||
│ │ • 击中飞机部件得分 │ │
|
|
||||||
│ │ • 击毁所有飞机获胜 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 🎯 开始游戏 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案四：图标装饰布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ [头像] [昵称] │
|
|
||||||
│ │
|
|
||||||
│ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 打飞机对战小程序 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 📋 游戏规则 │ │
|
|
||||||
│ │ 1. 双人轮流攻击棋盘 │ │
|
|
||||||
│ │ 2. 击中飞机部件得分 │ │
|
|
||||||
│ │ 3. 击毁所有飞机获胜 │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ ✈️ 🛩️ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 🚀 开始游戏 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案五：分步骤布局
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────────────────────┐
|
|
||||||
│ │
|
|
||||||
│ [头像] [昵称] │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 打飞机对战小程序 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ 📖 游戏规则 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 步骤1: 双人轮流攻击对方棋盘 │ │
|
|
||||||
│ │ 步骤2: 击中飞机部件获得分数 │ │
|
|
||||||
│ │ 步骤3: 先击毁对方所有飞机获胜 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
│ │
|
|
||||||
│ ┌─────────────────────────────────────────────────┐ │
|
|
||||||
│ │ │ │
|
|
||||||
│ │ 🎮 开始游戏 │ │
|
|
||||||
│ │ │ │
|
|
||||||
│ └─────────────────────────────────────────────────┘ │
|
|
||||||
│ │
|
|
||||||
└─────────────────────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
## 设计建议
|
|
||||||
|
|
||||||
根据打飞机游戏的特性和目标用户群体，我推荐**方案二：卡片式布局**，原因如下：
|
|
||||||
|
|
||||||
1. **视觉层次清晰**：卡片设计让内容分区明确，用户一目了然
|
|
||||||
2. **现代感强**：卡片式设计符合当前移动应用设计趋势
|
|
||||||
3. **易于交互**：卡片按钮在移动端触控体验良好
|
|
||||||
4. **扩展性好**：后续如需添加内容，卡片布局便于调整
|
|
||||||
5. **适合游戏场景**：卡片式设计给人一种"游戏卡"的感觉，符合游戏主题
|
|
||||||
|
|
||||||
请确认您偏好的布局方案，我将进入下一阶段：**主题设计**，包括色彩方案、字体选择、间距系统等视觉元素的设计。
|
|
||||||
Reference in New Issue
Block a user