带你进入游戏的世界:游戏界面设计游戏交互设计

带你进入游戏的世界:游戏界面设计游戏交互设计

目前市场上的手机游戏层出不穷。 人们在享受游戏带来的乐趣的同时,也欣赏游戏中的各种视觉效果。 这为热爱游戏的设计师提供了一个新的创作平台。 他们可以画出自己喜欢的游戏界面。 创造游戏的乐趣和美感主要取决于游戏UI设计师对游戏本身的理解。

什么是游戏界面设计

游戏界面设计根据游戏的特点,在游戏主界面、控制界面和弹出界面上显示必要的信息,通过合理的设计引导用户进行简单的人机交互操作,如图所示。

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

想要设计出好的游戏界面,不仅要有良好的美感,还要对人机交互有一定的理解。

一个好的游戏界面不仅要具有独特的视觉美感,还必须在设计上营造出游戏的层次感。 交互的合理性、用户的体验感、元素的合理应用都要把握得当,这样游戏才能给用户足够的沉浸感。 如图所示,分别是页游界面、网络游戏界面和手游界面。

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

什么是游戏界面设计

游戏交互设计上尽量不要繁琐,用最简单的方式引导用户操作即可。

原则一:游戏中的所有视觉元素都必须服务于游戏本身。 大多数用户体验来自于游戏本身。 游戏UI设计可以给游戏带来视觉冲击力,让用户更直观地体验游戏,如图所示。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

原则二:控制游戏的界面风格,注意色彩对界面的影响。 如果界面的颜色对比度太高,用户会感觉与游戏脱节。 当然,有些游戏会根据自身的特殊设置,大胆使用一些对比色来增加游戏的视觉冲击力。 颜色只是游戏设计的一小部分。 如果运用得好,可以起到锦上添花的作用。 如果使用不好的话,会给用户带来不好的视觉体验,如图。

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

原则三:导航界面的设计要简洁、简洁。 每个游戏都有其独特的操作特点。 如果想让用户在最短的时间内了解游戏的操作,就需要设计一些引导界面来帮助用户。 引导界面的表现非常直观。 只需要使用简单的说明图片和说明文字,就能够简洁明了地说明游戏的独特性和操作习惯。 它不需要太多花哨的元素来修饰它。 通过让用户轻松了解游戏的特点,就达到了引导界面的作用,如图所示。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

原则四:游戏设计师需要了解很多客观知识,比如布局、配色、人机交互等。 界面的设计控制应该集中于产品本身和产品的目标用户。 在了解产品的同时,需要对产品本身的各种因素进行设计,以实现自然流畅的人机交互。 让用户感觉舒服也是设计一款游戏的初衷,如图。

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

游戏界面的基本特征

设计一款美观、简洁、秩序感强、能够很好服务于游戏目的和内容的游戏,是每个游戏玩家所追求的灵魂。 游戏体验的层次感尤为重要。 制作一款具有明确目的的有趣游戏并不容易。

风格统一

在解释游戏风格之前,我们首先要了解游戏类型,因为游戏类型与游戏风格直接相关。 常见的游戏类型主要分为6类:动作类、冒险类、模拟类、角色扮演类、休闲类等。 它们每个都有数十个分支,形成一棵巨大的“游戏型树”。 根据游戏类型的不同,其风格可归纳为两大类:一类是写实类,一类是卡通类。 “现实游戏”没有普遍认可的术语,它只是专注于模拟现实生活中的物体,例如《模拟人生》系列。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

卡通类别没有明确的风格划分。 比如《魔兽世界》可以概括为欧美风格,《梦幻西游》可以概括为中国风格,《洛奇英雄传》可以概括为日韩风格等等。

制作ui游戏界面的图标方法_做游戏图标_ui游戏图标设计教程

风格是展示比赛的方法和手段。 它没有实质性的定义。 比如魔兽争霸也可以通过Q版卡通风格来展现,所以风格的走向直接关系到故事的发展背景和市场的需求。 只要控制住大方向就可以了。 确定了风格的方向后,一定要注意此类风格元素的使用,不要试图用过于跳跃的元素来搭配确定的风格。 整体游戏风格控制必须统一,并注意游戏界面、图标、按钮和文字的搭配和使用,如图所示。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

