游戏UI色彩设计研究

张晋

摘 要：游戏UI陪伴玩家游玩体验始末，但游戏UI的色彩设计却鲜有文献涉及。文章以填补游戏UI色彩设计的理论空白、为相关设计工作提供方法论指导为目的。运用理论、实践、案例研究法，文章对游戏UI的色彩设计进行了多层次多角度剖析。游戏UI的色彩设计既需要考察游戏的总体属性与具体内容，也需要分析玩家用户体验的视角，其对游戏总体属性考察，包含游戏总体视觉属性与游戏总体叙事属性两部分；其对游戏具体内容的考察，需以游戏场景的情景逻辑，将游戏UI分三类考量；其对玩家用户体验的考察，则宜以游戏UI的功能目标实现与情感目标实现两个角度考量。

关键词：游戏美术；UI设计；色彩设计；用户体验

Abstract： The game UI accompanies the player throughout the gaming experience， but there are few documents that cover the color design of the game UI. The purpose of this article is to fill the theoretical gap in the color design of the game UI and provide methodological guidance for related design work. Using theoretical， practical， and case studies， the article conducted a multi-level and multi-angle analysis of the color design of game UI. The color design of the game UI examines the overall attributes of the game， including two parts： the overall visual attributes of the game and the overall narrative attributes of the game； The specific content of the game needs to be examined by dividing the game UI into three categories based on the situational logic of the game scene； The evaluation of player user experience should be considered from two perspectives： achieving the functional goals and emotional goals of the game UI.

Keywords： Game art；UI design；color design；user experience

0 引言

游戲UI（用户界面）是游戏极其重要的组成部分，是玩家在游玩过程中最为频繁接触与互动的要素，对游戏体验发挥着至关重要的作用。游戏UI设计从人类感官角度出发，可主要分为视觉效果设计与听觉效果设计，而在视觉效果设计中，又包含对形态、色彩等要素的设计。游戏UI的色彩设计主要影响着UI的视觉效果，一个游戏UI的色彩设计得优秀与否，影响玩家游戏体验的方方面面。然而，游戏UI的色彩不是独立存在的，它与游戏的方方面面发生着“化学反应”，这意味着游戏的色彩设计应该综合考虑游戏的各个层面进行设计。游戏UI的色彩设计应该如何通过对游戏宏观属性、游戏具体内容与玩家游玩体验进行设计，文章将在下述分别展开讨论，以期总结出游戏UI色彩设计切实可行的方法论指导相关设计工作。

1 相关概念概述：UI与游戏的UI

UI，用户界面，承担着连接用户与机器之间桥梁的作用，沟通着机器与机器的使用者。自1959年美国学者B.Shackel发表被认为是人机界面第一篇论文的关于计算机控制台设计的人机工程学论文以来，UI设计从狭义的图形界面（GUI）设计发展至如今的广义的交互界面（UI）设计[1]，UI设计已然进入囊括工业设计、产品设计等诸多领域，游戏设计领域也不例外。著名游戏开发者Bill Volk曾写下等式“界面+产品要素=游戏”，足见UI设计在游戏设计中举足轻重的作用。

电子游戏，作为一种向玩家兜售虚拟体验的电子消费品，电子游戏的UI设计以提升玩家虚拟体验为要旨。游戏UI设计从可用与易用的功能性角度以及沉浸与喜悦的情感性角度入手，透过对UI的形态、色彩、文字、声效、语音等要素的设计，实现游戏UI能够真正服务于玩家游戏体验这一目标。

2 游戏UI的色彩设计

张译予在文章中指出：游戏UI设计包含交互设计与视觉界面设计，其视觉艺术元素在提升易用好用性、建立玩家情感联系与传递情感化人文关怀有着重要意义[2]。色彩作为其视觉艺术元素的重要一环对于游戏UI的意义不言而喻。游戏UI的色彩与游戏内容的其他要素关系紧密，游戏UI的色彩设计需要考察色彩之于游戏UI视觉效果的关系；而在更宏观的角度上来说，游戏UI的视觉效果设计也需要考察游戏UI视觉效果之于游戏整体设计的关联；在游戏本身之外，玩家作为游戏的主要消费者，游戏的设计也需要着眼他们的游戏体验。游戏UI的色彩设计不仅需要综合考虑较微观的游戏UI视觉效果，也需要考量较宏观游戏本身的属性以及玩家的游玩体验。下文将从“游戏总体属性”“游戏内容”“玩家用户体验”三个角度，从设计实践出发，对游戏UI的色彩设计进行详述。

2.1 游戏总体属性之于UI色彩设计

