《游戏界面设计》02 游戏UI设计基本元素大集合

YOUXIJIEMIANSHEJI68%[F:]25.1GB17.0GBFreeYOUXIJIEMIANSHEJIYOUXIJIEMIANSHEJI一、游戏图标与平面软件类图标的区别在游戏UI设计中，所有图标首先是为了便于识别，然后在此基础上根据应用的诉求和风格进行细化设计。所以，游戏图标与平面软件类图标在本质上并没有什么不同，只不过侧重点会有些区别。【微课视频】游戏UI基本元素的分类YOUXIJIEMIANSHEJI游戏图标更侧重绘画和质感的表现，往往设计得非常复杂。游戏图标是画面优先的，这与功能性的软件图标有所不同。画面铺满整个图标、拟物化、高纯度的配色、有冲击力的构图都是为了抓人眼球，让人产生点开它的兴趣。暴雪娱乐公司制作的网络游戏《魔兽世界》的图标YOUXIJIEMIANSHEJI平面软件类图标不追求过于复杂的造型和质感，只追求简洁、辨识度高。好的图标设计可以让用户一眼就对应用的内容、风格有一个大体的感受，但这是很难的。

iPhone手机的默认图标YOUXIJIEMIANSHEJI游戏图标的风格也是千变万化的，是跟随着游戏UI的风格变化而变化的。但不管游戏UI是什么风格，它其实都是为整个游戏的操作服务的。萌系扁平风格游戏UI设计/2018年/陈颖YOUXIJIEMIANSHEJI科技风格游戏UI设计/2018年/陈颖YOUXIJIEMIANSHEJI二、游戏图标起稿准备阶段在图标设计与制作之初，设计师一般都会在速写本或计算机上从整体风格出发绘制草图。该草图要考虑整体的UI风格，从造型、颜色搭配等方面进行考量。这个过程中尤其要准备好参考图，这在草图绘制阶段尤为重要。（一）草图绘制YOUXIJIEMIANSHEJI笔刷的使用并不是固定的，没有某物品固定用某笔刷之说，而是需要随机应变的。游戏UI设计师应多尝试使用不同的笔刷，这样才能做出张弛有度、质感明确的图标。（二）笔刷的运用YOUXIJIEMIANSHEJI由于不同项目的应用平台不同，产品尺寸也并非固定。但常规来讲，图标一般都呈正方形，所以图标尺寸的长和宽一致。在制作初期，可将尺寸设置得相对大一点，如300像素×300像素、分辨率为72像素/英寸，以方便制作和绘画。（三）尺寸的设定YOUXIJIEMIANSHEJI三、游戏图标的分类在游戏中，装备图标是所有图标中数量最多的，玩家的所有物品装备都将在界面中以图标的方式进行展示。（一）装备图标【微课视频】游戏图标的分类项羽出装顺序装备图标/选自腾讯天美工作室的英雄竞技手机游戏《王者荣耀》YOUXIJIEMIANSHEJI（二）技能图标技能图标的状态往往与游戏策划对技能的设计相关联，所以不是一成不变的。一款完整的游戏中一般都会有一个整体的标准。技能图标的数量也是根据游戏的繁杂程度和设定来决定的。以《魔兽世界》为例，一个游戏职业的技能图标就可以有一百多个。技能冷却图标/选自暴雪娱乐公司制作的网络游戏《魔兽世界》YOUXIJIEMIANSHEJI系统图标一般出现在游戏主界面中，在游戏中具有功能性和导向性作用，是为了方便玩家随时操作。常用的系统图标一般包括角色、背包、商城、好友、技能等。绘制这类图标需要强调与整体界面风格保持统一。（三）系统图标系统图标/选自原创游戏项目《川剧猪》/2019年/杨艳/指导教师：桂风娇YOUXIJIEMIANSHEJI（四）小物品图标在游戏中，小物品图标其实非常多，因为它是最基础的图标种类。此类图标一般都是游戏中的普通道具，相对比较朴实。小物品图标包括消耗类图标，如食品、金币、任务道具等。小物品图标/选自游戏《加油，唐七七》/2018年/李蕊、楚飘凡YOUXIJIEMIANSHEJI（五）指示类图标指示类图标在游戏中的目的性极强，就是为了给玩家指明方向。绘制这类图标时一定不能天马行空地想象，要结合生活中的一些具有明显指示的标识类图标去设计。这类图标可以用文字或概念性的图像来表示，如游戏中的鼠标指针图标。游戏鼠标指针图标/选自暴雪娱乐公司制作的网络游戏《魔兽世界》YOUXIJIEMIANSHEJI（六）桌面图标桌面图标又称APP图标，具有明显的标志性。在应用商店或游戏商城里，好的APP图标会一下子吸引住用户的眼球。设计这类图标时首先会针对不同的平台定制尺寸和规范，其次在内容上会把游戏或应用中的元素提取出来进行二次设计。游戏APP图标/选自重庆工程学院毕业设计作品《空之纪元》/2018年/李想YOUXIJIEMIANSHEJI桌面图标还有一个名字就是“icon”（图标）。ICON是一种图标格式，主要用于系统图标、软件图标等。这种图标的扩展名为*.icon、*.ico。常用的软件或Windows桌面上的那些图标一般都是ICON格式。《开心消消乐》图标《水果忍者》图标常规来讲，开始按钮是玩家在游戏中接触的第一个按钮。开始按钮一般在所属界面的占用面积最大，颜色最醒目，是辨识度最高的按钮之一。在制作时要注意，颜色尽量选择饱和度较高的颜色，最好与背景颜色呈对比色状态，这样方便玩家一眼辨识出来。1.案例简介YOUXIJIEMIANSHEJI四、原创游戏系统图标设计案例（一）Q版开始按钮YOUXIJIEMIANSHEJI接下来要制作的这个按钮是一个不规则的异形圆按钮，如图所示。这个按钮是可爱的风格，特点是颜色饱和度高，有悬浮效果。原创Q版开始按钮的最终效果【微课视频】原创游戏系统图标设计案例——Q版开始按钮YOUXIJIEMIANSHEJI2.案例制作过程（1）打开Photoshop，新建一个尺寸为300像素×300像素，分辨率为72像素/英寸的方形画布，设置【颜色模式】为【RGB颜色】，【背景内容】为【白色】，名称为“原创Q版开始按钮”，如图所示。在制作图标时，画布一般都呈正方形，这样方便后期程序的制作和导入。新建文档（原创Q版开始按钮）设置信息界面截图YOUXIJIEMIANSHEJI（2）在画布上随意拖动出一个颜色的渐变作为底色，方便后期制作投影，然后用【椭圆工具】拖动出一个正圆形，具体参数：【形状】，【描边】为“3”点，【W】为“88”像素，【H】为“88”像素。【椭圆工具】具体参数用【椭圆工具】拖动出形状YOUXIJIEMIANSHEJI（3）用【直接选择工具】对这个圆形进行节点拉伸，可以直接把整个圆形拉成不规则的形状，得到一个大体的整体造型，如图所示。用【直接选择工具】拉伸节点YOUXIJIEMIANSHEJI（4）用【钢笔工具】增加节点，每单击一个点，就会多增加一个节点。节点越多，所形成的形状就越细致，从而达到自己心目中最理想的造型，如图所示。用【钢笔工具】调整节点YOUXIJIEMIANSHEJI（5）用【钢笔工具】绘制8个点，并将形状调整至不规则圆形，如图所示。将形状调整至不规则圆形YOUXIJIEMIANSHEJI（6）调整好形状后，将【填充】调整为“48%”，如图所示。这样方便做出半透明的效果，此时底色的作用就显现出来了。设置一个半透明的效果可以时刻提醒自己颜色搭配时的统一性安排，效果如图所示。调整【填充】参数半透明效果YOUXIJIEMIANSHEJI（7）重新建立一个图层，再同样填充一个大小一样的黄色色块，用【自由变换工具】将黄色色块调整至比底色色块小一圈的形状。这样做是为了多一个层次，如图所示。（8）在黄色图层再重复做一次上一步骤并继续缩小一圈，就可以得出一个选区。这样做是为了对后面的颜色过渡做出规划，如图所示。新建图层并填充做好选区后准备做渐变效果YOUXIJIEMIANSHEJI（9）找到一个比之前的明黄色更浅的淡黄色作为按钮的光泽呈现，在【渐变编辑器】中选择【预设】中的左起第二个效果，从淡黄色往逐渐透明的方向进行渐变，如图所示。最终效果如图所示。打开【渐变编辑器】设置好【色标】渐变效果YOUXIJIEMIANSHEJI（10）在制作渐变效果时需注意，应从上往下地渐变，上面色块受光更多，所以更亮；再从下往上地渐变，作为按钮的反光，适当有一点浅色即可，如图所示。适当调整渐变效果YOUXIJIEMIANSHEJI（11）使用【多边形工具】，将【描边】属性参数调整为“3”点，选择【平滑拐角】选项，这样就可以直接拖动出一个圆角边的三角形作为开始按钮的标志图形，如图所示。【多边形工具】参数调整YOUXIJIEMIANSHEJI（12）双击三角形图层，调出【图层样式】面板，选择【投影】选项，将【混合模式】调整为【正片叠底】，【不透明度】为“75%”，【距离】为“3”像素，如图所示。在【图层样式】中设置【投影】参数YOUXIJIEMIANSHEJI（13）在底色图层重复做一次上一步骤，如图所示。（14）加上简单的投影之后，游戏开始按钮就做好了，最终效果如图所示。调整底色图层技能图标是游戏中最常见的图标之一。每个技能图标都是根据相应的策划文案制作而成的，所以几乎不会重复使用。每个图标的辨识度一定要高，最好让玩家一眼就能根据图标的大体色彩或形状等特征辨识出来。图标中的内容要很好地诠释技能的意思，并且要有一定的特效体现。YOUXIJIEMIANSHEJI五、原创游戏技能图标设计案例（一）案例简介原创技能图标的最终效果新建文档（原创技能图标）设置信息界面截图YOUXIJIEMIANSHEJI（1）打开Photoshop，新建一个尺寸为256像素×256像素，分辨率为72像素/英寸的画布，设置【颜色模式】为【RGB颜色】，【背景内容】为【白色】，名称为“原创技能图标”。（二）案例制作过程YOUXIJIEMIANSHEJI（2）新建图层，填充为黑色，使用【钢笔工具】，将第二个属性调整为【形状】。（3）用【钢笔工具】制作出一个箭矢的形状。制作时可以将箭矢做成弯曲的形状，以增加箭矢的张力和动感。在箭矢的图层下新建一个图层，并勾出图中的选区。制作图标的基本形状勾出选区调整参数YOUXIJIEMIANSHEJI（4）因为要制作的是魔法箭矢，所以要在箭矢的下面增加魔法效果。在刚才的选区里填充一个绿色的渐变色来增加效果。制作特效颜色YOUXIJIEMIANSHEJI制作特效渐变效果调整渐变YOUXIJIEMIANSHEJI（5）在箭矢周围增强魔法效果才能体现出这个技能的特征，所以需在箭矢的周围增加两个镰刀形的选区，如图所示。增加两个镰刀形选区YOUXIJIEMIANSHEJI（6）将笔刷调整至如图所示的属性，选择一个有羽化效果的笔刷，注意【流量】等属性的调整。（7）画完后，调出该图层的【图层样式］面板，【外发光】选项中的参数调整参照图。效果如图所示。（8）新建图层，在图层中用有羽化效果的笔刷点缀大小不一的魔法效果。至此，一个技能图标就制作完成了，最终效果如图所示。羽化效果笔刷的选定YOUXIJIEMIANSHEJI【外发光】选项的参数调整外发光效果制作道具图标时需注意装备或物品道具图标的进阶设计，如初级食物、中级食物、高级食物等是有进阶式变化的。所以在制作道具图标时，除了基本的设计之外，还需要考虑更多的东西，一样需要做到让玩家一目了然的效果。YOUXIJIEMIANSHEJI六、原创游戏道具图标设计案例（一）案例简介【微课视频】原创游戏道具图标设计案例原创道具图标的最终效果YOUXIJIEMIANSHEJI（1）打开Photoshop，新建一个尺寸为300像素×300像素，分辨率为72像素/英寸的画布，设置【颜色模式】为【RGB颜色】，【背景内容】为【白色】，名称为“原创道具图标”。（二）案例制作过程新建文档（原创道具图标）设置信息界面截图YOUXIJIEMIANSHEJI（2）一般道具类图标都需要用笔刷先勾出大体形状，需要设计师有一定的造型功底。（3）制作好大致的线稿后，使用【钢笔工具】，将第二个属性调整为【形状】，将大致的形状勾出。草图制作【钢笔工具】的具体选项和参数YOUXIJIEMIANSHEJI（4）用【钢笔工具】勾出整个选区后，填充上基本的固有色，包括暗部的颜色，效果如图所示。（5）填充基本的固有色之后，在金属的受光部分用【内发光】图层样式做出渐变效果，属性设置参考图所示的数值。填充固有色YOUXIJIEMIANSHEJI【内发光】选项参数内发光效果YOUXIJIEMIANSHEJI（6）用选区做出宝石和金属的光泽。这一步可以根据设计师对材质的理解，或者找一张参考图做出材质的特殊光泽与高光，如图所示。做出初步质感YOUXIJIEMIANSHEJI（7）金属球大致上色后，要做出它的发光效果，增强质感。勾出金属球明暗交界线的选区。（8）做出明暗交界线之后，将其复制并调整大小，做出所示的4个金属球。增强金属球质感勾出明暗交界线的选区做出4个金属球YOUXIJIEMIANSHEJI（9）对整个道具添加描边的效果，以增强形式感，参数如左图所示。【描边】的参数设置YOUXIJIEMIANSHEJI（10）选择一个有羽化效果的笔刷，如图所示。在道具图层的最下面重新建立一个图层，给道具上一层红色放光的效果，如图所示。笔刷选定红色放光效果YOUXIJIEMIANSHEJI（11）为了体现道具的贵重程度，可以给道具添加一个【外发光】效果，参数供参考。（12）点上大小不一的金属点，做几个十字形的小星星来增强特殊效果。至此，道具项链就制作完成了。【外发光】选项参数YOUXIJIEMIANSHEJI文字是优美的语言，更是一种视觉手段，用来传达思维。在游戏设计中，游戏UI设计师要不断地与文字打交道。文字在游戏中的作用一般体现在两个方面：一是表达文字本身的含义，二是结合文字的外貌、形状进行可视化的图形设计。一、文字概述【微课视频】文字概述YOUXIJIEMIANSHEJI（一）表达文字本身的含义文字在游戏中主要发挥解释、说明的作用，如在游戏规则说明界面中，文字可以清晰地表达出游戏的玩法。这就是文字在表达它本身的含义，在体现它作为文字最原始的功能，进行信息和情感的传递。这里主要体现的是文字的易读性和清晰性。YOUXIJIEMIANSHEJI（二）结合文字的外貌、形状进行可视化的图形设计这里是说文字是有外在样貌的，设计师可以结合文字的外貌去做设计。这是一个由文字意思到文字外形的设计过程，是一个由内到外、由虚到实的思维过程。在对文字进行可视化的图形设计过程中，文字字形的审美价值不断提高，但同时也相应地减弱了文字的信息传递功能。玛雅文字①YOUXIJIEMIANSHEJI例如，早期的玛雅文字就是由图案性很强的复杂图形组成的。玛雅文字②YOUXIJIEMIANSHEJI二、字体的选择字体设计是平面设计重要的基本功，需要设计师掌握非常多与字体相关的知识。现在通常所说的字体主要是指利用计算机和平面设计软件生成的数字化的、外在形式特征统一的文字体系，包含中文、字母、数字等符号。常见字体可以简单概括为中文字体（宋体、黑体）、外文字体（装饰体、装饰线体、无饰线体）等。以宋体字为基础的字体变化设计YOUXIJIEMIANSHEJI（一）书写系统与字体风格字体分类方式有很多，按照书写方法可分为印刷字体、美术字体（艺术字体）、手写字体。拉丁文字和汉字是世界上使用人数最多、使用量最大的两个书写系统。以藏文为基础的字体变化设计YOUXIJIEMIANSHEJI在西方国家罗马字母阵营中，字体也简单分为两大类：Serif（衬线字体）和SansSerif（无衬线字体/非衬线字体）。Serif字体在字母的笔画起始及结束的地方有额外的装饰角，具有横细竖粗的笔画特点。SansSerif字体没有多余的装饰角，具有横竖宽度基本一致的特点。SerifSansSerifYOUXIJIEMIANSHEJI（二）字体结构字体设计与其他设计有相同之处，在设计空间的处理上尤其如此。将单独的一个汉字拆分来看会发现，汉字的结构主要由汉字各部分的大小、高矮、上下、左右位置的相互配合而成。YOUXIJIEMIANSHEJI1.左右结构左右结构有3种形式：左右相等、左宽右窄、左窄右宽。在书写和设计时，若字体左右不相等，那么左右比例都要偏让，应根据具体文字结构精心推敲。左右相等时，必须掌握左紧右松的原则。左右相等左宽右窄左窄右宽YOUXIJIEMIANSHEJI2.左中右结构左中右结构有左中右相等、左中右不相等两种形式。在设计时，左中右相等的汉字要注意笔画之间的穿插。左中右相等的字有“椰”“脚”等，左中右不相等的字有“衍”“凝”等。左中右相等左中右不相等YOUXIJIEMIANSHEJI3.上下结构和上中下结构上下结构有上下相等和上下不相等两种形式。上中下结构有上中下比例相等和上中下比例不相等两种形式。当设计上中下比例不相等的汉字时，上、中部一般应稍紧，偏让下部，与上下结构一样，要让下部稍大一点，这样达到的视觉效果会更好。上大下小YOUXIJIEMIANSHEJI4.半包围结构和全包围结构在设计半包围结构和全包围结构的字体时，一定要注意笔画的穿插、部件之间的比例及总体效果。半包围结构的字有“巨”“房”等，全包围结构的字有“国”“困”等。半包围结构全包围结构YOUXIJIEMIANSHEJI三、文字的编排与易读性文字的编排与易读性息息相关，好的文字编排会让观者阅读起来更轻松、更舒适。在视觉设计工作中，很多新手都只着重于色彩和图标设计。但实际上，制作一款用户体验感好的APP或游戏，文字的编排也是非常重要的。【微课视频】文字的编排与易读性（一）文字的编排YOUXIJIEMIANSHEJI设定内容的区域（一）文字的编排合理设置文字大小行对齐文字留白特殊符号的处理YOUXIJIEMIANSHEJI（二）文字的易读性游戏界面里的文字“意”大于“形”。也就是说，首先要让人了解这个字是什么意思，其次才是外形好看与否。设计文字时，文字的易读性往往占第一位，而不是视觉上好看。这意味着不要因为对文字外貌的过度设计而忽略了文字字形本身。游戏logo设计/选自手机游戏《拯救外星人洞穴》YOUXIJIEMIANSHEJI四、游戏主题文字logo设计游戏中也有logo，会经常出现在游戏的宣传海报、宣传视频中，是游戏综合信息的一个传递媒介。好的游戏logo可以传达出游戏的品质和内涵，玩家甚至会通过它看出游戏的世界观。YOUXIJIEMIANSHEJI五、原创中国风游戏logo设计案例（一）案例简介原创中国风《彗星撞地球》logo设计是“游戏logo设计”作业中张惠馨同学的课程练习作品，最终效果如图所示。“游戏logo设计”作业的题目是“对自己的名字进行游戏logo的组合与设计”，内容为：假设自己的名字是一款游戏，世界观、视觉风格由自己来设定；可以把个人性格、好恶、信仰、主要爱好等设定为自己的核心玩法，进行关键词提取，设计出具有美感和质感的游戏logo。游戏logo最终效果/选自原创游戏《彗星撞地球》/2019年/张惠馨/指导教师：桂风娇YOUXIJIEMIANSHEJI（二）案例制作过程《彗星撞地球》是一款以中国五行为背景的2D休闲对战类手机游戏。该游戏是以名字为主进行发散思维的成果，如图所示。游戏内容及玩法主要是根据中国五行相生相克的规律并结合宇宙五行进行设计。1.项目需求解读游戏名称的思维导图YOUXIJIEMIANSHEJI2.设计分析与执行（1）设计logo之前，设计者在充分了解游戏产品、游戏品类和游戏风格之后，提取了中国风、五行阴阳、对战类游戏几个关键词，再通过搜集相关的原画素材资料，最后从中提取了水墨、太极八卦等关键词，如图所示。太极八卦水墨笔刷YOUXIJIEMIANSHEJI（2）打开Photoshop，新建一个尺寸为800像素×800像素，分辨率为300像素/英寸的画布，设置【颜色模式】为【RGB颜色】，【背景内容】为【白色】，名称为“原创中国风游戏logo”，如图所示。新建文档（原创中国风游戏logo）设置信息界面截图YOUXIJIEMIANSHEJI（3）在新建的画布上，根据提炼的文字与相关的图片素材，随意进行草图绘制，一般会绘制出好几种不同结构组合。《彗星撞地球》的logo结构组合主要以太极八卦的圆为中心，“彗星”两个字以上下错位进行排列，组合时对两个字进行上下重叠，做出层次感。左下方“撞地球”3个字以竖排的模式进行排列。最后再观察市面上的同类型产品，分析它们的优劣势，做出最终版本的logo基础组合结构设计图，如图所示。

