aiworks/rps-sports
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49d94c80cdb3ebea70d4ea0e1f417844c3ad05f9
rps-sports/docs/06-UIUX设计.md
游戏策划总监 3a366771e0 feat: 初始版本 - 剪刀石头布跑酷完整策划案 
🎮 项目概述
- 游戏类型：休闲竞技 / 跑酷 / 反应类
- 核心玩法：剪刀石头布 + 体育项目
- 目标平台：移动端 (iOS/Android)

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

🎯 核心特色
- 剪刀石头布规则创新应用于跑酷
- 7 种体育项目表现（短跑/跳高/跳远/铅球/铁饼/跳水/游泳）
- 可扩展架构支持热门事件联动
- 完整商业化方案
2026-04-05 11:56:29 +08:00

436 lines
21 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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*
Reference in New Issue View Git Blame Copy Permalink