
1.1 游戏界面的分类与特点
众多的硬件平台和各个平台用户不同的游戏背景建构、游戏玩法,使游戏界面的设计方式和设计风格多种多样。设计一款游戏的界面时,需要明确其用户和风格定位,以迎合市场需求。
1.1.1 按游戏背景划分
游戏背景指的是一款游戏所构建的游戏世界。游戏所讲述的故事、所呈现的画面,以及所体现的人物和玩法都因为游戏背景建构的存在才具备合理性。
市面上的游戏风格有很多,大致可以划分为5种,分别为魔幻风格、科技风格、东方风格、休闲风格和二次元风格。
提示
本书中关于游戏的类型划分相对比较简单。而实际上,每款游戏都并非只涉及一种题材。在游戏背景建构越来越复杂的当下,单纯依靠某个题材并不能完整地表现游戏的风格与特点,需要用多个题材综合表现。
☉魔幻风格
魔幻风格的游戏界面设计结合了中世纪欧洲和幻想的一些元素,如盔甲、城堡、骑士、羊皮纸、哥特字体、魔法、吸血鬼等,整体给人以奇幻的感受,细分下来有厚重、扁平等不同类型。

盔甲

城堡

厚重风格

扁平风格
☉科技风格
科技风格的游戏界面设计常应用在带有高科技、未来感等元素的游戏中,细分下来有科幻、赛博朋克等不同类型。该类风格的游戏界面设计以现实为基础,并在具体设计中融入了很多超现实的元素,如细密的线条、数据流、代码、荧光等,给人新奇、有趣的感受。

《风暴英雄》的战斗界面

《王牌猎手》的主界面

《圣歌》的战斗界面
而加入的这些超现实元素的灵感则来源于我们日常所见到的一些事物,如老式显像管电视的纹理、舞台上的激光灯照射效果、建筑蓝图、蜂巢、昆虫复眼、集成电路板及服务器设备等。

老式显像管电视的纹理

舞台上的激光灯照射效果

建筑蓝图

蜂巢

昆虫复眼

集成电路板

服务器设备
☉东方风格
东方风格的游戏界面细分下来有中国风、和风及中国式和风这3种类型。同时,这些类型的界面有着一些共用的视觉元素,并且伴随着不同地域行业的不同有着完全不同的发展路径。
早期的中国风游戏界面出现在一些武侠单机游戏中,如《侠客英雄传xp》《轩辕剑叁外传:天之痕》等。这些游戏的界面设计特点是像素化,并且常用一些边角花纹、面板底纹及卷轴等元素来强调中国风的特点。

《侠客英雄传xp》人物详情界面

《轩辕剑叁外传:天之痕》装备界面
随着时间的推移,中国风游戏界面在细节设计上的效果变得更加丰富了,并且运用的材质也更为复杂,如木材、生铁等材质。

《仙剑奇侠传》(DOS版)战斗界面
在网游时代开启之后,也出现了一批国产网络游戏,色彩以淡雅为主,颜色与质感的对比较强,且题材多样。常见的国产网络游戏题材有金庸题材、三国题材、西游题材、创新IP题材、网络文学IP衍生的玄幻题材,以及部分经典文学衍生的魔幻题材等。

《大话西游Online》剧情对话界面

《梦幻西游》主场景界面
手游时代的到来给武侠游戏市场造成了非常大的冲击,也彻底释放了武侠游戏的品类与市场规模。同时,从界面设计风格上来说,手游的特殊操作环境也对手机游戏界面设计提出了新的要求。与传统游戏时代不同的是,手游时代的武侠类游戏的界面设计都比较追求轻量化。

《大话西游手游版》聊天界面

《大话西游手游版》地图弹窗界面
和风游戏界面被赋予了日本文化独有的魅力,其特征极其明显,通常是一些悲观、激愤及热血的题材。在具体设计中,常见的元素有炫光、水墨、3D及书法字体等,以表现其质感和一些特有的情感化效果。

《街霸5》战斗界面

《仁王》任务完成界面
中国式和风游戏的界面设计是在传统武侠风格的基础上做的进一步进化,并且持续吸收外来文化元素,进行着一轮又一轮的创新。常见的元素有平直线条、动漫人物、折纸、樱花、日式建筑、木头、折扇、纸伞、卷轴及云纹等,并且这些元素在运用过程中大多都呈现为干净利落的效果。

