游戏UI设计从入门到精通

对于游戏UI，很多人不了解是做什么的，或在理解上存在很大的误区，比如把游戏UI与应用UI混淆，或把游戏UI单纯地当成一个画画的岗位，忽略它的可实现性与用户体验，这种错误的观念会导致这些游戏从业者很难做出一款成功的游戏产品。

本书由业内知名的游戏UI设计师编写，其内容均是作者在实际游戏项目工作和教学总结而成的理论精华和宝贵经验。本书不仅仅要让你学会、学透游戏UI设计，还要让你了解整个游戏行业与除游戏UI外的其他游戏岗位的工作内容，让你清晰地了解游戏UI的定位与所需要的全部能力并了解它的发展方向。让你站在足够的高度来学习它，避免你走弯路，希望本书能成为你职业生涯中的一盏指明灯。

本书由业内知名的游戏 UI 设计师编写，详细介绍了游戏 UI 设计的理论知识和实战技巧。本书内容均是作者在实际游戏项目中的工作经验和教学成果，可以帮助零基础的读者成长为专业的游戏UI设计师，也可以帮助有经验的游戏 UI 设计师突破瓶颈并获得长期的理论指导。

全书分为 7 章，由浅入深地讲解了游戏 UI 与游戏行业、游戏 UI 设计软件、游戏 UI 手绘练习与原理、游戏 UI 手绘实战、游戏 UI 项目与元素制作、游戏 UI 交互设计、游戏 UI 设计师的简历与面试。

本书以实际游戏项目为案例，且配有教学视频，操作步骤讲解细致、通俗易懂，适合在校学生、设计师、美术爱好者与想要转入此行的朋友学习和使用。

于海洋（YHY），从2008年入行至今，经历过客户端、网页与移动端游戏开发时代，做过原画师、UI设计师、主美、美术总监、游戏公司合伙人、大学讲师、精尖UI技能培训师与学校游戏学科带头人，为全国各大知名公司培养了大量的游戏UI设计师与其他类型UI设计师人才。曾服务于国内多个大型游戏研发公司并参与多款大型游戏的研发，如《仙剑奇侠传》《迪士尼嘉年华》《拳皇98OL》《魔法门之英雄无敌：战争纪元》等。

这是一本内容非常详细的游戏UI专业学习工具书，从游戏领域的发展历程、基础软件的使用、美术能力的养成到详细的项目开发，最后还有神秘的面试技巧与解析，见解独到，分析细致！是一本难得一见的好书，实属难得！

王文韬 百度教育高级经理 HCI International协会DUXU 联合主席

游戏UI是游戏开发中不可缺少的部分，它在游戏美术中起着决定成败的作用，好的游戏UI设计师非常少，很多游戏UI设计师还只停留在专研美术的阶段，本书打破了普通游戏UI设计师的技能瓶颈，为大家指明了方向，是一本非常棒的技术指南书籍。

中国美术学院基础教学部导师 于朕

本书将工作技术与在校生学习的内容紧密结合，可以让学生充分地把自己在学校中学到的知识利用到工作当中，实属难得。尤其在这个移动互联网时代，很多学生的能力与社会工作内容脱节导致就业不顺，本书是在校生的福音，拥有本书相信同学们会更明确自己的学习方向。

北京科技大学工业设计系教授 覃京燕

海洋曾为资深游戏美术设计师，还有多年的丰富教学经验，了解学生与设计师学习的痛点与需求，完美地结合了实际工作内容与学习方法，编写了这本内容通俗易懂、案例全面、分析透彻的好书，是市面上难得一见的内容全面的学习工具书！

北京交通大学建筑与艺术学院副教授 张野

一款好的游戏首先要有一个好的用户体验，一个好的用户体验就需要有一群好的游戏UI设计师，本书从零开始详细介绍如何从一个初学者小白变为一个专业的游戏UI设计师，以及其所需要的知识与技术。本书不仅能帮助读者解决当下的学习与技术问题还能为以后的工作指明方向。给海洋为了行业的进步做出的贡献点赞，强烈推荐！

北京理工大学设计与艺术学院视觉传达设计系副教授 郝亚维

第

第 1 章　游戏 UI 与游戏行业

1.1　游戏 UI

1.1.1　游戏 UI 的定义

1.1.2　游戏 UI 的发展与现状

1.1.3　游戏 UI 的工作内容

1.1.4　游戏 UI 与应用 UI 的不同

1.1.5　什么样的人可以做游戏 UI 设计师

