【美术专题】游戏UI设计（下）

一.如何设计

游戏界面设计，其设计目的以功能性为主，视觉性为辅。游戏界面设计需根据游戏特性传达主次信息、规划操作界面和互动模式，通过合理的设计，引导用户进行方便快捷的操作。

游戏界面设计，功能性为主，视觉性为辅。设计的时候要根据游戏的特性，来传达主次信息，规划操作界面和互动模式，通过设计引导玩家游玩。一个好的界面得兼顾美观和易用这两个条件，符合这两个条件才能给玩家足够的代入感。

下面我们先来看几个比较好的案例分析。

下图界面用的是对称式的布局，界面非常的平衡，文字底板都做了斜切式的设计，有很强的拼接感。界面背景的颜色很亮，所以界面底板的颜色用了黑色透明底板，可以从亮背景中突出出来。

左侧界面UI控件都是围绕着界面四周来布置的，这么布局可以提升玩家的游戏体验，界面的UI控件采用的高饱和度配色，使整个界面的氛围非常的明快活泼。

下图这个界面值得我们参考的是它对整体UI控件的把控，界面UI控件都是围绕着界面四周来布置的，这样的布局可以提升玩家的游戏体验，在颜色上都是采用的高饱和度配色，使整个界面的氛围非常的明快活泼。这个界面的布局方式和这种高饱和度的配色也都值得我们来学习的。

学会合理的运用高饱和度配色能够对界面起到画龙点睛的作用。

下图界面是一个开始游戏的界面，整个界面采用的墨绿色的的背景，在墨绿色背景上点缀一些小面积的高饱和度颜色，使整个界面对比非常的强烈。界面的LOGO设计的非常的讲究,整个LOGO采用的折纸风格来设计的，在配上旁边的黄色小方块，与游戏的主题很契合。

下图界面的配色非常的明快活泼、轻松休闲。因为是竖屏的游戏玩法，所以界面中所有的UI控件都集中在界面的上部，使整个界面更加的易于玩家操作。

这两个界面，右侧的界面是开始游戏的界面，整个界面采用的也是对称式的布局，使界面看起来非常的稳定、扎实。界面的的LOGO和开始游戏按钮都用了高饱和度的颜色，使整个界面的对比非常强烈。

在这个界面里，LOGO的设计算是一个亮点，它采用了折纸风格的设计，现代感十足，再搭配上旁边的黄色几何小方块，使整体界面在符合游戏主题的同时显得时尚简约。

上图这个界面跟前面几个有所不同，整体界面的UI控件都集中在上部，这么设计是根据游戏特殊的竖屏玩法来服务的。（不同的游戏玩法界面的布局也会有所区别，所以具体的界面布局得根据游戏玩法来定）

再看这个界面的整体效果，整体的颜色都采用了高饱和度来制作，使界面的整体氛围轻松活泼。符合游戏主题。（所以我们在制作中的配色也得根据游戏的主题风格来定义）。

下图界面的UI控件整体集中在界面的上部，有利于玩家的竖屏游戏体验。界面背景配色采用的是比较强烈的黑白对比配色，界面的UI控件采用的是高饱和度橙黄色配色，配合上界面的暗色背景显得UI控件非常突出。

下图界面是一个开始游戏界面，界面的整体布局采用的上下对称式的设计，界面的配色整体比较干净。界面中的一些图标和控件都用了深灰色，在浅色背景的衬托下，非常的突出。

这两个界面，第一个界面的UI控件整体集中在界面的上部，有利于玩家的竖屏游戏体验。界面背景配色采用的是比较强烈的黑白对比配色，界面的UI控件采用的是高饱和度橙黄色配色，配合上界面的暗色背景显得UI控件非常突出。

第二个界面是一个开始游戏界面，界面的整体布局采用的上下对称式的设计，界面的配色整体比较干净。界面中的一些图标和控件都用了深灰色，在浅色背景的衬托下，非常的突出。

两个界面使用的这种强对比的配色方法，都是值得我们学习和借鉴的。

我们的案例分析差不多也讲完了，现在我们来总结一下这些案例的共性。

