# 【模板】UI/UX 设计文档

**项目名称：** [填写项目名称]  
**文档类型：** UI/UX 设计规范  
**版本号：** v1.0  
**最后更新：** YYYY-MM-DD  
**负责人：** [填写负责人]

---

## 一、设计概述

### 1.1 设计目标

简述 UI/UX 设计要达成的目标：
- 建立统一的视觉语言
- 优化玩家操作体验
- 提升信息传达效率

### 1.2 设计原则

| 原则 | 说明 | 应用示例 |
|------|------|----------|
| 一致性 | 保持视觉和交互的一致性 | [示例] |
| 简洁性 | 减少认知负担，突出核心信息 | [示例] |
| 反馈性 | 及时响应用户操作 | [示例] |
| 容错性 | 允许用户犯错并提供恢复路径 | [示例] |
| 无障碍 | 考虑不同用户的需求 | [示例] |

### 1.3 目标用户

- **核心用户：** [用户画像]
- **使用场景：** [场景描述]
- **设备类型：** [手机/PC/主机/多平台]

---

## 二、视觉风格指南

### 2.1 色彩系统

#### 主色调

| 色彩名称 | 色值 | 使用场景 | 备注 |
|----------|------|----------|------|
| 主色 | #XXXXXX | 主要按钮、高亮 | [说明] |
| 辅色 | #XXXXXX | 次要元素 | [说明] |
| 强调色 | #XXXXXX | 重要提示、警告 | [说明] |

#### 功能色

| 色彩名称 | 色值 | 使用场景 |
|----------|------|----------|
| 成功 | #XXXXXX | 完成、确认 |
| 警告 | #XXXXXX | 注意、提醒 |
| 错误 | #XXXXXX | 失败、禁止 |
| 信息 | #XXXXXX | 提示、说明 |

#### 中性色

| 色彩名称 | 色值 | 使用场景 |
|----------|------|----------|
| 文字主色 | #XXXXXX | 主要文字 |
| 文字次要 | #XXXXXX | 次要文字、说明 |
| 边框色 | #XXXXXX | 分割线、边框 |
| 背景色 | #XXXXXX | 页面背景 |

### 2.2 字体系统

| 字体用途 | 字体系列 | 字号 | 字重 | 行高 | 使用场景 |
|----------|----------|------|------|------|----------|
| 大标题 | [字体] | 32px | Bold | 1.2 | 页面标题 |
| 小标题 | [字体] | 24px | Bold | 1.3 | 模块标题 |
| 正文 | [字体] | 16px | Regular | 1.5 | 主要内容 |
| 辅助文字 | [字体] | 14px | Regular | 1.5 | 说明文字 |
| 按钮文字 | [字体] | 16px | Medium | 1.4 | 按钮标签 |

### 2.3 图标规范

#### 图标风格
- **风格：** 线性/面性/混合
- **圆角：** [X]px
- **描边：** [X]px
- **尺寸规范：** 16px / 24px / 32px / 48px

#### 常用图标库

| 图标名称 | 用途 | 尺寸 | 状态 |
|----------|------|------|------|
| [图标] | [用途] | 24px | 正常/选中/禁用 |

### 2.4 间距系统

**基础间距单位：** 8px

| 间距等级 | 数值 | 使用场景 |
|----------|------|----------|
| XS | 4px | 紧密元素 |
| S | 8px | 相关元素 |
| M | 16px | 一般间距 |
| L | 24px | 模块间距 |
| XL | 32px | 大模块间距 |
| XXL | 48px | 页面间距 |

---

## 三、界面架构

### 3.1 信息架构

```
[在此处插入信息架构图]

层级说明：
- Level 1: 主导航
- Level 2: 二级页面
- Level 3: 详情/操作页面
```

### 3.2 导航结构

| 导航类型 | 位置 | 包含项 | 交互方式 |
|----------|------|--------|----------|
| 主导航 | 底部/顶部/侧边 | [列表] | 点击切换 |
| 次级导航 | [位置] | [列表] | [方式] |
| 面包屑 | [位置] | [列表] | [方式] |

### 3.3 页面清单

| 页面名称 | 页面 ID | 父级页面 | 核心功能 | 优先级 |
|----------|---------|----------|----------|--------|
| 主界面 | home | - | 游戏入口 | P0 |
| 战斗界面 | battle | home | 核心玩法 | P0 |
| 背包界面 | inventory | home | 物品管理 | P1 |
| 设置界面 | settings | home | 系统设置 | P2 |

---

## 四、核心界面设计

### 4.1 主界面

#### 界面布局

```
┌─────────────────────────────────┐
│           顶部栏                │
│  [等级] [货币] [设置] [邮件]    │
├─────────────────────────────────┤
│                                 │
│           主视觉区              │
│        (角色/场景展示)          │
│                                 │
├─────────────────────────────────┤
│    [任务]  [副本]  [活动]       │
│    [背包]  [商城]  [更多]       │
│           底部导航              │
└─────────────────────────────────┘
```

#### 元素说明

| 元素名称 | 位置 | 功能 | 交互 |
|----------|------|------|------|
| 等级显示 | 左上 | 显示玩家等级 | 点击查看详情 |
| 货币显示 | 顶部 | 显示各类货币 | 点击充值 |
| 功能入口 | 底部 | 功能快捷入口 | 点击跳转 |

