# 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*