在设计这个界面之前,首先要收集相应的材料。 在选择素材时,一定要与游戏的风格相匹配。 比如如何展示图标来展现神奇的效果,如何处理书籍来展现厚重感和沧桑感。 、如何搭配色彩来体现财富和高贵气质等,如图所示。 当设计师锁定这些细节之后,这些元素的排列组合就成为我们的主要视觉。

制作ui游戏界面的图标方法_做游戏图标_ui游戏图标设计教程

视觉交互的重要性

如何才能更好地引导用户关注游戏中的信息,更好地让用户高频次点击热点。 为了实现这一目标,我们需要在人机交互和视觉交互方面达成一致。 热区的实现是交互设计中必须考虑的问题。 让用户自然地体验游戏而不影响游戏画面的美观,才是交互设计师的价值所在。 交互操作也必须依赖于UI设计的视觉展示,设计的元素必须引人注目,同时又不影响游戏的整体效果。 因此,UI设计师在设计中应尽量简单,消除复杂性,让用户直观地理解功能的含义。 这是最好的处理方法。

比如你刚刚得到的原型图可能是下图的样式。 这样的原型图可能只是产品经理对于这个界面的初步想法。 这个时候UI设计师就应该主动和产品经理沟通,保证自己的理解和产品经理的理解。 本来的意思是一样的。

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

UI设计师第一次创建的效果可能如下图所示。 这种设计完全是根据产品经理的意愿。 虽然已经满足了功能需求,但是不适合用户的喜好和界面的整体效果。

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

因此,UI设计师需要在此基础上进行进一步的调整,比如将必要的文字变成图标,简化可保存的功能,以便用户能够快速体验游戏带来的乐趣。 最终效果如图所示。 。

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

如何绘制蓝色小怪物图标

在游戏界面设计中,风格的把控尤为重要,本案讨论的系列卡通图标图对风格的统一有着严格的要求。 希望通过本案例的学习,大家能够进一步提升对游戏图标绘制方法的掌握,更加熟练地使用软件设计出符合游戏需求的图标。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

本案例的配色方案

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

最终效果

详细步骤

分析:在绘制之前,首先要构思图标的基本形状。 比如一个图标是由几个图形组成的,各个图形之间的关系如何排列等等。蓝色小怪物图标一般是由4层组成,如图所示。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

STEP 01 使用【椭圆工具】绘制一个椭圆,并将颜色设置为R95、G215、B250,然后使用【直接选择工具】选择圆的锚点进行调整,如图所示。

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

STEP 02 右键单击​​绘制的形状图层,选择[混合选项],勾选[斜角和浮雕],设置[深度]为95%,[大小]为50像素,[柔化]为0像素,[角度]为90度,取消勾选【使用全局光】,【高光模式】为屏幕颜色,设置高光颜色为R0、G210、B255,【不透明度】为100%,【阴影模式】为普通,设置阴影颜色为R78, G161、B253,【不透明度】为100%,如图。

制作ui游戏界面的图标方法_做游戏图标_ui游戏图标设计教程

STEP 03 勾选【内发光】,将【不透明度】设为75%,发光颜色设为R0、G138、B255,【块】设为0%,【大小】设为32像素,如图所示。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

STEP 04 勾选【渐变叠加】,将【不透明度】设置为100%,然后点击控制面板上的渐变栏,将【位置】处的颜色设置为R85、G196、B239,【位置】处设置为41%在【位置】92%处设置颜色为R0、G168、B255,在【位置】92%处设置颜色为R154、G249、B255,【角度】设置为90度,如图所示。

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

STEP 05 复制图形,然后按Ctrl+T,在属性栏中将比例设置为80%,然后右键单击图层,选择[清除图层样式],最后将颜色重置为R154、G232、B255 ,如图所示。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

