156 lines
9.0 KiB
Markdown
156 lines
9.0 KiB
Markdown
# “打飞机”小程序App原型设计需求文档
|
||
|
||
## 1. 概述
|
||
|
||
本文档旨在为“打飞机”小程序的核心界面提供清晰的设计需求，主要面向UI/UX设计人员，用于指导原型设计。文档充分考虑了手机触摸屏的操作特性。核心界面包括“准备页面”和“打击页面”。
|
||
|
||
---
|
||
|
||
## 2. 核心页面设计需求
|
||
|
||
### 2.1 准备页面
|
||
|
||
**页面目标:** 玩家在此页面中通过触控操作完成飞机的布局，并确认进入“准备就绪”状态。
|
||
|
||
#### 2.1.1 界面核心元素
|
||
|
||
1. **游戏棋盘 (10x10 网格):**
|
||
* **功能:** 用于放置飞机的主要区域。
|
||
* **设计要求:**
|
||
* 应为一个 10x10 的网格布局，每个格子大小一致，适合触控点击。
|
||
* 格子有清晰的边框。
|
||
* **触控反馈:** 点击格子时，应有视觉反馈（如背景色瞬时变化或涟漪效果）。
|
||
* 坐标标识：在棋盘的上方和左侧应有坐标轴，上方为字母（A-J），左侧为数字（1-10）。
|
||
|
||
2. **飞机状态与选择区:**
|
||
* **功能:** 展示可用的飞机，并允许玩家选择要操作的飞机。
|
||
* **设计要求:**
|
||
* 提供三个按钮，分别代表“飞机1”、“飞机2”、“飞机3”。
|
||
* 当一架飞机被成功放置到棋盘上后，对应的按钮应变为“选中”或“已放置”状态（如改变颜色或样式）。
|
||
* 当玩家在棋盘上**点击**已放置的飞机时，此区域对应的飞机按钮也应同步显示为“当前选中”状态。
|
||
* 如果所有飞机都已放置，此区域的按钮都应处于“已放置”状态。
|
||
|
||
3. **布局操作按钮组 (针对触控优化):**
|
||
* **功能:** 控制飞机的放置、移动和旋转。
|
||
* **设计要求:**
|
||
* **方向控制:** “上、下、左、右”四个方向按钮，用于在添加飞机前，预设飞机的机头朝向。**此为第一种放置方式的辅助按钮。**
|
||
* **移动控制:** 提供四个方向箭头按钮（上、下、左、右），用于在棋盘上移动当前选中的飞机。
|
||
* **旋转控制:** 提供一个旋转按钮，用于顺时针旋转当前选中的飞机。
|
||
* **删除按钮:** 用于删除当前在棋盘上选中的飞机。
|
||
|
||
4. **准备确认按钮组:**
|
||
* **功能:** 玩家完成布局后，进行最终确认。
|
||
* **设计要求:**
|
||
* **完成按钮:**
|
||
* 当棋盘上没有满3架飞机时，此按钮应为“禁用”状态。
|
||
* 当3架飞机都已放置好后，此按钮变为“可用”状态。
|
||
* **删除按钮:** （此处有重复，建议整合）一个“清空”或“重置”按钮，用于一键清除所有已放置的飞机，方便重新布局。
|
||
|
||
5. **状态提示区:**
|
||
* **功能:** 向玩家反馈当前的游戏状态。
|
||
* **设计要求:**
|
||
* 在页面底部或一个显著位置，显示文本信息，如“请放置三架飞机”、“已准备，等待对手中...”、“对手已准备就绪”。
|
||
|
||
#### 2.1.2 交互流程
|
||
|
||
1. **进入页面:** 默认显示一个空的10x10棋盘。
|
||
2. **放置飞机:**
|
||
|
||
* **直接点击机身**
|
||
* 玩家直接点击棋盘上的一个**空白**格子。
|
||
* 系统以此格为飞机的中心点（或机身的一部分），自动生成一架默认朝向（例如，机头朝上）的飞机。
|
||
* 如果空间不足以放置飞机，应给出提示（如格子闪烁红色或toast提示），且不放置飞机。
|
||
|
||
* **通用规则:**
|
||
* 飞机成功放置后，“飞机x”按钮状态改变，表示一架飞机已被使用。
|
||
* 当3架飞机都放置完毕后，放置功能自动禁用。
|
||
|
||
3. **选择与操作飞机:**
|
||
* **单击**棋盘上已放置的飞机，该飞机进入“选中”状态（如高亮或边框变化），此时可对它进行移动或旋转。
|
||
* 使用移动和旋转按钮调整“选中”飞机的位置和形态。
|
||
* 点击“删除”按钮，移除选中的飞机。
|
||
4. **完成准备:**
|
||
* 当3架飞机全部放置后，“完成”按钮激活。
|
||
* 玩家点击“完成”，布局操作按钮全部变为“禁用”状态，页面提示“已准备，等待对手中...”。
|
||
|
||
---
|
||
|
||
### 2.2 对战页面
|
||
|
||
**页面目标:** 玩家在此页面进行回合制对战，包括攻击对手和观察我方被攻击情况。页面分为“我的回合”和“对手回合”两种状态。
|
||
|
||
---
|
||
|
||
#### 2.2.1 我的回合 (攻击对手)
|
||
|
||
**核心目标:** 攻击对手棋盘，并可使用模拟功能辅助决策。
|
||
|
||
**界面核心元素:**
|
||
|
||
1. **攻击棋盘 (10x10 网格):**
|
||
* **功能:** 攻击对手的核心区域，同时内置飞机布局模拟功能。棋盘上会叠加显示历史攻击结果和当前模拟的飞机。
|
||
* **设计要求:**
|
||
* 样式与准备页面一致，带坐标轴。
|
||
* **攻击结果状态:**
|
||
* **打偏 (未命中):** 显示“X”或特定图标。
|
||
* **命中:** 显示火焰等命中效果。
|
||
* **摧毁:** 显示强烈的摧毁效果。
|
||
* **模拟飞机样式:** 模拟放置的飞机应有独特的视觉样式（如半透明、虚线边框），与真实的攻击结果标记明确区分。
|
||
|
||
2. **飞机模拟区:**
|
||
* **功能:** 提供可用于模拟的飞机模型。
|
||
* **设计要求:**
|
||
* 此区域的设计应参考**准备页面**的“飞机状态与选择区”和“布局操作按钮组”。
|
||
* 玩家可从此区域选择并操作飞机，将其放置到上方的攻击棋盘上进行模拟。
|
||
|
||
3. **操作与状态区:**
|
||
* **功能:** 执行打击操作和显示信息。
|
||
* **设计要求:**
|
||
* **打击按钮:** 玩家在棋盘上**点击**一个未攻击过的格子作为目标后，此按钮激活。
|
||
* **状态提示:** 清晰显示“我的回合”。
|
||
* **攻击结果反馈:** 每次攻击后，应有弹窗或醒目提示。
|
||
|
||
**交互流程:**
|
||
|
||
1. **进入回合:** 自动切换至此页面，显示对手的棋盘（包含我方历史攻击记录）。
|
||
2. **决策与操作 (可随时进行):**
|
||
* **模拟布局:** 从“飞机模拟区”选择飞机，在攻击棋盘上进行拖拽、旋转、删除等操作，以推演对手可能的布局。这些模拟飞机仅为临时辅助，不影响攻击。
|
||
* **选择攻击目标:** **单击**棋盘上任一未攻击过的格子，该格子高亮，表示“待打击”，同时“打击”按钮激活。
|
||
3. **确认打击:** 点击“打击”按钮。发起攻击后，棋盘上所有模拟的飞机将自动清除。
|
||
4. **等待并展示结果:**
|
||
* 棋盘上对应的格子根据结果（命中/打偏/摧毁）更新其视觉状态。
|
||
* 弹出醒目的结果提示。
|
||
5. **回合结束:** 自动切换到“对手回合”页面。
|
||
|
||
---
|
||
|
||
#### 2.2.2 对手回合 (观察我方)
|
||
|
||
**核心目标:** 清晰地看到我方棋盘的被攻击情况，并能实时观察到对手的瞄准意图。
|
||
|
||
**界面核心元素:**
|
||
|
||
1. **我方棋盘 (10x10 网格):**
|
||
* **功能:** 显示我方飞机布局以及对手的所有攻击记录。
|
||
* **设计要求:**
|
||
* 清晰展示我方三架飞机的完整布局。
|
||
* **格子状态:**
|
||
* **被攻击 (打偏):** 对手攻击但我方该位置无飞机部分。
|
||
* **被攻击 (命中):** 对手攻击命中我方飞机部件。
|
||
* **对手正在瞄准:** 实时显示对手当前选择的、但还未确认攻击的格子（例如，用闪烁的准星或特殊的边框高亮），此状态会随对手的选择而实时变化。
|
||
* **机头被摧毁:** 当机头被击中时，整架飞机需要有特殊且醒目的“被摧毁”样式（例如，整架飞机变灰并显示爆炸/损坏图标），以明确表示该飞机已失效。
|
||
|
||
2. **操作与状态区:**
|
||
* **功能:** 显示状态并提供视图切换功能。
|
||
* **设计要求:**
|
||
* **状态提示:** 清晰显示“对手回合”。
|
||
* **切换至攻击视图按钮:** 提供一个明确的按钮（如“切换到攻击页”或“战术模拟”），允许玩家在对手回合时，手动切换回“我的回合”的攻击与模拟棋盘，以便利用对手的思考时间进行我方的策略规划。
|
||
|
||
**交互流程:**
|
||
|
||
1. **进入回合:** 自动切换至此页面，显示我方棋盘和被攻击情况。
|
||
2. **观察对手:** 实时看到对手正在瞄准的格子位置变化。
|
||
3. **结果展示:** 当对手确认攻击后，棋盘上对应格子更新状态（命中/打偏），如果是机头，则整架飞机更新为“被摧毁”状态。
|
||
4. **可选操作:** 玩家可随时点击“切换至攻击视图”按钮，跳转回自己的攻击与模拟棋盘进行思考。
|
||
5. **回合结束:** 对手攻击完成后，系统自动切换回“我的回合”页面。
|