硬核干货：认识游戏视觉设计，从理论武装到实操

时间：2021-02-19 09:54:16 来源：作者：网络转载

本文首发网易游戏学院，GameRes经授权发布。

（一）什么是游戏视觉设计？

一、了解游戏视觉设计的工作对象

①登录界面：登录界面是玩家进入游戏本体之前的第一个门槛，可以说是对整个游戏概念的首要印象。登陆界面通常包含：游戏LOGO、登录和服务器选择信息、登录入口，以及一些辅助按钮，如公告、用户中心等等。

②大厅界面：一些游戏会有常驻信息的大厅界面，通常集合了游戏绝大部分的功能和玩法入口。

（《终结者2》大厅界面）

③服务器界面：游戏里会存在多个服务器对玩家进行分流，而服务器界面就是承载这个功能的。通常可以在服务器界面看到多个服务器列表，包含每个服务器的状态。

（《非人学园》服务器界面）

④核心玩法界面（HUD）：玩家主要操作的界面，界面上功能的类型和多少，依据不同游戏类型略有不同。

（《明日之后》HUD界面）

⑤系统功能界面：针对游戏玩法的各个不同系统所对应的功能界面，常见的有角色界面、装备界面、背包界面、宠物界面、任务查看界面、图鉴界面、创建角色界面、抽卡界面等。不同游戏因为世界观和主题的不同，以及玩法类型的不同，相同功能的系统名称也会有相应的不同包装。

（《猎魂觉醒》背包界面）

（《决战平安京》匹配界面）

⑥结算界面：通常是一局对决或一轮游戏玩法的结束，一般包含“胜利”或“失败”、“SABCD”等类似结果判定性提示，以及结果信息。（重点在于营造正向反馈的气氛，弱化负面反馈）

（《一梦江湖》结算界面）

⑦活动界面：通常对氛围的营造要求更贴合活动主题，并且与游戏其他界面的风格保持一致。属于游戏界面中的特殊界面，也是视觉设计师发挥空间最大的界面。

（《终结者2》活动界面）

二、了解游戏视觉设计风格

定义：一个游戏风格的诞生不仅需要视觉设计师的创意，也需要视觉设计师在前期投入大量的精力去了解项目的背景，这样才能设计出一套符合游戏世界观与风格的界面，增加玩家的代入感与沉浸感。

①游戏类型：不同的游戏类型，所需要的界面内容是不同的，表现形式也是不同。以下为常见的游戏类型：

RPG（Role-Playing Game）-角色扮演游戏
ARPG（Action RPG）-动作角色扮演游戏
SRPG（Simulation RPG）-模拟角色扮演游戏
MMORPG（Massive Muti-player Online RPG）-多人在线角色扮演游戏
AVG（Adventure Game）-冒险游戏
AAVG（Action AVG）-动作冒险游戏
ACT（Action）-动作类游戏
STG（Shooting Game）-射击游戏
FPS（First Person Shooting）-第一人称射击游戏
FTG（Fighting Game）-格斗游戏
SLG（Strategy Game）-战略游戏
RTS（Real-Time Strategy Game）-即时战略游戏
RAC（Racing Game）-赛车类竞速游戏

②世界观：每一个游戏都有自己独特的世界观，世界观是游戏中世界的样子，处于什么时期什么背景，生存规则等，在这个世界发生的一切是玩家会了解和经历的故事

世界观包括：世界构架、地图、阵营势力，英雄甚至是游戏道具都会包含其中。了解世界观即了解的是世界背景、人物设定、数值力量均衡体系、主线故事。世界观的架构会让玩家在游戏中身临其境的感知，是引导玩家深入体验的前菜。

（《第五人格》探索真相）

（《神都夜行录》中国妖怪）

③美术风格：作为视觉设计表现中最重要的环节，直接影响整体玩家对游戏的沉浸感及游戏的统一完整性体验。【点击了解“美术风格”详情】

三、了解游戏视觉在游戏中的作用

①桥梁

纵观每年世界顶级游戏厂商的新作，我们可以发现游戏所承载的精神力量已经远远不止于提供娱乐这么简单。在对世界的认知，历史追溯，人性反思这些方面，许多优秀游戏作品都已经给出了不弱于文学，音乐，影视的惊喜。例如：《P5》真实还原城市，《刺客信条》还原历史事件，《底特律》AI发展中人性的思考等。这都让世界对游戏有了新的认识，同时更坚定了游戏从业者有更高追求的信心。

不同于人对大多数艺术形式的接受习惯——视、听，游戏在这基础上增加了——操作体验。这就增加了用户接受作品新的维度。交互就是这一维度的最直接体现。

②感性与理性的化身