STEP 06 右键单击​​缩小形状图层,选择[混合选项],勾选[斜角和浮雕],将[深度]设置为95%制作ui游戏界面的图标方法,[大小]设置为50像素,[柔化]设置为0像素。 【角度】为90度,取消勾选【使用全局光】,【高光模式】为屏幕颜色,设置高光颜色为R0、G210、B255,【不透明度】为100%,【阴影模式】为普通,设置阴影颜色为R78、G161、B253,【不透明度】为100%,如图所示。

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

STEP 07 勾选[内发光],将[不透明度]设置为75%,将发光颜色设置为R0、G138、B255,[块]为0%,[大小]为40像素,如图所示。

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

STEP 08 勾选【颜色叠加】,设置叠加颜色为R56、G210、B254,如图所示。

制作ui游戏界面的图标方法_做游戏图标_ui游戏图标设计教程

STEP 09 复制第一层的形状,然后右键单击该图层,选择【清除图层样式】,然后对复制的形状进行布尔运算【减去顶部形状】,得到月牙形状,将其设置填充颜​​色为R42、G88、B253游戏策划,如图所示。

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

STEP 10 右键单击​​月牙图层,选择【转换为智能对象】,然后执行“滤镜\模糊\高斯模糊”,将【半径】设置为5像素,如图所示。

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

第11步开始画眼睛。 按住Shift键,使用【椭圆工具】画一个圆,颜色设置为R36、G57、B94,如图所示。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

STEP 12 右键单击​​画好的圆形图层,选择【混合选项】,勾选【描边】,设置【大小】为10像素制作ui游戏界面的图标方法,描边颜色设置为R255、G255、B255,如图。

制作ui游戏界面的图标方法_做游戏图标_ui游戏图标设计教程

STEP 13 勾选【内阴影】,设置阴影颜色为R5、G43、B121,【角度】为120度,【距离】为0像素,【遮挡】为100%,【大小】为6像素,如图在图中显示。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

STEP 14 勾选【渐变叠加】,将【不透明度】设置为100%,点击控制面板上的渐变栏,在【位置】0%处将颜色设置为R0、G221、B247,将颜色设置为R0、G221、 B247 at [位置] 76% 设置颜色为R6、G27、B104,[角度]为111度,如图所示。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

STEP 15 使用【椭圆工具】画两个椭圆,颜色分别设置为R255、G255、B255作为头部的高光部分,如图所示。

制作ui游戏界面的图标方法_ui游戏图标设计教程_做游戏图标

第16步 上部完成后,画出下部的触手。 使用【钢笔工具】画出触手。 注意不要画得太长,把握好整体效果,如图。

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

STEP 17 右键单击​​绘制的触手图层,选择[混合选项],勾选[内发光],然后将[不透明度]设置为100%,将发光颜色设置为R0、G135、B255,[块]设置为0% ,【尺寸】为30像素,如图。

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

STEP 18 勾选【渐变叠加】,将【不透明度】设置为100%,点击控制面板上的渐变栏,在【位置】13%处将颜色设置为R85、G196、B239UI界面,将颜色设置为R85、G196, B239在[位置]41%处设置颜色为R0、G168和B255,在[位置]92%处设置颜色为R154、G249和B255,将[角度]设置为90度,完成绘图的蓝色小怪物图标。 最终效果如图所示。

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

新书推荐

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

前言和目录

做游戏图标_制作ui游戏界面的图标方法_ui游戏图标设计教程

ui游戏图标设计教程_制作ui游戏界面的图标方法_做游戏图标

做游戏图标_ui游戏图标设计教程_制作ui游戏界面的图标方法

ui游戏图标设计教程_做游戏图标_制作ui游戏界面的图标方法

文章来源:http://mp.weixin.qq.com/s?src=11×tamp=1701327945&ver=4927&signature=Xd74Fl1NdEYni6FFAHjuetjLlru4w4pxEPq8UYK79xbV03yIqGuzWRyMcp-YxdSOeAPn0xWDSBaINaBhAKKFlvKlprXHaUnckYzvpp3efS5Lq3TWZLpl5xb3KlgwbCas&new=1