1.1.6　游戏 UI 工作工具与入行作品

1.2　游戏行业

第 2 章　游戏 UI 设计软件

2.1　游戏 UI 设计常用软件简介

2.2　Photoshop 菜单栏常用功能详解

2.2.1　文件

2.2.2　首选项

2.2.3　编辑

2.2.4　图像

2.2.5　图层

2.2.6　文字

2.2.7　选择

2.2.8　滤镜

2.2.9　视图

2.2.10　窗口

2.3　Photoshop 工具与属性栏常用功能详解

2.3.1　选择栏

2.3.2　效果栏

2.3.3　矢量栏

2.3.4　辅助栏

2.4　Photoshop 图层栏常用功能详解

2.4.1　图层的混合模式

2.4.2　图层的不透明度与填充

2.4.3　图层的隐藏与开启

2.4.4　图层的缩览图右击列表

2.4.5　图层操作

第 3 章　游戏 UI 手绘练习与原理

3.1　如何画准形与如何使用数位板

3.2　如何塑造立体空间感

3.2.1　理论

3.2.2　实战训练

3.3　如何做设计与如何用颜色

3.3.1　平面构成

3.3.2　色彩构成

3.4　辅助练习

3.4.1　写生

3.4.2　速写

3.4.3　创意临摹

3.4.4　默写与创作

第 4 章　游戏 UI 手绘实战

4.1　金属——头盔

4.1.1　构思

4.1.2　准备

4.1.3　草图

4.1.4　完善草图

4.1.5　上色

4.1.6　定稿与包装

4.2　宝石

4.2.1　宝石材质分析

4.2.2　宝石材质图标实战绘制

4.3　玻璃与液体——药水瓶

4.3.1　玻璃与液体材质分析

4.3.2　玻璃与液体材质图标实战绘制

4.4　布——布卷

4.4.1　布材质分析

4.4.2　布材质图标实战绘制

4.5　木头——木箱子

4.5.1　木头材质分析

4.5.2　木头材质图标实战绘制

4.6　纸——卷轴

4.6.1　纸材质分析

4.6.2　纸材质图标实战绘制

4.7　石头

4.7.1　石头材质分析

4.7.2　石头材质图标实战绘制

4.8　皮毛与骨头——肩甲

4.8.1　皮毛与骨头材质分析

4.8.2　皮毛与骨头材质图标实战绘制

第 5 章　游戏 UI 项目与元素制作

5.1　游戏项目的产生与游戏 UI 工作详解

5.1.1　游戏 UI 任务的发起、制作、审核与提交

5.1.2　一套游戏 UI 界面的组成

5.1.3　游戏 UI 的学习与提高

5.1.4　如何做合理的设计

5.2　游戏图标

5.2.1　图标的定义

5.2.2　游戏图标的形态

5.2.3　制作游戏图标的注意事项

5.2.4　游戏图标的设计流程

5.2.5　游戏图标的分类

5.3　游戏按钮

5.3.1　游戏按钮的分类

5.3.2　游戏按钮的建议配色

5.3.3　游戏按钮的大小

5.3.4　游戏按钮的状态

5.3.5　制作游戏按钮的注意事项

5.3.6　游戏按钮制作步骤演示

5.4　游戏 Logo 与字体

5.4.1　游戏 Logo 出现的地方

5.4.2　游戏 Logo 的制作要求

5.4.3　各类游戏 Logo 的特点

5.4.4　什么时候可以做扁平风格的游戏 Logo

5.4.5　做游戏 Logo 的准备

5.4.6　游戏 Logo 的组成元素

5.4.7　原创游戏《暴击天使》Logo 步骤演示

5.5　游戏界面

5.5.1　游戏界面的分类

5.5.2　游戏界面的级别

5.5.3　制作《暴击天使》角色界面步骤演示

5.6　游戏运营推广设计——游戏 Banner

5.6.1　游戏 Banner 的概念

5.6.2　游戏 Banner 的组成与制作要点

5.6.3　游戏 Banner 的表现手法

5.7　游戏字体设计

5.7.1　游戏字体大小规定

5.7.2　游戏字体颜色建议

5.7.3　游戏字体使用技巧

5.7.4　游戏字体排版

5.7.5　制作游戏字体的方式

5.7.6　中文字设计技巧

5.7.7　英文字设计技巧

第 6 章　游戏 UI 交互设计

6.1　交互法则

6.1.1　有用

6.1.2　易用

6.1.3　安全

6.1.4　艺术