GUI在游戏制作环节中，是游戏交互操作的美术包装，是对交互稿的美化和升华。需要同时考虑对游戏美术风格延续，和交互操作手法合理表达这两点的融合。可以说GUI是艺术（感性）和人类行为学（理性）的双重化身，对相关从业者有着以上两点不可或缺的能力要求。GUI做好，玩家投入游戏的沉浸感和体验可以事半功倍。

③舒适和自尊

好的设计可以引导玩家明确目标、提高对行动及环境的驾驭感。玩家在游戏中从事任何行为都能得到积极反馈，当然玩家以为的自发行为，其实都是经过精心的设计，由GUI执行的对玩家的引导。正是这些引导，增加玩家的自信，帮助玩家攻克困难、使玩家感受不到时间的改变。最让人投入的忘我状态，必须有丰富的感官经验和强烈的认知参与，GUI的重要程度同游戏玩法，情节，美术外观表现，音乐一样，共同构成游戏完整内核。

四、游戏视觉设计（GUI）原则

①马洛斯需求层级理论

-功能性需求：可以使用

-可靠性需求：稳定，一致的操作体验

-实用性需求：好不好用，包容性高不高

-熟练度需求：其表现帮助玩家在游戏中做得更好

-创意需求：在满足以上需求后，设计本身与玩家产生的新的连接和有益探索

②基础框架搭建，流程的合理性——满足玩家功能性需求

在最初就要对整体GUI做定制化设计：基础框架搭建。这涉及到交互稿理解，功能性与实用性取舍。在明确游戏类型，目标用户以及项目未来预期后，需要确定基础美术风格，以最简练的包装表达交互目的。

③世界观架设——满足玩家可靠性需求和实用性需求

很多优秀游戏（《炉石传说》、《冰汽时代》）的GUI设计在游戏世界观架设上已经实现得很到位，使用元素与游戏背景故事以及主题相融合，动效节奏能够带动游戏主体基调，这时GUI已经融入进游戏，成为密不可分的完整体。（这也是优秀主机或独立游戏的最基本要求）玩家游戏过程中能够获得统一的游戏操作体验，界面衔接合理，反馈恰到好处，让玩家始终保持高度沉浸状态。

④操作创新+价值输出——满足玩家熟练度需求和创意需求

在游戏设计发展史上，会因为技术进步，设备更迭，玩家对新游戏类型的追求而阶段性的产生一些操作上的创新设计，例如最早期家用机外置操作键盘（任天堂），到pc的windows模式带来的鼠标热区UI设计，再到触屏手机带来的一系列新颖的技术，和目前新兴VR的全息操作模式。

配合以游戏故事性提升。在主题表达上，GUI通过情节引导，操作体感的配合，时间维度的加入等影响玩家意识从而引导游戏走向的方式，能够起到很好的价值输出的作用。

例如：《底特律-变人》的全局QTE设计，只在正常QTE操作中加入了等待时限，这个听起来不甚重要的设计，直接影响了玩家对选择的预判，以至于影响到游戏故事线走向。玩家会为自己仓促中所作的决定而带来的后果感到惋惜和后悔。这正切合了游戏主题：人类的局限性，AI与人类发展前途未知的悲喜结果，以及对人性的探讨。可以说GUI操作设计是整部游戏核心价值观的重要输出渠道。

（二）游戏视觉设计的制作流程

一、风格稿设计

①情绪板制作

敲黑板：设计风格稿前期制作情绪板，可以更高效的和产品沟通，打磨设计内容，同时能够更快捷，直观的向团队传达自己的设计灵感。

1）向产品索要关键词——客观时间地点，主观情绪词（有色彩倾向最好）；

2）大量搜图，拼接内容包括纹理、材质、插图、字体、色相；

3）简单制作情绪象限图，用色轴和时间做区分为上述素材划分区域，组成色彩组；

4）展示给团队，并进行选择，逐步精确范围，直到确定方向；

同时在这一步，我们可以寻找贯穿游戏的主题元素了，这将决定后续设计的方向。

②包装、界面类型选择

界面类型需要在初稿阶段一起敲定，这涉及到画面包装选择范围。

界面类型：

1）窗口

2）厚重

3）扁平

4）全屏

根据界面类型，确定包装强度以及形式，我们几乎用到的方法都是对现有客观世界进行模拟。只是不同游戏占比不同而已。

③初稿设计

输出简单，不完整的设计概念。这一步骤目的不是依照交互稿进行美术装填，而是GUI理解需求，这个时间是沟通关键设计点，并思考设计延展性，添加概念想法和改进表达方式的最佳时机。

二、界面设计

游戏的界面量很庞大，是GUI设计师主要的工作量。

①通用功能性界面

在初稿的设计中，我们都会优先制作通用功能界面，因为这是全部界面中，能够最完整表达包装概念的部分，设计师可以充分表达自己的想法。

