视觉设计方法

学习委员

2022-08-059565次浏览

4评论

216收藏

57点赞

分享

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

1)定义风格

在开始一款游戏的视觉设计之前,不建议急匆匆地开始进行相关的设计,而要先进行相关的风格调研,了解游戏的类型、世界观以及美术风格。

(定义风格)

A.游戏类型

在设计一款界面的时候,首先需要了解这是什么类型的游戏。不同的游戏类型,所需要的界面内容是不同的,表现形式也是不同的,需要根据游戏的玩法来配合设计方便玩家操作的界面。

例如在游戏玩法分类中,有MMO,ARPG,MOBA,沙盒等多种。MMO的界面数量在游戏中会非常多,所以在设计的时候通常需要注意公共控件的易用性和延展性。在MOBA游戏类中界面数量较少,主要是在选择英雄及战斗HUD界面的板块做一个清晰地展示。

以下列出的为常见的游戏类型:

RPG ( Role-Playing Game ) 角色扮演游戏 
​ARPG (Action RPG)   动作角色扮演游戏
​SRPG (Simulation RPG) 模拟角色扮演游戏
​MMORPG 大型多人在线角色扮演游戏 就是我们常见的网络游戏了
​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/RCG (Racing Game) 赛车类竞速游戏

(游戏类型)

B.世界观

每一个游戏都有自己独特的世界观。世界观是游戏中世界的样子,处于什么时期什么背景,生存规则等,在这个世界发生的一切是玩家会了解和经历的故事。世界观包括:世界架构、地图、阵营势力。英雄甚至是游戏道具等都会包含其中。

了解世界观,即了解的是世界背景、人物设定、数值力量均衡体系、主线故事。世界观的构架会让玩家在游戏中身临其境的感知,是引导玩家深入体验的前菜。例如:《魔兽世界》的世界观,是一个恢宏大气的长篇史诗故事。丰富的剧情和角色背景故事的设定,让玩家在游戏中的情感切入非常深。甚至在生活中也分联盟和部落两大阵营。

(《第五人格》探索真相)

《一梦江湖》月色下的盗圣)

C.美术风格

在了解游戏类型玩法及世界观故事后,大概的设计蓝图已经描绘完毕,下面就是进行美术风格结合统一的步骤。美术风格作为GUI视觉表现中最重要的环节,直接影响整体玩家对游戏的沉浸感及游戏的统一完整性体验。那么,我们来了解下目前游戏的美术风格都是从哪些维度来设计的。

游戏用户划分

不同的玩家对游戏的偏好是不同的,在硬核玩家类,美术风格设计会偏沉浸感,更多的是写实质感的风格。在休闲类玩家群体中,轻松明快的界面设计是他们的首选。其次,男生与女生的审美也是不同的,在设计精准玩家群体的时候需要划分不同的风格

(男生爱玩的《终结者2:审判日》)
(女性玩家众多的《阴阳师》)

美术角色及场景的设定

在设计界面视觉的时候,需要参考角色的风格绘制,例如角色的造型设计色彩设计及质感设计,根据美术的特征提取核心的代表元素来进行创作。比如《一梦江湖》中楚留香的角色为写实淡雅中国风,相搭配的界面也是同样的冷色国风系。

《一梦江湖》的角色风格/界面风格)
(《猎魂觉醒》的角色风格/界面风格)

游戏引擎实现效果相关

早期由于游戏引擎的受限,游戏内的场景角色模型等显示效果受限。为了弥补游戏的精致度,会在界面的绘制上做相应的重质感设计。所以早期的游戏界面几乎无一例外都是注重边框的精致绘制。近年来,游戏发展势头较好,引擎的更新开发,越来越多的功能及效果可以实现。

(《梦幻西游》/《危机2015》引擎效果对比)

2)风格设计

为了更精准地设计出和美术风格匹配度高的界面,还要进行设计表达的创作。游戏界面的设计由色彩、造型、质感三点来构成。

A.色彩

色彩在游戏界面设计中,对游戏情绪的影响及引导体验上是最直观的。同时色彩可以提升游戏的品牌识别度,对于品牌推广非常重要。

通过既有美术风格特色提炼,例如《一梦江湖》色彩是月下朦胧水墨风格,通过提取色彩来确定主色地板和辅助引导色;

《一梦江湖》颜色提炼)

通过色彩搭配表达性格

a)单色:单色配色方案的最佳之处,在于搭配一起是有保证的,因为颜色合适彼此,都来自于同一个色相。
优点:有效加强IP感,品牌化、序列化;
难点:容易单一化;
游戏类型:单机、应用、超现实游戏;
(《终结者2:审判日》单色界面)
b)相似色:使用色轮中彼此相邻的颜色,比如红色和橙色、黄色,或者蓝色、绿色等。
优点:适用性强、无限制、主次层级区分;
难点:饱和度及明暗度需要区分;
游戏类型:写实Q版界面色彩过渡 。
(《大话西游》相似色界面)
c)分裂互补色:选取一个颜色后,在期互补色的两侧寻找辅色,可以搭配出更加有趣的效果。
优点:光感冷暖丰富,界面具有呼吸感;
难点:界面层级;
适用范围:根据需要突出界面或者控件。
(《猫和老鼠》分裂互补色界面)