从游戏本身出发，游戏UI的色彩设计需要对游戏总体属性加以考量，这一属性既包含那些较为显见的总体视觉属性，也包含那些藏于视觉属性背后的总体叙事属性。

游戏的总体视觉属性，即游戏通过画面呈现出的整体的游戏内容，它一般体现为游戏的画面风格，准确来讲它是游戏的渲染风格。而游戏的总体叙事属性，则是那些通常由剧情或文案策划所敲定的，通过剧情、背景、设定等形式“藏”在游戏内容当中的叙事风格。二者分别以偏感性与偏理性的方式左右着游戏的UI色彩设计。

2.1.1 游戏总体视觉属性之于其UI色彩设计

游戏的总体视觉属性，主要是指游戏的渲染风格。不同类型、硬件等的游戏都会选择最适合自身的渲染风格，期望以最少的制作成本获得最好的游戏效果。电子游戏市场历经近一个世纪的积淀，渲染风格虽然一直在推陈出新，但仍保持着一种“总体上的惯性”。格调较为休闲的游戏，几乎总是习惯采用清新明快的风格化渲染；而主题倾向于严肃的，则更习惯于采用写实的渲染风格。这种惯性并不是绝对的，而所谓的风格化渲染与写实渲染也各有乾坤。用计算机图形学的术语来说，风格化渲染对应着非真实感渲染（Nonphotorealistic rendering），而写实渲染风格则对应着一种基于物理的渲染（Physically-Based Rendering）。我们可以将此二者作为一个一维坐标轴的两端，让游戏自然落到这两个端点之间的某处。毕竟比起完全遵循PBR或者NPR的游戏，更多的游戏是将混合二者使用以期获得效益的最大化。而从着色器本身的编程角度来说，PBR与NPR在很多地方也并不是那么泾渭分明。

从色彩的角度出发，PBR与NPR的视觉差异主要体现在色彩范围。PBR流程的游戏通常会花工夫追求材质的拟真与光照的拟真，这使得PBR游戏的色彩范围通常大于NPR的游戏。对于同一种材质，NPR游戏偏好简洁，而PBR则往往在各种类型的纹理贴图上不遗余力，这导致PBR材质往往比NPR材质带有更多变化，具有了更大的色彩范围。而对于光照，在NPR游戏里，即便是對于黑夜的光照也往往会选择明度不那么低的深蓝色光，而PBR对于强光照和零光照就往往大胆得多。材质与光照两个要素的叠加，导致了PBR相比NPR有着更大的色彩范围。对于偏PBR的游戏UI色彩设计来说，由于背景的色彩情况更加复杂，出于风格统一与UI凸显的考虑，其UI色彩更倾向于运用更广的色彩范围、更强烈的色彩对比，或是运用类似Photoshop中正片叠底的图层效果，通过UI色彩与游戏背景色彩相乘，来让UI始终与游戏画面拉开距离。而NPR游戏，虽然背景的色彩情况简单得多，UI的色彩不必在视觉凸显上花费很多心思，但由于这种风格化渲染往往整体上会呈现出一种色彩倾向——譬如类似《波西亚时光》《原神》的偏高饱和高明度的倾向，也要求设计师采用符合这一倾向的颜色去设计UI的色彩，以避免整体风格上的不和谐。

2.1.2 游戏总体叙事属性之于其UI色彩设计

UI也能“讲故事”，随着游戏UI的不断演进，具备一定叙事属性的UI层出不穷，不论是千禧年初《红色警戒2》充满工业风格的界面设计，还是《辐射4》里以真空管独特荧光绿为主色调的UI，都表明了游戏的设定、背景、剧情等叙述要素与UI设计的关联，游戏的总体叙事属性对UI的色彩设计发挥着重要作用。在一些时候，这种叙事并不是那么重要，尤其当游戏长处并不在叙事元素上的时候；但对于那些强调设定与剧情的游戏，特别是相关叙事元素往往牵扯着诸如“真空管朋克”“蒸汽朋克”这类具有显著美学特征的元素时，对于游戏总体叙事属性的考察往往变得尤为重要。

对于游戏总体叙事属性的考察，对于UI的色彩设计而言，需要的是考量叙事属性背后的那些美学元素，而后基于那些美学元素提取出一套色彩方案。以《辐射4》（图1）为例，该游戏的以核战后废土世界作为主要舞台，整体具有浓重冷战时期风格，因此游戏选择了冷战时期流行的真空荧光屏的荧光绿作为UI的主色调，并围绕此形成一整套真空管朋克式的配色方案，与游戏的背景相得益彰，极大提高了沉浸感。

2.2 游戏内容之于其UI色彩设计

