《游戏界面设计》课件

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录游戏底框设计什么是底框底框的分类底框的设计要点什么是底框底框是承载界面内容的底部背景，起到的是一个容器的作用底框的作用功能性→美术性首要任务展示界面内容次要任务装饰美化游戏底框的作用底框的分类半透明底框扁平底框立体底框图形化底框半透明底框扁平底框立体底框图形化底框底框的设计要点1.底框的大小最大尺寸比屏幕稍小底框比屏幕稍小底框的设计要点1.底框的大小最大尺寸比屏幕稍小一级、二级界面用大底框，重要的界面用大底框，三级界面用小底框按照重要性设计底框大小底框的设计要点1.底框的大小最大尺寸比屏幕稍小一级、二级界面用大底框，重要的界面用大底框，三级界面用小底框底框要注意复用性，可设计3-5套通用界面反复套用底框的复用性底框的设计要点1.底框的大小最大尺寸比屏幕稍小一级、二级界面用大底框，重要的界面用大底框，三级界面用小底框底框要注意复用性，可设计3-5套通用界面反复套用底框注意伸缩性，以便套用时适应不同的内容底框的伸缩性底框的伸缩性底框的伸缩性底框的设计要点2.底框的颜色一个主色(环境色)1-2种辅色若干强调色(点缀色)底框的主色和辅色底框的点缀色底框的设计要点3.底框的装饰物多与环境色饱和度一致的强调色装饰物的美术性底框的设计要点3.底框的装饰物多与环境色饱和度一致的强调色兼顾功能性和装饰性装饰物的功能性底框的设计要点3.底框的装饰物多与环境色饱和度一致的强调色兼顾功能性和装饰性外形贴合游戏主题装饰物的外形选择底框的设计要点3.底框的装饰物多与环境色饱和度一致的强调色兼顾功能性和装饰性外形贴合游戏主题装饰物的平衡性装饰物的平衡性

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录一、什么是按钮二、按钮的作用三、按钮的外形四、按钮的状态五、按钮的设计要点什么是按钮在UI设计中，按钮是最重要的交互元素之一，通常存在于整个UI界面体系当中，如各种对话框、窗口及工具栏等。按钮具有明确的后续动作，是用户和系统之间对话的桥梁，用户通过点击按钮实现游戏功能，或完成界面的跳转根据界面制作风格的不同，按钮的样式也会随之改变按钮的作用某一类型的功能操作下一步的明确指引固定习惯，明确心理预期按钮的外形文字型(无边框)按钮扁平型按钮立体型按钮图标型按钮为了营造极简的界面氛围或对玩家进行偏好引导，某些扁平游戏的界面按钮，取消了边框显示。无边框型按钮扁平风格的游戏，必须配扁平风格的按钮。按钮的形状多为矩形和圆角矩形，填充纯色或渐变色，按钮无立体感或只有非常弱的立体感。扁平型按钮材质感稍重的游戏会搭配立体按钮，以便在底框上突出，吸引玩家的注意。立体型按钮如果界面较为复杂，按钮很多，则会选择将一部分按钮绘制为图标样式，这样可以让按钮更直观，并且避免画面单调。图标型按钮按钮的状态正常状态(激活状态)未激活状态按下状态禁用状态其他状态正常状态即为最普通最常见的状态，大部分界面上的按钮都是正常状态。正常状态激活状态和未激活状态存在于二级标签按钮和三级标签按钮。选中的标签按钮为激活状态，未选中的标签按钮为未激活状态。未激活状态所有的按钮，必须有按下状态，这也是为了严格遵守界面设计的一个原则“次次有回应”按下状态禁用状态即告知玩家，此按钮目前不可用。禁用状态一般都会将按钮灰度化处理，并且该按钮点击后不会有点击反馈。禁用状态按钮的设计要点1.看起来像个按钮按钮的设计要点1.看起来像个按钮具备按钮的形状---圆形、方形、图标形，最好带边框和文字按钮的设计要点1.看起来像个按钮具备按钮的形状---圆形、方形、图标形，最好带边框和文字具备按钮的质感---比底框厚一些扁平底框+扁平按钮或半立体按钮立体底框+更厚的立体按钮按钮的设计要点1.看起来像个按钮具备按钮的形状---圆形、方形、图标形，最好带边框和文字具备按钮的质感---比底框厚一些具备按钮的颜色---醒目、突出、有别于底框你浅我深、你深我浅、你素我艳按钮的设计要点2.按钮的颜色你浅我深、你深我浅、你素我艳(对比色配色)纸张色底框+鲜艳的彩色按钮的设计要点2.按钮的颜色你浅我深、你深我浅、你素我艳(对比色配色)纸张色底框+鲜艳的彩色蓝色底框+金色/黄色/蓝色按钮的设计要点2.按钮的颜色你浅我深、你深我浅、你素我艳(对比色配色)纸张色底框+鲜艳的彩色蓝色底框+金色/黄色/蓝色紫色底框+橙色按钮的设计要点2.按钮的颜色你浅我深、你深我浅、你素我艳(对比色配色)纸张色底框+鲜艳的彩色蓝色底框+金色/黄色/蓝色紫色底框+橙色按钮文字的颜色：你浅我深、你深我浅(同色系配色)按钮的设计要点3.1按钮的大小易于阅读易于点击避免误点按钮的设计要点3.1按钮的大小易于阅读易于点击避免误点按钮的设计要点3.1按钮的大小易于阅读易于点击避免误点按钮的设计要点3.2按钮文字的大小文字的尺寸为按钮的1/2按钮的设计要点3.3按钮的可伸缩性设计方便拉伸的按钮样式，能装下2-10个字符的文字为宜中间均匀，可拉伸中间有花纹，不可拉伸按钮的设计要点3.4按钮的复用性一套弹框方案，搭配固定的几个颜色的按钮，按钮只改大小、文字内容和长度按钮的设计要点4按钮的位置角落、四周等不影响阅读的位置

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录矢量图标的设计原则功能图标的设计原则物品图标的设计原则矢量图标的设计原则对称性：图案沿轴对称或中心对称，讲究重复、循环的美感矢量图标的设计原则平衡性：不能对称的图案，也讲究平衡，追求稳定矢量图标的设计原则可识别性：让玩家可通过外形了解职业特征，如果是较为冷门的职业，也要尽量采用便于理解的外形矢量图标的设计原则线条粗细适中：矢量图标在游戏中展示的面积较小，不可采用过粗的线条显得笨重，也不可采用过细的线条不易识别矢量图标的设计原则色彩简洁：多使用高明度的纯色或柔和的渐变色，避免花哨。矢量图标的设计原则边缘清晰：矢量图标多采用矢量软件绘制，必须保证边缘清晰功能图标的设计原则易识别性：功能图标的图形通常配合着文字出现，其外形必须与图标文字严格对应，不产生歧义功能图标的设计原则复杂性：功能图标为游戏功能的入口，要避免使用过于简单的外形，尤其是立体型图标。立体功能性图标，通常会使用两种图像的组合，或给图像赋予更多的细节功能图标的设计原则一致性：放置在相同位置的图标，必须具备相同的外形特征扁平型图标必须保证线条走向、粗细、大致形状、繁简程度保持一致立体型图标必须保证图标的角度、繁简程度、颜色风格一致物品图标的设计原则易识别性：物品图标的外形均从现实的货物、衣物、武器、道具演化而来，应遵循显示物品的造型规范物品图标的设计原则成长性：应按照物品等级，为该物品设计符合其等级的外观表现物品图标的设计原则成长性：应按照物品等级，为该物品设计符合其等级的外观表现物品图标的设计原则系列性：同一个物品，设计造型大致相同，不同细节不同颜色的多个版本物品图标的设计原则系列性：同一个物品，设计造型大致相同，不同细节不同颜色的多个版本物品图标的设计原则角色性/职业性：针对不同种族、不同外形、不同角色的物品，应有明显的外观区分骑士用物品原始人用物品野蛮人用物品古代女子用物品

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录游戏文字的分类游戏文本字的设计要点游戏美术字的设计要点游戏文字的分类文本文字美术文字展示游戏弹框具体内容，对各功能进行说明，并引导玩家操作展示游戏弹框标题、按钮内容、战斗提示及游戏LOGO，需进行适当地强调和美化。游戏文本文字公告、邮件、聊天框内容、任务说明、道具说明等说明内容由程序调用，文字内容并不重要文字的排版范围、位置、字体、大小、颜色比较重要文本文字是不带任何效果的游戏标题文字展示各种弹框标题大部分为美术文字，小部分为文本文字需要放大、突出、设计各种效果游戏战斗文字游戏战斗期间出现的各种怪物提示、数字、招数和道具的名称要体现战斗中的节奏感和打击感，渲染战斗的紧张氛围不能太过于花哨，会加重视觉负担游戏LOGO文字出现在游戏首屏，非常重要展示游戏名称，美化画面外形尽量美观，与背景搭配协调游戏文本字的设计要点尽量不要添加效果放置在底框中间位置，周围适当留白但不宜太空旷游戏文本字的设计要点字体设置为黑体、圆体、宋体、楷体等常规字体，尽量不要使用特殊字体游戏文本字的设计要点正文文字使用“你浅我深、你深我浅”的配色原则关键字使用鲜艳、醒目的互补色或对比色游戏文本字的设计要点文字的大小使用双数正文文本最小不要低于20号，标题文本最大不要超过50号正文部分，小标题部分的字号应略大于正文，重要信息的字号应略大于非重要信息游戏美术字的设计要点内容简洁，不超过十个字如果字数过多，要分成两排显示文字大小通常超过50号字体可采用较粗的特殊字体游戏美术字的设计要点遵循错落有致的排版原则，可通过斜切、缩放、位移、笔划连接或延伸等技巧对文字进行适当变形重要的文字放大，用显眼的颜色；普通文字缩小，用一般的颜色游戏美术字的设计要点颜色鲜艳醒目，可使用各种样式或特效突出文字

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录游戏LOGO的设计要点游戏LOGO的设计要点突出、醒目，是首屏画面的视觉中心位置放置于画面的上方正中心或上方留白处游戏LOGO的设计要点排版尤其需要“错落有致”、“参差不齐”，通过缩放、位移、添加副标题等手段，营造LOGO的节奏感注意文字的平衡，通过调整文字大小、位置或添加装饰物来获取LOGO的平衡游戏LOGO的设计要点LOGO字体选择较粗的字体(基础字体)，体现LOGO的气势基础字体的选择要符合游戏的特征，现代或科幻游戏使用硬朗的现代的字体，古风游戏使用书法字体，卡通游戏使用圆润可爱的字体，欧美游戏使用端庄古典的字体游戏LOGO的设计要点LOGO文字可通过连接、延伸、变形或笔画替换，得到更独特的文字外形添加各种效果对文字进行美化添加装饰物使LOGO更加丰富

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录创建人物界面的设计要点商城弹窗的设计要点结算弹窗的设计要点创建人物界面的设计要点界面风格可与游戏内部风格脱节，基本上是全屏型界面创建人物界面的设计要点界面风格可与游戏内部风格脱节，基本上是全屏型界面界面重点：展示信息，营造环境基本元素：职业选择、性别选择、人物展示、属性介绍、创建按钮通用布局：左-职业选择，中-人物展示，右-属性介绍商城弹窗的设计要点要有华丽的店招和宽裕的商品展示区可设计类似货架、展架的外形，增加玩家购物的沉浸感商城弹窗的设计要点要有华丽的店招和宽裕的商品展示区可设计类似货架、展架的外形，增加玩家购物的沉浸感打折促销商品或设计师最希望玩家购买的商品应放在最醒目的位置，并添加明显的促销信息商城弹窗的设计要点要有华丽的店招和宽裕的商品展示区可设计类似货架、展架的外形，增加玩家购物的沉浸感打折促销商品或设计师最希望玩家购买的商品应放在最醒目的位置，并添加明显的促销信息商品太多无法全部展示时，一定要添加半行展示效果结算弹窗的设计要点结算弹窗常用于关卡类战斗，分为胜利结算和失败结算胜利结算的通用布局：文字标题、战斗评价、战斗道具、继续按钮失败结算的通用布局：文字标题、战斗评价、升级建议、继续按钮结算弹窗的设计要点结算弹窗分为胜利结算和失败结算胜利结算的通用布局：文字标题、战斗评价、战斗道具、继续按钮失败结算的通用布局：文字标题、战斗评价、升级建议、继续按钮界面重点：渲染胜利的欢乐气氛或失败的颓丧气氛，胜利界面欢快明亮，失败界面灰暗颓丧

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录游戏弹窗的定义游戏弹窗的类型游戏弹窗的设计要点游戏弹窗的定义游戏中，由主界面或进行界面/战斗界面的功能接口跳转过去的，实现游戏功能的窗口及后续窗口，即称之为游戏弹窗。游戏弹窗大多数为玩家主动触发，少部分为被动触发，如有些游戏会在运行游戏前出现更新提示弹窗，在玩家登录后自动弹出一些活动弹窗，吸引玩家注意。游戏弹窗的层级点击不过四原则：用户为实现某个功能，最多只能忍受4次操作一级弹窗→二级弹窗→三级弹窗一级弹窗+分类标签→三级弹窗一、二级弹窗展示，三级弹窗执行二级标签的层级分类标签的7±2原则：人脑能同时处理信息的极限一般为7个，最多不超过9个。受移动设备的影响，二级分类标签以5-7个为宜双重二级标签商城、宠物、任务等分类较细的弹窗，允许出现双重二级标签主要和次要二级标签摆放方向不宜相同，通常采用一类标签横向摆放，另一类标签纵向摆放的方式游戏弹窗的分类常规弹窗特殊弹窗展示游戏主要功能，如人物属性、背包仓库、任务、社交、工会、商城等。格式较为中规中矩，用于展示界面内容、实现游戏功能。展示活动促销相关的内容，如情人节、春节、中秋、限时抽奖等。格式较为自由，有较重的设计感，用于展示一些带噱头的活动，吸引玩家注意。常规弹窗的分类弹窗型界面全屏型界面有确定的边框，所有的弹窗内容都在边框内显示，非特殊情况不可超界。没有确定的边框，所有的内容铺满整个屏幕。游戏弹窗的混用弹窗型界面和全屏型界面混用5-7套同风格的界面混用特殊弹窗单独设计游戏弹窗的造型设计要点根据线框图构思弹窗外形针对游戏风格设计有特色的弹窗框架古风游戏：中国古代建筑、家具、卷轴、书信欧美游戏：羊皮纸、木板、石板、欧洲古代建筑、家具、书籍科幻游戏：科技感的发光弹窗、扁平弹窗游戏弹窗的颜色设计要点选择让人舒适的底色作为主色选择主色的对比色或邻近色作为辅色，且必须深浅搭配选择各种鲜艳亮眼的互补色或对比色作为点缀色游戏弹窗的布局设计要点标题栏置于顶部正中或左上角，以上为尊，以左为尊标签按钮置于两侧，双重二级标签进行横竖布局执行按钮置于右侧和底部游戏弹窗的布局设计要点弹窗型界面，使用关闭按钮并放置于右上角全屏型界面，使用返回按钮并放置于左上角游戏弹窗的其他设计要点设计7±2套方案进行复用，不同的方案保持色调、造型、装饰物的一致弹窗要有良好的伸缩性弹窗后方的画面要调暗或柔化