6.2　拓展案例：“75 条交互案例”

第 7 章　游戏 UI 设计师的简历与面试

7.1　简历内容

7.2　面试

7.3　测试

7.4　入职

1．为什么写这本书

这本书写了将近一年时间。写这本书的时候，是笔者在游戏行业工作的第九个年头。笔者尽力把自己这九年涉及的所有与游戏 UI 有关的经验浓缩成精华写在这本书里。

笔者经历了中国游戏行业发展的三大时代：客户端游戏时代、网页游戏时代和现在的移动端游戏时代。

笔者做过游戏原画、游戏UI设计与其他的一些美术岗位，也与朋友一起开过游戏公司，做过管理工作，做过几款被大家熟知的经典游戏。

2015 年笔者加入了培训行业，和朋友开了一家后来与百度、站酷、UI 中国、斯坦福大学等名企与名校独家合作的国内知名的应用 UI 与游戏 UI 培训学校。

2018 年下半年，笔者创办了属于自己的 UI 培训班——YHY 艺术工作室。

到现在为止，笔者亲手带过的学生有三百余人，早期毕业的学生已任职于各大名企。

对于游戏 UI，很多人不了解它是做什么的，或在理解上存在很大的误区，比如把游戏 UI 与应用 UI 混淆，或把游戏 UI 单纯地当成一个画画的岗位，忽略它的可实现性与用户体验，这其中甚至还包括很多已经工作多年的美术管理者。这种错误的观念导致初学者学习无方向，游戏从业者难以做出成功的游戏产品。

为什么会这样？因为市场上缺少真正的专业书籍，学校也缺少与实际工作内容相符的课程，大多数从业者没有机会接触其他岗位的工作，导致对游戏全盘开发流程不了解，这就让很多感兴趣想学习的新人或在职想提高技能的朋友不知道从何下手。

本书不仅要让你学会、学透游戏 UI 设计，还要让你了解整个游戏行业与除游戏 UI 外的其他游戏岗位的工作内容，让你清晰地了解游戏 UI 设计师的工作定位与所需要的全部能力，并了解它的发展方向。让你站在足够的高度来学习它，避免你走弯路，做出一些不切实际的内容。希望本书能成为你职业生涯中的一盏明灯，并持续为你指路。

2．关于内容

本书分为 7 章，语言通俗易懂，一步一图，案例部分配有教学视频，由浅入深地讲解游戏 UI 设计各个阶段的理论与实战。

第 1 章讲游戏 UI 与游戏行业：带你了解什么是游戏 UI、国内外游戏 UI 的发展历史、游戏公司的情况、游戏公司各个岗位的工作内容与职责，以及学习游戏UI需要准备的工具。

第 2 章讲游戏 UI 设计软件：让你掌握游戏 UI 美术制作软件的使用方法。

第 3 章讲游戏 UI 手绘练习与原理：让你掌握游戏 UI 所需要的手绘能力，如学习需要画什么、手绘理论依据与设计依据是什么。这些知识不仅可以让你从零基础到入门，还可以帮助你持续提高。如果你是其他与美术相关的行业从业者，学完本章之后你的手绘能力也会得到惊人的提高。

第 4 章讲游戏 UI 手绘实战：这一章将带你了解资深游戏美术设计师如何做原创设计与如何赋予内容丰富的材质细节，让你的手绘技术得到提升并掌握原创与刻画细节的能力。

第 5 章讲游戏 UI 项目与元素制作：在掌握了之前几章讲解的基础内容后，我们开始进行实际游戏项目的 UI 制作训练，包含游戏的原型图、装备图标、头像、技能图标、物品图标、功能图标、徽章、icon、按钮、面板、版头、字体、装饰、运营 Banner 与 Logo设计。通过真实项目案例详细地讲解每个 UI 制作的细节，除此之外还有在工作后期与其他部门对接时所需要的技术，让你完整地认识游戏 UI 的制作方法。

第 6 章讲游戏 UI 交互设计：加入交互理念，提升游戏设计高度，让你迅速获得实际工作经验，并设计出让用户认可的成功产品。使你能够站在普通设计师的肩膀上，掌握更高级的设计能力，迅速成为一名有价值的游戏 UI 设计师。

第 7 章讲游戏 UI 设计师的简历与面试：笔者通过收集大量的游戏 UI 毕业生实际面试内容，总结出游戏 UI 岗位的作品需求与简历内容的制作方法，同时包含全面、精准的面试问题。揭开面试的神秘面纱，帮助你顺利就业。