【模板】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 信息架构
3.2 导航结构
| 导航类型 |
位置 |
包含项 |
交互方式 |
| 主导航 |
底部/顶部/侧边 |
[列表] |
点击切换 |
| 次级导航 |
[位置] |
[列表] |
[方式] |
| 面包屑 |
[位置] |
[列表] |
[方式] |
3.3 页面清单
| 页面名称 |
页面 ID |
父级页面 |
核心功能 |
优先级 |
| 主界面 |
home |
- |
游戏入口 |
P0 |
| 战斗界面 |
battle |
home |
核心玩法 |
P0 |
| 背包界面 |
inventory |
home |
物品管理 |
P1 |
| 设置界面 |
settings |
home |
系统设置 |
P2 |
四、核心界面设计
4.1 主界面
界面布局
元素说明
| 元素名称 |
位置 |
功能 |
交互 |
| 等级显示 |
左上 |
显示玩家等级 |
点击查看详情 |
| 货币显示 |
顶部 |
显示各类货币 |
点击充值 |
| 功能入口 |
底部 |
功能快捷入口 |
点击跳转 |
4.2 战斗界面
界面布局
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 安全区域
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 |
[姓名] |
初稿 |
文档由游戏策划工作室自动生成
