数字媒体技术毕业设计 游戏UI设计与制作《精灵寻宝》.docx

数字媒体技术毕业设计 游戏UI设计与制作《精灵寻宝》.docx

《数字媒体技术毕业设计 游戏UI设计与制作《精灵寻宝》.docx》由会员分享，可在线阅读，更多相关《数字媒体技术毕业设计 游戏UI设计与制作《精灵寻宝》.docx（15页珍藏版）》请在冰豆网上搜索。

数字媒体技术毕业设计游戏UI设计与制作《精灵寻宝》

毕业设计报告

题目：

_游戏UI设计与制作《精灵寻宝》

学生：

指导老师：

系别：

软件学院现代设计系

专业：

数字媒体技术

班级：

学号：

一、毕业设计课题概述..............................................1

（一）选题来源......................................................1

（二）设计计划......................................................1

1．设计内容明细....................................................1

2．设计进程计划...................................................2

二、设计展开计划..................................................2

（一）市场调查......................................................2

1.手机游戏UI设计的发展...........................................2

2.美术风格在手机游戏界面的不同表现................................3

（二）课题分析与定位...............................................4

（三）创意与表现............................................5

三、作品设计说明..................................................6

（一）游戏名称及游戏背景..........................................6

（二）主功能图标设计与制作........................................6

（三）游戏界面设计与制作..........................................6

1.登入界面........................................................7

2.选角界面........................................................8

3.主界面..........................................................9

4.二级界面.......................................................10

5.三级界面.......................................................12

四、设计感想......................................................13

一、毕业设计课题概述

我的毕业设计作品是设计与制作一款手机游戏《精灵寻宝》。

游戏UI风格以美式卡通风格为主，古旧的羊皮纸质感，还尝试加入偏欧式的界面元素。

游戏背景是欧式时期的精灵王国，精灵骑士为了夺回宝藏，踏上了寻找盗贼的漫漫征程。

而在征程中，又遇到了目的不同的各种伙伴，一起向盗贼的城堡进发。

《精灵寻宝》设定为一款横版角色扮演类的手游，设计并制作出的游戏界面有登入界面、主界面、背包装备界面、背包道具界面、战斗界面、商城钻石界面、商城礼包界面、角色属性界面、角色技能界面、角色羁绊界面、任务界面、签到界面、设置界面、图鉴界面、三级界面，一共绘制15个界面以及界面内所有图标。

游戏界面的功能分布合理，同时也在交互方面考虑到了能够正常运行游戏的布局。

游戏界面大小采用了iPhone5手机的屏幕尺寸，大小为1136*640px，分辨率为72px。

该作品是运用Photoshop软件，以Wacom影拓5数位板制作完成的。

（一）选题来源

随着时代的发展，智能手机飞速普及，手机的功能也逐渐增加，交友软件、网购、简易化办公，还有各种款式的游戏。

游戏已经成为现代人类消遣的方式之一，相比起早期单一的游戏形式，现在的游戏更多的展现了其可玩性，着重展现了游戏的画面和角色，甚至还有游戏花重金聘请有名的明星和声优为其代言和配音，以此来吸引潜在玩家。

而一个游戏，能在游戏产品遍地开花的情况下脱颖而出甚至多年创收，不仅要不断的进行玩法创新和界面更新，追上时代的步伐。

游戏UI包括但不限于游戏登录界面、操作界面、游戏道具、技能标志、游戏中的小物件等，而设计好游戏UI就能从玩家一开始注意到游戏吸引他们，做好游戏UI，让玩家在闲暇时间从视觉上享受游戏。

（二）设计计划

1.设计内容明细

设计以个人独立完成的形式完成一套完整的游戏UI展示，其中含主界面在内的15个功能界面，制作的游戏界面有登入界面、主界面、背包装备界面、背包道具界面、战斗界面、商城钻石界面、商城礼包界面、角色属性界面、角色技能界面、角色羁绊界面、任务界面、签到界面、设置界面、图鉴界面、三级界面，一共绘制15个界面以及界面内所有图标。

游戏UI界面设计风格以美式卡通为主，作品功能齐全，界面整洁，布局合理。

界面尺寸大小1136*640像素，分辨率为72像素。

2.设计进程计划

时间

计划与进程

2017年09月11日—2017年09月18日

了解毕业设计项目，确定毕业设计主题，对毕设制作方向有一定的掌握。

2017年09月19日—2017年09月25日

对资料进行整理；对手游UI设计风格进行资料收集；对受众市场进行分析调查。

2017年09月26日—2017年10月17日

制作调查问卷的题目；并做相应的市场调查。