B.造型

造型,是我们通过塑造物体的特有形象或创造可视的形象来表达想法和反映文化的方法。在游戏视觉设计中,造型总会需要重点、优先处理的。制作或处理材料,赋予其好的外观,不仅帮助玩家去理解他们的所见,也让玩家理解所见对于他们而言意味着什么。在游戏界面的设计中,合适有趣的造型可以给玩家极强的共鸣和认同感。

界面造型主要由点、线、面构成,而点、线、面的排列组合又能构成千变万化的造型,我们大脑在处理各种各样造型的同时,也在试图通过识别形状的外轮廓来确定其含义。而这些形状我们可以将其分为两种,几何形体和有机形体。

几何形体

形状的轮廓如果是有规律的,便可视为几何形体。几何形给人以非自然、人为创造的感受,所以在设计中如果大量应用几何形体,则无一例外会给人产生人造,或是产生精确感和经过分析的感觉。

(《荒野行动》海外版界面通过面和线性的划分让整体造型沉稳厚重,适合此类军事题材的游戏风格表现)

有机形体

有机形体则指那些没有规律的,复杂多样且千变万化的形状。这类形状的特点便是随机性较强,其传达给人的感受更为自然和真实。通过这些有机形体的使用可以让游戏界面有更强的现实感。

(《第五人格》loading界面无规律多样化的裂痕用手随意擦拭的痕迹给人现实的感受)
 

C.质感

游戏界面的质感是根据游戏美术风格相辅相成的。从扁平到重度写实风格,需要根据游戏环境决定。可以按下图的维度来进行划分:

(游戏质感划分)
(《格罗亚传奇》扁平写实质感)
(《光明大陆》写实厚重质感)
(《永远的七日之都》扁平二次元)
(《猫和老鼠》Q版重质感)
以上就是游戏设计的重要因素。通过具有情感导向的色彩,符合游戏特点的造型及质感设计,打造出符合游戏美术风格的一款游戏界面。这些细节打磨出一个高品质的游戏,让玩家更轻松地体验到游戏的乐趣,这才是一个游戏设计者的乐趣。
 
 

插入一段衔接的文字定义了界面风格之后,就可以开始具体的界面布局设计,好的界面设计不仅需要科学的规划和计算,同时也需要充满创意的形式感。

1)网格系统

在游戏界面设计中通过构建网格系统来设计,我们发现能更快地解决设计中的问题,并让设计更具功能性、逻辑性和视觉美感。那到底什么是网格系统?简单的来说,将一个平面等分成更小的单元格,然后对他们设置间距,这就是网格系统。网格系统对于界面设计具有以下作用:

A.规划界面布局

例如战斗界面承载了大量的功能入口、玩家操作的按钮以及各种关键信息的显示,内容非常多。凭空设计难度很大,很难把控这种信息和操作按钮的尺寸位置,而且缺乏说服力。基于网格系统来规划这些信息的尺寸、布局、排版,让设计更有说服力。

《一梦江湖》主界面网格系统进行布局)
(《猎魂觉醒》登陆页网格系统进行布局)

B.规划界面、控件尺寸,形成规范

我们通过网格系统的支撑,来规划一级界面、二级界面、三级界面的尺寸,这样整个游戏的界面体系都基于网格系统来搭建,让整个游戏的界面体系更统一规范。

(《Fury Road》风格稿规划)

C.规范字间距、行间距处理信息排版

大量的信息排版时,字间距行间距可以通过网格系统来规划处理内容的信息层级,也可以通过网格系统来划分区块,快速地得到多种布局方案的可能性。

《一梦江湖》字间距/行间距的处理)

网格系统作为一种辅助设计手段,在排版布局和处理大量信息层级的时候非常有用,但是在一些特殊界面需要突破设计或者重新破局的时候,要警惕不要被网格系统的数理关系限制住思维,该破则破,灵活运用。

2)形式感

通过个人意识的梳理,对画面元素特性的提炼、选取与构成,来传达出全新的视觉感受。形式感包含的内容很广泛,包括比例、构成、表现形式、画面节奏等。

A.形式感的作用

a)加强用户认知
相同或重复的内容大量充斥在我们生活之中,想要玩家更快的认知到产品,便需要更为独特的设计,强烈的形式感画面能给玩家更强的记忆性和联想性。
b)视觉引导
通过不同的形式变化不仅可以让信息的内容有主有次,让玩家能快速查看设计师想传达的重要信息,还会给人强烈对比的美感和舒适的感受。
c)强调个性化
游戏中个性化的内容是区别与其它游戏不同的核心。对个性的强调能让设计在种种内容中脱颖而出,强烈的形式感可增强我们设计的个性,让玩家能有更强的认同感。
(《一梦江湖》交游界面)

