游戏界面交互设计说明文档模板

2026-08-25

游戏设计
Unity

文档名称：[界面/系统名称] 版本号：v0.0.0 游戏版本：[关联的游戏迭代版本] 状态：草稿 / 评审中 / 已定稿 / 已废弃 更新日期：YYYY-MM-DD 交互设计师：[姓名] 视觉设计师：[姓名] UI程序：[姓名] 策划负责人：[姓名] 关联需求：[需求号]

---

1. 设计概述（Design Overview）

1.1 设计目标

描述：这个界面/系统要解决什么问题？期望达成的体验目标是什么？

[目标1：如降低新手认知负荷]
[目标2：如优化背包整理操作效率]
[目标3：如提升付费转化率]

1.2 设计范围

描述：本次设计包含哪些界面/功能，明确排除哪些内容（防止范围蔓延）。

包含范围：

[范围1]
[范围2]

排除范围：

[排除1]
[排除2]

1.3 目标平台与输入方式

描述：明确支持的硬件平台及主要输入方式。

平台	输入方式	优先级
PC	键鼠	`[P0/P1/P2]`
移动端（iOS/Android）	触屏	`[P0/P1/P2]`
主机（PS/Xbox/Switch）	手柄	`[P0/P1/P2]`

1.4 参考与对标

描述：列出参考的竞品或优秀案例，并说明差异点。

参考产品	参考点	我方差异
`[产品A]`	`[如：背包分类筛选逻辑]`	`[如：增加一键整理]`
`[产品B]`	`[如：地图标记交互]`	`[如：支持语音标记]`

1.5 核心体验指标

描述：定义可量化的体验目标，用于后续验收。

[指标1：如背包整理操作不超过3步]
[指标2：如菜单层级不超过2层]
[指标3：如界面首次打开加载时间 < 500ms]

---

2. 信息架构（Information Architecture）

2.1 页面地图（Sitemap）

描述：用文本层级或引用外部流程图，展示所有相关子界面及跳转关系。

[主界面名称]
├── [子界面A]
│   ├── [子界面A-1]
│   └── [子界面A-2]
├── [子界面B]
└── [子界面C]

2.2 入口与出口

描述：玩家从哪些场景/操作进入本界面，如何退出。

入口	触发条件	前置条件
`[如：点击主界面背包按钮]`	`[如：点击]`	`[如：非战斗状态]`
`[如：快捷键 I]`	`[如：按键]`	`[如：无弹窗遮挡]`

出口	触发条件	跳转目标
`[如：点击关闭按钮]`	`[如：点击]`	`[如：返回上级界面]`
`[如：按 Esc / 手柄Circle]`	`[如：按键]`	`[如：关闭界面]`

2.3 互斥规则

描述：本界面与哪些系统/界面互斥，打开时是否需要关闭其他界面。

[规则1：如战斗状态下禁止打开]
[规则2：如打开本界面时自动关闭聊天窗口]

---

3. 交互流程图（User Flow）

3.1 主流程

描述：玩家完成核心任务的完整路径。建议配合流程图或时序图。

[步骤1：玩家操作] → [步骤2：系统响应] → [步骤3：界面反馈] → [步骤4：任务完成]

3.2 分支流程

描述：异常路径、快捷操作、多选一等分支情况。

分支场景	触发条件	处理逻辑
`[如：快速连点]`	`[如：200ms内重复点击]`	`[如：防重机制，仅响应第一次]`
`[如：取消操作]`	`[如：点击取消按钮]`	`[如：回滚至上一状态，不保存]`

3.3 状态流转图

描述：界面内核心模块的状态机。

[状态A：未解锁] --(条件X)--> [状态B：解锁中] --(条件Y)--> [状态C：已解锁]

3.4 输入映射表（Input Mapping）

描述：游戏特有，明确每个操作对应的键位/手柄按键/触屏手势。

