324 lines
9.6 KiB
Markdown
324 lines
9.6 KiB
Markdown
# 【模板】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 | [姓名] | 初稿 |
|
|
|
|
---
|
|
|
|
*文档由游戏策划工作室自动生成*
|