了解市场对项目的需求。

2017年10月18日—2016年10月29日

确定问卷；收集分析整理问卷，制成表格。

准备开题答辩报告内容，完善设计内容。

2017年10月30日—2017年11月02日

完成游戏背景的构思和架构、确定美术风格。

2017年11月03日—2017年11月12日

制作出游戏的第一个界面，修改并确定好界面风格。

绘制货币、体力、碎片等图标。

2017年11月13日—2017年11月20日

完成常规道具设计，制作出宝石、药水。

2017年11月21日—2017年11月26日

设计并绘制游戏人物装备图标。

2017年11月27日—2017年11月30日

绘制按钮、页签等图标。

2017年12月01日—2017年12月04日

绘制出游戏人物的技能图标。

2017年12月04日—2017年12月14日

绘制出游戏的主功能图标。

2017年12月15日—2017年12月19日

完成中期的任务检查。

2017年12月20日—2017年02月21日

将界面和图标相结合，制作出完整的一个界面。

2017年02月22日—2017年12月23日

根据第一个界面，绘制出游戏的主界面等界面。

2017年12月24日—2017年12月25日

绘制出游戏的三级界面。

2017年12月26日—2017年12月30日

把毕业设计作品交给导师并修改内容。

2017年12月31日—2018年01月08日

书写整理毕业论文并查重，进行最后的调整和确认。

2018年01月09日—2018年01月13日

整合所有作品和资料，和导师进行答辩前的沟通，修改完成资料，做好准备进行答辩。

表1.1设计进程表

二、设计展开计划

（一）市场调查

1.手机游戏UI设计的发展

UI即UserInterface（用户界面）的简称。

泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。

游戏UI是UI设计的其中一个种类，游戏UI的载体有手机、网页等平台，手机作为一个方便携带、方便使用的载体，能够更广泛的传播游戏。

手机自身在社会更替中进行着快速的更新发展，电子游戏行业随之加快发展的进程，市场和玩家对游戏的体验要求逐步提高，同时他们对游戏的审美也影响着手机游戏界面设计的方向。

手机游戏界面设计不仅仅是要求美观，而且还需要设计师在人机交互、操作逻辑上有一定的研究，使其能够在美术特色和软件操作上达到平衡，找到游戏的定位，引导玩家深入体验和享受游戏。

在早期，国内手机游戏仅限于贪吃蛇、俄罗斯方块等简单的平面小游戏，这类游戏界面简单，功能也十分单一，而且在早期游戏审美尚未提升的阶段，界面较多的选用了吸引眼球的高饱和颜色，长期注视着高饱和度的界面，会产生视觉疲劳，无法对游戏持有较为持久的热情，进而不利于游戏的长期发展。

手机游戏刚起步的阶段，大部分人对游戏的认知只停留在界面好看，交互上却十分薄弱。

现如今，游戏界面更加丰富，贴近玩家的审美，在人机交互上也更加成熟。

国外手机游戏流行的时间长，游戏UI设计相对成熟，不仅在界面绘制上有自己的审美，也十分注重人机交互和操作逻辑。

2.美术风格在手机游戏界面的不同表现

时至今日，手机游戏种类日益繁多，为了研究市场和玩家更欢迎什么类型的游戏，游戏在美术风格上也进行了不同的演化。

目前比较流行的美术风格有美式卡通、Q版、写实风、日式和风、日韩风、扁平化、机械科技风等。

不同的美术风格拥有不同的优点，从而满足不同玩家的游戏需求。

（二）课题分析与定位

分析市场进行调查报告，发现手机游戏的受众群体主要是闲暇时间较多，手机使用频率较高的在校学生和刚入职的上班族，年龄段集中在12到30岁之间。

针对这一年龄层的玩家，进行了市场调查问卷，问卷结果显示，最受这部分玩家的手机游戏UI美术风格以美式卡通和写实为主，所以该作品《精灵寻宝》采用了美式Q版的美术风格，加入了欧式元素，并绘制出羊皮纸的纸质效果，使得游戏能够体现其趣味性，表现出美感和交互逻辑。

（三）创意与表现

1.手绘与扁平化相结合

手机游戏市场发展到现如今的阶段，对游戏界面的变现手法也变幻无穷，传统审美的美式卡通界面及界面上绘制的游戏图标和角色外貌表现出太过明显的厚重感，而扁平化是把复杂的图标化简去繁，但是扁平化有色彩单一、立体感弱等明显的不足，所以结合美式卡通和扁平化设计，可以达到发挥两者优点，弥补不足的效果。

三、作品设计说明