B.如何增强形式感

a)现实中找灵感
现实的物体总能给人一定的感官印象,通过对这些物体的处理,可以给玩家呈现不同的感观:如物品整齐的摆放给人内敛和秩序的感受,而将其刻意散乱的摆放给人随性自然的感受。通过现实物体对人们产生的不同心理来进行设计会让形式更符合想表达的内容。
(《秘宝猎人》个人执照界面)
b)形状构成
不同的形状给人不同的心理感受,圆形圆润、方形稳重、三角形尖锐,不规则形状给人不稳定性,通过这些形状的应用可以创造无限可能。例如,下图中不同形状的变化与组合,让整体设计有更强的二次元感受。
(《永远的七日之都》活动界面)
c)简化
保留设计的核心,简化无关的装饰可以增强重点信息的展示,不让次要的信息或装饰过多干扰到核心信息的表现,最大限度突出核心内容增强记忆性。
(《叛逆性百万亚瑟王》世界BOSS界面)
d)残缺与联想
偶尔的残缺和局部的设计,可以将设计内容更强地表达给玩家。除了能让设计变的更有特点外,也能让人更多的去联想留白部分的内容。如下图中燃烧到一半的纸张和限时的概念结合,让人产生活动即将结束的感受。
(《魂之幻影》活动界面)

形式感的设计让游戏的界面充满更多特色和创新。当然,这些形式都要符合游戏所要传达给玩家的感受,形式的使用只有和游戏的世界观相结合才能发挥其最强的特性。

图标是具有指代意义和标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。图标相比于文字,具有以下优缺点:

优点——代替文字,形式比文字直观,提高可用性;比文字漂亮,提升视觉效果;

缺点——含义表达上,不如文字直接;

1)图标分类

A.用途分类

按照图标的用途,图标可以分为功能图标、道具图标、技能图标、头像图标、启动图标等。

功能图标

功能图标是游戏界面中可以产生交互功能(如点按、长按等手势操作)的图标,如菜单图标、带指向性的功能入口图标等。

(《阴阳师》系统入口图标)

道具图标

道具图标包含消耗品、物品、装备、武器和任务道具等,用于展示游戏内道具的缩略图示信息,帮助玩家在游戏世界观中产生联想与共鸣。

(《终结者2:审判日》时装道具图标)

技能图标

技能图标主要是游戏角色的技能示意图。其设计方式需要与技能表现形式或描述内容保持一致,便于玩家在激烈的操作中依旧能够快速地判断该图标所传达的技能含义。

(《一梦江湖》主界面右下角的技能图标)

头像图标

头像图标用于展示角色或怪物或宠物等单位的缩略信息,能在游戏内较快速地定位到该单位的基本特征。

(头像图标)

启动图标

启动图标是玩家在平台端口(手机、PC或其他平台)第一眼能接收到一个游戏的信息。通过点击它可以进入相应的游戏世界。

(启动图标)

B.风格分类

按照图标的风格,图标分为Q版&写实、扁平&拟物,或者国风、欧风、科幻、二次元、军事等。

(各种风格的图标)

C.绘制手法分类

按照图标的绘制手法,图标可分为矢量图标和手绘图标。

(矢量图标/手绘图标)

2)图标设计

图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。图标设计遵循以下三个原则,即可用性、美观性和原创性。

重点说明可用性,可用性是图标非常重要的一个属性。失去了可用性,再漂亮的图标也失去了在游戏功能中的存在地位。通常我们可以用以下几个常用原则去判定一个图标的可用性好与坏,即易识别、直观、差异化以及统一。

(优秀的图标)

A.绘制技巧

a)创意——源于生活、优秀作品;
b)细节——加上一些细节就是优秀的图标;
c)整体——这就是一套图标。
(图标的大体绘制过程)

B.常见问题

当绘制完图标后,可以通过问自己以下问题来避免踩坑:

a)无明显差异化,太相似、难辨识?
b)一个图标,太多元素,或加入不必要元素?
c)不够统一?
d)过度设计,表意不足?
e)大图精致,小图糊出天际?
f)有放到手机里看过了么?

C.图标规范

在一个游戏中,图标往往不是单独出现的,而是大量的、一套一套的,因此需要设定一些规范来统一游戏内的图标,让其保持一致性。

a)同一功能图标
风格统一;
尺寸统一(视觉区域大小、内容感知区域等);
样式统一(角度、光源、描边等);
(同一功能图标)
b)不同功能图标
样式和尺寸可以不相同,但在整体游戏风格上要统一和谐。
 
👇推荐阅读👇

评论 (4)

0/1000
网易游学APP
为热爱赋能
扫描二维码下载APP