硬核干货:认识游戏视觉设计,从理论武装到实操角色扮演游戏冒险游戏rpg

②大厅界面:一些游戏会有常驻信息的大厅界面,通常集合了游戏绝大部分的功能和玩法入口。

(《终结者2》大厅界面)

③服务器界面:游戏里会存在多个服务器对玩家进行分流,而服务器界面就是承载这个功能的。通常可以在服务器界面看到多个服务器列表,包含每个服务器的状态。

(《非人学园》服务器界面)

④核心玩法界面(HUD):玩家主要操作的界面,界面上功能的类型和多少,依据不同游戏类型略有不同。

(《明日之后》HUD界面)

⑤系统功能界面:针对游戏玩法的各个不同系统所对应的功能界面,常见的有角色界面、装备界面、背包界面、宠物界面、任务查看界面、图鉴界面、创建角色界面、抽卡界面等。不同游戏因为世界观和主题的不同,以及玩法类型的不同,相同功能的系统名称也会有相应的不同包装。

(《猎魂觉醒》背包界面)

(《决战平安京》匹配界面)

⑥结算界面:通常是一局对决或一轮游戏玩法的结束,一般包含“胜利”或“失败”、“SABCD”等类似结果判定性提示,以及结果信息。(重点在于营造正向反馈的气氛,弱化负面反馈)

(《一梦江湖》结算界面)

⑦活动界面:通常对氛围的营造要求更贴合活动主题,并且与游戏其他界面的风格保持一致。属于游戏界面中的特殊界面,也是视觉设计师发挥空间最大的界面。

(《终结者2》活动界面)

二、了解游戏视觉设计风格

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

①游戏类型:不同的游戏类型,所需要的界面内容是不同的,表现形式也是不同。以下为常见的游戏类型:

RPG(Role-PlayingGame)-角色扮演游戏

ARPG(ActionRPG)-动作角色扮演游戏

SRPG(SimulationRPG)-模拟角色扮演游戏

MMORPG(MassiveMuti-playerOnlineRPG)-多人在线角色扮演游戏

AVG(AdventureGame)-冒险游戏

AAVG(ActionAVG)-动作冒险游戏

ACT(Action)-动作类游戏

STG(ShootingGame)-射击游戏

FPS(FirstPersonShooting)-第一人称射击游戏

FTG(FightingGame)-格斗游戏

SLG(StrategyGame)-战略游戏

RTS(Real-TimeStrategyGame)-即时战略游戏

RAC(RacingGame)-赛车类竞速游戏

②世界观:每一个游戏都有自己独特的世界观,世界观是游戏中世界的样子,处于什么时期什么背景,生存规则等,在这个世界发生的一切是玩家会了解和经历的故事

世界观包括:世界构架、地图、阵营势力,英雄甚至是游戏道具都会包含其中。了解世界观即了解的是世界背景、人物设定、数值力量均衡体系、主线故事。世界观的架构会让玩家在游戏中身临其境的感知,是引导玩家深入体验的前菜。

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

(《神都夜行录》中国妖怪)

③美术风格:作为视觉设计表现中最重要的环节,直接影响整体玩家对游戏的沉浸感及游戏的统一完整性体验。【点击了解“美术风格”详情】

三、了解游戏视觉在游戏中的作用

①桥梁

纵观每年世界顶级游戏厂商的新作,我们可以发现游戏所承载的精神力量已经远远不止于提供娱乐这么简单。在对世界的认知,历史追溯,人性反思这些方面,许多优秀游戏作品都已经给出了不弱于文学,音乐,影视的惊喜。例如:《P5》真实还原城市,《刺客信条》还原历史事件,《底特律》AI发展中人性的思考等。这都让世界对游戏有了新的认识,同时更坚定了游戏从业者有更高追求的信心。

不同于人对大多数艺术形式的接受习惯——视、听,游戏在这基础上增加了——操作体验。这就增加了用户接受作品新的维度。交互就是这一维度的最直接体现。

