游戏UI设计原则与实例指导手册

《游戏UI设计原则与实例指导手册》是一本注重思维引导与方法实践的游戏界面设计教程。全面介绍了游戏界面设计，涵盖游戏界面的基础知识和设计流程、游戏图标设计的基础知识、游戏界面的设计要求和动效制作，以及作者的经验等内容。本书对游戏界面设计的流程，游戏界面设计的视觉规范，游戏界面设计师在项目进展中如何与各个流程环节相配合，游戏界面设计师在游戏项目开发过程中应注意的事项等问题都进行了深入浅出的讨论和研究。作者将多年在游戏行业中积累的界面设计经验与方法毫无保留地分享给读者，并带领读者厘清游戏界面设计的本质，使读者全面掌握游戏界面的设计技巧。附带学习资源，内容包括所有操作案例的源文件和案例的同步讲解与分析视频，读者可通过在线方式获取这些资源，具体方法请参看本书前言。
《游戏UI设计原则与实例指导手册》适合对游戏界面设计有兴趣的初学者和有一定工作经验的游戏界面设计从业者阅读。对初学者来说，本书不仅分析了游戏界面设计师应具备的基本素质，还提供了初学者在学习与工作过程中经常遇到的问题的解决方案。而对有一定工作经验的游戏界面设计师来讲，这本书可以提供更多的思考方向，并可用于解决游戏界面设计中的一些实际问题。

李世钦（lesenli）
站酷推荐设计师，历任游戏蜗牛互动设计师、CCP FlashArtist、腾讯游戏视觉设计师和游戏美术3D动画特效设计师、心动网络资深界面动效设计师。拥有10余年游戏行业从业经验，在游戏界面设计和游戏动效设计方面都有着丰富的项目经验，参与或主导的知名游戏项目有蜗牛的《九阴真经》，CCP 的EVE DUST514、EVE Legion，腾讯的《全民枪王》、《和平精英》、CluBMIMI、Pgame、Fgame 等。

四大篇内容全面讲解游戏UI设计
基础篇：界面分类+职能了解+设计流程
图标篇：设计基础+矢量图标+写实图标
界面篇：设计基础+节奏感+功能需求强化+视觉规范
动效篇：设计基础+动效分类+运动规律+工具实战
行业经验篇：设计练习+迭代处理+切图优化+项目经验

基础篇
第1章　初识游戏界面设计
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章　游戏界面的设计流程
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章　游戏图标设计基础
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章　矢量图标的设计方法解析
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章　写实图标的设计方法解析
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章　游戏界面设计基础
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章　界面节奏感的把控
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　“LEgame”和“PRgame”项目中节奏感的把控与分析　184
7．3．1　设计之初的节奏韵律的规划　184
7．3．2　设计迭代中紊乱节奏的修正　187
7．3．3　设计复盘中整体节奏的调整　188
7．3．4　设计节奏感的时效性把控　190

第8章　界面功能需求的强化处理
8．1　游戏界面设计的本质与目的　192
8．2　如何通过设计体现界面本质　195
8．3　影响界面好坏的因素　196
8．4　界面功能需求的分析方法　199
8．4．1　从人的角度分析　199
8．4．2　从事的角度分析　199
8．5　“LEgame”项目中界面功能需求的强化设计与分析　203


第9章　界面视觉的统一化处理
9．1　界面视觉的准确性　208
9．2　界面视觉的唯一性　208
9．2．1　美术元素的应用方式　209
9．2．2　颜色色调的差异　209
9．2．3　材质风格的差异　209
9．3　界面视觉的一致性　210
9．3．1　美术元素的一致性　211
9．3．2　配色体系的一致性　212
9．3．3　图形设计的一致性　216
9．4　“PRgame”项目中视觉的统一化处理分析　217
9．4．1　准确性的处理　217
9．4．2　唯一性的处理　220
9．4．3　一致性的处理　221