### 4.2 战斗界面

#### 界面布局

```
┌─────────────────────────────────┐
│  [暂停]    [战斗信息]    [自动] │
├─────────────────────────────────┤
│                                 │
│           战斗区域              │
│        (角色/敌人/特效)         │
│                                 │
├─────────────────────────────────┤
│  [HP 条]     [技能 1][技能 2]   │
│  [MP 条]     [技能 3][技能 4]   │
│           操作区                │
└─────────────────────────────────┘
```

### 4.3 设置界面

#### 功能模块

| 模块名称 | 包含项 | 说明 |
|----------|--------|------|
| 音效设置 | BGM/音效/语音 | 音量调节、开关 |
| 画面设置 | 画质/帧率/特效 | 性能调节 |
| 操作设置 | 按键/灵敏度 | 自定义配置 |
| 账号设置 | 绑定/切换/注销 | 账号管理 |

---

## 五、交互规范

### 5.1 点击反馈

| 元素类型 | 按下状态 | 抬起状态 | 禁用状态 |
|----------|----------|----------|----------|
| 按钮 | 缩放 95% / 变色 | 恢复 / 触发 | 灰色 / 不可点 |
| 列表项 | 背景高亮 | 恢复 / 跳转 | 灰色 / 不可点 |
| 开关 | 滑动动画 | 状态切换 | 灰色 / 不可点 |

### 5.2 转场动画

| 转场类型 | 动画效果 | 时长 | 缓动函数 |
|----------|----------|------|----------|
| 页面切换 | 从右滑入 | 300ms | ease-out |
| 弹窗出现 | 淡入 + 放大 | 200ms | ease-out |
| 弹窗关闭 | 淡出 + 缩小 | 200ms | ease-in |
| 加载 | 旋转/进度条 | - | linear |

### 5.3 手势操作

| 手势 | 场景 | 效果 |
|------|------|------|
| 单击 | 通用 | 选择/确认 |
| 双击 | [场景] | [效果] |
| 长按 | [场景] | [效果] |
| 滑动 | 列表/轮播 | 滚动/切换 |
| 捏合 | [场景] | 缩放 |

### 5.4 加载状态

| 加载类型 | 展示形式 | 文案 | 超时处理 |
|----------|----------|------|----------|
| 首屏加载 | 全屏 Loading | "正在加载..." | >10s 提示 |
| 局部加载 | 骨架屏 | - | 重试按钮 |
| 下拉刷新 | 刷新动画 | "正在刷新..." | - |
| 上拉加载 | 加载提示 | "加载更多" | 无更多提示 |

---

## 六、适配规范

### 6.1 多分辨率适配

| 设备类型 | 分辨率 | 适配策略 | 备注 |
|----------|--------|----------|------|
| 小屏手机 | 375x667 | [策略] | [说明] |
| 大屏手机 | 414x896 | [策略] | [说明] |
| 平板 | 1024x768 | [策略] | [说明] |
| PC | 1920x1080 | [策略] | [说明] |

### 6.2 安全区域

```
┌─────────────────────────────────┐
│  ◐  状态栏 (iOS 刘海)           │
├─────────────────────────────────┤
│  ╭─────────────────────────╮   │
│  │                         │   │
│  │      内容安全区         │   │
│  │                         │   │
│  ╰─────────────────────────╯   │
│  ◐  底部指示条 (iOS Home)      │
└─────────────────────────────────┘
```

### 6.3 横竖屏适配

| 界面名称 | 支持方向 | 切换处理 |
|----------|----------|----------|
| 主界面 | 竖屏 | 锁定 |
| 战斗界面 | 横屏 | 锁定 |
| [界面] | 横竖屏 | 自适应 |

---

## 七、无障碍设计

### 7.1 视觉无障碍

| 考虑项 | 实现方式 | 说明 |
|--------|----------|------|
| 色盲友好 | 避免纯色彩区分 | 增加形状/文字标识 |
| 字体大小 | 支持动态字体 | 系统字体大小跟随 |
| 对比度 | ≥4.5:1 | WCAG AA 标准 |

### 7.2 操作无障碍

| 考虑项 | 实现方式 | 说明 |
|--------|----------|------|
| 点击区域 | ≥44x44pt | iOS 规范 |
| 操作时长 | 无严格时限 | 允许慢速操作 |
| 快捷操作 | 支持辅助功能 | VoiceOver 等 |

---

## 八、资源交付

### 8.1 切图规范

| 资源类型 | 格式 | 倍率 | 命名规范 |
|----------|------|------|----------|
| 图标 | PNG | @1x/@2x/@3x | icon_name_size.png |
| 背景 | PNG/JPG | @1x/@2x | bg_name.png |
| 九宫格 | PNG | @1x/@2x/@3x | nine_name.9.png |

### 8.2 交付清单

| 资源名称 | 尺寸 | 格式 | 状态 | 备注 |
|----------|------|------|------|------|
| [资源] | [尺寸] | [格式] | ✅/⏳ | [备注] |

---

## 📋 变更记录

| 版本 | 日期 | 修改人 | 修改内容 |
|------|------|--------|----------|
| v1.0 | YYYY-MM-DD | [姓名] | 初稿 |

---

*文档由游戏策划工作室自动生成*