操作	PC（键鼠）	主机（手柄）	移动端（触屏）
`[确认/选择]`	`[左键 / Enter]`	`[A键 / Cross]`	`[点击]`
`[返回/关闭]`	`[Esc / 右键]`	`[B键 / Circle]`	`[从左侧滑入返回]`
`[上/下导航]`	`[W/S / 方向键]`	`[左摇杆 / 十字键]`	`[滑动]`
`[快捷操作]`	`[Tab]`	`[L1]`	`[长按]`

---

4. 界面详细说明（Screen Specifications）

以下按 页面/模块逐个拆解，每个子界面复制一份 4.x 章节。

---

4.1 [子界面名称 / 模块名称]

4.1.1 布局与视觉层级

描述：线框图说明、安全区标注、分辨率适配规则。

线框图：[插入线框图或标注链接]
安全区（Safe Area）：[标注各平台安全边距，如顶部44px、底部34px]
分辨率适配：[如16:9正常显示，21:9两侧背景扩展，4:3左右裁切]

4.1.2 元素清单（Element Inventory）

元素ID	名称	类型	默认状态	交互说明	数据来源
`[BTN_001]`	`[确认按钮]`	`[按钮]`	`[正常]`	`[点击后关闭弹窗并保存]`	`[本地配置]`
`[TXT_003]`	`[玩家昵称]`	`[文本]`	`[正常]`	`[超出12字符显示"..."]`	`[服务器玩家数据]`
`[IMG_005]`	`[头像框]`	`[图片]`	`[正常]`	`[点击跳转个人资料]`	`[服务器头像URL]`
`[LIST_010]`	`[道具列表]`	`[滚动列表]`	`[正常]`	`[支持拖拽排序]`	`[本地背包数据]`

4.1.3 状态定义（States）

描述：穷举每个核心元素的所有状态及迁移规则。

元素ID	状态	视觉表现	触发条件	迁移至
`[BTN_001]`	`[正常]`	`[默认样式]`	`[默认]`	`[Hover/按下/禁用]`
`[BTN_001]`	`[Hover/焦点]`	`[高亮+放大1.05x]`	`[鼠标移入/手柄焦点移动]`	`[正常/按下]`
`[BTN_001]`	`[按下]`	`[缩小0.95x+变暗]`	`[点击/按键按下]`	`[正常/禁用]`
`[BTN_001]`	`[禁用]`	`[灰度+透明度50%]`	`[条件不满足]`	`[正常]`
`[BTN_001]`	`[加载中]`	`[显示Loading动画]`	`[请求处理中]`	`[正常/错误]`

4.1.4 交互动效（Interaction & Motion）

元素ID	触发条件	动画类型	时长	缓动曲线	详细参数
`[BTN_001]`	`[点击]`	`[缩放反馈]`	`[100ms]`	`[Ease-out]`	`[1.0 → 0.95 → 1.0]`
`[PANEL_A]`	`[界面打开]`	`[滑入+淡入]`	`[300ms]`	`[Cubic-bezier(0.4,0,0.2,1)]`	`[Y+50px → 0, 透明度0→1]`
`[LIST_010]`	`[数据刷新]`	`[渐显]`	`[200ms]`	`[Linear]`	`[透明度0→1，逐项延迟50ms]`

4.1.5 音效与触觉反馈（Audio & Haptics）

元素ID	事件	音效ID	音效说明	手柄震动	触屏震动
`[BTN_001]`	`[点击]`	`[SFX_UI_Click_01]`	`[通用确认音]`	`[无]`	`[轻触反馈]`
`[BTN_001]`	`[Hover]`	`[SFX_UI_Hover_01]`	`[轻微悬停音]`	`[无]`	`[无]`
`[BTN_002]`	`[错误点击]`	`[SFX_UI_Error_01]`	`[低频警示音]`	`[弱震动100ms]`	`[强震动]`

4.1.6 数据与规则（Data & Logic）

