《UI视觉设计案例教程》教案 第6章 游戏界面设计.docx

PAGE6

PAGE6

PAGE5

PAGE5

课题

游戏界面设计

课时

6课时（270min）

教学目标

知识目标：

（1）了解游戏的基本界面

（2）了解游戏界面的布局

（3）了解游戏界面的风格

（4）掌握游戏界面设计的要点

（5）了解游戏界面设计的规范

（6）掌握游戏界面的一般制作方法

素质目标：

（1） 探究应用实践背后的技术原理，培养钻研精神，激发学习兴趣和创新思维。

（2）发扬精益求精的工匠精神，养成严谨认真的工作态度。

教学重难点

教学重点：游戏的基本界面，游戏界面的布局、风格、设计要点和设计规范，游戏界面的一般制作方法

教学难点：游戏界面的设计要点和设计规范

教学方法

问答法、讨论法、讲授法、多媒体展示法

教学用具

电脑、投影仪、多媒体课件、教材、APP

教学过程

主要教学内容及步骤

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

问题导入

【教师】提出问题

你平时玩游戏吗？你最喜欢哪款游戏的游戏界面？

【学生】聆听、思考、主动回答问题

传授新知

【教师】总结学生的回答、引入新的知识点，讲解游戏的基本界面，游戏界面的布局、风格、设计要点和设计规范等知识

6.1游戏界面设计的基础知识

一般来说，游戏界面设计是指对游戏软件中人机交互、操作逻辑和界面等的整体设计。

UI设计师在游戏界面设计中主要负责把控界面的布局，包括艺术字、图标、交互按钮等视觉元素的设计。相对其他类型的UI设计师来说，游戏UI设计师的岗位要求更高，除了必须热爱游戏外，还要具备一定的美术基础。

【提示】

游戏中造型复杂、质感细腻的人物和背景是由原画师完成的，当界面中需要展示相关素材时，UI设计师可与原画师沟通。

6.1.1游戏的基本界面

常见游戏的基本界面有启动界面、主菜单界面、关卡界面、操作界面、胜利/失败界面、商店界面和背包界面等。

1．启动界面

【教师】通过多媒体展示“《原神》启动界面”图片（详见教材），并讲解新知

启动界面是玩家启动游戏时第一眼看到的画面，常用于展示游戏人物或游戏场景等，可以为动画或静态图片。

……（详见教材）

2．主菜单界面

【教师】通过多媒体展示“优酷软件界面”图片（详见教材），并讲解新知

主菜单界面是玩家进入游戏后看到的第一个画面，游戏的活动、玩法、设置、公告、资源等内容集中展示于此。

……（详见教材）

3．关卡界面

【教师】通过多媒体展示“《保卫萝卜3》关卡界面”图片（详见教材），并讲解新知

关卡界面是玩家开始游戏前展示游戏进度的界面，可以让玩家清楚地了解当前的游戏进度。

……（详见教材）

4．操作界面

【教师】通过多媒体展示“《Phigros》操作界面”图片（详见教材），并讲解新知

操作界面是游戏的核心界面，玩家可以在该界面体验游戏的乐趣，因此在设计时，无论是操作方式还是界面效果，都应尽可能地满足玩家的心理预期，给玩家良好的游戏体验。

5．胜利/失败界面

【教师】通过多媒体展示“《召唤与合成2》胜利/失败界面”图片（详见教材），并讲解新知

胜利者往往会有获胜奖励，并且胜利是一件让人高兴的事儿，所以该页面应该能让玩家产生愉悦感；而失败界面最好能提供几种提升思路，帮助玩家快速成长。

6．商店界面

【教师】通过多媒体展示“《启源女神》商店界面”图片（详见教材），并讲解新知

商店界面的主要作用是罗列商品，方便玩家挑选和购买。设计时，可根据商品特点分类展示，不同类别的商品界面，布局应当一致。

7．背包界面

【教师】通过多媒体展示“《无限进化》背包界面”图片（详见教材），并讲解新知

背包界面是用来整合玩家道具的界面，设计时，除了要安排物品展示区域和物品介绍区域外，还应根据物品的类别在合适位置添加纵向或横向导航栏，将物品分门别类整理清楚，以便玩家快速查看。

6.1.2游戏界面的布局

【教师】通过多媒体展示“《崩坏3》主菜单界面”图片（详见教材），并讲解新知

依据玩家对界面中不同区域注意力的不同，可将游戏界面划分为主要视觉区域、次要视觉区域和弱视区域。

通常，主要视觉区域集中在界面中心，次要视觉区域集中在界面的左侧和右侧，弱视区域集中在界面的顶部和底部。

……（详见教材）

6.1.3游戏界面的风格

【教师】通过多媒体展示“Photoshop软件的启动页”图片（详见教材），并讲解新知

常见的游戏界面风格有写实风格、卡通风格、日韩风格、欧美风格和像素风格等。

1．写实风格

写实风格的游戏画质细腻、精美，从人物到场景都贴近现实，玩家甚至可以看到木门的纹理和墙面的裂纹。

【教师】通过多媒体展示“《迷雾》游戏界面”图片（详见教材），并讲解新知

……（详见教材）

2．卡通风格

【教师】通过多媒体展示“《保卫萝卜4》游戏界面”图片（详见教材），并讲解新知

卡通风格是将游戏人物和场景等内容卡通