3a366771e0
🎮 项目概述 - 游戏类型：休闲竞技 / 跑酷 / 反应类 - 核心玩法：剪刀石头布 + 体育项目 - 目标平台：移动端 (iOS/Android) 📋 完成文档 - README.md: 项目说明和文档索引 - 01-游戏概述：市场定位、目标用户、竞品分析 - 02-核心玩法设计：核心循环、操作方式、体育项目系统 - 03-系统设计：架构、成长、经济、社交系统 - 04-关卡设计：55 关卡通关设计、BOSS 战 - 05-数值设计：战斗数值、经济系统、平衡性 - 06-UIUX设计：界面规范、交互流程、视觉规范 - 07-商业化设计：付费点、活动、IP 联动、收入预测 🎯 核心特色 - 剪刀石头布规则创新应用于跑酷 - 7 种体育项目表现（短跑/跳高/跳远/铅球/铁饼/跳水/游泳） - 可扩展架构支持热门事件联动 - 完整商业化方案
21 KiB
21 KiB
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