1）窗口界面（比较有规律可循，目前针对窗口界面的布局创新不大，设计要求较小，满足世界观，选择适合的元素即可。）

2）全屏界面——仿窗口（和窗口设计布局方式类似，但是因为可以全屏展示，在气氛营造上可发挥的空间更多。需要注意的是配色层级和风格统一）

3）全屏界面——情景（对设计品质要求较高，优势是有极强的代入感，劣势是资源量大，相关延展制作难度大。）

②大厅界面、战斗界面

这基本是一款游戏曝光率最高的界面。

1）MMO仿端游的核心体验HUD（如:《一梦江湖》）;

2）树状结构的重包装全屏大厅界面（如:《阴阳师》）；

3）阶梯状结构注重快节奏功能集中化的大厅界面（如:《荒野行动》）；

4）角色创建界面、结算、活动等特殊功能界面（相对风格化较强的界面类型、其中角色创建界面是MMO类型游戏玩家最早操作的界面，特别适合培养玩家的好感）；

三、图标设计及应用

图标是GUI设计的另一大组成部分，是用图形指代游戏中绝大部分需要强调的功能和信息。

①设计原则

1）美化过的内容更容易增强记忆——图片比文字更容易记住。快速增强记忆点，正是游戏希望向玩家所传达的。

2）生活中充满类似、举例、象征、强制等图像特征的应用，经年累月，这已经成为现代人写入文化的，约定俗成的认知烙印，在设计中使用可以事半功倍。

3）游戏内的图标设计，是游戏风格传达的通道，在不同游戏中，我们有大量不同表现类型的优秀设计。

4）相应的文化规避：例如宗教，民族禁忌，版署规避等，避免出现在图标设计中。

5）在图标设计中注意造型饱满，明度饱和度统一，剪影简练识别性高，同一类型图标大小一致，倾斜角度一致，环境光源一致。

6）当图标造型并不规则时，我们需要采用一些对齐手法。

②按功能区分

1）系统功能图标；

2）角色技能图标；

3）消耗道具图标；

4）商城内售卖图标；

5）头像、头像框；

四、动效设计

动效是一部游戏中GUI语言重要的组成元素。以往GUI设计常常忽视了这一点，多数动效都作为附加效果添加在有限的特殊提示控件上。

①界面切换效果设计

界面的转场主要针对不同画面衔接方式，以及UI出现的表现形式。对于节奏把控要求较高。在设计转场时可以参考情节发展，做针对性设计。类似影视表现。（如《第五人格》进战推镜头流程，《LOL》转场流程。）

②控件操作反馈设计

我们对于玩家操作对应的反馈设计需要满足：反馈及时良好、节奏自然，作行为和对应结果的效果需要一致，这能很有效提高玩家感官经验。（例如《冰汽时代》里所有触控反馈和界面转场全部使用煤渣烟尘的扩散效果）

五、Logo、icon以及游戏衍生设计

①Logo设计

源于商业中的曝光效应，作为游戏重复度最高的商标元素，logo，icon应满足相对有趣的设计特征，用于放大玩家对产品的正面接受度，同时也要满足能够在短时间内易于识别的特征，便于短时，多次，多场合的宣传应用。

《刺客信条》系列logo 灵感来源自鹰头骨的底部视角

《天谕》logo使用文字+金属+图腾元素构成

②icon设计

作为智能机游戏专用入口图标，icon制作特征与logo要求接近，选用代表性图形或文字表达同时需要在智能机桌面合同类icon比对，识别更清晰。（Ios和安卓制作规格略有不同，公司有专门的icon加角标模板提供，设计时统一画布为1024px 72ppi尺寸方形无圆角。）

③官网、品牌相关宣传、周边店、周边等设计

每一部游戏应输出统一的视觉规范，可以在界面相关内容确定好后拾取关键视觉元素重复使用。

（《大话西游》天猫周边主页）

六、多语言制作注意事项

敲黑板：成功项目进军海外市场是必然形势，在项目初期铺量就要考虑到资源的本地化

1）系统字——首先在系统字体选择上，尽量选择通用性强，可支持多语言，不带有过强地域风格的字体。

2）美术字——非必要情况下尽量控制美术字素材的制作，这在日后都将成为本地化的工作量。

3）资源规范和整理—养成制作美术字资源后集中保存源文件习惯，根据相同字体进行分类，方便日后制作统计工作量。

4）版权——在本地化字体选择前，需要先和商务确认字体在目标国是否有版权，使用有公司购买过版权或免费商用字体。

5）输出规范——尺寸命名都与最初版本一致。

七、自我验证

设计师需要建立验证模型，从而检视设计作品是否易用以及合理，从而得出理想的设计。