游戏UI设计原则与实例指导手册（第2版）

基础篇
第 1章 初识游戏界面设计 015
1.1 游戏界面的分类与特点 016
1.1.1 按游戏背景划分 016
1.1.2 按美术风格划分 022
1.2 游戏界面设计师需要了解的常识 024
1.2.1 游戏界面设计师的职能 024
1.2.2 游戏界面设计师工作的本质 025
1.2.3 如何追求产品的本质 026
1.2.4 游戏界面设计是艺术还是产品 028
1.3 关于做好游戏界面设计的一些建议 029
1.3.1 游戏界面设计的整体原则 029
1.3.2 掌握合适的学习方法 030
1.3.3 界面的表现效果 032
1.3.4 培养较强的沟通与表达能力 034

第 2章 游戏界面的设计流程 037
2.1 界面布局设计 038
2.1.1 解读需求文档和交互稿 038
2.1.2 将交互稿转化为界面布局 038
2.2 界面信息设计 040
2.2.1 设定基本颜色 040
2.2.2 增加情感化内容 040
2.3 界面的细化 043
2.3.1 细化颜色 043
2.3.2 细化内部结构 045
2.4 质感的强化表现 046
2.4.1 细化纹理材质 046
2.4.2 调整并完善形体结构的细节 048
2.5 最终资源输出 050
2.5.1 切图的输出 050
2.5.2 标注图的输出 051


图标篇
第3章 游戏图标设计基础 053
3.1 图标在界面中的重要性 054
3.1.1 情感化的表现 054
3.1.2 强化视觉引导 055
3.1.3 完善界面节奏 056
3.2 游戏图标的应用场景 058
3.2.1 指代整个游戏 058
3.2.2 功能系统入口 058
3.2.3 功能性的装饰 058
3.3 游戏图标设计的基本原则 059
3.4 图标的种类划分 062
3.4.1 从美术风格上划分 062
3.4.2 从功能上划分 064

第4章 矢量图标的设计方法解析 067
4.1 矢量图标的分类与设计要点 068
4.1.1 线性图标设计要点 068
4.1.2 负形面片图标设计要点 069
4.1.3 多色扁平化图标设计要点 071
4.2 矢量图标的统一设计规范 073
4.2.1 尺寸规范 073
4.2.2 线条规范 074
4.2.3 像素规范 074
4.2.4 基本形的使用规范 075
4.3 矢量图标的应用场景分析 077
4.3.1 轻量化位置 077
4.3.2 扁平化位置 078
4.3.3 需弱化用于平衡画面的位置 078
4.3.4 需使用业界通用型设计的位置 079
4.4 矢量图标线条美感的把控 080
4.4.1 不同弧线的交接处过渡要融洽 080
4.4.2 保持合理的结构安排 080
4.4.3 保持足够的留白 081
4.4.4 保持合理统一的线条走向 081
4.4.5 体现情感化内容的处理方式 082
4.5 绘制一个矢量风格的相机图标 083

第5章 写实图标的设计方法解析 087
5.1 写实图标的功能与特点 088
5.1.1 写实图标的功能 088
5.1.2 写实图标的特点 088
5.2 写实图标的分类与应用场景分析 091
5.2.1 从美术风格上划分 091
5.2.2 从功能上划分 092
5.3 写实图标的设计原则 094
5.3.1 大尺寸的写实图标 094
5.3.2 中小尺寸的写实图标 097
5.4 绘制一个写实风格的“邮件”图标 100

界面篇
第6章 游戏界面设计基础 113
6.1 游戏界面设计的特点 114
6.1.1 趣味性 114
6.1.2 情感化追求 117
6.1.3 较强的迭代性 117
6.1.4 丰富的表现力和实用性 117
6.2 游戏界面的结构划分与元素构成 118
6.2.1 界面的结构划分 118
6.2.2 界面的元素构成与设计分析 122
6.3 界面情感化内容的表现 152
6.3.1 提炼并融入美术元素 152
6.3.2 利用特有材质 153
6.3.3 处理场景 154
6.4 游戏界面风格如何形成 155
6.4.1 如何根据游戏背景建构设定游戏界面风格 155
6.4.2 成熟游戏界面风格的主要特征 165

第7章 界面节奏感的把控 171
7.1 节奏感的基本表现与分析 172
7.1.1 节奏感在生活场景中的表现 172
7.1.2 节奏感在游戏界面中的表现 174
7.2 界面节奏感的表现特征分析 179
7.2.1 均衡的色彩配置 179
7.2.2 均衡的信息排版 180
7.2.3 合理的节奏分配 181
7.3 游戏界面节奏感的设计与把控 184
7.3.1 游戏界面动效设计的两大关键点 184
7.3.2 游戏界面动效节奏感的具体表现形式 189
7.4 “LEgame”和“PRgame”项目中节奏感的把控与分析 195
7.4.1 设计之初的节奏韵律规划 196
7.4.2 设计迭代中紊乱节奏的修正 199
7.4.3 设计复盘中整体节奏的调整 200
7.4.4 设计节奏感的时效性把控 202