②感性与理性的化身

③舒适和自尊

四、游戏视觉设计(GUI)原则

①马洛斯需求层级理论

-功能性需求:可以使用

-可靠性需求:稳定,一致的操作体验

-实用性需求:好不好用,包容性高不高

-熟练度需求:其表现帮助玩家在游戏中做得更好

-创意需求:在满足以上需求后,设计本身与玩家产生的新的连接和有益探索

②基础框架搭建,流程的合理性——满足玩家功能性需求

在最初就要对整体GUI做定制化设计:基础框架搭建。这涉及到交互稿理解,功能性与实用性取舍。在明确游戏类型,目标用户以及项目未来预期后,需要确定基础美术风格,以最简练的包装表达交互目的。

③世界观架设——满足玩家可靠性需求和实用性需求

很多优秀游戏(《炉石传说》、《冰汽时代》)的GUI设计在游戏世界观架设上已经实现得很到位,使用元素与游戏背景故事以及主题相融合,动效节奏能够带动游戏主体基调,这时GUI已经融入进游戏,成为密不可分的完整体。(这也是优秀主机或独立游戏的最基本要求)玩家游戏过程中能够获得统一的游戏操作体验,界面衔接合理,反馈恰到好处,让玩家始终保持高度沉浸状态。

④操作创新+价值输出——满足玩家熟练度需求和创意需求

在游戏设计发展史上,会因为技术进步,设备更迭,玩家对新游戏类型的追求而阶段性的产生一些操作上的创新设计,例如最早期家用机外置操作键盘(任天堂),到pc的windows模式带来的鼠标热区UI设计,再到触屏手机带来的一系列新颖的技术,和目前新兴VR的全息操作模式。

例如:《底特律-变人》的全局QTE设计,只在正常QTE操作中加入了等待时限,这个听起来不甚重要的设计,直接影响了玩家对选择的预判,以至于影响到游戏故事线走向。玩家会为自己仓促中所作的决定而带来的后果感到惋惜和后悔。这正切合了游戏主题:人类的局限性,AI与人类发展前途未知的悲喜结果,以及对人性的探讨。可以说GUI操作设计是整部游戏核心价值观的重要输出渠道。

(二)游戏视觉设计的制作流程

一、风格稿设计

①情绪板制作

敲黑板:设计风格稿前期制作情绪板,可以更高效的和产品沟通,打磨设计内容,同时能够更快捷,直观的向团队传达自己的设计灵感。

2)大量搜图,拼接内容包括纹理、材质、插图、字体、色相;

4)展示给团队,并进行选择,逐步精确范围,直到确定方向;

同时在这一步,我们可以寻找贯穿游戏的主题元素了,这将决定后续设计的方向。

②包装、界面类型选择

界面类型需要在初稿阶段一起敲定,这涉及到画面包装选择范围。

界面类型:

1)窗口

2)厚重

3)扁平

4)全屏

根据界面类型,确定包装强度以及形式,我们几乎用到的方法都是对现有客观世界进行模拟。只是不同游戏占比不同而已。

③初稿设计

二、界面设计

游戏的界面量很庞大,是GUI设计师主要的工作量。

①通用功能性界面

在初稿的设计中,我们都会优先制作通用功能界面,因为这是全部界面中,能够最完整表达包装概念的部分,设计师可以充分表达自己的想法。

1)窗口界面(比较有规律可循,目前针对窗口界面的布局创新不大,设计要求较小,满足世界观,选择适合的元素即可。)

2)全屏界面——仿窗口(和窗口设计布局方式类似,但是因为可以全屏展示,在气氛营造上可发挥的空间更多。需要注意的是配色层级和风格统一)

②大厅界面、战斗界面

这基本是一款游戏曝光率最高的界面。

1)MMO仿端游的核心体验HUD(如:《一梦江湖》);

2)树状结构的重包装全屏大厅界面(如:《阴阳师》);

3)阶梯状结构注重快节奏功能集中化的大厅界面(如:《荒野行动》);