logo基础组合结构设计图YOUXIJIEMIANSHEJI（4）通过对字体素材的观察，将中国水墨文化与字体设计相结合，最终挑出最适合logo风格的字体进行设计。字体素材参考YOUXIJIEMIANSHEJI（5）视觉化的造型设计与色彩搭配。首先确定风格，为了达到宣传中国文化的目的，在造型和色彩搭配上都以传统的中国风为主，如图所示。这部分字体一定要注意选用免费的商用字体，如字由软件中的免费商用字体、阿里巴巴普惠体。先用与最终视觉风格相近的免费商用字体制作草图，然后在此基础上进行进一步设计。在游戏logo设计中，一般都会对字体进行二次创作。logo造型和色彩搭配草图YOUXIJIEMIANSHEJI（6）草图的配色和造型都还不成熟，因此需要在logo造型和色彩搭配草图上进行最后的细节调整。通过Photoshop软件中图层混合模式等做出logo的质感。然后将logo放入游戏加载界面中，观察与整体的游戏界面风格是否统一。加载界面/选自原创游戏《彗星撞地球》/2019年/张惠馨/指导教师：桂风娇YOUXIJIEMIANSHEJI一、游戏界面背景从广义上讲，游戏背景就是打开游戏后除功能性按钮之外的背景部分。游戏背景通常是全屏的，一般会被玩家忽略，但是从一个游戏UI设计师的角度来看，游戏背景的作用还是很大的，如需要与整体游戏风格相协调并服务于整体布局。YOUXIJIEMIANSHEJI游戏UI设计师就可以根据游戏原画、游戏场景等素材，再结合游戏界面框架图绘制出符合游戏世界观和游戏视觉风格的背景图，如图所示。游戏界面背景及UI效果图/选自川剧换装游戏《生旦净末丑》YOUXIJIEMIANSHEJI二、色彩的魔力（一）色彩搭配方法UI设计中的色彩搭配主要包括3种颜色：主色、辅助色、点缀色（点睛色/提示色/对比色）。公认的3种色彩搭配比例为6∶3∶1。游戏UI设计中会参考这个色彩搭配比例，但并不像APP那样要求严格按照这个标准。24色相环YOUXIJIEMIANSHEJI单色/同类色搭配单色方案是色彩搭配方法中相对简单的一种配色方案，用同一种色相，然后改变它的明度和饱和度再进行有效组合。邻近色搭配邻近色的配色方案是指在色相环中60°范围内的颜色中取一种为主色，其他颜色则用来丰富整体的色板。类似色搭配类似色是指色相环中90°范围内的颜色，如橙色和黄色。类似色搭配给人的感觉会比较活泼、色彩丰富，但整体颜色又统一、和谐。010203YOUXIJIEMIANSHEJI中差色搭配中差色是指在色相环中相距90°的颜色，如蓝绿和黄色、红色和橙色等。中差色搭配会让人感觉明快、活泼，色彩饱满的同时也比较协调。对比色搭配对比色是指在色相环中相距120°的颜色，如红色和黄色等。对比色搭配给人的感觉会比较刺激、醒目，让观者一下子就注意到。互补色搭配互补色是指在色相环中相距180°的颜色，如红色和绿色、黄色和紫色等。互补色搭配给人感觉很有力量，也非常具有视觉冲击力。040506YOUXIJIEMIANSHEJI多色搭配多色搭配就是多种颜色组合在一起，但往往不会超过4种颜色。4种颜色中会选取一种颜色为主色，其余颜色为辅助色。中性色搭配中性色搭配是指在色彩搭配时，使用明度值低于30%或高于70%的灰色，且不能使用平均明度的灰色。渐变色搭配渐变色搭配是指将单色或近似色用渐变的方式呈现出来。渐变色搭配是近几年非常流行的色彩搭配方案，在UI设计领域广泛应用。070809【微课视频】色彩搭配原则YOUXIJIEMIANSHEJI（二）色彩搭配原则视觉流是指看单个界面时的视觉流程。单单从眼动轨迹来看，眼睛关注物体时有一定的视觉规律，如从上到下、从左到右等。设计师在设计界面时要尽量考虑人眼的视觉归类，从而进行有效分区，把最重要的功能放到眼睛容易关注到的地方，相对不那么重要的按钮等就可以放在视觉盲区。1.视觉流引导YOUXIJIEMIANSHEJI色彩指向主要是指色彩的含义。在游戏UI设计中，设计师必须知道颜色在游戏中的一些常用指向。2.色彩指向相似相近是指风格统一、同类相近。这里的风格统一强调的不仅是造型上的统一，还有色彩上的统一。3.相似相近原则YOUXIJIEMIANSHEJI色彩偏向其实就是主色调。在游戏UI设计中，主色调确定之后，可以用其他颜色作为辅助色进行色彩层次的设计。4.色彩偏向和色彩层次游戏UI设计中往往会有一个主题，这个主题是跟随游戏世界观而来的。设计师要确定好整体界面的主题并提取元素和主色，即使每个界面的图案不同，但整体主题要一致。5.主题色彩和主题元素游戏展示设计/选自重庆工程学院毕业设计作品《空之纪元》/2018年/李想YOUXIJIEMIANSHEJI6.配色对比的应用明亮UI的配色原则明亮UI的配色原则主要是指内容比背景明亮，然后通过亮度的对比来突出内容的轮廓，从而使界面内容的辨识度更高。因此，在设计功能性按钮时，常常会使用明亮UI的配色原则来突出按钮的状态。暗色UI的配色原则暗色UI的配色原则是指在界面设计中尽量不使用黑色，否则容易看不到细节。如果黑色和白色一起用，也会让人感觉对比度过高。如果实在需要使用黑色，可以用暗灰色来代替。暗色UI的配色原则与中性色搭配有一定的相似之处。YOUXIJIEMIANSHEJI三、原创卡通可爱风格游戏主界面设计案例卡通可爱风格游戏主界面设计案例将会用到前面所讲解的游戏UI设计中的大部分元素。接下来会详细讲解界面设计时的设计思路、方法技巧和制作方式。最终设计效果如图所示。（一）案例简介原创卡通可爱风格游戏主界面的最终效果YOUXIJIEMIANSHEJI（1）打开Photoshop，新建一个尺寸1280像素×720像素，分辨率为72像素/英寸的画布，设置【颜色模式】为【RGB颜色】，【背景内容】为【白色】，名称为“原创卡通可爱风格游戏主界面”，如图所示。（二）案例制作过程【微课视频】原创卡通可爱风格游戏主界面设计案例新建文档（原创卡通可爱风格游戏主界面）设置信息界面截图YOUXIJIEMIANSHEJI（2）在画布上对布局进行草图绘制，定位这个界面中的主要信息以及功能键的位置、大小和摆放方向等，为后期制作做好铺垫。绘制草图时可以相对随意一点，按照自己的喜好进行，但是依然需要根据策划文案、游戏风格和用户习惯等进行考虑。界面的草图绘制YOUXIJIEMIANSHEJI（3）运用如图所示的矢量工具对草图进行下一步调整。注意每个矢量工具都有一定的属性调整，如【圆角矩形工具