所谓游戏的内容，是相对于游戏整体而言的。玩家在游戏中所处的场景、所互动的NPC（Non-player Character）、所观看的演出等等这些在游戏中具体呈现的内容都可以被归为此列。游戏内容的视角相较于游戏整体属性更窄但更具体，有益于指导某一特定的UI色彩设计而非UI整体的色彩风格。并且并非每一个UI都需要考虑到这些具体游戏内容的影响，不同类型的UI需要考虑的游戏内容之程度也有所不同。总体来说，按照UI设计所需要考虑的游戏内容之权重的多寡，游戏UI可被划分为三类。而在游戏UI色彩设计视域下的游戏内容，则宜以“游戏场景的情景逻辑”度之。

2.2.1 外界形式、跳出形式与场景形式

一个游戏UI在多大程度上需要考虑游戏的具体内容，很大程度上取决于游戏UI和游戏的这些内容的关联度如何，换言之：这取决于这些游戏UI与游戏世界本身的关联。这一关联越是紧密，UI的色彩设计便越是需要考虑游戏内容，反之则越不需要。根据这一联系的紧密程度，游戏UI可以大致分为三种形式：基本与游戏世界无关联的外界形式、与游戏世界存在有限关联的跳出形式，以及与游戏世界紧密相关的场景形式。

外界形式的游戏UI是指那些基本不会与游戏世界一同出现的UI，最显而易见的例子便是游戏的启动界面。对于游戏的启动界面而言，通常的做法是使用图片、视频或是三维场景作为背景，玩家进行具体游玩活动的游戏世界并不会出现在背景当中。也许有一些使用了类似游戏世界的三维场景的启动界面看起来像是把游戏世界放到了启动界面的背景中，然而这些三维场景虽然与游戏世界保持着视觉上的一致性，但根本上来说并非游戏世界，并且它们被制作出来的目的也是让界面UI更加美观，而非让界面UI去通过设计来与它保持一致。这些完全不在游戏世界“五行之内”的外界形式UI在色彩设计，对游戏内容的考察上自然有着最大的自由度。

在外界形式之后是跳出形式的UI，它们虽然与游戏世界一同出现在屏幕，但并不作为游戏世界的一部分，而是作为玩家角色的一部分，跟随玩家的视野（镜头）。它们是屏幕下缘的那些体力条、物品栏、屏幕上缘的小地图，以及按下Esc键弹出的小菜单等。对于这些UI的设计虽然也要考虑游戏世界的色彩属性，但通常是从整体的角度加以考量。游戏世界中那些特定的场景与细节对于这一类UI来说并没有那么重要。

最后是场景形式的UI，这也是最需要考量游戏内容的UI。这一类UI绑定于游戏世界的某一场景、情景或物体，附着于某一游戏物体而存在。玩家通常只能在特定情景中才能看见它们。由于与这一类UI发生“视觉化学反应”的主要是与他们相绑定场景、情景或物体，对这一类UI的色彩设计并不强调考察游戏的整体属性，而更强调考量相关的游戏内容——那些与UI相绑定的情景、场景以及相关细节。

2.2.2 游戏场景的情景逻辑

对于一个特定的游戏场景的设计，为了让场景中各个元素融洽和谐、相得益彰，设计师不仅需要从感性的角度去考量各元素的视觉美，更需要从理性的角度去考察各元素是否合乎逻辑地设计、摆放于场景当中。譬如在一个特定的沙漠场景中，情景逻辑就决定了此处应当出现动物的骸骨、沙丘而不是雪松树；白沙漠场景中覆盖动物骸骨的沙子就应是白色而非红色的。这便是游戏场景的情景逻辑，它要求设计师从该场景的属性出发，推导出场景中各个元素的属性，在此基础上的美学设计才能让各个元素和谐统一。

与游戏特定场景相关性越高的UI，就越可以视为该场景的某一元素，就越需要从场景本身属性出发，通过场景逻辑组织其设计，色彩设计自然不例外。设计师需要遵循场景逻辑找到符合该UI的色彩方案，以令其配色能够融入到该场景之中，再以美学角度加以调整，应用于UI设计当中。例如游戏《神界原罪2》（图2）对搜刮拾取框界面的设计，该游戏对不同的搜刮对象（箱子、尸体、骷髅等）都分别进行了设计（普通风格、血腥风格、骷髅风格等）；对于这些UI设计，通过情景逻辑考察其所依附物体的属性就不可谓不重要。

2.3 玩家用户体验之于游戏UI色彩设计