大家看到我屏幕中的这些界面，和前面的界面都一样是简约扁平的风格。这种界面绘制方法简单，操作快捷，容易出效果，符合现在大众的审美。大家也知道，市场上每年的流行趋势都有所不一样，大众审美也在逐步提高。所以，希望大家制作游戏界面的时候，能尽量往这个方向多研究、靠拢。

介绍了这些比较有参考价值的界面案例，那接下来，我们来看一下，怎样去设计一个简单界面。

案例-农场经营模拟UI

设计制作农场经营模拟UI界面，主要功能是游戏操作与各功能入口。

一开始，我们想要做一个游戏界面，首先在确定好游戏类型的同时，需要一个初步的界面策划案，如图，或是去网上搜一下其他同类游戏的界面布局，直接拿来借鉴一下。

如图所示，我们要设计一个农场经营模拟游戏的主界面，首先确定好整个界面的主要功能为游戏操作和各功能入口。

我们在设计界面的时候一定要先想明白策划案再来进行设计，这样才能清晰制作逻辑。现在我们来分析一下这个策划案，左侧这张图就是我们做好的界面策划案，先确定这个界面的布局，根据

游戏类型，UI控件围绕着屏幕四周，这样的布局很符合玩家的操作习惯。

界面的金币、地块等资源信息放在了左上角，玩家可以对金币和地块资源进行一些操作，玩家列表在界面的右上角，这样可以很直观的在玩家列表中看到一些关于自己和其他玩家的信息。

界面下方，分别是玩家的等级经验值，操作图标和一些功能图标按钮，因为这三种控件不是同一种控件，所以他们的距离会分隔的远一些，互不干扰。

分析完整个策划案，我们开始寻找一些同类型游戏的参考素材。

在找好素材之后，我们就可以开始绘制这个界面。

1.从界面上部开始设计，左侧是一些资源类信息，右侧是玩家列表。

2.设计界面的下部，等级经验值和操作图标。

3.设计界面下部右侧的功能图标按钮。

这个界面的整体风格我采用了最近比较流行的Q版扁平风格进行设计，根据个人制作习惯，我从界面的上部开始绘制，先绘制出了左上的资源类信息底板和图标，底板采用了高纯度的颜色来进行搭配，图标也同样用了Q版卡通的风格来绘制，突出了整个界面的清新感，强调了整个画面的设计风格。

出售和加号按钮属于充值按钮，所以我们用了很醒目的颜色来进行一个视觉上的突出，使玩家能一眼就看到他。

左侧做完之后，我们再来看看右侧，右侧的玩家列表底板用了黑色半透的设计，再把需要展示的信息独立出来的同时也不会跟整个场景脱节，在设计的时候，需要多注意对文字节奏的把控，主要是注意文字的排版，对齐和大小的变化。

经验值条，我们放在了左下角，采用了高亮度的绿色，这样设计比较符合玩家的习惯，因为大多数游戏的经验值条是绿色的，之后是中间的主要操作道具，耕地，浇水，收割。这三个图标分别采用了简单的锄头、水壶和镰刀的外形，这么设计是为了让玩家看到图标的时候，就能对图标有很直观的认知。这种经常操作得图标一定要做的简单易懂，不能太过复杂。

最后，我们来设计最右侧的功能图标按钮，功能图标按钮也是用剪影的形式来设计的，因为这三个图标和中间的图标不是属于同一类型的图标，所以在设计的时候要做出明显的区分。这三个图标的底板我们是用的圆形实体的白色底板，和中间的黑色半透底板不同。在图标的颜色上也做出了明显的区分，因为我们制作的是比较休闲的小游戏，所以，这几个功能图标都采用了比较明快的蓝色。

现在，一个简单的界面就已经做完了，让我们来看一下这个界面的整体效果。

这是花了两个多小时来完成的一个能够满足玩家基础操作的界面，画面风格也较为轻松明快。从分析策划案、找素材一直到完成界面制作，其实并不会太过复杂，主要是得把控一下整体风格的统一，一般就小游戏来说，最好的效果就是我前面提到的画面简洁，色彩明快。不要过多的去增加一些无用的元素堆砌。由于还有一些关于PS的操作，在这里我无法面面俱到的讲解，这里还得需要你们在制作的过程中自己多研究、琢磨、多去关注一下当下的潮流趋势。

