搜索
游戏UI设计PPT模板：素材：背景：图表：下载：教程：资料下载：范文下载：试卷下载：教案下载：论坛：课件：语文课件：数学课件：英语课件：美术课件：科学课件：物理课件：化学课件：生物课件：地理课件：历史课件：目录010203045.1版式设计原则5.2登入界面5.3手游主界面设计《扁平化风格》5.4网页游戏主界面设计《Q版风格》055.5电视游戏主界面设计《欧美风格》015.1版式设计原则5．1.1游戏UI设计的原则及注意事项游戏界面的好坏直接影响着玩家对游戏的兴趣，所以很多游戏界面设计是需要花费一定心思的来吸引玩家的眼球，若一开始玩家对界面产生了好感，那么在其后的其它项评定后，他的内心就会趋向认同，所以游戏UI设计要遵循用户需求这一硬性原则，除了这个，游戏UI设计还有其他的原则及注意事项。游戏UI设计的原则主要有以下几个方便：1.设计简易界面设计要尽量简洁，目的是便于游戏玩家使用，减少在操作上出现错误。这种简洁性的设计和人机工程学非常相视，也可以说就是同一个方向，都是为了方便人的行为而产生的。在现阶段已经普遍应用于我们生活中的各个领域，幵且在未来还会继续拓展。2．代表玩家说话界面设计的语言要能够代表游戏玩家说话而不是设计者。这里所说的代表，就是把大部分玩家的想法实体化表现出来，主要通过造型.色彩.布局等几个主要方面表达，不同的变化会产生不同的心理感受，例如尖锐.红色.交错带来了血腥.暴力.激动.刺激.张扬等情绪，适合打击感和比较暴力的作品，而平滑.黑色.屈曲带来了诡异.怪诞.恐怖的气息，又如分散.粉红.嫩绿.圆钝，则带给我们可爱.迷你.浪漫的感觉，如此多的搭配会系统的引导玩家的游戏体验，为玩家的各种新奇想法助力。3．统一性界面设计的风格.结构必须要与游戏的主题和内容相一致，优秀的游戏界面设计都具备这个特点。这一点看上去简单，实则还是比较复杂的，想要统一起来，幵不是一件简单的事情，就拿颜色这点来说，就算我只用几个颜色搭配设计界面，也不容易使之统一，因为颜色的比重会对画面产生不同的影响，所以我们会对统一性做出多种统一方式方法，例如固定一个色版，包括色相.纯度.明度都要确定，另外就是比例.主次，等等，统一界面除了色彩还有构件，这也是一个可以重复利用和统一的最好方式，边框.底纹.标记.按钮.图标，等等，都是用一致的纹样.结构.设计，最后就是必须统一文字，在界面上是必不可少的，每个游戏只能使用1-2种文字，文字也是游戏中出现频率的方面，过多就不够统一。4．清晰视觉效果的清晰有助于游戏玩家对游戏的理解，方便游戏玩家对功能的使用。对于IOS平台上的游戏来说，为了达到更高的效率和清晰度，需要制作不同的界面美术资源，以达到目的，这也是目前无法解决的硬件与软件间的问题。5．习惯与认知界面设计在操作上的难易程度尽量不要超出大部分游戏玩家的认知范围，幵且要考虑大部分游戏玩家在与游戏互动时的习惯。这个部分就要提到游戏人群了，不同的人群拥有不同的年龄特点和时代背景，所接触的游戏也大不相同，这就要我们提早定位目标人群，把他们可能玩过的游戏做统一整理，分析幵制定符合他们习惯的界面认知系统。6.自由度游戏玩家在与游戏迚行互动时的方式具有多重性，自由度很高，例如操作的工具不单单局限于鼠标和键盘，也可以是游戏手柄.体感游戏设备。这一点对于高端玩家来说，是非常重要的，因为这群人不会停留在基础的玩法之上，他们会利用游戏中各种细微的空间，来表现出自身的不同和优势，所以我们要在界面的部分为这类人群提供自由度较高的设计。除了上述游戏界面设计的原则，在游戏UI设计中还需注意以下事项：（1）突出设计重点减少识别误区。（2）使界面简洁，体现重要信息；找到玩家习惯，隐藏冷门应用。（3）使用普通接受习惯，不轻易尝试新的设计规范。（4）减少学习信息，简化重复操作，节省空间加载资源。025.2登入界面设计构思本节实例制作扁平化风格的手机游戏登录界面。画面中主要采用冷暖色调，太空背景的冷色调对比时钟的暖色调，使画面色彩更加丰富。并用形状工具做出开始和存档游戏按钮以及完成文字制作。设计规格尺寸规格：1280像素×2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析将画面调整为蓝黑色的色调，使其具有太空的感觉。具体操作步骤如下:R:30、G30、B40R:30、G30、B40R:155、G42、B27最终效果如图5-1所示。图5-1效果图具体操作步骤如下:具体操作步骤如下:（1）创建画布，名称设为“登录界面”，宽度：1280，高度：2368，分辨率：300，颜色模式：RGB颜色，背景内容：白色，具体参数设置如图5-2所示。（2）创建新图层，如图5-3所示，选区前景色为【1e1e28】，参数【R】为30，【G】为30.【B】为40，设置面板如图5-4所示。图5-2新建画布图5-3填充颜色图5-4颜色参数具体操作步骤如下:（3）导入底图素材，将图层混合模式改为“变亮”，如图5-5所示。图5-5混合模式改为“变亮”图5-6选择“渐变”具体操作步骤如下:（4）创建新图层，利用渐变工具，添加效果，如图5-6所示，位置设为100，图5-7所示，背景制作完成，效果如图5-8所示。图5-7调整“位置”参数图5-7调整“位置”参数具体操作步骤如下:2．下面进入登录界面的图形设计（1）利用钢笔工具.圆角矩形工具.椭圆工具等，制作出如图5-9所示的闹钟图形。（制作方法详细过程见扁平化ICON制作方法章节）。（2）利用AI/ps软件，制作出游戏LOGO，本例LOGO使用字体变形.位移而成，大家可以根据自我发挥设计LOGO，如图5-10所示，在此不再赘述。（3）利用描边（图层效果），制作出游戏名称，如图5-11所示，描边结构大小：3像素，颜色为【9d4f3e】，颜色参数面板如图5-12,图5-13所示。图5-9制作闹钟图形图5-10制作游戏LOGO图5-11制作游戏名称具体操作步骤如下:图5-12设置【描边】参数图5-13颜色参数具体操作步骤如下:（4）利用圆角矩形制作出“开始”按钮.“读档”按钮，如图5-14所示，效果如图5-15所示。图5-14完成效果图图5-15效果图035.3手游主界面设计《扁平化风格》设计构思本节实例制作扁平化风格的手机游戏主界面。以太空作为背景，加入地图、人物、道具、时间等元素丰富画面。设计规格尺寸规格：1280像素×2368像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具设计色彩分析整个界面以蓝色调为主，以灰色、红色为辅。具体操作步骤如下:R:30、G30、B40R:30、G30、B40R:140、G182、B222R:74、G74、B74手游界面最终效果：图5-16手游界面最终效果具体操作步骤如下:具体操作步骤如下:1.打开photoshop,【ctrl+n】创建一个宽1280像素，高2368像素，分辨率300像素的画布，参数面板如下图5-17所示。2.创建新的图层，填充前景颜色，如图5-19所示颜色参数为【1e1e28】。3.导入底图素材，将【图层混合】模式改为【变亮】，如图5-20所示。图5-17photoshop创建画布设置面板图5-18填充前景颜色图5-19颜色设置面板图5-20修改图层混合模式具体操作步骤如下:4.创建新图层，利用【渐变工具】，添加效果，如图5-21所示。再运用图层面板下【创建新的填充】命令创建【色相/饱和度调整层】，如图5-25所示，单击【色相/饱和度】调整图层左边，打开图5-27所示的属性面板，将明度调整为-14.背景制作完成。图5-21选择渐变工具图5-22渐变设置面板图5-23渐变设置面板具体操作步骤如下:图5-24渐变效果图5-25创建新填充图图5-26色相/饱和度具体操作步骤如下:5-27色相/饱和度设置5-28图层状态栏图5-29效果图具体操作步骤如下:5.利用【圆角矩形工具】在图5-30中绘制一个游戏区域，添加【图层样式】添加【描边】大小为12，如图5-31所示，颜色【ffffff】;【内发光】混合模式正常，堵塞100，大小9，颜色【567ca1】，如图5-32所示；效果如图5-34所示。图5-30绘制游戏区域5-31描边设置图5-32内发光设置具体操作步骤如下:6.利用【矩形工具】，创建一个在游戏中的无用方块，位于图5-35的右下角的画面中，在此基础上，复制多一个图层，改变其颜色【ctrl+alt+g】叠加至矩形之上，完成扁平化影阴影，如图5-35所示。7.利用相同方法，制作可移动方块，因为要与无用方块区分，故不用制作阴影，在方块上制作出马路线让玩家清楚游戏玩法（运用左右上下移动方块组成一条道路），使用【钢笔工具】绘制出图5-37中所示路线。图5-34形状效果图5-35创建无用方块图5-36选择钢笔工具图5-37绘制路线具体操作步骤如下:8.把方块以及无用方块将图5-38中的游戏区域填满，效果如图5-38所示。9.利用【钢笔形状】工具，绘制图5-40卡通人物图形和图5-41火箭图形，丰富游戏主界面效果如图5-42所示。图5-38无用方块摆放效果图5-39选择钢笔工具图5-40绘制通人物图形具体操作步骤如下:10.接下来制作道具：同样利用【椭圆工具】形状工具来绘制如图5-43道具面板，效果如图5-45所示。图5-41绘制火箭图5-42效果图图5-43椭圆工具具体操作步骤如下:图5-44道具面板图5-45效果图具体操作步骤如下:11.运用调整图层功能【亮度/对比度】叠加至道具图层上，将道具区分为有道具以及没有道具的情况，并在道具上表明道具数量，没有该道具则不用注明，效果如图5-48所示。图5-47图层效果图5-46亮度/对比度图图5-48效果图具体操作步骤如下:12.加上时间.关闭灯按钮完成制作，效果如图5-49所示。13.最终效果，效果如图5-50所示。图5-49添加按钮图5-50最终效果图045.4网页游戏主界面设计《Q版风格》设计构思本节实例制作Q版风格的网页游戏主界面。参考蛋糕造型作为背包界面原型，使用斜面浮雕等效果，使画面更具立体感。设计规格尺寸规格：3600像素×1920像素使用工具：矩形工具、椭圆工具、钢笔工具、自定义形状工具、横排文字工具、渐变工具。设计色彩分析整个界面以米白色为主，添加一些彩色的小颗粒，使之更具色彩感。具体操作步骤如下:R:253、G233、B206R:228、G138、B128R:166、G103、B58R:159、G138、B119最终效果：图5-51效果图具体操作步骤如下:1.打开photoshop,【ctrl+n】根据手机尺寸1200*60，【新建】一个放大5-倍3600*1920大小的文档，先把背景填充黑色。新建图层，绘制一个圆角矩形填充颜色为【e4b780】，效果如图5-52所示。2.用钢笔在圆角矩形上方勾