对于用户体验的定义，最具影响力的是ISO 9241-210给出的定义：人们对于针对使用或期望使用的产品、系统或者服务的所有反应和结果。它指出用户体验是用户与产品交互过程中产生的，包括用户的心理感觉、肢体感觉以及用户体验为用户所带来的结果，体验结果主要是用户的感知和反应，包括情绪和生理反应等[3]。游戏作为一种电子消费品，以向玩家提供优良的游戏体验为标的，玩家通过耗费精力、时间与金钱在游戏上，通过游戏体验获取精神愉悦。因此，对玩家的游戏体验（用户体验）的设计对于游戏设计而言具有十分重要的意义。而游戏UI的色彩设计作为游戏设计的一环，也有必要从玩家用户体验角度出发规划色彩，以实现UI的功能与情感目标。

2.3.1 基于玩家体验的UI功能目标色彩实现

游戏UI应当具备协助玩家完成游戏中各类游戏任务的功能。这些游戏任务小到角色的移动，大到贯穿游戏的整条主线剧情任务的完成，贯穿玩家游玩始终。刘飞在其相关著作中对于用户体验提出了用户体验的四个维度：稳定性、可用性、易用性、超预期[4]。游戏UI作为协助玩家完成此类游戏任务的重要工具，至少需要让玩家能够完成相应的游戏任务，即具备足够的稳定性与可用性，并在此基础上实现UI的易用性，这便是游戏UI的功能目标。UI功能目标的实现是UI用户体验的基石，毕竟如果游戏UI都糟糕到了完全没有办法玩下去，其UI的美学设计再出色也于事无补。

从色彩设计的角度上讲，游戏UI的色彩首先应当实现其可用性。所谓可用性包含诸多层面，譬如UI的区分度是否足够高、UI是否足够清晰、UI的设计是否能让玩家意识到其各个组件的对应功能等等。其次，游戏UI应当具备易用性与稳定性，前者意味着尽可能减少UI的理解成本与使用成本；而后者意味着UI应当具备足够的程序稳定性与纠错手段。基于这些要求，游戏UI的色彩设计需要考虑其用色与游戏画面的区别度与和谐度、需要考虑各个组件的用色能否简洁明了地向玩家传递信息而非制造困惑等。举例来说，玩家对HP（体力值）的色彩认知通常是红色与绿色；对于MP（法力值）的色彩认知通常是蓝色，如果调换二者，便会为玩家正确理解UI的使用方式造成理解障碍，影响UI的可用性。

2.3.2 基于玩家体验的UI情感目标色彩实现

玩家在体验游戏的过程中，游戏UI作为时刻陪伴玩家的要素，对玩家在游戏中的情感起落有着重要的影响，而色彩在这中间扮演着关键的角色。不论是打出暴击时饱满闪亮的伤害数值的颜色，还是玩家陷入危机时的全屏偏红或偏黑效果，如果缺少恰当的色彩设计，这些UI所带来的惊喜或紧张感都会大打折扣。

在设计这类会给予玩家强烈心理反馈的UI时，需要搭配色彩心理学相关知识，结合玩家游玩的具体情景进行设计。结合UI触发时的玩家游玩情景，设计师宜从色彩心理要素在艺术设计中的色彩感知、色彩联想、色彩象征、色彩情感、色彩偏好五个部分[5]进行具体分析，以指定最能够有效调度玩家情绪的UI色彩。举例而言，视觉上刺激剧烈、且具备死亡象征的血红色与深黑色几乎是玩家角色低体力值时制作全屏效果或体力条效果时的不二之选；而暴击数值的色彩也基本是高亮度暖色的，因其在心理层面所能给予的刺激感与欢快感要远超那些低亮度或冷色的色彩。

3 结语

在游戏UI的设计中，其色彩设计既需要对游戏的宏观与微观层面加以考察，也需要对玩家的用户体验加以考察。在游戏的宏观层面，游戏UI的色彩设计应当与游戏的宏观属性相契合，它包括与游戏总体视觉属性的和谐与游戏总体叙事属性的统一；在游戏的微观层面，游戏UI的色彩设计应当基于游戏场景的情景逻辑，将游戏UI划分为外界形式、跳出形式、场景形式分别考量。而对于玩家的用户体验，游戏UI的色彩设计则宜通过游戏UI功能目标的实现与情感目标的实现两个角度加以考量。

4 参考文献

[1]刘春花.基于用户体验的界面设计（UI）研究[D].天津：天津工业大学，2008.

[2]张译予.游戏UI设计中视觉艺术元素的构成[J].西部皮革，2021， 43（15）：96-97.

[3]丁一，郭伏，胡名彩.用戶体验国内外研究综述[J].工业工程与管理，2014，19（04）：92-97.

[4]刘飞.产品思维[M].北京：中信出版集团，2019.

[5]段殳.色彩心理学与艺术设计[D].南京：东南大学，2007.