数据项	类型	来源	格式化规则	刷新频率
`[玩家金币]`	`[整数]`	`[服务器]`	`[10000→1万 / 10,000]`	`[实时]`
`[道具数量]`	`[整数]`	`[本地]`	`[上限999，超出显示"999+"]`	`[操作后即时刷新]`
`[列表排序]`	`[枚举]`	`[本地配置]`	`[默认按获得时间倒序]`	`[手动触发]`

---

4.2 [下一个子界面 / 模块]

复制 4.1 结构继续填写。

---

5. 异常与边界情况（Edge Cases & Error Handling）

5.1 网络异常

场景	表现	玩家操作	系统行为
`[打开界面时断网]`	`[显示网络断开提示]`	`[点击重试]`	`[重新请求数据]`
`[操作过程中断网]`	`[操作按钮置灰]`	`[等待网络恢复]`	`[本地缓存待提交]`

5.2 数据异常

场景	表现	处理逻辑
`[数值为0]`	`[显示"暂无数据"占位图]`	`[禁用相关操作按钮]`
`[数值超大]`	`[科学计数法/截断显示]`	`[前端做上限保护]`
`[数据格式错误]`	`[显示默认占位图]`	`[上报错误日志]`

5.3 并发与性能边界

场景	表现	处理逻辑
`[快速连点]`	`[仅第一次响应]`	`[200ms防抖/防重]`
`[帧率下降]`	`[动画降级或跳过]`	`[<30fps时关闭非必要动效]`
`[内存告警]`	`[降低贴图精度]`	`[释放非可见界面资源]`

---

6. 多平台适配（Multi-Platform Adaptation）

6.1 PC（键鼠）

适配项	规则
`[键位提示]`	`[所有可交互元素显示对应快捷键，如 Esc 关闭]`
`[悬停态]`	`[鼠标悬停显示Tooltip，延迟200ms]`
`[右键菜单]`	`[支持右键呼出快捷菜单]`
`[光标样式]`	`[悬停可交互元素时变为手型光标]`

6.2 主机（手柄）

适配项	规则
`[焦点循环]`	`[方向键/摇杆导航，焦点在边界循环或停留]`
`[按键提示图标]`	`[使用平台标准图标，如 □ / × / ○ / △]`
`[默认焦点]`	`[界面打开时自动聚焦第一个可交互元素]`
`[长列表滚动]`	`[按住方向键加速滚动，松开即停]`

6.3 移动端（触屏）

适配项	规则
`[手势冲突]`	`[滑动列表与滑动地图的冲突解决规则]`
`[防误触区域]`	`[关键按钮热区不小于 88×88pt]`
`[软键盘]`	`[输入框聚焦时界面整体上移，关闭后恢复]`
`[长按与滑动]`	`[长按触发快捷菜单，滑动触发滚动，阈值500ms/10px]`

---

7. 数据埋点（Analytics）

7.1 事件清单

事件ID	事件名称	触发时机	关联属性	优先级
`[UI_Backpack_Open]`	`[背包打开]`	`[点击背包按钮]`	`[来源场景、当前页签]`	`[P0]`
`[UI_Backpack_ItemClick]`	`[道具点击]`	`[点击道具图标]`	`[道具ID、道具类型]`	`[P0]`
`[UI_Backpack_Sort]`	`[背包排序]`	`[切换排序方式]`	`[排序类型]`	`[P1]`

7.2 A/B 测试方案（如有）

实验ID	实验名称	对照组	实验组	指标
`[EXP_001]`	`[按钮颜色对比]`	`[蓝色按钮]`	`[橙色按钮]`	`[点击率]`

---

8. 资源清单与交付物（Assets & Deliverables）

8.1 视觉切图

资源名称	格式	尺寸	命名规范	备注
`[btn_confirm_nor]`	`[PNG]`	`[256×64]`	`[btn_confirm_{状态}]`	`[九宫格拉伸，边距8px]`
`[icon_item_bg]`	`[TGA]`	`[128×128]`	`[icon_{类型}_bg]`	`[带透明通道]`