第8章 界面功能需求的强化处理 203
8.1 游戏界面设计的本质与目的 204
8.2 如何通过设计体现界面本质 207
8.3 影响界面好坏的因素 208
8.4 界面功能需求的分析方法 211
8.4.1 从人的角度分析 211
8.4.2 从事的角度分析 211
8.5 “LEgame”项目中界面功能需求的强化设计与分析 215

第9章 界面视觉的统一化处理 219
9.1 界面视觉的准确性 220
9.2 界面视觉的唯一性 220
9.2.1 改变界面中的美术元素 221
9.2.2 界面色调的差异 221
9.2.3 设置不同的材质风格 221
9.3 界面视觉的一致性 222
9.3.1 美术元素的一致性 223
9.3.2 配色体系的一致性 224
9.3.3 图形设计的一致性 228
9.4 “PRgame”项目中视觉的统一化处理分析 229
9.4.1 准确性的处理 229
9.4.2 唯一性的处理 232
9.4.3 一致性的处理 233

第 10章 游戏界面视觉系统的创立与分析 235
10.1 界面规范系统的划分 236
10.1.1 普通系统 237
10.1.2 新手引导系统 237
10.1.3 奖励系统 237
10.1.4 战斗系统 238
10.1.5 图标系统和按钮系统 239
10.2 制订设计规范的方式和方法 241
10.2.1 积累阶段 241
10.2.2 梳理阶段 242
10.2.3 完善和补充阶段 242
10.2.4 持续维护阶段 242
10.3 设计规范的边界 243
10.4 设计规范细分化的指定 245
10.4.1 第 一层级系统划分 245
10.4.2 细分化的设计规范 247
10.4.3 建立辅助性控件库 248

动效篇
第 11章 游戏界面动效设计基础 249
11.1 游戏界面动效设计的基本知识 250
11.1.1 动效设计的基本性质与规则 250
11.1.2 动效与特效的区分与说明 251
11.1.3 影响动效设计的因素 252
11.1.4 动效设计前需要注意的一些基本问题 253
11.2 游戏界面动效的分类 259
11.2.1 界面切换动效 259
11.2.2 情感表现动效 262
11.2.3 功能性动效 263
11.2.4 看不见的动效 265
11.3 游戏界面动效中常见的运动规律分析 266
11.3.1 缓动 266
11.3.2 遮罩 267
11.3.3 形变 267
11.3.4 透视动画 267
11.4 制作游戏界面动效的常用工具解析 268
11.4.1 用Unity制作简单动效 268
案例演示：用Unity制作科技风格结算界面动效 268
11.4.2 用Unreal Engine 5制作简单动效 276
案例演示：用Unreal Engine 5制作科技风格结算界面动效 276
11.4.3 用After Effects制作动效 286
案例演示：用After Effects制作黄色小球动效 286

第 12章 游戏界面动效设计实例解析 293
12.1 用After Effects在“LEgame”项目中制作弹窗入场动效 294
12.2 用After Effects在“GGgame”项目中制作复杂形变和透视动画 309

行业经验篇
第 13章 日常工作中的一些经验 321
13.1 如何进行界面练习 322
13.1.1 筛选临摹对象 322
13.1.2 培养寻找亮点的能力 323
13.1.3 保持勤学多练 325
13.2如何解决游戏的迭代问题 326
13.2.1 处理游戏版本的迭代问题 326
13.2.2 处理游戏界面的迭代问题 327
13.3 如何优化切图方式并减小游戏包量 330
13.3.1 复用共用的控件切图 330
13.3.2 使用可拉伸的设计方式 332
13.3.3 以变形拉伸的方式输出切图 333
13.3.4 定期复查图集 333
13.4 如何解决项目协作问题 334
13.4.1 明确自我定位 334
13.4.2 把控全局 335
13.4.3 关于界面还原的问题 337
13.4.4 关于界面设计的决策源问题 341

第 14章 项目设计中的一些经验 343
14.1 如何确保界面设计的规范性 344
14.1.1 发挥界面设计规范的实用价值 344
14.1.2 寻找项目限定范围内的发挥余地 345
14.1.3 功能性设计与创意性设计的平衡 347
14.2 如何解决游戏界面还原过程中的问题 348
14.2.1 处理不符合规范的设计问题 348
14.2.2 处理图形变形和图形模糊问题 350
14.2.3 处理大尺寸切图问题 351
14.2.4 处理动效优化问题 355
14.2.5 处理界面控件的适配问题 357
14.3 如何走查版本 360
14.3.1 每日版本走查 360
14.3.2 前端合入时的视觉验收 362
14.3.3 从设计之初规避问题 363
14.3.4 避免同类错误重复发生 364
14.3.5 时刻试玩产品 368