《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第6章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第6章.docx（32页珍藏版）》请在三一办公上搜索。
1、教案编号：6课题：第6章游戏界面设计课时：8课时授课类型：讲授+实训教学目标： 了解软件游戏界面设计的基础知识 掌握游戏界面设计的规范 认识游戏界面常用界面类型教学重点：游戏界面设计的规范、游戏界面常用界面的设计方法教学难点：游戏界面常用界面的设计方法本章技能点：益智类游戏-商城界面、操作界面、胜利界面的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程:（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第6章游戏界面设计项目目标： 了解软件游戏界面设计的基础知识 掌握游戏界面设计的规范 认识游戏界面常用界面类型3 .课程引入通过“制作水果消消消游戏”案例效果展示引
2、入游戏界面设计的概念（二）课程内容6.1 游戏界面设计的基础知识游戏界面设计的基础知识包括了游戏界面设计的概念、游戏界面设计的流程以及游戏界面设计的原则。6.1.1 游戏界面设计的概念游戏界面，又被称为游戏UI”,英文名称“GameU”,是界面设计的一个分支,用来专门设计游戏画面内容。游戏界面将必要的信息合理地设计在界面上，引导用户进行交互操作，是玩家与游戏进行沟通的桥梁，如图所示。游戏界面又可以分为网页游戏界面、手机游戏界面、电视游戏界面等类型。游戏界面6.1.2 游戏界面设计的流程游戏界面的设计福呈可曲照分析调研、交互设计、交互自查、视觉设计、设计跟进、设计验证的步骤来进行，如图所示。游戏
3、界面设计的流程1 .分析调研游戏界面的设计是根据用户的需求、游戏的定位以及类型而进行。不同游戏的定位和类型，设计风格也会有区别，如图所示。因此先分析需求，了解游戏受众，最后要通过同类型的游戏竞品调研，明确设计方向。不同的游戏定位、不同的游戏类型，其设计风格也不同2 .交互设计交互设计是对整个游戏设计进行初步构思和制定的环节。一般需要进行架构设计、流程图设计、低保真原型、线框图设计等具体工作，如图所示。3 .交互自查交互设计完成之后，进行交互自查是整个游戏设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考App中的交互自查。4 .视觉设计原型图审查通过
4、，就可以进入视觉设计阶段，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范、图片、内容真实，如图所示。iBubbleSea俄罗斯设计师DimaPaZUk创作的游戏界面5 .设计跟进设计跟进阶段是需要设计人员和开发人员共同参与，主要保证设计细节的效果实现，如图所该游戏的胜利界面加入了光束、圆点等细节，需要设计跟进，以保证细节的实现6 .设计验证设计验证是最后一个阶段，是为游戏进行优化的重要支撑。在游戏正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。巴基斯坦设计师MuhammadNaeem创作7 .1.3游戏界面设计的原则游戏界面设计的原则可以分为设计
5、简洁、风格统一、视觉清晰、用户思维、符合习惯、操作自由原!叽1 .设计简洁游戏界面设计要简洁美观，能够令游戏玩家使用方便，在操作上减少错误，可以进行顺畅的游戏交互，如图所示。2 .风格统一游戏界面的风格要符合游戏的主题，并且进行统一。制作一套风格统一的游戏界面非常考验设计师的把控能力与设计技巧，因为这其中包括了对按钮、图标以及色彩等各种元素，如图所示。该游戏是一款投篮的体育类游戏，因此游戏风格整体充满了运动活泼3 .视觉清晰视觉清晰有利于游戏质量的提升，加强游戏玩家对于游戏的认可。由于移动设备屏幕的特殊性，为了达到清晰度，需要游戏UI设计师制作不同的界面资源,如图所示。竞速游戏中对于汽车的设计
6、质量往往要求较高，因此需要游戏Ul设计师提供不同尺寸的设计资源，保证清晰度4 .用户思维游戏界面设计应该站在用户的思考角度进行设计，满足大部分玩家的想法。游戏的受众不同，用户对于界面的设计认知也不同，这些设计具体从元素造型、界面颜色、整体布局等方面表现，如图所示。由于游戏的用户不同，设计风格也有很大分别5 .符合习惯游戏界面的操作一定要符合用户的认知与习惯,需要和用户的现实世界进行匹配。另外用户的年龄及生活方式不同，也会导致较大的习惯差异，因此游戏UI设计师要设计出符合用户习惯的界面首先要进行目标用户的定位，如图所示。棋牌类游戏的用户年龄普遍较大，而且具有中国特色，因此设计风格比较传统6 .操
7、作自由游戏的互动方式应保持高度的操作自由，其操作工具不仅可以是鼠标、键盘，还可以是手柄、体感游戏设备，令用户充分沉浸在游戏体验中，如图所示。通过手柄进行游戏6. 2游戏界面设计的规范游戏界面设计基础规范可以通过设计尺寸及单位、界面结构、布局、字体及图标五个方面进行详尽的剖析。6.1.1 游戏界面设计的尺寸及单位游戏界面根据设备主要有手机游戏界面、平板游戏界面、网页游戏界面、电脑游戏界面以及电视游戏界面。这几种界面的设计尺寸及单位在前面都进行过详尽的剖析，因此结合项目需求，参考前面的App、网页及软件相关内容即可,如图所示。手机游戏6.1.2 游戏界面设计的界面结构游戏界面设计的界面结构可以依据
8、用户对界面注意力的不同来进行划分，通常分为主要视觉区域、次要视觉区域以及弱视区域，如图所示。游戏界面设计结构图6.1.3 游戏界面设计的布局游戏界面的布局可以根据启动界面、主菜单界面、关卡界面、操作界面、胜利界面以及商店界面6种常用界面的布局来进行阐述。1 .启动界面启动界面是游戏给予用户的第一印象，决定了游戏的门面，其常用布局如图所示。Play启动界面2 .主菜单界面游戏中的主菜单界面，主要包括游戏的设置、操作的选择以及相关帮助等，其常用布局如图丽。主菜单界面3 .关卡界面关卡界面是令用户进入游戏操作的界面，关卡主要是对一系列相同的元素有秩序的排版布局，其常用布局如图所示。关卡界面4 .操作
9、界面操作界面是用户真正进行游戏的界面，主要包括角色控制、时间提醒、血量提示等内容，其常用布局如图所示。操作界面5 .胜利界面胜利界面即玩家通关后的胜利显示界面，其常用布局如图所示。VICTORY胜利界面6 .商店界面商店界面，是贩卖虚拟产品服务的界面，也是游戏盈利的主要来源，其常用布局如图所示。商店界面6.2.4游戏界面设计的文字游戏界面中，正文阅读类建议根据不同的平台选择对应的系统字体，标题展示类需要根据游戏的风格进行对应的设计,如图所示。经过设计的标题字号在PC网页中要大于14px,在移动设备中要大于20px6.2.5游戏界面设计的图标游戏界面中的图标规范前面都进行过详尽的剖析，因此结合项
10、目需求，参考前面图标设计规范的相关内容即可，如图所示。游戏中的图标6.3游戏常用界面类型游戏界面设计是体现游戏品质、吸引用户的关键所在。在游戏界面中，常用界面类型为启动界面、主菜单界面、关卡界面、操作界面、胜利界面以及商店界面。1 .启动界面启动界面是游戏给予用户的第一印象，决定了游戏的门面。游戏启动界面需要合理地设计游戏风格、游戏场景及游戏功能键等，只有设计出精美的启动界面才能够迅速抓住用户，如图所示。启动界面2 .主菜单界面游戏中的主菜单界面，主要包括游戏的设置、操作的选择以及相关帮助等，如图所示。这类界面突出了各元素间的分布关系，让游戏玩家可以更好地接受游戏的信息，无障碍地了解游戏。主菜
11、单界面3 .关卡界面关卡界面是令用户进入游戏操作的界面，关卡主要是对一系列相同的元素有秩序地排版布局，如图所示。关卡在游戏中起到了承上启下的作用，并能让用户清楚了解到自身进行游戏的进度及程度。关卡界面4 .操作界面操作界面是用户真正进行游戏的界面，主要包括角色控制、时间提醒、血量提示等内容，如图所示。生动的操作界面能够符合用户的心理预期，产生良好的沉浸式体验。操作界面5 .胜利界面胜利界面即玩家通关后的胜利显示界面。胜利界面对玩家起到了鼓舞的作用，并伴随着奖励，令玩家产生喜悦，如图所示。胜利界面6 .商店界面商店界面，是贩卖虚拟产品服务的界面，也是游戏盈利的主要来源，如图所示。游戏玩家可以通过
12、购买商店的物品，提升自身游戏的战斗力。商店界面，右为英国UI/UX设计师Heather MUrray创作6.4课堂案例制作水果消消消游戏【案例学习目标】学习如何置入图片，并使用移动工具移动调整图片。【案例知识要点】使用新建参考线命令新建参考线，使用置入嵌入对象命令导入图片调整大小位置，使用描边命令给素材或文字添加边框，使用内阴影命令给图形添加阴影，效果如图所示。【效果所在位置】云盘/Ch06效果/制作水果消消消游戏。1 .制作水果消消消游戏商城界面(1)按Ctrl+N组合键，新建一个文件，宽度为750像素，l度为1334像素，分辨率为72像素硬寸，背景内容为白色，如图所示,单击“创建按钮，完成
13、文档新建。(2)选择视图新建参考线命令，弹出新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击确定按钮,完成参考线的创建，效果如图所示。(3)选择视图新建参考线命令，弹出新建参考线”对话框,在32像素的位置新建一条垂直参考线，设置如图所示。单击“确定按钮，完成参考线的创建，效果如图所示。用相同的方法，在718像素(距离右边32像素)的位置新建一条垂直参考线，如图所示。(4法择”文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏商城界面01文件。单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按EnIer
14、键确定操作，效果如图所示，在“图层控制面板中生成新的图层并将其命名为背景图。(5)单击图层控制面板下方的添加图层样式”按钮在弹出的菜单中选择“颜色叠加”命令，弹出对话框,将叠加颜色设为黑色，其他选项的设置如图所示。单击“确定按钮，效果如图所示。(6施择”文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏商城界面04文件。单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小,按Enter键确定操作,效果如图6-40所示,在图层控制面板中生成新的图层并将其命名为“商城底框。使用相同的方法置入云盘中的Ch06素材制作水果消消消游戏制作水果
15、消消消游戏商城界面02文件，在图层控制面板中生成新的图层并将其命名为“商城，效果如图所示。(7)单击图层控制面板下方的添加图层样式”按钮在弹出的菜单中选择描边命令，弹出对话框，将描边颜色设为黄色(248、165、68),其他选项的设置如图所示，单击确定按钮，效果如图所示。(8)选择横排文字”工具T.,在适当的位置输入需要的文字并选取文字。选择窗口字符”命令，弹出字符面板,在字符面板中，将“颜色设为白色，其他选项的设置如图所示，按Enter键确定操作,效果如图所示,在“图层控制面板中生成新的文字图层。(9)单击图层控制面板下方的添加图层样式按钮仅一在弹出的菜单中选择描边命令，弹出对话框，将描边颜
16、色设为黄色(248、165、68),其他选项的设置如图所示，单击”确定按钮，效果如图所示。(10)选择文件置入嵌入对象命令，弹出置入嵌入的对象对话框，选择云盘中的Ch06素材制作水果消消消游戏制作水果消消消游戏商城界面03”文件。单击置入按钮,将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作，效果如图所示，在图层控制面板中生成新的图层并将其命名为关闭按钮:(Il)选择圆角矩形工具Q,在属性栏的选择工具模式选项中选择形状，将填充颜色设为粉色(250、188半径选项设置为16像素,在图像窗口中绘制圆角矩形，效果如图所示，在“图层控制面板中生成新的形状图层圆角矩形I(12 )单击图
17、层控制面板下方的添加图层样式按钮况，在弹出的菜单中选择内阻影命令，弹出对话框，将阴影颜色设为暗红色(203、75、68),其他选项的设置如图所示，单击“确定按钮，效果如图所示。(13)将圆角矩形1”图层拖曳到控制面板下方的“创建新图层按钮P上进行复制，生成新的形状图层圆角矩形1拷贝，如图所示。选择移动”工具,按住Shift键的同时，拖曳复制的图形到适当的位置，效果如图所示。(14)使用相同的方法再次复制三个形状图层，并分别拖曳到适当的位置，如图所示。选中圆角矩形1拷贝4图层，按住Shift键的同时，单击圆角矩形1”图层，将需要的图层同时选取。按CtrI+G组合键，群组图层并将其命名为“分布框，
18、如图所示。(15)选择文件置入嵌入对象命令，弹出置入嵌入的对象对话框,选择云盘中的Ch06素材制作水果消消消游戏制作水果消消消游戏商城界面05文件，单击“置入”按钮，将图片置入到图像窗口中，并调整其位置和大小，按EnIer键确定操作，效果如图所示，在图层控制面板中生成新的图层并将其命名为金币(16)使用相同的方法置入其他素材，效果如图所示。选中金币5图层，按住Shift键的同时，单击“金币1图层，将需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为金币价格水果消消消游戏商城界面制作完成。2 .制作水果消消消游戏操作界面(1)按CtrlN组合键，新建一个文件,宽度为750像素，高度为
19、1334像素，分辨率为72像素硬寸，背景内容为白色，如图所示，单击创建按钮，完成文档新建。选择”视图新建参考线命令，弹出新建参考线”对话框，在40像素的位置新建T水平参考线，设置如图所示，单击确定按钮，完成参考线的创建，如图所示。(2)选择视图新建参考线命令，弹出新建参考线”对话框，在32像素的位置新建一条垂直参考线，设置如图所示，单击“确定按钮，完成参考线的创建，如图所示。用相同的方法，在718像素(距离右侧32像素)的位置新建一条垂直参考线，如图所示。(3您择”文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的Ch06素材制作水果消消消游戏制作水果消消消游戏操作界面01文件，单击
20、置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作,效果如图所示，在“图层控制面板中生成新的图层并将其命名为底图。(4)单击图层控制面板下方的添力口图层样式按钮况，在弹出的菜单中选择颜色叠加命令，将叠加颜色设为黑色，其他选项的设置如图所示，单击确定按钮，效果如图所示。(5施择“文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏操作界面05文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Emer键确定操作，效果如图所示,在“图层控制面板中生成新的图层并将其命名为“内容区。(6)按住Shift键的
21、同时，单击底图”图层，将所需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为“内容区，如图所示。(7您择“文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏操作界面02文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作,效果如图所示,在“图层控制面板中生成新的图层并将其命名为“桃心。使用相同的方法置入其他素材，效果如图所示。按住Shift键的同时，单击桃心”图层,将所需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为菜单栏二(8施择”文件置入嵌入对象命令,弹出置入嵌入的对象对话
22、框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏操作界面06文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Erner键确定操作，效果如图所示，在“图层控制面板中生成新的图层并将其命名为菜单背景，(9)使用相同的方法置入其他素材，效果如图所示。按住Shift键的同时，单击菜单背景图层，将所需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为导航栏二水果消消消游戏操作界面制作完成。3 .制作水果消消消游戏胜利界面(1)按Ctrl+N组合键,新建一个文件，宽度为750像素，高度为1334像素，分辨率为72像素硬寸,背景内容为白色，如图所示，单击创建按钮，
23、完成文档新建。选择视图新建参考线命令，弹出新建参考线”对话框，在40像素的位置新建一条水平参考线，设置如图所示，单击确定按钮，完成参考线的创建。如图所示。(2)选择视图新建参考线命令，弹出新建参考线”对话框，在32像素的位置新建一条垂直参考线，设置如图所示，单击“确定按钮，完成参考线的创建，如图所示。用相同的方法，在718像素(距离右侧32像素)的位置新建一条垂直参考线，如图所示。(3您择”文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏胜利界面01文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作
24、，效果如图所示，在“图层控制面板中生成新的图层并将其命名为底图”。使用相同的方法置入其他素材，效果如图所示。(4)选择横排文字”工具T.,在适当的位置输入需要的文字并选取文字。选择窗口字符”命令，弹出字符面板，在面板中将颜色设为深蓝色(11、94、120),其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层控制面板中生成新的文字图层。力方正相皿博次的VjJ。四R(5)选择“横排文字”工具T,在适当的位置输入需要的文字并选取文字，在字符面板中，将颜色设为白色，其他选项的设置如图所示，按Enler键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。使用相同的方法输入
25、其他文字，效果如图所示。素材制作水果消消消游戏制作水果消消消游戏胜利界面10”文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作，效果如图所示，在“图层控制面板中生成新的图层并将其命名为下一关、(7)选择“横排文字”工具T,在适当的位置输入需要的文字并选取文字，在字符面板中，将颜色设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。方正Hffll博6o型”ITWX%AOTTTTTT,T4T管MS-Z平看(8)单击图层控制面板下方的添加图层样式按钮应，在弹出的菜单中选择描边命令，将描边颜色设为绿色(12
26、、120、22),其他选项的设置如图所示,单击“确定按钮，效果如图所示。S(9施择“文件置入嵌入对象命令,弹出置入嵌入的对象对话框,选择云盘中的ChO6素材制作水果消消消游戏制作水果消消消游戏胜利界面11文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的图层并将其命名为“关闭按钮。按住Shift键的同时，单击底图图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“内容区。(11)选择文件置入嵌入对象”命令，弹出置入嵌入的对象对话框，选择云盘中的Ch06素材制作水果消消消游戏制作水果消消消游戏胜利
27、界面02文件，单击置入图层控制面板中生成新的图层并将其命名为“攻略。使用相同的方法置入其他素材，效果如图所示。按住Shift键的同时，单击“攻略”图层，将所需要的图层同时选取。按CtI1+G组合键，群组图层并将其命名为“菜单栏”。(12)选择文件置入嵌入对象命令，弹出置入嵌入的对象对话框，选择云盘中的Ch06素材制作水果消消消游戏制作水果消消消游戏胜利界面12文件，单击置入按钮，将图片置入到图像窗口中，并调整其位置和大小，按Enler键确定操作，效果如图所示，在图层控制面板中生成新的图层并将其命名为退出。(13)使用相同的方法置入其他素材，效果如图所示。按住Shift键的同时，单击退出图层，将
28、所需要的图层同时选取。按Ctrl+G组合键，群组图层并将其命名为控制栏二水果消消消游戏胜利界面制作完成。6. 5课堂练习制作Boom游戏【案例学习目标】学习如何置入图片，并使用移动工具移动调整图片。【案例知识要点】使用新建参考线命令新建参考线，使用置入嵌入对象命令导入图片调整大小位置，使用描边命令给文字添加边框，使用投影命令给文字和图形添加投影，使用颜色叠加命令制作背景图，效果如图所示。【效果所在位置】云盘/Ch06效果/制作BOOm游戏。6.6课后习题制作PetFUn游戏【案例学习目标】学习如何置入图片，并使用移动工具移动调整图片。【案例知识要点】使用新建参考线命令新建参考线，使用置入嵌入对象命令导入图片调整大小位置，使用描边命令给文字添加边框，使用斜面和浮雕、投影命令给文字和图形添加效果，使用渐变叠加命令制作背景图，效果如图所示。【效果所在位置】云盘/Ch06效果/制作PetFUn游戏。