《天下乂天下》主场景界面

《仙剑奇侠传幻璃镜》图鉴界面

《飞刀又见飞刀》图鉴界面
提示
综上所述,我们可以感受到,如果将这些典型的中国元素和日式元素放在一起,并不能很轻松地对两者做出区分。但假设我们能明确日式元素的特征,就很好区分了。日式元素的特征包括3个方面。第一,擅长使用苍劲、有张力的毛笔字体。这些字体或笔画刚劲有力,或线条粗大,或辅以鲜亮的配色,给人一种“大声喧哗”的感受。第二,对水墨的理解更刻板。这一点是相对于中式水墨中体现出的“飘逸”“灵动”的气质而言的。日式的水墨很少会给人空灵、通透的感受,更多给人以细致的感受。第三,特殊的日式纹理和元素的使用,如和服、樱花及浮世绘等。
☉休闲风格
休闲风格的游戏主要面向低龄及女性人群。这种风格的界面设计大部分都偏轻松和可爱。在平日里,我们也习惯将这类风格所表现出的设计风格称为可爱风格、卡通风格(具体划分包括日韩卡通风格和美式卡通风格)或Q萌风格。
休闲风格的游戏界面整体呈现出色调明快、细节概括、造型圆润及块面区分明显的设计特点,给玩家轻松、愉悦和有趣的感受。

《开心消消乐》网页版界面

《LINE POP2》游戏界面 《汤姆猫跑酷》游戏界面
人在视觉上对某一类美术元素是有刻板印象的,这也是特定的美术元素可以代表特定的情感化元素的根本原因。可爱或卡通的情感化美术元素的产生,正是与人们对“可爱”这个情感因素产生强联系的美术元素所留下的刻板印象有关。
提示
人对“可爱”的认知大部分来自幼年的人和其他哺乳动物。而与这些因素相关的图形或美术元素会固化地影响人们对“可爱”的认知。利用类似于关联了这些因素或具有这些因素表现特征的美术元素,就可以准确地表现出可爱风格。

各个年龄段的人的头身对比图

幼年的猫
☉二次元风格
二次元风格的游戏是近几年来比较火的一种游戏类型。从界面风格上讲,它并没有严格意义上且单一维度上的定义。无论是什么风格的游戏界面,其本质都是为游戏所要表现的内容服务的。在国内二次元包含的内容已经不仅限于其原生国日本所指代的那些文化现象。综合目前市面上大部分二次元游戏的界面风格,我们可以从两个层面来对这个风格进行深入的了解与认识。
从广义上讲,二次元是二维世界的虚拟存在。从这个意义上讲,所有使用了二维作画方式或用三维方式去实现二维视觉风格的美术化表现都可以被称为二次元风格。从狭义上讲,二次元风格仅指日式二次元的中国化风格,即由日式二次元游戏的国内代理和模仿日式二次元风格的国内游戏所构成的一个集合。
在实际的游戏界面设计工作中,我们所提到的二次元概念大多指的是狭义概念的二次元,即中国化的ACG。ACG这个名称取自动画(Animation)、漫画(Comic)与游戏(Game)的英文首字母。

二次元风格的游戏界面设计受日式动画和漫画的影响很大。日式二次元游戏的界面是所有游戏里较为特殊的一种。日式漫画的复原、偏好使用纯度高的颜色、不是很讲究颜色的搭配、大面积使用细碎的花纹装饰、冲击力十足的界面打击动效(包含街机游戏界面设计特征)、聒噪的游戏配音及虚拟少女偶像都是二次元风格游戏的特点。

《龙珠战士Z》战前队伍调整界面

《龙珠战士Z》战斗界面

《Lovelive!学园偶像祭》主界面
同时,在ACG风格上目前还衍生出中国二次元风格的游戏界面设计。其具体风格的表现与日式二次元有相似之处,但也有所不同,主要区别在于中国风元素的融入。

《阴阳师》主场景界面

《Fate/Grand Order》卡牌强化界面