现在，整个游戏UI的设计界面我们就已经讲完了，接下来让我们看看用户的一些设计案例，来做一个简单的分析。

二.用户案例分析

《梗人生》是用户自制的关于人生，关于选择的剧情游戏。

用户把界面设计的非常有趣味性，设计出了一种复古的风格。

1.界面的整体风格清新活泼，全程基本保持了风格的高度统一。

2.登录界面背景的设计元素搭配显得尤为美观。

部分建议：

游戏内的界面配色有些单调，可以考虑加一些跳跃性较强的颜色，比如把蛋糕图标设计为粉红色，或是把顶部的图标底变成黑色半透。这样游戏内部感受会丰富很多。右侧界面地板上的黑色的文字应该换成亮色的文字，这样玩家在阅读信息的时候很方便很多。

这是用户做的一个小游戏，玩法有点像AVG游戏，这个游戏界面设计的还是可以的，登录界面的配色很明快，开始游戏按钮还设计出了一个闪动的小动效，让人看着有点击欲望。又称的界面配色比较复古，图标的风格也较为统一，但有仇界面底板的文字最好不要使用黑色，把文字的颜色换的明亮一点，这样玩家在阅读的时候会更加清晰，不至于使眼睛过于疲劳，现在我们来看一下，这个界面可以如何的去优化。

!

下面的界面是优化后的界面，主要优化了文字和按钮的颜色，因为整个界面的底板都是偏黄褐色的底板，再配上纯黑色的文字，阅读起来会产生视觉上的疲劳，所以我把原来底板上的纯黑色文字都换成了比较浅的颜色，方便玩家的阅读。而且黄褐色的底板，配色比较沉闷，所以我这边增强了按钮得亮度，使界面显得明亮透气了一点。

《碰撞法则》是用户自制的一款躲避类小游戏。

用户设计的游戏界面恰到好处，整个游戏的界面风格统一。

1.界面风格色调统一，能体现出用户有一定的手绘能力。

2.登录界面的LOGO色彩搭配合理，用了黑色的粗描边，使文字和场景拉开层次。

部分建议：

游戏使用的背景颜色有些脏，可以考虑换个颜色干净些的背景或是把背景的饱和度调的高一些，游戏规则和道具按钮可以考虑提高对比做的更突出一点。

这个游戏是用户自制的一个躲避类的小游戏，界面的风格比较统一，登录界面LOGO的配色很响亮，但这个LOGO的尺寸太小了，无法突出整个界面的主题，可以在尺寸上做的再大一些，从这两个界面的绘制能看出玩家是有一定手绘基础的。但这两个界面的背景太过粗糙，颜色有些脏，这是界面制作中比较忌讳的，可以考虑换一个颜色干净一些的背景来搭配界面。

风格

界面设计的风格、结构必须要与游戏的主题和内容相一致，优秀的游戏界面设计都具备这个特点。

界面

界面设计要尽量简洁，目的是便于游戏玩家使用，减少在操作上出现失误。界面设计在操作上的难易程度尽量不要超出大部分玩家的认知范围，并且要考虑大部分游戏玩家在与游戏互动时的习惯。

配色

界面的配色非常重要，直接影响着界面的美观度，在配色的时候一定要遵循前面提到过的“631配色原则”，这样在给界面配色的时候，才能有理可循，搭配出合理的界面配色。

现在我们来做一个总结，我们在设计界面的时候，有几个问题是需要我们注意的：

第一点，界面的风格，结构一定要与游戏的主题和内容相一致，你设计什么题材的游戏，你的界面风格就要加入什么题材的设计元素，这样你设计的界面风格才能符合你的游戏主题

第二点，界面的设计一定要尽量简洁，让玩家便于使用，方便玩家的操作，还得考虑大部分游戏玩家游玩时的操作习惯。

第三点，界面的配色非常重要，直接影响着界面的美观度，在配色的时候一定要遵循前面提到过的“631配色原则”，这样在给界面配色的时候，才能有理可循，才能搭配出合理的界面配色。