4)角色创建界面、结算、活动等特殊功能界面(相对风格化较强的界面类型、其中角色创建界面是MMO类型游戏玩家最早操作的界面,特别适合培养玩家的好感);

三、图标设计及应用

图标是GUI设计的另一大组成部分,是用图形指代游戏中绝大部分需要强调的功能和信息。

①设计原则

1)美化过的内容更容易增强记忆——图片比文字更容易记住。快速增强记忆点,正是游戏希望向玩家所传达的。

2)生活中充满类似、举例、象征、强制等图像特征的应用,经年累月,这已经成为现代人写入文化的,约定俗成的认知烙印,在设计中使用可以事半功倍。

3)游戏内的图标设计,是游戏风格传达的通道,在不同游戏中,我们有大量不同表现类型的优秀设计。

4)相应的文化规避:例如宗教,民族禁忌,版署规避等,避免出现在图标设计中。

5)在图标设计中注意造型饱满,明度饱和度统一,剪影简练识别性高,同一类型图标大小一致,倾斜角度一致,环境光源一致。

6)当图标造型并不规则时,我们需要采用一些对齐手法。

②按功能区分

1)系统功能图标;

2)角色技能图标;

3)消耗道具图标;

4)商城内售卖图标;

5)头像、头像框;

四、动效设计

动效是一部游戏中GUI语言重要的组成元素。以往GUI设计常常忽视了这一点,多数动效都作为附加效果添加在有限的特殊提示控件上。

①界面切换效果设计

界面的转场主要针对不同画面衔接方式,以及UI出现的表现形式。对于节奏把控要求较高。在设计转场时可以参考情节发展,做针对性设计。类似影视表现。(如《第五人格》进战推镜头流程,《LOL》转场流程。)

②控件操作反馈设计

我们对于玩家操作对应的反馈设计需要满足:反馈及时良好、节奏自然,作行为和对应结果的效果需要一致,这能很有效提高玩家感官经验。(例如《冰汽时代》里所有触控反馈和界面转场全部使用煤渣烟尘的扩散效果)

五、Logo、icon以及游戏衍生设计

①Logo设计

《天谕》logo使用文字+金属+图腾元素构成

②icon设计

作为智能机游戏专用入口图标,icon制作特征与logo要求接近,选用代表性图形或文字表达同时需要在智能机桌面合同类icon比对,识别更清晰。(Ios和安卓制作规格略有不同,公司有专门的icon加角标模板提供,设计时统一画布为1024px72ppi尺寸方形无圆角。)

(《大话西游》天猫周边主页)

六、多语言制作注意事项

敲黑板:成功项目进军海外市场是必然形势,在项目初期铺量就要考虑到资源的本地化

1)系统字——首先在系统字体选择上,尽量选择通用性强,可支持多语言,不带有过强地域风格的字体。

2)美术字——非必要情况下尽量控制美术字素材的制作,这在日后都将成为本地化的工作量。

3)资源规范和整理—养成制作美术字资源后集中保存源文件习惯,根据相同字体进行分类,方便日后制作统计工作量。

5)输出规范——尺寸命名都与最初版本一致。

七、自我验证

设计师需要建立验证模型,从而检视设计作品是否易用以及合理,从而得出理想的设计。

