一个游戏界面风格的诞生不仅需要视觉设计师的创意,也需要视觉设计师在前期投入大量的精力去了解项目的背景,这样才能设计出一套符合游戏世界观与风格的界面,增加玩家的代入感与沉浸感。
在设计一款界面的时候,首先需要了解这是什么类型的游戏。不同的游戏类型,所需要的界面内容是不同的,表现形式也是不同的,需要根据游戏的玩法来配合设计方便玩家操作的界面。
例如在游戏玩法分类中,有MMO,ARPG,MOBA,沙盒等多种。MMO的界面数量在游戏中会非常多,所以在设计的时候通常需要注意公共控件的易用性和延展性。在MOBA游戏类中界面数量较少,主要是在选择英雄及战斗HUD界面的板块做一个清晰地展示。
以下列出的为常见的游戏类型:
RPG(Role-PlayingGame)角色扮演游戏ARPG(ActionRPG)动作角色扮演游戏SRPG(SimulationRPG)模拟角色扮演游戏MMORPG大型多人在线角色扮演游戏就是我们常见的网络游戏了AVG(AdventureGame)冒险游戏AAVG(ActionAVG)动作冒险游戏ACT(Action)动作类游戏STG(ShootingGame)射击游戏FPS(FirstPersonShooting)第一人称射击游戏FTG(FightingGame)格斗游戏SLG(StrategyGame)战略游戏RTS(Real-TimeStrategyGame)即时战略游戏RAC/RCG(RacingGame)赛车类竞速游戏
每一个游戏都有自己独特的世界观。世界观是游戏中世界的样子,处于什么时期什么背景,生存规则等,在这个世界发生的一切是玩家会了解和经历的故事。世界观包括:世界架构、地图、阵营势力。英雄甚至是游戏道具等都会包含其中。
了解世界观,即了解的是世界背景、人物设定、数值力量均衡体系、主线故事。世界观的构架会让玩家在游戏中身临其境的感知,是引导玩家深入体验的前菜。例如:《魔兽世界》的世界观,是一个恢宏大气的长篇史诗故事。丰富的剧情和角色背景故事的设定,让玩家在游戏中的情感切入非常深。甚至在生活中也分联盟和部落两大阵营。
(《第五人格》探索真相)
在了解游戏类型玩法及世界观故事后,大概的设计蓝图已经描绘完毕,下面就是进行美术风格结合统一的步骤。美术风格作为GUI视觉表现中最重要的环节,直接影响整体玩家对游戏的沉浸感及游戏的统一完整性体验。那么,我们来了解下目前游戏的美术风格都是从哪些维度来设计的。
游戏用户划分
不同的玩家对游戏的偏好是不同的,在硬核玩家类,美术风格设计会偏沉浸感,更多的是写实质感的风格。在休闲类玩家群体中,轻松明快的界面设计是他们的首选。其次,男生与女生的审美也是不同的,在设计精准玩家群体的时候需要划分不同的风格。
美术角色及场景的设定
在设计界面视觉的时候,需要参考角色的风格绘制,例如角色的造型设计色彩设计及质感设计,根据美术的特征提取核心的代表元素来进行创作。比如《一梦江湖》中楚留香的角色为写实淡雅中国风,相搭配的界面也是同样的冷色国风系。
早期由于游戏引擎的受限,游戏内的场景角色模型等显示效果受限。为了弥补游戏的精致度,会在界面的绘制上做相应的重质感设计。所以早期的游戏界面几乎无一例外都是注重边框的精致绘制。近年来,游戏发展势头较好,引擎的更新开发,越来越多的功能及效果可以实现。
为了更精准地设计出和美术风格匹配度高的界面,还要进行设计表达的创作。游戏界面的设计由色彩、造型、质感三点来构成。
色彩在游戏界面设计中,对游戏情绪的影响及引导体验上是最直观的。同时色彩可以提升游戏的品牌识别度,对于品牌推广非常重要。
通过既有美术风格特色提炼,例如《一梦江湖》色彩是月下朦胧水墨风格,通过提取色彩来确定主色地板和辅助引导色;
通过色彩搭配表达性格
造型,是我们通过塑造物体的特有形象或创造可视的形象来表达想法和反映文化的方法。在游戏视觉设计中,造型总会需要重点、优先处理的。制作或处理材料,赋予其好的外观,不仅帮助玩家去理解他们的所见,也让玩家理解所见对于他们而言意味着什么。在游戏界面的设计中,合适有趣的造型可以给玩家极强的共鸣和认同感。
界面造型主要由点、线、面构成,而点、线、面的排列组合又能构成千变万化的造型,我们大脑在处理各种各样造型的同时,也在试图通过识别形状的外轮廓来确定其含义。而这些形状我们可以将其分为两种,几何形体和有机形体。
几何形体
形状的轮廓如果是有规律的,便可视为几何形体。几何形给人以非自然、人为创造的感受,所以在设计中如果大量应用几何形体,则无一例外会给人产生人造,或是产生精确感和经过分析的感觉。
有机形体
有机形体则指那些没有规律的,复杂多样且千变万化的形状。这类形状的特点便是随机性较强,其传达给人的感受更为自然和真实。通过这些有机形体的使用可以让游戏界面有更强的现实感。
游戏界面的质感是根据游戏美术风格相辅相成的。从扁平到重度写实风格,需要根据游戏环境决定。可以按下图的维度来进行划分:
插入一段衔接的文字定义了界面风格之后,就可以开始具体的界面布局设计,好的界面设计不仅需要科学的规划和计算,同时也需要充满创意的形式感。
在游戏界面设计中通过构建网格系统来设计,我们发现能更快地解决设计中的问题,并让设计更具功能性、逻辑性和视觉美感。那到底什么是网格系统?简单的来说,将一个平面等分成更小的单元格,然后对他们设置间距,这就是网格系统。网格系统对于界面设计具有以下作用:
例如战斗界面承载了大量的功能入口、玩家操作的按钮以及各种关键信息的显示,内容非常多。凭空设计难度很大,很难把控这种信息和操作按钮的尺寸位置,而且缺乏说服力。基于网格系统来规划这些信息的尺寸、布局、排版,让设计更有说服力。
我们通过网格系统的支撑,来规划一级界面、二级界面、三级界面的尺寸,这样整个游戏的界面体系都基于网格系统来搭建,让整个游戏的界面体系更统一规范。
大量的信息排版时,字间距行间距可以通过网格系统来规划处理内容的信息层级,也可以通过网格系统来划分区块,快速地得到多种布局方案的可能性。
网格系统作为一种辅助设计手段,在排版布局和处理大量信息层级的时候非常有用,但是在一些特殊界面需要突破设计或者重新破局的时候,要警惕不要被网格系统的数理关系限制住思维,该破则破,灵活运用。
通过个人意识的梳理,对画面元素特性的提炼、选取与构成,来传达出全新的视觉感受。形式感包含的内容很广泛,包括比例、构成、表现形式、画面节奏等。
形式感的设计让游戏的界面充满更多特色和创新。当然,这些形式都要符合游戏所要传达给玩家的感受,形式的使用只有和游戏的世界观相结合才能发挥其最强的特性。
图标是具有指代意义和标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。图标相比于文字,具有以下优缺点:
优点——代替文字,形式比文字直观,提高可用性;比文字漂亮,提升视觉效果;
缺点——含义表达上,不如文字直接;
按照图标的用途,图标可以分为功能图标、道具图标、技能图标、头像图标、启动图标等。
功能图标
功能图标是游戏界面中可以产生交互功能(如点按、长按等手势操作)的图标,如菜单图标、带指向性的功能入口图标等。
道具图标
道具图标包含消耗品、物品、装备、武器和任务道具等,用于展示游戏内道具的缩略图示信息,帮助玩家在游戏世界观中产生联想与共鸣。
技能图标
技能图标主要是游戏角色的技能示意图。其设计方式需要与技能表现形式或描述内容保持一致,便于玩家在激烈的操作中依旧能够快速地判断该图标所传达的技能含义。
头像图标
头像图标用于展示角色或怪物或宠物等单位的缩略信息,能在游戏内较快速地定位到该单位的基本特征。
启动图标
启动图标是玩家在平台端口(手机、PC或其他平台)第一眼能接收到一个游戏的信息。通过点击它可以进入相应的游戏世界。
按照图标的风格,图标分为Q版&写实、扁平&拟物,或者国风、欧风、科幻、二次元、军事等。
按照图标的绘制手法,图标可分为矢量图标和手绘图标。
图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。图标设计遵循以下三个原则,即可用性、美观性和原创性。
重点说明可用性,可用性是图标非常重要的一个属性。失去了可用性,再漂亮的图标也失去了在游戏功能中的存在地位。通常我们可以用以下几个常用原则去判定一个图标的可用性好与坏,即易识别、直观、差异化以及统一。
当绘制完图标后,可以通过问自己以下问题来避免踩坑:
在一个游戏中,图标往往不是单独出现的,而是大量的、一套一套的,因此需要设定一些规范来统一游戏内的图标,让其保持一致性。