任课教师：樊朴

联系方式/p>

游戏界面设计GameICONDesign目录休闲游戏研发流程界面设计前期工作界面流程设计核心界面美术设计一、休闲游戏研发流程休闲游戏研发流程立项阶段决定做什么游戏研发阶段相互配合实现游戏上线运营阶段根据市场反应完善游戏游戏研发项目组三大部门游戏策划部门游戏美术部门游戏程序部门制定游戏的玩法、规则、剧情、战斗细节等内容(游戏要怎么玩)绘制游戏的人物、场景、界面、道具等可视的外观(游戏看起来什么样)将策划和美术的想法用程序语言实现，让游戏能流畅运行(游戏能玩、能玩好)游戏美术部门四大分支游戏原画设计师游戏界面设计师游戏三维设计师游戏特效设计师绘制游戏二维效果图如人物、场景、建筑、装备、宠物绘制游戏界面、图标及icon将原画设计师的平面设计图转换为三维模型并给人物、动物等模型添加动作给人物、界面添加动态效果休闲游戏研发流程讨论立项阶段：做什么游戏，做什么样子的游戏策划部门决定游戏类型、游戏核心玩法美术部门决定游戏美术风格、界面风格程序部门搭建游戏基本框架休闲游戏研发流程前期研发阶段：丰富游戏的内容并让游戏能稳定地运行策划部门完善游戏核心玩法并添加附属玩法，丰富人物、剧情等游戏内容美术部门绘制核心人物、场景、道具等，并设计核心界面程序部门将更多的游戏内容及游戏的美术资源加入游戏程序中并保证运行休闲游戏研发流程后期研发阶段：完善游戏的内容并让游戏稳定运行策划部门完善游戏的细枝末节并不断地测试、修改美术部门制作所有美术资源，并设计所有的界面和图标程序部门不断地测试、优化程序，保持游戏稳定高效率运行休闲游戏研发流程上线运营阶段：根据反馈修改游戏并推出各种活动增加玩家体验策划部门修改游戏平衡、完善后期关卡、剧情、怪物，设计各种活动美术部门制作后期美术资源和活动相关美术资源程序部门继续优化程序，保持游戏稳定高效率运行二、界面设计前期工作处理游戏前期需求游戏类型：横版跑酷游戏游戏风格：Q萌卡通了解立项说明文档了解立项说明文档这里需要一些二头身Q版人物这里需要一些卡通横版场景游戏搜资了解跑酷游戏：1.跑酷游戏是竞速游戏的一种2.由玩家操作单一人物，在指定的赛道上通过移动和跳跃，躲避障碍物、获取增益道具的游戏方式。游戏追求通关速度或跑酷时间，游戏节奏紧张快速，可以让玩家肾上腺素飙升，获得紧张刺激的游戏感受。3.跑酷游戏分为竖版和横版游戏搜资搜集古今中外各种横版跑酷游戏的资料关注游戏的美术风格、界面布局和配色。观察2年内上线的q萌卡通游戏的美术风格和配色特点。观察所有横版跑酷游戏的界面布局和界面跳转流程。游戏搜资注意事项要有良好的游戏审美知道哪些是好的参考哪些是不好的参考知道哪些美术风格适合该项目知道哪些界面布局是流畅的、便于操作的游戏搜资注意事项养成良好的存放资料的习惯游戏搜资注意事项养成良好的批注资料的习惯对于大量的图片，可进行文档批注游戏搜资注意事项对单张图片，可在Photoshop中进行局部批注三、界面流程设