第6章游戏界面设计本章介绍:游戏界面泛指对游戏的操作界面进行美化设计。本章针对游戏界面的基础知识、设计规范、常用类型以及绘制方法进行系统讲解与演练。通过本章的学习,读者可以对游戏界面设计有一个基本的认识,并快速掌握绘制游戏常用界面的规范和方法。了解软件游戏界面设计的基础知识掌握游戏界面设计的规范认识游戏界面常用界面类型学习目标掌握益智类游戏-商城界面的绘制方法掌握益智类游戏-操作界面的绘制方法掌握益智类游戏-胜利界面的绘制方法技能目标游戏界面设计的概念游戏界面设计的流程游戏界面设计的原则6.1游戏界面设计的基础知识游戏界面设计的基础知识包括了游戏界面设计的概念、游戏界面设计的流程以及游戏界面设计的原则。游戏界面,又被称为“游戏UI”,英文名称“GameU”,是界面设计的一个分支,用来专门设计游戏画面内容。游戏界面将必要的信息合理地设计在界面上,引导用户进行交互操作,是玩家与游戏进行沟通的桥梁。游戏界面又可以分为网页游戏界面、手机游戏界面、电视游戏界面等类型。6.1.1游戏界面设计的概念游戏界面游戏界面的设计流程可以按照分析调研、交互设计、交互自查、视觉设计、设计跟进、设计验证的步骤来进行。6.1.2游戏界面设计的流程游戏界面设计的流程1.分析调研游戏界面的设计是根据用户的需求、游戏的定位以及类型而进行。不同游戏的定位和类型,设计风格也会有区别。因此先分析需求,了解游戏受众,最后要通过同类型的游戏竞品调研,明确设计方向。6.1.2游戏界面设计的流程6.1.2游戏界面设计的流程不同的游戏定位、不同的游戏类型,其设计风格也不同6.1.2游戏界面设计的流程游戏界面草图2.交互设计交互设计是对整个游戏设计进行初步构思和制定的环节。一般需要进行架构设计、流程图设计、低保真原型、线框图设计等具体工作。3.交互自查交互设计完成之后,进行交互自查是整个游戏设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题,具体可以参考APP中的交互自查。6.1.2游戏界面设计的流程6.1.2游戏界面设计的流程俄罗斯设计师DimaPazuk创作的游戏界面4.视觉设计原型图审查通过,就可以进入视觉设计阶段,这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范、图片、内容真实。6.1.2游戏界面设计的流程该游戏的胜利界面加入了光束、圆点等细节,需要设计跟进,以保证细节的实现5.设计跟进设计跟进阶段是需要设计人员和开发人员共同参与,主要保证设计细节的效果实现。6.1.2游戏界面设计的流程巴基斯坦设计师MuhammadNaeem创作6.设计验证设计验证是最后一个阶段,是为游戏进行优化的重要支撑。在游戏正式上线后,通过用户的数据反馈进行记录,验证前期的设计,并继续优化。6.1.3游戏界面设计的原则简洁的游戏界面游戏界面设计的原则可以分为设计简洁、风格统一、视觉清晰、用户思维、符合习惯、操作自由六大原则。1.设计简洁游戏界面设计要简洁美观,能够令游戏玩家使用方便,在操作上减少错误,可以进行顺畅的游戏交互。6.1.3游戏界面设计的原则简洁的游戏界面2.风格统一游戏界面的风格要符合游戏的主题,并且进行统一。制作一套风格统一的游戏界面非常考验设计师的把控能力与设计技巧,因为这其中包括了对按钮、图标以及色彩等各种元素。6.1.3游戏界面设计的原则竞速游戏中对于汽车的设计质量往往要求较高,因此需要游戏UI设计师提供不同尺寸的设计资源,保证清晰度3.视觉清晰视觉清晰有利于游戏质量的提升,加强游戏玩家对于游戏的认可。由于移动设备屏幕的特殊性,为了达到清晰度,需要游戏UI设计师制作不同的界面资源。6.1.3游戏界面设计的原则由于游戏的用户不同,设计风格也有很大分别4.用户思维游戏界面设计应该站在用户的思考角度进行设计,满足大部分玩家的想法。游戏的受众不同,用户对于界面的设计认知也不同,这些设计具体从元素造型、界面颜色、整体布局等方面表现。6.1.3游戏界面设计的原则棋牌类游戏的用户年龄普遍较大,而且具有中国特色,因此设计风格比较传统5.符合习惯游戏界面的操作一定要符合用户的认知与习惯,需要和用户的现实世界进行匹配。另外用户的年龄及生活方式不同,也会导致较大的习惯差异,因此游戏UI设计师要设计出符合用户习惯的界面首先要进行目标用户的定位。6.1.3游戏界面设计的原则通过手柄进行游戏6.操作自由游戏的互动方式应保持高度的操作自由,其操作工具不仅可以是鼠标、键盘,还可以是手柄、体感游戏设备,令用户充分沉浸在游戏体验中。游戏界面设计的尺寸及单位游戏界面设计的界面结构游戏界面设计的布局游戏界面设计的文字游戏界面设计的图标6.2游戏界面设计的规范游戏界面设计基础规范可以通过设计尺寸及单位、界面结构、布局、字体及图标五个方面进行详尽的剖析。6.2.1游戏界面设计的尺寸及单位手机游戏游戏界面根据设备主要有手机游戏界面、平板游戏界面、网页游戏界面、电脑游戏界面以及电视游戏界面。这几种界面的设计尺寸及单位在前面都进行过详尽的剖析,因此结合项目需求,参考前面的APP、网页及软件相关内容即可。6.2.2游戏界面设计的界面结构游戏界面设计结构图游戏界面设计的界面结构可以依据用户对界面注意力的不同来进行划分,通常分为主要视觉区域、次要视觉区域以及弱视区域。6.2.3游戏界面设计的布局启动界面游戏界面的布局可以根据启动界面、主菜单界面、关卡界面、操作界面、胜利界面以及商店界面6种常用界面的布局来进行阐述。1.启动界面启动界面是游戏给予用户的第一印象,决定了游戏的门面。6.2.3游戏界面设计的布局主菜单界面2.主菜单界面游戏中的主菜单界面,主要包括游戏的设置、操作的选择以及相关帮助等。6.2.3游戏界面设计的布局关卡界面3.关卡界面关卡界面是令用户进入游戏操作的界面,关卡主要是对一系列相同的元素有秩序的排版布局。6.2.3游戏界面设计的布局操作界面4.操作界面操作界面是用户真正进行游戏的界面,主要包括角色控制、时间提醒、血量提示等内容。6.2.3游戏界面设计的布局胜利界面5.胜利界面胜利界面即玩家通关后的胜利显示界面。6.2.3游戏界面设计的布局商店界面6.商店界面商店界面,是贩卖虚拟产品服务的界面,也是游戏盈利的主要来源。6.2.4游戏界面设计的文字经过设计的标题游戏界面中,正文阅读类建议根据不同的平台选择对应的系统字体,标题展示类需要根据游戏的风格进行对应的设计。6.2.5游戏界面设计的图标游戏中的图标游戏界面中的图标规范前面都进行过详尽的剖析,因此结合项目需求,参考前面图标设计规范的相关内容即可。6.3游戏常用界面类型游戏界面设计是体现游戏品质、吸引用户的关键所在。在游戏界面中,常用界面类型为启动界面、主菜单界面、关卡界面、操作界面、胜利界面以及商店界面。6.3游戏常用界面类型1.启动界面启动界面是游戏给予用户的第一印象,决定了游戏的门面。游戏启动界面需要合理地设计游戏风格、游戏场景及游戏功能键等,只有设计出精美的启动界面才能够迅速抓住用户。启动界面6.3游戏常用界面类型2.主菜单界面游戏中的主菜单界面,主要包括游戏的设置、操作的选择以及相关帮助等。这类界面突出了各元素间的分布关系,让游戏玩家可以更好地接受游戏的信息,无障碍地了解游戏。主菜单界面6.3游戏常用界面类型3.关卡界面关卡界面是令用户进入游戏操作的界面,关卡主要是对一系列相同的元素有秩序地排版布局。关卡在游戏中起到了承上启下的作用,并能让用户清楚了解到自身进行游戏的进度及程度。关卡界面6.3游戏常用界面类型4.操作界面操作界面是用户真正进行游戏的界面,主要包括角色控制、时间提醒、血量提示等内容。生动的操作界面能够符合用户的心理预期,产生良好的沉浸式体验。操作界面6.3游戏常用界面类型5.胜利界面胜利界面即玩家通关后的胜利显示界面。胜利界面对玩家起到了鼓舞的作用,并伴随着奖励,令玩家产生喜悦。胜利界面6.3游戏常用界面类型6.商店界面商店界面,是贩卖虚拟产品服务的界面,也是游戏盈利的主要来源。游戏玩家可以通过购买商店的物品,提升自身游戏的战斗力。商店界面6.4课堂案例——制作水果消消消游戏使用“新建参考线”命令新建参考线,使用“置入”命令导入图片调整大小位置,使用“描边”命令给素材或文字添加边框,使用“内阴影”命令给图形添加阴影。效果图6.5课堂练习——制作Boom游戏使用“新建参考线”命令新建参考线,使用“置入嵌入对象”命令导入图片调整大小位置,使用“描边”命令给文字添加边框,使用“投影”命令给文字和图形添加投影,使用“颜色叠加”命令制作背景图。效果图6.6课后习题——制作PetFun游戏使用“新建参考线”命令新建参考线,使用“置入嵌入对象”命令导入图片调整大小位置,使用“描边”命令给文字添加边框,使用“斜面”和“浮雕”、“投影”命令给文字和图形添加效果,使用“渐变叠加”命令制作背景图。效果图