视觉设计方法网易游学

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

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

例如在游戏玩法分类中,有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版&写实、扁平&拟物,或者国风、欧风、科幻、二次元、军事等。

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

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

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

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

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

THE END
1.UI基础界面图标规范图标绘制规范,一文看...来自阿多比设计UI基础|界面图标规范图标绘制规范,一文看懂! 好的图标设计不仅仅是美化界面的元素,也是传递信息、增强交互体验的重要工具,更是一个设计师专业力的体现。 整理了6条图标设计规范,在日常设计中灵活运用,...https://weibo.com/6500079170/P1uasklgd
2.视觉设计方法大放送——3分钟了解图标设计按照图标的绘制手法,图标可分为矢量图标和手绘图标。 矢量图标/手绘图标 图标设计 图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。 图标设计遵循以下三个原则,即可用性、美观性和原创性。 https://www.gameres.com/847710.html
3.一篇文章,带你看懂功能图标设计!Halo,这里是设计夹,今天分享的是「功能图标设计」。 本文将详细介绍功能图标在现代软件和应用程序界面设计中的定义、作用、种类、设计原则、设计方法和注意事项等方面的内容。 功能图标作为界面设计的基础组成部分,其设计和使用对于提高用户的效率、体验和满意度具有重要作用。 https://www.niaogebiji.com/article-666120-1.html
4.Qt绘图指南:掌握高效美观的GUI设计之道QPainter是Qt框架中用于在绘图设备(如QWidget、QPixmap、QImage等)上进行绘图的类。它提供了丰富的绘制方法,如绘制直线、矩形、椭圆、多边形等。QPainter还提供了绘制文本、图像、路径等功能。在进行绘制操作时,QPainter会考虑当前的状态,如坐标变换、裁剪区域、画笔、画刷等。 https://developer.aliyun.com/article/1463725
5.你应该知道的65个设计术语10 个基本设计术语 什么是构图? 构图,也称为布局,是创建完整图像的设计元素的视觉排列。在一个作品中,您可以使用不同的设计原则来创建视觉上令人愉悦的作品,以提供功能性布局。 什么是设计中的平衡? 放置在页面上的任何元素都具有视觉权重,可能会受到形式、大小、颜色和纹理的影响。为了使布局平衡,某些元素可能需要...https://www.szfangwei.cn/news/6524.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在深入探讨如何绘制Icon之前,我想先和大家聊聊Icon的基础知识。Icon,即图标,是界面中用于表示功能、文件、程序或命令等视觉元素的图形符号。它们虽小,却承载着巨大的信息量,是用户与界面交互的重要桥梁。 1、Icon的设计原则 设计Icon时,应遵循简洁明了、易于识别、色彩搭配和谐等原则。简洁的线条和形状,能让Icon在众多...https://www.batmanit.cn/blog/k/52326.html
4.「设计方法」UI工作流程指南(一)设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。 三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
5.制图实训报告(20篇)本实训的目的在于把握AutoCAD用于工程制图的基本操作,了解工程图纸绘制的格式和要求,工程图样绘制和阅读工程图样的原理和方法,培养形象思维能力,要求我们能够用AutoCAD绘制二维的工程图纸,理论和实践紧密结合,通过《机械制图课程设计》做了一套工程图样的操作实例。 目的与任务: 1、了解工程图纸的一般要求和格式并绘制平面工...https://www.ruiwen.com/shixunbaogao/7300946.html
6.icon的设计原则有哪些在设计图标时,有一些基本原则需要遵循。首先,图标应该简洁而明确,能够清晰地传达出所代表的概念或功能。其次,图标应该具有一定的普遍性,以便于不同文化背景和语言环境的人们都能理解和使用。此外,在设计过程中还应注意细节,并确保图标与相关文字的配合协调。在选择图标元素时,建议优先考虑自然界中已有的形状和形式。这...https://wap.zol.com.cn/ask/details_20545874_2787619_3.html
7.阿里云设计语言:打造云计算设计领域的语言体系MySecretRainbow在计算设计语言引领下,阿里云图标以极简的几何形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何空间内完成。 所有二维图标应绘制在相应大小的基础方形网格框架上,轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。 http://www.mysecretrainbow.com/blog/22653.html
8.人机交互2交互设计的原则与方法SpriCoder的技术博客交互设计的原则与方法 交互设计中的问题 尽量减少用户需要记忆的部分 缺乏反馈 1. 目标Goal vs. 意图Intention 单个目标可对应多个意图 举例:删除文档中的部分内容的目标 意图1:通过编辑菜单删除 意图2:通过删除按钮删除 每个意图可包含一系列活动 2. EEC模型 ...https://blog.51cto.com/u_16038001/6159133
9.个人实训总结通用15篇在绘制图形是时,仅仅绘制好的图形还不能看什么来,也不足以传达足够的设计信息。 只有把尺寸标住标在自己的图形上面,就会让看图者一目了然,CAD提供的尺寸标注功能可以表达物体的真实大小,确定相互位置关系使看图者能方便快捷地以一定格式创建符合行业或项目标准的标注。 https://www.unjs.com/fanwenwang/gerenzongjie/20230423182512_6935637.html
10.图标设计的三个小原则还有个问题要点一下大家:就是在设计图标的过程中,我全程都是用矢量工具绘制,然后做布尔运算,再用锚点去调整。如果用钢笔去勾可以是可以,但是如果水平不够高,曲线就会不协调。 差异性 设计一套图标时,要尽量放大图标之间的差异性,减弱图标之间的相似性,这是最容易被设计师忽略的一项原则,往往为了保持视觉风格的统一...https://www.jianshu.com/p/3bfc7b221a74
11.PhotoshopUI交互设计张晨起著第2章 图标设计 352.1 了解图标设计 362.1.1 什么是图标 362.1.2 图标设计的作用 362.1.3 图标设计的意义 362.2 图标设计的绘制原则 362.3 Photoshop图层的基本操作 412.3.1 新建图层 412.3.2 选择图层 422.3.3 复制、移动图层 422.3.4 重命名图层、删除图层 442.4 画笔工具 502.4.1 预设画笔工具 52...http://product.m.dangdang.com/detail1378434003-22159-1.html?main_pid=0
12.借“助农”软件产品设计,育爱党前端开发人才——《UI设计应用》课程思政典型...课前,通过任务单让学生了解疫情中外卖小哥;课中,将抗疫精神、规则意识、工匠精神、中国优秀传统文化等融入教学,通过感人外卖小哥视频导入,强调抗疫精神,引出教学任务;讲解设计原则中,体现规则意识;讲解设计方法中传导工匠精神和文化自信;图标绘制创作中传导创新精神和精益求精的工匠精神;课后,通过助农网图标的制作进一步...http://www.gxzjy.com/ztlj/kcszjxyjsfzx/cases/202208/t20220816_112426.html