8.2 字体规范

用途	字体	字号	字重	颜色	多语言回退
`[标题]`	`[思源黑体]`	`[32px]`	`[Bold]`	`[#FFFFFF]`	`[Noto Sans]`
`[正文]`	`[思源黑体]`	`[24px]`	`[Regular]`	`[#CCCCCC]`	`[Noto Sans]`
`[提示文本]`	`[思源黑体]`	`[20px]`	`[Regular]`	`[#888888]`	`[Noto Sans]`

8.3 动效文件

动效名称	导出格式	制作工具	目标引擎	备注
`[界面打开动效]`	`[引擎内制作]`	`[UE UMG]`	`[Unreal]`	`[使用材质动画]`
`[按钮点击反馈]`	`[Lottie JSON]`	`[After Effects]`	`[Unity]`	`[需支持颜色替换]`

8.4 音效文件

音效ID	文件格式	时长	是否循环	备注
`[SFX_UI_Click_01]`	`[WAV]`	`[0.3s]`	`[否]`	`[通用确认音]`
`[SFX_UI_Error_01]`	`[WAV]`	`[0.5s]`	`[否]`	`[低频警示音]`

---

9. 变更日志（Changelog）

版本	日期	修改人	修改内容	影响范围	状态
`[v0.1.0]`	`[YYYY-MM-DD]`	`[姓名]`	`[初版草稿]`	`[全局]`	`[草稿]`
`[v0.2.0]`	`[YYYY-MM-DD]`	`[姓名]`	`[新增XX功能交互说明]`	`[XX模块]`	`[评审中]`
`[v1.0.0]`	`[YYYY-MM-DD]`	`[姓名]`	`[定稿]`	`[全局]`	`[已定稿]`

---

附录

A. 术语表

术语	说明
`[术语1]`	`[解释]`
`[术语2]`	`[解释]`

B. 相关文档链接

[策划PRD链接]
[视觉设计稿链接]
[技术接口文档链接]
[通用组件交互规范链接]

---

文档使用说明： 1. 所有 [] 内的内容均为占位提示。 2. 如某章节不适用当前界面，保留标题并标注"N/A"。 3. 视觉相关标注建议配合 Figma 链接使用。 4. 定稿后将本文档同步至项目，并通知相关方。

目录

1. 设计概述（Design Overview）

1.1 设计目标

1.2 设计范围

1.3 目标平台与输入方式

1.4 参考与对标

1.5 核心体验指标

2. 信息架构（Information Architecture）

2.1 页面地图（Sitemap）

2.2 入口与出口

2.3 互斥规则

3. 交互流程图（User Flow）

3.1 主流程

3.2 分支流程

3.3 状态流转图

3.4 输入映射表（Input Mapping）

4. 界面详细说明（Screen Specifications）

4.1 [子界面名称 / 模块名称]

4.1.1 布局与视觉层级

4.1.2 元素清单（Element Inventory）

4.1.3 状态定义（States）

4.1.4 交互动效（Interaction & Motion）

4.1.5 音效与触觉反馈（Audio & Haptics）

4.1.6 数据与规则（Data & Logic）

4.2 [下一个子界面 / 模块]

5. 异常与边界情况（Edge Cases & Error Handling）

5.1 网络异常

5.2 数据异常

5.3 并发与性能边界

6. 多平台适配（Multi-Platform Adaptation）

6.1 PC（键鼠）

6.2 主机（手柄）

6.3 移动端（触屏）

7. 数据埋点（Analytics）

7.1 事件清单

7.2 A/B 测试方案（如有）

8. 资源清单与交付物（Assets & Deliverables）

8.1 视觉切图

8.2 字体规范

8.3 动效文件

8.4 音效文件

9. 变更日志（Changelog）

附录

A. 术语表

B. 相关文档链接