（一）游戏名称及游戏背景

1.游戏名称

《精灵寻宝》。

2.游戏背景

遥远的天空之国——精灵王国与世隔绝上百年，本是与世无争的纯净之地，却在派出学徒学习他国文化时被情报贩子发现了王国隐秘的入口，随后被潜入的盗贼偷走了最珍贵的宝藏，精灵王国却也在这次意外之中打开了国门，和外面的世界进行贸易和文化的相互输出。

精灵骑士比特为了夺回宝藏，踏上了寻找盗贼的漫漫征程。

而在征程中，又遇到了目的不同的各种伙伴，一起向盗贼的城堡进发。

（二）主功能图标设计与制作

组成手机游戏界面的要素有Icon即图标、登入界面、选角界面、主界面、二级界面、三级界面。

主功能图标是游戏界面最基础的部分，同时也是必须存在的一个界面。

功能图标在界面中起到交互的作用，点击功能图标可以跳转到相应的其他界面进行游戏操作，所以图标设计要体现这个图标的作用，能够让玩家识别出图标的功能从而更方便的进行游戏。

以商城图标为例（如图2.1），首先要根据设定和界面对图标的形状和色彩进行答题构思，游戏主题是欧式风格，所以使用木箱子的配色绘制，并装填宝石等贵重物。

先再Photoshop上创建一个300*300像素大小的图层，铺一层底色，确定好箱子的大致形状，然后对箱子的轻微的角度透视、投影、光线等细节进行刻画描绘，绘制好箱子之后开始设计硬币、宝石、碎片，并放置在合适的位置，加上投影。

最后对绘制完成的图标进行细微的修饰调整，完成完整的功能图标设计。

图2.1

（三）游戏界面设计与制作

1.登入界面

手机游戏的登入界面是玩家体验游戏时最先接触到的游戏界面，界面内主要包括游戏的Logo、选择大区、进入游戏按钮以及其它基础服务图标等。

游戏的Logo是识别游戏最重要的一部分，它必须具有自己独特的风格，而Logo设计表现形式一般以文字为主，通过对文字的变形和图形设计添加，把Logo设计出独特性。

我的游戏名称为《精灵寻宝》，是美式卡通风格，游戏Logo使用了文字加上游戏内角色使用的道具的表现形式（如图3.1，图3.2），首先要确定文字的基本形状，使用了汉仪综艺体简的字体，使用钢笔工具调整文字形状，把头尾两个字放大，起到稳定的效果，文字使用了黄色过渡到橙色的配色，刻画破碎效果。

帽子作为道具放置在头部，钻石和“宝”的一点相呼应，而弓箭放置在右边。

同时，界面上还需要不可或缺的控件按钮，它能较为迅速的解决玩家的基本问题，这使它的人机交互尤为重要，但是又不能比Logo更显眼，所以要合理设计控件。

在左下角标注上版本号和引擎，完成登入界面的制作。

图3.1

图3.2

2.选角界面

选角界面是从登入界面开始游戏后，玩家选择设定的游戏角色类型，以此开启游戏体验之旅。

选角界面的布局分为左中右三部分（如图3.4）。

设定的游戏角色类型分为战士、牧师、法师，我采用了扁平化剪影图标来代表这四种类型（如图3.5），以手绘的Icon框作为背景，这里又将美式卡通手绘与扁平风进行合理的搭配，这些设计的元素也是与游戏背景紧密结合。

图标的选中效果，我对外框使用了蓝绿色的外发光效果，并用喷枪画笔绘制了一些光点，增加点缀效果。

中间是随机选择游戏角色昵称，一般都会设计一个骰子作为点击控件，完成游戏交互。

右侧是游戏角色信息介绍，内容包含角色名称、生命攻击数值以及相关介绍。

生命攻击等相关属性的剪影图标，先用钢笔工具画出扁平形状，再加深刻画，呈现出浮雕的表现效果，让画面显得更加精致。

数据条的绘制，是通过图层样式进行刻画，先做出暗色的底槽部分，注意体积感，要给人一种凹陷进去的感觉，再复制一个，做有经验值的状态，同时调整颜色和内阴影的角度，使其看起来比较饱满，体现一种镶嵌在里面的效果。

图3.4

图3.5

3.主界面

从登入界面进入游戏，最先出现的是主界面，一个游戏的主要功能都集中在该界面。

设计游戏界面时，需要综合考虑玩家的操作习惯。

《精灵寻宝》在游戏功能区域上，划分为7个功能区域（如图3.5），分别是角色信息栏、任务区域、聊天区域、切换地区栏、地图和快捷跳转栏、主功能区域、经验值。

