aiworks/rps-sports
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始版本 - 剪刀石头布跑酷完整策划案

Browse Source 
🎮 项目概述
- 游戏类型：休闲竞技 / 跑酷 / 反应类
- 核心玩法：剪刀石头布 + 体育项目
- 目标平台：移动端 (iOS/Android)

📋 完成文档
- README.md: 项目说明和文档索引
- 01-游戏概述：市场定位、目标用户、竞品分析
- 02-核心玩法设计：核心循环、操作方式、体育项目系统
- 03-系统设计：架构、成长、经济、社交系统
- 04-关卡设计：55 关卡通关设计、BOSS 战
- 05-数值设计：战斗数值、经济系统、平衡性
- 06-UIUX设计：界面规范、交互流程、视觉规范
- 07-商业化设计：付费点、活动、IP 联动、收入预测

🎯 核心特色
- 剪刀石头布规则创新应用于跑酷
- 7 种体育项目表现（短跑/跳高/跳远/铅球/铁饼/跳水/游泳）
- 可扩展架构支持热门事件联动
- 完整商业化方案
This commit is contained in:
游戏策划总监
2026-04-05 11:56:29 +08:00
commit 3a366771e0
8 changed files with 2598 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
docs/06-UIUX设计.md Normal file
View File

@@ -0,0 +1,435 @@
# 06-UI/UX设计
## 6.1 设计原则
### 6.1.1 核心原则
| 原则 | 说明 | 应用 |
|------|------|------|
| **简洁直观** | 一眼看懂，零学习成本 | 主界面、操作按钮 |
| **快速反馈** | 操作即时响应 | 出拳按钮、结果展示 |
| **视觉层次** | 重要信息突出 | 倒计时、连击数 |
| **一致性** | 风格统一 | 全游戏视觉语言 |
| **无障碍** | 色盲友好，字号可调 | 配色方案、设置选项 |
### 6.1.2 设计风格
| 维度 | 风格定位 |
|------|----------|
| **整体风格** | 运动活力 + 休闲趣味 |
| **色彩** | 明亮饱和，体育主题色 |
| **字体** | 圆润无衬线，易读性强 |
| **图标** | 扁平化 + 微质感 |
| **动画** | 轻快有弹性，体育动作感 |
---
## 6.2 界面架构
### 6.2.1 界面层级
```
┌─────────────────────────────────────────────────────────────┐
│ 启动页 │
│ Logo + 版本信息 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 登录页 │
│ 游客登录 / 账号登录 / 注册 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 大厅页 (主界面) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 顶部：玩家信息、货币、设置 │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ 核心功能入口 (大按钮) │ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │
│ │ │快速 │ │ 对战│ │ 关卡│ │ │
│ │ │开始 │ │ 模式│ │ 模式│ │ │
│ │ └─────┘ └─────┘ └─────┘ │ │
│ │ │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 底部：好友、商城、任务、个人信息 │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐
│ 对战页 │ │ 关卡页 │ │ 商城页 │
└────────┘ └────────┘ └────────┘
```
### 6.2.2 界面列表
| 界面 | 功能 | 优先级 |
|------|------|--------|
| **启动页** | 品牌展示、加载 | P0 |
| **登录页** | 用户登录 | P0 |
| **大厅页** | 主入口、信息展示 | P0 |
| **对战页** | 匹配、对战 | P0 |
| **关卡页** | 关卡选择、进度 | P0 |
| **商城页** | 购买物品 | P0 |
| **任务页** | 任务列表、领取 | P1 |
| **好友页** | 好友列表、管理 | P1 |
| **个人页** | 个人信息、成就 | P1 |
| **设置页** | 游戏设置 | P1 |
| **活动页** | 活动展示、参与 | P2 |
| **排行榜** | 各类排行 | P2 |
---
## 6.3 核心界面设计
### 6.3.1 大厅页
```
┌─────────────────────────────────────────────────────────────┐
│ ┌────────────────┐ ┌─────────────────┐ │
│ │ [头像] 玩家名 │ Lv.25 黄金 III │ 💎1280 💰5680 │ │
│ └────────────────┘ └─────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🏆 赛季通行证 35/50 │
│ ████████████░░░░░ 70% │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │
│ │ 🏃 快速 │ │ ⚔️ 对战 │ │
│ │ 开始 │ │ 模式 │ │
│ │ │ │ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │
│ │ 📖 关卡 │ │ 🎁 活动 │ │
│ │ 模式 │ │ 中心 │ │
│ │ │ │ │ │
│ └──────────────┘ └──────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ 👥好友 🛒商城 📋任务 🏅成就 ⚙️设置 │
└─────────────────────────────────────────────────────────────┘
```
**设计要点：**
- 玩家信息置顶，身份感强
- 货币醒目，促进消费
- 核心功能大按钮，易点击
- 通行证进度条，促活付费
### 6.3.2 对战页
```
┌─────────────────────────────────────────────────────────────┐
│ ← 返回 对战模式 ⚙️ │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 1v1 匹配 │ │
│ │ │ │
│ │ 预计等待：< 10 秒 │ │
│ │ │ │
│ │ [开始匹配] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 好友对战 │ │
│ │ │ │
│ │ [创建房间] [输入房间号] [加入] │ │
│ │ │ │
│ │ 在线好友： │ │
│ │ 👤 张三 (黄金 I) [邀请] │ │
│ │ 👤 李四 (白银 III) [邀请] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 多人竞技 (3-8 人) │ │
│ │ │ │
│ │ [开始匹配] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
```
### 6.3.3 游戏内界面
```
┌─────────────────────────────────────────────────────────────┐
│ ┌────────────────┐ ┌─────────────────┐ │
│ │ [对手头像] │ │ [玩家头像] │ │
│ │ 体育老师 │ ████████░░ 80% │ 你 │ │
│ │ 黄金 II │ │ 黄金 I │ │
│ └────────────────┘ └─────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ │
│ 赛道展示区 │
│ │
│ 🏃═══════════════════>🏃 │
│ │
│ 短跑赛道 · 第 8 轮 │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ 3 2 1 ✊✌️✋ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ │ │ │ │ │
│ │ 剪刀 │ │ 石头 │ │ 布 │ │
│ │ ✌️ │ │ ✊ │ │ ✋ │ │
│ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 连击：x5 🔥🔥🔥 │
│ │
└─────────────────────────────────────────────────────────────┘
```
**设计要点：**
- 双方信息对称展示
- 进度条清晰可见
- 出拳按钮大且醒目
- 倒计时突出显示
- 连击特效强化反馈
### 6.3.4 结果页
```
┌─────────────────────────────────────────────────────────────┐
│ │
│ 🎉 胜利！🎉 │
│ │
│ ┌───────────────┐ │
│ │ │ │
│ │ [你的角色] │ │
│ │ 胜利姿势 │ │
│ │ │ │
│ └───────────────┘ │
│ │
│ 用时：1 分 23 秒 │
│ 连击：x8 │
│ 完美轮次：12/15 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 奖励 │ │
│ │ 💰 +150 💎 +20 📈 +18 段位积分 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ [再来一局] [返回大厅] │
│ │
└─────────────────────────────────────────────────────────────┘
```
---
## 6.4 交互设计
### 6.4.1 核心交互流程
#### 出拳操作流程
```
1. 倒计时开始 (3 秒)
│
▼
2. 玩家选择出拳 (1 秒内)
│
▼
3. 按钮高亮反馈 (即时)
│
▼
4. 等待对手选择 (最多 1 秒)
│
▼
5. 双方出拳展示 (0.5 秒)
│
▼
6. 胜负判定 (0.5 秒)
│
▼
7. 结果动画 (1-2 秒)
│
▼
8. 进入下一轮
```
### 6.4.2 手势操作
| 手势 | 功能 | 场景 |
|------|------|------|
| 点击 | 选择/确认 | 出拳、按钮 |
| 长按 | 查看详情 | 物品、角色 |
| 滑动 | 切换页面 | 关卡列表 |
| 双击 | 快速操作 | 跳过动画 |
| 捏合 | 缩放视图 | 赛道查看 |
### 6.4.3 反馈设计
| 反馈类型 | 场景 | 表现 |
|----------|------|------|
| **按钮点击** | 所有按钮 | 缩放 + 音效 |
| **胜利反馈** | 对战胜利 | 特效 + 音效 + 震动 |
| **失败反馈** | 对战失败 | 灰度 + 低沉音效 |
| **连击反馈** | 达成连击 | 数字弹出 + 特效 |
| **获得奖励** | 结算奖励 | 金币动画 + 音效 |
---
## 6.5 视觉规范
### 6.5.1 色彩规范
#### 主色调
| 颜色 | 色值 | 用途 |
|------|------|------|
| 主色 | #FF6B35 | 按钮、强调 |
| 辅色 | #4ECDC4 | 次要按钮、背景 |
| 背景 | #F7F9FC | 主背景 |
| 文字 | #2D3436 | 主文字 |
| 次要文字 | #636E72 | 次要文字 |
#### 状态色
| 状态 | 色值 | 用途 |
|------|------|------|
| 胜利 | #00B894 | 胜利相关 |
| 失败 | #E17055 | 失败相关 |
| 平局 | #FDCB6E | 平局相关 |
| 连击 | #E84393 | 连击特效 |
#### 稀有度色
| 稀有度 | 色值 | 用途 |
|--------|------|------|
| 普通 | #B2BEC3 | 普通物品 |
| 稀有 | #0984E3 | 稀有物品 |
| 史诗 | #A29BFE | 史诗物品 |
| 传说 | #FDCB6E | 传说物品 |
| 限定 | #E17055 | 限定物品 |
### 6.5.2 字体规范
| 用途 | 字体 | 字号 | 字重 |
|------|------|------|------|
| 大标题 | PingFang SC | 32pt | Bold |
| 标题 | PingFang SC | 24pt | Bold |
| 副标题 | PingFang SC | 18pt | Medium |
| 正文 | PingFang SC | 16pt | Regular |
| 次要文字 | PingFang SC | 14pt | Regular |
| 按钮文字 | PingFang SC | 18pt | Medium |
| 数字 | DIN Alternate | 24pt | Bold |
### 6.5.3 图标规范
| 类型 | 尺寸 | 风格 |
|------|------|------|
| 功能图标 | 48x48 | 扁平 + 微质感 |
| 体育图标 | 64x64 | 描边 + 填充 |
| 稀有度图标 | 32x32 | 边框 + 背景 |
| 货币图标 | 32x32 | 立体感 |
---
## 6.6 动画规范
### 6.6.1 动画曲线
| 动画类型 | 曲线 | 时长 |
|----------|------|------|
| 按钮点击 | Ease Out | 0.15s |
| 页面切换 | Ease In Out | 0.3s |
| 弹窗出现 | Spring | 0.4s |
| 结果展示 | Ease Out | 0.5s |
| 连击数字 | Bounce | 0.3s |
### 6.6.2 核心动画
#### 出拳动画
```
准备 (0.2s) → 出拳 (0.1s) → 定格 (0.3s) → 结果 (0.5s)
```
#### 胜利动画
```
角色跳跃 (0.3s) → 特效爆发 (0.2s) → 结算展示 (0.5s)
```
#### 连击动画
```
数字弹出 (0.1s) → 放大 (0.1s) → 缩小 (0.1s) → 消失 (0.1s)
```
---
## 6.7 适配规范
### 6.7.1 屏幕适配
| 设备类型 | 分辨率 | 适配方案 |
|----------|--------|----------|
| iPhone SE | 375x667 | 完整显示，留黑边 |
| iPhone 标准 | 390x844 | 完整适配 |
| iPhone Plus | 414x896 | 完整适配 |
| iPad | 768x1024 | 横屏优化 |
| Android 小屏 | 360x640 | 完整显示，留黑边 |
| Android 标准 | 393x873 | 完整适配 |
| Android 大屏 | 412x915 | 完整适配 |
### 6.7.2 安全区域
```
┌────────────────────────────────────────┐
│ ← 24pt 安全边距 → │
│ ┌──────────────────────────────────┐ │
│ │ │ │
│ │ 内容安全区域 │ │ ↑
│ │ │ │ 24pt
│ │ │ │ ↓
│ └──────────────────────────────────┘ │
│ ← 24pt 安全边距 → │
└────────────────────────────────────────┘
```
### 6.7.3 触控区域
| 元素类型 | 最小尺寸 | 推荐尺寸 |
|----------|----------|----------|
| 按钮 | 44x44pt | 60x60pt |
| 列表项 | 44x44pt | 全宽 |
| 图标按钮 | 44x44pt | 48x48pt |
| 出拳按钮 | 80x80pt | 100x100pt |
---
## 6.8 无障碍设计
### 6.8.1 色盲友好
| 色盲类型 | 调整方案 |
|----------|----------|
| 红绿色盲 | 避免红绿对比，使用蓝橙 |
| 蓝黄色盲 | 避免蓝黄对比，使用红绿 |
| 全色盲 | 使用明度对比 + 图标辅助 |
### 6.8.2 字号调整
| 档位 | 缩放比例 | 说明 |
|------|----------|------|
| 标准 | 100% | 默认 |
| 大 | 120% | 推荐中老年 |
| 超大 | 150% | 视力障碍 |
### 6.8.3 辅助功能
| 功能 | 说明 |
|------|------|
| 语音播报 | 关键信息语音提示 |
| 震动反馈 | 可关闭 |
| 简化动画 | 减少眩晕 |
| 高对比度 | 增强对比 |
---
*文档版本：v0.1 | 最后更新：2026-04-05*