第10章　游戏界面视觉系统的创立与分析
10．1　界面规范系统的划分　224
10．1．1　普通系统　225
10．1．2　新手引导系统　225
10．1．3　奖励系统　225
10．1．4　战斗系统　226
10．1．5　图标系统和按钮系统　227
10．2　制定视觉规范的方式和方法　229
10．2．1　积累阶段　229
10．2．2　梳理阶段　230
10．2．3　完善和补充阶段　230
10．2．4　持续维护阶段　230
10．3　视觉规范的边界　231
10．4　视觉规范细分化的指定　233
10．4．1　第一层级系统划分　233
10．4．2　细分化的视觉规范　235
10．4．3　建立辅助性控件库　236


第11章　游戏界面设计实例解析
11．1　《突变元年：伊甸园之路》项目实例解析　238
11．1．1　界面设计思路　238
11．1．2　元素的拆解与分析　244
11．1．3　总结　247
11．2　《镇魔曲》手游项目实例解析　249
11．2．1　界面设计思路　249
11．2．2　元素的拆解与分析　253
11．2．3　总结　270

动效篇
第12章　游戏界面动效设计基础
12．1　游戏界面动效设计的基本知识　274
12．1．1　动效设计的基本性质与规则　274
12．1．2　动效与特效的区分与说明　275
12．1．3　影响动效设计的因素　276
12．1．4　动效设计前需要注意的一些基本问题　277
12．2　游戏界面动效的分类　283
12．2．1　页面切换动效　283
12．2．2　情感表现动效　286
12．2．3　功能性动效　287
12．2．4　看不见的动效　289
12．3　游戏界面动效中常见的运动规律分析　290
12．3．1　缓动　290
12．3．2　遮罩　291
12．3．3　形变　291
12．3．4　透视动画　291
12．4　制作游戏界面动效的常用工具解析　292
12．4．1　用Photoshop制作动效　292
案例演示：用Photoshop制作黑色小球动画　292
12．4．2　用Animate制作简单动效　296
案例演示：用Animate制作黑色小球动画　296
12．4．3　用After Effects制作动效　301
案例演示：用After　Effects制作黄色小球动画　301
12．4．4　游戏引擎和编辑器的运用　307

第13章　游戏界面动效设计实例解析
13．1　用Animate在“LEgame”项目中制作缓动和形变动效　310
13．2　用After Effects在“LEgame”项目中制作弹窗入场动画　322
13．3　用After Effects在“GGgame”项目中制作复杂形变和透视动画　337

行业经验篇
第14章　日常工作中的一些经验
14．1　如何进行界面练习　350
14．1．1　筛选临摹对象　350
14．1．2　培养寻找亮点的能力　351
14．1．3　保持勤学多练　353
14．2如何解决游戏的迭代问题　354
14．2．1　处理游戏版本的迭代问题　354
14．2．2　处理游戏界面的迭代问题　355
14．3　如何优化切图方式并节省游戏包量　358
14．3．1　复用共用的控件切图　358
14．3．2　使用可拉伸的设计方式　360
14．3．3　以变形拉伸的方式输出切图　361
14．3．4　定期复查图集　361
14．4　如何解决项目协作问题　362
14．4．1　明确自我定位　362
14．4．2　把控全局　363
14．4．3　关于界面还原的问题　365
14．4．4　关于界面设计的决策源问题　369


第15章　项目设计中的一些经验
15．1　如何确保界面设计的规范性　372
15．1．1　发挥界面设计规范的实用价值　372
15．1．2　寻找项目限定范围内的发挥余地　373
15．1．3　功能性设计与创意性设计的平衡　375
15．2　如何解决游戏界面还原过程中的问题　376
15．2．1　处理不符合规范的设计问题　376
15．2．2　处理图形变形和图形模糊问题　378
15．2．3　处理大尺寸切图问题　379
15．2．4　处理动效优化问题　383
15．2．5　处理界面控件的适配问题　385
15．3　如何走查界面实现　388
15．3．1　每日版本走查　388
15．3．2　前端合入时的视觉验收　390
15．3．3　从设计之初规避问题　391
15．3．4　避免同类错误重复发生　392
15．3．5　时刻试玩产品　396

设计思维