把主功能区域放置在右下角位置，是根据大部分手游玩家的操作习惯设置的，方便玩家更快的上手游戏。

主界面使用了偏棕色系的颜色，制造出古旧的感觉。

图3.5

4.二级界面

通过主功能图标点击进入二级界面，二级界面是主界面中的功能的扩展界面。

以角色羁绊界面为例，要根据界面功能的需求设计板块（如图3.6），该界面采用的是窗口式布局，左半侧为角色装备栏，右半侧为羁绊技能栏，两侧同样大小会产生审美疲劳，设定比例4：

6。

色彩还是延续了主界面的棕色色调，把页签制作成木板效果，按钮绘制成石块，用红色提亮整体颜色，突出按钮的位置。

装备栏分别绘制了三种状态：

装备状态、未装备状态、未解锁状态。

在绘制上，导航栏设计以蓝灰为主，加入一些破损的细节刻画，增加高光和反光，不会显得太过灰暗。

左侧角色佩戴的装备品质框有四种状态（如图3.9），未放置装备、放置装备后、添加装备，未解锁状态，这四种品质框的交互状态都需要绘制。

右侧的标签栏分设概述、技能、升阶三种标签，信息栏展示的是主角的属性，内容包括战斗力，星级，数值栏以及所拥有的技能。

制作上，都是手绘而成，品质框是使用图形工具，绘制圆角矩形的基本轮廓，再按照设计思路进行逐步绘制，未放置装备的状态，是以剪影化呈现的，这时候就是加入扁平化的元素，通过钢笔工具，描绘出图标的剪影效果，再用图层样式进行调整，制作出合适的效果，因为背景框是暗黑色，所以图标颜色以亮色为主，又不能过于明亮，这样与背景框拉开，加强对比，让最终效果呈现的更加鲜明（如图3.10）。

图3.8

图3.9

图3.10

5.三级界面

三级界面也是确认界面，主要内容是弹出窗口和关闭，三级界面一般以二级界面为前提和背景，进行某一项选择操作，所以是以二级界面为背景界面，绘制出窗口。

因为背景已有关闭按钮，所以我将关闭方式设计为点击屏幕空白处关闭的文字表现形式，这也是时下手机游戏界面比较流行的关闭交互方式。

三级界面的设计注重的是简单明了的界面信息，采用窗口居中的方式，将二级界面背景压暗，从而突出三级窗口，分清界面的主次关系，并且控件制作要醒目明显，因此交互设计上要大一些，给手指提供充足的接触范围（如图3.11）。

图3.11

四、设计感想

通过这次毕业设计，我学习到了更多的新鲜知识，因为毕业设计制作的不是在学校学习的内容，接触的是一个全新的领域，而且十分考验手绘功底，对于只有微弱的美术基础的我来说，完成作品具有一定的难度，是一次对自我的挑战和能力的提升，为即将步入社会参加工作的我提供了一次热身经验。

同时经过这次的毕业设计作品，也暴露了平常我在学习上的问题以及对细节的忽视，我将不断地改进自己，完善自身，在设计制作的过程中，我曾遇到设计制作的瓶颈，一度质疑自身的能力不足，是否能够完成作品。

但是十分感谢我的校内、校外指导老师，以及身边的同学们，在他们的支持和帮助下让我重拾信心，取得了更多的进步，最终完成设计作品。

致谢语

这次从开始选择课题，中途决定去校外培训更换课题，到最终确定课题完成制作，这一路带来了一些困难和不便，我十分感激王老师和在校外培训的陈老师，感谢王老师在校内及时通知我各项进度，争取了充分的时间让我进行制作和完善。

在校外，公司的陈老师鼓励我不断实现自我突破，教会我许多关于游戏UI的知识以及从事工作的经验。

他们对工作的认真负责，对我的谆谆教导，都是我人生中的一大笔精神财富。

这次能够顺利完成毕业设计，同时也少不了周围同学的支持和鼓励，在我陷入困顿时激励我不断前进，给我加油打气，希望我们共同进步，都能拥有一个属于自己的美好未来。

参考文献

[1]仇晓香.手机游戏界面设计艺术风格的应用研究[D].云南艺术学院，2013，（5）.

[2]顾炎辉.论手机UI设计发展趋势[J].科技信息，2009，（33）.

[3]周丽雯.浅谈UI设计的发展与本质[J].文艺生活，2013，（08）.

[4]姜皖.浅析网页游戏中个性化界面交互设计[J].电子世界,2013（05）.

[5]孟建华.UI设计与应用[J].艺术设计，2009（4）：

49-50