THE END
1.可爱宠物海报设计图片大全熊猫办公精心为用户挑选26张高清精美宠物海报图片、支持专业级宠物海报设计素材下载,更多风格的宠物海报,免抠元素,卡通手绘素材图片、图标图案、免抠矢量图,尽在熊猫办公。https://www.tukuppt.com/speciall/chongwuhaibao7838.html
2.学习广告设计宠物品牌形象设计衍果创意设计 9255文章 0总阅读 查看TA的文章> 评论 0 分享 微信分享 新浪微博 QQ空间 复制链接 扫码打开 手机搜狐网 无需下载APP 精彩内容随时看【学习广告设计】宠物品牌形象设计 2024-11-07 15:42 发布于:湖北省 返回搜狐,查看更多平台声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息...https://www.sohu.com/a/824080663_120076109
3.素材中国网站地图精彩移动应用图标设计 商务文件封套设计 有趣的婚礼请柬 新潮名片欣赏 创意名片设计 国外卡片设计集锦 经典名片精选 平面设计精选 国外优秀平面设计 国外拓印花纹名片设计 个性名片欣赏 婚礼请柬设计欣赏 陈幼坚-品牌设计 独特的名片设计 国外优秀名片欣赏 商务名片 平面设计作品集 漂亮的外国名片设计 漂亮背景的名片欣...http://online.sccnn.com/
4.一个关于宠物护理App的界面设计——毕业论文.docx毕业设计题目:一个关于宠物护理App的界面设计学生姓名:学号:所在院(系):文化创意与传播学院专业名称:数字媒体技术届别:指导教师:职称(学位):淮南师范学院教务处印制目录1项目概述32项目分析32.1背景分析32.2用户分析32.3竞品分析43项目设计63.1设计思路63.2产品线框图73.3设计要求84项目详细设计94.1界面风格设计94.2图标展示...https://max.book118.com/html/2018/0608/171571252.shtm
5.宠物LOGOLOGO设计宠物爱好者图标标志矢量图免费下载广告设计 狗头标志设计矢量模板。 具有黑色色彩的人脸狗图标 VIP 广告设计 宠物店、兽医诊所和动物收容所的矢量标识设计.矢量标志与猫和狗.宠物店图标. 免费 广告设计 一只带着敞着笔记本电脑的猫正在素描,猫的耳朵从它伸出来 VIP 广告设计 简单线条艺术,单行本,猫狗标志设计图例.宠物店、宠物店、宠物医院标志图标 ...https://m.58pic.com/newpic/70622689.html
6.宠物图标图片宠物图标素材宠物图标图片下载视觉中国为您找到17318个原创宠物图标素材图片,包括宠物图标图片,宠物图标插画,宠物图标模板,宠物图标元素,宠物图标图标等源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于宠物图标素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺https://www.vcg.com/creative-image/508970
7.宠物icon素材宠物icon图片元素觅元素是设计素材的免费下载网站,提供宠物icon素材,宠物icon图片,宠物icon免抠素材设计元素,宠物iconpng图片透明背景等素材免费下载。https://www.51yuansu.com/tupian/chongwuicon.html
8.宠物友好圆形矢量图标徽章标志图片商业图片VEER图片库提供宠物友好圆形矢量图标徽章标志图片购买下载服务,2亿+高清商业图片,正版图片购买下载一站服务,另提供标签图片,兽医图片,符号图片,计算机图标图片,矢量图片,爪子图片,品牌名称图片,标志图片,猫图片,宠物图片,动物身体部位图片,保险图片,健康生活方式图片,绘https://www.veer.com/illustration/402574091
9.宠物用品图标图片宠物用品图标素材宠物用品图标模板免费下载六图网为您提供宠物用品图标设计作品免费下载服务,您还可以找到宠物用品图标图片、宠物用品图标素材、宠物用品图标模板等设计素材,我们为您提供宠物用品图标图片下载,宠物用品图标模板下载、宠物用品图标素材下载等服务!https://www.16pic.com/sucai/3908764.html
10.网页设计交互设计icon图标设计优图网:专业提供优质设计模板素材图库,包括web网页,网页插图,icon图标,线框原型,展示模板下载,减少设计师75%办公加班时间。http://www.uppsd.com/categorys-106.html
1....卡通小狗logo设计撸狗logo标志狗粮宠物logo标志萌宠logo标志nip...本作品使用AI技术生成,仅供网友学习交流,未经书面授权,请勿作他用。若您的权利被侵害,请联系copyright@nipic.com。 相关搜索 小狗插画logo 小狗图案标志设计 沙皮狗logo 小狗形象logo 小狗logo标志 卡通狗logo标志 卡通小狗logo设计 撸狗logo标志 狗粮宠物logo标志 萌宠logo标志 相关...https://www.nipic.com/show/48637290.html
2.宠物用品宠物专题模板宠物用品宠物图片素材下载上一页 12345678 … 500 下一页 共500页 到第 确定 没搜到满意的结果?去提交需求 我图网宠物用品宠物专题为您整理了30284个原创高质量宠物用品宠物图片素材供您在线下载,有JPG/PNG/PSD分层/TIF不分层/AI/CDR等格式,红色/黄色/蓝色/绿色/黑色/白色等颜色宠物用品宠物供您筛选。 热门...https://so.ooopic.com/sousuo/54849207/
3.LOGO赏析小狗和小猫的爱情!LOGO 赏析|小狗和小猫的爱情! LOGO 创作实例!https://www.jianshu.com/p/14372d8fa048
4.《100件让你惊叹的智能创意产品设计》这是一款可以挂接在任何眼镜上的相机,并且用户只需要眨眼就能控制相机拍照的智能硬件,依靠特殊设计的传感器,相机可以区分人类自然的眨眼动作和故意眨眼动作的区别 5.宠物自动喂食器 下面多新奇介绍的是一款基于智能手机app控制的智能宠物喂食器,适用于所有猫咪和中小型狗狗。App可一键设置WIFI,远程自定义喂食,实时远程观看...https://www.jbairui.net/shejibaokan/13930.html
5.设计分析宠物app图标设计说明首页的设计很人性化。顶部展示用户的头像和昵称,还有联系客服的图标。客服图标在首页就可以找的的APP很少见。首页中间的位置涵盖了这个APP的主要功能。目的也是为了更快的找到自己所需要的功能。增强用户体验。所以才显得人性化。 第三个是一个微信小程序。名叫奈尔商城。这个APP的市场前景很好,是美妆电商的,目前国内...https://blog.csdn.net/qq_44883796/article/details/91356355
6.狗宠物高清壁纸,可爱舌头项圈造型,精选4K超清3840x2160图片下载...图标素材 按钮素材 企业网站模板 商城网站模板 个人网站模板 专题模板 后台模板 响应式模板 高清图片素材 查看全部 扁平/简约 商务/科技 文艺/清新 卡通/手绘 质感/纹理 摄影/风景 电商/狂欢 复古/中国风 另类/其他 免扣透明素材 查看全部 漂浮元素 装饰元素 ...https://www.moyublog.com/hdwallpapers/40741.html
7.宠物店图标欣赏LOGO设计欣赏LOGO800收集整理国内外优秀LOGO标志设计案例,为您提供宠物店图标欣赏LOGO设计参考、宠物店图标欣赏LOGO标志欣赏https://logo800.cn/logosheji-79778.html
8.宠物图标素材免费宠物图标图片宠物图标下载宠物图标设计网站为设计师提供了多种类型的宠物图标素材,例如电商类宠物图标素材,医疗类宠物图标素材等。网站提供的宠物图标素材均支持设计师免费使用,设计师访问宠物图标设计网站后还可以将网站内的宠物图标素材下载保存到本地使用。https://js.design/special/resource-tag/pet-icon.html
9.宠物狗轮廓图标集集合中的设计。照顾小狗矢量符号股票web插图...摄图新视界提供宠物狗轮廓图标集集合中的设计。照顾小狗矢量符号股票 web 插图图片下载,另有矢量,图,设计,设置,隔离,设备,金属,标志,动物,护理,宠物,行走,哺乳动物,符号,图标图片搜索供您浏览下载,每张图片均有版权可放心商用,您正在浏览的图片为0po0vshttps://xsj.699pic.com/tupian/0po0vs.html
10.ICONS矢量现代线条设计风格宠物狗类雪纳瑞贵宾犬猎犬牧羊犬...你喜欢可爱的狗狗吗?今天为大家推荐一套狗狗图标合集。各种宠物狗收藏。拳击手,达尔马提亚狗,猎犬,贵宾犬,杜宾犬,巨型雪纳瑞犬,牧羊犬,莱卡,沙哑,沙哑,灵缇,牧羊犬,德国mast犬。ZIP包括:可编辑ICONS | 矢量现代线条设计风格宠物狗类雪纳瑞贵宾犬猎犬牧羊犬莱https://sskoo.cn/ggtbhj/
11.幼儿园问候歌教案(精选11篇)2.情感迁移:如果你最爱最爱的亲人、朋友或者宠物死了你想让她去哪里。 (教学策略:教师在充分考虑每个幼儿发展水平、能力、经验、学习方式等方面的个体差异的前提下,了符合幼儿兴趣需要、具有个体适宜性的阅读材料,去暗示幼儿,让每个幼儿都能运用自己所学的知识在经验中形成自己的认识。绘本材料是无声的,它能给幼儿...https://www.ruiwen.com/jiaoan/2864855.html
12.萌死不偿命!日系Q版动漫风格网游《狩龙战纪》评测游戏全面评测而当那些中意可爱造型的女孩子们看到这Q版、蠢萌的画风时,她们脆弱的小心灵早就“融化”了! “卡哇伊”的人物设计 游戏为了凸显冒险的刺激,特意将怪物制作的稍微霸气了点,但视乎总感觉霸气中带了点蠢萌。 蠢萌蠢萌的聚居蟹 游戏中的场景也充满浓厚的日系动漫风格。 https://news.yzz.cn/qmpc/201506-948484_all.shtml
13.ai怎么设计宠物标签?ai画宠物标志logo的教程Illustrator教程ai中想要画一个宠物的标签图标,该怎么绘制呢?下面我们就来看看ai画宠物logo标志的教程,很简单,需要的朋友可以参考下 ChatGPT & MidJourney 绘图免魔法无限使用 【点击领取】 商家在宠物行业需要制作自己的个性化标签,该怎么设计宠物logo标志呢?下面我们就来看看使用ai设计几款很可爱的宠物标签,从中学习一下宠物元素与...https://www.jb51.net/Illustrator/738483.html
14.猫图标徽标设计矢量模板平面样式库存例证.插画包括有逗人...插画 关于 猫图标 徽标设计矢量模板平面样式 家宠物兽医诊所店Logotype概念图标. 插画 包括有 逗人喜爱, 创造性, 要素 - 159357391https://cn.dreamstime.com/%E7%8C%AB%E5%9B%BE%E6%A0%87-%E5%BE%BD%E6%A0%87%E8%AE%BE%E8%AE%A1%E7%9F%A2%E9%87%8F%E6%A8%A1%E6%9D%BF%E5%B9%B3%E9%9D%A2%E6%A0%B7%E5%BC%8F-%E5%AE%B6%E5%AE%A0%E7%89%A9%E5%85%BD%E5%8C%BB%E8%AF%8A%E6%89%80%E5%BA%97logotype%E6%A6%82%E5%BF%B5%E5%9B%BE%E6%A0%87-image159357391
15.宠物uiUI设计素材免费下载图标图标 元素元素 背景背景 PPTPPT 字体字体 动图动图 模板 在线设计在线设计 样机样机 海报海报 插画插画 UIUI 淘宝淘宝 图库 高清图库高清...上传UI设计作品 宠物uix 使用场景 PC端软件/网站 PC端软件/网站 移动端APP/网站 移动端APP/网站 确定 取消 多选 页面 菜单/弹窗 菜单/弹窗 ...https://www.aigei.com/design/ui/chong_wu_u/
16.黄黑色狗宠物图形插画头像图标方形模板黄黑色狗宠物图形插画头像图标方形 Logo ? 500 × 500 像素 作者:木三九 自定义编辑此模板 模板元素全部可自定义修改 多设备支持,随心设计 多种格式下载和分享 实时协作 数千万张正版图片 数万原创插画和素材 设计细节 颜色 大小 500 × 500 像素 https://www.canva.cn/templates/EAGE47WQ5ZU/