《阴阳师》战前加载界面
1.1.2 按美术风格划分
当前市场中出现的主流风格大部分是迭代后出现的新美术风格,包括了前面提到的饱含年代风格的其他美术风格。如果将这些游戏界面按照美术风格来进行划分,可分为像素风格、水晶风格、写实风格和扁平风格。
☉像素风格
像素风格来源于早期的街机的操作系统界面风格。在硬件性能提升之后,人们普遍放弃使用这种风格,取而代之的是更能增强技术能力和美术表现的风格。但到如今,像素风格依然被保留并运用到部分游戏界面的设计中。之所以会出现这样的情况,原因有:(1)像素风格具有特定的年代感;(2)清晰的像素点使得像素风格对细节有一种神奇的表现效果;(3)像素风格的运用在硬件损耗方面可以说是一种低成本但表现力较强的设计方式,会被很多独立游戏团队选择。

《Eastward》游戏界面
☉水晶风格
与像素风格一样,水晶风格是一种有年代感的游戏界面设计风格。在硬件性能刚刚开始突飞猛进的时代,广大设计师在设计游戏界面时都注重质感的表现,又或许是人们对水晶质感有着天生的好感,也就导致了在一段时间内水晶质感极为盛行。在早期的iOS操作系统中,对于界面和图标的设计也是极尽所能,可以说做到了当时界面设计在质感表现上的极限。微软的操作系统也在Windows 7时代对毛玻璃效果的刻画做到了惊人的视觉表现。但是在后续的产品中,设计师们意识到界面质感的提升并不是产品体验提升最关键的部分,最关键的部分在于信息传达的表现和轻快的操作体验,这也就催生了扁平化的设计风潮,且这一风潮延续至今。但是这并不意味着水晶质感的设计退出了历史舞台。与像素风格一样,水晶风格凭借着一定的特殊性,目前不仅被保留了下来,还发展成为一种较流行的设计风格。之所以会出现这样的情况,原因有:(1)大多数人对于亮晶晶的物体似乎有着天生的偏好;(2)很多游戏的界面为了满足特定的质感需求而选定了水晶质感,以此来体现高贵的调性;(3)水晶质感对人的吸引这一特性会被用来作为界面中特殊位置的元素,以此来达到引起用户关注的目的。

《大航海时代》交易界面
☉写实风格
写实风格是游戏界面中最为常见的一种美术风格。它的特点主要表现为较重的质感、立体化的形体展示和多样的材质表现。这些特点对于表现游戏特有的情感化氛围有着非常重要的作用。因此,在一些质感厚重、游戏背景建构复杂的游戏(如魔幻题材类游戏和早期的中国风题材类游戏等)中使用这种风格进行界面设计再合适不过了。

魔幻题材游戏《炉石传说》写实化界面

中国风题材游戏《大唐无双》写实化界面
☉扁平风格
所谓扁平风格,是指舍弃一切3D元素(如阴影、纹理及透视等)的设计风格。扁平风格是继水晶质感之后的一种流行设计风格。它和其他流行的设计元素一样,几乎均来自印刷品和传统艺术。其设计特点是简洁高效且富有现代感,一般采用网格作为设计基础,无论是字体、插图、照片还是标志,都被规范地安排在这个网格框架中,同时大量采用非衬线字体,满足了人们屏幕阅读的需求,成为目前较流行的游戏界面设计风格之一。
扁平风格的游戏界面设计整体呈现出简洁的特点,在科技感题材、中国风题材及二次元题材的游戏中使用较多,在欧美游戏中使用更甚。之所以会出现这样的情况,原因有:(1)无论是科技感题材、中国风题材的游戏,还是二次元题材的游戏,其所要表现的游戏背景建构都存在一致性;(2)扁平化的游戏界面设计面向的游戏玩家已经进入了对游戏内核体验的阶段,而非初级玩家对游戏玩法内核之外的内容体验的阶段。

《混乱特工》任务界面

《超级马里奥奥德赛》换装界面
提示
扁平化的设计思想源流中有比较重要的一个流派,那就是包豪斯设计。包豪斯为德国的一所艺术设计类大学,由建筑师瓦尔特·格罗皮乌斯(Walter Gropius)在1919年创立于德国魏玛。它对建筑设计的影响比较深远。“除去所有繁复的形式,设计只需要满足基本功能”,这种设计思维是将设计完全归于功能化的一种思维方式,与现代的扁平化、简约化设计思想有着极其多的相似之处。